:root{
  --blue:#10a9e2;
  --black:#080808;
  --white:#fff;
  --soft:#f5f7f8;
  --line:#dfe5e8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--black);background:var(--white);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.topbar{position:fixed;z-index:50;top:0;left:0;width:100%;height:76px;padding:14px 4vw;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:white}
.brand img{display:block;width:150px;max-height:48px;object-fit:contain;object-position:left center}
.nav{display:flex;gap:26px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav-toggle{display:none;background:none;border:0;color:inherit;font-weight:900}
.section{position:relative;min-height:90vh;padding:130px 8vw;overflow:hidden}
.white{background:#fff}
.blue{background:var(--blue);color:#fff}
.hero{min-height:100vh;display:flex;align-items:center;background:linear-gradient(168deg,var(--blue) 0 58%,#fff 58.2%)}
.hero-inner{width:min(930px,78vw);margin-left:8vw;color:#fff;transform:rotate(-2deg)}
.eyebrow,.kicker{font-size:12px;font-weight:900;letter-spacing:.18em}
.hero h1{font-size:clamp(54px,9vw,145px);line-height:.78;margin:28px 0;text-transform:uppercase;letter-spacing:-.07em}
.hero h1 span{display:block}
.hero-copy{max-width:590px;font-size:18px;line-height:1.6}
.text-link{display:inline-block;margin-top:22px;font-size:12px;font-weight:900;letter-spacing:.12em}
.section-heading{max-width:950px}
.section-heading h2,.about h2,.contact h2{font-size:clamp(45px,7vw,105px);line-height:.9;letter-spacing:-.06em;margin:16px 0 60px}
.section-number{position:absolute;right:7vw;top:100px;font-size:110px;font-weight:900;color:#edf1f3}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:9vw;align-items:center;min-height:55vh}
.about-grid p{font-size:18px;line-height:1.8}
.services{padding-bottom:180px}
.service-list{max-width:1050px;margin:40px auto 0}
.service{display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;align-items:center;padding:25px 0;border-top:1px solid var(--line);transition:transform .25s ease}
.service:hover{transform:translateX(18px)}
.service span{font-size:11px;color:var(--blue);font-weight:900}
.service h3{font-size:clamp(25px,3vw,44px);margin:0}
.service p{line-height:1.6;color:#5d6468}
.work{background:var(--soft)}
.work-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw 5vw}
.project:nth-child(even){margin-top:110px}
.project-wide{grid-column:1/-1;width:70%;margin-left:auto}
.placeholder{height:390px;background:#fff;border:1px solid #e6eaec;display:grid;place-items:center;position:relative;overflow:hidden}
.placeholder:before{content:"";position:absolute;width:65%;height:65%;border:3px solid var(--blue);border-radius:50% 40% 65% 35%/45% 65% 35% 55%;transform:rotate(18deg)}
.placeholder span{font-size:11px;font-weight:900;letter-spacing:.15em}
.project p{font-size:11px;letter-spacing:.12em;color:#777;margin-top:18px;text-transform:uppercase}
.project h3{font-size:30px;margin:5px 0}
.process{min-height:100vh;clip-path:polygon(0 8%,100% 0,100% 92%,0 100%);padding-top:190px;padding-bottom:190px}
.process-line{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:90px}
.process-line div{border-top:2px solid rgba(255,255,255,.7);padding-top:25px}
.process-line b{font-size:11px}
.process-line h3{font-size:30px;margin:15px 0 4px}
.process-line p{opacity:.8}
.light{color:#fff}
.international{min-height:85vh}
.countries{display:flex;flex-wrap:wrap;gap:16px 28px;max-width:1050px}
.countries span{font-size:clamp(28px,4.5vw,70px);font-weight:900;letter-spacing:-.05em}
.countries span:nth-child(3n){color:var(--blue)}
.contact{min-height:100vh;clip-path:polygon(0 7%,100% 0,100% 100%,0 100%);padding-top:190px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.contact-grid>div>p:last-child{max-width:480px;line-height:1.7}
.contact-form{display:grid;gap:26px}
.contact-form label{font-size:11px;font-weight:900;letter-spacing:.1em}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:10px;border:0;border-bottom:1px solid rgba(255,255,255,.65);background:transparent;color:#fff;padding:12px 0;font:inherit;outline:none}
.contact-form button{justify-self:start;padding:15px 24px;background:#fff;color:var(--black);border:0;font-weight:900;cursor:pointer}
footer{position:absolute;bottom:30px;font-size:11px;letter-spacing:.08em}
.float-shape{position:absolute;pointer-events:none}
.ring{width:90px;height:90px;border:13px solid currentColor;border-radius:50%;color:#fff;opacity:.65}
.ring-a{right:8%;top:15%}.ring-b{left:-35px;bottom:16%;color:var(--blue)}.ring-c{right:5%;bottom:15%}
.triangle{width:90px;height:90px;border:4px solid var(--blue);clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(23deg)}
.triangle-a{right:18%;bottom:20%;border-color:#fff}.triangle-b{right:5%;bottom:15%}
.squiggle{font-size:70px;font-weight:900;color:#fff}.squiggle-a{left:5%;top:18%;transform:rotate(40deg)}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){
  .topbar{height:64px}
  .brand img{width:120px}
  .nav-toggle{display:block}
  .nav{position:absolute;top:64px;right:4vw;display:none;flex-direction:column;background:#fff;color:#000;padding:25px;box-shadow:0 15px 40px rgba(0,0,0,.12)}
  .nav.open{display:flex}
  .section{padding:100px 7vw}
  .hero{background:linear-gradient(170deg,var(--blue) 0 68%,#fff 68.2%)}
  .hero-inner{margin:0;width:100%}
  .hero h1{font-size:clamp(49px,16vw,88px)}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .service{grid-template-columns:42px 1fr}
  .service p{grid-column:2}
  .work-grid{grid-template-columns:1fr}
  .project:nth-child(even),.project-wide{margin:0;width:100%;grid-column:auto}
  .placeholder{height:300px}
  .process{clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);padding-top:140px}
  .process-line{grid-template-columns:1fr 1fr}
  .contact{clip-path:polygon(0 3%,100% 0,100% 100%,0 100%)}
  .section-number{font-size:70px}
}


/* V2 — hero corrections */
.topbar{
  mix-blend-mode:normal;
  color:var(--black);
}
.brand{
  position:relative;
  z-index:60;
  display:block;
}
.brand img{
  width:190px;
  height:auto;
  max-height:58px;
  object-fit:contain;
  object-position:left center;
}

/* Keep all hero copy safely inside the blue area.
   The diagonal now begins well below the text. */
.hero{
  min-height:100vh;
  align-items:flex-start;
  padding-top:150px;
  padding-bottom:230px;
  background:linear-gradient(174deg,var(--blue) 0 78%,#fff 78.15%);
}
.hero-inner{
  position:relative;
  z-index:4;
  width:min(950px,76vw);
  margin-left:6vw;
  color:#fff;
  transform:rotate(-2deg);
}
.hero-copy,
.hero .text-link,
.hero .eyebrow{
  position:relative;
  z-index:5;
  color:#fff;
}
.hero-copy{
  max-width:620px;
  font-size:18px;
  line-height:1.65;
  margin-bottom:0;
}
.hero .text-link{
  margin-top:24px;
}

@media(max-width:800px){
  .topbar{
    color:var(--black);
    background:rgba(255,255,255,.92);
  }
  .brand img{
    width:145px;
    max-height:45px;
  }
  .hero{
    padding-top:125px;
    padding-bottom:190px;
    background:linear-gradient(174deg,var(--blue) 0 84%,#fff 84.15%);
  }
  .hero-inner{
    width:100%;
    margin-left:0;
  }
  .hero-copy{
    max-width:92%;
    font-size:16px;
  }
}

/* V3 — actual supplied Ondulado corporate logo */
.brand img{
  width:260px !important;
  max-width:34vw;
  height:auto !important;
  max-height:58px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
@media(max-width:800px){
  .brand img{
    width:190px !important;
    max-width:55vw;
    max-height:42px !important;
  }
}

/* V4 — permanent white menu band so the black/blue corporate logo is visible */
.topbar{
  height:82px !important;
  padding:12px 4vw !important;
  background:rgba(255,255,255,.97) !important;
  color:var(--black) !important;
  mix-blend-mode:normal !important;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 3px 18px rgba(0,0,0,.045);
}
.topbar .nav a{
  color:var(--black) !important;
}
.topbar .nav a:hover{
  color:var(--blue) !important;
}
.brand img{
  width:260px !important;
  max-width:34vw !important;
  max-height:58px !important;
}

/* Hero begins below the fixed menu band rather than underneath it. */
.hero{
  padding-top:175px !important;
}

@media(max-width:800px){
  .topbar{
    height:70px !important;
    padding:10px 5vw !important;
  }
  .brand img{
    width:190px !important;
    max-width:58vw !important;
    max-height:48px !important;
  }
  .nav-toggle{
    color:var(--black) !important;
  }
  .nav{
    top:70px !important;
  }
  .hero{
    padding-top:140px !important;
  }
}

/* V5 — Contact section */
.contact{
  position:relative;
  isolation:isolate;
}
.contact-o{
  position:absolute;
  z-index:-1;
  left:-8vw;
  top:50%;
  width:min(48vw,700px);
  transform:translateY(-50%) rotate(-8deg);
  opacity:.10;
  filter:brightness(0) invert(1);
  pointer-events:none;
}
.contact-intro{position:relative}
.contact-lead{
  max-width:500px;
  font-size:18px;
  line-height:1.7;
}
.direct-contact{
  display:grid;
  gap:24px;
  margin-top:52px;
}
.direct-contact div{
  display:grid;
  gap:5px;
}
.direct-contact span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.72;
}
.direct-contact a{
  width:max-content;
  max-width:100%;
  font-size:clamp(18px,2vw,27px);
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,.45);
  transition:opacity .2s ease,border-color .2s ease;
}
.direct-contact a:hover{
  opacity:.72;
  border-color:#fff;
}
.contact-form{
  position:relative;
  padding:42px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(4px);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.contact-form label{
  display:block;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  display:block;
  width:100%;
  margin-top:10px;
  padding:12px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.65);
  border-radius:0;
  background:transparent;
  color:#fff;
  font:inherit;
  outline:none;
}
.contact-form select option{color:#000;background:#fff}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-bottom-color:#fff;
}
.contact-form textarea{resize:vertical;min-height:125px}
.contact-form button{
  margin-top:4px;
  transition:transform .2s ease;
}
.contact-form button:hover{transform:translateX(5px)}
.form-note{
  margin:0;
  font-size:11px;
  opacity:.72;
}
.website-trap{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}
@media(max-width:800px){
  .contact-o{
    width:100vw;
    left:-35vw;
    top:30%;
  }
  .contact-form{padding:28px 22px}
  .form-row{grid-template-columns:1fr;gap:26px}
  .direct-contact{margin-top:38px}
}

/* V6 — larger, more spacious direct contact details */
.direct-contact{
  margin-top:72px !important;
  gap:0 !important;
  max-width:650px;
}
.direct-contact div{
  position:relative;
  display:block !important;
  padding:28px 0 32px;
  border-top:1px solid rgba(255,255,255,.42);
}
.direct-contact div:last-child{
  border-bottom:1px solid rgba(255,255,255,.42);
}
.direct-contact span{
  display:block;
  margin-bottom:12px;
  font-size:11px !important;
  letter-spacing:.20em !important;
}
.direct-contact a{
  display:inline-block;
  width:auto !important;
  font-size:clamp(25px,3vw,44px) !important;
  line-height:1.05;
  letter-spacing:-.035em;
  border-bottom:0 !important;
}
.contact-grid{
  align-items:start;
}
.contact-form{
  margin-top:28px;
}
@media(max-width:800px){
  .direct-contact{
    margin-top:50px !important;
  }
  .direct-contact div{
    padding:23px 0 27px;
  }
  .direct-contact a{
    font-size:clamp(22px,7vw,34px) !important;
  }
}

/* V7 — compact Contact section: designed to fit within one desktop screen */
@media(min-width:801px){
  .contact{
    min-height:100vh !important;
    height:100vh;
    padding:120px 8vw 55px !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .contact-grid{
    width:100%;
    gap:7vw !important;
    align-items:center !important;
  }
  .contact h2{
    font-size:clamp(46px,5.4vw,78px) !important;
    margin:12px 0 24px !important;
  }
  .contact-lead{
    font-size:16px !important;
    line-height:1.5 !important;
    margin:0;
  }
  .direct-contact{
    margin-top:30px !important;
    max-width:570px;
  }
  .direct-contact div{
    padding:13px 0 15px !important;
  }
  .direct-contact span{
    margin-bottom:6px !important;
    font-size:9px !important;
  }
  .direct-contact a{
    font-size:clamp(20px,2.1vw,30px) !important;
    line-height:1 !important;
  }
  .contact-form{
    margin-top:0 !important;
    padding:28px 32px !important;
    gap:17px !important;
  }
  .contact-form .form-row{
    gap:22px !important;
  }
  .contact-form label{
    font-size:10px !important;
  }
  .contact-form input,
  .contact-form textarea{
    margin-top:5px !important;
    padding:8px 0 !important;
  }
  .contact-form textarea{
    min-height:88px !important;
    height:88px;
  }
  .contact-form button{
    padding:12px 20px !important;
  }
  .form-note{
    font-size:10px !important;
  }
  .contact footer{
    bottom:18px !important;
  }
}

/* V8 — contact form status */
.form-result{
  margin:0 0 5px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.55);
  font-size:12px;
  line-height:1.4;
}
.form-result.success{
  background:rgba(255,255,255,.14);
}

/* V12 — tighter, more graphic hero statement */
.hero h1{
  font-family:"Arial Black","Arial Narrow",Arial,Helvetica,sans-serif !important;
  font-weight:900 !important;
  letter-spacing:-0.105em !important;
  line-height:.76 !important;
}
.hero h1 span{
  display:block;
  white-space:nowrap;
}
@media(max-width:800px){
  .hero h1{
    letter-spacing:-0.09em !important;
    line-height:.78 !important;
  }
}

/* V14 — opening logo/glitch screen */
body.intro-active{overflow:hidden}
.intro-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#fff;
  opacity:1;
  visibility:visible;
}
.intro-screen.intro-out{
  animation:introScreenOut .55s steps(2,end) forwards;
}
.intro-glitch{
  position:relative;
  width:min(720px,68vw);
  animation:introArrival .65s steps(2,end) both;
}
.intro-logo{
  display:block;
  width:100%;
  height:auto;
}
.intro-logo-copy{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.intro-glitch.glitching .intro-logo-main{
  animation:logoMainGlitch .7s steps(2,end) forwards;
}
.intro-glitch.glitching .intro-copy-a{
  opacity:.7;
  animation:logoGlitchA .7s steps(2,end) forwards;
}
.intro-glitch.glitching .intro-copy-b{
  opacity:.55;
  animation:logoGlitchB .7s steps(2,end) forwards;
}
.intro-sound{
  position:absolute;
  right:28px;
  bottom:24px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid #111;
  background:transparent;
  color:#111;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  cursor:pointer;
}
@keyframes introArrival{
  0%{opacity:0;transform:scale(.985)}
  30%{opacity:1;transform:translate(3px,-1px)}
  35%{transform:translate(-3px,1px)}
  42%,100%{transform:none}
}
@keyframes logoMainGlitch{
  0%{opacity:1;transform:none;clip-path:inset(0)}
  12%{transform:translate(-7px,1px);clip-path:inset(8% 0 67% 0)}
  22%{transform:translate(8px,-2px);clip-path:inset(57% 0 14% 0)}
  34%{transform:translate(-4px,2px);clip-path:inset(31% 0 43% 0)}
  48%{opacity:1;transform:translate(10px,0);clip-path:inset(73% 0 5% 0)}
  62%{transform:translate(-12px,1px);clip-path:inset(17% 0 61% 0)}
  76%{opacity:.8;transform:translate(4px,-1px);clip-path:inset(46% 0 30% 0)}
  100%{opacity:0;transform:scale(1.02);clip-path:inset(49% 0 49% 0)}
}
@keyframes logoGlitchA{
  0%{transform:translate(0);clip-path:inset(4% 0 78% 0)}
  18%{transform:translate(13px,-2px);clip-path:inset(62% 0 17% 0)}
  38%{transform:translate(-9px,1px);clip-path:inset(25% 0 57% 0)}
  58%{transform:translate(16px,0);clip-path:inset(74% 0 7% 0)}
  78%{transform:translate(-6px,2px);clip-path:inset(42% 0 40% 0)}
  100%{opacity:0}
}
@keyframes logoGlitchB{
  0%{transform:translate(0);clip-path:inset(70% 0 8% 0)}
  20%{transform:translate(-15px,2px);clip-path:inset(18% 0 62% 0)}
  42%{transform:translate(8px,-1px);clip-path:inset(51% 0 28% 0)}
  65%{transform:translate(-12px,0);clip-path:inset(6% 0 77% 0)}
  82%{transform:translate(6px,2px);clip-path:inset(67% 0 12% 0)}
  100%{opacity:0}
}
@keyframes introScreenOut{
  0%{opacity:1;transform:none}
  30%{opacity:.9;transform:translateX(4px)}
  45%{opacity:.45;transform:translateX(-6px)}
  65%{opacity:.7;transform:translateX(2px)}
  100%{opacity:0;visibility:hidden}
}
@media(max-width:800px){
  .intro-glitch{width:82vw}
  .intro-sound{right:20px;bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .intro-glitch,.intro-glitch.glitching .intro-logo-main,
  .intro-glitch.glitching .intro-logo-copy,.intro-screen.intro-out{
    animation:none !important;
  }
}

/* V16 — About copy */
.about-grid > div:last-child{
  max-width:620px;
}
.about-grid > div:last-child p{
  margin:0 0 17px;
}
.about-grid > div:last-child p:last-child{
  margin-top:28px;
  margin-bottom:0;
  font-weight:900;
  color:var(--blue);
}

/* V19 — About: four-line statement + overlapping square photo montage */
@media(min-width:801px){
  .about{
    padding-top:105px !important;
    padding-bottom:115px !important;
  }
  .about-grid{
    grid-template-columns:.82fr .88fr 1fr !important;
    gap:4.5vw !important;
    align-items:center !important;
    min-height:62vh !important;
  }
  .about-title{
    font-size:clamp(48px,5.2vw,82px) !important;
    line-height:.84 !important;
    margin:0 !important;
  }
  .about-title span{
    display:block;
  }
  .about-montage{
    position:relative;
    height:430px;
    min-width:330px;
  }
  .montage-photo{
    position:absolute;
    display:grid;
    place-items:center;
    aspect-ratio:1/1;
    background:#eef2f4;
    border:5px solid #fff;
    box-shadow:0 12px 28px rgba(0,0,0,.13);
    overflow:hidden;
  }
  .montage-photo span{
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
    color:#9aa2a6;
  }
  .montage-1{width:46%;left:2%;top:7%;transform:rotate(-5deg);z-index:2}
  .montage-2{width:39%;right:5%;top:0;transform:rotate(4deg);z-index:3}
  .montage-3{width:53%;left:22%;top:27%;transform:rotate(-1deg);z-index:5}
  .montage-4{width:35%;left:0;bottom:3%;transform:rotate(6deg);z-index:4}
  .montage-5{width:41%;right:0;bottom:7%;transform:rotate(-6deg);z-index:6}
  .montage-6{width:27%;right:9%;top:31%;transform:rotate(8deg);z-index:7}
  .about-copy{
    max-width:590px !important;
  }
}

/* Keep a usable montage on mobile for later refinement. */
@media(max-width:800px){
  .about-title span{display:block}
  .about-montage{
    position:relative;
    width:100%;
    height:360px;
    margin:12px 0 35px;
  }
  .montage-photo{
    position:absolute;
    display:grid;
    place-items:center;
    aspect-ratio:1/1;
    background:#eef2f4;
    border:4px solid #fff;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
  }
  .montage-photo span{font-size:8px;font-weight:900}
  .montage-1{width:42%;left:2%;top:4%;transform:rotate(-5deg)}
  .montage-2{width:35%;right:4%;top:0;transform:rotate(4deg)}
  .montage-3{width:48%;left:25%;top:28%;transform:rotate(-1deg);z-index:4}
  .montage-4{width:32%;left:2%;bottom:2%;transform:rotate(6deg)}
  .montage-5{width:38%;right:1%;bottom:5%;transform:rotate(-6deg);z-index:5}
  .montage-6{width:25%;right:8%;top:34%;transform:rotate(8deg);z-index:6}
}

/* V23 — section numbers sit behind the section content */
.section-number{
  z-index:0 !important;
  pointer-events:none;
}
.about-grid,
.international .section-heading,
.international .countries{
  position:relative;
  z-index:2;
}

/* V24 — animated desktop navigation + language framework */
@media(min-width:801px){
  .nav{
    align-items:center;
    gap:24px !important;
  }
  .nav > a{
    position:relative;
    display:block;
    padding:12px 2px;
    overflow:hidden;
  }
  .nav > a span{
    position:relative;
    display:block;
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  /* Blue slash races across underneath. */
  .nav > a::before{
    content:"";
    position:absolute;
    left:-110%;
    bottom:6px;
    width:100%;
    height:3px;
    background:var(--blue);
    transform:skewX(-28deg);
    transition:left .32s cubic-bezier(.2,.8,.2,1);
  }
  /* Small blue marker punches in from above. */
  .nav > a::after{
    content:"";
    position:absolute;
    right:1px;
    top:3px;
    width:6px;
    height:6px;
    background:var(--blue);
    border-radius:50%;
    opacity:0;
    transform:scale(0) translateY(-8px);
    transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .nav > a:hover span{
    transform:translateY(-3px) skewX(-5deg);
  }
  .nav > a:hover::before{
    left:0;
  }
  .nav > a:hover::after{
    opacity:1;
    transform:scale(1) translateY(0);
  }
  .nav > a.nav-click{
    animation:navClickGlitch .34s steps(2,end);
  }
  .nav > a.nav-click span{
    animation:navTextClick .34s steps(2,end);
  }

  .language-switch{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:8px;
    padding-left:18px;
    border-left:1px solid #dce1e4;
  }
  .language-switch .lang{
    position:relative;
    padding:8px 3px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    color:#777 !important;
    transition:color .2s ease,transform .2s ease;
  }
  .language-switch .lang:hover,
  .language-switch .lang.active{
    color:var(--blue) !important;
    transform:translateY(-2px);
  }
  .language-switch .lang.active::after{
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    bottom:2px;
    height:2px;
    background:var(--blue);
  }
}
@keyframes navClickGlitch{
  0%,100%{transform:none}
  20%{transform:translate(-3px,1px)}
  40%{transform:translate(3px,-1px)}
  60%{transform:translate(-1px,0)}
  80%{transform:translate(2px,1px)}
}
@keyframes navTextClick{
  0%,100%{opacity:1}
  30%{opacity:.25}
  45%{opacity:1}
  65%{opacity:.45}
}

/* Language holding pages — temporary framework only. */
.language-holding{
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  background:#fff;
}
.language-holding-inner{
  text-align:center;
  padding:40px;
}
.language-holding-inner img{
  width:min(420px,75vw);
  height:auto;
}
.language-holding-inner p{
  margin-top:50px;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
}
.language-holding-inner h1{
  margin:10px 0 35px;
  font-size:clamp(55px,10vw,130px);
  letter-spacing:-.08em;
  line-height:.8;
}
.language-holding-inner a{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

/* Mobile language controls remain functional for later design work. */
@media(max-width:800px){
  .language-switch{
    display:flex;
    gap:16px;
    padding-top:15px;
    border-top:1px solid #e5e5e5;
  }
  .language-switch .lang.active{color:var(--blue)}
}

/* V25 — stronger Ondulado navigation animation */
@media(min-width:801px){
  .nav > a{
    isolation:isolate;
    overflow:visible !important;
    transition:color .18s ease;
  }

  /* Remove V24 dot treatment. */
  .nav > a::after{display:none !important}

  /* A bold blue wave/bar sweeps through the word. */
  .nav > a::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:-1;
    left:50% !important;
    bottom:5px !important;
    width:0 !important;
    height:7px !important;
    background:var(--blue) !important;
    transform:translateX(-50%) skewX(-22deg) !important;
    transition:width .32s cubic-bezier(.18,.85,.25,1),height .24s ease !important;
  }
  .nav > a:hover::before{
    width:112% !important;
    height:11px !important;
  }
  .nav > a:hover span{
    transform:translateY(-5px) skewX(-9deg) scale(1.07) !important;
  }

  /* Click breaks the word into a more obvious glitch before settling. */
  .nav > a.nav-click{
    animation:menuPunch .46s steps(2,end) !important;
  }
  .nav > a.nav-click span{
    animation:menuWordGlitch .46s steps(2,end) !important;
  }

  .language-switch .lang{
    overflow:hidden;
  }
  .language-switch .lang.lang-glitch{
    animation:langGlitch .48s steps(2,end);
  }
}
@keyframes menuPunch{
  0%,100%{transform:none}
  14%{transform:translate(-6px,2px) skewX(-7deg)}
  28%{transform:translate(7px,-2px) skewX(8deg)}
  43%{transform:translate(-4px,-1px)}
  58%{transform:translate(5px,1px)}
  74%{transform:translate(-2px,0)}
}
@keyframes menuWordGlitch{
  0%,100%{opacity:1;filter:none}
  18%{opacity:.15;transform:translateX(6px) skewX(-12deg)}
  30%{opacity:1;transform:translateX(-7px) skewX(10deg)}
  47%{opacity:.35;transform:translateX(4px)}
  61%{opacity:1;transform:translateX(-3px)}
  78%{opacity:.55}
}
@keyframes langGlitch{
  0%,100%{transform:none;opacity:1}
  16%{transform:translate(-5px,1px) skewX(-12deg);opacity:.3}
  32%{transform:translate(6px,-1px) skewX(10deg);opacity:1}
  48%{transform:translate(-3px,0);opacity:.4}
  65%{transform:translate(4px,1px);opacity:1}
  82%{transform:translate(-1px,0)}
}

/* V26 — magnetic desktop menu */
@media(min-width:801px){
  .nav > a[href^="#"]{
    --mx:0px;
    --my:0px;
    transform:translate(var(--mx),var(--my));
    transition:transform .16s cubic-bezier(.2,.8,.2,1),color .18s ease !important;
    will-change:transform;
  }
  .nav > a[href^="#"] span{
    transform:none !important;
    transition:transform .16s cubic-bezier(.2,.8,.2,1) !important;
  }
  .nav > a[href^="#"]:hover span{
    transform:scale(1.06) !important;
  }
  /* Remove the previous blue bar/dot hover treatment. */
  .nav > a[href^="#"]::before,
  .nav > a[href^="#"]::after{
    display:none !important;
  }
}

/* V27 — active section indicator in desktop menu */
@media(min-width:801px){
  .nav > a[href^="#"].section-active{
    color:var(--blue) !important;
    font-weight:900;
  }
  .nav > a[href^="#"].section-active span::after{
    content:"";
    display:block;
    width:100%;
    height:3px;
    margin-top:5px;
    background:var(--blue);
    transform:scaleX(1);
    transform-origin:left center;
    animation:activeLineIn .28s cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes activeLineIn{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* V31 — real automatic photography + dense tessellated gallery */
.montage-photo img{width:100%;height:100%;object-fit:cover;display:block}
.auto-gallery{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:7px;
}
.gallery-tile{
  appearance:none;border:0;padding:0;margin:0;background:#eef2f4;cursor:zoom-in;
  overflow:hidden;aspect-ratio:1/1;min-width:0;
}
.gallery-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.gallery-tile:hover img{transform:scale(1.055)}
.gallery-more{display:block;margin:28px auto 0;border:1px solid #111;background:#fff;padding:11px 22px;font:inherit;font-weight:800;cursor:pointer}
.gallery-more[hidden]{display:none}
.gallery-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:48px 70px}
.gallery-lightbox.open{display:flex}
.gallery-lightbox img{display:block;max-width:min(92vw,1500px);max-height:88vh;width:auto;height:auto;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;border:0;background:transparent;color:#fff;cursor:pointer;line-height:1}
.lightbox-close{top:18px;right:24px;font-size:44px}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);font-size:64px;padding:20px}
.lightbox-prev{left:6px}.lightbox-next{right:6px}
body.lightbox-open{overflow:hidden}
@media(max-width:1100px){.auto-gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:800px){.auto-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.gallery-lightbox{padding:45px 30px}.lightbox-prev,.lightbox-next{font-size:48px;padding:12px}}
@media(max-width:480px){.auto-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}}

/* V33 — International world map */
.international{
  background:#f7f8f8 !important;
  overflow:hidden;
}
.world-map-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:24px;
}
.world-map-head h2{
  margin:0;
}
.map-key{
  display:flex;
  gap:24px;
  padding-bottom:8px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.map-key span{display:flex;align-items:center;gap:8px}
.key-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--blue);
}
.key-dot.worked{opacity:.55}
.key-dot.current{
  box-shadow:0 0 0 5px rgba(0,119,190,.13);
}
.world-map-wrap{
  position:relative;
  width:100%;
}
.world-map{
  display:block;
  width:100%;
  height:auto;
  max-height:68vh;
}
.map-land path{
  fill:#fff;
  stroke:#c9cfd2;
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
}
.map-cities circle{fill:#a8afb3}
.map-cities text{
  fill:#8c9498;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.02em;
}
.work-marker{
  cursor:pointer;
  outline:none;
}
.work-marker .marker-dot{
  fill:var(--blue);
  stroke:#fff;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.work-marker.worked .marker-dot{opacity:.72}
.work-marker.current .marker-dot{fill:var(--blue)}
.marker-pulse{
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  opacity:.5;
  vector-effect:non-scaling-stroke;
  animation:mapPulse 1.8s ease-out infinite;
}
@keyframes mapPulse{
  0%{r:6;opacity:.65}
  100%{r:18;opacity:0}
}
.map-tooltip{
  position:absolute;
  z-index:5;
  transform:translate(-50%,calc(-100% - 14px));
  padding:8px 11px;
  background:#111;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
}
.map-update-note{
  margin:13px 0 0;
  text-align:right;
  font-size:9px;
  letter-spacing:.08em;
  color:#9ba1a4;
}
@media(max-width:800px){
  .world-map-head{display:block}
  .map-key{margin-top:20px;flex-wrap:wrap}
  .world-map{min-width:760px;width:760px}
  .world-map-wrap{overflow-x:auto}
  .map-update-note{text-align:left}
}


/* V35 — cleaner International map */
.world-map {
  overflow: visible;
}

.map-land path {
  fill: #ffffff;
  stroke: #d6dadd;
  stroke-width: 0.65;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.map-cities circle {
  fill: #9da5a9;
}

.map-cities text {
  fill: #8f979b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7px;
  font-weight: 400;
  pointer-events: none;
}

.work-marker.worked .marker-dot {
  fill: var(--blue);
  stroke: #ffffff;
  stroke-width: 2;
  opacity: 0.82;
  vector-effect: non-scaling-stroke;
}

/* Current location deliberately contrasts with the blue work markers */
.work-marker.current .marker-dot {
  fill: #f29a17;
  stroke: #ffffff;
  stroke-width: 2.5;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}

.work-marker.current .marker-pulse {
  fill: none;
  stroke: #f29a17;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  animation: currentLocationPulse 1.8s ease-out infinite;
}

@keyframes currentLocationPulse {
  0% {
    r: 7;
    opacity: 0.75;
  }
  100% {
    r: 20;
    opacity: 0;
  }
}

/* No visible map key */
.map-key {
  display: none !important;
}


/* V36 — Gallery: 24 images visible at a time.
   Desktop uses 8 columns x 3 rows so all 24 are shown without adding more rows. */
@media (min-width: 901px) {
  #autoGallery {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
  }

  #autoGallery .gallery-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  #autoGallery .gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}


/* V37 — interactive map */
#worldMap {
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}
#worldMap.is-dragging { cursor: grabbing; }
#worldMap .map-land path {
  vector-effect: non-scaling-stroke;
}

/* V40 — International map: blue sea, white land */
.international{background:var(--blue)!important;color:#fff}
.world-map-head h2{color:#fff!important}
.world-map-wrap{background:var(--blue)}
.map-land path,#worldMap .map-land path{fill:#fff!important;stroke:rgba(255,255,255,.48)!important;stroke-width:.55!important}
.map-cities circle{fill:rgba(255,255,255,.75)!important}
.map-cities text{fill:rgba(255,255,255,.78)!important}
.work-marker.worked .marker-dot{fill:#fff!important;stroke:var(--blue)!important}
.work-marker.current .marker-dot{fill:#f29a17!important;stroke:#fff!important}
.work-marker.current .marker-pulse{stroke:#f29a17!important}
.map-key{display:none!important}

/* 24 thumbnails = 8 x 3 on desktop */
@media(min-width:901px){
  #autoGallery{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
  #autoGallery .gallery-tile{width:100%;aspect-ratio:1/1;overflow:hidden}
  #autoGallery .gallery-tile img{width:100%;height:100%;object-fit:cover;display:block}
}


/* V41 — green land with stronger geographical borders */
.map-land path,
#worldMap .map-land path{
  fill:#78a85a !important;
  stroke:#ffffff !important;
  stroke-width:1.35 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
}

#worldMap{overflow:hidden!important;cursor:grab;touch-action:none} #worldMap.is-dragging{cursor:grabbing}

/* V46 — fixed world map */
#worldMap{
  cursor:default !important;
  touch-action:auto !important;
  user-select:auto !important;
  overflow:hidden !important;
}
.international{background:var(--blue)!important;color:#fff}
.world-map-wrap{background:var(--blue)!important}
.map-land path,#worldMap .map-land path{
  fill:#78a85a !important;
  stroke:#ffffff !important;
  stroke-width:1.35 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
}
.map-cities circle{fill:rgba(255,255,255,.82)!important}
.map-cities text{fill:rgba(255,255,255,.85)!important}
.work-marker.worked .marker-dot{fill:#fff!important;stroke:var(--blue)!important}
.work-marker.current .marker-dot{fill:#f29a17!important;stroke:#fff!important}
.work-marker.current .marker-pulse{stroke:#f29a17!important}
.map-key{display:none!important}


/* V47 — International heading matches the other main section headings */
.world-map-head h2{
  font-size:clamp(45px,7vw,105px) !important;
  line-height:.9 !important;
  letter-spacing:-.06em !important;
  margin:16px 0 60px !important;
}

/* V47 — city names on the map */
#worldMap .map-cities text,
.map-cities text{
  fill:#000000 !important;
}


/* V50 — International section copy */
.international-copy{
  max-width:680px;
  margin:-34px 0 30px;
  color:#fff;
}
.international-copy p{
  margin:0;
  font-size:clamp(14px,1.15vw,18px);
  line-height:1.45;
}
.international-copy .international-lead{
  margin-bottom:7px;
  font-weight:800;
  font-size:clamp(18px,1.55vw,25px);
  letter-spacing:-.02em;
}


/* V53 — four main service areas */
.service-groups{max-width:1120px}
.service-group{
  display:grid;
  grid-template-columns:70px minmax(240px,.8fr) minmax(320px,1.2fr);
  gap:30px;
  align-items:start;
  padding:38px 0;
  border-top:1px solid var(--line);
}
.service-group:last-child{border-bottom:1px solid var(--line)}
.service-number{font-size:11px;color:var(--blue);font-weight:900;padding-top:10px}
.service-main h3{font-size:clamp(30px,3.4vw,50px);line-height:1;margin:0 0 14px}
.service-main p{margin:0;max-width:430px;line-height:1.6;color:#5d6468}
.service-details{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.service-details span{
  border:1px solid var(--line);
  padding:9px 12px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:#fff;
}
.music-labels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.music-label{
  min-width:0;
  border:1px solid var(--line);
  padding:14px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  transition:transform .25s ease,border-color .25s ease;
}
a.music-label:hover{transform:translateY(-5px);border-color:var(--blue)}
.music-label img{display:block;width:100%;height:150px;object-fit:contain;margin-bottom:14px;background:#111}
.music-label:first-child img{background:#fff}
.music-label strong{display:block;font-size:17px;margin-bottom:7px}
.music-label p{font-size:13px;line-height:1.5;color:#5d6468;margin:0 0 10px}
.music-label span,.ondulai-card span{font-size:11px;font-weight:900;text-transform:uppercase;color:var(--blue);letter-spacing:.06em}
.music-label-pending span{color:#5d6468}
.ondulai-card{
  display:grid;
  grid-template-columns:155px 1fr;
  gap:20px;
  align-items:center;
  border:1px solid var(--line);
  padding:14px;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease,border-color .25s ease;
}
.ondulai-card:hover{transform:translateY(-5px);border-color:var(--blue)}
.ondulai-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#000}
.ondulai-card p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#5d6468}

@media(max-width:900px){
  .service-group{grid-template-columns:45px 1fr;gap:18px 20px}
  .service-group>.service-details,
  .service-group>.music-labels,
  .service-group>.ondulai-card{grid-column:2}
}
@media(max-width:650px){
  .services{padding-bottom:110px}
  .service-group{grid-template-columns:30px minmax(0,1fr);padding:30px 0}
  .music-labels{grid-template-columns:1fr}
  .music-label img{height:135px}
  .ondulai-card{grid-template-columns:100px 1fr;gap:14px}
  .service-details span{font-size:10px;padding:8px 9px}
}

.streaming-note{
  grid-column:3;
  margin:2px 0 0;
  font-size:11px;
  line-height:1.5;
  color:#5d6468;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:800;
}
@media(max-width:900px){
  .streaming-note{grid-column:2}
}


/* V54 — detailed Scenography and Video services: text, not clickable tags */
.service-expanded{
  grid-template-columns:70px minmax(250px,.72fr) minmax(430px,1.28fr);
}
.service-expanded .service-main p{
  max-width:470px;
}
.service-depth-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
}
.service-depth-item{
  padding:0 0 24px;
  margin:0 0 24px;
  border-bottom:1px solid var(--line);
}
.service-depth-item h4{
  margin:0 0 9px;
  font-size:13px;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:var(--blue);
}
.service-depth-item p{
  margin:0;
  font-size:13px;
  line-height:1.62;
  color:#5d6468;
}
@media(max-width:900px){
  .service-expanded{
    grid-template-columns:45px minmax(0,1fr);
  }
  .service-expanded .service-depth-list{
    grid-column:2;
  }
}
@media(max-width:650px){
  .service-expanded{
    grid-template-columns:30px minmax(0,1fr);
  }
  .service-depth-list{
    grid-template-columns:1fr;
  }
  .service-depth-item{
    padding-bottom:18px;
    margin-bottom:18px;
  }
}

.places-support{
  margin:18px 0 0;
  font-size:clamp(14px,1.25vw,19px);
  line-height:1.4;
  font-weight:800;
  letter-spacing:.01em;
}




/* V59 — diagonal colour sections without changing the page layout */
#services{
  background:var(--blue) !important;
  color:#fff;
  clip-path:polygon(0 4.5vw,100% 0,100% calc(100% - 4.5vw),0 100%);
  padding-top:calc(clamp(70px,8vw,120px) + 4.5vw);
  padding-bottom:calc(clamp(70px,8vw,120px) + 4.5vw);
}

#gallery{
  background:#fff !important;
  color:#111;
}

#international{
  background:var(--blue) !important;
  color:#fff;
  clip-path:polygon(0 4.5vw,100% 0,100% calc(100% - 4.5vw),0 100%);
  padding-top:calc(clamp(70px,8vw,120px) + 4.5vw);
  padding-bottom:calc(clamp(70px,8vw,120px) + 4.5vw);
}

/* Contact remains its original size and layout. Only the background/colours change. */
#contact{
  background:var(--blue) !important;
  color:#fff;
}
#contact .contact-form input,
#contact .contact-form textarea{
  background:transparent !important;
  border-color:rgba(255,255,255,.55) !important;
  color:#fff !important;
}
#contact .contact-form input::placeholder,
#contact .contact-form textarea::placeholder{
  color:rgba(255,255,255,.65) !important;
}
#contact .contact-form label,
#contact .contact-copy,
#contact .contact-details,
#contact a{
  color:#fff;
}
#contact .contact-form button{
  background:#fff !important;
  color:var(--blue) !important;
  border-color:#fff !important;
}

/* Service content remains readable on blue */
#services .service-group{border-color:rgba(255,255,255,.28)}
#services .service-main p,
#services .service-depth-item p,
#services .streaming-note{color:rgba(255,255,255,.80)}
#services .service-depth-item{border-color:rgba(255,255,255,.28)}
#services .service-depth-item h4,
#services .service-number{color:#fff}
#services .music-label,
#services .ondulai-card{
  background:#fff;
  color:#111;
}
#services .music-label p,
#services .ondulai-card p{color:#5d6468}
#services .music-label span,
#services .ondulai-card span{color:var(--blue)}

@media(max-width:650px){
  #services,
  #international{
    clip-path:polygon(0 28px,100% 0,100% calc(100% - 28px),0 100%);
    padding-top:90px;
    padding-bottom:90px;
  }
}


/* V60 — Map flows directly into Contact. Contact uses a lighter blue so the diagonal remains visible. */
#international{
  margin-bottom:0 !important;
}

#contact{
  margin-top:0 !important;
  background:color-mix(in srgb, var(--blue) 50%, white) !important;
  color:#111;
  position:relative;
  clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%);
  padding-top:calc(clamp(70px,8vw,120px) + 4.5vw);
}

/* Contact form adjusted for the 50% blue background */
#contact .contact-form input,
#contact .contact-form textarea{
  background:rgba(255,255,255,.22) !important;
  border-color:rgba(0,0,0,.38) !important;
  color:#111 !important;
}
#contact .contact-form input::placeholder,
#contact .contact-form textarea::placeholder{
  color:rgba(0,0,0,.55) !important;
}
#contact .contact-form label,
#contact .contact-copy,
#contact .contact-details,
#contact a{
  color:#111 !important;
}
#contact .contact-form button{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}

@media(max-width:650px){
  #contact{
    clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);
    padding-top:90px;
  }
}


/* V65 — French hero: retain the same design but fit the longer French wording */
html[lang="fr"] .hero h1{
  font-size:clamp(42px,7.6vw,112px);
  letter-spacing:-.065em;
}
html[lang="fr"] .hero h1 span{
  white-space:nowrap;
}

@media(max-width:900px){
  html[lang="fr"] .hero h1{
    font-size:clamp(38px,8.6vw,76px);
    letter-spacing:-.07em;
  }
}
@media(max-width:650px){
  html[lang="fr"] .hero h1{
    font-size:clamp(31px,9.4vw,54px);
    letter-spacing:-.075em;
  }
}


/* V69 — clean responsive pass built from V65 */

/* TABLET: keep navigation usable and prevent the header becoming crowded */
@media (min-width: 651px) and (max-width: 1024px){
  .float-shape,
  .ring,
  .squiggle,
  .triangle,
  .contact-o{
    display:none !important;
  }

  .topbar{
    padding:12px 22px !important;
    gap:18px !important;
  }

  .topbar .brand img{
    max-width:170px !important;
    height:auto !important;
  }

  .topbar .nav-toggle{
    display:none !important;
  }

  .topbar .nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:10px 15px !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    transform:none !important;
  }

  .topbar .nav > a{
    font-size:11px !important;
    white-space:nowrap !important;
  }

  .topbar .language-switch{
    display:flex !important;
    gap:8px !important;
    margin-left:4px !important;
    padding-left:12px !important;
  }

  .hero h1,
  .about-title{
    line-height:.88 !important;
  }

  .float-shape{display:none !important;}
}

/* PHONE */
@media (max-width: 650px){

  /* Remove all motifs */
  .float-shape,
  .ring,
  .squiggle,
  .triangle,
  .contact-o{
    display:none !important;
  }

  /* Tighter headings */
  .hero h1,
  .about-title,
  .section-heading h2,
  .service-main h3,
  #international h2,
  #contact h2{
    line-height:.84 !important;
  }

  /* Fixed clean mobile header */
  .topbar{
    height:66px !important;
    min-height:66px !important;
    padding:9px 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .topbar .brand{
    z-index:1202 !important;
  }

  .topbar .brand img{
    max-width:145px !important;
    height:auto !important;
  }

  /* Turn the site's existing MENU button into burger bars */
  .topbar .nav-toggle{
    display:block !important;
    position:fixed !important;
    top:13px !important;
    right:13px !important;
    width:40px !important;
    height:40px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    text-indent:-9999px !important;
    overflow:hidden !important;
    background:
      linear-gradient(#111,#111) center 10px/26px 2px no-repeat,
      linear-gradient(#111,#111) center 19px/26px 2px no-repeat,
      linear-gradient(#111,#111) center 28px/26px 2px no-repeat !important;
    z-index:1305 !important;
  }

  /* Full-screen menu, hidden until the EXISTING JS adds .open */
  .topbar .nav{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    padding:92px 24px 60px !important;
    margin:0 !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:4px !important;
    background:#fff !important;
    color:#111 !important;
    z-index:1200 !important;
    transform:translateX(105%) !important;
    transition:transform .28s ease !important;
    pointer-events:none !important;
  }

  .topbar .nav.open{
    transform:translateX(0) !important;
    pointer-events:auto !important;
  }

  .topbar .nav > a{
    display:block !important;
    width:auto !important;
    padding:3px 0 !important;
    margin:0 !important;
    font-size:clamp(30px,10vw,44px) !important;
    line-height:.92 !important;
    font-weight:900 !important;
    letter-spacing:-.045em !important;
  }

  /* Languages remain visible independently of menu open/closed state */
  .topbar .language-switch{
    position:fixed !important;
    top:23px !important;
    right:68px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    z-index:1310 !important;
    transform:none !important;
  }

  .topbar .language-switch .lang{
    display:block !important;
    width:27px !important;
    min-width:27px !important;
    height:17px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    text-indent:-9999px !important;
    font-size:0 !important;
    border:1px solid rgba(0,0,0,.16) !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    transform:none !important;
  }

  .topbar .language-switch .lang::after{
    display:none !important;
  }

  .topbar .language-switch .lang[lang="en"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='36' fill='%23012169'/%3E%3Cpath d='M0 0l60 36M60 0L0 36' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M0 0l60 36M60 0L0 36' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0v36M0 18h60' stroke='%23fff' stroke-width='11'/%3E%3Cpath d='M30 0v36M0 18h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E") !important;
  }

  .topbar .language-switch .lang[lang="es"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='36' fill='%23AA151B'/%3E%3Crect y='9' width='60' height='18' fill='%23F1BF00'/%3E%3C/svg%3E") !important;
  }

  .topbar .language-switch .lang[lang="fr"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='20' height='36' fill='%23002395'/%3E%3Crect x='20' width='20' height='36' fill='%23fff'/%3E%3Crect x='40' width='20' height='36' fill='%23ED2939'/%3E%3C/svg%3E") !important;
  }

  .topbar .language-switch .lang.active{
    outline:2px solid var(--blue) !important;
    outline-offset:3px !important;
  }
}


/* V71 — independent language flags + compact dropdown burger menu */
@media (max-width:650px){

  /* Flags are outside the navigation and always usable */
  .topbar > .language-switch{
    position:fixed !important;
    top:23px !important;
    right:70px !important;
    z-index:1500 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .topbar > .language-switch .lang{
    display:block !important;
    width:27px !important;
    min-width:27px !important;
    height:17px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    text-indent:-9999px !important;
    font-size:0 !important;
    border:1px solid rgba(0,0,0,.16) !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    transform:none !important;
  }
  .topbar > .language-switch .lang::after{display:none !important}
  .topbar > .language-switch .lang[lang="en"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='36' fill='%23012169'/%3E%3Cpath d='M0 0l60 36M60 0L0 36' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M0 0l60 36M60 0L0 36' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0v36M0 18h60' stroke='%23fff' stroke-width='11'/%3E%3Cpath d='M30 0v36M0 18h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E") !important;
  }
  .topbar > .language-switch .lang[lang="es"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='36' fill='%23AA151B'/%3E%3Crect y='9' width='60' height='18' fill='%23F1BF00'/%3E%3C/svg%3E") !important;
  }
  .topbar > .language-switch .lang[lang="fr"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='20' height='36' fill='%23002395'/%3E%3Crect x='20' width='20' height='36' fill='%23fff'/%3E%3Crect x='40' width='20' height='36' fill='%23ED2939'/%3E%3C/svg%3E") !important;
  }
  .topbar > .language-switch .lang.active{
    outline:2px solid var(--blue) !important;
    outline-offset:3px !important;
  }

  /* Burger opens a compact dropdown beneath the header, not a full-screen panel */
  .topbar .nav{
    position:fixed !important;
    top:66px !important;
    right:12px !important;
    bottom:auto !important;
    left:auto !important;
    inset:auto 12px auto auto !important;
    width:min(250px,calc(100vw - 24px)) !important;
    height:auto !important;
    min-height:0 !important;
    padding:14px 18px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:0 !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
    z-index:1400 !important;
    transform:translateY(-8px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease !important;
  }
  .topbar .nav.open{
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .topbar .nav > a{
    width:100% !important;
    padding:10px 2px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
    font-size:17px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
  }
  .topbar .nav > a:last-child{border-bottom:0 !important}
}

/* Tablet: flags remain independent of navigation too */
@media (min-width:651px) and (max-width:1024px){
  .topbar > .language-switch{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin-left:auto !important;
    padding-left:12px !important;
    border-left:1px solid #dce1e4 !important;
  }
}


/* V72 — mobile dropdown sits BELOW the burger/header */
@media (max-width:650px){
  .topbar .nav{
    top:72px !important;
    right:12px !important;
    bottom:auto !important;
    left:auto !important;
    inset:72px 12px auto auto !important;
    transform:translateY(0) !important;
    transform-origin:top right !important;
  }

  .topbar .nav.open{
    top:72px !important;
    bottom:auto !important;
    transform:translateY(0) !important;
  }
}


/* V73 — Spanish mobile hero fits the screen */
@media (max-width:650px){
  html[lang="es"] .hero h1{
    font-size:clamp(29px,8.4vw,47px) !important;
    letter-spacing:-.065em !important;
    line-height:.84 !important;
  }
  html[lang="es"] .hero h1 span{
    white-space:nowrap !important;
  }
}


/* V74 — tighter mobile rhythm and more unified photo montage */
@media (max-width:650px){

  /* Spanish hero: between V72 and the over-small V73 setting */
  html[lang="es"] .hero h1{
    font-size:clamp(34px,9.3vw,52px) !important;
    letter-spacing:-.07em !important;
    line-height:.80 !important;
  }

  /* Reduce line spacing throughout mobile */
  .hero h1,
  .about-title,
  .section-heading h2,
  .service-main h3,
  #international h2,
  #contact h2{
    line-height:.80 !important;
  }

  p{
    line-height:1.42 !important;
  }

  /* Reduce excessive vertical gaps/padding throughout sections */
  .section,
  #about,
  #gallery{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }

  #services,
  #international{
    padding-top:76px !important;
    padding-bottom:76px !important;
  }

  #contact{
    padding-top:72px !important;
    padding-bottom:58px !important;
  }

  .section-heading,
  .about-copy,
  .service-main,
  .service-depth-item{
    margin-bottom:18px !important;
  }

  .service-group{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }

  .service-depth-item{
    padding-bottom:14px !important;
    margin-bottom:14px !important;
  }

  /* Pull the About photo montage together into one compact visual unit */
  .about-photo-cloud{
    width:min(88vw,390px) !important;
    height:260px !important;
    margin:18px auto 22px !important;
  }

  .about-photo-cloud .cloud-photo{
    transform:scale(.82) !important;
    transform-origin:center !important;
  }

  .about-photo-cloud .cloud-photo:nth-child(1){left:3% !important;top:22px !important}
  .about-photo-cloud .cloud-photo:nth-child(2){left:27% !important;top:4px !important}
  .about-photo-cloud .cloud-photo:nth-child(3){left:52% !important;top:18px !important}
  .about-photo-cloud .cloud-photo:nth-child(4){left:15% !important;top:112px !important}
  .about-photo-cloud .cloud-photo:nth-child(5){left:41% !important;top:102px !important}
  .about-photo-cloud .cloud-photo:nth-child(6){left:64% !important;top:105px !important}
}


/* V75 — compact mobile layout and genuinely tighter About montage */
@media (max-width:650px){

  /* Remove large minimum heights that create empty areas */
  .section,
  #about,
  #services,
  #gallery,
  #international,
  #contact{
    min-height:0 !important;
  }

  #about,
  #gallery{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  #services,
  #international{
    padding-top:62px !important;
    padding-bottom:62px !important;
  }

  #contact{
    padding-top:58px !important;
    padding-bottom:42px !important;
  }

  .about-grid{
    gap:16px !important;
    min-height:0 !important;
  }

  .section-heading{
    margin-bottom:22px !important;
  }

  .section-heading h2,
  .about-title{
    margin-bottom:10px !important;
  }

  .places-support{
    margin-top:10px !important;
  }

  .about-copy p{
    margin-top:0 !important;
    margin-bottom:10px !important;
  }

  /* Actual six-photo montage: compact, overlapping cluster */
  #aboutMontage.about-montage{
    width:min(86vw,350px) !important;
    height:225px !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:2px auto 8px !important;
    transform:none !important;
  }

  #aboutMontage .montage-photo{
    border-width:3px !important;
    box-shadow:0 6px 14px rgba(0,0,0,.12) !important;
  }

  #aboutMontage .montage-1{
    width:38% !important; left:8% !important; top:9% !important;
    transform:rotate(-3deg) !important;
  }
  #aboutMontage .montage-2{
    width:34% !important; right:10% !important; top:5% !important;
    transform:rotate(3deg) !important;
  }
  #aboutMontage .montage-3{
    width:43% !important; left:29% !important; top:27% !important;
    transform:rotate(-1deg) !important;
  }
  #aboutMontage .montage-4{
    width:31% !important; left:10% !important; bottom:5% !important;
    transform:rotate(3deg) !important;
  }
  #aboutMontage .montage-5{
    width:34% !important; right:9% !important; bottom:5% !important;
    transform:rotate(-3deg) !important;
  }
  #aboutMontage .montage-6{
    width:24% !important; right:17% !important; top:35% !important;
    transform:rotate(4deg) !important;
  }

  /* tighter service rhythm */
  .service-group{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
  .service-main{
    margin-bottom:12px !important;
  }
  .service-main p,
  .service-depth-item p{
    margin-bottom:8px !important;
  }
  .service-depth-item{
    padding:10px 0 !important;
    margin:0 !important;
  }

  .world-map-head{
    margin-bottom:12px !important;
  }
  .international-copy{
    margin-bottom:14px !important;
  }
}


/* V76 — mobile Services: remove duplicate separators */
@media (max-width:650px){
  #services .service-group + .service-group{
    border-top:0 !important;
  }
}


/* V78 — Spanish mobile hero approximately 25% larger */
@media (max-width:650px){
  html[lang="es"] .hero h1{
    font-size:clamp(42px,11.6vw,65px) !important;
    letter-spacing:-.075em !important;
    line-height:.80 !important;
  }
  html[lang="es"] .hero h1 span{
    white-space:nowrap !important;
  }
}


/* V83 — map zoom controls */
.map-wrap,
.world-map-wrap{
  position:relative;
}
.map-zoom-controls{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.map-zoom-controls button{
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  font:700 22px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.map-zoom-controls button:hover{
  background:#f4f4f4;
}
@media(max-width:650px){
  .map-zoom-controls{
    top:8px;
    right:8px;
  }
  .map-zoom-controls button{
    width:32px;
    height:32px;
    font-size:20px;
  }
}


/* V84 — map pan controls */
.map-zoom-controls{
  align-items:center;
}
.map-control-row{
  display:flex;
  gap:5px;
}
@media(max-width:650px){
  .map-zoom-controls{
    gap:4px;
  }
  .map-control-row{
    gap:4px;
  }
}

/* DESKTOP HERO WORD CASCADE */
@media (min-width:1001px){
  .hero-word-rain{
    position:absolute;
    z-index:6;
    top:82px;
    right:0;
    width:38vw;
    height:72%;
    overflow:hidden;
    pointer-events:none;
  }

  .hero-rain-word{
    position:absolute;
    top:-120px;
    font-family:"Arial Black","Arial Narrow",Arial,Helvetica,sans-serif;
    font-weight:900;
    line-height:.9;
    letter-spacing:-.055em;
    white-space:nowrap;
    color:#fff;
    transform:translate3d(-50%,0,0) rotate(var(--start-angle));
    animation-name:heroWordFall;
    animation-duration:var(--fall-time);
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    will-change:transform;
  }

  @keyframes heroWordFall{
    from{
      transform:translate3d(-50%,-120px,0) rotate(var(--start-angle));
    }
    to{
      transform:translate3d(-50%,82vh,0) rotate(var(--end-angle));
    }
  }
}

@media (max-width:1000px){
  .hero-word-rain{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .hero-word-rain{display:none !important;}
}

/* Cascade layering correction */
@media (min-width:1001px){
  .hero-inner,
  .hero h1,
  .hero h1 span{
    background:transparent !important;
  }
  .hero-word-rain{
    z-index:6 !important;
  }
  .hero-inner{
    z-index:4 !important;
  }
}

/* HERO CASCADE — remove the blue masking layer over the falling words */
@media (min-width:1001px){
  .hero{
    isolation:isolate;
  }

  .hero-word-rain{
    z-index:4 !important;
  }

  .hero-inner{
    position:relative;
    z-index:auto !important;
    background:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }

  .hero-inner::before,
  .hero-inner::after,
  .hero h1::before,
  .hero h1::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }

  .hero h1,
  .hero h1 span,
  .hero .text-link{
    position:relative;
    z-index:5 !important;
    background:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }
}

/* V89 — allow cascade words to extend beyond the right-hand rain column.
   The hero section itself already clips anything outside the hero.
   This removes the hard vertical edge that looked like a blue box. */
@media (min-width:1001px){
  .hero-word-rain{
    overflow:visible !important;
  }
}

/* V90 — cascade must remain visible over the longer Spanish/French hero words */
@media (min-width:1001px){
  .hero-word-rain{
    z-index:20 !important;
    overflow:visible !important;
  }

  .hero-inner,
  .hero h1,
  .hero h1 span,
  .hero .text-link{
    z-index:5 !important;
  }
}

/* V93 — desktop hero: remove decorative background glyphs only.
   Falling word cascade remains unchanged. */
@media (min-width:1001px){
  .hero .float-shape{
    display:none !important;
  }
}

/* V94 — Services refinement: editorial brand rows + visible service numbers */
.service-number{
  display:block !important;
  align-self:start;
  font-size:clamp(30px,3.4vw,48px) !important;
  line-height:.85 !important;
  font-weight:900 !important;
  letter-spacing:-.07em !important;
  color:var(--blue) !important;
  opacity:1 !important;
}

/* Remove the white card treatment from the music brands. */
.music-labels{
  gap:0 !important;
  background:transparent !important;
}

.music-label{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:28px 0 !important;
  border-top:1px solid var(--line) !important;
}

.music-label:last-child{
  border-bottom:1px solid var(--line) !important;
}

.music-label:hover{
  transform:none !important;
  background:transparent !important;
}

.music-label img{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Ondulai now uses the same clean editorial treatment. */
.ondulai-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:28px 0 !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}

.ondulai-card:hover{
  transform:none !important;
  background:transparent !important;
}

.ondulai-card img{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* New Website Design service follows the existing expanded service system. */
.service-web{
  position:relative;
}

@media(max-width:800px){
  .service-number{
    font-size:30px !important;
    line-height:.9 !important;
  }

  .music-label,
  .ondulai-card{
    padding:22px 0 !important;
  }
}

/* V95 — remove divider lines from CasaMia, Resonance House and Ondulai */
.music-label,
.music-label:last-child,
.ondulai-card{
  border-top:0 !important;
  border-bottom:0 !important;
}

/* V96 — CasaMia logo circular crop only */
.music-label img[src*="casamia-producciones"]{
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  object-fit:cover !important;
  overflow:hidden !important;
}

/* V97 — CasaMia logo: force a true circle */
.music-label img[src*="casamia-producciones"]{
  width:120px !important;
  height:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  aspect-ratio:auto !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

@media(max-width:800px){
  .music-label img[src*="casamia-producciones"]{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }
}

/* V98 — Music labels and Ondulai alignment */

/* CasaMia and Resonance House: stacked vertically, equal logo size, text right */
.music-labels{
  display:flex !important;
  flex-direction:column !important;
  gap:28px !important;
}

.music-label{
  display:grid !important;
  grid-template-columns:120px minmax(0,1fr) !important;
  gap:28px !important;
  align-items:center !important;
  width:100% !important;
  padding:0 !important;
}

.music-label img,
.music-label img[src*="casamia-producciones"]{
  width:120px !important;
  height:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  object-fit:contain !important;
}

/* CasaMia remains a true circle */
.music-label img[src*="casamia-producciones"]{
  border-radius:50% !important;
  object-fit:cover !important;
}

/* Music information text white */
.music-label strong,
.music-label p,
.music-label span,
.streaming-note{
  color:#fff !important;
}

/* Ondulai: align logo/content with the Ondulai heading column */
.service-ondulai .ondulai-card{
  display:grid !important;
  grid-template-columns:180px minmax(0,1fr) !important;
  gap:28px !important;
  align-items:center !important;
  margin-left:0 !important;
  padding-left:0 !important;
}

.service-ondulai .ondulai-card img{
  width:180px !important;
  max-width:180px !important;
  height:auto !important;
  margin:0 !important;
}

.service-ondulai .ondulai-card p,
.service-ondulai .ondulai-card span{
  color:#fff !important;
}

/* Keep the small Ondulai description white too */
.service-ondulai .service-main p{
  color:#fff !important;
}

@media(max-width:800px){
  .music-label{
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:20px !important;
  }

  .music-label img,
  .music-label img[src*="casamia-producciones"]{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }

  .service-ondulai .ondulai-card{
    grid-template-columns:130px minmax(0,1fr) !important;
    gap:20px !important;
  }

  .service-ondulai .ondulai-card img{
    width:130px !important;
    max-width:130px !important;
  }
}

/* V99 — final logo sizing for Music Production and Wall Art */

/* CasaMia and Resonance House occupy exactly the same 120px logo area. */
.music-label img,
.music-label img[src*="casamia-producciones"]{
  width:120px !important;
  height:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  box-sizing:border-box !important;
}

/* CasaMia: true circular crop. */
.music-label img[src*="casamia-producciones"]{
  border-radius:50% !important;
  object-fit:cover !important;
}

/* Resonance House: enlarge the artwork inside the same 120px area. */
.music-label img:not([src*="casamia-producciones"]){
  object-fit:contain !important;
  transform:scale(1.16) !important;
  transform-origin:center !important;
}

/* Wall Art / Ondulai logo: true circle, same size as CasaMia. */
.service-ondulai .ondulai-card{
  grid-template-columns:120px minmax(0,1fr) !important;
}

.service-ondulai .ondulai-card img{
  width:120px !important;
  height:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  object-fit:contain !important;
  background:#fff !important;
  padding:12px !important;
}

/* Description and card text remain white. */
.service-ondulai .service-main p,
.service-ondulai .ondulai-card p,
.service-ondulai .ondulai-card span{
  color:#fff !important;
}

@media(max-width:800px){
  .music-label img,
  .music-label img[src*="casamia-producciones"]{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }

  .service-ondulai .ondulai-card{
    grid-template-columns:96px minmax(0,1fr) !important;
  }

  .service-ondulai .ondulai-card img{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    padding:10px !important;
  }
}

/* V100 — requested Services corrections */

/* Remove horizontal rules from the expanded detail lists,
   including beneath Studio Production and Hosting. */
.service-depth-list,
.service-depth-item,
.service-depth-item:last-child{
  border-top:0 !important;
  border-bottom:0 !important;
}

/* Supplied Ondulai logo: same circular footprint as CasaMia. */
.service-ondulai .ondulai-card{
  grid-template-columns:120px minmax(0,1fr) !important;
}

.service-ondulai .ondulai-card img{
  width:120px !important;
  height:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  padding:0 !important;
  background:transparent !important;
}

/* Resonance House: same overall logo footprint as CasaMia. */
.music-label img:not([src*="casamia-producciones"]){
  width:120px !important;
  height:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  transform:none !important;
  object-fit:contain !important;
}

@media(max-width:800px){
  .service-ondulai .ondulai-card{
    grid-template-columns:96px minmax(0,1fr) !important;
  }

  .service-ondulai .ondulai-card img,
  .music-label img:not([src*="casamia-producciones"]){
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }
}

/* V101 — Website Design project links */
.web-project-links{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}

.web-project-links a{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:18px 0;
  color:var(--black);
  transition:color .2s ease,transform .2s ease;
}

.web-project-links a:hover{
  color:var(--blue);
  transform:translateY(-2px);
}

.web-project-links strong{
  font-size:18px;
  font-weight:900;
}

.web-project-links span{
  font-size:12px;
  line-height:1.45;
  color:#5d6468;
}

.web-project-links a:hover span{
  color:var(--blue);
}

@media(max-width:800px){
  .web-project-links{
    grid-column:1 / -1;
    grid-template-columns:1fr;
    gap:4px;
    margin-top:24px;
  }

  .web-project-links a{
    padding:12px 0;
  }
}

/* V102 — Website Design examples: logos, white text, tighter spacing */
.web-project-links{
  margin-top:10px !important;
  gap:18px !important;
}

.web-project-links a{
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:16px !important;
  row-gap:4px !important;
  align-items:center !important;
  padding:8px 0 !important;
  color:#fff !important;
}

.web-project-logo{
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  width:72px !important;
  height:72px !important;
  max-width:72px !important;
  object-fit:contain !important;
  display:block !important;
}

.web-project-links strong{
  grid-column:2 !important;
  grid-row:1 !important;
  color:#fff !important;
  font-size:18px !important;
}

.web-project-links span{
  grid-column:2 !important;
  grid-row:2 !important;
  color:#fff !important;
  opacity:.82 !important;
}

.web-project-links a:hover,
.web-project-links a:hover strong,
.web-project-links a:hover span{
  color:#fff !important;
}

@media(max-width:800px){
  .web-project-links{
    margin-top:8px !important;
  }

  .web-project-links a{
    grid-template-columns:60px minmax(0,1fr) !important;
    column-gap:14px !important;
  }

  .web-project-logo{
    width:60px !important;
    height:60px !important;
    max-width:60px !important;
  }
}


/* ===== ONDULADO IDLE ANT ===== */
#ant-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2147483646}
#ant{position:absolute;width:21px;height:28px;display:none;pointer-events:auto;cursor:pointer;
transform-origin:50% 50%;filter:drop-shadow(1.3px 2px 1.2px rgba(0,0,0,.34));will-change:left,top,transform}
#ant svg{width:100%;height:100%;overflow:visible}
#ant .antenna{fill:none;stroke:#4b2719;stroke-width:.88;stroke-linecap:round;stroke-linejoin:round}
#ant .bodyEdge{fill:#1d100c} #ant .abdomen{fill:url(#abd)} #ant .thorax{fill:url(#thor)} #ant .head{fill:url(#head)}
#ant .segment{fill:#351a12} #ant .shine{fill:rgba(255,211,163,.38)} #ant .eye{fill:#090706} #ant .hip{fill:#492417}
#ant .upper,#ant .lower{fill:none;stroke-linecap:round;stroke-linejoin:round}
#ant .upper{stroke:#5b2d1c;stroke-width:1.3} #ant .lower{stroke:#29150f;stroke-width:.9}
#ant .leggroup,#ant .lowergroup,#ant .antenna{transform-box:view-box}
#ant .leggroup{transform-origin:var(--hx) var(--hy)} #ant .lowergroup{transform-origin:var(--kx) var(--ky)}
#ant.walking .tripodA{animation:antHipA .19s infinite alternate ease-in-out}
#ant.walking .tripodB{animation:antHipB .19s infinite alternate ease-in-out}
#ant.walking .tripodA .lowergroup{animation:antKneeA .19s infinite alternate-reverse ease-in-out}
#ant.walking .tripodB .lowergroup{animation:antKneeB .19s infinite alternate-reverse ease-in-out}
#ant.running .tripodA,#ant.running .tripodB,#ant.running .tripodA .lowergroup,#ant.running .tripodB .lowergroup{animation-duration:.09s}
#ant.walking .a1{animation:antFeel1 .31s infinite alternate ease-in-out;transform-origin:11.8px 7.1px}
#ant.walking .a2{animation:antFeel2 .27s infinite alternate-reverse ease-in-out;transform-origin:14.2px 7.1px}
@keyframes antHipA{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes antHipB{from{transform:rotate(10deg)}to{transform:rotate(-8deg)}}
@keyframes antKneeA{from{transform:rotate(7deg)}to{transform:rotate(-10deg)}}
@keyframes antKneeB{from{transform:rotate(-9deg)}to{transform:rotate(8deg)}}
@keyframes antFeel1{from{transform:rotate(-7deg)}to{transform:rotate(5deg)}}
@keyframes antFeel2{from{transform:rotate(7deg)}to{transform:rotate(-5deg)}}
#ant-bubble{position:fixed;display:none;z-index:2147483647;background:#fff;color:#161616;border:1px solid #222;
border-radius:10px;padding:5px 8px;font:700 12px/1 Arial,sans-serif;box-shadow:0 2px 7px rgba(0,0,0,.16);
white-space:nowrap;pointer-events:none}
@media (max-width:900px){#ant{width:20px;height:27px}}
@media (max-width:600px){#ant{width:19px;height:26px}#ant-bubble{font-size:11px}}

/* Ant interaction fixes */
#ant{touch-action:none;-webkit-tap-highlight-color:transparent}
#ant::after{content:"";position:absolute;inset:-10px;border-radius:50%}
#ant-bubble{visibility:visible!important;opacity:1!important}

/* Keep ant feedback above every site overlay on desktop */
#ant-layer{z-index:2147483646!important}#ant-bubble{z-index:2147483647!important;display:none;position:fixed!important}


/* V95 — restore hero word cascade on tablet and mobile.
   Desktop cascade and all other site styling remain unchanged. */
@media (max-width:1000px) and (prefers-reduced-motion:no-preference){
  .hero{
    isolation:isolate;
  }
  .hero-word-rain{
    display:block !important;
    position:absolute;
    z-index:20 !important;
    top:70px;
    right:0;
    width:58vw;
    height:78%;
    overflow:visible !important;
    pointer-events:none;
  }
  .hero-rain-word{
    position:absolute;
    top:-90px;
    font-family:"Arial Black","Arial Narrow",Arial,Helvetica,sans-serif;
    font-weight:900;
    line-height:.9;
    letter-spacing:-.055em;
    white-space:nowrap;
    color:#fff;
    transform:translate3d(-50%,0,0) rotate(var(--start-angle));
    animation-name:heroWordFallMobile;
    animation-duration:var(--fall-time);
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    will-change:transform;
  }
  .hero-inner,
  .hero h1,
  .hero h1 span,
  .hero .text-link{
    position:relative;
    z-index:5 !important;
  }
  @keyframes heroWordFallMobile{
    from{transform:translate3d(-50%,-90px,0) rotate(var(--start-angle));}
    to{transform:translate3d(-50%,86vh,0) rotate(var(--end-angle));}
  }
}
@media (max-width:650px) and (prefers-reduced-motion:no-preference){
  .hero-word-rain{
    top:70px;
    width:66vw;
    height:80%;
  }
}