@charset "UTF-8";
/* ============================================================================
   Stretch to Win Canada — FST Level 1 RMT landing page
   Design deliverable. Plain CSS, no build step, no framework.

   This is the HTML transcription of the Next.js draft in src/app/page.tsx.
   Same design, same copy, same assets. It exists so the page can be built as
   custom development on Kajabi without anyone having to read React.

   HOW THIS FILE IS ORGANISED (Task 4 note: ported verbatim from the
   design repo html/assets/styles.css, then split into Sass partials that
   mirror this same outline plus the section library. See
   styles/theme.scss for the resulting import order.)
     01  tokens          _tokens.scss
     02  reset + base    \
     03  type scale       \_ _chrome.scss (shared shell + design-system base)
     04  layout            /
     05  components      /
     06  sections        one partial per named section, in page order

   Breakpoint is 768px throughout, written mobile-first. There is exactly one
   other breakpoint (1024px) and it only governs the desktop nav and the
   three-column video wall.
   ========================================================================= */
/* -------------------------------------------------------------- 01 tokens --
   Brand Kit v1.0 values. The Next.js build declared these as plain custom
   properties already, so they carry across unchanged. Do not introduce a
   colour that is not in this block. */
:root {
  /* Brand Kit v1.0 (Spring 2026) scales. Navy is the stage, teal is
     interaction, gold is prestige and scarce, warm off-white is for reading.
     Every role below resolves to one of these. Do not paint with a raw hex. */
  --navy-deep: #071A28;
  --navy-base: #0D2B3E;
  --navy-700: #11364E;
  --navy-soft: #1F4359;
  --teal-wash: #E6F4F8;
  --teal-soft: #4DB1CC; /* teal on navy, 5.9:1. teal-base is 3.4:1 there */
  --teal-base: #0387A8;
  --teal-deep: #036A85; /* teal on paper, 5.7:1 */
  --gold-wash: #FFF7E8;
  --gold-soft: #FCE6BC;
  --gold-base: #F9D083;
  --gold-deep: #E0B05F;
  --gold-hover: #FBDB99;
  --n-100: #F2F2F3;
  --n-300: #D6D7D9;
  --n-700: #5E6266;
  --n-900: #2A2E31;
  /* status. The kit permits no red and no true green. */
  --status-warning: #E0B05F;
  --status-success: #2F8F86;
  /* act one — navy */
  --stw-bg: var(--navy-deep); /* the dark act, hero and close */
  --stw-surface: var(--navy-base); /* cards on the dark act */
  --stw-surface-2: var(--navy-soft); /* video wells before the poster loads */
  --stw-fg: var(--stw-paper); /* every word on navy */
  --stw-muted: #8FA6B5; /* dimmest legible on navy, small type only */
  --stw-muted-2: #B9C9D4; /* body copy on navy */
  --stw-line: rgba(247, 245, 241, 0.16);
  /* Gold: prestige, and scarce. Nine uses on the page, every one of them
     either a CTA or the single word in a sentence that carries the payoff.
     Interaction is teal now. A tenth gold spends the other nine. */
  --stw-accent: var(--gold-base);
  --stw-accent-hover: var(--gold-hover);
  /* act two — paper */
  --stw-paper: #F7F5F1;
  --stw-ink: #14181F; /* every heading on paper */
  --stw-n700: var(--n-700); /* body copy on paper */
  --stw-line-light: rgba(20, 24, 31, 0.12);
  /* The ticks and the one cross the page draws. Neither is gold any more:
     gold now means "recommended", and a tick beside every row would spend it
     on nothing. The kit permits no red, so the negative mark is the warning
     tone rather than a red X. */
  --stw-tick: var(--status-success); /* every confirmation tick */
  --stw-cross: var(--status-warning); /* the "today" cross in the compare table */
  --stw-radius: 18px; /* every card. The pills are fully round. */
  --stw-radius-sm: 14px; /* nested surfaces: survey frame, compare rows */
  --wrap: 72rem; /* the page measure. Nothing is wider. */
  --measure: 68ch; /* prose measure. Nothing reads wider. */
  --pad: 1.25rem; /* gutter, mobile */
  --pad-md: 2.5rem; /* gutter, 768px and up */
}

/* ------------------------------------------------------------- 01 base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--stw-bg);
  color: var(--stw-fg);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--stw-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.act--paper :focus-visible, .act--gold :focus-visible {
  outline-color: var(--stw-ink);
  box-shadow: 0 0 0 4px rgba(249, 208, 131, 0.55);
}

[hidden] {
  display: none !important;
}

[id] {
  scroll-margin-top: 5rem;
} /* the sticky header */
/* ------------------------------------------------------------- 02 type
   Montserrat only. Hierarchy comes from weight, size and casing. The tracked
   small label is reserved for measured data: month names on the strap, level
   chips, the hours on the five-day table, the stat captions. Never a
   decorative eyebrow above a heading. */
.label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stw-muted-2);
}

.label--light {
  color: var(--stw-n700);
}

.label--gold {
  color: var(--stw-accent);
}

.h1 {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--stw-fg);
}

.h2 {
  max-width: 44rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--stw-muted-2);
}

.body-dim {
  color: var(--stw-muted-2);
  line-height: 1.625;
}

.body-ink {
  color: var(--stw-n700);
  line-height: 1.625;
}

.small {
  font-size: 0.875rem;
  line-height: 1.6;
}

.num {
  font-variant-numeric: tabular-nums;
}

.tm {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  font-weight: 500;
}

.paper {
  color: var(--stw-fg);
}

/* ----------------------------------------------------------- 03 layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.wrap--3xl {
  max-width: 48rem;
}

.sec {
  padding-inline: var(--pad);
  padding-block: 4rem;
}

.act--navy {
  background: var(--stw-bg);
  color: var(--stw-fg);
}

.act--paper {
  background: var(--stw-paper);
  color: var(--stw-ink);
}

.act--gold {
  background: var(--gold-base);
  color: var(--navy-base);
}

.act--pale {
  background: var(--n-100);
  color: var(--stw-ink);
} /* the kit's alternating light band */
.act--wash {
  background: var(--teal-wash);
  color: var(--stw-ink);
} /* peer-proof band; one use on the page */
.stage {
  background: var(--navy-base);
} /* schedule + price: one step up from the page navy */
/* ------------------------------------------------------- 04 components */
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  transition: background-color 160ms ease;
}

.pill--gold {
  background: var(--stw-accent);
  color: var(--navy-deep);
}

.pill--gold:hover {
  background: var(--stw-accent-hover);
}

.pill--tint {
  background: var(--teal-wash);
  color: var(--teal-deep);
}

.pill--tint:hover {
  background: #D5ECF4;
}

.pill--ghost {
  background: rgba(3, 135, 168, 0.22);
  color: var(--stw-fg);
}

.pill--ghost:hover {
  background: rgba(247, 245, 241, 0.2);
}

.pill--sm {
  padding: 0.625rem 1.125rem;
  font-size: 12px;
}

/* Kit buttons. Colour is a destination, not a rank: gold registers, teal-deep
   moves down the page, outline is the alternative. 4px radius, never a pill. */
