/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS — Dani B LLC brand palette · WCAG 2.1 AA + color-blind compliant
   ──────────────────────────────────────────────────────────
   PALETTE HIERARCHY (v6.6 — formally documented)

   ▸ Slate family
     --bg-dark  #1F2D3D  Deep slate ............... HERO DARK (primary surface)
     --slate    #3B5169  Mid-slate ................ tint of hero (secondary accent on light)

   ▸ Sand family
     --bg-light #ECE9E4  Light sand ............... HERO LIGHT (primary surface)
     --sand     #D3CFC9  Mid-sand ................. tint of hero (secondary accent on dark)

   ▸ Supporting type
     --ink      #111111  Deep ink .................. type on light surfaces
     --paper    #FFFFFF  Paper white ............... type on dark surfaces / editorial canvas

   ▸ Accent
     --sage     #AFBF73  Sage ...................... CTAs + hover only (always paired with --ink)
   ──────────────────────────────────────────────────────────
   Contrast ratios:
     --paper on --bg-dark   = 13.8 : 1  ✓ AAA
     --ink on --bg-light    = 16.6 : 1  ✓ AAA
     --ink on --bg-paper    = 19.0 : 1  ✓ AAA
     --sage on --bg-dark    =  7.0 : 1  ✓ AAA
     --sage + --ink (CTA)   =  8.4 : 1  ✓ AAA (sage button with ink text)
     --slate on --bg-light  =  7.3 : 1  ✓ AAA (mid-slate label on sand)
     --sand on --bg-dark    = 10.4 : 1  ✓ AAA (mid-sand stat numeral on slate)
   No greys. Imagery: B&W → color on hover, with non-color secondary indicator.
   ══════════════════════════════════════════════════════════ */
:root {
  /* Foundation surfaces — three (v6) */
  --bg-paper:   #FFFFFF;   /* white — default editorial canvas */
  --bg-light:   #ECE9E4;   /* warm sand — proof surface */
  --bg-dark:    #1F2D3D;   /* deep slate — gravitas surface */
  --bg-card-d:  #2A3D52;   /* lifted slate — cards & stat blocks on dark */
  --bg-card-l:  #F5F2ED;   /* warm cream — cards on sand */

  /* Type colors */
  --ink:        #111111;   /* deep ink — primary type on light surfaces */
  --paper:      #FFFFFF;   /* paper white — primary type on dark surfaces */

  /* Brand accents */
  --slate:      #3B5169;   /* mid-slate — accents/labels on light only */
  --sand:       #D3CFC9;   /* mid-sand — accents/stat numerals on dark only */
  --sage:       #AFBF73;   /* CTA + hover only; never as text on light */

  /* Soft type — replaces all #666 / #333 greys */
  --soft-on-l:  #506478;   /* slate-tinted soft on light = 6.0:1 ✓ AA Large */
  --soft-on-d:  #C9C4BD;   /* sand-tinted soft on dark = 8.1:1 ✓ AAA */
  --body-on-l:  #2A3A4D;   /* near-slate body on light = 11.5:1 ✓ AAA */
  --body-on-d:  rgba(236,233,228,0.82);

  /* Borders & dividers */
  --line-on-l:  rgba(31,45,61,0.14);
  --line-on-d:  rgba(236,233,228,0.12);

  /* Card tints */
  --card-tint-l: rgba(255,255,255,0.55);    /* lift on bg-light */
  --card-tint-d: rgba(255,255,255,0.05);    /* lift on bg-dark */

  /* Legacy aliases — kept so existing inline styles still resolve.
     v6: --white now resolves to --bg-paper (true white) since white is
     the default canvas. Sand and slate are explicit. */
  --white:      var(--bg-paper);
  --body:       var(--body-on-l);
  --soft:       var(--soft-on-l);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Lato', 'Helvetica Neue', Arial, sans-serif;

  --max:    1120px;
  --pad-x:  72px;
  --nav-h:  72px;
  --chrome: 0;

  /* v6.2 — Image aspect-ratio tokens. Standardize per module type. */
  --ar-hero:        16/9;     /* full-bleed hero image */
  --ar-tile:        5/4;      /* Home work tiles + Work overview tiles (locked) */
  --ar-altrow:      1/1;      /* case study alternating image-text rows */
  --ar-stat:        1/1;      /* stat band cells */
  --ar-workstream:  4/3;      /* CS1 workstream cells */
  --ar-portrait:    1/1;      /* About portrait — square (v6.3) */
  --ar-fullbleed:   16/7;     /* concluding case-study full-bleed */

  /* v6.3.1 — Module height tokens. --tile-h matches the 1fr column width
     at max-width 1120 (each column = 560), so image cells render visually 1:1.
     Increasing slightly to 580 to give each text column a small breathing buffer
     so content fits without forcing the image off-square. */
  --tile-h:         580px;
  --tier2-row-h:    360px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--body-on-l); background: var(--bg-paper); -webkit-font-smoothing: antialiased; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ══════════════════════════════════════════════════════════
   IMAGERY — B&W on load, color on hover
   Non-color secondary indicator: subtle scale + ring
   Honors prefers-reduced-motion
   ══════════════════════════════════════════════════════════ */
img,
.img-ph,
figure {
  transition: filter 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}
img,
.img-ph {
  filter: grayscale(1) contrast(0.95);
}
figure:hover img,
figure:hover .img-ph,
.work-tile:hover .img-ph,
.work-card:hover .img-ph,
article:hover .img-ph,
.case-image-full figure:hover .img-ph {
  filter: grayscale(0) contrast(1);
}
figure:hover,
.work-tile:hover figure,
.work-card:hover figure {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  img, .img-ph, figure { transition: filter 0.2s ease; transform: none !important; }
}

/* Placeholder swatch — sand-tinted on light, slate-tinted on dark via parent class */
.img-ph { background: #C9C4BD; }                        /* warm tinted sand placeholder */
.img-ph::before {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 10px,
    rgba(31,45,61,0.06) 10px, rgba(31,45,61,0.06) 11px
  );
}
.img-ph-label { color: rgba(31,45,61,0.55); }
.img-ph-label.light { color: rgba(236,233,228,0.55); }

/* ══════════════════════════════════════════════════════════
   WIREFRAME CHROME
   ══════════════════════════════════════════════════════════ */
.wf-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 0 12px; gap: 2px;
  border-bottom: 2px solid var(--sage);
  min-height: var(--chrome);
}
.wf-label {
  font-family: var(--sans); font-size: 9px; font-weight: 900;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); padding: 10px 12px 10px 4px;
  border-right: 1px solid rgba(255,255,255,0.12); margin-right: 4px;
  white-space: nowrap;
}
.wf-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 9px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); padding: 10px 9px;
  transition: color 0.15s; white-space: nowrap;
}
.wf-btn:hover { color: #fff; }
.wf-btn.active { color: var(--sage); font-weight: 700; }

/* ── Pages ── */
.page { display: none; padding-top: var(--chrome); }
.page.active { display: block; }

/* ══════════════════════════════════════════════════════════
   SITE NAV — always white background
   ══════════════════════════════════════════════════════════ */
.site-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky; top: var(--chrome); z-index: 100;
}
.nav-logo { display: flex; align-items: center; gap: 16px; }
.logo-placeholder {
  width: 200px; height: 48px;
  border: 2px dashed rgba(31,45,61,0.25);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(31,45,61,0.40);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.logo-placeholder:hover, .logo-placeholder:focus-visible {
  border-color: var(--sage); color: var(--ink);
  outline: none;
}
/* .nav-name removed in v6 — logo carries the wordmark */
.nav-links { display: flex; gap: 40px; }
.nav-links a {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft-on-l);
  transition: color 0.15s, border-color 0.15s;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--ink); border-bottom-color: var(--sage); outline: none;
}
.nav-links .nav-cta {
  color: var(--ink); font-weight: 700;
  border-bottom: 2px solid var(--sage); padding-bottom: 2px;
}

/* v6.5 — Work mega-menu (hover-triggered, vertical-stacked dropdown, anchored to right edge) */
.nav-links li.has-mega { position: relative; }
.nav-links li.has-mega > a::after { content: ' ▾'; opacity: 0.7; }
.nav-megamenu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto;
  display: block;
  background: var(--bg-paper);
  border-top: 3px solid var(--sage);
  box-shadow: 0 16px 48px -16px rgba(31,45,61,0.22);
  padding: 24px 28px;
  width: 320px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 200;
}
.nav-links li.has-mega:hover > .nav-megamenu,
.nav-links li.has-mega:focus-within > .nav-megamenu {
  opacity: 1; visibility: visible;
}
.megamenu-col { padding: 0; border-left: none; }
.megamenu-col + .megamenu-col { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-on-l); }
.megamenu-label {
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--slate); display: block; margin-bottom: 12px;
}
.megamenu-col a {
  display: block;
  font-family: var(--serif); font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  padding: 6px 0; line-height: 1.35;
  border-bottom: none;
  transition: color 0.15s;
}
.megamenu-col a:hover, .megamenu-col a:focus-visible {
  color: var(--slate); border-bottom: none;
}
@media (max-width: 1000px) {
  .nav-megamenu { display: none; } /* fallback to /work overview on tablet/mobile */
}

