:root {
  font-family:Abel,Arial,sans-serif;
  color:#353638;
  background:#fff;
  --blue:#24639b;
  --ink:#353638;
  --cream:#f5f3ee
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-size:20px;
  line-height:1.55
}
button,a {
  font:inherit
}
a {
  color:inherit
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3,.button,.eyebrow {
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1
}
h1 {
  font-size:clamp(3.8rem,8vw,7rem)
}
h2 {
  font-size:clamp(2.7rem,5.5vw,5rem);
  margin-bottom:1.5rem
}
h3 {
  font-size:clamp(1.6rem,2.2vw,2.2rem);
  margin-bottom:.6rem
}
p {
  max-width:65ch
}
.container {
  width:min(1160px,calc(100% - 48px));
  margin:auto
}
.skip {
  position:absolute;
  top:-100px;
  left:12px;
  z-index:100;
  background:white;
  color:#111;
  padding:8px
}
.skip:focus {
  top:12px
}
.site-header {
  position:absolute;
  z-index:10;
  inset:0 0 auto;
  color:white
}
.nav {
  display:flex;
  align-items:center;
  gap:3rem;
  padding-top:18px
}
.brand {
  width:155px;
  flex:none
}
.brand img {
  width:100%
}
.primary-nav {
  display:flex;
  align-items:center;
  gap:2rem;
  flex:1
}
.primary-nav a {
  text-decoration:none;
  font-size:18px;
  white-space:nowrap
}
.primary-nav a:hover,.primary-nav a[aria-current] {
  text-decoration:underline;
  text-underline-offset:5px
}
.nav-group {
  position:relative
}
.nav-sub {
  display:none;
  position:absolute;
  top:100%;
  left:-16px;
  min-width:175px;
  background:#282a2c;
  padding:14px 16px;
  box-shadow:0 15px 30px #0005
}
.nav-sub a {
  display:block;
  padding:6px 0
}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub {
  display:block
}
.menu-toggle {
  display:none
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 25px;
  border:2px solid var(--ink);
  border-radius:3px;
  background:var(--ink);
  color:white;
  text-decoration:none;
  text-transform:uppercase;
  font-size:1.5rem;
  line-height:1;
  box-shadow:2px 3px 0 #0005;
  transition:transform .15s,background .15s
}
.button:hover {
  transform:translateY(-2px);
  background:var(--blue);
  border-color:var(--blue)
}
.button--light {
  background:white;
  color:var(--ink);
  border-color:white
}
.button--light:hover {
  background:var(--cream);
  color:var(--ink);
  border-color:var(--cream)
}
.hero {
  color:#fff;
  background:linear-gradient(90deg,#16191bd9 0%,#16191b73 72%),var(--hero-image) center 44%/cover no-repeat;
  min-height:440px;
  display:flex;
  align-items:center
}
.hero--home {
  min-height:700px
}
.hero__inner {
  padding-top:125px;
  padding-bottom:80px
}
.hero h1 {
  max-width:780px;
  text-transform:uppercase;
  text-shadow:0 2px 12px #0005;
  margin-bottom:20px
}
.hero h1::before {
  content:'';
  display:block;
  width:85px;
  height:28px;
  background:var(--blue);
  margin-bottom:-15px;
  margin-left:-18px
}
.hero p {
  max-width:570px;
  font-size:1.35rem;
  margin-bottom:25px
}
.section {
  padding:88px 0
}
.section--dark {
  background:#353638;
  color:white
}
.section--blue {
  background:var(--blue);
  color:white
}
.section--warm {
  background:var(--cream)
}
.section--photo {
  background:linear-gradient(90deg,#181b1de8,#181b1d99),url('/assets/nutrition.jpg') center/cover;
  color:#fff
}
.eyebrow {
  text-transform:uppercase;
  font-size:1.5rem;
  color:var(--blue);
  margin-bottom:10px
}
.section--dark .eyebrow,.section--blue .eyebrow,.section--photo .eyebrow {
  color:#99c8ef
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center
}
.split h2 {
  margin-bottom:15px
}
.split .button {
  justify-self:start
}
.checklist {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px 24px;
  padding:0;
  margin:0
}
.checklist li::before {
  content:'+';
  font-weight:bold;
  color:#6eb2e9;
  margin-right:9px
}
.statement {
  text-align:center;
  max-width:870px;
  margin:auto
}
.statement p {
  margin-left:auto;
  margin-right:auto
}
.statement h2 {
  max-width:840px
}
.program-grid,.story-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.program-card {
  position:relative;
  min-height:385px;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
  background:var(--ink)
}
.program-card img {
  width:100%;
  height:100%;
  min-height:385px;
  object-fit:cover;
  filter:brightness(.66);
  transition:transform .2s
}
.program-card:hover img {
  transform:scale(1.04)
}
.program-card span {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:24px;
  background:linear-gradient(transparent,#000c)
}
.program-card strong {
  display:block;
  font:2.4rem/1 'Bebas Neue',Impact,sans-serif;
  text-transform:uppercase
}
.program-card small {
  display:block;
  font-size:1rem;
  line-height:1.35
}
.steps {
  padding-left:1.6em;
  font:2rem/1.15 'Bebas Neue',Impact,sans-serif
}
.steps li {
  padding:9px 0
}
.steps li::marker {
  color:var(--blue)
}
.story {
  background:#292b2d;
  padding:28px
}
.story img {
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:20px
}
.story blockquote {
  font-size:1.05rem;
  line-height:1.5;
  margin:0 0 18px
}
.story h3 {
  font-size:1.65rem
}
.talk {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}
.talk h2 {
  margin-bottom:12px
}
.talk p:last-child {
  margin-bottom:0
}
.narrow {
  max-width:820px;
  margin:auto
}
.narrow p {
  max-width:none
}
.center {
  text-align:center
}
.center p {
  margin-left:auto;
  margin-right:auto
}
.card-grid,.milestones {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}
.card {
  border-top:6px solid var(--blue);
  background:white;
  padding:24px;
  box-shadow:0 8px 28px #0000000d
}
.card h3 {
  text-transform:uppercase
}
.card p {
  font-size:1.03rem;
  margin-bottom:0
}
.milestones {
  grid-template-columns:repeat(3,1fr)
}
.milestones .card {
  background:var(--cream)
}
.schedule-image {
  display:block;
  max-width:980px
}
.schedule-image img {
  width:100%;
  height:auto;
  border:1px solid #ddd
}
.anchor {
  scroll-margin-top:18px
}
.muted {
  color:#666;
  font-size:1rem
}
.section--dark .muted {
  color:#ddd
}
.legal a {
  color:var(--blue)
}
.site-footer {
  background:#242628;
  color:#fff;
  padding:65px 0 22px
}
.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:60px
}
.footer-top>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px
}
.footer-top a {
  text-decoration:none
}
.footer-top a:hover {
  text-decoration:underline
}
.footer-brand img {
  width:160px
}
.footer-top h3 {
  margin:10px 0
}
.copyright {
  border-top:1px solid #ffffff33;
  margin-top:45px;
  padding-top:20px;
  color:#aaa;
  font-size:.9rem
}
dialog {
  width:min(600px,calc(100% - 24px));
  max-height:90vh;
  border:0;
  border-radius:5px;
  box-shadow:0 20px 70px #0008;
  padding:36px;
  position:fixed
}
dialog::backdrop {
  background:#101317bb
}
dialog h2 {
  font-size:2.4rem;
  margin-bottom:8px
}
.booking-embed {
  display:block;
  border:0;
  width:100%;
  min-height:700px;
  margin:28px auto 0;
}
dialog iframe {
  border:0;
  width:100%;
  height:min(500px,53vh);
  min-height:360px
}
.dialog-close {
  position:absolute;
  right:16px;
  top:12px;
  border:0;
  background:none;
  font-size:2rem;
  line-height:1
}
.form-fallback {
  font-size:.9rem;
  margin-bottom:0
}
.form-fallback a {
  color:var(--blue)
}
@media(max-width:900px) {
  .card-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .nav {
    gap:1rem
  }
  .primary-nav {
    gap:1rem
  }
  .brand {
    width:130px
  }
  .nav .button {
    padding:10px 16px
  }

}
@media(max-width:700px) {
  body {
    font-size:18px
  }
  .container {
    width:min(100% - 32px,1160px)
  }
  .nav {
    flex-wrap:wrap;
    justify-content:space-between
  }
  .site-header .nav>.button {
    display:none
  }
  .menu-toggle {
    display:block;
    border:1px solid #fff;
    background:#2229;
    color:#fff;
    padding:7px 12px
  }
  .primary-nav {
    display:none;
    order:3;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    background:#242628;
    padding:16px
  }
  .primary-nav.is-open {
    display:flex
  }
  .nav-sub {
    display:block;
    position:static;
    box-shadow:none;
    padding:4px 0 4px 20px
  }
  .nav-sub a {
    font-size:16px
  }
  .hero {
    min-height:390px
  }
  .hero--home {
    min-height:610px
  }
  .hero__inner {
    padding-top:135px;
    padding-bottom:55px
  }
  h1 {
    font-size:clamp(3.5rem,14vw,5.5rem)
  }
  .section {
    padding:62px 0
  }
  .split {
    grid-template-columns:1fr;
    gap:22px
  }
  .program-grid,.story-grid,.milestones {
    grid-template-columns:1fr
  }
  .program-card,.program-card img {
    min-height:300px
  }
  .card-grid {
    grid-template-columns:1fr
  }
  .talk {
    display:block
  }
  .talk .button {
    margin-top:20px
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .footer-top>div:first-child {
    grid-column:1/-1
  }
  dialog {
    padding:28px 18px
  }

}
@media(max-width:370px) {
  .checklist {
    grid-template-columns:1fr
  }

}