.btn {
  display: inline-block;
  border-radius: 4px;
  padding: 0.95rem 1.5rem;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.btn--go {
  background: var(--stw-accent);
  color: var(--navy-base);
}

.btn--go:hover {
  background: var(--stw-accent-hover);
}

.btn--move {
  background: var(--teal-deep);
  color: #FFFFFF;
}

.btn--move:hover {
  background: var(--navy-base);
}

.btn--outline {
  background: transparent;
  color: var(--stw-fg);
  border: 1px solid var(--stw-line);
}

.btn--outline:hover {
  border-color: var(--teal-soft);
}

.act--paper .btn--outline, .act--pale .btn--outline, .act--wash .btn--outline,
.stories__msgs .btn--outline {
  color: var(--stw-ink);
  border-color: var(--stw-line-light);
}

.act--paper .btn--outline:hover, .act--pale .btn--outline:hover, .act--wash .btn--outline:hover,
.stories__msgs .btn--outline:hover {
  border-color: var(--teal-deep);
}

.btn--solid {
  background: var(--navy-base);
  color: var(--stw-paper);
}

.btn--solid:hover {
  background: var(--teal-deep);
}

.btn--sm {
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  font-size: 12px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Level and state chips. Typographic, never colour alone. */
.chip {
  display: inline-block;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.chip--l1 {
  background: rgba(77, 177, 204, 0.18);
  color: var(--teal-soft);
}

.act--paper .chip--l1 {
  background: var(--teal-wash);
  color: var(--teal-deep);
}

.chip--l2 {
  background: rgba(247, 245, 241, 0.1);
  color: var(--stw-muted-2);
}

.act--paper .chip--l2 {
  background: var(--n-100);
  color: var(--n-700);
}

.chip--grey {
  background: transparent;
  color: var(--stw-muted);
  box-shadow: inset 0 0 0 1px var(--stw-line);
}

.act--paper .chip--grey {
  color: var(--n-700);
  box-shadow: inset 0 0 0 1px var(--stw-line-light);
}

.chip--gold {
  background: var(--gold-base);
  color: var(--navy-base);
}

.ticks > li {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.ticks > li + li {
  margin-top: 0.875rem;
}

.ticks svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
}

.ticks svg path {
  fill: none;
  stroke: var(--status-success);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* header: sticky. Over the hero it is clear, so the photograph runs up behind
   it under a soft navy fall-off that keeps the lockup and controls legible; once
   the hero has passed it turns solid navy. home.js flips [data-over]. Only
   colour and opacity move, never size, so nothing below it reflows. */
body {
  --hdr-h: 65px;
}

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--navy-base);
  border-bottom: 1px solid var(--stw-line);
  transition: background-color 220ms ease, border-color 220ms ease;
}

.hdr::before {
  content: "";
  position: absolute;
  inset: 0 0 -1.75rem 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(7, 26, 40, 0.78) 0%, rgba(7, 26, 40, 0.35) 60%, rgba(7, 26, 40, 0) 100%);
  transition: opacity 220ms ease;
}

.hdr[data-over] {
  background-color: transparent;
  border-bottom-color: transparent;
}

.hdr[data-over]::before {
  opacity: 1;
}

.hdr[data-over] .btn--outline {
  background: rgba(7, 26, 40, 0.45);
  border-color: rgba(247, 245, 241, 0.34);
}

/* an open menu needs a solid bar behind it, wherever the page is */
.hdr[data-over]:has(#idx-btn[aria-expanded=true]) {
  background-color: var(--navy-base);
  border-bottom-color: var(--stw-line);
}

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr::before {
    transition: none;
  }
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem var(--pad);
}

.hdr__logo {
  flex: 0 1 auto;
  min-width: 0;
}

.hdr__logo img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left;
}

