:root{
  --bg:#0a0a09;--paper:#f0eee8;--muted:#9b978e;--line:#292824;
  --rust:#9b4f34;--amber:#c78a45;--serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}body{margin:0;overflow-x:hidden;max-width:100%;background:var(--bg);color:var(--paper);font-family:Inter,Arial,sans-serif;font-size:15px;line-height:1.45}
a{color:inherit;text-decoration:none}button{font:inherit}.intro{position:fixed;inset:0;z-index:100;background:#050505;display:flex;align-items:center;justify-content:center;gap:30px;transition:opacity .6s ease,visibility .6s}.intro.hide{opacity:0;visibility:hidden}
.intro-mark,.mark{display:grid;gap:5px}.intro-mark i,.mark i{display:block;background:#fff}.intro-mark i{width:74px;height:18px}.intro-name{font-size:18px;letter-spacing:.15em}.intro-name span{color:var(--muted)}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 3.5vw;background:linear-gradient(#0a0a09,transparent)}
.brand{display:flex;align-items:center;gap:13px}.mark i{width:28px;height:7px}.brand-name{font-size:12px;letter-spacing:.12em}.brand-name b{font-weight:400;color:var(--muted)}
.nav{display:flex;align-items:center;gap:28px;font-size:11px;letter-spacing:.08em}.nav a{opacity:.72;transition:.2s}.nav a:hover{opacity:1}.lang{background:none;border:0;color:#fff;cursor:pointer;font-size:11px}.lang span{opacity:.4}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:11px}
.hero{min-height:100svh;padding:170px 3.5vw 45px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:42vw;height:42vw;right:-12vw;top:8vh;border:1px solid #25231f;border-radius:50%;box-shadow:0 0 90px rgba(155,79,52,.08);pointer-events:none}
.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--muted);margin-bottom:28px}
h1{font-size:clamp(62px,11vw,170px);line-height:.82;letter-spacing:-.065em;margin:0;max-width:1250px;font-weight:500}
h1 span,h1 em{display:block}h1 em{font-family:var(--serif);font-weight:400;color:var(--rust)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:55px}.hero-bottom p{max-width:490px;font-size:17px;color:#c9c5bd}.arrow-link{font-size:11px;letter-spacing:.12em;border-bottom:1px solid #777;padding-bottom:7px}
.statement{padding:16vw 8vw}.statement p{font-size:clamp(32px,5.3vw,78px);line-height:1.05;letter-spacing:-.045em;max-width:1300px;margin:0}.statement p::first-letter{color:var(--rust)}
.section{padding:120px 3.5vw;border-top:1px solid var(--line)}.section-head{display:grid;grid-template-columns:70px 1fr 1fr;gap:20px;margin-bottom:75px}.section-head>span{font-size:10px;color:var(--muted)}.section-head h2{font-size:clamp(28px,4vw,56px);line-height:1;letter-spacing:-.045em;margin:0;font-weight:500}.section-head p{max-width:450px;color:var(--muted);margin:0}
.service{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:50px;padding:38px 0;border-top:1px solid var(--line)}.service:last-child{border-bottom:1px solid var(--line)}.service>div:first-child{display:flex;gap:24px}.service .num{font-size:10px;color:var(--muted);padding-top:8px}.service h3{font-size:clamp(28px,4vw,56px);line-height:1;margin:0;font-weight:500;letter-spacing:-.045em}.service>p{color:#aaa69d;max-width:390px;margin:5px 0}.prices{display:grid;gap:11px}.prices span{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #22211f;padding-bottom:9px}.prices b{font-weight:400;color:#aaa69d}.prices strong{font-weight:500}.consult{justify-self:start;align-self:start;border-bottom:1px solid #777;padding-bottom:7px;font-size:11px;letter-spacing:.1em}.price-note{font-size:10px;color:#68655f;margin-top:20px}
.work{background:var(--paper);color:#111}.work .section-head p,.work .section-head>span{color:#777}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw 2vw}.work-card{margin:0}.work-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.88);transition:transform .5s ease,filter .5s}.work-card:hover img{transform:scale(.985);filter:saturate(1.05)}.work-card figcaption{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;letter-spacing:.07em}.work-card figcaption b{font-weight:500}.work-card figcaption span{color:#777}
.big-copy{display:grid;grid-template-columns:1.4fr .6fr;gap:8vw;align-items:end}.big-copy>p{font-size:clamp(44px,7vw,110px);line-height:.9;letter-spacing:-.055em;margin:0}.big-copy>div p{color:#aaa69d;font-size:17px}.button{display:inline-block;border:1px solid #4c4943;padding:15px 18px;margin-top:22px;font-size:10px;letter-spacing:.1em;transition:.2s}.button:hover{background:var(--paper);color:#111}
.image-design{background:#16120f}.image-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:center}.poster-stack{position:relative;min-height:660px}.poster-stack img{position:absolute;width:52%;aspect-ratio:1/1;object-fit:cover}.poster-stack img:first-child{left:8%;top:0;transform:rotate(-5deg)}.poster-stack img:last-child{right:6%;bottom:0;transform:rotate(6deg)}.image-copy>p{font-family:var(--serif);font-size:clamp(28px,4vw,52px);line-height:1.05;margin:0 0 40px;color:#d8c9bc}.image-copy ul{list-style:none;padding:0;margin:0 0 35px;border-top:1px solid #3a3029}.image-copy li{padding:13px 0;border-bottom:1px solid #3a3029;color:#b8a99d}
.contact{min-height:80svh;display:flex;align-items:center;background:var(--rust);border:0}.contact-inner{width:100%}.contact .small{font-size:10px;letter-spacing:.15em}.contact h2{font-size:clamp(80px,16vw,230px);letter-spacing:-.07em;line-height:.8;margin:45px 0}.contact p{max-width:520px;font-size:17px}.light{border-color:rgba(255,255,255,.55)}.mail-note{opacity:.55;font-size:10px!important;margin-top:12px}
footer{padding:35px 3.5vw;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#777;border-top:1px solid var(--line)}.footer-brand{color:#fff}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){
 .topbar{padding:20px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:62px;left:0;right:0;background:#0a0a09;padding:25px 20px;flex-direction:column;align-items:flex-start;border-top:1px solid var(--line)}.nav.open{display:flex}
 .hero{padding:130px 20px 30px}.hero-bottom{display:block}.hero-bottom p{font-size:14px}.arrow-link{display:inline-block;margin-top:28px}
 .section{padding:80px 20px}.statement{padding:120px 20px}.section-head{grid-template-columns:35px 1fr}.section-head p{grid-column:2}
 .service{grid-template-columns:1fr;gap:22px}.service h3{font-size:40px}.prices{margin-top:5px}
 .work-grid{grid-template-columns:1fr 1fr;gap:45px 14px}.work-card figcaption{display:block}.work-card figcaption span{display:block;margin-top:4px}
 .big-copy,.image-layout{grid-template-columns:1fr}.big-copy>div{margin-top:20px}.poster-stack{min-height:430px}.image-copy{margin-top:25px}
 .contact{width:100%;max-width:100%;overflow:hidden}.contact-inner{min-width:0;max-width:100%}.contact h2{font-size:clamp(64px,22vw,110px);max-width:100%;overflow-wrap:anywhere}.contact p{max-width:100%}.contact .button{font-size:9px;max-width:100%;overflow-wrap:anywhere;word-break:break-word;padding:14px 12px}
 footer{align-items:flex-start;gap:25px;flex-wrap:wrap}
}
@media(max-width:480px){.work-grid{grid-template-columns:1fr}.intro-name{font-size:12px}.intro-mark i{width:55px;height:14px}}


/* V3 refinements */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Services & Pricing main heading */
#services .section-title,
#services h2,
.services .section-title,
.services h2 {
  font-size: clamp(2.6rem, 6vw, 5.5rem) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
}

/* Final contact / Hablemos section */
#contact,
.contact,
.contact-section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#contact .container,
.contact .container,
.contact-section .container {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#contact h2,
#contact .contact-title,
.contact h2,
.contact-section h2 {
  font-size: clamp(3rem, 9vw, 7rem) !important;
  line-height: .9 !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow-wrap: anywhere;
}

#contact p,
#contact a,
.contact p,
.contact a,
.contact-section p,
.contact-section a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  #contact,
  .contact,
  .contact-section {
    box-sizing: border-box;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #contact .container,
  .contact .container,
  .contact-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  #contact h2,
  #contact .contact-title,
  .contact h2,
  .contact-section h2 {
    font-size: clamp(2.65rem, 15vw, 4.4rem) !important;
    letter-spacing: -0.055em !important;
    white-space: normal !important;
  }

  #services .section-title,
  #services h2,
  .services .section-title,
  .services h2 {
    font-size: clamp(2.5rem, 13vw, 4rem) !important;
  }
}


/* V5 - exact requested mobile sizing */
@media (max-width: 700px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* EXACTLY the same font size as MEZCLA */
  #services .section-head h2 {
    font-size: 40px !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
    font-weight: 500 !important;
  }

  /* Contact section: everything must fit in one phone viewport width */
  #contact {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #contact .contact-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #contact h2 {
    font-size: 52px !important;
    line-height: .9 !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 38px 0 !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #contact p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 17px !important;
  }

  #contact .button {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 8.5px !important;
    padding: 14px 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}


/* V6 PRO — realistic photographic vinyl hero */
.hero-photo{
  isolation:isolate;
  background:#050505;
}
.hero-photo::after{
  display:none !important; /* remove old eclipse completely */
}
.hero-photo-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("assets/hero-vinyl-v10.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,5,5,.88) 0%,
    rgba(5,5,5,.68) 34%,
    rgba(5,5,5,.18) 62%,
    rgba(5,5,5,.04) 100%);
}
.hero-photo .eyebrow,
.hero-photo h1,
.hero-photo .hero-bottom{
  position:relative;
  z-index:1;
}
.hero-photo h1{
  max-width:850px;
}
.hero-photo h1 em{
  color:#f0eee8;
  font-family:Inter,Arial,sans-serif;
  font-weight:500;
}

/* Services title: EXACT same typography as MEZCLA */
#services .section-head h2{
  font-size:clamp(28px,4vw,56px) !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  font-weight:500 !important;
}

@media(max-width:800px){
  .hero-photo-bg{
    background-position:62% center;
  }
  .hero-photo::before{
    background:linear-gradient(180deg,
      rgba(5,5,5,.30) 0%,
      rgba(5,5,5,.46) 36%,
      rgba(5,5,5,.88) 76%,
      rgba(5,5,5,.96) 100%);
  }
  .hero-photo h1{
    max-width:100%;
  }
  #services .section-head h2{
    font-size:40px !important; /* identical to .service h3 / MEZCLA on mobile */
    line-height:1 !important;
  }
}


/* V7 FINAL — services heading is a section label, not another service */
#services .section-head{
  align-items:start !important;
}
#services .section-head .services-kicker,
#services .section-head h2{
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
}

/* Align the section label with the service content column on desktop */
@media (min-width:701px){
  #services .section-head .services-kicker,
  #services .section-head h2{
    grid-column:2 !important;
  }
}

/* On mobile, keep it clean and aligned to the same left edge as MEZCLA */
@media (max-width:700px){
  #services .section-head{
    display:block !important;
  }
  #services .section-head .services-kicker,
  #services .section-head h2{
    font-size:14px !important;
    line-height:1.2 !important;
    letter-spacing:.14em !important;
    margin-left:0 !important;
    padding-left:0 !important;
    text-align:left !important;
  }
}


