:root{
  --ink:#182230;
  --muted:#607083;
  --navy:#0b1d2f;
  --steel:#28435c;
  --sky:#3b82a0;
  --signal:#d89b2b;
  --paper:#ffffff;
  --mist:#f4f7f8;
  --bluewash:#e8f1f4;
  --line:#d5dee5;
  --shadow:0 18px 46px rgba(15,35,52,.12);
  --radius:6px;
  --hero-photo:url('https://images.unsplash.com/photo-1529074963764-98f45c47344b?auto=format&fit=crop&w=1800&q=80');
  --page-photo:url('https://images.unsplash.com/photo-1540962351504-03099e0a754b?auto=format&fit=crop&w=1200&q=80');
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(90deg,rgba(11,29,47,.045) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(180deg,#f8fafb 0,#fff 340px);
  line-height:1.62;
  font-size:16px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(216,155,43,.08),transparent 22%,transparent 78%,rgba(59,130,160,.08));
  z-index:-1;
}

a{color:#1d6d86;text-underline-offset:3px}
a:hover{color:#0b1d2f}

h1,h2,h3,h4,.navbar-brand,.btn,.footer-title{
  letter-spacing:0;
}

h1,h2,h3{
  color:var(--navy);
  line-height:1.16;
  font-weight:820;
}

h1{font-size:clamp(1.9rem,3vw,2.55rem)}
h2{font-size:clamp(1.45rem,2.35vw,2.05rem)}
h3{font-size:1.05rem}
p{color:var(--muted)}

.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(7,21,35,.94);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 34px rgba(7,21,35,.16);
  backdrop-filter:blur(16px);
}

.navbar{padding:.65rem 0}
.navbar-brand img{height:40px;width:auto;border-radius:4px}
.navbar-toggler{border-color:rgba(255,255,255,.28)}

.nav-link{
  color:rgba(255,255,255,.78);
  font-size:.88rem;
  font-weight:740;
  padding:.6rem .55rem!important;
}

.nav-link:hover,.nav-link.active{color:#fff}
.nav-link.active{box-shadow:inset 0 -2px 0 var(--signal)}

.btn{
  border-radius:4px;
  font-size:.92rem;
  font-weight:820;
  padding:.62rem 1rem;
}

.btn-lg{
  font-size:1rem;
  padding:.78rem 1.15rem;
}

.btn-cta{
  background:var(--signal);
  border-color:var(--signal);
  color:#101820;
  box-shadow:0 10px 22px rgba(216,155,43,.25);
}

.btn-cta:hover{
  background:#bf8420;
  border-color:#bf8420;
  color:#101820;
}

.btn-main{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

.btn-main:hover{
  background:var(--steel);
  border-color:var(--steel);
  color:#fff;
}

.btn-outline-light{
  border-color:rgba(255,255,255,.68);
  color:#fff;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.75rem;
  color:#24566b;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}

.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--signal);
}

.hero{
  position:relative;
  min-height:clamp(560px,72vh,680px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(7,21,35,.92) 0%,rgba(7,21,35,.82) 43%,rgba(7,21,35,.12) 100%),
    var(--hero,var(--hero-photo)) center/cover no-repeat;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px) 0 0/84px 84px,
    linear-gradient(0deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/84px 84px;
  mask-image:linear-gradient(90deg,#000,transparent 72%);
}

.hero::after{
  content:"COMMERCIAL";
  position:absolute;
  right:-.2em;
  bottom:.18em;
  color:rgba(255,255,255,.08);
  font-size:clamp(3.4rem,12vw,9rem);
  font-weight:900;
  line-height:1;
}

.hero .container{position:relative;z-index:2}
.hero h1{max-width:760px;color:#fff;font-size:clamp(1.95rem,3vw,2.55rem)}
.hero .lead{max-width:690px;color:rgba(255,255,255,.82);font-size:1.08rem!important}

.hero-panel{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius);
  padding:22px;
  color:var(--ink);
  box-shadow:var(--shadow);
}

.hero-panel::before{
  content:"";
  display:block;
  height:130px;
  margin:-22px -22px 20px;
  background:
    linear-gradient(180deg,rgba(7,21,35,.08),rgba(7,21,35,.42)),
    var(--page-photo) center/cover no-repeat;
}

.hero-panel strong{
  display:block;
  color:var(--navy);
  font-size:1.42rem;
  line-height:1;
}

.hero-panel span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}

.hero-panel hr{border-color:var(--line);opacity:1}

.trust-strip{
  background:#0f2a40;
  color:rgba(255,255,255,.82);
  border-block:1px solid rgba(255,255,255,.1);
  font-size:.86rem;
  font-weight:760;
}

.trust-strip span{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.trust-strip span::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--signal);
  border-radius:50%;
}

.section{
  position:relative;
  padding:68px 0;
}

.section-alt{
  background:linear-gradient(180deg,var(--mist),#fff);
}

main>.section:first-child:not(.hero){
  overflow:hidden;
  padding:66px 0;
  background:
    linear-gradient(105deg,#f7fafb 0%,#eef5f7 48%,rgba(11,29,47,.08) 48%,rgba(11,29,47,.08) 100%);
  border-bottom:1px solid var(--line);
}

main>.section:first-child:not(.hero)::after{
  content:"";
  position:absolute;
  top:28px;
  right:max(24px,calc((100vw - 1140px)/2));
  width:min(38vw,430px);
  height:calc(100% - 56px);
  min-height:190px;
  background:
    linear-gradient(180deg,rgba(7,21,35,.05),rgba(7,21,35,.45)),
    var(--page-photo) center/cover no-repeat;
  clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);
  box-shadow:var(--shadow);
}

main>.section:first-child:not(.hero) .container{
  position:relative;
  z-index:2;
}

main>.section:first-child:not(.hero) h1,
main>.section:first-child:not(.hero) .lead{
  max-width:650px;
}

main>.section:first-child:not(.hero) .lead{
  font-size:1.05rem;
  color:#47586a;
}

.section-dark{
  overflow:hidden;
  background:
    linear-gradient(105deg,rgba(7,21,35,.96),rgba(15,42,64,.84)),
    var(--page-photo) center/cover no-repeat;
  color:#fff;
}

.section-dark::after{display:none}

main>.section.section-dark:first-child{
  background:
    linear-gradient(105deg,rgba(7,21,35,.96) 0%,rgba(7,21,35,.9) 42%,rgba(15,42,64,.64) 100%),
    var(--page-photo) center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.12);
}

main>.section.section-dark:first-child::after{
  display:block;
  opacity:.86;
}

main>.section.section-dark:first-child .container{
  position:relative;
  z-index:2;
}

.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:rgba(255,255,255,.78)}
.section-dark .eyebrow{color:#dcecf1}

.layout-ribbon{border-top:0}

label{color:#1b2734;font-weight:720}

.feature-card,
.post-card,
.stat-card,
.path-card,
.locator-panel,
.faq details{
  height:100%;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

.feature-card,.post-card,.path-card,.locator-panel{padding:24px}
.feature-card,.post-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.feature-card:hover,.post-card:hover{
  transform:translateY(-3px);
  border-color:#afc2cd;
  box-shadow:var(--shadow);
}

.feature-card h2,
.post-card h2{
  font-size:1.18rem;
}

.feature-card p:last-child,
.post-card p:last-child,
.path-card p:last-child{margin-bottom:0}

.stat-card{
  padding:20px;
  background:linear-gradient(180deg,#fff,#f7fafb);
  border-left:4px solid var(--signal);
}

.stat-card strong{
  display:block;
  color:var(--navy);
  font-size:1.55rem;
  line-height:1;
}

.stat-card span{color:var(--muted);font-size:.9rem}

.path-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.path-card{
  position:relative;
  overflow:hidden;
  padding:22px;
}

.path-card::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:58px;
  height:58px;
  background:linear-gradient(135deg,transparent 50%,rgba(216,155,43,.22) 50%);
}

.path-card span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:14px;
  background:#0f2a40;
  color:#fff;
  border-radius:4px;
  font-weight:900;
  font-size:.9rem;
}

.path-card h3{margin-bottom:.45rem}

.academy-band{
  background:
    linear-gradient(90deg,rgba(11,29,47,.035) 1px,transparent 1px) 0 0/44px 44px,
    #eef5f7;
  border-block:1px solid var(--line);
}

.split-band{
  position:relative;
  overflow:hidden;
  padding:42px 0;
  background:
    linear-gradient(105deg,rgba(11,29,47,.96),rgba(40,67,92,.88)),
    var(--page-photo) center/cover no-repeat;
  color:#fff;
}

.split-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(216,155,43,.2));
  pointer-events:none;
}

.split-band .container{position:relative;z-index:2}
.split-band h2{color:#fff;font-size:clamp(1.35rem,2vw,1.8rem)}
.split-band p{color:rgba(255,255,255,.78)}
.split-band .eyebrow{color:#e8f1f4}

.faq details{
  height:auto;
  padding:18px 20px;
  margin-bottom:12px;
}

.faq summary{
  cursor:pointer;
  color:var(--navy);
  font-weight:820;
}

.article-body{
  max-width:850px;
  padding:34px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.article-body h2{margin-top:1.9rem}

main>article.section:first-child{
  background:
    linear-gradient(105deg,rgba(247,250,251,.95),rgba(232,241,244,.9)),
    var(--page-photo) center/cover no-repeat;
  border-bottom:1px solid var(--line);
}

main>article.section:first-child::after{display:none}

main>article.section:first-child .article-body{
  max-width:820px;
  box-shadow:var(--shadow);
}

main.section{
  background:
    linear-gradient(180deg,#f7fafb,#fff 340px);
}

main.section>.container{
  max-width:900px;
  padding:34px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 12px 36px rgba(15,35,52,.08);
}

.site-footer{
  background:#071523;
  color:rgba(255,255,255,.72);
  padding:52px 0;
  border-top:4px solid var(--signal);
}

.site-footer img{height:44px;width:auto;border-radius:4px}
.site-footer p{color:rgba(255,255,255,.68)}
.site-footer a{
  display:block;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  margin:.38rem 0;
}

.site-footer a:hover{color:#fff;text-decoration:underline}

.footer-title{
  color:#fff;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mobile-cta{display:none}

@media(max-width:1199px){
  .nav-link{font-size:.92rem}
  .navbar-collapse{
    padding:1rem 0 .35rem;
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:.7rem;
  }
  .nav-link.active{box-shadow:none;color:#fff}
}

@media(max-width:991px){
  body{padding-bottom:76px}
  h1{font-size:2rem}
  .section{padding:52px 0}
  .hero{min-height:auto;padding:76px 0 58px}
  .hero::after{font-size:4rem;bottom:.1em}
  .hero-panel{margin-top:22px}
  .path-grid{grid-template-columns:1fr 1fr}
  main>.section:first-child:not(.hero){
    background:linear-gradient(180deg,#f7fafb,#eef5f7);
    padding-bottom:290px;
  }
  main>.section:first-child:not(.hero)::after{
    left:24px;
    right:24px;
    top:auto;
    bottom:32px;
    width:auto;
    height:220px;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  }
  .mobile-cta{
    display:block;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:1040;
  }
}

@media(max-width:575px){
  body{font-size:15px}
  h1{font-size:1.82rem}
  h2{font-size:1.35rem}
  .navbar-brand img{height:36px;max-width:210px}
  .btn-lg{font-size:.95rem}
  .hero{padding:58px 0 46px}
  .hero h1{font-size:1.9rem}
  .hero .lead{font-size:1rem!important}
  .path-grid{grid-template-columns:1fr}
  .feature-card,.post-card,.path-card,.locator-panel,.article-body{padding:20px}
  main>.section:first-child:not(.hero){padding-bottom:250px}
  main>.section:first-child:not(.hero)::after{height:190px}
  .split-band .btn{width:100%;margin-top:1rem}
}
