* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

/** LENIS **/
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: visible;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--swatch--white);
  color: var(--swatch--black);
  font-family: var(--main);
  font-size: 1.0582vw;
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  /* cursor: none; */

  &.overflow-hidden {
    overflow: hidden;
  }

  @media all and (max-width: 991px) {
    font-size: 1rem;
    cursor: auto;
  }
}

/*** FONT RESET ***/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0;
  font-family: var(--main);
  font-weight: 400; /*regular*/
}
/*** FONT SIZES ****/
h1,
.h1 {
  font-size: var(--fs--h1);
  line-height: 1.2;
  font-family: var(--heading);
  letter-spacing: -0.03em;
}

h2,
.h2 {
  font-size: var(--fs--h2);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: -0.1em;
}
h3,
.h3 {
  font-size: var(--fs--h3);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: -0.1em;

  &.alt {
    font-family: var(--heading);
  }
}
h4,
.h4 {
  font-size: var(--fs--h4);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: -0.1em;

  &.alt {
    font-family: var(--heading);
  }
}
h5,
.h5 {
  font-family: var(--heading);
  font-size: var(--fs--h5);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

p,
.p {
  margin: 0 0 1em;
  font-size: var(--fs--body);
  line-height: 1.2;
}

.p {
  margin: 0;
}

.p-lrg {
  font-size: var(--fs--body-lrg);
}

.p-sml {
  font-size: var(--fs--body-sml);
}

.uppercase {
  text-transform: uppercase;
}

.bold {
}

.grey {
  color: var(--swatch--mid-grey);
}

.subheading {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs--body-sml) !important;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

svg {
  width: 100%;
  height: auto;
}

a {
  color: currentColor;
  text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

.img-absolute,
.img-absolute img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.relative {
  position: relative;
}

.t-center {
  text-align: center;
}

.heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  grid-gap: 0.5em;

  i {
    color: var(--swatch--blue);
    font-style: normal;
  }

  &.between {
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
  }

  &.margin-b {
    margin-bottom: 1em;
  }

  @media all and (max-width: 768px) {
  }
}

.black-bg {
  background-color: var(--swatch--black);
  color: var(--swatch--white);

  .yellow {
    color: var(--swatch--yellow) !important;
  }
}
.blue-bg {
  background-color: var(--swatch--blue);
  color: var(--swatch--white);
}
.white-bg {
  background-color: var(--swatch--white);
}
.grey-bg {
  background-color: var(--swatch--grey);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.yellow-bg {
  background-color: var(--swatch--yellow);
}

/** GRID CLASSES **/
.grid-2,
.grid-3,
.grid-4,
.grid-6 {
  display: grid;
  grid-template-rows: auto;
  width: 100%;
  grid-gap: var(--padd--side);
}
.grid-2 {
  grid-template-columns: 1fr 1fr;
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
}

.grid-6 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
}

.container {
  padding-left: var(--padd--side);
  padding-right: var(--padd--side);
}

.loader {
  background-color: var(--swatch--black);
  color: var(--swatch--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-gap: 2em;
  padding: var(--padd--side);
  position: fixed;
  height: 100dvh;
  width: 100%;
  top: 0;
  z-index: 99;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

  .logo {
    display: flex;
    width: 14em;
    visibility: hidden;
  }
  .tagline {
    display: flex;
    width: 28em;
    visibility: hidden;
  }

  @media all and (max-width: 768px) {
    .logo {
      width: 50%;
    }
  }
}

/*** FINDER BUTTON **/
/* No `.home` scoping. header.php decides whether this button is printed at all
   (ibe_show_course_finder()), and a body class could never have done that job:
   body classes are not rewritten on a Barba navigation, so `body.home` — and
   the button with it — followed the visitor onto every page they clicked to. */
.finder-btn {
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  z-index: 10;
  background-color: color-mix(in srgb, var(--swatch--blue) 90%, transparent);
  color: var(--swatch--white);
  display: flex;
  padding: 1em 1em 1em 1.2em;
  border-radius: 0.4em;
  align-items: center;
  grid-gap: 1em;
  width: 18em;
  cursor: pointer;
  transition: ease background-color 0.3s;

  /* One label shows at a time — see header.php. */
  .finder-btn__short {
    display: none;
  }

  .search-icon {
    display: flex;
    width: 1.4em;
    flex-shrink: 0;
  }

  .finder-icon {
    display: flex;
    width: 2.4em;
    flex-shrink: 0;
    position: relative;
  }

  .stack {
    &.is-1 {
      position: absolute;
      transform: translateY(-13%);
      transition: var(--transition--ease) 0.4s all;
    }
    &.is-2 {
      position: absolute;
    }
    &.is-3 {
      transition: var(--transition--ease) 0.4s all;
      transform: translateY(13%);
      position: relative;
    }
  }

  &:hover {
    background-color: color-mix(in srgb, var(--swatch--blue) 100%, transparent);
    .stack {
      &.is-1 {
        transform: translateY(0%);
      }
      &.is-3 {
        transform: translateY(0%);
      }
    }
  }
}

/* Phone: the pill. Icon plus a two-word label, nothing else — the description
   and the stacked-cards graphic are desktop affordances and a 288px-wide slab
   across the bottom of a phone covers whatever the visitor is reading. Auto
   width so it takes only the room the words need. */
@media all and (max-width: 768px) {
  .finder-btn {
    width: auto;
    max-width: calc(100vw - 3em);
    padding: 0.85em 1.5em;
    border-radius: 100em;
    grid-gap: 0.65em;
    background-color: var(--swatch--blue);

    .finder-btn__long,
    .finder-icon {
      display: none;
    }

    .finder-btn__short {
      display: block;
      white-space: nowrap;
    }
  }
}

/*** NAVIGATION **/

.nav-gap {
  padding-top: 6.5em;

  @media all and (max-width: 768px) {
    padding-top: 64px;
  }
}

.header {
  /* One number for the bar's height. The mobile slide-over and the mobile
     menu list both start directly beneath the bar, so they read it from
     here rather than each carrying their own copy that can drift out of
     step with it. */
  --nav--height: 6.5em;

  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  color: var(--swatch--white);
  transition: 0.5s color var(--transition--ease);

  /* --- The bar --- */

  .nav-container {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--nav--height);
    padding: 0 var(--padd--side);

    /* the sliding solid background, scoped to the bar */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      background-color: var(--swatch--grey);
      z-index: -1;
      pointer-events: none;
      opacity: 1;
      transform: translateY(-100%);
      transition: 0.3s transform var(--transition--ease);
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      grid-gap: 1.5em;
      align-items: center;
      height: 100%;
    }
  }

  /* --- Solid state (driven by initNavigationVisibility) --- */

  &.solid {
    color: var(--swatch--black);

    .nav-container::before {
      transform: translateY(0%);
    }
  }

  /* --- Forced solid whenever a panel is open --- */

  &[data-menu-open="true"] {
    color: var(--swatch--black);

    .nav-container::before {
      transform: translateY(0%);
    }
  }

  .logo {
    width: 11em;
    display: flex;
    flex: none;

    @media all and (max-width: 768px) {
      width: 28px;
    }
  }

  .btn-wrapper {
    display: flex;
    align-items: center;
    justify-self: flex-end;
    grid-gap: 2em;
    height: 100%;
  }

  .hamburger_wrap {
    display: none;
  }

  &:hover {
    color: var(--swatch--black);
    .nav-container {
      &::before {
        transform: translateY(0%);
      }
    }
  }

  @media all and (max-width: 768px) {
    --nav--height: 64px;

    .hamburger_wrap {
      display: flex;
    }
  }
}

/* ============================================
   NAV BAR — links & actions
   ============================================ */

.nav-menu {
  grid-gap: 2em;
}

.nav-menu__item {
  display: flex;
  transition: ease opacity 0.2s;

  &:hover {
    height: 100%;
    opacity: 0.6;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nav-link__icon {
  position: relative;
  top: -0.075em;
  width: 1.25em;
  flex: none;
  transition: 0.3s transform var(--transition--ease);
}

.nav-link[aria-expanded="true"] .nav-link__icon {
  transform: rotate(180deg);
}

.nav-back .nav-link.is--back {
  gap: 0.25em;
}

.nav-actions {
  grid-gap: 1em;
}

.nav-actions__item.is--mobile-only {
  display: none;
}

/* The burger's holder. Hidden on desktop; the mobile block turns it on —
   without this the burger has a display:none parent and never appears,
   however visible the burger itself is. */
.nav-bar-end {
  display: none;
}

.nav-back {
  position: absolute;
  left: var(--padd--side);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

/* ============================================
   BACKDROP
   ============================================ */

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   DROPDOWN SHELL
   ============================================ */

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--swatch--black);
}

.nav-dropdown__container {
  position: relative;
  overflow: hidden;
}

.nav-dropdown__bg {
  position: absolute;
  inset: 0;
  background-color: var(--swatch--white);
  will-change: transform;
}

.nav-panel {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

/* Columns stack above the footer; padding lives here so the
   footer's border spans the full panel width. */
.nav-panel__inner {
  display: flex;
  flex-direction: column;
  padding: 4em var(--padd--side) 2em;
}

/* ============================================
   PANEL COLUMNS
   ============================================ */

/* Both the Locations and Courses panels lay their columns out in a row */
.nav-panel__regions,
.nav-panel__columns {
  display: flex;
  align-items: flex-start;
  grid-gap: 2em;
  width: 100%;
}

.nav-panel__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 1em;
  flex: 1;
}

.nav-panel__col.is--narrow {
  flex: 0 0 auto;
  min-width: 22em;
}

.nav-panel__col.is--featured {
  flex: 0 0 auto;
  max-width: 22em;
}

/* The featured card links through — the enrol CTA belongs on the course page */
.nav-panel__col.is--featured .btn-wrapper {
  display: none;
}

.nav-panel__label {
  display: block;
  color: var(--swatch--blue);
}

/* Overrides the blanket .nav-container ul rule */
.header .nav-panel__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  grid-gap: 0.75em;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-panel__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  transition: ease opacity 0.3s;

  &:hover {
    opacity: 0.5;
  }
}

.nav-panel__link-desc {
  opacity: 0.6;
}

/* ============================================
   PANEL FOOTER
   ============================================ */

.nav-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 2em;
  width: 100%;
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--swatch--stroke);

  p {
    margin: 0;
  }
}

.nav-panel__footer-actions {
  display: flex;
  align-items: center;
  grid-gap: 1.5em;
}

.nav-panel__all {
  color: var(--swatch--blue);
  white-space: nowrap;
  transition: ease 0.3s opacity;

  &:hover {
    opacity: 0.6;
  }
}

/* ============================================
   MOBILE
   ============================================ */