/* V10 definitive corrections */
.hero::after,
.hero-photo::after{
  content:none !important;
  display:none !important;
}
.hero-photo-bg{
  background-image:url("assets/hero-vinyl-v10.jpg") !important;
}

/* "SERVICIOS" is a section label aligned with the MEZCLA title column */
#services .section-head{
  grid-template-columns:70px 1fr 1fr !important;
}
#services .section-head .services-kicker{
  grid-column:2 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  letter-spacing:.14em !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

@media(max-width:700px){
  #services .section-head{
    display:grid !important;
    grid-template-columns:42px 1fr !important;
    gap:12px !important;
  }
  #services .section-head>span{
    grid-column:1 !important;
  }
  #services .section-head .services-kicker{
    grid-column:2 !important;
    font-size:14px !important;
    margin:0 !important;
  }
  #services .section-head p{
    grid-column:2 !important;
    margin-left:0 !important;
  }
}


/* V11 — definitive SERVICES & PRICES section heading */
#services .section-head{
  display:block !important;
  padding-top:0 !important;
}
#services .section-head > span{
  display:block !important;
  margin-bottom:22px !important;
}
#services .section-head .services-kicker,
#services .section-head h2{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  font-size:clamp(48px,6.2vw,92px) !important;
  line-height:.92 !important;
  letter-spacing:-.055em !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
#services .section-head p{
  max-width:560px !important;
  margin:32px 0 0 0 !important;
}

/* Mobile: still unmistakably a section title */
@media(max-width:700px){
  #services .section-head{
    display:block !important;
  }
  #services .section-head > span{
    margin-bottom:16px !important;
  }
  #services .section-head .services-kicker,
  #services .section-head h2{
    font-size:40px !important;
    line-height:.95 !important;
    letter-spacing:-.045em !important;
    margin:0 !important;
  }
  #services .section-head p{
    margin-top:22px !important;
    max-width:100% !important;
  }
}

/* V13 — services background uses a photographic asset with NO baked-in text */
#services{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#090908 !important;
}
#services::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  background:
    linear-gradient(90deg,rgba(8,8,7,.96) 0%,rgba(8,8,7,.88) 38%,rgba(8,8,7,.64) 74%,rgba(8,8,7,.72) 100%),
    url("assets/services-studio-floor-v14.jpg") center / cover no-repeat !important;
  opacity:.82 !important;
  pointer-events:none !important;
}
#services::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.30)) !important;
  pointer-events:none !important;
}
@media(max-width:700px){
  #services::before{
    background:
      linear-gradient(180deg,rgba(8,8,7,.82),rgba(8,8,7,.88)),
      url("assets/services-studio-floor-v14.jpg") 62% center / cover no-repeat !important;
  }
}

/* V14 — clearer approved studio wood background */
#services::before{
  background:
    linear-gradient(90deg,rgba(8,8,7,.90) 0%,rgba(8,8,7,.73) 38%,rgba(8,8,7,.38) 74%,rgba(8,8,7,.48) 100%),
    url("assets/services-studio-floor-v14.jpg") center / cover no-repeat !important;
  opacity:.92 !important;
}
@media(max-width:700px){
  #services::before{
    background:
      linear-gradient(180deg,rgba(8,8,7,.68),rgba(8,8,7,.76)),
      url("assets/services-studio-floor-v14.jpg") 60% center / cover no-repeat !important;
    opacity:.9 !important;
  }
}


/* V15 — remove visual slot for section number and darken work examples */
#services .section-head > span:first-child{
  display:none !important;
}

/* Work / examples section: darker, less stark than the previous light background */
#work,
#works,
#selected-work,
.works,
.selected-work,
.work-section{
  background:#0d0d0c !important;
  color:#f2f0ea !important;
}
#work::before,
#works::before,
#selected-work::before,
.works::before,
.selected-work::before,
.work-section::before{
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.12)) !important;
}

/* Keep cards/images intact and avoid horizontal overflow on mobile */
@media(max-width:700px){
  #work,
  #works,
  #selected-work,
  .works,
  .selected-work,
  .work-section{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
}


/* V18 SOLID — HERO + SERVICES intentionally untouched */

/* Selected work: warm near-black */
#work{
  background:#11100e !important;
  color:#f1eee8 !important;
}
#work .section-head p,
#work .section-head>span,
#work .work-card figcaption span{
  color:#9f978d !important;
}

/* Your project: deep warm brown/charcoal */
#projects{
  background:#17120f !important;
  color:#f1eee8 !important;
}

/* Artist image & design: muted dark brown */
.image-design{
  background:#211813 !important;
  color:#f1eee8 !important;
}

/* Contact: restrained rust from the existing palette */
#contact{
  background:#7f402f !important;
  color:#f7f1e9 !important;
}

/* Preserve clean mobile width */
@media(max-width:700px){
  #work,#projects,.image-design,#contact{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}


/* V19 — SERVICES & PRICES: solid palette color, no wood/image */
#services{
  background:#181411 !important;
}
#services::before,
#services::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}


/* V20 — avoid repeating the brown palette */
#projects{
  background:#171914 !important;
}

/* V21 — typography, hierarchy, mobile language and consent */
:root{ --accent-orange:#b85f3f; }

/* One typeface throughout the site */
html,body,button,input,textarea,select,a,p,span,h1,h2,h3,h4,h5,h6,em,strong,small{
  font-family:Arial,Helvetica,sans-serif !important;
}
.hero h1 em{
  color:var(--accent-orange) !important;
}

/* Same size for every main section heading */
#services .section-head h2,
#work .section-head h2,
#projects .section-head h2,
.image-design .section-head h2,
#contact h2{
  font-size:clamp(48px,6.2vw,92px) !important;
  line-height:.92 !important;
  letter-spacing:-.055em !important;
  font-weight:500 !important;
}

/* Desktop keeps the existing language control */
.mobile-lang{display:none !important;}

.cookie-consent{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:9999;
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  padding:18px 20px; background:#171914; color:#f2eee8;
  border:1px solid rgba(255,255,255,.15);
}
.cookie-consent[hidden],.cookie-modal[hidden]{display:none !important;}
.cookie-copy{max-width:620px}
.cookie-copy strong{font-size:12px;letter-spacing:.12em}
.cookie-copy p{margin:8px 0 0;font-size:13px;line-height:1.45;color:#b9b2a9}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-actions button,.cookie-modal button{
  border:1px solid rgba(255,255,255,.24); background:transparent; color:inherit;
  padding:11px 14px; cursor:pointer; font-size:11px; letter-spacing:.08em;
}
.cookie-actions .cookie-primary{background:#f0ece5;color:#171914}
.cookie-modal{
  position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.72);
  display:grid;place-items:center;padding:20px;
}
.cookie-modal-card{
  position:relative;width:min(520px,100%);background:#181411;color:#f2eee8;
  padding:30px;border:1px solid rgba(255,255,255,.14);
}
.cookie-modal-card h3{font-size:42px;margin:12px 0 25px}
.cookie-close{position:absolute;right:14px;top:14px}
.cookie-row{
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.12);
}
.cookie-row span{display:flex;flex-direction:column;gap:5px}
.cookie-row small{color:#9f978d;font-size:12px}

@media(max-width:700px){
  #services .section-head h2,
  #work .section-head h2,
  #projects .section-head h2,
  .image-design .section-head h2,
  #contact h2{
    font-size:40px !important;
    line-height:.95 !important;
  }
  header .mobile-lang{
    display:block !important;
    margin-left:auto !important;
    margin-right:14px !important;
    font-size:11px !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
    background:none !important;
    border:0 !important;
    color:inherit !important;
    padding:0 !important;
  }
  .cookie-consent{left:10px;right:10px;bottom:10px;display:block;padding:16px}
  .cookie-actions{margin-top:14px}
  .cookie-actions button{flex:1;padding:10px 8px}
}

