/* ============================================================
   SAGE — Design Studio
   Typographic, image-free, editorial.
   Type: GFS Didot (display serif) + Roboto (sans)
   Color: sage palette, AAA contrast for text on backgrounds.
   ============================================================ */

:root {
  /* Backgrounds — Lightened Organic Palette: airy ivory / soft stone */
  --bg:           #EEEDE8;   /* Pale Cloud Ivory — page canvas */
  --bg-2:         #F6F5F1;   /* lighter ivory */
  --bg-mint:      #E3DCD0;   /* warm travertine band */
  --bg-haze:      #E8E5DD;   /* soft cloud band */
  --surface:      #FBFAF6;   /* warm-white cards */
  --surface-tint: #E1D9CC;   /* light soft stone inset panels */

  /* Ink — warm charcoal, all AAA (>=7:1) on ivory AND white */
  --ink:    #3A342F;   /* Warm Charcoal */
  --ink-2:  #463F39;   /* warm body */
  --ink-3:  #524B42;   /* labels/meta — AAA on ivory */

  /* Accents — soft cognac (primary) + soft sage (secondary) */
  --sage:        #7F9480;   /* Soft Sage — DECORATIVE (progress/dots/accents) */
  --sage-deep:   #5E7360;   /* deepened sage — solid buttons w/ white text (AA) */
  --sage-soft:   #C2CDBF;   /* light sage — tints, avatars */
  --slate:       #A66F52;   /* soft cognac — large display text */
  --slate-deep:  #2E2A26;   /* warm charcoal — dark band w/ small text (AAA) */
  --accent:      #A66F52;   /* Soft Cognac — large-text emphasis (AAA-large) */
  --accent-deep: #7A4A31;   /* deep cognac — small accent text — AAA */

  /* On dark surfaces */
  --on-dark:    rgba(255,255,255,.96);
  --on-dark-2:  rgba(255,255,255,.82);
  --on-dark-3:  rgba(255,255,255,.62);
  --sage-bright:#A9BBA3;     /* light sage accent on charcoal */

  /* Lines */
  --rule:      rgba(58,52,47,.16);
  --rule-soft: rgba(58,52,47,.09);
  --rule-dk:   rgba(255,255,255,.18);

  /* Type */
  --serif: "Roboto", system-ui, -apple-system, sans-serif;
  --sans:  "Roboto", system-ui, -apple-system, sans-serif;

  /* Shape — SLIGHT radius */
  --r:    2px;
  --r-sm: 2px;
  --r-pill: 3px;

  --shadow-sm: 0 1px 2px rgba(38,34,25,.04), 0 2px 8px rgba(38,34,25,.06);
  --shadow-md: 0 2px 6px rgba(38,34,25,.05), 0 16px 44px rgba(38,34,25,.10);

  /* Tweakable scalars (overridden by panel) */
  --type-scale: 1;
  --motion: 1;            /* 0 disables animation */
  --shell: 1180px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent-deep); color: #fff; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 48px; position: relative; z-index: 1; }

