/* ─────────────────────────────────────────────────────────────
   Second Nature Partners — Homepage
   Direction A · Light · v2
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:      #F0EDE8;
  --paper:   #F0EDE8;
  --ink:     #2A2520;
  --ink-soft:#5A4F45;
  --ink-45:  rgba(42,37,32,.45);
  --ink-30:  rgba(42,37,32,.30);
  --ink-18:  rgba(42,37,32,.18);
  --rule:    rgba(42,37,32,.09);
  --amber:   rgba(185,120,28,1);
  --cream:   #F0EDE8;

  /* Orb palette */
  --orb-yellow:   #F6CF56;
  --orb-orange:   #E8793A;
  --orb-amber:    #C45E1E;
  --orb-lavender: #9B8EC4;
  --orb-purple:   #7B6BA8;

  /* Layout */
  --pad-x: clamp(40px, 4.2vw, 88px);
  --rail-inset: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── Type primitives ─────────────────────────────────────── */
.italic, .crm{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
}

/* ── Global typographic rhythm ──────────────────────────────
   Unified eyebrow-to-title spacing: every section eyebrow sits at
   the same fixed vertical distance above its title. */
:root{
  --eyebrow-gap: 38px;
  /* Unified display scale shared by Sections 2, 3, 4 */
  --display-mid: clamp(40px, 4.4vw, 64px);
  --display-mid-line: 1.04;
}

/* ── Tweak: italic accents off ──────────────────────────────
   When `body.no-italics`, every Cormorant Garamond italic accent
   reverts to the sans-serif body type for a monotype treatment.
   !important needed because some elements carry inline italic styles. */
body.no-italics .italic,
body.no-italics .crm,
body.no-italics i.italic,
body.no-italics em.italic,
body.no-italics .model .display i,
body.no-italics .hero .tagline .l2,
body.no-italics .d-display .italic,
body.no-italics .d-body .d-close{
  font-family:"Outfit",ui-sans-serif,system-ui,sans-serif !important;
  font-style:normal !important;
  font-weight:300 !important;
}
.label{
  font-family:"Outfit",sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.mono{
  font-family:"Courier New", ui-monospace, monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* ── Global noise texture ────────────────────────────────── */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:.055;            /* lighter than .09 — per direction */
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:multiply;
}

/* ── The Orb (fixed, scroll-driven) ──────────────────────── */
.orb{
  position:fixed;
  left:50%;
  top:50%;
  width:46vw;
  height:46vw;
  max-width:680px;
  max-height:680px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
  will-change:transform, opacity, width, height;
  opacity:1;
  /* Smooth scroll-driven opacity / saturation changes so dimming flows
     between sections instead of jumping with each scroll event. Position
     and size are NOT transitioned — they're updated per requestAnimationFrame
     by the orb journey and need to track instantly. */
  transition: opacity .35s cubic-bezier(.22,1,.36,1),
              filter  .35s cubic-bezier(.22,1,.36,1);
}
.orb-inner{
  width:100%;
  height:100%;
  background:url('../assets/orb.png') center/contain no-repeat;
  animation:orb-drift 22s ease-in-out infinite;
  filter:saturate(1.02);
}
@keyframes orb-drift{
  0%   { translate:  0px   0px; }
  33%  { translate: -7px   9px; }
  66%  { translate:  9px  -7px; }
  100% { translate:  0px   0px; }
}

/* ── Orb-panel ────────────────────────────────────────────
   A fixed rounded-rect rendition of the orb used as the
   architecture full-bleed background and the duality right
   panel. Crossfades with the soft .orb above. JS drives
   width/height/left/top/border-radius and opacity inline. */
.orb-panel{
  position:fixed;
  left:50%;
  top:50%;
  width:100vw;
  height:100vh;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
  opacity:0;
  border-radius:0;
  overflow:hidden;
  background-color:transparent;
  background-image:
    /* main warm orb gradient — perfectly centered, organic fade to parchment */
    radial-gradient(
      ellipse 84% 102% at 50% 50%,
      var(--orb-yellow)             0%,
      var(--orb-orange)            18%,
      var(--orb-amber)             42%,
      rgba(196, 94, 30, .50)       66%,
      rgba(196, 94, 30, .18)       85%,
      rgba(196, 94, 30, 0)         100%
    );
  filter:saturate(1.05);
  will-change:width, height, left, top, opacity, border-radius;
  animation:orb-panel-drift 26s ease-in-out infinite;
}
.orb-panel-tint{
  /* Subtle parchment-to-orb gradient overlay smooths brightest hot spots
     so dark pillar text remains readable when full-bleed. */
  position:absolute; inset:0;
  background:radial-gradient(
    ellipse at 50% 45%,
    rgba(240,237,232,0)   0%,
    rgba(240,237,232,0)   55%,
    rgba(240,237,232,.10) 85%,
    rgba(240,237,232,.18) 100%
  );
  pointer-events:none;
}
@keyframes orb-panel-drift{
  0%   { transform: translate(-50%,-50%) scale(1); }
  50%  { transform: translate(-50%,-50%) scale(1.012); }
  100% { transform: translate(-50%,-50%) scale(1); }
}

/* Atmospheric backdrop that fades in during The Work bloom.
   z-index is 0 so it sits BEHIND the orb (z:1), above body::before (also 0).
   The body::before noise re-stacks on top via mix-blend-mode. */
.atmosphere{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(
    ellipse at 50% 50%,
    rgba(246,207,86,0.15)  0%,
    rgba(232,121,58,0.20)  30%,
    rgba(196,94,30,0.18)   55%,
    rgba(155,142,196,0.10) 75%,
    rgba(240,237,232,0)    90%
  );
  transition:opacity 1.2s cubic-bezier(.22,1,.36,1);
}

/* ── Edge text system ────────────────────────────────────── */
.edge{
  position:fixed;
  z-index:5;
  pointer-events:none;
  font-family:"Courier New", ui-monospace, monospace;
  font-size:9px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(42,37,32,.48);
  writing-mode:vertical-rl;
  white-space:nowrap;
  transition:color .9s cubic-bezier(.22,1,.36,1);
}
.edge-lt{ left:var(--rail-inset); top:48px;    transform:rotate(180deg); }
.edge-lb{ left:var(--rail-inset); bottom:52px; transform:rotate(180deg); }
.edge-rt{ right:var(--rail-inset); top:48px; }
.edge-rb{ right:var(--rail-inset); bottom:52px; }
.edge-lb .swap{
  display:inline-block;
  transition:opacity .35s ease;
}
.edge-lb.swapping .swap{ opacity:0; }

/* Cream during full orb bloom */
body.orb-full .edge{ color:rgba(240,237,232,.55); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:16px var(--pad-x);
  background:transparent;
  transform:translateY(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .35s ease, padding .35s ease;
}
.nav::before{
  /* Backdrop layer — gradient bg + blur, faded at the bottom so nav
     melts seamlessly into the page instead of cutting a hard edge. */
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:transparent;
  transition:opacity .35s ease;
  opacity:0;
}
.nav.scrolled{
  padding-top:10px; padding-bottom:24px;
}
.nav.hidden{
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
}
.nav.scrolled::before{
  background:linear-gradient(
    to bottom,
    rgba(240,237,232,.96) 0%,
    rgba(240,237,232,.86) 40%,
    rgba(240,237,232,.50) 75%,
    rgba(240,237,232,0)   100%
  );
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  mask-image:linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 80%, rgba(0,0,0,0) 100%);
  opacity:1;
}
.nav .left{ display:flex; gap:34px; align-items:center; }
.nav .left a{
  font-family:"Outfit",sans-serif;
  font-size:11px;
  font-weight:300;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(42,37,32,.55);
  transition:color .2s ease;
}
.nav .left a:hover{ color:var(--ink); }
.nav .left a.active{
  color:var(--ink);
  position:relative;
}
.nav .left a.active::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:1px;
  background:rgba(185,120,28,.85);
}
.nav .left .sep{ color:rgba(42,37,32,.22); }