/* V26 — unified ES / CAT / EN */
.language-switcher{display:flex;align-items:center;gap:7px;white-space:nowrap}
.language-switcher button{
  appearance:none;border:0;background:none;color:inherit;padding:0;cursor:pointer;
  font:inherit;opacity:.45;
}
.language-switcher button.active{opacity:1}
.language-switcher span{opacity:.35}
#projects .project-accent{color:#B85F3F !important;font-style:italic !important}
@media(max-width:700px){
  header .language-switcher.mobile-lang{
    display:flex !important;margin-left:auto !important;margin-right:14px !important;
    font-size:11px !important;letter-spacing:.08em !important;
  }
}

/* V27 — project statement matches service-name scale */
#projects [data-i18n="projectsCopy"]{
  font-size:clamp(42px,4.1vw,64px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  font-weight:400 !important;
}
#projects [data-i18n="projectsCopy"] .project-accent{
  font-size:inherit !important;
}
@media(max-width:700px){
  #projects [data-i18n="projectsCopy"]{
    font-size:40px !important;
    line-height:1.02 !important;
  }
}

/* V30 — PRIMERA / FINAL accent guaranteed in ES, CAT and EN */
#projects [data-i18n="projectsCopy"] .project-accent{
  color:#B85F3F !important;
  font-style:italic !important;
  font-weight:inherit !important;
}


/* V33 — conversion, forms and subtle premium motion */
.service-cta{margin-top:52px;padding-top:32px;border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:space-between;gap:24px}.service-cta p{font-size:clamp(22px,2.5vw,36px);max-width:620px;line-height:1.05}.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.7fr);gap:clamp(40px,7vw,110px);margin-top:46px}.project-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}.project-form label{display:flex;flex-direction:column;gap:9px;font-size:10px;letter-spacing:.12em}.project-form input,.project-form select,.project-form textarea{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;background:transparent;color:inherit;padding:12px 0;font:inherit;outline:none}.project-form textarea{resize:vertical}.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:#fff}.project-form select option{color:#111}.form-wide{grid-column:1/-1}.privacy-check{flex-direction:row!important;align-items:center;gap:10px!important;text-transform:none;letter-spacing:0!important;font-size:12px!important}.privacy-check input{width:auto}.hp{position:absolute!important;left:-9999px!important}.contact-direct{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.contact-direct a{font-size:13px;border-bottom:1px solid currentColor;padding-bottom:5px}.footer-links{display:flex;gap:18px;align-items:center}.work-card img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}.work-card:hover img{transform:scale(1.025)}.button,.consult,.arrow-link,.contact-direct a{transition:opacity .25s ease,transform .25s ease}.button:hover,.consult:hover,.arrow-link:hover,.contact-direct a:hover{transform:translateY(-2px);opacity:.72}.reveal{transition-duration:.85s!important}.legal-page{max-width:920px;margin:0 auto;padding:150px 28px 90px;min-height:80vh}.legal-page h1{font-size:clamp(48px,7vw,88px);line-height:.95;margin-bottom:48px}.legal-page h2{font-size:22px;margin:36px 0 12px}.legal-page p,.legal-page li{line-height:1.7;opacity:.8}.legal-note{border:1px solid rgba(255,255,255,.2);padding:18px;margin:28px 0}.form-status{padding:100px 24px;text-align:center;min-height:70vh}.form-status h1{font-size:clamp(44px,7vw,82px)}
@media(max-width:800px){.service-cta{align-items:flex-start;flex-direction:column}.contact-grid{grid-template-columns:1fr}.project-form{grid-template-columns:1fr}.project-form label,.form-wide{grid-column:1}.footer-links{gap:10px;flex-wrap:wrap;font-size:9px}.contact-direct{margin-top:8px}.work-card:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.reveal,.work-card img,.button,.consult,.arrow-link{transition:none!important}}


/* V37 — Mobile: prevent all horizontal page movement */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html, body {
    overflow-x: clip;
  }
}

img, video, svg, canvas, iframe {
  max-width: 100%;
}

@media (max-width: 800px) {
  body {
    position: relative;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  main, section, header, footer, nav {
    max-width: 100vw;
  }
}


/* V40 — project form confirmation */
#projectForm{
  transition:opacity .28s ease, transform .28s ease;
}
#projectForm.is-sent{
  opacity:0;
  transform:translateY(-8px);
}
.project-form-status{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
}
.project-form-status.is-visible{
  opacity:1;
  transform:none;
}
.project-form-status h3{
  margin:0 0 18px;
  font:inherit;
  font-size:clamp(42px,6vw,82px);
  line-height:.95;
  letter-spacing:-.045em;
}
.project-form-status p{
  max-width:620px;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.5;
  margin:0;
}
.project-form-kicker{
  font-size:12px!important;
  letter-spacing:.16em;
  margin-bottom:22px!important;
  opacity:.65;
}
.project-form-error a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* V43 — confirmation as translucent black modal */
.project-form-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity .28s ease;
}
.project-form-modal.is-visible{opacity:1}
.project-form-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.project-form-modal-card{
  position:relative;
  z-index:1;
  width:min(680px,92vw);
  padding:clamp(36px,6vw,72px);
  background:rgba(8,8,8,.82);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  text-align:center;
  transform:translateY(14px) scale(.985);
  transition:transform .35s ease;
}
.project-form-modal.is-visible .project-form-modal-card{
  transform:none;
}
.project-form-modal-card h3{
  margin:0 0 20px;
  color:#fff;
  font-size:clamp(42px,7vw,78px);
  line-height:.95;
  letter-spacing:-.04em;
}
.project-form-modal-card p{
  margin:0 auto;
  max-width:520px;
  color:#fff;
  line-height:1.55;
}
.project-form-modal-card .project-form-kicker{
  margin-bottom:20px!important;
  opacity:.6;
}
.project-form-modal-close{
  margin-top:36px;
  border:1px solid rgba(255,255,255,.45);
  background:transparent;
  color:#fff;
  padding:12px 24px;
  font:inherit;
  font-size:11px;
  letter-spacing:.12em;
  cursor:pointer;
}
.project-form-modal-close:hover{
  background:#fff;
  color:#000;
}
body.modal-open{overflow:hidden}
@media(max-width:800px){
  .project-form-modal{padding:18px}
  .project-form-modal-card{
    width:100%;
    padding:44px 24px;
  }
}

/* V44 — lighter translucent popup, window/tab-style close control */
.project-form-modal-backdrop{
  background:rgba(0,0,0,.42)!important;
  backdrop-filter:blur(1.5px)!important;
  -webkit-backdrop-filter:blur(1.5px)!important;
}
.project-form-modal-card{
  background:rgba(5,5,5,.68)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.project-form-modal-x{
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:46px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.18)!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.04)!important;
  color:#fff!important;
  font-size:25px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:0!important;
  cursor:pointer!important;
}
.project-form-modal-x:hover{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}

/* V45 — true viewport-centered confirmation dialog */
#projectFormStatus.project-form-modal{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  margin:0!important;
  transform:none!important;
}
#projectFormStatus[hidden]{
  display:none!important;
}
#projectFormStatus .project-form-modal-backdrop{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:rgba(0,0,0,.48)!important;
}
#projectFormStatus .project-form-modal-card{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  width:min(620px,calc(100vw - 36px))!important;
  min-height:320px!important;
  margin:0!important;
  padding:64px 42px 52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  background:rgba(8,8,8,.82)!important;
  color:#fff!important;
}
#projectFormStatus .project-form-success,
#projectFormStatus .project-form-error{
  width:100%!important;
}
#projectFormStatus .project-form-success[hidden],
#projectFormStatus .project-form-error[hidden]{
  display:none!important;
}
#projectFormStatus .project-form-modal-card h3{
  color:#fff!important;
}
@media(max-width:800px){
  #projectFormStatus.project-form-modal{
    padding:18px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #projectFormStatus .project-form-modal-card{
    width:calc(100vw - 36px)!important;
    min-height:300px!important;
    padding:58px 24px 44px!important;
  }
}

/* V51 — conversion / contact polish */
.project-form button[disabled]{opacity:.58;cursor:wait;pointer-events:none}
.form-send-note{min-height:1em;margin:0;font-size:11px;letter-spacing:.04em;opacity:.7}
.privacy-inline-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.whatsapp-link{display:inline-flex!important;align-items:center;gap:8px}
.whatsapp-link[hidden]{display:none!important}

.footer-cookie-settings{
  appearance:none;border:0;background:none;color:inherit;font:inherit;
  font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:0;margin:0;cursor:pointer;opacity:.72;
}
.footer-cookie-settings:hover{opacity:1}

/* V54 — WhatsApp floating contact */
#whatsappLink.whatsapp-link{
  position:fixed !important;
  right:22px !important;
  bottom:22px !important;
  left:auto !important;
  top:auto !important;
  z-index:2147483000 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  padding:12px 16px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  background:rgba(17,16,14,.88) !important;
  color:#fff !important;
  font:600 12px/1 Arial,Helvetica,sans-serif !important;
  letter-spacing:.08em !important;
  text-decoration:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  box-shadow:0 8px 30px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#whatsappLink.whatsapp-link[hidden]{display:none !important}
