/* Post-hero organism journey: V2 Stories switch + V5 manifesto/states/numbers. */
:root{
  --oj-bg:var(--home-page-bg,var(--page-bg,#e7e7e7));
  --oj-fg:#101010;
  --oj-white:#fff;
  --oj-fg-70:color-mix(in oklab,var(--oj-fg) 70%,transparent);
  --oj-fg-50:color-mix(in oklab,var(--oj-fg) 50%,transparent);
  --oj-line:color-mix(in oklab,var(--oj-fg) 16%,transparent);
  --oj-line-soft:color-mix(in oklab,var(--oj-fg) 9%,transparent);
  --oj-stroke:color-mix(in oklab,var(--oj-white) 75%,transparent);
  --oj-gutter:var(--gutter,clamp(24px,5vw,88px));
  --oj-e-out:cubic-bezier(.23,1,.32,1);
  --oj-e-io:cubic-bezier(.83,0,.17,1);
  --oj-grid-frame-inline:var(--site-gutter,clamp(22px,4.1vw,72px));
  --oj-grid-frame-block:clamp(28px,4.6vh,40px);
  --oj-grid-gap:rgba(16,16,16,.14);
  --oj-grid-cell:rgba(255,255,255,.2);
  --oj-grid-ink:#101010;
  --oj-grid-ink-soft:rgba(16,16,16,.68);
  --oj-joint-surface:var(--oj-bg);
  --oj-joint-ink:rgba(16,16,16,.52);
  --oj-joint-mask:13px;
  --oj-joint-arm:11px;
}

section.intro-bridge.organism-journey{
  --oj-switch-off:#e9e9eb;
  --oj-switch-on:#2aaae2;
  --oj-switch-knob:#fff;
  position:relative;
  z-index:4;
  isolation:isolate;
  overflow:clip;
  background:transparent;
  color:var(--oj-fg);
}

/* The organism lives between the continuous grey field and this section's copy. */
body.organism-journey-active{background:var(--oj-bg)}
body.organism-journey-active .site-bg-fixed{background:var(--oj-bg)}
@media (min-width:821px){
  body.organism-journey-active:not(.oj-hero-visible):not(.stories-title-cleared) .site-bg-fixed{
    background:var(--oj-stories-bg,var(--home-page-bg,#e7e7e7))!important;
  }
}
/* Ideas beat: drop Stories under the Ideas sticky (z7) during the -100vh
   pull-up. Do NOT hard-hide the manifesto pin — that snapped Stories off
   before the scroll-up leave finished and made the handoff jump. */
body.organism-journey-active.oj-ideas-ink .oj-scene--manifesto{
  z-index:4;
}
body.organism-journey-active.oj-ideas-ink .oj-manifesto-pin{
  pointer-events:none;
}

.organism-gl,
.organism-gl-fallback{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .7s var(--oj-e-out),visibility .7s step-end;
}
.organism-gl{background:transparent}
.organism-gl-fallback{
  display:none;
  overflow:visible;
  background:transparent;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:0;
  height:0;
  transform:translate3d(var(--oj-org-x,0px),var(--oj-org-y,0px),0);
  opacity:var(--oj-org-alpha,1);
  will-change:transform,opacity;
  filter:drop-shadow(0 22px 48px rgba(29,29,27,.14));
}
.organism-gl-fallback .oj-fb-lobe{
  position:absolute;
  left:0;
  top:0;
  width:var(--oj-fb-size,200px);
  height:var(--oj-fb-size,200px);
  translate:calc(-50% + var(--oj-fb-x,0px)) calc(-50% + var(--oj-fb-y,0px));
  border-radius:42% 58% 64% 36% / 48% 42% 58% 52%;
  background:radial-gradient(circle at 34% 28%,#fff 0 7%,#efeee9 34%,#c9c7c0 68%,#9c9a94 100%);
  box-shadow:inset -24px -28px 54px rgba(40,40,38,.18),inset 22px 18px 44px rgba(255,255,255,.72);
  opacity:calc(var(--oj-fb-opacity,.85) * min(1,var(--oj-org-alpha,1)));
  animation:organismFallbackMorph 8s ease-in-out infinite alternate;
  animation-delay:var(--oj-fb-morph-delay,0s);
  will-change:translate,border-radius,rotate;
  pointer-events:none;
}
.organism-gl-fallback .oj-fb-lobe[data-lobe="0"]{
  z-index:7;
  animation-duration:8s;
}
.organism-gl-fallback .oj-fb-lobe:not([data-lobe="0"]){
  z-index:1;
  animation-duration:6.5s;
  animation-direction:alternate-reverse;
}
.organism-gl-fallback.oj-fb-video .oj-fb-lobe[data-lobe="0"]{
  background:radial-gradient(circle at 36% 30%,#f4f3ef 0 8%,#dddcd6 38%,#b8b6ae 72%,#8e8c86 100%);
}
@keyframes organismFallbackMorph{
  0%{border-radius:42% 58% 64% 36% / 48% 42% 58% 52%;rotate:-4deg}
  50%{border-radius:62% 38% 44% 56% / 36% 58% 42% 64%;rotate:3deg}
  100%{border-radius:38% 62% 52% 48% / 60% 36% 64% 40%;rotate:-2deg}
}
body.organism-journey-active .organism-gl,
body.organism-journey-active.no-webgl-organism .organism-gl-fallback{
  opacity:1;
  visibility:visible;
  transition:opacity .38s var(--oj-e-out),visibility 0s;
}
body.no-webgl-organism .organism-gl{display:none}
body.no-webgl-organism .organism-gl-fallback{display:block}

/* Services: keep organism at z3 so the transparent art column (.xsvc z4)
   paints the "+" grid and line drawings above it. Clip in JS only. */

.oj-scene{
  --p:0;
  position:relative;
  z-index:6;
}
.oj-scene--manifesto{height:430vh}
.oj-scene--states{height:380vh}
.oj-scene--numbers{height:240vh}
/* No Numbers overlap: the Ideas exit used to translate this scene down by one
   viewport to cancel a -100vh pull-up. That tween is gone (Ideas now simply
   scrolls away), so the overlap would park Numbers on top of a still-pinned
   Ideas stage. Numbers follows Ideas in normal flow. */
/* Transparent over the shared site canvas — no second paint plate. */
.oj-scene--numbers,
.oj-scene--numbers .oj-number-pin{
  background:transparent;
}
.oj-pin{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:560px;
  overflow:clip;
}

/* Stories "+" field — ported from .xsvc-mini-grid (services capabilities
   backdrop): 20px tile at low opacity, masked so it dissolves toward one edge.
   Full-viewport splash behind Stories (fades downward) and behind Ideas
   (--ideas, flipped: fades upward).

   Layering: this element is a body child, NOT a child of #intro-bridge. That
   section isolates at z-index 4, so anything inside it paints above the
   organism canvas (z-index 3). At z-index 2 the field sits above the page
   background (-1) and behind the amoeba. Do not move it into the section.

   Desktop only — the phone build restructures this scene entirely. */
.oj-mini-grid{display:none}
.oj-section-bg{display:none}
@media (min-width:821px){
  .oj-section-bg--ideas{
    position:fixed;
    inset:0;
    z-index:1;
    display:block;
    background:var(--oj-ideas-bg,var(--home-page-bg,#e7e7e7));
    opacity:0;
    visibility:hidden;
    clip-path:inset(0 0 var(--oj-ideas-clip-bottom,0px) 0);
    pointer-events:none;
  }
  body.organism-journey-active.oj-ideas-active .oj-section-bg--ideas{
    opacity:1;
    visibility:visible;
  }
  .oj-mini-grid{
    position:fixed;
    inset:0;
    z-index:2;
    display:block;
    /* Lighter than the --oj-fg ink (#101010) the copy uses, so the field reads
       as texture rather than a second layer of type. The CMS overrides
       --oj-grid-image per element to recolour the glyph; this literal is the
       fallback when no content has loaded yet. */
    background-image:var(--oj-grid-image,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12M10 4v12' fill='none' stroke='%23595959' stroke-width='.8'/%3E%3C/svg%3E"));
    background-position:left top;
    background-size:20px 20px;
    opacity:0;
    -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
    mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
    pointer-events:none;
    transition:opacity .45s var(--oj-e-out);
  }
  /* Ideas runs the same field flipped: solid at the bottom, dissolving upward. */
  .oj-mini-grid--ideas{
    background-position:left bottom;
    -webkit-mask-image:linear-gradient(to top,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
    mask-image:linear-gradient(to top,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
  }
  /* Stories beat: after the hero leaves, until the title clears into Ideas.
     --oj-grid-on is the CMS toggle (1/0) and multiplies out to a hard 0 when
     the field is switched off, without fighting the media query's display. */
  body.organism-journey-active:not(.oj-hero-visible):not(.stories-title-cleared) .oj-mini-grid--stories{
    opacity:calc(var(--oj-grid-opacity,.12) * var(--oj-grid-on,1));
  }
  /* Ideas beat. `oj-ideas-ink` is already toggled for exactly this window
     (Ideas visible, Stories cleared, before the Numbers handoff), and it goes
     false again afterwards — so the field cannot leak into Work or Services. */
  body.organism-journey-active.oj-ideas-ink .oj-mini-grid--ideas{
    opacity:calc(var(--oj-grid-opacity,.12) * var(--oj-grid-on,1));
  }
}

/* Intro stage: manifesto on the right above the bottom-anchored headline. */
.oj-intro-stage{
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  gap:clamp(18px,2.8vh,36px);
  padding:0 var(--oj-gutter) clamp(28px,4.2vh,56px);
  box-sizing:border-box;
  pointer-events:none;
}

/* Stories / switch / that connect — bottom of viewport, edge-to-edge in gutters. */
.oj-intro-title{
  --title-p:0;
  --connect-p:0;
  --oj-title-size:clamp(40px,7.2vw,112px);
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  z-index:8;
  width:100%;
  opacity:var(--title-p, 0);
  translate:0 calc((1 - var(--title-p)) * 24px);
  will-change:opacity,translate;
  pointer-events:none;
}
html.organism-motion .oj-intro-title.is-ready{
  transition:opacity .5s var(--oj-e-out),translate .5s var(--oj-e-out);
}
/* Hero leave only — forward leave is a quick sideways split on the halves. */
html.organism-motion .oj-intro-title.is-ready.is-exiting,
html.organism-motion .oj-intro-title.is-ready.is-splitting,
html.organism-motion .intro-bridge-exit-left,
html.organism-motion .intro-bridge-exit-right,
html.organism-motion .oj-manifesto-in.is-exiting{
  transition:none !important;
}
.intro-bridge-exit-left,
.intro-bridge-exit-right{
  --split-x:0;
  display:flex;
  align-items:flex-end;
  gap:calc(var(--oj-title-size) * .12);
  flex:0 0 auto;
  min-width:0;
  position:relative;
  isolation:isolate;
  will-change:translate,opacity;
}
.intro-bridge-exit-left{
  translate:calc(var(--split-x, 0) * -108vw) 0;
  opacity:calc(1 - min(1, var(--split-x, 0) * 1.2));
}
.intro-bridge-exit-right{
  translate:calc(var(--split-x, 0) * 108vw) 0;
  opacity:calc(1 - min(1, var(--split-x, 0) * 1.2));
}
.intro-bridge-title-wrap{
  display:flex;
  align-items:flex-end;
  gap:calc(var(--oj-title-size) * .12);
  width:100%;
  max-width:100%;
  white-space:nowrap;
}
.intro-bridge-word,
#intro-bridge-word-stories,
#intro-bridge-word-connect{
  margin:0;
  color:var(--oj-fg);
  font-family:"Aeonik","Aeonik",sans-serif;
  font-size:var(--oj-title-size) !important;
  font-weight:500;
  line-height:.92 !important;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.intro-bridge-connect-phrase{
  flex:0 0 auto;
  position:relative;
  z-index:1;
  overflow:visible;
}
#intro-bridge-word-connect{
  color:var(--oj-fg);
  display:block;
  opacity:var(--connect-p);
  will-change:opacity;
}
html.organism-motion .oj-intro-title.is-ready #intro-bridge-word-connect{
  transition:opacity .7s var(--oj-e-out);
}
/* While leaving, kill connect fade transition so scrub stays locked to scroll. */
html.organism-motion .oj-intro-title.is-ready.is-splitting #intro-bridge-word-connect{
  transition:none !important;
}
.oj-that,
.oj-connect-only{font:inherit;letter-spacing:inherit}
/* Switch height matches the lowercase "s" (~x-height), seated on the text baseline. */
.intro-bridge-accent-wrap{
  position:relative;
  z-index:2;
  width:calc(var(--oj-title-size) * 1);
  height:calc(var(--oj-title-size) * .5);
  flex:0 0 auto;
  align-self:flex-end;
  margin-bottom:calc(var(--oj-title-size) * .08);
}
.intro-bridge-accent-wrap--mobile{display:block}
.intro-bridge-toggle-track{
  --toggle-pad:max(2px,calc(var(--oj-title-size) * .045));
  position:relative;
  width:100%;
  height:100%;
  padding:var(--toggle-pad);
  overflow:hidden;
  border-radius:999px;
  background:var(--oj-switch-off);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.07),inset 0 1px 2px rgba(17,17,17,.08);
  transition:none;
}
.intro-bridge-toggle-track.is-on{
  background:var(--oj-switch-on);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.04),inset 0 1px 2px rgba(17,17,17,.08);
}
.intro-bridge-toggle-knob{
  position:absolute;
  top:var(--toggle-pad);
  bottom:var(--toggle-pad);
  left:var(--toggle-pad);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--oj-switch-knob);
  box-shadow:0 1px 3px rgba(17,17,17,.22),0 2px 7px rgba(17,17,17,.12),0 0 0 .5px rgba(17,17,17,.08);
  will-change:transform;
}
/* A real two-state switch: the scroll only changes its state. The knob then
   settles on its own with a fast, critically damped response. */
html.organism-motion .intro-bridge-toggle-track.is-ready{
  transition:background-color .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1);
}
html.organism-motion .intro-bridge-toggle-track.is-ready .intro-bridge-toggle-knob{
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.2,.8,.2,1);
}

/* Manifesto sits above the headline; JS left-aligns it to "connect"
   and caps the right edge before the top-right nav icon. */
.oj-manifesto-in{
  position:absolute;
  left:auto;
  right:var(--oj-gutter);
  bottom:calc(var(--oj-title-size, 80px) * 1.15 + clamp(28px,4.2vh,56px));
  z-index:7;
  display:block;
  width:var(--cms-manifesto-width, min(520px,52%));
  max-width:calc(100% - (2 * var(--oj-gutter)));
  margin:0;
  padding:0;
  box-sizing:border-box;
  pointer-events:none;
  text-align:left;
  overflow:hidden;
}
.oj-manifesto-headline{
  opacity:var(--manifesto-visible,0);
  margin:0 0 .5em;
  font-family:"Aeonik","Aeonik",sans-serif;
  font-size:clamp(26px,3vw,40px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  text-wrap:pretty;
  text-align:left;
}
.oj-manifesto-copy,
#organism-manifesto.oj-manifesto-copy{
  /* Default 0 so hard-refresh never flashes the paragraph
     before organism-journey.js sets the scroll-driven value. */
  opacity:var(--manifesto-visible,0);
  max-width:none;
  margin:0;
  font-family:"Aeonik","Aeonik",sans-serif !important;
  font-size:clamp(22px,2.2vw,30px);
  font-weight:500 !important;
  letter-spacing:-.02em;
  line-height:1.28;
  text-wrap:pretty;
  text-align:left;
}
.oj-manifesto-copy,
#organism-manifesto .oj-mw{
  font-family:"Aeonik","Aeonik",sans-serif !important;
  line-height:inherit !important;
}
#organism-manifesto .oj-mw:not([style*="font-size"]){font-size:inherit !important}
.oj-manifesto-copy .oj-mw{
  display:inline-block;
  opacity:var(--v,0);
  translate:0 calc((1 - var(--v,0))*.4em);
  font-variation-settings:"wght" calc(320 + var(--v,0)*100);
  will-change:opacity,translate,font-variation-settings;
}
.oj-manifesto-copy .oj-mw.is-accent:not([class*="ql-font-"]):not([style*="font-weight"]){
  font-weight:680;
  font-variation-settings:"wght" calc(500 + var(--v,0)*200);
}

/* V5 Fluidic / Dynamic / Versatile state sequence. */
.oj-state-pin{
  display:flex;
  align-items:center;
}
.oj-state-layout{
  position:relative;
  z-index:7;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);
  gap:clamp(36px,5vw,96px);
  align-items:center;
  padding:0 var(--oj-gutter);
  box-sizing:border-box;
}
.oj-state-words{
  position:relative;
  height:clamp(132px,21vw,316px);
  min-width:0;
}
.oj-state-word{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  color:var(--oj-fg);
  font-family:var(--font-heading,"Aeonik"),"Aeonik",sans-serif;
  font-size:clamp(58px,9.5vw,166px);
  font-weight:340;
  letter-spacing:-.06em;
  line-height:.92;
  white-space:nowrap;
  opacity:var(--aw,0);
  filter:blur(calc((1 - var(--aw,0))*14px));
  translate:0 calc((.5 - var(--aw,0)*.5)*1.2em);
  font-variation-settings:"wght" calc(300 + var(--aw,0)*160);
  will-change:opacity,filter,translate,font-variation-settings;
}
.oj-state-copy{
  display:flex;
  flex-direction:column;
  gap:1.1em;
  max-width:54ch;
  color:var(--oj-fg-70);
  font-size:clamp(14.5px,1.12vw,18px);
  line-height:1.62;
  text-wrap:pretty;
}
.oj-state-copy strong{color:var(--oj-fg);font-weight:640}
.oj-state-quote{
  margin-top:1.2em;
  color:var(--oj-fg-50);
  font-size:.94em;
}
.oj-state-copy .oj-much-bigger{
  display:inline-block;
  margin-left:.1em;
  color:var(--oj-fg);
  font-size:1.45em;
  font-weight:720;
  line-height:1;
  white-space:nowrap;
}

/* V5 mitosis / numbers. */
.oj-number-pin{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(28px,4vh,54px);
}
.oj-number-head{
  position:relative;
  z-index:7;
  padding:0 var(--oj-gutter);
  opacity:var(--oj-num-reveal,0);
}
.oj-number-head h2{
  max-width:18ch;
  margin:0;
  font-family:var(--font-heading,"Aeonik"),"Aeonik",sans-serif;
  font-size:clamp(32px,4.4vw,68px);
  font-weight:380;
  letter-spacing:-.045em;
  line-height:1.02;
  text-wrap:balance;
}
.oj-number-head h2 b{font-weight:680}
.oj-number-wall{
  position:relative;
  z-index:7;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-inline:var(--oj-grid-frame-inline);
  background:var(--oj-grid-gap);
  border:0;
  box-sizing:border-box;
}
.oj-number-joints{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.oj-number-joint{
  position:absolute;
  left:var(--oj-joint-x);
  top:var(--oj-joint-y);
  width:var(--oj-joint-mask);
  height:var(--oj-joint-mask);
  display:block;
  background:transparent;
  transform:translate(-50%,-50%);
}
.oj-number-joint::before,
.oj-number-joint::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  background:var(--oj-joint-ink);
  transform:translate(-50%,-50%);
}
.oj-number-joint::before{
  width:var(--oj-joint-arm);
  height:1px;
}
.oj-number-joint::after{
  width:1px;
  height:var(--oj-joint-arm);
}
.oj-number-card{
  --v:0;
  --oj-clear:0;
  position:relative;
  z-index:1;
  min-width:0;
  min-height:clamp(118px,14vw,168px);
  overflow:hidden;
  padding:clamp(18px,1.7vw,28px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(10px,1.1vw,18px);
  background:var(--oj-grid-cell);
  border:0;
  opacity:calc(.08 + .92*var(--v));
  filter:blur(calc((1 - var(--oj-clear))*6px));
  will-change:opacity,filter;
}
.oj-number-value{
  display:flex;
  align-items:flex-end;
  color:var(--oj-grid-ink);
  font-family:var(--font-heading,"Aeonik"),"Aeonik",sans-serif;
  font-size:clamp(48px,4.4vw,80px);
  font-weight:340;
  font-variant-numeric:tabular-nums;
  font-variation-settings:"wght" calc(300 + var(--v)*140);
  letter-spacing:-.05em;
  line-height:.88;
}
.oj-number-value em{
  font-style:normal;
  font-size:.42em;
  color:rgba(16,16,16,.54);
  font-weight:680;
  translate:.08em -.35em;
}
.oj-number-label{
  display:block;
  overflow:visible;
  max-width:24ch;
  height:auto;
  min-height:3em;
  margin:0;
  color:var(--oj-grid-ink-soft);
  font-family:var(--font-heading,"Aeonik"),"Aeonik",sans-serif;
  font-size:clamp(12px,.94vw,14px);
  line-height:1.5;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.oj-number-card:first-of-type .oj-number-label{
  max-width:none;
  text-wrap:balance;
}

@media(max-width:1000px){
  .oj-scene--numbers{height:160vh}
  .oj-number-pin{
    position:sticky;
    top:0;
    height:100dvh;
    min-height:0;
    justify-content:center;
    align-content:center;
    padding-block:clamp(32px,5vh,56px);
  }
  .oj-number-wall{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
  }
  .oj-number-joints{display:none}
}

@media(max-width:880px){
  .oj-scene--manifesto{height:260vh}
  .oj-scene--states{height:280vh}
  .oj-scene--numbers{height:145vh}
  .oj-state-pin{box-sizing:border-box;padding-block:clamp(56px,8vh,80px)}
  .oj-state-layout{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .oj-state-words{height:clamp(84px,20vw,178px)}
  .oj-state-word{font-size:clamp(52px,14vw,104px)}
  .oj-state-copy{max-width:62ch}
  .oj-manifesto-copy{font-size:clamp(20px,2.8vw,28px)}
  .oj-number-pin{
    position:sticky;
    top:0;
    height:100dvh;
    min-height:0;
    justify-content:center;
    align-content:center;
    padding-block:clamp(28px,5vh,48px);
  }
}

/* Tablets: vh-multiple runways inflate on tall viewports (300vh = 3540px on an
   iPad portrait vs ~2530px on a phone). Match the phone's absolute scroll
   distance so the journey reads as tight, not empty. Numbers keep a sticky
   centered viewport like desktop (auto/document-flow was top-aligned and
   delayed the count-up until the grid was halfway off-screen). */
@media (min-width:744px) and (max-width:1200px) and (orientation:landscape),
       (any-pointer:coarse) and (min-width:744px) and (max-width:1439px) and (orientation:landscape){
  .oj-scene--manifesto{height:220vh}
  .oj-scene--states{height:240vh}
  .oj-scene--numbers{height:150vh}
  .oj-number-pin{
    position:sticky;
    top:0;
    height:100dvh;
    min-height:560px;
    justify-content:center;
    align-content:center;
    padding-block:clamp(40px,6vh,72px);
  }
}

/* Portrait tablets: short sticky Stories runway; numbers stay content-led. */
@media (min-width:744px) and (max-width:1200px) and (orientation:portrait),
       (any-pointer:coarse) and (min-width:744px) and (max-width:1439px) and (orientation:portrait){
  .oj-scene--manifesto{height:180vh}
  .oj-scene--states,
  .oj-scene--numbers{height:auto}
  .oj-manifesto-pin.oj-pin{
    position:sticky;
    top:0;
    height:auto;
    min-height:0;
    overflow:visible;
    padding-block:clamp(36px,5vh,56px);
  }
  .oj-number-pin,
  .oj-pin:not(.oj-manifesto-pin){
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    padding-block:clamp(36px,5vh,56px);
  }
  .oj-intro-stage{
    position:relative;
    inset:auto;
    min-height:min(72vh,720px);
    padding:clamp(36px,5vh,56px) var(--oj-gutter) clamp(20px,3vh,32px);
  }
}

/* Portrait: short sticky runway for Stories switch (not a full empty canvas).
   Numbers stay content-led. */
html.tablet-portrait .oj-scene--manifesto{height:180vh !important}
html.tablet-portrait .oj-scene--states{height:auto !important}
html.tablet-portrait .oj-scene--numbers{height:auto !important}
html.tablet-portrait .oj-manifesto-pin.oj-pin{
  position:sticky !important;
  top:0 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-block:clamp(36px,5vh,56px) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}
html.tablet-portrait .oj-number-pin,
html.tablet-portrait .oj-pin:not(.oj-manifesto-pin){
  position:relative !important;
  top:auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-block:clamp(36px,5vh,56px) !important;
}
html.tablet-portrait .oj-intro-stage{
  position:relative !important;
  inset:auto !important;
  min-height:min(68vh,680px);
  padding:clamp(36px,5vh,56px) var(--oj-gutter) clamp(20px,3vh,32px) !important;
}
html.tablet-portrait .oj-manifesto-in{
  padding:0 !important;
}
html.tablet-portrait .oj-manifesto-copy{
  font-size:clamp(20px,2.6vw,28px);
}
html.tablet-portrait .intro-bridge-word{
  font-family:"Aeonik","Aeonik",sans-serif;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.92;
}

/* Keep hero above the fixed organism canvas while the banner is on screen. */
html.tablet-portrait #top{
  z-index:5;
  isolation:isolate;
}
html.tablet-portrait body.organism-journey-active .organism-gl,
html.tablet-portrait body.organism-journey-active.no-webgl-organism .organism-gl-fallback{
  z-index:1;
}

@media(max-width:767px){
  .oj-number-wall{margin-inline:0}
}

@media(max-width:680px){
  .oj-pin{min-height:500px}
  .oj-intro-stage{
    gap:clamp(14px,2.2vh,22px);
    padding:0 var(--oj-gutter) clamp(22px,3.5vh,36px);
  }
  .intro-bridge-title-wrap{align-items:flex-end;flex-direction:row;white-space:nowrap}
  .oj-scene--manifesto{height:220vh}
  .oj-scene--states{height:240vh}
  .oj-scene--numbers{height:140vh}
  .oj-manifesto-copy{font-size:clamp(18px,4.8vw,26px);line-height:1.3}
  .oj-number-pin{padding-block:clamp(24px,4vh,40px)}
  .oj-number-wall{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:10px;
    margin-inline:0;
    padding:clamp(18px,3.5vw,24px);
    background:transparent;
  }
  .oj-number-card{
    min-height:108px;
    border:1px solid rgba(16,16,16,.12);
  }
}

@media(max-width:880px){
  .organism-gl-fallback .oj-fb-lobe{
    box-shadow:inset -16px -20px 40px rgba(40,40,38,.16),inset 14px 12px 32px rgba(255,255,255,.68);
  }
}

@media(prefers-reduced-motion:reduce){
  .organism-gl-fallback .oj-fb-lobe{animation:none}
  .oj-scene,.oj-scene--manifesto,.oj-scene--states,.oj-scene--numbers{height:auto}
  .oj-pin{position:relative;height:auto;min-height:100dvh;padding-block:clamp(72px,11vh,128px)}
  /* Gate end-state behind oj-intro-ready so hard-refresh doesn't paint the
     static "Stories" + blue switch before CMS bridge copy lands. */
  html.organism-no-motion .oj-intro-stage{position:relative;inset:auto;min-height:min(70vh,680px);padding:clamp(64px,10vh,112px) var(--oj-gutter) clamp(28px,4vh,48px)}
  html.organism-no-motion.oj-intro-ready .oj-intro-title{opacity:1;visibility:visible;translate:none}
  html.organism-no-motion.oj-intro-ready .intro-bridge-exit-left,
  html.organism-no-motion.oj-intro-ready .intro-bridge-exit-right{transform:none;translate:none;opacity:1;--split-x:0}
  html.organism-no-motion.oj-intro-ready #intro-bridge-word-connect{opacity:1;translate:none}
  html.organism-no-motion.oj-intro-ready .intro-bridge-toggle-track{background:var(--oj-switch-on)}
  html.organism-no-motion.oj-intro-ready .intro-bridge-toggle-knob{left:auto;right:var(--toggle-pad)}
  html.organism-no-motion .oj-manifesto-in{padding:0}
  html.organism-no-motion.oj-intro-ready .oj-manifesto-copy,
  html.organism-no-motion.oj-intro-ready #organism-manifesto,
  html.organism-no-motion.oj-intro-ready .oj-manifesto-headline{opacity:1;visibility:visible}
  html.organism-no-motion.oj-intro-ready .oj-manifesto-copy .oj-mw{opacity:1;translate:none;font-variation-settings:"wght" 420}
  .oj-state-pin,.oj-number-pin{padding-block:clamp(72px,11vh,128px)}
  .oj-state-word{position:static;opacity:1;filter:none;translate:none}
  .oj-state-word:not(:last-child){margin-bottom:.08em}
  .oj-state-words{height:auto}
  .oj-number-card{--v:1}
}

html.cms-preview-mode .organism-gl,
html.cms-preview-mode .organism-gl-fallback{display:none!important}
html.cms-preview-mode .oj-scene{height:auto!important}
html.cms-preview-mode .oj-scene--numbers{margin-top:0!important;transform:none!important}
html.cms-preview-mode .oj-pin{position:relative;height:auto;min-height:0;padding-block:clamp(64px,9vh,108px);overflow:visible}
html.cms-preview-mode .oj-intro-stage{position:relative;inset:auto;min-height:min(70vh,680px);padding:clamp(56px,8vh,96px) var(--oj-gutter) clamp(28px,4vh,48px)}
html.cms-preview-mode .oj-intro-title{opacity:1;translate:none}
html.cms-preview-mode .intro-bridge-exit-left,
html.cms-preview-mode .intro-bridge-exit-right{transform:none;translate:none;opacity:1;--split-x:0}
html.cms-preview-mode #intro-bridge-word-connect{opacity:1;translate:none}
html.cms-preview-mode .intro-bridge-toggle-track{background:var(--oj-switch-on)}
html.cms-preview-mode .intro-bridge-toggle-knob{left:auto;right:var(--toggle-pad)}
html.cms-preview-mode .oj-manifesto-in{padding:0;pointer-events:auto}
html.cms-preview-mode .oj-manifesto-copy,
html.cms-preview-mode #organism-manifesto,
html.cms-preview-mode .oj-manifesto-headline{
  opacity:1;
  pointer-events:auto;
  cursor:text;
}
html.cms-preview-mode .oj-manifesto-copy .oj-mw{opacity:1;translate:none}
html.cms-preview-mode .oj-state-pin,html.cms-preview-mode .oj-number-pin{padding-block:clamp(64px,9vh,108px)}
html.cms-preview-mode .oj-state-word{position:static;opacity:1;filter:none;translate:none}
html.cms-preview-mode .oj-state-words{height:auto}
html.cms-preview-mode .oj-number-card{--v:1}
html.cms-preview-mode #intro-bridge{
  background-color:var(--oj-stories-bg,var(--home-page-bg,#e7e7e7));
}
html.cms-preview-mode #home-ideas-sequence{
  background-color:var(--oj-ideas-bg,var(--home-page-bg,#e7e7e7));
}
html.cms-preview-mode .oj-section-bg--ideas{
  display:none!important;
}