.nav .logo{ justify-self:center; }
.nav .logo img{ height:64px; width:auto; display:block; }

.nav .right{ display:flex; justify-content:flex-end; }
.nav .pill{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  min-width:164px;
  padding:13px 22px;
  border:.5px solid rgba(42,37,32,.22);
  border-radius:40px;
  font-size:12px;
  font-weight:300;
  letter-spacing:.005em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.nav .pill:hover{ border-color:rgba(42,37,32,.55); }
.nav .pill .a, .nav .pill .b{
  position:absolute; left:0; right:0;
  transition:opacity .12s ease;
  text-align:center;
}
.nav .pill .b{ opacity:0; }
.nav .pill:hover .a{ opacity:0; }
.nav .pill:hover .b{ opacity:1; }
.nav .pill .ghost{ visibility:hidden; }

body.orb-full .nav .left a{ color:rgba(240,237,232,.70); }
body.orb-full .nav .left a:hover{ color:#fff; }
body.orb-full .nav .left .sep{ color:rgba(240,237,232,.30); }
body.orb-full .nav .pill{ color:#F0EDE8; border-color:rgba(240,237,232,.45); }
body.orb-full .nav .logo img{ filter:invert(1) brightness(1.05) saturate(0) hue-rotate(0deg); }

/* ── Scroll reveal ───────────────────────────────────────── */
.r{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.r.on{ opacity:1; transform:translateY(0); }
.r-d1{ transition-delay:.10s; }
.r-d2{ transition-delay:.20s; }
.r-d3{ transition-delay:.30s; }
.r-d4{ transition-delay:.40s; }

/* ── Blueprint marks (fixed, subtle) ─────────────────────── */
.blueprints{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  color:rgba(42,37,32,.28);
  transition:opacity .8s ease;
}
.blueprints svg{ overflow:visible; }
.bp{
  position:absolute;
  font-family:"Courier New",monospace;
  font-size:7px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(42,37,32,.55);
  transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .85s cubic-bezier(.22,1,.36,1), color .85s ease;
}
.bp .lbl{ position:absolute; white-space:nowrap; }

/* Top-right global blueprint mark — hidden; replaced by per-section marks */
.bp-tr{ display:none; }
.bp-br{ bottom:62px; right:120px; transform-origin:bottom right; transition:bottom .6s ease, transform .6s ease; }

/* On the CTA section the page is shorter and the footer sits right under the
   fold — lift the blueprint mark so it's not glued to the footer. */
body.section-cta .bp-br{ bottom:120px; }

/* When the Work section is on screen, blueprints enlarge in place.
   Top-right mark slides DOWN to sit parallel with the cycling sections
   (01/02/03/04). Bottom-right mark stays anchored at the bottom-right corner,
   just scaled up. Both ease back to their resting state when leaving Work. */
body.in-work .blueprints{ color:rgba(42,37,32,.40); }
body.in-work .bp{ color:rgba(240,237,232,.55); }
body.in-work .bp-tr{ opacity:0; }
body.in-work .bp-br{
  transform:scale(.92);
  bottom:46px;
  right:60px;
}

body.orb-full .blueprints{ color:rgba(240,237,232,.32); }
body.orb-full .bp{ color:rgba(240,237,232,.55); }

/* ── Section: HERO ───────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--pad-x);
  /* Bumped from 32px to 128px so the flex-end content stack
     (title + pencil + hero-sub/tagline row) lifts clear above the
     absolute-positioned .footbar (bottom:38px) and any blueprint
     marks anchored near the bottom — they were colliding before. */
  padding-bottom:128px;
  padding-top:160px;
  z-index:3;
}
.hero .eyebrow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  /* Unified eyebrow spec — matches .label / .d-eyebrow / .work-sticky-header
     .label / .brand-strip-eye so every section on the page reads the
     same: Outfit 500, 10px, .22em tracking, dimmed ink. */
  font-family:"Outfit",sans-serif;
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--ink-soft);
  margin-bottom:var(--eyebrow-gap);
}
.hero .eyebrow .tick{
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
  display:inline-block;
}
.hero h1.display{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:clamp(46px, 5.8vw, 78px);
  line-height:.98;
  letter-spacing:-.042em;
  max-width:1000px;
}
.hero h1.display span{ display:block; }

.hero .pencil{
  display:block;
  margin-top:18px;
  width:min(620px, 60vw);
  height:24px;
  color:var(--ink);
  opacity:.55;
}

.hero .bottomrow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  /* Halved from 48px → 24px so the hero-sub + tagline row sits tighter
     under the pencil rule, reading as a continuation of the title
     composition rather than a separated supporting beat. */
  margin-top:24px;
}
.hero .hero-sub{
  max-width:560px;
  font-size:15px;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.hero .tagline{
  text-align:right;
  color:var(--ink-soft);
  margin-bottom:2px;
}
.hero .tagline .l1{
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:15px;
  letter-spacing:-.005em;
  line-height:1.1;
}
.hero .tagline .l2{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:13px;
  line-height:1.45;
  margin-top:2px;
}

.hero .footbar{
  position:absolute;
  left:var(--pad-x); right:var(--pad-x); bottom:38px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.hero .footbar .scroll{ display:flex; align-items:center; gap:12px; }
.hero .footbar .scroll .line{ width:48px; height:1px; display:block; background:var(--ink-45); }

/* ── Section: OUR MODEL ──────────────────────────────────── */
.model{
  position:relative;
  z-index:3;
  padding:120px var(--pad-x) 120px;
}
.model .label{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  white-space:nowrap;
}
.model .label::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.model .billboard{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:88px;
  align-items:end;
}
.model .model-headline{
  display:flex;
  flex-direction:column;
}
.model .display{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:var(--display-mid);
  line-height:var(--display-mid-line);
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:820px;
}
.model .display span{ display:block; }
.model .display i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
}
.model .copy{
  max-width:460px;
  font-size:14px;
  line-height:1.78;
  font-weight:400;
  color:var(--ink);
}
.model .copy p{ margin:0; }
.model .copy p + p{ margin-top:22px; }

/* ── Section: THE WORK ────────────────────────────────────
   Integrated sticky scroller: title pinned at top, panels cycle beneath.
   ───────────────────────────────────────────────────────── */
.work-section{
  position:relative;
  z-index:3;
}

/* Sticky scroller */
.work-outer{
  position:relative;
  height:340vh;
  z-index:3;
}
.work-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.work-sticky-header{
  position:absolute;
  /* Pulled flush to the top so the New World Architecture block
     starts at the top edge of the orb halo rather than floating
     below it. The 3-stanza copy below now extends DOWN into the
     orb's upper hemisphere, with the pillar copy beneath sitting
     directly behind the orb's core. */
  top:clamp(56px, 7.5vh, 96px);
  left:var(--pad-x);
  right:var(--pad-x);
  z-index:3;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}
.work-sticky-header .label{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  white-space:nowrap;
}
.work-sticky-header .label::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.work-sticky-header .work-title{
  margin:0;
  /* Body Outfit treatment — switched from Cormorant italic display to
     Outfit 300 small regular so the three-stanza copy reads as
     measured body prose, not as a manifesto headline. Size locked to
     14px so it matches the pillar `.panel-text .body` font-size for
     a consistent reading scale between upper and lower copy. */
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-style:normal;
  font-size:14px;
  line-height:1.55;
  letter-spacing:0;
  color:var(--ink);
  /* Capped to roughly match the pillar `.panel-text` reading width
     so the upper headline + lower body share a vertical column. */
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:1.1em;
}
.work-sticky-header .work-title .stanza{
  display:flex;
  flex-direction:column;
}
.work-sticky-header .work-title .stanza > span{ display:block; }
/* Coda stanza — tighten the three short lines so they read as a
   stacked refrain, not three separate sentences. */
.work-sticky-header .work-title .coda{ gap:0; line-height:1.45; }
.work-sticky-header .work-title .italic{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:400;
  font-size:1.08em;
}
.work-sticky-header .work-title span{ display:block; }

/* ── New World Architecture — "graphic" variant ──────────────
   Opt-in via body.nwa-graphic (toggled by the Tweaks panel).
   Treats the three stanzas as a blueprint composition:
     · numbered set (01 / 02 / 03) in light Outfit on the left
     · thin amber rule between number and prose
     · Cormorant italic emphases lift key terms
     · hairline amber separators between stanzas
   The base "prose" treatment (default) stays untouched so you can
   flip back from the Tweaks panel without losing the original. */
body.nwa-graphic .work-sticky-header{
  align-items:center;
  gap:28px;
}
body.nwa-graphic .work-sticky-header .label{
  color:rgba(42,37,32,.55);
  letter-spacing:.32em;
  font-size:9.5px;
}
body.nwa-graphic .work-sticky-header .label::before{
  background:rgba(185,120,28,.7);
  width:36px;
  opacity:1;
}
body.nwa-graphic .work-sticky-header .work-title{
  /* Re-grid: three rows with a 2-col layout (number rule, prose). */
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:28px;
  row-gap:0;
  max-width:680px;
  text-align:left;
  /* Reset the prose-mode font to a slightly larger, looser scale that
     can carry the typographic detail. */
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-style:normal;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
body.nwa-graphic .work-sticky-header .work-title .stanza{
  display:contents;
}
/* Stanza number — sits left, large light-Outfit numeral with a tiny
   amber tick below it. */
body.nwa-graphic .work-sticky-header .work-title .stanza::before{
  content:attr(data-num);
  font-family:"Outfit",sans-serif;
  font-weight:200;
  font-size:28px;
  letter-spacing:-.02em;
  color:rgba(42,37,32,.55);
  line-height:1;
  padding-top:6px;
  position:relative;
  display:block;
}
body.nwa-graphic .work-sticky-header .work-title .stanza::after{
  /* Hairline amber rule separating stanzas. Lives in the prose column,
     spanning the full width. */
  content:"";
  display:block;
  height:.5px;
  background:rgba(185,120,28,.45);
  margin:18px 0;
  grid-column:2;
}
body.nwa-graphic .work-sticky-header .work-title .stanza:last-of-type::after{
  display:none;
}
/* Each stanza's prose lines wrap into the right column. The HTML has
   <span class="stanza"><span>…</span><span>…</span></span> — these
   inner spans need to land in the second grid column as block lines. */
body.nwa-graphic .work-sticky-header .work-title .stanza > span{
  grid-column:2;
  display:block;
}
/* Cormorant italic emphases — pulled up a touch in size for graphic
   weight. */
body.nwa-graphic .work-sticky-header .work-title .italic{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:400;
  font-size:1.18em;
  letter-spacing:-.005em;
  color:#2A2520;
}
/* The coda — tighten its three short lines into a stacked refrain. */
body.nwa-graphic .work-sticky-header .work-title .coda > span{
  line-height:1.4;
}

/* Pillar panels — anchored beneath the pinned header */
.domain-panel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  /* Pulled UP from 52vh→44vh so the pillar content sits closer to the
     orb's core (which is fixed at viewport 50%/50% during the
     architecture phase) without crashing into the New World
     Architecture stanza block above. The old 36vh value was too
     aggressive and ate the gap between the two copy zones. */
  padding:clamp(320px, 44vh, 440px) var(--pad-x) min(8vh, 80px);
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.domain-panel.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.domain-panel.exit{
  opacity:0;
  transform:translateY(-28px);
}

/* Content block — centered above/over the orb, all text on the centerline. */
.panel-content{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  max-width:740px;
  width:auto;
  position:relative;
}

/* Big number — left of the text, aligned with the paragraph */
.num-wrap{
  position:relative;
  display:inline-block;
}
.pencil-num{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-48%, -54%) rotate(-5deg);
  font-family:'Architects Daughter', 'Caveat', cursive;
  font-weight:400;
  font-size:clamp(46px, 5vw, 70px);
  line-height:.82;
  letter-spacing:.02em;
  color:rgba(38,32,28,.42);
  pointer-events:none;
  user-select:none;
  z-index:2;
  /* keep filter very gentle so it doesn't fatten the strokes */
  filter:url(#pencil);
}
.ghost-num{
  font-family:"Outfit", sans-serif;
  font-weight:200;
  font-size:clamp(52px, 6vw, 82px);
  line-height:.82;
  letter-spacing:-.04em;
  color:rgba(42,37,32,.10);
  filter:blur(2px);
  pointer-events:none;
  user-select:none;
  margin-top:-4px;
  display:block;
}

.panel-text{
  max-width:600px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.meta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
}
.amber-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(185,120,28,1);
  display:inline-block;
}
.meta-row .counter{
  font-family:"Courier New", monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-soft);
}
.meta-row .section-name{
  font-family:"Outfit", sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.principle{
  margin:0 0 10px 0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:clamp(32px, 3.8vw, 46px);
  letter-spacing:-.032em;
  line-height:1.02;
  color:var(--ink);
}
.panel-text .tagline{
  margin:0 0 22px 0;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.35;
  letter-spacing:-.004em;
  color:rgba(42,37,32,.62);
  max-width:540px;
  text-align:center;
}
.rule{
  display:block;
  width:36px;
  height:.5px;
  background:rgba(185,120,28,.45);
  margin:0 auto 22px;
}
.body{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.78;
  color:rgba(42,37,32,.86);
  max-width:540px;
  text-align:center;
}

/* Progress dots — sit directly under the body paragraph */
.prog-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.prog-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(42,37,32,.16);
  transition:background .5s ease, transform .5s ease;
}
.prog-dot.active{
  background:rgba(185,120,28,1);
  transform:scale(1.2);
}