/* ══════════════════════════════════════════════════════════
   SHARED UTILITIES
   ══════════════════════════════════════════════════════════ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

.overline {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 28px; display: block;
}
.overline-sage  { color: var(--sand); }
.overline-slate { color: var(--slate); }
.overline-soft  { color: var(--soft); }

.section-h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1; color: var(--ink); letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-h2.on-dark { color: var(--paper); }

.section-h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.2; color: var(--ink);
  text-wrap: balance;
}
.section-h3.on-dark { color: var(--paper); }

/* Widow protection — universal for serif headlines */
h1, h2, h3, .hero-headline, .case-hero-headline, .vp-row-headline,
.tile-title, .work-card-title, .moment-text, .cs-pull-band-text,
.about-statement-text, .case-content-h3 {
  text-wrap: balance;
}

.body-text {
  font-family: var(--sans); font-size: 17px; line-height: 1.75;
  color: var(--body-on-l); max-width: 660px;
}
.body-text.on-dark { color: var(--body-on-d); }
.body-text.wide { max-width: 800px; }

/* Image placeholders — base layout (color/filter set above) */
.img-ph {
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; width: 100%;
}
.img-ph::before {
  content: '';
  position: absolute; inset: 0;
}
.img-ph-label {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  position: relative; z-index: 1;
  text-align: center; padding: 20px; line-height: 1.7;
}

figcaption {
  font-family: var(--sans); font-size: 12px; line-height: 1.6;
  color: var(--soft-on-l); margin-top: 12px; font-style: italic;
}
figcaption.on-dark { color: var(--soft-on-d); }

/* Buttons — Sage CTA always paired with deep ink for AAA contrast */
.btn-sage {
  display: inline-block; background: var(--sage); color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 40px; transition: background 0.18s, transform 0.18s;
  border: 2px solid var(--sage);
}
.btn-sage:hover, .btn-sage:focus-visible {
  background: var(--ink); color: var(--sage);
  outline: none; transform: translateY(-1px);
}

.btn-ghost-dark {
  display: inline-block;
  border: 2px solid var(--paper); color: var(--paper);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 40px; transition: background 0.18s, color 0.18s;
  background: transparent;
}
.btn-ghost-dark:hover, .btn-ghost-dark:focus-visible {
  background: var(--paper); color: var(--bg-dark); outline: none;
}

.btn-ghost-light {
  display: inline-block;
  border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 40px; transition: background 0.18s, color 0.18s;
  background: transparent;
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
  background: var(--ink); color: var(--bg-light); outline: none;
}

/* Wix callout boxes */
.wix-note {
  background: rgba(175,191,115,0.1);
  border-left: 3px solid var(--sage);
  padding: 14px 20px; margin-top: 24px;
  font-family: var(--sans); font-size: 12px; line-height: 1.65;
  color: var(--soft-on-l);
}
.wix-note strong { color: var(--body-on-l); font-weight: 700; }
.wix-note.on-dark { background: rgba(175,191,115,0.12); color: var(--soft-on-d); }
.wix-note.on-dark strong { color: var(--paper); }

/* Tile link arrow */
.tile-link {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.tile-link::after { content: '→'; }


/* ══════════════════════════════════════════════════════════
   HOME — HERO
   ══════════════════════════════════════════════════════════ */
.home-hero {
  background: var(--bg-dark);
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
}
.hero-inner {
  padding: 80px var(--pad-x);
  max-width: var(--max); margin: 0 auto; width: 100%;
}
.hero-eyebrow {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 32px; display: block;
}
.hero-headline {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 7.5vw, 92px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--paper); max-width: 940px; margin-bottom: 40px;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(33px, 3.5vw, 43px);
  line-height: 1.45; letter-spacing: -0.01em;
  color: var(--soft-on-d);
  max-width: 680px; margin-bottom: 56px;
}
.hero-cta-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hero-scroll {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand);
}

/* HOME — VALUE CARDS */
.value-section { background: var(--white); padding: 112px var(--pad-x); }
.value-inner { max-width: var(--max); margin: 0 auto; }
.value-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start; margin-bottom: 80px;
}
.value-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; align-items: start;
}
.value-card {
  padding: 40px 36px;
  border: 1px solid var(--line-on-l);
  background: var(--bg-card-l);
}
.value-card::before {
  content: ''; display: block;
  width: 36px; height: 2px; background: var(--slate);
  margin-bottom: 32px;
}
.value-num {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--slate);
  margin-bottom: 16px; display: block;
}
.value-title {
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; line-height: 1.2; color: var(--ink); margin-bottom: 14px;
}
.value-body {
  font-family: var(--sans); font-size: 15px; line-height: 1.72; color: var(--body-on-l);
}

/* HOME — MASONRY QUOTES OVER DARK "PHOTO" BG */
.quotes-section {
  background: var(--bg-dark);
  padding: 120px var(--pad-x);
  position: relative; overflow: hidden;
}
.quotes-section::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px,
    transparent 1px, transparent 44px
  );
  pointer-events: none;
}
.quotes-header { text-align: center; margin-bottom: 72px; position: relative; }
.quotes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; align-items: start; position: relative;
  max-width: var(--max); margin: 0 auto;
}
.quote-card { background: var(--bg-light); padding: 44px 40px; border-top: 3px solid var(--sage); }
.quote-card:nth-child(2) { margin-top: 72px; }
.quote-card:nth-child(3) { margin-top: 36px; }
.quote-mark {
  font-family: var(--serif); font-size: 64px; font-weight: 400;
  line-height: 0.7; color: var(--slate);
  margin-bottom: 24px; display: block;
}
.quote-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.62; color: var(--ink); margin-bottom: 32px;
}
.quote-attribution {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--body-on-l);
}
.quote-attribution span {
  display: block; font-weight: 400; font-size: 11px;
  color: var(--soft-on-l); letter-spacing: 0.06em;
  margin-top: 4px; text-transform: none;
}
.photo-bg-note {
  text-align: center; margin-top: 56px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand); position: relative; opacity: 0.55;
}

/* HOME — STAT MOMENT */
.moment-section {
  background: var(--bg-dark);
  padding: 140px var(--pad-x); text-align: center;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.moment-text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7.5vw, 100px);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--paper); max-width: 960px; margin: 0 auto;
}
.moment-text em { font-style: italic; color: var(--sand); }

/* HOME — ALTERNATING WORK TILES */
.work-tile {
  display: grid; grid-template-columns: 55fr 45fr;
  min-height: 560px;
}
.work-tile.reversed { grid-template-columns: 45fr 55fr; }
.work-tile-img { overflow: hidden; }
.work-tile-img .img-ph { width: 100%; height: 100%; min-height: 560px; }
.work-tile-text {
  padding: 80px 72px;
  display: flex; flex-direction: column; justify-content: center;
}
.work-tile.reversed .work-tile-img { order: 2; }
.work-tile.reversed .work-tile-text { order: 1; }
.tile-overline {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 20px; display: block;
}
.tile-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px;
}
.tile-desc {
  font-family: var(--sans); font-size: 16px; line-height: 1.75;
  margin-bottom: 40px; max-width: 380px;
}

/* HOME — CLIENT STRIP */
.clients-section {
  background: var(--bg-card-l); padding: 80px var(--pad-x);
  border-top: 1px solid var(--line-on-l);
  border-bottom: 1px solid var(--line-on-l);
}
.clients-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 56px;
}
.clients-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--soft-on-l); white-space: nowrap;
}
.clients-list { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.client-name {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--slate);
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.client-name:hover { color: var(--ink); border-bottom-color: var(--sage); }

/* HOME — CTA */
.home-cta { background: var(--bg-dark); padding: 160px var(--pad-x); text-align: center; }

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════ */
.about-hero {
  background: var(--bg-dark); min-height: 76vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
}
.about-hero-inner { padding: 80px var(--pad-x); max-width: var(--max); margin: 0 auto; width: 100%; }

.about-intro { background: var(--white); padding: 120px var(--pad-x); }
.about-intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: start;
  max-width: var(--max); margin: 0 auto;
}
.about-photo figure .img-ph { aspect-ratio: 3/4; }

.about-statement {
  background: var(--bg-dark); padding: 140px var(--pad-x); text-align: center;
}
.about-statement-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(35px, 4.75vw, 63px);
  line-height: 1.38; color: var(--white);
  max-width: 840px; margin: 0 auto;
}
.about-statement-text em { font-style: normal; color: var(--sand); }

.about-timeline { background: var(--white); padding: 120px var(--pad-x); }
.timeline-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 80px;
}
.timeline-item {
  padding: 40px 0; border-top: 1px solid rgba(0,0,0,0.1);
  display: grid; grid-template-columns: 120px 1fr; gap: 40px;
}
.timeline-year {
  font-family: var(--serif); font-weight: 700;
  font-size: 17px; color: var(--slate); padding-top: 4px;
}
.timeline-role {
  font-family: var(--serif); font-weight: 600;
  font-size: 20px; color: var(--ink); margin-bottom: 8px;
}
.timeline-detail {
  font-family: var(--sans); font-size: 15px; line-height: 1.72; color: var(--body);
}