#whatsappLink.whatsapp-link:hover{background:rgba(17,16,14,.98) !important}
@media(max-width:800px){
  #whatsappLink.whatsapp-link{
    right:14px !important;
    bottom:14px !important;
    padding:11px 14px !important;
    font-size:11px !important;
  }
}

/* V55 — THE STUDIO */
.studio{background:#0e0e0d}.studio .section-head{margin-bottom:48px}.studio .section-head p{max-width:520px}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.team-card{appearance:none;border:0;background:none;color:inherit;padding:0;text-align:left;cursor:pointer;font:inherit}
.team-photo-wrap{display:block;position:relative;overflow:hidden;background:#191816;aspect-ratio:4/5}.team-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.team-view{position:absolute;right:14px;bottom:14px;padding:9px 11px;background:rgba(10,10,10,.76);border:1px solid rgba(255,255,255,.22);font-size:9px;letter-spacing:.12em;opacity:0;transform:translateY(6px);transition:.25s ease}
.team-card:hover .team-photo{transform:scale(1.018)}.team-card:hover .team-view,.team-card:focus-visible .team-view{opacity:1;transform:none}
.team-name{display:block;margin-top:16px;font-size:20px}.team-role{display:block;margin-top:6px;font-size:10px;letter-spacing:.13em;opacity:.58}
.member-modal[hidden]{display:none!important}.member-modal{position:fixed;inset:0;z-index:2147483500;display:grid;place-items:center;padding:28px}
.member-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.76);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);cursor:pointer}
.member-modal-card{position:relative;z-index:1;width:min(1040px,94vw);max-height:90vh;overflow:auto;background:#151310;border:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:minmax(300px,.88fr) 1.12fr}
.member-modal-photo{width:100%;height:100%;min-height:620px;object-fit:cover}.member-modal-copy{padding:clamp(38px,6vw,80px);display:flex;flex-direction:column;justify-content:center}
.member-modal-kicker{font-size:9px;letter-spacing:.18em;opacity:.5;margin-bottom:28px}.member-modal-copy h3{font-size:clamp(42px,5vw,74px);line-height:.92;margin:0 0 14px}
.member-modal-role{font-size:10px;letter-spacing:.13em;opacity:.58;margin:0 0 38px}.member-modal-bio{font-size:clamp(16px,1.45vw,20px);line-height:1.65;opacity:.82;margin:0}
.member-modal-close{position:absolute;z-index:2;right:16px;top:14px;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:25px;line-height:1;cursor:pointer}
body.member-modal-open{overflow:hidden}
@media(max-width:800px){.team-grid{grid-template-columns:1fr}.team-view{opacity:1;transform:none}.member-modal{padding:14px}.member-modal-card{grid-template-columns:1fr;max-height:92vh}.member-modal-photo{height:44vh;min-height:0}.member-modal-copy{padding:30px 24px 38px}.member-modal-copy h3{font-size:42px}}

/* V56 — THE STUDIO refined: compact editorial grid + small centered popup */
#studio.studio{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
#studio .section-head{margin-bottom:36px}
#studio .team-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,240px))!important;
  justify-content:start!important;
  gap:32px 18px!important;
}
#studio .team-card{width:100%!important;max-width:240px!important}
#studio .team-photo-wrap{aspect-ratio:4/5!important;background:#171614!important}
#studio .team-photo{width:100%!important;height:100%!important;object-fit:cover!important}
#studio .team-name{font-size:16px!important;margin-top:11px!important;line-height:1.1!important}
#studio .team-role{font-size:8px!important;line-height:1.35!important;margin-top:5px!important;letter-spacing:.11em!important}
#studio .team-view{
  right:9px!important;bottom:9px!important;padding:7px 8px!important;
  font-size:7px!important;background:rgba(10,10,10,.66)!important
}

/* Popup is intentionally compact and floats above the page. */
#memberModal.member-modal{
  position:fixed!important;inset:0!important;z-index:2147483500!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:18px!important;
}
#memberModal.member-modal[hidden]{display:none!important}
#memberModal .member-modal-backdrop{
  position:absolute!important;inset:0!important;background:rgba(0,0,0,.68)!important;
  backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important
}
#memberModal .member-modal-card{
  position:relative!important;z-index:1!important;
  display:block!important;width:min(360px,calc(100vw - 32px))!important;
  max-height:88vh!important;overflow:auto!important;
  background:#141310!important;border:1px solid rgba(255,255,255,.13)!important;
  border-radius:2px!important;box-shadow:0 24px 70px rgba(0,0,0,.38)!important
}
#memberModal .member-modal-photo{
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;
  max-height:390px!important;object-fit:cover!important;object-position:center 62%!important
}
#memberModal .member-modal-copy{
  display:block!important;padding:22px 22px 25px!important
}
#memberModal .member-modal-kicker{display:none!important}
#memberModal .member-modal-copy h3{
  font-size:25px!important;line-height:1!important;margin:0 0 7px!important;
  letter-spacing:-.02em!important
}
#memberModal .member-modal-role{
  font-size:8px!important;line-height:1.35!important;letter-spacing:.12em!important;
  margin:0 0 17px!important;opacity:.58!important
}
#memberModal .member-modal-bio{
  font-size:12.5px!important;line-height:1.55!important;margin:0!important;opacity:.78!important
}
#memberModal .member-modal-close{
  position:absolute!important;right:10px!important;top:10px!important;z-index:3!important;
  width:29px!important;height:29px!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,.3)!important;background:rgba(0,0,0,.52)!important;
  font-size:19px!important
}
@media(max-width:800px){
  #studio .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:25px 12px!important}
  #studio .team-card{max-width:none!important}
  #studio .team-name{font-size:14px!important}
  #memberModal .member-modal-card{width:min(330px,calc(100vw - 28px))!important;max-height:90vh!important}
  #memberModal .member-modal-photo{max-height:340px!important}
  #memberModal .member-modal-copy{padding:19px 19px 22px!important}
}

/* V57 — temporary Marcel card until portrait is supplied */
#studio .team-photo-placeholder{display:flex!important;align-items:center!important;justify-content:center!important;background:#1b1916!important}
#studio .team-initials{font-size:34px;letter-spacing:-.04em;opacity:.28}

/* V58 — THE STUDIO: compact editorial team grid, based on supplied reference */
#studio.studio{
  background:#eee9e6!important;
  color:#111!important;
  padding:clamp(64px,7vw,100px) clamp(22px,3vw,48px)!important;
}
#studio .section-head{
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  align-items:end!important;
  column-gap:18px!important;
  margin-bottom:28px!important;
}
#studio .section-head span{opacity:.45!important}
#studio .section-head h2{margin:0!important}
#studio .section-head p{
  grid-column:2!important;
  margin:7px 0 0!important;
  max-width:none!important;
  font-size:12px!important;
  opacity:.58!important;
}
#studio .team-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:34px 14px!important;
  width:100%!important;
}
#studio .team-card{
  width:100%!important;
  max-width:none!important;
  color:#111!important;
  overflow:visible!important;
}
#studio .team-photo-wrap{
  width:100%!important;
  aspect-ratio:3/4!important;
  background:#d8d4d1!important;
  overflow:hidden!important;
}
#studio .team-photo{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;
  filter:grayscale(100%)!important;
  transform:none!important;
  transition:filter .25s ease,opacity .25s ease!important;
}
#studio .team-card:hover .team-photo{transform:none!important;filter:grayscale(0%)!important}
#studio .team-name{
  display:block!important;
  margin-top:10px!important;
  font-size:15px!important;
  line-height:1.05!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}
#studio .team-role{
  display:block!important;
  margin-top:4px!important;
  font-size:10px!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  opacity:.72!important;
  text-transform:none!important;
}
#studio .team-view{display:none!important}
#studio .team-photo-placeholder{
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#d8d4d1!important
}
#studio .team-initials{
  font-size:28px!important;letter-spacing:-.04em!important;color:#111!important;opacity:.28!important
}

/* Small, elegant overlay popup */
#memberModal.member-modal{
  position:fixed!important;inset:0!important;z-index:2147483500!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:18px!important;
}
#memberModal.member-modal[hidden]{display:none!important}
#memberModal .member-modal-backdrop{
  position:absolute!important;inset:0!important;border:0!important;
  background:rgba(0,0,0,.62)!important;
  backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
}
#memberModal .member-modal-card{
  position:relative!important;z-index:1!important;
  display:block!important;
  width:min(330px,calc(100vw - 32px))!important;
  max-height:88vh!important;overflow:auto!important;
  background:#f0ece8!important;color:#111!important;
  border:0!important;border-radius:0!important;
  box-shadow:0 22px 70px rgba(0,0,0,.32)!important;
}
#memberModal .member-modal-photo{
  display:block!important;width:100%!important;height:260px!important;
  min-height:0!important;max-height:none!important;
  object-fit:cover!important;object-position:center 62%!important;
  filter:grayscale(100%)!important;
}
#memberModal .member-modal-photo[hidden]{display:none!important}
#memberModal .member-modal-copy{
  display:block!important;padding:19px 20px 22px!important;
}
#memberModal .member-modal-kicker{display:none!important}
#memberModal .member-modal-copy h3{
  margin:0 0 5px!important;font-size:22px!important;line-height:1!important;
  color:#111!important;letter-spacing:-.02em!important
}
#memberModal .member-modal-role{
  margin:0 0 14px!important;font-size:9px!important;line-height:1.3!important;
  letter-spacing:.02em!important;color:#111!important;opacity:.55!important
}
#memberModal .member-modal-bio{
  margin:0!important;font-size:11.5px!important;line-height:1.52!important;
  color:#111!important;opacity:.78!important
}
#memberModal .member-modal-close{
  position:absolute!important;right:9px!important;top:9px!important;z-index:3!important;
  width:27px!important;height:27px!important;
  border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;
  background:rgba(0,0,0,.45)!important;color:#fff!important;font-size:17px!important
}
@media(max-width:1100px){
  #studio .team-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:800px){
  #studio.studio{padding-left:16px!important;padding-right:16px!important}
  #studio .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 10px!important}
  #studio .team-name{font-size:14px!important}
  #studio .team-role{font-size:9px!important}
  #memberModal .member-modal-card{width:min(310px,calc(100vw - 28px))!important}
  #memberModal .member-modal-photo{height:235px!important}
}

