/* ============================================================
   HERO SHELL
============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  padding:150px 0px 50px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--navy);
}

/* soft indigo wash top-left (sits under the eclipses) */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(52% 62% at 12% 4%,  rgba(74,47,212,.55) 0%, rgba(74,47,212,0) 68%),
    radial-gradient(46% 55% at 96% 88%, rgba(54,42,116,.45) 0%, rgba(54,42,116,0) 70%);
  z-index:0;
  pointer-events:none;
}

/* ============================================================
   ECLIPSES  (exact Figma layer specs)
   Each stack is a 0×0 anchor point; circles centre on it.
============================================================ */
.ecl-stack{
  position:absolute;
  width:0; height:0;
  z-index:0;
  pointer-events:none;
}
/* centre point of the top-left rings — nudge these two lines to reposition */
.ecl-stack--top{ top:-2.5rem; left:2rem; }
/* centre point of the bottom/right rings (behind card + stats) */
.ecl-stack--bottom{ bottom:-4rem; right:4rem; }

.ecl{
  position:absolute; top:0; left:0;
  width:calc(var(--s) * var(--ecl-k));
  height:calc(var(--s) * var(--ecl-k));
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:breathe var(--bd,12s) ease-in-out infinite;
}
/* purple rings — radial #362A74 → rgba(102,79,218,.25), inset glow */
.ecl--p{
  opacity:.5;
  background:radial-gradient(50% 50% at 50% 50%, var(--purple-a) 0%, var(--purple-b) 100%);
  box-shadow:0 0 29.808px 0 rgba(255,255,255,.25) inset;
}
.ecl-stack--bottom .ecl--p{
  box-shadow:0 0 59.014px 0 rgba(255,255,255,.25) inset;
}
/* white core glow (×2 stacked, blurred) */
.ecl--w{
  opacity:.64;
  background:radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255,255,255,.25) 100%);
  box-shadow:0 0 29.808px 0 rgba(255,255,255,.25) inset;
  filter:blur(56px);
}
@keyframes breathe{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%    { transform:translate(-50%,-50%) scale(1.045); }
}

/* ============================================================
   CONTENT
============================================================ */
.hero .container-xxl{ position:relative; z-index:2; }

/* --- eyebrow badge --- */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  background:#fff; color:#12093f;
  border-radius:999px;
  padding:.3rem 1.15rem .3rem .3rem;
  font-size:18px; 
  font-weight:700;
  box-shadow:0 12px 30px rgba(4,0,32,.35);
}
.hero-eyebrow .tag{
  background:var(--red); color:#fff;
  border-radius:999px;
  padding:.38rem .85rem;
  font-size:16px; 
  font-weight:700; 
  letter-spacing:.08em;
  white-space:nowrap;
}

