/* =========================================================
   HERO INTRO  —  v216  (poster depth, reference-grade)
   Scoped 100% to .hero-x . Nothing here touches the navbar
   (.nav / .nav.scrolled / .nav-inner / .nav-blur) or .hero

   v216 owner feedback
   - Wordmark is BIG like the reference poster and the two lines
     sit close together (tight, but never merged).
   - REAL depth: the type is pushed down into the frame so the
     portrait's head + shoulders cross OVER the second line.
   - Mobile uses the same poster composition (type crossed by the
     portrait), just retuned - not a shrunken desktop.
   ========================================================= */

:root{
  --hx-blue:#144d9e;
  --hx-deep:#17345d;
  --hx-gold:#f9a20b;
  --hx-display:"Basement Grotesque",Impact,"Haettenschweiler",sans-serif;
}

/* =========================  SECTION  ========================= */
.hero-x{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  margin:0;
  background:#dfe9f3;
}

/* ---- layer 0 : background photo ---- */
.hero-x__bg{
  position:absolute;inset:0;z-index:0;
  background-image:-webkit-image-set(
    url("../assets/hero/hero-bg-1920.webp") 1x,
    url("../assets/hero/hero-bg-4k.webp") 2x);
  background-image:image-set(
    url("../assets/hero/hero-bg-1920.webp") 1x,
    url("../assets/hero/hero-bg-4k.webp") 2x);
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
  animation:hxKen 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes hxKen{from{transform:scale(1.03)}to{transform:scale(1.09)}}

/* ---- layer 1 : very light veil ---- */
.hero-x__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.05) 30%,
      rgba(255,255,255,0)   58%,
      rgba(255,255,255,.30) 88%,
      rgba(255,255,255,.62) 100%);
}

/* ---- layer 2 : display type (BEHIND the portrait) ---- */
.hero-x__stage{
  position:relative;z-index:2;
  flex:1;width:100%;
  display:flex;flex-direction:column;align-items:center;
  /* type is pushed down so the cut-out crosses it = depth */
  padding-top:calc(80px + clamp(10px,4.6svh,60px));
  padding-inline:clamp(10px,2.2vw,34px);
}

.hero-x__title{
  margin:0;
  text-align:center;
  width:100%;
  font-family:var(--hx-display);
  font-weight:900;
  /* poster scale, like the reference */
  font-size:clamp(3.6rem,11.8vw,12.6rem);
  line-height:1;
  letter-spacing:-.018em;
  text-transform:uppercase;
  color:var(--hx-blue);
  -webkit-user-select:none;user-select:none;
  overflow:visible;
}
.hero-x__title span{
  display:block;
  /* head-room so the caps are never sliced at the top */
  padding-top:.17em;
  padding-bottom:0;
  background:linear-gradient(128deg,
    #3b85e8 0%, #2264c6 22%, #144d9e 48%, #10407f 72%, #0a2a57 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 26px rgba(12,47,99,.24));
}
/* tight line gap: the words sit close like the reference poster,
   but they never touch */
.hero-x__title .l2{margin-top:-.36em}

/* ---- layer 2.5 : soft halo behind the cut-out ---- */
.hero-x__halo{
  position:absolute;z-index:2;left:50%;bottom:-6%;
  transform:translateX(-50%);
  width:clamp(320px,44vw,820px);
  height:clamp(210px,34svh,520px);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0) 74%);
  filter:blur(8px);
}

/* ---- layer 3 : cut-out portrait, IN FRONT of the type ---- */
.hero-x__portrait{
  --hx-shift:-59.3%;
  position:absolute;z-index:3;
  left:50%;bottom:0;
  /* Full uncropped cut-out; slightly smaller so only half of OMADED overlaps. */
  transform:translateX(var(--hx-shift));
  height:clamp(340px,57.5svh,712px);
  width:auto;max-width:none;
  pointer-events:none;
  filter:drop-shadow(0 30px 54px rgba(12,47,99,.34));
  animation:hxRise 1.15s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes hxRise{
  from{opacity:0;transform:translateX(var(--hx-shift)) translateY(34px) scale(.985)}
  to{opacity:1;transform:translateX(var(--hx-shift)) translateY(0) scale(1)}
}

/* ---- layer 4 : baseline captions ---- */
.hero-x__meta{
  position:absolute;z-index:4;left:0;right:0;
  bottom:clamp(54px,7.5svh,92px);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(12px,4vw,40px);
  padding:0 clamp(18px,4.4vw,74px);
  pointer-events:none;
}
.hero-x__meta p{
  margin:0;max-width:25ch;
  font-size:clamp(11px,1.02vw,14.5px);
  font-weight:500;line-height:1.5;
  color:var(--hx-deep);
  text-shadow:0 1px 10px rgba(255,255,255,.95),0 1px 3px rgba(255,255,255,.9);
}
.hero-x__meta p:last-child{text-align:right}
.hero-x__meta b{
  display:block;
  font-family:var(--hx-display);font-weight:900;
  font-size:clamp(11px,1.02vw,14px);
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--hx-blue);
  margin-bottom:3px;
}

