:root{
  --ink:#0F0E0D;--line:#2A2622;--line-2:#3A342E;--bone:#E8E2D6;--muted:#A9A398;--soft:#C9C2B6;
  --paper:#F5F2EC;--paper-ink:#141210;--paper-text:#3A342E;--paper-line:#D9D2C6;--paper-muted:#6B645A;
  --red:#A84A38;--red-light:#C9654F;
  --serif:'Frank Ruhl Libre',Georgia,serif;--sans:'Assistant',system-ui,sans-serif;
  --wrap:1200px;--gutter:32px;--header:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red-light)}
:focus-visible{outline:2px solid var(--red-light);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--bone);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.eyebrow{font-size:13px;letter-spacing:.18em;color:var(--red-light);margin:0 0 14px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.15;margin:0;color:var(--bone)}
.lead{font-size:19px;line-height:1.7;color:var(--muted);margin:0 0 36px;max-width:560px}
.light{background:var(--paper);color:var(--paper-ink)}
.light .eyebrow{color:var(--red)}
.light .h2{color:var(--paper-ink)}
.section{padding:120px 0}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:48px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;min-width:180px;padding:0 24px;font-family:var(--sans);font-size:16px;font-weight:600;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-red{background:var(--red);color:#F2EEE7}
.btn-red:hover{background:#933F2F;color:#F2EEE7}
.btn-line{border-color:var(--bone);color:var(--bone);background:transparent}
.btn-line{background:linear-gradient(var(--bone),var(--bone)) no-repeat 50% 100%/100% 0;transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .3s}
.btn-line:hover{background-size:100% 100%;color:var(--ink)}
.light .btn-line{border-color:var(--paper-ink);color:var(--paper-ink);background-image:linear-gradient(var(--paper-ink),var(--paper-ink))}
.light .btn-line:hover{color:var(--paper)}
.btn-red{transition:background .3s,transform .3s}
.btn:active{transform:scale(.98)}

/* header */
.header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.header.hide{transform:translateY(-100%)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header)}
.logo{display:flex;flex:none}
.logo img{width:112px;height:auto}
.nav{display:flex;gap:28px;font-size:15px}
.header-actions{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 6px;margin-inline-start:12px;font-size:14px;letter-spacing:.1em}
.lang svg{width:18px;height:18px}
.menu-btn{display:none;width:48px;height:48px;background:none;border:0;color:var(--bone);cursor:pointer;padding:12px}
.menu-btn span{display:block;height:1px;background:currentColor;margin:6px 0;transition:transform .25s,opacity .25s}
.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero: full-bleed video behind the text */
.hero{position:relative;min-height:calc(100svh - var(--header));display:flex;align-items:center;overflow:hidden;padding:0}
.hero .wrap{position:static;width:100%;display:block;padding-top:64px;padding-bottom:150px}
.hero-text{position:relative;z-index:1;max-width:640px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.4vw,92px);line-height:1.05;margin:0 0 20px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 45%;background:#161412}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to left,rgba(15,14,13,.88) 0%,rgba(15,14,13,.6) 40%,rgba(15,14,13,.25) 75%,rgba(15,14,13,.35) 100%),linear-gradient(to top,rgba(15,14,13,.7) 0%,rgba(15,14,13,0) 35%)}
[dir=ltr] .hero-media::after{background:linear-gradient(to right,rgba(15,14,13,.88) 0%,rgba(15,14,13,.6) 40%,rgba(15,14,13,.25) 75%,rgba(15,14,13,.35) 100%),linear-gradient(to top,rgba(15,14,13,.7) 0%,rgba(15,14,13,0) 35%)}
.hero .lead{color:var(--soft)}

/* works */
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.works button{padding:0;border:0;background:#161412;cursor:zoom-in;overflow:hidden;display:block}
.works img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.works button:hover img{transform:scale(1.04)}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92vh}
.lightbox::backdrop{background:rgba(10,9,8,.92)}
.lightbox img{max-height:86vh;width:auto;margin:0 auto}
.lightbox-close{position:fixed;top:16px;inset-inline-end:16px;width:48px;height:48px;border-radius:50%;border:1px solid var(--bone);background:transparent;color:var(--bone);font-size:24px;cursor:pointer}

/* approach */
.approach{overflow:hidden}
.approach .wrap{display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.approach-text{flex:1 1 420px;min-width:0}
.approach-text p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--paper-text);margin:0 0 18px}
.approach-text p:last-child{margin:0}
.approach-art{flex:1 1 340px;display:flex;justify-content:center}
.approach-art img{width:100%;max-width:360px}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);list-style:none;margin:0;padding:0}
.step{background:var(--ink);padding:36px 32px;display:flex;flex-direction:column;gap:14px;min-height:220px}
.step-num{display:flex;align-items:center;gap:14px}
.step-num span:first-child{width:44px;height:44px;border:1px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:var(--red-light)}
.step-num span:last-child{flex:1;height:1px;background:var(--line)}
.step h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0;line-height:1.3}
.step p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}