/* ===== V59 THE STUDIO — isolated rebuild ===== */
.studio-v59{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  padding:72px 26px 86px!important;margin:0!important;
  background:#eee9e6!important;color:#111!important;overflow:hidden!important;
}
.studio-v59-head{margin:0 0 30px!important;padding:0!important}
.studio-v59-head h2{
  margin:0!important;font-size:clamp(42px,5.8vw,84px)!important;line-height:.9!important;
  font-weight:700!important;letter-spacing:-.055em!important;color:#111!important
}
.studio-v59-head p{margin:11px 0 0!important;font-size:12px!important;line-height:1.3!important;color:#111!important;opacity:.55!important}
.studio-v59-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:42px 16px!important;width:100%!important;margin:0!important;padding:0!important;
}
.studio-v59-person{
  display:block!important;width:100%!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  color:#111!important;text-align:left!important;font-family:Arial,Helvetica,sans-serif!important;
  cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;
}
.studio-v59-image{
  display:flex!important;width:100%!important;aspect-ratio:3/4!important;
  overflow:hidden!important;align-items:center!important;justify-content:center!important;
  background:#d5d1ce!important
}
.studio-v59-image img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;filter:grayscale(100%)!important;
  transition:filter .25s ease!important
}
.studio-v59-person:hover .studio-v59-image img{filter:grayscale(0%)!important}
.studio-v59-placeholder b{font-size:30px!important;font-weight:500!important;opacity:.25!important}
.studio-v59-person strong{
  display:block!important;margin:11px 0 0!important;padding:0!important;
  font-size:15px!important;line-height:1.05!important;font-weight:700!important;
  letter-spacing:-.02em!important;color:#111!important
}
.studio-v59-person>span:last-child{
  display:block!important;margin:4px 0 0!important;padding:0!important;
  font-size:10px!important;line-height:1.25!important;font-weight:400!important;
  letter-spacing:0!important;text-transform:none!important;color:#111!important;opacity:.72!important
}
.studio-v59-empty{display:block!important}

/* overlay */
.studio-v59-modal[hidden]{display:none!important}
.studio-v59-modal{
  position:fixed!important;inset:0!important;z-index:2147483640!important;
  display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important
}
.studio-v59-backdrop{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  border:0!important;background:rgba(0,0,0,.66)!important;
  backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important
}
.studio-v59-popup{
  position:relative!important;z-index:1!important;display:block!important;
  width:310px!important;max-width:calc(100vw - 30px)!important;max-height:88vh!important;
  overflow:auto!important;background:#eee9e6!important;color:#111!important;
  box-shadow:0 22px 80px rgba(0,0,0,.35)!important
}
.studio-v59-popup-photo{
  display:block!important;width:100%!important;height:230px!important;object-fit:cover!important;
  object-position:center 62%!important;filter:grayscale(100%)!important
}
.studio-v59-popup-photo[hidden]{display:none!important}
.studio-v59-popup-placeholder{
  display:flex!important;width:100%!important;height:190px!important;align-items:center!important;
  justify-content:center!important;background:#d5d1ce!important;font-size:36px!important;opacity:.5!important
}
.studio-v59-popup-placeholder[hidden]{display:none!important}
.studio-v59-popup-copy{padding:18px 19px 21px!important}
.studio-v59-popup-copy h3{margin:0 0 5px!important;font-size:22px!important;line-height:1!important;letter-spacing:-.025em!important;color:#111!important}
.studio-v59-popup-role{margin:0 0 14px!important;font-size:9px!important;line-height:1.3!important;color:#111!important;opacity:.55!important}
.studio-v59-popup-bio{margin:0!important;font-size:11.5px!important;line-height:1.52!important;color:#111!important;opacity:.78!important}
.studio-v59-close{
  position:absolute!important;z-index:2!important;right:9px!important;top:9px!important;
  width:28px!important;height:28px!important;padding:0!important;border:1px solid rgba(255,255,255,.55)!important;
  border-radius:50%!important;background:rgba(0,0,0,.48)!important;color:#fff!important;
  font-size:18px!important;line-height:25px!important;cursor:pointer!important
}
body.studio-v59-open{overflow:hidden!important}
@media(max-width:1050px){.studio-v59-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:700px){
  .studio-v59{padding:58px 14px 70px!important}
  .studio-v59-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 10px!important}
  .studio-v59-person strong{font-size:14px!important}
  .studio-v59-person>span:last-child{font-size:9px!important}
  .studio-v59-empty{display:none!important}
}

/* V68 — iOS/Safari form controls: remove native blue UI */
#contact button,
#contact input,
#contact textarea,
#contact select{
  -webkit-appearance:none!important;
  appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
  border-radius:0!important;
}
#contact .submit,
#contact button[type="submit"]{
  background:#181411!important;
  color:#f3eee9!important;
  border:1px solid rgba(243,238,233,.32)!important;
  box-shadow:none!important;
}
#contact .submit:disabled,
#contact button[type="submit"]:disabled{
  background:#181411!important;
  color:rgba(243,238,233,.58)!important;
  opacity:.72!important;
}
#contact select{
  color:#f3eee9!important;
  background-color:transparent!important;
}
#contact input[type="checkbox"]{
  -webkit-appearance:checkbox!important;
  appearance:auto!important;
  accent-color:#181411!important;
  border-radius:3px!important;
}
/* Prevent iOS from styling links as blue action buttons */
#contact a,
#contact a:link,
#contact a:visited{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}
@media(max-width:800px){
  #contact .submit,
  #contact button[type="submit"]{
    background:#181411!important;
    color:#f3eee9!important;
  }
}

/* V70 — Plain editorial arrows, same treatment as CONSULTAR → */
a, button{
  font-variant-emoji:text;
}
.cta-link, .hero-link, .whatsapp-link,
#contact a, #contact button[type="submit"]{
  text-decoration-color:currentColor;
}


/* V72 — Selected Work / Music: compact editorial grid */
#work .music-work-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:44px 22px;
  max-width:1180px;
}
#work .music-work-card{margin:0;min-width:0;}
#work .music-work-card a{display:block;overflow:hidden;background:#0c0c0b;}
#work .music-work-card img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .45s ease,opacity .45s ease;
}
#work .music-work-card a:hover img{transform:scale(1.018);opacity:.9;}
#work .music-work-credit{
  margin:10px 0 0;font-size:10px;line-height:1.35;letter-spacing:.065em;
  color:#9f978d;text-transform:uppercase;
}
@media(max-width:800px){
  #work .music-work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px;}
  #work .music-work-credit{font-size:9px;margin-top:8px;}
}
@media(max-width:380px){#work .music-work-grid{gap:30px 10px;}}


/* V73 — Selected Work: fuller 6-column music grid */
@media (min-width: 1201px){
  .music-grid,
  .spotify-grid,
  .works-music-grid,
  #work .music-grid,
  #works .music-grid,
  #selected-work .music-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
  }
}
@media (min-width: 801px) and (max-width: 1200px){
  .music-grid,
  .spotify-grid,
  .works-music-grid,
  #work .music-grid,
  #works .music-grid,
  #selected-work .music-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 800px){
  .music-grid,
  .spotify-grid,
  .works-music-grid,
  #work .music-grid,
  #works .music-grid,
  #selected-work .music-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width:1201px){
.music-work-credit,
.music-work-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;width:100%!important;max-width:none!important;}
}

