@import url('style.css');

/* Luna Nueva: editorial surfaces, restrained brand accents, work in focus. */
:root{--ink:#232326;--violet:#6b526c;--pink:#8d748c;--sun:#d4c6bc;--blue:#bcbfc7;--paper:#f5f3ee;--line:#dcd8d3;--muted:#66626a;--dark:#1e1e22;--accent-light:#c8b7ce}
body{background:var(--paper);-webkit-font-smoothing:antialiased}
header{background:var(--paper);border-bottom:1px solid var(--line);padding-top:8px;padding-bottom:8px}
nav{font-weight:600}
.nav-contact{background:var(--ink);border-radius:4px}
h1,h2{font-family:Manrope,Arial,sans-serif;font-weight:600;letter-spacing:-2.6px;line-height:1.12}
em{font-family:'Bodoni Moda',Georgia,serif;color:var(--violet)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px}
.eyebrow>span{width:6px;height:6px;background:var(--accent-light);box-shadow:none}
.hero{background:var(--dark);color:var(--paper);grid-template-columns:1fr 1fr;gap:45px;padding-top:38px}
.hero-copy{padding:38px 0 45px}
.hero-copy .eyebrow{color:#c7c2c9;font-size:10px;letter-spacing:1.15px}
h1{font-size:clamp(48px,4.8vw,70px);margin-bottom:26px}
h1 em{color:var(--accent-light);line-height:1.2;letter-spacing:-1.8px}
.intro{max-width:430px;font-size:15px;line-height:1.95;color:#c8c6cb}
.button{border-radius:4px;font-weight:700;box-shadow:none;padding:17px 23px}
.primary{background:var(--paper);color:var(--ink);box-shadow:none}
.primary:hover{background:#e3dbe5;transform:translateY(-2px);box-shadow:none}
.hero .text-link{color:#e3dfe6}
.creator-note{margin-top:42px;border-left:1px solid #6d606f;padding-left:18px}
.creator-note>span{display:none}
.creator-note p{color:#b4b0b8;font-size:11px}
.creator-note strong{color:#e5e1e8;font-weight:500}
.hero-art{height:555px}
.creative-orbit,.creative-star,.art-badge{display:none}
.film-main{width:245px;max-width:50%;border:1px solid #ffffff24;border-radius:6px;box-shadow:0 20px 45px #00000030;background:#16161a;transform:none}
.film-caption{font-size:9px;letter-spacing:.6px;bottom:13px;left:12px;right:12px;background:#17171ce8;padding:8px;border-radius:3px;line-height:1.5}
.live-dot{background:#cfbcd4}
.motion-control{right:12px;top:auto;bottom:62px;background:#1e1e22e8;border:1px solid #ffffff5c;border-radius:4px;font-size:10px}
.film-shot{width:138px;max-width:28%;border:1px solid #ffffff26;border-radius:5px;background:#17171b;box-shadow:0 14px 32px #00000025;transform:none}
.film-shot figcaption{font-size:9px;letter-spacing:1.4px;color:#d9d5de;padding:12px 7px}
.film-left{left:0;top:32px}
.film-right{right:0;bottom:30px}
.hero-bottom{border-color:#ffffff25;font-size:9px;letter-spacing:1.2px;color:#aaa5af;padding:21px 0}
.hero-bottom a{color:#e4dee8}
.ribbon{background:#e9e5df;color:#5b565f;border-bottom:1px solid var(--line);font-weight:600;font-size:10px;letter-spacing:1.3px;padding:23px 5%;gap:40px}
.ribbon b{color:#a9a0ab;font-size:12px}
h2{font-size:clamp(38px,4vw,56px)}
h2 em{letter-spacing:-1.4px;line-height:1.22}
.section-heading>p:last-child{font-size:14px;color:var(--muted)}
.services{background:#fdfcf9}
.services .eyebrow{color:var(--violet)}
.service-list{border-color:var(--line)}
.service-list article{padding:34px 8px;border-color:var(--line)}
.service-list article:nth-child(n){background:transparent}
.service-list article:hover{background:#f0ece7}
.number{color:#857187;font-style:normal}
.service-list h3{letter-spacing:-.7px}
.service-list p{font-size:14px;line-height:1.85;color:var(--muted)}
.service-list article>a{border-color:#c7bdc9;background:transparent;color:var(--violet)}
.service-list article>a:hover{background:#e9e0eb}
.tags span{font-size:10px;background:#f1eeea;border-color:#e1dadf;color:#655b69}
.perspective{background:#eae6e0;color:var(--ink);gap:80px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.perspective-mark{display:flex;align-items:center;justify-content:center;text-shadow:none;animation:none}
.perspective-mark:before{display:none}
.perspective-mark img{width:100%;max-width:290px;height:auto;object-fit:contain}
.perspective h2{font-size:46px}
.perspective h2 em,.perspective .eyebrow{color:var(--violet)}
.perspective p{font-size:14px;color:var(--muted)}
.perspective .large-copy{font-size:17px;color:#413d44}
.process{border-color:#cec7cd}
.process span{font-size:11px;color:var(--violet)}
.process h3{font-size:13px;color:var(--ink)}
.process p{color:var(--muted);font-size:11px;line-height:1.8}
.projects{background:var(--paper);color:var(--ink)}
.projects .eyebrow,.projects h2 em{color:var(--violet)}
.projects .section-heading>p:last-child{color:var(--muted)}
.project-heading{margin-bottom:40px}
.project-grid{gap:30px}
.project img{border-radius:5px;background:#1c1b20;border:0;box-shadow:none}
.project figcaption{color:var(--ink);font-size:21px;font-weight:500;letter-spacing:-.3px;gap:9px;padding-top:18px}
.project small{font-size:10px;letter-spacing:1.1px;line-height:1.8;color:#716976;font-weight:500}
.play{background:#29252be8;border-color:#ffffffe0;box-shadow:none}
.video-label{background:#201e23e6;font-size:9px;letter-spacing:1px}
.web-project{margin:60px 0 0;padding-top:45px;padding-bottom:0;border-bottom:0;border-top:1px solid var(--line)}
.web-project img{border-radius:5px;border-color:var(--line);box-shadow:none}
.web-project h3{font-family:Manrope,Arial,sans-serif;font-size:32px;font-weight:600;letter-spacing:-1px;color:var(--ink)}
.web-project p:not(.eyebrow){font-size:14px;color:var(--muted)}
.web-project .eyebrow{font-size:10px;letter-spacing:1px}
.web-project .text-link{color:var(--violet)}
.contact{background:var(--dark);color:var(--paper)}
.contact .eyebrow{color:#bcb0c1}
.contact h2 em{color:var(--accent-light)}
.contact>div>p:not(.eyebrow){font-size:15px;color:#c9c5cd}
.phone{font-family:Manrope,Arial,sans-serif;font-size:26px;font-weight:500;letter-spacing:-.7px;border-color:#ffffff45;color:#ede6f0}
.phone span{margin-left:15px}
.contact-email{font-size:14px;color:#d2c8d7;border-color:#ffffff45}
.contact>div>small{font-size:12px;color:#a7a0ae}
form{background:#fdfcf9;border:0;border-radius:5px;padding:36px;color:var(--ink);box-shadow:none}
form h3{font-family:Manrope,Arial,sans-serif;font-size:24px;font-weight:600;letter-spacing:-.7px;margin-bottom:25px}
label{font-size:12px;font-weight:600}
input,select,textarea{border-color:#cbc5cc;background:#f8f6f2;border-radius:3px;color:var(--ink)}
form .button{background:var(--violet)}
form .button:hover{background:#58435a}
.form-note{font-size:11px;color:var(--muted)}
footer{background:var(--paper)}
footer p{font-size:11px;color:var(--muted)}
footer>span{font-size:10px;color:var(--muted)}
dialog{background:var(--dark);border-color:#7e6c83;border-radius:6px}
dialog::backdrop{background:#121216df}
dialog p{font-size:11px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#876b88}

@media(min-width:1500px){.hero-art{height:610px}.film-main{width:270px}.film-shot{width:160px}}
@media(max-width:1000px){h1{font-size:47px}.hero{gap:30px}.hero-art{height:490px}.film-main{max-width:53%}.film-shot{width:110px}.film-left{top:38px}.film-right{bottom:45px}.perspective{gap:45px}.perspective h2{font-size:38px}.project-grid{gap:23px}.ribbon{gap:25px;font-size:9px}}
@media(max-width:700px){
 .menu-toggle{padding:11px 14px;border-radius:4px;background:transparent;border-color:#c6bdc8;color:var(--ink);font-size:12px}
 nav{background:var(--paper);border-color:#d3cbd6;border-radius:5px;box-shadow:0 15px 35px #17141a35}
 .hero{grid-template-columns:1fr;gap:10px;padding-top:34px}.hero-copy{padding:0 0 12px}.hero-copy .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:24px}
 h1{font-size:clamp(39px,10.8vw,58px);letter-spacing:-1.8px;margin-bottom:23px}h1 em{letter-spacing:-1.5px}.intro{font-size:14px;max-width:420px}
 .button{padding:16px 18px;font-size:11px;gap:20px}.creator-note{margin-top:29px}.creator-note p{font-size:11px}
 .hero-art{height:490px}.film-main{width:238px;max-width:63%;border-radius:5px}.film-shot{width:102px;max-width:27%}.film-left{top:12px}.film-right{bottom:14px}.film-shot figcaption{font-size:8px;padding:9px 4px}
 .film-caption{font-size:9px;left:10px;right:10px;bottom:11px;line-height:1.5}.motion-control{bottom:70px;right:10px}.hero-bottom{padding:19px 0;font-size:8px;letter-spacing:.7px}
 .ribbon{gap:10px 17px;padding:19px 6%;font-size:9px;letter-spacing:.5px}.section{padding-top:68px;padding-bottom:68px}h2{font-size:39px;letter-spacing:-1.5px;line-height:1.16}.eyebrow{font-size:10px;letter-spacing:1.1px}.section-heading>p:last-child{font-size:14px}
 .service-list article{padding:28px 0}.service-list h3{font-size:19px;letter-spacing:-.5px}.service-list p{font-size:13px}.tags span{font-size:9px}
 .perspective-mark{width:auto;max-width:165px;margin:0 auto 40px}.perspective h2{font-size:37px}.perspective .large-copy{font-size:16px}.perspective p{font-size:13px}.process h3{font-size:11px}.process p{font-size:10px}
 .project-grid{gap:34px}.project figcaption{font-size:22px}.project small{font-size:10px}.web-project{padding-top:34px;margin-top:42px;padding-bottom:0}.web-project h3{font-size:28px}.web-project p:not(.eyebrow){font-size:13px}
 .contact h2{font-size:41px}.contact .phone{font-size:24px}.contact-email{font-size:12px}form h3{font-size:23px}.form-note{font-size:10px}footer>span{font-size:10px}
}
@media(max-width:370px){h1{font-size:38px}.hero-art{height:440px}.film-main{max-width:64%}.contact-email{font-size:11px}.service-list h3{font-size:17px}}

/* One reel in the cover; each remaining project appears once. */
.hero-art{flex-direction:column;gap:16px;height:590px;align-items:center}
.hero-art .film-main{width:275px;max-width:72%}
.hero-video-open{color:#d8ccdE;width:auto;background:transparent;padding:7px 0;border-bottom:1px solid #ffffff45;font-size:11px;font-weight:500;letter-spacing:.3px}
.hero-video-open span{margin-left:18px}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:850px;margin:auto}
.software-project{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.software-project h3{font-size:36px;font-weight:600;letter-spacing:-1.3px;line-height:1.2;margin-bottom:0}
.software-project h3 em{font-size:43px}
.software-project p:not(.eyebrow){font-size:14px;line-height:1.95;color:var(--muted)}
.software-project .eyebrow{font-size:10px;letter-spacing:1px}
.software-project .text-link{margin-top:24px;color:var(--violet)}
.project-grid{max-width:none;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:80px}
.project-grid>.project{max-width:390px;width:100%}
.project-story h3{font-size:40px;letter-spacing:-1.5px;font-weight:600;line-height:1.2;margin-bottom:24px}
.project-story h3 em{font-size:48px}
.project-story p:not(.eyebrow){font-size:15px;line-height:1.95;color:var(--muted);max-width:420px}
.project-story .text-link{margin-top:25px;color:var(--violet)}
.project-story .eyebrow{font-size:10px;letter-spacing:1px}
.service-list article{grid-template-columns:minmax(0,1fr) 45px;gap:24px}
.process h3{margin-top:0}
@media(max-width:700px){.service-list article{grid-template-columns:minmax(0,1fr) 32px;gap:14px}}
@media(max-width:1000px){.hero-art{height:535px}.hero-art .film-main{width:250px}.software-project{gap:45px}.software-project h3{font-size:32px}}
@media(max-width:700px){.hero-art{height:auto;margin:25px 0 20px}.hero-art .film-main{width:265px;max-width:90%}.project-grid{grid-template-columns:1fr;gap:34px}.software-project{grid-template-columns:1fr;gap:24px;margin-top:40px;padding-top:34px}.software-project h3{font-size:30px}.software-project h3 em{font-size:37px}.software-project p:not(.eyebrow){font-size:13px}}
@media(max-width:700px){.project-story h3{font-size:34px}.project-story h3 em{font-size:40px}.project-story p:not(.eyebrow){font-size:14px}}

/* Bring the social-first positioning forward while keeping the quiet editorial palette. */
.hero-focus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-8px 0 27px;max-width:430px}
.hero-focus p{display:flex;flex-direction:column;gap:5px;margin:0;padding:7px 0 7px 13px;border-left:1px solid #756a78}
.hero-focus strong{color:#e4dce7;font-size:9px;letter-spacing:1.4px}
.hero-focus span{color:#bdb5c1;font-size:11px;line-height:1.5}
.service-list article:first-child{background:#f0ece7;box-shadow:inset 2px 0 var(--violet)}
@media(max-width:370px){.hero-focus{grid-template-columns:1fr}}