:root{font-family:Arial,Helvetica,sans-serif;color:#1c253f;background:#edf0ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}header{position:absolute;z-index:4;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:32px 4%;color:white}header.dark{position:relative;background:#1c253f}.brand{font-size:1.8rem;letter-spacing:-.05em}nav{display:flex;gap:30px;font-size:1.1rem}.hero{height:100svh;min-height:850px;max-height:1300px;position:relative;overflow:hidden;background:#172c49 url('assets/hero.jpg') center/cover;color:white}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111d30 0%,rgba(17,29,48,.96) 25%,rgba(17,29,48,.58) 55%,rgba(17,29,48,.1) 100%)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(0deg,#111b30,transparent)}.hero-text{position:relative;z-index:2;padding:145px 4% 0;max-width:760px;font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.1;letter-spacing:-.055em}.hero-text h1,.hero-text p{font:inherit;margin:0 0 44px}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:100px;padding:17px 30px;min-height:62px;font-size:1rem;letter-spacing:0}.button:hover{background:#1c253f;color:white;text-decoration:none}.button.inverse{border-color:#dca0f4;font-size:1.1rem}.button.inverse:hover{background:#dca0f4;color:#14203a}.hero-word{position:absolute;z-index:2;bottom:-.1em;left:-.03em;white-space:nowrap;font-size:clamp(8rem,16vw,17rem);letter-spacing:-.075em;line-height:.78}.services{text-align:center;padding:120px 5% 100px}.services h2,.about h2{font-size:clamp(3.5rem,5vw,5rem);font-weight:400;letter-spacing:-.05em;margin:0 0 100px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7%;max-width:1350px;margin:auto}.cards article{display:flex;align-items:center;flex-direction:column}.circle{width:min(100%,330px);aspect-ratio:1;border-radius:50%;background:url('assets/music.jpg') no-repeat;background-size:448% auto}.c1{background-position:7.5% 42%}.c2{background-position:50% 42%}.c3{background-position:92.5% 42%}.cards h3{font-size:1.5rem;font-weight:700;line-height:1.35;min-height:2.6em;margin:25px 0 5px}.cards p{font-size:1.25rem;line-height:1.5;min-height:4.5em;margin:0 0 25px}.cards .button{width:100%;max-width:330px}.about{background:#b4c3ca url('assets/about-bg.jpg') center/cover;min-height:1100px;padding:80px 24px 0;display:flex;justify-content:center}.about-panel{background:#edf0ff;max-width:790px;width:100%;padding:100px 10% 100px;text-align:center}.about h2{margin-bottom:50px}.portrait{width:246px;height:246px;border-radius:50%;margin:0 auto 55px;background:url('assets/about-bg.jpg') 50% 39%/600% auto}.about p{font-size:1.25rem;line-height:1.55;margin:0 0 28px}.about a{font-size:1.2rem}footer{display:flex;justify-content:space-between;gap:20px;background:#1c253f;color:white;padding:35px 5%}.works{max-width:1600px;margin:auto;padding:100px 5% 130px}.works small{letter-spacing:.2em;font-size:.95rem}.works h1{font-size:clamp(3.5rem,8vw,8rem);font-weight:500;letter-spacing:-.075em;line-height:.98;max-width:900px;margin:24px 0}.intro{font-size:1.25rem;line-height:1.5;max-width:650px;margin-bottom:70px}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 28px}.wide{grid-column:1/-1}.work-image{aspect-ratio:16/9;position:relative;background:#273552;overflow:hidden}.work-image span{position:absolute;top:24px;left:28px;color:white;font-size:1.5rem}.w1{background:url('assets/hero.jpg') center 42%/cover}.w2{background:url('assets/music.jpg') 8% 43%/440% auto}.w3{background:url('assets/music.jpg') 50% 43%/440% auto}.work-item h2{font-weight:400;font-size:1.8rem;margin:20px 0 8px}.work-item p{margin:0}.end{text-align:center;padding-top:130px}.end h2{font-size:clamp(2.5rem,5vw,5rem);font-weight:400}@media(max-width:750px){header{padding:22px 5%;align-items:flex-start}.brand{font-size:1.4rem}nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;max-width:70%;font-size:.87rem}.hero{height:780px;min-height:0;background-position:58% center}.hero:before{background:linear-gradient(90deg,rgba(12,24,43,.95),rgba(12,24,43,.68) 75%,rgba(12,24,43,.35))}.hero-text{padding:155px 5% 0;font-size:clamp(2rem,8vw,3.4rem)}.hero-text h1,.hero-text p{margin-bottom:35px}.hero-word{font-size:7rem}.services{padding:75px 6%}.services h2{margin-bottom:55px}.cards{grid-template-columns:1fr;gap:75px}.circle{width:min(80vw,330px)}.cards h3,.cards p{min-height:0}.about{min-height:0;padding:50px 16px 0}.about-panel{padding:70px 8% 90px}.about h2{margin-bottom:40px}.about p{font-size:1.05rem}.portrait{width:190px;height:190px}.works{padding:80px 5%}.work-grid{grid-template-columns:1fr;gap:40px}.wide{grid-column:auto}.end{padding-top:80px}footer{flex-wrap:wrap}}

/* Original portfolio imagery supplied by the artist */
.hero{background-image:url('assets/hero.jpg')}
.circle{background-size:cover;background-position:center}
.c1{background-image:url('assets/music.jpg');background-position:56% center}
.c2{background-image:url('assets/event.jpg');background-position:56% center}
.c3{background-image:url('assets/art.jpeg');background-position:center}
.about{background-image:url('assets/about-bg.jpg')}
.portrait{background-image:url('assets/portrait.jpeg');background-size:cover;background-position:center 32%}
.w1{background-image:url('assets/hero.jpg')}
.w2{background-image:url('assets/music.jpg');background-size:cover;background-position:56% center}
.w3{background-image:url('assets/event.jpg');background-size:cover;background-position:center}
@media(max-width:750px){.hero{background-position:56% center}}

/* Continuous title: moves right and re-enters from the left edge. */
.hero-marquee{position:absolute;z-index:2;bottom:0;left:0;width:100%;overflow:hidden;pointer-events:none}
.hero-marquee-track{display:flex;width:max-content;animation:marquee-right 36s linear infinite;will-change:transform}
.hero-marquee .hero-word{position:static;display:block;flex:none;font-weight:700;padding-right:.28em;white-space:nowrap;font-size:clamp(8rem,16vw,17rem);letter-spacing:-.075em;line-height:.83}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:750px){.hero-marquee .hero-word{font-size:7rem}.hero-marquee-track{animation-duration:28s}}
@media(prefers-reduced-motion:reduce){.hero-marquee-track{animation:none;transform:none}}

