/* Fabulab 2026 — Jost and the original speech-bubble artwork from /brand. */
@font-face{font-family:Jost;src:url('/assets/fonts/jost/Jost-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('/assets/fonts/jost/Jost-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('/assets/fonts/jost/Jost-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('/assets/fonts/jost/Jost-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('/assets/fonts/jost/Jost-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
.story-page{
  --font-sans:Jost,system-ui,sans-serif;--font-serif:Jost,system-ui,sans-serif;--font-mono:Jost,system-ui,sans-serif;
  --story-ink:#351536;--story-paper:#fff;--story-cream:#fff;--story-muted:#e6dce9;--story-copy:#625368;
  --story-red:#d6005a;--story-red-dark:#a80049;--story-footer:#321334;--story-line:rgba(255,255,255,.2);--story-line-dark:rgba(64,20,62,.15);
  --accent:#d6005a;--accent-rgb:214,0,90;--bg:#351536;--bg-2:#421843;--bg-3:#512450;
  --text:#fff;--text-1:#fff;--text-2:#e6dce9;--text-3:#c4a8c9;--line:rgba(255,255,255,.18);
  font-family:var(--font-sans);font-weight:400;background:#351536;
}
.story-page :is(button,input,textarea,select){font-family:var(--font-sans)}
.story-page :is(.h-display,.h-section,.story-positioning h2,.story-service-row h3,.story-step h3,.story-project-featured h3,.story-project-mini h3,.story-prose p,.footer-claim,.fabulab-stories-cta h2){font-family:var(--font-sans);letter-spacing:-.035em;line-height:1.06;font-weight:600}
.story-page .h-display{font-size:clamp(44px,6.3vw,98px);max-width:16ch}
.story-page .h-section{font-size:clamp(36px,4.7vw,72px);max-width:19ch}
.story-page :is(.lead,.story-copy-stack p,.story-method-copy,.story-audience-list p){letter-spacing:0;line-height:1.5}
.story-page .lead{font-size:clamp(19px,1.6vw,25px)}
.story-page .story-copy-stack p{font-size:clamp(18px,1.4vw,22px)}
.story-page .story-copy-stack p:first-child{font-size:clamp(21px,1.9vw,29px);line-height:1.35}
.story-page .eyebrow{font-family:var(--font-sans);font-weight:600;letter-spacing:.12em}
.story-page .story-dark .eyebrow{color:#ff93c0}
.story-page .nav{background:rgba(49,17,50,.94);border-bottom:1px solid rgba(255,255,255,.1)}
.story-page .nav.story-nav.is-scrolled{background:rgba(49,17,50,.97)}
.story-page .nav.story-nav .nav-logo img,.story-page .footer-brand img{width:166px;height:auto;max-width:100%;object-fit:contain}
.story-page .nav.story-nav .nav-logo-mark{display:none}
.story-page .nav-links a{font-family:var(--font-sans);font-size:15px;letter-spacing:0}
.story-page .nav-links a:is(:hover,:focus-visible,.is-active){color:#fff;background:rgba(255,255,255,.1)}
.story-page .nav-mobile{background:#351536}
.story-page .nav-mobile a{font-family:var(--font-sans);letter-spacing:-.02em}
.story-page .btn{border-radius:999px;font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:0;min-height:48px;transition:background .2s,box-shadow .2s,transform .2s}
.story-page .btn.btn-primary,.story-page .btn.btn-primary:visited{background:linear-gradient(115deg,#d6005a,#a61467);border-color:transparent;color:#fff;box-shadow:0 10px 28px rgba(116,10,66,.2)}
.story-page .btn.btn-primary:hover{background:linear-gradient(115deg,#b90050,#84165f);box-shadow:0 14px 34px rgba(116,10,66,.3);transform:translateY(-2px)}
.story-page :is(a,button,input,textarea,select):focus-visible{outline:3px solid #ff93c0;outline-offset:5px}
.story-page .story-paper :is(a,button,input,textarea,select):focus-visible{outline-color:#a80049}
.story-page :is(.story-hero,.story-internal-hero,.fabulab-archive-hero){position:relative;isolation:isolate;background:#351536;overflow:hidden}
.story-page :is(.story-hero,.story-internal-hero,.fabulab-archive-hero)::before{content:"";position:absolute;inset:-30% -15%;z-index:-1;pointer-events:none;background:url('/assets/brand/balloon.svg') 85% 45%/min(1150px,110vw) auto no-repeat;opacity:.48;transform:rotate(-12deg)}
.story-page .story-hero{padding-top:calc(var(--nav-h) + 92px);padding-bottom:92px;min-height:auto}
.story-page .story-hero-grid{position:relative;z-index:2;grid-template-columns:minmax(0,1fr);max-width:900px;gap:clamp(20px,3vw,50px)}
.story-page .story-hero h1{font-family:var(--font-sans);font-size:clamp(54px,7.7vw,120px);line-height:1.03;font-weight:300;letter-spacing:-.05em;margin-top:22px}
.story-page .story-hero h1 em{font-style:normal;font-weight:600;color:#ff9fc9}
.story-page .story-hero-badge{font-family:var(--font-sans);color:#ffb6d8;background:rgba(79,17,65,.5);border-color:rgba(255,159,201,.45);font-weight:400;letter-spacing:.03em;transform:rotate(-2deg)}
.story-page .story-hero-sub{font-size:clamp(18px,1.6vw,23px);line-height:1.4;font-weight:300;letter-spacing:0;max-width:660px}
.story-page .story-hero-sub + .story-hero-sub{margin-top:18px}
.story-page .story-side-note,.story-page .story-hero-note{color:#d6bbd8;font-family:var(--font-sans);font-size:14px;line-height:1.5}
.story-page .story-hero-note strong{font-family:var(--font-sans);font-size:clamp(24px,2.5vw,37px);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.story-page .story-scribble{width:92px;height:14px;background:linear-gradient(90deg,#d6005a,#ff9fc9);clip-path:polygon(0 65%,45% 0,100% 35%,48% 45%,35% 100%);margin-top:24px}
.story-page .story-work-strip{gap:clamp(10px,1.3vw,22px);margin-top:66px;perspective:1200px}
.story-page .story-work-card{border-radius:28px 28px 8px 28px;border-color:rgba(255,255,255,.28);box-shadow:0 20px 50px rgba(29,7,29,.25);transition:translate .3s,box-shadow .3s}
.story-page .story-work-card:hover,.story-page .story-work-card:focus-visible{translate:0 -10px;box-shadow:0 30px 60px rgba(29,7,29,.4)}
.story-page .story-tile-identity{background:#f8e5ef}
.story-page .story-tile-story{background:linear-gradient(145deg,#722552,#3b173e)}
.story-page .story-tile-content{background:linear-gradient(145deg,#eb347f,#b40959)}
.story-page .story-tile-site{background:#eee9f5}
.story-page .story-tile-campaign{background:linear-gradient(145deg,#357ed3,#162d6d)}
.story-page .story-tile-presence{background:linear-gradient(145deg,#804091,#3f2257)}
.story-page .story-work-card span{font-family:var(--font-sans);font-weight:600;letter-spacing:.06em}
.story-page .story-chart i{background:#8c4897}
.story-page .story-chart i:nth-child(2){background:#441746}
.story-page .story-chart i:nth-child(3){background:#b991d3}
.story-page .story-chart i:nth-child(4){background:#d6005a}
.story-page .story-big-letter{font-family:var(--font-sans);font-weight:600;letter-spacing:-.04em}
.story-page .story-ui-card{border-radius:16px 16px 5px 16px}
.story-page .story-ring-note{border-color:#d6005a;font-family:var(--font-sans);border-radius:50% 50% 50% 8%;font-weight:400}
.story-page .story-positioning{background:#fcf8fc}
.story-page .story-positioning h2{font-size:clamp(36px,4.3vw,64px)}
.story-page .story-positioning p+p{margin-top:16px}
.story-page .story-positioning .num{font-family:var(--font-sans);font-weight:600;letter-spacing:.1em}
.story-page .story-service-list{border-top:0}
.story-page .story-service-row{position:relative;border-radius:24px 24px 6px 24px;padding:30px 24px;margin-top:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);transition:background .25s,border-color .25s}
.story-page .story-service-row:is(:hover,[data-brand-current]){background:rgba(214,0,90,.14);border-color:rgba(255,159,201,.55)}
.story-page .story-service-row h3{font-size:clamp(27px,2.8vw,40px)}
.story-page .story-service-row .num{color:#ff9fc9}
.story-page .story-service-row li{font-family:var(--font-sans);font-size:13px;color:#f3eaf6;border-color:rgba(255,255,255,.25)}
.story-page .story-service-tags li{border-radius:999px;font-family:var(--font-sans);font-size:15px}
.story-page .story-steps{position:relative;gap:14px;counter-reset:step}
.story-page .story-steps::before{content:"";position:absolute;left:25px;top:30px;bottom:30px;width:2px;background:linear-gradient(#d6005a,#8b3e91,#e2c7e0)}
.story-page .story-step{position:relative;grid-template-columns:52px 1fr;padding:26px 0;border:0;background:transparent}
.story-page .story-step:first-child{border-top:0}
.story-page .story-step>span{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50% 50% 8% 50%;background:#f4e9f3;border:1px solid #e2c7e0;font-family:var(--font-sans);color:#a80049;transition:background .25s,color .25s,transform .25s}
.story-page .story-step:is(:hover,[data-brand-current])>span{background:#a80049;color:#fff;transform:rotate(-8deg)}
.story-page .story-step h3{font-size:clamp(26px,2.3vw,35px)}
.story-page .story-step p{font-size:19px;line-height:1.5}
.story-page .story-projects{background:#301232}
.story-page :is(.story-project-featured,.story-project-mini,.fabulab-story-card){border-radius:28px 28px 8px 28px;transition:translate .3s,box-shadow .3s;overflow:hidden}
.story-page :is(.story-project-featured,.story-project-mini):hover{translate:0 -6px;box-shadow:0 24px 55px rgba(15,3,25,.28)}
.story-page .story-project-featured h3{font-size:clamp(36px,4vw,60px)}
.story-page .story-project-mini h3{font-size:clamp(27px,2.3vw,36px)}
.story-page .story-project-mini:nth-child(1){background:#532550}
.story-page .story-project-mini:nth-child(2){background:#f6d3e5;color:#40143e}
.story-page .story-project-mini:nth-child(3){background:#18447e}
.story-page .story-project-mini:nth-child(4){background:#e7ddf2;color:#40143e}
.story-page .story-project-mini .eyebrow{color:#ffb4d5}
.story-page .story-project-mini:nth-child(even) .eyebrow{color:#a80049}
.story-page .story-audience-list .story-audience-close{font-family:var(--font-sans);font-size:clamp(28px,3.3vw,46px);font-weight:400;letter-spacing:-.025em;line-height:1.15}
.story-page .story-internal-hero .section-media{opacity:.13;mix-blend-mode:screen}
.story-page .hero-origin::before{background:none;backdrop-filter:none}
.story-page .hero-symbol{color:#ff9fc9}
.story-page .legacy-studio-photo{border-radius:44px 44px 10px 44px;transform:rotate(1deg)}
.story-page .team-legacy-card{border-radius:24px 24px 6px 24px;transition:translate .3s}
.story-page .team-legacy-card:hover{translate:0 -5px}
.story-page .team-legacy-card figcaption{font-family:var(--font-sans);font-size:13px;letter-spacing:.08em}
.story-page .story-prose p{font-size:clamp(28px,3.4vw,49px);line-height:1.25;font-weight:400;padding-left:26px;border-left:2px solid #f0d7e7;transition:border-color .3s}
.story-page .story-prose p:nth-child(even){color:#8b205f}
.story-page .story-prose p[data-brand-current]{border-color:#d6005a}
.story-page .story-cta{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#67163f,#401843 60%,#4e2e71);border-radius:0 100px 0 0}
.story-page .story-cta::before{content:"";position:absolute;inset:-40% -15%;background:url('/assets/brand/balloon.svg') 20% 70%/900px auto no-repeat;opacity:.42;pointer-events:none;z-index:-1;transform:rotate(155deg)}
.story-page .story-cta .h-section{max-width:22ch;margin-inline:auto;color:white}
.story-page .story-cta .lead{color:#f2dfef}
.story-page .story-footer.footer,.story-page .footer{background:#2e1231}
.story-page .footer .footer-claim{font-family:var(--font-sans);font-size:clamp(50px,7.2vw,106px);letter-spacing:-.035em;line-height:1.03;font-weight:300;max-width:16ch}
.story-page .footer .footer-claim b{color:#ff9fc9;font-weight:600}
.story-page .footer-brand p,.story-page .footer-col a{font-family:var(--font-sans);font-size:15px}
.story-page .footer-col h5{font-family:var(--font-sans);font-weight:600;letter-spacing:.1em}
.story-page .contact-card{background:#f5edf5;color:#40143e;border-color:#e3d1e4;border-radius:28px 28px 8px 28px}
.story-page .contact-card :is(h2,p,a){color:#40143e}
.story-page .fabulab-stories-hero-copy .h-display{font-size:clamp(44px,6.3vw,96px)}
.story-page .fabulab-story-card h2{font-family:var(--font-sans);font-weight:600;letter-spacing:-.025em}
.story-page .fabulab-stories-orbit{border-radius:50% 50% 10% 50%;background:url('/assets/brand/balloon.svg') center/contain no-repeat}
.story-page .fabulab-stories-orbit .orbit{opacity:.5}
/* Preact islands add decoration only; all content and links remain server-rendered. */
.brand-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:layout paint}
.brand-atmosphere img{position:absolute;width:min(68vw,950px);max-width:none;right:-18%;top:2%;opacity:.32;transform:translate3d(var(--brand-x,0px),var(--brand-y,0px),0) rotate(calc(15deg + var(--brand-angle,0deg)));transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform}
.brand-atmosphere img+img{width:min(33vw,450px);left:-14%;top:38%;opacity:.18;transform:translate3d(calc(var(--brand-x,0px) * -.6),calc(var(--brand-y,0px) * -.6),0) rotate(-55deg)}
.brand-reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:1001;pointer-events:none;transform-origin:0 50%;background:linear-gradient(90deg,#d6005a,#cf7ade,#83ace7);transform:scaleX(var(--brand-progress,0))}
.story-page [data-brand-tilt]{position:relative;transform-style:preserve-3d}
.story-page [data-brand-tilt]::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:radial-gradient(circle at var(--brand-spot-x,50%) var(--brand-spot-y,50%),rgba(255,255,255,.2),transparent 60%);opacity:0;pointer-events:none;transition:opacity .2s}
.story-page [data-brand-tilt]:is(:hover,:focus-visible)::before{opacity:1}
@media(min-width:1081px){.story-page .story-hero-grid{align-items:center}.story-page .story-side-note{align-self:center}.story-page .story-hero-note{align-self:center}}
@media(max-width:1080px){.story-page .story-hero-grid{grid-template-columns:1fr}.story-page .story-side-note,.story-page .story-hero-note{display:none}.story-page .story-work-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.story-page .story-work-card:nth-child(n){min-height:250px}.story-page .story-hero h1{font-size:clamp(56px,10vw,102px)}}
@media(max-width:720px){
 .story-page .story-hero{padding-top:calc(var(--nav-h) + 55px);padding-bottom:50px}
 .story-page .story-hero h1{font-size:clamp(48px,11vw,78px);letter-spacing:-.04em}
 .story-page .story-hero-grid{gap:0}.story-page .story-hero-badge{font-size:11px}
 .story-page .story-work-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;margin-bottom:0;gap:14px}
 .story-page .story-work-card:nth-child(n){min-height:220px}
 .story-page .story-intro{padding-top:90px!important}
 .story-page .h-display{font-size:clamp(42px,10vw,68px)}
 .story-page .h-section{font-size:clamp(34px,8.3vw,52px)}
 .story-page .story-service-row{grid-template-columns:30px 1fr;padding:24px 16px;gap:18px}
 .story-page .story-service-row li{font-size:12px}
 .story-page .story-project-featured{min-height:490px}
 .story-page .story-project-featured div{inset:auto 24px 28px}
 .story-page .story-project-mini{min-height:240px}
 .story-page .story-cta{border-top-right-radius:60px}
 .story-page .story-prose p{padding-left:18px}
 .brand-atmosphere img{width:110vw;right:-52%;opacity:.2}.brand-atmosphere img+img{display:none}
 .story-page .nav.story-nav .nav-logo img{width:142px}
}
@media(prefers-reduced-motion:reduce){
 .story-page *, .story-page *::before,.story-page *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .story-page .reveal{opacity:1!important;filter:none!important;transform:none!important}
 .brand-atmosphere img{will-change:auto;transform:none!important}
 .story-page :is(.story-work-card,.story-project-featured,.story-project-mini,.team-legacy-card):hover{translate:none}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.story-page [data-brand-tilt]{rotate:var(--brand-rotate,0deg);transition:rotate .3s,translate .3s,box-shadow .3s}}
@media(scripting:none){.story-page .reveal{opacity:1!important;filter:none!important;transform:none!important}}