/* GNB Hero – all rules scoped under .gnbh so the theme can't interfere */
.gnbh{
  --gnbh-purple:#82318a;--gnbh-deep:#2a1236;--gnbh-gold:#f5a623;--gnbh-mint:#5fb894;
  --gnbh-edge:80px; /* minimum space between the content and the screen edge */
  --gnbh-text:color-mix(in srgb,var(--gnbh-purple) 45%,var(--gnbh-deep));
  position:relative;overflow:hidden;box-sizing:border-box;
  padding:clamp(56px,8vw,110px) var(--gnbh-edge);color:var(--gnbh-deep);
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.4;
  background:
    radial-gradient(900px 520px at 88% 18%,color-mix(in srgb,var(--gnbh-purple) 16%,transparent),transparent 62%),
    radial-gradient(720px 480px at 0% 100%,color-mix(in srgb,var(--gnbh-gold) 18%,transparent),transparent 62%),
    radial-gradient(620px 420px at 45% 0%,color-mix(in srgb,var(--gnbh-mint) 11%,transparent),transparent 62%),
    linear-gradient(135deg,color-mix(in srgb,var(--gnbh-purple) 9%,#fff) 0%,#faf3ef 52%,color-mix(in srgb,var(--gnbh-gold) 14%,#fff) 100%);
}
.gnbh--full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.gnbh *,.gnbh *::before,.gnbh *::after{box-sizing:border-box}
.gnbh h1,.gnbh p,.gnbh figure{margin:0;padding:0}
.gnbh a{text-decoration:none;box-shadow:none}

/* ---------- background layer ---------- */
.gnbh__floaters{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gnbh__floaters::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(color-mix(in srgb,var(--gnbh-purple) 18%,transparent) 1.3px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 85%);mask-image:linear-gradient(100deg,transparent 30%,#000 85%);opacity:.55}
.gnbh__floaters::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;background:var(--gnbh-wave,none) center/100% 100% no-repeat}

.gnbh__fl{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:var(--c,var(--gnbh-purple));opacity:var(--o,.15);animation:gnbh-drift var(--d,10s) ease-in-out var(--dl,0s) infinite}
.gnbh__fl svg{width:100%;height:100%;display:block}
.gnbh__fl--heart svg{animation:gnbh-beat 3.4s ease-in-out infinite}
.gnbh__fl--flower svg{animation:gnbh-spin 28s linear infinite}
.gnbh__fl--sun svg{animation:gnbh-spin 45s linear infinite}
.gnbh__fl--butterfly svg{animation:gnbh-flap 1.8s ease-in-out infinite}
.gnbh__fl--spark svg{animation:gnbh-twinkle 4.5s ease-in-out infinite}
@keyframes gnbh-drift{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(12px,-24px) rotate(6deg)}}
@keyframes gnbh-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes gnbh-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
@keyframes gnbh-spin{to{transform:rotate(360deg)}}
@keyframes gnbh-twinkle{0%,100%{transform:scale(.92) rotate(-6deg);opacity:.7}50%{transform:scale(1.08) rotate(6deg);opacity:1}}

/* ---------- layout ---------- */
.gnbh__inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}

.gnbh__eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gnbh-purple)}
.gnbh__eyebrow::before{content:"";width:36px;height:3px;border-radius:3px;background:var(--gnbh-gold)}

.gnbh .gnbh__title{margin:18px 0 22px;font-family:inherit;font-weight:900;text-transform:uppercase;font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.05;letter-spacing:-.01em;color:var(--gnbh-deep)}
.gnbh__title span{color:var(--gnbh-purple);position:relative;white-space:nowrap}
.gnbh__title span::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:var(--gnbh-gold);opacity:.55;border-radius:4px;z-index:-1}

.gnbh .gnbh__lead{max-width:540px;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.7;color:var(--gnbh-text)}
.gnbh__lead strong{color:var(--gnbh-deep)}
.gnbh__lead a{color:var(--gnbh-purple);text-decoration:underline}