/* generic */
em { font-style: italic; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   SHARED TYPE ROLES
   ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-size: calc(11px * var(--type-scale));
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow.accent { color: var(--accent-deep); }
.eyebrow.lt { color: var(--on-dark-3); }

.serif { font-family: var(--serif); font-weight: 400; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: 72px;
  display: flex; align-items: center;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.nav.scrolled {
  background: rgba(238,237,232,.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 48px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand-mark {
  font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 22px; color: var(--ink); line-height: 1;
  text-transform: uppercase; letter-spacing: .22em;
}
.brand-mark em { font-style: italic; color: var(--accent); }
.brand-sub {
  font-size: 9.5px; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-3);
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; font-size: 13px; letter-spacing: .03em; color: var(--accent);
  padding: 8px 13px; border-radius: 999px;
  transition: color .2s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1px;
  background: var(--accent-deep); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover { color: var(--accent-deep); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--accent-deep); }

.nav-cta {
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.nav-cta:hover { background: var(--ink); color: #fff; }
.nav-cta .arr { font-family: var(--serif); font-style: italic; }

.nav-burger { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .06em;
  padding: 13px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn .arr { font-family: var(--serif); font-style: italic; font-size: 15px; transition: transform .25s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:hover .arr { transform: translateX(3px); }
.btn.solid { background: var(--ink); color: #fff; }
.btn.solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.ghost { border-color: var(--rule); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn:not(.solid):hover { background: var(--ink); color: #fff; }
.btn.lt { border-color: var(--rule-dk); color: #fff; }
.btn.lt:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.lt.solid { background: #fff; color: var(--ink); border-color: #fff; }
.btn.lt.solid:hover { background: var(--sage-bright); border-color: var(--sage-bright); color: var(--ink); }

/* Sage-green “Start a Conversation” CTAs — wins over .nav-cta / .btn variants */
.cta-sage,
.btn.cta-sage,
.btn.lt.solid.cta-sage {
  background: var(--sage-deep); border-color: var(--sage-deep); color: #fff;
}
.cta-sage:hover,
.btn.cta-sage:hover,
.btn.lt.solid.cta-sage:hover {
  background: var(--sage); border-color: var(--sage); color: #fff;
}
.cta-sage .arr { color: #fff; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { position: relative; }
.sec { padding: 120px 0; border-top: 1px solid var(--rule-soft); overflow-x: clip; }
.sec-band-mint { background: var(--bg-mint); }
.sec-band-mint .sec-num { color: var(--accent-deep); }
.sec-band-white { background: var(--surface); }
.sec-band-sage { background: #D9E0D2; }
.sec-band-sage .sec-num { color: var(--accent-deep); }
.sec-band-haze { background: var(--bg-haze); }

/* ============================================================
   SECTION GHOST WORDS — oversized Roboto watermarks bleeding off
   the edge, sitting behind the content (.shell is z-indexed above).
   ============================================================ */
.sec-ghost {
  position: absolute; top: 50%; left: -.05em; transform: translateY(-50%);
  font-family: var(--sans); font-weight: 300; font-style: normal;
  font-size: clamp(150px, 27vw, 440px); line-height: 1; letter-spacing: -.04em;
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
  color: transparent; -webkit-text-stroke: 1.5px rgba(58,52,47,.11);
}
.sec-ghost.right { left: auto; right: -.05em; }
.sec-ghost.fill { -webkit-text-stroke: 0; color: rgba(58,52,47,.05); }
@media (max-width: 860px) { .sec-ghost { font-size: clamp(96px, 42vw, 230px); } }

/* accent amount variants (tweakable) */
body.accent-minimal .sec-band-haze,
body.accent-minimal .sec-band-mint { background: var(--bg); }
body.accent-minimal .sec-band-haze { border-top: 1px solid var(--rule-soft); }
body.accent-bold .sec-band-haze { background: var(--bg-mint); }
body.accent-bold .sec-num { color: var(--accent-deep); }
body.accent-bold .sec-title em,
body.accent-bold .intro-statement em { color: var(--accent); }
body.accent-bold .step-num { color: var(--accent); }

.sec-head { display: grid; grid-template-columns: 70px 1fr; gap: 36px; margin-bottom: 64px; align-items: start; }
.sec-num {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent);
  text-align: right; padding-top: 8px;
}
.sec-label { margin-bottom: 14px; }
.sec-title {
  font-family: var(--serif); font-weight: 300;
  font-size: calc(clamp(34px, 4.4vw, 56px) * var(--type-scale));
  line-height: 1.02; letter-spacing: -.012em; color: var(--ink);
  text-wrap: balance; margin-bottom: 18px;
}
.sec-title em { font-style: italic; color: var(--accent); }
.sec-desc {
  font-size: calc(16px * var(--type-scale)); font-weight: 300; line-height: 1.7;
  color: var(--ink-2); max-width: 64ch;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 168px 0 96px; position: relative; overflow: hidden; }
.hero-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; margin-bottom: 54px; flex-wrap: wrap;
}
.hero-h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: calc(clamp(46px, 8vw, 124px) * var(--type-scale));
  line-height: 1.08; letter-spacing: -.018em; color: var(--ink);
}
.hero-h1 .ln { display: block; overflow: visible; padding-bottom: .06em; }
.hero-h1 em { font-style: italic; color: var(--accent); }

/* hero word cycler — swaps "complex" for related adjectives */
.hero-cycle {
  position: relative; display: inline-block; vertical-align: baseline; text-align: left;
}
.hero-cycle .hc-size { visibility: hidden; white-space: nowrap; }
.hero-cycle .hc-word {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: 0; transform: translateY(.30em); filter: blur(9px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  will-change: opacity, transform, filter;
}
.hero-cycle .hc-word.in  { opacity: 1; transform: translateY(0);      filter: blur(0); }
.hero-cycle .hc-word.out { opacity: 0; transform: translateY(-.30em); filter: blur(9px); }
@media (prefers-reduced-motion: reduce) {
  .hero-cycle { transition: none; }
  .hero-cycle .hc-word { transition: none; }
}

/* word-assembly animation */
.w {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(0.5em) rotate(2deg);
  filter: blur(6px);
}
.reveal .w {
  animation: wordIn calc(.62s * var(--motion, 1)) cubic-bezier(.2,.7,.2,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

.hero-lower {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end;
  margin-top: 54px;
}
.hero-lede {
  font-size: calc(19px * var(--type-scale)); font-weight: 300; line-height: 1.62; color: var(--ink);
  max-width: 52ch;
}
.hero-lede strong { font-weight: 500; }
.hero-lede em { font-family: var(--serif); font-style: italic; color: var(--accent); }

.hero-kicker {
  font-family: var(--serif); font-size: calc(clamp(24px, 3vw, 40px) * var(--type-scale));
  line-height: 1.1; color: var(--ink-3); margin-top: 26px; letter-spacing: -.005em;
}
.hero-kicker .cycler { color: var(--accent); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* cycling phrase */
.cycler { display: inline-flex; align-items: baseline; }
.cycler-track { position: relative; display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.cycler-word {
  display: inline-block; color: var(--accent); font-style: italic;
  position: absolute; left: 0; white-space: nowrap;
  opacity: 0; transform: translateY(100%);
}
.cycler-word.in  { animation: cyIn  .6s cubic-bezier(.2,.7,.2,1) forwards; }
.cycler-word.out { animation: cyOut .6s cubic-bezier(.7,0,.8,.3) forwards; }
.cycler-sizer { visibility: hidden; white-space: nowrap; font-style: italic; }
@keyframes cyIn  { from { opacity: 0; transform: translateY(90%); } to { opacity: 1; transform: translateY(0); } }
@keyframes cyOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-90%); } }

/* hero stripe */
.stripe {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-top: 72px;
}
.stripe-cell { padding: 22px 20px 22px 0; }
.stripe-cell:last-child { padding-right: 0; }
.stripe-k { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--ink); margin-bottom: 5px; }
.stripe-v { font-size: 12px; color: var(--ink-3); letter-spacing: .01em; }

/* ============================================================
   INTRO STATEMENT
   ============================================================ */
.intro-grid { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
.intro-statement {
  font-family: var(--serif); font-weight: 300;
  font-size: calc(clamp(28px, 3.4vw, 46px) * var(--type-scale));
  line-height: 1.16; letter-spacing: -.01em; color: var(--ink);
  text-wrap: pretty; margin-bottom: 30px;
}
.intro-body { font-size: calc(16px * var(--type-scale)); font-weight: 300; line-height: 1.78; color: var(--ink-2); max-width: 64ch; }
.intro-body + .intro-body { margin-top: 16px; }
.intro-body em { font-family: var(--serif); font-style: italic; color: var(--ink); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-list { border-top: 1px solid var(--rule); }
.svc-row {
  display: grid; grid-template-columns: 56px 1fr 1.5fr 150px; gap: 32px;
  padding: 34px 0; border-bottom: 1px solid var(--rule); align-items: start;
  cursor: default;
  transition: padding-left .3s ease;
}
.svc-row:hover { padding-left: 14px; }
.svc-row:hover .svc-idx { color: var(--accent); }
.svc-idx { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-3); padding-top: 8px; transition: color .25s ease; }
.svc-name { font-family: var(--serif); font-size: calc(27px * var(--type-scale)); line-height: 1.12; color: var(--ink); }
.svc-desc { font-size: calc(14.5px * var(--type-scale)); font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.svc-tag { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding-top: 9px; }
.svc-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 28px;
  flex-wrap: wrap; margin-top: 40px;
}
.svc-foot p { font-size: calc(17px * var(--type-scale)); font-weight: 300; line-height: 1.6; color: var(--ink); max-width: 62ch; }

/* ============================================================
   INDUSTRIES  (expandable cards)
   ============================================================ */
.ind-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ind-card {
  grid-column: span 4;
  background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ind-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rule); }
.ind-card.feat { grid-column: span 6; border-top: 3px solid var(--accent-deep); }
.ind-card.wide { grid-column: span 4; }
.ind-flag { font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); }
.ind-h { font-family: var(--serif); font-size: calc(25px * var(--type-scale)); line-height: 1.1; color: var(--ink); }
.ind-p { font-size: 13.5px; font-weight: 300; line-height: 1.66; color: var(--ink-2); }
.ind-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.chip {
  font-size: 11px; color: var(--ink); border: 1px solid rgba(127,148,128,.5);
  padding: 5px 12px; border-radius: 999px; background: #CFD9C5;
  white-space: nowrap; font-weight: 500; letter-spacing: .01em;
  transition: background .22s ease, border-color .22s ease, transform .22s ease, color .22s ease, opacity .55s ease;
}
.chip:hover { border-color: var(--sage-deep); transform: translateY(-1px); background: var(--sage-deep); color: #fff; }
.chip.tint { background: #CFD9C5; border-color: rgba(127,148,128,.5); color: var(--ink); }
.ind-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
}
.ind-more .pm { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1; }

/* expanding card (inline detail) */
.ind-card.expanded {
  grid-column: 1 / -1 !important;
  cursor: default; transform: none; box-shadow: var(--shadow-md);
  border-color: var(--rule); padding-bottom: 44px;
}
.ind-card.expanded:hover { transform: none; }
.ind-card .ind-more .pm { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ind-card.expanded .ind-more .pm { transform: rotate(45deg); }
.ind-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1);
}
.ind-card.expanded .ind-detail { grid-template-rows: 1fr; }
.ind-detail-inner { overflow: hidden; }
.ind-detail-pad { padding-top: 28px; margin-top: 6px; border-top: 1px solid var(--rule-soft); }
.ind-panel-eyebrow { color: var(--accent-deep); margin-bottom: 16px; }
.ind-panel-intro {
  font-size: calc(18px * var(--type-scale)); font-weight: 300; line-height: 1.7; color: var(--ink);
  max-width: 74ch; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule-soft);
}
.ind-panel-body { font-size: 15px; font-weight: 300; line-height: 1.78; color: var(--ink-2); max-width: 74ch; margin-bottom: 28px; }
.ind-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.col-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.exp-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.exp-list li { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--ink-2); display: flex; gap: 11px; }
.exp-list li::before { content: "—"; color: var(--accent); font-family: var(--serif); font-style: italic; flex-shrink: 0; }
.distinct {
  background: var(--surface-tint); border-radius: var(--r); padding: 24px 26px; margin-bottom: 24px;
}
.distinct .col-label { color: var(--accent-deep); }
.distinct p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.repwork-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.repwork div { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ink-2); padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.repwork div strong { font-weight: 500; color: var(--ink); }

/* ============================================================
   APPROACH (sticky)
   ============================================================ */
.app-grid { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
.app-sticky { position: sticky; top: 104px; }
.app-sticky .sec-title { font-size: calc(clamp(30px, 3.4vw, 44px) * var(--type-scale)); margin-bottom: 20px; }
.app-progress { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.app-prog-item {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  font-size: 13px; color: var(--ink-3); transition: color .25s ease;
}
.app-prog-item .pn { font-family: var(--serif); font-style: italic; font-size: 13px; width: 18px; }
.app-prog-item.on { color: var(--ink); }
.app-prog-item .bar { flex: 1; height: 1px; background: var(--rule); position: relative; }
.app-prog-item.on .bar::after { content:""; position:absolute; inset:0; background: var(--sage); }

.step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 38px 0; border-top: 1px solid var(--rule); }
.step:first-child { border-top: none; padding-top: 0; }
.step-num { font-family: var(--serif); font-size: calc(48px * var(--type-scale)); line-height: .9; color: var(--sage); }
.step-title { font-family: var(--serif); font-size: calc(28px * var(--type-scale)); line-height: 1.1; color: var(--ink); margin-bottom: 12px; }
.step-desc { font-size: calc(15px * var(--type-scale)); font-weight: 300; line-height: 1.72; color: var(--ink-2); max-width: 60ch; margin-bottom: 16px; }
.step-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.step-output { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-2); padding-left: 16px; border-left: 2px solid var(--sage); }
.step-output em { font-family: var(--serif); font-style: italic; color: var(--accent-deep); }

/* ============================================================
   SELECTED WORK (accordion case studies)
   ============================================================ */
.case { border: 1px solid var(--rule-soft); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.case + .case { margin-top: 14px; }
.case-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  padding: 36px 40px; cursor: pointer; transition: background .25s ease;
}
.case-head:hover { background: #DCE4D4; }
.case-meta { display: flex; flex-direction: column; gap: 10px; }
.case-domain { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.case-title { font-family: var(--serif); font-size: calc(clamp(26px, 2.6vw, 36px) * var(--type-scale)); line-height: 1.08; color: var(--ink); }
.case-client { font-size: 13px; font-weight: 300; color: var(--ink-3); letter-spacing: .02em; }
.case-toggle {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--rule); display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease;
}
.case.open .case-toggle { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.case-feat .case-toggle { border-color: var(--accent-deep); }

.case-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1); }
.case.open .case-body { grid-template-rows: 1fr; }
.case-body-inner { overflow: hidden; }
.case-body-pad { padding: 8px 40px 44px; }
.case-summary { font-size: calc(15px * var(--type-scale)); font-weight: 300; line-height: 1.74; color: var(--ink-2); max-width: 76ch; padding: 0 0 28px; border-bottom: 1px solid var(--rule-soft); }
.case-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }

.case-grid-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule-soft); }
.cm-label { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.cm-val { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--ink); }
.case-h { font-family: var(--serif); font-size: calc(20px * var(--type-scale)); color: var(--ink); margin: 28px 0 10px; }
.case-p { font-size: 14px; font-weight: 300; line-height: 1.76; color: var(--ink-2); max-width: 76ch; }
.case-p + .case-p { margin-top: 10px; }
.work-item { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.work-item:first-of-type { border-top: none; }
.work-item-t { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink); margin-bottom: 6px; }
.work-item-b { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ink-2); max-width: 78ch; }
.outcomes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.outcomes div { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--ink-2); display: flex; gap: 12px; }
.outcomes div::before { content: "→"; color: var(--accent); flex-shrink: 0; }
.methods { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.methods .cm-label { margin-bottom: 10px; }
.methods-list { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--ink-3); }

/* additional engagements */
.case-addl { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--rule); }
.addl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 28px; }
.addl-item { padding: 16px 0 0; border-top: 1px solid var(--rule-soft); }
.addl-t { font-family: var(--serif); font-size: calc(18px * var(--type-scale)); color: var(--ink); margin-bottom: 4px; }
.addl-s { font-size: 12.5px; font-weight: 300; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 860px) { .addl-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.about-support { padding-top: 6px; }
.about-statement { font-family: var(--serif); font-size: calc(clamp(26px, 3vw, 40px) * var(--type-scale)); line-height: 1.16; letter-spacing: -.01em; color: var(--ink); margin-bottom: 26px; text-wrap: pretty; }
.about-body { font-size: calc(15.5px * var(--type-scale)); font-weight: 300; line-height: 1.78; color: var(--ink-2); max-width: 60ch; }
.about-body + .about-body { margin-top: 14px; }
.founder {
  background: var(--surface-tint); border-radius: var(--r); padding: 36px 34px;
}
.founder-name { font-family: var(--serif); font-size: calc(30px * var(--type-scale)); line-height: 1.05; color: var(--ink); margin-bottom: 8px; }
.founder-name em { font-style: italic; color: var(--accent); }
.founder-role { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); }
.founder-rule { height: 1px; background: var(--rule); margin: 22px 0; }
.founder-bio { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.founder-cred { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }

.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 56px; }
.value {
  border: 1px solid var(--rule-soft); border-radius: var(--r); padding: 24px 22px 26px; background: var(--surface);
  transition: transform .25s ease, border-color .25s ease;
}
.value:hover { transform: translateY(-3px); border-color: var(--rule); }
.value-h { font-family: var(--serif); font-size: calc(21px * var(--type-scale)); line-height: 1.1; color: var(--ink); margin-bottom: 12px; }
.value-p { font-size: 13px; font-weight: 300; line-height: 1.62; color: var(--ink-2); }

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.insight {
  border: 1px solid var(--rule-soft); border-radius: var(--r); padding: 30px 28px 26px; background: var(--surface);
  display: flex; flex-direction: column; gap: 14px; min-height: 250px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.insight::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-deep); transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.insight:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rule); }
