@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.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__was {
  font-size: 13px;
  color: var(--stw-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.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;
}

/* home.js builds a native select per filter group. Only the phone layout of
   /courses shows it; everywhere else the chips are the control. */
.filt__native {
  display: none;
}

.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%);
  }
}
/* The course finder, /courses only. Loaded after home.css and scoped to
   .finder, so nothing here can reach the homepage.

   Navy ground, matching the homepage's calendar. The structure is the redesign:
   the answer stated before the tool, one decision bar instead of three chip
   rows, fixed columns so the list lines up, and a price that says what the
   saving is. Only the colour returns to the dark act. */
/* ------------------------------------------------------- the answer first --
   A visitor asking "when is the next one" should not operate a filter to find out. */
.finder__answer {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}

.finder__answer-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stw-muted);
}

.finder__answer-v {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
}

.finder__answer a {
  color: var(--teal-soft);
  text-underline-offset: 3px;
}

.finder .sched__eyebrow {
  margin: 0 0 0.6rem;
  color: var(--teal-soft);
}

.finder .sched__intro {
  max-width: 46rem;
}

/* ------------------------------------------------------- the decision bar --
   One band, sticky under the 72px header. Two controls, not three rows of
   chips: at 375px the old province row ran 648px and had to be swiped. */
.finder .filt {
  position: sticky;
  top: 4.5rem;
  z-index: 10;
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 2.5rem;
  background: var(--navy-base);
  border: 1px solid var(--stw-line);
  border-radius: var(--stw-radius-sm);
}

.finder .filt__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.finder .filt__group::before {
  content: attr(aria-label);
  flex: 0 0 auto;
  margin-right: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stw-muted);
}

.finder .filt__chip {
  min-height: 2.75rem;
  padding: 0 0.95rem;
  font-size: 13px;
}

.finder .filt__count {
  margin: 0 0 0 auto;
  color: var(--stw-muted-2);
  font-size: 13px;
}

/* ------------------------------------------------------------- the months --
   A ruled label rather than the timeline rail, so more of the list is on
   screen at once and the eye is not dragged down a decorative strap. */
.finder .strap {
  margin-top: 2.25rem;
  padding-left: 0;
}

.finder .strap::before {
  content: none;
}

.finder .strap__buckle {
  display: none;
}

.finder .strap__month + .strap__month {
  margin-top: 2.75rem;
}

.finder .strap__m {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.65rem;
  color: var(--stw-muted-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.finder .strap__m::before {
  content: none;
}

.finder .strap__m::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--stw-line);
}

/* --------------------------------------------------------------- the rows --
   Five fixed columns. Fixed, not auto: every row is its own grid, so an auto
   column is measured per row and the list stops lining up. The old version
   gave dates and price 344px each for about 100px of text, which put 460px of
   dead space in every row. */
.finder .strap__row {
  grid-template-columns: 7.5rem minmax(0, 1fr) 13rem 12.5rem 10rem;
  gap: 0.2rem 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--stw-line);
}

.finder .strap__row > .chip {
  grid-column: 1;
  align-self: baseline;
  justify-self: start;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--stw-muted-2);
  /* a longer level name than "Gather & Grow" wraps rather than running into the city */
  white-space: normal;
  overflow-wrap: anywhere;
}

.finder .strap__city {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
}

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

.finder .strap__dates {
  grid-column: 3;
  color: var(--stw-fg);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finder .strap__price {
  grid-column: 4;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.2rem 0.4rem;
  text-align: right;
}

.finder .strap__eb {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--stw-line);
  border-radius: 4px;
  color: var(--stw-muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.finder .strap__cta {
  grid-column: 5;
  justify-content: flex-end;
}

.finder .strap__cta .btn {
  min-height: 2.5rem;
  white-space: nowrap;
}

/* A sold-out row prints no price, so its button and the line telling you what
   to do next take that column too rather than wrapping inside 10rem. */
.finder .strap__row[data-status=soldout] .strap__cta,
.finder .strap__row[data-status=waitlist] .strap__cta {
  grid-column: 4/-1;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.3rem 0.85rem;
}

.finder .strap__next {
  flex: 1 1 100%;
  text-align: right;
  color: var(--stw-muted-2);
  font-size: 13px;
}

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

/* .lead and .body-ink are written for the dark act, so the one light band on
   the page needs them in ink. It was rendering at 1.51:1. */
#contact.act--wash .lead, #contact.act--wash .body-ink {
  color: var(--stw-n700);
}

#contact.act--wash .h2 {
  color: var(--stw-ink);
}

#contact.act--wash a {
  color: var(--teal-deep);
}

/* ------------------------------------------------------------------ phone --
   Three lines per row, and the native control replaces the chips: at 375px the
   chip groups stood 304px tall and pushed the first course 818px down. */
/* ---------------------------------------------------- tablet and below --
   The five fixed tracks plus their gaps need 784px before the city gets a
   pixel, so at 900px the city column collapsed to 36px for a name needing 99.
   The row stacks well before that, at 1024, while the chips still fit. */
@media (max-width: 1023.98px) {
  .finder .strap__row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "chip city" "dates dates" "price cta";
    row-gap: 0.4rem;
    column-gap: 0.75rem;
    padding: 1rem 0;
    align-items: baseline;
  }
  .finder .strap__row > .chip {
    grid-area: chip;
    justify-self: start;
  }
  .finder .strap__city {
    grid-area: city;
    font-size: 17px;
  }
  .finder .strap__note {
    display: block;
  }
  .finder .strap__dates {
    grid-area: dates;
  }
  .finder .strap__price {
    grid-area: price;
    justify-content: flex-start;
    text-align: left;
  }
  .finder .strap__eb {
    margin-left: 0;
  }
  .finder .strap__cta {
    grid-area: cta;
    align-self: center;
    justify-content: flex-end;
  }
  .finder .strap__row[data-status=soldout] .strap__cta,
  .finder .strap__row[data-status=waitlist] .strap__cta {
    grid-column: auto;
  }
  .finder .strap__next {
    text-align: left;
  }
}
/* ------------------------------------------------------------------ phone --
   The native control replaces the chips: at 375px the chip groups stood 304px
   tall and pushed the first course 818px down. */
@media (max-width: 767.98px) {
  .finder .filt {
    position: static;
    padding: 0.85rem 0.95rem;
    gap: 0.6rem 1rem;
    margin-top: 1.75rem;
  }
  .finder.sec {
    padding-top: 2.5rem;
  }
  .finder .filt__count {
    margin: 0;
  }
  .finder .filt__group {
    flex: 1 1 100%;
    display: block;
    overflow: visible;
  }
  .finder .filt__group::before {
    display: block;
    margin: 0 0 0.25rem;
  }
  .finder .filt__chip {
    display: none;
  }
  .finder .filt__native {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--stw-line);
    border-radius: var(--stw-radius-sm);
    background: var(--stw-paper);
    color: var(--navy-deep);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
  }
}