/* ---- scroll cue ---- */
.hero-x__cue{
  position:absolute;z-index:6;left:50%;transform:translateX(-50%);
  bottom:clamp(14px,3svh,30px);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--hx-display);
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--hx-blue);opacity:.72;
}
.hero-x__cue i{
  width:1px;height:30px;
  background:linear-gradient(180deg,var(--hx-blue),rgba(20,77,158,0));
  animation:hxCue 2s ease-in-out infinite;
}
@keyframes hxCue{
  0%,100%{transform:scaleY(.45);opacity:.35}
  50%{transform:scaleY(1);opacity:.95}
}

/* =========================  TABLET  ========================= */
@media (max-width:960px){
  .hero-x__stage{padding-top:calc(72px + clamp(14px,5svh,64px))}
  .hero-x__title{font-size:clamp(3.2rem,13.4vw,7.4rem)}
  .hero-x__portrait{height:clamp(340px,59svh,700px)}
}

/* =========================  MOBILE  ========================= */
@media (max-width:760px){
  .hero-x{min-height:100svh}

  .hero-x__bg{
    background-image:url("../assets/hero/hero-bg-mobile.webp");
    background-position:center 38%;
  }

  .hero-x__wash{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.06) 26%,
        rgba(255,255,255,0)   50%,
        rgba(255,255,255,.34) 80%,
        rgba(255,255,255,.72) 100%);
  }

  /* type sits in the upper-middle band so the portrait's head
     and shoulders cross over the second word = same depth read
     as desktop */
  .hero-x__stage{
    padding-top:calc(44px + 20svh);
    padding-inline:8px;
  }

  .hero-x__title{
    font-size:clamp(3.1rem,19.2vw,6rem);
    line-height:1;
    letter-spacing:-.022em;
  }
  .hero-x__title span{padding-top:.18em}
  .hero-x__title .l2{margin-top:-.37em}

  /* Mobile is composed independently rather than shrinking desktop:
     almost the full cut-out stays visible, the face is centred, KHUSH
     remains clear, and only OMADED receives the foreground overlap. */
  .hero-x__portrait{
    --hx-shift:-57%;
    width:88vw;
    height:auto;
    max-width:none;
    max-height:none;
    top:clamp(286px,35.5svh,306px);
    bottom:auto;
    filter:
      drop-shadow(0 24px 28px rgba(12,47,99,.28))
      drop-shadow(0 4px 8px rgba(12,47,99,.18));
  }

  .hero-x__halo{
    width:106vw;
    height:32svh;
    bottom:18svh;
    filter:blur(12px);
    background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(208,225,244,.28) 48%,rgba(255,255,255,0) 76%);
  }

  .hero-x__meta{
    z-index:5;
    bottom:calc(50px + env(safe-area-inset-bottom,0px));
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    padding:0 14px;
  }
  .hero-x__meta p{
    max-width:none;
    width:100%;
    text-align:left;
    font-size:11px;
    line-height:1.4;
    padding:8px 11px;
    border-radius:12px;
    background:rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(6px) saturate(115%);
    backdrop-filter:blur(6px) saturate(115%);
    box-shadow:0 6px 18px rgba(12,47,99,.10);
    text-shadow:none;
  }
  .hero-x__meta p:last-child{text-align:left}
  .hero-x__meta b{
    font-size:10.5px;
    letter-spacing:.02em;
    margin-bottom:2px;
    line-height:1.2;
  }

  .hero-x__cue{
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    font-size:8px;
  }
  .hero-x__cue i{height:18px}
}

@media (max-width:400px){
  .hero-x__title{font-size:clamp(2.9rem,18.6vw,4.6rem)}
  .hero-x__stage{padding-top:calc(42px + 19svh)}
  .hero-x__portrait{--hx-shift:-58%;width:86vw;top:clamp(280px,35.5svh,298px)}
  .hero-x__meta p{font-size:10.2px;max-width:none}
  .hero-x__meta b{font-size:9.8px}
}

/* very short screens (landscape phones) */
@media (max-height:740px) and (max-width:760px){
  .hero-x__portrait{--hx-shift:-59%;width:80vw;top:278px}
  .hero-x__meta{bottom:38px}
}

@media (max-height:520px) and (max-width:960px){
  .hero-x__stage{padding-top:60px}
  .hero-x__title{font-size:clamp(2rem,7.6vw,3rem)}
  .hero-x__portrait{width:56vw;height:auto;top:128px;bottom:auto}
  .hero-x__meta{bottom:18px}
  .hero-x__cue{display:none}
}

/* =========================  A11Y  ========================= */
@media (prefers-reduced-motion:reduce){
  .hero-x__bg,
  .hero-x__portrait,
  .hero-x__cue i{animation:none !important}
}

/* ============================================================
   v254 - hero achievement badges (gold medal + trophy)
   Positions (.tl / .br) are unchanged; only the look is upgraded.
   ============================================================ */
.float-chip {
  gap: 8px;
  padding: 8px 15px 8px 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(18, 63, 134, 0.1);
  box-shadow:
    0 6px 18px rgba(16, 42, 84, 0.14),
    0 1px 2px rgba(16, 42, 84, 0.1);
  white-space: nowrap;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}
.float-chip:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(16, 42, 84, 0.18),
    0 1px 2px rgba(16, 42, 84, 0.1);
}
.float-chip .chip-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(120, 72, 10, 0.28));
}
.float-chip .chip-txt {
  display: block;
  line-height: 1.1;
}
@media (max-width: 760px) {
  .float-chip {
    font-size: 11.5px;
    padding: 6px 12px 6px 8px;
    gap: 6px;
  }
  .float-chip .chip-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
}