.insight:hover::before { transform: scaleY(1); }
.insight-topic { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); }
.insight-title { font-family: var(--serif); font-size: calc(23px * var(--type-scale)); line-height: 1.14; color: var(--ink); }
.insight-sub { font-size: 13.5px; font-weight: 300; line-height: 1.66; color: var(--ink-2); }
.insight-read { margin-top: auto; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.insight-read .arr { font-family: var(--serif); font-style: italic; font-size: 15px; transition: transform .25s ease; }
.insight:hover .insight-read .arr { transform: translateX(4px); }

/* ============================================================
   CONTACT (dark band)
   ============================================================ */
.contact { background: var(--slate-deep); color: var(--on-dark); border-radius: var(--r); padding: 80px 64px; position: relative; overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; position: relative; z-index: 1; }
.contact-h { font-family: var(--serif); font-weight: 300; font-size: calc(clamp(40px, 5.4vw, 78px) * var(--type-scale)); line-height: .98; letter-spacing: -.015em; color: #fff; }
.contact-h em { font-style: italic; color: var(--sage-bright); }
.contact-p { font-size: calc(16.5px * var(--type-scale)); font-weight: 300; line-height: 1.7; color: var(--on-dark-2); margin-bottom: 28px; }
.contact-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--rule-dk); position: relative; z-index: 1; }
.cmeta-label { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 8px; }
.cmeta-val { font-size: 14px; font-weight: 300; color: var(--on-dark); line-height: 1.5; }
.cmeta-val a { border-bottom: 1px solid var(--rule-dk); transition: border-color .2s ease; }
.cmeta-val a:hover { border-color: var(--sage-bright); }
/* huge ghost word behind contact */
.contact-ghost {
  position: absolute; right: -2%; bottom: -16%; font-family: var(--serif); font-style: italic;
  font-size: clamp(160px, 26vw, 420px); line-height: 1; color: rgba(255,255,255,.035);
  pointer-events: none; user-select: none; z-index: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 72px 0 56px; }
