:root {
  --ink:#012530; --green:#28544b; --sage:#acbd86; --peach:#ffd6a0; --red:#ff302c;
  --paper:#fffaf2; --white:#fff7eb; --line:#fff7eb2b; --gutter:clamp(20px,5.5vw,94px);
  font-family:Arial,Helvetica,sans-serif; color:var(--white); background:var(--ink);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:83px}
body{margin:0}
body:has(dialog[open]){overflow:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,dl,dd{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.skip{position:fixed;z-index:10;top:10px;left:10px;background:var(--peach);color:var(--ink);padding:12px;transform:translateY(-150%)}
.skip:focus{transform:none}
.wrap{width:min(100%,1680px);margin-inline:auto;padding-inline:var(--gutter)}
.mono,.eyebrow{font-family:Consolas,"Courier New",monospace;font-size:.72rem;font-weight:700;letter-spacing:.09em}
.eyebrow{display:flex;gap:8px;align-items:center;line-height:1.45;text-transform:uppercase}
.eyebrow i{width:7px;height:7px;background:var(--red);border-radius:50%;flex:none}
.brand{display:inline-flex;align-items:center;justify-self:start;white-space:nowrap;font-size:1.55rem;font-weight:800;line-height:1;letter-spacing:-.045em}
.brand img{width:30px;height:30px;margin-right:8px}
.header{position:sticky;top:0;z-index:8;background:var(--ink);border-bottom:1px solid var(--line)}
.header-inner{min-height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.header nav{display:flex;gap:clamp(4px,1.1vw,17px);font-size:.89rem;font-weight:700}
.header nav a{padding:8px 13px;border-radius:40px;transition:background .2s,color .2s}
.header nav a:hover,.header nav a:focus-visible{background:var(--sage);color:var(--ink)}
.header-cta{background:transparent;color:inherit;justify-self:end;border:1px solid var(--line);padding:11px 15px;border-radius:40px;font-size:.85rem;font-weight:700;white-space:nowrap}
.header-cta:hover{border-color:var(--peach)}
.menu-toggle{display:none}
h1 em,h2 em{color:var(--peach);font-style:normal}
.header .brand{align-self:center;font-size:1.48rem;line-height:1}
.header .brand img{width:32px;height:32px;margin-right:9px}

.button{border:0;border-radius:40px;padding:11px 16px;background:var(--white);color:var(--ink);font-size:.84rem;font-weight:800}
.button span{margin-left:8px}
.button.light:hover{background:var(--peach)}

.hero{min-height:clamp(650px,calc(100svh - 64px),1020px);position:relative;isolation:isolate;overflow:clip;background:var(--ink)}
.hero-art{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-frame{position:absolute;overflow:hidden;box-shadow:0 20px 60px #00121c80;animation:frame-in .95s cubic-bezier(.2,.8,.2,1) both}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.frame-left{width:clamp(136px,23vw,420px);aspect-ratio:1.3;left:5%;top:12%;border-radius:50% 50% 48% 52% / 56% 40% 60% 44%;transform:rotate(-13deg)}
.frame-left img{object-position:30% center;filter:saturate(.76) brightness(.83)}
.frame-right{width:clamp(150px,29vw,490px);aspect-ratio:1.05;right:4%;bottom:13%;border-radius:47% 53% 45% 55% / 56% 46% 54% 44%;transform:rotate(13deg);animation-delay:.12s}
.frame-right img{object-position:47% center;filter:saturate(.9) brightness(.82)}
.hero-orbit{position:absolute;color:var(--sage);opacity:.75;inset:14% 1% auto;width:98%;height:68%}
.hero-star{position:absolute;color:var(--red);width:clamp(45px,8vw,130px);top:14%;right:14%;transform:rotate(15deg);animation:frame-in .8s .2s both}
.hero-rings{position:absolute;width:clamp(54px,11vw,150px);aspect-ratio:1;bottom:14%;left:13%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 7px,var(--sage) 8px 9px);opacity:.7;transform:rotate(-24deg) scaleY(.65)}
.hero-body{min-height:inherit;display:grid;grid-template-rows:1fr auto}
.hero-text{align-self:center;padding-block:96px 84px;display:flex;align-items:center;flex-direction:column;text-align:center}
.hero .eyebrow{color:var(--peach);text-shadow:0 1px 14px #012530}
.hero h1{font-size:clamp(4.4rem,12.25vw,13.4rem);font-weight:900;line-height:.85;letter-spacing:-.09em;margin:clamp(15px,3vw,44px) 0 22px;text-shadow:0 6px 35px #012530b0}
.title-line{display:block;overflow:hidden;padding:0 .07em .15em .03em;margin-bottom:-.15em}
.title-line>span{display:block;animation:title-in .95s cubic-bezier(.18,.78,.24,1) both}
.title-line:nth-child(2)>span{animation-delay:.12s}
.hero h1 em{color:var(--peach);font-family:Georgia,serif;font-style:italic;font-weight:700;letter-spacing:-.09em}
.hero-description{max-width:340px;color:var(--white);text-shadow:0 1px 14px #012530;font-size:clamp(1rem,1.55vw,1.22rem);line-height:1.5;margin-bottom:21px}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:57px;text-transform:uppercase;color:#fff7ebcf}
.hero-foot a,.hero-caption{display:flex;align-items:center;gap:11px}
.hero-foot a:hover{color:var(--peach)}
@keyframes title-in{from{transform:translateY(115%) rotate(3deg);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes frame-in{from{opacity:0;scale:.72}to{opacity:1;scale:1}}

.hero .button{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:space-between;gap:29px;padding:14px 18px;min-height:51px;border-radius:40px;font-size:.9rem;font-weight:800;transition:background .2s,color .2s,border-color .2s}
.hero .button span{font-size:1.1rem}
.hero .peach{background:var(--peach);color:var(--ink)}
.hero .peach:hover{background:var(--white)}

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .hero-art{animation:art-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes art-drift{to{translate:0 28%;opacity:.48}}

.services,.studio{background:var(--paper);color:var(--ink)}
.services{position:relative;padding-block:clamp(54px,6vw,90px) clamp(68px,9vw,148px)}
.services::before{content:"";position:absolute;inset:-23px 0 auto;height:25px;background:radial-gradient(ellipse at center bottom,var(--paper) 70%,transparent 72%) 0 0 / clamp(54px,8vw,120px) 27px repeat-x;pointer-events:none}
.section-head{margin-bottom:clamp(24px,3vw,43px)}
.section-head h2{font-size:clamp(2.65rem,5.3vw,6rem);line-height:.92;letter-spacing:-.075em}
.services-grid{padding-top:clamp(21px,3.3vw,46px)}
.service{--folder-lip:clamp(18px,2.6vw,34px);position:sticky;top:var(--stack-top);isolation:isolate;margin-bottom:clamp(36px,4vw,64px);color:var(--ink);min-width:0}
.service::after{content:"";position:absolute;z-index:-2;top:calc(-1 * var(--folder-lip));left:5%;width:clamp(105px,28%,335px);height:calc(var(--folder-lip) + 10px);border-radius:clamp(11px,1.5vw,19px) clamp(11px,1.5vw,19px) 0 0;background:var(--panel);pointer-events:none}
.service:last-child{margin-bottom:0}
.service::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:clamp(18px,2.3vw,34px);background:var(--panel);transform-origin:center top;transform:perspective(1050px) rotateX(-7deg)}
.service.sage{--stack-top:111px;--panel:var(--sage)}
.service.cream{--stack-top:180px;--panel:var(--red)}
.service.green{--stack-top:249px;--panel:var(--peach)}
.service:has(:focus-visible){z-index:4}
.service summary{position:relative;list-style:none;display:grid;align-content:center;gap:clamp(12px,2vw,27px);cursor:pointer;padding:clamp(22px,3.8vw,55px) clamp(22px,6vw,92px) 12px;min-height:clamp(112px,14vw,224px)}
.service:not([open]) summary{padding-bottom:clamp(22px,3.8vw,55px)}
.service summary::-webkit-details-marker{display:none}
.service summary:focus-visible{outline:3px solid var(--ink);outline-offset:-8px;border-radius:26px}
.service summary svg{position:absolute;right:10%;top:25%;width:clamp(52px,14vw,230px);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.47;transform:rotate(0deg);transition:transform .4s;pointer-events:none}
.service summary:hover svg{transform:rotate(5deg) scale(1.08)}
.service h3{font-size:clamp(2.2rem,7.2vw,8.2rem);line-height:.86;letter-spacing:-.087em;position:relative;max-width:82%}
.service-arrow{position:absolute;right:clamp(20px,4vw,63px);bottom:clamp(10px,2vw,27px);width:39px;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:1.2rem}
.service-arrow::before{content:"+"}
.service[open] .service-arrow::before{content:"−"}
.service-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;text-transform:uppercase}
.service-media-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(14px,4vw,56px);padding:10px clamp(22px,6vw,92px) clamp(24px,4vw,55px)}
.service-media-content>p{max-width:400px;line-height:1.5;font-size:clamp(.95rem,1.38vw,1.16rem)}
.service-audio{min-width:0;padding:clamp(12px,1.55vw,23px);border:1px solid #01253031;border-radius:16px;background:#fffaf28a}
.service-audio figcaption{display:grid;gap:5px;margin-bottom:8px}
.service-audio figcaption .mono{text-transform:uppercase}
.service-audio figcaption strong{font-size:clamp(.94rem,1.45vw,1.2rem);line-height:1.22}
.service-audio audio{display:block;width:100%;height:43px}

.work{overflow:clip;padding-block:clamp(65px,8vw,125px);background:var(--ink)}
.work .section-head{text-align:center}
.work .eyebrow{justify-content:center;color:var(--sage);margin-bottom:10px}
.poster-stage{position:relative}
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.filters button{border:1px solid transparent;border-radius:40px;background:var(--sage);color:var(--ink);padding:9px 15px;font-size:.84rem;font-weight:700}
.filters button:nth-child(2){background:var(--peach)}
.filters button:nth-child(3){background:var(--red)}
.filters button:nth-child(4){background:var(--green);color:var(--white)}
.filters button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--sage)}
.gallery-controls{position:absolute;z-index:2;inset:51% max(1px,calc(50% - clamp(160px,25vw,370px))) auto;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.gallery-controls button{pointer-events:auto;width:42px;height:42px;border:1px solid #fffaf24a;background:#012530e8;border-radius:50%;color:var(--white);font-size:1.05rem}
.gallery-controls button:not(:disabled):hover{background:var(--peach);color:var(--ink)}
.gallery-controls button:disabled{opacity:.34;cursor:default}
#gallery-position{display:block;text-align:center;color:var(--sage);margin-top:1px}
.work-grid{--poster:clamp(235px,31vw,440px);--gap:clamp(18px,6vw,95px);display:flex;align-items:center;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:20px 0 26px;scrollbar-width:none}
.work-grid::-webkit-scrollbar{display:none}
.work-grid::before,.work-grid::after{content:"";flex:0 0 max(0px,calc((100% - var(--poster))/2 - var(--gap)))}
.work-grid article{flex:0 0 var(--poster);min-width:0;scroll-snap-align:center;perspective:950px}
.project{display:block;width:100%;aspect-ratio:3/4.05;border:0;position:relative;isolation:isolate;overflow:hidden;text-align:left;border-radius:clamp(14px,2vw,28px);background:var(--green);color:var(--white);transition:transform .5s,opacity .5s}
.work-grid article[data-position="before"] .project{transform:rotateY(17deg) rotate(-6deg) scale(.92);opacity:.76}
.work-grid article[data-position="after"] .project{transform:rotateY(-17deg) rotate(6deg) scale(.92);opacity:.76}
.project img,.project::after{width:100%;height:100%;position:absolute;inset:0;z-index:-2;object-fit:cover;transition:transform .65s}
.project::after{content:"";z-index:-1;background:linear-gradient(0deg,#001b23ed,transparent 56%),linear-gradient(180deg,#001b2388,transparent 24%)}
.project:hover img,.project:focus-visible img{transform:scale(1.08)}
.project-tag{position:absolute;top:16px;left:16px;border-radius:20px;background:var(--ink);padding:7px 9px}
.project-title{position:absolute;bottom:19px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(1.45rem,3vw,3.7rem);line-height:.93;letter-spacing:-.065em;font-weight:900}
.project-title span{flex:none;width:32px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:1rem;background:var(--white);color:var(--ink)}

.studio{border-radius:clamp(20px,4vw,60px) clamp(20px,4vw,60px) 0 0;padding-block:clamp(55px,8vw,125px)}
.studio-intro{font-size:clamp(1.05rem,2.2vw,2rem);line-height:1.32;max-width:800px;letter-spacing:-.025em}
.studio-list{border-top:1px solid #01253030;margin-top:clamp(28px,5vw,65px)}
.studio-list>div{border-bottom:1px solid #01253030;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;padding:clamp(14px,2vw,27px) 0}
.studio-list dt{display:flex;gap:clamp(9px,2.7vw,42px);align-items:center;font-size:clamp(1.42rem,3.5vw,3.6rem);font-weight:800;letter-spacing:-.065em}
.studio-list small{font:700 .68rem Consolas,monospace;color:var(--green);letter-spacing:.06em}
.studio-list dd{font-size:clamp(.9rem,1.45vw,1.2rem);line-height:1.4}

.contact{background:var(--paper);color:var(--white)}
.contact>.wrap{max-width:none;background:var(--ink);border-radius:clamp(20px,4vw,60px) clamp(20px,4vw,60px) 0 0;padding-block:var(--gutter)}
.contact-inner{max-width:1490px;min-height:clamp(390px,45vw,660px);position:relative;isolation:isolate;display:grid;place-items:center;margin-inline:auto}
.contact-photo{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#012530b9,#01253059),url("assets/estudio.webp") center 42%/cover;border-radius:30px}
@supports (mask:linear-gradient(#000,#000)){
  .contact-photo{border-radius:0;mask:linear-gradient(#000 0 0) center/100% 78% no-repeat,radial-gradient(ellipse at center bottom,#000 70%,transparent 71%) top left/16.666% 25% repeat-x,radial-gradient(ellipse at center top,#000 70%,transparent 71%) bottom left/16.666% 25% repeat-x}
}
.contact-copy{text-align:center;padding:32px 20px}
.contact-copy .eyebrow{justify-content:center;color:var(--peach)}
.contact h2{font-size:clamp(2.85rem,7.6vw,8.2rem);line-height:.87;letter-spacing:-.08em;margin:12px 0 18px;text-shadow:0 4px 24px var(--ink)}
.contact-copy>p:not(.eyebrow){max-width:330px;margin:0 auto 18px;line-height:1.43;text-shadow:0 2px 9px var(--ink)}
.site-footer{padding-block:clamp(18px,3.2vw,52px) 23px;background:var(--ink)}
.footer-mark{display:block;width:100%;height:auto;overflow:visible}
.footer-mark text{fill:var(--white);font-size:205px;font-weight:900;letter-spacing:-.07em}
.footer-mark rect{fill:var(--red)}
.footer-credit{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(9px,1.7vw,24px);text-align:center;font-size:.75rem;color:var(--white)}
.renderia-link{display:inline-flex;align-items:center;min-height:24px;gap:clamp(4.5px,.7vw,9px);color:#fff;font-size:clamp(.625rem,1.4vw,1.0625rem);letter-spacing:-.045em;line-height:1.1;white-space:nowrap}
.renderia-link img{width:clamp(28px,4.05vw,50px);height:auto;flex:none}
.renderia-link strong{font-weight:900}
.renderia-link:hover span{text-decoration:underline;text-underline-offset:.19em}
#project-description{white-space:pre-line}
.dark{background:var(--ink);color:var(--white)}
.dark:hover{background:var(--green)}
dialog{width:min(610px,calc(100% - 32px));max-height:calc(100% - 36px);margin:auto;padding:0;background:var(--paper);color:var(--ink);border:0;border-radius:16px}
dialog::backdrop{background:#001b23d9}
.dialog-close{position:absolute;right:13px;top:13px;width:36px;height:36px;border:0;border-radius:50%;background:var(--ink);color:var(--white);font-size:1.45rem}
#project-dialog:has(video:not([hidden])){width:min(960px,calc(100% - 32px))}
#project-dialog .dialog-close{z-index:1}
#project-video{display:block;width:100%;aspect-ratio:16/9;max-height:64dvh;background:#000;object-fit:contain}
dialog>img{width:100%;height:min(34vh,275px);object-fit:cover}
.dialog-content{padding:clamp(21px,5vw,42px)}
.dialog-content h2{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1;letter-spacing:-.07em;margin:9px 0 16px}
.dialog-content>p:last-child{line-height:1.55}
#contact-form{display:grid;gap:14px}
#contact-form label{display:grid;gap:6px;font-size:.9rem;font-weight:700}
#contact-form input,#contact-form textarea{width:100%;border:1px solid #28544b65;border-radius:4px;background:#fff;color:var(--ink);padding:10px}
#contact-form textarea{resize:vertical;min-height:90px}
#contact-form .button{justify-self:start}
#contact-status:empty{display:none}
#contact-hint,#contact-status{font-size:.88rem;line-height:1.4}
.reveal.is-visible{animation:section-in .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes section-in{from{translate:0 .55em;opacity:.12;scale:1 .5}to{translate:0;opacity:1;scale:1}}
@media(max-width:730px){
  .service.sage{--stack-top:92px}
  .service.cream{--stack-top:142px}
  .service.green{--stack-top:192px}
  .service-media-content{grid-template-columns:1fr}
  .service summary svg{right:13%;opacity:.29}
  .service-kicker{max-width:82%;font-size:.62rem}
  .work-grid{--poster:clamp(196px,62vw,300px);--gap:22px}
  .gallery-controls{inset-inline:0}
  .gallery-controls button{width:34px;height:34px}
}
@media(max-width:420px){
  .studio-list>div{grid-template-columns:1fr;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  .service{position:relative;top:auto}
}

@media(max-width:800px){
  .header-inner{grid-template-columns:1fr auto;gap:12px;min-height:65px}
  .header-cta{display:none}
  .menu-toggle{display:block;justify-self:end;background:transparent;color:var(--white);border:1px solid var(--line);border-radius:4px;padding:8px 10px}
  .menu-toggle span{margin-left:6px;color:var(--peach)}
  .header nav{display:none}
  .header nav.is-open{display:flex;grid-column:1/-1;gap:18px;flex-wrap:wrap;padding:0 0 14px}
  html{scroll-padding-top:68px}
}
@media(max-width:800px){
  .hero{min-height:clamp(580px,calc(100svh - 65px),780px)}
  .hero h1{font-size:clamp(3.5rem,13.1vw,7rem)}
  .hero-text{padding-block:105px 80px}
}
@media(max-width:530px){
  .hero h1{font-size:clamp(2.65rem,13.6vw,4.45rem)}
  .hero-text{padding-block:85px 50px}
  .hero .eyebrow{font-size:.6rem;letter-spacing:.075em;gap:6px}
  .hero-description{max-width:260px}
  .frame-left{top:10%;left:-7%}
  .frame-right{bottom:14%;right:-12%;width:46vw}
  .hero-star{right:9%;top:15%}
  .hero-rings{left:6%;bottom:18%}
  .hero-caption{display:none}
}