/* Cream takeover REMOVED for Work section — text stays dark per direction. */

/* ── Section: BLUEPRINT + UNLOCK (Duality) ────────────────
   True 50/50 dual-panel. Left = parchment process side with
   subtle blueprint grid. Right = transparent — the morphed
   orb-panel sitting fixed behind it shows through as background.
   Both outer corners rounded; parchment shows at corners.
   ───────────────────────────────────────────────────────── */
.duality{
  position:relative;
  z-index:3;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  padding:48px var(--pad-x);
}
.duality-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  width:100%;
  min-height:calc(100vh - 96px);
  border-radius:36px;
  overflow:hidden;
}
.duality-panel{
  position:relative;
  padding:96px clamp(40px, 4vw, 80px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:560px;
}

/* LEFT — parchment + blueprint grid */
.duality-left{
  background:var(--paper);
}
.duality-blueprint{
  position:absolute;
  bottom:40px;
  right:40px;
  width:140px;
  height:70px;
  pointer-events:none;
  color:rgba(42,37,32,.45);
  opacity:.75;
}
.duality-blueprint-right{
  /* Mirror to bottom-right of the right panel (= right edge of viewport),
     framing the section symmetrically against the left panel's mark. */
  bottom:40px;
  right:40px;
  left:auto;
  color:rgba(42,37,32,.55);
}
.duality-blueprint-right .bp-label{ color:rgba(42,37,32,.55); }
.duality-blueprint svg{ display:block; overflow:visible; }
.duality-blueprint .bp-label{
  position:absolute;
  bottom:-18px;
  right:0;
  font-family:"Courier New", monospace;
  font-size:8px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(42,37,32,.45);
  white-space:nowrap;
}

/* RIGHT — frosted glass; blurs the orb behind for depth + copy contrast */
.duality-right{
  background:
    linear-gradient(180deg,
      rgba(240,237,232,.18) 0%,
      rgba(240,237,232,.10) 55%,
      rgba(240,237,232,.16) 100%);
  backdrop-filter:blur(22px) saturate(1.08);
  -webkit-backdrop-filter:blur(22px) saturate(1.08);
  /* inner frame — hairline border on the left edge (shared with left panel)
     plus a soft inset highlight on the inside so it feels like a sheet of
     glass laid over the orb. */
  border-left:1px solid rgba(240,237,232,.22);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(42,37,32,.05),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(42,37,32,.04);
}

/* Shared content column */
.duality-content{
  position:relative;
  z-index:2;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:var(--eyebrow-gap);
}
.d-eyebrow{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  /* Unified with all other page eyebrows — was .24em, now .22em to match
     .label / .hero .eyebrow / .work-sticky-header .label / .brand-strip-eye. */
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.d-eyebrow::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.d-eyebrow.on-orb{ color:var(--ink-soft); }
.d-display{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:var(--display-mid);
  line-height:1.0;
  letter-spacing:-.012em;
  color:var(--ink);
}
.d-display .italic{
  font-style:italic;
  font-weight:300;
}
.d-display.on-orb{ color:var(--ink); }
.d-body{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  color:rgba(42,37,32,.68);
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:480px;
}
.d-body p{ margin:0; }
.d-body .d-close{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:18px;
  line-height:1.45;
  color:rgba(42,37,32,.78);
}
.d-body.on-orb{ color:rgba(42,37,32,.78); }
.d-body.on-orb .d-close{ color:var(--ink); }

@media (max-width: 900px){
  .duality{ padding:28px 16px; }
  .duality-grid{ grid-template-columns:1fr; min-height:auto; }
  .duality-panel{ padding:64px 32px; min-height:60vh; }
}

/* ── Section: CTA ─────────────────────────────────────────── */
.cta{
  position:relative;
  z-index:3;
  min-height:56vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(40px, 5vh, 80px) var(--pad-x) clamp(72px, 9vh, 132px);
}
.cta .copy{
  max-width:720px;
  margin:0 0 32px;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--ink);
}
.cta .btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--ink);
  color:var(--cream);
  border-radius:40px;
  padding:16px 40px;
  font-family:"Outfit",sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.01em;
  transition:opacity .25s ease, transform .25s ease;
}
.cta .btn:hover{ opacity:.85; transform:translateY(-1px); }
.cta .btn .arr{ display:inline-block; transition:transform .25s ease; }
.cta .btn:hover .arr{ transform:translateX(4px); }