.about-outside { background: var(--bg-dark); padding: 120px var(--pad-x); }
.outside-inner { max-width: var(--max); margin: 0 auto; }
.outside-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 56px;
}
.outside-card { background: var(--bg-card-d); padding: 48px 40px; border-top: 2px solid var(--sage); }
.outside-icon { font-size: 28px; margin-bottom: 24px; display: block; color: var(--sand); }
.outside-title {
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; color: var(--paper); margin-bottom: 12px;
}
.outside-body {
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  color: var(--soft-on-d);
}

/* ══════════════════════════════════════════════════════════
   WORK PAGE
   ══════════════════════════════════════════════════════════ */
.work-hero { background: var(--bg-dark); padding: 100px var(--pad-x) 80px; }
.work-hero-inner { max-width: var(--max); margin: 0 auto; }

.work-grid-section { background: var(--bg-light); padding: 100px var(--pad-x); }
.work-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
}
.work-card { overflow: hidden; background: var(--bg-card-l); }
.work-card-img { overflow: hidden; }
.work-card-img .img-ph { width: 100%; }
.work-card-body {
  padding: 36px 40px;
  border: 1px solid var(--line-on-l); border-top: none;
}
.work-card-cat {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 12px; display: block;
}
.work-card-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 26px; color: var(--ink); margin-bottom: 12px; line-height: 1.15;
}
.work-card-desc {
  font-family: var(--sans); font-size: 15px; line-height: 1.7; color: var(--body-on-l);
}
.work-card.featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 55fr 45fr;
}
.work-card.featured .work-card-img { aspect-ratio: auto; }
.work-card.featured .work-card-img .img-ph { min-height: 420px; }
.work-card.featured .work-card-body {
  padding: 64px 72px; border: 1px solid var(--line-on-l);
  border-left: none; display: flex; flex-direction: column; justify-content: center;
}
.work-card.featured .work-card-title { font-size: 34px; margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════
   CASE STUDY SHARED
   ══════════════════════════════════════════════════════════ */
.case-hero {
  background: var(--bg-dark); min-height: 80vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.case-hero-inner { padding: 80px var(--pad-x); max-width: var(--max); margin: 0 auto; width: 100%; }
.case-hero-headline {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.0; letter-spacing: -0.03em;
  color: var(--white); max-width: 800px; margin-bottom: 28px;
}
.case-hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 3.1vw, 38px);
  color: rgba(255,255,255,0.5);
}

.case-meta { background: var(--bg-card-l); padding: 60px var(--pad-x); border-bottom: 1px solid var(--line-on-l); }
.case-meta-inner { max-width: var(--max); margin: 0 auto; display: flex; gap: 80px; flex-wrap: wrap; }
.case-meta-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--soft-on-l); margin-bottom: 8px; display: block;
}
.case-meta-value { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }

.case-body { background: var(--bg-light); padding: 100px var(--pad-x); }
.case-body-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 240px 1fr; gap: 80px;
}
.case-sidebar-section { margin-bottom: 48px; position: sticky; top: calc(var(--chrome) + var(--nav-h) + 24px); }
.case-sidebar-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 16px; display: block;
  padding-bottom: 10px; border-bottom: 2px solid var(--slate); width: fit-content;
}
.case-sidebar-list li {
  font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--body-on-l);
  padding: 6px 0; border-bottom: 1px solid var(--line-on-l);
}
.case-content-h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.15;
  color: var(--ink); margin-bottom: 24px; letter-spacing: -0.02em;
}
.case-content p {
  font-family: var(--sans); font-size: 17px; line-height: 1.8;
  color: var(--body-on-l); margin-bottom: 28px; max-width: 680px;
}
.case-pull {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--ink);
  border-left: 4px solid var(--sage); padding-left: 28px;
  line-height: 1.5; margin: 48px 0; max-width: 600px;
}

/* ── Case study layout-variety devices ── */
.case-twocol {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  margin: 64px 0;
}
.case-twocol.reversed > div:first-child { order: 2; }
.case-twocol .case-twocol-img .img-ph { aspect-ratio: 4/5; }
.case-twocol h3 {
  font-family: var(--sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 14px;
}
.case-twocol p {
  font-family: var(--sans); font-size: 16px; line-height: 1.75;
  color: var(--body-on-l); margin-bottom: 16px;
}

.case-fadedbg {
  position: relative; padding: 100px var(--pad-x);
  background: var(--bg-card-d); margin: 64px calc(-1 * var(--pad-x));
  overflow: hidden;
}
.case-fadedbg::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bg-card-d);
  background-image: linear-gradient(135deg, rgba(175,191,115,0.08), transparent 60%);
  z-index: 0;
}
.case-fadedbg > * { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.case-fadedbg h3 {
  font-family: var(--sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage);
  margin-bottom: 18px;
}
.case-fadedbg p {
  font-family: var(--serif); font-style: italic; color: var(--paper);
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; max-width: 760px;
}

.case-iconrow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin: 48px 0;
}
.case-iconrow > div { text-align: left; }
.case-iconrow .icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--slate); color: var(--slate);
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  margin-bottom: 18px;
}
.case-iconrow h4 {
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  color: var(--ink); margin-bottom: 8px;
}
.case-iconrow p {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: var(--body-on-l);
}

.case-image-full { background: var(--bg-dark); padding: 80px var(--pad-x); }
.case-image-full figure { max-width: var(--max); margin: 0 auto; }
.case-image-full .img-ph { aspect-ratio: 16/7; }

.case-outcomes { background: var(--bg-dark); padding: 100px var(--pad-x); }
.case-outcomes-inner { max-width: var(--max); margin: 0 auto; }
.outcomes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 56px;
}
/* (outcome-item — merged into block below) */
.outcome-stat {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 5vw, 72px);
  color: var(--sand); line-height: 1.0; margin-bottom: 12px; display: block;
}
.outcome-label {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: var(--soft-on-d);
}
.outcome-item { background: var(--bg-card-d); padding: 48px 40px; border-top: 2px solid var(--sage); }

.case-next { background: var(--bg-paper); padding: 100px var(--pad-x); border-top: 1px solid var(--line-on-l); }
.case-next-inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

/* ══════════════════════════════════════════════════════════
   SERVICES PAGE
   ══════════════════════════════════════════════════════════ */
.services-hero {
  background: var(--bg-dark); min-height: 62vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.services-hero-inner { padding: 80px var(--pad-x); max-width: var(--max); margin: 0 auto; width: 100%; }

.services-body { background: var(--bg-light); padding: 120px var(--pad-x); }
.services-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.service-card { padding: 56px 44px; border: 1px solid var(--line-on-l); background: var(--bg-card-l); border-top: 3px solid var(--sage); }
.service-num {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--slate); margin-bottom: 20px; display: block;
}
.service-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--ink);
  margin-bottom: 20px; line-height: 1.15;
}
.service-body {
  font-family: var(--sans); font-size: 16px; line-height: 1.75;
  color: var(--body); margin-bottom: 28px;
}
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.service-tag {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate); padding: 6px 14px;
  border: 1px solid rgba(59,81,105,0.3);
}

.services-format { background: var(--bg-card-l); padding: 100px var(--pad-x); border-top: 1px solid var(--line-on-l); }
.format-inner { max-width: var(--max); margin: 0 auto; }
.format-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 40px; align-items: start;
  padding: 48px 0; border-top: 1px solid var(--line-on-l);
}
.format-row:first-of-type { border-top: 2px solid var(--slate); }
.format-row.reversed { grid-template-columns: 1fr 90px; }
.format-row.reversed .format-icon { order: 2; }
.format-icon {
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--slate);
  font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--slate);
}
.format-title { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); margin-bottom: 14px; }
.format-body { font-family: var(--sans); font-size: 16px; line-height: 1.72; color: var(--body-on-l); max-width: 720px; }

.services-cta { background: var(--bg-dark); padding: 140px var(--pad-x); text-align: center; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════ */
.contact-hero {
  background: var(--bg-dark); min-height: 62vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.contact-hero-inner { padding: 80px var(--pad-x); max-width: var(--max); margin: 0 auto; width: 100%; }

.contact-body { background: var(--white); padding: 120px var(--pad-x); }
.contact-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start;
}
.contact-email {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 2.8vw, 36px); color: var(--ink);
  display: block; margin-bottom: 32px;
  border-bottom: 2px solid var(--sage); padding-bottom: 24px;
}
.contact-social { display: flex; gap: 32px; margin-top: 48px; }
.social-link {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--body);
  border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 4px;
}
.form-field { margin-bottom: 32px; }
.form-label {
  display: block; font-family: var(--sans); font-size: 10px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.form-input {
  display: block; width: 100%;
  background: var(--bg-light); border: 2px solid var(--line-on-l);
  border-radius: 0;
  padding: 14px 12px; font-family: var(--sans); font-size: 16px;
  color: var(--ink); outline: none;
  transition: border-color 0.15s;
}
.form-input::placeholder { color: var(--soft-on-l); }
.form-input:focus, .form-input:focus-visible { border-color: var(--sage); }
.form-textarea { min-height: 140px; resize: vertical; }

/* Global focus-visible — ADA keyboard navigation */
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }

/* v6.3 — Slate hero modifier (page heroes are slate-or-photo per design rule).
   Apply .slate-hero to any header that needs slate background + auto text contrast. */
.slate-hero { background: var(--bg-dark) !important; }
.slate-hero .overline-slate { color: var(--sage); }
.slate-hero .overline-sage { color: var(--sage); }
.slate-hero .hero-headline,
.slate-hero .case-hero-headline,
.slate-hero h1 { color: var(--paper) !important; }
.slate-hero .case-hero-sub { color: var(--soft-on-d) !important; }
.slate-hero .body-text { color: var(--body-on-d) !important; }
.slate-hero p[style*="color:var(--ink)"],
.slate-hero p[style*="color:var(--slate)"],
.slate-hero p[style*="color:var(--soft-on-l)"] { color: var(--soft-on-d) !important; }
.slate-hero p[style*="color:var(--slate)"] strong,
.slate-hero p[style*="color:var(--slate)"] em { color: var(--sand) !important; }
.slate-hero a { color: var(--sage); }

/* v6.5 — Registered-mark superscript styling (Princess Cruises®, Sun Princess®, etc.) */
.regmark {
  font-size: 0.55em;
  vertical-align: 0.45em;
  letter-spacing: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: var(--sans);
  margin-left: 0.04em;
  opacity: 0.85;
}

/* Skip link — ADA */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  z-index: 99999;
}
.skip-link:focus { left: 8px; top: calc(var(--chrome) + 8px); }

/* ══════════════════════════════════════════════════════════
   v6 LAYOUT UTILITIES — surfaces, brand wall, value-prop rows,
   stat bands, meta band, timeline strip, workstream grid,
   case-study alternating layouts, sage pull quote bands,
   tier-3 four-card grid, gallery title-only tiles, services glyph
   ══════════════════════════════════════════════════════════ */
.surface-paper { background: var(--bg-paper); }
.surface-sand  { background: var(--bg-light); }
.surface-slate { background: var(--bg-dark); }

/* Brand logo wall — 20 marks */
.brand-wall { background: var(--bg-light); padding: 96px var(--pad-x); }
.brand-wall-inner { max-width: var(--max); margin: 0 auto; }
.brand-wall-label { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; display: block; }
.brand-wall-caption { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--soft-on-l); margin-bottom: 56px; line-height: 1.45; }
.brand-wall-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line-on-l); border-left: 1px solid var(--line-on-l); }
.brand-mark { font-family: var(--serif); font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; letter-spacing: -0.005em; color: var(--ink); padding: 36px 18px; text-align: center; line-height: 1.25; border-right: 1px solid var(--line-on-l); border-bottom: 1px solid var(--line-on-l); display: flex; align-items: center; justify-content: center; min-height: 92px; transition: background 0.18s, color 0.18s; position: relative; }
.brand-mark:hover { background: var(--bg-card-l); }
.brand-mark.pending { color: var(--soft-on-l); border-bottom-style: dashed; border-bottom-color: var(--slate); }
.brand-mark.pending::after { content: 'pending logo file recovery'; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 10; }
.brand-mark.pending:hover::after { opacity: 1; }
@media (max-width: 900px) { .brand-wall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .brand-wall-grid { grid-template-columns: repeat(2, 1fr); } }

/* Value-prop horizontal rows */
.vp-stack { padding: 112px var(--pad-x); background: var(--bg-light); }
.vp-stack-inner { max-width: var(--max); margin: 0 auto; }
.vp-stack-header { margin-bottom: 64px; }
.vp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; padding: 56px 0; border-top: 1px solid var(--line-on-l); }
.vp-row:last-of-type { border-bottom: 1px solid var(--line-on-l); }
.vp-row-num { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--slate); margin-bottom: 14px; display: block; }
.vp-row-headline { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.vp-row-proof { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--body-on-l); }
.vp-row-proof strong { color: var(--ink); font-weight: 700; }
@media (max-width: 800px) { .vp-row { grid-template-columns: 1fr; gap: 24px; } }

/* Stat band */
.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 56px 0; border-top: 1px solid var(--line-on-l); border-bottom: 1px solid var(--line-on-l); }
.stat-cell { text-align: center; padding: 48px 24px; border-right: 1px solid var(--line-on-l); }
.stat-cell:last-child { border-right: none; }
.stat-num { font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 9vw, 132px); line-height: 0.9; color: var(--ink); display: block; margin-bottom: 16px; letter-spacing: -0.02em; }
.stat-cap { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft-on-l); }
.stat-band.on-dark { background: var(--bg-dark); border-color: var(--line-on-d); }
.stat-band.on-dark .stat-cell { border-right-color: var(--line-on-d); }
.stat-band.on-dark .stat-num { color: var(--paper); }
.stat-band.on-dark .stat-cap { color: var(--soft-on-d); }

/* Site-wide stat strip — slate full-width, used in case study "What It Delivered" */
.cs-stats-strip { background: var(--bg-dark); padding: 100px var(--pad-x); }
.cs-stats-strip-inner { max-width: var(--max); margin: 0 auto; }
.cs-stats-strip-eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage); display: block; margin-bottom: 20px; }
.cs-stats-strip h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; color: var(--paper); margin-bottom: 56px; max-width: 720px; letter-spacing: -0.02em; text-wrap: balance; }
.cs-stats-grid { display: grid; gap: 1px; background: var(--line-on-d); border-top: 1px solid var(--line-on-d); border-bottom: 1px solid var(--line-on-d); align-items: stretch; }
.cs-stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-stats-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cs-stats-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cs-stats-cell { background: var(--bg-dark); padding: 56px 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cs-stats-num { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5.8vw, 80px); line-height: 0.95; color: var(--sand); display: block; margin-bottom: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.cs-stats-num .unit { font-size: 0.45em; letter-spacing: 0.02em; vertical-align: 0.5em; margin-left: 0.04em; margin-right: 0.04em; font-weight: 400; opacity: 0.85; white-space: nowrap; }
.cs-stats-cap { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft-on-d); }
/* Layout-specific sizing — keeps 3-col bold, 4-col mid, 5-col compact, all visually adjacent in size */
.cs-stats-grid.cols-3 .cs-stats-num { font-size: clamp(56px, 6.8vw, 92px); }
.cs-stats-grid.cols-4 .cs-stats-num { font-size: clamp(48px, 5vw, 72px); }
.cs-stats-grid.cols-5 .cs-stats-num { font-size: clamp(40px, 4.5vw, 64px); }
.cs-stats-grid.cols-5 .cs-stats-cell { padding: 56px 16px; }
@media (max-width: 900px) {
  .cs-stats-grid.cols-4, .cs-stats-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .cs-stats-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Workstream cell — supporting visual on each */
.workstream-cell { padding: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line-on-l); border-bottom: 1px solid var(--line-on-l); }
.workstream-cell .workstream-img { aspect-ratio: 4/3; background: var(--bg-card-l); }
.workstream-cell .workstream-body { padding: 28px 28px 32px; }
.workstream-cell .workstream-num { margin-top: 0; }
.workstream-cell .workstream-img .img-ph { width: 100%; height: 100%; }

/* v6.6 — YouTube video embed placeholder */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: var(--bg-card-d); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  filter: grayscale(1) contrast(0.95);
  transition: filter 0.5s ease;
}
.video-embed:hover { filter: grayscale(0) contrast(1); }
.video-embed::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, rgba(31,45,61,0.0) 50%, rgba(31,45,61,0.5) 100%);
  pointer-events: none;
}
.video-embed::after {
  content: '▶';
  position: relative; z-index: 1;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sage); color: var(--ink);
  font-size: 30px; padding-left: 6px;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.18s ease;
}
.video-embed:hover::after { transform: scale(1.06); background: var(--ink); color: var(--sage); }
.video-embed-label {
  position: absolute; bottom: 18px; left: 22px; z-index: 2;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper); opacity: 0.78;
}
.video-embed-band { padding: 0; background: var(--bg-paper); }
.video-embed-band-inner { max-width: var(--max); margin: 0 auto; }
.video-embed-band .video-embed { aspect-ratio: 16/9; }
.video-embed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .video-embed-pair { grid-template-columns: 1fr; } }

/* v6.3 — Case-study image strip: 3 square supporting images, full-width row */
.cs-image-strip { padding: 0; background: var(--bg-paper); }
.cs-image-strip.sand { background: var(--bg-light); }
.cs-image-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 100%; }
.cs-image-strip-grid .img-ph { aspect-ratio: 1/1; }
@media (max-width: 700px) { .cs-image-strip-grid { grid-template-columns: 1fr; } }

