/* MIXTYS v6.12 — safe editorial title zone and aligned departments */

:root{
  --v611-paper:#fbf7f1;
  --v611-cream:#f2e8db;
  --v611-champagne:#c58a38;
  --v611-ink:#30251d;
  --v611-shadow:rgba(71,48,26,.14);
}

/* One seamless editorial surface: no decorative lines around or after the portrait. */
body #app .hero.hero-v54{
  gap:0!important;
  border:0!important;
  border-bottom:0!important;
  background:linear-gradient(128deg,#fcf9f4 0%,#f4eadc 54%,#ead8c1 100%)!important;
}
body #app .hero-v54 .hero-feature{
  border:0!important;
  border-right:0!important;
  background:
    radial-gradient(circle at 70% 18%,rgba(207,166,111,.16),transparent 34%),
    linear-gradient(120deg,#fcfaf6 0%,#f6eee3 51%,#ead8c1 100%)!important;
}
body #app .hero-v54 .hero-feature:before,
body #app .hero-v54 .hero-feature:after,
body #app .hero-v54 .hero-feature-photo:before,
body #app .hero-v54 .hero-feature-photo:after{
  content:none!important;
  display:none!important;
  border:0!important;
}
body #app .hero-v54 .hero-feature-photo{
  padding:clamp(10px,1.1vw,18px)!important;
  background:transparent!important;
  place-items:center!important;
}
body #app .hero-v54 .hero-feature-bg{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  filter:saturate(.97) contrast(1.015)!important;
  transform:none!important;
  animation:v611PortraitReveal 1.05s cubic-bezier(.2,.78,.2,1) both!important;
}

/* The headline is treated as one editorial lock-up, not three unrelated words. */
body #app .hero-v54 .hero-feature-copy{
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:clamp(24px,2.8vw,48px)!important;
  background:radial-gradient(circle at 28% 50%,rgba(255,255,255,.54),transparent 56%)!important;
}
body #app .hero-v54 .hero-feature-copy h1{
  margin:0!important;
  width:100%!important;
  max-width:100%!important;
  color:var(--v611-ink)!important;
  font-size:clamp(2.8rem,3.55vw,4.25rem)!important;
  font-weight:500!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
  text-wrap:balance!important;
  animation:v611TitleReveal .86s .08s cubic-bezier(.2,.78,.2,1) both!important;
}
body #app .hero-v54 .hero-feature-copy h1 span,
body #app .hero-v54 .hero-feature-copy h1 em{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}
body #app .hero-v54 .hero-feature-copy h1 em{
  margin-top:.08em!important;
  color:var(--v611-champagne)!important;
  font-size:.94em!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
}

/* Twelve columns allow 4 equal cards above and 3 equal cards below. */
body #app .hero-v54 .hero-category-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:0!important;
  grid-auto-flow:row!important;
  gap:clamp(8px,.7vw,12px)!important;
  padding:clamp(8px,.75vw,12px)!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#f4ece2 0%,#ebdece 100%)!important;
}
body #app .hero-v54 .hero-category-card{
  grid-column:span 3!important;
  grid-row:auto!important;
  width:auto!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
  border-radius:clamp(15px,1.15vw,21px)!important;
  box-shadow:0 12px 30px rgba(67,43,22,.09)!important;
  overflow:hidden!important;
  transform:translateZ(0);
}
body #app .hero-v54 .hero-category-card:nth-child(n+5){
  grid-column:span 4!important;
}
body #app .hero-v54 .hero-category-card:nth-child(6),
body #app .hero-v54 .hero-category-card:nth-child(7){
  grid-row:auto!important;
}
body #app .hero-v54 .hero-category-media,
body #app .hero-v54 .hero-category-card:nth-child(6) .hero-category-media{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
body #app .hero-v54 .hero-category-media img,
body #app .hero-v54 .hero-category-card:nth-child(6) .hero-category-media img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 22%!important;
}
body #app .hero-v54 .hero-category-card:nth-child(4) .hero-category-media img,
body #app .hero-v54 .hero-category-card:nth-child(6) .hero-category-media img{
  object-position:center center!important;
}
body #app .hero-v54 .hero-category-copy{
  padding:clamp(.7rem,1vw,1rem)!important;
}
body #app .hero-v54 .hero-category-copy h3{
  margin:0!important;
  font-size:clamp(1rem,1.15vw,1.4rem)!important;
  line-height:1.04!important;
  text-wrap:balance!important;
}
body #app .hero-v54 .hero-category-copy small,
body #app .hero-v54 .hero-category-copy p,
body #app .hero-v54 .hero-category-copy svg{
  display:none!important;
}