.footer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding-bottom: 44px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.footer-mark { font-family: var(--serif); font-size: 28px; color: var(--ink); }
.footer-name { font-family: 'Roboto', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; }
.footer-mark em { font-style: italic; color: var(--accent); }
.footer-tagline { font-size: 14px; font-weight: 300; color: var(--ink-3); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 44px 0; }
.footer-col-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-col div { font-size: 13.5px; font-weight: 300; color: var(--ink-2); transition: color .2s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-meta { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--ink-3); letter-spacing: .03em; flex-wrap: wrap; }

/* ============================================================
   SCROLL REVEAL  (robust: visible by default; JS "arms" only
   off-screen elements, so a non-firing observer can never leave
   content permanently hidden)
   ============================================================ */
.rv {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.rv.armed { opacity: 0; transform: translateY(22px); }
.rv.armed.d1 { transition-delay: .07s; }
.rv.armed.d2 { transition-delay: .14s; }
.rv.armed.d3 { transition-delay: .21s; }
.rv.armed.d4 { transition-delay: .28s; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.armed { opacity: 1 !important; transform: none !important; }
}

/* hero headline & phrase are static */
.hero-rise { animation: none; opacity: 1; transform: none; }
.cycler-static { color: var(--accent); font-style: italic; }

/* ============================================================
   TYPOGRAPHIC REVEAL — headings animate word-by-word in view.
   Base state is VISIBLE; JS adds .armed to hide below-fold items,
   then removes it to animate them in (mirrors the .rv system, so
   content is never permanently hidden if JS/print/reduced-motion).
   ============================================================ */
.tw {
  display: inline-block; white-space: pre;
  transition:
    opacity .6s ease,
    transform .72s cubic-bezier(.2,.75,.2,1),
    filter .6s ease;
  transition-delay: calc(var(--i, 0) * .045s);
}
.tw.armed { opacity: 0; transform: translateY(.55em); filter: blur(7px); }

/* hero headline: robust word entrance on load. Opacity stays 1 throughout,
   so content is NEVER hidden even if the animation engine stalls; the motion
   is a pure translate rise. */
@keyframes heroWordIn {
  from { transform: translateY(.5em); }
  to   { transform: none; }
}
.hero-h1 .tw {
  animation: heroWordIn .72s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * .06s);
}
@media (prefers-reduced-motion: reduce) {
  .hero-h1 .tw { animation: none; transform: none; }
}

