:root{
  --ink:#050708;--ink2:#0A0D10;--cream:#F1EFE9;--cream-dim:rgba(241,239,233,.58);
  --line:rgba(241,239,233,.12);--accent:#A7D6FF;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,4vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--cream);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img,video{display:block;max-width:100%}

/* nav */
.top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px var(--gutter);font-size:14px;font-weight:500}
.top .links{display:flex;gap:clamp(13px,2.5vw,28px)}
.top a{opacity:.8;white-space:nowrap;transition:opacity .2s}.top a:hover,.top a[aria-current]{opacity:1}
.top a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(241,239,233,.5)}
@media(max-width:480px){.top{font-size:13px}}

/* shared type + buttons */
.eyebrow{font-size:13px;font-weight:500;color:var(--cream-dim);letter-spacing:.02em}
.page-head{padding:clamp(48px,9vh,110px) var(--gutter) clamp(36px,6vh,64px);max-width:1150px}
.page-head h1{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.page-head p{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--cream-dim);max-width:48ch;margin-top:22px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;font-size:14px;font-weight:500;padding:15px 28px;border-radius:999px;border:1px solid rgba(241,239,233,.55);transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn.solid:hover{background:transparent;color:var(--cream)}
.section{padding:clamp(56px,9vh,110px) var(--gutter);border-top:1px solid var(--line)}
.section>h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.12;max-width:22ch;margin-bottom:clamp(24px,4vh,40px)}
.prose{max-width:66ch}
.prose p{color:rgba(241,239,233,.82);font-size:1.03rem}
.prose p+p{margin-top:14px}
.prose a,.faq a{text-decoration:underline;text-decoration-color:rgba(241,239,233,.35);text-underline-offset:3px}
.note{font-size:12.5px;color:var(--cream-dim);margin-top:24px;max-width:62ch}

/* project tiles (index + next) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(14px,1.8vw,22px);padding:0 var(--gutter) clamp(80px,12vh,140px)}
.tile{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2);transition:border-color .3s}
.tile:hover{border-color:rgba(241,239,233,.4)}
.tile .bar{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tile .bar span:last-child{color:var(--cream-dim)}
.tile .img{aspect-ratio:9/14;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile:hover img{transform:scale(1.04)}

/* project page */
.project{display:grid;gap:clamp(30px,5vw,72px);padding:clamp(16px,3vw,36px) var(--gutter) clamp(70px,10vh,120px);max-width:1240px;margin:0 auto}
@media(min-width:900px){.project{grid-template-columns:clamp(300px,calc(82vh * 9 / 16),440px) 1fr;align-items:center}}
.frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--ink2);width:100%;max-width:440px;margin:0 auto}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sound{position:absolute;top:12px;right:12px;z-index:2;font:500 11px/1 var(--sans);color:var(--cream);background:rgba(5,7,8,.55);border:1px solid rgba(241,239,233,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:8px 13px;border-radius:999px;cursor:pointer}
.sound[aria-pressed="true"]{background:rgba(241,239,233,.92);color:var(--ink);border-color:transparent}
.copy h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:12px}
.copy .sub{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--cream-dim);margin-top:10px}
.copy .about{max-width:56ch;margin-top:28px;color:rgba(241,239,233,.82)}
.credits{list-style:none;margin-top:32px;border-top:1px solid var(--line);max-width:560px}
.credits li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.credits li b{font-weight:500;color:var(--cream-dim)}
.next{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:clamp(40px,7vh,70px) var(--gutter)}
.next .lbl{font-size:13px;color:var(--cream-dim)}
.next .nt{font-size:clamp(1.8rem,5vw,3.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin-top:6px}
.next img{width:clamp(70px,10vw,120px);aspect-ratio:9/16;object-fit:cover;border-radius:10px;transition:transform .5s}
.next:hover img{transform:scale(1.05)}
.next:hover .nt{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}

/* services */
.svc-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,1.8vw,22px);padding:0 var(--gutter) clamp(70px,10vh,120px)}
.svc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2)}
.svc .img{position:relative;aspect-ratio:4/3;overflow:hidden}
.svc .img img{width:100%;height:100%;object-fit:cover}
.svc .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,8,0) 45%,rgba(5,7,8,.75))}
.svc h2{position:absolute;left:18px;bottom:14px;z-index:1;font-size:1.45rem;font-weight:600;letter-spacing:-.015em}
.svc .body{padding:20px 18px 22px;display:flex;flex-direction:column;flex:1}
.svc .body p{color:rgba(241,239,233,.82);font-size:.96rem}
.svc ul{list-style:none;margin-top:14px;display:grid;gap:6px}
.svc li{font-size:.9rem;color:var(--cream-dim);padding-left:16px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--cream-dim)}
.svc .ex{margin-top:auto;padding-top:18px;font-size:.88rem;font-weight:500}
.svc .ex a{text-decoration:underline;text-decoration-color:rgba(241,239,233,.35);text-underline-offset:3px}
.svc.req{justify-content:center;padding:28px 22px}
.svc.req h2{position:static;font-size:1.45rem}
.svc.req p{color:rgba(241,239,233,.82);margin-top:10px}