@media (hover:hover) and (pointer:fine){
  body #app .hero-v54 .hero-category-card:hover{
    transform:translateY(-5px) scale(1.008)!important;
    box-shadow:0 24px 50px var(--v611-shadow)!important;
  }
  body #app .hero-v54 .hero-category-card:hover .hero-category-media img{
    transform:scale(1.035)!important;
  }
}

/* Wide desktop: the complete hero and all seven departments fit in one screen. */
@media (min-width:1181px){
  body #app .hero.hero-v54{
    grid-template-columns:minmax(0,1.04fr) minmax(560px,.96fr)!important;
    height:clamp(500px,calc(100svh - 144px),640px)!important;
    min-height:500px!important;
    max-height:640px!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-feature{
    grid-template-columns:minmax(285px,40%) minmax(0,60%)!important;
    height:100%!important;
  }
}

/* Laptop: two equal upper rows and one lower row keep Sport, Home & Art, Services aligned. */
@media (min-width:901px) and (max-width:1180px){
  body #app .hero.hero-v54{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(430px,.82fr)!important;
    height:clamp(540px,calc(100svh - 132px),650px)!important;
    min-height:540px!important;
    max-height:650px!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-feature{
    grid-template-columns:minmax(215px,40%) minmax(0,60%)!important;
    height:100%!important;
  }
  body #app .hero-v54 .hero-feature-copy{
    padding:clamp(20px,2.6vw,32px)!important;
  }
  body #app .hero-v54 .hero-feature-copy h1{
    font-size:clamp(2.35rem,3.65vw,3rem)!important;
  }
  body #app .hero-v54 .hero-category-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    padding:8px!important;
  }
  body #app .hero-v54 .hero-category-card{
    grid-column:span 3!important;
  }
  body #app .hero-v54 .hero-category-card:nth-child(n+5){
    grid-column:span 2!important;
  }
  body #app .hero-v54 .hero-category-copy h3{
    font-size:clamp(.88rem,1.35vw,1.03rem)!important;
  }
}

/* Tablet and phone: natural document height prevents cropping and overlap. */
@media (max-width:900px){
  body #app .hero.hero-v54{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body #app .hero-v54 .hero-feature{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    overflow:visible!important;
  }
  body #app .hero-v54 .hero-feature-photo{
    grid-row:1!important;
    height:clamp(320px,58svh,520px)!important;
    padding:8px!important;
  }
  body #app .hero-v54 .hero-feature-copy{
    grid-row:2!important;
    align-items:center!important;
    overflow:visible!important;
    padding:1.35rem 1rem 1.6rem!important;
    text-align:center!important;
  }
  body #app .hero-v54 .hero-feature-copy h1{
    max-width:10ch!important;
    font-size:clamp(2.65rem,11.5vw,4rem)!important;
    line-height:.91!important;
  }
  body #app .hero-v54 .hero-category-grid{
    height:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:clamp(178px,48vw,245px)!important;
    gap:8px!important;
    padding:8px!important;
    overflow:visible!important;
  }
  body #app .hero-v54 .hero-category-card,
  body #app .hero-v54 .hero-category-card:nth-child(n+5){
    grid-column:span 1!important;
    height:100%!important;
  }
  body #app .hero-v54 .hero-category-card:nth-child(7){
    grid-column:1/-1!important;
  }
  body #app .hero-v54 .hero-category-copy h3{
    font-size:clamp(1rem,4.1vw,1.25rem)!important;
  }
}

@media (max-width:479px){
  body #app .hero-v54 .hero-feature-photo{
    height:clamp(300px,56svh,420px)!important;
  }
  body #app .hero-v54 .hero-feature-copy{
    padding:1.15rem .9rem 1.35rem!important;
  }
  body #app .hero-v54 .hero-category-grid{
    grid-template-columns:1fr!important;
    grid-auto-rows:clamp(220px,66vw,300px)!important;
  }
  body #app .hero-v54 .hero-category-card,
  body #app .hero-v54 .hero-category-card:nth-child(n+5),
  body #app .hero-v54 .hero-category-card:nth-child(7){
    grid-column:1!important;
  }
}

@keyframes v611PortraitReveal{
  from{opacity:0;transform:scale(.985) translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes v611TitleReveal{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  body #app .hero-v54 .hero-feature-bg,
  body #app .hero-v54 .hero-feature-copy h1,
  body #app .hero-v54 .hero-category-card,
  body #app .hero-v54 .hero-category-media img{
    animation:none!important;
    transition:none!important;
  }
}