/* Mobile-only coordinate detail anchored inside the CTA — hidden on
   desktop where the global .edge-rb plate already shows the coords. */
.cta-coords{ display:none; }

/* ── Footer ───────────────────────────────────────────────── */
footer.foot{
  position:relative;
  z-index:3;
  padding:18px var(--pad-x);
  background:var(--bg);
  border-top:.5px solid var(--rule);
  font-family:"Courier New",monospace;
}
.foot-cols{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr 1.5fr;
  gap:32px;
  align-items:start;
}
.foot-col{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.foot-col a,
.foot-col span{
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1.7;
  transition:color .2s ease;
  white-space:nowrap;
}
.foot-col a:hover{ color:var(--ink); }
.foot-meta{
  text-align:right;
  align-items:flex-end;
  color:var(--ink-45);
}
.foot-meta span{ color:var(--ink-45); }

/* Mobile bottom tab bar is injected on every page by mobile-nav.js so
   the mobile carousel + lightbox setup runs without page-level wiring.
   On desktop the element exists in the DOM but has no role — hide it.
   The mobile stylesheet's `@media (max-width:768px)` block re-shows it
   as the fixed bottom bar at phone widths. */
.m-tabbar{ display:none; }

@media (max-width: 900px){
  footer.foot{ padding:16px 20px; }
  .foot-cols{ grid-template-columns:1fr 1fr; gap:18px 24px; }
  .foot-meta{ grid-column:1 / -1; text-align:left; align-items:flex-start; }
}

/* ── Responsive bottom-stop ──────────────────────────────── */
@media (max-width: 900px){
  .hero{ padding-top:140px; padding-bottom:80px; }
  .hero .bottomrow{ flex-direction:column; align-items:flex-start; }
  .hero .tagline{ text-align:left; }
  .model .billboard{ grid-template-columns:1fr; gap:40px; }
  .domain-content{ grid-template-columns:1fr; gap:30px; }
  .domain-num{ min-width:0; }
  .work-foot{ flex-direction:column; align-items:flex-start; gap:28px; }
  .nav .logo img{ height:48px; }
  .nav .left{ gap:18px; }
  .nav .left a:not(:first-child){ display:none; }
}

/* ─────────────────────────────────────────────────────────
   Subpage system — Clients & About
   Mirrors the homepage visual vocabulary at a slightly quieter
   register: editorial hero, alternating case-study spreads,
   philosophy + team blocks.
   ───────────────────────────────────────────────────────── */

/* ── Subpage hero — one notch quieter than the homepage hero ── */
.sub-hero{
  position:relative;
  min-height:88vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--pad-x);
  padding-bottom:96px;
  padding-top:200px;
  z-index:3;
}
.sub-hero .label{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  white-space:nowrap;
  margin-bottom:var(--eyebrow-gap);
}
.sub-hero .label::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.sub-hero h1.sub-display{
  margin:0 0 36px 0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:clamp(38px, 4.6vw, 62px);
  line-height:1.0;
  letter-spacing:-.032em;
  max-width:980px;
  color:var(--ink);
}
.sub-hero h1.sub-display span{ display:block; }
.sub-hero h1.sub-display i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
}
.sub-hero .sub-lede{
  max-width:640px;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.72;
  color:var(--ink);
  margin:0;
}
.sub-hero .sub-lede i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
}

