@font-face{
  font-family:'montserrat';
  src:url('assets/Montserrat-Regular.ttf') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
    --navy-deep:#000620;
    --navy-mid:#00164a;
    --navy-soft:#2c3d57;
    --gold:#00a8ff;
    --gold-soft:#e3c98a;
    --paper:aliceblue;
    --paper-dim:#eae5d8;
    --ink:#12182b;
    --slate:#5b6272;
    --white:#ffffff;

    --gem-ruby:#b23a48;
    --gem-emerald:#2f6f5e;
    --gem-sapphire:#b0bfdf;
    --gem-amethyst:#9988a4;
    --gem-citrine:#c17f2b;
    --gem-diamond:#b8c35e;

    --font-display:'montserrat' sans-serif;
   --font-logo:'montserrat' sans-serif;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:'JetBrains Mono', 'Courier New', monospace;

    --container:1180px;
    --radius:2px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}

  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--gold);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.12;
    letter-spacing:-0.01em;
  }

  /* ---------- Dot pattern helper ---------- */
  .dot-field{
    background-image:radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.4px);
    background-size:16px 16px;
  }
  .dot-field--dark{
    background-image:radial-gradient(rgba(14,27,56,0.14) 1.4px, transparent 1.4px);
  }

  /* ---------- Diamond mark ---------- */
  .mark{ display:inline-flex; width:26px; height:26px; }
  .mark svg{ width:100%; height:100%; }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

  /* ================= HEADER ================= */
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:20px 0;
    transition:background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
  }
  .site-header.is-scrolled{
    background:var(--navy-deep);
    backdrop-filter:blur(8px);
    padding:13px 0;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
  }
  .site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--white);
  }
  .field select{

background-color: var(--navy-deep) !important;
  }
  .brand .mark{ color:var(--gold); }
  .brand-text{
    font-family:var(--font-logo);
    font-size:15px;
    font-weight:600;
    letter-spacing:0.01em;
    line-height:1.2;
  }
  .brand-text span{
    display:block;
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.16em;
    color:var(--gold);
    font-weight:400;
    margin-top:2px;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:38px;
  }
  .nav-links a{
    color:var(--white);
    font-size:13.5px;
    letter-spacing:0.03em;
    font-weight:500;
    position:relative;
    padding:4px;
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:0;
    height:1px;
    background:var(--gold);
    transition:right 0.3s ease;
  }
  .nav-links a:hover::after{ right:0; }

  .nav-cta{
    background:var(--gold);
    color:var(--navy-deep) !important;
    padding:10px 20px;
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.09em;
    text-transform:uppercase;
    font-weight:500;
    border-radius:var(--radius);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .nav-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(201,162,75,0.35);
  }
  .nav-cta::after{ display:none; }

  .nav-toggle{
    display:none;
    width:26px; height:20px;
    position:relative;
    z-index:110;
  }
  .nav-toggle span{
    position:absolute; left:0; right:0; height:2px;
    background:var(--white);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-toggle span:nth-child(1){ top:0; }
  .nav-toggle span:nth-child(2){ top:9px; }
  .nav-toggle span:nth-child(3){ top:18px; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  /* ================= HERO ================= */
  .hero{
    position:relative;
    min-height:100vh;
    background:
      linear-gradient(180deg, rgba(14,27,56,0.2), rgba(14,27,56,0.86) 55%, var(--navy-deep) 100%),
      var(--navy-deep);
    color:var(--white);
    display:flex;
    align-items:center;
    padding-top:60px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.15) 1.4px, transparent 1.4px);
    background-size:18px 18px;
    opacity:0.55;
    mask-image:radial-gradient(circle at 78% 40%, black 0%, transparent 62%);
    -webkit-mask-image:radial-gradient(circle at 78% 40%, black 0%, transparent 62%);
  }
  .hero .container{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:48px;
    align-items:center;
  }
  .hero-eyebrow{ color:var(--gold); }
  .hero h1{
    font-size:clamp(38px, 5.4vw, 64px);
    color:var(--white);
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--gold);
  }
  .hero-lede{
    font-size:17px;
    color:rgba(255,255,255,0.78);
    max-width:480px;
    margin-bottom:34px;
  }
  .hero-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:46px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:500;
    border-radius:var(--radius);
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color .25s ease;
  }
  .btn-gold{
    background:var(--gold);
    color:var(--navy-deep);
  }
  .btn-gold:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(201,162,75,0.32);
  }
  .btn-ghost{
    border:1px solid rgba(255,255,255,0.35);
    color:var(--white);
  }
  .btn-ghost:hover{
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-2px);
  }

  .hero-stats{
    display:flex;
    gap:34px;
  }
  .hero-stats div{
    border-left:1px solid rgba(255,255,255,0.2);
    padding-left:16px;
  }
  .hero-stats strong{
    display:block;
    font-family:var(--font-display);
    font-size:26px;
    color:var(--gold);
  }
  .hero-stats span{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.6);
  }

  /* hero facet visual */
  .hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:440px;
  }
  .facet{
    position:absolute;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:linear-gradient(155deg, var(--navy-soft), var(--navy-mid));
    border:1px solid rgba(201,162,75,0.35);
  }
  .facet-1{ width:340px; height:390px; z-index:1; }
  .facet-2{
    width:220px; height:250px;
    top:-18px; right:-6px;
    background:linear-gradient(155deg, rgba(201,162,75,0.22), rgba(201,162,75,0.05));
    border-color:rgba(201,162,75,0.55);
    z-index:2;
    animation:float 7s ease-in-out infinite;
  }
  .facet-caption{
    position:relative;
    z-index:3;
    text-align:center;
    padding:0 30px;
  }
  .facet-caption .mark{ width:34px; height:34px; color:var(--gold); margin-bottom:14px; }
  .facet-caption p{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.7);
  }
  @keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }

  .scroll-cue{
    position:absolute;
    bottom:28px; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,0.55);
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .scroll-cue::after{
    content:"";
    width:1px; height:34px;
    background:linear-gradient(var(--gold), transparent);
    animation:scrollcue 1.8s ease-in-out infinite;
  }
  @keyframes scrollcue{
    0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
    40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
    60%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
    100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
  }

  /* ================= SECTION HEADS ================= */
  .section{ padding:50px 0; position:relative; }
  .section-head{
    max-width:640px;
    margin-bottom:60px;
  }
  .section-head h2{
    font-size:clamp(30px, 3.6vw, 44px);
    color:var(--navy-deep);
  }
  .section-head p{
    margin-top:16px;
    color:var(--slate);
    font-size:16px;
    max-width:520px;
  }

  /* ================= ABOUT ================= */
  .about{ background:var(--paper); }
  .about .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
  }
  .about-copy p{
    color:var(--slate);
    font-size:16px;
    margin-bottom:18px;
  }
  .about-copy p:first-of-type{
    font-family:var(--font-display);
    font-size:21px;
    font-style:italic;
    color:var(--navy-deep);
    line-height:1.5;
  }

  .about-facts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--paper-dim);
    border:1px solid var(--paper-dim);
  }
  .fact{
    background:var(--paper);
    padding:28px 24px;
    transition:background 0.3s ease;
  }
  .fact:hover{ background:var(--navy-deep); }
  .fact:hover .fact-num, .fact:hover .fact-label{ color:var(--white); }
  .fact:hover .fact-label{ color:rgba(255,255,255,0.6); }
  .fact-num{
    font-family:var(--font-display);
    font-size:34px;
    color:var(--navy-deep);
    transition:color 0.3s ease;
  }
  .fact-num span{ color:var(--gold); }
  .fact-label{
    margin-top:6px;
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:var(--slate);
    transition:color 0.3s ease;
  }

  /* ================= COURSES ================= */
  .courses{ background:var(--navy-deep); color:var(--white); }
  .courses .section-head h2{ color:var(--white); }
  .courses .section-head p{ color:rgba(255,255,255,0.6); }
  .courses .eyebrow{ color:var(--gold); }

  .course-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
  .course-card{
    background:var(--navy-mid);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .course-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 40px rgba(0,0,0,0.35);
    border-color:var(--gem);
  }
  .course-media{
    position:relative;
    aspect-ratio:4/3;
    background:var(--navy-soft);
    background-image:radial-gradient(rgba(255,255,255,0.09) 1.2px, transparent 1.2px);
    background-size:12px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .course-media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(1, 64, 136, 0.208), rgba(1,64,136,0.00));
  z-index:1;
  transition:opacity 0.4s ease;
}
.course-card:hover .course-media::before{
  opacity:0;
}
.course-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
  /* .course-media .facet-icon{
    position:relative;
    z-index:1;
    width:56px; height:56px;
    color:var(--gem);
    opacity:0.9;
  }
  .course-media .facet-icon svg{ width:100%; height:100%; }
  .course-media::after{
    content:"Photo coming soon";
    position:absolute;
    bottom:12px; left:14px;
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.45);
  } */
  .course-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0;
    height:3px;
    background:var(--gem);
  }
  .course-body{ padding:22px 24px 26px; }
  .course-tag{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gem);
    margin-bottom:8px;
    display:block;
  }
  .course-card h3{
    font-size:19px;
    color:var(--white);
    margin-bottom:10px;
    line-height:1.3;
  }
  .course-card p{
    font-size:14.5px;
    color:rgba(255,255,255,0.62);
    line-height:1.55;
  }

  /* course color assignments */
  .course-card[data-gem="ruby"]{ --gem:var(--gem-ruby); }
  .course-card[data-gem="emerald"]{ --gem:var(--gem-emerald); }
  .course-card[data-gem="sapphire"]{ --gem:var(--gem-sapphire); }
  .course-card[data-gem="amethyst"]{ --gem:var(--gem-amethyst); }
  .course-card[data-gem="citrine"]{ --gem:var(--gem-citrine); }
  .course-card[data-gem="diamond"]{ --gem:var(--gem-diamond); }

  .course-card.span-wide{ grid-column:span 1; }

  /* ================= CONTACT ================= */
  .contact{ background:var(--paper); }
  .contact .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
  .contact-info h2{
    font-size:clamp(30px, 3.6vw, 44px);
    color:var(--navy-deep);
    margin-bottom:18px;
  }
  .contact-info > p{
    color:var(--slate);
    margin-bottom:34px;
    max-width:420px;
  }
  .info-row{
    display:flex;
    gap:16px;
    padding:18px 0;
    border-top:1px solid var(--paper-dim);
  }
  .info-row:last-of-type{ border-bottom:1px solid var(--paper-dim); }
  .info-icon{
    width:22px; height:22px;
    color:var(--gold);
    flex-shrink:0;
    margin-top:2px;
  }
  .info-icon svg{ width:100%; height:100%; }
  .info-row h4{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--slate);
    margin-bottom:4px;
  }
  .info-row a, .info-row p{
    font-size:15.5px;
    color:var(--navy-deep);
    font-weight:500;
  }
  .info-row a:hover{ color:var(--gold); }

  .map-frame{
    margin-top:28px;
    border:1px solid var(--paper-dim);
    filter:grayscale(0.3) contrast(1.05);
    aspect-ratio:16/10;
  }
  .map-frame iframe{ width:100%; height:100%; border:0; display:block; }

  .contact-form{
    background:var(--navy-deep);
    color:var(--white);
    padding:44px;
    border-radius:var(--radius);
    position:relative;
    overflow:hidden;
  }
  .contact-form::before{
    content:"";
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.08) 1.2px, transparent 1.2px);
    background-size:16px 16px;
    pointer-events:none;
  }
  .contact-form > *{ position:relative; z-index:1; }
  .contact-form h3{
    font-size:22px;
    color:var(--white);
    margin-bottom:6px;
  }
  .contact-form .form-sub{
    font-size:13.5px;
    color:rgba(255,255,255,0.55);
    margin-bottom:28px;
  }
  .field{ margin-bottom:20px; }
  .field label{
    display:block;
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.55);
    margin-bottom:8px;
  }
  .field input, .field select, .field textarea{
    width:100%;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.18);
    color:var(--white);
    padding:13px 14px;
    font-family:var(--font-body);
    font-size:14.5px;
    border-radius:var(--radius);
    transition:border-color 0.25s ease, background 0.25s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(255,255,255,0.08);
  }
  .field textarea{ resize:vertical; min-height:100px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .form-submit{
    width:100%;
    justify-content:center;
    margin-top:6px;
  }
  .form-note{
    margin-top:16px;
    font-size:12px;
    color:rgba(255,255,255,0.42);
  }
  .form-success{
    display:none;
    align-items:center;
    gap:10px;
    margin-top:16px;
    padding:12px 14px;
    background:rgba(201,162,75,0.14);
    border:1px solid rgba(201,162,75,0.4);
    color:var(--gold);
    font-size:13px;
    border-radius:var(--radius);
  }
  .form-success.is-visible{ display:flex; }

  /* ================= FOOTER ================= */
  .site-footer{
    background:var(--navy-deep);
    border-top:1px solid rgba(255,255,255,0.08);
    padding:30px 0;
  }
  .site-footer .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,0.7);
    font-size:13px;
  }
  .footer-brand .mark{ width:18px; height:18px; color:var(--gold); }
  .site-footer small{
    color:rgba(255,255,255,0.35);
    font-size:12px;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 980px){
    .hero .container{ grid-template-columns:1fr; margin-bottom: 30px;}
    .hero-visual{ height:300px; order:-1; }
    .facet-1{ width:240px; height:280px; }
    .facet-2{ width:150px; height:170px; }
    .about .container{ grid-template-columns:1fr; gap: 10px;}
    .contact .container{ grid-template-columns:1fr; }
    .course-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  @media (max-width: 720px){
    .nav-links{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw, 320px);
      background:var(--navy-deep);
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      gap:28px;
      padding:40px;
      transform:translateX(100%);
      transition:transform 0.4s ease;
      z-index:105;
    }
    .nav-links.is-open{ transform:translateX(0); }
    .nav-toggle{ display:block; }
    .nav-links a{ font-size:16px; }
    .section{ padding:30px 0; }
    .hero-stats{ flex-wrap:wrap; row-gap:20px; }
    .course-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .about-facts{ grid-template-columns:1fr; }
    .contact-form{ padding:30px 24px; }
  }