.hdr__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.hdr__idx {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.no-js .hdr__idx {
  display: none;
}

/* The menu mark: three rules that fold to a cross while the menu is open. The
   word "Menu" always sits beside it, so the icon never carries the meaning alone. */
.hdr__burger {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.hdr__burger path {
  transform-origin: 8px 8px;
  transition: transform 150ms ease, opacity 150ms ease;
}

.hdr__idx[aria-expanded=true] .hdr__burger path:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.hdr__idx[aria-expanded=true] .hdr__burger path:nth-child(2) {
  opacity: 0;
}

.hdr__idx[aria-expanded=true] .hdr__burger path:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hdr__burger path {
    transition: none;
  }
}
/* The contents index: the page's own front matter. A ruled column on the
   header's navy, each row naming a section and, where the page holds a
   countable thing, how many. The figure uses the kit's measured-data
   treatment, which is the one tracked label this page allows. */
.idx {
  background: var(--navy-deep);
  border-top: 1px solid var(--stw-line);
  max-height: min(80vh, 42rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.idx__list {
  list-style: none;
  margin: 0;
  padding-block: 0.25rem 0.9rem;
}

.idx__list li + li {
  border-top: 1px solid rgba(249, 208, 131, 0.2);
}

.idx__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.85rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--stw-paper);
  text-decoration: none;
}

.idx__list a:hover {
  color: var(--teal-soft);
}

.idx__n {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--stw-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.idx.is-open .idx__list > li {
  animation: idx-in 240ms ease-out both;
}

@keyframes idx-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .idx.is-open .idx__list > li {
    animation: none;
  }
}
/* footer: the full lockup on its own row, then the lines. */
.foot {
  padding: 4rem var(--pad) 3rem;
  border-top: 1px solid var(--stw-line);
}

.foot__lockup {
  width: 260px;
  height: auto;
  margin-bottom: 2.5rem;
}

.foot p + p, .foot nav {
  margin-top: 1rem;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.foot__nav a {
  text-decoration: none;
  color: var(--stw-muted-2);
}

.foot a:hover {
  color: var(--teal-soft);
}

/* hero: copy left, dates as the spine, buttons after them. From 1024px the
   photograph runs full height and bleeds off the right edge, and a mask fades its
   left side into the ground. Nothing is laid over the photo, because in this
   frame the work (her hands on his knee) sits left of centre, under the copy:
   an overlay dark enough for the headline blacked out the stretch. Below 1024px
   it is a card under the buttons. */
.hero {
  margin-top: calc(-1 * var(--hdr-h));
  background: linear-gradient(180deg, var(--navy-base) 0%, var(--navy-deep) 100%);
}

.hero__in {
  display: grid;
  gap: 2.5rem;
  padding: calc(3rem + var(--hdr-h)) var(--pad) 2.5rem;
}

.hero__in .h1 {
  max-width: 24ch;
  text-wrap: balance;
}

.hero__sub {
  margin-top: 1.25rem;
  max-width: 30rem;
  color: var(--stw-fg);
}

.hero__dates-label {
  margin-top: 2.25rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.hero__dates a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.875rem 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--stw-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--stw-fg);
  background: var(--navy-700);
  transition: border-color 160ms ease;
}

.hero__fig {
  position: relative;
  margin: 0;
  border: 1px solid var(--stw-line);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3/2;
}

.hero__fig picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 30%;
  display: block;
}

.hero__dates a:hover {
  border-color: var(--teal-soft);
}

.hero__dates a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-base);
}

.hero__dates span + span {
  color: var(--stw-muted-2);
  font-weight: 500;
}

.no-js .hero__dates-label, .no-js .hero__dates {
  display: none;
}

/* record line: the facts on a rule, in the kit's measured-data treatment. It
   replaces the metric band, so gold is back to one control and the close. */
.record {
  background: var(--navy-700);
  border-top: 1px solid var(--stw-line);
  border-bottom: 1px solid var(--stw-line);
}

.record__in {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.75rem;
  row-gap: 0.3rem;
  padding: 0.9rem var(--pad);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--stw-fg);
}

.record__tag {
  color: var(--teal-soft);
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .record__in {
    padding-inline: var(--pad-md);
  }
}
@media (min-width: 1024px) {
  .record__in li:not(.record__tag) + li::before {
    content: "·";
    margin-right: 1.75rem;
    color: var(--stw-muted);
  }
}
.what__prose {
  margin-top: 1.5rem;
  max-width: 40rem;
  display: grid;
  gap: 1rem;
}

.what__split {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  align-items: start;
}

.what__photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--stw-radius);
}

.what__rows {
  border-bottom: 1px solid var(--stw-line-light);
}

.what__rows li {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--stw-line-light);
}

.what__rows p {
  max-width: 36rem;
}

.what__link {
  margin-top: 2rem;
}

.what__link a {
  color: var(--teal-deep);
  font-weight: 600;
}

@media (min-width: 768px) {
  .what__split {
    grid-template-columns: 1fr 1.15fr;
    column-gap: 3rem;
  }
  .what__rows li {
    grid-template-columns: 14rem 1fr;
    gap: 0.4rem 1.5rem;
    align-items: baseline;
  }
}
.rmt__intro {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.rmt__rows {
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--stw-line-light);
}

.rmt__rows li {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--stw-line-light);
}

.rmt__rows p {
  max-width: 40rem;
}