.cols{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,3vw,44px)}
.cols h3{font-size:1.08rem;font-weight:600;margin-bottom:6px}
.cols p{color:var(--cream-dim);font-size:.95rem;max-width:42ch}
.steps{list-style:none;counter-reset:s;max-width:880px}
.steps li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:.9rem;color:var(--cream-dim);padding-top:3px}
.steps h3{font-size:1.06rem;font-weight:600;margin-bottom:3px}
.steps p{color:var(--cream-dim);max-width:62ch}

/* faq */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--cream-dim);font-weight:400;transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--cream-dim);margin-top:14px;max-width:68ch}

/* contact */
.contact-list{list-style:none;max-width:760px;border-top:1px solid var(--line)}
.contact-list li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact-list b{font-weight:500;color:var(--cream-dim);font-size:.95rem}
.contact-list a{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:500}
.contact-list a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:560px){.contact-list li,.credits li{grid-template-columns:1fr;gap:4px}}

.finale{text-align:center;padding:clamp(90px,15vh,170px) var(--gutter);border-top:1px solid var(--line)}
.finale h2{font-size:clamp(2rem,5.5vw,4.2rem);font-weight:600;letter-spacing:-.025em;line-height:1.05}
.finale .btns{justify-content:center}

footer{border-top:1px solid var(--line);padding:30px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--cream-dim)}
footer .links{display:flex;gap:22px;flex-wrap:wrap}
footer a:hover{color:var(--cream)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- v3 additions ---- */
@media(min-width:900px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc.req{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:clamp(26px,4vw,44px)}
.svc.req>div,.svc.req>h2,.svc.req>p{flex:0 1 auto}
.svc.req p{max-width:60ch;margin-top:8px}
.svc.req .btns{margin-top:0}

.intro-photo{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding:0 var(--gutter) clamp(48px,8vh,90px);max-width:1150px}
@media(min-width:760px){.intro-photo{grid-template-columns:minmax(200px,300px) 1fr}}
.intro-photo img{width:100%;max-width:300px;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
.intro-photo p{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--cream-dim);max-width:46ch}

.about-hero{display:grid;gap:clamp(30px,5vw,72px);align-items:center;padding:clamp(40px,8vh,100px) var(--gutter) clamp(48px,8vh,96px);max-width:1240px}
@media(min-width:900px){.about-hero{grid-template-columns:1fr minmax(280px,420px)}}
.about-hero h1{font-size:clamp(2.6rem,6.5vw,5rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:14px}
.about-hero p:not(.eyebrow){font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--cream-dim);max-width:46ch;margin-top:22px}
.about-hero img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}

.cform{display:grid;gap:14px;max-width:900px}
@media(min-width:640px){.cform{grid-template-columns:1fr 1fr}}
.cform .full{grid-column:1/-1}
.cform label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cform input,.cform textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--cream);background:var(--ink2);border:1px solid rgba(241,239,233,.16);border-radius:12px;padding:20px 22px;transition:border-color .2s}
.cform textarea{resize:vertical;min-height:180px}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(241,239,233,.45)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--cream)}
.cform button{font:inherit;font-size:14px;font-weight:500;cursor:pointer}

.quick{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;max-width:1150px;border:1px solid var(--line);border-radius:18px;background:var(--ink2);padding:clamp(26px,4vw,44px)}
.quick h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;letter-spacing:-.02em}
.quick p{color:var(--cream-dim);margin-top:8px;max-width:52ch}
.quick a:not(.btn){text-decoration:underline;text-decoration-color:rgba(241,239,233,.35);text-underline-offset:3px;color:var(--cream)}
.quick .btns{margin-top:0}
.intro-photo img,.about-hero img{height:auto}
.about-hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem)}