:root {
  color-scheme:light;
  --paper:#faf9f7;
  --ink:#080d16;
  --muted:#6f7b92;
  --blue:#315fae;
  --line:#d8d9dc;
  --gutter:clamp(24px,3.8vw,72px);
  --support-font-size:16px;
}

* {
  box-sizing:border-box;
}

html {
  background:var(--paper);
}

body {
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 77% 45%,#eeece8 0%,#f8f7f5 35%,var(--paper) 65%);
  min-width:320px;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:6px;
}

.site-header {
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:5;
}

.header-inner {
  max-width:1920px;
  margin:auto;
  min-height:76px;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand {
  display:flex;
  align-items:baseline;
  gap:18px;
  white-space:nowrap;
}

.brand-name {
  font-size:28px;
  font-weight:600;
  letter-spacing:-1.4px;
}


.brand-signature {
  font-size:var(--support-font-size);
  font-weight:400;
  letter-spacing:normal;
  line-height:1.65;
  color:var(--muted);
}

.navigation {
  display:flex;
  gap:34px;
  align-items:center;
}

.navigation button {
  position:relative;
  padding:12px 0;
  border:0;
  background:none;
  font-size:14px;
  transition:color .2s;
  isolation:isolate;
  --glow-low:0 0 5px 1px rgb(49 111 214 / 12%),0 0 12px 2px rgb(49 111 214 / 6%);
  --glow-high:0 0 12px 2px rgb(49 111 214 / 35%),0 0 25px 4px rgb(49 111 214 / 22%);
}

/* Size the halo to the label, independently of the full-width mobile tap target. */
.navigation-label {
  display:inline-block;
  position:relative;
  isolation:isolate;
}

.navigation-label::before {
  content:"";
  position:absolute;
  inset:-7px -10px;
  border-radius:8px;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  background:rgb(49 111 214 / 16%);
  box-shadow:var(--glow-low);
  transition:opacity .45s ease;
}

.navigation button:hover .navigation-label::before,.navigation button:focus-visible .navigation-label::before,
.coming-soon-contact a:hover .navigation-label::before,.coming-soon-contact a:focus-visible .navigation-label::before {
  opacity:1;
  animation:cta-glow 2.8s ease-in-out infinite;
}

.navigation button::after {
  content:"";
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  height:1px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s;
}

.navigation button:hover,.navigation button:focus-visible {
  color:var(--blue);
}

.navigation button:hover::after,.navigation button:focus-visible::after {
  transform:scaleX(1);
}

.menu-toggle {
  display:none;
}

main {
  max-width:1920px;
  margin:auto;
  padding:0 var(--gutter) 30px;
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  column-gap:24px;
  align-items:center;
  min-height:min(820px,calc(100svh - 124px));
  padding:32px 0;
}

.hero-copy {
  position:relative;
  z-index:2;
  padding:20px 0 34px;
  animation:copy-enter .85s ease both;
}

.eyebrow,.tagline {
  font-size:12px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:3.7px;
  text-transform:uppercase;
  color:var(--blue);
}

.eyebrow {
  margin:0 0 26px;
}

h1 {
  font-size:clamp(46px,4.65vw,88px);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:1.1;
  margin:0 0 28px;
}

h1 span {
  display:block;
  white-space:normal;
}

.description {
  margin:0;
  color:var(--muted);
  font-size:clamp(18px,1.52vw,27px);
  line-height:1.5;
  letter-spacing:-.45px;
  width:100%;
  max-width:660px;
}

.course-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:linear-gradient(145deg,#111823,#080d14);
  border:1px solid #111823;
  border-radius:100px;
  margin-top:34px;
  padding:18px 29px;
  color:#fff;
  font-size:clamp(16px,1.23vw,21px);
  box-shadow:inset 0 1px 1px #ffffff0c;
  position:relative;
  isolation:isolate;
  --glow-low:0 0 16px 3px rgb(49 111 214 / 22%),0 0 30px 6px rgb(49 111 214 / 12%);
  --glow-high:0 0 25px 8px rgb(49 111 214 / 65%),0 0 60px 15px rgb(49 111 214 / 38%);
}

.course-cta svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
}

.course-cta::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity .45s ease;
  box-shadow:var(--glow-low);
}

.course-cta:hover::before,.course-cta:focus-visible::before {
  opacity:1;
  animation:cta-glow 2.8s ease-in-out infinite;
}

@keyframes cta-glow {
  0%,100% {
    box-shadow:var(--glow-low);
  }
  50% {
    box-shadow:var(--glow-high);
  }
}

.tagline {
  margin:40px 0 0;
  letter-spacing:3px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap;
}

.course-artwork {
  margin:0;
  position:relative;
  z-index:1;
  animation:art-enter 1.1s .15s ease both;
}

.course-artwork img {
  display:block;
  width:100%;
  height:auto;
}

.bottom-divider {
  height:1px;
  background:var(--line);
}