.rmt__quote {
  margin-top: 3.5rem;
  max-width: 46rem;
}

.rmt__quote blockquote {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--stw-ink);
}

.rmt__quote figcaption {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .rmt__rows li {
    grid-template-columns: 19rem 1fr;
    align-items: baseline;
  }
}
/* course dates: the strap. A navy band down the left with a gold-stroked
   buckle per course; rows to its right. Underneath is a real table for no-JS. */
.sched__intro {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.sched__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-size: 0.9375rem;
}

.sched__table caption {
  text-align: left;
  padding-bottom: 0.5rem;
  font-weight: 700;
  color: var(--stw-accent);
}

.sched__table th, .sched__table td {
  text-align: left;
  padding: 0.625rem 0.5rem;
  border-top: 1px solid var(--stw-line);
  vertical-align: top;
}

.sched__table th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stw-muted-2);
}

.sched__table a {
  color: var(--teal-soft);
}

.strap {
  margin-top: 2.5rem;
  position: relative;
  padding-left: 1.75rem;
}

.strap::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 10px;
  border-radius: 5px;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 1px var(--stw-line);
  transform-origin: top;
}

.strap__month + .strap__month {
  margin-top: 2.25rem;
}

.strap__m {
  position: relative;
  padding-bottom: 0.5rem;
}

.strap__m::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.55rem;
  width: 1.5rem;
  height: 2px;
  background: var(--gold-base);
} /* the stitch */
.strap__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--stw-line);
}

.strap__rows {
  border-bottom: 1px solid var(--stw-line);
} /* on the list, so hiding rows cannot remove it */
.strap__row > .chip {
  justify-self: start;
}

.strap__note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--stw-muted-2);
}

.strap__cta .btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.strap__buckle {
  position: absolute;
  left: calc(-1.25rem + 5px - 10px);
  top: 50%;
  width: 20px;
  height: 26px;
  margin-top: -13px;
  border-radius: 4px;
  border: 2px solid var(--stw-line);
  background: var(--navy-base);
}

.strap__row[data-status=soldout] .strap__buckle {
  border-color: var(--stw-muted);
}

.strap__row[data-status=soldout] .strap__city, .strap__row[data-status=soldout] .strap__dates {
  color: var(--stw-muted);
}

.strap__city {
  font-weight: 600;
}