/* inner span carries the cursor-reactive lift, independent of the reveal
   transform on .tw — so the two animations never fight */
.twc {
  display: inline-block;
  transform: translate3d(0, var(--ly, 0px), 0);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.heading-live { cursor: default; }

/* section numbers & big step numbers rise + fade in */
.num-anim { transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.2,1); }
.num-anim.armed { opacity: 0; transform: translateY(.4em); }

/* chip groups stagger in when their section enters view */
.step-pills .chip:nth-child(1), .ind-tags .chip:nth-child(1) { transition-delay: .03s; }
.step-pills .chip:nth-child(2), .ind-tags .chip:nth-child(2) { transition-delay: .08s; }
.step-pills .chip:nth-child(3), .ind-tags .chip:nth-child(3) { transition-delay: .13s; }
.step-pills .chip:nth-child(4), .ind-tags .chip:nth-child(4) { transition-delay: .18s; }
.step-pills .chip:nth-child(5), .ind-tags .chip:nth-child(5) { transition-delay: .23s; }
.step-pills .chip:nth-child(6), .ind-tags .chip:nth-child(6) { transition-delay: .28s; }
.step-pills .chip:nth-child(n+7), .ind-tags .chip:nth-child(n+7) { transition-delay: .33s; }
.chip.armed { opacity: 0; transform: translateY(9px); }

