/* ============================================================
     ALCHEMY - Coming Soon
     Brand: gold on ink. Sleek, minimal, confident.
     ============================================================ */

  :root {
    --ink:        #14110D;
    --gold:       #C9A24A;
    --gold-bright:#EAD18C;
    --antique:    #7A5E22;
    --paper:      #F2ECE0;

    --paper-dim:  rgba(242, 236, 224, 0.92);
    --paper-faint:rgba(242, 236, 224, 0.84);
    --hairline:   rgba(201, 162, 74, 0.18);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    --maxw: 1180px;
    --gutter: clamp(2.4rem, 7vw, 5rem);
  }

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

  html {
    scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    scrollbar-width: thin; scrollbar-color: var(--gold) var(--ink); /* Firefox */
  }
  /* gold gradient scrollbar (WebKit / Chromium / Edge / Safari) */
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #EAD18C 0%, #C9A24A 50%, #7A5E22 100%);
    border-radius: 10px; border: 3px solid var(--ink);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #F4E2A6 0%, #C9A24A 50%, #8A6B2A 100%);
  }
  ::-webkit-scrollbar-corner { background: var(--ink); }

  body {
    background: var(--ink);
    color: var(--paper);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    font-optical-sizing: auto;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    overflow-wrap: break-word;
  }
  /* crisper big display type */
  .wordmark, .belief p, .services__head h2, .credo p {
    font-feature-settings: "kern" 1, "liga" 1;
    text-wrap: balance;
  }

  /* Background: just ink, with a whisper of film grain for depth */
  .bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--ink);
  }
  .grain {
    position: fixed; inset: -50%; z-index: 1; pointer-events: none;
    opacity: 0.04; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* static texture - the animated shimmer read as "trying too hard" */
  }
  @keyframes grain {
    0%,100%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)}
    40%{transform:translate(4%,-4%)} 60%{transform:translate(-3%,5%)} 80%{transform:translate(5%,2%)}
  }

  /* ============================================================
     PAGE FADE-IN
     ============================================================ */
  body { opacity: 0; transition: opacity 0.9s var(--ease); }
  body.ready { opacity: 1; }
  /* Failsafe: if the script never runs (JS disabled, blocked, or fails to load),
     CSS still reveals the page + nav CTA after a beat so it is never left blank. */
  @keyframes safetyReveal { to { opacity: 1; } }
  body:not(.ready) { animation: safetyReveal 0.6s var(--ease) 1.1s forwards; }
  body:not(.entered) .topbar__cta { animation: safetyReveal 0.6s var(--ease) 1.1s forwards; }

  /* ============================================================
     LAYOUT
     ============================================================ */
  /* links inherit surrounding colour by default (never browser-blue); styled links override */
  a { color: inherit; }
  .wrap { position: relative; z-index: 2; }
  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

  /* TOP BAR */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(1.1rem, 2.5vw, 1.8rem) var(--gutter);
  }
  /* ink fade so scrolling content passes cleanly under the logo */
  .topbar::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220%;
    background: linear-gradient(to bottom, var(--ink) 30%, rgba(20,17,13,0.82) 58%, rgba(20,17,13,0));
    z-index: -1; pointer-events: none;
  }
  .topbar__mark { display: flex; align-items: center; gap: 0.7rem; opacity: 1; }
  .topbar__mark svg { width: 26px; height: 26px; }
  .topbar__name {
    font-family: 'Jost', sans-serif; font-weight: 500;
    letter-spacing: 0.32em; font-size: 0.82rem; color: var(--gold);
    padding-left: 0.32em;
  }
  .topbar__status {
    font-size: 0.66rem; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--paper-faint); display: flex; align-items: center; gap: 0.6rem;
    opacity: 0;
  }
  .topbar__status .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 0 rgba(201,162,74,0.6);
    animation: pulse 2.6s infinite;
  }
  @keyframes pulse {
    0%{box-shadow:0 0 0 0 rgba(201,162,74,0.5)}
    70%{box-shadow:0 0 0 8px rgba(201,162,74,0)}
    100%{box-shadow:0 0 0 0 rgba(201,162,74,0)}
  }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    min-height: 100svh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 7rem var(--gutter) 5rem;
  }
  .hero { position: relative; }

  /* topbar arrives only once revealed (so the name isn't spoiled) */
  .topbar__mark { transition: opacity 1.2s var(--ease); }
  .topbar__cta {
    font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
    text-decoration: none; position: relative; padding-left: 0.28em; opacity: 0;
    transition: opacity 1.2s var(--ease), color 0.3s var(--ease);
  }
  .topbar__cta::after {
    content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .topbar__cta:hover::after { transform: scaleX(1); }
  body.entered .topbar__mark, body.entered .topbar__cta { opacity: 1; }

  /* discreet sound toggle, fixed in the corner */
  .sound-toggle {
    position: fixed; left: var(--gutter); bottom: 1.4rem; z-index: 30;
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: none; border: none; cursor: pointer; padding: 0.5em 0.2em;
    min-height: 44px;
    color: var(--paper-faint); font-family: 'Jost', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase;
    opacity: 0; transition: opacity 1.2s var(--ease), color 0.3s var(--ease);
  }
  body.entered .sound-toggle { opacity: 0.9; }
  .sound-toggle:hover { color: var(--gold); opacity: 1; }
  .sound-toggle.is-on { color: var(--gold); }
  .sound-toggle__icon { width: 15px; height: 15px; flex: none; }
  .sound-toggle.is-on .so-mute { display: none; }
  .sound-toggle:not(.is-on) .so-wave { display: none; }

  /* Stage holds the Transmute control and the logo lockup, both centred (no layout shift) */
  .hero__stage {
    position: relative; z-index: 1; width: 100%;
    height: clamp(320px, 52vmin, 440px);
    display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  }
  .hero__copy { position: relative; z-index: 1; }
  /* soft ink vignette behind the hero copy: gently lifts the text off the ring,
     fades to nothing with no visible edge, and stays translucent so a hint of the
     ring still reads through it */
  .hero__copy::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(1000px, 120vw); height: 170%;
    background: radial-gradient(ellipse 50% 58% at 50% 46%,
      rgba(20,17,13,0.78) 0%,
      rgba(20,17,13,0.4) 46%,
      rgba(20,17,13,0) 74%);
  }


  /* The logo lockup - rises up together on reveal */
  .lockup {
    grid-area: 1 / 1; z-index: 1; justify-self: center; align-self: center;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(1.3rem, 3vw, 2rem); max-width: 100%;
    opacity: 0; transform: translateY(34px); pointer-events: none;
    transition: opacity 1.3s var(--ease) 0.2s, transform 1.4s var(--ease) 0.2s;
  }
  .hero.revealed .lockup { opacity: 1; transform: none; }
  .lockup__mark {
    width: clamp(150px, 21vw, 244px); height: auto;
    filter: drop-shadow(0 0 18px rgba(201,162,74,0.2));   /* static halo - no pulse */
  }
  /* the Rebis emblem used as the home hero lockup */
  .lockup__rebis {
    width: clamp(240px, 38vw, 460px); height: auto; display: block;
    animation: rebisGlow 6s var(--ease-soft) infinite;
  }
  @keyframes markGlow {
    0%,100% { filter: drop-shadow(0 0 15px rgba(201,162,74,0.26)); }
    50%     { filter: drop-shadow(0 0 30px rgba(234,209,140,0.5)); }
  }
  .wordmark {
    font-family: 'Jost', sans-serif; font-weight: 400;
    font-size: clamp(2.4rem, 9vw, 5.6rem);
    letter-spacing: 0.12em; line-height: 0.95; padding-left: 0.12em;
    color: var(--gold);
    background: linear-gradient(135deg, #BC9440 0%, #C9A24A 34%, #F7E7B0 50%, #C9A24A 66%, #BC9440 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wordSheen 7s ease-in-out infinite;
  }
  /* sweeps top-left → bottom-right, in step with the mark's sheen */
  @keyframes wordSheen {
    0%   { background-position: 100% 100%; }
    50%  { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
  }
  .lockup__tagline {
    font-size: clamp(0.62rem, 1.1vw, 0.76rem); letter-spacing: 0.42em;
    text-transform: uppercase; color: var(--paper-faint); padding-left: 0.42em;
    max-width: 100%; text-align: center; box-sizing: border-box;
  }
  /* the longer "creative intelligence agency" wordmark line needs tighter tracking on
     small phones so it fits without clipping (it wraps cleanly if it still can't) */
  @media (max-width: 560px) {
    .lockup__tagline { letter-spacing: 0.2em; padding-left: 0.2em; padding-right: 0.2em; }
  }

  /* copy below: revealed just after the lockup */
  .hero__copy { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
  .hero__line, .hero__sub, .scroll-cue {
    opacity: 0; transform: translateY(18px);
    transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
  }
  .hero.revealed .hero__line { opacity: 1; transform: none; transition-delay: 1.3s; }
  .hero.revealed .hero__sub  { opacity: 1; transform: none; transition-delay: 1.55s; }
  .hero.revealed .scroll-cue { opacity: 1; transform: none; transition-delay: 1.8s; }

  .hero__line {
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(1.1rem, 2.6vw, 1.9rem);
    letter-spacing: 0.02em; color: var(--paper);
  }
  .hero__line em { font-style: normal; color: var(--gold); }

  .hero__sub {
    margin: 1.4rem auto 0; max-width: 40ch;
    font-size: clamp(0.92rem, 1.5vw, 1.02rem); color: var(--paper-dim);
  }

  .scroll-cue {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.7rem;
    font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--paper-faint);
  }
  .scroll-cue .bar {
    width: 1px; height: 42px;
    background: linear-gradient(var(--gold), transparent);
    position: relative; overflow: hidden;
  }
  .scroll-cue .bar::after {
    content: ''; position: absolute; top: -42px; left: 0; width: 1px; height: 42px;
    background: linear-gradient(var(--gold-bright), transparent);
    animation: drop 2.2s var(--ease) infinite;
  }
  @keyframes drop { 0%{top:-42px} 60%,100%{top:42px} }

  /* ============================================================
     REVEAL SECTIONS
     ============================================================ */
  /* vertical only - leave the container's horizontal gutter intact */
  section.block { padding-top: clamp(5rem, 14vh, 9rem); padding-bottom: clamp(5rem, 14vh, 9rem); }

  .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: 0.08s; }
  .reveal.d2 { transition-delay: 0.16s; }
  .reveal.d3 { transition-delay: 0.24s; }

  .kicker {
    font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 1.6rem; display: flex; align-items: center; gap: 0.85rem;
  }
  .kicker__icon { width: 20px; height: 20px; flex: none; }

  /* BELIEF */
  .belief {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 6vw, 5rem); align-items: center;
  }
  .belief__coin { display: flex; justify-content: center; }
  .belief__draw {
    width: 100%; max-width: 380px; height: auto;
    /* fine relief shadow + soft gold halo = inlaid, polished feel */
    filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 20px rgba(201,162,74,0.16));
  }
  .bd-stroke { stroke-linecap: butt; }   /* flat nib, not a round marker tip */
  @media (max-width: 820px) {
    .belief { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 4rem); }
    .belief__draw { max-width: 300px; }
  }
  /* unified statement type across belief / credo / services */
  .belief p, .credo p, .services__head h2 {
    font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.22; letter-spacing: -0.01em;
  }
  .belief p { max-width: 20ch; }
  .belief p strong { font-weight: 400; color: var(--gold); }
  .belief .small {
    margin-top: 2rem; font-family: 'Inter', sans-serif; font-size: 1rem;
    max-width: 52ch; color: var(--paper-dim); line-height: 1.7;
  }

  /* CREDO */
  .credo { text-align: center; }
  .credo__eyebrow {
    display: inline-block; font-size: 0.68rem; letter-spacing: 0.42em;
    text-transform: uppercase; color: var(--gold); padding-left: 0.42em;
  }
  .credo__eyebrow::before {
    content: ''; display: block; width: 42px; height: 1px;
    background: var(--gold); opacity: 0.5; margin: 0 auto 1.4rem;
  }
  .credo p { max-width: 24ch; margin: 1.4rem auto 0; color: var(--paper); }
  .credo strong { font-weight: 400; color: var(--gold); }
  .credo .small {
    margin: 1.7rem auto 0; max-width: 56ch;
    font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1rem;
    line-height: 1.75; color: var(--paper-dim); letter-spacing: 0;
  }
  .credo .small strong { color: var(--paper); }

  /* "What we mean by it": faint gold facet lines behind the section (engraved-lid feel) */
  .whatwemean { position: relative; overflow: hidden; isolation: isolate; }
  .block.whatwemean { padding-top: clamp(8rem, 20vh, 13rem); padding-bottom: clamp(8rem, 20vh, 13rem); }
  .whatwemean > .container { position: relative; z-index: 1; }
  .wm__lines {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 80% 82% at 50% 46%, #000 26%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 82% at 50% 46%, #000 26%, transparent 100%);
  }
  .wm__lines svg { width: 100%; height: 100%; display: block; }
  .whatwemean .credo__eyebrow::before { display: none; }
  /* soft ink halo so the text sits clear of the lines */
  .whatwemean > .container::before {
    content: ""; position: absolute; z-index: -1; inset: -28% -14%;
    background: radial-gradient(ellipse at 50% 50%, #14110D 0%, rgba(20, 17, 13, 0.92) 40%, rgba(20, 17, 13, 0) 76%);
    pointer-events: none;
  }

  /* SERVICES */
  .services__head { margin-bottom: 3rem; }
  .services__def {
    margin-top: 1.1rem; max-width: 54ch; color: var(--paper-dim);
    font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.65;
  }
  .service-list { border-top: 1px solid var(--hairline); }
  .service {
    display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1.5rem;
    padding: clamp(1.4rem, 3.5vw, 2.4rem) 0;
    border-bottom: 1px solid var(--hairline);
    position: relative; cursor: default;
    transition: padding-left 0.5s var(--ease);
  }
  .service::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, rgba(201,162,74,0.08), transparent);
    transition: width 0.5s var(--ease); z-index: -1;
  }
  .service:hover { padding-left: 1.4rem; }
  .service:hover::before { width: 100%; }
  .service__mark { width: 36px; height: 36px; opacity: 0.9; }
  .service__name {
    font-family: 'Jost', sans-serif; font-weight: 400;
    font-size: clamp(1.5rem, 4.5vw, 2.6rem); letter-spacing: 0.01em;
    transition: color 0.4s var(--ease);
  }
  .service:hover .service__name { color: var(--gold); }
  .service__detail { display: flex; flex-direction: column; align-items: flex-end; max-width: 38ch; }
  .service__desc { font-size: 1.05rem; line-height: 1.55; color: var(--paper); text-align: right; }
  /* deliverables: a tidy list with a gold dot on the right edge, text flowing left */
  .service__for {
    margin: 0.85rem 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.36rem;
  }
  .service__for li {
    display: flex; flex-direction: row-reverse; align-items: center; gap: 0.55rem;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 400;
    color: var(--paper-faint); letter-spacing: 0.02em; text-align: right;
  }
  .service__for li::before {
    content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
  }

  /* AI BAND - the horizontal capability that runs through the four disciplines */
  .ai-band { text-align: center; padding-top: clamp(3rem, 7vw, 5rem); }
  .ai-band .kicker { justify-content: center; }
  .ai-band__head {
    font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.12; letter-spacing: -0.01em;
    text-wrap: balance; margin: 0;
  }
  .ai-band__ai {
    font-weight: 400;
    background: linear-gradient(115deg, #8F6A24 0%, #B98F3C 30%, #D6B062 50%, #B98F3C 70%, #8F6A24 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .ai-band__lead {
    margin: 1.4rem auto 0; max-width: 56ch; color: var(--paper-dim);
    font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.7;
  }
  .ai-band__tactics {
    margin: 2.8rem 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem 2.6rem;
  }
  .ai-band__tactics li {
    flex: 0 0 auto; width: 180px;
    display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
    font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 400;
    color: var(--paper-faint); letter-spacing: 0.02em; line-height: 1.4; text-align: center;
  }
  .ai-band__glyph { width: 30px; height: 30px; flex: none; }

  /* Easter egg: a nod to Mike Watson, who spotted the AI in Alchemy. The full stop
     is a silent trigger, styled to look exactly like a normal period (no affordance). */
  .ai-egg { color: inherit; cursor: default; -webkit-tap-highlight-color: transparent; }
  .ai-egg.is-found { color: var(--gold); }
  .ai-egg__msg {
    margin: 1.1rem auto 0; max-width: 44ch;
    font-family: 'Jost', sans-serif; font-style: italic; font-weight: 300;
    font-size: 1rem; color: var(--gold); letter-spacing: 0.01em;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .ai-egg__msg.is-shown { opacity: 1; transform: none; }
  .ai-egg__msg[hidden] { display: none; }

  /* HOW WE WORK (process) */
  .process__head { margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
  .process-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.6rem, 3vw, 2.6rem);
  }
  .step { border-top: 1px solid var(--hairline); padding-top: 1.6rem; }
  .step__top {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;
  }
  .step__num {
    font-family: 'Jost', sans-serif; font-size: 0.66rem; letter-spacing: 0.36em;
    text-transform: uppercase; color: var(--gold);
  }
  .step__mark { width: 30px; height: 30px; opacity: 0.9; }
  .step__name {
    font-family: 'Jost', sans-serif; font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: 0.01em;
    margin-bottom: 0.7rem; color: var(--paper);
  }
  .step__desc { font-size: 0.98rem; line-height: 1.6; color: var(--paper-dim); }
  @media (max-width: 820px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 2rem; } }
  @media (max-width: 460px) { .process-grid { grid-template-columns: 1fr; } }

  /* WORK (featured) */
  .work__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
  }
  .work__viewall {
    font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
    text-decoration: none; position: relative; white-space: nowrap; padding-bottom: 4px;
  }
  .work__viewall::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .work__viewall:hover::after { transform: scaleX(1); }
  .work-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.4rem, 2.6vw, 2rem);
  }
  .case {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden;
    background: rgba(242, 236, 224, 0.015);
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
  }
  .case:hover { transform: translateY(-5px); border-color: rgba(201, 162, 74, 0.4); }
  .case__media {
    aspect-ratio: 5 / 4; position: relative; display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 42%, rgba(201, 162, 74, 0.16), transparent 70%), var(--ink);
    border-bottom: 1px solid var(--hairline);
  }
  .case__media svg { width: 44%; height: auto; opacity: 0.45; }
  .case__tag {
    position: absolute; top: 1rem; left: 1rem;
    font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-faint);
  }
  .case__body { padding: clamp(1.2rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
  .case__client { font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
  .case__name { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.45rem); color: var(--paper); }
  .case__desc { font-size: 0.94rem; line-height: 1.55; color: var(--paper-dim); }
  @media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; max-width: 460px; } }

  /* CONTACT */
  .contact { border-top: 1px solid var(--hairline); scroll-margin-top: 6rem; }
  .contact__lead {
    font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(1.05rem, 2.4vw, 1.6rem); line-height: 1.55;
    max-width: 46ch; margin: clamp(2rem, 3.5vw, 2.8rem) 0 0; color: var(--paper);
  }
  .contact__lead strong { font-weight: 400; color: var(--gold); }
  .contact__lead-cta { display: inline-block; white-space: nowrap; margin-top: 0.4rem; }

  /* brief capture form */
  .brief-form { display: flex; gap: 0.7rem; flex-wrap: wrap; max-width: 460px; margin-top: 1.9rem; }
  .brief-form--stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.8rem; }
  .brief-form__input {
    flex: 1 1 220px; min-width: 0;
    background: transparent; border: 1px solid var(--hairline); border-radius: 100px;
    color: var(--paper); font-family: 'Inter', sans-serif; font-size: 0.95rem;
    padding: 0.85em 1.3em; outline: none; transition: border-color 0.3s var(--ease);
  }
  .brief-form--stacked .brief-form__input { flex: 0 0 auto; width: 100%; }
  .brief-form__textarea { border-radius: 22px; resize: vertical; min-height: 118px; line-height: 1.55; }
  .brief-form__input::placeholder { color: var(--paper-faint); }
  .brief-form__input:focus { border-color: var(--gold); }
  .brief-form--stacked .brief-form__btn { align-self: flex-start; padding: 0.9em 2.2em; }
  .brief-form__btn {
    flex: 0 0 auto; cursor: pointer; border: none; border-radius: 100px;
    background: linear-gradient(120deg, #EAD18C, #C9A24A 55%, #7A5E22);
    color: var(--ink); font-family: 'Jost', sans-serif; font-weight: 500;
    font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; padding: 0 1.8em;
    transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .brief-form__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .brief-form__done {
    margin-top: 1.6rem; color: var(--gold);
    font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1.2rem;
  }
  .brief-form__note {
    margin-top: 0.9rem; color: var(--paper-faint);
    font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.92rem;
    letter-spacing: 0.01em;
  }
  .brief-form__error {
    margin-top: 0.8rem; color: #E8B4A0;
    font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.92rem;
    letter-spacing: 0.01em;
  }
  .brief-form__error:empty { display: none; }
  .brief-form__input[aria-invalid="true"] { border-color: #E8B4A0; }
  .contact__lead a {
    color: var(--gold); text-decoration: none;
    border-bottom: 1px solid rgba(201,162,74,0.4); transition: border-color 0.3s var(--ease);
  }
  .contact__lead a:hover { border-color: var(--gold); }
  .contact__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(3rem, 5vw, 4rem);
  }
  .contact__item .label {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.66rem; letter-spacing: 0.36em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.8rem;
  }
  .contact__icon { width: 16px; height: 16px; flex: none; }
  .contact__item .value { font-size: 1rem; line-height: 1.8; color: var(--paper); }
  .contact__item .value a { color: var(--paper); text-decoration: none; position: relative; }
  .contact__item .value a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .contact__item .value a:hover::after { transform: scaleX(1); }
  .contact__item .value .tba { color: var(--paper-faint); font-style: italic; }

  /* FOOTER */
  .footer {
    border-top: 1px solid var(--hairline);
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  }
  .footer__sig {
    font-family: 'Jost', sans-serif; letter-spacing: 0.04em; color: var(--paper-dim);
    font-size: 0.95rem;
  }
  .footer__sig em { font-style: normal; color: var(--gold); }
  .footer__meta { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-faint); }

  /* Rotating transmutation circles */
  @keyframes spin { to { transform: rotate(360deg); } }
  .spin-slow { animation: spin 70s linear infinite; }
  .spin-rev  { animation: spin 95s linear infinite reverse; }

  @keyframes breathe {
    0%,100% { filter: drop-shadow(0 0 16px rgba(201,162,74,0.4)); }
    50%     { filter: drop-shadow(0 0 30px rgba(234,209,140,0.7)); }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    body, body:not(.ready) { opacity: 1; }   /* never depend on a killed animation to be visible */
    .topbar__cta { opacity: 1; }
    .reveal { opacity: 1; transform: none; }
    .wordmark span { transform: none; opacity: 1; }
    .wordmark { background: none; -webkit-text-fill-color: var(--gold); }
  }

  /* Solid-gold fallback for gradient text where background-clip:text is unsupported,
     so a heading can never render as invisible (transparent) glyphs. */
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__line em, .page-head h1 em, .page-head .page-head__title em,
    .tria__head em, .force-bar__title,
    .reveal-words strong .rw > span, .reveal-words em .rw > span,
    .contact-head__logo span {
      -webkit-text-fill-color: var(--gold); color: var(--gold);
    }
  }

  /* ---------------- RESPONSIVE ---------------- */

  /* tablets / small laptops */
  @media (max-width: 900px) {
    .belief p { max-width: 24ch; }
  }

  /* phones */
  @media (max-width: 640px) {
    /* services: keep the description visible, stacked under the name (not hidden) */
    .service {
      grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.55rem;
      padding: 1.5rem 0;
    }
    .service__mark { width: 30px; height: 30px; }
    .service__detail { grid-column: 1 / -1; align-items: flex-start; max-width: none; }
    .service__desc {
      text-align: left; max-width: none;
      font-size: 0.98rem; line-height: 1.5; color: var(--paper-dim);
    }
    .service__for { align-items: flex-start; }
    .service__for li { flex-direction: row; text-align: left; }
    .service:hover { padding-left: 0; }           /* no hover shift on touch */
    .service:hover::before { width: 0; }

    /* contact CTA stays on one line on phones */
    .contact__lead { font-size: clamp(0.82rem, 3.6vw, 1.15rem); }

    /* a touch more breathing room in the contact grid */
    .contact__grid { gap: 2rem 2.5rem; }

    /* sound toggle: icon only on phones */
    .sound-toggle__label { display: none; }
    .sound-toggle { left: 1.1rem; bottom: 1.1rem; padding: 0.4em; min-width: 44px; justify-content: center; }
  }

  /* very small phones */
  @media (max-width: 420px) {
    .topbar__name { display: none; }              /* keep the mark, drop the bar wordmark */
    .topbar__cta { font-size: 0.66rem; letter-spacing: 0.2em; }
    .contact__lead { font-size: clamp(0.72rem, 3.4vw, 1rem); }
  }

  /* large screens: a little more presence */
  @media (min-width: 1500px) {
    :root { --maxw: 1320px; }
  }

  /* ============================================================
     TOP NAV (multi-page)
     ============================================================ */
  .topbar__mark { text-decoration: none; cursor: pointer; }
  .topnav {
    display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem);
    opacity: 1;
  }
  body.entered .topnav { opacity: 1; }
  .topnav a {
    font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--paper-dim);
    text-decoration: none; position: relative; padding-bottom: 4px; white-space: nowrap;
    transition: color 0.3s var(--ease);
  }
  .topnav a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .topnav a:hover { color: var(--gold); }
  .topnav a:hover::after { transform: scaleX(1); }
  .topnav a.is-active { color: var(--gold); }
  .topnav a.is-active::after { transform: scaleX(1); }
  .topnav .topbar__cta { color: var(--gold); opacity: 1; }

  .nav-toggle {
    display: none; background: none; border: none; cursor: pointer;
    width: 44px; height: 44px; position: relative; padding: 0; z-index: 40;
    opacity: 1;
  }
  body.entered .nav-toggle { opacity: 1; }
  /* 30x22 bar block, optically centred in the 44x44 tap target */
  .nav-toggle span {
    position: absolute; left: 7px; width: 30px; height: 1.6px; background: var(--gold);
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  }
  .nav-toggle span:nth-child(1) { top: 13px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 29px; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  @media (max-width: 860px) {
    .nav-toggle { display: block; }
    .topnav {
      position: fixed; inset: 0; z-index: 30;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 2.2rem; background: rgba(20, 17, 13, 0.97);
      opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
    }
    body.entered .topnav:not(.is-open) { opacity: 0; }
    .topnav.is-open, body.entered .topnav.is-open { opacity: 1; pointer-events: auto; }
    .topnav a {
      font-size: 0.95rem; letter-spacing: 0.24em; color: var(--paper);
      padding: 0.6rem 1rem; display: inline-flex; align-items: center; min-height: 44px;
    }
    body.nav-locked { overflow: hidden; }
  }

  /* ============================================================
     HOMEPAGE TEASERS (link out to full pages)
     ============================================================ */
  .teaser__lead {
    font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(1.5rem, 3.8vw, 2.5rem); line-height: 1.22; letter-spacing: -0.01em;
    max-width: 22ch; margin-top: 0.4rem;
  }
  .teaser__lead strong { font-weight: 400; color: var(--gold); }
  .stage-strip { display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; margin-top: 1.8rem; }
  .stage-strip span {
    display: inline-flex; align-items: baseline; gap: 0.55rem;
    font-family: 'Jost', sans-serif; font-size: 1rem; letter-spacing: 0.02em; color: var(--paper);
  }
  .stage-strip span b { color: var(--gold); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.2em; }
  .teaser__link {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.9rem;
    font-family: 'Jost', sans-serif; font-size: 0.74rem; font-weight: 400;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
    text-decoration: none; position: relative; padding-bottom: 4px;
  }
  .teaser__link::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .teaser__link:hover::after { transform: scaleX(1); }

  /* ============================================================
     PAGE HEAD (interior pages)
     ============================================================ */
  .page-head { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
  .page-head h1, .page-head .page-head__title {
    font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(2.1rem, 6.5vw, 4rem); line-height: 1.08; letter-spacing: -0.01em; margin-top: 0.5rem;
  }
  .page-head h1 em, .page-head .page-head__title em { font-style: normal; color: var(--gold); }
  .page-head .lead { margin-top: 1.6rem; max-width: 58ch; font-size: 1.05rem; line-height: 1.75; color: var(--paper-dim); }

  /* premium gold gradient - reserved for DISPLAY-size titles only, so the gold reads
     precious rather than plated. Small labels (kickers) and inline body accents stay
     solid --gold. Stops kept light enough that the darkest point still clears AA on ink. */
  .hero__line em, .page-head h1 em, .page-head .page-head__title em,
  .tria__head em, .force-bar__title {
    background: linear-gradient(115deg, #C9A24A 0%, #E7CE86 28%, #F7E7B0 50%, #E7CE86 72%, #C9A24A 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Gold sentence accents inside .reveal-words are split into one box per word by the
     reveal animation. To read as ONE continuous gradient across the whole phrase (not a
     fresh gradient inside each word), each word-span shares a horizontal gradient whose
     size + horizontal offset are set per word in alchemy.js (stitchGradient). */
  .reveal-words strong .rw > span, .reveal-words em .rw > span {
    background-image: linear-gradient(90deg, #C9A24A 0%, #E7CE86 30%, #F7E7B0 50%, #E7CE86 70%, #C9A24A 100%);
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .page-head .lead strong { color: var(--paper); font-weight: 400; }

  /* ============================================================
     PROCESS PAGE - timeline + stage breakdowns
     ============================================================ */
  .timeline {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
    margin-top: clamp(2.5rem, 6vw, 4rem); position: relative;
  }
  .tl-node a { text-decoration: none; color: inherit; display: block; }
  .tl-icon {
    height: clamp(42px, 6.5vw, 60px); width: auto; display: block; margin-bottom: 1.2rem;
    filter: drop-shadow(0 0 12px rgba(201, 162, 74, 0.25));
    transition: transform 0.5s var(--ease);
  }
  .tl-node a:hover .tl-icon { transform: translateY(-4px); }
  .tl-num { font-family: 'Jost', sans-serif; font-size: 0.64rem; letter-spacing: 0.34em; color: var(--paper-faint); }
  .tl-name {
    font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-top: 0.5rem; color: var(--paper); transition: color 0.3s var(--ease);
  }
  .tl-node a:hover .tl-name { color: var(--gold); }
  .tl-sub { margin-top: 0.35rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
  @media (max-width: 720px) {
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.5rem; }
  }
  @media (max-width: 440px) {
    .timeline { grid-template-columns: 1fr; gap: 1.8rem; }
  }

  /* alchemical stage colours */
  .c-nigredo    { background: #15120E; border: 1px solid var(--gold); }
  .c-albedo     { background: #EDE6D6; border: 1px solid #EDE6D6; }
  .c-citrinitas { background: #E7C24B; border: 1px solid #E7C24B; }
  .c-rubedo     { background: #9E2B25; border: 1px solid #9E2B25; }

  .stage {
    border-top: 1px solid var(--hairline); scroll-margin-top: 6rem;
    display: grid; grid-template-columns: auto 0.85fr 1.5fr; gap: clamp(1.5rem, 4vw, 3.2rem);
    align-items: start;
    position: relative; isolation: isolate;
  }
  /* soft ink halo behind each stage so the gold icon + copy never clash with the background */
  .stage::before {
    content: ''; position: absolute; z-index: -1; inset: -1.5rem -8%;
    background: radial-gradient(ellipse at 50% 50%, var(--ink) 0%, rgba(20,17,13,0.94) 46%, rgba(20,17,13,0) 80%);
    pointer-events: none;
  }
  .stage__iconwrap { display: flex; align-items: flex-start; }
  @media (max-width: 820px) { .stage { grid-template-columns: 1fr; gap: 1.3rem; } }
  .stage__no { font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.3em; color: var(--gold); }
  .stage__title { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.1; margin-top: 0.7rem; }
  .stage__sub { margin-top: 0.8rem; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 0.6rem; }
  .stage__sub .swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  .stage__body p { color: var(--paper-dim); font-size: 1.02rem; line-height: 1.75; }
  .stage__body p strong { color: var(--paper); font-weight: 400; }
  .stage__body p + p { margin-top: 1.1rem; }
  .stage__quote {
    margin-top: 1.7rem; padding-left: 1.2rem; border-left: 1px solid var(--gold);
    font-family: 'Jost', sans-serif; font-weight: 300; font-style: italic;
    color: var(--gold); font-size: 1.05rem; line-height: 1.5;
  }

  /* ============================================================
     THE GREAT WORK - case study index (placeholders for now)
     ============================================================ */
  .case--soon { pointer-events: none; }
  .case--soon .case__media { opacity: 0.7; }
  .gw-note {
    margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--hairline);
    color: var(--paper-faint); font-size: 0.95rem; line-height: 1.7; max-width: 60ch;
  }

  /* ============================================================
     THE UNION / REBIS - hero on the How-we-work page
     ============================================================ */
  .rebis { padding-top: clamp(7rem, 14vh, 10rem); }
  .rebis__grid {
    display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
  }
  .rebis .rebis__art { max-width: 320px; margin: 0 auto; }
  @media (max-width: 820px) { .rebis__grid { grid-template-columns: 1fr; gap: 2.5rem; } .rebis .rebis__art { max-width: 260px; } }
  .rebis__lead {
    font-family: 'Jost', sans-serif; font-weight: 300; letter-spacing: -0.01em;
    font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.1; margin-top: 0.4rem;
  }
  .rebis__lead strong { color: var(--gold); font-weight: 400; }
  .rebis__body { margin-top: 1.4rem; max-width: 48ch; color: var(--paper-dim); font-size: 1.05rem; line-height: 1.75; }
  .rebis__body + .rebis__body { margin-top: 1rem; }
  .rebis__body strong { color: var(--paper); font-weight: 400; }
  .rebis__art { position: relative; display: block; }
  .rebis__svg {
    width: 100%; height: auto; display: block; max-width: 440px; margin: 0 auto;
    animation: rebisGlow 6s var(--ease-soft) infinite;
  }
  .rebis__img {
    width: 100%; height: auto; display: block;
    animation: rebisGlow 6s var(--ease-soft) infinite;
  }
  @keyframes rebisGlow {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(201, 162, 74, 0.22)); }
    50%      { filter: drop-shadow(0 0 32px rgba(234, 209, 140, 0.48)); }
  }
  /* (.rebis__sheen removed - unused markup; it was the only reference to the heavy rebis-home.png) */
  /* placeholder shown only until the artwork file is added */
  .rebis__art.is-placeholder {
    aspect-ratio: 1 / 1; border: 1px solid var(--hairline); border-radius: 6px;
    display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, rgba(201,162,74,0.14), transparent 70%), var(--ink);
  }
  .rebis__art.is-placeholder svg { width: 54%; height: auto; opacity: 0.5; }

  /* ============================================================
     HOW WE'RE BUILT - Tria Prima
     ============================================================ */
  .tria__head {
    font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.14; margin-top: 0.4rem;
    font-size: clamp(1.8rem, 4.5vw, 2.8rem); color: var(--paper);
  }
  .tria__lead { margin-top: 1.2rem; max-width: 62ch; color: var(--paper-dim); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.7; }
  /* Sulphur · Mercury · Salt glyphs above the title (gold-gradient stroke via #goldgrad) */
  /* (tria__glyphs row above the title removed - the glyphs now sit in front of each force-bar title) */
  .tria-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem);
    margin-top: clamp(2rem, 5vw, 3rem);
  }
  @media (max-width: 760px) { .tria-grid { grid-template-columns: 1fr; gap: 2rem; } }
  .tria__disc { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0.35rem 0 0.8rem; }
  .tria__close {
    margin-top: clamp(2rem, 5vw, 3rem); font-family: 'Jost', sans-serif; font-weight: 300;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--paper);
  }
  .tria__close strong { color: var(--gold); font-weight: 400; }

  /* ============================================================
     FOOTER (with nav) - overrides the simple row layout above
     ============================================================ */
  .footer { flex-direction: column; align-items: stretch; gap: 1.8rem; }
  .footer__base {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.2rem;
  }

  /* shared gold button */
  .btn-gold {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    cursor: pointer; border: none; border-radius: 100px;
    background: linear-gradient(120deg, #EAD18C, #C9A24A 55%, #7A5E22);
    color: var(--ink); font-family: 'Jost', sans-serif; font-weight: 500;
    font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
    padding: 0.95em 1.9em; text-decoration: none; white-space: nowrap;
    transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }

  /* ============================================================
     CAREERS - vacancy list
     ============================================================ */
  .vacancy-list { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 5vw, 3rem); }
  .vacancy {
    display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem 1.8rem; align-items: center;
    padding: clamp(1.5rem, 3.5vw, 2.4rem) 0; border-bottom: 1px solid var(--hairline);
  }
  .vacancy__icon { height: 46px; width: auto; display: block; opacity: 0.9; filter: drop-shadow(0 0 10px rgba(201,162,74,0.2)); }
  .vacancy__title { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--paper); }
  .vacancy__meta { margin-top: 0.6rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: flex; flex-wrap: wrap; gap: 0.7rem 1.3rem; }
  .vacancy__desc { margin-top: 0.85rem; color: var(--paper-dim); font-size: 0.98rem; line-height: 1.6; max-width: 62ch; }
  .tag-example { font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-faint); border: 1px solid var(--hairline); border-radius: 100px; padding: 0.25em 0.7em; }
  .empty-note { color: var(--paper-faint); font-size: 0.95rem; line-height: 1.7; max-width: 60ch; }
  @media (max-width: 640px) { .vacancy { grid-template-columns: auto 1fr; } .vacancy .btn-gold { grid-column: 1 / -1; justify-self: start; } }

  /* ============================================================
     THE NETWORK - signup
     ============================================================ */
  .net__pick { margin-top: clamp(2rem, 5vw, 2.8rem); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
  .disc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; max-width: 720px; }
  .disc-chip {
    border: 1px solid var(--hairline); border-radius: 100px; padding: 0.55em 1.1em;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--paper-dim);
    background: none; cursor: pointer; min-height: 40px;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .disc-chip:hover { border-color: rgba(201,162,74,0.5); color: var(--paper); }
  .disc-chip.is-selected {
    border-color: var(--gold); color: var(--ink);
    background: linear-gradient(120deg, #EAD18C, #C9A24A 60%, #B98E36);
    font-weight: 500;
  }
  .net__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.5rem; margin-top: clamp(1.8rem, 4vw, 2.4rem); }
  .net__hint { font-size: 0.82rem; color: var(--paper-faint); margin: 0; }
  .net__hint a, .net__small a {
    color: var(--gold); text-decoration: none;
    border-bottom: 1px solid rgba(201,162,74,0.4); transition: border-color 0.3s var(--ease);
  }
  .net__hint a:hover, .net__small a:hover { border-bottom-color: var(--gold); }
  .net__small { margin-top: 1.6rem; color: var(--paper-faint); font-size: 0.82rem; line-height: 1.6; max-width: 60ch; }

  /* four working laws, 2x2 grid (each cell a placeholder for commissioned artwork + a statement) */
  .laws-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem);
    margin-top: clamp(2rem, 5vw, 3rem);
  }
  @media (max-width: 680px) { .laws-grid { grid-template-columns: 1fr; } }
  .law-card {
    border: 1px solid var(--hairline); border-radius: 12px; padding: clamp(1.4rem, 2.6vw, 2rem);
    background: rgba(242, 236, 224, 0.015);
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1rem, 2.6vw, 1.6rem);
    transition: border-color 0.5s var(--ease);
  }
  .law-card:hover { border-color: rgba(201, 162, 74, 0.4); }
  .law-card__body { display: flex; flex-direction: column; gap: 0.5rem; }
  .law-card__name {
    font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.1; color: var(--paper);
  }
  .law-card__name em { font-style: normal; color: inherit; }
  .law-card__latin { font-family: 'Jost', sans-serif; font-style: italic; color: var(--gold); font-size: 0.98rem; letter-spacing: 0.03em; }
  .law-card__line { color: var(--paper-dim); font-size: 0.98rem; line-height: 1.6; margin-top: 0.1rem; }
  /* the law symbol: smaller, never cropped (contain in a fixed square), gentle float on hover */
  .law-card__art { display: flex; align-items: center; justify-content: center; margin: 0; }
  .law-card__art img {
    width: clamp(74px, 13vw, 94px); height: clamp(74px, 13vw, 94px); object-fit: contain;
    filter: drop-shadow(0 0 9px rgba(201,162,74,0.25));
    transition: transform 0.4s var(--ease);
  }
  .law-card:hover .law-card__art img { animation: lawFloat 2.4s var(--ease-soft) infinite; }
  @keyframes lawFloat {
    0%, 100% { transform: translateY(0) scale(1.04) rotate(-1deg); }
    50%      { transform: translateY(-5px) scale(1.07) rotate(1.5deg); }
  }
  /* fallback shown only while an artwork file is missing */
  .law-card__art.is-empty {
    width: clamp(84px, 15vw, 108px); aspect-ratio: 4 / 3;
    border: 1px dashed var(--hairline); border-radius: 6px; text-align: center;
  }
  .law-card__art.is-empty::after { content: 'Artwork coming'; font-size: 0.46rem; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; color: var(--paper-faint); }
  .laws-note {
    margin-top: clamp(1.4rem, 3vw, 2rem); color: var(--paper-faint);
    font-size: 0.9rem; line-height: 1.6; max-width: 60ch; font-style: italic;
  }

  /* ============================================================
     INTERIOR PAGES - tighter, grouped vertical rhythm via .rhythm
     (was a flat ~9rem top+bottom on every .block; also fixes the page-head
     bottom padding that section.block had been over-specifying)
     ============================================================ */
  .rhythm section.block { padding-top: clamp(2.8rem, 6vh, 4.2rem); padding-bottom: clamp(2.8rem, 6vh, 4.2rem); }
  /* whichever section comes first clears the fixed topbar */
  .rhythm > section:first-of-type { padding-top: clamp(7.5rem, 15vh, 10rem); }
  .rhythm section.page-head { padding-bottom: clamp(1.5rem, 3vh, 2.5rem); }
  /* Careers: the honest line is a coda to the four laws: pull it up so the two read as one group */
  .careers section.honest-part { padding-top: 0; }
  /* Careers: clear break before the network block */
  .careers #network { border-top: 1px solid var(--hairline); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
  .embed-slot {
    margin-top: clamp(2rem, 5vw, 3rem); border: 1px dashed var(--hairline); border-radius: 10px;
    padding: clamp(1.8rem, 4vw, 2.8rem); text-align: left; max-width: 460px; margin-right: auto;
    background: rgba(242, 236, 224, 0.015);
  }
  .embed-slot p { color: var(--paper-dim); font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.6rem; }
  .embed-slot .small { color: var(--paper-faint); font-size: 0.82rem; margin-top: 1.4rem; margin-bottom: 0; }

  /* ============================================================
     CASE STUDY - detail page
     ============================================================ */
  .cs-back { margin-bottom: 1.6rem; }
  .cs-note {
    color: var(--paper-faint); font-size: 0.9rem; line-height: 1.6; max-width: 60ch;
    border: 1px dashed var(--hairline); border-radius: 8px; padding: 1rem 1.2rem;
  }
  .cs-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--hairline);
  }
  @media (max-width: 640px) { .cs-stats { grid-template-columns: 1fr; gap: 1.6rem; } }
  .cs-stat__value { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--gold); line-height: 1; }
  .cs-stat__label { margin-top: 0.6rem; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-dim); }
  .cs-quote { border-left: 1px solid var(--gold); padding-left: 1.5rem; }
  .cs-quote p {
    font-family: 'Jost', sans-serif; font-weight: 300; font-style: italic;
    font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.4; color: var(--paper);
  }
  .cs-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

  /* ============================================================
     CASE STUDY - full layout (hero, stats bar, sections, next)
     ============================================================ */
  .cs-hero { padding-top: clamp(8rem, 16vh, 11rem); }
  .cs-hero__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
  .cs-chip { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-dim); border: 1px solid var(--hairline); border-radius: 100px; padding: 0.42em 0.9em; }
  .cs-chip--client { color: var(--gold); border-color: rgba(201,162,74,0.35); }
  .cs-hero__title { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; }
  .cs-hero__desc { margin-top: 1.6rem; max-width: 60ch; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; color: var(--paper-dim); }

  .cs-statsbar { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(2.5rem, 6vw, 4rem) 0; margin-top: clamp(2.5rem, 6vw, 4rem); }
  .cs-statsbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
  .cs-statsbar__val { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(2.4rem, 6vw, 4rem); color: var(--gold); line-height: 1; }
  .cs-statsbar__label { margin-top: 0.7rem; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-dim); }
  @media (max-width: 640px) { .cs-statsbar__grid { grid-template-columns: 1fr; gap: 1.8rem; } }

  .cs-label { display: flex; align-items: center; gap: 0.85rem; font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.6rem; }
  .cs-label span { width: 42px; height: 1px; background: var(--gold); opacity: 0.6; }
  .cs-h2 { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; }
  .cs-quoteblock { margin-top: 1.6rem; padding-left: 1.4rem; border-left: 2px solid rgba(201,162,74,0.3); max-width: 62ch; }
  .cs-quoteblock p { color: var(--paper); font-size: 1.05rem; line-height: 1.75; }

  .cs-challenge { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
  .cs-challenge p { color: var(--paper-dim); font-size: 1.05rem; line-height: 1.75; }
  @media (max-width: 820px) { .cs-challenge { grid-template-columns: 1fr; gap: 1.2rem; } }

  .cs-solution__intro { margin-top: 1rem; max-width: 60ch; font-size: 1.05rem; line-height: 1.7; color: var(--paper); }
  .cs-cards { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); margin-top: clamp(2rem, 5vw, 3rem); }
  .cs-card { border: 1px solid var(--hairline); border-radius: 12px; padding: clamp(1.6rem, 3vw, 2.4rem); background: rgba(242,236,224,0.015); display: flex; gap: 1.4rem; transition: border-color 0.5s var(--ease); }
  .cs-card:hover { border-color: rgba(201,162,74,0.3); }
  .cs-card__no { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); color: rgba(201,162,74,0.32); line-height: 1; flex: none; }
  .cs-card__title { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--paper); margin-bottom: 0.6rem; }
  .cs-card p { color: var(--paper-dim); font-size: 1rem; line-height: 1.7; }

  .cs-results__body { margin-top: 0.5rem; max-width: 62ch; color: var(--paper); font-size: 1.05rem; line-height: 1.75; }
  .cs-services__label { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 0.9rem; }

  .cs-next { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border: 1px solid var(--hairline); border-radius: 12px; padding: clamp(1.6rem, 3vw, 2.4rem); text-decoration: none; color: inherit; transition: border-color 0.5s var(--ease), transform 0.5s var(--ease); }
  .cs-next:hover { border-color: rgba(201,162,74,0.4); transform: translateY(-3px); }
  .cs-next__client { display: block; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
  .cs-next__name { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.3rem, 3vw, 2rem); color: var(--paper); }
  .cs-next__arrow { font-size: 1.6rem; color: var(--gold); flex: none; }

  /* ============================================================
     ACCESSIBILITY
     ============================================================ */
  /* visible keyboard focus (gold ring) on every interactive element */
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
  .topbar__mark:focus-visible, .topnav a:focus-visible, .case:focus-visible,
  .cs-next:focus-visible, .btn-gold:focus-visible, .vacancy .btn-gold:focus-visible { outline-offset: 5px; }
  .brief-form__input:focus-visible { outline-offset: 2px; }

  /* skip-to-content link, revealed on keyboard focus */
  .skip-link {
    position: absolute; top: 0; left: 0; z-index: 100; transform: translateY(-120%);
    background: var(--gold); color: var(--ink); text-decoration: none;
    font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.1em;
    padding: 0.7em 1.2em; border-radius: 0 0 6px 0; transition: transform 0.2s var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

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

  /* visible label for the brief / email field */
  .brief-form__label { display: block; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-top: clamp(2rem, 3.5vw, 2.6rem); margin-bottom: 0.7rem; }

  /* reserve space for images to avoid layout shift (CLS) */
  .tl-icon, .stage__icon, .vacancy__icon { aspect-ratio: 1 / 1; }
  .rebis__img { aspect-ratio: 820 / 548; }

  /* ============================================================
     CAREERS - the language of the birds (lexicon)
     ============================================================ */
  .lexicon { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 5vw, 3rem); }
  .lexicon__row {
    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0.6rem 2.5rem; align-items: baseline;
    padding: clamp(1.1rem, 2.5vw, 1.6rem) 0; border-bottom: 1px solid var(--hairline);
  }
  .lexicon__term { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.05rem, 2.2vw, 1.45rem); color: var(--gold); }
  .lexicon__def { color: var(--paper-dim); font-size: 1rem; line-height: 1.6; }
  @media (max-width: 640px) { .lexicon__row { grid-template-columns: 1fr; gap: 0.3rem; } }

  /* ============================================================
     REBIS in the belief section (home)
     ============================================================ */
  .belief__coin .rebis__art { width: 100%; max-width: 400px; }

  /* full-page gold facet lines (How we work) */
  /* gold facet-line divider behind the "Every brief begins" section (matches the homepage) */
  .wm-bg { position: relative; isolation: isolate; }
  .wm-bg .wm__lines { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); opacity: 0.7; }
  .wm-bg__inner { position: relative; z-index: 1; }
  /* solid ink behind the text, fading softly to transparent on every side so the gold lines never clash with the copy */
  .wm-bg__inner::before {
    content: ''; position: absolute; z-index: -1; inset: -28% -16%;
    background: radial-gradient(ellipse at 50% 48%, var(--ink) 0%, var(--ink) 34%, rgba(20,17,13,0.96) 54%, rgba(20,17,13,0) 82%);
    pointer-events: none;
  }

  /* big stage icon, left column of each How-we-work stage breakdown */
  .stage__icon {
    height: clamp(84px, 11vw, 132px); width: auto; display: block;
    filter: drop-shadow(0 0 14px rgba(201, 162, 74, 0.25));
  }

  /* ============================================================
     CAREERS - two-column head with a symbol placeholder
     ============================================================ */
  .head-grid {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
  }
  @media (max-width: 820px) { .head-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
  .head-symbol {
    aspect-ratio: 1 / 1; width: 100%; max-width: 340px; justify-self: center;
    display: grid; place-items: center; position: relative; overflow: hidden;
    border: 1px dashed var(--hairline); border-radius: 8px;
    background: radial-gradient(ellipse at 50% 45%, rgba(201,162,74,0.12), transparent 70%), var(--ink);
  }
  .head-symbol svg { width: 46%; height: auto; opacity: 0.4; }
  .head-symbol figcaption {
    position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center;
    font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-faint);
  }
  /* with real artwork: drop the dashed placeholder frame, show the art on the ink halo */
  .head-symbol.has-art { aspect-ratio: auto; border: none; background: none; overflow: visible; }
  .head-symbol.has-art img {
    width: 100%; max-width: 360px; height: auto; display: block;
    filter: drop-shadow(0 0 22px rgba(201,162,74,0.28));
  }

  /* ============================================================
     PHASE 1 - ATMOSPHERE & MOTION
     Depth (hero ring + haze), marquee, gilt framing, word reveals,
     scroll progress, magnetic/hover polish, counters.
     All animation is killed by the prefers-reduced-motion block above.
     ============================================================ */

  /* 1. Hero depth: a slow transmutation ring + breathing haze behind the stone */
  .hero { overflow: hidden; }
  .hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 52% 44% at 50% 46%, rgba(201,162,74,0.09), transparent 70%);
    /* static glow - the breathing haze was part of the over-animated feel */
  }
  .hero__circle {
    grid-area: 1 / 1; justify-self: center; align-self: center; z-index: 0;
    width: clamp(420px, 86vmin, 740px); height: auto; pointer-events: none;
    opacity: 0; transform: rotate(0deg);
    animation: ringSpin 150s linear infinite;
    transition: opacity 2.4s var(--ease) 0.5s;
    will-change: transform;
  }
  .hero.revealed .hero__circle { opacity: 0.07; }
  @keyframes ringSpin { to { transform: rotate(360deg); } }

  /* 2. Marquee ribbon */
  .marquee {
    overflow: hidden; position: relative; isolation: isolate;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    padding: clamp(0.9rem, 2vw, 1.4rem) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 42s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item, .marquee__sep {
    font-family: 'Jost', sans-serif; font-weight: 300; text-transform: uppercase; white-space: nowrap;
    font-size: clamp(0.8rem, 1.7vw, 1.2rem); letter-spacing: 0.34em; padding: 0 1.3rem;
  }
  .marquee__item { color: var(--paper-dim); }
  .marquee__sep { color: var(--gold); padding: 0 0.2rem; display: inline-flex; align-items: center; }
  .marquee__sep svg { width: 0.82em; height: 0.82em; display: block; opacity: 0.85; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* 3. Word-by-word heading reveal (lines mask up) */
  /* padding+negative-margin so the overflow clip doesn't cut descenders (j, g, p, y) or italic overhang */
  .reveal-words .rw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.08em 0.22em; margin: -0.06em -0.08em -0.22em; }
  .reveal-words .rw > span {
    display: inline-block; transform: translateY(108%);
    transition: transform 0.7s var(--ease);
  }
  .reveal-words.in .rw > span { transform: none; }

  /* (Gilt corner-brackets removed - ornament without meaning; the cards read cleaner without them.) */
  .case, .law-card, .cs-card, .cs-next { position: relative; }

  /* 5. Case-card hover: lift + a sheen sweep across the card, and the mark wakes up */
  .case { overflow: hidden; transition: border-color 0.5s var(--ease), transform 0.5s var(--ease); }
  .case::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,247,220,0.10) 50%, transparent 60%);
    background-size: 250% 250%; background-position: 150% 150%;
    transition: background-position 0.9s var(--ease);
  }
  .case:hover { transform: translateY(-4px); }
  .case:hover::before { background-position: -50% -50%; }
  .case:hover .case__media svg { transform: scale(1.06) rotate(-2deg); }
  .case__media svg { transition: transform 0.6s var(--ease); }

  /* magnetic buttons feel springy under the pointer */
  .btn-gold, .brief-form__btn { will-change: transform; }

  @media (prefers-reduced-motion: reduce) {
    .reveal-words .rw > span { transform: none; }
    .hero__circle { opacity: 0.07; }
  }


  /* ============================================================
     THE GREAT WORK - interactive transmutation
     ============================================================ */
  .tx { text-align: center; }
  .tx .lead { margin-left: auto; margin-right: auto; }
  .tx__stage {
    position: relative; margin-top: clamp(2rem, 5vw, 3.5rem);
    display: flex; flex-direction: column; align-items: center; gap: clamp(1.6rem, 4vw, 2.6rem);
  }
  .tx__ring { position: relative; width: clamp(260px, 58vmin, 420px); aspect-ratio: 1; display: grid; place-items: center; }
  .tx__ring::before {
    content: ''; position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,74,0.10), transparent 70%); transition: background 0.3s var(--ease);
  }
  .tx__ring.is-over::before { background: radial-gradient(circle, rgba(201,162,74,0.30), transparent 72%); }
  .tx__ringsvg { width: 100%; height: auto; opacity: 0.85; animation: ringSpin 60s linear infinite; }
  /* three still drop-circles, set inside the inner ring in a symmetric triangle (the ring spins, these don't) */
  .tx__slots { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.6s var(--ease); }
  .tx__slot {
    position: absolute; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%);
    display: grid; place-items: center; border-radius: 50%; pointer-events: auto;
    border: 1px solid rgba(201,162,74,0.35);
    background: radial-gradient(circle, rgba(201,162,74,0.06), transparent 72%);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  }
  .tx__slot[data-slot="sulfur"]  { left: 50%;   top: 33%; }
  .tx__slot[data-slot="mercury"] { left: 64.7%; top: 58.5%; }
  .tx__slot[data-slot="salt"]    { left: 35.3%; top: 58.5%; }
  .tx__slot.is-active { border-color: var(--gold); background: radial-gradient(circle, rgba(201,162,74,0.16), transparent 72%); animation: slotPulse 1.9s var(--ease-soft) infinite; }
  .tx__slot.is-over { border-color: var(--gold-bright); box-shadow: 0 0 20px rgba(234,209,140,0.55); }
  .tx__slot.is-filled { border-color: rgba(201,162,74,0.6); animation: none; }
  .tx__slot svg { width: 62%; height: auto; opacity: 0; transform: scale(0.5); filter: drop-shadow(0 0 10px rgba(201,162,74,0.6)); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
  .tx__slot.is-filled svg { opacity: 1; transform: scale(1); }
  @keyframes slotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,74,0); } 50% { box-shadow: 0 0 16px 2px rgba(201,162,74,0.35); } }

  .tx__rebis {
    position: absolute; inset: 0; margin: 0; display: grid; place-items: center; pointer-events: none;
    opacity: 0; transform: scale(0.7);
    transition: opacity 1s var(--ease) 0.4s, transform 1.2s var(--ease) 0.4s;
  }
  .tx__rebis img { width: 86%; height: auto; }
  .tx__rebis .tx__stone { width: 66%; height: auto; }
  /* finale: the ring spins faster, then whooshes out as the Rebis arrives */
  .tx__stage.is-complete .tx__ringsvg { opacity: 0; animation: txWhoosh 1.5s var(--ease) forwards; }
  @keyframes txWhoosh {
    0%   { transform: scale(1);     opacity: 0.9; }
    100% { transform: scale(1.12);  opacity: 0; }
  }
  .tx__stage.is-complete .tx__slots { opacity: 0; }
  .tx__stage.is-complete .tx__rebis { opacity: 1; transform: scale(1); }

  .tx__forces { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.8rem, 2vw, 1.4rem); }
  /* bare draggable glyphs, no boxes */
  .tx__force {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    width: clamp(84px, 18vw, 116px); padding: 0.6rem 0.4rem; cursor: grab;
    background: none; border: none; border-radius: 8px;
    color: var(--paper); font-family: 'Jost', sans-serif;
    transition: transform 0.3s var(--ease), opacity 0.4s var(--ease);
  }
  .tx__force:hover { transform: translateY(-4px); }
  .tx__force:hover .tx__glyph { filter: drop-shadow(0 0 14px rgba(234,209,140,0.65)); }
  .tx__force:active { cursor: grabbing; }
  .tx__force:disabled { opacity: 0.3; pointer-events: none; }
  .tx__force.is-placed { opacity: 0; transform: scale(0.4); pointer-events: none; }
  .tx__glyph { width: clamp(38px, 8vw, 54px); height: auto; filter: drop-shadow(0 0 8px rgba(201,162,74,0.32)); transition: filter 0.3s var(--ease); }
  .tx__fname { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

  .tx__hint { min-height: 1.6em; max-width: 46ch; margin: 0 auto; color: var(--paper-dim); font-size: 0.98rem; line-height: 1.6; }
  .tx__hint strong { color: var(--gold); font-weight: 400; }
  .tx__skip {
    background: none; border: none; cursor: pointer; padding: 0.6em;
    color: var(--paper-faint); font-family: 'Jost', sans-serif;
    font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
    text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s var(--ease);
  }
  .tx__skip:hover { color: var(--gold); }
  /* the Transmute CTA: sits in the CENTRE of the circle once all three forces are placed,
     so the reader takes in the third before the page transforms. The placed slot-glyphs
     fade out when armed so the button has the centre to itself (no clash on small rings). */
  /* centre without transform — the gold button's hover lift + magnetic-pointer JS both
     use transform, so transform-centring would get clobbered and the button would jump */
  .tx__transmute {
    position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
    z-index: 6; white-space: nowrap;
  }
  .tx__transmute[hidden] { display: none; }
  .tx__stage.is-armed .tx__slots { opacity: 0; pointer-events: none; }
  .tx__stage.is-complete .tx__forces,
  .tx__stage.is-complete .tx__hint,
  .tx__stage.is-complete .tx__transmute,
  .tx__stage.is-complete .tx__skip { display: none; }

  /* the three-forces section, revealed as the forces are dropped */
  .tria-reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .tria-reveal.is-hidden { opacity: 0; transform: translateY(30px); pointer-events: none; }
  /* once the interactive stage collapses, #forces becomes the top content, so it needs
     to clear the fixed topbar + its ink scrim (otherwise the heading top looks faded) */
  #forces { padding-top: clamp(7.5rem, 15vh, 10rem); }

  /* the three forces: full-bleed image/text bars that alternate left/right */
  .force-bars { margin-top: clamp(2.5rem, 6vw, 4rem); display: flex; flex-direction: column; }
  .force-bar {
    position: relative; min-height: clamp(300px, 38vw, 480px); display: flex; align-items: center;
    overflow: hidden;
    opacity: 0; transform: translateY(44px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  /* thick gold gradient line between each bar */
  .force-bar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, #BC9440 18%, #F7E7B0 50%, #BC9440 82%, transparent 100%);
  }
  .force-bar:last-child::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, #BC9440 18%, #F7E7B0 50%, #BC9440 82%, transparent 100%);
  }
  .force-bar.is-shown { opacity: 1; transform: none; }
  .force-bar__media { position: absolute; inset: 0; z-index: 0; }
  .force-bar__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  /* per-image framing so the key action (the pot, the forge) lands in view */
  .force-bar[data-card="mercury"] .force-bar__media img { object-position: center 30%; }
  .force-bar[data-card="salt"] .force-bar__media img { object-position: center 62%; }
  /* black fade over the image, clearing the side the text sits on */
  .force-bar__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(20,17,13,0.28) 0%, rgba(20,17,13,0.46) 38%, var(--ink) 72%, var(--ink) 100%);
  }
  .force-bar__text {
    position: relative; z-index: 1; width: 50%; margin-left: auto;
    padding: clamp(1.6rem, 4vw, 3.4rem) var(--gutter);
  }
  /* the force's alchemical glyph sits in a row WITH the title, vertically centred on it
     (gold-gradient stroke via #goldgrad) */
  .force-bar__titlerow { display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.2rem); margin-bottom: 1.1rem; }
  .force-bar__glyph { flex: none; width: clamp(44px, 5vw, 76px); height: auto; }
  /* alternate: image on the right, text on the left */
  .force-bar:nth-child(even) .force-bar__media::after {
    background: linear-gradient(to left, rgba(20,17,13,0.28) 0%, rgba(20,17,13,0.46) 38%, var(--ink) 72%, var(--ink) 100%);
  }
  .force-bar:nth-child(even) .force-bar__text { margin-left: 0; margin-right: auto; }
  .force-bar__sub { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; }
  .force-bar__title {
    font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.18; margin: 0;
    font-size: clamp(1.9rem, 4.2vw, 3.2rem); color: var(--gold); padding-bottom: 0.08em;
  }
  .force-bar__desc { color: var(--paper-dim); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; max-width: 44ch; }
  @media (max-width: 700px) {
    .force-bar { min-height: clamp(360px, 80vw, 460px); }
    .force-bar__text, .force-bar:nth-child(even) .force-bar__text { width: 100%; margin: 0; }
    /* mobile: mute the artwork so the copy reads easily — a base ink veil across the WHOLE
       image (never fully clear) that deepens toward the text at the bottom */
    .force-bar__media img { opacity: 0.82; }
    .force-bar__media::after, .force-bar:nth-child(even) .force-bar__media::after {
      background: linear-gradient(to top, rgba(20,17,13,0.86) 0%, rgba(20,17,13,0.56) 46%, rgba(20,17,13,0.42) 100%);
    }
    .force-bar { align-items: flex-end; }
    /* ink wash sitting just behind the copy (above the image, below the text) */
    .force-bar__text::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: -1.6rem; z-index: -1; pointer-events: none;
      background: linear-gradient(to top, rgba(20,17,13,0.9) 0%, rgba(20,17,13,0.66) 52%, rgba(20,17,13,0.28) 84%, transparent 100%);
    }
  }

  /* ============================================================
     CONTACT - two-column head with the stacked Alchemy logo
     ============================================================ */
  .contact-head {
    display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
  }
  @media (max-width: 820px) { .contact-head { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); } }
  .contact-head__logo {
    margin: 0; justify-self: center; display: flex; flex-direction: column; align-items: center;
    gap: clamp(0.9rem, 2vw, 1.5rem);
  }
  .contact-head__logo svg {
    width: clamp(120px, 17vw, 196px); height: auto;
    animation: markGlow 6s var(--ease-soft) infinite;
  }
  .contact-head__logo span {
    font-family: 'Jost', sans-serif; font-weight: 400; letter-spacing: 0.32em; padding-left: 0.32em;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem); color: var(--gold);
    background: linear-gradient(115deg, #BC9440 0%, #C9A24A 26%, #F7E7B0 50%, #C9A24A 74%, #BC9440 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }