*{box-sizing:border-box}
html{margin:0;background:#fff;color:#111;scroll-behavior:smooth}
body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a{font:inherit;color:inherit}
a{text-decoration:none}

.hero-section{position:relative;width:100vw;height:100svh;min-height:100dvh;overflow:hidden;background:#101a28;border-radius:0;isolation:isolate;scroll-snap-align:start}
.hero-fallback,.hero-fallback img,.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fallback{z-index:0}.hero-fallback img,.hero-video{object-fit:cover;object-position:center center}.hero-video{z-index:1}.hero-shade{z-index:2;background:rgba(6,14,25,.08);pointer-events:none}
.hero-logo{position:absolute;z-index:3;top:50%;left:50%;display:block;width:clamp(150px,24vw,390px);transform:translate(-50%,-50%);pointer-events:auto}
.hero-logo img{display:block;width:100%;height:auto}

.about-section{position:relative;min-height:100svh;background:#fff;scroll-snap-align:start}
.about-experience{position:relative;width:100%;height:100svh;overflow:hidden;outline:none;cursor:pointer;touch-action:manipulation}
.about-composition,#about-wordfield{position:absolute;inset:0}.about-cluster{position:absolute;left:var(--x);top:var(--y);font-size:clamp(15px,1.72vw,28px);letter-spacing:-.055em;line-height:1.02;white-space:pre}.about-fragment{height:1.02em;transform:translateX(var(--indent,0))}
.about-story[hidden]{display:none}.about-story{position:absolute;inset:0;padding:8vh 5%;display:grid;grid-template-columns:1fr 2fr;gap:30px;align-content:center;cursor:default}.biography{grid-column:2;max-width:830px}.biography h1{font-size:clamp(28px,4.3vw,64px);font-weight:400;letter-spacing:-.065em;line-height:1.03;margin:0 0 4vh}.biography p{font-size:clamp(17px,2vw,28px);letter-spacing:-.035em;line-height:1.28;margin:0 0 2.5vh}.tools{display:flex;flex-wrap:wrap;gap:10px 25px;margin-top:4vh;font-size:13px}

.gallery-section{position:relative;width:100%;height:100svh;min-height:600px;background:#fff;scroll-snap-align:start;overflow:hidden}.gallery-section canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.gallery-section canvas:active{cursor:grabbing}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sr-only:focus-within{width:auto;height:auto;clip-path:none;left:20px;top:20px;z-index:3;background:#fff;padding:15px}.sr-only button{margin:4px}.gallery-section dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}.gallery-section dialog::backdrop{background:transparent}.gallery-section #site-preview-image{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000;box-shadow:0 18px 75px #0003;outline:none}.gallery-section #site-close{position:absolute;right:25px;top:20px;border:0;border-radius:50%;background:#ffffffb3;color:#111;font:26px Arial;width:34px;height:34px;cursor:pointer}.gallery-section #site-preview-name{position:absolute;left:0;right:0;top:calc(50% + var(--preview-half-height,0px) + 18px);margin:0;text-align:center;font-size:12px;letter-spacing:.02em;pointer-events:none}.gallery-section #site-preview-image img,.gallery-section #site-preview-image video{display:block;width:100%;height:100%;object-fit:contain}.site-preview-open{overflow:hidden}.gallery-section canvas{transition:filter 220ms ease}.site-preview-open .gallery-section canvas{filter:blur(5px)}#site-gallery-fallback{position:absolute;top:45%;width:100%;text-align:center}

.featured-section{padding:4vh 2.65vw 6vh;background:#fff;scroll-snap-align:start}.featured-section .section-heading{font-family:'Times New Roman',Georgia,serif;font-size:clamp(18px,2.6vw,51px);font-weight:300;line-height:.9;text-align:center;margin:0;padding:0 0 2vh}.featured-section .work-list{border-top:1px solid #111;border-bottom:1px solid #111}.featured-section .work-row{position:relative;min-height:57px;border-bottom:1px solid #111;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .3s}.featured-section .work-row:last-child{border-bottom:0}.featured-section .work-title{position:relative;z-index:1;display:inline-flex;align-items:center;gap:0;font-family:'Times New Roman',Georgia,serif;font-size:clamp(18px,2.6vw,51px);font-weight:300;line-height:.85;letter-spacing:normal;white-space:nowrap;text-align:center;transition:gap .45s cubic-bezier(.2,.8,.2,1)}.featured-section .word-part{display:inline-block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.featured-section .work-row:hover{background:#fafafa}.featured-section .work-row:hover .work-title{gap:.045em}.featured-section .work-row:hover .word-part:first-child{transform:translateX(-2%)}.featured-section .work-row:hover .word-part:last-child{transform:translateX(2%)}.featured-section .work-thumb{position:relative;z-index:2;display:inline-flex;flex:0 0 auto;width:0;height:clamp(34px,4vw,68px);margin:0;background:#111;color:#fff;align-items:center;justify-content:center;opacity:0;transform:scale(.35);pointer-events:none;transition:width .45s cubic-bezier(.2,.8,.2,1),opacity .25s,transform .5s cubic-bezier(.2,.8,.2,1)}.featured-section .work-row:hover .work-thumb{width:clamp(55px,6.5vw,118px);opacity:1;transform:scale(1)}.featured-section .work-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(10px);transform:scale(1.12);transition:filter .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}.featured-section .work-row:hover .work-thumb img{filter:blur(0);transform:scale(1)}.featured-section .thumb-overlaid:after{display:none}
.contact-row{overflow:visible;z-index:4}.contact-row:hover{background:transparent}.contact-row:hover .work-title{gap:0}.contact-trigger{width:100%;height:100%;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}.contact-trigger:focus-visible{outline:1px solid #111;outline-offset:-4px}.contact-links{position:absolute;z-index:5;top:50%;left:50%;display:flex;align-items:center;gap:clamp(12px,2vw,29px);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.65);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1)}.contact-link{display:grid;place-items:center;width:clamp(19px,2.1vw,32px);height:clamp(19px,2.1vw,32px);transition:transform .25s ease}.contact-link img{display:block;width:100%;height:100%;object-fit:contain}.contact-link:hover{transform:scale(1.14)}.contact-row.is-open .contact-links,.contact-row.is-selecting .contact-links{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.contact-row.is-open .contact-trigger,.contact-row.is-selecting .contact-trigger{opacity:0;transform:scale(.75)}.contact-row.is-selecting .contact-links{transform:translate(-50%,-50%) scale(1.14)}
@media(hover:hover) and (pointer:fine){.contact-row:hover .contact-links,.contact-row:focus-within .contact-links{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.contact-row:hover .contact-trigger,.contact-row:focus-within .contact-trigger{opacity:0;transform:scale(.75)}}

@media(max-width:700px){.about-cluster{font-size:18px;left:var(--mx);top:var(--my)}.about-story{padding:5vh 7%;grid-template-columns:1fr;gap:3vh}.biography{grid-column:1}.biography h1{font-size:32px;margin-bottom:3vh}.biography p{font-size:18px;margin-bottom:2vh}.tools{font-size:12px;margin-top:3vh;gap:8px 18px}.featured-section{padding:2.5vh 5vw 5vh}.featured-section .section-heading{font-size:clamp(14px,3.3vw,28px);padding-bottom:1.5vh}.featured-section .work-row{min-height:35px}.featured-section .work-title{font-size:clamp(12px,3.3vw,28px)}.featured-section .work-thumb{height:21px}.featured-section .work-row:hover .work-thumb{width:33px}.featured-section .word-part{transition:transform .35s}.featured-section .work-row:hover .word-part:first-child{transform:translateX(-3%)}.featured-section .work-row:hover .word-part:last-child{transform:translateX(3%)}.contact-links{gap:14px}.contact-link{width:21px;height:21px}}
@media(max-height:700px){.about-story{padding-top:3vh;padding-bottom:3vh;gap:2vh}.biography h1{font-size:28px;margin-bottom:2vh}.biography p{font-size:16px;margin-bottom:1.8vh}.tools{margin-top:2vh;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.hero-video{display:none}.gallery-section canvas{transition:none}}

/* Keep a visible touch surface and native page-scroll space around the gallery. */
.gallery-interaction{width:100%;height:100%;position:relative;overflow:hidden}
@media(max-width:800px),(pointer:coarse){
  .gallery-section{height:auto;min-height:0;padding:24px clamp(32px,10vw,48px) 48px;touch-action:pan-y pinch-zoom}
  .gallery-interaction{height:clamp(240px,58svh,520px);border:0;border-radius:0;background:#fff}
}

/* The clean still stays visible until a moving frame is ready, including when
   iOS blocks autoplay. Only the separate logo contains branding. */
.hero-video{opacity:0;pointer-events:none;transition:opacity 250ms ease}
.hero-section.is-video-playing .hero-video{opacity:1}
.hero-video::-webkit-media-controls,.hero-video::-webkit-media-controls-start-playback-button{display:none!important}

/* Let the final biography determine its height instead of leaving an empty screen. */
.about-section.is-complete{min-height:0}
.about-section.is-complete .about-experience{height:auto}
.about-section.is-complete .about-story{position:relative;inset:auto;padding-top:clamp(48px,8vh,96px);padding-bottom:32px}
.site-footer{margin:0 4vw;padding:32px 0 48px;border-top:1px solid #111;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;scroll-margin-top:32px}
.footer-contact{position:relative;min-width:140px;min-height:48px}
.footer-contact .work-title,.return-top{font:400 clamp(22px,2.6vw,38px)/1.2 'Times New Roman',Georgia,serif}
.footer-contact .contact-trigger,.return-top{min-height:48px;display:flex;align-items:center;gap:16px}
.footer-contact .contact-trigger{justify-content:flex-start}
.footer-contact .contact-links{left:0;transform:translateY(-50%) scale(.65);transform-origin:left center}
.footer-contact.is-open .contact-links,.footer-contact.is-selecting .contact-links{transform:translateY(-50%) scale(1)}
.contact-link{min-width:44px;min-height:44px}
.contact-link img{max-width:28px;max-height:28px}
.site-footer a:focus-visible,.site-footer button:focus-visible{outline:2px solid #111;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.footer-contact:hover .contact-links,.footer-contact:focus-within .contact-links{transform:translateY(-50%) scale(1)}}
#brand-films{scroll-margin-top:32px}
@media(max-width:700px){
 .about-section.is-complete .about-story{padding-top:40px;padding-bottom:24px}
 .site-footer{margin:0 5vw;padding-bottom:32px;gap:16px}
 .footer-contact .work-title,.return-top{font-size:22px;gap:8px}
 .footer-contact{min-width:110px}
}

.hero-section::after{content:"";position:absolute;inset:auto 0 0;height:clamp(70px,12vh,140px);z-index:4;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.3) 35%,#fff);pointer-events:none}
.hero-logo{cursor:pointer}
.hero-logo:focus-visible{outline:2px solid white;outline-offset:4px}
.hero-scroll{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;color:#111}
.hero-scroll svg{width:16px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hero-scroll:focus-visible{outline:2px solid #111;outline-offset:2px}

/* Keep the arrow over the image; the feather starts beneath its hit area. */
.hero-section{--fade-height:clamp(80px,13svh,150px)}
.hero-section::after{height:var(--fade-height);background:linear-gradient(to bottom,rgba(var(--page-rgb),0) 0%,rgba(var(--page-rgb),.025) 12%,rgba(var(--page-rgb),.1) 27%,rgba(var(--page-rgb),.26) 43%,rgba(var(--page-rgb),.5) 60%,rgba(var(--page-rgb),.76) 76%,rgba(var(--page-rgb),.94) 90%,var(--page-bg) 100%)}
.hero-scroll{bottom:calc(var(--fade-height) + 2px);color:white}

.featured-section .section-heading{font-size:clamp(26px,3.2vw,58px);font-weight:600;line-height:1.1;padding-bottom:24px}
@media(max-width:700px){.featured-section .section-heading{font-size:clamp(22px,4.6vw,32px);padding-bottom:20px}}