.strap__dates {
  grid-column: 1/-1;
  color: var(--stw-muted-2);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.strap__price {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.strap__price b {
  font-weight: 700;
}

.strap__eb {
  font-size: 13px;
  color: var(--stw-muted-2);
}

.strap__cta {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.strap__next {
  color: var(--stw-muted-2);
}

.strap__row[data-level="Level 1"] .strap__price b {
  color: var(--gold-base);
} /* the early-bird figure in gold, per the client */
.sched__foot {
  margin-top: 2rem;
}

/* filters: chips, so the pill radius is theirs to use. 44px tall for thumbs. */
.filt {
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}

.filt__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filt__chip {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--stw-line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stw-muted-2);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.filt__chip:hover {
  border-color: var(--teal-soft);
}

.filt__chip[aria-pressed=true] {
  background: var(--stw-paper);
  border-color: var(--stw-paper);
  color: var(--navy-deep);
}

.filt__count {
  min-height: 1.4em;
}

.filt__empty {
  margin-top: 2rem;
}

/* phone: a course row is three lines (city and level, dates, price and button),
   and each filter group is one swipeable line rather than a wrapped block. */
@media (max-width: 767.98px) {
  .strap__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "city chip" "dates dates" "price cta";
    row-gap: 0.3rem;
  }
  .strap__row > .chip {
    grid-area: chip;
    justify-self: end;
    align-self: start;
  }
  .strap__city {
    grid-area: city;
  }
  .strap__dates {
    grid-area: dates;
  }
  .strap__price {
    grid-area: price;
    align-self: center;
  }
  .strap__cta {
    grid-area: cta;
    justify-content: flex-end;
  }
  .strap__row[data-status=soldout] .strap__cta {
    grid-area: auto;
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .filt__group {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .filt__group::-webkit-scrollbar {
    display: none;
  }
  .filt__chip {
    flex: none;
  }
}
@media (min-width: 768px) {
  .strap {
    padding-left: 2.5rem;
  }
  .strap::before {
    left: 0.75rem;
  }
  .strap__m::before {
    left: -2.5rem;
    width: 2rem;
  }
  .strap__buckle {
    left: calc(-1.75rem + 5px - 10px);
  }
  .strap__row {
    grid-template-columns: 6.5rem 10rem 1fr 1fr auto;
  }
  .strap__dates, .strap__price, .strap__cta {
    grid-column: auto;
  }
  .strap__cta {
    justify-content: flex-end;
  }
}
.price__in {
  display: grid;
  gap: 2.5rem;
}

.price__head > :first-child {
  margin-top: 0;
}

.price__early-h {
  margin-top: 1.75rem;
}

.price__early-h + p {
  margin-top: 0.5rem;
  max-width: 34rem;
}

.price__card {
  background: var(--stw-paper);
  color: var(--stw-ink);
  border-radius: var(--stw-radius);
  padding: 2rem 1.5rem;
}

.price__reg {
  margin-top: 1rem;
  font-size: 1.25rem;
  color: var(--n-700);
}

.price__strike {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: var(--stw-ink);
}

.price__strike svg {
  position: absolute;
  left: -2%;
  top: 50%;
  width: 104%;
  height: 4px;
  margin-top: -2px;
  overflow: visible;
}

.price__line {
  stroke: var(--gold-deep);
  stroke-width: 4;
  stroke-linecap: round;
}

.price__eb {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  color: var(--n-700);
}

.price__eb b {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy-base);
  display: block;
}

.price__eb b::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 6px;
  margin-top: 0.35rem;
  border-radius: 3px;
  background: var(--gold-base);
}

.price__k {
  margin-top: 1.75rem;
}

.price__ticks {
  margin-top: 0.75rem;
  color: var(--n-700);
}

.price__cta {
  margin-top: 1.5rem;
}

.price__cta + p {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .price__in {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    grid-template-areas: "title card" "copy card";
  }
  .price__h2 {
    grid-area: title;
  }
  .price__head {
    grid-area: copy;
  }
  .price__card {
    grid-area: card;
    padding: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .price__in {
    grid-template-columns: 1fr 1.15fr;
    column-gap: 4rem;
    row-gap: 1.75rem;
  }
}
.week__intro {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.week__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  align-items: start;
}

.week__side {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.week__bracket p + p {
  margin-top: 0.35rem;
}

.table {
  position: relative;
  display: grid;
  gap: 0;
  border: 2px solid var(--navy-base);
  border-radius: 14px;
  padding: 0.75rem;
  background: rgba(13, 43, 62, 0.03);
}

.table__anchor {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--navy-base);
  margin: 0 1.5rem;
}

.table__anchor--head {
  margin-bottom: 0.75rem;
}

.table__anchor--foot {
  margin-top: 0.75rem;
}

.table__day {
  border-top: 1px solid var(--stw-line-light);
  padding: 0.75rem 0.25rem;
}

.table__day summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 0.25rem;
}

.table__day summary::-webkit-details-marker {
  display: none;
}

.table__day summary .h3 {
  font-size: 1rem;
}

.table__day p {
  margin-top: 0.5rem;
}

.week__gallery {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.week__gallery img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  border-radius: var(--stw-radius-sm);
}

@media (min-width: 768px) {
  .week__grid {
    grid-template-columns: 18rem 1fr;
  }
  .table {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto 1fr auto;
    padding: 1rem;
  }
  .table__anchor {
    grid-column: 1/-1;
  }
  .table__day {
    border-top: 0;
    border-left: 1px solid var(--stw-line-light);
    padding: 0.5rem 0.75rem;
    transition: background-color 250ms ease;
  }
  .table__day:first-of-type {
    border-left: 0;
  }
  .table__day:hover, .table__day:focus-within {
    background: rgba(249, 208, 131, 0.06);
  } /* the 6% certificate tint */
  .table__day summary {
    cursor: default;
    pointer-events: none;
  }
  .week__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
.who__intro {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.who__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}

.who__list li {
  padding: 1.25rem 0;
  border-top: 1px solid var(--stw-line-light);
}

.who__list li:last-child {
  border-bottom: 1px solid var(--stw-line-light);
}

.who__list p {
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .who__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
  }
}
.stories__intro {
  margin-top: 1.25rem;
}

.stories__grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.75rem;
}

.stories__grid img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--stw-radius-sm);
  border: 1px solid var(--stw-line-light);
}