/* --- headings --- */
.hero h1{
  font-family:var(--font-display);
  font-weight:700;                     /* Figma spec */
  font-size:clamp(2.5rem, 5vw, 4rem);  /* caps at 64px per spec */
  line-height:1.3;                     /* 130% → 83.2px */
  color:var(--pu-insight-yellow);                 /* #FFC800 */
  margin:1.3rem 0 .35rem;
  text-box-trim:trim-both;             /* Figma "leading-trim: both" */
  text-box-edge:cap alphabetic;        /* Figma "text-edge: cap"     */
}
.hero-sub{
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;
  color:#fff;
  margin-bottom:1.15rem;
}
.hero-para{
  max-width:560px;
  color:#FFF;                          /* Figma spec */
  font-family:var(--font-body);        /* Figtree */
  font-size:16px;                      /* 16px */
  font-weight:400;
  line-height:1.35;                    /* 135% → 21.6px */
  margin-bottom:1.9rem;
}
.btn-apply-now{
  display: flex;
  align-items: center;
  color: #0F0445;
  text-align: center;
  font-family: Figtree;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 28px */
  font-family:var(--font-display);
  font-weight:700; font-size:1.02rem;
  color:#171034;
  background:var(--pu-insight-yellow);
  border-radius: 72px;
  border: 3px solid rgba(255, 255, 255, 0.40);
  padding:.85rem 2.15rem;
  transition:transform .25s var(--card-ease), box-shadow .25s var(--card-ease);
  text-decoration: none;
}
/* --- CTAs --- */
.btn-pu{
  color: #0F0445;
  text-align: center;
  font-family: Figtree;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 28px */
  font-family:var(--font-display);
  font-weight:700; font-size:1.02rem;
  color:#171034;
  background:var(--pu-insight-yellow);
  border-radius: 72px;
  border: 3px solid rgba(255, 255, 255, 0.40);
  padding:.85rem 2.15rem;
  transition:transform .25s var(--card-ease), box-shadow .25s var(--card-ease);
}
.btn-pu:hover{
  background:var(--pu-insight-yellow); color:#171034;
  border-color:rgba(255,255,255,.55);
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(255,200,0,.32);
}
.btn-ghost{
  font-family:var(--font-display);
  font-weight:700; 
  font-size:20px;
  color:#fff;
  background:transparent;
  border:2px solid rgba(255,255,255,.55);
  border-radius:72px;
  padding:.9rem 2.15rem;
  transition:all .25s var(--card-ease);
}
.btn-ghost:hover{
  color:#fff; border-color:#fff;
  background:rgba(255,255,255,.08);
  transform:translateY(-3px);
}

/* ============================================================
   STATS STRIP  (Figma: flex, 32px gap, 32/40 pad, 2px #FFF rules,
   gradient fading right)  → pages of 2 CROSS-FADE inside (slick)
============================================================ */
.stats{
  margin-top:2.6rem;
  width:min(400px,100%);                     /* Figma width — widen if labels wrap */
  padding:26px 40px;
  overflow:hidden;
}

/* pages built by JS; slick cross-fades them (fade:true) */
.stat-page{
  display:flex !important;      /* slick's .slick-slide sets display:block */
  align-items:flex-start;
  gap:32px;
}
.stat-page .stat:last-child{ border-right:0; padding-right:0; }
.stat{
  flex:0 0 auto;
  padding-right:32px;
  border-right:1.5px solid rgba(255,255,255,.35);
}
.stat b{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;
  line-height:1.1;
  color:#fff;
}
.stat span{
  display:block;
  font-size:14px;
  color:rgba(255,255,255,.75);
  max-width:140px;
  line-height:1.45;
  margin-top:.5rem;
}

/* ============================================================
   RIGHT VISUAL — person card, enquire pill, video card
============================================================ */
.hero-visual{ position:relative; z-index:2; }

.hero-card{
  position:relative;
  height:clamp(570px, 58vh, 560px);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(165deg,#f2eeff 0%, #d7cff6 48%, #b4a7e0 100%);
  box-shadow:0 40px 90px rgba(4,0,34,.55);
}

/* ============================================================
   HERO SLIDER (Slick) — fills the card, autoplay, drag/swipe,
   two-finger trackpad wheel handled in JS, custom yellow dots
============================================================ */
.hero-slider{ height:100%; cursor:grab; }
.hero-slider:active{ cursor:grabbing; }

/* full-height chain: card → slider → slick-list → slick-track → slide */
.hero-slider .slick-list,
.hero-slider .slick-track,
.hero-slider .slick-slide{ height:100%; }
.hero-slider .slick-slide > div{ height:100%; }   /* slick's inner wrapper, when present */

.hs-item{ height:100%; }
.hero-person{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  -webkit-user-drag:none; user-select:none;       /* let slick handle the drag */
}

/* hero slider carries NO dots — the single shared dot set is
   appended under the video card (see .hero-video .slick-dots) */

.btn-enquire{
  position:absolute;
  top:4rem; 
  right:-2.5rem;
  padding: 32px;
  border-radius: 32px;
  border: 2px solid rgba(255, 255, 255, 0.30);
  background: #FFC800;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.25);
  z-index:5;
  animation:floaty 4.5s ease-in-out infinite;
  color: #140B4B;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 28.6px */
  text-decoration: none;
}

@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-8px); }
}