@media all and (max-width: 768px) {
  /* Restacking, because the menu list is a full-screen opaque sheet.
     While the bar is a stacking context of its own, that sheet is sealed
     inside it and paints over the slide-over — the panel animates in
     perfectly and is never seen. Giving up the bar's stacking context
     lets the panel rise above the list, and the three things that must
     stay above BOTH are lifted past it one at a time. */
  .header .nav-container {
    z-index: auto;
  }

  .header .logo,
  .nav-bar-end {
    position: relative;
    z-index: 6;
  }

  .nav-back {
    z-index: 6;
  }

  .nav-bar-end {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .header .btn-wrapper {
    position: fixed;
    top: var(--nav--height);
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the slide-over (4), above the bar's background pseudo (-1). */
    z-index: 1;
    /* The bar's rule sets height:100%, which at this size would measure the
       viewport and hang the list 64px past the bottom of the screen. */
    height: auto;
    /* And it sets justify-self:flex-end to push the buttons right in the
       bar. Box Alignment applies justify-self to out-of-flow boxes too, so
       an explicit value here overrides left:0/right:0 with shrink-to-fit
       and pins the whole menu to the right of the screen, width of its
       longest word. Back to stretch, which is what left/right expect. */
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    grid-gap: 0;
    padding: 2em var(--padd--side);
    background-color: var(--swatch--grey);
    color: var(--swatch--black);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
  }

  /* Scoped through .nav-container deliberately. The bar's blanket
     `.nav-container ul` rule is two classes and a type, so a plain
     `.header .nav-menu` loses to it however far down the file it sits —
     these lists would keep the bar's row layout, centred items and full
     height, and spill off the side of the screen. */
  .header .nav-container .nav-menu {
    flex-direction: column;
    align-items: stretch;
    grid-gap: 0;
    width: 100%;
    height: auto;
  }

  .nav-menu__item {
    width: 100%;
  }

  .nav-link {
    justify-content: space-between;
    width: 100%;
    padding: 1em 0;
    border-bottom: 1px solid currentColor;
  }

  .nav-link.is--back {
    justify-content: flex-start;
    border-bottom: none;
  }

  .nav-link__icon,
  [aria-expanded="true"] .nav-link__icon {
    transform: rotate(-90deg);
  }

  .nav-link.is--back .nav-link__icon {
    transform: none;
  }

  .header .nav-container .nav-actions {
    grid-gap: 1em;
    width: 100%;
    height: auto;
    margin-top: auto;
    padding-top: 2em;
  }

  .nav-actions__item {
    flex: 1;
  }

  .nav-actions__item.is--mobile-only {
    display: block;
  }

  .nav-actions .btn {
    width: 100%;
  }

  .nav-back {
    left: var(--padd--side);
  }

  .nav-backdrop {
    display: none;
  }

  /* Dropdown becomes a full-screen slide-over.
     It sits below the bar (z-index 5) so the burger and the Back button
     stay on top of it, and above the menu list it slides over. */
  .nav-dropdown {
    position: fixed;
    top: var(--nav--height);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    overflow: scroll;
  }

  .nav-dropdown__container {
    height: 100%;
    /* The panel travels in from a full width off to the right; without
       this the journey itself is scrollable sideways. */
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .nav-dropdown__bg {
    display: none;
  }

  .nav-panel {
    inset: 0;
    background-color: var(--swatch--grey);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-panel__inner,
  .nav-panel__regions,
  .nav-panel__columns,
  .nav-panel__cards {
    flex-direction: column;
    padding: 0;
  }

  /* Stacked, so align-items now governs width — flex-start would shrink
     every column to its longest link and float the dividers mid-screen. */
  .nav-panel__regions,
  .nav-panel__columns {
    align-items: stretch;
    gap: 0;
  }

  .nav-panel__col {
    gap: 1.5em;
    padding: 2em var(--padd--side);
    border-left: none;
    border-bottom: 1px solid var(--swatch--stroke);
  }

  .nav-panel__col.is--narrow,
  .nav-panel__col.is--colored {
    min-width: 0;
  }

  /* The featured course card is a desktop flourish. On a phone it is a
     large image between the visitor and the list of links they opened the
     menu to reach, so it comes out entirely. */
  .nav-panel__col.is--featured {
    display: none;
  }

  .nav-actions__item.is--desktop-only {
    display: none;
  }

  .nav-panel__regions .nav-panel__col,
  .nav-panel__regions .nav-panel__col:first-child {
    padding-left: var(--padd--side);
    padding-right: var(--padd--side);
  }

  /* The panel's own padding is zero on mobile so each column can draw a
     full-width divider — the footer has to put it back. */
  .nav-panel__footer {
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 1.25em;
    margin-top: 0;
    padding: 2em var(--padd--side);
    border-top: none;
  }

  .nav-panel__footer-actions {
    flex-direction: column;
    align-items: stretch;
    grid-gap: 1em;
    width: 100%;
  }

  .nav-panel__footer-actions .btn {
    width: 100%;
  }

  .nav-panel__cards {
    gap: 0;
  }

  .nav-card {
    border-bottom: 1px solid var(--swatch--stroke);
  }
}

/***** COURSE PANEL ******/

.blur-bg {
  position: fixed;
  inset: 0;
  z-index: 10;
  backdrop-filter: blur(0px);
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition--ease) all 1s;

  &.active {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: all;
    visibility: visible;
  }
}

.panel {
  width: 50vw;
  position: fixed;
  right: 0;
  top: 0;
  height: 100dvh;
  z-index: 11;
  background: var(--swatch--white);
  padding: 0 3em;
  transition: var(--transition--ease) transform 1s;
  transform: translateX(100%);

  &.active {
    transform: translateX(0%);
  }

  .close-panel {
    position: absolute;
    top: 2em;
    right: 2em;
    opacity: 0.6;
    cursor: pointer;
    transition: ease opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }

  .scroll-wrapper {
    padding: 4em 0 8em;
    height: 100%;
    overflow: scroll;
  }

  @media all and (max-width: 768px) {
    width: 100%;
  }
}

.course-finder-form {
  .heading {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 2em;
    grid-gap: 2em;
  }

  .step-nav {
    display: flex;
    grid-gap: 0.25em;
    margin: 1.5em 0 2em;
    counter-reset: step;

    .step-nav__item {
      flex: 1;
      border: 0;
      background: none;
      text-align: left;
      padding-bottom: 0.5em;
      border-bottom: 3px solid var(--swatch--stroke);
      font-size: var(--fs--body);
      color: var(--swatch--mid-grey);
      cursor: pointer;
      counter-increment: step;
      transition:
        ease 0.3s color,
        ease 0.3s border-color;

      &:hover:not(:disabled):not(.is-active) {
        color: var(--swatch--black);
      }

      &::before {
        content: counter(step) " — ";
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
    }

    &[hidden] {
      display: none !important;
    }

    .step-nav__item.is-complete {
      color: var(--swatch--dark-grey);
      border-bottom-color: var(--swatch--dark-grey);
    }

    .step-nav__item.is-active {
      color: var(--swatch--blue);
      border-bottom-color: var(--swatch--blue);
    }
  }

  .course-form {
    position: relative;

    .form-step {
      position: absolute;
      top: 2em;
      left: 0;
      width: 100%;
      padding: 0 1em;
      visibility: hidden;
      opacity: 0;
      transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;

      &.is-active {
        position: relative;
        visibility: visible;
        opacity: 1;
        transition:
          opacity 0.3s ease,
          visibility 0s linear 0s;
      }

      &.form-step--courses {
        padding: 0;

        .subheading {
          color: var(--swatch--blue);
        }

        .course-card .content {
          font-size: 0.85em;
        }
      }

      .heading {
        grid-gap: 0.6em;
        margin-bottom: 2em;
      }
    }

    .grid-3 {
      grid-gap: 1em;
    }

    /* --- Step 1: location --- */
    .location-region {
      display: flex;
      flex-direction: column;
      grid-gap: 1em;
      margin-bottom: 2em;
    }

    .card {
      display: flex;
      flex-direction: column;
      background: var(--swatch--white);
      border-radius: var(--border-radius);
      border: 1px solid var(--swatch--stroke);
      padding: 1.2em 1em 1em;
      grid-gap: 0.25em;
      transition:
        ease 0.3s all,
        font-size 0s ease;

      .title {
      }
      .subheading {
        color: var(--swatch--mid-grey);
      }

      &:hover {
        border-color: var(--swatch--dark-grey);
      }

      &.selected {
        background-color: var(--swatch--blue);
        border-color: var(--swatch--blue);
        color: var(--swatch--white);

        .subheading {
          color: var(--swatch--white);
          opacity: 0.7;
        }

        &:hover {
          border-color: var(--swatch--blue);
        }
      }
    }

    /* --- Step 0: format --- */
    .format-list {
      display: flex;
      flex-direction: column;
      grid-gap: 0.75em;
    }

    .format-card {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      grid-gap: 1em;
      text-align: left;
      padding: 1.25em 1.5em;

      .format-card__body {
        display: flex;
        flex-direction: column;
        grid-gap: 0.3em;
        flex: 1;
      }

      .title {
      }

      .format-card__radio {
        flex-shrink: 0;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        border: 1px solid var(--swatch--stroke);
        transition: ease 0.3s all;
        position: relative;
      }

      /* Selected: blue outline + blue title, white background */
      &.selected {
        background-color: var(--swatch--white);
        border-color: var(--swatch--blue);
        color: var(--swatch--blue);

        .p.grey {
          color: var(--swatch--mid-grey);
        }

        .format-card__radio {
          border-color: var(--swatch--blue);
          background: var(--swatch--blue);

          &::after {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 0.5em;
            height: 0.28em;
            border-left: 2px solid var(--swatch--white);
            border-bottom: 2px solid var(--swatch--white);
            transform: translateY(-15%) rotate(-45deg);
          }
        }

        &:hover {
          border-color: var(--swatch--blue);
        }
      }
    }
  }

  /* --- Step 2: form variants --- */
  .form-variant--in-person,
  .form-variant--online {
    display: none;
  }

  /* --- Step 3: course cards --- */
  .course-list {
    display: grid;
    /* minmax(0, 1fr), NOT a bare 1fr. A bare 1fr means minmax(auto, 1fr), so a
       track can never shrink below its card's min-content width — and when the
       cards are wider than that, the grid overflows its container instead of
       the cards getting narrower. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 1em;

    /* Grid items default to min-width: auto, which is the other half of the
       same trap. */
    > * {
      min-width: 0;
    }
  }

  .panel-footer {
    background: var(--swatch--white);
    border-top: 1px solid var(--swatch--stroke);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2em 2em;

    .back-link {
      opacity: 0.6;
      cursor: pointer;
      transition: ease opacity 0.3s;

      &:hover {
        opacity: 1;
      }

      &.is-hidden {
        visibility: hidden;
        pointer-events: none;
      }
    }

    button {
      border: 0;
      font-size: var(--fs--body);
      background-color: var(--swatch--black);
      color: var(--swatch--white);
      border-radius: 2.5em;
      padding: 0.5em 1.5em 0.4em;
      transition:
        background-color 0.325s var(--btn-ease-hover),
        border-color 0.325s var(--btn-ease-hover);

      &:hover {
        background-color: var(--swatch--blue);
      }

      &:disabled {
        background-color: var(--swatch--stroke);
        color: var(--swatch--mid-grey);
        cursor: not-allowed;
        pointer-events: none;
      }

      &.is-hidden {
        display: none;
      }
    }
  }

  @media all and (max-width: 768px) {
    .heading {
      grid-gap: 20px;
      padding: 0;
    }
    .step-nav {
      margin: 20px 0 10px;
      .step-nav__item {
        font-size: var(--fs--body-sml);
      }
    }

    .form-step {
      .heading {
        margin-bottom: 20px;
      }
    }

    .course-form {
      min-height: 500px;
      .card {
        padding: 12px;
        .title {
          font-size: 15px;
        }
      }
      .grid-3 {
        grid-template-columns: 1fr 1fr;
      }
      .format-card {
        padding: 16px;
      }
    }

    .course-list {
      grid-template-columns: 1fr;
    }
  }
}

.course-finder {
  .grid-2 {
    grid-gap: 0;
  }

  /* Direct children only. `.course-finder .content` also matches the .content
     inside every course card, which handed each card the 1/1.15 aspect ratio
     and made it half again too tall with the buttons stranded at the bottom.
     Same for .media. Anything scoped to the finder's own column must say so. */
  > .grid-2 > .media {
    position: relative;
  }

  > .grid-2 > .content {
    position: relative;
    padding: 4em 3em;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;

    /* This is a .grid-2 item, and a grid item defaults to min-width: auto —
       so anything wide inside it (the two-up course cards) pushes the 1fr
       track past half the section instead of being made to fit. The panel
       never hit this because its form isn't inside a grid. */
    min-width: 0;

    .form-step {
      height: 36em;
      /* Vertical scroll is the intent. Horizontal scroll here is only ever a
         layout bug, and `overflow: scroll` made it a silent one. */
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 8em;
    }

    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  @media all and (max-width: 768px) {
    > .grid-2 > .media {
      display: none;
    }

    > .grid-2 > .content {
      aspect-ratio: unset;
      padding: var(--padd--60) var(--padd--side);

      .form-step {
        height: auto;
        padding: 0 0 8em;
      }
      p,
      .p {
        font-size: 14px;
        margin: 0;
      }

      .panel-footer {
      }
    }
  }
}

/* Footer pins to the viewport only inside the slide-in panel */
.panel .course-finder-form .panel-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

/* Form variant visibility, driven by the format class on the root */
.format-in_person .form-variant--in-person,
.format-flexible .form-variant--in-person {
  display: block;
}

.format-online .form-variant--online {
  display: block;
}

/*** BUTTONS ***/

.btn-wrapper {
  display: flex;
  align-items: center;
  grid-gap: 0.75em;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

:root {
  --btn-color: var(--swatch--white);
  --btn-color-background: var(--swatch--blue);
  --btn-border-color: var(--swatch--blue);
  --btn-hover-color: var(--swatch--white);
  --btn-hover-color-background: var(--swatch--black);
  --btn-hover-border-color: var(--swatch--black);
  --btn-border: 1;
  --btn-color-focus: #var(--swatch--black);
  --btn-padding: 0.75em 1em;
  --btn-border-radius: 2.5em;
  --btn-text-duplicate-distance: 2lh;
  --btn-focus-inset: -0.125em;
  --btn-ease-hover: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --btn-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.btn[data-theme="secondary"] {
  --btn-color: var(--swatch--white);
  --btn-color-background: var(--swatch--black);
  --btn-border-color: var(--swatch--black);
  --btn-hover-color: var(--swatch--white);
  --btn-hover-color-background: var(--swatch--blue);
  --btn-hover-border-color: var(--swatch--blue);
}

.btn[data-theme="ghost"] {
  --btn-color: currentColor;
  --btn-color-background: transparent;
  --btn-border-color: var(--swatch--mid-grey);
  --btn-hover-color: var(--swatch--white);
  --btn-hover-color-background: var(--swatch--black);
  --btn-hover-border-color: var(--swatch--black);
}

.btn {
  -webkit-user-select: none;
  user-select: none;
  color: var(--btn-color);
  background-color: transparent;
  outline-style: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.325s var(--btn-ease-hover);
}

.btn::after {
  content: "";
  display: block;
  position: absolute;
  inset: var(--btn-focus-inset);
  border-radius: var(--btn-border-radius);
  transition: box-shadow 0.3s var(--btn-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.btn:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--btn-color-focus);
}

.btn__inner {
  pointer-events: none;

  /* border: var(--btn-border) solid; */
  z-index: 1;
  padding: var(--btn-padding);
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: clip;
}

.btn__text {
  text-shadow: 0 var(--btn-text-duplicate-distance) 0 currentColor;
  transition: translate 0.3s var(--btn-ease-hover);
  padding-top: 0.15em;
  padding-bottom: 0;
  margin-top: -0.15em;
  margin-bottom: -0.15em;
  font-size: var(--fs--body);
}

.btn__bg {
  pointer-events: none;
  border-radius: var(--btn-border-radius);
  background-color: var(--btn-color-background);
  border: 1px solid var(--btn-border-color);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
  transition:
    background-color 0.325s var(--btn-ease-hover),
    border-color 0.325s var(--btn-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:is(:hover, :focus-visible),
  [data-hover]:is(:hover, :focus-visible) .btn {
    color: var(--btn-hover-color);
  }

  .btn:is(:hover, :focus-visible) .btn__text,
  [data-hover]:is(:hover, :focus-visible) .btn .btn__text {
    translate: 0 calc(var(--btn-text-duplicate-distance) * -1) 0;
  }

  .btn:is(:hover, :focus-visible) .btn__bg,
  [data-hover]:is(:hover, :focus-visible) .btn .btn__bg {
    background-color: var(--btn-hover-color-background);
    border-color: var(--btn-hover-border-color);
  }
}

.hamburger_wrap {
  --thickness: 1px;
  --gap: 6px;
  --rotate: 45;
  --width: 30px;
  position: relative;
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  row-gap: var(--gap);
  margin-left: var(--padd--40);
  transition: transform 0.3s ease;

  @media all and (max-width: 768px) {
  }
}

.hamburger_line {
  flex: 0 0 auto;
  transition: all 0.6s var(--transition--ease);
  background-color: currentcolor;
  height: var(--thickness);
  width: var(--width);

  &:nth-child(2) {
    display: none;
  }
}

.is-active {
  .hamburger_wrap {
    --gap: 0px;
  }

  .hamburger_line {
    transform: scaleX(0);
  }

  .hamburger_line:first-child {
    transform: translateY(calc(var(--thickness) + var(--gap)))
      rotate(calc(var(--rotate) * 3 * 1deg));
  }

  .hamburger_line:last-child {
    transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1))
      rotate(calc(var(--rotate) * 1deg));
  }
}

/*** MOBILE MENU ***/

.mobile-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 4;
  background-color: var(--swatch--black);
  color: var(--swatch--white);
  text-align: center;
  visibility: hidden;
  pointer-events: none;
  height: calc(100dvh - 4.5em);
  width: 100%;

  .wrapper {
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 0.4em;
  }
  .nav-link {
    font-size: 19px;
    text-transform: uppercase;
    font-family: "Untitled Sans";
    letter-spacing: 10%;
    margin-bottom: 0.7em;
  }
  .sub-nav {
    font-size: 19px;
    padding: 0.2em 0;
    letter-spacing: -0.01em;

    span {
      font-style: italic;
    }
  }

  .menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    grid-gap: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
  }

  .btn {
    color: currentColor;
    font-size: 19px;
    padding: 0.6em 2em;
    margin-top: 0.5em;

    &:hover {
      border-color: var(--swatch--white);
    }
  }
}

/*** FOOTER ***/

footer {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-gap: 2em;
  background-color: var(--swatch--black);
  color: var(--swatch--white);
  padding: var(--padd--80) var(--padd--side) 2em;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 1em;
    border-bottom: 1px solid var(--swatch--dark-grey);
    padding-bottom: 2em;

    p {
      max-width: 70%;
    }
  }
  .logo {
    width: var(--padd--80);
    display: flex;
  }

  .container {
    padding: 0;
  }

  .foot-col {
    min-width: 10em;
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
  }

  .btn {
    &:hover {
      color: var(--swatch--black);
      .btn__bg {
        background-color: var(--swatch--white);
        border-color: var(--swatch--white);
      }
    }
  }

  .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;

    display: grid;
    grid-gap: 0.2em;

    a {
      color: var(--swatch--mid-grey);
      transition: ease 0.2s color;

      &:hover {
        color: var(--swatch--white);
      }
    }
  }

  .subscribe-form {
    grid-column-start: 5;
    grid-column-end: 7;
    display: flex;
    flex-direction: column;
    grid-gap: 1em;

    p {
      margin-bottom: 0;
    }

    .subscribe-form__row {
      display: flex;
      align-items: center;
      grid-gap: 0.5em;
      border-bottom: 1px solid
        color-mix(in srgb, var(--swatch--white) 35%, transparent);
      padding-bottom: 0.5em;
      margin: 1.25em 0 0.75em;
      transition: border-color 0.25s var(--btn-ease-hover);

      &:focus-within {
        border-bottom-color: var(--swatch--white);
      }

      /* The footer input is a rule, not a box — the boxed treatment further up
         this file belongs to the light forms and would read as a hole punched
         in the black footer. */
      input[type="email"] {
        flex: 1;
        min-width: 0;
        border: 0;
        background: none;
        padding: 0;
        color: var(--swatch--white);
        font-size: var(--fs--body-sml);

        &::placeholder {
          color: color-mix(in srgb, var(--swatch--white) 55%, transparent);
        }

        &:focus,
        &:focus-visible {
          outline: 0;
          border: 0;
        }
      }

      button {
        flex-shrink: 0;
        border: 0;
        background: none;
        padding: 0;
        margin: 0;
        color: var(--swatch--white);
        font-size: var(--fs--body);
        cursor: pointer;
        line-height: 1;
        transition: opacity 0.25s var(--btn-ease-hover);

        &:hover {
          opacity: 0.6;
        }

        &:disabled {
          opacity: 0.35;
          cursor: default;
        }
      }
    }

    /* Off-screen rather than display:none — a bot that skips hidden fields
       still sees this one, which is the point of a honeypot. */
    .subscribe-form__trap {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .subscribe-form__note {
      margin: 0;
      transition: color 0.25s ease;

      &[data-newsletter-state="error"] {
        color: var(--swatch--yellow);
      }

      &[data-newsletter-state="success"] {
        color: var(--swatch--white);
      }
    }
  }

  .timezones {
    margin-top: 2em;
  }

  .single {
    display: flex;
    flex-direction: column;
    grid-gap: 0.2em;

    .p-sml {
      font-size: 70%;
    }
    .grey {
      color: var(--swatch--mid-grey);
    }
  }

  .subfooter {
    border-top: 1px solid var(--swatch--dark-grey);
    padding-top: 2em;
    display: flex;
    justify-content: space-between;
  }

  .socials {
    display: flex;
    justify-content: flex-end;
    grid-gap: 3em;

    a {
      color: var(--swatch--mid-grey);
      transition: ease 0.2s color;

      &:hover {
        color: var(--swatch--white);
      }
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);

    p {
      max-width: 100%;
    }

    .top {
      position: relative;
      p {
        max-width: 100%;
      }

      .h3 {
        font-size: 22px;
      }
    }

    .logo {
      position: absolute;
      right: 0;
      bottom: 2em;
      width: 30px;
    }

    .single {
      &:nth-child(5),
      &:nth-child(6) {
        display: none;
      }
    }

    .subfooter {
      flex-direction: column;
      grid-gap: 20px;
    }
    .socials {
      justify-content: space-between;
    }
    .subscribe-form {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    .foot-col {
      font-size: 14px;
    }

    .footer-menu {
      grid-gap: 0.4em;
    }
  }
}

/*** UNDERLINE LINKS ****/

.underline {
  text-decoration: none;
  position: relative;
}

.underline::before,
.underline::after {
  content: "";
  position: absolute;
  bottom: -0.1em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

.underline::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

.underline::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .underline:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  .underline:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  .underline:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

.link {
  font-size: var(--fs--body);
}

/***** ACCORDION *****/
.accordion-block {
  padding: var(--padd--100) var(--padd--side);

  .heading {
    margin-bottom: 2em;
  }
  @media all and (max-width: 768px) {
  }
}

.accordion {
  border-bottom: 1px solid var(--swatch--stroke);

  &:last-child {
    border-bottom: 1px solid var(--swatch--stroke);
  }

  .accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: var(--transition--ease) 0.3s padding;
    margin: auto;
    padding: 1em 0 0.9em;

    .icon {
      width: 0.75em;
      transition: var(--transition--ease) 0.6s transform;
      transform: rotate(0deg);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .accordion-body {
    grid-template-rows: 0fr;
    transition: var(--transition--ease) 0.6s all;
    opacity: 0;
    display: grid;
    margin: auto;

    & > div {
      overflow: hidden;
    }
  }

  &.open {
    .accordion-header {
      .icon {
        transform: rotate(45deg);
      }
    }

    .accordion-body {
      grid-template-rows: 1fr;
      opacity: 1;
      padding: 0.5em 0 2em;
    }
  }

  @media all and (max-width: 768px) {
    .p-lrg {
      font-size: var(--fs--body);
    }
  }
}

/***** BACKGROUND VIDEO *****/

/*
   Native <video> background, rendered by
   templates/components/background_video.php.

   Layout is handled entirely by .img-absolute (see the top of this file):
   object-fit: cover, 100% x 100%, position: absolute, inset 0 — applied to the
   ELEMENT, so a <video> carrying that class fills and crops exactly like the
   <img> it replaces.

   Deliberately NOT setting `display` here. .mobile / .desktop switch on
   display at 768px and have the same specificity as .bg-video, so a `display`
   declaration in this block — which sits earlier in the file than they do —
   would be fine today but would break the moment anything reordered. It is
   also unnecessary: position: absolute blockifies the element already.
*/
.bg-video {
  /* Same black the old .vimeo-bg used, so there is no white flash in the
     window between layout and the poster or first frame painting. */
  background-color: var(--swatch--black);

  /* Purely decorative. Without this a right-click over the hero opens the
     browser's video context menu, and clicks land on the video rather than
     passing through to whatever sits behind it. */
  pointer-events: none;
}

/***** VIMEO BG VIDEO (dormant — see js/custom.js initVimeoBGVideo) *****/

.vimeo-bg {
  pointer-events: auto;
  isolation: isolate;
  background-color: var(--swatch--black);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.vimeo-bg__iframe-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
}

.vimeo-bg__before {
  padding-top: 62.5%;
}

.vimeo-bg__iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.vimeo-bg__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  display: block;
  position: absolute;
}

.vimeo-bg[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-bg__placeholder {
  opacity: 0;
  transition-delay: 0.2s;
}

/***** HERO SECTION *****/
.header + .hero-section {
  margin-top: -6.5em;
}
.hero-section {
  position: relative;
  height: 35em;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: var(--padd--side);
  overflow: hidden;
  color: var(--swatch--white);

  &.type-3 {
    flex-direction: column;
    height: auto;
    background: black;
    padding-top: 13em;
    padding-bottom: 10em;

    .content {
      position: relative;
      text-align: center;
      justify-content: center;
      align-items: center;
      max-width: 59em;
      margin: 0 auto;
    }
    .media {
      position: relative;
      margin-top: 7em;
      margin-bottom: -6em;
      width: 100%;
      height: 33em;
    }
  }
  &.is-light {
    background-color: var(--swatch--grey);
    color: var(--swatch--black);
    .p-lrg {
      color: var(--swatch--dark-grey);
    }
  }
  &.is-dark {
    background-color: var(--swatch--black);
    color: var(--swatch--white);
    .p-lrg {
      color: var(--swatch--text-hint);
    }
  }

  .background {
    background-color: var(--swatch--black);
    position: absolute;
    inset: 0;

    /* Hero cross-fade. The incoming studio photo is stacked over the outgoing
       one at opacity 0 and faded up; the old node is only removed once it is
       covered, so there is never a gap. See swapHeroImage() in enrol-panel.js.
       The gradient ::after sits above both, so it never flickers. */
    [data-hero-image] {
      transition: opacity 0.5s ease;
      z-index: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      [data-hero-image] {
        transition: none;
      }
    }

    &::after {
      content: "";
      background: #000000;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 100%
      );
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 20em;
      opacity: 0.5;
    }
  }

  .content {
    position: absolute;
    display: flex;
    flex-direction: column;
    grid-gap: 1em;

    p {
      margin: 0;
    }
  }

  /* The card blurb, repeated on the page the card links to. Capped in width
     so it stays a line or two over the image rather than running the full
     bleed of the hero. */
  .hero__desc {
    max-width: 34em;
  }

  .breadcrumbs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 0.5em;
    color: var(--swatch--yellow);
  }

  .subheading {
    color: var(--swatch--yellow);
  }

  .btn-wrapper {
  }

  .btn {
  }

  .btn[data-theme="secondary"] {
    --btn-color: var(--swatch--black);
    --btn-color-background: var(--swatch--white);
    --btn-hover-color: var(--swatch--white);
    --btn-border-color: var(--swatch--white);
    --btn-hover-color-background: var(--swatch--black);
    --btn-hover-border-color: var(--swatch--black);
  }

  @media all and (max-width: 768px) {
    height: 520px;
    padding: var(--padd--side) var(--padd--side) var(--padd--60);

    &.type-3 {
      padding: 150px var(--padd--side);
      grid-gap: 60px;

      h1 {
        font-size: 30px;
      }

      .content {
        width: 85%;
      }

      .media {
        margin-top: auto;
        margin-bottom: -130px;
        height: 26em;
      }
    }
  }
}

/***** HERO TEXT SECTION *****/

.hero-text-section {
  position: relative;
  padding: var(--padd--40) var(--padd--side);
  display: flex;
  background-color: var(--swatch--white);
  color: var(--swatch--black);

  h1 {
    max-width: 19em;

    i {
      color: var(--swatch--blue);
      font-style: normal;
    }
  }

  @media all and (max-width: 768px) {
    padding-bottom: 70px;

    h1 {
      font-size: 30px;
    }
  }
}

/***** TEXT SECTION *****/

.text-section {
  position: relative;
  padding: var(--padd--side) var(--padd--side) var(--padd--120);
  display: flex;
  background-color: var(--swatch--black);
  color: var(--swatch--white);

  h2 {
    max-width: 26em;
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side) var(--padd--60);

    h2 {
      font-size: 18px;
      line-height: 1.3;
    }
  }
}

/***** SWIPER COMMON *****/

.swiper-pagination-bullet {
  width: 0.8em !important;
  height: 0.8em !important;
  background-color: var(--swatch--white) !important;
  opacity: 0.6 !important;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover {
  opacity: 1 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

.swiper-button-disabled {
  opacity: 0 !important;
}
.swiper-button-prev,
.swiper-button-next {
  display: flex;
  place-items: center;
  margin-top: 0;
  z-index: 2;
  width: 9em;
  height: auto;
  aspect-ratio: 1;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition:
    transform 0.6s var(--transition--ease),
    opacity 0.6s var(--transition--ease);

  svg {
    width: 4em;
    background-color: var(--swatch--white);
    border-radius: 50%;
    height: auto;
    aspect-ratio: 1;
    padding: 1.4em;
  }

  &:hover {
    .swiper-btn {
    }
  }
  @media all and (max-width: 768px) {
    width: auto;
  }
}

.swiper-button-prev {
  left: 0;
  @media all and (max-width: 768px) {
    left: var(--padd--side);
  }
}
.swiper-button-next {
  right: 0;
  @media all and (max-width: 768px) {
    right: var(--padd--side);
  }
}

.swiper-button-lock {
  display: none !important;
}

/*** TESTIMONIALS ****/

.testimonials {
  margin: var(--padd--side) 0;

  .heading {
    padding: 0 var(--padd--side);
  }

  .subheading {
  }

  .testimonials-swiper {
    padding: var(--padd--40) var(--padd--side);
  }

  .swiper-slide {
    margin-right: var(--padd--24);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-gap: var(--padd--24);
    width: auto;

    &:last-child {
      margin-right: 0;
    }
  }

  .quotemark {
    width: 0.875em;
    display: flex;
    color: var(--swatch--blue);
  }

  .video {
    width: 20.25em;
    aspect-ratio: 1 / 1.7;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    .img-absolute {
      transition: ease 0.6s all;
      transform: scale(1);
    }

    &:hover {
      .img-absolute {
        transform: scale(1.05);
      }

      .play-btn {
        transform: scale(0.9);
      }
    }
  }

  .play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    color: var(--swatch--white);
    transition: ease opacity 0.3s;
    justify-content: center;
    align-items: center;
    transition: ease 0.6s all;

    svg {
      width: 2.6em;
    }

    &.hidden {
      opacity: 0;
      pointer-events: none;
    }

    &:hover {
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-gap: 0.5em;

    .p {
      margin: 0;
    }
  }

  hr {
    height: 1px;
    width: 1.5em;
    border: 0;
    border-top: 1px solid currentColor;
    margin: 0 0 0.5em;
  }

  .subheading {
    color: var(--swatch--mid-grey);
  }

  @media all and (max-width: 768px) {
    margin: var(--padd--60) 0 20px;
    .video {
      width: 75vw;
      aspect-ratio: 1 / 1.5;
    }
    .swiper-slide {
      margin-right: 20px;
    }
  }
}

/* IMAGE TEXT SPLIT */

.image-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--padd--100) var(--padd--side);
  grid-gap: var(--padd--side);

  &.reverse {
    .media {
      order: 2;
    }
    .content {
      order: 1;
    }
  }

  .media {
    position: relative;
    aspect-ratio: 1/0.9;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-gap: 3em;

    .heading-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      grid-gap: 1em;
    }
    p {
      margin: 0;
      width: 80%;
      color: var(--swatch--mid-grey);
    }
  }

  .subheading {
    color: var(--swatch--blue);
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;

    &.reverse {
      .media {
        order: 1;
      }
      .content {
        order: 2;
      }
    }

    .content {
      p {
        width: 100%;
      }
    }
  }
}

/**** ACCREDITATIONS ****/

.accreditations {
  display: flex;
  justify-content: space-between;
  margin: var(--padd--side) 0 0;
  padding: var(--padd--60) var(--padd--side);
  border-bottom: 1px solid var(--swatch--stroke);
  .heading {
    padding-right: 10em;

    p {
      color: var(--swatch--mid-grey);
      margin: 0;
    }
    padding-right: 1;
  }
  .media {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2em;
  }
  .item {
    border: 1px solid var(--swatch--stroke);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    padding: 1em 2.5em;
    img {
      width: 7.6em;
    }
  }

  @media all and (max-width: 768px) {
    flex-direction: column;
    grid-gap: 20px;
    .heading {
      padding-right: 0;
    }
    .media {
      grid-gap: var(--padd--side);
    }

    .item {
      padding: 10px 27px;
    }
  }
}

/**** FEATURED LOCATIONS ****/

.featured-locations {
  margin: 0;
  padding: var(--padd--side) var(--padd--side);
  background: var(--swatch--black);
  color: var(--swatch--white);

  .heading {
  }

  .subheading {
  }

  .list {
    display: flex;
    flex-direction: column;
    margin: var(--padd--side) 0;
  }

  .item-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    &:hover {
      .overlay {
        transform: translateY(0em);
        opacity: 1;
      }
    }
  }
  .item {
    width: 100%;
    text-align: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.4em 1em 1em;
    border-bottom: 1px solid
      color-mix(in srgb, var(--swatch--mid-grey) 50%, transparent);
    transition: 0.5s color var(--transition--ease);

    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background-color: var(--swatch--yellow);
      transition: 0.5s transform var(--transition--ease);
      transform: translateY(101%);
    }

    &:hover {
      color: var(--swatch--black);

      &:before {
        transform: translateY(0%);
      }
    }
  }

  .title {
    font-size: 4em;
    text-transform: uppercase;
  }

  .overlay {
    position: absolute;
    right: 2em;
    width: 21em;
    transform: translateY(-1em);
    opacity: 0;
    pointer-events: none;
    transition:
      0.4s transform var(--transition--ease),
      0.3s opacity var(--transition--ease);
  }

  .media {
    position: relative;
    height: 10em;
  }

  .content {
    background: #131313;
    padding: 1em 1em 0.7em;
    .subheading {
      opacity: 0.5;
    }
  }

  .overlay-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size: var(--fs--body);

    svg {
      width: 1.5em;
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
    .title {
      font-size: 44px;
    }
    .overlay {
      display: none;
    }
  }
}