@media (max-width: 767px) {
  .stories__grid > li:nth-child(n+4) {
    display: none;
  }
}
.stories__note {
  margin-top: 1rem;
}

.stories__cta {
  margin-top: 1.5rem;
}

.stories__msgs {
  margin-top: 2.5rem;
  padding-block: 2.5rem;
  background: var(--teal-wash);
}

.stories__msgs .wrap > .h3 {
  margin-top: 0;
}

.msg__wall {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.msg__tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(13, 43, 62, 0.12);
  border-radius: var(--stw-radius-sm);
  background: var(--stw-paper);
  cursor: pointer;
  overflow: hidden;
}

.msg__tile:hover, .msg__tile:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
}

.msg__tile img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
}

.msg__dialog {
  border: none;
  padding: 0;
  max-width: min(28rem, 100vw - 2rem);
  max-height: calc(100vh - 2rem);
  background: transparent;
}

.msg__dialog::backdrop {
  background: rgba(7, 26, 40, 0.72);
}

.msg__dialog:not([open]) {
  display: none;
}

.msg__dialog[open] {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.msg__dialog-bar {
  justify-self: end;
}

.msg__dialog .msg__dialog-bar .btn--outline {
  background: var(--stw-paper);
  color: var(--stw-ink);
  border-color: var(--stw-ink);
}

.msg__dialog .msg__dialog-bar .btn--outline:hover {
  background: var(--n-100);
  border-color: var(--teal-deep);
}

.msg__dialog .msg__dialog-bar .btn:focus-visible {
  outline: 3px solid var(--stw-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--navy-base);
}

.msg__dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 5rem);
  object-fit: contain;
  border-radius: var(--stw-radius-sm);
  background: var(--stw-paper);
}

@media (min-width: 768px) {
  .msg__wall {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .stories__msgs {
    padding-block: 3rem;
  }
}
@media (min-width: 1024px) {
  .msg__wall {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
}
.team__intro {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.team__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}

.team__grid img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border-radius: var(--stw-radius-sm);
}

.team__grid .h3 {
  margin-top: 0.875rem;
}

.team__role {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--teal-deep);
}

.team__grid p + p {
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.faq__list {
  margin-top: 2rem;
}

.faq__list details {
  border-top: 1px solid var(--stw-line-light);
}

.faq__list details:last-child {
  border-bottom: 1px solid var(--stw-line-light);
}

.faq__list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.85rem 0;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

.faq__list summary::after {
  content: "+";
  font-weight: 400;
  color: var(--teal-deep);
}

.faq__list details[open] summary::after {
  content: "–";
}

.faq__list details p {
  margin: 0 0 1.1rem;
  max-width: 40rem;
}

.faq__more-in details:last-child {
  border-bottom: 0;
}

.faq__more > summary {
  color: var(--teal-deep);
}

.contact__in {
  display: grid;
  gap: 2rem;
}

.contact .lead {
  margin-top: 1.25rem;
  max-width: 34rem;
}

.contact__ways {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.875rem;
}

.contact__ways li {
  display: grid;
  gap: 0.15rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.contact__ways a {
  color: var(--teal-soft);
  text-decoration: none;
}

.contact__ways a:hover {
  text-decoration: underline;
}

.contact__advisor {
  margin-top: 2rem;
  max-width: 34rem;
}

.contact__advisor a {
  color: var(--teal-soft);
  font-weight: 600;
}

.contact__cta {
  margin-top: 1.25rem;
}

.contact__photo {
  margin: 0;
  max-width: 22rem;
}

.contact__photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 8px;
  border: 1px solid var(--stw-line);
  display: block;
}

.contact__photo figcaption {
  margin-top: 0.6rem;
}

.close__in {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.close .h2 {
  color: var(--navy-base);
}

.close__line {
  color: var(--n-900);
}

.close__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.close__dates a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 43, 62, 0.32);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy-base);
  transition: background-color 150ms ease;
}