/* ── Generic editorial section (for "How we engage", "Philosophy", etc) ── */
.sub-section{
  position:relative;
  z-index:3;
  padding:140px var(--pad-x) 140px;
}
.sub-section .label{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  white-space:nowrap;
}
.sub-section .label::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.sub-section .billboard{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:88px;
  align-items:start;
}
.sub-section .display{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:var(--display-mid);
  line-height:var(--display-mid-line);
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:820px;
}
.sub-section .display span{ display:block; }
.sub-section .display i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
}
.sub-section .copy{
  max-width:480px;
  font-family:"Outfit",sans-serif;
  font-size:14px;
  line-height:1.78;
  font-weight:400;
  color:var(--ink);
}
.sub-section .copy p{ margin:0; }
.sub-section .copy p + p{ margin-top:22px; }
.sub-section .copy .close{
  margin-top:22px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:19px;
  line-height:1.45;
  color:var(--ink);
}

/* ── Case-study spreads — alternating L/R editorial layout ── */
.case-studies{
  position:relative;
  z-index:3;
  padding:80px var(--pad-x) 120px;
}
.case-studies > .label{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  margin-bottom:40px;
}
.case-studies > .label::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.case-studies .cs-title{
  margin:0 0 80px 0;
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-style:normal;
  font-size:clamp(36px, 4vw, 56px);
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--ink);
}