/* reviews */
.arrows{display:flex;gap:10px}
.arrow{width:48px;height:48px;border:1px solid var(--paper-ink);background:transparent;color:var(--paper-ink);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.arrow:hover:not(:disabled){background:var(--paper-ink);color:var(--paper)}
.arrow:disabled{opacity:.25;cursor:default}
.arrow svg{width:18px;height:18px}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0;padding:0;list-style:none}
.track::-webkit-scrollbar{display:none}
.track>li{flex:0 0 calc((100% - 60px)/4);min-width:260px;scroll-snap-align:start;display:flex}
.review{flex:1;margin:0;border:1px solid var(--paper-line);background:#fff;padding:28px;display:flex;flex-direction:column;gap:18px}
.stars{color:var(--red);letter-spacing:4px;font-size:15px}
.review blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.6;flex:1}
.review figcaption{font-size:14px;color:var(--paper-muted)}
.note{font-size:13px;color:var(--paper-muted);margin:18px 0 0}

/* about */
.about .wrap{display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.about img{flex:1 1 380px;min-width:0;max-width:480px;aspect-ratio:4/5;object-fit:cover}
.about-text{flex:1 1 420px;min-width:0}
.about-text p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--soft);margin:0}

/* studio */
.studio{border-top:1px solid var(--line)}
.studio-imgs{display:flex;flex-wrap:wrap;gap:16px}
.studio-imgs img:first-child{flex:1.6 1 0;min-width:280px;aspect-ratio:1.6/1;object-fit:cover}
.studio-imgs img:last-child{flex:1 1 0;min-width:240px;aspect-ratio:1/1;object-fit:cover;object-position:center 60%}

/* faq */
.faq .wrap{display:flex;flex-wrap:wrap;gap:64px}
.faq-head{flex:1 1 300px;min-width:0}
.faq-list{flex:2 1 520px;min-width:0;border-top:1px solid var(--paper-line)}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:600;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--red);font-size:26px;line-height:1;font-weight:400;flex:none}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0 0 26px;font-size:17px;line-height:1.8;color:var(--paper-text);max-width:640px}

/* contact */
.contact .wrap{display:flex;flex-wrap:wrap;gap:64px}
.contact-intro{flex:1 1 360px;min-width:0}
.contact-intro p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--muted);margin:0}
.form{flex:1.3 1 460px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:13px;color:var(--muted);letter-spacing:.06em}
.form input,.form textarea,.form select{font:inherit;color:var(--bone);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:12px 0;width:100%;border-radius:0}
.form select option{color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-bottom-color:var(--red-light)}
.form input[type=file]{font-size:14px;color:var(--muted)}
.form .privacy{font-size:13px;color:var(--muted);margin:0}
.hidden{display:none}

/* footer */
.footer{border-top:1px solid var(--line);padding:56px 0 36px}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px}
.footer-info{display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:24px;font-size:15px;color:var(--bone)}
.footer .logo img{width:150px}
.credit{color:var(--bone);display:inline-flex;align-items:center;gap:4px;transition:color .3s}
.credit span{display:inline-block;font-size:.9em;color:var(--red-light);transition:transform .3s var(--ease)}
.credit:hover{color:var(--red-light)}
.credit:hover span{transform:translate(2px,-2px)}
[dir=rtl] .credit:hover span{transform:translate(-2px,-2px)}