.close__dates a:hover {
  background: rgba(13, 43, 62, 0.08);
}

.close__dates span + span {
  font-weight: 500;
  color: var(--n-900);
}

.close__cta {
  margin-top: 0.75rem;
}

.close__free {
  margin-top: 0.5rem;
  color: var(--n-900);
}

.close__free a {
  color: var(--navy-base);
  font-weight: 600;
}

@media (min-width: 768px) {
  .contact__in {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }
}
.no-js .close__dates {
  display: none;
}

.armed .strap::before {
  animation: strap-draw 450ms ease-out both;
}

.armed .strap__row {
  animation: row-in 300ms ease-out both;
}

.armed .strap__row:nth-child(2) {
  animation-delay: 60ms;
}

.armed .strap__row:nth-child(3) {
  animation-delay: 120ms;
}

.armed .strap__row:nth-child(4) {
  animation-delay: 180ms;
}

.armed .strap__row:nth-child(n+5) {
  animation-delay: 220ms;
}

.armed .price__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-draw 350ms ease-out 150ms both;
}

.armed .table__day {
  animation: row-in 300ms ease-out both;
}

.armed .table__day:nth-of-type(2) {
  animation-delay: 80ms;
}

.armed .table__day:nth-of-type(3) {
  animation-delay: 160ms;
}

.armed .table__day:nth-of-type(4) {
  animation-delay: 240ms;
}

.armed .table__day:nth-of-type(5) {
  animation-delay: 320ms;
}

@keyframes strap-draw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes line-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .armed * {
    animation: none !important;
    transition: none !important;
  }
}
@media (min-width: 768px) {
  .sec {
    padding-inline: var(--pad-md);
    padding-block: 5.5rem;
  }
  .hdr__in {
    padding-inline: var(--pad-md);
  }
  .hdr__logo img {
    height: 56px;
    max-width: 265px;
  }
  .hdr__right {
    gap: 0.75rem;
  }
  .btn--sm {
    min-height: 2.75rem;
    padding: 0.7rem 1.1rem;
    font-size: 13px;
    letter-spacing: 0.08em;
  }
  .h1 {
    font-size: clamp(2.6rem, 3.2vw, 2.875rem);
  }
  .h2 {
    font-size: 2.25rem;
  }
  .h3 {
    font-size: 1.25rem;
  }
  body {
    --hdr-h: 81px;
  }
  .hero__in {
    padding: calc(4.5rem + var(--hdr-h)) var(--pad-md) 4rem;
  }
  .hdr__in, .hero__in, .record__in {
    max-width: calc(var(--wrap) + 2 * var(--pad-md));
  }
  .idx {
    position: absolute;
    top: 100%;
    right: max(var(--pad-md), (100vw - var(--wrap)) / 2);
    width: 22rem;
    max-height: min(82vh, 40rem);
    margin-top: 0.5rem;
    border: 1px solid var(--stw-line);
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(7, 26, 40, 0.4);
  }
  .idx__list {
    padding-inline: 1.25rem;
  }
  .foot {
    padding-inline: var(--pad-md);
  }
}
@media (min-width: 1024px) {
  .hero {
    position: relative;
    overflow: hidden;
  }
  .hero__in {
    align-content: center;
    min-height: min(89vh, 55rem);
    padding-block: calc(5rem + var(--hdr-h)) 5rem;
  }
  .hero__copy {
    position: relative;
    z-index: 1;
    max-width: 42rem;
  }
  /* .hero__in is not positioned, so the figure resolves against .hero and bleeds to its right edge */
  .hero__fig {
    position: absolute;
    inset: 0 0 0 auto;
    width: 66%;
    z-index: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 56%);
  }
  .hero__fig img {
    object-position: 74% 22%;
  }
}
@media (min-width: 1280px) {
  .hero__fig {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 42%);
  }
}