/* v6.7 — Full-width horizontal-scroll carousel for asset-rich case studies */
.cs-carousel { background: var(--bg-paper); padding: 80px 0; overflow: hidden; }
.cs-carousel.sand { background: var(--bg-light); }
.cs-carousel-header { max-width: var(--max); margin: 0 auto 40px; padding: 0 var(--pad-x); display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cs-carousel-header h3 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); }
.cs-carousel-header .cs-carousel-hint { font-family: var(--sans); font-size: 12px; color: var(--soft-on-l); letter-spacing: 0.04em; }
.cs-carousel-track {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--pad-x);
  padding: 0 var(--pad-x) 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--slate) transparent;
}
.cs-carousel-track::-webkit-scrollbar { height: 6px; }
.cs-carousel-track::-webkit-scrollbar-track { background: transparent; }
.cs-carousel-track::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 3px; }
.cs-carousel-item {
  flex: 0 0 auto;
  width: 380px;
  scroll-snap-align: start;
  background: var(--bg-card-l);
}
.cs-carousel-item .img-ph { width: 100%; aspect-ratio: 4/5; }
.cs-carousel-item.wide { width: 540px; }
.cs-carousel-item.wide .img-ph { aspect-ratio: 3/2; }
.cs-carousel-item.tall .img-ph { aspect-ratio: 3/4; }
.cs-carousel-caption { padding: 14px 4px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--soft-on-l); }
@media (max-width: 700px) {
  .cs-carousel-item { width: 280px; }
  .cs-carousel-item.wide { width: 380px; }
}

/* Tag-chip card layout for "What This Demonstrates" */
.demo-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.demo-chip { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); background: var(--bg-card-l); border: 1px solid var(--line-on-l); border-left: 3px solid var(--sage); padding: 14px 22px; }

/* Loose brand wall — frameless variant for distinguishing from gridded version */
.brand-wall.loose .brand-wall-grid {
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8px;
}
.brand-wall.loose .brand-mark {
  border: none;
  padding: 6px 0;
  min-height: 0;
  font-size: clamp(17px, 1.7vw, 22px);
  background: transparent;
}
.brand-wall.loose .brand-mark:hover { background: transparent; color: var(--slate); }
.brand-wall.loose .brand-mark.pending { border-bottom: 1px dashed var(--slate); padding-bottom: 4px; }

/* Quote section over toned-back image — slate surface */
.quotes-on-image {
  position: relative;
  background: var(--bg-dark);
  padding: 140px var(--pad-x);
  overflow: hidden;
  isolation: isolate;
}
.quotes-on-image-bg { position: absolute; inset: 0; z-index: 0; background: var(--bg-dark); }
.quotes-on-image-bg .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.18; filter: grayscale(1) contrast(0.95); background: var(--bg-card-d); }
.quotes-on-image-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(31,45,61,0.6) 0%, rgba(31,45,61,0.25) 50%, rgba(31,45,61,0.6) 100%); }
.quotes-on-image-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.quotes-on-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; }
.quotes-on-image-card { background: var(--bg-paper); border-top: 3px solid var(--sage); padding: 36px 32px; }
.quotes-on-image-card p { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink); margin-bottom: 24px; }
.quotes-on-image-card cite { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); font-style: normal; display: block; }
.quotes-on-image-card .org { font-family: var(--sans); font-size: 11px; color: var(--soft-on-l); letter-spacing: 0.04em; margin-top: 4px; }
@media (max-width: 900px) { .quotes-on-image-grid { grid-template-columns: 1fr; } }

/* Case-study meta band — warm cream surface (v6.3 — restored separate from timeline) */
.cs-meta-band { background: var(--bg-card-l); padding: 48px var(--pad-x); }
.cs-meta-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; }
.cs-meta-label { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 12px; }
.cs-meta-value { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--ink); }
@media (max-width: 800px) { .cs-meta-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Timeline strip — sand surface, single line w/ horizontal scroll fallback (v6.3) */
.cs-timeline { background: var(--bg-light); padding: 22px var(--pad-x); border-bottom: 1px solid var(--line-on-l); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-timeline-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: nowrap; white-space: nowrap; font-family: var(--sans); font-size: 12px; color: var(--soft-on-l); letter-spacing: 0.04em; }
.cs-timeline strong { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--ink); font-size: 15px; }
.cs-timeline span { white-space: nowrap; }
@media (max-width: 700px) {
  .cs-timeline-inner { font-size: 11px; gap: 12px; }
  .cs-timeline strong { font-size: 13px; }
}
/* (legacy timeline-inner rule removed — superseded by v6.3 single-line treatment above) */

/* Case-study alternating image-text rows (v6.2 — square locked) */
.cs-altrow { background: var(--bg-paper); padding: 100px var(--pad-x); }
.cs-altrow.sand { background: var(--bg-light); }
.cs-altrow-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.cs-altrow.reversed .cs-altrow-img { order: 2; }
.cs-altrow-img .img-ph { aspect-ratio: var(--ar-altrow); }
/* Home/Work tile rows — locked row height; image fills its column (v6.3.1) */
.cs-altrow.tile-row { padding: 0; }
.cs-altrow.tile-row .cs-altrow-inner {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: var(--tile-h);
}
.cs-altrow.tile-row .cs-altrow-img,
.cs-altrow.tile-row figure.cs-altrow-img {
  width: 100%; height: 100%;
  margin: 0; display: block;
  align-self: stretch;
}
.cs-altrow.tile-row .cs-altrow-img .img-ph {
  width: 100%; height: 100%;
  aspect-ratio: auto;       /* row height wins, not the ratio */
  min-height: var(--tile-h); /* belt-and-suspenders */
}
.cs-altrow.tile-row .cs-altrow-text {
  padding: 64px 64px; display: flex; flex-direction: column; justify-content: center;
}
.cs-altrow-text h3 { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.cs-altrow-text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.01em; }
.cs-altrow-text p { font-family: var(--sans); font-size: 17px; line-height: 1.78; color: var(--body-on-l); margin-bottom: 18px; max-width: none; }
@media (max-width: 800px) { .cs-altrow-inner { grid-template-columns: 1fr; gap: 32px; } .cs-altrow.reversed .cs-altrow-img { order: 0; } }

/* Full-bleed sage pull-quote band — with tinted-back image option (v6.5) */
.cs-pull-band { background: var(--bg-dark); padding: 120px var(--pad-x); position: relative; overflow: hidden; isolation: isolate; }
.cs-pull-band-bg { position: absolute; inset: 0; z-index: 0; }
.cs-pull-band-bg .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.16; filter: grayscale(1) contrast(0.9); background: var(--bg-card-d); }
.cs-pull-band-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(31,45,61,0.55) 0%, rgba(31,45,61,0.20) 50%, rgba(31,45,61,0.55) 100%),
    linear-gradient(135deg, rgba(175,191,115,0.10), transparent 60%);
}
.cs-pull-band-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.cs-pull-band-eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage); display: block; margin-bottom: 28px; }
.cs-pull-band-text { font-family: var(--serif); font-style: normal; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.32; color: var(--paper); max-width: 920px; letter-spacing: -0.01em; }

/* CS1 workstream 3x2 grid */
.workstream-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 48px 0; border-top: 1px solid var(--line-on-l); border-left: 1px solid var(--line-on-l); }
/* (workstream-cell — moved to v6.1 block above with image+body layout) */
.workstream-num { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--slate); display: block; margin-bottom: 12px; }
.workstream-title { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 8px; line-height: 1.25; }
.workstream-desc { font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--body-on-l); }
@media (max-width: 800px) { .workstream-grid { grid-template-columns: 1fr; } }

/* Tier 3 four-card text-over-image grid */
.tier3-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.tier3-card { position: relative; aspect-ratio: 4/5; background: var(--bg-card-d); overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; }
.tier3-card .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(0.92) brightness(0.55); transition: filter 0.5s ease; }
.tier3-card::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(31,45,61,0.0) 30%, rgba(31,45,61,0.85) 100%); pointer-events: none; }
.tier3-card:hover .img-ph { filter: grayscale(0) contrast(1) brightness(0.65); }
.tier3-card-inner { position: relative; z-index: 1; padding: 28px 24px; color: var(--paper); }
.tier3-card-eyebrow { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage); display: block; margin-bottom: 10px; }
.tier3-card-title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--paper); margin-bottom: 10px; }
.tier3-card-desc { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--soft-on-d); margin-bottom: 14px; }
.tier3-card-link { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); border-bottom: 1px solid var(--sage); padding-bottom: 2px; display: inline-block; }
@media (max-width: 1000px) { .tier3-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tier3-cards { grid-template-columns: 1fr; } }

