
:root{
  --s40-paper:#f4f1ea;
  --s40-paper-2:#ece9e1;
  --s40-ink:#111311;
  --s40-lime:#d8f024;
  --s40-lime-2:#f0ff8f;
  --s40-soft:#f6f4ee;
  --s40-dock:#171917;
  --s40-line:rgba(17,19,17,.09);
  --s40-shadow:0 24px 56px rgba(17,19,17,.12);
}
body.step40-body{background:var(--s40-paper)!important;color:var(--s40-ink)!important}

/* ---------- navigator only after start page ---------- */
.step40-body .rail{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px)!important;transition:opacity .28s ease,transform .28s ease!important}
.step40-body.step40-menu-live .rail{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)!important}

/* bottom centered dock */
.step40-body .head .nav,
.step40-body .head .btn,
.step40-body .head .burger{display:none!important}
.step40-body .head{background:rgba(244,241,234,.82)!important;border-bottom:1px solid rgba(17,19,17,.06)!important;backdrop-filter:blur(14px)!important}
.step40-body .head-in{height:72px!important}
.step40-body .brand img{width:35px!important;height:auto!important}
.step40-body .rail{
  position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:18px!important;display:grid!important;
  grid-auto-flow:column!important;gap:8px!important;padding:8px!important;background:rgba(18,19,18,.96)!important;color:#fff!important;
  border-radius:999px!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 18px 46px rgba(0,0,0,.25)!important;z-index:90!important;
}
.step40-body .rail.is-on{transform:translateX(-50%) translateY(0)!important}
.step40-body .rail-btn,
.step40-body .rail-menu{width:52px!important;height:52px!important;border-radius:999px!important;background:#f7f5ef!important;color:#121312!important;border:1px solid rgba(18,19,18,.08)!important;display:grid;place-items:center;box-shadow:none!important}
.step40-body .rail-menu{min-width:126px!important;padding:0 18px!important;grid-auto-flow:column;gap:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;background:var(--s40-lime)!important;color:#121312!important}
.step40-body .rail-menu i{display:block;width:16px;height:2px;background:currentColor;position:relative;border-radius:99px}.step40-body .rail-menu i::before,.step40-body .rail-menu i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:99px}.step40-body .rail-menu i::before{top:-5px}.step40-body .rail-menu i::after{top:5px}
.step40-body .rail-btn:first-child{background:#f7f5ef!important;color:#111!important}
.step40-body .rail-btn:hover,.step40-body .rail-btn:focus-visible,.step40-body .rail-menu:hover,.step40-body .rail-menu:focus-visible{transform:translateY(-2px)!important;background:var(--s40-lime-2)!important;color:#111!important}
.step40-body .rail-btn::after{display:none!important}
.step40-body .rail-share-wrap.is-open .share-menu{left:50%!important;right:auto!important;top:auto!important;bottom:calc(100% + 14px)!important;transform:translateX(-50%) translateY(0) scale(1)!important}
.step40-body .rail-toast{bottom:calc(100% + 10px)!important;left:50%!important;right:auto!important;transform:translateX(-50%) translateY(8px)!important}.step40-body .rail-toast.is-on{transform:translateX(-50%) translateY(0)!important}

/* ---------- hero / start page ---------- */
.step40-body .step37-hero{padding:clamp(18px,3vw,42px) 0 clamp(44px,5vw,74px)!important;background:
  radial-gradient(circle at 78% 18%,rgba(216,240,36,.20),transparent 24%),
  linear-gradient(118deg,#f7f5ef 0 50%,#eceee8 76%,#e5e8e2 100%)!important;overflow:hidden}
.step40-body .step37-hero::before{display:none!important}
.step40-body .step37-hero .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr)!important;gap:clamp(20px,4vw,58px)!important;align-items:center!important}
.step40-body .step37-hero .step37-kicker{margin-bottom:14px!important}
.step40-body .step37-hero h1{font-size:clamp(4.8rem,9vw,8.8rem)!important;line-height:.78!important;max-width:6ch!important;letter-spacing:-.085em!important}
.step40-body .step37-hero h1 span::before{display:none!important}
.step40-body .step37-hero h1 span::after{height:.11em!important;background:var(--s40-lime)!important;bottom:-.04em!important;right:.02em!important;transform:scaleX(1)!important}
.step40-body .step37-hero .lede{font-size:clamp(1.14rem,1.7vw,1.45rem)!important;max-width:31ch!important;margin-top:18px!important;color:#343834!important}
.step40-body .step37-hero .hero-acts{margin-top:24px!important}
.step40-body .step37-hero .stamp{min-height:clamp(500px,58vw,730px)!important;border-radius:28px!important;background:
  linear-gradient(118deg,rgba(255,255,255,.96) 0 42%, rgba(255,255,255,.48) 52%, rgba(30,31,31,.02) 62%),
  url('assets/step40/hero-tiger-reference.png') center/cover no-repeat!important;box-shadow:var(--s40-shadow)!important;position:relative!important;overflow:hidden!important}
.step40-body .step37-hero .stamp::before,.step40-body .step37-hero .stamp::after{display:none!important}
.step40-body .step37-hero .stamp>img,.step40-body .step37-hero .tiger-scroll-echo,.step40-body .step37-hero .tiger-scroll-note,.step40-body .step37-hero .s38-hero-words{display:none!important}
.step40-body .step37-hero .stamp::marker{display:none}
.step40-body .step37-hero .stamp::after{content:"";display:block!important;position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.96) 0 30%,rgba(255,255,255,.72) 39%,rgba(255,255,255,0) 52%);pointer-events:none}
.step40-body .step37-hero .stamp .step40-hero-caption{position:absolute;left:clamp(22px,2.8vw,34px);top:clamp(24px,3vw,38px);z-index:4;max-width:min(44%,420px)}
.step40-body .step37-hero .stamp .step40-hero-caption b{display:block;font-size:.75rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#484c47;margin-bottom:16px}
.step40-body .step37-hero .stamp .step40-hero-caption strong{display:block;font-size:clamp(3.6rem,7vw,6rem);line-height:.82;letter-spacing:-.08em;color:#111}
.step40-body .step37-hero .stamp .step40-hero-caption p{margin:18px 0 0;font-size:1.05rem;line-height:1.5;color:#404640;max-width:28ch}
.step40-body .step37-hero .stamp .step40-hero-scribble{position:absolute;right:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.6vw,34px);z-index:4;font-size:clamp(1.2rem,2vw,1.9rem);line-height:1.03;font-weight:700;color:#111;transform:rotate(-5deg);text-align:right}
.step40-body .step37-hero .hero-facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-top:26px!important;position:relative!important;z-index:3!important}
.step40-body .step37-hero .hero-facts div{min-height:108px!important;border-radius:22px!important;background:rgba(255,255,255,.78)!important;border:1px solid rgba(17,19,17,.08)!important;padding:18px 18px 16px!important;backdrop-filter:blur(6px)}
.step40-body .step37-hero .hero-facts b{display:block;font-size:1.04rem;margin-bottom:8px}

/* section titles a bit sharper */
.step40-body h2{letter-spacing:-.078em!important}

/* ---------- services full wide / atomic-like ---------- */
.step40-body .step37-services{background:var(--s40-paper)!important;padding-top:98px!important}
.step40-body .step37-services>.wrap.row{max-width:var(--wrap)!important;gap:18px!important}
.step40-body .step37-services h2{max-width:11ch!important}
.step40-body .step37-services .design-tiles{
  width:100vw!important;margin-left:calc(50% - 50vw)!important;padding:0 clamp(20px,4vw,56px)!important;
  display:grid!important;grid-template-columns:minmax(300px,34vw) minmax(0,1fr)!important;gap:clamp(22px,3vw,34px)!important;align-items:start!important
}
.step40-body .step37-services .design-tiles-list{padding-top:18px!important}
.step40-body .step37-services .design-tile{min-height:130px!important;border-radius:24px!important;padding:24px 62px 24px 24px!important;box-shadow:none!important;transition:transform .28s ease,box-shadow .28s ease!important}
.step40-body .step37-services .design-tile::after{width:44px!important;height:44px!important;right:18px!important;bottom:18px!important}
.step40-body .step37-services .design-tile.is-active,.step40-body .step37-services .design-tile:hover,.step40-body .step37-services .design-tile:focus-visible{transform:translateX(10px)!important;box-shadow:0 20px 44px rgba(17,19,17,.12)!important}
.step40-body .step37-services .design-tiles-stage{height:min(78vh,760px)!important;min-height:590px!important;max-width:none!important;top:96px!important;border-radius:30px!important;background:#121413!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 28px 70px rgba(17,19,17,.16)!important;isolation:isolate}
.step40-body .step37-services .design-visual{opacity:0!important;transform:scale(1.04)!important;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)!important}
.step40-body .step37-services .design-visual.is-active{opacity:.16!important;transform:scale(1)!important}
.step40-body .step37-services .design-visual img{width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(.72) brightness(.8) blur(.2px)}
.step40-body .step37-services .design-tiles-label,.step40-body .step37-services .design-tiles-mobile-card{display:none!important}
.step40-body .step37-services .step40-service-overlay{position:absolute;inset:0;z-index:4;padding:18px;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto 1fr auto;gap:14px;pointer-events:none}
.step40-body .step37-services .step40-service-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;color:#b6bcb5;font-size:.76rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.step40-body .step37-services .step40-service-dots{display:flex;gap:7px}.step40-body .step37-services .step40-service-dots i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.step40-body .step37-services .step40-service-info{align-self:start;max-width:520px;padding:26px 24px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.step40-body .step37-services .step40-service-kicker{font-size:.74rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#bfc7be}
.step40-body .step37-services .step40-service-title{margin-top:12px;font-size:clamp(3rem,5vw,5.8rem);line-height:.88;letter-spacing:-.075em;color:#fff;font-weight:950;max-width:9ch}
.step40-body .step37-services .step40-service-text{margin-top:12px;font-size:1.05rem;line-height:1.56;color:#d7ddd6;max-width:28ch}
.step40-body .step37-services .step40-service-side{align-self:end;justify-self:end;max-width:340px;display:grid;gap:12px}
.step40-body .step37-services .step40-side-card{border-radius:24px;padding:20px;background:rgba(246,243,236,.96);border:1px solid rgba(17,19,17,.07);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.step40-body .step37-services .step40-side-card h4{margin:0;font-size:1.1rem;letter-spacing:-.04em;color:#111}.step40-body .step37-services .step40-side-lines{display:grid;gap:9px;margin-top:16px}.step40-body .step37-services .step40-side-lines i{display:block;height:8px;border-radius:999px;background:#d7d8d1}.step40-body .step37-services .step40-side-lines i:nth-child(2){width:76%}.step40-body .step37-services .step40-side-lines i:nth-child(3){width:58%}
.step40-body .step37-services .step40-stage-visual{min-height:240px;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#17342b,#697f72);position:relative;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.step40-body .step37-services .step40-stage-visual::before,.step40-body .step37-services .step40-stage-visual::after{content:"";position:absolute}.step40-body .step37-services .step40-stage-visual::before{left:12%;top:20%;width:60%;height:58%;background:rgba(255,255,255,.15);transform:rotate(-9deg);border-radius:24px}.step40-body .step37-services .step40-stage-visual::after{right:11%;top:10%;width:24%;height:24%;background:rgba(239,200,181,.86);border-radius:20px}
.step40-body .step37-services .step40-service-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-self:end}
.step40-body .step37-services .step40-service-chips span{padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-size:.69rem;font-weight:850}
.step40-body .step37-services .design-tiles-stage[data-service-active="1"] .step40-stage-visual{background:linear-gradient(145deg,#8a4a30,#e3b8a9)}
.step40-body .step37-services .design-tiles-stage[data-service-active="2"] .step40-stage-visual{background:linear-gradient(145deg,#232f40,#90a9cc)}
.step40-body .step37-services .design-tiles-stage[data-service-active="3"] .step40-stage-visual{background:linear-gradient(145deg,#46555f,#bccfd3)}

/* ---------- depth cards cleaner ---------- */
.step40-body .step37-depth{background:linear-gradient(180deg,#fffdfa 0%, #f4f1ea 100%)!important}
.step40-body .step37-depth .depth-grid{gap:16px!important}
.step40-body .step37-depth .depth-grid>*{border-radius:24px!important;background:rgba(255,255,255,.8)!important;border:1px solid rgba(17,19,17,.07)!important;box-shadow:0 18px 42px rgba(17,19,17,.06)!important;padding:24px!important}

/* reduce empty gap before Wirkung */
.step40-body .step37-workshop{padding-bottom:68px!important}
.step40-body .step37-workshop + .scrollword{margin-top:-36px!important}
.step40-body .scrollword{height:225svh!important}
.step40-body .scrollword-stage{height:95svh!important}
.step40-body .scrollword-word{font-size:clamp(4.4rem,13vw,11.6rem)!important}

/* process section */
.step40-body .step37-howdo{height:188svh!important;background:#0f100f!important}
.step40-body .step37-howdo .howdo-stage{align-items:start!important;padding-top:46px!important}
.step40-body .step37-howdo .howdo-word{top:8vh!important}
.step40-body .step37-howdo .howdo-copy{padding-top:25vh!important}
.step40-body .step37-howdo .howdo-steps article{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04))!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 18px 42px rgba(0,0,0,.08)!important}

/* projects / pagewall untouched mostly but a bit tidier */
.step40-body .step37-pagewall .page-wall-card{box-shadow:0 22px 54px rgba(17,19,17,.10)!important}

/* ---------- brand scatter replacing logo motion ---------- */
.step40-body .step37-logo.logo-motion{background:#0c0e0c!important;position:relative;overflow:hidden}
.step40-body .step37-logo.logo-motion::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 48% 50%,rgba(216,240,36,.12),transparent 20%),linear-gradient(135deg,rgba(255,255,255,.04),transparent 45%);pointer-events:none}
.step40-body .step37-logo .logo-motion-grid{grid-template-columns:1fr minmax(340px,520px) .7fr!important;align-items:center!important;gap:clamp(24px,4vw,40px)!important}
.step40-body .step37-logo .logo-motion-copy h2{font-size:clamp(3rem,6vw,5rem)!important;color:#fff!important;max-width:7ch}
.step40-body .step37-logo .logo-motion-copy .muted{color:#bfc5be!important;max-width:32ch}
.step40-body .step37-logo .logo-motion-copy .tag{border-color:#fff!important;color:#b6bbb5!important}.step40-body .step37-logo .logo-motion-copy .tag b{color:#fff!important}
.step40-body .step37-logo .logo-motion-art{min-height:420px!important;border-radius:28px!important;background:#090b09!important;display:grid!important;place-items:center!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.08)!important;position:relative!important;box-shadow:0 28px 70px rgba(0,0,0,.24)!important}
.step40-body .step37-logo .logo-tail-canvas,.step40-body .step37-logo .logo-tail-pointer,.step40-body .step37-logo .logo-tail-glow,.step40-body .step37-logo .logo-tail-mark-wrap,.step40-body .step37-logo .logo-motion-word{display:none!important}
.step40-body .step37-logo .step40-scatter-board{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.step40-body .step37-logo .step40-scatter-board img{width:100%;height:100%;object-fit:cover;opacity:.95}
.step40-body .step37-logo .step40-scatter-pixels{position:absolute;inset:0;pointer-events:none}
.step40-body .step37-logo .step40-scatter-pixels i{position:absolute;width:12px;height:12px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(255,255,255,.06);opacity:.16;animation:step40PixelFloat 8s linear infinite}
.step40-body .step37-logo .step40-scatter-side{color:#fff;display:grid;gap:18px;align-content:center;justify-items:start}
.step40-body .step37-logo .step40-scatter-side .scribble{font-size:clamp(1.7rem,2.8vw,2.8rem);line-height:.94;transform:rotate(-6deg);color:#fff}
.step40-body .step37-logo .step40-scatter-side .list{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:#c7cec6;display:grid;gap:10px}
@keyframes step40PixelFloat{0%{transform:translate3d(0,0,0) scale(1);opacity:.18}50%{transform:translate3d(16px,-10px,0) scale(1.15);opacity:.34}100%{transform:translate3d(32px,-18px,0) scale(.6);opacity:0}}

/* magnus, faq mostly keep */

/* ---------- footer pixel drift ---------- */
.step40-body .foot{position:relative;overflow:hidden;background:#090b09!important}
.step40-body .foot::before{content:"";position:absolute;right:-10%;bottom:-30%;width:360px;height:360px;background:radial-gradient(circle,rgba(216,240,36,.16),transparent 58%);pointer-events:none}
.step40-body .foot::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.step40-body .foot .step40-footer-drift{position:absolute;right:40px;bottom:26px;width:240px;height:140px;pointer-events:none}
.step40-body .foot .step40-footer-drift i{position:absolute;width:8px;height:8px;background:#d9ff1f;opacity:.22;animation:step40FooterPixel 9s linear infinite}
@keyframes step40FooterPixel{0%{transform:translate(0,0) scale(1);opacity:.24}100%{transform:translate(-110px,-42px) scale(.5);opacity:0}}

/* CTA slight cleanup */
.step40-body .step37-cta .shoe-cta{background:rgba(255,255,255,.4)!important}

@media(max-width:1100px){
  .step40-body .step37-hero .hero-grid{grid-template-columns:1fr!important}
  .step40-body .step37-hero .stamp{min-height:560px!important}
  .step40-body .step37-services .design-tiles{grid-template-columns:1fr!important}
  .step40-body .step37-services .design-tiles-stage{order:-1;position:relative!important;top:auto!important;height:560px!important;min-height:480px!important}
  .step40-body .step37-services .step40-service-overlay{grid-template-columns:1fr!important;grid-template-rows:auto auto 1fr auto!important}
  .step40-body .step37-services .step40-service-side{justify-self:start;max-width:360px}
  .step40-body .step37-logo .logo-motion-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .step40-body .head-in{height:66px!important}
  .step40-body .rail{width:calc(100vw - 16px)!important;max-width:560px!important;justify-content:space-between!important;gap:6px!important;padding:7px!important}
  .step40-body .rail-menu{min-width:104px!important;height:48px!important;font-size:.68rem!important;padding:0 14px!important}
  .step40-body .rail-btn{height:48px!important;width:48px!important}
  .step40-body .step37-hero h1{font-size:clamp(4.2rem,18vw,6.4rem)!important}
  .step40-body .step37-hero .stamp{min-height:480px!important;background-position:center right!important}
  .step40-body .step37-hero .stamp .step40-hero-caption{max-width:78%!important}
  .step40-body .step37-hero .hero-facts{grid-template-columns:1fr!important}
  .step40-body .step37-services .design-tiles{padding:0 16px!important}
  .step40-body .step37-services .design-tile{min-height:118px!important}
  .step40-body .step37-services .design-tiles-stage{min-height:420px!important;height:74vw!important}
  .step40-body .step37-services .step40-service-title{font-size:clamp(2.2rem,10vw,3.8rem)!important}
  .step40-body .scrollword{height:auto!important}.step40-body .scrollword-stage{height:auto!important;padding:48px 0!important}
  .step40-body .step37-howdo{height:auto!important}.step40-body .step37-howdo .howdo-stage{position:relative!important;height:auto!important}.step40-body .step37-howdo .howdo-word{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;margin-bottom:18px!important}.step40-body .step37-howdo .howdo-copy{padding-top:0!important}
}
