:root{
  --orange: #D9704E;
  --orange-dark: #C25F3F;
  --teal: #16B8A3;
  --navy: #1E2A38;
  --gray-bg: #F5F2EE;
  --text-gray: #5C6572;
  --white: #FFFFFF;
  --card-border: #ECE7E1;
}
*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: auto; }
body{
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{ font-family: 'Poppins', sans-serif; }
a{ text-decoration:none; color: inherit; }
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; }
img{ max-width:100%; display:block; }

/* ---------- NAV ---------- */

/* ---------- HERO ---------- */
.hero-stage{
  position: relative;
  overflow: hidden;
}
.hero-photo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hero-scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,27,36,.58), rgba(20,27,36,.72));
  pointer-events: none;
}
.hero-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .32;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero-orb.o1{ width:360px; height:360px; background:var(--orange); top:-140px; left:-100px; }
.hero-orb.o2{ width:300px; height:300px; background:var(--teal); bottom:-120px; right:-80px; }
.hero-bg-type{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family:'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(120px, 24vw, 380px);
  color: var(--navy);
  opacity: .045;
  letter-spacing: -4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
html.motion-on .hero-bg-type{ animation: heroBreathe 16s ease-in-out infinite; }
@keyframes heroBreathe{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1.05); }
}
.hero{
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 20px auto 0;
  padding: 40px 32px 60px;
  text-align:center;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.word-mask{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.word-mask .word{ display:inline-block; }
html.motion-on .word-mask .word{
  transform: translateY(115%);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
html.motion-on h1.in-view .word, html.motion-on h2.in-view .word, html.motion-on p.in-view .word{ transform: translateY(0); }
html.motion-on .reveal-card{
  opacity: 0;
  transform: scale(.8) rotateX(10deg) translateY(28px);
  filter: blur(10px);
  transition: opacity 1s cubic-bezier(.16,1,.3,1),
              transform 1.05s cubic-bezier(.16,1,.3,1),
              filter 1.05s cubic-bezier(.16,1,.3,1);
}
html.motion-on .reveal-card.in-view{ opacity: 1; transform: none; filter: blur(0); }
html.motion-on .reveal-fade{
  opacity: 0;
  transform: scale(.78) translateY(46px);
  filter: blur(14px);
  transition: opacity 1.15s cubic-bezier(.16,1,.3,1),
              transform 1.3s cubic-bezier(.22,1.32,.36,1),
              filter 1.15s cubic-bezier(.16,1,.3,1);
}
html.motion-on .reveal-fade.in-view{ opacity: 1; transform: none; filter: blur(0); }
html.motion-on .reveal-fade.leaving-up{
  opacity: 0;
  transform: scale(1.16) translateY(-30px);
  filter: blur(10px);
  transition: opacity .7s cubic-bezier(.65,0,.35,1),
              transform .8s cubic-bezier(.65,0,.35,1),
              filter .7s cubic-bezier(.65,0,.35,1);
}
.badge{
  display:inline-block;
  background: var(--orange);
  color: var(--white);
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1{
  font-size: 42px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
  max-width: 100%;
}
.hero h1 em{
  font-style: italic;
  color: var(--teal);
  font-weight: 700;
}
.hero p{
  margin-top: 18px;
  font-size: 17px;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- STATS ---------- */
.stats{
  max-width: 1180px;
  margin: 48px auto 0;
  padding: 0 32px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  perspective: 1200px;
}
.stat-card{
  background: var(--navy);
  border-radius: 20px;
  padding: 26px 22px;
  text-align:left;
  transform-style: preserve-3d;
}
.stat-card .num{
  font-family:'Poppins', sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--teal);
  display:block;
}
.stat-card .label{
  font-size: 13px;
  color: #C9CFD6;
  margin-top: 4px;
  display:block;
}

/* ---------- DEPARTMENT INTRO BAND ---------- */
.dept-section{
  max-width: 1180px;
  margin: 90px auto 0;
  padding: 0 32px;
}
.dept-section:first-of-type{ margin-top: 90px; }
.dept-head{
  position: relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 12px;
  margin-bottom: 34px;
  border-bottom: 2px solid var(--card-border);
  padding-bottom: 22px;
}
.dept-head::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-3px;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--teal));
  box-shadow: 0 0 16px rgba(217,112,78,.55);
  transform-origin: left center;
}
.dept-head::before{
  content:'';
  position:absolute;
  inset: -6px -6px auto -6px;
  height: calc(100% + 6px);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 48%, rgba(217,112,78,.35) 52%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
html.motion-on .dept-head::after{
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(.19,1,.22,1);
}
html.motion-on .dept-head.in-view::after{ transform: scaleX(1); }
html.motion-on .dept-head::before{ transition: transform 1s cubic-bezier(.65,0,.35,1); }
html.motion-on .dept-head.in-view::before{ transform: translateX(130%); }
.dept-head .dept-eyebrow{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
  display:block;
  margin-bottom: 6px;
}
.dept-head h2{
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
}
.dept-head h2 em{
  font-style: italic;
  color: var(--orange);
}
.dept-head p{
  color: var(--text-gray);
  font-size: 14px;
  max-width: 340px;
}

.team-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  perspective: 1200px;
}
.team-card{
  display:flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
  transform-style: preserve-3d;
}
.team-card:hover{
  box-shadow: 0 12px 28px rgba(31,42,55,0.08);
  transform: translateY(-2px);
}
html.motion-on .team-card.reveal-card{
  opacity: 0;
  filter: none;
  transform: translateX(-64px) scale(.96);
  -webkit-clip-path: inset(0 100% 0 0 round 20px);
  clip-path: inset(0 100% 0 0 round 20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1),
              -webkit-clip-path .8s cubic-bezier(.16,1,.3,1),
              clip-path .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.motion-on .team-card.reveal-card.slide-right{
  transform: translateX(64px) scale(.96);
  -webkit-clip-path: inset(0 0 0 100% round 20px);
  clip-path: inset(0 0 0 100% round 20px);
}
html.motion-on .team-card.reveal-card.in-view{
  opacity: 1;
  transform: none;
  -webkit-clip-path: inset(0 0 0 0 round 20px);
  clip-path: inset(0 0 0 0 round 20px);
}
html.motion-on .team-card:active{
  transition: transform .15s ease-out;
  transform: scale(0.97);
}
.avatar{
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 16px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--gray-bg);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card:hover .avatar{ transform: scale(1.08) rotate(-4deg); }
.team-card .info{ flex:1; }
.team-card .name{
  font-family:'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}
.team-card .role{
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  margin-top: 2px;
  margin-bottom: 8px;
}
.team-card .bio{
  font-size: 13.5px;
  color: var(--text-gray);
  line-height: 1.55;
}
.socials{
  display:flex;
  gap: 8px;
  margin-top: 12px;
}
.socials a{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid var(--card-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  color: var(--navy);
}
.socials a:hover{ border-color: var(--orange); color: var(--orange); }

/* ---------- CTA / GET STARTED ---------- */
.cta-section{
  max-width: 1180px;
  margin: 100px auto 100px;
  padding: 60px 32px;
  background: var(--gray-bg);
  border-radius: 28px;
}
.cta-inner{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  align-items:center;
}
.cta-visual{
  background-image: linear-gradient(135deg, rgba(217,112,78,.62), rgba(22,184,163,.62)), var(--cta-photo, none);
  background-size: 160% 160%, cover;
  background-position: 0% 50%, center;
  border-radius: 22px;
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--white);
  font-family:'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align:center;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  padding: 24px;
}
html.motion-on .cta-visual{ animation: ctaZoom 10s ease-in-out infinite; }
@keyframes ctaZoom{
  0%,100%{ background-position: 0% 50%, center; transform: scale(1); }
  50%{ background-position: 100% 50%, center; transform: scale(1.035); }
}
.cta-link{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size: 13px;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color: var(--teal);
  margin-bottom: 18px;
  display:inline-block;
  will-change: transform;
}
.cta-content h2{
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 26px;
  color: var(--navy);
}
.cta-content h2 em{ font-style: italic; color: var(--teal); }
.step{
  display:flex;
  gap: 18px;
  margin-bottom: 22px;
}
.step .step-num{
  font-family:'Poppins', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
  color: var(--orange);
  line-height:1;
}
.step h4{
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}
.step p{
  font-size: 13.5px;
  color: var(--text-gray);
}
.step p b{ color: var(--navy); }

/* ---------- SECTION TRANSITION DIVIDERS ---------- */
.section-divider{
  position: relative;
  height: 3px;
  max-width: 1180px;
  margin: 56px auto;
  background: linear-gradient(90deg, var(--orange), var(--teal));
  box-shadow: 0 0 22px rgba(22,184,163,.5);
  transform-origin: left center;
}
.section-divider::after{
  content:'';
  position:absolute;
  top:50%; left:0;
  width:10px; height:10px;
  margin-top:-5px;
  border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 18px 4px rgba(22,184,163,.7);
  opacity:0;
}
html.motion-on .section-divider{
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.19,1,.22,1);
}
html.motion-on .section-divider.in-view{ transform: scaleX(1); }
html.motion-on .section-divider::after{
  transition: left 1.4s cubic-bezier(.19,1,.22,1), opacity .3s ease;
}
html.motion-on .section-divider.in-view::after{ left: 100%; opacity: 1; }

/* ---------- PRELOADER ---------- */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .9s cubic-bezier(.7,0,.2,1);
}
#preloader.pre-hide{ transform: translateY(-100%); }
.pre-inner{ text-align: center; }
.pre-logo{
  display: inline-block;
  width: clamp(180px, 26vw, 320px);
  height: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
#preloader.pre-reveal .pre-logo{ opacity: 1; transform: translateY(0) scale(1); }
html.motion-off #preloader{ display: none !important; }

/* ---------- ZOOM TRANSITION ---------- */
/* .zoom-overlay{
  position: fixed;
  inset: 0;
  z-index: 700;
  background: linear-gradient(135deg, var(--orange), var(--teal));
  border-radius: 50%;
  transform: scale(0);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  pointer-events: none;
}
.zoom-overlay.zoom-in{
  transition: transform .55s cubic-bezier(.65,0,.35,1);
  transform: scale(3.2);
}
.zoom-overlay.zoom-out{
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  transform: scale(0);
}
html.motion-off .zoom-overlay{ display: none !important; } */

/* ---------- DEPARTMENT BACKGROUND GLOW ---------- */
.dept-section{ position: relative; }
.dept-glow{
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
@media (max-width: 680px){
  .dept-glow{ width: 200px; height: 200px; filter: blur(60px); opacity: .13; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: 1fr; }
  .cta-inner{ grid-template-columns: 1fr; }
  .cta-visual{ min-height: 180px; order: 2; }
}
@media (max-width: 680px){
  .hero h1{ font-size: 30px; }
  .hero-bg-type{ font-size: clamp(70px, 30vw, 160px); }
  .stats{ grid-template-columns: repeat(2,1fr); padding: 0 20px; }
  .dept-section, .cta-section{ padding-left: 20px; padding-right: 20px; }
}