/* Gallery — Tier 3 (v6.2: 3-col Pinterest masonry, mixed ratios, hover overlay caption) */
.gallery-masonry {
  column-count: 3;
  column-gap: 16px;
}
.gallery-tile {
  display: block;
  break-inside: avoid;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  background: var(--bg-card-l);
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.gallery-tile .img-ph {
  width: 100%;
  display: block;
}
.gallery-tile-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background-image: linear-gradient(180deg, rgba(31,45,61,0) 50%, rgba(31,45,61,0.88) 100%);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.gallery-tile:hover .gallery-tile-overlay,
.gallery-tile:focus-visible .gallery-tile-overlay { opacity: 1; }
.gallery-tile:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
.gallery-tile-overlay-inner {
  padding: 20px 22px;
  color: var(--paper);
  font-family: var(--sans);
  width: 100%;
}
.gallery-tile-overlay-inner .client {
  font-weight: 700; letter-spacing: 0.04em; font-size: 13px;
  display: block; margin-bottom: 4px;
}
.gallery-tile-overlay-inner .project {
  font-style: italic; font-size: 13px; line-height: 1.5;
  color: var(--soft-on-d);
}
/* Aspect-ratio variants for visual variety */
.gallery-tile.ar-1-1   .img-ph { aspect-ratio: 1/1; }
.gallery-tile.ar-3-4   .img-ph { aspect-ratio: 3/4; }
.gallery-tile.ar-4-5   .img-ph { aspect-ratio: 4/5; }
.gallery-tile.ar-4-3   .img-ph { aspect-ratio: 4/3; }
.gallery-tile.ar-5-4   .img-ph { aspect-ratio: 5/4; }
.gallery-tile.ar-3-2   .img-ph { aspect-ratio: 3/2; }
.gallery-tile.ar-2-3   .img-ph { aspect-ratio: 2/3; }
@media (max-width: 900px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 600px) { .gallery-masonry { column-count: 1; } }

/* Services How We Work — slate strip with tinted-back image */
.howwework { position: relative; background: var(--bg-dark); padding: 120px var(--pad-x); overflow: hidden; isolation: isolate; }
.howwework-bg { position: absolute; inset: 0; z-index: 0; background: var(--bg-dark); }
.howwework-bg .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.15; filter: grayscale(1) contrast(0.9); background: var(--bg-card-d); }
.howwework-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(31,45,61,0.7) 0%, rgba(31,45,61,0.3) 50%, rgba(31,45,61,0.7) 100%); }
.howwework-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.howwework-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.howwework-card { background: rgba(31,45,61,0.65); border-top: 3px solid var(--sage); padding: 36px 32px; backdrop-filter: blur(2px); }
.howwework-card h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--paper); margin-bottom: 16px; }
.howwework-card p { font-family: var(--sans); font-size: 15px; line-height: 1.75; color: var(--soft-on-d); }
@media (max-width: 900px) { .howwework-cards { grid-template-columns: 1fr; gap: 16px; } }

/* Services glyph — SVG icon placeholder (v6.7) */
.svc-glyph {
  width: 80px; height: 80px;
  border: 2px dashed rgba(59,81,105,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  background: var(--bg-paper);
  position: relative; overflow: hidden;
}
.svc-glyph::before {
  content: 'SVG';
  position: absolute;
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--soft-on-l); opacity: 0.5;
  top: 6px; left: 8px;
}
.svc-glyph-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate); text-align: center; line-height: 1.3;
  padding: 0 6px;
}

/* ══════════════════════════════════════════════════════════
   TIER 2 — SELECTED WORK SECONDARY CARDS
   ══════════════════════════════════════════════════════════ */
.tier2-section { background: var(--white); padding: 100px var(--pad-x); border-top: 1px solid rgba(0,0,0,0.08); }
.tier2-inner { max-width: var(--max); margin: 0 auto; }
.tier2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.tier2-card { padding: 40px 36px; border: 1px solid rgba(0,0,0,0.07); background: rgba(211,207,201,0.12); }
.tier2-card::before { content: ''; display: block; width: 100%; height: 2px; background: var(--slate); margin-bottom: 32px; }
.tier2-cat { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; display: block; }
.tier2-title { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); margin-bottom: 14px; line-height: 1.2; }
.tier2-desc { font-family: var(--sans); font-size: 15px; line-height: 1.72; color: var(--body); }

/* ══════════════════════════════════════════════════════════
   TIER 3 — PROJECT INVENTORY
   ══════════════════════════════════════════════════════════ */
.tier3-section { background: var(--bg-dark); padding: 100px var(--pad-x); }
.tier3-inner { max-width: var(--max); margin: 0 auto; }
.tier3-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 56px; }
.tier3-cat { background: var(--bg-card-d); padding: 48px 44px; border-top: 2px solid var(--sage); }
.tier3-cat-header { margin-bottom: 24px; border-bottom: 1px solid var(--line-on-d); padding-bottom: 20px; display: flex; align-items: baseline; gap: 14px; }
.tier3-cat-title { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--paper); }
.tier3-cat-note { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.tier3-item { font-family: var(--sans); font-size: 14px; color: var(--soft-on-d); padding: 10px 0; border-bottom: 1px solid var(--line-on-d); line-height: 1.5; }
.tier3-item strong { color: var(--paper); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   CREDENTIALS BLOCK (About page)
   ══════════════════════════════════════════════════════════ */
.credentials-section { background: var(--white); padding: 100px var(--pad-x); border-top: 1px solid rgba(0,0,0,0.08); }
.credentials-inner { max-width: var(--max); margin: 0 auto; }
.credentials-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.cred-list { margin-top: 40px; }
.cred-item { padding: 28px 0; border-top: 1px solid rgba(0,0,0,0.09); }
.cred-type { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 8px; }
.cred-degree { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 4px; }
.cred-school { font-family: var(--sans); font-size: 14px; color: var(--soft); }

/* Footer */
.site-footer {
  background: var(--bg-dark); padding: 60px var(--pad-x);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy {
  font-family: var(--serif); font-size: 15px;
  font-weight: 600; color: var(--paper);
}
.footer-meta {
  font-family: var(--sans); font-size: 12px;
  color: var(--soft-on-d); margin-left: 16px;
}
.footer-links { display: flex; gap: 32px; }
.footer-links a {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand);
  transition: color 0.15s, border-color 0.15s;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--sage); border-bottom-color: var(--sage); outline: none;
}


/* Screen reader only — accessibility utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Static-deploy adjustments (single-page-app removed; pages render natively) */
.page { display: block !important; }
.wf-chrome { display: none !important; }
.wix-note { display: none !important; }

/* ══ LAUNCH v1 — ported from the July preview (ohdanib-launch-v1-preview.html, 2026-07-17) on 2026-09-27 ══ */
/* ══════════════════════════════════════════════════════════
   LAUNCH v1 — punch-list additions (2026-07-16)
   ══════════════════════════════════════════════════════════ */

/* Nav wordmark — typographic stand-in for the logo file (bite #1) */
.logo-wordmark {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: 0.005em; color: var(--ink); line-height: 1;
  text-decoration: none; transition: color 0.15s;
}
.logo-wordmark:hover, .logo-wordmark:focus-visible { color: var(--slate); outline: none; }

/* Case-study "coming soon" flag — inline + 3px sage rule (never an outlined box) */
.cs-flag {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft-on-l); border-left: 3px solid var(--sage);
  padding: 2px 0 2px 14px; line-height: 1.3; display: inline-block; margin: 8px 0 0;
}

/* Bands go solid slate (v1): kill the toned-image gradient overlays */
.quotes-on-image-bg::after, .howwework-bg::after { display: none; }


/* Launch v1 — logo + slate-hero + atmospheric band (2026-07-16 pass 2) */
.logo-mark { display: flex; align-items: center; }
.logo-mark img { height: 60px; width: auto; display: block; }

.atmos-band { background: var(--bg-dark); line-height: 0; }
.atmos-band figure { margin: 0; height: 46vh; min-height: 340px; overflow: hidden; }
.atmos-band img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Screened-back ship shot behind the sub-statement (2026-07-16 pass 3) */
.screened-ship-bg { position:absolute; inset:0; z-index:0; }
.screened-ship-bg .img-ph { position:absolute; inset:0; width:100%; height:100%; opacity:0.14; filter:grayscale(1) contrast(0.95); }
.screened-ship-bg::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(236,233,228,0.74), rgba(236,233,228,0.55) 50%, rgba(236,233,228,0.74)); }
.screened-ship-inner { position:relative; z-index:1; }


/* Standard (lining) numerals site-wide — brand-guideline numeral decision (applied with the Shelley proposal). Playfair defaults to old-style figures; force lining. */
html { font-variant-numeric: lining-nums; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum" 1, "onum" 0; }
body, h1, h2, h3, h4, h5, h6, p, span, a, li, div, em, strong, blockquote, cite,
.hero-headline, .case-hero-headline, .stat-num, .vp-row-num, .service-num, .service-tag, .tier2-title, .brand-mark {
  font-feature-settings: "lnum" 1, "onum" 0;
  font-variant-numeric: lining-nums;
}


/* Client logo wall — single-color slate marks (2026-07-16 pass 5) */
.brand-wall.loose .logo-wall { display:grid; grid-template-columns:repeat(5,1fr);
  gap:48px 44px; align-items:center; justify-items:center; margin-top:10px; max-width:var(--max); }
.logo-wall img { height:48px; width:auto; max-width:188px; object-fit:contain; display:block; }
@media (max-width:1000px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(3,1fr); gap:38px; } }
@media (max-width:560px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(2,1fr); gap:30px; } }
.logo-wall img { height:48px; }

/* Screened-back ship photo */
.screened-ship-bg img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0.18; filter:grayscale(1) contrast(1); }

/* Logo wall — balanced uniform-canvas sizing (pass 6) */
.brand-wall.loose .logo-wall { grid-template-columns:repeat(5,1fr); gap:30px 26px; }
.logo-wall img { height:auto !important; width:190px; max-width:100%; object-fit:contain; }
@media (max-width:1000px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(3,1fr); } .logo-wall img{width:170px;} }

