:root{
  --navy:#0E2238; --midnight:#0A1A2B; --brass:#9A7536; --brass2:#B68A4E; --gold:#D8B274;
  --bg:#FFFFFF; --bg2:#F4F6F8; --ink:#22303A; --steel:#5E6B75; --mute:#8A959D; --line:#E3E7EB;
  --d:'Cinzel',serif; --v:'Cormorant Garamond',serif; --b:'Jost',sans-serif;
  --navh:66px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--b);font-weight:300;background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 34px}

.eyebrow{font-family:var(--b);font-weight:400;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:11px}
.eyebrow .st{width:12px;height:12px}
h2.h{font-family:var(--d);font-weight:600;font-size:clamp(25px,3.4vw,38px);letter-spacing:.01em;line-height:1.18;color:var(--navy);margin-top:18px}
.lead{font-family:var(--v);font-weight:400;font-size:clamp(19px,2.3vw,25px);line-height:1.45;color:var(--steel);margin-top:20px;max-width:46ch}
.p{font-size:15px;line-height:1.8;color:#46535d;margin-top:18px;max-width:60ch}
.p b{font-weight:400;color:var(--navy)}
section{position:relative}
.s{padding:clamp(72px,9vw,118px) 0}
.s.alt{background:var(--bg2)}

/* ---------------- NAV ---------------- */
/* default: transparent over the hero video; .scrolled restores the solid bar */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;height:var(--navh);display:flex;align-items:center;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.nav.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;gap:8px;width:100%;position:relative}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.nav .brand svg{width:30px;height:40px}
.brand .wm{font-family:var(--d);font-weight:600;font-size:16.5px;letter-spacing:.2em;color:var(--navy);transition:color .35s ease}
.menu{display:flex;align-items:center;gap:4px;list-style:none}
.navi{position:static}
.navlink{font-family:var(--b);font-weight:400;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);background:none;border:0;cursor:pointer;padding:12px 15px;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.navlink:hover{color:var(--brass)}
/* light treatment while the bar is transparent over the dark hero */
.nav:not(.scrolled) .brand .wm,.nav:not(.scrolled) .navlink{color:#fff}
.nav:not(.scrolled) .navlink:hover{color:var(--gold)}
.nav:not(.scrolled) .brand [fill="#0E2238"]{fill:#fff}
.nav:not(.scrolled) .brand [stroke="#0E2238"]{stroke:#fff}
.nav:not(.scrolled) .cta{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}
.nav:not(.scrolled) .cta:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.nav:not(.scrolled) .burger span{background:#fff}
.navlink .car{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s}
.cta{font-family:var(--b);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--navy);padding:11px 20px;border-radius:2px;margin-left:10px;border:1px solid transparent;transition:background .2s,border-color .35s ease,color .35s ease}
.cta:hover{background:#16314c}
/* mega dropdown */
.mega{position:absolute;top:100%;left:0;right:0;margin-top:0;background:#fff;border:1px solid var(--line);border-top:2px solid var(--brass2);box-shadow:0 28px 60px -28px rgba(14,34,56,.4);padding:34px 38px;display:grid;grid-template-columns:repeat(5,1fr);gap:26px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:70}
.has-drop:hover .mega,.has-drop:focus-within .mega{opacity:1;visibility:visible;transform:none}
.has-drop:hover .navlink .car{transform:rotate(225deg);margin-top:2px}
.mcol h4{font-family:var(--d);font-weight:600;font-size:11.5px;letter-spacing:.08em;color:var(--navy);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.mcol a{display:block;font-size:12.3px;line-height:1.5;color:var(--steel);padding:5px 0;transition:color .18s,padding-left .18s}
.mcol a:hover{color:var(--brass);padding-left:4px}
.burger{display:none;background:none;border:0;cursor:pointer;width:28px;height:20px;position:relative;margin-left:8px}
.burger span{position:absolute;left:0;right:0;height:1.5px;background:var(--navy);transition:.3s}
.burger span:nth-child(1){top:1px}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:17px}

/* ---------------- HERO ---------------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 60% 38%,#14304c 0%,#0E2238 55%,#081625 100%);margin-top:0}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
/* multi-layer veil: left→right legibility wash + top scrim under nav + bottom vignette */
.hero .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,19,33,.86) 0%,rgba(9,24,40,.64) 46%,rgba(8,22,37,.34) 78%,rgba(8,22,37,.22) 100%),linear-gradient(180deg,rgba(7,17,30,.55) 0%,rgba(7,17,30,0) 22%,rgba(7,17,30,0) 62%,rgba(6,15,26,.72) 100%)}
.hero .stars{position:absolute;inset:0;z-index:0}
.hero .stars i{position:absolute;background:#cdbfa0;border-radius:50%;opacity:.4}
.hero .wrap{width:100%}
.hero .hin{position:relative;z-index:2;width:100%;text-align:left;animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.hero .kick{font-family:var(--b);font-weight:400;font-size:12px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-family:var(--d);font-weight:600;font-size:clamp(34px,5.6vw,62px);letter-spacing:.01em;line-height:1.08;color:#fff;margin-top:22px;max-width:16ch}
.hero .sub{font-family:var(--v);font-style:italic;font-size:clamp(18px,2.2vw,23px);color:#d8e0e7;margin-top:22px;max-width:40ch}
.hero .btns{display:flex;gap:15px;flex-wrap:wrap;margin-top:38px}
.hbtn{font-family:var(--b);font-weight:400;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:2px;transition:.2s;display:inline-flex;align-items:center;gap:9px;border:1px solid transparent}
.hbtn.gold{background:var(--gold);color:var(--navy)}.hbtn.gold:hover{background:#e6c489}
.hbtn.ghost{border-color:rgba(255,255,255,.35);color:#fff}.hbtn.ghost:hover{border-color:var(--gold);color:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}
/* scroll cue */
.scrollcue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .5s}
.scrollcue.hide{opacity:0;pointer-events:none}
.scrollcue .sct{font-family:var(--b);font-weight:400;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(216,178,116,.85)}
.scrollcue .scl{width:1px;height:46px;background:linear-gradient(180deg,var(--gold),rgba(216,178,116,0));position:relative;overflow:hidden}
.scrollcue .scl::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--gold);animation:cuepulse 2.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cuepulse{0%{transform:translateY(-14px);opacity:0}30%{opacity:1}100%{transform:translateY(46px);opacity:0}}

/* strip */
.strip{background:var(--navy);color:#cdd6de;padding:18px 0}
.strip .row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-family:var(--b);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.strip .lab{color:var(--gold)}
.strip .b{color:#9fb0bd}
.strip .b::before{content:"·";color:var(--brass2);margin-right:24px}

/* welcome */
.welcome .lead{max-width:24ch;font-size:clamp(22px,3vw,33px);line-height:1.38;color:var(--navy)}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.card{background:#fff;border:1px solid var(--line);border-top:2px solid var(--brass2);padding:32px 28px 30px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(14,34,56,.34)}
.card .num{font-family:var(--d);font-weight:600;font-size:13px;color:var(--brass)}
.card .ct{font-family:var(--d);font-weight:600;font-size:18px;color:var(--navy);margin-top:9px;line-height:1.25}
.card .cd{font-size:13.5px;line-height:1.6;color:#5a6670;margin-top:13px}
.card .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--b);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:18px}
.card:hover .more{gap:11px}

/* technology (navy band) */
.tech{background:var(--navy);color:#fff}
.tech h2.h{color:#fff}.tech .lead{color:#dbe3ea;max-width:26ch}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.pl .ph{font-family:var(--d);font-weight:600;font-size:15px;color:#fff}
.pl .pln{width:24px;height:1px;background:var(--brass2);margin:13px 0}
.pl .pb{font-size:13.5px;line-height:1.65;color:#aebac4}
.techtag{margin-top:44px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.techtag .t{font-family:var(--b);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.techtag a{font-family:var(--b);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#c2ccd4;border-bottom:1px solid rgba(182,138,78,.4);padding-bottom:3px;transition:.2s}
.techtag a:hover{color:var(--gold);border-color:var(--gold)}

/* group */
.grp{margin-top:50px;display:flex;flex-direction:column;align-items:center}
.parent{border:1px solid var(--navy);padding:20px 56px;text-align:center}
.parent .nm{font-family:var(--d);font-weight:600;font-size:17px;letter-spacing:.14em;color:var(--navy)}
.parent .sb{font-family:var(--b);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);margin-top:6px}
.stem{width:1px;height:34px;background:var(--navy);opacity:.4}
.kids{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%;max-width:840px}
.kid{border-top:2px solid var(--brass2);padding:20px 4px 6px}
.kid .kn{font-family:var(--d);font-weight:600;font-size:15px;color:var(--navy)}
.kid .kr{font-family:var(--b);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:8px 0 10px}
.kid .kd{font-size:12.5px;line-height:1.6;color:#5a6670}

/* contact */
.contact{background:var(--navy);color:#fff;text-align:center}
.contact h2.h{color:#fff}
.contact .lead{color:#dbe3ea;margin:20px auto 0;max-width:50ch;font-style:normal}
.cbtns{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.cbtns .hbtn.ghost{border-color:rgba(255,255,255,.35)}
.contact .motto{font-family:var(--d);font-weight:500;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--brass2);margin-top:50px}

/* footer */
footer{background:var(--midnight);color:#fff;padding:64px 0 38px}
.frow{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fbrand{display:flex;align-items:center;gap:13px}
.fbrand .wm{font-family:var(--d);font-weight:600;font-size:16px;letter-spacing:.2em;color:#fff}
.fbrand .ch{font-family:var(--b);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass2);margin-top:5px}
.fnav{display:flex;gap:26px;flex-wrap:wrap}
.fnav a{font-family:var(--b);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#9fb0bd;transition:color .2s}
.fnav a:hover{color:var(--gold)}
.fbot{margin-top:42px;padding-top:22px;border-top:1px solid rgba(182,138,78,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--b);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5f7382}
.fbot .m{font-family:var(--d);letter-spacing:.3em;color:var(--brass2)}

.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.show{opacity:1;transform:none}

/* mobile */
.mobile{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);display:none;flex-direction:column;padding:90px 34px 40px;overflow-y:auto}
.mobile.open{display:flex}
.mobile a{font-family:var(--d);font-weight:500;font-size:16px;letter-spacing:.12em;color:var(--navy);padding:13px 0;border-bottom:1px solid var(--line)}
.mobile .mh{font-family:var(--b);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-top:22px;padding:8px 0}
.mobile .ms{font-family:var(--b);font-size:13px;letter-spacing:.04em;color:var(--steel);padding:7px 0 7px 14px;border:0}

@media(max-width:1000px){
  .menu,.cta{display:none}
  .burger{display:block}
  .cards{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr;gap:28px}
  .kids{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .cards{grid-template-columns:1fr}
  .kids{grid-template-columns:1fr}
  .frow{flex-direction:column;gap:26px}
  /* mobile: skip the 13MB autoplay — show the poster still + gradient instead */
  .hero{height:88vh;min-height:560px;background:linear-gradient(rgba(8,22,37,.32),rgba(8,22,37,.32)),radial-gradient(ellipse at 60% 38%,#14304c 0%,#0E2238 55%,#081625 100%),url('../assets/hero-poster.png');background-size:cover;background-position:center}
  .hero .hvid{display:none}
  .hero .veil{background:linear-gradient(180deg,rgba(8,22,37,.62) 0%,rgba(8,22,37,.34) 45%,rgba(6,15,26,.7) 100%)}
  .scrollcue{bottom:22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}