/* --- video / media card --- */
.hero-video{
  position:absolute;
  left:-12.5rem; 
  bottom:-2rem;
  width:min(300px, 78%);
  z-index:6;
}
.hero-video-media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 60px rgba(5,0,40,.6);
  position:relative;
}
.hv-slide{
  height:168px;
  display:flex; align-items:flex-end;
  padding:.8rem .95rem;
  font-size:.72rem; font-weight:600;
  color:rgba(255,255,255,.9);
  letter-spacing:.04em; text-transform:uppercase;
}
/* placeholder gradient — swap for the real video thumbnail:
   <img src="..." class="w-100 h-100 object-fit-cover"> inside .hero-video-media */
.hv-1{ background:linear-gradient(200deg,#7a5a3a 0%, #3c2a1c 60%, #1c120c 100%); }

.hv-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  display:flex; 
	align-items:center;
	justify-content:center;
  cursor:pointer;
	z-index:5;
}
.hv-play::before{
  content:"";
  width:0; height:0;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
.hv-play::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  { transform:scale(.8); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* ============================================================
   ENTRANCE ANIMATION
============================================================ */
.stats.rise{
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%);
}
.rise{
  opacity:0;
  transform:translateY(28px);
  animation:riseIn .9s var(--card-ease) forwards;
  animation-delay:var(--d,0s);
  
}
@keyframes riseIn{
  to{ opacity:1; transform:translateY(0); }
}
.hero-visual.rise{ transform:translateY(38px) scale(.985); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1199.98px){
  .hero-video{ left:-1.5rem; }
}


/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ecl, .btn-enquire, .hv-play::after, .rise{ animation:none !important; }
  .rise{ opacity:1; transform:none; }
}
.hero-card .slick-dots{
	bottom:10px !important;
}
.hero-card .slick-dots li button:before{
	content:unset;
}
.hero-card .slick-dots li button{
	width: 8px !important;
	height: 6px !important;
	background:#fff;
	border-radius: 8px !important;
	opacity:1;
}
.hero-card .slick-dots li.slick-active button{
	width: 16px !important;
	height: 6px !important;
	background:#FFC800;
}

.hero-video-media {
    position: relative;
	overflow: hidden;
}

.hv-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
}

.hero-video-media.is-playing .hv-play {
    display: none;
}
.hero-video-player {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 768px){
	.hero-buttons-group-mobile{
		display:none !important;
	}
}
@media (max-width: 767px){
  :root{ --ecl-k:.62; }
	.hero{
		padding:100px 0px 50px;
	}
	.btn-enquire,.hero-video,.hero-eyebrow,.hero-buttons-group-dekstop{
		display:none !important;
	}
	.stats{
		width:100%;
	}
	.hero-visual{
		margin-top:40px;
	}
	.hero-card{
		height:400px;
	}
	.hero-buttons-group-mobile{
		position:relative;
		margin-top:40px;
		z-index:2;
	}
	.hero h1,.accred-h-accent,.accred-h{
		font-size:36px !important;
	}
	.hero-sub{
		font-size:24px;
		margin-top:20px;
	}
	.btn-apply-now,.btn-ghost{
		padding:10px 20px !important;
	}
	.accred-card-sub,.accred-card-title{
		font-size:18px;
	}
}
@media (max-width: 575px){
  :root{ --ecl-k:.45; }
	
}
@media (max-width: 376px){
  :root{ --ecl-k:.35; }
	
	.hero-card{
		height:320px;
	}
	.btn-apply-now,.btn-ghost{
		font-size:16px;
		padding:10px 20px !important;
	}
	.hero h1{
		font-size:32px;
	}
	.hero-sub{
		font-size:18px;
	}
	.hero-para{
		font-size:15px;
	}
	.accred-card-sub,.accred-card-title{
		font-size:15px;
	}
	.stats.rise{
		padding:15px !important;
	}
	.stat{
		padding-right:0px !important;
	}
	.stat span{
		font-size:12px !important;
		text-wrap:wrap;
	}
	.stat-page{
		gap:18px !important;
	}
  
}