.case{
  /* Circle diameter mirrors the height of the description copy — from
     the top of .cs-body down to the bottom of the text block (excluding
     the title + scope row). Computed live in orb-journey-subpage.js and
     pushed to this var as a px length. align-items:flex-end then locks
     the circle's bottom edge to the text bottom, so its top lands at the
     first line of the body copy — visually paired with the description. */
  --cs-circle: clamp(360px, 38vw, 580px);
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:clamp(72px, 7.5vw, 140px);
  padding:96px 0;
}
.case-studies .case{ border-top:0; }
.case-studies .case:last-of-type{ border-bottom:0; }
/* Single-case sections (e.g. Founder on About) shouldn't get the
   between-cases divider lines — they read as standalone content. */
.case-studies .case:only-of-type{
  border-top:0;
  border-bottom:0;
  /* Match the site-wide eyebrow-to-content distance: the section's
     .label already carries the gap, so the case shouldn't add its
     between-cases padding-top on top of it. Trim padding-bottom too
     so a single-case section doesn't feel marooned. */
  padding-top:0;
  padding-bottom:32px;
}
/* Single-case rows (no .cs-name) need their column to feel tighter —
   the standard 18px gap between scope/rule/body looks marooned without
   a big name anchoring them. */
.case-studies .case:only-of-type .cs-text{
  gap:14px;
}
.case-studies .case:only-of-type .cs-rule{
  margin:2px 0;
}
/* A case-studies section that only carries one case (e.g. Founder on
   About) shouldn't keep the full 120px below — there's nothing else
   underneath that needs separation from. */
