/* ==========================================================
   Hero split layout + zoom slider
   ========================================================== */
/* ---------- hero split ---------- */
.hero-body{
  position:relative;z-index:3;flex:1;
  display:grid;
  /* col 2 (the slider) must start at EXACTLY 50% of this box — col 1 eats
     the full gap so the gap sits before the midpoint, not straddling it. */
  grid-template-columns:minmax(0,calc(50% - 36px)) minmax(0,50%);
  gap:36px;align-items:stretch;
  padding:14px 30px 0;
}
.hero-copy{text-align:left;align-self:center;padding:0 0 104px 26px;}
.hero-sub{margin:20px 0 0;max-width:440px;}
.hero-cta{justify-content:flex-start;margin-top:26px;}


/* ---------- slider shell ---------- */
.zoom-slider{
  position:relative;overflow:hidden;align-self:stretch;
  min-height:360px;
  /* bleed past the hero padding so the cards stand on the block edge */
  margin:0 -30px 0 0;
  border-radius:0;
  cursor:grab;outline:none;
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.zoom-slider.is-dragging{cursor:grabbing;}
.zoom-slider:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 6px rgba(255,255,255,.28);}
.zs-strip{position:absolute;inset:0;}

/* ---------- cards ---------- */
.zs-card{position:absolute;left:0;top:0;will-change:transform;}
.zs-media{
  position:relative;overflow:hidden;border-radius:10px;
  will-change:width,height;
  box-shadow:0 24px 48px rgba(1,6,20,.62);
  background:#050e26;
}
.zs-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  /* unify a mixed photo set into one dark, calm palette */
  filter:saturate(.72) contrast(1.06) brightness(.86);
  transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.zs-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,8,31,.34) 0%,rgba(1,8,31,0) 34%,rgba(1,8,31,.58) 100%);
}
.zoom-slider:not(.is-dragging) .zs-media:hover img{transform:scale(1.05);filter:saturate(.95) contrast(1.04) brightness(1);}

/* ---------- hover text (masked line rise) ---------- */
.zs-text{
  position:absolute;left:0;bottom:calc(100% + 10px);
  width:max-content;max-width:240px;
  display:flex;flex-direction:column;gap:5px;
  pointer-events:none;opacity:0;
  transition:opacity .18s ease .16s;
}
.zs-text p{margin:0;overflow:hidden;}
.zs-text span{
  display:block;transform:translateY(110%);
  transition:transform .28s cubic-bezier(.55,.06,.68,.19);
}
.zs-num{font-size:10px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.55);line-height:1;}
.zs-title{font-size:13px;font-weight:800;letter-spacing:.08em;color:#fff;line-height:1.15;}
.zs-desc{font-size:10px;font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.62);line-height:1.4;}
/* this caption floats above the card, over the hero band itself — which
   inverts with the theme (see styles.css) — so it needs a dark variant. */
:root[data-theme="dark"] .zs-num{color:rgba(3,18,66,.55);}
:root[data-theme="dark"] .zs-title{color:var(--navy);}
:root[data-theme="dark"] .zs-desc{color:rgba(3,18,66,.62);}
/* Mirrored track (data-mirror, see slider.js): there the neighbour on a card's
   left is the bigger, taller one and would cover a caption anchored to that
   edge — so it moves to the right, over the cards shrinking away. */
.zoom-slider[data-mirror] .zs-text{left:auto;right:0;align-items:flex-end;text-align:right;}

