@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--black:#11120f;--white:#f3f2e9;--yellow:#eeff00;--muted:#8f9185;--line:#33362b;--heading-font:Manrope,Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--black);color:var(--white);scrollbar-gutter:stable}
body{margin:0;font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}
::selection{background:var(--yellow);color:var(--black)}
[hidden]{display:none!important}
.page{width:100%;max-width:1800px;min-height:100svh;padding:0 4.15vw;margin:0 auto;display:flex;flex-direction:column}
.header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;flex-shrink:0}
.identity{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:-.02em}
.identity-mark{width:31px;height:31px;color:var(--yellow)}
.contact-pill{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:40px;min-height:39px;padding:10px 15px;font-size:11px;transition:border-color .2s,color .2s}
.contact-pill:hover{border-color:var(--yellow);color:var(--yellow)}
.contact-pill>span:last-child{font-size:15px;margin-left:10px}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--yellow)}
main{flex:1;display:flex;flex-direction:column;justify-content:center}
.heading{position:relative;text-align:center;z-index:2;margin-top:10px}
.eyebrow{margin:0 0 17px;font:400 10px/1.5 Manrope,Arial,sans-serif;letter-spacing:.21em;text-transform:uppercase;color:var(--muted)}
h1{display:inline-block;position:relative;margin:0;font-family:var(--heading-font);font-size:clamp(76px,12.7vw,202px);font-weight:700;line-height:1.03;letter-spacing:-.078em;white-space:nowrap}
h1 .domain{color:var(--yellow)}
h1 sup{position:absolute;right:-25px;top:16%;font-size:16px;line-height:1;letter-spacing:0;color:var(--muted);font-weight:400}
.stage{height:clamp(320px,39vh,410px);display:grid;place-items:center;position:relative;isolation:isolate}
.stage::before{content:'';position:absolute;width:65%;height:70%;left:17.5%;top:16%;background:radial-gradient(ellipse,#e5ff0008,transparent 70%);pointer-events:none}
.hat-float{position:relative;z-index:3;width:min(610px,51vw);animation:float 7s ease-in-out infinite;pointer-events:none;will-change:transform}
.hat-tilt{transform:rotate(-5deg);transition:transform .5s ease-out}
.hero-hat{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 20px #00000045)}
.stage:hover .hat-tilt{transform:rotate(-2deg) translateY(-3px)}
.object-shadow{position:absolute;z-index:0;bottom:2%;width:32%;height:15%;background:#000;filter:blur(18px);border-radius:50%;opacity:.65;animation:shadow 7s ease-in-out infinite}
.orbit{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.orbit svg{height:100%;width:min(800px,73vw);overflow:visible;color:#4b4f33}
.orbit ellipse,.orbit path{stroke:currentColor;stroke-width:.7}
.orbit .inner-orbit{stroke-dasharray:1 10;opacity:.6}
.orbit-dot{fill:var(--yellow);opacity:.7}
.side-note{position:absolute;z-index:4;top:51%;margin:0;color:var(--muted);font-size:10px;letter-spacing:.06em}
.side-note.left{left:4px}.side-note.right{right:4px;text-align:right}
.registration{position:absolute;bottom:14px;font:19px/1 Arial,sans-serif;color:#60664a}
.registration.left{left:4px}.registration.right{right:4px}
.offer{width:100%;max-width:850px;margin:16px auto 45px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:4}
.pitch{margin:0;font-size:clamp(18px,1.65vw,25px);line-height:1.5;letter-spacing:-.04em}
.muted{color:var(--muted)}
.work-entry{flex-shrink:0;text-align:center}
.works-button{display:flex;align-items:center;justify-content:space-between;gap:35px;min-width:265px;min-height:62px;padding:17px 22px;border:0;border-radius:8px;background:var(--yellow);color:var(--black);font-size:14px;font-weight:700;transition:transform .2s,background .2s}
.works-button:hover{transform:translateY(-3px);background:#f4ff6b}
.button-end{display:flex;align-items:center;gap:18px}.button-end svg{width:22px;height:22px}
.work-count{font-size:9px;border:1px solid #11120f55;border-radius:5px;padding:3px 4px;line-height:1}
.work-note{font-size:9px;color:var(--muted);margin:11px 0 0}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);min-height:68px;flex-shrink:0;color:var(--muted);font-size:10px}
footer>span:first-child{font-size:9px;letter-spacing:.08em}
.footer-center{font-size:9px;letter-spacing:.08em}
.email-link{display:flex;gap:18px;align-items:center;color:var(--white);font-size:12px;transition:color .2s}.email-link:hover{color:var(--yellow)}
.email-link>span:last-child{font-size:15px}
.noscript-note{text-align:center;color:var(--yellow);font-size:13px;padding:12px}
.gallery{padding:0;width:min(1200px,calc(100% - 64px));max-width:none;max-height:calc(100svh - 64px);border:1px solid var(--line);border-radius:16px;background:var(--black);color:var(--white);box-shadow:0 30px 150px #0008}
.gallery::backdrop{background:#050605cf;backdrop-filter:blur(12px)}
.gallery[open]{animation:gallery-in .3s ease-out}
.gallery-shell{padding:32px}
.gallery-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.gallery-header .eyebrow{margin:0 0 10px;font-size:9px;color:var(--yellow)}
.gallery-header h2{font-family:var(--heading-font);font-size:clamp(26px,3.5vw,46px);line-height:1.1;letter-spacing:-.05em;margin:0;font-weight:400}
.close-button{align-self:flex-start;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:none;transition:border-color .2s,transform .2s}
.close-button svg{width:24px;height:24px}.close-button:hover{border-color:var(--yellow);transform:rotate(90deg)}
.gallery-body{display:grid;grid-template-columns:1.5fr 1fr;gap:40px}
.gallery-visual{min-width:0}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;min-height:36px}
.device-options{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:6px}
.device-options button{border:0;border-radius:3px;background:transparent;color:var(--muted);padding:8px 10px;font-size:10px;min-height:32px}
.device-options button[aria-pressed=true]{background:var(--yellow);color:var(--black)}
.image-open{font-size:10px;color:var(--muted);margin-left:auto}.image-open:hover{color:var(--yellow)}
.project-image-wrap.phone-preview{height:min(54svh,480px)}
.project-image-wrap{position:relative;background:#1a1d15;border:1px solid var(--line);border-radius:8px;height:min(44svh,425px);overflow:hidden}
.project-image-wrap img{position:absolute;inset:20px;display:block;width:calc(100% - 40px);height:calc(100% - 40px);object-fit:contain}
.project-thumbnails{display:flex;gap:10px;margin-top:14px;padding:3px 1px 7px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.thumbnail{position:relative;flex:0 0 76px;width:76px;height:58px;display:flex;align-items:center;justify-content:center;padding:5px;border:1px solid var(--line);border-radius:5px;background:#1a1d15;transition:border-color .2s,background .2s}
.thumbnail img{width:100%;height:100%;object-fit:contain;opacity:.65;transition:opacity .2s}.thumbnail span{position:absolute;left:4px;bottom:3px;font:8px/1 Arial,sans-serif;background:#11120fdd;padding:2px;color:var(--white)}
.thumbnail.selected{border-color:var(--yellow)}.thumbnail.selected img,.thumbnail:hover img{opacity:1}.thumbnail:hover{border-color:var(--white)}
.project-details{display:flex;flex-direction:column;align-items:flex-start;padding:24px 0 0;min-width:0}
.project-category{font-size:9px;letter-spacing:.12em;color:var(--yellow);margin:0 0 24px;text-transform:uppercase}
.project-details h3{font-family:var(--heading-font);font-size:clamp(30px,3vw,45px);font-weight:400;letter-spacing:-.055em;line-height:1.07;margin:0 0 18px;overflow-wrap:anywhere}
.project-description{color:var(--muted);font-size:14px;line-height:1.7;margin:0;max-width:300px;white-space:pre-line}
.project-link{display:flex;gap:20px;align-items:center;color:var(--yellow);font-size:12px;margin-top:26px;padding-bottom:5px;border-bottom:1px solid #eeff0044}
.project-navigation{display:flex;align-items:center;gap:25px;margin-top:auto;padding-top:35px}.project-navigation button{width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:50%;font-size:20px}.project-navigation button:hover{color:var(--yellow);border-color:var(--yellow)}.project-navigation span{font:10px/1 monospace;color:var(--muted)}
.project-contact{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding:20px 0 0;margin-top:25px;font-size:12px;width:100%;color:var(--white)}.project-contact:hover{color:var(--yellow)}
html.gallery-open{overflow:hidden}
body.no-float .hat-float,body.no-float .object-shadow{animation:none}
body.no-orbit .orbit,body.no-orbit .registration,body.no-sideNotes .side-note{display:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shadow{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(.92);opacity:.4}}
@keyframes gallery-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.header{min-height:112px}.offer{max-width:940px;margin-bottom:60px}.hat-float{width:650px}}
@media(min-width:761px) and (max-height:800px){.header{min-height:76px}.heading{margin-top:5px}.heading .eyebrow{margin-bottom:12px}h1{font-size:min(12.7vw,155px)}.stage{height:300px}.hat-float{width:min(550px,47vw)}.offer{margin:12px auto 28px}footer{min-height:58px}}
@media(max-width:1000px){.side-note{font-size:9px}.hat-float{width:min(560px,62vw)}.offer{max-width:720px}.gallery-body{gap:26px;grid-template-columns:1.25fr 1fr}}
@media(max-width:760px){
  .page{padding:0 23px}.header{min-height:84px;gap:12px}.identity{font-size:10px;gap:7px}.identity-mark{width:26px;height:26px}.contact-pill{font-size:9px;gap:7px;padding:8px 11px;min-height:35px}.contact-pill>span:last-child{font-size:13px;margin-left:3px}
  .heading{margin-top:20px}.eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:18px}h1{font-size:16vw;line-height:1.08}h1 sup{right:-15px;top:15%;font-size:10px}
  .stage{height:clamp(235px,34svh,300px)}.hat-float{width:min(480px,100%)}.orbit svg{width:100%;height:auto}.side-note{font-size:8px;top:auto;bottom:9px;letter-spacing:.03em}.side-note.left{left:0}.side-note.right{right:0}.registration{display:none}.object-shadow{width:57%;bottom:7%}
  .offer{flex-direction:column;gap:24px;margin:24px auto 32px;text-align:center}.pitch{font-size:21px;line-height:1.5}.works-button{min-width:270px;min-height:58px}.work-note{font-size:9px;margin-top:12px}
  footer{min-height:67px;gap:12px}.footer-center{display:none}.email-link{font-size:11px;gap:10px}footer>span:first-child{font-size:8px;letter-spacing:.04em}
  .gallery{width:100%;height:100%;max-height:100dvh;max-width:100%;margin:0;border:0;border-radius:0}.gallery-shell{padding:22px;min-height:100%;display:flex;flex-direction:column}.gallery-header{margin-bottom:24px}.gallery-header h2{font-size:29px}.gallery-header .eyebrow{font-size:8px;margin-bottom:10px}.close-button{width:42px;height:42px}.gallery-body{display:flex;flex-direction:column;gap:24px;flex:1}.project-image-wrap{height:35svh;min-height:200px}.project-image-wrap img{inset:15px;width:calc(100% - 30px);height:calc(100% - 30px)}.project-thumbnails{margin-top:10px;gap:8px}.thumbnail{width:66px;height:50px}.project-details{padding:0;display:grid;grid-template-columns:1fr auto;width:100%;gap:0 20px}.project-category{grid-column:1/-1;margin:0 0 12px;font-size:8px}.project-details h3{font-size:30px;margin-bottom:12px;grid-column:1/-1}.project-description{font-size:13px;line-height:1.5;grid-column:1/-1;max-width:none}.project-link{grid-column:1;margin-top:18px;align-self:center;font-size:11px}.project-navigation{grid-column:2;grid-row:4;margin:18px 0 0;padding:0;gap:12px}.project-navigation button{width:40px;height:40px}.project-navigation span{font-size:9px}.project-contact{grid-column:1/-1;margin-top:24px;padding-top:18px;font-size:12px}
}
@media(max-width:380px){.page{padding:0 18px}.identity{font-size:9px}.contact-pill{font-size:8px;padding:8px}.header{min-height:74px}.stage{height:235px}.pitch{font-size:19px}.offer{margin-top:20px;gap:21px}.heading{margin-top:15px}.gallery-shell{padding:18px}.gallery-header h2{font-size:26px}.project-navigation{gap:8px}.project-navigation button{width:36px;height:36px}}
@media(max-width:760px){.preview-toolbar{gap:8px}.device-options button{padding:7px 8px;min-height:32px}.image-open{font-size:9px}.thumbnail{flex-basis:66px}.project-image-wrap.phone-preview{height:52svh;min-height:300px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}