.case-studies:has(.case:only-of-type){
  padding-bottom:60px;
}

/* ── Brand strip — inline under founder copy ─────────────────
   Slow horizontal marquee with edge fade. Lives inside .cs-text so
   it sits at the same width as the founder copy column, not full
   viewport width. The marquee track is doubled in markup so the
   keyframe can translate -50% and loop seamlessly. */
.brand-strip-inline{
  margin-top:40px;
  width:100%;
  max-width:100%;
}
.brand-strip-inline .brand-strip-eye{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 20px 0;
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-strip-inline .brand-strip-eye::before{
  content:'';
  width:24px;
  height:1px;
  background:currentColor;
  opacity:.85;
}
.brand-marquee{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brand-track{
  display:inline-flex;
  align-items:center;
  gap:clamp(36px, 4vw, 60px);
  /* The track is twice as long as one set of logos; animating to -50%
     resets to a state identical to 0%. Slow pace — 45s for one loop. */
  animation:brand-scroll 120s linear infinite;
  white-space:nowrap;
  padding-left:clamp(36px, 4vw, 60px);
}
@keyframes brand-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
.brand-mark{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  user-select:none;
}
.brand-mark img,
.brand-mark svg{
  height:clamp(25px, 2.5vw, 34px);
  width:auto;
  max-width:144px;
  object-fit:contain;
  display:block;
  /* Logos are pre-processed to black-on-transparent silhouettes, so we
     only need to dim them to muted warm ink on the parchment ground.
     Sepia adds a touch of warmth so they read as ink, not flat gray.
     The drop-shadow gives each mark a hint of float — it reads as
     ink resting on paper rather than printed into it, which is what
     gives the strip its depth. */
  opacity:.52;
  filter:sepia(.18) drop-shadow(0 1px 1.5px rgba(42,37,32,.10));
  transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}
/* Gentle vertical wave — every other mark sits a hair lower, creating
   a subtle near/far rhythm as the strip drifts past. */
.brand-mark:nth-child(2n)   img,
.brand-mark:nth-child(2n)   svg{ transform:translateY(2px); opacity:.48; }
.brand-mark:nth-child(3n+1) img,
.brand-mark:nth-child(3n+1) svg{ transform:translateY(-1px); opacity:.56; }
.brand-mark:hover img,
.brand-mark:hover svg{
  opacity:.82;
  filter:sepia(.10);
}
/* Stanford SVG renders visually small because its design has slender
   paths and internal padding — bump it ~18% so it reads at the same
   visual weight as the wordmark logos. */
.brand-mark img[src$="stanford.svg"]{
  height:clamp(38px, 3.8vw, 52px);
  max-width:220px;
}
/* Chantecaille (animal seals + wordmark) and Harry Winston (HW crest
   + wordmark) both stack their mark over text, so the wordmark renders
   compressed inside the bounding box — give them a bit more room. */
.brand-mark img[src$="chantecaille.png"],
.brand-mark img[src$="harry-winston.png"]{
  height:clamp(30px, 3vw, 40px);
  max-width:172px;
}
/* Bold/heavy wordmarks (Tom Ford, Plug and Play, Grability) read a
   notch larger than the rest because their letterforms are weighty —
   shrink them ~12% so they sit at the same visual mass. */
.brand-mark img[src$="grability.png"]{
  height:clamp(19px, 1.9vw, 26px);
  max-width:114px;
}
.brand-mark img[src$="tom-ford.png"],
.brand-mark img[src$="plug-and-play.png"]{
  height:clamp(18px, 1.8vw, 25px);
  max-width:108px;
}
.brand-marquee:hover .brand-track{ animation-play-state:paused; }

@media (max-width: 700px){
  .brand-strip-inline{ margin-top:28px; }
  .brand-track{ gap:28px; padding-left:28px; }
  .brand-mark{ font-size:15px; }
}

/* ── Zigzag alignment ────────────────────────────────────
   Both rev and non-rev anchor the duo to the LEFT of the section
   (matching the section heading's left edge). The only difference is
   the order — rev puts the text first, non-rev puts the circle first.
   This produces a visual rhyme: in non-rev cases the text's LEFT edge
   lands roughly where the previous case's text RIGHT edge sat, so the
   eye reads diagonally across the page from one case to the next. */
.case{ justify-content:flex-start; }
.case.rev .cs-text{ order:1; }
.case.rev .cs-image{ order:2; }
.case:not(.rev) .cs-image{ order:1; }
.case:not(.rev) .cs-text{ order:2; }

/* ── Circular mood thumbnail ────────────────────────────
   The real page orb (fixed, scroll-driven via orb-journey-subpage.js)
   parks behind each case's circle and supplies the warm halo past the
   edge. The sepia tint pulls disparate mood images into a single tonal
   register. No outer ring, no padding — just a clean circular crop. */
.case .cs-image{
  position:relative;
  flex:0 0 auto;
  width:var(--cs-circle);
  height:var(--cs-circle);
  isolation:isolate;
}
.case .cs-image image-slot{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  overflow:hidden;
  filter:sepia(.22) saturate(.88) contrast(1.02) brightness(1.01);
  transition:filter .8s cubic-bezier(.22,1,.36,1);
}
.case:hover .cs-image image-slot{
  filter:sepia(.10) saturate(.98) contrast(1.02) brightness(1.02);
}

/* ── Text column ────────────────────────────────────────── */
.case .cs-text{
  flex:0 1 540px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.case .cs-name{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-style:normal;
  font-size:clamp(32px, 3.4vw, 44px);
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--ink);
}
.case .cs-scope{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.case .cs-scope .dot{
  width:3px; height:3px;
  border-radius:50%;
  background:rgba(42,37,32,.32);
  display:inline-block;
}
.case .cs-rule{
  display:block;
  width:36px;
  height:.5px;
  background:rgba(185,120,28,.55);
  margin:6px 0 4px 0;
}
.case .cs-body{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:400;
  font-size:14.5px;
  line-height:1.78;
  color:rgba(42,37,32,.86);
}
/* Subtle in-body link — a thin underline at 35% ink hints at clickability
   without shouting. Underline strengthens on hover. */
.case .cs-body .bio-link,
.bio-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(42,37,32,.28);
  text-decoration-thickness:.5px;
  text-underline-offset:3px;
  transition:text-decoration-color .25s ease;
}
.case .cs-body .bio-link:hover,
.bio-link:hover{
  text-decoration-color:rgba(42,37,32,.72);
}
.case .cs-highlight{
  margin:6px 0 0 0;
  padding-top:18px;
  border-top:.5px solid var(--rule);
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-style:normal;
  font-size:14.5px;
  line-height:1.72;
  color:var(--ink);
  letter-spacing:-.004em;
}
.case .cs-highlight .hl-prefix{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:400;
  font-size:16px;
  color:var(--ink-soft);
  letter-spacing:.002em;
  margin-right:6px;
}
.case .cs-outcome{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-top:6px;
  padding-top:18px;
  border-top:.5px solid var(--rule);
}
.case .cs-outcome .arr{
  font-family:"Outfit",sans-serif;
  color:var(--amber);
  font-size:14px;
  line-height:1;
}
.case .cs-outcome .o-text{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:17px;
  line-height:1.45;
  color:var(--ink);
}
.case .cs-outcome .o-label{
  font-family:"Courier New",monospace;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-right:10px;
  white-space:nowrap;
  flex-shrink:0;
}

/* ── About — team grid ──────────────────────────────────── */
.team{
  position:relative;
  z-index:3;
  padding:140px var(--pad-x) 140px;
}
.team-head{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:88px;
  align-items:end;
  margin-bottom:72px;
}
.team-head .display{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:var(--display-mid);
  line-height:var(--display-mid-line);
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:820px;
}
.team-head .display span{ display:block; }
.team-head .display i{ font-style:italic; }
.team-head .copy{
  max-width:420px;
  font-size:14px;
  line-height:1.78;
  color:var(--ink);
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px 32px;
}
.member .portrait{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  background:rgba(42,37,32,.05);
  border:.5px solid var(--rule);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:18px;
}
.member image-slot{ width:100%; height:100%; display:block; }
.member .name{
  font-family:"Outfit",sans-serif;
  font-weight:400;
  font-size:16px;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0 0 4px 0;
}
.member .role{
  font-family:"Courier New",monospace;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.member .role i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  letter-spacing:.02em;
  text-transform:none;
  font-size:11px;
}

/* ── About — principles (small numbered manifesto items) ── */
.principles{
  position:relative;
  z-index:3;
  padding:120px var(--pad-x) 120px;
}
.principles-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:28px;
  margin-bottom:64px;
  max-width:820px;
}
.principles-head .display{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(34px, 3.8vw, 52px);
  line-height:1.04;
  letter-spacing:-.012em;
  color:var(--ink);
}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:48px 88px;
  max-width:1200px;
}
.tenet{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:28px;
  align-items:start;
}
.tenet .num-wrap{
  position:relative;
  display:inline-block;
  min-width:88px;
  margin-top:-4px;
}
.tenet .ghost-num{
  font-family:"Outfit",sans-serif;
  font-weight:200;
  font-size:64px;
  line-height:.82;
  letter-spacing:-.04em;
  color:rgba(42,37,32,.06);
  filter:blur(2px);
  display:block;
}
.tenet .pencil-num{
  position:absolute;
  top:-2px;
  left:8px;
  font-family:'Architects Daughter','Caveat',cursive;
  font-weight:400;
  font-size:18px;
  color:rgba(42,37,32,.42);
  transform:rotate(-4deg);
  z-index:2;
}
.tenet .t-text h4{
  margin:0 0 8px 0;
  font-family:"Outfit",sans-serif;
  font-weight:400;
  font-size:20px;
  letter-spacing:-.012em;
  color:var(--ink);
}
.tenet .t-text p{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.7;
  color:rgba(42,37,32,.82);
}

/* ── Subpage responsive collapses ──────────────────────── */
@media (max-width: 900px){
  .case{ flex-direction:column; row-gap:32px; padding:56px 0; justify-content:flex-start; }
  .case.rev{ justify-content:flex-start; }
  .case .cs-text,
  .case.rev .cs-text{ order:2; flex:0 1 auto; max-width:none; align-self:stretch; }
  .case .cs-image,
  .case.rev .cs-image{ order:1; align-self:center; }
  .team-grid{ grid-template-columns:repeat(2, 1fr); gap:40px 28px; }
  .team-head, .sub-section .billboard{ grid-template-columns:1fr; gap:32px; }
  .principles-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width: 700px){
  .sub-hero{ padding-top:140px; padding-bottom:64px; }
}