/* Gamsung motion: soft typographic atmosphere supporting the foreground copy. */
.hero-section{height:100svh;min-height:680px;align-items:flex-start;text-align:left;padding:130px max(6vw,24px) 130px;isolation:isolate;background:#0d1117}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0d1117}


.hero-content{width:100%;max-width:1400px;margin:auto;z-index:1}
.hero-badge{border:0;padding:0;letter-spacing:.22em;font-size:.7rem;color:#e0c3a3;margin-bottom:40px}
.hero-kicker{font-size:.74rem;letter-spacing:.18em;color:#d9dfe7;margin-bottom:16px}
.hero-title{font-size:clamp(2.8rem,5.8vw,6.4rem);line-height:1.23;letter-spacing:-.055em;margin-bottom:28px;font-weight:600}
.hero-line{display:block;overflow:hidden;padding-bottom:.08em}.hero-line>span{display:block}.hero-title em{color:#e2b98e;font-style:normal}
.hero-desc{margin:0 0 32px;max-width:490px;color:#d0d6df;font-size:1rem;line-height:1.8;word-break:keep-all}
.hero-section .btn-play-trigger{border-color:#b99872;background:rgba(13,17,23,.2);backdrop-filter:blur(6px)}
.hero-bottom{position:absolute;inset:auto max(6vw,24px) 32px;display:flex;gap:28px;align-items:center;justify-content:space-between;z-index:2}
.scroll-cue{display:flex;align-items:center;gap:22px;text-decoration:none;color:#fff;font-size:.65rem;letter-spacing:.16em}.scroll-cue span{font-size:24px;color:#e2b98e}
.hero-caption{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#b9c3d0;font-size:.8rem}#motion-toggle{color:#e0d6cb;border:1px solid #81715f;background:rgba(13,17,23,.4);border-radius:30px;padding:12px 18px;font:inherit;font-size:.75rem;cursor:pointer;min-height:44px}
header{transition:background .3s,border-color .3s}header.at-top{background:rgba(7,14,25,.2);border-color:rgba(255,255,255,.13)}
.custom-cursor{display:none;width:32px;height:32px;background:transparent;border:1px solid #e2b98e;mix-blend-mode:normal;top:0;left:0;opacity:0;will-change:transform}.custom-cursor.hovered{width:70px;height:70px;background:rgba(18,23,31,.75);backdrop-filter:blur(5px)}.cursor-text{color:#e2b98e}.custom-cursor.visible{opacity:1}
@media(hover:hover) and (pointer:fine) and (min-width:901px){.custom-cursor{display:flex;align-items:center;justify-content:center}}
.metric-value{font-variant-numeric:tabular-nums}
.scroll-section{padding:100px 0 60px;overflow:clip}.section-headline{align-items:flex-end}.section-headline h2{font-size:clamp(2rem,3.4vw,3.5rem);letter-spacing:-.04em}
.portfolio-stage{overflow:hidden}.horizontal-wrapper{display:flex;flex-direction:row;max-width:none;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;gap:32px;padding:8px max(6vw,24px) 24px;scroll-padding-inline:max(6vw,24px);overscroll-behavior-x:contain;align-items:stretch}
.interactive-card{flex:0 0 min(68vw,880px);width:auto;height:auto;min-width:0;border-radius:6px;scroll-snap-align:start;transition:transform .3s ease,border-color .3s;display:flex;flex-direction:column;--tilt-x:0deg;--tilt-y:0deg;transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.card-thumb{aspect-ratio:1.85;height:auto;flex:none}.card-thumb img{display:block;object-position:center;transform:scale(1.015)}.interactive-card:hover .card-thumb img{transform:scale(1.045)}.card-info{min-height:0;padding:28px 32px 12px}.card-title{font-size:clamp(1.2rem,2vw,1.8rem)}.card-meta{max-width:620px;color:#b8c0ca}.project-open{align-self:stretch;display:flex;justify-content:space-between;align-items:center;margin:12px 32px 26px;padding:14px 0 0;border:0;border-top:1px solid #3c454e;background:none;color:#e2b98e;text-align:left;font:inherit;font-size:.85rem;cursor:pointer;min-height:44px}.project-open span{font-size:22px}
.portfolio-controls{display:flex;gap:28px;align-items:center;margin:28px max(6vw,24px) 0}.portfolio-controls p{font-size:.8rem;letter-spacing:.15em;color:#cbb091;white-space:nowrap;font-variant-numeric:tabular-nums}.portfolio-progress{height:1px;flex:1;background:#3a424d}.portfolio-progress span{display:block;height:100%;width:33.333%;background:#e2b98e;transform-origin:left}.portfolio-arrows{display:flex;gap:10px}.portfolio-arrows button{width:48px;height:48px;border:1px solid #5c626a;background:transparent;color:#fff;border-radius:50%;font-size:22px;cursor:pointer}.portfolio-arrows button:disabled{opacity:.3;cursor:default}.portfolio-arrows button:hover:enabled{background:#c59a6f;color:#0d1117}
.portfolio-pinned .horizontal-wrapper{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform}.portfolio-pinned .interactive-card{width:min(68vw,880px);flex-basis:min(68vw,880px)}
.project-dialog{position:fixed;inset:0;margin:auto;width:min(880px,92vw);max-height:90dvh;border:1px solid #6a5845;border-radius:8px;background:#111923;color:#fff;padding:0;overscroll-behavior:contain}.project-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}.project-dialog>img{width:100%;max-height:45dvh;object-fit:cover;display:block}.project-close{position:sticky;float:right;top:16px;margin:16px 16px -60px 0;z-index:1;min-height:44px;padding:10px 18px;border:1px solid #b99872;border-radius:30px;background:#0d1117;color:#fff;cursor:pointer;font:inherit}.project-dialog-copy{padding:32px}.project-dialog h2{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:20px;line-height:1.4}.project-dialog-copy>p:not(.eyebrow){line-height:1.9;color:#bcc6d1}.project-source{font-size:.75rem;margin-top:22px}.project-inquire{display:inline-block;color:#e2b98e;margin-top:22px;padding:12px 0;text-underline-offset:6px}
@media(max-width:900px){.hero-section{min-height:640px}.hero-title{font-size:clamp(2.6rem,6.6vw,4.5rem)}.hero-caption{display:none}.interactive-card{flex-basis:84vw}.horizontal-wrapper{max-width:none;gap:20px}.card-info{padding:24px 24px 10px}.project-open{margin-inline:24px}.scroll-section{padding-block:72px 44px}.section-headline{align-items:flex-start}}
@media(max-width:600px){.hero-section{height:100svh;min-height:620px;padding:120px 24px 125px}.hero-badge{font-size:.58rem;letter-spacing:.15em;margin-bottom:32px}.hero-kicker{font-size:.6rem;letter-spacing:.12em}.hero-title{font-size:clamp(1.8rem,7.3vw,2.7rem);margin-bottom:24px;line-height:1.35}.hero-desc{font-size:.9rem;max-width:310px;margin-bottom:26px}.hero-bottom{inset-inline:24px;bottom:24px;gap:12px}.scroll-cue{font-size:.5rem;letter-spacing:.1em;gap:10px}#motion-toggle{font-size:.65rem;padding:10px 12px}.hero-section .btn-play-trigger{padding:14px 22px;font-size:.85rem}.horizontal-wrapper{gap:16px;padding-inline:24px;scroll-padding-inline:24px}.interactive-card{flex-basis:calc(100vw - 64px)}.card-thumb{aspect-ratio:1.4}.card-info{padding:22px 20px 8px}.card-title{font-size:1.2rem}.card-meta{font-size:.85rem}.project-open{margin:12px 20px 22px}.portfolio-controls{margin-inline:24px;gap:18px}.portfolio-arrows button{width:44px;height:44px}.portfolio-controls p{font-size:.65rem}.project-dialog-copy{padding:24px}.section-headline>p{font-size:.85rem!important}}
@media(prefers-reduced-motion:reduce){.hero-line>span,.hero-content,.hero-media,.reveal{transform:none!important;opacity:1!important}.interactive-card{transform:none!important}.card-thumb img{transform:none!important}.horizontal-wrapper{scroll-behavior:auto}}
@media(forced-colors:active){.custom-cursor{display:none}.portfolio-progress span{background:Highlight}button,a{forced-color-adjust:auto}}
/* Keep the pinned gallery and its controls fully inside short desktop viewports. */
.portfolio-pinned{padding-top:28px;padding-bottom:24px}.portfolio-pinned .section-headline{padding-bottom:22px}.portfolio-pinned .section-headline h2{font-size:2.4rem}.portfolio-pinned .section-headline>div>p{margin-bottom:8px}.portfolio-pinned .card-thumb{height:clamp(150px,26vh,300px);aspect-ratio:auto}.portfolio-pinned .card-info{padding:20px 28px 8px}.portfolio-pinned .card-title{font-size:1.5rem}.portfolio-pinned .project-open{margin:8px 28px 18px;padding-top:10px}.portfolio-pinned .portfolio-controls{margin-top:18px}
.hero-section .btn-play-trigger{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s}



/* A single photograph is revealed through three independently animated text masks. */
.hero-media{inset:0;pointer-events:none}
.hero-bg-overlay{z-index:-1;background:linear-gradient(90deg,#0d1117 0%,rgba(13,17,23,.92) 25%,rgba(13,17,23,.2) 49%,transparent 68%),linear-gradient(0deg,#0d1117,transparent 18%,transparent 82%,rgba(13,17,23,.3))}
.type-scene{position:absolute;right:1.5%;top:50%;width:46%;transform:translateY(-46%);opacity:.6}
.type-composition{display:block;width:100%;height:auto;overflow:visible}
.type-composition .type-word{font-family:'Nunito',ui-rounded,'Arial Rounded MT Bold',sans-serif;font-weight:800;font-size:275px;letter-spacing:-18px;fill:#fff;color:#fff;-webkit-text-fill-color:#fff;transform-box:fill-box;transform-origin:center;animation:type-float 20s ease-in-out infinite alternate,type-breathe 18s ease-in-out infinite;will-change:transform,opacity}
.type-composition .type-data{animation-delay:-6s,0s}.type-composition .type-sense{animation-duration:24s,18s;animation-delay:-12s,-12s}.type-composition .type-impact{animation-duration:27s,18s;animation-delay:-4s,-6s}
.type-glow{position:absolute;right:0;top:10%;width:60%;height:85%;border-radius:50%;background:radial-gradient(ellipse,rgba(192,152,112,.08),rgba(180,139,112,.025) 42%,transparent 70%);animation:glow-breathe 22s ease-in-out infinite alternate}
.type-curves{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b59b7c;stroke-width:.8;opacity:.06;animation:curve-drift 26s ease-in-out infinite alternate}
.backdrop-paused .type-word,.backdrop-paused .type-glow,.backdrop-paused .type-curves{animation-play-state:paused}
/* Only the text mask drifts; the shared photograph stays fixed. */
@keyframes type-float{0%{transform:translate(-4%,-5%)}25%{transform:translate(1%,-2%)}50%{transform:translate(4%,3%)}75%{transform:translate(-1%,5%)}100%{transform:translate(-4%,1%)}}
@keyframes type-breathe{0%,100%{opacity:1}33.333%,66.667%{opacity:.28}}
@keyframes glow-breathe{from{opacity:.55;transform:scale(.96)}to{opacity:.95;transform:scale(1.05)}}
@keyframes curve-drift{from{transform:translate(0,0)}to{transform:translate(-10px,10px)}}
@media(min-width:1600px){.type-scene{right:2%;width:46%}}
@media(max-width:1100px) and (min-width:601px){.type-scene{width:51%;right:-5%}}
@media(max-width:600px){.type-scene{width:100%;right:-25%;top:53%;opacity:.6}.type-glow{width:115%;right:-45%;top:22%;height:70%}.hero-bg-overlay{background:linear-gradient(90deg,rgba(13,17,23,.85),rgba(13,17,23,.5) 40%,rgba(13,17,23,.02)),linear-gradient(0deg,#0d1117,transparent 24%,transparent 80%,rgba(13,17,23,.6))}.type-curves{opacity:.04}}
@media(prefers-reduced-motion:reduce){.type-composition .type-word,.type-glow,.type-curves{animation:none!important;will-change:auto}}
@media(forced-colors:active){.hero-media{display:none}}

/* Keep the backdrop anchored to the viewport while the landing content scrolls above it. */
body>.hero-media{position:fixed;inset:0;z-index:0;isolation:isolate;overflow:hidden;pointer-events:none;transform:none}.hero-media>.hero-bg-overlay{z-index:2}body>section,body>.works-page-link,body>footer{position:relative;z-index:1}.hero-section{background:transparent;isolation:auto}.metric-section{background:rgba(17,22,31,.72)}#motion-toggle{position:fixed;right:24px;bottom:20px;z-index:90}body.modal-open #motion-toggle{visibility:hidden}@media(max-width:600px){#motion-toggle{right:24px;bottom:20px}}

/* Reserve a flow position above the footer so the motion control never covers copy. */
.motion-control-dock{position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:center;min-height:80px;padding:16px 24px}#motion-toggle.is-docked{position:static}body.modal-open #motion-toggle{visibility:hidden}