@keyframes copy-enter {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes art-enter {
  from {
    opacity:0;
    transform:translateY(17px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1700px) {
  .hero {
    min-height:calc(100svh - 124px);
    max-height:1080px;
  }
  .course-artwork {
    max-width:1120px;
  }
}

@media(max-width:1150px) {
  .header-inner {
    min-height:72px;
  }
  .brand-name {
    font-size:25px;
  }
  .brand {
    gap:12px;
  }

  .navigation {
    gap:26px;
  }
  .hero {
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    min-height:680px;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:2.8px;
  }
  h1 {
    font-size:clamp(44px,4.65vw,58px);
  }
  .description {
    font-size:19px;
    max-width:470px;
  }
  .desktop-break {
    display:none;
  }
  .course-artwork {
    margin-left:0;
    margin-right:0;
  }
  .tagline {
    font-size:10px;
    letter-spacing:2.3px;
    gap:10px;
  }
}

@media(max-width:1100px) {
  .brand {
    gap:10px;
  }
  .brand-name {
    font-size:24px;
  }

  .navigation {
    gap:22px;
  }
  .navigation button {
    font-size:12px;
  }
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:65px;
  }
  .hero-copy {
    padding:0;
    max-width:680px;
  }
  h1 {
    font-size:clamp(54px,7.4vw,72px);
  }
  .description {
    width:auto;
    max-width:570px;
    font-size:23px;
  }
  .eyebrow {
    font-size:12px;
  }
  .tagline {
    font-size:12px;
    letter-spacing:2.8px;
  }
  .course-artwork {
    width:90%;
    max-width:740px;
    justify-self:end;
    margin:20px 0 0;
  }
  .bottom-divider {
    margin-top:10px;
  }
}

@media(max-width:650px) {
  :root {
    --gutter:24px;
  }
  .header-inner {
    min-height:80px;
    gap:12px;
  }
  .brand {
    gap:9px;
  }
  .brand-name {
    font-size:22px;
    letter-spacing:-1.1px;
  }

  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:36px;
    height:40px;
    padding:7px;
    border:0;
    background:transparent;
    flex-shrink:0;
  }
  .menu-toggle span {
    display:block;
    width:22px;
    height:1px;
    background:var(--ink);
    transition:transform .25s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg);
  }
  .navigation {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    align-items:stretch;
    flex-direction:column;
    gap:0;
    padding:14px var(--gutter) 20px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 25px #10152008;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s,transform .2s,visibility .2s;
  }
  .navigation.is-open {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .navigation button {
    font-size:16px;
    text-align:left;
    padding:13px 0;
  }
  .navigation button::after {
    right:auto;
    width:32px;
    bottom:8px;
  }
  .hero {
    padding:48px 0 16px;
  }
  .hero-copy {
    text-align:center;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:2.6px;
    margin-bottom:24px;
  }
  h1 {
    font-size:clamp(35px,8.6vw,55px);
    letter-spacing:-.055em;
    line-height:1.13;
    margin-bottom:24px;
  }
  .description {
    font-size:18px;
    line-height:1.55;
    max-width:430px;
    margin-inline:auto;
    letter-spacing:-.3px;
  }
  .course-cta {
    font-size:15px;
    gap:17px;
    padding:17px 23px;
    margin-top:28px;
  }
  .course-cta svg {
    width:24px;
  }
  .tagline {
    margin-top:32px;
    justify-content:center;
    font-size:9px;
    letter-spacing:2px;
    gap:9px;
  }
  .course-artwork {
    width:100%;
    max-width:none;
    justify-self:center;
    margin:36px 0 0;
  }
  .bottom-divider {
    margin-top:8px;
  }
  main {
    padding-bottom:24px;
  }
}

@media(max-width:360px) {
  :root {
    --gutter:20px;
  }
  .brand-name {
    font-size:20px;
  }

  .brand {
    gap:7px;
  }
  .tagline {
    font-size:8px;
    letter-spacing:1.6px;
  }
  .course-cta {
    padding-left:20px;
    padding-right:20px;
  }
  h1 {
    font-size:8.5vw;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .course-cta::before,.navigation-label::before {
    box-shadow:var(--glow-low);
  }
}

@media(min-width:1101px) {
  .course-artwork img {
    max-height:min(740px,calc(100svh - 160px));
    object-fit:contain;
    object-position:right center;
  }
}
/* Let the course composition keep its visual weight on wider screens. */
@media (min-width: 1700px) {
  .course-artwork img {
    max-height: min(1000px, calc(100svh - 200px));
  }
}



/* A compact, centered message beneath the opening experience. */
.coming-soon {
  padding:48px 0 28px;
  text-align:center;
}
.coming-soon h2 {
  margin:0 0 16px;
  font-size:clamp(26px,2.4vw,36px);
  font-weight:600;
  letter-spacing:-1.2px;
  line-height:1.15;
}
.coming-soon-message {
  max-width:540px;
  margin:0 auto;
  color:var(--muted);
  font-size:var(--support-font-size);
  line-height:1.65;
}
.coming-soon-name {
  margin:24px 0 0;
  font-size:14px;
  line-height:1.7;
}
.coming-soon-name > span[aria-hidden] {
  margin:0 6px;
  color:var(--muted);
}
.coming-soon-signature {
  color:var(--muted);
}
.coming-soon-contact {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 24px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.coming-soon-contact a {
  display:inline-block;
  position:relative;
  isolation:isolate;
  --glow-low:0 0 5px 1px rgb(49 111 214 / 12%),0 0 12px 2px rgb(49 111 214 / 6%);
  --glow-high:0 0 12px 2px rgb(49 111 214 / 35%),0 0 25px 4px rgb(49 111 214 / 22%);
  color:var(--blue);
  font-size:14px;
  line-height:1.6;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
  overflow-wrap:anywhere;
  transition:text-decoration-color .2s;
}
.coming-soon-contact a:hover {
  text-decoration-color:currentColor;
}
.coming-soon-contact a:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:5px;
  border-radius:2px;
}
@media(max-width:650px) {
  .coming-soon {
    padding:36px 0 16px;
  }
  :root {
    --support-font-size:15px;
  }
}

@media(max-width:480px) {
  .brand {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
}