/***** FEATURED COURSES *****/

.featured-courses {
  padding: var(--padd--100) 0;
  display: flex;
  flex-direction: column;
  grid-gap: 2em;

  .heading {
    padding: 0 var(--padd--side);
    grid-gap: 5em;

    p {
      color: var(--swatch--text-secondary);
      width: 80%;
      margin: 0;
      padding-left: 5em;
      padding-right: 3em;
    }
  }

  .courses-swiper {
    padding: 0 var(--padd--side);
    width: 100%;

    .swiper-slide {
      height: auto;
    }

    .course-card {
      background-color: var(--swatch--white);
      height: 100%;
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) 0;
    .heading {
      flex-direction: column;
      grid-gap: 10px;
      align-items: flex-start;

      h2 {
        font-size: 22px;
      }

      p {
        padding-left: 0;
        padding-right: 0;
        width: 100%;

        font-size: var(--fs--body-sml);
      }
    }

    .courses-swiper {
      .swiper-slide {
        width: 75vw;
      }
    }
  }
}

.tab-wrapper {
  padding: 0 var(--padd--side);
  display: flex;
  justify-content: space-between;
  grid-gap: 1em;

  .tabs {
    display: flex;
    grid-gap: 1em;
  }

  .tab {
    color: var(--swatch--mid-grey);
    transition: color 0.735s cubic-bezier(0.625, 0.05, 0, 1);

    &::before,
    &::after {
      bottom: 0.3em;
    }

    &::before {
      transform: scaleX(0) rotate(0.001deg);
    }

    &.active {
      color: var(--swatch--blue);

      &::before {
        transform: scaleX(1) rotate(0.001deg);
      }
    }

    &:hover {
      color: var(--swatch--blue);
    }
  }
}