/* Quiet entrance on the first screen. The running headline above stays untouched. */
@keyframes reveal-up{from{opacity:0;transform:translateY(28px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero-text h1,.hero-text p,.hero-text .button{animation:reveal-up .85s cubic-bezier(.2,.7,.2,1) both}
.hero-text h1{animation-delay:.12s}
.hero-text p:nth-of-type(1){animation-delay:.3s}
.hero-text p:nth-of-type(2){animation-delay:.48s}
.hero-text .button{animation-delay:.68s}
header nav a{transition:opacity .25s ease,transform .25s ease}
header nav a:hover{opacity:.75;transform:translateY(-3px)}
.cards .circle{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.cards article:hover .circle{transform:scale(1.035);box-shadow:0 16px 35px rgba(24,34,66,.14)}
@media(prefers-reduced-motion:reduce){.hero-text h1,.hero-text p,.hero-text .button{animation:none}.cards .circle,header nav a{transition:none}}

/* About: a staged entrance as the third screen enters the viewport. */
@keyframes about-panel-in{from{opacity:.65;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
@keyframes about-title-in{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes about-portrait-in{from{opacity:0;transform:scale(.82) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes about-copy-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.about.is-visible .about-panel{animation:about-panel-in .8s cubic-bezier(.2,.7,.2,1) both}
.about.is-visible h2{animation:about-title-in .75s .12s both}
.about.is-visible .portrait{animation:about-portrait-in .9s .3s cubic-bezier(.18,.8,.25,1.15) both}
.about.is-visible p:first-of-type{animation:about-copy-in .7s .5s both}
.about.is-visible p:nth-of-type(2){animation:about-copy-in .7s .66s both}
.about.is-visible .about-panel>a{display:inline-block;animation:about-copy-in .7s .82s both}
.about .portrait{transition:box-shadow .35s ease}
.about .portrait:hover{box-shadow:0 15px 35px rgba(25,34,65,.22)}
@media(prefers-reduced-motion:reduce){.about.is-visible .about-panel,.about.is-visible h2,.about.is-visible .portrait,.about.is-visible p:first-of-type,.about.is-visible p:nth-of-type(2),.about.is-visible .about-panel>a{animation:none}.about .portrait{transition:none}}

/* Video project carousel */
.project-showcase{max-width:1260px;margin:0 auto}.project-stage{display:grid;grid-template-columns:78px minmax(0,1fr) 78px;gap:24px;align-items:center}.project-screen{position:relative;aspect-ratio:16/9;background:#141d34;overflow:hidden}.project-screen img,.project-screen iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}.video-pending{position:absolute;inset:auto 0 0;padding:45px 24px 24px;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(12,19,34,.8));font-size:1.15rem}.project-arrow{width:72px;height:72px;display:grid;place-items:center;border:1px solid #1c253f;border-radius:50%;background:transparent;color:#1c253f;cursor:pointer;transition:background .25s,color .25s,transform .25s}.project-arrow span{display:block;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent}.project-arrow.previous span{border-right:25px solid currentColor;margin-right:6px}.project-arrow.next span{border-left:25px solid currentColor;margin-left:6px}.project-arrow:hover{background:#1c253f;color:white;transform:scale(1.08)}.project-arrow:focus-visible{outline:3px solid #5c5ec8;outline-offset:4px}.project-details{display:grid;grid-template-columns:78px minmax(0,1fr) 78px;gap:24px;margin-top:30px}.project-number{font-size:1rem;padding-top:8px;white-space:nowrap}.project-copy{max-width:900px}.project-copy h2{font-size:clamp(1.5rem,2.4vw,2.35rem);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:0 0 5px}.project-copy p{font-size:1.2rem;line-height:1.55;margin:0}@media(max-width:750px){.project-stage{grid-template-columns:1fr 1fr;gap:18px}.project-screen{grid-column:1/-1;grid-row:1}.project-arrow{width:58px;height:58px}.project-arrow.previous{justify-self:end}.project-arrow.next{justify-self:start}.project-details{display:block;margin-top:22px}.project-number{display:block;margin-bottom:15px}.project-copy p{font-size:1.05rem}}@media(prefers-reduced-motion:reduce){.project-arrow{transition:none}}

.home-portfolio{background:#edf0ff;padding:110px 5% 140px;scroll-margin-top:15px}.home-portfolio-inner{max-width:1400px;margin:auto}.home-portfolio small{font-size:.95rem;letter-spacing:.2em}.home-portfolio-inner > h2{font-size:clamp(3.5rem,7vw,7rem);font-weight:400;letter-spacing:-.07em;line-height:1;margin:25px 0 85px}@media(max-width:750px){.home-portfolio{padding:75px 5% 95px}.home-portfolio-inner > h2{margin:22px 0 45px}}
.project-video-link{position:absolute;inset:0;display:block;overflow:hidden}.project-video-link img{transition:transform .35s ease,filter .35s ease}.project-video-link:hover img{transform:scale(1.025);filter:brightness(.8)}.project-play{position:absolute;top:50%;left:50%;width:92px;height:92px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:rgba(237,240,255,.9);box-shadow:0 12px 35px rgba(0,0,0,.2)}.project-play:after{content:"";border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:27px solid #1c253f;margin-left:7px}.project-video-link:focus-visible{outline:4px solid #5c5ec8;outline-offset:-4px}@media(prefers-reduced-motion:reduce){.project-video-link img{transition:none}}

.project-arrow[hidden]{display:none}.home-portfolio .project-copy h2{font-size:clamp(1.85rem,2.8vw,2.7rem);font-weight:600;line-height:1.2;letter-spacing:-.035em;margin:0 0 7px}.home-portfolio .project-copy p{margin:0;line-height:1.45}

.project-copy p:empty{display:none}

/* Contact */
.contact-section{background:#1c253f;color:#f5f4ff;padding:115px 6% 125px;scroll-margin-top:0}.contact-inner{max-width:1280px;margin:auto}.contact-kicker{display:block;font-size:.9rem;letter-spacing:.22em;color:#cca8ea;margin-bottom:45px}.contact-section h2{font-size:clamp(3.5rem,8vw,8.5rem);line-height:1.02;font-weight:400;letter-spacing:-.075em;margin:0 0 35px}.contact-section h2 em{font-style:normal;color:#dca0f4}.contact-section p{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;max-width:580px;margin:0 0 45px}.contact-button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:68px;padding:18px 28px;border:1px solid #dca0f4;border-radius:100px;color:#fff;font-size:1rem;transition:background .25s,color .25s,transform .25s}.contact-button:hover{background:#dca0f4;color:#1c253f;transform:translateY(-3px);text-decoration:none}.contact-button span{font-size:1.5rem;line-height:1}.contact-handle{display:block;margin-top:25px;color:#c8c9df;font-size:1rem}@media(max-width:750px){.contact-section{padding:85px 6% 95px}.contact-kicker{margin-bottom:30px}.contact-button{width:100%;gap:16px}.contact-section p{margin-bottom:35px}}@media(prefers-reduced-motion:reduce){.contact-button{transition:none}}

.lang-switch{border:1px solid currentColor;border-radius:100px;padding:6px 11px;font-size:.88rem;line-height:1;font-weight:700;letter-spacing:.03em;white-space:nowrap}.lang-switch:hover{text-decoration:none;background:rgba(255,255,255,.15)}@media(max-width:750px){header nav{max-width:76%}.lang-switch{padding:5px 9px;font-size:.8rem}}

/* Small screens: give navigation its own row and let the opening section grow with its copy. */
@media(max-width:750px){
  header{flex-direction:column;align-items:flex-start;gap:15px;padding:20px 5%}
  header nav{width:100%;max-width:none;justify-content:flex-start;gap:12px 18px;font-size:1rem;line-height:1.3}
  header nav a{min-height:32px;display:inline-flex;align-items:center}
  .lang-switch{min-height:32px;padding:6px 10px;font-size:.88rem}
  .hero{height:auto;min-height:max(780px,100svh)}
  .hero-text{padding:180px 5% 170px;font-size:clamp(2rem,7.5vw,3rem)}
  .hero-text h1,.hero-text p{margin-bottom:28px}
  .home-portfolio .project-copy h2{overflow-wrap:anywhere}
}
@media(max-width:360px){
  header nav{gap:8px 13px;font-size:.93rem}
  .hero-text{padding-top:190px}
  .hero-marquee .hero-word{font-size:5.5rem}
  .project-play{width:68px;height:68px}
  .project-play:after{border-top-width:13px;border-bottom-width:13px;border-left-width:21px}
}