.gnbh__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.gnbh .gnbh__btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:12px;font-weight:800;font-size:1rem;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.gnbh .gnbh__btn--primary{background:var(--gnbh-purple);color:#fff;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--gnbh-purple) 55%,transparent)}
.gnbh .gnbh__btn--primary:hover{background:color-mix(in srgb,var(--gnbh-purple) 85%,#000);transform:translateY(-2px);color:#fff}
.gnbh .gnbh__btn--ghost{border:2px solid var(--gnbh-purple);color:var(--gnbh-purple);background:transparent}
.gnbh .gnbh__btn--ghost:hover{background:var(--gnbh-purple);color:#fff;transform:translateY(-2px)}
.gnbh .gnbh__btn:focus-visible{outline:3px solid var(--gnbh-gold);outline-offset:3px}

.gnbh__stats{display:flex;flex-wrap:wrap;gap:28px 44px;margin-top:44px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--gnbh-purple) 18%,transparent)}
.gnbh__stat b{display:block;font-size:2rem;font-weight:900;color:var(--gnbh-purple);line-height:1}
.gnbh__stat small{display:block;margin-top:6px;font-size:.85rem;color:var(--gnbh-text);font-weight:600}

/* ---------- photo gallery ---------- */
.gnbh__visual{position:relative}
.gnbh__stage{position:relative;aspect-ratio:5/4.7;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gnbh__stage.is-drag{cursor:grabbing}
.gnbh__visual:focus-visible{outline:3px solid var(--gnbh-gold);outline-offset:8px;border-radius:32px}
.gnbh__blob{position:absolute;inset:-18px -10px -14px -14px;border-radius:44px;background:color-mix(in srgb,var(--gnbh-purple) 12%,#fff);transform:rotate(-2.5deg)}
.gnbh__blob::after{content:"";position:absolute;right:-6px;bottom:-14px;width:110px;height:110px;border-radius:28px;border:3px dashed var(--gnbh-gold);opacity:.7}

.gnbh .gnbh__card{position:absolute;overflow:hidden;border-radius:28px;
  background:linear-gradient(135deg,var(--gnbh-purple),var(--gnbh-deep));box-shadow:0 30px 60px -25px color-mix(in srgb,var(--gnbh-deep) 45%,transparent);
  transition:left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1),height .9s cubic-bezier(.65,0,.25,1),transform .9s cubic-bezier(.65,0,.25,1),opacity .7s ease,border-radius .9s}
.gnbh .gnbh__card img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;pointer-events:none;-webkit-user-drag:none;display:block;border-radius:0;margin:0}

.gnbh .gnbh__card[data-pos="2"]{left:26%;top:0;width:74%;height:100%;opacity:1;z-index:3;transform:rotate(0)}
.gnbh .gnbh__card[data-pos="1"]{left:0;top:16%;width:36%;height:58%;opacity:1;z-index:2;transform:rotate(-5deg);border-radius:22px}
.gnbh .gnbh__card[data-pos="leave"]{left:26%;top:0;width:74%;height:100%;opacity:0;z-index:1;transform:scale(.94) rotate(2deg)}
.gnbh .gnbh__card[data-pos="0"]{left:-10%;top:22%;width:30%;height:48%;opacity:0;z-index:0;transform:rotate(-9deg)}

/* caption over a dark gradient, shown on the main photo only */
.gnbh .gnbh__card figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:90px 26px 24px;color:#fff;transition:opacity .5s ease;
  background:linear-gradient(to top,color-mix(in srgb,var(--gnbh-deep) 96%,transparent) 0%,color-mix(in srgb,var(--gnbh-deep) 78%,transparent) 38%,transparent 100%)}
.gnbh .gnbh__card figcaption p{font-size:clamp(.95rem,1.4vw,1.1rem);font-weight:700;line-height:1.5;color:#fff}
.gnbh .gnbh__card figcaption cite{display:block;margin-top:8px;font-style:normal;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gnbh-gold)}
.gnbh .gnbh__card:not([data-pos="2"]) figcaption{opacity:0}
.gnbh .gnbh__card[data-pos="1"]::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,color-mix(in srgb,var(--gnbh-deep) 55%,transparent),transparent 60%)}

.gnbh__dots{position:absolute;right:18px;top:18px;z-index:5;display:flex;gap:7px}
.gnbh__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .4s,background .4s}
.gnbh__dots i.on{width:26px;border-radius:6px;background:var(--gnbh-gold)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .gnbh__copy>*{animation:gnbh-rise .7s both}
  .gnbh__copy>*:nth-child(2){animation-delay:.08s}
  .gnbh__copy>*:nth-child(3){animation-delay:.16s}
  .gnbh__copy>*:nth-child(4){animation-delay:.24s}
  .gnbh__copy>*:nth-child(5){animation-delay:.32s}
  .gnbh__visual{animation:gnbh-rise .9s .15s both}
  @keyframes gnbh-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .gnbh__fl,.gnbh__fl svg{animation:none!important}
  .gnbh .gnbh__card{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .gnbh{--gnbh-edge:40px}
  .gnbh__inner{grid-template-columns:1fr}
  .gnbh__visual{order:-1;padding-left:12px}
  .gnbh__title span{white-space:normal}
}
@media (max-width:600px){.gnbh__fl--hide-sm{display:none}}
@media (max-width:480px){
  .gnbh{--gnbh-edge:20px}
  .gnbh__actions .gnbh__btn{width:100%;justify-content:center}
  .gnbh .gnbh__card figcaption{padding:70px 18px 18px}
}