/* Ship screened-back — bump visibility (option B default) */
.screened-ship-bg img { opacity:0.40 !important; }


/* Logo wall pass 7 — trimmed marks, per-logo height cheat for verticals, even rows */
.brand-wall.loose .logo-wall { grid-template-columns:repeat(5,1fr); gap:22px 26px; grid-auto-rows:100px; align-items:center; justify-items:center; }
.logo-wall img { height:44px !important; width:auto !important; max-width:200px; object-fit:contain; }
.logo-wall img.tall { height:66px !important; }
.logo-wall img.xl   { height:82px !important; }
@media (max-width:1000px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(3,1fr); grid-auto-rows:88px; } }
@media (max-width:560px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(2,1fr); } }

/* Coming-soon flag — sage brackets instead of left rule */
.cs-flag { border-left:none !important; padding:2px 0 !important; color:var(--soft-on-l); }
.cs-flag::before { content:"["; color:var(--sage); font-weight:700; margin-right:9px; }
.cs-flag::after  { content:"]"; color:var(--sage); font-weight:700; margin-left:9px; }


/* Logo wall pass 8 — optical-area balanced heights (inline per-logo), even rows */
.brand-wall.loose .logo-wall { grid-template-columns:repeat(5,1fr) !important; gap:18px 22px !important; grid-auto-rows:112px !important; align-items:center !important; justify-items:center !important; }
.logo-wall img { width:auto !important; max-width:210px !important; object-fit:contain; }
.logo-wall img.tall, .logo-wall img.xl { height:auto; }  /* defer to inline height */
@media (max-width:1000px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:560px){ .brand-wall.loose .logo-wall{ grid-template-columns:repeat(2,1fr) !important; } }


/* Logo wall pass 9 — hand-cheated sizes, alternating order, tighter rows */
.brand-wall.loose .logo-wall { grid-auto-rows:98px !important; gap:12px 22px !important; }
.logo-wall img { max-width:230px !important; }


/* Logo wall pass 10 — shrink group ~10% (gaps+rows scaled to match), center in sand */
.brand-wall.loose .logo-wall { gap:11px 20px !important; grid-auto-rows:88px !important; }
.brand-wall.loose .brand-wall-inner { text-align:center; }
.brand-wall.loose .brand-wall-caption { margin-bottom:44px; }


/* Signature Statement Hero — C.D. 2D (2026-07-16) */
.stmt-hero { position:relative; min-height:520px; background:#1F2D3D; overflow:hidden; isolation:isolate; }
.stmt-hero__photo { position:absolute; inset:0; z-index:0;
  background-image:url('../images/v1/stmt-hero-bg-1.jpg'); background-size:cover; background-position:center 42%; }
.stmt-hero__wash { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,
  rgba(232,229,223,0.90) 0%, rgba(232,229,223,0.78) 28%, rgba(232,229,223,0.42) 47%,
  rgba(232,229,223,0.10) 62%, rgba(232,229,223,0) 74%); }
.stmt-hero__copy { position:relative; z-index:2; min-height:520px; display:flex; flex-direction:column;
  justify-content:center; max-width:var(--max); margin:0 auto; padding:0 var(--pad-x); }
.stmt-hero__statement { margin:0; max-width:46%; font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,2.3vw,30px); line-height:1.26; letter-spacing:-0.005em; color:#111; text-wrap:pretty; }
.stmt-hero__statement em { font-style:italic; }
.stmt-hero__sub { margin:22px 0 0; max-width:46%; font-family:var(--sans); font-weight:400;
  font-size:clamp(14px,1.1vw,15px); line-height:1.65; color:#2A3A4D; }
@media (max-width:820px){
  .stmt-hero__wash { background:linear-gradient(180deg, rgba(232,229,223,0.93) 0%,
    rgba(232,229,223,0.74) 52%, rgba(232,229,223,0.28) 100%); }
  .stmt-hero__statement, .stmt-hero__sub { max-width:100%; }
}

/* Statement hero — C.D. composed export (ship+wash baked) + type aligned to system tokens */
.stmt-hero__photo { background-image:url('../images/v1/stmt-hero-bg-2.jpg') !important; background-position:center !important; }
.stmt-hero__wash { display:none !important; }               /* wash is baked into the image */
.stmt-hero__statement { font-weight:400 !important; font-size:clamp(24px,2.5vw,30px) !important; max-width:42% !important; }
.stmt-hero__sub { font-size:16px !important; max-width:42% !important; }

/* Statement hero — scale the type up to sit with its neighbors (pass) */
.stmt-hero { min-height:576px !important; }
.stmt-hero__copy { min-height:576px !important; }
.stmt-hero__statement { font-size:clamp(28px,2.9vw,38px) !important; max-width:47% !important; line-height:1.22 !important; }
.stmt-hero__sub { font-size:16px !important; max-width:47% !important; margin-top:26px !important; }

/* Statement hero — align copy's left edge to the content column (mirror .vp-stack:
   gutter lives on the section; the copy is just a centered max-width box, no inner padding.
   The photo is inset:0 absolute, so section padding leaves it full-bleed.) */
.stmt-hero { padding-left:var(--pad-x) !important; padding-right:var(--pad-x) !important; }
.stmt-hero__copy { padding-left:0 !important; padding-right:0 !important; }

/* Statement hero — FULL SIZE: match .section-h2 exactly (36→56px) so the statement reads
   as a peer of the section headlines. Let it wrap to more lines + give the band more height
   rather than widening into the ship. Try full; scale back if it starts reading as a hero. */
.stmt-hero { min-height:724px !important; }
.stmt-hero__copy { min-height:724px !important; padding-top:72px !important; padding-bottom:72px !important; }
.stmt-hero__statement { font-size:clamp(36px,4.5vw,56px) !important; line-height:1.12 !important;
  letter-spacing:-0.02em !important; max-width:820px !important; }
.stmt-hero__sub { font-size:21px !important; line-height:1.5 !important; max-width:620px !important; margin-top:30px !important; }
/* Art-directed desktop line breaks in the statement; drop them on mobile so it reflows naturally,
   and let the copy use the full column width there. */
@media (max-width:820px){
  .stmt-br { display:none !important; }
  .stmt-hero__statement, .stmt-hero__sub { max-width:100% !important; }
}

/* Statement hero — C.D.'s 2b background (raw photo, no wash — clean sky behind the type) */
.stmt-hero__photo { background-image:url('../images/v1/stmt-hero-bg-3.jpg') !important; background-position:center !important; }
.stmt-hero__wash { display:none !important; }

/* Statement hero — show the WHOLE delivered image (no zoom / no side-crop): band tracks the image's
   2400×960 aspect so background:cover renders it 1:1 edge-to-edge. Type fits inside that height. */
.stmt-hero { aspect-ratio:2400 / 960 !important; min-height:0 !important; height:auto !important; }
.stmt-hero__copy { min-height:0 !important; height:100% !important; box-sizing:border-box !important;
  padding-top:24px !important; padding-bottom:24px !important; }
.stmt-hero__statement { line-height:1.08 !important; }
.stmt-hero__sub { margin-top:20px !important; }
@media (max-width:820px){
  .stmt-hero { aspect-ratio:auto !important; }
  .stmt-hero__copy { padding-top:56px !important; padding-bottom:56px !important; }
}

/* Statement hero — C.D.'s full-ship composition (native 3200×2452, whole frame, nothing clipped).
   Band tracks the image's exact aspect so cover reproduces the crop 1:1. Type top-anchored upper-left. */
.stmt-hero { aspect-ratio:3200 / 2452 !important; }
.stmt-hero__photo { background-image:url('../images/v1/stmt-hero-bg-4.jpg') !important;
  background-position:center !important; background-size:cover !important; }
.stmt-hero__copy { justify-content:flex-start !important; padding-top:7% !important; padding-bottom:0 !important; }
@media (max-width:820px){
  .stmt-hero { aspect-ratio:auto !important; }
  .stmt-hero__copy { justify-content:center !important; padding-top:56px !important; padding-bottom:56px !important; }
}

/* Statement hero — FINAL: C.D.'s exact 2b comp, type layer hidden (statement-hero-2b-notype, 3195×1800, 16:9).
   Band tracks the image's 16:9 ratio so the exact pixels reproduce edge-to-edge. */
.stmt-hero { aspect-ratio:3195 / 1800 !important; }
.stmt-hero__photo { background-image:url('../images/v1/stmt-hero-bg-5.jpg') !important;
  background-position:center !important; background-size:cover !important; }

/* Statement hero — with the wide 2b image there's horizontal negative space (ship clears ~67% across).
   Widen the statement so it breaks shorter, lifting the subhead up into the bright, uniform sky band
   (lum 201) instead of the dimmer/busier water band (lum 179) where it lost contrast. */
.stmt-hero__statement { max-width:880px !important; }
.stmt-hero__sub { max-width:660px !important; }

/* ============================================================================
   GRID UNIFICATION (2026-07-17) — one content column, site-wide.
   Nav + every hero inset now align to the SAME 1120px column the body sections
   already use. Technique: full-width element + horizontal padding of
   max(gutter, half the leftover) reproduces a centered max-width column's left
   AND right edges at every viewport — so nav logo, all four heroes, and every
   section headline share one vertical line. (Split image/text case cards keep
   their own internal card padding by design — that's card-relative, not page-grid.)
   ============================================================================ */
.site-nav,
.hero-inner, .about-hero-inner, .services-hero-inner, .contact-hero-inner,
.case-hero-inner, .work-hero-inner {
  max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left:  max(var(--pad-x), calc((100% - var(--max)) / 2)) !important;
  padding-right: max(var(--pad-x), calc((100% - var(--max)) / 2)) !important;
}

/* About prose bands — left-align to the SAME content column as the hero/nav (they were
   centered at 3 different widths -> 3 different left edges). The band carries the column
   offset; the readable measure inside is left-aligned, not centered. */
.ab-band { padding-left:  max(var(--pad-x), calc((100% - var(--max)) / 2)) !important;
           padding-right: max(var(--pad-x), calc((100% - var(--max)) / 2)) !important; }
.ab-col  { margin-left: 0 !important; margin-right: 0 !important; }

/* About — sector-led client roster (replaces the flat brand grid so it can't be mistaken
   for the home/services logo wall). Sector is the lead (large), names secondary, no rules. */
.brand-wall.loose.sector-wall .brand-wall-inner { text-align: left !important; }
.sector-roster { margin-top: 20px; }
.sector-row { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 56px;
  align-items: baseline; padding: 26px 0; }
.sector-name { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 36px); font-weight: 400;
  color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; }