.zoom-slider:not(.is-dragging) .zs-media:hover + .zs-text,
.zoom-slider:not(.is-dragging) .zs-media.is-active + .zs-text{opacity:1;transition-delay:0s;}
.zoom-slider:not(.is-dragging) .zs-media:hover + .zs-text span,
.zoom-slider:not(.is-dragging) .zs-media.is-active + .zs-text span{
  transform:translateY(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.zoom-slider:not(.is-dragging) .zs-media:hover + .zs-text .zs-title span,
.zoom-slider:not(.is-dragging) .zs-media.is-active + .zs-text .zs-title span{transition-delay:.05s;}
.zoom-slider:not(.is-dragging) .zs-media:hover + .zs-text .zs-desc span,
.zoom-slider:not(.is-dragging) .zs-media.is-active + .zs-text .zs-desc span{transition-delay:.1s;}


/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .zs-media img{transition:none;}
  .zoom-slider:not(.is-dragging) .zs-media:hover img{transform:none;}
  .zs-text{transition:opacity .18s ease;}
  .zs-text span{transform:none;transition:none;}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-body{grid-template-columns:1fr;gap:26px;padding:10px 24px 28px;}
  .hero-copy{text-align:center;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  .zoom-slider{height:clamp(280px,42vw,380px);min-height:0;margin:0 -24px 0 0;align-self:auto;}
  .hero-copy{padding-bottom:0;}
  .hero{min-height:0;}
}
@media (max-width:620px){
  .hero-cta{flex-direction:column;align-items:center;}
  .zoom-slider{height:300px;min-height:0;}
  .zs-text{max-width:150px;}
}


/* ==========================================================
   Hero left column — editorial treatment
   ========================================================== */
.hero-title{
  margin:0;white-space:nowrap;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(30px,4.15vw,64px);
}
.hero-title .l1{color:#fff;}
.hero-title .l2{
  display:block;white-space:normal;
  margin-top:.3em;
  font-size:.62em;font-weight:800;letter-spacing:-.025em;line-height:1.16;
  color:rgba(255,255,255,.94);
}
.hero-title .l2-accent{color:var(--amber-light);}

/* the flip cycles between two full phrases here, not a single word —
   let it wrap and breathe across up to two lines instead of forcing
   one long nowrap line. */
.hero-title--flip-solo{white-space:normal;line-height:1.1;}
.hero-title--flip-solo .flip{display:block;white-space:normal;}
.hero-title--flip-solo .flip-cur,
.hero-title--flip-solo .flip-next{display:block;white-space:normal;width:100%;}

.flip{
  position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap;
  font:inherit;color:var(--amber-light);
  opacity:0;transition:opacity .25s ease;
}
.flip.is-ready{opacity:1;}
.flip-cur,.flip-next{display:inline-block;}
.flip-word{display:inline-block;white-space:nowrap;}
.flip-next{position:absolute;left:0;top:0;}
.flip-char{
  display:inline-block;
  backface-visibility:hidden;
  transform-origin:50% 50% var(--fo,0px);
  will-change:transform;
}

.hero-copy .hero-sub{
  margin:34px 0 0;max-width:500px;
  font-size:18px;line-height:1.68;font-weight:400;
  color:rgba(255,255,255,.76);
}
.hero-copy .hero-sub::before{
  content:"";display:block;width:52px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),rgba(220,152,69,.12));
  margin-bottom:22px;
}

.hero-meta{
  position:absolute;left:30px;bottom:26px;z-index:4;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:0;padding:0;list-style:none;
}
.hero-meta li{
  position:relative;font-size:11.5px;font-weight:500;letter-spacing:.05em;
  color:rgba(255,255,255,.55);
}
.hero-meta li + li::before{
  content:"";position:absolute;left:-11px;top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:999px;
  background:rgba(220,152,69,.75);
}

@media (prefers-reduced-motion:reduce){
  .flip-char{transform:none!important;transition:none!important;}
}
@media (max-width:1080px){
  .hero-title{font-size:clamp(32px,7.6vw,60px);white-space:normal;}
  .flip{white-space:normal;}
  .hero-copy .hero-sub::before{margin-left:auto;margin-right:auto;}
  .hero-meta{position:static;left:auto;bottom:auto;justify-content:center;margin-top:26px;}
}

/* ---------- the phone hero ----------
   Last in the file on purpose. .hero-copy's padding is a shorthand set at
   the top of this file and .hero-meta's display comes with its own block
   further up; both load after styles.css, so the phone's version of the
   hero has to be written here to win.

   Three things down the middle: the mark, the line, the two buttons. The
   paragraph and the four disciplines are what the width cannot hold, so
   they go rather than shrink to nothing, and the line drops into the room
   they leave instead of sitting up against the mark. */
@media (max-width:620px){
  .hero-copy .hero-sub,
  .hero-meta{display:none;}
  .hero-copy{padding:76px 20px 0;}
  .hero-cta{margin-top:34px;}
  /* Room for two lines whichever phrase is showing: .flip-next is absolute, so
     an incoming phrase that wraps adds no height and used to come down over the
     buttons. With the paragraph gone there is nothing between them to absorb it. */
  .hero-title{min-height:2.2em;}
}