/* The Forklift Guy — design overrides
 * Loaded last; wins over Webflow defaults. Keep all bespoke styles here.
 */

/* ============================================================
   0. Site-wide: NO ROUNDED CORNERS
   Hard reset on every element so the visual language is uniformly squared.
   Stick this near the top so later rules can opt back in only if absolutely
   necessary (we don't, currently).
   ============================================================ */
*, *::before, *::after { border-radius: 0 !important; }

/* ============================================================
   1. Kill Webflow IX2 entrance-animation inline styles
   site.js clears the inline styles too, but this is the belt
   so there's never a flash of invisible content.
   ============================================================ */
[data-w-id][style*="opacity:0"],
[data-w-id][style*="opacity: 0"] {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* ============================================================
   2. Nav: scroll state — yellow bg, white→black logo, shrunk logo
   site.js toggles .is-scrolled at scrollY > 40.
   ============================================================ */
.nav02 {
  transition: background-color .25s ease, height .25s ease, border-color .25s ease;
}
/* Hero (background-video-3) — swap the original BG image for the
   polaroid-collage. Keep the layered dark gradient overlay so the
   FORKLIFT TRAINING headline stays legible. */
.background-video-3 {
  background-image:
    /* Horizontal wash: dark on the left (where the text sits), fading to
       almost-transparent on the right so the polaroids show through. */
    linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .65) 35%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .15) 100%),
    /* Light overall wash for legibility on tall viewports. */
    linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
    url('../images/forklift-guy-collage-2.jpg') !important;
  background-position: 0 0, 0 0, 50% 50% !important;
  background-size: auto, auto, cover !important;
  background-repeat: no-repeat !important;
}
/* On mobile the text spans full width — switch to a vertical gradient
   that's heavier at the top so the headline still sits on enough darkness. */
@media (max-width: 600px) {
  .background-video-3 {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .65) 100%),
      url('../images/forklift-guy-collage-2.jpg') !important;
    background-position: 0 0, 50% 50% !important;
    background-size: auto, cover !important;
  }
}
/* Hero stack — uniform gap between every line so the rhythm reads
   consistently from headline → address → CTAs → licence line. */
.hero-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1.5rem !important;
}
.hero-stack > * { margin: 0 !important; }
.hero-licence { opacity: .85; }

/* About-the-course section — mirror of the I'm Guy section: text on the
   LEFT, image on the RIGHT at desktop. Stack vertically on tablet/mobile
   with the image first so visual hierarchy stays sensible. */
