/* Hero balance — Chafouin as the journey, vertical film as the moving creative eye */
.hero-inset{width:42%;height:auto;aspect-ratio:9/16;left:-9%;bottom:-1.15rem;box-shadow:0 1.45rem 3.8rem rgb(49 39 25/.26);background:#17110d}
.hero-inset img,.hero-inset video,.hero-inset iframe{object-fit:cover!important;object-position:50% 50%!important}

/* Keep the visual duo high on wide screens, while mobile spacing is tuned below. */
.hero-composition{margin-top:-1.15rem}

/* Keep the principles editorial: remove the terracotta hero underline that reads like a tab indicator. */
.hero::after{content:none!important;display:none!important}

/* Meaningful geographic signature: Caran d'Ache / Genève ↔ Santa Marta. */
.hero-coordinates{--ojalma-coordinate-size:clamp(.86rem,1.55vw,1.1rem)}
.hero-coordinates span:first-child,.hero-coordinates span:last-child{font-size:0!important}
.hero-coordinates span:first-child::after{content:"46°12′N";font-size:var(--ojalma-coordinate-size);font-weight:inherit;letter-spacing:inherit;color:inherit}
.hero-coordinates span:last-child::before{content:"↔"!important;font-size:calc(var(--ojalma-coordinate-size)*.78);font-weight:600;margin:0 .62rem;color:#c68a34}
.hero-coordinates span:last-child::after{content:"11°14′N";font-size:var(--ojalma-coordinate-size);font-weight:inherit;letter-spacing:inherit;color:inherit}

/* Hero territory signature — compact, centered and aligned with the lower frame. */
.hero-main figcaption{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.24rem!important;
  left:43%!important;
  right:2.5%!important;
  bottom:1.82rem!important;
  width:auto!important;
  min-width:0!important;
  text-align:center!important;
  transform:rotate(-7deg)!important;
  transform-origin:50% 100%!important;
  white-space:nowrap!important;
  z-index:9!important;
}

.hero-main figcaption span:first-child{display:none!important}

/* French flag: same softened tricolour as the FR language selector. */
.hero-main figcaption::before{
  content:"";
  display:block;
  flex:0 0 1.03rem;
  width:1.03rem;
  height:.68rem;
  border-radius:.12rem;
  box-sizing:border-box;
  opacity:.96;
  transform:translateY(.01rem);
  border:1px solid rgb(255 255 255/.18);
  box-shadow:0 1px 7px rgb(0 0 0/.24);
  background:linear-gradient(90deg,#41557a 0 33.333%,#f7edd8 33.333% 66.666%,#b75f50 66.666% 100%);
}

/* France and America Latina behave as one tight signature. */
.hero-main figcaption span:last-child{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:0!important;
  flex:none!important;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  font-size:0!important;
  white-space:nowrap!important;
}

.hero-main figcaption span:last-child::before{
  content:"France ×";
  color:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-shadow:0 1px 8px rgb(0 0 0/.42);
}

.hero-main figcaption span:last-child::after{
  content:"America Latina";
  color:#f2c94c;
  font-family:"Gloss And Bloom","Brush Script MT","Segoe Script",cursive;
  font-size:1.44rem;
  font-weight:400;
  letter-spacing:-.01em;
  margin-left:-1rem;
  text-transform:none;
  text-shadow:0 1px 8px rgb(0 0 0/.44);
}

@media(max-width:760px){
  /* Give the navigation/music controls a little breathing room before the visual duo. */
  .nav{order:1}
  .hero-composition{order:2;margin-top:1rem;margin-bottom:-.35rem}
  .hero-copy{order:3;padding:2.6rem 0 2rem!important}
  .hero-index{order:4;margin-top:.45rem!important}
  .hero-main{top:1.05rem}
  .hero-coordinates{top:.35rem}

  .hero-inset{width:45%;left:-7%;bottom:-1.25rem}

  /* Center the whole signature in the free strip between the vertical film and the truck edge. */
  .hero-main figcaption{
    left:76.5%!important;
    right:auto!important;
    bottom:2.15rem!important;
    width:max-content!important;
    max-width:none!important;
    gap:.14rem!important;
    transform:translateX(-50%) rotate(-7deg)!important;
    transform-origin:50% 100%!important;
    z-index:9!important;
  }
  .hero-main figcaption::before{width:.88rem;height:.57rem;flex-basis:.88rem}
  .hero-main figcaption span:last-child::before{font-size:.74rem;letter-spacing:.055em}
  .hero-main figcaption span:last-child::after{font-size:1.1rem;margin-left:-1.42rem}
}

@media(max-width:500px){
  .hero-composition{margin-top:.9rem;margin-bottom:-.25rem}
  .hero-main{top:.85rem}
  .hero-inset{width:47%;left:-8%;bottom:-1.05rem}

  .hero-main figcaption{
    left:77%!important;
    right:auto!important;
    bottom:2.05rem!important;
    width:max-content!important;
    max-width:none!important;
    gap:.11rem!important;
    transform:translateX(-50%) rotate(-7deg)!important;
    transform-origin:50% 100%!important;
    z-index:9!important;
  }
  .hero-main figcaption::before{width:.8rem;height:.52rem;flex-basis:.8rem;border-radius:.1rem}
  .hero-main figcaption span:last-child::before{font-size:.69rem;letter-spacing:.05em}
  .hero-main figcaption span:last-child::after{font-size:1.02rem;letter-spacing:-.012em;margin-left:-1.34rem}
}