@media (prefers-reduced-motion: reduce) {
  .tw, .twc, .num-anim, .chip { transition: none !important; }
  .tw.armed, .num-anim.armed, .chip.armed { opacity: 1 !important; transform: none !important; filter: none !important; }
  .twc { transform: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .ind-card, .ind-card.feat, .ind-card.wide { grid-column: span 6; }
  .insights { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(3, 1fr); }
  .app-grid { grid-template-columns: 1fr; gap: 40px; }
  .app-sticky { position: static; }
}
@media (max-width: 860px) {
  .shell, .nav-inner { padding: 0 26px; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .hero-lower { grid-template-columns: 1fr; gap: 32px; }
  .hero-ctas { justify-content: flex-start; }
  .stripe { grid-template-columns: repeat(2, 1fr); }
  .stripe-cell:nth-child(2n) { border-right: none; }
  .sec-head { grid-template-columns: 1fr; gap: 12px; }
  .sec-num { text-align: left; }
  .intro-grid, .about-grid, .contact-grid, .ind-cols, .case-grid-meta, .contact-meta { grid-template-columns: 1fr; gap: 24px; }
  .svc-row { grid-template-columns: 36px 1fr; gap: 16px; }
  .svc-desc, .svc-tag { grid-column: 2; text-align: left; padding-top: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .insights, .values { grid-template-columns: 1fr; }
  .contact { padding: 56px 32px; }
  .sec { padding: 80px 0; }
}