*{box-sizing:border-box}html{background:#101010;color:#fafafa;font-family:Arial,Helvetica,sans-serif}body{margin:0}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #aaa;outline-offset:6px}#story{height:320svh}.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:#101010}.hero{position:absolute;inset:0;z-index:2;background:#101010;overflow:hidden}header{position:absolute;top:4.2%;left:3.8%;right:3.8%;display:flex;justify-content:space-between;align-items:center;z-index:12}.brand{font-size:14px;letter-spacing:.36em}nav{display:flex;gap:30px;align-items:center}nav a,nav button{font-size:11px;letter-spacing:.18em;padding:8px 0}.menu-button{display:none}.title-wrap{position:absolute;left:3.5%;top:13.5%;z-index:4;transform-origin:40% 50%;will-change:transform,opacity}h1{margin:0;font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(110px,min(22.7vw,30svh),360px);line-height:.86;letter-spacing:-.025em}h1 span{display:block}.role{font-weight:700;letter-spacing:.21em;font-size:clamp(16px,2vw,28px);margin:20px 0 9px}.disciplines{font-size:clamp(10px,1.15vw,16px);letter-spacing:.2em;margin:0}footer{position:absolute;bottom:10%;left:3.8%;right:3.8%;display:flex;align-items:end;justify-content:space-between;gap:24px;z-index:9}.offer{font-size:clamp(14px,1.4vw,20px);line-height:1.55;margin:0;font-weight:400}.actions{display:flex;gap:12px}.actions a{border:1px solid #bbb;padding:19px 22px;display:flex;gap:24px;align-items:center;font-size:12px;font-weight:700;white-space:nowrap}.actions .primary{background:#fafafa;color:#111}.actions span{font-size:20px}.scroll{position:absolute;bottom:2.2%;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.25em;z-index:9}.scroll span{display:block;font-size:28px;font-weight:400;margin-top:9px}.spheres{position:absolute;inset:0;pointer-events:none}.back{z-index:3}.front{z-index:6}.sphere{position:absolute;will-change:transform;width:var(--size);left:var(--x);top:var(--y);aspect-ratio:1}.sphere img{width:100%;height:100%;display:block}.portal{position:absolute;inset:0;z-index:10;pointer-events:none;display:none}.portal img{position:absolute;width:25vw;left:75%;top:42%;transform:translate(-50%,-50%)}.project{position:absolute;inset:0;background:#787d68;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:5%;gap:6%;clip-path:circle(0% at 80% 50%);z-index:11;visibility:hidden}.project img{height:88svh;width:100%;object-fit:cover}.eyebrow{font-size:11px;letter-spacing:.2em}.project h2{font-size:clamp(48px,8vw,130px);letter-spacing:-.05em;margin:30px 0 12px}.project-copy>p{letter-spacing:.12em;font-size:12px}.project .note{font-size:16px;line-height:1.7;letter-spacing:0;margin:50px 0}.project button{border-bottom:1px solid #ddd;padding:10px 0}.menu-button{font-size:11px;letter-spacing:.12em}#mobile-nav{position:absolute;top:60px;right:20px;background:#222;padding:24px;z-index:20}#mobile-nav:not([hidden]){display:grid;gap:20px}dialog{background:#161616;color:#fff;border:1px solid #555;max-width:540px;padding:40px;line-height:1.6}dialog::backdrop{background:#000b}dialog .close{position:absolute;right:12px;top:8px;font-size:28px}.intro h1{animation:enter 1.1s cubic-bezier(.2,.7,.2,1) both}.intro .brand{animation:enter .7s both}@keyframes enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){#story{height:250svh}header{top:28px;left:22px;right:22px}.brand{font-size:12px}nav{display:none}.menu-button{display:block}.title-wrap{top:27%;left:5.5%;width:89%}h1{font-size:clamp(84px,25.5vw,178px);line-height:.88}.role{font-size:clamp(12px,3.6vw,20px);letter-spacing:.1em;margin-top:16px}.disciplines{font-size:9px;letter-spacing:.12em;white-space:nowrap}footer{left:5.5%;right:5.5%;bottom:9%;display:block}.offer{font-size:14px;line-height:1.5;margin-bottom:18px;max-width:330px}.desktop-break{display:none}.actions{display:grid;gap:9px}.actions a{padding:12px 16px;justify-content:center;font-size:11px}.actions span{font-size:18px}.scroll{bottom:1.5%;font-size:8px}.scroll span{font-size:22px;margin-top:4px}.project{grid-template-columns:1fr;padding:22px;gap:16px;align-content:center}.project img{height:50svh;grid-row:1}.project h2{font-size:48px;margin:10px 0}.project .note{margin:12px 0;font-size:13px}.project-copy>p{font-size:10px}.project button{font-size:12px}.portal img{width:55vw}}
@media(max-height:700px) and (min-width:701px){.role{margin-top:12px}footer{bottom:11%}.actions a{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.intro h1,.intro .brand{animation:none}#story{height:auto}.stage{position:relative;height:auto;overflow:visible}.hero{position:relative;height:100svh}.project{position:relative;visibility:visible;clip-path:none;min-height:100svh}.stage{display:flex;flex-direction:column}.hero{order:0}.project{order:1}.portal{display:none!important}}
/* Wider editorial letterforms while retaining the lightweight system font. */
h1{transform:scaleX(1.32);transform-origin:left center;letter-spacing:0}
.intro h1{animation:headline-in 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes headline-in{from{opacity:0;transform:translateY(25px) scaleX(1.32)}to{opacity:1;transform:translateY(0) scaleX(1.32)}}
@media(max-width:700px){h1{transform:scaleX(1.25)}.intro h1{animation-name:headline-mobile}@keyframes headline-mobile{from{opacity:0;transform:translateY(20px) scaleX(1.25)}to{opacity:1;transform:translateY(0) scaleX(1.25)}}}
@media(prefers-reduced-motion:reduce){.intro h1{animation:none}}
@media(max-width:700px) and (max-height:700px){.title-wrap{top:20%}h1{font-size:23vw}.role{margin-top:10px}footer{bottom:10%}.offer{font-size:12px;margin-bottom:12px}.actions a{padding:9px 12px}}

/* Optical glass: clear interior, refracted typography, fine curved highlights. */
.sphere{border-radius:50%;isolation:isolate}
.lens-window{position:absolute;inset:2%;border-radius:50%;overflow:hidden;background:rgba(15,16,18,.025);backdrop-filter:blur(.35px);-webkit-backdrop-filter:blur(.35px)}
.lens-copy{position:absolute;background:#101010;pointer-events:none;white-space:nowrap}
.lens-copy h1{width:max-content}
.glass-rim{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(226,238,250,.25);box-shadow:inset 2px 1px 2px #ffffff55,inset -2px -2px 3px #dbe6f53b,inset 9px 0 15px #ffffff05,0 1px 2px #0008;background:radial-gradient(ellipse at 28% 9%,#fff8 0, #fff2 1%,transparent 5%),radial-gradient(ellipse at 78% 88%,#edf5ff55 0,transparent 4%),radial-gradient(circle at 50% 50%,transparent 62%,#b9c9d00a 79%,#ffffff22 91%,transparent 98%)}
.glass-rim:before{content:'';position:absolute;inset:4% 9% 59% 10%;border-radius:50%;border-top:2px solid #ffffffe0;transform:rotate(-28deg);filter:blur(.4px)}
.glass-rim:after{content:'';position:absolute;inset:52% 7% 7% 35%;border-radius:50%;border-bottom:1px solid #ffffff90;transform:rotate(-30deg)}
.rear-glass{opacity:.7}.rear-glass .lens-window{background:transparent}
.portal-glass{position:absolute;width:25vw;aspect-ratio:1;left:75%;top:42%;border-radius:50%;border:1px solid #ffffff70;box-shadow:inset 2px 2px 5px #ffffff80,inset -4px -2px 8px #ffffff30;background:radial-gradient(circle,transparent 65%,#fff1 96%,#fff5 99%);backdrop-filter:blur(1px)}
/* The letters never travel: only the reveal boundary moves upward. */
.intro h1{animation:none!important}
.intro h1 span{animation:mask-reveal 1.35s cubic-bezier(.22,.65,.25,1) both;clip-path:inset(0 -3% -3% -3%)}
.intro h1 span:nth-child(2){animation-delay:.12s}
@keyframes mask-reveal{from{clip-path:inset(100% -3% -3% -3%)}to{clip-path:inset(0 -3% -3% -3%)}}
@media(max-width:700px){.portal-glass{width:55vw}.glass-rim:before{border-top-width:1px}}
@media(prefers-reduced-motion:reduce){.intro h1 span{animation:none!important;clip-path:none}}
.glass-rim{overflow:hidden}
.glass-rim:before{inset:4% 14% 40% 6%;transform:rotate(-32deg);border-top-color:#ffffffb0}
.glass-rim:after{inset:39% 5% 5% 22%;border-bottom-color:#ffffff80}

/* Reference-matched rendered glass surface over live refracted lettering. */
.sphere .bubble-surface{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;pointer-events:none}
.rear-glass{opacity:1}.lens-window{inset:4%;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent}
.portal-glass{border:0;box-shadow:none;background: url('assets/bubble.webp') center/contain no-repeat;mix-blend-mode:screen;backdrop-filter:none}

/* Direct HERO-to-gallery flow: no duplicate gateway or pinned blank slide. */
#story{height:100svh}.stage{position:relative;height:100svh}
/* Mobile HERO uses document flow so enlarged text and short screens stay readable. */
@media(max-width:700px){
 #story{height:auto;min-height:100svh}.stage{height:auto;min-height:100svh}
 .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:110px 5.5% 22px;overflow:hidden}
 .hero>.title-wrap{position:relative;inset:auto;width:100%;margin:clamp(8px,5svh,48px) 0 0;flex-shrink:0}
 .hero>.title-wrap h1{font-size:clamp(80px,25.5vw,178px);line-height:.86}
 .hero .role{font-size:clamp(13px,3.4vw,24px);line-height:1.3;margin:20px 0 10px}
 .hero .disciplines{font-size:clamp(10px,1.8vw,12px);line-height:1.6;white-space:normal;overflow-wrap:normal}
 .hero>footer{position:relative;inset:auto;display:block;margin:26px 0 0;width:100%;flex-shrink:0}
 .hero .offer{font-size:14px;line-height:1.6;max-width:39em;margin:0 0 20px}
 .hero .actions{display:grid;gap:12px}.hero .actions a{min-height:48px;padding:14px 12px;font-size:11px}
 .hero>.scroll{position:relative;inset:auto;transform:none;align-self:center;margin:26px 0 0;padding:0;flex-shrink:0}
 .hero>.spheres.front{z-index:3}.hero>.title-wrap{z-index:4}
}