/***** COURSE CARD ******/

.black-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: #000000;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}

.course-header {
  padding: var(--padd--side) var(--padd--side) 0;
}
.courses-wrapper {
  padding: var(--padd--side) var(--padd--side);
}

.course-card {
  background: var(--swatch--grey);
  display: flex;
  flex-direction: column;

  .media {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* height: 18em; */
    aspect-ratio: 1 / 0.55;
  }

  .head {
    position: absolute;
    top: 1em;
  }
  .location {
    text-transform: uppercase;
    font-size: 1.8em;
    background-color: var(--swatch--yellow);
    padding: 0.2em 0.3em 0.03em;
    position: relative;
  }
  .inner {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 1em;
    width: 100%;
    text-align: center;
    color: var(--swatch--white);
  }

  .content {
    padding: 1.25em 1em 1.5em;
    display: flex;
    flex-direction: column;
    grid-gap: 0.8em;
    height: 100%;
  }

  .btn-wrapper {
    margin-top: auto;
  }

  p {
    margin: 0;
    color: var(--swatch--text-secondary);
    width: 95%;
  }

  .price {
    font-size: 1.65em;
  }

  .course-card__head {
    display: flex;
    flex-direction: column;
    grid-gap: 0.3em;
  }

  .course-card__price {
    display: flex;
    align-items: flex-end;
    grid-gap: 0.5em;

    /* Figure and currency share one baseline: "2,499 AUD" */
    .price-wrap {
      display: flex;
      align-items: baseline;
      grid-gap: 0.3em;
    }

    .currency {
    }

    /* The anchor repeats the figure only — the currency is stated once
       above it, and saying it twice reads as two separate prices. */
    .price-anchor {
      font-size: 0.9em;
      opacity: 0.5;
      text-decoration: line-through;
      position: relative;
      margin-bottom: 0.1em;
    }
  }

  .course-card__meta {
    display: flex;
    align-items: baseline;
    grid-gap: 0.4em;
    flex-wrap: wrap;
    color: var(--swatch--blue);
  }

  .course-card__format {
    display: inline-flex;
    align-items: baseline;
    grid-gap: 0.4em;
  }

  @media all and (max-width: 768px) {
    .course-card__desc,
    .course-card__dates,
    .btn__text {
      font-size: 14px;
    }
    .h4 {
      font-size: 22px;
    }
    .subheading {
      font-size: 11px;
    }

    .price {
      font-size: 20px;
    }
  }
}

/**** SINGLE LOCATION ****/

.single-locations {
  .hide-location {
    display: none;
  }
}

/***** TICKER TAPE ******/

.marquee-css {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  color: var(--swatch--black);

  &.black-bg {
    background-color: var(--swatch--black);
    color: var(--swatch--white);
  }
  &.yellow-bg {
    background-color: var(--swatch--yellow);
  }
  &.blue-bg {
    background-color: var(--swatch--blue);
    color: var(--swatch--white);
  }
  &.white-bg {
    background-color: var(--swatch--white);
  }
}

.marquee-css__list {
  flex: none;
  align-items: center;
  display: flex;
  position: relative;
}

.marquee-css__item {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex: 1;
  align-items: center;
  padding-top: 1.2em;
  padding-bottom: 1em;
  padding-right: 4em;
  display: flex;

  img {
    width: 13em;
  }
}

.marquee-css__item-p {
  white-space: nowrap;
  margin-bottom: 0;
  line-height: 1;
}

.marquee-css__item-svg {
  width: 1em;
}

/* CSS Keyframe Animation */
@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateX 30s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/***** LOCATION MAP *****/

.location-map {
  margin: 0;
  padding: var(--padd--100) var(--padd--side);

  .grid-2 {
    grid-gap: var(--padd--100);
  }

  .media {
    width: 100%;
    min-height: 30em;
  }

  .acf-map {
    width: 100%;
    height: 100%;
  }

  .subheading {
    color: var(--swatch--blue);
  }

  .hflex {
    display: flex;
    grid-gap: 1em;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-gap: 2em;
    width: 90%;

    .heading-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      grid-gap: 0.2em;
    }
    p {
      margin: 0;
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
    .grid-2 {
      grid-template-columns: 1fr;
      grid-gap: 40px;
    }
    .content {
      grid-gap: 16px;
      width: 100%;
    }
  }
}

/***** FORM & IMAGE *****/

.form-text {
  padding: var(--padd--80) var(--padd--side);
  margin: var(--padd--100) 0;

  .h4 {
  }

  .heading {
    grid-gap: 2em;
    width: 85%;
  }

  .form-wrapper {
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
    margin: 0 0;

    .grid-2 {
      grid-gap: 40px;
    }

    .heading {
      grid-gap: 20px;
      width: 100%;
    }
    .h4 {
      width: 100%;
      font-size: var(--fs--body);
    }
  }
}

/***** CONTACT FORMS *****/

.grecaptcha-badge {
  visibility: hidden !important;
}

.form-wrapper {
  width: 100%;

  .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-gap: 1.25em 0;
  }

  .wpforms-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-gap: 0.4em;
    font-size: var(--fs--body-sml);
  }

  .half-width {
    width: calc(50% - 1em);
  }

  .wpforms-required-label {
    display: none;
  }

  .wpforms-submit-container {
    position: relative;

    .wpforms-hidden {
      display: none !important;
      visibility: hidden !important;
    }

    img {
      position: absolute;
      right: 0.5em;
      width: 1.25em;
      object-fit: contain;
    }
  }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;

    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      grid-gap: 0.75em;
      margin: 1em 0 0;
      padding: 0;
    }

    li {
      margin: 0;
      display: flex;
    }

    input[type="radio"],
    input[type="checkbox"] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    label {
      cursor: pointer;
      font-size: var(--fs--body);
      color: var(--swatch--black);
      background-color: transparent;
      border: 1px solid var(--swatch--stroke);
      border-radius: 0.5em;
      padding: 0.5em 1.5em 0.4em;
      transition:
        background-color 0.325s var(--btn-ease-hover),
        border-color 0.325s var(--btn-ease-hover),
        color 0.325s var(--btn-ease-hover);
    }

    input:not(:checked) + label:hover {
      border-color: var(--swatch--black);
    }

    input:checked + label {
      background-color: var(--swatch--white);
      border-color: var(--swatch--blue);
      color: var(--swatch--black);
    }

    input:focus-visible + label {
      outline: 2px solid var(--swatch--black);
      outline-offset: 2px;
    }
  }

  /*
   * A REAL CHECKBOX, not one of the pill choices.
   *
   * DORMANT SINCE 2026-09-02. Written for the marketing-consent tick, which
   * Isaac then dropped from all five forms and the checkout, so as things stand
   * nothing on the site carries either class and none of this matches. Kept
   * because it is not consent-specific: any single WPForms checkbox that should
   * read as a checkbox rather than a chip needs exactly this, and re-deriving it
   * means re-deriving every undo below.
   *
   * The fieldset rules above visually hide the input and turn its label into a
   * bordered pill. That is right for "Where are you on your journey?", where the
   * label IS the control. It is wrong for a tick-to-agree: the box itself is
   * what is being agreed to, and a pill gives no affordance that it can be left
   * unticked.
   *
   * Restores a native checkbox matching .checkbox-row in the checkout.
   *
   * To use: put `ibe-consent` in the field's Advanced -> CSS Classes. The second
   * selector is the CRM tag a consent field would carry anyway, so consent works
   * again with no form edit if it is ever switched back on.
   */
  .wpforms-field.ibe-consent,
  .wpforms-field[class*="ibe-lead-marketing"] {
    /*
     * No visible field label. The choice label beside the box already carries
     * the whole consent statement, so a "Subscribe" legend above it just names
     * the same thing twice.
     *
     * Visually hidden (the .sr-only treatment) rather than display:none, so the
     * fieldset keeps an accessible name — a screen reader still announces the
     * group before reading the statement. Applied here rather than through
     * WPForms' own Hide Label toggle so every consent field behaves the same
     * without per-form configuration; it is also harmless if that toggle is on.
     */
    fieldset legend.wpforms-field-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    fieldset ul {
      display: block;
      margin: 0;
    }

    /* flex-start, not center. The consent sentence wraps to three or four
       lines on a phone, and a centred box floats halfway down the paragraph
       with nothing beside it. The nudge below re-centres it on the FIRST line,
       which is where a checkbox is read from. */
    fieldset li {
      display: flex;
      align-items: flex-start;
      grid-gap: 0.6em;
    }

    /* Undoes the visually-hidden treatment above, field by field — the input
       has to be back in flow before any of the sizing applies. */
    fieldset input[type="checkbox"] {
      position: static;
      width: 1.1em;
      height: 1.1em;
      margin: 0;
      overflow: visible;
      clip-path: none;
      flex-shrink: 0;
      margin-top: 0.15em;
      accent-color: var(--swatch--blue);
      cursor: pointer;
    }

    /* --fs--body, not --fs--body-sml: .wpforms-field already sets the small
       size on the wrapper, and both are relative units, so asking for small
       again compounds to ~0.65em and the consent line ends up noticeably
       smaller than every other label on the form. */
    fieldset label {
      cursor: pointer;
      font-size: var(--fs--body);
      color: var(--swatch--black);
      background-color: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      transition: none;
    }

    fieldset input:checked + label,
    fieldset input:not(:checked) + label:hover {
      background-color: transparent;
      border: 0;
      color: var(--swatch--black);
    }

    /* The focus ring belongs on the box now that the box is visible. */
    fieldset input:focus-visible + label {
      outline: 0;
    }

    fieldset input[type="checkbox"]:focus-visible {
      outline: 2px solid var(--swatch--black);
      outline-offset: 2px;
    }
  }

  /* select is deliberately absent — it is styled once, globally, at the foot
     of this file. Adding it back here reintroduces a competing definition. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    border: 1px solid
      color-mix(in srgb, var(--swatch--mid-grey) 40%, transparent);
    border-radius: var(--border-radius);
    padding: 0.8em 0.8em 0.7em;
    width: 100%;

    &::placeholder,
    .placeholder,
    option[disabled] {
      color: #8c8c8c;
      opacity: 1;
    }

    &:focus-visible,
    &:focus,
    &:active {
      outline: 0;
      border: 1px solid var(--swatch--blue);
    }
  }

  button {
    border: 0;
    font-size: var(--fs--body);
    background-color: var(--swatch--black);
    color: var(--swatch--white);
    border-radius: 2.5em;
    padding: 0.5em 1.5em 0.4em;
    margin-top: 1.5em;
    transition:
      background-color 0.325s var(--btn-ease-hover),
      border-color 0.325s var(--btn-ease-hover);

    &:hover {
      background-color: var(--swatch--blue);
    }
  }

  @media all and (max-width: 768px) {
    .half-width {
      width: calc(100%);
    }

    fieldset label,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      font-size: 14px;
    }
  }
}

/**** WELCOME PAGE ****/

