/* Approved ORVYN cinematic hero. Deliberately scoped to this section. */
/* The final viewport is a handoff: the studio covers the still-pinned film. */
.hero-story.story-enabled:not(.story-static){height:640svh}
.hero-story.story-enabled:not(.story-static)+.approach{margin-top:-100svh;top:0;min-height:100svh;box-shadow:0 -24px 70px #10182720}
.story-exit-shade{position:absolute;inset:0;z-index:4;background:#080d19;opacity:var(--story-exit,0);pointer-events:none}
/* Broad feathered light brightens the artwork, below copy and exit shading. */
.story-flashlight{position:absolute;left:0;top:0;z-index:1;width:clamp(580px,66vw,1100px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle closest-side at center,rgba(245,249,255,.55) 0%,rgba(225,237,255,.38) 14%,rgba(198,218,255,.20) 32%,rgba(167,198,255,.08) 52%,rgba(146,184,255,.025) 72%,rgba(146,184,255,0) 100%);transition:opacity .45s ease;will-change:transform}
.story-light-active .story-flashlight{opacity:.85}
.story-static .story-flashlight,.motion-off .story-flashlight{display:none}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.story-flashlight{display:none}}
.story-enabled .story-visual,.story-enabled .story-labels{translate:var(--depth-image-x,0px) var(--depth-image-y,0px)}
.story-chapter>h1,.story-chapter>h2,.story-chapter>p{translate:var(--depth-copy-x,0px) var(--depth-copy-y,0px)}
.story-static .story-exit-shade{display:none}
.hero-story.story-static+.approach{margin-top:0}
@media(max-width:760px){.hero-story.story-enabled:not(.story-static){height:550svh}}
.orvyn-story-page .site-header{color:#151821}
.orvyn-story-page .site-header.scrolled{background:rgba(243,244,247,.94);border-bottom-color:#d9dce5}
.orvyn-story-page .brand svg{color:#315bff}
.in-hero-story .section-nav{opacity:0;pointer-events:none}
.hero-story{height:540svh;position:relative;background:#f3f4f7;color:#151821;--story-progress:0}
.story-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:clip;background:linear-gradient(180deg,#f8faff 0%,#f5f7fc 65%,#edf1f8 100%);isolation:isolate}
.story-visual{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;will-change:transform;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 91%,transparent);mask-composite:intersect}
.story-still,.story-film{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;object-position:center;border:0}
.story-still-creation,.story-still-system,.story-film{opacity:0}
.film-ready .story-film{opacity:1}
.story-chapter{position:absolute;z-index:2;width:max-content;max-width:90%;will-change:transform,opacity}
.story-chapter h1,.story-chapter h2{color:#151821;font-size:clamp(40px,4.25vw,72px);font-weight:500;letter-spacing:-.055em;line-height:1.04;text-wrap:balance}
.story-chapter p{font-size:clamp(15px,1.25vw,19px);line-height:1.6;margin-top:18px;color:#434855}
.story-opening{top:clamp(112px,12.5svh,170px);left:50%;translate:-50% 0;text-align:center}
.story-creation{right:5.5%;top:72%;max-width:47%;opacity:0}
.story-creation h2{font-size:clamp(36px,4.1vw,65px)}
.story-creation p{font-size:clamp(14px,1.1vw,17px)}
.story-system{bottom:8%;left:50%;translate:-50% 0;text-align:center;opacity:0}
.story-system h2{font-size:clamp(38px,3.8vw,64px)}
.story-system p{margin-top:13px}
.mobile-break{display:none}
.story-cta{display:inline-flex;align-items:center;justify-content:center;gap:36px;border:1px solid #292e3a;padding:13px 22px;min-height:50px;margin-top:25px;font-size:14px;background:rgba(243,244,247,.6);transition:background .2s,color .2s}
.story-cta svg{width:19px;height:19px;transform:rotate(45deg);transition:transform .2s}
.story-cta:hover{background:#151821;color:#fff}
.story-cta:hover svg{transform:rotate(45deg) translate(2px,-2px)}
.story-cta:focus-visible,.story-navigation button:focus-visible{outline-color:#315bff}
.story-scroll{position:absolute;bottom:35px;left:50%;translate:-50% 0;color:#151821}
.story-scroll svg{width:23px;height:23px;animation:story-cue 1.7s ease-in-out infinite}
.story-navigation{position:absolute;bottom:26px;right:5.5%;display:flex;gap:6px;z-index:3}
.story-navigation button{width:38px;height:34px;padding:12px 4px;border:0;background:transparent}
.story-navigation span{display:block;width:100%;height:2px;background:#a6adbf;transition:background .2s}
.story-navigation [aria-current] span{background:#315bff}
.story-labels{position:absolute;top:50%;left:50%;translate:-50% -50%;width:100%;height:auto;aspect-ratio:1672/941;pointer-events:none;opacity:0;font-size:13px;color:#333b4a}
.story-labels span{position:absolute;translate:-50% 0}
.label-strategy{left:50%;top:0%}.label-create{left:77%;top:12%}.label-review{left:80%;top:47%}.label-activate{left:23%;top:53%}.label-learn{left:23%;top:11%}
@keyframes story-cue{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@media(min-aspect-ratio:1672/941){.story-labels{width:auto;height:100%;max-width:100%}}
@media(max-height:760px) and (min-width:761px){.story-stage{min-height:580px}.story-opening{top:90px}.story-opening h1{font-size:clamp(35px,3.4vw,54px)}.story-opening p{margin-top:10px}.story-system{bottom:7%}.story-system h2{font-size:38px}.story-system p{font-size:15px;margin-top:7px}.story-cta{margin-top:14px;min-height:43px;padding:9px 17px}.story-creation{top:70%}.story-creation h2{font-size:40px}}
@media(max-width:760px){
 .hero-story{height:450svh}.story-stage{min-height:620px}
 .story-visual{inset:19% -7% 10%}
 .story-chapter{max-width:calc(100% - 44px)}
 .story-opening{top:112px;width:calc(100% - 44px)}
 .story-chapter h1{font-size:clamp(36px,8.8vw,54px);letter-spacing:-.045em}
 .story-opening p{font-size:14px;margin-top:15px}
 .story-creation{top:auto;bottom:13%;right:22px;max-width:calc(100% - 44px);width:fit-content}
 .story-creation h2{font-size:clamp(34px,8.5vw,46px)}
 .story-creation p{font-size:14px;max-width:30ch;margin-top:14px}
 .story-system{bottom:10%;width:calc(100% - 44px)}
 .story-system h2{font-size:clamp(34px,8.5vw,46px);letter-spacing:-.045em}
 .story-system p{font-size:14px;max-width:30ch;margin:14px auto 0}
 .mobile-break{display:block}.story-cta{gap:24px;font-size:13px;margin-top:22px;min-height:48px;padding:12px 17px}
 .story-navigation{right:22px;bottom:20px}.story-scroll{bottom:29px}
 .story-labels{display:none}
 .orvyn-story-page #main-nav.open{background:#f3f4f7;color:#151821}
}
/* Measured safe areas: type remains independent of the camera framing. */
.story-stage{min-height:0}
.story-opening{top:calc(var(--story-header,88px) + clamp(48px,6svh,80px));width:min(90%,1000px)}
.story-chapter h1,.story-chapter h2{font-size:clamp(32px,min(4.25vw,6.2svh),72px);letter-spacing:-.045em}
.story-chapter p{font-size:clamp(15px,1.15vw,19px);line-height:1.5;margin-top:14px;color:#303744}
.story-creation{top:auto;bottom:76px;right:5.5%;width:min(47%,660px);max-width:47%}
.story-creation h2{font-size:clamp(30px,min(4.1vw,5.8svh),65px)}
.story-system{bottom:76px;width:min(90%,1150px)}
.story-system h2{font-size:clamp(30px,min(3.8vw,5.7svh),64px)}
.story-labels{top:0;left:0;translate:none;aspect-ratio:auto;max-width:none}
.story-visual{inset:auto;top:0;left:0}
.story-cta{margin-top:20px;background:rgba(248,250,255,.88)}
@media(max-width:760px){
 .story-opening{top:calc(var(--story-header,76px) + 40px);width:calc(100% - 44px)}
 .story-chapter h1{font-size:clamp(32px,min(8.8vw,5.8svh),48px)}
 .story-creation{bottom:66px;right:22px;width:calc(100% - 44px);max-width:calc(100% - 44px)}
 .story-creation h2,.story-system h2{font-size:clamp(30px,min(8.5vw,5.4svh),44px)}
 .story-system{bottom:66px;width:calc(100% - 44px)}
 .story-chapter p{font-size:15px;line-height:1.5;margin-top:13px}
 .story-system p{margin-top:13px}
 .story-cta{margin-top:18px}
}
/* A readable three-panel equivalent when the visitor opts out of movement. */
.hero-story.story-static{height:auto}
.story-static .story-stage{position:relative;height:auto;min-height:0;overflow:visible}
.story-static .story-visual,.story-static .story-navigation,.story-static .story-labels,.story-static .story-scroll{display:none}
.story-static .story-chapter{position:relative;top:auto;left:auto;right:auto;bottom:auto;translate:none;transform:none!important;opacity:1!important;width:100%;max-width:none;min-height:100svh;padding:110px 24px 50px;text-align:center;background:#f3f4f7}
.story-static .story-chapter::before{content:'';display:block;width:min(100%,1200px);aspect-ratio:1672/941;background:center/contain no-repeat;margin:15px auto}
.story-static .story-opening{display:flex;flex-direction:column}
.story-static .story-opening::before{order:3;background-image:url('assets/orvyn-story-opening.webp?v=24')}
.story-static .story-creation::before{background-image:url('assets/orvyn-story-creation.webp?v=24')}
.story-static .story-system::before{background-image:url('assets/orvyn-story-system.webp?v=24')}
.story-static .story-chapter p{max-width:none}
@media(prefers-reduced-motion:reduce){.story-scroll svg{animation:none}.story-cta,.story-cta svg{transition:none}}
/* Floating chrome: a restrained cobalt edge echoes the film's illuminated inlay. */
.orvyn-story-page .site-header,.orvyn-story-page .site-header.scrolled{top:20px;left:50%;translate:-50% 0;width:min(1080px,calc(100% - 48px));height:68px;padding:0 28px;gap:24px;border:1px solid #315bff55;border-radius:20px;background:rgba(248,250,255,.92);backdrop-filter:blur(18px);box-shadow:0 12px 36px #17284d14}
.orvyn-story-page .site-header::after{content:'';position:absolute;inset:0;height:auto;padding:1.5px;border-radius:inherit;background:linear-gradient(135deg,#315bff20,#5277ff99,#315bff20);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.orvyn-story-page .site-header .brand{font-size:31px}
.orvyn-story-page .site-header .brand>svg{width:20px;height:20px;top:-6px}
.orvyn-story-page .site-header nav a:hover{color:#315bff}
.orvyn-story-page .site-header nav{margin-left:auto}
.orvyn-story-page .site-header a:focus-visible,.orvyn-story-page .menu-toggle:focus-visible{outline-color:#315bff;border-radius:3px}
@media(max-width:760px){
 .orvyn-story-page .site-header,.orvyn-story-page .site-header.scrolled{top:12px;width:calc(100% - 28px);height:64px;padding:0 20px;border-radius:18px}
 .orvyn-story-page .site-header .menu-toggle{border:0;border-radius:10px;color:#315bff;width:44px;height:44px;background:#315bff09}
 .orvyn-story-page #main-nav.open{position:absolute;top:calc(100% + 10px);left:0;right:0;width:100%;padding:20px;border:1px solid #315bff40;border-radius:18px;background:#f8faff;box-shadow:0 12px 28px #17284d18}
}
/* Native custom pointers remain immediate, with no following animation or touch overlay. */
@media(hover:hover) and (pointer:fine){
 .orvyn-story-page{cursor:url('assets/cursor-orvyn.svg?v=4') 12 12,auto}
 .orvyn-story-page a,.orvyn-story-page button,.orvyn-story-page summary{cursor:url('assets/cursor-orvyn-active.svg') 16 16,pointer}
 .orvyn-story-page .node-select{cursor:grab}
 .orvyn-story-page .node-select:active{cursor:grabbing}
 .orvyn-story-page input,.orvyn-story-page textarea{cursor:text}
 .orvyn-story-page button:disabled{cursor:not-allowed}
}
/* Pointer light stays inside the floating surface; navigation never shifts. */
.orvyn-story-page .site-header::before{content:none}

.orvyn-story-page .site-header.light-active::after{background:radial-gradient(190px circle at var(--light-x,50%) var(--light-y,50%),#315bff 0%,#6889ff 40%,transparent 100%)}
.orvyn-story-page .site-header>a,.orvyn-story-page .site-header>nav,.orvyn-story-page .site-header>button{z-index:1}
@media(prefers-reduced-motion:reduce){.orvyn-story-page .site-header::before{transition:none}}
/* Film finish lives above the picture and below readable copy and controls. */
.story-stage::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 40%,rgba(25,33,54,.19) 70%,rgba(20,28,46,.44) 100%)}
.story-stage::after{content:'';position:absolute;inset:-96px;z-index:1;pointer-events:none;background:url('assets/hero-grain.png') repeat;background-size:96px 96px;opacity:.11;mix-blend-mode:multiply;animation:hero-grain .24s steps(1,end) infinite}
@keyframes hero-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-37px,23px)}40%{transform:translate(19px,-41px)}60%{transform:translate(-53px,-17px)}80%{transform:translate(43px,31px)}}
.story-labels,.story-scroll{z-index:2}
.story-static .story-stage::before,.story-static .story-stage::after{display:none}
.motion-off .story-stage::after{animation:none}
@media(prefers-reduced-motion:reduce){.story-stage::after{animation:none}}
@media(max-width:760px){.story-stage::after{opacity:.087}}
/* Keep the scrollbar geometry constant across sections to prevent header shifts. */
html:has(body.orvyn-story-page){scrollbar-color:#315bff #edf1fa;scrollbar-width:thin;scrollbar-gutter:stable}
html:has(body.orvyn-story-page)::-webkit-scrollbar{width:7px}
html:has(body.orvyn-story-page)::-webkit-scrollbar-track{background:#edf1fa}
html:has(body.orvyn-story-page)::-webkit-scrollbar-thumb{background:#315bff;border-radius:2px}
html:has(body.orvyn-story-page)::-webkit-scrollbar-thumb:hover{background:#1844ed}
@media(forced-colors:active){html:has(body.orvyn-story-page){scrollbar-color:auto}}
/* An animated interaction cursor; the central dot remains the exact click point. */
.action-cursor{display:none;position:fixed;left:0;top:0;width:36px;height:36px;z-index:1000;pointer-events:none;translate:-50% -50%;filter:drop-shadow(0 1px 2px #18245655)}
.action-cursor::before{content:'';position:absolute;inset:3px;background:#315bffeb;border:2px solid #fff;transform:rotate(45deg);box-shadow:0 0 0 1px #315bff;animation:cursor-open .22s cubic-bezier(.16,1,.3,1) both}
.action-cursor::after{content:'';position:absolute;left:15px;top:15px;width:6px;height:6px;border-radius:50%;background:#fff}
@keyframes cursor-open{from{transform:rotate(0deg) scale(.5)}to{transform:rotate(45deg) scale(1)}}
@media(hover:hover) and (pointer:fine){.action-cursor.is-active{display:block}.orvyn-story-page.cursor-action,.orvyn-story-page.cursor-action a,.orvyn-story-page.cursor-action button,.orvyn-story-page.cursor-action summary{cursor:none}}
.motion-off .action-cursor::before{animation:none}
@media(prefers-reduced-motion:reduce){.action-cursor::before{animation:none}}
/* ORVYN entrance: the emblem's cobalt line resolves into the opening scene. */
.brand-loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:#f3f4f7;transition:opacity .45s ease,visibility .45s;cursor:wait}
.loader-composition{display:flex;flex-direction:column;align-items:center;transform:translateY(-10px)}
.loader-mark{width:110px;height:110px;fill:none;stroke-width:1;overflow:visible}
.loader-base{stroke:#c5cedf}.loader-light{stroke:#315bff;stroke-dasharray:36 64;animation:loader-trace 1.1s linear infinite}
.loader-word{font:600 42px/1.1 Manrope,Arial,sans-serif;letter-spacing:-.04em;color:#151821;margin-top:5px}
.loader-track{width:92px;height:2px;background:#d7deec;margin-top:30px;overflow:hidden}
.loader-track i{display:block;width:45%;height:100%;background:#315bff;animation:loader-signal .85s ease-in-out infinite alternate}
.brand-loader.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
@keyframes loader-trace{to{stroke-dashoffset:-100}}
@keyframes loader-signal{from{transform:translateX(-100%)}to{transform:translateX(225%)}}
@media(prefers-reduced-motion:reduce){.brand-loader{transition:none}.loader-light{animation:none;stroke-dasharray:none}.loader-track i{animation:none;width:100%}}
/* Scroll cue borrows the floating navigation's mineral surface and cobalt edge. */
.story-scroll{width:48px;height:48px;display:grid;place-items:center;border:1px solid #315bff55;border-radius:50%;background:rgba(248,250,255,.92);backdrop-filter:blur(12px);box-shadow:0 7px 22px #17284d14;color:#315bff;bottom:24px;pointer-events:none}
.story-scroll::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg,#315bff20,#5277ff99,#315bff20);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.story-scroll svg{width:20px;height:20px}
@media(max-width:760px){.story-scroll{width:42px;height:42px;bottom:19px}}
/* The emblem's diagonal becomes the primary invitation's silhouette. */
.story-cta{position:relative;isolation:isolate;border:0;background:none;padding:0 0 0 25px;gap:22px;min-height:52px;color:#182244;font-weight:600;font-size:14px;overflow:visible}
.story-cta::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-18deg);border:1px solid #315bff88;background:#f8faffed;box-shadow:0 5px 18px #18356612;transition:background .25s,border-color .25s,box-shadow .25s}
.story-cta-end{position:relative;width:56px;min-height:52px;display:grid;place-items:center;color:#315bff}
.story-cta-end::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-18deg);border-left:1px solid #315bff66;background:#315bff0d;transition:background .25s}
.story-cta:hover,.story-cta:focus-visible{background:none;color:#182244}
.story-cta:hover::before,.story-cta:focus-visible::before{border-color:#315bff;background:#fff;box-shadow:0 5px 22px #315bff22}
.story-cta:hover .story-cta-end,.story-cta:focus-visible .story-cta-end{color:#fff}
.story-cta:hover .story-cta-end::before,.story-cta:focus-visible .story-cta-end::before{background:#315bff}
.story-cta:hover svg,.story-cta:focus-visible svg{transform:translateX(3px) rotate(45deg)}
.story-cta:focus-visible{outline:2px solid #315bff;outline-offset:7px}
@media(max-width:760px){.story-cta{font-size:13px;padding-left:20px;gap:14px}.story-cta-end{width:49px}}
@media(prefers-reduced-motion:reduce){.story-cta::before,.story-cta-end::before{transition:none}}
/* One opening sequence after the loader; scrolling takes over immediately. */
/* Living stills: a slow breath while each story scene holds for reading. */
.story-visual,.story-labels{animation:story-breathe 8s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 50%}
.story-chapter>h1,.story-chapter>h2{animation:story-type-float 8s ease-in-out infinite;animation-play-state:paused}
body:not(.intro-pending):not(.intro-playing) .story-resting .story-visual,body:not(.intro-pending):not(.intro-playing) .story-resting .story-labels,body:not(.intro-pending):not(.intro-playing) .story-resting .story-chapter>h1,body:not(.intro-pending):not(.intro-playing) .story-resting .story-chapter>h2{animation-play-state:running}
@keyframes story-breathe{0%,100%{scale:1}50%{scale:1.012}}
@keyframes story-type-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.story-static .story-visual,.story-static .story-labels,.story-static .story-chapter>h1,.story-static .story-chapter>h2,.motion-off .story-visual,.motion-off .story-labels,.motion-off .story-chapter>h1,.motion-off .story-chapter>h2{animation:none}
@media(prefers-reduced-motion:reduce){.story-visual,.story-labels,.story-chapter>h1,.story-chapter>h2{animation:none}}
.intro-pending .site-header,.intro-pending .story-visual,.intro-pending .story-opening h1,.intro-pending .story-opening p,.intro-pending .story-scroll,.intro-pending .story-navigation{opacity:0!important}
.intro-playing .site-header{animation:intro-fade .65s .12s both}
.intro-playing .story-opening h1{animation:intro-copy .95s .3s both}
.intro-playing .story-opening p{animation:intro-copy .8s .48s both}
.intro-playing .story-visual{animation:intro-picture 1.45s .35s both}
.intro-playing .story-scroll,.intro-playing .story-navigation{animation:intro-fade .7s 1.1s both}
.intro-playing .site-header,.intro-playing .story-opening h1,.intro-playing .story-opening p,.intro-playing .story-visual,.intro-playing .story-scroll,.intro-playing .story-navigation{animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@keyframes intro-copy{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes intro-picture{from{opacity:0;scale:1.035;filter:blur(7px)}to{opacity:1;scale:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.intro-pending .site-header,.intro-pending .story-visual,.intro-pending .story-opening h1,.intro-pending .story-opening p,.intro-pending .story-scroll,.intro-pending .story-navigation{opacity:1!important}.intro-playing .site-header,.intro-playing .story-opening h1,.intro-playing .story-opening p,.intro-playing .story-visual,.intro-playing .story-scroll,.intro-playing .story-navigation{animation:none}}

/* A consistent navigation footprint, from the introduction through the studio. */
.orvyn-story-page .site-header .header-cta{display:inline-flex;flex-shrink:0;visibility:visible;pointer-events:auto;color:#fff;background:#315bff;border-color:#315bff;white-space:nowrap}
.orvyn-story-page .site-header .header-cta::before{background:#2048df}
.orvyn-story-page .site-header .header-cta .button-icon{border-left-color:#ffffff40}
.orvyn-story-page .site-header .header-cta:hover{color:#fff;border-color:#2048df}
.orvyn-story-page .site-header .header-cta:focus-visible{outline:2px solid #315bff;outline-offset:4px}
.orvyn-story-page .approach{background:#f4f6fb;color:#151821}
.studio-eyebrow{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#315bff;margin:0 0 26px}
.approach .soft{color:#66758d}
.approach-copy{padding-top:44px;max-width:52ch}
.approach-copy>p{color:#4c586b}
.approach-copy>p:first-child{color:#202b3c}
.approach-copy>p+p{margin-top:20px}
.approach .line-link{color:#315bff;border-color:#315bff66}
.approach .studio-principles{border-color:#ccd5e4;color:#4c586b}
@media(max-width:760px){
 .orvyn-story-page .site-header,.orvyn-story-page .site-header.scrolled{padding:0 12px;gap:8px}
 .orvyn-story-page .site-header .brand{font-size:24px;padding-right:18px;flex-shrink:0}
 .orvyn-story-page .site-header .brand>svg{width:17px;height:17px}
 .orvyn-story-page .site-header .header-cta{margin-left:auto;min-height:40px;font-size:11px}
 .orvyn-story-page .site-header .header-cta>span:first-child{padding:10px 9px}
 .orvyn-story-page .site-header .header-cta .button-icon{width:28px}
 .orvyn-story-page .site-header .header-cta svg{width:15px;height:15px}
 .orvyn-story-page .site-header .menu-toggle{width:38px;min-width:38px;height:44px}
 .studio-eyebrow{margin-bottom:20px}
 .approach-copy{padding-top:0;max-width:none}
}

/* A small illuminated emblem introduces the studio's editorial headings. */
.studio-eyebrow{display:flex;align-items:center;gap:12px;line-height:26px;width:fit-content;letter-spacing:.12em}
.studio-eyebrow-mark{display:grid;place-items:center;position:relative;width:30px;height:26px}
.studio-eyebrow-mark::before{content:'';position:absolute;inset:0;border:1px solid #315bff4d;background:#315bff08;transform:skewX(-18deg)}
.studio-eyebrow-mark svg{position:relative;width:24px;height:24px;stroke-width:1.6}
.studio-eyebrow-line{width:52px;height:1px;background:linear-gradient(90deg,#315bff99,transparent)}
.approach-copy{padding-top:52px}
/* Identical halves travel one group width for a continuous, jump-free loop. */
.studio-brands{margin-top:clamp(60px,8vw,110px);padding-top:24px;border-top:1px solid #ccd5e4}
.studio-brands-caption{display:flex;justify-content:space-between;gap:16px;color:#5c6a80;font-size:12px;line-height:1.5}
.studio-brands-caption>span{color:#66758d}
.brand-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:36px 0 16px}
.brand-marquee-track{display:flex;width:max-content;animation:studio-brands-flow 38s linear infinite;will-change:transform}
.brand-marquee-group{display:flex;align-items:center;justify-content:space-around;flex-shrink:0;gap:clamp(40px,5vw,88px);min-width:calc(100vw - 2 * var(--gutter));list-style:none;margin:0;padding:0 clamp(20px,2.5vw,44px)}
.studio-wordmark{display:flex;align-items:center;justify-content:center;gap:12px;flex:0 0 170px;white-space:nowrap;color:#55627a;font-size:29px;line-height:1.3;font-weight:650;letter-spacing:-.055em}
.studio-wordmark svg{width:32px;height:32px;flex-shrink:0;stroke-width:1.7}
.wordmark-aveniq{font-size:22px;letter-spacing:.13em;font-weight:500}
.wordmark-morrow{font-family:Georgia,serif;font-size:34px;font-style:italic;font-weight:400}
.wordmark-nuvanta{font-size:20px;letter-spacing:.1em;font-weight:600}
.wordmark-formiq{font-family:Consolas,monospace;font-size:28px;letter-spacing:-.07em}
.wordmark-velune{font-family:Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-.04em}
@keyframes studio-brands-flow{to{transform:translateX(-50%)}}
.motion-off .brand-marquee-track{animation-play-state:paused}
@media(max-width:760px){.approach-copy{padding-top:0}.brand-marquee{padding:26px 0 10px}.studio-wordmark{flex-basis:145px}.studio-brands-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.brand-marquee{mask-image:none}.brand-marquee-track{animation:none;width:100%}.brand-marquee-group{flex-wrap:wrap;min-width:0;width:100%;gap:24px;padding:0}.brand-marquee-group[aria-hidden]{display:none}.studio-wordmark{flex-basis:140px}}

/* Allow the longer studio section to pass through the viewport in full. */
.orvyn-story-page .approach{position:relative}
.studio-metrics{margin-top:56px;border-top:1px solid #ccd5e4;padding-top:28px}
.studio-metrics-caption{font-size:14px;color:#4c586b}
.studio-metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:34px 0 0}
.studio-metric{display:flex;flex-direction:column;align-items:flex-start;padding:0 32px;border-left:1px solid #ccd5e4;min-width:0}
.studio-metric:first-child{padding-left:0;border-left:0}
.studio-metric:last-child{padding-right:0}
.studio-metric dt{font-size:15px;font-weight:600;color:#202b3c;margin-top:18px}
.studio-metric dd{margin:0}
.studio-metric .studio-metric-value{order:-1;font-size:clamp(56px,6.4vw,94px);font-weight:500;line-height:1;letter-spacing:-.065em;color:#151821;font-variant-numeric:tabular-nums}
.studio-metric-value [data-count]{display:inline-block;min-width:1.3em}
.studio-metric:last-child [data-count]{min-width:.65em}
.metric-unit{color:#315bff;font-size:.64em;margin-left:5px;letter-spacing:-.04em}
.studio-metric .studio-metric-detail{font-size:13px;line-height:1.65;color:#66758d;margin-top:9px;max-width:28ch}
.studio-metrics-note{font-size:11px;line-height:1.6;color:#66758d;margin-top:28px}
.metric-accessible{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){.studio-metrics{margin-top:38px}.studio-metrics-grid{grid-template-columns:1fr;margin-top:26px;gap:26px}.studio-metric,.studio-metric:first-child,.studio-metric:last-child{padding:0 0 26px;border-left:0;border-bottom:1px solid #ccd5e4}.studio-metric:last-child{padding-bottom:0;border-bottom:0}.studio-metric .studio-metric-value{font-size:64px}.studio-metric dt{margin-top:12px}}

/* Cobalt-lit brand band and four cut-corner goal cards. */
.studio-brands{background:#14254a;border:1px solid #315bff40;padding:26px 0 20px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.studio-brands-caption{padding:0 28px;color:#d5e0f8}
.studio-brands-caption>span{color:#aabde1}
.studio-brands .studio-wordmark{color:#e5edff}
.studio-brands .studio-wordmark svg{color:#9eb8ff}
.studio-metrics{border-top:0;padding-top:0}
.studio-metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:studio-metric}
.studio-metric,.studio-metric:first-child,.studio-metric:last-child{position:relative;isolation:isolate;counter-increment:studio-metric;padding:52px 24px 28px;min-height:270px;border:0;background:#cbd7ee;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.studio-metric::before{content:'';position:absolute;inset:1px;z-index:-1;background:linear-gradient(150deg,#fff 35%,#eef3ff);clip-path:inherit}
.studio-metric::after{content:'0' counter(studio-metric);position:absolute;top:19px;right:24px;font-size:11px;letter-spacing:.1em;color:#315bff;font-variant-numeric:tabular-nums}
.studio-metric .studio-metric-value{font-size:clamp(52px,5vw,80px)}
.studio-metric:nth-child(n+3) [data-count]{min-width:.65em}
@media(max-width:1050px){.studio-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.studio-brands-caption{padding:0 20px;flex-direction:column;gap:4px}.studio-metrics-grid{grid-template-columns:1fr;gap:16px}.studio-metric,.studio-metric:first-child,.studio-metric:last-child{min-height:240px;padding:48px 26px 26px}.studio-metric .studio-metric-value{font-size:64px}}