:root{
  --ink:#070c16; --ink2:#0d1526; --ink3:#16203a; --line:rgba(204,214,246,.14);
  --or:#ff7b00; --amb:#ffaa00; --tx:#e9edf5; --mut:#9aa6c2;
  --d:'Chakra Petch',sans-serif; --b:'Manrope',sans-serif; --m:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--ink);color:var(--tx);font:400 17px/1.6 var(--b);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.wrap{width:min(1200px,100% - 48px);margin:0 auto}
h1,h2,h3{font-family:var(--d);font-weight:600;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(32px,4.2vw,52px);max-width:16ch}
h3{font-size:21px}
.btn{display:inline-block;background:var(--or);color:#120800;font:700 15px var(--b);padding:15px 26px;border-radius:4px;text-decoration:none;border:0;transition:background .25s,transform .25s}
.btn:hover{background:var(--amb);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--or);box-shadow:inset 0 0 0 1.5px var(--or)}
.btn-ghost:hover{background:var(--or);color:#120800}
.link{color:var(--tx);text-decoration:none;font-weight:600;border-bottom:1px solid var(--or);padding-bottom:2px}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:28px;padding:14px 28px;transition:background .3s,backdrop-filter .3s}
.bar.on{background:rgba(7,12,22,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{font:700 18px/1 var(--d);display:flex;flex-direction:column}
.brand small{font:400 10px/1.4 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.bar-nav{display:flex;gap:24px;margin-left:auto}
.bar-nav a{text-decoration:none;font-size:14px;font-weight:600;color:var(--mut);transition:color .2s}
.bar-nav a:hover{color:var(--tx)}
.bar-ask{background:none;border:1.5px solid var(--or);color:var(--or);border-radius:4px;padding:8px 14px;font-weight:700;font-size:14px}
.bar-ask:hover{background:var(--or);color:#120800}

/* top */
.top{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.top-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.top-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,22,.92) 0%,rgba(7,12,22,.6) 45%,rgba(7,12,22,.15) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 40%)}
.top-shade::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.top-grid{position:relative;width:min(1200px,100% - 48px);margin:0 auto;padding:0 0 12vh}
.top-place{color:var(--or);margin-bottom:22px}
.top h1{font-size:clamp(44px,6.6vw,92px);max-width:13ch}
.top h1 em{font-style:normal;color:var(--or)}
.top-lede{max-width:46ch;margin:24px 0 34px;font-size:19px;color:#cfd6e6}
.top-act{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.top-cap{position:absolute;right:28px;bottom:24px;font-size:11px}

/* path (course finder) */
.path{padding:130px 0 110px;background:linear-gradient(180deg,var(--ink),var(--ink2))}
.path-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.path-head p{color:var(--mut);max-width:46ch}
.path-ui{display:grid;grid-template-columns:2fr 1fr;gap:36px;margin-bottom:28px}
.q{border:0;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;align-content:flex-start}
.q legend{margin-bottom:14px;width:100%}
.q button{background:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:12px 16px;font-weight:600;font-size:15px;text-align:left;transition:border-color .2s,background .2s,color .2s}
.q button:hover{border-color:rgba(255,123,0,.6)}
.q button[aria-pressed=true]{background:var(--or);border-color:var(--or);color:#120800}
.card{display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"top mods" "facts mods" "act mods";gap:28px 56px;background:var(--ink);border:1px solid var(--line);border-top:3px solid var(--or);border-radius:6px;padding:44px}
.card.swap{animation:swap .45s ease}
@keyframes swap{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
.card-top{grid-area:top}
.card-tag{color:var(--or);margin-bottom:12px}
.card h3{font-size:clamp(28px,3vw,38px);margin-bottom:14px}
.card-sum{color:#cfd6e6}
.card-facts{grid-area:facts;display:grid;grid-template-columns:repeat(3,auto);gap:20px;justify-content:start;border-top:1px solid var(--line);padding-top:22px}
.card-facts dd{font:600 22px/1.2 var(--d);margin-top:6px}
.card-mods{grid-area:mods}
.card-mods ol{list-style:none;counter-reset:m;margin-top:14px;columns:1}
.card-mods li{counter-increment:m;padding:9px 0 9px 44px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.card-mods li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;font:400 12px/2.1 var(--m);color:var(--or)}
.card-act{grid-area:act;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.card-note{color:var(--mut);font-size:14px;max-width:34ch}
.path-foot{margin-top:30px;color:var(--mut);max-width:72ch}
.path-foot strong{color:var(--tx)}

.card-mods li.more{counter-increment:none;padding-left:0;color:var(--mut);border-bottom:0}
.card-mods li.more::before{content:none}
.more-b{background:none;border:0;color:var(--or);font-weight:700;font-size:14px;padding:4px 0}
/* class */
.class{padding:120px 0 100px}
.class-lede{color:var(--mut);max-width:52ch;margin:18px 0 48px}
.reel{display:flex;gap:16px;overflow-x:auto;padding:0 24px 20px max(24px,calc((100vw - 1200px)/2));scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--or) transparent}
.r{flex:0 0 auto;height:440px;scroll-snap-align:start;position:relative}
.r img{height:100%;width:auto;object-fit:cover;border-radius:4px;filter:saturate(.92)}
.r-wide img{width:560px}
.r-tall img{width:300px}
.r:not(.r-wide):not(.r-tall) img{width:420px}
.r figcaption{margin-top:12px;display:flex;flex-direction:column;font-size:14px}
.r figcaption span{font:400 11px var(--m);color:var(--or);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.r{height:auto}.r img{height:440px}
.lab{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;margin-top:80px;padding-top:44px;border-top:1px solid var(--line)}
.lab h3{font-size:30px;margin-bottom:14px}
.lab p{color:#cfd6e6;max-width:52ch}
.lab-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;align-content:start;color:var(--tx)}
.lab-list li::before{content:"▸ ";color:var(--or)}

/* business */
.business{padding:120px 0;background:#0a1220;border-top:1px solid var(--line)}
.biz-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.biz-head p{color:var(--mut)}
.svc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.svc li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:26px 0;border-top:1px solid var(--line)}
.svc li .mono{color:var(--or);padding-top:4px}
.svc p{color:var(--mut);margin-top:8px;font-size:16px}
.proof{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;margin:80px 0 70px;align-items:center}
.proof-a img{border-radius:4px;max-height:540px;width:100%;object-fit:cover;object-position:center 40%}
.pr{padding:22px 0;border-bottom:1px solid var(--line)}
.pr:first-child{border-top:1px solid var(--line)}
.pr p{color:var(--mut);margin-top:6px}
.clients ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 28px;margin:16px 0 40px;font:500 20px/1.5 var(--d);color:#cfd6e6}

/* team */
.team{padding:120px 0}
.ppl{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-top:48px;align-items:start}
.p img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;filter:grayscale(.25)}
.p-lead img{aspect-ratio:1/1}
.p figcaption{margin-top:16px}
.p b{font:600 19px/1.25 var(--d);display:block}
.p .mono{color:var(--or);display:block;margin:4px 0 8px}
.p p{color:var(--mut);font-size:15px}

/* sponsor */
.sponsor{padding:110px 0;background:var(--or);color:#140900}
.sp{display:grid;grid-template-columns:1fr 1.2fr;gap:56px}
.sp p{margin-bottom:16px;font-size:18px;max-width:56ch}
.sponsor .btn-ghost{color:#140900;box-shadow:inset 0 0 0 1.5px #140900;margin-top:10px}
.sponsor .btn-ghost:hover{background:#140900;color:var(--or)}

/* footer */
.foot{padding:80px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot p{color:#cfd6e6;font-size:15px}
.foot .mono{margin-bottom:10px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--or)}
.foot-c{margin-top:60px;color:var(--mut);font-size:13px}

/* desk */
.desk-fab{position:fixed;right:22px;bottom:22px;z-index:50;display:flex;align-items:center;gap:8px;background:var(--ink3);border:1px solid rgba(255,123,0,.6);border-radius:40px;padding:8px 18px 8px 10px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.desk-fab:hover{border-color:var(--or)}
.desk{position:fixed;right:22px;bottom:22px;z-index:60;width:min(400px,calc(100vw - 24px));height:min(600px,calc(100svh - 110px));display:flex;flex-direction:column;background:var(--ink2);border:1px solid var(--line);border-top:3px solid var(--or);border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.desk[hidden]{display:none}
.desk-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.desk-head p{display:flex;flex-direction:column}
.desk-head b{font:600 18px var(--d)}
.desk-head button{background:none;border:0;font-size:28px;line-height:1;color:var(--mut)}
.desk-log{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.m{max-width:88%;padding:10px 14px;border-radius:8px;font-size:15px;line-height:1.5}
.m-o{background:var(--ink3);align-self:flex-start}
.m-u{background:var(--or);color:#120800;align-self:flex-end;font-weight:600}
.m a{color:var(--or);font-weight:700}
.desk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 10px}
.desk-chips button{background:none;border:1px solid var(--line);border-radius:4px;padding:6px 10px;font-size:13px;color:#cfd6e6}
.desk-chips button:hover{border-color:var(--or)}
.desk-in{display:flex;border-top:1px solid var(--line)}
.desk-in input{flex:1;min-width:0;background:none;border:0;padding:15px 18px;color:var(--tx);font:inherit;font-size:15px;outline:none}
.desk-in button{background:var(--or);border:0;color:#120800;font-weight:700;padding:0 20px}

/* phone */
@media (max-width:900px){
  .bar{padding:12px 16px;gap:12px}
  .bar-nav{display:none}
  .bar-ask{margin-left:auto}
  .wrap,.top-grid{width:calc(100% - 36px)}
  .top{align-items:flex-end}
  .top-film{object-position:30% center}
  .top-shade{background:linear-gradient(0deg,var(--ink) 8%,rgba(7,12,22,.78) 50%,rgba(7,12,22,.3) 100%)}
  .top-grid{padding-bottom:90px}
  .top-lede{font-size:17px}
  .top-cap{left:18px;right:auto;bottom:28px}
  .path{padding:90px 0 80px}
  .path-head,.biz-head,.lab,.sp,.proof{grid-template-columns:1fr;gap:20px}
  .path-ui{grid-template-columns:1fr;gap:24px}
  .q button{font-size:14px;padding:10px 12px}
  .card{grid-template-columns:1fr;grid-template-areas:"top" "facts" "act" "mods";padding:26px 20px;gap:22px}
  .card-facts{grid-template-columns:repeat(3,auto);gap:14px}
  .card-facts dd{font-size:17px}
  .class,.business,.team{padding:90px 0}
  .r img{height:300px}
  .r-wide img{width:380px}.r-tall img{width:210px}.r:not(.r-wide):not(.r-tall) img{width:290px}
  .reel{padding-left:18px}
  .svc{grid-template-columns:1fr}
  .proof{margin:56px 0}
  .proof-a img{max-height:380px}
  .clients ul{font-size:17px;gap:4px 18px}
  .ppl{grid-template-columns:1fr 1fr;gap:20px}
  .p-lead{grid-column:1/-1}
  .p-lead img{aspect-ratio:4/3;object-position:center 25%}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .desk-fab span{display:none}
  .desk-fab{padding:8px}
  .desk{right:12px;bottom:12px}
}