: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;
  }
}