.welcome-status {
  max-width: 60em;
  margin: 0 auto;
  padding: 8em var(--padd--side);
  text-align: center;

  .welcome-steps {
    list-style: none;
    padding: 0;
    margin: 3em 0;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .welcome-step {
    display: flex;
    align-items: center;
    grid-gap: 0.75em;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    flex-direction: column;
    border: 1px solid var(--swatch--light-blue);
    border-radius: 1em;
    padding: 2em 1em;

    .welcome-step__label {
      font-size: 0.8em;
    }

    .welcome-step__tick {
      flex-shrink: 0;
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
      border: 2px solid var(--swatch--stroke);
      position: relative;
      transition: all 0.3s ease;
    }

    .loading-icon {
      animation: loadingRotate 1s linear infinite;
      transition: all 0.3s ease;
    }

    &.is-done {
      opacity: 1;

      .welcome-step__tick {
        background: var(--swatch--blue);
        border-color: var(--swatch--blue);

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          margin: auto;
          width: 0.5em;
          height: 0.28em;
          border-left: 2px solid var(--swatch--white);
          border-bottom: 2px solid var(--swatch--white);
          transform: translateY(-15%) rotate(-45deg);
        }
      }

      .loading-icon {
        opacity: 0;
      }
    }
  }

  .welcome-actions {
    display: flex;
    flex-direction: column;
    grid-gap: 0.75em;
    margin: 1.5em 0;
  }
}

@keyframes loadingRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**** COMMUNITY INVITE PAGE ****/

/*
 * The invite page is the welcome page's status block with a different number
 * of steps, so page-community-invite.php carries .welcome-status as well and
 * inherits the layout, the spinner and the .is-done tick. Only the
 * differences live here.
 */

.community-invite {
  /* The heading carries the theme's .heading utility for its 0.5em stack gap,
     but that utility is a flex column packed to flex-start — so the title and
     intro sit hard left inside a block whose text is centred. Only align-items
     needs correcting; text-align is already inherited from .welcome-status. */
  .welcome-status__heading {
    align-items: center;
  }

  .welcome-steps {
    /* Two steps, not four. On the four-column grid the pair sits marooned
       against the left edge of a centred block. */
    grid-template-columns: 1fr 1fr;
    max-width: 34em;
    margin-inline: auto;
  }

  /* The closing line is revealed once both steps resolve — see
     initCommunityInvite(). It starts hidden, so nothing here applies until
     the attribute is removed. */
  .welcome-note {
    opacity: 0;
    transform: translateY(0.5em);
    transition:
      opacity 0.5s ease,
      transform 0.5s ease;

    &.is-visible {
      opacity: 1;
      transform: none;
    }
  }
}

@media all and (max-width: 560px) {
  .community-invite .welcome-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* initCommunityInvite() skips the sequence entirely under this setting and
     shows the finished state, so there is nothing left to animate. */
  .community-invite .welcome-note {
    transition: none;
  }
}

/***** JOURNAL — RESOURCES LISTING *****/

.journal-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 26em;
  padding: var(--padd--60) var(--padd--side);
  overflow: hidden;
  color: var(--swatch--white);

  .journal-hero__bg {
    position: absolute;
    inset: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .journal-hero__content {
    position: relative;
    z-index: 1;

    h1 {
      margin: 0;
    }
  }

  @media all and (max-width: 768px) {
    min-height: 18em;
  }
}

.journal-filters {
  padding: 1.25em var(--padd--side);
  border-bottom: 1px solid var(--swatch--stroke);
  background: var(--swatch--grey);

  .journal-filters__inner {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.6em;
  }

  /* The pills scroll rather than wrap on a phone — six categories wrapping to
     three rows pushes the first article below the fold. */
  @media all and (max-width: 768px) {
    padding: 1em var(--padd--side);

    .journal-filters__inner {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}

/*
 * The radio itself is visually hidden but still focusable and still the thing
 * being checked — the label is the visible control. Keeping a real input means
 * arrow keys move through the group and a screen reader announces it as a set
 * of radios, which a div with a click handler cannot do.
 */
.filter-pill {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;

  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
  }

  span {
    display: block;
    padding: 0.55em 1.2em 0.45em;
    border: 1px solid var(--swatch--stroke);
    border-radius: 100em;
    background: var(--swatch--white);
    white-space: nowrap;
    transition:
      background-color 0.25s var(--btn-ease-hover),
      border-color 0.25s var(--btn-ease-hover),
      color 0.25s var(--btn-ease-hover);
  }

  input:not(:checked) + span:hover {
    border-color: var(--swatch--black);
  }

  input:checked + span {
    background: var(--swatch--blue);
    border-color: var(--swatch--blue);
    color: var(--swatch--white);
  }

  /* The ring goes on the label, because the input it belongs to has no size. */
  input:focus-visible + span {
    outline: 2px solid var(--swatch--black);
    outline-offset: 2px;
  }
}

.journal-results {
  padding: var(--padd--60) var(--padd--side) var(--padd--80);
  display: flex;
  flex-direction: column;
  grid-gap: var(--padd--30);
  background-color: var(--swatch--grey);

  .article-card {
    .content {
      background: var(--swatch--white);
    }
  }
}

.journal-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--swatch--white);
  border-top: 3px solid var(--swatch--blue);

  .media {
    position: relative;
    display: block;
    /* Ratio not a fixed height, so the panel beside it can grow with its copy
       without the image letterboxing. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--swatch--grey);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-gap: 0.75em;
    padding: 2.5em;
  }

  .journal-featured__category {
    color: var(--swatch--blue);
  }

  .journal-featured__title {
    margin: 0;

    a {
      color: inherit;
      text-decoration: none;
    }

    &:hover a {
      color: var(--swatch--blue);
    }
  }

  p {
    margin: 0;
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;

    .content {
      padding: 1.5em;
    }
  }
}

/*
 * The tiles the filter animates. GSAP writes display/opacity/transform onto
 * these, so nothing here may set those properties — a stylesheet rule would
 * fight the inline styles the timeline is writing.
 */
.journal-grid__item {
  display: flex;

  .article-card {
    width: 100%;
  }
}

.journal-empty {
  padding: var(--padd--30) 0;
  text-align: center;
}

/***** SINGLE POST — RESOURCES ARTICLE *****/

/*
 * Two widths, one column. The reading measure is narrow; feature and
 * full-width images break out of it. --article-measure is the single place to
 * change how wide the prose sits.
 */

.article-single {
  /* Matched to the mockup, where the prose sits only slightly inside the
     images rather than in a narrow column. Drop --article-measure to ~50em for
     a classic ~75-character reading measure; the two variables are the only
     place widths are set. */
  --article-measure: 66em;
  --article-wide: 72em;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padd--80) var(--padd--side);

  > * {
    width: 100%;
    max-width: var(--article-measure);
  }

  .article-single__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 0.75em;
    text-align: center;
    margin-bottom: 2.5em;
  }

  .article-single__category {
    color: var(--swatch--blue);
  }

  .article-single__title {
    margin: 0;
  }

  .article-single__meta {
    display: flex;
    grid-gap: 0.5em;
    margin: 0;
  }

  .article-single__feature {
    margin: 0 0 3em;

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .article-single__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 3em;
    max-width: none;
  }

  .article-block {
    width: 100%;
    max-width: var(--article-measure);
  }

  /*
   * Images break the reading measure — the prose stays narrow, the pictures do
   * not. This MUST stay below the .article-block rule above: same specificity,
   * so source order decides, and above it the wider value silently lost and
   * every image rendered at text width.
   */
  .article-single__feature,
  .article-block--image,
  .article-block--dual {
    /* max-width: var(--article-wide); */
  }

  /* The WYSIWYG. Rules here rather than on bare elements so the editor's output
     is styled without reaching outside the article. */
  .article-block--content {
    :first-child {
      margin-top: 0;
    }

    :last-child {
      margin-bottom: 0;
    }

    h2,
    h3,
    h4,
    h5 {
      margin: 1.5em 0 0.5em;
    }

    p {
      margin: 0 0 1em;
    }

    /*
     * Bullets and numbers flush with the body text, wrapped lines indented —
     * a hanging indent.
     *
     * The default `list-style-position: outside` puts the marker in the list's
     * left padding, so it only lines up with the text if you know the browser's
     * marker-box width, which you do not. `inside` puts the marker in the line
     * box where it can be reasoned about: padding-left moves the whole item
     * right by --marker-gap, and text-indent pulls the FIRST line — the one
     * carrying the marker — back by the same amount. Net effect: the marker
     * lands on the text's left edge and continuation lines sit clear of it.
     *
     * Native markers kept rather than faked with ::before, so list semantics,
     * `start` and reversed lists all still work.
     */
    ul,
    ol {
      --marker-gap: 1.4em;

      margin: 0 0 1em;
      padding-left: 0;
      list-style-position: inside;
    }

    li {
      padding-left: var(--marker-gap);
      text-indent: calc(var(--marker-gap) * -1);
      margin-bottom: 0.35em;

      /* A nested list starts from its parent's text, not the page edge. */
      ul,
      ol {
        margin: 0.35em 0 0;
        padding-left: 0;
      }
    }

    a {
      color: var(--swatch--blue);
      text-decoration: underline;
    }

    img {
      max-width: 100%;
      height: auto;
    }
  }

  .article-figure {
    margin: 0;

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    figcaption {
      display: block;
      margin-top: 0.75em;
    }
  }

  /* Two up, per the mockup. minmax(0, 1fr) not 1fr: a track can never shrink
     below its content's min-content width, and a wide image would push the pair
     past the container instead of scaling down. */
  .article-block--dual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: var(--padd--side);

    /*
     * Shape comes from the `image_size` select on the dual_image layout, which
     * single.php emits as is--{value}. No fixed heights anywhere: the ratio is
     * declared and the height follows the column width, so the pair keeps its
     * shape at every breakpoint and on any screen.
     *
     * object-fit: cover is what makes a declared ratio safe — the image fills
     * the box and crops rather than stretching, so an upload that is not
     * already this shape still looks right.
     */
    &.is--portrait img {
      aspect-ratio: 1 / 1.3;
      object-fit: cover;
    }

    &.is--square img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

    &.is--landscape img {
      aspect-ratio: 1 / 0.7;
      object-fit: cover;
    }
  }

  @media all and (max-width: 768px) {
    padding-top: var(--padd--60);

    .article-single__body {
      grid-gap: 2em;
    }

    /* Side by side is unreadable at phone width — captions wrap to four lines
       under thumbnails. Stacked, each image keeps the full measure. */
    .article-block--dual {
      grid-template-columns: 1fr;
      grid-gap: 2em;
    }
  }
}

/***** RELATED ARTICLES *****/

.related-articles {
  padding: var(--padd--80) var(--padd--side);
  border-top: 1px solid var(--swatch--stroke);
  margin-top: var(--padd--80);

  .related-articles__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    grid-gap: 1em;
    margin-bottom: 2em;

    h2 {
      margin: 0;
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
  }
}

.article-card {
  display: flex;
  flex-direction: column;

  .media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--swatch--grey);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 0.5em;
    padding: 1.25em;
    background: var(--swatch--grey);
    flex: 1;
  }

  .article-card__category {
    color: var(--swatch--blue);
  }

  .article-card__title {
    margin: 0;

    a {
      color: inherit;
      text-decoration: none;
    }

    &:hover a {
      color: var(--swatch--blue);
    }
  }

  .article-card__excerpt {
    margin: 0;
    font-size: var(--fs--body-sml);
  }

  /* Pushes the button to the bottom so a row of cards with different excerpt
     lengths still lines its buttons up. */
  .btn {
    margin-top: auto;
  }
}

/***** SINGLE COURSE PAGES *****/

.course-subnav {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--swatch--stroke);
  padding-bottom: 1em;
  margin: 5em var(--padd--side) 4em;

  &.grey-bg {
    padding: 2em var(--padd--side);
    margin: 0;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    grid-gap: 2em;
  }
  li {
  }

  .underline::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
  }

  .underline::after {
    transform-origin: left;
    transform: scaleX(0) rotate(0.001deg);
  }

  @media (hover: hover) and (pointer: fine) {
    .underline:hover::before {
      transform-origin: right;
      transform: scaleX(1) rotate(0.001deg);
    }

    .underline:hover::before {
      transform-origin: left;
      transform: scaleX(1) rotate(0.001deg);
    }

    .underline:hover::after {
      transform-origin: right;
      transform: scaleX(0) rotate(0.001deg);
    }
  }
  .underline {
    color: var(--swatch--text-secondary);
    transition: color 0.3s ease;
    &:hover {
      color: var(--swatch--blue);
    }
  }

  @media all and (max-width: 768px) {
    margin: var(--padd--side) 0;
    padding: 0 var(--padd--side) var(--padd--side);
    overflow: scroll;

    &.grey-bg {
      padding: var(--padd--side);
      margin: 0;
    }

    .underline {
      white-space: nowrap;
    }
  }
}