/* V74 — Selected Experience */
#work .selected-experience{margin-top:72px;padding-top:34px;border-top:1px solid rgba(243,238,233,.18);}
#work .selected-experience-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,430px);gap:28px;align-items:end;margin-bottom:28px;}
#work .selected-experience-head h3{margin:0;font-size:clamp(24px,2.1vw,34px);font-weight:500;letter-spacing:-.03em;}
#work .selected-experience-head p{margin:0;font-size:13px;line-height:1.45;opacity:.68;}
#work .experience-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 18px;}
@media(max-width:1200px){#work .experience-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:800px){#work .selected-experience{margin-top:54px;padding-top:28px;}#work .selected-experience-head{display:block;margin-bottom:24px;}#work .selected-experience-head p{margin-top:10px;max-width:440px;}#work .experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px;}}


/* V75 — iPhone form / success modal viewport fix
   iOS Safari zooms focused inputs when their computed font-size is below 16px.
   Keep form controls at 16px on mobile so the success popup opens at the normal page scale. */
@media (max-width: 800px){
  #contact input,
  #contact textarea,
  #contact select{
    font-size:16px !important;
  }

  /* Success popup must fit inside the visible mobile viewport. */
  .form-success-modal,
  .success-modal,
  #formSuccessModal,
  #successModal{
    max-width:calc(100vw - 32px) !important;
    max-height:calc(100dvh - 32px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* V77 — discreet semantic service links */
.seo-service-nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.42}
.seo-service-nav a{color:inherit;text-decoration:none}
.seo-service-nav a:hover{opacity:1}
@media(max-width:800px){.seo-service-nav{gap:12px;font-size:9px}}


/* V83.1 — Image & Design HQ sharpness fix */
.image-design .poster-stack img{
  image-rendering:auto;
  filter:none !important;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
@media (min-width:801px){
  .image-design .poster-stack img:first-child{transform:none !important;}
  .image-design .poster-stack img:last-child{transform:none !important;}
}

/* V86 — IMAGE & VISUALS */
.visual-work{margin-top:clamp(52px,8vw,110px);border-top:1px solid rgba(241,238,232,.18);padding-top:22px}
.visual-work-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:18px}.visual-kicker{margin:0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a99a8e}
.film-card{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}.film-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#090807}.film-media>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .25s}.film-card:hover .film-media>img{transform:scale(1.015)}
.film-preview{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.film-preview iframe{width:100%;height:100%;border:0;transform:scale(1.01)}.film-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(10,9,8,.28);backdrop-filter:blur(8px);font-size:20px;padding-left:4px;transition:.25s}.film-card:hover .film-play{transform:translate(-50%,-50%) scale(.92);opacity:.2}.film-hover-label{position:absolute;z-index:4;left:18px;bottom:16px;font-size:9px;letter-spacing:.14em;color:#fff;text-transform:uppercase;text-shadow:0 1px 10px #000}.film-meta{display:flex;justify-content:space-between;gap:20px;padding:14px 0 0}.film-meta strong,.film-meta em{font-size:10px;letter-spacing:.08em;font-style:normal;font-weight:500}.film-meta em{color:#b8a99d}.visual-consult{display:inline-block;margin-top:34px}
.film-modal[hidden]{display:none}.film-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(16px,4vw,56px)}.film-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(5,4,4,.94);cursor:pointer}.film-modal-dialog{position:relative;z-index:2;width:min(1180px,100%)}.film-modal-player{aspect-ratio:16/9;background:#000}.film-modal-player iframe{width:100%;height:100%;border:0}.film-modal-close{position:absolute;right:0;top:-48px;border:0;background:transparent;color:#fff;font-size:34px;font-weight:300;cursor:pointer}.film-modal-open{overflow:hidden}
@media(max-width:800px){.visual-work-head{display:block}.visual-work-head .visual-kicker+.visual-kicker{margin-top:7px}.film-play{width:58px;height:58px}.film-hover-label{display:none}.film-meta{display:block}.film-meta em{display:block;margin-top:7px}.visual-work{margin-top:58px}}


/* V87 — Image, Visuals & Art Design: project grid aligned with Music */
.visual-portfolio{margin-top:clamp(54px,7vw,96px);border-top:1px solid rgba(241,238,232,.18);padding-top:28px}
.visual-portfolio-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,430px);gap:28px;align-items:end;margin-bottom:28px}
.visual-portfolio-head h3{margin:0;font-size:clamp(24px,2.1vw,34px);font-weight:500;letter-spacing:-.03em}
.visual-portfolio-head p{margin:0;font-size:13px;line-height:1.45;color:#a99a8e}
.visual-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px;max-width:1180px}
.visual-project-card{min-width:0}
.visual-project-media{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#090807}
.visual-project-media>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,opacity .45s ease}
.visual-project-card:hover .visual-project-media>img{transform:scale(1.018);opacity:.92}
.visual-project-title{margin:10px 0 0;font-size:10px;line-height:1.35;letter-spacing:.065em;color:#d8c9bc;text-transform:uppercase}
.visual-project-credit{margin:4px 0 0;font-size:9px;line-height:1.4;letter-spacing:.06em;color:#9f978d;text-transform:uppercase}
.visual-video-button{width:100%;display:block}
.visual-video-button .film-media{aspect-ratio:1/1}
.visual-video-button .film-media>img{height:100%;object-fit:cover}
.visual-video-button .film-preview iframe{position:absolute;left:50%;top:50%;width:178%;height:100%;transform:translate(-50%,-50%) scale(1.01)}
.visual-video-button .film-play{width:58px;height:58px;font-size:17px}
@media(max-width:800px){
 .visual-portfolio{margin-top:58px;padding-top:24px}
 .visual-portfolio-head{display:block;margin-bottom:22px}
 .visual-portfolio-head p{margin-top:9px;max-width:440px}
 .visual-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px}
 .visual-project-title{font-size:9px;margin-top:8px}
 .visual-project-credit{font-size:8px;margin-top:4px}
 .visual-video-button .film-play{width:48px;height:48px}
}
@media(max-width:380px){.visual-project-grid{gap:30px 10px}}

/* V91 — editorial aesthetic pass only. No content/structure changes. */
:root{--bm-accent:#B85F3F;--bm-hairline:rgba(241,238,232,.16)}

/* More editorial rhythm and section scale */
.section{padding-top:clamp(96px,10vw,148px);padding-bottom:clamp(96px,10vw,148px)}
.section-head{margin-bottom:clamp(58px,7vw,92px);align-items:start}
#services .section-head h2,#projects .section-head h2,#work .section-head h2,.image-design .section-head h2{
  letter-spacing:-.055em;line-height:.9
}
.section-head>span{color:var(--bm-accent)!important;letter-spacing:.14em}

/* Hairlines + restrained rust micro accents */
.service{border-top-color:var(--bm-hairline);padding-top:44px;padding-bottom:44px;transition:padding-left .3s ease}
.service:last-child{border-bottom-color:var(--bm-hairline)}
.service .num{color:var(--bm-accent)}
@media(hover:hover) and (min-width:801px){.service:hover{padding-left:8px}}
.consult,.arrow-link{border-bottom-color:rgba(184,95,63,.7)}

/* Music work: consistent editorial cards */
.music-work-grid{row-gap:clamp(52px,6vw,82px)!important}
.music-work-grid img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s ease}
@media(hover:hover){.music-work-grid a:hover img,.music-work-grid article:hover img{transform:scale(1.018)}}

/* Full projects: stronger flagship feeling without changing content */
#projects{position:relative;overflow:hidden}
#projects::after{content:"BLACK MILE / COMPLETE PROJECTS";position:absolute;right:3.5vw;bottom:28px;font-size:8px;letter-spacing:.2em;opacity:.22;pointer-events:none}
#projects .project-accent{color:var(--bm-accent)!important}

