/* ============================================================
     DUAT — design tokens
     Display face lives behind ONE variable. To try the alternative
     (Instrument Serif), change --font-display and swap the <link>.
     ============================================================ */
  :root {
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Manrope", system-ui, -apple-system, sans-serif;

    /* the descent → emergence palette */
    --obsidian:   #0B0A09;
    --char:       #15110F;
    --mineral:    #241C16;
    --clay-deep:  #3A281E;
    --clay:       #5C3D2C;
    --terracotta: #A85C3E;
    --copper:     #B07A54;
    --gold:       #C6A46F;
    --sand:       #C9B49A;
    --bone:       #E4D9C6;
    --ivory:      #EFE7D8;

    --ink-on-dark:   #E7DECF;
    --ink-on-light:  #2A211B;
    --muted-on-dark: #9A8E7C;
    --muted-on-light:#6E5F50;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --reveal-dur: 1.35s;
  }

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

  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

  body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--obsidian);
    color: var(--ink-on-dark);
    font-weight: 350;
    line-height: 1.7;
    overflow-x: hidden;
  }

  ::selection { background: var(--terracotta); color: var(--ivory); }

  /* fine, ever-present grain so nothing reads as flat digital fill */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- shared layout ---------- */
  .wrap { width: min(1180px, 90vw); margin-inline: auto; }
  .narrow { width: min(760px, 88vw); margin-inline: auto;text-align: center; margin-top: 20px; }

  section { position: relative; padding-block: clamp(6rem, 16vh, 12rem); }

  .eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--muted-on-dark);
    margin: 0 0 1.4rem;
  }
  .light .eyebrow, .warm .eyebrow { color: var(--muted-on-light); }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 340;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
    letter-spacing: -0.015em;
    line-height: 1.04;
    margin: 0;
  }

  .italic { font-style: italic; font-variation-settings: "opsz" 90, "SOFT" 45, "WONK" 1; }

  p { margin: 0 0 1.4rem; }
  p:last-child { margin-bottom: 0; }

  a { color: inherit; }

  /* ---------- reveal motion ---------- */
  .rise { opacity: 0; transform: translateY(38px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
  .rise.in { opacity: 1; transform: none; }
  .rise.d1 { transition-delay: 0.12s; }
  .rise.d2 { transition-delay: 0.24s; }
  .rise.d3 { transition-delay: 0.36s; }
  .rise.d4 { transition-delay: 0.48s; }

  /* ============================================================
     NAV
     ============================================================ */
  header.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem clamp(1.4rem, 5vw, 3.4rem);
    transition: background 0.6s var(--ease), color 0.6s var(--ease);
  }
  header.nav.scrolled { background: color-mix(in srgb, var(--obsidian) 74%, transparent); backdrop-filter: blur(10px); }

  .brand {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-decoration: none;
  }
  .nav-links { display: flex; gap: 2.2rem; align-items: center; }
  .nav-links a {
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; font-weight: 500; opacity: 0.78;
    transition: opacity 0.4s var(--ease);
  }
  .nav-links a:hover { opacity: 1; }
  .nav-return {
    border: 1px solid currentColor; border-radius: 100px;
    padding: 0.55rem 1.3rem; opacity: 0.65 !important;
  }
  .nav-return:hover { opacity: 1 !important; }
  .nav-toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-body); font-weight: 500; }

  @media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .nav-links.open {
      display: flex; flex-direction: column; gap: 1.6rem;
      position: fixed; inset: 0; z-index: 200;
      background: var(--obsidian); color: var(--ink-on-dark);
      align-items: center; justify-content: center;
    }
    .nav-links.open a { font-size: 1rem; opacity: 0.9; }
    .nav-close { position: fixed; top: 1.8rem; right: 1.6rem; }
  }

  /* ============================================================
     1 — HERO
     ============================================================ */
  .hero {
    min-height: 100svh;
    display: flex; align-items: center;
    background: var(--obsidian);
    overflow: hidden;
  }
  /* darkness that slowly reveals a low warmth, low on the horizon */
  .hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(120% 80% at 50% 122%, rgba(168,92,62,0.34), rgba(92,61,44,0.12) 42%, transparent 66%),
      radial-gradient(90% 60% at 74% 8%, rgba(198,164,111,0.06), transparent 60%);
    animation: emberBreathe 13s var(--ease) infinite alternate;
  }
  @keyframes emberBreathe {
    from { opacity: 0.75; transform: translateY(2%) scale(1.02); }
    to   { opacity: 1;    transform: translateY(0)   scale(1.06); }
  }
  .hero .wrap { position: relative; z-index: 1; }
  .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
  .hero-media {
    position: relative; aspect-ratio: 4/6; border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(228,217,198,0.1);
    background:
      radial-gradient(70% 55% at 58% 28%, rgba(176,122,84,0.30), transparent 60%),
      linear-gradient(155deg, var(--mineral) 0%, var(--char) 95%);
    display: flex; align-items: flex-end; padding: 1.4rem;
  }
  /* .hero-media::after {
    content: ""; position: absolute; inset: 0; opacity: 0.13; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23hg)'/%3E%3C/svg%3E");
  } */
  .hero-media .cap { position: relative; z-index: 1; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); opacity: 0.7; }

  /* Real imagery dropped into any media frame fills it edge-to-edge, keeps the
     frame's rounded corners, and sits under the noise overlay for cohesion. */
  .hero-media > img,
  .bi-media > img,
  .portrait > img {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; margin: 0;
  }
  .hero-media:has(> img),
  .bi-media:has(> img),
  .portrait:has(> img) { padding: 0; }

  .hero .eyebrow { margin-bottom: 3.2rem; }
  .hero h1 {
    font-size: clamp(3rem, 9vw, 7.4rem);
    font-weight: 300;
    font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
    max-width: 15ch;
  }
  .hero h1 .rev { color: var(--sand); font-style: italic; font-variation-settings: "opsz" 100, "SOFT" 60, "WONK" 1; }
  .hero-support {
    margin-top: 2.6rem;
    max-width: 40ch;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--muted-on-dark);
    font-weight: 350;
  }
  .cta-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 3.4rem; }

  .cta {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
    padding: 1.05rem 2rem; border-radius: 100px;
    background: var(--ink-on-dark); color: var(--obsidian);
    transition: transform 0.5s var(--ease), background 0.5s var(--ease);
  }
  .cta:hover { transform: translateY(-2px); background: var(--bone); }
  .cta .arrow { transition: transform 0.5s var(--ease); }
  .cta:hover .arrow { transform: translateX(4px); }

  .cta-quiet {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
    color: var(--muted-on-dark); position: relative;
  }
  .cta-quiet::after {
    content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
    background: currentColor; transition: width 0.5s var(--ease);
  }
  .cta-quiet:hover { color: var(--ink-on-dark); }
  .cta-quiet:hover::after { width: 100%; }
  .warm .cta { background: var(--clay); color: var(--ivory); }
  .warm .cta:hover { background: var(--terracotta); }
  .warm .cta-quiet { color: var(--muted-on-light); }
  .warm .cta-quiet:hover { color: var(--ink-on-light); }

  .scroll-hint {
    position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
    font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--muted-on-dark); display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  }
  .scroll-hint .line { width: 1px; height: 44px; background: linear-gradient(var(--muted-on-dark), transparent); animation: drip 2.6s var(--ease) infinite; }
  @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* ============================================================
     2 — WHAT IS DUAT  (mineral)
     ============================================================ */
  .s-duat { background: var(--char); }
  .duat-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
  .concept-stack { display: flex; flex-direction: column; gap: 0.2rem; }
  .concept-stack span {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.9rem);
    font-weight: 300;
    line-height: 1.18;
    color: var(--muted-on-dark);
    font-variation-settings: "opsz" 100, "SOFT" 20, "WONK" 0;
  }
  .concept-stack span:first-child { color: var(--terracotta); font-style: italic; }
  .duat-copy .lead {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300; line-height: 1.35; letter-spacing: -0.01em;
    color: var(--ink-on-dark);
    margin-bottom: 2rem;
  }
  .duat-copy p { color: var(--muted-on-dark); font-size: 1.08rem; max-width: 46ch; }

  /* ============================================================
     3 — WALKING BESIDE YOU  (mineral, very open)
     ============================================================ */
  .s-beside { background: #F4EEE3; text-align: center; padding-block: clamp(5rem, 24vh, 18rem); }
  .beside-lead { color: var(--muted-on-dark); font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 34ch; margin-inline: auto; margin-bottom: 0.5rem; }
  .beside-statement {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 300; line-height: 1.08; letter-spacing: -0.02em;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
    color: #241c16;
  }
  .beside-statement em { font-style: italic; color: var(--copper); display: block; }
  .beside-after { margin-top: 2.5rem; color: var(--muted-on-dark); font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 34ch; margin-inline: auto; }

  /* ============================================================
     4 — ROOTED IN EXPERIENCE  (clay-deep)
     ============================================================ */
  .s-rooted { background: var(--clay-deep); }
  .rooted-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .portrait {
    position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
    background:
      radial-gradient(80% 60% at 40% 30%, rgba(198,164,111,0.28), transparent 60%),
      linear-gradient(160deg, var(--clay) 0%, var(--mineral) 90%);
    display: flex; align-items: flex-end; padding: 1.4rem;
  }
  .portrait::after {
    content: ""; position: absolute; inset: 0; opacity: 0.14; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  }
  .portrait .cap { position: relative; z-index: 1; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); opacity: 0.7; }
  .rooted-copy h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 2.2rem; color: var(--ivory); }
  .rooted-copy p { color: var(--bone); font-size: 1.08rem; max-width: 50ch; opacity: 0.86; }

  .pullquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 300; line-height: 1.06; letter-spacing: -0.02em;
    color: var(--gold);
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
width: min(760px, 88vw);
margin: 0 auto;    text-align: center; margin-top: 30px;
  }
  .rooted-after { color: var(--bone); font-size: clamp(1.15rem, 1.8vw, 1.4rem); max-width: 44ch; opacity: 0.9; }

  /* ============================================================
     4.5 — THE BECOMING  (white; image left, text right)
     ============================================================ */
  .s-becoming-feature { background: #F4EEE3; color: var(--ink-on-light); }
  .bi-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .bi-media {
    position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(42,33,27,0.1);
    background:
      radial-gradient(65% 45% at 42% 32%, rgba(198,164,111,0.25), transparent 60%),
      linear-gradient(158deg, var(--clay) 0%, var(--mineral) 96%);
    display: flex; align-items: flex-end; padding: 1.4rem;
  }
  .bi-media::after {
    content: ""; position: absolute; inset: 0; opacity: 0.14; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='bg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23bg)'/%3E%3C/svg%3E");
  }
  .bi-media .cap { position: relative; z-index: 1; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); opacity: 0.75; }
  .bi-eyebrow { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--clay); margin: 0 0 1.8rem; }
  .bi-title {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.08; letter-spacing: -0.02em;
    color: var(--mineral); margin: 0 0 2rem;
    font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
  }
  .bi-body { color: var(--muted-on-light); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; max-width: 48ch; margin: 0; }
  .bi-body .hl { color: var(--terracotta); }

  /* ============================================================
     5 — BECOMING  (clay, interstitial)
     ============================================================ */
  .s-becoming { background: var(--clay); text-align: center; padding-block: clamp(5rem, 22vh, 16rem); }
  .s-becoming .eyebrow { color: var(--sand); }
  .becoming-big {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7.5vw, 6rem);
    font-weight: 300; line-height: 1.06; letter-spacing: -0.02em;
    color: var(--ivory);
    font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
    max-width: 18ch; margin-inline: auto;
  }
  .becoming-sub { margin-top: 2.6rem; color: var(--bone); font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 40ch; margin-inline: auto; opacity: 0.85; }

  /* ============================================================
     6 — HOW WE WORK TOGETHER  (sticky three-state: stillness → depth → emergence)
     ============================================================ */
  .s-work {
    position: relative;
    height: 400vh;               /* ~1 viewport of scroll per stage + entry */
    padding: 0;
    background: var(--bone);     /* matches stage 01 so the sticky edges never flash */
  }
  .work-sticky {
    position: sticky; top: 0;
    height: 100vh; width: 100%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* per-stage theming vars — flipped by [data-stage] below */
    --wk-ink: var(--ink-on-light);
    --wk-muted: var(--muted-on-light);
    --wk-num: var(--clay-deep);
    --wk-hair: rgba(42,33,27,0.22);
    color: var(--wk-ink);
    transition: color 0.65s var(--ease);
  }
  .work-sticky[data-stage="1"] { --wk-ink: var(--ivory); --wk-muted: var(--sand); --wk-num: var(--copper); --wk-hair: rgba(228,217,198,0.24); }
  .work-sticky[data-stage="2"] { --wk-ink: var(--mineral); --wk-muted: var(--muted-on-light); --wk-num: var(--terracotta); --wk-hair: rgba(42,33,27,0.22); }

  /* ---- stacked crossfading backgrounds (abstract, one environment in 3 states) ---- */
  .work-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.75s var(--ease); }
  .work-bg.active { opacity: 1; }
  .bg-still {
    background:
      radial-gradient(90% 70% at 50% 22%, rgba(239,231,216,0.9), transparent 62%),
      linear-gradient(168deg, var(--bone) 0%, var(--sand) 58%, #b9ab97 100%);
  }
  .bg-depth {
    background:
      radial-gradient(80% 60% at 50% 8%, rgba(92,61,44,0.5), transparent 60%),
      radial-gradient(120% 90% at 50% 115%, rgba(11,10,9,0.85), transparent 55%),
      linear-gradient(170deg, var(--clay-deep) 0%, var(--char) 55%, var(--obsidian) 100%);
  }
  .bg-emerge {
    background:
      radial-gradient(100% 80% at 50% 120%, rgba(176,122,84,0.55), transparent 60%),
      radial-gradient(80% 60% at 50% -6%, rgba(198,164,111,0.4), transparent 62%),
      linear-gradient(180deg, var(--ivory) 0%, var(--sand) 60%, var(--copper) 130%);
  }
  /* soft grain over whatever background is showing */
  .work-sticky::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23w)'/%3E%3C/svg%3E");
  }

  /* ---- particle field (behind orb and text): circulate → fall/settle → sway ---- */
  .work-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  /* ---- the single evolving organic form: contract → descend/dissolve → expand ---- */
  .work-orb {
    position: absolute; z-index: 2; left: 50%; border-radius: 50%;
    filter: blur(46px); pointer-events: none;
    width: 300px; height: 300px; top: 30%;
    transform: translate(-50%, -50%) scale(0.62);
    background: radial-gradient(circle at 40% 38%, rgba(201,180,154,0.55), rgba(201,180,154,0) 70%);
    opacity: 0.7;
    transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), top 0.8s var(--ease), background 0.8s var(--ease);
  }
  .work-sticky[data-stage="1"] .work-orb {
    top: 66%; transform: translate(-50%, -50%) scale(0.9); opacity: 0.32; filter: blur(70px);
    background: radial-gradient(circle at 50% 55%, rgba(58,40,30,0.6), rgba(58,40,30,0) 72%);
  }
  .work-sticky[data-stage="2"] .work-orb {
    top: 40%; transform: translate(-50%, -50%) scale(1.6); opacity: 0.6; filter: blur(58px);
    background: radial-gradient(circle at 45% 42%, rgba(198,164,111,0.5), rgba(176,122,84,0) 72%);
  }

  /* ---- content: three stages stacked, crossfading ---- */
  .work-inner { position: relative; z-index: 3; width: min(1120px, 90vw); min-height: 50vh; }
  .work-label {
    position: absolute; z-index: 4; top: clamp(5rem, 12vh, 8rem); left: clamp(1.4rem, 5vw, 3.4rem);
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--wk-muted); transition: color 0.65s var(--ease);
  }
  .work-lead-line {
    position: absolute; z-index: 4; top: clamp(5rem, 12vh, 8rem); right: clamp(1.4rem, 5vw, 3.4rem);
    max-width: 28ch; text-align: right;
    font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 300; line-height: 1.4; color: var(--wk-muted);
    opacity: 0.9; transition: color 0.65s var(--ease), opacity 0.65s var(--ease);
  }
  .work-sticky[data-stage="1"] .work-lead-line,
  .work-sticky[data-stage="2"] .work-lead-line { opacity: 0; }

  .work-stage {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 7vw, 7rem); align-items: center;
    opacity: 0; transform: translateY(26px); pointer-events: none;
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  }
  .work-stage.active { opacity: 1; transform: none; pointer-events: auto; }
  .work-num {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(7rem, 17vw, 15rem); line-height: 0.9; letter-spacing: -0.02em;
    color: var(--wk-num); font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 0;
    transition: color 0.65s var(--ease);
  }
  .work-num em { font-style: normal; opacity: 0.4; }   /* the "0" quieter than the digit */
  .work-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 300; line-height: 1.08; letter-spacing: -0.015em;
    color: var(--wk-ink); margin: 0 0 1.2rem;
    font-variation-settings: "opsz" 130, "SOFT" 40, "WONK" 0;
    transition: color 0.65s var(--ease);
  }
  .work-support { font-size: 1.1rem; line-height: 1.65; color: var(--wk-muted); max-width: 34ch; margin: 0; transition: color 0.65s var(--ease); }

  /* ---- progress indicator: three hairline markers + counter ---- */
  .work-progress {
    position: absolute; z-index: 4; right: clamp(1.4rem, 4vw, 3rem); top: 50%;
    transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1rem;
  }
  .work-progress .count {
    font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.24em; color: var(--wk-muted);
    writing-mode: vertical-rl; transition: color 0.65s var(--ease);
  }
  .work-marks { display: flex; flex-direction: column; gap: 0.5rem; }
  .work-marks span { width: 1px; height: 30px; background: var(--wk-hair); transition: background 0.6s var(--ease), height 0.6s var(--ease); }
  .work-marks span.on { background: var(--wk-num); height: 46px; }

  /* ---- release panel after the sticky lets go ---- */
  .work-release {
    background: linear-gradient(180deg, var(--copper) 0%, var(--copper) 100%);
    color: var(--ink-on-light); text-align: center;
    padding-block: clamp(7rem, 18vh, 13rem);
  }
  .work-release p {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em;
    color: var(--mineral); max-width: 20ch; margin-inline: auto;
    font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
  }

  /* ============================================================
     7 — EXPERIENCE & MODALITIES  (warm near-white — background informing the work)
     For clinical pure white, change the background below to #FFFFFF.
     ============================================================ */
  .s-modalities { background: #F4EEE3; color: var(--ink-on-light); }
  .s-modalities .eyebrow { color: var(--clay); }
  .mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
  .mod-head { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--mineral); max-width: 12ch; }
  .mod-copy { color: #3a2a1e; font-size: 1.12rem; max-width: 46ch; margin-top: 2rem; }
  .mod-index { list-style: none; margin: 0; padding: 0; }
  .mod-index li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    font-weight: 300; color: var(--mineral);
    padding: 1.15rem 0; border-bottom: 1px solid rgba(21,17,15,0.16);
    font-variation-settings: "opsz" 90, "SOFT" 20, "WONK" 0;
  }
  .mod-index li span { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); font-weight: 500; }
  .mod-index li:first-child { padding-top: 0; }
  .disclaimer {
    margin-top: clamp(3rem, 7vh, 5rem);
    font-size: 0.82rem; line-height: 1.7; color: var(--muted-on-light);
    max-width: 62ch;
  }

  /* ============================================================
     7.5 — SERVICES / PATHS  (bookable — editorial rows, white → dark bridge to welcomes)
     ============================================================ */
  .s-services { background: linear-gradient(180deg, var(--clay) 0%, var(--mineral) 100%); color: var(--ink-on-dark); }
  .s-services .eyebrow { color: var(--sand); }
  .services-title {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--ivory); margin: 0 0 1.6rem;
    font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
  }
  .services-intro { color: var(--bone); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 48ch; opacity: 0.85; margin: 0 0 clamp(3rem, 7vh, 5rem); }

  .service-list { border-top: 1px solid rgba(228,217,198,0.16); }
  .service-row {
    position: relative; display: grid; grid-template-columns: auto 1fr auto;
    gap: clamp(1.1rem, 4vw, 3rem); align-items: start;
    padding: clamp(1.8rem, 4.5vh, 3rem) 0;
    border-bottom: 1px solid rgba(228,217,198,0.16);
    text-decoration: none; color: inherit; overflow: hidden;
    transition: padding-left 0.6s var(--ease);
  }
  /* soft abstract visual, revealed on the opposite side on hover/focus */
  .service-row::before {
    content: ""; position: absolute; right: 5%; top: 50%; width: 280px; height: 280px;
    transform: translateY(-50%) scale(0.7); border-radius: 50%; filter: blur(54px);
    background: radial-gradient(circle, rgba(176,122,84,0.5), rgba(176,122,84,0) 70%);
    opacity: 0; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none;
  }
  .s-num {
    font-family: var(--font-display); font-style: italic; line-height: 1.4;
    font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--copper);
    font-variation-settings: "opsz" 60, "SOFT" 40, "WONK" 1;
  }
  .s-mid { position: relative; z-index: 1; min-width: 0; }
  .s-name {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.015em;
    color: var(--bone); margin: 0; transition: color 0.5s var(--ease);
    font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 0;
  }
  .s-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease), opacity 0.6s var(--ease), margin 0.6s var(--ease); }
  .s-desc { color: var(--sand); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; margin: 0; }
  .s-cta { display: inline-block; margin-top: 0.9rem; font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); font-weight: 500; }
  .s-go { line-height: 1.6; font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--muted-on-dark); transition: color 0.5s var(--ease), transform 0.5s var(--ease); }

  .service-row:hover, .service-row:focus-visible { padding-left: clamp(0.5rem, 2vw, 1.4rem); outline: none; }
  .service-row:hover .s-name, .service-row:focus-visible .s-name { color: var(--ivory); }
  .service-row:hover .s-go, .service-row:focus-visible .s-go { color: var(--copper); transform: translateX(6px); }
  .service-row:hover::before, .service-row:focus-visible::before { opacity: 1; transform: translateY(-50%) scale(1); }
  .service-row:focus-visible { box-shadow: inset 3px 0 0 var(--gold); }

  @media (hover: hover) {
    .service-row:hover .s-reveal, .service-row:focus-visible .s-reveal { max-height: 240px; opacity: 1; margin-top: 1rem; }
  }
  @media (hover: none) {
    .s-reveal { max-height: none; opacity: 1; margin-top: 0.9rem; }  /* descriptions visible on touch */
    .s-go { align-self: center; }
  }

  .services-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; margin-top: clamp(3rem, 7vh, 5rem); }
  .services-all {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    text-decoration: none; color: var(--ivory); border-bottom: 1px solid var(--copper); padding-bottom: 0.45rem;
    transition: gap 0.5s var(--ease);
  }
  .services-all:hover { gap: 1.1rem; }
  .services-disclaimer { color: var(--muted-on-dark); font-size: 0.8rem; line-height: 1.7; max-width: 60ch; margin-top: clamp(2.5rem, 6vh, 4rem); }

  /* ============================================================
     8 — THIS SPACE WELCOMES  (signature — dark discovery field)
     empty space → discovery → recognition → accumulation → belonging
     Two modes, one DOM: cursor discovery (hover) / scroll reveal (touch).
     Default (no JS) shows every identity legibly in reading order.
     ============================================================ */
  .s-welcomes {
    position: relative;
    background: var(--obsidian);
    color: var(--ink-on-dark);
    overflow: hidden;
  }
  /* faint warm light + restrained texture living in the dark */
  .s-welcomes::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(70% 50% at 50% 18%, rgba(92,61,44,0.28), transparent 60%),
      radial-gradient(90% 70% at 50% 120%, rgba(58,40,30,0.4), transparent 60%);
    transition: opacity 1.6s var(--ease);
  }
  .welcomes-head {
    position: relative; z-index: 3; text-align: center;
    padding-top: clamp(5rem, 12vh, 9rem); padding-bottom: 1rem;
  }
  .welcomes-head .eyebrow { color: var(--muted-on-dark); margin-bottom: 1.2rem; }
  .welcomes-head .hint { font-size: 0.92rem; color: var(--muted-on-dark); opacity: 0.7; font-style: italic; font-family: var(--font-display); }

  /* the discovery stage */
  .welcomes-stage {
    position: relative; z-index: 2;
    width: 100%;
  }
  .identity {
    font-family: var(--font-display); font-weight: 300;
    line-height: 1.1; letter-spacing: -0.01em; color: var(--bone);
    font-variation-settings: "opsz" 110, "SOFT" 30, "WONK" 0;
    margin: 0;
  }
  .identity.sz-s { font-size: clamp(1.15rem, 2.2vw, 1.9rem); }
  .identity.sz-m { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
  .identity.sz-l { font-size: clamp(2.4rem, 6vw, 4.6rem); }
  .identity.ital { font-style: italic; font-variation-settings: "opsz" 80, "SOFT" 55, "WONK" 1; color: var(--sand); }

  /* --- default / no-JS: readable editorial column --- */
  .welcomes-stage { max-width: 760px; margin-inline: auto; padding: 3rem 6vw 1rem; display: flex; flex-direction: column; gap: 1.1rem; text-align: center; }
  .identity { opacity: 0.9; }

  /* --- CURSOR MODE (desktop, hover) --- */
  .s-welcomes.mode-cursor .welcomes-stage {
    max-width: none; margin: 0; padding: 0; display: block;
    position: sticky; top: 0; height: 100vh;
  }
  .s-welcomes.mode-cursor .identity {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%) translateY(0);
    opacity: 0.05; filter: blur(7px);
    white-space: nowrap;
    transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), transform 0.5s var(--ease);
    will-change: opacity, filter, transform;
  }
  .cursor-glow { display: none; }
  .s-welcomes.mode-cursor .cursor-glow {
    display: block;
    position: absolute; z-index: 1; width: 420px; height: 420px; border-radius: 50%;
    left: 0; top: 0; margin: -210px 0 0 -210px; pointer-events: none;
    background: radial-gradient(circle, rgba(176,122,84,0.16), rgba(176,122,84,0.05) 40%, transparent 68%);
    opacity: 0; transition: opacity 0.6s var(--ease);
    will-change: transform;
  }
  .s-welcomes.mode-cursor.active-cursor .cursor-glow { opacity: 1; }
  /* the closing line is not part of the discoverable field: pin it, always visible, clear of the scatter */
  .s-welcomes.mode-cursor .identity.anchor {
    top: auto; bottom: clamp(7vh, 10vh, 13vh); left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 1100px); white-space: normal; text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    opacity: 0.9; filter: none;
    transition: opacity 1.2s var(--ease);
  }

  /* --- SCROLL MODE (touch / no hover) --- */
  .s-welcomes.mode-scroll .welcomes-stage {
    max-width: none; margin: 0; padding: 0; display: block; text-align: center;
  }
  .s-welcomes.mode-scroll .identity {
    min-height: 40vh; display: flex; align-items: center; justify-content: center;
    padding-inline: 8vw;
    opacity: 0.12; filter: blur(6px); transform: translateY(16px);
    transition: opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .s-welcomes.mode-scroll .identity.pair { min-height: 26vh; }
  .s-welcomes.mode-scroll .identity.seen { opacity: 1; filter: blur(0); transform: none; }
  .s-welcomes.mode-scroll .identity.past { opacity: 0.24; filter: blur(1px); }

  /* --- CLIMAX --- */
  .welcomes-climax {
    position: relative; z-index: 3; text-align: center;
    padding-block: clamp(7rem, 20vh, 14rem);
    opacity: 0; transform: translateY(30px);
    transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
    padding-top: 2rem;
        padding-bottom: 2rem;
  }
  figure.tst-item {
    margin: 0;
}

  .welcomes-climax.lit { opacity: 1; transform: none; }
  .welcomes-climax .belong {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: 1.04; letter-spacing: -0.02em;
    color: var(--ivory); font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
  }
  .welcomes-climax .amplify {
    display: block; margin-top: 1.6rem;
    font-family: var(--font-display); font-style: italic; font-weight: 300;
    font-size: clamp(1.8rem, 4.5vw, 3.4rem); color: var(--copper);
    font-variation-settings: "opsz" 90, "SOFT" 60, "WONK" 1;
    opacity: 0; transition: opacity 1.6s var(--ease) 0.9s;
  }
  .welcomes-climax.lit .amplify { opacity: 1; }
  /* warmth grows into the dark as the climax lights */
  .s-welcomes.lit-bg::before { opacity: 1; background:
      radial-gradient(80% 60% at 50% 30%, rgba(176,122,84,0.32), transparent 62%),
      radial-gradient(100% 80% at 50% 118%, rgba(198,164,111,0.26), transparent 60%); }
  /* cursor mode: give the climax scroll room so the field stays explorable before belonging emerges */
  .s-welcomes.mode-cursor .welcomes-climax { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  /* no-JS: climax must be visible without scripting */
  html:not(.js) .welcomes-climax { opacity: 1; transform: none; }
  html:not(.js) .welcomes-climax .amplify { opacity: 1; }

  /* ============================================================
     8.5 — TESTIMONIALS / CLIENT EXPERIENCES  (warm bridge: obsidian → ivory)
     one voice at a time, crossfade + slight vertical lift, no horizontal slide
     ============================================================ */
  .s-testimonials {
    position: relative; overflow: hidden;
    padding-block: clamp(4rem, 9vh, 7rem);
    background: var(--clay); color: var(--ink-on-dark);
    transition: background 1.4s var(--ease);
  }
  /* almost-subconscious atmosphere shift per testimonial */
  .s-testimonials::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(70% 55% at 26% 24%, rgba(198,164,111,0.20), transparent 60%);
    opacity: 1; transition: opacity 1.4s var(--ease), background 1.4s var(--ease);
  }
  .s-testimonials.t1 { background: var(--clay-deep); }
  .s-testimonials.t1::before { background: radial-gradient(75% 60% at 74% 72%, rgba(58,40,30,0.55), transparent 62%); }
  .s-testimonials .wrap { position: relative; z-index: 1; }
  .s-testimonials .eyebrow { color: var(--sand); }
  .tst-title {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--ivory); margin: 0 0 1.4rem;
    font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
  }
  .tst-intro { color: var(--bone); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 44ch; opacity: 0.85; margin: 0 0 clamp(2.5rem, 5vh, 4rem); }

  .tst-stage { position: relative; }
  .tst-quotemark {
    position: absolute; z-index: 0; right: clamp(2%, 5vw, 9%); top: 28%; left: auto;
    font-family: var(--font-display); font-style: italic; line-height: 1;
    font-size: clamp(7rem, 16vw, 15rem); color: var(--copper); opacity: 0.14;
    pointer-events: none; user-select: none;
  }
  .tst-track { position: relative; z-index: 1; }
  .tst-item { max-width: min(72%, 900px); }
  .tst-quote {
    font-family: var(--font-display); font-weight: 300; font-style: italic;
    font-size: clamp(1.35rem, 2.5vw, 2.25rem); line-height: 1.4; letter-spacing: -0.01em;
    color: var(--ivory); margin: 0;
    font-variation-settings: "opsz" 110, "SOFT" 45, "WONK" 0;
  }
  .tst-attr {
    margin-top: 2rem; font-family: var(--font-body); font-size: 0.76rem; font-weight: 500;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand);
  }
  /* JS mode: stack + crossfade with a small vertical lift */
  .js .tst-item {
    position: absolute; top: 0; left: 0; right: 0;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js .tst-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
  html:not(.js) .tst-item + .tst-item { margin-top: 3.5rem; }

  .tst-controls {
    display: flex; align-items: center; justify-content: flex-end; gap: 2rem;
    margin-top: clamp(2rem, 4vh, 3rem);
  }
  .tst-index { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.22em; color: var(--muted-on-dark); }
  .tst-index em { font-style: normal; color: var(--ivory); }
  .tst-arrows { display: flex; gap: 0.6rem; }
  .tst-arrows button {
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: transparent; border: 1px solid rgba(228,217,198,0.28); color: var(--bone);
    font-size: 1rem; line-height: 1; display: grid; place-items: center;
    transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
  }
  .tst-arrows button:hover { border-color: var(--copper); color: var(--ivory); background: rgba(176,122,84,0.12); }
  .tst-arrows button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  html:not(.js) .tst-controls { display: none; }

  @media (hover: none) {
    .tst-item { max-width: 100%; }
  }
  @media (max-width: 820px) {
    .tst-item { max-width: 100%; }
    .tst-quotemark { font-size: 5rem; top: -1rem; right: 0; opacity: 0.12; }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .tst-item { transition: opacity 0.3s linear !important; transform: none !important; }
    .s-testimonials, .s-testimonials::before { transition: none !important; }
  }


  .s-final { background: linear-gradient(180deg, var(--bone) 0%, var(--ivory) 100%); color: var(--ink-on-light); text-align: center; padding-block: clamp(8rem, 22vh, 16rem); }
  .s-final::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(90% 70% at 50% -10%, rgba(198,164,111,0.22), transparent 60%);
  }
  .s-final .wrap { position: relative; z-index: 1; }
  .final-head {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 300; letter-spacing: -0.025em; line-height: 1.02; color: var(--mineral);
    font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 1;
  }
  .final-head em { font-style: italic; color: var(--clay); }
  .final-sub { margin-top: 1.4rem; color: var(--muted-on-light); font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 30ch; margin-inline: auto; }
  .final-cta { margin-top: 1.6rem; }

  /* ============================================================
     FOOTER
     ============================================================ */
  footer { background: var(--ivory); color: var(--ink-on-light); padding: clamp(3rem, 8vh, 5rem) 0 3rem; border-top: 1px solid rgba(42,33,27,0.12); }
  .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 3rem; align-items: flex-start; }
  .foot-brand { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.12em; }
  .foot-tag { color: var(--muted-on-light); font-size: 0.9rem; max-width: 28ch; margin-top: 0.6rem; }
  .foot-contact { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
  .fc-item { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink-on-light); text-decoration: none; transition: color 0.4s var(--ease); }
  .fc-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--clay); }
  a.fc-item:hover { color: var(--clay); }
  .foot-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 2.5rem; border-top: 1px solid rgba(42,33,27,0.12); }
  .foot-nav a { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; opacity: 0.7; }
  .foot-nav a:hover { opacity: 1; }
  .foot-legal { margin-top: 2.5rem; font-size: 0.74rem; color: var(--muted-on-light); opacity: 0.7; line-height: 1.7; max-width: 70ch; }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 820px) {
    .duat-grid, .rooted-grid, .mod-grid, .bi-grid { grid-template-columns: 1fr; }
    /*.bi-media { aspect-ratio: 4 / 3; max-height: 46vh; }*/
    .rooted-grid .portrait { max-width: 380px; }
    section { padding-block: clamp(4.5rem, 12vh, 8rem); }

    /* HERO — these must live here (after the base .hero-grid / .hero-media
       definitions) so they actually win on mobile. */
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem;margin-top: 1rem; }
    /* .hero-media { aspect-ratio: 16 / 10; max-height: 44vh; } */
    .hero h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); max-width: 18ch; }
    .hero-support { font-size: 1.05rem; }
    .cta-row { margin-top: 2.6rem; }
    .cta { width: 100%; justify-content: center; }
    .cta-quiet { width: 100%; text-align: center; }

    /* work section keeps the sticky concept but stacks each stage with breathing room */
    .work-stage { grid-template-columns: 1fr; gap: 0.4rem; align-content: center; text-align: left; }
    .work-num { font-size: clamp(6rem, 34vw, 11rem); }
    .work-inner { width: 84vw; }
    .work-label { top: 20vh; }
    .work-lead-line { display: none; }
    .work-progress { right: 5vw; }
    .work-support { max-width: 40ch; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; scroll-behavior: auto !important; }
    .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* stages become simple fades, no vertical drift; backgrounds still crossfade gently */
    .work-stage { transition: opacity 0.3s linear !important; transform: none !important; }
    .work-bg { transition: opacity 0.3s linear !important; }
    .work-orb { transition: none !important; }
    /* identities: no blur/motion, plain opacity; all remain readable */
    .s-welcomes .identity { filter: none !important; transform: none !important; transition: opacity 0.3s linear !important; }
    .s-welcomes.mode-cursor .identity { opacity: 0.55 !important; }
    .s-welcomes.mode-scroll .identity { opacity: 0.9 !important; }
    .welcomes-climax { transition: opacity 0.3s linear !important; transform: none !important; }
    .welcomes-climax .amplify { transition: opacity 0.3s linear !important; }
  }

  :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
  
   @media (max-width: 820px) {
        .s-welcomes.mode-scroll .identity {
    min-height: 10vh; 
  }
  .tst-track {
    height: 390px !important;
}

.welcomes-climax {
    padding-top: 6rem;
    padding-bottom: 2rem;
}
.s-welcomes.mode-scroll .identity.pair {
    min-height: 10vh;
}
.s-beside{
    padding: 3rem 0;
}
.beside-lead {
    font-size: 17px;

}
.s-becoming {
    background: var(--clay);
    text-align: center;
    padding: 5rem 0;
}
.s-final {
    padding: 4rem 0;
}
   }