.course-content {
  margin: 4em var(--padd--side);

  .grid-2 {
    grid-template-columns: 2fr 1fr;
  }
  .inner {
    display: flex;
    flex-direction: column;
    grid-gap: var(--padd--60);

    h2,
    .h2 {
      margin-bottom: 0.3em;
    }
    p {
      max-width: 85%;
      color: var(--swatch--text-secondary);

      strong {
        color: var(--swatch--black);
        font-weight: 500;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .at-a-glance {
    .grid-3 {
      margin-top: 1em;
      grid-gap: 1em;
    }
    .item {
      background: var(--swatch--grey);
      padding: 1.5em 1.25em;
      border-radius: 0.5em;
      display: flex;
      flex-direction: column;
      grid-gap: 0.75em;
    }
    .subheading {
      color: var(--swatch--text-secondary);
    }
  }

  .key-callouts {
    .grid-3 {
      margin-top: 1em;
      grid-gap: 1em;
    }
    .item {
      border-top: 2px solid var(--swatch--blue);
      display: flex;
      flex-direction: column;
      grid-gap: 0.75em;
      padding-top: 1em;

      p {
        max-width: 96%;
      }
    }
  }

  .outcomes {
    .grid-2 {
      margin-top: 1.2em;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1.5em 1em;
    }
    .item {
      border-left: 2px solid var(--swatch--blue);
      padding-left: 1em;
    }
  }

  .dot-points {
    .list {
      margin: 1em 0 0;
      padding-left: 0.8em;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 0.5em 2em;
    }

    li {
      &::marker {
        color: var(--swatch--blue);
      }
    }
  }

  .contact-form-block {
    .heading {
      margin-bottom: 2em;
    }
  }

  .accordion-block {
    padding: 0;
    ul {
      margin: 0 0 1em;
      padding: 0 0 0 1.2em;
      li {
        color: var(--swatch--dark-grey);
        opacity: 0.7;
      }
    }
  }
  .location-map {
    padding: 0;
    margin: 0;
    background-color: transparent;

    .media {
      min-height: 17em;
    }

    h2,
    .h2 {
      margin-bottom: 0.5em;
    }

    .grid-2 {
      grid-template-columns: 1fr 1fr;
      grid-gap: var(--padd--60);
    }

    p {
      max-width: unset;
    }
  }

  .inner.mobile {
    display: none;
    grid-row-start: 1;
  }

  @media all and (max-width: 768px) {
    margin: var(--padd--60) var(--padd--side);

    .grid-2 {
      grid-template-columns: 1fr;
      grid-gap: 60px;
    }
    .inner {
      h2,
      .h2,
      h3,
      .h3 {
        font-size: 22px;
      }
      p {
        max-width: 100%;
      }
    }

    #course-overview {
      display: none;
    }

    .inner.mobile {
      display: flex;
    }
    .outcomes {
      .grid-2 {
        grid-template-columns: 1fr;
        grid-gap: 16px;
      }
    }

    .dot-points {
      .list {
        grid-template-columns: 1fr;
        grid-gap: 16px;
      }
    }

    .accordion-block {
      padding: 0;
    }

    .location-map {
      .grid-2 {
        grid-template-columns: 1fr;
        grid-gap: var(--padd--60);
      }
    }
  }
}

.enrolment-details {
  position: sticky;
  top: 10em;
  align-self: flex-start;
  background-color: var(--swatch--grey);
  padding: 1.5em;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  grid-gap: 1em;

  .opacity-60 {
    color: var(--swatch--dark-grey);
    opacity: 0.7;
  }

  /* FROM / price line / payment plan — three stacked rows. */
  .heading {
    display: flex;
    flex-direction: column;
    grid-gap: 0.35em;
  }

  /* The price line reads as one sentence: figure, currency, struck anchor.
     Baseline alignment keeps the small type sitting on the big type's feet
     rather than floating at its centre. */
  .price-wrap {
    display: flex;
    align-items: baseline;
    grid-gap: 0.35em;
    flex-wrap: wrap;
  }

  .price {
    margin: 0;
    line-height: 1;
  }

  .currency {
    font-size: 0.9em;
    letter-spacing: 0.04em;
  }

  /* Bare figure, struck through — the currency is already stated once to its
     left, and repeating it reads as two unrelated prices. */
  .price-anchor {
    font-size: 1.1em;
    color: var(--swatch--dark-grey);
    opacity: 0.7;

    s {
      text-decoration: line-through;
    }
  }

  .p-sml {
    font-size: 0.9em;
  }

  .enrolment-details__selects {
    display: flex;
    flex-direction: column;
    grid-gap: 1em;
  }

  /* .course-date-select needs no rules — the global select styling at the
     foot of this file already covers it. The class stays in the markup
     because custom.js binds its change handler to it. */
  .details {
    border-top: 1px solid var(--swatch--mid-grey);
    border-bottom: 1px solid var(--swatch--mid-grey);
    display: flex;
    flex-direction: column;
    grid-gap: 0.6em;
    padding: 1em 0;
  }
  .info {
    display: flex;
    justify-content: space-between;
  }
  .btn-wrapper {
    flex-direction: column;
    .btn {
      width: 100%;
    }
  }

  @media all and (max-width: 768px) {
    position: relative;
    top: 0;
    order: 1;
    grid-row-start: 2;
    padding: 20px;
  }
}

/***** BOOK A CALL *****/

.book-call {
  background-color: var(--swatch--black);
  color: var(--swatch--white);
  padding: var(--padd--80) var(--padd--side);

  h3 {
  }

  .content {
    margin-top: 2em;
    display: flex;
    align-items: stretch;
    grid-gap: var(--padd--24);
  }

  .media {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 40%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .caption {
      background-color: rgba(255, 255, 255, 0.7);
      color: var(--swatch--black);
      position: absolute;
      bottom: 0.5em;
      left: 0.5em;
      right: 0.5em;
      padding: 2em 1em;
      text-align: center;
      border-radius: 0.5em;
    }
  }

  .widget {
    grid-column: span 2;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
    .content {
      margin-top: 0;
    }
    .media {
      display: none;
    }
  }
}

.three-column {
  grid-gap: 2em;
  margin: 0;
  padding: var(--padd--80) var(--padd--side);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--padd--30);

  .item {
    background: var(--swatch--white);
    border-top: 3px solid var(--swatch--blue);
    padding: var(--padd--30);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 14em;
  }
  .subheading {
    margin-bottom: 0.75em;
  }
  .subheading,
  .underline {
    color: var(--swatch--blue);
  }

  .underline {
    margin-top: auto;
  }

  &.white-bg {
    margin: var(--padd--80) 0;
    padding: 0 var(--padd--side);
  }

  &.black-bg {
    .item {
      background: color-mix(in srgb, var(--swatch--dark-grey) 30%, transparent);
      border-top: 3px solid var(--swatch--yellow);
    }
    .subheading,
    .underline {
      color: var(--swatch--yellow);
    }
  }

  @media all and (max-width: 768px) {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    padding: var(--padd--side);
    .item {
      background: transparent;
      border-top: 0;
      padding: 0;
      min-height: unset;
      white-space: nowrap;
      h5,
      p {
        display: none;
      }

      &:first-child .underline {
        color: var(--swatch--blue);
      }
    }
    .underline {
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-size: var(--fs--body-sml);
      color: var(--swatch--text-secondary);
      &:first-child {
        color: var(--swatch--blue);
      }
      &:before,
      &:after {
        display: none;
      }
    }
  }
}

/***** TEXT COUNTERS *****/

.text-counters {
  margin: var(--padd--80) 0;
  padding: 0 var(--padd--side);

  .subheading,
  p {
    color: var(--swatch--mid-grey);
  }

  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 3em;
    margin-bottom: 3em;
    margin-top: 1em;
    border-bottom: 1px solid var(--swatch--stroke);

    .inner {
      width: 75%;
    }
  }

  .counters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    .counter-item {
      display: flex;
      flex-direction: column;
      grid-gap: 0.5em;
      align-items: center;

      .number {
        font-size: var(--fs--h1);
        color: var(--swatch--blue);
      }

      .counter-heading {
      }
    }
  }

  @media all and (max-width: 768px) {
    margin: var(--padd--60) 0;

    .content {
      grid-template-columns: 1fr;
      grid-gap: 20px;
      padding-bottom: 20px;
      margin-bottom: 20px;

      .inner {
        width: 100%;
      }
      .h1 {
        font-size: var(--fs--h2);
        font-family: var(--main);
      }
    }

    .counters {
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;

      .counter-item {
        align-items: flex-start;
        .number {
          font-size: var(--fs--h2);
        }
      }
    }
  }
}

[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"],
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em 0;
  margin: -0.05em;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}

/***** TABS *******/

.tab-layout__wrap {
  z-index: 1;
  grid-row-gap: 3em;
  flex-flow: wrap;
  display: flex;
  position: relative;
  padding: 0 var(--padd--side);
  margin: var(--padd--80) 0;
}

.tab-layout__col {
  width: 50%;
}

.tab-content__inner {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: flex-end;
  display: flex;
  width: 100%;
}

.tab-content__top {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tab-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5em;
  font-weight: 500;
  line-height: 1;
}

.tab-visual__wrap {
  height: 47em;
  position: relative;
}

