@font-face{font-family:Finlandica;src:url('assets/Finlandica-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Finlandica;src:url('assets/Finlandica-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#eeeee7;--ink:#202521;--blue:#3a4cf5;--muted:#777c73;--line:#20252126}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:auto}
body{margin:0;color:var(--ink);font:400 16px/1.3 Finlandica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:7px}
.hero{height:1770svh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;background:var(--paper);color:var(--ink)}
.stage:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 56%,#202744 0,#151923 46%,#101218 75%);opacity:var(--night,0)}
.masthead{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 3.3%;z-index:20;color:var(--ink);pointer-events:none}
.masthead>a,.masthead>nav{pointer-events:auto}
.wordmark{font-size:31px;line-height:1;font-weight:700;letter-spacing:-.065em;text-decoration:none;color:var(--ink)}
.wordmark span{display:inline-block;vertical-align:top;font-size:11px;letter-spacing:0;margin:2px 0 0 4px}
.descriptor{display:none}
.header-contacts{display:flex;align-items:center;gap:20px}
.header-contacts button,.header-contacts a{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:8px 0;border:0;background:none;font-size:13px;line-height:1;letter-spacing:-.01em;color:inherit;white-space:nowrap;text-decoration:none}
.header-contacts .header-call{padding:10px 15px;border:1px solid currentColor;border-radius:999px}
.header-contacts button:disabled{opacity:1;cursor:default}
.site-footer{position:relative;padding:20px 3.3%;background:#101218;color:#aeb2bf;border-top:1px solid #ffffff12;font-size:13px;line-height:1.4}
.site-footer a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;padding:5px 0}
.site-footer a:hover{color:#f3f3ed}
@media(max-width:700px){.site-footer{padding:18px 22px}}
.header-call[aria-busy="true"]{cursor:progress}
.booking-status{position:fixed;top:70px;right:3.3%;z-index:100;margin:0;max-width:calc(100vw - 44px);padding:14px 18px;border-radius:10px;background:#101218;color:#f3f3ed;font-size:14px;box-shadow:0 10px 35px #0002}
.booking-status[hidden]{display:none}
.booking-status a{color:inherit;text-underline-offset:3px}
.calendly-overlay .calendly-popup{animation:booking-in .3s cubic-bezier(.22,1,.36,1)}
@keyframes booking-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.calendly-overlay .calendly-popup{animation:none}}
.stage[data-work-active="true"] .masthead{color:#f3f3ed}
.hero-copy{position:absolute;top:16%;left:50%;width:94%;text-align:center;z-index:4;transform:translateX(-50%);transform-origin:50% 0;will-change:transform}
.opening-statement{font-size:clamp(66px,9.6vw,150px);line-height:.86;letter-spacing:-.055em;font-weight:700;margin:0;will-change:opacity,transform}
.opening-statement span,.opening-statement em{display:block}
.opening-statement em{font-style:normal;color:var(--blue)}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.armor-title{font-size:clamp(66px,9.6vw,150px);line-height:.86;letter-spacing:-.055em;font-weight:700;margin:0;position:absolute;top:0;left:0;width:100%;opacity:0;will-change:opacity,transform}
.armor-title span,.armor-title em{display:block}
.armor-title em{font-style:normal;color:var(--blue)}
.armor-title.system-statement{font-size:clamp(52px,7.6vw,120px);line-height:1;letter-spacing:-.045em;text-wrap:balance;padding-inline:2%}
.armor-title.system-statement em{display:inline;font-style:normal;color:var(--blue)}
.armor-title.system-statement .system-tagline{margin-top:16px;font-size:clamp(28px,3.8vw,56px);font-weight:400;line-height:1.15;letter-spacing:-.02em}
.scene{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .7s ease}
.scene.ready{opacity:1}
.scene canvas{display:block;width:100%;height:100%}
.scene-fallback{position:absolute;inset:55% 10% 20%;display:grid;place-items:center;z-index:1}
.scene.ready+.scene-fallback{display:none}
.fallback-rank{display:flex;gap:12px;perspective:600px}
.fallback-rank span{display:grid;place-items:center;width:72px;height:88px;border-radius:20px 20px 36px 36px;color:var(--blue);font-size:46px;background:linear-gradient(140deg,#fff,#b9c0c3);box-shadow:7px 10px 0 #7d878a,14px 21px 28px #30372726;transform:rotateY(-18deg)}
.scene-counter{position:absolute;bottom:22%;right:3.3%;display:flex;align-items:baseline;gap:5px;z-index:3}
.counter-number{font-size:55px;line-height:1;letter-spacing:-.04em}.counter-total{font-size:12px;color:var(--muted)}
.scene-footer{position:absolute;bottom:0;left:3.3%;right:3.3%;height:78px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:10;background:var(--paper)}
.assemble{display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;font-size:12px}
.scroll-icon{width:29px;height:36px;border:1px solid #20252144;border-radius:20px;display:grid;place-items:center;font-size:18px}
.chapter{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.chapter-dot{width:4px;height:4px;border-radius:5px;background:#bfc3b7;transition:width .4s,background .4s}.chapter-dot.active{width:18px;background:var(--blue)}
.phase{margin-left:10px;min-width:133px}
.progress{position:absolute;bottom:0;left:0;width:100%;height:2px;z-index:11}.progress span{display:block;background:var(--blue);height:100%;transform-origin:left;transform:scaleX(0)}
.no-script{position:absolute;bottom:15%;width:90%;left:5%;text-align:center;font-size:14px}
@media(min-width:1600px){.hero-copy{top:17%}}
@media(max-width:700px){
  .masthead{padding:14px 22px}.wordmark{font-size:28px}.descriptor{display:none}
  .header-contacts{gap:14px}.header-contacts button,.header-contacts a{font-size:12px}.header-contacts .header-call{padding:10px 12px}
  .hero-copy{top:18%;width:96%}
  .opening-statement{font-size:clamp(45px,11.4vw,78px);line-height:.93;letter-spacing:-.055em}
  .armor-title{font-size:clamp(45px,11.4vw,78px);line-height:.93;letter-spacing:-.055em}
  .armor-title.system-statement{font-size:clamp(38px,10vw,68px);line-height:1;letter-spacing:-.045em}
  .armor-title.system-statement .system-tagline{margin-top:12px;font-size:clamp(24px,5.6vw,38px)}
  .scene-counter{right:22px;bottom:18.7%}.counter-number{font-size:34px}.counter-total{font-size:9px}
  .scene-footer{left:22px;right:22px;height:72px;gap:8px}.assemble{font-size:11px;gap:8px}.scroll-icon{width:25px;height:32px}
  .chapter{font-size:10px;gap:4px}.phase{display:none}.chapter-dot.active{width:13px}
  .fallback-rank{gap:9px}.fallback-rank span{width:45px;height:60px;font-size:28px;box-shadow:4px 7px 0 #7d878a,8px 15px 20px #30372726}
}
@media(max-height:600px) and (min-width:701px){.masthead{padding:14px 3.3%}.wordmark{font-size:30px}.hero-copy{top:18%}.opening-statement{font-size:8svh}.armor-title{font-size:17vh}.scene-footer{height:55px}.scene-counter{bottom:17%}}
@media(max-height:600px) and (min-width:701px){.armor-title.system-statement{font-size:7svh}.armor-title.system-statement .system-tagline{font-size:4svh;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.assemble{visibility:hidden}.scene{transition:none}}

/* The film is the case: no badges, client logo treatment, or decorative cards. */
.recent-work{position:absolute;inset:0;z-index:7;background:#101218;color:#f3f3ed;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
.work-pages{position:absolute;inset:0;will-change:transform}
.work-page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:100px 3.3% 30px;background:#101218;transform-origin:50% 40%;will-change:transform}
.work-page::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--page-shade,0);pointer-events:none}
.recent-work[data-case-motion="mobile"] .work-page{box-shadow:none;border-top:0;transform-origin:center}
.work-page:nth-child(n+2){background:#15181f;transform:translateY(100%);box-shadow:0 -24px 70px #0006;border-top:1px solid #ffffff16}
.work-page:nth-child(3){background:#101218}
.work-content{width:min(86vw,1100px,calc((100svh - 320px)*16/9));will-change:transform}
.work-content h2{margin:0 0 26px;font-size:clamp(48px,6vw,96px);line-height:.94;font-weight:700;letter-spacing:-.055em}
.work-film{margin:0}
.team-page .team-content{width:min(88vw,1100px)}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,30px)}
.team-person{position:relative;container-type:inline-size;min-width:0}
.team-person img{display:block;width:100%;height:auto;background:#292d35}
.team-ru-name{position:absolute;left:0;bottom:0;width:59%;height:25.2%;display:flex;align-items:center;padding:0 5%;background:#3a4cf5;color:#eeeee7;font-size:10cqw;font-weight:700;line-height:.9;letter-spacing:-.055em;text-transform:uppercase}
.team-contact{position:absolute;left:60%;right:0;bottom:0;height:25.2%;border-radius:2px}
.team-contact:hover{background:#ffffff18}
.team-contact:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media(max-width:700px){.team-page .team-content{width:100%}.team-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(68vw,260px);grid-template-columns:none;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:12px}.team-person{scroll-snap-align:start}}
.work-video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#080a0f}
.work-player{display:block;width:100%;height:100%}
.work-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080a0f;z-index:2;pointer-events:none;mask-image:radial-gradient(circle at center,transparent 0 34px,#000 35px);-webkit-mask-image:radial-gradient(circle at center,transparent 0 34px,#000 35px)}
.work-cover[hidden]{display:none}
.work-cover--button{mask-image:none;-webkit-mask-image:none}
.work-cover-trigger{position:absolute;inset:0;z-index:3;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.work-cover-trigger[hidden]{display:none}
.work-cover-trigger:disabled{cursor:wait}
.work-cover-trigger:focus-visible{outline:2px solid #8a8dff;outline-offset:-5px}
.work-player>div{width:100%!important;height:100%!important;padding-bottom:0!important}
.work-player iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0;border-radius:10px}
.work-loading,.work-error{position:absolute;inset:0;margin:0;display:grid;place-content:center;text-align:center;font-size:16px;color:#aeb2bf;pointer-events:none}
.work-loading[hidden],.work-error[hidden]{display:none}
.work-error{background:#101218e8;padding:24px;pointer-events:auto;z-index:3}
.work-error a{color:#f3f3ed;text-underline-offset:4px;margin-top:10px}
.work-replay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ffffff60;border-radius:999px;padding:14px 22px;background:#101218e8;color:#f3f3ed;font:inherit;font-size:16px;cursor:pointer}
.work-replay[hidden]{display:none}
.work-replay:focus-visible{outline:2px solid #8a8dff;outline-offset:5px}
.work-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:18px;font-size:clamp(18px,1.8vw,24px);line-height:1.25;font-weight:400;letter-spacing:-.02em}
.work-caption p{margin:0;font-weight:400}
.work-caption span,.work-caption .work-role{font-size:16px;font-weight:400;color:#aeb2bf;letter-spacing:0}
.work-caption span{display:block;margin-top:6px}
.work-film[hidden]{display:none}
.work-caption .work-role{text-align:right;max-width:45%}
.work-anchor{position:absolute;left:0;width:1px;height:1px}
.stage[data-work-active="true"] .wordmark{color:#f3f3ed}
.stage[data-work-active="true"] .descriptor{visibility:hidden}
.stage[data-work-active="true"] .scene-footer,.stage[data-work-active="true"] .reel-progress{visibility:hidden;pointer-events:none}
@media(max-width:700px){.work-page{padding:96px 22px 30px}.work-content{width:100%}.work-content h2{font-size:clamp(44px,11vw,70px);margin-bottom:24px}.work-caption{font-size:18px;gap:14px;margin-top:16px}.work-caption span,.work-caption .work-role{font-size:14px}}
@media(max-height:500px) and (min-width:701px){.work-page{padding:65px 3.3% 18px}.work-content{width:min(80vw,calc((100svh - 210px)*16/9))}.work-content h2{font-size:36px;margin-bottom:14px}.work-caption{margin-top:12px;font-size:16px}.work-caption span,.work-caption .work-role{font-size:12px}}

/* One pinned stage carries the story; only content and palette evolve. */
.showreel-anchor{position:absolute;top:300svh;left:0;width:1px;height:1px;scroll-margin-top:0}
.reel-heading{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:min(94%,1100px);text-align:center;z-index:4;opacity:0;pointer-events:none}
.reel-eyebrow{margin:0 0 12px;color:#aeb7ff;font-size:11px;letter-spacing:.17em}
.reel-heading h2{font-size:clamp(36px,4.5vw,62px);line-height:.88;letter-spacing:-.055em;margin:0;font-weight:700}
.reel-heading h2 em{font-style:normal;color:var(--blue)}
.video-frame{position:absolute;z-index:3;left:50%;top:55%;transform:translate(-50%,-50%);width:min(88vw,1200px,calc((100svh - 260px)*16/9));aspect-ratio:16/9;background:#080a0f;border:1px solid #9ca8ffbd;box-shadow:0 0 0 8px #8b98ff12,0 30px 100px #0008, inset 0 0 70px #26366c1a;opacity:0;transition:opacity .45s ease;pointer-events:none}
.reel-progress{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:11;background:#ffffff0a}.reel-progress span{display:block;height:100%;width:100%;background:#7688ff;transform:scaleX(0);transform-origin:left}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame{transition:opacity .2s ease}
@media(max-width:700px){
  .hero{height:1770svh}
  .masthead{padding:14px 22px}
  .showreel-anchor{top:300svh}
  .reel-heading{top:14%;width:96%}.reel-eyebrow{font-size:9px;margin-bottom:12px}.reel-heading h2{font-size:clamp(37px,10.2vw,56px)}.reel-heading h2 em{display:block}
  .video-frame{width:calc(100vw - 32px);max-width:calc((100svh - 180px)*16/9);top:52%;box-shadow:0 0 0 6px #8b98ff0c,0 20px 70px #0008,inset 0 0 48px #26366c1a}
}

/* A single brand context unfolds into three real viewport proportions. */
.context-anchor{position:absolute;top:770svh;left:0;width:1px;height:1px}
.ecosystem-anchor{position:absolute;top:1040svh;left:0;width:1px;height:1px}
.brand-context{position:absolute;inset:0;z-index:6;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;background:rgb(var(--context-paper,233 234 239));color:#171d1f}
.context-copy{position:absolute;top:15%;left:7%;width:86%;z-index:3;text-align:center;pointer-events:none;will-change:transform}
.context-copy h2{margin:0;font-size:clamp(50px,min(22vw,23svh),260px);font-weight:700;line-height:.82;letter-spacing:-.065em}
.context-copy h2 span,.context-copy h2 em{display:block}
.context-copy h2 .type-bridge{font-size:.40em;line-height:1.2;letter-spacing:-.035em;padding:.12em 0}
.context-copy em{font-style:normal;color:#3a4cf5}
.context-intro-copy,.context-scale-copy{will-change:opacity,transform}
.context-scale-copy{position:absolute;inset:0;opacity:0}
.context-scale-title{position:static;opacity:1}
.context-growth-copy{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.context-copy p{margin:28px auto 0;max-width:650px;font-size:18px;line-height:1.4;letter-spacing:-.015em;text-wrap:balance;color:#495061}
.context-growth-copy h2{font-size:clamp(48px,min(20vw,20svh),220px)}
.context-canvas,.context-front-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.context-front-canvas{z-index:4}
.context-soil{position:absolute;left:50%;top:72%;width:108%;max-width:1700px;height:auto;transform:translateX(-50%);z-index:1;pointer-events:none;will-change:transform}
.context-outputs{display:none}
.context-output{position:absolute;left:0;top:0;border:1px solid #20252155;border-radius:6px;opacity:0;will-change:transform,opacity;box-shadow:0 24px 55px #26316612}
.output-label{position:absolute;top:calc(100% + 15px);left:0;right:0;text-align:center;font-size:14px;letter-spacing:.035em}
.output-chrome{position:absolute;top:0;left:0;right:0;height:30px;background:#e9eaefe8;border-bottom:1px solid #20252122;display:flex;align-items:center;gap:4px;padding:0 10px;border-radius:5px 5px 0 0}
.output-chrome i{display:block;width:4px;height:4px;border-radius:50%;background:#171d1f60}
.web-address{height:8px;border:1px solid #20252122;border-radius:3px;width:48%;position:absolute;left:26%}
.social-avatar{height:12px;width:12px;border-radius:50%;background:#3a4cf5}
.social-name{height:3px;width:36%;background:#171d1f70;margin-left:3px}
.social-menu{margin-left:auto;line-height:1;font-size:14px}
.video-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#e9eaefe6;color:#171d1f;box-shadow:0 4px 20px #0001}
.video-play svg{width:21px;height:21px}
.video-timeline{position:absolute;left:7%;right:7%;bottom:9%;height:2px;background:#e9eaef66}
.video-timeline span{display:block;width:35%;height:100%;background:#e9eaef}
.context-note,.context-promise{position:absolute;bottom:3.5%;z-index:5;margin:0;font-size:16px;letter-spacing:-.015em;color:#e6eaff}
.context-note{left:6.6%}.context-promise{right:6.6%}
.context-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-context[data-fallback="true"] .context-output{opacity:1!important;background:linear-gradient(120deg,#14206c,#3a4cf5 40%,#a2aefc 55%,#283896 75%,#11193f)}
.brand-context[data-fallback="true"] .context-canvas,.brand-context[data-fallback="true"] .context-front-canvas{display:none}
.brand-context[data-fallback="true"] .context-social{left:13%;top:49%;width:17%;height:31%}
.brand-context[data-fallback="true"] .context-web{left:35%;top:53%;width:30%;height:27%}
.brand-context[data-fallback="true"] .context-video{left:70%;top:57%;width:24%;height:22%}
.stage[data-context-active="true"] .services-back,.stage[data-context-active="true"] .scene-footer{visibility:hidden;pointer-events:none}
@media(max-width:700px){
  .context-copy{top:20%;left:18px;width:calc(100% - 36px)}
  .context-copy h2{font-size:clamp(48px,min(23vw,18svh),145px);line-height:.84;letter-spacing:-.065em}
  .context-growth-copy h2{font-size:clamp(46px,min(22vw,18svh),135px)}
  .context-copy p{font-size:16px;line-height:1.35;max-width:360px;margin-top:24px}
  .context-soil{top:75%;width:200%;max-width:none}
  .context-note,.context-promise{font-size:14px;bottom:4%}
  .context-note{left:22px}.context-promise{right:22px}
  .output-chrome{height:20px;padding:0 6px;gap:3px}
  .output-chrome i{height:3px;width:3px}.social-avatar{height:8px;width:8px}
  .output-label{top:calc(100% + 9px);font-size:14px}
  .video-play{height:30px;width:30px}.video-play svg{width:15px;height:15px}
  .brand-context[data-fallback="true"] .context-social{left:8%;top:45%;width:29%;height:24%}
  .brand-context[data-fallback="true"] .context-web{left:45%;top:45%;width:46%;height:17%}
  .brand-context[data-fallback="true"] .context-video{left:23%;top:73%;width:60%;height:16%}
}
@media(max-height:600px) and (min-width:701px){
  .context-copy{top:18%}.context-copy h2{font-size:19svh}
  .context-growth-copy h2{font-size:17svh}
  .context-copy p{font-size:16px;line-height:1.3;margin-top:12px}
  .context-note,.context-promise{bottom:3%;font-size:14px}
  .output-chrome{height:22px}.output-label{top:calc(100% + 8px)}
}
@media(max-height:600px) and (min-width:701px){.masthead{padding:14px 3.3%}.reel-heading{top:14%}.reel-heading h2{font-size:10vh}.video-frame{top:59%;width:min(88vw,1200px,calc((100svh - 180px)*16/9))}}
@media(prefers-reduced-motion:reduce){.video-frame{transition:none}}

/* Services stay fixed in the same scene. Only the letter colours travel. */
.stage:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:#3445d9;opacity:var(--services-color,0)}
.services-anchor{position:absolute;top:680svh;left:0;width:1px;height:1px}
.services{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:100px 6.6% 88px;opacity:0;visibility:hidden;color:#f3f3ed;pointer-events:none}
.services h2{font-size:12px;line-height:1.4;letter-spacing:.16em;font-weight:400;margin:0 0 clamp(20px,4svh,44px);padding-left:calc(2rem + 20px)}
.services-list{padding:0;margin:0;list-style:none;display:grid;gap:clamp(10px,1.7svh,22px)}
.services-list li{display:grid;grid-template-columns:2rem 1fr;gap:20px;align-items:baseline}
.service-number{font-size:12px;font-weight:400;letter-spacing:.08em;color:#c5ccff}
.service-name{font-size:clamp(2rem,min(6.3vw,10.2svh),7.5rem);font-weight:700;line-height:1.02;letter-spacing:-.045em;text-transform:uppercase;color:#182565}
.service-word{display:inline-block;white-space:nowrap}
.service-letter{color:rgb(var(--letter-color,24 37 101))}
.services-back{position:absolute;bottom:30px;left:6.6%;color:#f3f3ed;text-decoration:none;font-size:14px;line-height:1.4;padding:8px 0;pointer-events:auto}
.services-back:hover{text-decoration:underline;text-underline-offset:5px}
.services-back:focus-visible{outline-color:#f3f3ed}
.stage[data-services-active="true"] .scene-footer{visibility:hidden;pointer-events:none}
@media(max-width:700px){
  .services{padding:105px 22px 82px}
  .services h2{padding-left:34px;font-size:11px;margin-bottom:26px}
  .services-list{gap:20px}
  .services-list li{grid-template-columns:22px 1fr;gap:12px}
  .service-number{font-size:11px}
  .service-name{font-size:clamp(1.8rem,min(8.9vw,7.6svh),3.6rem);line-height:1.06;letter-spacing:-.04em}
  .services-back{left:22px;bottom:22px}
}
@media(max-height:600px){
  .services{padding-top:70px;padding-bottom:54px}
  .services h2{margin-bottom:14px}
  .services-list{gap:8px}
  .service-name{font-size:clamp(1.3rem,min(5.2vw,8svh),4rem)}
  .services-back{bottom:10px}
}

/* Local static hero concept */
.hero-copy{top:50%;left:7%;width:60%;max-width:920px;text-align:left;transform:none;translate:0 -50%;z-index:5}
.opening-statement{font-size:clamp(64px,8.5vw,138px);line-height:.88;letter-spacing:-.06em}
.armor-title.system-statement{position:relative;top:auto;left:auto;text-align:left;width:100%;margin-top:clamp(28px,4vw,55px);padding:0;font-size:clamp(27px,3vw,45px);line-height:1.08;letter-spacing:-.035em;opacity:1}
.armor-title.system-statement .system-tagline{margin-top:9px;font-size:clamp(20px,1.8vw,27px);line-height:1.2;letter-spacing:-.015em}
.hero-art{position:absolute;right:3%;top:50%;translate:0 -48%;width:min(39vw,570px);z-index:3;pointer-events:none}
.hero-art svg{display:block;width:100%;height:auto;overflow:visible}
.shield-back{fill:#dcdff5;stroke:#3a4cf5;stroke-width:3}.shield-front{fill:#3a4cf5;stroke:#3a4cf5;stroke-width:3}.shield-inner{stroke:#b9c0ff;stroke-width:2}.art-cross{stroke:#eeeee7;stroke-width:10;stroke-linecap:round}.art-trail{stroke:#3a4cf5;stroke-opacity:.35;stroke-width:1.5}.art-dot{fill:#3a4cf5}
.scene-counter,.chapter{display:none}.scene-footer .assemble .action-text{font-size:14px}.hero-copy,.hero-art{transition:opacity .15s linear}
@media(max-width:700px){.hero-copy{top:24%;left:7%;width:86%;translate:0;max-width:none}.opening-statement{font-size:clamp(55px,12vw,83px)}.armor-title.system-statement{font-size:clamp(27px,6.6vw,39px);margin-top:24px}.armor-title.system-statement .system-tagline{font-size:clamp(17px,4vw,22px);margin-top:8px}.hero-art{width:min(48vw,220px);right:5%;top:67%;translate:0 -40%}.scene-footer{bottom:14px}}
@media(max-height:680px) and (min-width:701px){.hero-copy{top:50%}.opening-statement{font-size:clamp(50px,13vh,100px)}.armor-title.system-statement{margin-top:18px;font-size:clamp(25px,5vh,35px)}.hero-art{width:min(33vw,62vh)}}
@media(max-height:680px) and (max-width:700px){.hero-copy{top:20%}.opening-statement{font-size:clamp(48px,10vw,65px)}.hero-art{top:66%;width:min(38vw,160px)}}

/* Supplied hero artwork and clearer reel prompt. */
.hero-art{width:min(48vw,660px);right:0;top:50%;translate:0 -50%;overflow:hidden;mix-blend-mode:multiply}.hero-art img{display:block;width:145%;max-width:none;transform:translateX(-30%);height:auto}
.scene-footer .assemble{gap:14px}.scene-footer .assemble .action-text{font-size:clamp(16px,1.3vw,19px);font-weight:700;letter-spacing:-.01em}.scene-footer .assemble .scroll-icon{width:48px;height:48px;font-size:23px;border:1.5px solid currentColor}
@media(max-width:700px){.hero-art{width:min(70vw,350px);right:1%;top:66%;translate:0 -40%}.scene-footer .assemble .action-text{font-size:16px}.scene-footer .assemble .scroll-icon{width:42px;height:42px}}
@media(max-height:680px) and (max-width:700px){.hero-art{width:min(46vw,230px);top:67%}}

.hero-art{width:min(43vw,610px);right:1%;mix-blend-mode:normal;mask-image:radial-gradient(ellipse 76% 75% at 53% 50%,#000 68%,transparent 99%)}
@media(max-width:700px){.hero-art{width:min(70vw,350px);right:1%}}
@media(max-height:680px) and (max-width:700px){.hero-art{width:min(46vw,230px)}}

.hero-art{mix-blend-mode:darken}

/* Calm canvas and a consistent left edge for the hero type. */
:root{--paper:#dadcd7}html{background:#dadcd7}.hero-copy{text-align:left}.opening-statement,.armor-title.system-statement{margin-left:0;padding-left:0;text-align:left}.opening-statement{line-height:.92;letter-spacing:-.055em}.armor-title.system-statement{margin-top:clamp(25px,2.9vw,42px);letter-spacing:-.025em}.armor-title.system-statement .system-tagline{margin-top:8px;letter-spacing:-.01em}
@media(max-width:700px){.armor-title.system-statement{margin-top:22px}.opening-statement{line-height:.93}}

.hero-intro{display:contents}
@media(max-width:700px){
 .hero-intro{position:absolute;inset:76px 0 92px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(8px,2vh,18px);pointer-events:none}
 .hero-copy{position:relative;top:auto;left:auto;translate:none;transform:none;width:86%;margin-left:7%;flex:none}
 .opening-statement{font-size:clamp(40px,min(12vw,8.5svh),83px)}
 .armor-title.system-statement{font-size:clamp(24px,min(6.6vw,4.7svh),39px);margin-top:clamp(12px,2.5svh,22px)}
 .armor-title.system-statement .system-tagline{font-size:clamp(16px,min(4vw,3svh),22px)}
 .hero-art{position:relative;top:auto;right:auto;translate:none;align-self:flex-end;margin-right:3%;width:min(70vw,350px,calc((100svh - 390px) * .95));min-width:120px;flex:none}
 .hero-art img{width:100%;transform:none}
}

/* Services: a clear introduction alongside the complete offer. */
.services{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;align-items:center;column-gap:7%;padding:100px 6.6% 88px}
.services-intro{max-width:600px}.services h2{padding:0;margin:0 0 24px;font-size:12px;letter-spacing:.14em}
.services-headline{margin:0;font-size:clamp(36px,4.7vw,72px);line-height:.98;letter-spacing:-.05em;font-weight:700}
.services-description{max-width:510px;margin:24px 0 0;font-size:clamp(16px,1.45vw,21px);line-height:1.35;color:#e2e5ff}
.services-list{gap:clamp(15px,2.3vh,25px)}.services-list li{grid-template-columns:28px minmax(0,1fr);gap:15px}.service-name{font-size:clamp(25px,2.8vw,43px);line-height:1.06;letter-spacing:-.035em}
@media(max-width:700px){.services{display:flex;align-items:stretch;justify-content:center;gap:0;padding:78px 24px 58px}.services h2{padding:0;margin:0 0 12px;font-size:10px}.services-headline{font-size:clamp(29px,min(8vw,5.5svh),42px)}.services-description{font-size:clamp(14px,3.7vw,16px);line-height:1.25;margin:12px 0 0;max-width:36em}.services-list{gap:clamp(8px,1.5svh,14px);margin-top:clamp(20px,3svh,28px)}.services-list li{grid-template-columns:22px minmax(0,1fr);gap:12px}.service-name{font-size:clamp(21px,min(6vw,4.5svh),30px)}.services-back{bottom:12px;font-size:12px}}
@media(max-width:700px) and (max-height:670px){.services{padding-top:68px;padding-bottom:48px}.services-headline{font-size:clamp(26px,6vw,34px)}.services-description{font-size:13px;margin-top:8px}.services-list{gap:6px;margin-top:13px}.service-name{font-size:clamp(19px,4.8vw,25px)}}

.services h2.services-headline{margin:0;padding:0;font-size:clamp(36px,4.7vw,72px);line-height:.98;letter-spacing:-.05em;font-weight:700}
@media(max-width:700px){.services h2.services-headline{font-size:clamp(29px,min(8vw,5.5svh),42px)}}
@media(max-width:700px) and (max-height:670px){.services h2.services-headline{font-size:clamp(26px,6vw,34px)}}

/* Keep the context story readable at every viewport size. */
.context-copy #context-title,.context-copy #context-scale-title,.context-copy #ecosystem-title{font-size:clamp(42px,min(7.6vw,11svh),112px);line-height:.98;letter-spacing:-.045em}
.context-copy #context-title em,.context-copy #context-scale-title em,.context-copy #ecosystem-title em{font-size:1.15em}
.context-growth-copy p{max-width:570px}
@media(max-width:700px){.context-copy #context-title,.context-copy #context-scale-title,.context-copy #ecosystem-title{font-size:clamp(28px,min(7vw,7svh),48px);line-height:1.02}.context-growth-copy p{font-size:15px;margin-top:18px;max-width:300px}}

.context-copy{z-index:5}.context-copy h2,.context-growth-copy p{text-shadow:0 0 8px #e9eaf3,0 0 16px #e9eaf3,0 0 24px #e9eaf3}

/* Soft clearing behind the words keeps the flowers visible and the copy legible. */
.context-copy h2,.context-growth-copy p{position:relative;isolation:isolate}
.context-copy h2::before,.context-growth-copy p::before{content:"";position:absolute;z-index:-1;inset:-12px -16px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(233,234,242,.98) 0%,rgba(233,234,242,.94) 55%,rgba(233,234,242,0) 100%)}
.context-growth-copy p::before{inset:-12px -20px;background:radial-gradient(ellipse at center,rgba(233,234,242,.98) 0%,rgba(233,234,242,.91) 55%,rgba(233,234,242,0) 100%)}

/* Give the words breathing room while retaining the growing plants. */
.context-copy h2::before,.context-growth-copy p::before{content:none}.context-copy h2,.context-growth-copy p{text-shadow:none}.context-canvas,.context-front-canvas{transform:scaleX(1.28);transform-origin:50% 100%}
@media(max-width:700px){.context-canvas,.context-front-canvas{transform:scaleX(1.8)}}
 .context-canvas,.context-front-canvas{transform:none;mask-image:linear-gradient(to right,#000 0%,#000 18%,transparent 37%,transparent 63%,#000 82%,#000 100%)}
 .context-canvas,.context-front-canvas{mask-image:radial-gradient(ellipse 48% 23% at 50% 31%,transparent 45%,#000 100%)}

/* The copy occupies the upper part; the garden grows below it. */
.context-copy h2::before,.context-growth-copy p::before{content:none}.context-copy h2,.context-growth-copy p{text-shadow:none}.context-canvas,.context-front-canvas{transform:none;mask-image:linear-gradient(to bottom,transparent 0%,transparent 38%,#000 48%,#000 100%)}
.context-copy{top:15%}
@media(max-width:700px){.context-copy{top:16%}.context-canvas,.context-front-canvas{transform:none;mask-image:linear-gradient(to bottom,transparent 0%,transparent 36%,#000 46%,#000 100%)}}
.context-canvas,.context-front-canvas{transform:translateY(13svh);mask-image:linear-gradient(to bottom,transparent 0%,transparent 37%,#000 48%,#000 100%)}@media(max-width:700px){.context-canvas,.context-front-canvas{transform:translateY(13svh)}}

/* Preserve the full growth animation and fit it above the soil. */
.context-canvas,.context-front-canvas{mask-image:none;transform:scaleY(.55);transform-origin:center bottom}
@media(max-width:700px){.context-canvas,.context-front-canvas{transform:scaleY(.55)}}
.context-canvas,.context-front-canvas{transform:scale(.65);transform-origin:50% 100%}@media(max-width:700px){.context-canvas,.context-front-canvas{transform:scale(.65)}}

/* Decorative hero copy must never intercept controls in later chapters. */
.hero-copy,.hero-copy *{pointer-events:none}

/* Reserve space for the reel prompt so the complete shield stays visible. */
@media(min-width:701px){.hero-art{top:78px;translate:none;width:min(43vw,610px,calc((100svh - 180px)/1.45));overflow:visible;mask-image:none}}

/* Optical alignment and a closer English hero composition. */
@media(min-width:1100px){.hero-art{right:5%}}
.armor-title.system-statement{padding-left:5px}