/* floating whatsapp */
.wa-float{display:flex;position:fixed;bottom:24px;inset-inline-end:24px;z-index:40;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.wa-float:hover{background:#1EBE5A;color:#fff;transform:scale(1.06)}
.wa-float svg{width:28px;height:28px}
.wa-float{transition:opacity .3s,transform .3s}
.wa-float.off{opacity:0;transform:scale(.8);pointer-events:none}



/* ---------- motion ---------- */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.7,0,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* hero intro, pure CSS so nothing flashes */
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .line>span{display:block}
.js .hero .eyebrow{animation:rise 1s var(--ease) .15s both}
.js .hero h1 .line>span{animation:lineUp 1.3s var(--ease) both}
.js .hero h1 .line:nth-child(1)>span{animation-delay:.3s}
.js .hero h1 .line:nth-child(2)>span{animation-delay:.45s}
.js .hero .lead{animation:rise 1.1s var(--ease) .75s both}
.js .hero-ctas .btn{animation:rise 1s var(--ease) both}
.js .hero-ctas .btn:nth-child(1){animation-delay:.95s}
.js .hero-ctas .btn:nth-child(2){animation-delay:1.05s}
.js .hero-media{animation:unveil 1.6s var(--ease-io) .2s both;overflow:hidden}
.js .hero-media video{animation:settle 2.4s var(--ease) .2s both}
.js .header{animation:rise .9s var(--ease) both}

/* scroll reveals (classes added by site.js) */
.js .anim{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
.js .anim.in{opacity:1;transform:none}
.js .anim-img{overflow:hidden}
.js .anim-img img{clip-path:inset(0 0 100% 0);transform:scale(1.15);transition:clip-path 1.4s var(--ease-io) var(--d,0s),transform 2s var(--ease) var(--d,0s)}
.js .anim-img.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.works button.anim-img.in:hover img{transform:scale(1.04);transition-duration:.6s;transition-delay:0s}
.js .step .step-num span:last-child{transform:scaleX(0);transform-origin:var(--from,right);transition:transform 1.4s var(--ease) calc(var(--d,0s) + .3s)}
[dir=ltr] .step{--from:left}
.js .step.in .step-num span:last-child{transform:scaleX(1)}
.js .step .step-num span:first-child{transition:background .4s,color .4s}
.step:hover .step-num span:first-child{background:var(--red);color:#F2EEE7}
.approach-art img{will-change:transform;transition:transform .25s linear}
.parallax{will-change:transform}
.faq details[open] p{animation:faqIn .5s var(--ease)}
.faq summary{transition:color .3s}
.faq summary:hover{color:var(--red)}
.review{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.review:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,18,16,.08)}
.footer-links a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .4s var(--ease)}
[dir=rtl] .footer-links a{background-position:100% 100%}
.footer-links a:hover{background-size:100% 1px}
.nav a{position:relative}
.nav a::after{content:'';position:absolute;inset-inline:0;bottom:-6px;height:1px;background:var(--red-light);transform:scaleX(0);transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width:960px){.nav a::after{display:none}}

/* thanks page */
.thanks{min-height:70vh;display:flex;align-items:center}
.thanks .wrap{max-width:720px}

@media (max-width:1240px){
  .nav{gap:20px}
  .header-actions .btn-line{display:none}
}
@media (max-width:1100px){
  .works{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  :root{--header:72px}
  .menu-btn{display:block}
  .nav,.header-actions .btn{display:none}
  .lang{margin:0}
  .header-actions{gap:4px}
  .menu-open .nav{display:flex;position:fixed;top:var(--header);inset-inline:0;bottom:0;background:var(--ink);flex-direction:column;gap:0;padding:24px var(--gutter);font-family:var(--serif);font-size:32px;overflow-y:auto}
  .menu-open .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .wa-float{bottom:18px;inset-inline-end:18px;width:56px;height:56px}
}
@media (max-width:760px){
  :root{--gutter:20px}
  body{font-size:16px}
  .section{padding:84px 0}
  .hero{align-items:flex-end}
  .hero .wrap{padding-top:120px;padding-bottom:96px}
  .hero-media::after,[dir=ltr] .hero-media::after{background:linear-gradient(to bottom,rgba(15,14,13,.15) 0%,rgba(15,14,13,.55) 45%,rgba(15,14,13,.95) 100%)}
  .hero-text{flex:1 1 100%}
  .lead{color:var(--soft);margin-bottom:28px}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{flex:1 1 0;min-width:0;padding:0 10px;font-size:15px;white-space:nowrap}
  .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .steps{grid-template-columns:1fr}
  .step{min-height:0;padding:28px 24px}
  .track>li{flex-basis:84%;min-width:0}
  .form{grid-template-columns:1fr}
  .about .wrap,.approach .wrap,.faq .wrap,.contact .wrap{gap:40px}
  .logo img{width:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .anim{opacity:1;transform:none}
  .js .anim-img img{clip-path:none}
  .js .anim-img img,.js .step .step-num span:last-child{transform:none}
  html{scroll-behavior:auto}
  .works img{transition:none}
}