.about-course-section {
  background-color: #0a0a0a;
  padding: 5rem 0;
}
.about-course-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 4rem !important;
  grid-row-gap: 4rem !important;
  gap: 4rem !important;
  align-items: center !important;
  width: 100% !important;
}
.about-course-grid > .content-block-left { order: 1; }
.about-course-grid > .about-course-image { order: 2; }
.about-course-grid .image-block { width: 100%; }
.about-course-grid .image-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.about-course-section .content-block-left h2 { color: #fff; }
.about-course-section .content-block-left p {
  color: rgba(255, 255, 255, .9);
  line-height: 1.65;
}
.about-course-section .content-block-left p strong { color: #fff; }

@media (max-width: 991px) {
  .about-course-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    grid-column-gap: 2.5rem !important;
    grid-row-gap: 2.5rem !important;
  }
  .about-course-grid > .about-course-image { order: 1; }
  .about-course-grid > .content-block-left { order: 2; }
}
@media (max-width: 600px) {
  .about-course-section { padding: 3.5rem 0; }
}

/* Constrain the inner nav row to roughly the page container so it doesn't
   stretch the full screen — matches the rhythm set by .ct-container etc. */
.nav02 .navigation-split {
  max-width: 84rem;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box;
  width: 100%;
}
.nav02 .navigation-logo {
  transition: transform .25s ease, color .25s ease;
  transform-origin: left center;
}

/* Logo text/icon: WHITE at top of page, BLACK once scrolled */
.nav02 .logotext,
.nav02 .sublogotext { color: #fff; transition: color .25s ease; }
.nav02 .navigation-logo .logo { transition: filter .25s ease; }

.nav02.is-scrolled { background-color: #ffd400; border-bottom-color: rgba(0,0,0,0.15); height: 88px; }
.nav02.is-scrolled .navigation-logo { transform: scale(0.78); }
.nav02.is-scrolled .logotext,
.nav02.is-scrolled .sublogotext,
.nav02.is-scrolled .nav-link-3,
.nav02.is-scrolled .link-text-2,
.nav02.is-scrolled .link-text-hov { color: #000; }
.nav02.is-scrolled .hamburger-menu-bar { background-color: #000; }
/* Scrolled nav buttons are dark pills sitting on a yellow bar — their
   contents go YELLOW so they pop against the dark fill of the button. */
.nav02.is-scrolled .icon-block,
.nav02.is-scrolled .custom-button.primary { color: #ffd400; }
.nav02.is-scrolled .icon-block .calendar-icon,
.nav02.is-scrolled .custom-button.primary .icon-1x1-small svg { color: #ffd400; stroke: #ffd400; }
.nav02.is-scrolled .icon-block .custom-button-text,
.nav02.is-scrolled .icon-block .custom-button-text.login,
.nav02.is-scrolled .custom-button.primary .custom-button-text,
.nav02.is-scrolled .icon-block .rollup__top,
.nav02.is-scrolled .icon-block .rollup__hov,
.nav02.is-scrolled .custom-button.primary .rollup__top,
.nav02.is-scrolled .custom-button.primary .rollup__hov { color: #ffd400 !important; }

/* Hero/inner-page Course Dates button NEVER inherits the scrolled-nav colour. */
.section .icon-block,
section .icon-block { color: #fff; }
.section .icon-block .custom-button-text,
section .icon-block .custom-button-text { color: inherit; }

/* Corner-clip squares — always read as a clipped corner against the background. */
.corner-dark { background-color: #0d0d0d !important; }
.nav02.is-scrolled .corner-dark { background-color: #ffd400 !important; }

/* ============================================================
   3. Roll-up hover effect on ALL nav links + buttons
   The wrap viewport must match the text's rendered line height
   exactly, otherwise the duplicate text gets clipped mid-letter.
   ============================================================ */
/* About / Reviews / Contact — wrap is sized in em relative to its OWN
   font-size (which we set to match the children's font-size). */
.nav-text-wrap {
  font-size: 1.5rem;          /* same as .link-text-2 / .link-text-hov */
  line-height: 1.2;
  height: 1.2em;              /* = 1.8rem, exact text height */
  overflow: hidden;
  position: relative;
  display: block;
}
.nav-text-wrap > .link-text-2,
.nav-text-wrap > .link-text-hov {
  display: block;
  font-size: 1.5rem;
  line-height: 1.2;
  height: 1.2em;              /* matches wrap */
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.nav-text-wrap > .link-text-hov { color: #ffd400; }
.navigation-toggle-3:hover .nav-text-wrap > .link-text-2,
.navigation-toggle-3:hover .nav-text-wrap > .link-text-hov {
  transform: translateY(-100%);
}
/* On scrolled (yellow) nav, keep contrast: dark hover text */
.nav02.is-scrolled .nav-text-wrap > .link-text-hov { color: #000; opacity: .55; }

/* .rollup — same effect for icon-block / custom-button text labels.
   site.js wraps the existing .custom-button-text content into a .rollup
   with two stacked spans (top + hov). */
.rollup {
  position: relative;
  display: inline-block;
  height: 1.2em;
  line-height: 1.2;
  overflow: hidden;
  vertical-align: middle;     /* not bottom — keeps text vertically centred */
}
.rollup > .rollup__top,
.rollup > .rollup__hov {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.rollup > .rollup__hov { color: #ffd400; }
.icon-block:hover .rollup > .rollup__top,
.icon-block:hover .rollup > .rollup__hov,
.custom-button:hover .rollup > .rollup__top,
.custom-button:hover .rollup > .rollup__hov,
.hero-cta__btn:hover .rollup > .rollup__top,
.hero-cta__btn:hover .rollup > .rollup__hov {
  transform: translateY(-100%);
}
/* Hero CTA buttons keep the SAME text colour on hover — yellow-on-white
   is hard to read, so the rollup hover state mirrors the resting colour
   (the bg change does the work). */
.hero-cta__btn--primary .rollup > .rollup__top,
.hero-cta__btn--primary .rollup > .rollup__hov { color: #0d0d0d !important; }
.hero-cta__btn--secondary .rollup > .rollup__top,
.hero-cta__btn--secondary .rollup > .rollup__hov { color: #fff !important; }
/* Outline secondary on hover: white bg via ::before, so text needs to
   flip to BLACK for contrast (matches user's "white with black text" note). */
.hero-cta__btn--secondary.clipped-btn--outline:hover .rollup > .rollup__top,
.hero-cta__btn--secondary.clipped-btn--outline:hover .rollup > .rollup__hov { color: #0d0d0d !important; }

/* Nav phone button: text was being pushed down by the legacy `.login` margin */
.nav02 .custom-button-text.login,
.nav02 .custom-button-text { margin-top: 0 !important; line-height: 1.2; }

/* Desktop nav links (About / Reviews / Contact) — Montserrat to match
   the buttons. Mobile keeps the existing stencil look (overlay menu uses
   .accordion_title which is styled separately and remains stick-no-bills). */
@media (min-width: 992px) {
  .nav02 .nav-text-wrap,
  .nav02 .link-text-2,
  .nav02 .link-text-hov {
    font-family: Montserrat, sans-serif !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    letter-spacing: .04em !important;
    line-height: 1.2 !important;
  }
  .nav02 .nav-text-wrap { height: 1.2em; }
  .nav02 .link-text-2,
  .nav02 .link-text-hov { height: 1.2em; }
}

/* Unify button typography across nav + hero CTA: Montserrat 800,
   uppercase, .06em tracking. Replaces the stencil `stick-no-bills`
   fallback that .icon-block was inheriting. */
.icon-block,
.icon-block .custom-button-text,
.icon-block .custom-button-text.login,
.custom-button.primary .custom-button-text,
.nav02 .custom-button-text {
  font-family: Montserrat, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.nav02 .icon-block .custom-button-text,
.nav02 .icon-block .custom-button-text.login,
.nav02 .custom-button.primary .custom-button-text {
  font-size: .85rem !important;
}
.icon-block .custom-button-text,
.icon-block .custom-button-text.login {
  /* Drop the 3px translate hack — stencil quirk doesn't apply to
     Montserrat, the glyphs centre cleanly with the icon. */
  transform: none !important;
}

/* Phone CTA hover — yellow bg, BLACK text + icon (replaces the old white slide-fill) */
.custom-button.primary.icon { background-color: #1f1f1f; transition: background-color .2s ease, color .2s ease; }
.custom-button.primary.icon:hover { background-color: #ffd400 !important; color: #000 !important; }
.custom-button.primary.icon:hover .icon-1x1-small svg { color: #000; stroke: #000; }
.custom-button.primary.icon:hover .rollup > .rollup__hov,
.custom-button.primary.icon:hover .rollup > .rollup__top { color: #000; }
/* Hide the legacy slide-in white fill — we drive the colour change directly */
.custom-button.primary.icon .custom-button-hover-2 { display: none !important; }

/* Course Dates / View All Dates icon-block hover (used in nav AND hero) */
.icon-block:hover .calendar-icon { color: #ffd400; }
.nav02.is-scrolled .icon-block:hover .calendar-icon { color: #000; }
.nav02.is-scrolled .rollup > .rollup__hov { color: #000; opacity: .55; }

/* Kill any leftover underline from the previous attempt */
.navigation-buttons .icon-block .custom-button-text::after { display: none !important; content: none !important; }

/* ============================================================
   4. Course-date card — replace "jump up" hover with yellow border
   ============================================================ */
.dateblock { transition: border-color .2s ease, box-shadow .2s ease; }
.dateblock:hover {
  transform: none !important;
  border-color: #ffd400 !important;
  box-shadow: 0 0 0 1px #ffd400, 0 16px 40px rgba(255, 212, 0, .08);
}

/* Premium polish: tighten internal spacing, soften inner dividers,
   and give the booking button a touch of weight. */
.dateblock {
  border-radius: 14px;
  background: linear-gradient(180deg, #161616 0%, #101010 100%);
}
.dateblock .heading-9 { letter-spacing: .02em; }
.dateblock .button-outline-2 {
  border-radius: 10px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dateblock .button-outline-2:hover {
  background-color: #ffd400;
  color: #0d0d0d !important;
  border-color: #ffd400 !important;
}

/* ============================================================
   5. Filter bar — inline with the "Course Dates" page title on desktop
   ============================================================ */
.cd-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.cd-header .title { margin: 0; }
.course-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: .9rem;
}
/* On screens narrower than the inline-with-title breakpoint the filter
   bar drops below the heading — left-align it there so each control
   stacks neatly under the page title. */
@media (max-width: 767px) {
  .course-filter-bar {
    justify-content: flex-start;
    width: 100%;
  }
  .cd-header { align-items: flex-start; }
}
.course-filter-bar > label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}
.course-filter-bar input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all .15s ease;
}
.course-filter-bar input[type="checkbox"]:checked {
  background: #ffd400;
  border-color: #ffd400;
}
.course-filter-bar input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #0d0d0d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================
   6. Custom select dropdown
   ============================================================ */
.cf-select {
  position: relative;
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: .9rem;
  min-width: 170px;
}
.cf-select__btn {
  appearance: none;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
  padding: .55rem 2.25rem .55rem 1rem;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .15s ease, background-color .15s ease;
  position: relative;
}
.cf-select__btn:hover { border-color: #ffd400; }
.cf-select.is-open .cf-select__btn {
  border-color: #ffd400;
  background: rgba(255, 212, 0, .06);
}
.cf-select__caret {
  display: inline-flex;
  margin-left: .75rem;
  transition: transform .2s ease;
}
.cf-select.is-open .cf-select__caret { transform: rotate(180deg); }
.cf-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: #1a1a1a;
  border: 1px solid rgba(255, 212, 0, .35);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  z-index: 200;
}
.cf-select__option {
  padding: .55rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  transition: background-color .12s ease, color .12s ease;
}
.cf-select__option:hover {
  background: rgba(255, 212, 0, .12);
  color: #ffd400;
}
.cf-select__option[aria-selected="true"] {
  background: #ffd400;
  color: #0d0d0d;
  font-weight: 600;
}
.cf-select__option[aria-selected="true"]:hover { background: #ffd400; color: #0d0d0d; }

/* When .cf-select sits inside .course-filter-bar, give the dropdown the same vertical rhythm as the checkbox */
.course-filter-bar .cf-select { min-width: 175px; }

/* Empty-state for filters */
.course-filter-empty {
  color: #fff;
  opacity: .85;
  padding: 2rem 0;
  text-align: center;
  display: none;
}
[data-course-list][data-course-loading]::before {
  content: "Loading courses…";
  color: #fff;
  opacity: .6;
}

/* ============================================================
   7. Reviews — grid of cards (full page) + slider (homepage)
   ============================================================ */
.rv-section { padding: 4.5rem 0 6rem; background: #0a0a0a; }
.rv-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.rv-head h1, .rv-head h2, .rv-title {
  color: #fff;
  margin: 0;
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
}
/* Force the homepage Reviews title to match "About the Course" title size */
.rv-section h2.title,
.rv-section h2.home-classes {
  font-size: 80px !important;
  line-height: .95 !important;
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif !important;
}
@media (max-width: 991px) {
  .rv-section h2.title, .rv-section h2.home-classes { font-size: 56px !important; }
}
@media (max-width: 600px) {
  .rv-section h2.title, .rv-section h2.home-classes { font-size: 40px !important; }
}

/* Swiper-driven reviews carousel */
.rv-slider.swiper { position: relative; overflow: hidden; cursor: grab; }
.rv-slider.swiper:active { cursor: grabbing; }
.rv-slider .swiper-wrapper { display: flex; }
.rv-slider__slide { height: auto; }
.rv-slider .swiper-slide { display: flex; box-sizing: border-box; }
.rv-slider__nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rv-slider__btn {
  appearance: none;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.rv-slider__btn:hover { background: #ffd400; border-color: #ffd400; color: #000; }
.rv-slider__btn.swiper-button-disabled { opacity: .3; cursor: not-allowed; }
.rv-slider__btn.swiper-button-disabled:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.rv-slider__all {
  margin-left: .75rem;
  color: #ffd400;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}
.rv-slider__all:hover { color: #fff; }
@media (max-width: 600px) {
  .rv-slider__nav { width: 100%; justify-content: flex-start; }
}
.rv-summary { display: flex; align-items: center; gap: 1rem; color: #fff; }
.rv-summary__rating { display: flex; align-items: center; gap: .35rem; }
.rv-summary__rating .rv-star { width: 22px; height: 22px; }
.rv-summary__count { font-size: 1rem; opacity: .85; }

/* Polished trust badge on the reviews page header */
.rv-trust {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
  border: 1.5px solid rgba(255, 212, 0, .25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  font-family: Montserrat, sans-serif;
  color: #fff;
}
.rv-trust__score {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  padding-right: 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.rv-trust__num {
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: #ffd400;
  letter-spacing: .01em;
}
.rv-trust__max {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  margin-left: 2px;
}
.rv-trust__body { display: flex; flex-direction: column; gap: .35rem; }
.rv-trust__stars { display: flex; gap: 2px; color: #ffd400; }
.rv-trust__stars .rv-star { width: 18px; height: 18px; }
.rv-trust__count {
  font-size: .85rem;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .01em;
}
.rv-trust__count strong { color: #fff; font-weight: 700; }
.rv-trust__verified {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffd400;
  margin-top: 1px;
}
.rv-trust__verified svg { color: #ffd400; flex: 0 0 auto; }
@media (max-width: 600px) {
  .rv-trust { width: 100%; }
  .rv-trust__num { font-size: 2.1rem; }
}
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.rv-card {
  background: linear-gradient(180deg, #161616 0%, #101010 100%);
  border: 1.5px solid #222;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rv-card:hover {
  border-color: #ffd400;
  box-shadow: 0 0 0 1px #ffd400, 0 16px 40px rgba(255, 212, 0, .07);
}
.rv-card__top { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.rv-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffd400;
  color: #0d0d0d;
  font-weight: 700;
  font-family: Montserrat, sans-serif;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.rv-name { color: #fff; font-weight: 600; font-family: Montserrat, sans-serif; font-size: .95rem; line-height: 1.2; }
.rv-meta { color: rgba(255, 255, 255, .55); font-size: .75rem; margin-top: 2px; letter-spacing: .04em; text-transform: uppercase; }
.rv-stars { display: flex; gap: 2px; margin-bottom: .85rem; }
.rv-stars .rv-star { width: 16px; height: 16px; color: #ffd400; }
.rv-stars .rv-star.is-empty { color: #2c2c2c; }
.rv-text { color: rgba(255, 255, 255, .85); font-size: .92rem; line-height: 1.55; font-family: Montserrat, sans-serif; }
.rv-card__badge {
  display: inline-block;
  margin-top: 1rem;
  padding: .25rem .55rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd400;
  background: rgba(255, 212, 0, .1);
  border-radius: 999px;
  align-self: flex-start;
}

@media (max-width: 600px) {
  .rv-section { padding: 3rem 0 4rem; }
  .rv-head { flex-direction: column; align-items: flex-start; }
  .rv-card { padding: 1.25rem; }
}

/* ============================================================
   8. Mobile menu — full-screen overlay with clean hamburger ↔ X
   Override Webflow's display:none + z-index:-1 so we can drive it ourselves.
   ============================================================ */
.menu-mob-container {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  background: #0a0a0a !important;
  padding: 7rem 1.5rem 2rem !important;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 90 !important;
  overflow-y: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.is-mobile-menu-open .menu-mob-container,
.nav02.is-mobile-menu-open .menu-mob-container {
  transform: translateY(0);
  pointer-events: auto;
}
html.is-mobile-menu-open { overflow: hidden; }

/* Menu items */
.menu-mob-container .div-block-173 {
  display: flex !important;
  flex-direction: column;
  gap: .25rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.menu-mob-container .accordion_title-wrapper-2 {
  display: block !important;
  padding: 1rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  text-align: center;
}
.menu-mob-container .accordion_title {
  color: #fff !important;
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-size: 2rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: color .15s ease;
}
.menu-mob-container .accordion_title-wrapper-2:hover .accordion_title { color: #ffd400 !important; }
.menu-mob-container .button-wrapper {
  display: flex !important;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2rem;
  align-items: center;
}

/* Hamburger trigger — clean, modern, animates to a real X.
   Using an inner relative box of fixed size and centering the bars with
   top: 50% + translate so the rotation pivots exactly through the centre.
   This avoids any stale top: 4px / 12px winning over the open state and
   producing a crooked X. */
.menu-link-2 {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 100;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .25s ease;
  background: transparent !important;
}
.menu-link-2 > div {
  position: relative;
  width: 26px;
  height: 20px;
  display: block;
}
.hamburger-menu-bar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 26px !important;
  height: 2px !important;
  margin: 0 !important;
  background-color: currentColor !important;
  border-radius: 1px;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* Closed state: top bar 5px above centre, bottom bar 5px below */
.hamburger-menu-bar.top    { transform: translate(-50%, -50%) translateY(-5px); }
.hamburger-menu-bar.bottom { transform: translate(-50%, -50%) translateY(5px); }

/* Open state: both bars sit dead-centre and rotate to form a crisp X */
.nav02.is-mobile-menu-open .hamburger-menu-bar.top {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav02.is-mobile-menu-open .hamburger-menu-bar.bottom {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* On mobile we keep the hamburger white at all times (yellow nav with
   black/yellow controls is too overpowering at small sizes). */
.nav02.is-mobile-menu-open .menu-link-2,
.nav02.is-mobile-menu-open.is-scrolled .menu-link-2 {
  color: #fff !important;
}
.nav02.is-mobile-menu-open .hamburger-menu-bar,
.nav02.is-mobile-menu-open.is-scrolled .hamburger-menu-bar {
  background-color: #fff !important;
}
@media (max-width: 991px) {
  .nav02.is-scrolled { background-color: #0a0a0a; }
  .nav02.is-scrolled .menu-link-2,
  .nav02.is-scrolled .hamburger-menu-bar { color: #fff; background-color: #fff; }
  .nav02.is-scrolled .logotext,
  .nav02.is-scrolled .sublogotext { color: #fff; }
  .nav02.is-scrolled .navigation-logo .logo { filter: none; }
}

/* When the menu is open, hide the yellow scroll-state nav bg so the overlay
   reads as one continuous dark surface */
.nav02.is-mobile-menu-open,
.nav02.is-mobile-menu-open.is-scrolled {
  background-color: #0a0a0a !important;
  height: 120px !important;
}
.nav02.is-mobile-menu-open .navigation-logo { transform: none !important; }
.nav02.is-mobile-menu-open .logotext,
.nav02.is-mobile-menu-open .sublogotext { color: #fff !important; }

/* Hide the overlay on desktop */
@media (min-width: 992px) {
  .menu-mob-container { display: none !important; }
  .menu-link-2 { display: none !important; }
}

/* ============================================================
   9. FAQ accordion — tighter rows, custom chevron, elegant open/close
   All closed by default. Spacing 0.5rem between rows.
   ============================================================ */
.faq-question-wrap {
  margin-bottom: .5rem !important;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #141414;
}
/* Hairline rule between Course Dates section and FAQs section */
section.section.bg-neutral-800.home-classes + section.section,
section.section + section.section:has(.faq-question-wrap) {
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.faq-question-bar {
  position: relative;
  cursor: pointer;
  padding: .85rem 1.25rem !important;
  border: 0 !important;
  background: transparent !important;
  align-items: center;
  display: flex;
  width: 100%;
}
.faq-question-bar .question-title {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  color: #fff !important;
  font-family: Montserrat, sans-serif;
  flex: 1 1 auto;
  padding-right: 1.25rem;
}
/* Hide the broken Webflow Lottie placeholder */
.faq-question-bar .animation { display: none !important; }

/* Custom chevron — drawn with two pseudo-element rectangles forming a "v" */
.faq-question-bar::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid #ffd400;
  border-bottom: 2px solid #ffd400;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-question-wrap.is-open .faq-question-bar::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

/* Smooth, elegant open/close — single-axis transition (height only).
   The divider line lives INSIDE .faq-content as a top border, so it
   collapses cleanly with the content height instead of disappearing
   instantly when .is-open is removed. */
.faq-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}
.faq-content::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 212, 0, .15);
  margin: 0 1.25rem .85rem;
}
.faq-question-wrap.is-open .faq-content {
  max-height: 60rem !important;
}
.faq-question-wrap .faq-paragraph {
  padding: 0 1.25rem 1.1rem !important;
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, .8) !important;
}
.faq-question-wrap:hover { border-color: rgba(255, 212, 0, .35); }

/* ============================================================
   10. Misc small fixes
   ============================================================ */
/* Make sure form inputs aren't stretched too wide on the contact section */
.contact-form-2 input[type="submit"] { cursor: pointer; }

/* "View all dates" homepage CTA — keep the calendar icon visible at all sizes */
.icon-block .calendar-icon { width: 24px; height: 24px; }

/* Course-tab download booklet buttons — match the inner content width
   (not full-bleed). They should sit inline like normal CTAs, not span the
   whole content card, AND align with the body-text indent (the .text-container
   above them has a 5px yellow border-left + 40px padding-left, so the
   visible text starts ~45px in). */
.tab04_pane .button-outline-2 {
  width: auto !important;
  display: inline-flex !important;
  padding: .9rem 1.5rem !important;
  font-size: .95rem !important;
  letter-spacing: .02em;
  margin-left: 45px;
}
.tab04_pane .div-block-172 { height: .85rem; }

/* Course Dates nav button — vertically centre the text with the icon */
.icon-block { display: inline-flex !important; align-items: center !important; gap: .5rem; }
.icon-block .custom-button-text,
.icon-block .custom-button-text.login {
  margin-top: 0 !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  /* Stencil font sits high in its em-box; nudge the glyph down so it
     visually centres against the yellow nav band and the calendar icon. */
  transform: translateY(3px);
}
.nav02 .navigation-buttons .icon-block { padding-top: 0; padding-bottom: 0; }
.nav02 .navigation-buttons .icon-block .calendar-icon { transform: translateY(1px); }

/* ============================================================
   16. Sticky tabs sidebar (About-the-Course section, desktop only)
   ============================================================ */
@media (min-width: 992px) {
  .tab04_tabs { align-items: flex-start; }
  .tab04_menu {
    position: sticky !important;
    top: 120px;
    align-self: flex-start;
    z-index: 5;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 14px !important;
    margin-right: 24px !important;
    grid-row-gap: 4px !important;
    gap: 4px !important;
    width: 270px;
    flex: 0 0 270px;
    box-sizing: border-box;
  }
  .tab04_menu .tab04_tab {
    min-width: 0 !important;
    width: 100%;
    padding: 8px 12px !important;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .tab04_menu .tab04_tab.w--current {
    min-width: 0 !important;
    width: 100%;
    background-color: rgba(255, 212, 0, .08);
    border: 1px solid rgba(255, 212, 0, .35);
  }
  .tab04_menu .tab04_tab:hover {
    background-color: rgba(13, 13, 13, .04);
  }
  .tab04_menu .tab04_title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #0a1f44;
    transition: color .15s ease;
  }
  .tab04_menu .tab04_icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(13, 13, 13, .06);
    color: #0a1f44;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background-color .15s ease;
  }
  /* Hover state — text + icon go BLACK for readability against the
     pale hover/current backgrounds. Override the Webflow default
     yellow w-tab-link hover. */
  .tab04_menu .tab04_tab:hover .tab04_title,
  .tab04_menu .tab04_tab:hover .tab04_icon,
  .tab04_menu .tab04_tab.w--current .tab04_title,
  .tab04_menu .tab04_tab.w--current .tab04_icon,
  .tab04_menu .tab04_tab.w--current:hover .tab04_title,
  .tab04_menu .tab04_tab.w--current:hover .tab04_icon {
    color: #0d0d0d !important;
  }
  .tab04_menu .tab04_tab.w--current .tab04_icon {
    background: rgba(255, 212, 0, .22);
  }
  .tab04_menu .tab04_tab:hover .tab04_icon {
    background: rgba(13, 13, 13, .1);
  }
}
/* Tab pill icon — base styles (desktop overrides above). */
.tab04_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #0a1f44;
  flex: 0 0 auto;
}
.tab04_icon svg { display: block; }

/* Tabs: ONLY colour changes when state flips — never position.
   The Webflow base CSS sets margin-bottom: 10px on .tab04_tab and
   margin-bottom: 15px on .tab04_tab.w--current at the tablet breakpoint,
   which is the 5px "move up" the user was seeing (everything below the
   current tab gets pushed 5px further down). Force margins identical. */
.tab04_tab,
.tab04_tab.w--current {
  margin: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* Mobile: stack tabs vertically as a clean compact list, full-width pills.
   The previous 2x2 wrap chopped "What You'll Learn". */
@media (max-width: 991px) {
  .tab04_menu {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    grid-row-gap: 4px !important;
    grid-column-gap: 0 !important;
    padding: 10px !important;
    margin-right: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .tab04_menu .tab04_tab,
  .tab04_menu .tab04_tab.w--current {
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px 12px !important;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
  }
  .tab04_menu .tab04_tab.w--current {
    background-color: rgba(255, 212, 0, .1);
    border-color: rgba(255, 212, 0, .35);
  }
  .tab04_menu .tab04_title {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: #0a1f44;
  }
  .tab04_icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(13, 13, 13, .06);
    margin-right: 0;
  }
  .tab04_menu .tab04_tab:hover .tab04_title,
  .tab04_menu .tab04_tab.w--current .tab04_title {
    color: #0d0d0d !important;
  }
  .tab04_menu .tab04_tab.w--current .tab04_icon {
    background: rgba(255, 212, 0, .22);
    color: #0d0d0d;
  }
}

/* ============================================================
   17. Hero CTA — "Lift your career" — polished, conversion-focused
   ============================================================ */
.hero-cta {
  position: relative;
  overflow: hidden;
  min-height: 580px;
  background: #0a0a0a;
  isolation: isolate;
}
.hero-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-cta__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.85) 45%, rgba(10,10,10,.55) 75%, rgba(10,10,10,.35) 100%),
    linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,.6) 100%);
  z-index: 1;
}
.hero-cta__container {
  position: relative;
  z-index: 2;
  max-width: 80rem;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  display: flex;
  align-items: center;
  min-height: 580px;
}
.hero-cta__content {
  max-width: 38rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hero-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  font-family: Montserrat, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
  width: fit-content;
  align-self: flex-start;
  background: rgba(255, 212, 0, .12);
  border: 1px solid rgba(255, 212, 0, .35);
  padding: .55rem .95rem;
}
.hero-cta__eyebrow strong { color: #fff; font-weight: 800; }
.hero-cta__star { color: #ffd400; letter-spacing: 1px; font-size: .9rem; }
.hero-cta__divider { width: 1px; height: 12px; background: rgba(255,255,255,.25); }
.hero-cta__title {
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-weight: 800;
  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.hero-cta__title-line { white-space: nowrap; }
@media (max-width: 600px) {
  .hero-cta__title-line { white-space: normal; }
}
.hero-cta__title-em { color: #ffd400; }
.hero-cta__lede {
  font-family: Montserrat, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  max-width: 34rem;
}
.hero-cta__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-cta__points li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: Montserrat, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 0;
}
.hero-cta__points li svg { color: #ffd400; flex: 0 0 auto; }
.hero-cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1rem; }
.hero-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.5rem;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.hero-cta__btn--primary { background: #ffd400; color: #0d0d0d; border: 0; }
.hero-cta__btn--primary:hover { background: #fff; color: #0d0d0d; transform: translateY(-1px); }
.hero-cta__btn--secondary { background: transparent; color: #fff; border: 0; }
.hero-cta__btn--secondary:hover { color: #fff; transform: translateY(-1px); }

/* ============================================================
   18. Universal CLIPPED BUTTON system — true corner clips via
   clip-path: polygon. Replaces the .corner-dark overlay-square trick
   that left visible coloured rectangles peeking through.
   Applied to nav buttons, hero CTAs, course-date "Book Now", every
   call-to-action across the site.
   ============================================================ */
.clipped-btn {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
/* Outline variant — true polygon-following stroke via a hollow-polygon
   clip-path on a ::before layer. The hollow polygon is a self-intersecting
   path that paints ONLY the 2px ring around the chopped-corner shape, so
   the diagonal cuts have outline too (no flat-edge box-shadow gap).
   Parent removes its own clip-path so the ::before's clip is the visible
   shape. The button hit-area is still rectangular — fine for clicking. */
.clipped-btn--outline {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  clip-path: none !important;
  position: relative;
  overflow: visible;
}
.clipped-btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .55);
  clip-path: polygon(
    0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px),
    0 calc(100% - 14px),
    2px calc(100% - 15px), 15px calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 15px,
    calc(100% - 15px) 2px, 2px 2px,
    2px calc(100% - 15px), 0 calc(100% - 14px)
  );
  pointer-events: none;
  transition: background-color .2s ease;
  z-index: 0;
}
.clipped-btn--outline > * { position: relative; z-index: 1; }
/* On hover, switch the ::before clip-path from hollow ring to a SOLID
   polygon so the entire inside fills white (not just the outline ring),
   and flip icon + text to black for contrast. */
.clipped-btn--outline:hover::before {
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.clipped-btn--outline:hover svg { color: #0d0d0d !important; stroke: #0d0d0d !important; }
.clipped-btn--outline:hover { color: #0d0d0d !important; }

/* Apply true clipping to legacy Webflow CTA shapes and HIDE the
   .corner-dark overlay rectangles that previously faked the clip. */
.custom-button.primary,
.custom-button.primary.icon,
.icon-block {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.nav02 .custom-button.primary,
.nav02 .custom-button.primary.icon,
.nav02 .icon-block {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.corner-dark { display: none !important; }

/* Nav buttons — size lockdown so COURSE DATES doesn't render bigger
   than 0406 778 456. Both share the same intrinsic font-size + height. */
.nav02 .icon-block,
.nav02 .custom-button.primary {
  font-size: .85rem !important;
  padding: .7rem 1rem !important;
  line-height: 1.2 !important;
}
.nav02 .icon-block,
.nav02 .icon-block *,
.nav02 .custom-button.primary,
.nav02 .custom-button.primary * {
  font-size: inherit;
}
.nav02 .icon-block .custom-button-text,
.nav02 .icon-block .custom-button-text.login,
.nav02 .custom-button.primary .custom-button-text,
.nav02 .custom-button.primary .rollup,
.nav02 .icon-block .rollup {
  font-size: .85rem !important;
  font-weight: 800 !important;
  font-family: Montserrat, sans-serif !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
}
.nav02 .icon-block .calendar-icon { width: 18px !important; height: 18px !important; }
.nav02 .custom-button.primary .icon-1x1-small svg { width: 18px !important; height: 18px !important; }

/* Course Dates icon-block — ensure it has the same dark-pill background
   as the phone .custom-button.primary so they read as one button family. */
.nav02 .icon-block {
  background-color: #1f1f1f;
  color: #fff;
  transition: background-color .2s ease, color .2s ease;
}
.nav02.is-scrolled .icon-block,
.nav02.is-scrolled .custom-button.primary,
.nav02.is-scrolled .custom-button.primary.icon { background-color: #0d0d0d !important; }
.nav02 .icon-block:hover { background-color: #fff; color: #0d0d0d; }
.nav02 .icon-block:hover .calendar-icon { color: #0d0d0d !important; stroke: #0d0d0d !important; }
.nav02 .icon-block:hover .rollup__top,
.nav02 .icon-block:hover .rollup__hov,
.nav02 .icon-block:hover .custom-button-text { color: #0d0d0d !important; }
.nav02.is-scrolled .icon-block:hover,
.nav02.is-scrolled .custom-button.primary:hover { background-color: #fff; }
.nav02.is-scrolled .icon-block:hover .calendar-icon,
.nav02.is-scrolled .icon-block:hover .rollup__top,
.nav02.is-scrolled .icon-block:hover .rollup__hov,
.nav02.is-scrolled .icon-block:hover .custom-button-text,
.nav02.is-scrolled .custom-button.primary:hover .icon-1x1-small svg,
.nav02.is-scrolled .custom-button.primary:hover .rollup__top,
.nav02.is-scrolled .custom-button.primary:hover .rollup__hov,
.nav02.is-scrolled .custom-button.primary:hover .custom-button-text { color: #0d0d0d !important; stroke: #0d0d0d !important; }

@media (max-width: 991px) {
  .hero-cta__overlay {
    background:
      linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.85) 60%, rgba(10,10,10,.96) 100%);
  }
  .hero-cta__container { padding: 4rem 1.5rem; }
}
@media (max-width: 600px) {
  .hero-cta { min-height: auto; }
  .hero-cta__container { min-height: auto; padding: 3.5rem 1.25rem; }
  .hero-cta__title { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-cta__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   13b. Section spacing + thin subtle dividers
   Squeeze the gap between FAQs and the Book-a-call section, and
   give each major section a hairline separator at its bottom.
   ============================================================ */
/* Reduce padding under the FAQs section on the homepage */
section.section + section.ct-section { border-top: 1px solid rgba(255, 255, 255, .06); }
.ct-section { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 4rem; }
.rv-section + .ct-section { padding-top: 3rem; }

/* Tighten the FAQs section bottom padding */
section.section:has(.faq-question-wrap) { padding-bottom: 3rem !important; }

/* Subtle hairline at the bottom of each main section so they read as
   distinct surfaces without heavy boxes. */
.rv-section,
.ct-section,
section.section { position: relative; }

/* ============================================================
   14. Footer phone/email icons
   ============================================================ */
.footer-link {
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
}
.footer-icon-inline {
  flex: 0 0 auto;
  color: #ffd400;
  opacity: .9;
}

/* Footer trust badge — right-aligned in the top row */
.footer-top-row { align-items: center; }
.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  font-family: Montserrat, sans-serif;
  font-size: .85rem;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 212, 0, .08);
  border: 1px solid rgba(255, 212, 0, .25);
  padding: .65rem 1rem;
  letter-spacing: .01em;
  margin-left: auto;
}
.footer-trust-badge__stars {
  display: inline-flex;
  gap: 2px;
  color: #ffd400;
  flex: 0 0 auto;
}
.footer-trust-badge__stars svg { width: 14px; height: 14px; display: block; }
.footer-trust-badge__rating { color: #fff; }
.footer-trust-badge__rating strong { color: #ffd400; font-weight: 800; margin-right: .15rem; }
.footer-trust-badge__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .25);
}
.footer-trust-badge__rto { color: rgba(255, 255, 255, .8); white-space: nowrap; }
@media (max-width: 767px) {
  .footer-trust-badge {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    font-size: .8rem;
  }
}

/* ============================================================
   15. Weekend-empty special message
   ============================================================ */
.course-filter-empty.is-weekend-empty {
  background: rgba(255, 212, 0, .08);
  border: 1px solid rgba(255, 212, 0, .25);
  padding: 1.25rem 1.5rem;
  color: #fff;
  text-align: left;
  line-height: 1.6;
  margin-top: 1rem;
}
.course-filter-empty.is-weekend-empty strong { color: #ffd400; display: block; margin-bottom: .35rem; font-size: 1rem; }
.course-filter-empty.is-weekend-empty a {
  color: #ffd400;
  text-decoration: underline;
  font-weight: 600;
}
.course-filter-empty.is-weekend-empty a:hover { color: #fff; }

/* ============================================================
   12. Container width unification
   Match all containers to the contact + footer rhythm: 1280px max,
   1.5rem horizontal padding on mobile, edge-to-edge on desktop.
   ============================================================ */
.container-default,
.container-default.w-container,
.container-large {
  width: 100%;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 991px) {
  .container-default,
  .container-default.w-container,
  .container-large {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (min-width: 992px) {
  .container-default,
  .container-default.w-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   13. Brighten the "I'm Guy" intro paragraph (about-the-Guy block on home)
   ============================================================ */
/* The home About section uses faq-paragraph or paragraph utility — make all
   white-on-dark paragraphs in that section more readable. */
.section.bg-neutral-800 .faq-paragraph,
.section.bg-neutral-800 p,
.section.bg-neutral-800 .paragraph,
.section.bg-neutral-800 .paragraph-large,
.section.bg-neutral-800 .text-color-white-2 { color: #fff !important; opacity: .92; }

/* Specifically the "I'm Guy Hennequin..." block — uses .faq-paragraph in
   .section.bg-neutral-800. Bump weight and brightness. */
.section.bg-neutral-800 .faq-paragraph,
.faq-paragraph { color: #fff; opacity: .92; line-height: 1.65; }
.faq-paragraph strong { color: #fff; }

/* Generic paragraph readability for dark sections */
.color-white p,
.section p,
section p { color: rgba(255, 255, 255, .9); }
.section h1, .section h2, .section h3, .section h4,
section h1, section h2, section h3, section h4 { color: #fff; }

/* ============================================================
   11a. Contact section (book-your-course CTA)
   Two-column layout: left = info + map, right = form card.
   ============================================================ */
.ct-section {
  position: relative;
  padding: 6rem 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(255, 212, 0, .08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255, 212, 0, .05) 0%, transparent 55%),
    linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Subtle dot/grid texture for premium feel */
.ct-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%);
}
/* Soft yellow glow behind the form card */
.ct-section::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -120px;
  top: 30%;
  background: radial-gradient(circle, rgba(255, 212, 0, .12) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}
.ct-container { position: relative; z-index: 1; }
.ct-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.5rem;
  align-items: stretch;
}

/* LEFT — info column. Use flex column so the map can be pushed to the
   bottom (so its bottom aligns with the contact card's bottom on the right). */
.ct-info {
  color: #fff;
  display: flex;
  flex-direction: column;
}
.ct-lede { margin-bottom: 1.75rem !important; }
.ct-list {
  margin-bottom: 1.5rem !important;
  background: rgba(20, 20, 20, .7) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px;
  padding: .75rem 1.1rem !important;
}
.ct-map { margin-top: auto; }
.ct-map iframe { height: 280px !important; }
.ct-eyebrow {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  font-family: Montserrat, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #ffd400;
  background: rgba(255, 212, 0, .12);
  padding: .35rem .75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.ct-title {
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: #fff;
}
.ct-lede {
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 2rem;
  max-width: 38rem;
}
.ct-list { list-style: none; padding: .75rem 1.1rem; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.ct-item { display: flex; gap: .85rem; align-items: center; padding: .15rem 0; }
.ct-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 212, 0, .12);
  color: #ffd400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct-icon svg { width: 17px; height: 17px; }
.ct-item__body { font-family: Montserrat, sans-serif; }
.ct-item__primary {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color .15s ease;
}
a.ct-item__primary:hover { color: #ffd400; }
.ct-item__meta {
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
  letter-spacing: .02em;
}
.ct-map {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #161616;
}
.ct-map iframe { display: block; }

/* RIGHT — form card */
.ct-card {
  background: #fff;
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  color: #0d0d0d;
}
.ct-card__head { margin-bottom: 1.5rem; }
.ct-card__title {
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 .5rem;
  color: #0d0d0d;
  letter-spacing: .02em;
}
.ct-card__sub {
  font-family: Montserrat, sans-serif;
  font-size: .9rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}
.ct-form { display: flex; flex-direction: column; gap: 1rem; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ct-field { display: flex; flex-direction: column; gap: .35rem; }
.ct-label {
  font-family: Montserrat, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #444;
}
/* Wrap that contains both the icon and the input */
.ct-field__input {
  position: relative;
  display: block;
}
.ct-field__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
  transition: color .15s ease;
  flex: 0 0 auto;
}
.ct-field__input textarea ~ .ct-field__icon,
.ct-field__input:has(textarea) .ct-field__icon { top: 1.05rem; transform: none; }

.ct-field input,
.ct-field textarea {
  appearance: none;
  font: inherit;
  font-family: Montserrat, sans-serif;
  font-size: .95rem;
  font-weight: 400 !important;
  color: #0d0d0d;
  background: #f6f6f6;
  border: 1.5px solid #e6e6e6;
  padding: .85rem 1rem .85rem 2.6rem;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #9b9b9b; font-weight: 400; }
.ct-field input:focus,
.ct-field textarea:focus {
  outline: 0;
  border-color: #ffd400;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .25);
}
.ct-field__input:focus-within .ct-field__icon { color: #0d0d0d; }
.ct-submit {
  appearance: none;
  background: #ffd400;
  color: #0d0d0d;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1.1rem 1.5rem;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  margin-top: .5rem;
}
.ct-submit:hover { background: #f5c800; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 212, 0, .35); }
.ct-submit:active { transform: translateY(0); }
.ct-fineprint {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: .78rem;
  color: #888;
  margin: .25rem 0 0;
}
.ct-success,
.ct-error { display: none; padding: 1rem; border-radius: 10px; font-family: Montserrat, sans-serif; }
.w-form-done.ct-success { background: #e6f8ed; color: #0a6b2e; }
.w-form-fail.ct-error { background: #fde7e7; color: #8b1f1f; }

@media (max-width: 991px) {
  .ct-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
  .ct-section { padding: 4rem 0; }
  .ct-card { padding: 1.5rem; }
  .ct-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   11. Privacy Policy page
   ============================================================ */
.pp-section {
  padding: 12rem 0 5rem;
  background: #0a0a0a;
  color: #fff;
}
.pp-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.pp-header {
  border-bottom: 1px solid rgba(255, 212, 0, .25);
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}
.pp-eyebrow {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #ffd400;
  background: rgba(255, 212, 0, .12);
  padding: .35rem .75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.pp-title {
  font-family: stick-no-bills, "Stick No Bills", Montserrat, sans-serif;
  font-weight: 800;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.02;
  margin: 0 0 1rem;
  color: #fff;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.pp-meta {
  font-family: Montserrat, sans-serif;
  font-size: .9rem;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .03em;
}
.pp-body {
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}
.pp-body h2 {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.75rem 0 1rem;
  letter-spacing: .005em;
  position: relative;
  padding-left: 1rem;
}
.pp-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .35rem;
  width: 3px;
  background: #ffd400;
  border-radius: 2px;
}
.pp-body p { margin: 0 0 1rem; }
.pp-body ul { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.pp-body li { margin-bottom: .65rem; }
.pp-body a { color: #ffd400; text-decoration: underline; text-underline-offset: 3px; }
.pp-body a:hover { color: #fff; }
.pp-body strong { color: #fff; font-weight: 600; }

.pp-lede {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
  border-left: 3px solid #ffd400;
  padding-left: 1.25rem;
  margin: 0 0 2.5rem;
}

.pp-contact {
  list-style: none;
  padding: 1.25rem 1.5rem;
  background: #161616;
  border: 1px solid #222;
  border-radius: 12px;
  margin: 1rem 0 1.5rem;
}
.pp-contact li { margin-bottom: .5rem; }
.pp-contact li:last-child { margin-bottom: 0; }

.pp-footnote {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .55);
  font-size: .9rem;
  font-style: italic;
}

@media (max-width: 600px) {
  .pp-section { padding: 9rem 0 3rem; }
  .pp-body h2 { font-size: 1.2rem; }
}