:root{
  --green:#0b6f62;
  --green-dark:#07584f;
  --mint:#e9f9f5;
  --mint-2:#f5fcfa;
  --gold:#e3b35f;
  --gold-soft:#f7e5bd;
  --text:#18202b;
  --muted:#697384;
  --line:#e4ebe9;
  --white:#ffffff;
  --shadow:0 18px 50px rgba(21,64,58,.10);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Tajawal",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#fff;
  direction:rtl;
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.container{width:min(1440px,94%);margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(22,74,67,.08);
}
.header-inner{
  min-height:82px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:30px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:190px}
.brand-mark{
  width:52px;height:58px;position:relative;display:inline-block;
}
.brand-mark:before{
  content:"";position:absolute;inset:8px 13px 6px 8px;
  border-right:8px solid var(--green);
  border-bottom:8px solid var(--green);
  transform:skew(-16deg) rotate(-16deg);
  border-radius:4px 18px 6px 18px;
}
.brand-mark:after{
  content:"";position:absolute;width:9px;height:30px;right:4px;top:5px;
  background:var(--green);border-radius:99px;transform:rotate(28deg)
}
.brand-orbit{
  position:absolute;width:38px;height:18px;border:2px solid var(--green);
  border-left-color:transparent;border-bottom-color:transparent;
  border-radius:50%;left:2px;top:13px;transform:rotate(-20deg)
}
.brand-spark{
  position:absolute;width:6px;height:6px;border-radius:50%;background:var(--green);right:1px;top:2px
}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font-size:29px;font-weight:900;letter-spacing:-1px}
.brand-copy small{font-size:10px;letter-spacing:5px;color:#b58745;margin-top:5px}
.brand-copy em{font-size:9px;font-style:normal;color:#727a80;margin-top:8px;white-space:nowrap}

.main-nav{
  display:flex;justify-content:center;align-items:center;gap:28px;
  font-size:14px;font-weight:700;white-space:nowrap
}
.main-nav a{position:relative;padding:30px 0 26px}
.main-nav a:after{
  content:"";position:absolute;right:0;left:0;bottom:16px;height:2px;
  background:var(--green);transform:scaleX(0);transition:.25s
}
.main-nav a:hover,.main-nav a.active{color:var(--green)}
.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}

.header-actions{display:flex;gap:10px;direction:ltr}
.btn{
  border-radius:11px;
  min-height:46px;
  padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-small{min-height:44px;font-size:14px}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
.btn-green{background:linear-gradient(135deg,var(--green),var(--green-dark));color:white;box-shadow:0 10px 22px rgba(11,111,98,.16)}
.btn-gold{background:linear-gradient(135deg,#f4d68f,var(--gold));color:#4f3a16}
.btn-outline{background:#fff;border-color:#d9b875;color:#1e2830}
.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:8px}
.menu-toggle span{display:block;height:2px;background:var(--green);margin:6px;border-radius:9px}

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 20% 25%,rgba(70,199,176,.12),transparent 24%),
    linear-gradient(180deg,#fff 0%,#fbfefd 100%);
  border-bottom:1px solid var(--line);
}
.hero-grid{
  min-height:620px;
  display:grid;
  grid-template-columns:1fr 1.02fr;
  align-items:center;
  gap:18px;
  direction:rtl;
}
.hero-copy{padding:72px 4% 72px 0;position:relative;z-index:3;text-align:right}
.eyebrow{
  display:inline-flex;
  color:var(--green);
  background:#e8f7f3;
  padding:8px 13px;border-radius:999px;
  font-size:13px;font-weight:800;
  margin-bottom:16px
}
.hero h1{
  font-size:clamp(46px,5.4vw,82px);
  line-height:1.08;
  letter-spacing:-2.6px;
  margin:0 0 24px;
  font-weight:900;
}
.hero h1 span{color:var(--green)}
.hero-copy>p{
  max-width:660px;
  color:#4f5a67;
  font-size:19px;
  line-height:2;
  font-weight:500;
  margin:0 0 30px
}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.circle-arrow,.play-icon{
  width:27px;height:27px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);font-size:12px
}
.play-icon{background:#fff;border:1px solid #d7b678;color:#333}
.trust-row{
  display:flex;gap:0;align-items:center;flex-wrap:wrap;color:#4d5965;font-size:13px;font-weight:700
}
.trust-row div{padding:0 16px;border-left:1px solid #dbe5e2;display:flex;align-items:center;gap:8px}
.trust-row div:last-child{border-left:0;padding-right:0}
.mini-icon{color:var(--green);font-size:18px}

.hero-visual{
  height:620px;position:relative;overflow:hidden;
  align-self:stretch;
  background:linear-gradient(180deg,#f8fdfc 0%,#f3fbf9 100%);
}
.visual-glow{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(117,217,198,.22),rgba(117,217,198,.03) 60%,transparent 72%);
  left:4%;top:4%;
}
.orbit{
  position:absolute;border:1px solid rgba(23,151,132,.18);border-radius:50%;
  left:12%;top:12%;transform:rotate(-9deg)
}
.orbit-1{width:430px;height:430px}
.orbit-2{width:520px;height:520px;left:4%;top:5%}
.orbit-3{width:610px;height:610px;left:-5%;top:-1%;border-style:dashed}

.student-figure{position:absolute;left:8%;right:5%;bottom:0;height:500px}
.head{
  position:absolute;width:132px;height:160px;left:35%;top:28px;
}
.face{
  position:absolute;width:106px;height:129px;left:16px;top:22px;
  background:linear-gradient(145deg,#f2c19b,#d89469);
  border-radius:48% 52% 48% 44%;
  box-shadow:inset -10px -8px 0 rgba(112,61,31,.05)
}
.hair{
  position:absolute;z-index:2;width:118px;height:78px;left:6px;top:2px;
  background:#2a211f;border-radius:55% 50% 35% 58%;
  transform:rotate(-6deg);
}
.hair:after{
  content:"";position:absolute;width:72px;height:48px;right:-8px;top:28px;background:#2a211f;
  border-radius:20% 65% 30% 55%;transform:rotate(20deg)
}
.body{
  position:absolute;width:265px;height:278px;left:27%;top:155px;
  background:linear-gradient(160deg,#fff,#edf3f2);
  border-radius:55px 55px 14px 14px;
  border:1px solid #e5ecea;
  box-shadow:0 24px 50px rgba(21,63,57,.08)
}
.collar{
  position:absolute;top:10px;width:72px;height:58px;background:#f8faf9;
  border:1px solid #dfe7e5
}
.collar-r{right:54px;clip-path:polygon(0 0,100% 0,60% 100%)}
.collar-l{left:54px;clip-path:polygon(0 0,100% 0,40% 100%)}
.shirt-line{position:absolute;width:1px;height:160px;background:#e3e9e7;left:50%;top:78px}
.line-2{left:42%;height:1px;width:28px;top:129px}
.arm{
  position:absolute;width:170px;height:52px;background:linear-gradient(180deg,#f7faf9,#e9efed);
  left:15%;top:302px;border-radius:40px;transform:rotate(-13deg);border:1px solid #e0e8e6
}
.desk{
  position:absolute;left:0;right:0;bottom:0;height:118px;background:linear-gradient(180deg,#f4f4f0,#e8ebe8);
  border-top:1px solid #dce4e1;box-shadow:0 -12px 32px rgba(48,80,74,.05)
}
.laptop{position:absolute;left:47%;bottom:50px;width:210px;height:150px;z-index:4}
.screen{
  width:190px;height:122px;background:linear-gradient(155deg,#d6dddd,#aebdbb);
  border:7px solid #c6d0ce;border-radius:8px;transform:skew(-5deg)
}
.keyboard{
  width:210px;height:16px;background:#b9c4c1;border-radius:2px 2px 10px 10px;transform:skew(-16deg);margin-top:3px
}
.books{position:absolute;left:76%;bottom:64px;width:150px}
.books span{display:block;height:19px;margin-top:6px;border-radius:3px;background:#ece7d5;border:1px solid #d7cfb3}
.books span:nth-child(2){background:#d9ebe7}
.books span:nth-child(3){background:#f0dcc3}
.cup{
  position:absolute;left:7%;bottom:47px;width:56px;height:76px;background:#f8faf9;border:1px solid #d9e3e0;border-radius:8px 8px 13px 13px
}
.cup:after{content:"";position:absolute;right:-17px;top:17px;width:22px;height:28px;border:6px solid #d9e3e0;border-left:0;border-radius:0 18px 18px 0}

.float-card{
  position:absolute;z-index:8;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  padding:9px 13px;border-radius:14px;box-shadow:0 12px 32px rgba(18,88,77,.10);
  border:1px solid rgba(91,184,168,.2);
  display:flex;align-items:center;gap:8px;color:#176f62;font-size:12px
}
.float-card .icon{
  width:37px;height:37px;border-radius:50%;background:#ecfaf7;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900
}
.float-1{top:40px;left:38%}
.float-2{top:96px;left:7%}
.float-3{top:110px;right:8%}
.float-4{top:250px;left:2%}
.float-5{bottom:112px;left:0}

.feature-strip{padding:22px 0;background:#fff}
.feature-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px
}
.feature-card{
  min-height:104px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:15px;
  display:flex;align-items:center;gap:14px;box-shadow:0 8px 20px rgba(18,72,65,.04);
  transition:.2s
}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feature-icon{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:27px;font-weight:900;flex:0 0 auto
}
.icon-red{background:#fff0ee;color:#ff5b4b}
.icon-orange{background:#fff7e6;color:#e99c22}
.icon-green{background:#e9faf3;color:#21a477}
.icon-blue{background:#eef5ff;color:#4f83dc}
.icon-purple{background:#f5edff;color:#8d5bd8}
.feature-card h3{margin:0 0 5px;font-size:17px}
.feature-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.career-section{padding:48px 0 34px;background:#fff}
.section-heading{text-align:center;margin-bottom:28px}
.section-heading h2{font-size:30px;margin:0 0 8px;font-weight:900;color:#116d60}
.section-heading p{margin:0;color:var(--muted);font-size:15px}
.spark{color:var(--green);font-size:22px}
.career-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.career-card{
  background:#fff;border:1px solid #dfe8e5;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 25px rgba(31,79,72,.05);transition:.2s
}
.career-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.career-art{
  height:132px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;font-size:52px;font-weight:900;color:#fff
}
.career-art:before,.career-art:after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14)
}
.career-art:before{width:100px;height:100px;right:-18px;top:-26px}
.career-art:after{width:82px;height:82px;left:-22px;bottom:-30px}
.career-art span{position:relative;z-index:2}
.code-art{background:linear-gradient(135deg,#173d5a,#249a8c)}
.doctor-art{background:linear-gradient(135deg,#5d8fb8,#abcbd4)}
.data-art{background:linear-gradient(135deg,#174b66,#3fa7a1)}
.law-art{background:linear-gradient(135deg,#8a5d2a,#d3ad66)}
.engineer-art{background:linear-gradient(135deg,#8d7557,#c6a77b)}
.marketing-art{background:linear-gradient(135deg,#7763b6,#c676b3)}
.career-body{padding:12px 12px 13px;position:relative;min-height:99px}
.career-body h3{font-size:15px;margin:0 0 5px}
.career-body p{margin:0;color:var(--muted);font-size:11px;line-height:1.5;padding-left:44px}
.tag{
  position:absolute;left:10px;bottom:10px;background:#e8f8f2;color:#2d9b77;
  border-radius:8px;padding:4px 9px;font-size:10px;font-weight:800
}
.all-careers{
  width:max-content;margin:22px auto 0;border:1px solid #cfe1dc;color:var(--green);
  padding:10px 18px;border-radius:9px;display:flex;align-items:center;gap:10px;font-weight:800
}

.stats-band{padding:18px 0 40px}
.stats-grid{
  background:linear-gradient(180deg,#f3fbf9,#fff);
  border:1px solid #dfece8;border-radius:16px;
  display:grid;grid-template-columns:repeat(4,1fr);padding:22px 14px;
}
.stat{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 20px;border-left:1px solid #dce8e5}
.stat:last-child{border-left:0}
.stat-icon{font-size:27px;color:#d7a747;font-weight:900;min-width:38px;text-align:center}
.stat strong{display:block;color:#126c60;font-size:17px}
.stat small{display:block;color:#707d87;margin-top:4px;font-size:12px}

.journey{padding:70px 0;background:#f8fbfa}
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.journey-grid article{background:#fff;border:1px solid #e1ebe8;border-radius:18px;padding:26px;box-shadow:0 12px 28px rgba(24,77,70,.05)}
.journey-grid span{font-size:13px;font-weight:900;color:var(--green);background:#e9f8f4;padding:7px 10px;border-radius:999px}
.journey-grid h3{margin:20px 0 7px;font-size:20px}
.journey-grid p{margin:0;color:var(--muted);line-height:1.8}

.cta-section{padding:70px 0}
.cta-box{
  background:linear-gradient(135deg,#eef9f6,#fff8e8);
  border:1px solid #dce9e5;border-radius:26px;padding:36px 42px;
  display:flex;align-items:center;justify-content:space-between;gap:25px
}
.cta-box h2{font-size:32px;margin:3px 0 8px}
.cta-box p{margin:0;color:var(--muted)}

.footer{border-top:1px solid var(--line);background:#fff;padding:25px 0;color:#708078;font-size:13px}
.footer-inner{display:flex;justify-content:space-between;gap:20px}
.mobile-bottom-nav{display:none}

@media (max-width:1200px){
  .main-nav{gap:18px;font-size:13px}
  .header-actions .btn-gold{display:none}
  .hero-grid{grid-template-columns:1.02fr .98fr}
  .career-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:980px){
  body{padding-bottom:72px}
  .header-inner{grid-template-columns:auto 1fr auto;min-height:74px}
  .header-actions{display:none}
  .menu-toggle{display:block;justify-self:end}
  .brand{justify-self:start;min-width:auto}
  .brand-copy strong{font-size:24px}
  .brand-copy em{display:none}
  .main-nav{
    position:fixed;top:74px;right:14px;left:14px;
    background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:var(--shadow);padding:12px;
    display:none;flex-direction:column;gap:0;align-items:stretch
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 16px;border-bottom:1px solid #eef3f1}
  .main-nav a:last-child{border-bottom:0}
  .main-nav a:after{display:none}

  .hero-grid{display:flex;flex-direction:column;min-height:auto;gap:0}
  .hero-copy{order:1;width:100%;padding:38px 4% 28px;text-align:center}
  .hero-copy>p{margin-inline:auto;font-size:16px}
  .hero h1{font-size:clamp(40px,10vw,62px);letter-spacing:-1.8px}
  .hero-buttons,.trust-row{justify-content:center}
  .hero-visual{order:0;width:100%;height:470px}
  .visual-glow{left:50%;transform:translateX(-50%);width:500px;height:500px}
  .orbit-1{left:50%;transform:translateX(-50%);top:22px}
  .orbit-2{left:50%;transform:translateX(-50%);top:0}
  .orbit-3{display:none}
  .student-figure{left:12%;right:12%;height:425px}
  .float-1{left:44%;top:22px}
  .float-2{left:10%;top:75px}
  .float-3{right:10%;top:88px}
  .float-4{left:5%;top:210px}
  .float-5{left:4%;bottom:66px}

  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .feature-card:nth-child(n+4){grid-column:span 1}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0}
  .stat:nth-child(2){border-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid #dce8e5;padding-bottom:18px;margin-bottom:12px}
  .journey-grid{grid-template-columns:repeat(2,1fr)}

  .mobile-bottom-nav{
    position:fixed;z-index:1200;bottom:0;right:0;left:0;height:68px;background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);border-top:1px solid #dce6e3;
    display:grid;grid-template-columns:repeat(5,1fr);padding:6px 8px 8px;
  }
  .mobile-bottom-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font-size:10px;color:#5e6c69;font-weight:700
  }
  .mobile-bottom-nav a span{font-size:19px;line-height:1}
  .mobile-bottom-nav a.active{color:var(--green)}
}

@media (max-width:640px){
  .container{width:min(100% - 24px,1440px)}
  .site-header .container{width:100%;padding:0 14px}
  .brand-mark{width:42px;height:48px;transform:scale(.88)}
  .brand-copy strong{font-size:22px}
  .brand-copy small{font-size:8px}

  .hero{background:#fff}
  .hero-visual{height:385px;background:linear-gradient(180deg,#f7fcfb,#fff)}
  .student-figure{left:2%;right:0;height:345px}
  .head{transform:scale(.75);transform-origin:center bottom;left:32%;top:12px}
  .body{transform:scale(.78);transform-origin:center top;left:19%;top:128px}
  .arm{transform:scale(.75) rotate(-13deg);left:9%;top:250px}
  .desk{height:88px}
  .laptop{transform:scale(.72);transform-origin:left bottom;left:47%;bottom:38px}
  .books{transform:scale(.72);transform-origin:left bottom;left:72%;bottom:40px}
  .cup{transform:scale(.72);left:3%;bottom:32px}
  .orbit-1{width:330px;height:330px}
  .orbit-2{width:390px;height:390px}
  .float-card{padding:6px 8px;font-size:9px;border-radius:11px}
  .float-card .icon{width:28px;height:28px;font-size:14px}
  .float-1{left:43%;top:12px}
  .float-2{left:5%;top:56px}
  .float-3{right:3%;top:63px}
  .float-4{left:2%;top:175px}
  .float-5{left:1%;bottom:50px}

  .hero-copy{padding:22px 8px 24px}
  .eyebrow{font-size:11px}
  .hero h1{font-size:37px;line-height:1.18;margin-bottom:16px}
  .hero-copy>p{font-size:14px;line-height:1.85}
  .hero-buttons{display:grid;grid-template-columns:1fr;gap:10px}
  .btn-lg{width:100%;min-height:52px;font-size:14px}
  .trust-row{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0;margin-top:18px}
  .trust-row div{border-left:1px solid #dbe5e2;padding:0 8px;justify-content:center;text-align:center;font-size:9px;flex-direction:column}
  .trust-row div:last-child{border-left:0}

  .feature-strip{padding:14px 0 18px}
  .feature-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .feature-card{min-height:105px;padding:12px 7px;flex-direction:column;text-align:center;gap:7px}
  .feature-card:nth-child(n+4){display:none}
  .feature-icon{width:47px;height:47px;font-size:23px}
  .feature-card h3{font-size:12px;margin:0}
  .feature-card p{display:none}

  .career-section{padding-top:24px}
  .section-heading{margin-bottom:18px}
  .section-heading h2{font-size:23px}
  .section-heading p{font-size:12px;line-height:1.7;padding:0 10px}
  .career-grid{
    display:flex;overflow-x:auto;gap:10px;padding-bottom:8px;
    scroll-snap-type:x mandatory;scrollbar-width:none
  }
  .career-grid::-webkit-scrollbar{display:none}
  .career-card{min-width:220px;scroll-snap-align:start}
  .career-art{height:118px}
  .stats-band{padding-bottom:26px}
  .stats-grid{grid-template-columns:1fr;padding:10px 12px}
  .stat,.stat:nth-child(2){border-left:0;border-bottom:1px solid #dce8e5;margin:0;padding:13px 8px}
  .stat:last-child{border-bottom:0}
  .journey{padding:42px 0}
  .journey-grid{grid-template-columns:1fr}
  .cta-section{padding:38px 0}
  .cta-box{padding:26px 20px;flex-direction:column;text-align:center}
  .cta-box h2{font-size:25px}
  .footer{padding-bottom:84px}
  .footer-inner{flex-direction:column;text-align:center}
}


/* ===== V2: approved visual assets ===== */
.approved-visual{
  position:relative;
  height:620px;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  background:#f7fcfb;
  overflow:hidden;
  border-radius:0 0 0 2px;
}
.approved-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.career-photo{
  height:132px;
  background:#f3f8f7;
  overflow:hidden;
}
.career-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Hide the old CSS illustration internals if cached markup ever remains */
.approved-visual .visual-glow,
.approved-visual .orbit,
.approved-visual .student-figure,
.approved-visual .float-card{display:none!important}

@media (max-width:980px){
  .approved-visual{height:470px}
  .approved-visual img{
    object-fit:cover;
    object-position:center center;
  }
}
@media (max-width:640px){
  .approved-visual{
    height:350px;
    border-radius:0;
  }
  .approved-visual img{
    object-fit:cover;
    object-position:42% center;
  }
  .career-photo{height:118px}
}


/* ===== V3 REFERENCE MATCH — desktop scale + spacing ===== */
@media (min-width:981px){
  .container{width:min(1460px,94%)}
  .header-inner{min-height:74px;gap:24px}
  .brand{min-width:175px}
  .brand-mark{transform:scale(.88);transform-origin:center}
  .brand-copy strong{font-size:27px}
  .brand-copy small{font-size:9px}
  .brand-copy em{font-size:8px;margin-top:6px}
  .main-nav{gap:25px;font-size:13px}
  .main-nav a{padding:27px 0 23px}
  .main-nav a:after{bottom:13px}
  .btn-small{min-height:42px;padding-inline:18px}

  .hero-grid{
    min-height:430px;height:430px;
    grid-template-columns:50.5% 49.5%;
    gap:0;align-items:stretch
  }
  .hero-copy{
    padding:48px 5.2% 30px 4%;
    display:flex;flex-direction:column;
    justify-content:center;align-items:flex-start;
    text-align:right
  }
  .hero-copy .eyebrow{
    font-size:12px;padding:7px 12px;margin-bottom:12px
  }
  .hero h1{
    font-size:54px;line-height:1.12;
    letter-spacing:-1.8px;margin:0 0 18px
  }
  .hero-copy>p{
    max-width:610px;font-size:16px;
    line-height:1.9;margin:0 0 22px
  }
  .hero-buttons{gap:14px;margin-bottom:20px}
  .btn-lg{min-height:50px;padding:0 25px;font-size:14px}
  .trust-row{width:100%;font-size:11px}
  .trust-row div{padding:0 13px}
  .mini-icon{font-size:16px}

  .approved-visual{height:430px;background:#f4fbf9}
  .approved-visual img{
    width:100%;height:100%;
    object-fit:cover;object-position:center center
  }

  .feature-strip{padding:20px 0 14px}
  .feature-grid{gap:13px}
  .feature-card{
    min-height:90px;padding:14px 16px;border-radius:14px
  }
  .feature-icon{width:49px;height:49px;font-size:24px}
  .feature-card h3{font-size:15px;margin-bottom:4px}
  .feature-card p{font-size:12px}

  .career-section{padding:26px 0}
  .section-heading{margin-bottom:20px}
  .section-heading h2{font-size:25px;margin-bottom:5px}
  .section-heading p{font-size:13px}
  .career-photo{height:108px}
  .career-body{min-height:82px;padding:9px 10px 10px}
  .career-body h3{font-size:13px}
  .career-body p{font-size:10px}
  .tag{font-size:9px;padding:3px 8px}
  .all-careers{margin-top:16px;padding:8px 15px;font-size:13px}

  .stats-band{padding:10px 0 28px}
  .stats-grid{padding:16px 12px}
  .stat strong{font-size:15px}
  .stat small{font-size:11px}
}
@media (min-width:981px) and (max-width:1250px){
  .main-nav{gap:15px;font-size:12px}
  .hero h1{font-size:48px}
  .hero-copy>p{font-size:15px}
  .hero-copy{padding-right:4%}
}


/* =========================================================
   V4 — Interactive career paths behind the student
   ========================================================= */
.interactive-hero{
  isolation:isolate;
}
.interactive-hero > img{
  position:relative;
  z-index:1;
}
.career-motion-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:multiply;
}

/* orbital paths */
.motion-orbit{
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(11,111,98,.18);
  opacity:.85;
  transform-origin:center;
}
.orbit-a{
  width:62%;
  aspect-ratio:1/1;
  left:7%;
  top:-1%;
  border-right-style:dashed;
  animation:orbitDriftA 18s ease-in-out infinite alternate;
}
.orbit-b{
  width:76%;
  aspect-ratio:1/1;
  left:-2%;
  top:-10%;
  border-color:rgba(38,166,145,.14);
  border-left-style:dashed;
  animation:orbitDriftB 24s ease-in-out infinite alternate;
}
.orbit-c{
  width:92%;
  aspect-ratio:1/1;
  left:-13%;
  top:-22%;
  border-color:rgba(11,111,98,.10);
  border-top-style:dashed;
  animation:orbitDriftC 30s ease-in-out infinite alternate;
}

/* Moving dots. These travel around the hero in a gentle elliptical path */
.route-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#17a48d;
  box-shadow:
    0 0 0 5px rgba(23,164,141,.11),
    0 0 20px rgba(23,164,141,.22);
}
.route-dot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(23,164,141,.24);
  border-radius:50%;
  animation:dotPulse 2.4s ease-out infinite;
}
.route-dot-1{
  left:21%;
  top:23%;
  animation:routeFloat1 7s ease-in-out infinite alternate;
}
.route-dot-2{
  left:66%;
  top:29%;
  width:7px;height:7px;
  animation:routeFloat2 9s ease-in-out infinite alternate;
}
.route-dot-3{
  left:9%;
  top:55%;
  width:6px;height:6px;
  animation:routeFloat3 8s ease-in-out infinite alternate;
}
.route-dot-4{
  left:73%;
  top:57%;
  width:6px;height:6px;
  animation:routeFloat4 10s ease-in-out infinite alternate;
}

/* soft breathing rings around key route points */
.pulse-ring{
  position:absolute;
  width:34px;height:34px;
  border:1px solid rgba(11,111,98,.18);
  border-radius:50%;
  animation:pulseHalo 3.2s ease-out infinite;
}
.pulse-ring-1{left:17%;top:14%}
.pulse-ring-2{left:65%;top:16%;animation-delay:1s}
.pulse-ring-3{left:8%;top:43%;animation-delay:2s}

/* small, very subtle intelligence sparks */
.tiny-spark{
  position:absolute;
  color:rgba(11,111,98,.48);
  font-size:12px;
  filter:drop-shadow(0 3px 8px rgba(11,111,98,.12));
  animation:sparkFloat 4s ease-in-out infinite;
}
.spark-1{left:29%;top:11%}
.spark-2{left:75%;top:37%;animation-delay:1.4s}
.spark-3{left:14%;top:67%;animation-delay:2.6s}

/* Desktop hover adds only a hint of depth */
@media (hover:hover) and (pointer:fine){
  .interactive-hero{
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .interactive-hero:hover .motion-orbit{
    border-color:rgba(11,111,98,.24);
  }
  .interactive-hero:hover .route-dot{
    box-shadow:
      0 0 0 6px rgba(23,164,141,.12),
      0 0 26px rgba(23,164,141,.30);
  }
}

/* Animations */
@keyframes orbitDriftA{
  from{transform:rotate(-3deg) scale(1)}
  to{transform:rotate(4deg) scale(1.015)}
}
@keyframes orbitDriftB{
  from{transform:rotate(3deg) scale(1)}
  to{transform:rotate(-3deg) scale(1.02)}
}
@keyframes orbitDriftC{
  from{transform:rotate(-2deg)}
  to{transform:rotate(2deg)}
}
@keyframes dotPulse{
  0%{transform:scale(.65);opacity:.7}
  100%{transform:scale(1.7);opacity:0}
}
@keyframes routeFloat1{
  0%{transform:translate3d(0,0,0)}
  45%{transform:translate3d(22px,7px,0)}
  100%{transform:translate3d(43px,22px,0)}
}
@keyframes routeFloat2{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-18px,16px,0)}
  100%{transform:translate3d(-38px,4px,0)}
}
@keyframes routeFloat3{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(24px,-21px,0)}
}
@keyframes routeFloat4{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-31px,18px,0)}
}
@keyframes pulseHalo{
  0%{transform:scale(.55);opacity:.55}
  65%{opacity:.15}
  100%{transform:scale(1.45);opacity:0}
}
@keyframes sparkFloat{
  0%,100%{transform:translateY(0) scale(.92);opacity:.32}
  50%{transform:translateY(-8px) scale(1.05);opacity:.7}
}

/* Accessibility: respect reduced-motion setting */
@media (prefers-reduced-motion: reduce){
  .motion-orbit,
  .route-dot,
  .route-dot::after,
  .pulse-ring,
  .tiny-spark{
    animation:none!important;
  }
}

/* Mobile: keep animation lightweight */
@media (max-width:640px){
  .career-motion-layer{opacity:.72}
  .orbit-c{display:none}
  .route-dot-4,.spark-3{display:none}
  .route-dot{transform:scale(.8)}
}


/* =========================================================
   V5 — Interactive hotspots over approved hero image
   ========================================================= */
.career-hotspots{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.career-hotspot{
  position:absolute;
  width:48px;
  height:48px;
  border-radius:50%;
  pointer-events:auto;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}

.hotspot-ring{
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1.5px solid rgba(11,111,98,.28);
  background:rgba(255,255,255,.06);
  box-shadow:
    0 0 0 0 rgba(11,111,98,.16),
    inset 0 0 0 1px rgba(255,255,255,.45);
  opacity:.55;
  transition:
    transform .22s ease,
    opacity .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.hotspot-ring::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#0b8f7c;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(11,143,124,.10);
}

.hotspot-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translate(-50%,8px);
  background:rgba(20,32,38,.92);
  color:#fff;
  border-radius:8px;
  padding:7px 10px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(20,32,38,.18);
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
}

.hotspot-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:rgba(20,32,38,.92);
}

.career-hotspot:hover .hotspot-ring,
.career-hotspot:focus-visible .hotspot-ring,
.career-hotspot.is-active .hotspot-ring{
  transform:scale(1.13);
  opacity:1;
  background:rgba(255,255,255,.18);
  box-shadow:
    0 0 0 7px rgba(11,111,98,.08),
    0 0 22px rgba(11,111,98,.18);
}

.career-hotspot:hover .hotspot-tooltip,
.career-hotspot:focus-visible .hotspot-tooltip,
.career-hotspot.is-active .hotspot-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

/* Approximate positions matching the approved hero visual */
.hs-interests{left:18.2%;top:13.5%}
.hs-abilities{left:45.6%;top:7.5%}
.hs-careers{left:72.6%;top:19.5%}
.hs-games{left:8.5%;top:47.5%}
.hs-plan{left:8.2%;top:72.2%}

.page-anchor{
  display:block;
  position:relative;
  top:-90px;
  visibility:hidden;
}

/* gentle attention cue, staggered */
.career-hotspot .hotspot-ring{
  animation:hotspotBreath 4.4s ease-in-out infinite;
}
.hs-abilities .hotspot-ring{animation-delay:.8s}
.hs-careers .hotspot-ring{animation-delay:1.6s}
.hs-games .hotspot-ring{animation-delay:2.4s}
.hs-plan .hotspot-ring{animation-delay:3.2s}

@keyframes hotspotBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(11,111,98,.11);opacity:.48}
  50%{box-shadow:0 0 0 8px rgba(11,111,98,0);opacity:.78}
}

/* Keep the hotspots usable and unobtrusive on mobile */
@media (max-width:980px){
  .career-hotspot{width:42px;height:42px}
  .hotspot-tooltip{font-size:10px;padding:6px 8px}
}
@media (max-width:640px){
  .career-hotspot{width:36px;height:36px}
  .hotspot-ring{inset:3px}
  .hotspot-tooltip{
    bottom:calc(100% + 6px);
    font-size:9px;
    padding:5px 7px;
  }

  .hs-interests{left:16.5%;top:14%}
  .hs-abilities{left:45%;top:8%}
  .hs-careers{left:73%;top:20%}
  .hs-games{left:7%;top:47%}
  .hs-plan{left:6.5%;top:71%}
}

@media (prefers-reduced-motion: reduce){
  .career-hotspot .hotspot-ring{animation:none!important}
}


/* =========================================================
   V7 — STUDENT ONLY HERO
   Only replaces the left-side visual in the hero.
   No orbit lines, no hotspots, no extra icons.
   ========================================================= */

.student-only-hero{
  position:relative;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 46% 42%, rgba(227,248,244,.55) 0%, rgba(247,252,251,.45) 46%, #ffffff 78%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.student-only-hero .student-only-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  margin:0;
  padding:0;
}

/* Kill all previous overlay systems if browser cache keeps any old class rules */
.student-only-hero .career-motion-layer,
.student-only-hero .career-hotspots,
.student-only-hero .clean-orbit-overlay,
.student-only-hero .career-orbits,
.student-only-hero .career-icon-layer{
  display:none !important;
}

@media (min-width:981px){
  .student-only-hero{
    height:430px;
  }
  .student-only-hero .student-only-image{
    object-fit:cover;
    object-position:center 52%;
  }
}

@media (max-width:980px){
  .student-only-hero{
    height:470px;
  }
  .student-only-hero .student-only-image{
    object-fit:cover;
    object-position:center 50%;
  }
}

@media (max-width:640px){
  .student-only-hero{
    height:350px;
  }
  .student-only-hero .student-only-image{
    object-fit:cover;
    object-position:44% 50%;
  }
}


/* =========================================================
   V8 — CAREER ORBITS
   Scoped only to the left hero visual.
   ========================================================= */

.career-orbit-hero{
  position:relative;
  overflow:hidden !important;
  isolation:isolate;
}

/* Keep the student exactly where V7 placed him */
.career-orbit-hero .student-only-image{
  position:relative;
  z-index:1;
}

/* All paths/icons live inside this isolated overlay */
.career-orbit-system{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}

.career-orbit-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

.career-route{
  fill:none;
  stroke:url(#orbitStrokeA);
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.route-main{
  stroke-width:1.35;
}

.route-dashed{
  stroke-width:1.05;
  stroke-dasharray:5 6;
  opacity:.78;
}

.route-soft{
  stroke-width:1;
  stroke-dasharray:3 5;
  opacity:.56;
}

.route-inner{
  stroke-width:.9;
  opacity:.32;
}

.route-node{
  fill:#0b9380;
  stroke:#effdfa;
  stroke-width:3.5;
  filter:url(#orbitGlow);
}

.route-node-gold{
  fill:#e8b847;
}

.route-runner{
  fill:#13a08d;
  stroke:#fff;
  stroke-width:2.3;
  filter:url(#orbitGlow);
}

.route-runner-gold{
  fill:#e8b847;
}

.career-orbit-actions{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.career-orbit-actions .orbit-action{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  text-decoration:none;
  color:#0b786b;
  -webkit-tap-highlight-color:transparent;
}

.career-orbit-actions .orbit-icon{
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(10,128,111,.14);
  box-shadow:
    0 10px 24px rgba(14,83,74,.10),
    0 0 0 6px rgba(255,255,255,.50);
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

.career-orbit-actions .orbit-icon svg{
  width:33px;
  height:33px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.career-orbit-actions .orbit-label{
  margin-top:7px;
  min-height:24px;
  padding:5px 10px 4px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.98);
  color:#0a6c60;
  border:1px solid rgba(10,128,111,.08);
  box-shadow:0 6px 16px rgba(14,83,74,.07);
  font-size:10.5px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

/* Measured positions around the current student */
.orbit-interests{left:20%;top:24%}
.orbit-abilities{left:47%;top:13%}
.orbit-careers{left:74%;top:26%}
.orbit-games{left:9%;top:51%}
.orbit-learning{left:83%;top:57%}
.orbit-plan{left:9%;top:76%}

.career-orbit-actions .orbit-action:hover .orbit-icon,
.career-orbit-actions .orbit-action:focus-visible .orbit-icon{
  transform:translateY(-3px) scale(1.06);
  background:#fff;
  box-shadow:
    0 15px 28px rgba(14,83,74,.14),
    0 0 0 9px rgba(217,248,242,.74);
}

/* Each icon breathes vertically but never leaves its station */
.career-orbit-actions .orbit-icon{
  animation:orbitIconFloat 5.4s ease-in-out infinite;
}
.orbit-abilities .orbit-icon{animation-delay:.7s}
.orbit-careers .orbit-icon{animation-delay:1.4s}
.orbit-games .orbit-icon{animation-delay:2.1s}
.orbit-learning .orbit-icon{animation-delay:2.8s}
.orbit-plan .orbit-icon{animation-delay:3.5s}

@keyframes orbitIconFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}

@media (max-width:980px){
  .career-orbit-actions .orbit-icon{
    width:55px;
    height:55px;
  }

  .career-orbit-actions .orbit-icon svg{
    width:29px;
    height:29px;
  }

  .career-orbit-actions .orbit-label{
    font-size:9.5px;
    padding:4px 8px;
  }
}

@media (max-width:640px){
  .career-orbit-actions .orbit-icon{
    width:44px;
    height:44px;
    box-shadow:
      0 7px 16px rgba(14,83,74,.09),
      0 0 0 4px rgba(255,255,255,.50);
  }

  .career-orbit-actions .orbit-icon svg{
    width:24px;
    height:24px;
  }

  .career-orbit-actions .orbit-label{
    font-size:8px;
    padding:4px 6px;
    margin-top:4px;
  }

  .orbit-interests{left:18%;top:24%}
  .orbit-abilities{left:47%;top:14%}
  .orbit-careers{left:77%;top:28%}
  .orbit-games{left:9%;top:52%}
  .orbit-learning{display:none}
  .orbit-plan{left:9%;top:76%}
}

@media (prefers-reduced-motion:reduce){
  .career-orbit-actions .orbit-icon{
    animation:none !important;
  }
}


/* =========================================================
   V9 — FEATHERED STUDENT + VISIBLE ORBITS
   Only affects the LEFT hero visual.
   ========================================================= */

.career-orbit-hero{
  position:relative;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 40% 42%, rgba(224,248,243,.72) 0%, rgba(241,251,248,.46) 34%, rgba(255,255,255,1) 78%),
    linear-gradient(180deg,#fbfefd 0%,#ffffff 100%) !important;
}

/* Blend the rectangular student image into the hero background */
.career-orbit-hero .student-only-image{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 52% !important;
  z-index:1 !important;

  /* feather / vignette mask */
  -webkit-mask-image:
    radial-gradient(ellipse 88% 98% at 45% 54%,
      #000 0%,
      #000 58%,
      rgba(0,0,0,.94) 66%,
      rgba(0,0,0,.72) 76%,
      rgba(0,0,0,.35) 88%,
      transparent 100%);
  mask-image:
    radial-gradient(ellipse 88% 98% at 45% 54%,
      #000 0%,
      #000 58%,
      rgba(0,0,0,.94) 66%,
      rgba(0,0,0,.72) 76%,
      rgba(0,0,0,.35) 88%,
      transparent 100%);
}

/* add a soft white fade specifically on the hard outer edges */
.career-orbit-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.18) 7%,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,0) 78%,
      rgba(255,255,255,.34) 91%,
      rgba(255,255,255,.86) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 84%,
      rgba(255,255,255,.44) 100%);
}

/* Ensure orbit system is ABOVE the feathered image */
.career-orbit-system{
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  overflow:hidden !important;
  pointer-events:none;
}

/* Increase path visibility slightly while keeping it elegant */
.career-route{
  stroke:url(#orbitStrokeA) !important;
  opacity:1 !important;
}

.route-main{
  stroke-width:1.8 !important;
}

.route-dashed{
  stroke-width:1.25 !important;
  opacity:.88 !important;
}

.route-soft{
  stroke-width:1.15 !important;
  opacity:.70 !important;
}

.route-inner{
  stroke-width:1 !important;
  opacity:.48 !important;
}

/* clearer nodes */
.route-node{
  stroke-width:4 !important;
  filter:url(#orbitGlow);
}

.route-runner{
  stroke-width:2.6 !important;
}

/* bring action icons clearly in front */
.career-orbit-actions{
  z-index:5 !important;
}

.career-orbit-actions .orbit-action{
  z-index:6;
}

.career-orbit-actions .orbit-icon{
  background:rgba(255,255,255,.98) !important;
  box-shadow:
    0 12px 26px rgba(14,83,74,.12),
    0 0 0 7px rgba(235,252,248,.78) !important;
}

/* slightly reposition so they sit around the student, not on top of him */
.orbit-interests{left:17% !important;top:23% !important}
.orbit-abilities{left:45% !important;top:12% !important}
.orbit-careers{left:77% !important;top:24% !important}
.orbit-games{left:8% !important;top:49% !important}
.orbit-learning{left:84% !important;top:54% !important}
.orbit-plan{left:8% !important;top:73% !important}

@media (max-width:980px){
  .career-orbit-hero .student-only-image{
    object-position:center 50% !important;
  }
}

@media (max-width:640px){
  .career-orbit-hero .student-only-image{
    object-position:44% 50% !important;
    -webkit-mask-image:
      radial-gradient(ellipse 95% 98% at 45% 54%,
        #000 0%,
        #000 62%,
        rgba(0,0,0,.78) 80%,
        rgba(0,0,0,.28) 92%,
        transparent 100%);
    mask-image:
      radial-gradient(ellipse 95% 98% at 45% 54%,
        #000 0%,
        #000 62%,
        rgba(0,0,0,.78) 80%,
        rgba(0,0,0,.28) 92%,
        transparent 100%);
  }
}