.tab-visual__item {
  visibility: hidden;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.tab-visual__item.active {
  visibility: visible;
}

.tab-visual__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.tab-image {
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: 0.25em;
  width: 100%;
  height: 100%;
  position: relative;
}

.tab-content__wrap {
  width: 100%;
  height: 100%;
  margin-right: 0;
  display: flex;
  padding-right: 3em;
}

.tab-content__bottom {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.tab-content__item {
  color: #131313;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  text-decoration: none;
  transition: opacity 0.25s;
  position: relative;
  opacity: 0.5;
  cursor: pointer;

  .content-item__nr {
    color: #fff;
    background-color: var(--swatch--text-hint);
    border: 1px solid var(--swatch--text-hint);
    border-radius: 0;
    justify-content: center;
    align-items: center;
    width: 2.5em;
    height: 2.5em;
    margin-top: 0.2em;
    font-family: var(--mono);
    font-size: 0.75em;
    transition:
      transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
      color 0.25s,
      background-color 0.25s;
    display: flex;
  }

  &.active {
    opacity: 1;

    .content-item__nr {
      background-color: var(--swatch--blue);
      border: 1px solid var(--swatch--blue);
    }
  }
}

.tab-content__item-main {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.content-item__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
}

.tab-content__item-detail {
  width: 90%;
  height: 0;
  padding-left: 4em;
  overflow: hidden;
  color: var(--swatch--text-secondary);
}

.tab-description {
  margin-bottom: 0;
  font-size: 1em;
}

.tab-description__spacer {
  padding-top: 1em;
}

.tab-content__item-bottom {
  background-color: #0003;
  width: 100%;
  height: 1px;
  transition: background-color 0.2s;
  position: absolute;
  inset: auto 0% 0%;
}

.tab-progress {
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: var(--swatch--blue);
  width: 100%;
  height: 1px;
  transform: scale3d(0, 1, 1);
}

@media screen and (max-width: 991px) {
  .tab-layout__col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-content__inner {
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
  }

  .tab-content__top {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .tab-visual__wrap {
    height: 20em;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-visual__item {
    overflow: hidden;
  }

  .tab-content__wrap {
    max-width: none;
    margin-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .tab-layout__wrap {
    grid-row-gap: 10px;
    margin: var(--padd--60) 0;
    flex-direction: column-reverse;
  }

  .content-item__heading {
    font-size: var(--fs--h4);
  }

  .tab-content__bottom {
    max-width: none;
  }

  .tab-content__item {
    padding: 16px 0;
  }

  .tab-content__item-main {
    grid-column-gap: 10px;
    grid-row-gap: 1.5em;
    align-items: center;

    .content-item__nr {
      height: 24px;
      margin-top: -2px;
      padding-top: 2px;
    }
  }

  .tab-content__item-detail {
    padding-left: 0;
  }

  .tab-description {
    font-size: 14px;
  }
}

/***** COLUMNS ******/

.columns {
  margin: var(--padd--80) 0;
  padding: 0 var(--padd--side);

  &.grey-bg {
    background-color: var(--swatch--grey);
    margin: 0;
    padding: var(--padd--80) var(--padd--side);
  }

  &.is-carousel {
    padding: 0;
  }

  .grid-3,
  .grid-2 {
    grid-gap: 3em;
  }

  .column-swiper {
    padding: 1em var(--padd--side);

    .item {
      margin-right: 3em;
      width: calc(100% / 3 - 3em);

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .heading {
    margin-bottom: 3em;
  }

  .item {
    display: flex;
    flex-direction: column;
    grid-gap: 1.5em;
  }

  .content {
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
    align-items: flex-start;
  }

  .media {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 0.7;
    overflow: hidden;
  }

  p {
    margin: 0;
    color: var(--swatch--text-secondary);
  }

  .subheading {
    color: var(--swatch--mid-grey);
  }

  .grid-2 {
    .media {
      aspect-ratio: 1 / 0.6;
    }

    .content {
      width: 90%;
    }
  }
}

.checkout {
  padding: 4em 0;

  .checkout__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-gap: 4em;
    align-items: start;
  }

  /* ---------- LEFT ---------- */

  .checkout__main {
    display: flex;
    flex-direction: column;
    grid-gap: 1em;

    .back-to-course {
      color: var(--swatch--blue);
      margin-bottom: 0.5em;
      transition: ease 0.3s opacity;

      &:hover {
        opacity: 0.6;
      }
    }

    h1,
    p {
      margin: 0;
    }
  }

  /* Heading, intro and the three selects as one unit — see the note in
     templates/checkout.php. Carries the gap .checkout__main used to apply to
     these children directly, so desktop is unchanged by the wrapper. */
  .checkout__start {
    display: flex;
    flex-direction: column;
    grid-gap: 1em;
  }

  .checkout__selects {
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
  }

  .checkout__details {
    display: flex;
    flex-direction: column;
    grid-gap: 1.5em;
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid var(--swatch--stroke);

    h2 {
      margin: 0;
    }

    p.grey {
      margin: -1em 0 0;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1.5em;
    }
  }

  .checkout__terms {
    margin: 0;
  }

  /* ---------- FIELDS ---------- */

  .field {
    display: flex;
    flex-direction: column;
    grid-gap: 0.4em;
    width: 100%;

    .subheading {
      color: var(--swatch--dark-grey);
    }

    input {
      width: 100%;
      font-size: var(--fs--body);
      font-family: inherit;
      color: var(--swatch--black);
      background: var(--swatch--white);
      border: 1px solid var(--swatch--stroke);
      border-radius: var(--border-radius);
      padding: 0.85em 1em;
      transition: ease 0.3s border-color;

      &:hover:not(:disabled) {
        border-color: var(--swatch--dark-grey);
      }

      &:focus {
        outline: 0;
        border-color: var(--swatch--blue);
      }

      &:disabled {
        background: var(--swatch--grey);
        color: var(--swatch--mid-grey);
        cursor: not-allowed;
      }
    }

    /* select is styled once, globally, at the foot of this file. */

    .field-error {
      display: none;
      font-size: 0.8em;
      color: var(--swatch--error, #c0392b);
    }

    &.is-invalid {
      input {
        border-color: var(--swatch--error, #c0392b);
      }

      .field-error {
        display: block;
      }
    }
  }

  .checkbox-row {
    display: flex;
    align-items: center;
    grid-gap: 0.6em;
    cursor: pointer;

    input {
      width: 1.1em;
      height: 1.1em;
      accent-color: var(--swatch--blue);
      cursor: pointer;
    }
  }

  .payer-fields {
    display: flex;
    flex-direction: column;
    grid-gap: 1.5em;
    padding: 1.5em;
    background: var(--swatch--grey);
    border-radius: var(--border-radius);

    p.grey {
      margin: 0;
    }

    &[hidden] {
      display: none;
    }
  }

  .info-note {
    display: flex;
    grid-gap: 0.75em;
    padding: 1em 1.25em;
    background: var(--swatch--grey);
    border-radius: var(--border-radius);

    .dot {
      flex-shrink: 0;
      width: 0.5em;
      height: 0.5em;
      margin-top: 0.5em;
      border-radius: 50%;
      background: var(--swatch--blue);
    }

    p {
      margin: 0;
      font-size: 0.9em;
    }
  }

  /* ---------- RIGHT: summary ---------- */

  /* The right column: the grey card plus the Pay button.

     THE GREY CARD IS PAINTED HERE, not on .checkout__summary, and that is the
     whole trick. The button had to leave .summary-body in the markup so the
     phone layout could order it last — but on desktop it must stay visually
     INSIDE the card, exactly where it has always been. Painting the card one
     level up puts the button back inside it without putting it back inside the
     element. Desktop geometry is unchanged to the pixel.

     At ≤991px this box is dropped entirely (display: contents) and
     .checkout__summary takes the card styling back — see the media query. */
  .checkout__aside {
    position: sticky;
    top: 8em;
    align-self: start;
    display: flex;
    flex-direction: column;
    grid-gap: 1.5em;
    padding: 2em;
    background: var(--swatch--grey);
    border-radius: var(--border-radius);
  }

  .checkout__submit-block {
    display: flex;
    flex-direction: column;
    grid-gap: 1.5em;
  }

  /* No selection yet means nothing to buy, so no button. This used to come free
     from the button being inside .summary-body[hidden]; keeping it in CSS means
     the two cannot drift apart the way a second JS toggle would. */
  .checkout__aside:has(.summary-body[hidden]) .checkout__submit-block {
    display: none;
  }

  /* Padding, background and radius live on .checkout__aside above — see the
     note there. This is now just the stack inside the card. */
  .checkout__summary {
    display: flex;
    flex-direction: column;
    grid-gap: 1.5em;

    > .subheading {
      color: var(--swatch--mid-grey);
    }

    .summary-empty p {
      margin: 0;
    }

    .summary-body {
      display: flex;
      flex-direction: column;
      grid-gap: 1.5em;

      &[hidden] {
        display: none;
      }
    }
  }

  .summary-card {
    background: var(--swatch--white);
    border-radius: var(--border-radius);
    overflow: hidden;

    .media {
      position: relative;
      aspect-ratio: 16 / 10;
      background: var(--swatch--stroke);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      grid-gap: 0.4em;
      padding: 1.25em;

      .subheading {
        color: var(--swatch--blue);
      }

      h3 {
        margin: 0;
      }

      p {
        margin: 0;
        font-size: 0.9em;
      }
    }
  }

  .summary-pay {
    display: flex;
    flex-direction: column;
    grid-gap: 0.75em;

    h4 {
      margin: 0;
    }
  }

  .pay-options {
    display: flex;
    flex-direction: column;
    grid-gap: 0.6em;
  }

  .pay-card {
    display: flex;
    align-items: center;
    grid-gap: 1em;
    text-align: left;
    width: 100%;
    background: var(--swatch--white);
    border: 1px solid var(--swatch--stroke);
    border-radius: var(--border-radius);
    padding: 1em 1.25em;
    cursor: pointer;
    transition: ease 0.3s border-color;

    &:hover {
      border-color: var(--swatch--dark-grey);
    }

    .pay-card__left {
      display: flex;
      flex-direction: column;
      grid-gap: 0.2em;
      flex: 1;

      .title {
      }

      .sub {
        font-size: 0.85em;
      }
    }

    .pay-card__right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      grid-gap: 0.2em;

      .amount {
        white-space: nowrap;
      }

      .meta {
        font-size: 0.8em;
        white-space: nowrap;
      }
    }

    .pay-card__radio {
      flex-shrink: 0;
      width: 1.4em;
      height: 1.4em;
      border-radius: 50%;
      border: 1px solid var(--swatch--stroke);
      position: relative;
      transition: ease 0.3s all;
    }

    &.selected {
      border-color: var(--swatch--blue);

      .pay-card__radio {
        border-color: var(--swatch--blue);
        background: var(--swatch--blue);

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          margin: auto;
          width: 0.45em;
          height: 0.25em;
          border-left: 2px solid var(--swatch--white);
          border-bottom: 2px solid var(--swatch--white);
          transform: translateY(-15%) rotate(-45deg);
        }
      }
    }
  }

  .community-addon {
    &[hidden] {
      display: none;
    }

    .community-card {
      display: flex;
      align-items: flex-start;
      grid-gap: 0.75em;
      background: var(--swatch--white);
      border: 1px solid var(--swatch--stroke);
      border-radius: var(--border-radius);
      padding: 1em 1.25em;
      cursor: pointer;
      transition: ease 0.3s border-color;

      &:hover {
        border-color: var(--swatch--dark-grey);
      }

      input {
        margin-top: 0.2em;
        width: 1.1em;
        height: 1.1em;
        flex-shrink: 0;
        accent-color: var(--swatch--blue);
        cursor: pointer;
      }
    }

    .community-card__body {
      display: flex;
      flex-direction: column;
      grid-gap: 0.3em;
      flex: 1;
    }

    .community-card__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      grid-gap: 1em;
    }

    .tag {
      font-size: 0.7em;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--swatch--blue);
    }

    .community-card__price {
      white-space: nowrap;
    }

    .title {
    }

    .desc {
      font-size: 0.85em;
    }
  }

  .summary-totals {
    display: flex;
    flex-direction: column;
    grid-gap: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--swatch--stroke);

    .row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      grid-gap: 1em;

      &[hidden] {
        display: none;
      }
    }

    .row--total {
      padding-top: 0.6em;
      border-top: 1px solid var(--swatch--stroke);
      font-size: 1.15em;
    }
  }

  .checkout__submit {
    width: 100%;
    justify-content: stretch;
    border: 0;

    &:disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }

  .order-error {
    margin: 0;
    color: var(--swatch--error, #c0392b);

    &[hidden] {
      display: none;
    }
  }

  .checkbox-row[hidden] {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .checkout {
    padding: 3em 0 4em;

    .checkout__grid {
      grid-template-columns: 1fr;
      grid-gap: 2.5em;
    }

    /*
     * Phone order: heading + selects, THEN the summary, THEN your details.
     *
     * `order` only sorts siblings, and the summary is a sibling of
     * .checkout__main rather than of the things inside it — so ordering it
     * alone can only put the whole summary above or below the whole left
     * column. Above (`order: -1`) meant a visitor met a priced enrolment card
     * before being told what they were choosing.
     *
     * `display: contents` drops .checkout__main's box and promotes its two
     * children into .checkout__grid, so all three are siblings and can be
     * sequenced. The box carried nothing but a gap, which .checkout__start now
     * holds, so nothing is lost with it.
     */
    .checkout__main {
      display: contents;
    }

    /* Same trick on the right: dropping the wrapper's box promotes the grey
       card and the Pay button into .checkout__grid, so all four blocks are
       siblings and the button can be ordered AFTER the details form rather than
       stranded above it in the middle of the page. */
    .checkout__aside {
      display: contents;
    }

    .checkout__start {
      order: 1;
    }

    /* The card box comes back down here. On desktop it is painted by
       .checkout__aside so the Pay button sits inside it; on a phone the button
       belongs at the very bottom of the page, outside the card, so the card has
       to be the summary alone. */
    .checkout__summary {
      position: static;
      order: 2;
      padding: 2em;
      background: var(--swatch--grey);
      border-radius: var(--border-radius);
    }

    .checkout__submit-block {
      order: 4;
    }

    .checkout__details {
      order: 3;

      /* The grid gap already separates it from the summary above. Keeping the
         2em as well reads as a dropped section rather than the next step. */
      margin-top: 0;
    }

    .checkout__details .grid-2 {
      grid-template-columns: 1fr;
    }
  }
}

/**** ALL COURSES *****/

.course-results__item.is-capped {
  display: none;
}
.location-map__panel.is-hidden {
  display: none;
}

.course-results__more {
  display: flex;
  justify-content: center;
  margin-top: 3em;

  .btn {
    border: 0;
    min-width: 12em;
  }
}
.courses-archive {
  padding: 4em 0 6em;

  .courses-archive__grid {
    display: grid;
    grid-template-columns: 16em 1fr;
    grid-gap: 3em;
    align-items: start;
  }

  .course-filters {
    /* position: sticky; */
    top: 8em;
    display: flex;
    flex-direction: column;
    grid-gap: 2em;
  }

  .course-filters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .reset-btn {
    border: 0;
    background: none;
    color: var(--swatch--blue);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: ease 0.3s opacity;

    &[data-filter-status="active"] {
      opacity: 1;
      visibility: visible;
    }
  }

  .filter-set {
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
    transition: ease 0.3s opacity;

    > .subheading {
      color: var(--swatch--mid-grey);
      margin-bottom: 0.25em;
    }

    &.is-disabled {
      opacity: 0.35;
      pointer-events: none;
    }
  }

  .filter-check {
    display: flex;
    align-items: center;
    padding: 0.75em 1em;
    border: 1px solid var(--swatch--stroke);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition:
      ease 0.3s border-color,
      ease 0.3s background-color,
      ease 0.3s color;

    input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 0;
      height: 0;
    }

    &:hover {
      border-color: var(--swatch--dark-grey);
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--swatch--blue);
      outline-offset: 2px;
    }

    &:has(input:checked) {
      background-color: var(--swatch--blue);
      border-color: var(--swatch--blue);
      color: var(--swatch--white);
    }
  }

  .course-results__head {
    display: flex;
    justify-content: flex-end;
    grid-gap: 1em;
    margin-bottom: 1.5em;
  }

  .view-toggle {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0 0 0.2em;

    color: var(--swatch--mid-grey);
    transition: color 0.3s ease;

    &::before,
    &::after {
      bottom: 0.3em;
    }

    &::before {
      transform: scaleX(0) rotate(0.001deg);
    }

    &.is-active {
      color: var(--swatch--blue);

      &::before {
        transform: scaleX(1) rotate(0.001deg);
      }
    }

    &:hover {
      color: var(--swatch--blue);
    }
  }

  .course-results__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5em;

    .course-card {
      height: 100%;
    }

    .course-card__desc {
      display: none;
    }
  }

  .course-results__empty {
    padding: 3em 0;
    text-align: center;

    &[hidden] {
      display: none;
    }
  }

  /* Column headers — list view only.
     Driven from the wrapper's data-view-mode rather than a JS inline style,
     so a media query can still hide it where there are no columns to label. */
  .course-results[data-view-mode="list"] .course-results__thead {
    display: grid;
  }

  .course-results__thead {
    display: none;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    grid-gap: 2em;
    align-items: baseline;
    padding: 0 1.5em 1em;
    border-bottom: 1px solid var(--swatch--stroke);
    color: var(--swatch--mid-grey);

    span:last-child {
      text-align: right;
    }
  }

  /* --- LIST VIEW --- */
  .course-results__list[data-view-mode="list"] {
    grid-template-columns: none;
    grid-gap: 0;

    .course-results__item {
      border-bottom: 1px solid var(--swatch--stroke);
    }

    .course-card {
      position: relative;
      padding: 1.5em 0;
      background-color: var(--swatch--white);
      transition: ease 0.3s background-color;

      .media {
        display: none;
      }

      .content {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1fr 1fr;
        /* Columns stay 2em apart; rows are the title and the date beneath it,
           so they sit close. A single grid-gap would push the date 2em down. */
        column-gap: 2em;
        row-gap: 0.35em;
        align-items: start;
        padding: 1.25em 1.5em;
      }

      /* In the card markup the price is nested INSIDE __head, under the title.
         That is right for a card and wrong for a table row, where the price is
         its own column — and a nested element cannot be placed in a grid it is
         not a child of. Dissolving __head makes the title and the price direct
         grid items again, each free to take its own column. */
      .course-card__head {
        display: contents;
      }

      .course-card__head > h3 {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
      }

      /* The dates (or the blurb, on a card with no intake) belong with the
         course name, not out in the price column where auto-placement put
         them once the price stopped being a grid item. */
      .course-card__body {
        grid-column: 1;
        grid-row: 2;
      }

      .course-card__desc {
        margin: 0;
        color: var(--swatch--mid-grey);
        font-size: 0.9em;
      }

      /* Meta becomes two grid cells */
      .course-card__meta {
        display: contents;
      }

      .course-card__location,
      .course-card__format {
        grid-row: 1;
        font-family: var(--main);
        font-size: var(--fs--body);
        text-transform: none;
        letter-spacing: 0;
        color: var(--swatch--text-secondary);
      }

      .course-card__location {
        grid-column: 2;
      }

      .course-card__format {
        grid-column: 3;
        display: inline-flex;
        align-items: baseline;
        grid-gap: 0.4em;

        .subheading {
          font-family: var(--main);
          font-size: var(--fs--body);
          text-transform: none;
          letter-spacing: 0;
          color: var(--swatch--text-secondary);
        }
      }

      /* The divider between location and format has no meaning in columns */
      .course-card__meta > .divider {
        display: none;
      }

      .course-card__price {
        grid-column: 4;
        grid-row: 1;
        text-align: right;
        min-width: 6em;
        /* It's a flex ROW here (figure, currency, struck anchor), so the whole
           group is pushed right with justify-content — align-items only moves
           it on the cross axis. */
        justify-content: flex-end;
        align-items: flex-end;

        h4 {
          margin: 0;
        }
      }

      .btn-wrapper {
        grid-column: 4;
        grid-row: 2;
        justify-content: flex-end;
        margin-top: 1em;
        opacity: 0;
        pointer-events: none;
        transition: ease 0.3s opacity;
        position: absolute;
        right: 1.25em;
        bottom: 1.25em;
      }

      &:hover {
        .btn-wrapper {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }

  .course-card__location[aria-hidden="true"] {
    display: none;
  }

  .course-results__list[data-view-mode="list"]
    .course-card__location[aria-hidden="true"] {
    display: block;
  }

  /* Touch devices have no hover — always show the buttons */
  @media (hover: none) {
    .course-results__list[data-view-mode="list"] .course-card .btn-wrapper {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

@media (max-width: 991px) {
  .courses-archive .courses-archive__grid {
    grid-template-columns: 1fr;
  }

  .courses-archive .course-filters {
    position: fixed;
    z-index: 10;
    background: var(--swatch--white);
    left: 0;
    right: 0;
    top: 120px;
    overflow: scroll;
    border-radius: 20px 20px 0 0;
    padding: var(--padd--60) var(--padd--side);
    transition: var(--transition--ease) 1s transform;
    transform: translateY(100%);
  }

  .courses-archive .course-results__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .courses-archive .course-results__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   COURSES — LIST VIEW ON MOBILE
   ============================================================ */

@media all and (max-width: 768px) {
  /* Nothing to label once the row is stacked. */
  .courses-archive
    .course-results[data-view-mode="list"]
    .course-results__thead {
    display: none;
  }

  .courses-archive .course-results__list[data-view-mode="list"] .course-card {
    padding: 0;

    /* Four stacked rows — meta, title, blurb + price, buttons. The second
       column exists only so the price can sit beside the blurb; everything
       else spans the full width. */
    .content {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 1em;
      row-gap: 0.4em;
      padding: 1.75em 0;
      align-items: start;
    }

    /* One blue meta line again. The desktop list splits this into two table
       columns and drops the dividers between them, which says nothing once
       there are no columns. */
    .course-card__meta {
      display: flex;
      grid-column: 1 / -1;
      grid-row: 1;
      margin-bottom: 0.2em;
    }

    .course-card__meta > .divider {
      display: inline;
    }

    .course-card__location,
    .course-card__format,
    .course-card__format .subheading {
      grid-column: auto;
      grid-row: auto;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: inherit;
    }

    .course-card__head > h3 {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .course-card__body {
      grid-column: 1;
      grid-row: 3;
    }

    /* The grid view hides the blurb; stacked rows have room for it, and a
       card with no intake behind it would otherwise show nothing here. */
    .course-card__desc {
      display: block;
    }

    /* Bottom-aligned with the blurb, so a two-line blurb still finishes
       level with the figure. */
    .course-card__price {
      grid-column: 2;
      grid-row: 3;
      align-self: end;
      min-width: 0;
    }

    /* Always on. A phone has no hover, so buttons that appear only on hover
       are buttons nobody can reach. */
    .btn-wrapper {
      grid-column: 1 / -1;
      grid-row: 4;
      position: static;
      justify-content: flex-start;
      margin-top: 1em;
      opacity: 1;
      pointer-events: auto;
    }
  }

  .view-toggle {
    &::before,
    &::after {
      bottom: 0.1em !important;
    }
  }
}

/* ============================================================
   COURSES — FILTER SHEET
   ============================================================ */

/* Desktop keeps the sidebar, so neither the opener nor the closer belongs
   there. The overlay is defined at every width but only ever revealed by
   is-active, which only the sheet sets. */
.filter-toggle,
.course-filters__foot {
  display: none;
}

.course-filters__overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    0.5s opacity var(--transition--ease),
    0.5s visibility var(--transition--ease);
}

.course-filters__overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.course-results__views {
  display: flex;
  align-items: baseline;
  grid-gap: 1em;
}

@media all and (max-width: 991px) {
  .courses-archive .course-results__head {
    justify-content: space-between;
  }

  .filter-toggle {
    display: inline-block;
    border: 0;
    background: none;
    padding: 0 0 0.2em;
    cursor: pointer;
    color: var(--swatch--black);

    &::before,
    &::after {
      bottom: 0.1em;
    }
  }

  .courses-archive .course-filters {
    /* Anchored to the edge it slides in from. dvh, not vh, or the sheet
       finishes underneath the browser chrome on iOS. */
    top: auto;
    bottom: 0;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overscroll-behavior: contain;
    transition: 0.5s transform var(--transition--ease);
  }

  .courses-archive .course-filters.is-active {
    transform: translateY(0%);
  }

  /* Stays on screen while the groups scroll past it. */
  .course-filters__foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 1em 0 1.5em;
    background-color: var(--swatch--white);
    border-top: 1px solid var(--swatch--stroke);
  }

  .course-filters__foot .btn {
    width: 100%;
  }
}

/****** LOCATIONS TABS *******/

.locations-module {
  padding: 6em 0;

  .heading {
    margin-bottom: 4em;
    .subheading {
      color: var(--swatch--text-secondary);
    }
  }

  .locations-module__grid {
    display: grid;
    grid-template-columns: 12em 1fr 1fr;
    grid-gap: 4em;
    align-items: start;
  }

  .underline::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
  }

  .underline::after {
    transform-origin: left;
    transform: scaleX(0) rotate(0.001deg);
  }

  @media (hover: hover) and (pointer: fine) {
    .underline:hover::before,
    .underline.is-active::before {
      transform-origin: right;
      transform: scaleX(1) rotate(0.001deg);
    }

    .underline:hover::before,
    .underline.is-active::before {
      transform-origin: left;
      transform: scaleX(1) rotate(0.001deg);
    }

    .underline:hover::after,
    .underline.is-active::after {
      transform-origin: right;
      transform: scaleX(0) rotate(0.001deg);
    }
  }
  .underline {
    color: var(--swatch--text-secondary);
    transition: color 0.3s ease;
    &:hover {
      color: var(--swatch--blue);
    }
  }

  .locations-module__list {
    display: flex;
    flex-direction: column;
    grid-gap: 0.6em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .locations-module__tab {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--swatch--mid-grey);
    transition: ease 0.3s color;

    &:hover {
      color: var(--swatch--black);
    }

    &.is-active {
      color: var(--swatch--blue);
    }
  }

  /* Panels stack so the fade doesn't cause a height jump */
  .locations-module__content {
    display: grid;
  }

  .locations-module__panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 1.5em;

    p {
      margin: 0;
    }
  }

  .locations-module__maps {
    position: relative;
    aspect-ratio: 412 / 241;
  }

  .locations-module__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .locations-module__map.is--base {
    opacity: 1;
    z-index: 0;
  }

  .locations-module__map:not(.is--base) {
    z-index: 1;
  }
}

@media (max-width: 991px) {
  .locations-module .locations-module__grid {
    grid-template-columns: 1fr;
    grid-gap: 2.5em;
  }

  .locations-module .locations-module__list {
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 1em;
  }
}

/***** COMBO EDITS *****/

.grey-bg + .black-bg,
.grey-bg + .yellow-bg,
.black-bg + .grey-bg,
.black-bg + .yellow-bg,
.yellow-bg + .black-bg,
.yellow-bg + .grey-bg,
.grey-bg + .accreditations {
  margin-top: 0;
}

.hero-section.is-dark + .book-call {
}

.form-text + .featured-courses {
  padding: var(--padd--30) 0 var(--padd--100);
}

.testimonials + .accreditations {
  @media all and (max-width: 768px) {
  }
}

.default-template {
  h1 {
    margin-bottom: 0.5em;
  }
  .container {
    max-width: 60em;
    margin: 0 auto;
    padding: var(--padd--80) var(--padd--side);

    @media all and (max-width: 768px) {
    }
  }
}

.mobile {
  display: none;

  @media all and (max-width: 768px) {
    display: block;
  }
}

.desktop {
  display: block;

  @media all and (max-width: 768px) {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   The hidden attribute must actually hide.

   normalize sets [hidden] { display: none }, but any component rule with its
   own display and equal-or-higher specificity beats it — `.btn` is
   inline-grid, so a hidden button stayed visible. Scripts that toggle
   `el.hidden` (load-more, the earlybird lines, the plan text) silently did
   nothing. This is the standard remedy.
--------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   SELECTS — one definition for every select on the site.

   These used to be styled in four places (the global form group, the enrol
   panel's .course-date-select, and twice inside the checkout's .field), which
   meant four slightly different borders and no single place to change them.
   Everything now lives here; nothing else in this file may style a select.

   Default border --swatch--stroke, hover --swatch--black, focus/open
   --swatch--blue.

   Two treatments: the classic appearance:none + background-image arrow for
   today's browsers, then the whole rule re-expressed with appearance:
   base-select where it is supported, which lets the dropdown itself — the
   picker, its options and its optgroups — be styled and animated.
--------------------------------------------------------------------------- */
select {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font-size: var(--fs--body);
  font-family: inherit;
  color: var(--swatch--black);
  background-color: var(--swatch--white);
  border: 1px solid var(--swatch--stroke);
  border-radius: var(--border-radius);
  padding: 0.85em 2.5em 0.85em 1em;
  transition: ease 0.3s border-color;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 1em;

  &:hover:not(:disabled) {
    border-color: var(--swatch--black);
  }

  &:focus,
  &:focus-visible,
  &:active {
    outline: 0;
    border-color: var(--swatch--blue);
  }

  &:disabled {
    background-color: var(--swatch--grey);
    color: var(--swatch--mid-grey);
    cursor: not-allowed;
  }

  option[disabled] {
    color: #8c8c8c;
    opacity: 1;
  }

  @supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
    }

    /* The closed button */
    border: 1px solid var(--swatch--stroke);
    border-radius: var(--border-radius);
    padding: 0.85em 1em;
    background-color: var(--swatch--white);
    font-size: var(--fs--body);
    font-family: inherit;
    text-align: left;

    &::picker-icon {
      display: none;
    }

    &:open::picker-icon {
      rotate: 180deg;
    }

    &:open {
      border-color: var(--swatch--blue);
    }

    /* The dropdown itself */
    &::picker(select) {
      border: 1px solid var(--swatch--stroke);
      border-radius: var(--border-radius);
      background: var(--swatch--white);
      box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.08);
      padding: 0.35em 0;
      margin-top: 0.35em;

      /* ALWAYS opens downwards.
         The browser's default is to flip the picker above the field whenever
         it doesn't fit below — which on a laptop is most of the time, and it
         covers the page rather than the space it was opened into.
         Three declarations, all three needed:
           position-area        pins it under the field to begin with;
           position-try-fallbacks: none  removes the flip-above fallback;
           max-height           keeps it short enough that the browser has no
                                reason to shift it back up. Without a bound it
                                still slides upward once space gets tight —
                                measured flipping again below ~200px of room.
         The list scrolls inside itself instead. */
      position-area: block-end span-inline-end;
      position-try-fallbacks: none;
      max-height: 40vh;
      overflow-x: hidden;
      overflow-y: auto;

      /* Animate open/close */
      opacity: 0;
      transition:
        opacity 0.2s ease,
        overlay 0.2s allow-discrete,
        display 0.2s allow-discrete;
    }

    &:open::picker(select) {
      opacity: 1;
    }

    @starting-style {
      &:open::picker(select) {
        opacity: 0;
      }
    }

    option {
      display: flex;
      align-items: center;
      grid-gap: 0.5em;
      padding: 0.7em 1.2em;
      cursor: pointer;
      transition: ease 0.2s background-color;

      &:hover,
      &:focus {
        background: var(--swatch--grey);
        outline: none;
      }

      &:checked {
        color: var(--swatch--blue);
      }

      &::checkmark {
        display: none;
      }

      &:disabled {
        display: none;
      }
    }

    optgroup {
      display: block;
      padding: 0.5em 0.85em 0.25em;
      font-size: 0.7em;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--swatch--mid-grey);
      font-weight: 400;
    }
  }
}

/* ---------------------------------------------------------------------------
   404 — and the cancelled checkout, which reuses this whole block

   The 404 template that shipped here was from another project — four images
   that don't exist in this theme, ~100 empty .brick divs and a "tap to reveal"
   effect with no JavaScript behind it. None of it had any CSS at all, which is
   the clearest sign it was never wired up. Rewritten 2026-09-06.

   White ground, black text, the numeral in brand blue — the one piece of
   colour on the page, so it reads as a marker rather than decoration.

   page-checkout-cancelled.php carries `.error-404 .checkout-cancelled` and
   reuses these classes verbatim rather than duplicating the declarations. Two
   "we couldn't get you where you wanted to go" pages should not look like they
   came from different sites. The only thing the cancelled page adds is the
   eyebrow below, standing in for the numeral it has no equivalent of.
--------------------------------------------------------------------------- */

.error-404 {
  background-color: var(--swatch--white);
  color: var(--swatch--black);
  padding: var(--padd--120) var(--padd--side);
  display: flex;
  justify-content: center;
  text-align: center;
}

.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padd--24);
  /* Roughly 30em of measure. Wider than this and the description outruns the
     numeral above it, which breaks the centred stack. */
  max-width: 34em;
}

.checkout-cancelled__eyebrow {
  /* Stands in for the 404's numeral: the one piece of brand colour naming what
     happened. The mono/uppercase/tracked treatment comes from the theme's own
     .subheading, which the markup also carries — this only adds the colour and
     kills the default paragraph margin, so the label stays in step with every
     other eyebrow on the site rather than being a second definition of one. */
  color: var(--swatch--blue);
  margin: 0;
}

.error-404__code {
  color: var(--swatch--blue);
  font-size: clamp(4.5em, 14vw, 9em);
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
}

.error-404__heading {
  margin: 0;
  text-wrap: balance;
}

.error-404__description {
  margin: 0;
  color: var(--swatch--text-secondary);
}

.error-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  /* The gap above already spaces this from the description; the extra half-step
     separates "here is the problem" from "here is what to do about it". */
  margin-top: var(--padd--24);
}

@media all and (max-width: 768px) {
  .error-404 {
    padding-top: var(--padd--100);
    padding-bottom: var(--padd--100);
  }

  .error-404__links {
    /* Four buttons wrap to two ragged rows on a narrow screen. Full width
       stacks them predictably and gives each a proper tap target. */
    flex-direction: column;
    align-self: stretch;

    .btn {
      justify-content: center;
    }
  }
}

/* ---------------------------------------------------------------------------
   Journal fallback (index.php)

   index.php cannot be deleted — WordPress requires it — so it renders the
   article grid for anything the hierarchy sends there (category, tag, date and
   author archives). It reuses .journal and .journal-grid; only the empty state
   and the heading block need anything of their own.
--------------------------------------------------------------------------- */

.journal--fallback {
  padding-top: var(--padd--80);
  padding-bottom: var(--padd--120);

  .heading {
    margin-bottom: var(--padd--60);
  }

  .journal__description {
    margin-top: var(--padd--8);
    color: var(--swatch--text-secondary);
    max-width: 44em;
  }

  .journal__empty {
    color: var(--swatch--text-secondary);
    margin-bottom: var(--padd--24);
  }
}