.sector-brands { font-family: var(--sans); font-size: 15px; font-weight: 400;
  color: var(--soft-on-l); line-height: 1.75; }
@media (max-width: 720px) { .sector-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; } }


/* ══ 2026-09-24 launch v1.1 — wordmark + "coming soon" states ══ */
.nav-wordmark { display: block; width: 132px; color: var(--ink); line-height: 0; text-decoration: none; border-bottom: none; }
.nav-wordmark .wordmark-svg { width: 100%; height: auto; display: block; }
.nav-wordmark:hover, .nav-wordmark:focus-visible { color: var(--slate); outline: none; }
.nav-wordmark:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }
@media (max-width: 600px) { .nav-wordmark { width: 108px; } }
.megamenu-soon {
  display: block; font-family: var(--serif); font-size: 15px; line-height: 1.35;
  color: var(--soft-on-l); padding: 6px 0; cursor: default;
}
.megamenu-soon em {
  font-family: var(--sans); font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft-on-l);
  margin-left: 6px; padding-left: 8px; border-left: 3px solid var(--sage);
}
.soon-flag {
  display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft-on-l);
  padding-left: 10px; border-left: 3px solid var(--sage);
}

/* ══ 2026-09-26 Home hero — scroll-driven fog clearing (Higgsfield video, Dani B. slate grade) ══ */
.hero-track { position: relative; height: 220vh; background: var(--bg-dark, #1F2D3D); }
.home-hero.fog-hero {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); min-height: 520px;
  overflow: hidden; isolation: isolate; background: #1F2D3D;
  display: flex; flex-direction: column; justify-content: center;
}
.fog-media { position: absolute; inset: 0; z-index: -2; }
.fog-media video { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
.fog-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(31,45,61,.94) 0%, rgba(31,45,61,.86) 34%, rgba(31,45,61,.48) 58%, rgba(31,45,61,.08) 84%); }
.fog-hero .hero-inner { padding-block: 56px; }
.fog-hero .hero-eyebrow { color: var(--sage); margin-bottom: 24px; }
.fog-hero .hero-headline { color: var(--paper); font-size: clamp(40px, 5.6vw, 76px); max-width: 780px; margin-bottom: 28px; }
.fog-hero .hero-sub { color: #D3CFC9; font-size: clamp(20px, 1.9vw, 26px); max-width: 560px; margin-bottom: 40px; }
.fog-hero .btn-ghost-light { color: var(--paper); border-color: var(--paper); }
.fog-hero .btn-ghost-light:hover, .fog-hero .btn-ghost-light:focus-visible { background: var(--paper); color: var(--ink); }
.fog-hint { position: absolute; right: var(--pad-x); bottom: 28px; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--paper); opacity: .8; transition: opacity .4s; }
.fog-scrolled .fog-hint { opacity: 0; }
.fog-static .hero-track { height: auto; }
.fog-static .home-hero.fog-hero { position: relative; top: 0; }
.fog-static .fog-hint { display: none; }
@media (max-width: 700px) {
  .hero-track { height: 200vh; }
  .home-hero.fog-hero { justify-content: flex-end; }
  .fog-media video { object-position: center; }
  .fog-scrim { background: linear-gradient(0deg, rgba(31,45,61,.96) 0%, rgba(31,45,61,.88) 52%, rgba(31,45,61,.3) 80%, rgba(31,45,61,.05) 100%); }
  .fog-hero .hero-inner { padding: 40px 20px 72px; }
  .fog-hint { left: 20px; right: auto; bottom: 24px; }
}
/* ══ 2026-09-26 Mobile nav fix — links were running off-screen on phones ══ */
@media (max-width: 700px) {
  .site-nav { padding: 0 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 380px) { .nav-links { gap: 10px; } .nav-links a { letter-spacing: .06em; } }

/* 2026-09-27 — real images placed into .img-ph slots (reversible: remove .has-img + inner img) */
:where(.img-ph.has-img) { position: relative; }
.img-ph.has-img { overflow: hidden; background: none; }
.img-ph.has-img::before { display: none; }
.img-ph.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* About hero: sand scrim so dark type stays legible over the photo */
.about-hero .img-ph.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236,233,228,0.94) 0%, rgba(236,233,228,0.82) 42%, rgba(236,233,228,0.25) 72%, rgba(236,233,228,0) 100%); }
@media (max-width: 700px) { .about-hero .img-ph.has-img::after { background: rgba(236,233,228,0.82); } }

/* ══ 2026-09-27 COLOR BY DEFAULT (Dani): portfolio work shows at its best immediately — no grayscale-until-hover.
   Screened background washes keep their own treatment. ══ */
img, .img-ph, figure:hover img, figure:hover .img-ph, .video-embed { filter: none !important; }
.quotes-on-image-bg .img-ph, .cs-pull-band-bg .img-ph, .howwework-bg .img-ph, .screened-ship-bg .img-ph, .screened-ship-bg img { filter: grayscale(1) contrast(0.95) !important; }
/* Orphan control sitewide */
p, h1, h2, h3, blockquote { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce){ video.cinemagraph{ display:none !important; } [data-slot="about-01"]{ background:url("../images/video/about-01-cinemagraph-poster.jpg") center/cover; } }

.tier3-card .img-ph.has-img { filter: brightness(0.8) !important; }
.tier3-card { cursor: default; }
.soon-flag.on-dark { color: var(--sand); }

/* 2026-09-28 crop review: carousel items size to content (no empty caption slab under wide items) */
.cs-carousel-track{align-items:flex-start}
/* 2026-09-28 galleries keep each image's native aspect ratio: fixed row height, width follows the image */
.cs-carousel-item,.cs-carousel-item.wide,.cs-carousel-item.tall{width:min-content}
.cs-carousel-item .img-ph,.cs-carousel-item.wide .img-ph,.cs-carousel-item.tall .img-ph{aspect-ratio:auto;height:460px;width:auto}
.cs-carousel-item .img-ph.has-img>img{position:static;display:block;height:100%;width:auto;max-width:none}
@media (max-width:768px){.cs-carousel-item .img-ph,.cs-carousel-item.wide .img-ph,.cs-carousel-item.tall .img-ph{height:300px}}
/* 2026-09-28 MOBILE FIX: two-column grids are set inline (style="grid-template-columns:1fr 1fr"), which beat the stylesheet's
   media queries, so on phones images shrank to ~60–130px beside a one-word-per-line text column. Stack them under 768px. */
@media (max-width:768px){
  [style*="grid-template-columns"]:not(.tier2-grid){grid-template-columns:1fr !important;row-gap:32px !important}
  .cs-altrow-inner{grid-template-columns:1fr !important}
  .img-ph.has-img[style*="height:100%"]{height:auto !important;aspect-ratio:4/3 !important;min-height:0 !important}
  .tile-row .img-ph.has-img{aspect-ratio:4/5 !important}
}
/* 2026-09-28 MOBILE FIX (cont.): the 72px page gutter never shrank on phones, and the Work hero padded twice
   (outer 72 + inner column padding), leaving its headline ~100px wide. */
.work-hero{padding-left:0 !important;padding-right:0 !important}
@media (max-width:768px){
  :root{--pad-x:24px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-meta{display:block;margin-left:0}
  .footer-links{flex-wrap:wrap;gap:20px}
}
@media (max-width:768px){
  .about-intro-grid,.services-grid,.contact-grid{grid-template-columns:1fr !important;row-gap:40px !important}
  .service-card{min-width:0}
}
@media (max-width:768px){.nav-links a{white-space:nowrap}.nav-links{gap:12px}}
/* 2026-09-28 looping video in an image slot (behaves like a GIF: muted, autoplay, loop) */
.img-ph.has-img>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.loop-video{animation:none}}