/* Image & Visuals: same visual system as Music */
.visual-portfolio{border-top-color:var(--bm-hairline);padding-top:34px}
.visual-portfolio-head h3{font-size:clamp(26px,2.5vw,40px);letter-spacing:-.045em;line-height:.95}
.visual-project-grid{gap:clamp(48px,5vw,74px) clamp(16px,2vw,28px)}
.visual-project-media{background:#0b0908}
.visual-project-title{margin-top:14px;font-size:10px;letter-spacing:.1em;color:#eee8e1}
.visual-project-credit{margin-top:6px;font-size:8px;letter-spacing:.11em;color:#a99a8e}
.visual-project-card{position:relative}
.visual-project-card::before{content:"";display:block;width:22px;height:1px;background:var(--bm-accent);margin-bottom:10px;opacity:.9}
.visual-video-button .film-play{border-color:rgba(255,255,255,.82);background:rgba(8,7,6,.22)}

/* Team: cleaner collective / magazine treatment */
.studio-v59-person{transition:transform .35s ease,opacity .35s ease}
.studio-v59-image{overflow:hidden}
.studio-v59-image img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
@media(hover:hover){.studio-v59-person:hover{transform:translateY(-4px)}.studio-v59-person:hover .studio-v59-image img{transform:scale(1.025)}}

/* Contact: slightly more premium form rhythm */
.project-form input,.project-form select,.project-form textarea{transition:border-color .25s ease,padding-left .25s ease}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:var(--bm-accent);padding-left:5px}

@media(max-width:800px){
  .section{padding-top:86px;padding-bottom:86px}
  .section-head{margin-bottom:52px}
  .section-head>span{font-size:9px}
  .service{padding-top:34px;padding-bottom:34px}
  #projects::after{display:none}
  .visual-portfolio{padding-top:26px}
  .visual-project-grid{gap:36px 14px}
  .visual-project-card::before{width:16px;margin-bottom:8px}
  .visual-project-title{margin-top:9px;font-size:9px;letter-spacing:.07em}
  .visual-project-credit{font-size:7.5px;letter-spacing:.07em;line-height:1.5}
}

/* V1 COMMERCIAL — final visual system + conversion polish */
:root{--bm-accent:#B85F3F;--bm-paper:#f1eee8;--bm-muted:#a99a8e;--bm-line:rgba(241,238,232,.16)}

/* Stronger editorial hierarchy while preserving the existing hero */
main .section:not(#home){position:relative}
.section-head{display:grid!important;grid-template-columns:64px minmax(0,1fr) minmax(220px,390px);column-gap:clamp(18px,3vw,52px);align-items:start!important}
.section-head>span{grid-column:1;font-size:9px!important;padding-top:8px}
.section-head>h2{grid-column:2;font-size:clamp(44px,6.2vw,92px)!important;line-height:.86!important;max-width:900px;margin:0!important}
.section-head>p{grid-column:3;align-self:end;max-width:390px;margin:0!important;line-height:1.55}

/* Services feel like a curated menu, not generic cards */
.service-list{border-top:1px solid var(--bm-line)}
.service{position:relative;border-top:0!important;border-bottom:1px solid var(--bm-line)!important;display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(240px,1fr) minmax(260px,.9fr);gap:clamp(22px,4vw,72px);align-items:start;padding:38px 0!important}
.service>div:first-child{display:flex;align-items:baseline;gap:18px}.service h3{font-size:clamp(20px,2vw,31px)!important;letter-spacing:-.035em!important}.service .num{font-size:9px!important;letter-spacing:.12em}.service>p{max-width:480px;margin-top:4px!important}.service .prices{margin:0!important}.service .consult{justify-self:end;align-self:center;margin:0!important}.service-actionable{cursor:pointer}.service-actionable::after{content:"↘";position:absolute;right:0;top:14px;font-size:12px;color:var(--bm-accent);opacity:0;transform:translateY(-3px);transition:.25s}.service-actionable:hover::after{opacity:1;transform:none}
.service-cta{margin-top:38px!important;padding-top:24px;border-top:1px solid var(--bm-line)}

/* Project / portfolio language shared across disciplines */
#work .work-grid,.visual-project-grid{counter-reset:bmwork}
.visual-project-card{counter-increment:bmwork}.visual-project-card::before{content:"0" counter(bmwork)!important;width:auto!important;height:auto!important;background:none!important;color:var(--bm-accent);font-size:8px;letter-spacing:.16em;margin:0 0 9px!important}
.visual-project-media{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.visual-project-card:hover .visual-project-media{transform:translateY(-4px)}
.visual-project-title{font-weight:500}

/* Team: more like a collective/editorial roster */
#studio .studio-v59-grid{gap:clamp(18px,2.2vw,34px)!important}
#studio .studio-v59-person{border-top:1px solid var(--bm-line);padding-top:12px}

/* Commercial form: cleaner, easier to scan */
.project-form{column-gap:clamp(18px,3vw,42px)!important;row-gap:28px!important}
.project-form label>span{font-size:8px!important;letter-spacing:.13em!important;color:var(--bm-muted)}
.project-form input,.project-form select,.project-form textarea{border-radius:0!important;background:transparent!important}
.project-form input[type=date]{color-scheme:dark}
.contact-direct{border-top:1px solid var(--bm-line);padding-top:20px}

@media(max-width:900px){
 .section-head{grid-template-columns:34px minmax(0,1fr)!important;row-gap:22px}.section-head>span{grid-column:1}.section-head>h2{grid-column:2;font-size:clamp(39px,10vw,66px)!important}.section-head>p{grid-column:2;max-width:520px!important}
 .service{grid-template-columns:1fr!important;gap:16px!important;padding:30px 0!important}.service .consult{justify-self:start!important;margin-top:5px!important}.service-actionable::after{display:none}
}
@media(max-width:600px){
 .section{padding-top:76px!important;padding-bottom:76px!important}.section-head{grid-template-columns:26px minmax(0,1fr)!important;margin-bottom:42px!important}.section-head>h2{font-size:clamp(35px,10.5vw,52px)!important;line-height:.9!important}.section-head>p{font-size:12px!important}
 .visual-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 12px!important}.visual-project-credit{overflow-wrap:anywhere}
 .project-form{grid-template-columns:1fr!important}.project-form label{grid-column:1!important}.form-wide{grid-column:1!important}
}


/* ÚNICO CAMBIO: MENU textual -> burger en su posición original */
.menu-burger-icon {
  display: inline-flex;
  width: 24px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: middle;
}
.menu-burger-icon i {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
}
.sr-menu-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   BLACK MILE — MODERN MOTION PASS
   Keeps the existing visual identity; upgrades interaction.
   ========================================================= */

/* More polished global interaction */
a, button { -webkit-tap-highlight-color: transparent; }
.topbar {
  transition: background .45s ease, backdrop-filter .45s ease, padding .45s cubic-bezier(.22,1,.36,1);
}
body.menu-open { overflow: hidden; }

/* Burger: soft entrance + tactile hover + morph to X */
.menu-toggle {
  position: relative;
  cursor: pointer;
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.menu-toggle:hover { opacity: .72; }
.menu-toggle:active { transform: scale(.92); }

.menu-burger-icon {
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.menu-burger-icon i {
  transform-origin: center;
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    opacity .28s ease,
    width .4s cubic-bezier(.22,1,.36,1);
}
.menu-toggle:hover .menu-burger-icon i:nth-child(2) { width: 70%; }
.menu-toggle.is-open .menu-burger-icon { transform: rotate(180deg); }
.menu-toggle.is-open .menu-burger-icon i:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.menu-toggle.is-open .menu-burger-icon i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle.is-open .menu-burger-icon i:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Cleaner, more cinematic reveals */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(5px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1s cubic-bezier(.22,1,.36,1),
    filter .9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Premium micro-interactions */
.arrow-link, .consult, .button {
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}
.arrow-link:hover, .consult:hover { transform: translateX(5px); }
.button:hover { transform: translateY(-2px); }

.service {
  transition: padding-left .55s cubic-bezier(.22,1,.36,1), border-color .4s ease;
}
.service:hover {
  padding-left: 10px;
  border-color: rgba(240,238,232,.32);
}
.service h3 { transition: color .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.service:hover h3 { color: var(--rust); transform: translateX(4px); }

.work-card { overflow: hidden; }
.work-card img {
  transition: transform .8s cubic-bezier(.22,1,.36,1), filter .65s ease;
}
.work-card:hover img { transform: scale(1.018); }

/* Mobile navigation becomes a real animated panel */
@media (max-width:800px) {
  .topbar {
    z-index: 100;
    padding: 20px;
  }

  .nav {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    min-height: 100svh;
    padding: 110px 20px 34px !important;
    background: rgba(10,10,9,.94) !important;
    backdrop-filter: blur(22px) saturate(.85);
    -webkit-backdrop-filter: blur(22px) saturate(.85);
    border-top: 0 !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity .42s ease,
      visibility .42s ease,
      transform .6s cubic-bezier(.22,1,.36,1);
    z-index: 90;
  }

  .nav::before {
    content:"";
    position:absolute;
    left:20px; right:20px; top:82px;
    height:1px;
    background:var(--line);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .75s .08s cubic-bezier(.22,1,.36,1);
  }

  .nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav.open::before { transform:scaleX(1); }

  .nav > a {
    width:100%;
    padding: 13px 0;
    font-size: clamp(25px, 8vw, 39px);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    border-bottom: 1px solid rgba(240,238,232,.10);
    transition:
      opacity .55s ease,
      transform .7s cubic-bezier(.22,1,.36,1),
      color .3s ease,
      padding-left .4s cubic-bezier(.22,1,.36,1);
  }
  .nav.open > a { opacity:1; transform:translateY(0); }
  .nav.open > a:nth-child(1){transition-delay:.08s}
  .nav.open > a:nth-child(2){transition-delay:.12s}
  .nav.open > a:nth-child(3){transition-delay:.16s}
  .nav.open > a:nth-child(4){transition-delay:.20s}
  .nav.open > a:nth-child(5){transition-delay:.24s}
  .nav > a:active { padding-left:8px; color:var(--rust); }

  .nav .language-switcher {
    margin-top:auto;
    padding-top:28px;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .45s .28s ease, transform .6s .28s cubic-bezier(.22,1,.36,1);
  }
  .nav.open .language-switcher { opacity:1; transform:none; }

  .menu-toggle { z-index:110; }
  .brand, .mobile-lang { z-index:110; position:relative; }

  /* Keep mobile effects refined, not jumpy */
  .service:hover { padding-left:0; }
  .service:hover h3 { transform:none; }
  .reveal { transform:translateY(24px); filter:blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; }
}


/* === Android narrow-screen fixes: mobile only === */
@media (max-width: 430px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  main, section, header, footer,
  .wrap, .container, .inner,
  .grid, .works-grid, .projects-grid,
  .service-grid, .team-grid, .contact-grid {
    max-width: 100%;
    min-width: 0;
  }

  img, video, iframe, svg {
    max-width: 100%;
  }

  /* Editorial headings: keep them large but never outside viewport */
  .section-head h2,
  .section-title,
  section h2 {
    max-width: 100%;
    font-size: clamp(40px, 11.5vw, 62px);
    line-height: .94;
    letter-spacing: -.045em;
  }

  h1, h2, h3, h4, p, a, span, label,
  .work-card, .project-card, .service, .team-card {
    min-width: 0;
  }

  .work-card p, .work-card .meta,
  .project-card p, .project-card .meta,
  .service p, .team-card p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  input, textarea, select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Long direct-contact email must stay inside the viewport */
  a[href^="mailto:"] {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* WhatsApp CTA: never overlap the email on narrow Android */
  .contact-direct,
  .direct-contact,
  .contact-links,
  .contact-direct-row {
    max-width: 100%;
    min-width: 0;
  }

  .contact-direct .whatsapp,
  .direct-contact .whatsapp,
  .contact-direct a[href*="wa.me"],
  .direct-contact a[href*="wa.me"],
  .contact-links a[href*="wa.me"],
  a[href*="wa.me"].button,
  a[href*="wa.me"].btn {
    position: static !important;
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    transform: none !important;
  }

  footer, footer * {
    min-width: 0;
  }

  footer .footer-links,
  footer .footer-services {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

@media (max-width: 360px) {
  .section-head h2,
  .section-title,
  section h2 {
    font-size: clamp(37px, 11vw, 46px);
  }
}


/* =========================================================
   VIDEO REEL — NO PLAY ARROWS / EMOJIS
   Applies to iPhone, Android, tablet and desktop.
   The video/card remains clickable; only the visual play icon is removed.
   ========================================================= */
.video-play,
.play-button,
.play-icon,
.video-play-button,
.reel-play,
.showreel-play,
[data-play-icon],
.video-card .play,
.video-card .play-button,
.video-card .play-icon,
.video-card .video-play,
.showreel .play,
.showreel .play-button,
.showreel .play-icon,
.showreel .video-play {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.video-card::before,
.video-card::after,
.showreel::before,
.showreel::after,
.video-thumb::before,
.video-thumb::after {
  content: none !important;
}

/* Never allow native-looking emoji glyphs from inherited play controls */
.video-card button[aria-label*="play" i],
.showreel button[aria-label*="play" i],
.video-card [title*="play" i],
.showreel [title*="play" i] {
  background-image: none !important;
}


/* =========================================================
   SHOWREEL — CLEAN PLAY ICON
   Pure CSS, so iOS/Android/Desktop render the same.
   No emoji and no native blue play glyph.
   ========================================================= */

/* Existing circular overlay: add a minimal white triangle */
.video-card .play-button,
.video-card .video-play-button,
.video-card .reel-play,
.video-card .showreel-play,
.showreel .play-button,
.showreel .video-play-button,
.showreel .reel-play,
.showreel .showreel-play,
.video-card .play,
.showreel .play {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: none !important;
}

/* Never render text/emoji inside the control */
.video-card .play-button > *,
.video-card .video-play-button > *,
.video-card .reel-play > *,
.video-card .showreel-play > *,
.showreel .play-button > *,
.showreel .video-play-button > *,
.showreel .reel-play > *,
.showreel .showreel-play > *,
.video-card .play > *,
.showreel .play > * {
  display: none !important;
}

/* White play triangle — consistent across every browser/device */
.video-card .play-button::after,
.video-card .video-play-button::after,
.video-card .reel-play::after,
.video-card .showreel-play::after,
.showreel .play-button::after,
.showreel .video-play-button::after,
.showreel .reel-play::after,
.showreel .showreel-play::after,
.video-card .play::after,
.showreel .play::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 16px solid #fff !important;
  filter: none !important;
}

/* If the reel overlay is an anchor/button with an aria-label rather than the classes above */
.video-card button[aria-label*="play" i]::after,
.video-card a[aria-label*="play" i]::after,
.showreel button[aria-label*="play" i]::after,
.showreel a[aria-label*="play" i]::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 16px solid #fff !important;
}


/* EXACT FIX — real showreel overlay class is .film-play */
.film-play {
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Clean white CSS triangle; never an emoji/system icon */
.film-play::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 15px solid #fff !important;
  filter: none !important;
}

/* Slightly smaller triangle on narrow phones */
@media (max-width: 430px) {
  .film-play::after {
    border-top-width: 8px !important;
    border-bottom-width: 8px !important;
    border-left-width: 13px !important;
    margin-left: 3px !important;
  }
}


/* =========================================================
   EXACT ANDROID / NARROW PHONE FIX
   These selectors intentionally beat the older !important rules.
   Desktop/tablet unchanged.
   ========================================================= */
@media (max-width: 430px) {
  html, body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* SELECTED WORK: keep 03 + title editorial layout, but give title real room */
  #work .section-head {
    display:grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    column-gap:12px !important;
    row-gap:24px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #work .section-head > span {
    grid-column:1 !important;
    min-width:0 !important;
  }
  #work .section-head > h2[data-i18n="workTitle"] {
    grid-column:2 !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(31px, 8.6vw, 37px) !important;
    line-height:.94 !important;
    letter-spacing:-.045em !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  #work .section-head > p {
    grid-column:2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /* CONTACT: WhatsApp belongs in the content flow on phones.
     It can no longer float over the email or any other content. */
  #contact .contact-direct {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  #contact .contact-direct > a[href^="mailto:"] {
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    font-size:clamp(15px,4.4vw,22px) !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  #contact #whatsappLink.whatsapp-link {
    position:static !important;
    inset:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    top:auto !important;
    z-index:auto !important;
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:26px 0 0 0 !important;
    padding:11px 16px !important;
    transform:none !important;
    align-self:flex-start !important;
  }
  #contact #whatsappLink.whatsapp-link[hidden] {
    display:none !important;
  }

  /* Final overflow hardening for long labels/metadata on narrow phones */
  #work, #projects, .image-design, #studio, #contact,
  #work *, #projects *, .image-design *, #studio *, #contact * {
    min-width:0;
    box-sizing:border-box;
  }
  .music-work-credit,
  .visual-project-title,
  .visual-project-meta,
  .team-card,
  .team-card * {
    max-width:100%;
    overflow-wrap:anywhere;
  }
}

@media (max-width: 360px) {
  #work .section-head > h2[data-i18n="workTitle"] {
    font-size:30px !important;
  }
}

/* WHATSAPP — final item in Contact on every device */
#contact .contact-direct{display:flex!important;flex-direction:column!important;align-items:flex-start!important;width:100%!important;max-width:100%!important;}
#contact #whatsappLink.whatsapp-link{position:static!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;z-index:auto!important;display:inline-flex!important;align-self:flex-start!important;width:fit-content!important;max-width:100%!important;margin:28px 0 0!important;}
#contact #whatsappLink.whatsapp-link[hidden]{display:none!important;}

/* WHATSAPP FINAL POSITION — ALL DEVICES */
#contact .whatsapp-contact-final{
 position:static!important; inset:auto!important; transform:none!important;
 width:100%!important; max-width:100%!important; margin:38px 0 0!important;
 padding:0!important; z-index:auto!important; display:block!important;
}
#contact .whatsapp-contact-final #whatsappLink,
#contact .whatsapp-contact-final .whatsapp-link,
#contact .whatsapp-contact-final a[href*="wa.me"],
#contact .whatsapp-contact-final a[href*="whatsapp"]{
 position:static!important; inset:auto!important; top:auto!important; right:auto!important;
 bottom:auto!important; left:auto!important; transform:none!important; translate:none!important;
 float:none!important; z-index:auto!important; margin:0!important;
 display:inline-flex!important; width:auto!important; max-width:100%!important;
}
@media(max-width:430px){
 #contact .whatsapp-contact-final{margin-top:28px!important;}
}


/* =========================================================
   BLACK MILE V2 — FINAL QUALITY PASS
   Responsive / contact / form UX / accessibility
   ========================================================= */
html,body{max-width:100%;overflow-x:clip}
img,video,iframe{max-width:100%}
img{height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Contact layout: WhatsApp is part of Contact on EVERY device, never floating. */
#contact .contact-direct{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  min-width:0!important;
}
#contact .whatsapp-contact-final{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  margin:26px 0 0!important;
  padding:0!important;
  transform:none!important;
  z-index:auto!important;
}
#contact #whatsappLink.whatsapp-link{
  position:static!important;
  inset:auto!important;
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  transform:none!important;
  translate:none!important;
  float:none!important;
  z-index:auto!important;
}
#contact #whatsappLink.whatsapp-link[hidden]{display:none!important}

/* Form feedback: compact editorial dialog instead of a giant mobile panel. */
#projectFormStatus.project-form-modal{
  padding:18px!important;
}
#projectFormStatus .project-form-modal-card{
  width:min(520px,calc(100vw - 36px))!important;
  min-height:0!important;
  padding:52px 34px 38px!important;
  border-radius:0!important;
}
#projectFormStatus .project-form-modal-card h3{
  margin:0 0 14px!important;
  font-size:clamp(30px,7vw,50px)!important;
  line-height:.96!important;
}
#projectFormStatus .project-form-modal-card p{
  font-size:14px!important;
  line-height:1.5!important;
}
#projectFormStatus .project-form-kicker{
  margin-bottom:12px!important;
  font-size:10px!important;
}
.project-form input:invalid:not(:placeholder-shown),
.project-form textarea:invalid:not(:placeholder-shown),
.project-form select:invalid{box-shadow:none}
.project-form button[disabled]{opacity:.52!important;cursor:wait!important}

/* Long headings and metadata must stay inside the viewport. */
.section-head,.contact-inner,.contact-grid,.project-form,.contact-direct{min-width:0}
.section-head h2,.contact h2,.project-meta,.visual-project-meta{
  max-width:100%;
  overflow-wrap:normal;
}
@media(max-width:430px){
  .section{overflow:hidden}
  .section-head{
    grid-template-columns:34px minmax(0,1fr)!important;
    column-gap:10px!important;
  }
  #work .section-head h2[data-i18n="workTitle"]{
    font-size:clamp(29px,8.2vw,36px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    white-space:normal!important;
  }
  #contact .contact-direct>a[href^="mailto:"]{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  #projectFormStatus .project-form-modal-card{
    width:min(92vw,460px)!important;
    padding:46px 22px 30px!important;
  }
}
@media(max-width:360px){
  #work .section-head h2[data-i18n="workTitle"]{font-size:28px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}