/* Every scene is driven by native scroll position. No scroll capture or autoplay. */
:root { --lime: #c1f731; --paper: #f0f1e9; }
body { overflow-x: clip; }
.site-header { background: #0e0e0ef0; }
.site-header.is-light { background: #f0f1e9ed; color: #171b12; box-shadow: none; }
.site-header.is-light .nav-shell { border-color: #15190f22; }
.site-header.is-light .brand img { filter: brightness(0); mix-blend-mode: normal; }
.site-header.is-light .nav-links a { color: #404938; }
.site-header.is-light .nav-links a:hover { color: #171b12; }
.nav-contact { background: var(--lime); color: #11180b; padding: 11px 17px; border-radius: 6px; }
.nav-contact span { color: inherit; }
.motion-hero { --hero-stage: max(940px,calc(100svh + 140px)); position: relative; background: var(--paper); color: #171b12; }
.hero-sticky { height: var(--hero-stage); position: relative; overflow: clip; isolation: isolate; }
.motion-ready .motion-hero { height: 360svh; }
.motion-ready .hero-sticky { position: sticky; top: calc(100svh - var(--hero-stage)); height: var(--hero-stage); min-height: 0; }
.hero-contours { position: absolute; inset: -45% -15%; transform: rotate(-25deg); z-index: -2; pointer-events: none; }
.hero-contours i { position: absolute; inset: 0; border: 1px solid #60684b10; border-radius: 46%; }
.hero-contours i:nth-child(2) { inset: 8%; }
.hero-contours i:nth-child(3) { inset: 17%; }
.hero-contours i:nth-child(4) { inset: 29%; }
.hero-watermark { position: absolute; top: 31%; left: 7%; color: #e4e7d9; font-weight: 600; font-size: 44vw; line-height: .8; letter-spacing: -.1em; z-index: -1; user-select: none; }
.hero-intro { position: relative; padding-top: max(275px,calc(var(--hero-stage) - 100svh + 150px)); z-index: 5; pointer-events: none; }
.hero-intro .eyebrow { font-size: .75rem; letter-spacing: .08em; color: #65724e; margin-bottom: 28px; }
.hero-intro h1 { font-size: clamp(4rem,6.5vw,7.8rem); font-weight: 600; line-height: .94; letter-spacing: -.065em; max-width: 7.4em; }
.hero-intro h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.062em; line-height: .93; }
.hero-description { color: #59634c; font-size: 1rem; line-height: 1.65; max-width: 350px; margin: 27px 0; }
.hero-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 25px; max-width: 410px; }
.hero-work-link { display: inline-flex; gap: 20px; align-items: center; pointer-events: auto; font-size: .875rem; border-bottom: 1px solid #596b3c66; padding-block: 5px; }
.hero-work-link:hover { color: #5b762c; }
.hero-intro .button { pointer-events: auto; min-height: 56px; border-radius: 6px; padding-left: 18px; }
.hero-intro .button-arrow { border-radius: 4px; width: 39px; height: 39px; }
.hero-object { position: absolute; width: 54vw; max-width: 1090px; left: 76%; top: 50%; z-index: 2; transform: translate(-50%,-50%); perspective: 1600px; }
.assembled-site { width: 100%; aspect-ratio: 2048/1106; position: relative; transform-style: preserve-3d; transform: rotateY(-17deg) rotateX(12deg) rotateZ(-7deg); }
.site-slice { position: absolute; inset: 0; transform-style: preserve-3d; }
.site-slice img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.slice-header { clip-path: inset(0 0 90.4% 0 round 7px 7px 0 0); transform: translate3d(-5%,-22%,110px); }
.slice-nav { clip-path: inset(9.6% 0 82.5% 0); transform: translate3d(5%,-8%,55px); }
.slice-hero { clip-path: inset(17.5% 0 0 0 round 0 0 8px 8px); transform: translate3d(0,8%,0); }
.object-orbit { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid #77825840; border-radius: 50%; top: -14%; left: 17%; transform: rotateX(62deg) rotateZ(-30deg); }
.object-orbit::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 9px #c1f73125; position: absolute; top: 24%; left: 3%; }
.object-tag { position: absolute; z-index: 4; display: flex; gap: 12px; font-size: .67rem; background: #f7f8f0ea; padding: 9px 14px; border: 1px solid #5c69432e; border-radius: 4px; color: #374225; white-space: nowrap; box-shadow: 0 8px 25px #5360350a; }
.object-tag b { font-weight: 400; color: #8c9877; }
.tag-strategy { top: -30%; left: 10%; }
.tag-design { top: 17%; right: -1%; }
.tag-tech { bottom: -17%; left: 27%; }
.hero-resolution { position: absolute; inset: auto 0 8%; text-align: center; opacity: 0; visibility: hidden; }
.hero-resolution .eyebrow { color: #758354; margin-bottom: 10px; font-size: .67rem; }
.hero-resolution > p:not(.eyebrow) { font-size: clamp(2rem,3.2vw,3.6rem); line-height: 1.02; letter-spacing: -.05em; color: #202918; }
.hero-resolution em { font-family: Georgia,serif; font-weight: 400; }
.hero-resolution a { display: inline-flex; gap: 22px; align-items: center; font-size: .875rem; margin-top: 19px; border-bottom: 1px solid #34432670; padding-bottom: 4px; }
.hero-resolution a span { font-size: 1.1rem; }
.hero-bottom { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .72rem; z-index: 8; color: #69755b; }
.hero-bottom a { display: flex; align-items: center; gap: 30px; color: #27331b; }
.hero-bottom a span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #64734c50; }
.hero-track { width: 80px; height: 2px; background: #737f5e25; overflow: hidden; }
.hero-track i { display: block; width: 100%; height: 100%; background: #3b5122; transform: scaleX(var(--hero-p,0)); transform-origin: left; }

.problem { padding-top: 130px; position: relative; overflow: clip; }
.problem .editorial-heading { grid-template-columns: 1.6fr .7fr; gap: 8vw; }
.problem h2 { font-size: clamp(2.8rem,5.5vw,5.8rem); }
.word-reveal em { color: inherit; font-family: Georgia,serif; font-style: italic; }
.motion-ready .word-reveal .word { color: #171f10; opacity: var(--word-o,1); }
.value-grid { perspective: 1000px; gap: 35px; }
.value-item { display: block; padding: 27px 25px 32px; background: #e8ebdf; border-top: 2px solid #697c39; border-radius: 3px; }
.value-item:nth-child(2) { background: #dce2cf; }
.value-item:nth-child(3) { background: #ccd8b4; }
.value-item::before { display: none; }
.value-item h3 { margin-top: 48px; }

.work { overflow: clip; position: relative; padding-top: 160px; }
.work-ribbon { position: relative; display: flex; width: max-content; gap: 45px; margin-bottom: 80px; color: #344021; font-size: clamp(4rem,9vw,10rem); line-height: 1; letter-spacing: -.055em; white-space: nowrap; font-weight: 600; }
.work h2 em { color: #b6c29f; font-family: Georgia,serif; font-style: italic; }
.work-tabs { gap: 4px; }
.work-tab { width: 25%; padding-inline: 19px; }
.work-tab small { white-space: normal; }
.case-canvas { border-radius: 4px; perspective: 1500px; padding: 26px 40px; }
.case-commerce { background: #e3e5d8; color: #303924; }
.case-landing { background: #c7d0cf; }
.case-browser { width: min(100%,1120px); margin: 40px auto; border: 0; border-radius: 7px; transition: box-shadow .4s; }
.motion-ready .case-browser { transform: perspective(1400px) translateY(var(--case-y,0px)) rotateX(var(--case-r,0deg)) scale(var(--case-s,1)); }
.case-browser > img { aspect-ratio: auto; }
/* Show the loaded launches section of the original 1200 × 5388 capture. */
.case-browser.gamehub-still { position: relative; aspect-ratio: 1200 / 660; background: #080f0a; }
.gamehub-still > img { position: absolute; top: 0; left: 0; width: 100%; height: auto; transform: translateY(-16.88938%); }
.case-details { padding-bottom: 10px; }
.case-description .button { margin-top: 18px; }
.case-gamehub { background: #1f271a; color: #c3d1b1; border: 1px solid #b9d69525; }
.gamehub-stage { position: relative; min-height: 565px; margin: 30px 0; border: 1px solid #a9c38640; border-radius: 6px; overflow: hidden; }
.gamehub-cover { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: inherit; padding: clamp(25px,6vw,90px); background: repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),#b6d3930a 25%),#12170f; }
.gamehub-cover > .eyebrow { color: #9caf86; }
.gamehub-cover h3 { color: #e4ecda; font-size: clamp(3.7rem,8vw,8rem); line-height: 1; letter-spacing: -.065em; margin: 25px 0; }
.gamehub-cover h3 > span { color: var(--lime); font-weight: 400; margin-left: 15px; }
.gamehub-cover p { color: #a1b091; margin-bottom: 30px; }
.embed-demo { background: none; border: 0; border-bottom: 1px solid #a1b09180; font-size: .75rem; color: #a1b091; margin-top: 19px; padding: 0 0 5px; cursor: pointer; }
.gamehub-stage iframe { width: 100%; height: 650px; border: 0; background: #111; }
.case-zelo { background: #dce4cf; color: #3d4b2b; }
.case-zelo .gamehub-cover { background: repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),#6f815b0a 25%),#eef1e7; }
.case-zelo .gamehub-cover h3 { color: #344326; font-family: Georgia,serif; font-weight: 400; }
.case-zelo .gamehub-cover h3 > span { color: #6a853e; font-family: Inter,sans-serif; }
.case-zelo .gamehub-cover :is(p,.eyebrow,.embed-demo) { color: #697959; }
.case-zelo .under-link { border-color: #677b4850; }
.ciola-demo { margin: 35px 0; border-radius: 7px; overflow: hidden; background: #071426; color: #fff; box-shadow: 0 25px 60px #14253540; }
.ciola-scene { position: relative; min-height: 560px; height: min(55vw,650px); overflow: hidden; isolation: isolate; }
.ciola-frames, .ciola-scene-shade { position: absolute; inset: 0; }
.ciola-frames img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.ciola-static .ciola-frames img { transform: scale(1.037); opacity: 1; }
.ciola-scene-shade { background: linear-gradient(90deg,#021128c9,#02112833 68%,transparent),linear-gradient(0deg,#02112885,transparent 48%); }
.ciola-scene-copy { position: relative; padding: 40px clamp(25px,4vw,65px); width: 75%; max-width: 750px; }
.ciola-mini-brand { width: 165px; height: auto; margin-bottom: 55px; }
.ciola-stage-name { display: block; font-size: .7rem; color: #b9d4f7; margin-bottom: 18px; letter-spacing: .04em; }
.ciola-scene-copy h3 { color: #fff; font-size: clamp(1.8rem,3.7vw,3.8rem); line-height: 1.06; letter-spacing: -.05em; min-height: 3.25em; max-width: 11.8em; }
.ciola-scene-copy a { display: inline-flex; align-items: center; gap: 25px; padding: 13px 20px; background: #126dce; color: white; margin-top: 25px; font-size: .75rem; border-radius: 5px; }
.ciola-scene-index { position: absolute; bottom: 32px; right: 35px; color: #d1deea; font-size: .75rem; }
.ciola-scene-index b { font-size: 2rem; font-weight: 400; color: #fff; margin-right: 5px; }
.ciola-controls { display: flex; align-items: center; gap: 30px; padding: 20px 28px; background: #091c34; }
.ciola-controls label { font-size: .75rem; line-height: 1.6; white-space: nowrap; }
.ciola-controls label span { display: block; color: #7893b0; font-size: .67rem; }
.ciola-controls input { flex: 1; width: 100%; min-width: 0; accent-color: #72b8ff; cursor: ew-resize; }
.ciola-controls > a { font-size: 1.3rem; color: #8ac4ff; }

.intent { overflow: clip; position: relative; }
.intent h2 em { font-family: Georgia,serif; font-style: italic; color: #627648; }
.intent .compare-wrap { transform: perspective(1400px) translateY(var(--compare-y,0px)) rotateY(var(--compare-r,0deg)); }
.compare-stage { border-radius: 5px; box-shadow: 0 35px 70px -35px #3f4a2860; }
.intent-copy { position: relative; z-index: 2; }
.compare-range { touch-action: pan-y; }

.method { background: #171e12; position: relative; }
.method-heading { top: 145px; }
.method h2 em { font-family: Georgia,serif; font-style: italic; color: #b8c99d; }
.method-counter { display: flex; align-items: baseline; gap: 10px; color: var(--lime); margin-top: 40px; position: relative; width: 210px; padding-bottom: 16px; }
.method-counter > span { font-size: 7.5rem; letter-spacing: -.085em; line-height: 1; }
.method-counter small { color: #778866; }
.method-counter i { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: var(--lime); transform: scaleX(var(--method-progress,.25)); transform-origin: left; }
.method-list { padding-top: 15px; padding-bottom: 110px; }
.method-step { min-height: 360px; padding: 38px; margin-bottom: 45px; background: #26321d; border: 1px solid #9fbb713b; border-radius: 6px; position: relative; transform-origin: center top; box-shadow: 0 25px 45px #0002; }
.method-step:nth-child(2) { background: #2d3c21; }
.method-step:nth-child(3) { background: #354728; }
.method-step:nth-child(4) { background: #c1f731; color: #20300e; }
.method-step:nth-child(4) :is(p,small,.step-number) { color: #4a6425; }
.method-step h3 { font-size: clamp(1.7rem,2.8vw,2.7rem); max-width: 11em; }
.method-step p { margin-top: 22px; }
.motion-ready .method-step { position: sticky; top: calc(125px + var(--step-i,0) * 16px); }

.difference { background: #0e0e0e; overflow: clip; }
.difference-statement { display: block; position: relative; text-align: center; max-width: 1120px; margin-inline: auto; }
.difference-statement h2 { font-size: clamp(2.5rem,5.9vw,6.2rem); }
.difference-statement h2 em { color: var(--lime); font-family: Georgia,serif; font-style: italic; }
.difference-statement > p { margin: 35px auto 0; max-width: 570px; }
.principle-grid { gap: 20px; perspective: 1800px; margin-top: 100px; padding-bottom: 25px; }
.principle { position: relative; padding: 35px 30px; min-height: 375px; border: 1px solid #81936a50; border-radius: 9px; background: #1c2417; transform-origin: center 130%; }
.principle:nth-child(2) { background: #dfe8ce; color: #1b2910; z-index: 2; }
.principle:nth-child(2) p { color: #5f6d50; }
.principle:nth-child(3) { background: #c1f731; color: #1b2910; }
.principle:nth-child(3) :is(p,span) { color: #526d28; }
.principle:nth-child(2) > span { color: #677b4d; }
.principle > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.principle h3 { margin-top: 50px; }

.faq { position: relative; overflow: clip; }
.faq-heading { isolation: isolate; }
.faq-symbol { position: absolute; font-family: Georgia,serif; font-size: 30rem; line-height: 1; color: #dfe4d4; top: -125px; left: -90px; z-index: -1; pointer-events: none; }
.faq-list details { position: relative; background: var(--paper); }
.faq-list summary { min-height: 90px; }
.faq-list summary span { transition: transform .3s; }
.faq-list details[open] summary span { transform: rotate(45deg); }

.contact { background: var(--paper); position: relative; isolation: isolate; overflow: clip; min-height: 600px; }
.contact::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--lime); clip-path: circle(var(--contact-radius,150%) at 50% 100%); }
.contact > .container { position: relative; }
.contact-main { padding-block: 36px; }
.contact h2 { font-size: clamp(3rem,7.8vw,8rem); }
.contact h2 em { font-family: Georgia,serif; font-style: italic; }
.contact-circle { width: clamp(80px,11vw,160px); }
.site-footer { overflow: clip; }
.footer-back { transition: color .2s; }
.footer-back:hover { color: var(--lime); }
.motion-ready .reveal { transition: none; }
.motion-ready .work-panel.is-entering { animation: none; }

@media (min-width: 1600px) { .hero-object { left: 68%; } .hero-intro h1 { font-size: 6.9rem; } }
@media (max-width: 1100px) {
  .hero-intro h1 { font-size: 6.1vw; }
  .hero-intro { padding-top: 175px; }
  .hero-object { width: 53vw; left: 72%; }
  .hero-description { max-width: 265px; font-size: .875rem; }
  .hero-intro .eyebrow { max-width: 250px; }
  .method-step { padding: 29px; min-height: 380px; }
  .principle { padding: 28px 23px; }
}
@media (max-width: 800px) {
  .site-header.is-light .menu-toggle span { background: #15200f; }
  .site-header.is-light .nav-links.is-open { background: var(--paper); }
  .nav-contact { padding: 8px 12px; font-size: .75rem; }
  .hero-sticky { height: 1040px; }
  .motion-ready .hero-sticky { height: 100svh; min-height: 740px; }
  .motion-ready .motion-hero { height: 245svh; }
  .hero-intro { padding-top: 126px; }
  .hero-intro h1 { font-size: clamp(2.65rem,7.7vw,4.4rem); line-height: .97; max-width: 11em; }
  .hero-intro h1 em br { display: none; }
  .hero-intro .eyebrow { margin-bottom: 16px; max-width: none; font-size: .62rem; }
  .hero-description { max-width: 330px; font-size: .875rem; margin: 17px 0; }
  .hero-intro .button { min-height: 48px; font-size: .75rem; }
  .hero-intro .button-arrow { width: 32px; height: 32px; }
  .hero-object { width: 68vw; max-width: 430px; left: 54%; top: 78%; }
  .hero-watermark { font-size: 61vw; left: -3%; top: 55%; }
  .object-tag { font-size: .6rem; padding: 6px 9px; }
  .tag-strategy { top: -24%; }
  .tag-design { right: -3%; top: 27%; }
  .tag-tech { bottom: -14%; }
  .hero-resolution { bottom: 16%; }
  .hero-resolution > p:not(.eyebrow) { font-size: 2.5rem; }
  .hero-bottom > span:first-child { display: none; }
  .hero-bottom { bottom: 20px; }
  .hero-bottom a { gap: 18px; font-size: .68rem; }
  .hero-track { width: 55px; }
  .problem .editorial-heading { grid-template-columns: 1fr; gap: 35px; }
  .problem h2 { max-width: 11em; }
  .value-grid { gap: 15px; }
  .value-item { padding: 24px 20px; }
  .work { padding-top: 80px; }
  .work-ribbon { margin-bottom: 55px; }
  .work-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 17px 10px; gap: 7px; }
  .work-tab strong { font-size: 1.15rem; }
  .work-tab > span { display: none; }
  .work-tab small { font-size: .64rem; }
  .case-canvas { padding: 20px; }
  .case-browser { margin: 27px auto; }
  .case-canvas-top > span:last-child { font-size: .65rem; }
  .ciola-scene-copy { width: 88%; padding: 30px; }
  .ciola-scene-copy h3 { font-size: clamp(2rem,5vw,3rem); }
  .ciola-mini-brand { margin-bottom: 55px; }
  .ciola-scene { min-height: 530px; }
  .method-counter { display: none; }
  .method-list { padding-top: 30px; padding-bottom: 30px; }
  .method-step { min-height: 300px; margin-bottom: 30px; }
  .motion-ready .method-step { top: calc(110px + var(--step-i,0) * 13px); }
  .principle-grid { margin-top: 65px; gap: 15px; }
  .principle { min-height: 310px; padding: 27px; }
  .faq-symbol { font-size: 24rem; left: auto; right: 0; top: -95px; }
  .contact { min-height: 560px; }
  .contact-main { padding-block: 15px; }
}
@media (max-width: 520px) {
  .hero-intro h1 { font-size: clamp(2.5rem,10.9vw,3.3rem); letter-spacing: -.06em; }
  .hero-description { max-width: 285px; font-size: .83rem; }
  .hero-object { top: 78%; width: 80vw; left: 54%; }
  .hero-intro .eyebrow { font-size: .57rem; letter-spacing: .04em; }
  .motion-ready .hero-sticky { min-height: 740px; }
  .hero-resolution > p:not(.eyebrow) { font-size: 2.25rem; }
  .hero-resolution { bottom: 20%; }
  .hero-track { width: 40px; }
  .tag-strategy { left: 5%; }
  .problem { padding-top: 80px; }
  .value-item h3 { margin-top: 29px; }
  .work-tabs { flex-wrap: wrap; }
  .work-tab { width: calc(50% - 2px); }
  .work-tab strong { font-size: .95rem; letter-spacing: -.025em; }
  .work-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 17px 7px; }
  .case-canvas { padding: 15px 12px; }
  .case-canvas-top > span:last-child { display: none; }
  .case-canvas-bottom { font-size: .65rem; }
  .case-browser { margin: 22px auto; }
  .gamehub-stage { min-height: 490px; margin: 23px 0; }
  .gamehub-cover { padding: 22px; }
  .gamehub-cover h3 { font-size: 3.25rem; }
  .gamehub-cover h3 > span { margin-left: 5px; }
  .gamehub-cover p { font-size: .875rem; }
  .gamehub-cover .button { width: 100%; font-size: .72rem; padding-left: 14px; gap: 10px; }
  .gamehub-cover .button-arrow { width: 32px; height: 32px; }
  .case-gamehub .case-canvas-bottom { flex-wrap: wrap; gap: 12px; }
  .case-gamehub .under-link { font-size: .7rem; }
  .ciola-demo { margin: 24px 0; }
  .ciola-scene { min-height: 540px; }
  .ciola-scene-copy { padding: 26px 20px; width: 100%; }
  .ciola-mini-brand { width: 140px; margin-bottom: 65px; }
  .ciola-scene-copy h3 { font-size: 2.1rem; max-width: 10.5em; }
  .ciola-scene-copy a { padding: 12px 14px; gap: 12px; font-size: .66rem; }
  .ciola-scene-index { bottom: 20px; right: 20px; }
  .ciola-controls { padding: 17px; flex-wrap: wrap; gap: 10px 20px; }
  .ciola-controls label { width: 100%; }
  .ciola-controls label span { display: inline; margin-left: 7px; }
  .method-step { padding: 27px 22px; min-height: 325px; }
  .method-step h3 { font-size: 1.8rem; }
  .method-step p { font-size: .875rem; }
  .principle-grid { gap: 22px; }
  .principle h3 { margin-top: 36px; }
  .contact h2 { font-size: 11.5vw; }
  .contact-circle { width: 58px; }
}
/* Short windows, zoomed layouts and reduced motion retain the complete document. */
@media (max-height: 739px) {
  .motion-ready .motion-hero { height: auto; }
  .motion-ready .hero-sticky { position: relative; height: 820px; }
  .motion-ready .method-step { position: relative; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-hero { height: auto; }
  .motion-ready .hero-sticky { position: relative; height: max(800px,100svh); }
  .motion-ready .method-step { position: relative; top: auto; }
  .hero-resolution { display: none; }
  .contact::before { clip-path: none; }
  .word-reveal .word { opacity: 1 !important; }
}

/* Larger editorial opening, an explicit project selector and chapter handoffs. */
.hero-intro { width: min(calc(100% - var(--gutter)*2),1560px); }
.hero-watermark { font-size: 51vw; top: 37%; left: 0; }
.hero-track { width: 140px; }
.hero-bottom { font-size: .8rem; }
.object-tag { font-size: .75rem; padding: 11px 16px; }
.section-index { position: relative; }
.section-index::after { content: ''; position: absolute; bottom: -1px; left: 0; height: 1px; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(var(--index-progress,1)); opacity: .45; }
.scene-transition { position: relative; isolation: isolate; }
.scene-transition::before { content: ''; position: absolute; inset: 0 0 auto; height: 140px; z-index: 3; pointer-events: none; transform-origin: center top; transform: scaleY(var(--cap-scale,0)); }
.work.scene-transition::before { background: var(--paper); border-radius: 0 0 50% 50%; }
.intent.scene-transition::before { background: #0e0e0e; clip-path: polygon(0 0,100% 0,100% 18%,0 100%); }
.method.scene-transition::before { background: var(--paper); border-radius: 0 0 42% 9%; }
.difference.scene-transition::before { background: #171e12; clip-path: polygon(0 0,100% 0,100% 100%,50% 15%,0 100%); }
.faq.scene-transition::before { background: #0e0e0e; border-radius: 0 0 50% 50%; }
.motion-line { display: block; }

.work > .container { width: min(calc(100% - var(--gutter)*2),1560px); }
.work-ribbon { position: absolute; top: -10px; margin-bottom: 0; color: #465232; font-size: clamp(4rem,8vw,8.5rem); opacity: .7; pointer-events: none; }
.work-heading { margin-bottom: 55px; }
.portfolio-layout { display: grid; grid-template-columns: minmax(245px,.29fr) minmax(0,1fr); gap: clamp(28px,3.5vw,65px); align-items: start; overflow-anchor: none; }
.portfolio-selector { position: sticky; top: 126px; }
.portfolio-selector-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 22px; font-size: .75rem; color: #c2cbb6; }
.portfolio-selector-top > :last-child { color: #76836a; }
.project-menu { display: grid; gap: 7px; }
.project-choice { width: 100%; display: grid; grid-template-columns: 25px 1fr 23px; align-items: center; gap: 13px; text-align: left; padding: 24px 20px; border: 1px solid #b5c79b2a; border-radius: 6px; color: #e6ecde; background: #151b11; cursor: pointer; transition: background .3s,border-color .3s,color .3s,transform .4s var(--ease); position: relative; overflow: hidden; }
.choice-number { color: #778669; font-size: .75rem; }
.choice-copy { display: block; min-width: 0; }
.choice-copy strong { display: block; font-size: clamp(1.7rem,2.1vw,2.25rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 400; }
.choice-copy small { display: block; margin-top: 10px; color: #919f80; font-size: .75rem; line-height: 1.4; }
.choice-arrow { font-size: 1.3rem; color: #87976f; transform: translate(-5px,5px); opacity: .3; transition: opacity .3s,transform .4s; }
.project-choice:hover { background: #222e17; border-color: #afce8055; }
.project-choice:hover .choice-arrow { transform: none; opacity: 1; }
.project-choice.is-active { background: var(--lime); color: #19270d; border-color: var(--lime); }
.project-choice.is-active :is(.choice-number,.choice-copy small,.choice-arrow) { color: #496221; }
.project-choice.is-active .choice-arrow { opacity: 1; transform: none; }
.project-choice:focus-visible { outline-offset: 3px; }
.portfolio-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; font-size: .8rem; color: #748363; }
.portfolio-controls b { font-weight: 400; color: #e7eedb; }
.portfolio-controls > div { display: flex; gap: 8px; }
.portfolio-controls button { width: 45px; height: 45px; display: grid; place-items: center; padding: 0; border: 1px solid #b5c79b40; color: #d4e1c1; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.2rem; transition: color .3s,background .3s; }
.portfolio-controls button:hover { color: #14220a; background: var(--lime); }
.portfolio-selector-note { color: #8d9a7b; margin-top: 37px; font-size: 1rem; line-height: 1.5; }
.portfolio-selector-note a { color: #d6e3c2; border-bottom: 1px solid #819866; }
.portfolio-stage { min-width: 0; scroll-margin-top: 125px; }
.portfolio-stage-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; font-size: .875rem; min-height: 26px; color: #aabb95; }
.portfolio-stage-top > span { color: #ecf0e5; }
.portfolio-stage-top a { display: inline-flex; align-items: center; gap: 20px; }
.portfolio-stage-top a:hover { color: var(--lime); }
.case-direct-link, .portfolio-stage-top .case-direct-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 11px 18px; border: 1px solid #8eaf3d55; border-radius: 5px; background: var(--lime); color: #17210d; font-size: .875rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.case-direct-link > span { font-size: 1.2rem; }
.case-direct-link:hover, .portfolio-stage-top .case-direct-link:hover { background: #d6ff75; color: #17210d; }
.case-canvas-bottom { flex-wrap: wrap; }
@media (max-width:520px) {
  .portfolio-stage-top .case-direct-link { max-width: none; padding: 9px 12px; gap: 12px; font-size: .8125rem; }
  .case-canvas-bottom .case-direct-link { width: 100%; margin-top: 8px; }
}
.portfolio-stage .work-panel { min-height: 1080px; }
.portfolio-stage .case-canvas { padding: 22px; }
.portfolio-stage .case-canvas-top { display: none; }
.portfolio-stage .case-browser { margin: 0 0 24px; width: 100%; }
.portfolio-stage .case-canvas-bottom { font-size: .75rem; }
.portfolio-stage .case-discipline { display: none; }
.portfolio-stage .case-details { gap: 32px; margin-top: 40px; }
.portfolio-stage .case-details h3 { font-size: clamp(1.9rem,2.55vw,2.75rem); }
.portfolio-stage .case-details .eyebrow { font-size: .75rem; }
.portfolio-stage .case-details .button { gap: 12px; padding-left: 17px; font-size: .8rem; }
.portfolio-stage .gamehub-stage { margin-top: 0; min-height: 480px; }
.portfolio-stage .gamehub-cover { padding: clamp(24px,4vw,65px); }
.portfolio-stage .gamehub-cover h3 { font-size: clamp(3.2rem,6vw,6rem); }
.portfolio-stage .ciola-demo { margin-top: 0; }
.portfolio-stage .ciola-scene { height: 550px; min-height: 550px; }
.portfolio-stage .ciola-scene-copy { width: 88%; padding: 35px; }
.portfolio-stage .ciola-scene-copy h3 { font-size: clamp(2rem,3.3vw,3.2rem); }
.portfolio-stage .ciola-controls { gap: 20px; padding: 18px 22px; }

.intent { padding: 0; overflow: visible; }
.intent-sticky { padding: 130px 0 90px; background: var(--paper); overflow: clip; }
.motion-ready .intent { height: 230svh; }
.motion-ready .intent-sticky { position: sticky; top: 0; min-height: 760px; height: 100svh; display: flex; align-items: center; padding: 130px 0 60px; }
.intent .section-index { margin-bottom: clamp(25px,5svh,65px); }
.intent-track { position: relative; isolation: isolate; }
.intent-sequence { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.intent-highlight { display: none; position: absolute; top: 0; left: -24px; right: -24px; height: 110px; background: #c1f731; border-radius: 4px; pointer-events: none; }
.motion-ready .intent-highlight { display: block; }
.intent-line { position: relative; display: flex; align-items: baseline; gap: 27px; border-bottom: 1px solid #34492525; padding: 17px 0 23px; }
.intent-number { color: #758168; font-size: .8rem; flex: 0 0 24px; }
.intent-phrase { color: #26331c; font-size: clamp(2.65rem,5.9vw,6.1rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 600; }
.intent-phrase em { font-family: Georgia,serif; font-style: italic; color: #65853b; font-weight: 400; }
.intent-word-note { font-size: .75rem; color: #758168; margin-left: auto; padding-left: 20px; }
.intent-line::before { display: none; }
.intent-bottom { display: flex; align-items: center; justify-content: space-between; gap: 45px; margin-top: 40px; }
.intent-bottom > p { font-size: 1rem; line-height: 1.7; color: #657357; max-width: 540px; }
.intent-link { display: flex; align-items: center; gap: 35px; flex-shrink: 0; color: #314821; font-size: .875rem; padding: 12px 0; border-bottom: 1px solid #5d773f70; }
.intent-link span { font-size: 1.3rem; }
.intent-progress { height: 2px; margin-top: 38px; background: #3f56271a; }
.intent-progress i { height: 100%; width: 100%; display: block; background: #6d9334; transform: scaleX(var(--intent-progress,0)); transform-origin: left; }

@media (min-width:1600px) { .hero-intro h1 { font-size: 7.8rem; } .hero-object { left: 76%; } }
@media (max-width:1100px) and (min-width:801px) {
  .hero-intro { padding-top: max(265px,calc(var(--hero-stage) - 100svh + 140px)); }
  .hero-intro h1 { font-size: 6.9vw; }
  .hero-object { width: 54vw; left: 76%; }
  .hero-description { font-size: 1rem; max-width: 325px; }
  .hero-action-row { max-width: 340px; }
  .portfolio-layout { grid-template-columns: 240px minmax(0,1fr); gap: 25px; }
  .project-choice { padding: 24px 14px; gap: 8px; }
  .choice-copy strong { font-size: 1.7rem; }
  .portfolio-stage .case-details { grid-template-columns: 1fr; }
}
@media (max-width:980px) {
  .portfolio-layout { grid-template-columns: 1fr; gap: 28px; }
  .portfolio-selector { position: relative; top: auto; }
  .project-menu { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
  .project-choice { grid-template-columns: 1fr 20px; gap: 15px 5px; padding: 18px 15px; }
  .choice-number { grid-column: 1; }
  .choice-arrow { grid-column: 2; grid-row: 1; }
  .choice-copy { grid-column: 1/-1; }
  .choice-copy strong { font-size: 1.65rem; }
  .choice-copy small { font-size: .75rem; }
  .portfolio-controls { margin-top: 17px; }
  .portfolio-selector-note { display: none; }
  .portfolio-stage .work-panel { min-height: 0; }
  .portfolio-stage-top { margin-bottom: 17px; }
  .portfolio-stage .case-details { grid-template-columns: 1fr 1fr; }
  .intent-word-note { display: none; }
  .intent-phrase { font-size: 6.3vw; }
  .intent-bottom { gap: 30px; }
}
@media (max-width:800px) {
  .motion-hero { --hero-stage: max(800px,100svh); }
  .hero-sticky,.motion-ready .hero-sticky { height: var(--hero-stage); min-height: 0; }
  .motion-ready .hero-sticky { top: calc(100svh - var(--hero-stage)); }
  .motion-ready .motion-hero { height: 310svh; }
  .hero-intro { padding-top: 132px; }
  .hero-intro h1 { font-size: clamp(2.9rem,8vw,4.5rem); }
  .hero-intro .eyebrow { font-size: .75rem; margin-bottom: 20px; }
  .hero-description { font-size: 1rem; max-width: 440px; margin-block: 20px; }
  .hero-action-row { max-width: 100%; gap: 14px 25px; }
  .hero-intro .button { min-height: 52px; font-size: .875rem; }
  .hero-work-link { font-size: .875rem; }
  .hero-object { width: 68vw; max-width: 440px; left: 54%; top: 79%; }
  .hero-resolution { bottom: 13%; }
  .hero-resolution .eyebrow { font-size: .75rem; }
  .hero-watermark { font-size: 67vw; top: 57%; }
  .object-tag { font-size: .75rem; padding: 7px 11px; }
  .hero-bottom a { font-size: .75rem; }
  .hero-track { width: 70px; }
  .scene-transition::before { height: 90px; }
  .work-heading { margin-bottom: 45px; }
  .motion-ready .intent { height: 205svh; }
  .motion-ready .intent-sticky { min-height: 750px; height: 100svh; padding: 140px 0 60px; }
  .intent .section-index { font-size: .75rem; margin-bottom: 35px; }
  .intent-line { gap: 18px; padding-block: 22px; }
  .intent-phrase { font-size: clamp(2.3rem,6.3vw,3.1rem); }
  .intent-bottom { flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 32px; }
  .intent-bottom > p { max-width: 600px; }
  .intent-progress { margin-top: 24px; }
  .intent-highlight { inset-inline: -12px; }
}
@media (max-width:520px) {
  .hero-intro { padding-top: 130px; }
  .hero-intro h1 { font-size: clamp(2.7rem,11.4vw,3.7rem); }
  .hero-intro .eyebrow { font-size: .75rem; max-width: 290px; line-height: 1.5; margin-bottom: 18px; }
  .hero-description { max-width: 345px; line-height: 1.6; margin-block: 18px; }
  .hero-action-row { gap: 10px; flex-direction: column; align-items: flex-start; }
  .hero-work-link { font-size: .8rem; }
  .hero-object { width: 80vw; max-width: 380px; left: 54%; top: 86%; }
  .tag-strategy { top: -18%; }
  .tag-tech { bottom: -10%; }
  .tag-design { right: -1%; }
  .object-tag { display: none; }
  .hero-bottom a { max-width: 260px; }
  .hero-bottom { gap: 15px; }
  .hero-track { width: 40px; }
  .hero-resolution { bottom: 17%; }
  .portfolio-selector-top { font-size: .75rem; padding-bottom: 17px; }
  .project-menu { grid-template-columns: 1fr 1fr; gap: 10px; }
  .project-choice { padding: 17px; min-height: 140px; }
  .choice-copy strong { font-size: 1.8rem; }
  .choice-copy small { font-size: .75rem; }
  .portfolio-controls { margin-top: 20px; }
  .portfolio-stage-top { font-size: .8rem; align-items: flex-start; }
  .portfolio-stage-top a { gap: 10px; max-width: 150px; }
  .portfolio-stage .case-canvas { padding: 12px; }
  .portfolio-stage .case-details { grid-template-columns: 1fr; gap: 27px; }
  .portfolio-stage .case-details h3 { font-size: 2.25rem; }
  .portfolio-stage .case-details .button { font-size: .875rem; }
  .portfolio-stage .case-canvas-bottom { font-size: .75rem; }
  .portfolio-stage .ciola-scene-copy { padding: 25px 20px; width: 100%; }
  .portfolio-stage .ciola-scene-copy h3 { font-size: 2rem; }
  .portfolio-stage .ciola-controls { padding: 17px; }
  .portfolio-stage .gamehub-cover { padding: 24px 17px; }
  .portfolio-stage .gamehub-cover h3 { font-size: 3.25rem; }
  .intent .section-index > span:last-child { display: none; }
  .motion-ready .intent-sticky { min-height: 810px; }
  .intent-line { align-items: flex-start; gap: 12px; padding: 20px 0; }
  .intent-number { flex-basis: 20px; padding-top: 7px; }
  .intent-phrase { font-size: clamp(2.35rem,9.3vw,3rem); max-width: 10em; }
  .intent-phrase em { display: block; }
  .intent-bottom { margin-top: 25px; gap: 17px; }
  .intent-bottom > p { font-size: .9375rem; }
}
@media (max-height:739px) {
  .motion-ready .motion-hero { height: auto; }
  .hero-sticky,.motion-ready .hero-sticky { height: max(940px,var(--hero-stage)); position: relative; top: auto; }
  .hero-intro { padding-top: 180px; }
  .motion-ready .intent { height: auto; }
  .intent-sticky,.motion-ready .intent-sticky { position: relative; height: auto; min-height: 0; padding: 110px 0 85px; }
  .portfolio-selector { position: relative; top: auto; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-hero,.motion-ready .motion-hero,.intent,.motion-ready .intent { height: auto; }
  .hero-sticky,.motion-ready .hero-sticky { position: relative; top: auto; }
  .intent-sticky,.motion-ready .intent-sticky { position: relative; height: auto; min-height: 0; padding: 120px 0 90px; }
  .scene-transition::before { display: none; }
  .intent-line::before { display: none; }
}