.gs-lhero {
  --u: min(1px, 0.0520833vw);
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-ink: #111117;
  --gs-muted: #6d7076;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(800 * var(--u));
  display: flex;
  align-items: center;

  /* CHANGE BACKGROUND IMAGE HERE (1920 × 800 frame) */
  background: #fff url("../images/location-background.png") center / cover no-repeat;
  font-family: "Manrope", sans-serif;
}
.gs-lhero *, .gs-lhero *::before, .gs-lhero *::after { box-sizing: border-box; }

/* text block 747 wide, starting at Figma x 375 */
.gs-lhero__wrap {
  position: relative;
  z-index: 2;
  width: calc(1170 * var(--u));
  margin: 0 auto;
  padding: calc(40 * var(--u)) 0;
}
.gs-lhero__text { max-width: calc(747 * var(--u)); }

.gs-lhero__sub {
  display: inline-block;
  margin: 0;
  padding-bottom: calc(14 * var(--u));
  border-bottom: max(1px, calc(2 * var(--u))) solid var(--gs-red);
  color: var(--gs-muted);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: max(13px, calc(20 * var(--u)));
  line-height: 1;
}

.gs-lhero__title {
  margin: calc(24 * var(--u)) 0 0;
  color: var(--gs-ink);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: max(38px, calc(80 * var(--u)));
  line-height: 1;
  letter-spacing: -0.03em;
}

.gs-lhero__lead {
  margin: calc(32 * var(--u)) 0 0;
  max-width: calc(660 * var(--u));
  color: var(--gs-dark);
  font-size: max(12px, calc(18 * var(--u)));
  font-weight: 500;
  line-height: 1.667;
  letter-spacing: .03em;
}

.gs-lhero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(213 * var(--u));
  height: max(44px, calc(54 * var(--u)));
  margin-top: calc(32 * var(--u));
  padding: 0 calc(32 * var(--u));
  background: var(--gs-red);
  color: #fff;
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-lhero__btn:hover, .gs-lhero__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-lhero__btn:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 3px; }

/* right artwork 1108 × 770 at Figma x 1006 (bleeds off the right edge) */
.gs-lhero__img {
  position: absolute;
  z-index: 1;
  left: calc(50% + 46 * var(--u));
  top: calc(50% - 385 * var(--u));
  width: calc(1108 * var(--u));
  height: auto;
}

/* =========================================================
   TABLET / MOBILE — text first, artwork below
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-lhero {
    --u: 1px;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 40px;
    /* show the calm right-hand part of the artwork: scaled to a narrow
       screen, the red/dark diagonal corner landed over the heading */
    background-size: auto 100%;
    background-position: right top;
  }
  .gs-lhero__wrap { width: auto; padding: 80px 24px 0; }
  .gs-lhero__text { max-width: 640px; }
  .gs-lhero__title { font-size: 52px; line-height: 1.08; }
  .gs-lhero__lead { max-width: 640px; font-size: 16px; }
  .gs-lhero__img {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    margin-top: 32px;
  }
}

@media (max-width: 767.98px) {
  .gs-lhero { padding-bottom: 28px; }
  .gs-lhero__wrap { padding: 60px 18px 0; }
  .gs-lhero__sub { font-size: 15px; }
  .gs-lhero__title { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.12; }
  .gs-lhero__lead { font-size: 15px; line-height: 1.75; }
  .gs-lhero__btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-lhero * { transition: none !important; }
  .gs-lhero__btn:hover { transform: none; }
}


/* ======================================================================why chosoe section */


.gs-why4 {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-ink: #111117;
  --gs-muted: #6d7076;

  box-sizing: border-box;
  width: 100%;
  padding: 100px 0;
  background: #fff;
  font-family: "Manrope", sans-serif;
}
.gs-why4 *, .gs-why4 *::before, .gs-why4 *::after { box-sizing: border-box; }
.gs-why4 ul { margin: 0; padding: 0; list-style: none; }

.gs-why4__wrap {
  width: min(1170px, 100% - 30px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ---------- Header: title 494 | intro 564, bottom aligned ---------- */
.gs-why4__head { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.gs-why4__title-block { flex: 0 1 494px; }
.gs-why4__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--gs-muted); font-size: 16px; line-height: 16px; }
.gs-why4__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-why4__title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.03em;
}
.gs-why4__intro {
  flex: 0 1 564px;
  margin: 0;
  color: var(--gs-muted);
  font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: .05em;
}

/* ---------- 4 cards, 274.5 wide, gap 24 ---------- */
.gs-why4__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 46px;                       /* room for the icon overlap */
}
.gs-why4__card {
  position: relative;
  height: 100%;
  padding: 64px 16px 24px;
  background: #fff;
  border-top: 5px solid var(--gs-red);
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
}

/* 90px round icon, centred and overlapping the card top */
.gs-why4__ico {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--gs-red);
  background: #fff;
  transition: background .3s ease, border-color .3s ease;
}
.gs-why4__ico svg {
  width: 44px; height: 44px;
  fill: none; stroke: var(--gs-red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s ease;
}

/* active / hover = Figma card 1: solid red icon + deeper shadow */
.gs-why4__card.is-active, .gs-why4__card:hover { box-shadow: 6px 6px 30px rgba(0,0,0,.6); }
.gs-why4__card:hover { transform: translateY(-4px); }
.gs-why4__card.is-active .gs-why4__ico, .gs-why4__card:hover .gs-why4__ico { background: var(--gs-red); border-color: var(--gs-red); }
.gs-why4__card.is-active .gs-why4__ico svg, .gs-why4__card:hover .gs-why4__ico svg { stroke: #fff; }
.gs-why4__grid:hover .gs-why4__card.is-active:not(:hover) { box-shadow: 6px 6px 30px rgba(0,0,0,.16); }
.gs-why4__grid:hover .gs-why4__card.is-active:not(:hover) .gs-why4__ico { background: #fff; }
.gs-why4__grid:hover .gs-why4__card.is-active:not(:hover) .gs-why4__ico svg { stroke: var(--gs-red); }

.gs-why4__name {
  margin: 0;
  color: var(--gs-ink);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 24px;
}
.gs-why4__text {
  margin: 32px 0 0;
  color: var(--gs-muted);
  font-size: 14px; font-weight: 500; line-height: 26px;
}

/* ---------- Button ---------- */
.gs-why4__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  height: 56px;
  padding: 0 40px;
  background: var(--gs-red);
  color: #fff;
  font-size: 16px; font-weight: 700; line-height: 22px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-why4__btn:hover, .gs-why4__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-why4__btn:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 3px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
  .gs-why4 { padding: 80px 0; }
  .gs-why4__wrap { width: auto; padding: 0 24px; gap: 44px; }
  .gs-why4__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gs-why4__title-block, .gs-why4__intro { flex: none; max-width: 640px; }
  .gs-why4__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .gs-why4 { padding: 56px 0; }
  .gs-why4__wrap { padding: 0 18px; gap: 36px; }
  .gs-why4__title { font-size: 28px; line-height: 36px; }
  .gs-why4__intro { font-size: 15px; line-height: 28px; letter-spacing: .02em; }
  .gs-why4__grid { grid-template-columns: 1fr; gap: 70px; max-width: 360px; margin: 0 auto; }
  .gs-why4__card:hover { transform: none; }
  .gs-why4__btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) { .gs-why4 * { transition: none !important; } }


/*================================================= exclusive feature */

.gs-mission {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-ink: #111117;
  --gs-muted: #6d7076;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 100px 0;
  background: #fff;
  font-family: "Manrope", sans-serif;
}
.gs-mission *, .gs-mission *::before, .gs-mission *::after { box-sizing: border-box; }

.gs-mission__wrap {
  width: min(1170px, 100% - 30px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 200px gap carrying "Bg Element.png" (circle on the left, grey line
   through the middle). Full-width, ratio-locked, never stretched;
   hidden below 1200px where there is no free margin for it. */
.gs-mission__divider { position: relative; height: 200px; }
.gs-mission__divider::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: 50%;
  height: 1px;
  background: #d4d4d6;
}
.gs-mission__divider::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  top: 50%;
  width: 100vw;
  height: calc(100vw * 939 / 1920);
  transform: translateY(-50%);
  /* CHANGE BG ELEMENT HERE */
  background: url("../images/Bg%20Element.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* shared heading bits */
.gs-ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 16px;
}
.gs-ab-chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-ab-title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.03em;
}

/* ---------- Mission row: 536 | 70 | 564 ---------- */
.gs-mission__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 70px; }
.gs-mission__text { flex: 1 1 536px; min-width: 0; }
.gs-mission__lead {
  margin: 20px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .03em;
}
.gs-mission__img { flex: 0 0 564px; width: 564px; height: auto; }

/* skill bars (Figma "image 2294 / 2295": 536 × 36.84) */
.gs-bars { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.gs-bar__top {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  color: var(--gs-dark);
  font-size: 14px;
  font-weight: 500;
}
.gs-bar__track { position: relative; height: 3px; background: #e6e6e6; }
.gs-bar__track span {
  display: block;
  width: var(--val);
  height: 100%;
  background: var(--gs-red);
}
.gs-bar__track span::after {                 /* marker at the end of the fill */
  content: "";
  position: absolute;
  top: -4px;
  left: calc(var(--val) - 5px);
  border: 5px solid transparent;
  border-top-color: var(--gs-dark);
}

/* ---------- Core values ---------- */
.gs-values { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 43px; }
.gs-values__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.gs-values__title-block { flex: 0 1 570px; }
.gs-values__intro {
  flex: 0 1 564px;
  margin: 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .05em;
}

.gs-values__row { display: flex; align-items: flex-start; gap: 42px; }
.gs-values__media { flex: 1 1 564px; min-width: 0; }
.gs-values__rule { display: block; height: 1px; background: var(--gs-red); margin-bottom: 35px; }
.gs-values__media img { display: block; width: 100%; height: auto; }

/* accordion 564 wide, items 73 tall, 20px gaps */
.gs-acc { flex: 1 1 564px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.gs-acc__item { border: 1px solid var(--gs-dark); }
.gs-acc h3 { margin: 0; }
.gs-acc__btn {
  width: 100%;
  min-height: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 30px;
  border: 0;
  background: none;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
  text-transform: capitalize;
  cursor: pointer;
}
.gs-acc__btn:focus-visible { outline: 2px solid var(--gs-red); outline-offset: -4px; }

/* 34px round toggle: dark with +, red with − when open */
.gs-acc__mark {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gs-dark);
  transition: background .2s ease;
}
.gs-acc__mark::before, .gs-acc__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 3px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.gs-acc__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.gs-acc__item.is-open .gs-acc__mark { background: var(--gs-red); }
.gs-acc__item.is-open .gs-acc__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

.gs-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.gs-acc__panel > p {
  overflow: hidden;
  margin: 0;
  padding: 0 30px;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .05em;
}
.gs-acc__item.is-open .gs-acc__panel { grid-template-rows: 1fr; }
.gs-acc__item.is-open .gs-acc__panel > p { padding-bottom: 26px; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-mission { padding: 80px 0; }
  .gs-mission__wrap { width: auto; padding: 0 24px; }
  .gs-mission__divider { height: 80px; }
  .gs-mission__divider::before { display: none; }
  .gs-mission__row { flex-direction: column; align-items: stretch; gap: 44px; }
  .gs-mission__img { flex: none; width: 100%; max-width: 564px; align-self: center; }
  .gs-values__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gs-values__title-block, .gs-values__intro { flex: none; max-width: 720px; }
  .gs-values__row { flex-direction: column; gap: 40px; }
  .gs-values__media, .gs-acc { flex: none; width: 100%; }
  .gs-values__media { max-width: 564px; align-self: center; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-mission { padding: 56px 0; }
  .gs-mission__wrap { padding: 0 18px; }
  .gs-mission__divider { height: 56px; }
  .gs-ab-title { font-size: 30px; line-height: 38px; }
  .gs-mission__lead, .gs-values__intro, .gs-acc__panel > p { font-size: 15px; line-height: 28px; letter-spacing: .02em; }
  .gs-acc__btn { min-height: 0; padding: 16px 18px; font-size: 16px; line-height: 21px; gap: 14px; }
  .gs-acc__mark { flex-basis: 30px; width: 30px; height: 30px; }
  .gs-acc__panel > p { padding: 0 18px; }
  .gs-acc__item.is-open .gs-acc__panel > p { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-mission * { transition: none !important; }
}


 /* <!-- =========================================================our trending courses  --> */

.gs-courses {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-ink: #111117;
  --gs-muted: #6d7076;

  box-sizing: border-box;
  width: 100%;
  padding: 100px 0;
  background: #fff;
  font-family: "Manrope", sans-serif;
}
.gs-courses *, .gs-courses *::before, .gs-courses *::after { box-sizing: border-box; }
.gs-courses ul { margin: 0; padding: 0; list-style: none; }

.gs-courses__wrap { width: min(1170px, 100% - 30px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 56px; }

/* ---------- Header ---------- */
.gs-courses__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 500px; text-align: center; }
.gs-courses__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gs-muted); font-size: 16px; line-height: 16px; }
.gs-courses__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-courses__title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.03em;
}
.gs-courses__sub { margin: 16px 0 0; color: var(--gs-muted); font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: .03em; }

/* ---------- Cards: 3 × 372.86, gap 32 ---------- */
.gs-courses__track {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(372.86px, 80vw);   /* fixed card width: the track
                                               scrolls, so the next card peeks
                                               in and the dots page through */
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gs-courses__track::-webkit-scrollbar { display: none; }
.gs-courses__track:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 4px; }

.gs-course {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 467px;
  background: var(--gs-dark);
  transition: box-shadow .3s ease, transform .3s ease;
}
.gs-course.is-active, .gs-course:hover { box-shadow: 6px 6px 30px rgba(0,0,0,.6); }
.gs-course:hover { transform: translateY(-4px); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) { box-shadow: none; }

.gs-course__img { height: 261px; overflow: hidden; background: #d9d9d9; }
.gs-course__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gs-course__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* inner #111117 panel, 32px padding, inset from the right */
.gs-course__panel {
  width: calc(100% - 42px);
  padding: 32px;
  background: var(--gs-ink);
  box-shadow: 6px 6px 30px rgba(0,0,0,.6);
}
.gs-course.is-active .gs-course__panel, .gs-course:hover .gs-course__panel { box-shadow: none; }

.gs-course__name { margin: 0; color: #fff; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 24px; line-height: 29px; }
.gs-course__text { margin: 24px 0 0; color: #a4a7ad; font-size: 14px; font-weight: 500; line-height: 26px; letter-spacing: .03em; }

/* Read More bar: 212 × 69 wedge + arrow */
.gs-course__more {
  position: relative;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 24px;
  text-decoration: none;
}
.gs-course__more-label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 212px;
  height: 69px;
  padding-left: 40px;
  background: var(--gs-red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: capitalize;
  line-height: 69px;
  transition: background .3s ease, color .3s ease;
}
.gs-course__plus { font-size: 16px; line-height: 1; }
.gs-course.is-active .gs-course__more-label, .gs-course:hover .gs-course__more-label { background: #fff; color: var(--gs-ink); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) .gs-course__more-label { background: var(--gs-red); color: #fff; }

.gs-course__arrow { position: relative; width: 110px; height: 6px; }
.gs-course__arrow::before { content: ""; position: absolute; right: 0; top: 2px; width: 100%; height: 2px; background: var(--gs-red); transition: background .3s ease; }
.gs-course__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 10px; height: 10px; border-top: 2px solid var(--gs-red); border-right: 2px solid var(--gs-red); transform: rotate(45deg); transition: border-color .3s ease; }
.gs-course.is-active .gs-course__arrow::before, .gs-course:hover .gs-course__arrow::before { background: #fff; }
.gs-course.is-active .gs-course__arrow::after, .gs-course:hover .gs-course__arrow::after { border-color: #fff; }
.gs-course__more:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* active card = light body (Figma card 1) */
.gs-course.is-active, .gs-courses__track:hover .gs-course:hover { background: #fff; }
.gs-course.is-active .gs-course__panel, .gs-course:hover .gs-course__panel { background: #fff; }
.gs-course.is-active .gs-course__name, .gs-course:hover .gs-course__name { color: var(--gs-ink); }
.gs-course.is-active .gs-course__text, .gs-course:hover .gs-course__text { color: var(--gs-muted); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) { background: var(--gs-dark); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) .gs-course__panel { background: var(--gs-ink); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) .gs-course__name { color: #fff; }
.gs-courses__track:hover .gs-course.is-active:not(:hover) .gs-course__text { color: var(--gs-muted); }
/* on the light card the arrow is dark */
.gs-course.is-active .gs-course__arrow::before, .gs-course:hover .gs-course__arrow::before { background: var(--gs-dark); }
.gs-course.is-active .gs-course__arrow::after, .gs-course:hover .gs-course__arrow::after { border-color: var(--gs-dark); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) .gs-course__arrow::before { background: var(--gs-red); }
.gs-courses__track:hover .gs-course.is-active:not(:hover) .gs-course__arrow::after { border-color: var(--gs-red); }

/* ---------- Dots ---------- */
.gs-courses__dots { display: flex; gap: 12px; }
.gs-courses__dots button {
  width: 12px; height: 12px;
  padding: 0;
  border: 1px solid var(--gs-red);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.gs-courses__dots button.is-active { background: var(--gs-dark); border-color: var(--gs-dark); }
.gs-courses__dots button:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 2px; }
.gs-courses__dots:empty { display: none; }

/* ---------- Tablet / mobile: swipeable ---------- */
@media (max-width: 1199.98px) {
  .gs-courses { padding: 80px 0; }
  .gs-courses__wrap { width: auto; padding: 0 24px; gap: 40px; }
  .gs-courses__track { grid-auto-columns: min(340px, 78vw); }
}
@media (max-width: 767.98px) {
  .gs-courses { padding: 56px 0; }
  .gs-courses__wrap { padding: 0 18px; gap: 32px; }
  .gs-courses__title { font-size: 28px; line-height: 36px; }
  .gs-courses__sub { font-size: 15px; line-height: 28px; }
  .gs-courses__track { grid-auto-columns: 86%; gap: 20px; }
  .gs-course:hover { transform: none; }
  .gs-course__panel { width: calc(100% - 32px); padding: 26px; }
}

@media (prefers-reduced-motion: reduce) { .gs-courses * { transition: none !important; } }


/* ========================================================================CTA */

.gs-contact-cta {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-height: 356px;
  display: flex;
  align-items: center;
  padding: 50px 0;

  /* CHANGE BACKGROUND IMAGE HERE
     Native height (356) is kept and the image stays centred, so the red
     stripe always sits in the same place relative to the text (never
     stretched). Wider/narrower screens only trim the plain outer edges. */
  background: #f5f5f5 url("../images/CTA.png") center / cover no-repeat;
  font-family: "Manrope", sans-serif;
}
.gs-contact-cta *, .gs-contact-cta *::before, .gs-contact-cta *::after { box-sizing: border-box; }

/* content: 422 wide, starts at Figma x 1124 → 164px right of centre */
.gs-contact-cta__inner {
  position: relative;
  z-index: 1;
  width: 422px;
  max-width: calc(100% - 48px);
  margin-left: calc(50% + 164px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* phone row: 24px red outline icon, gap 16 */
.gs-contact-cta__phone { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.gs-contact-cta__phone svg {
  flex: 0 0 24px; width: 24px; height: 24px;
  fill: none; stroke: var(--gs-red); stroke-width: 2; stroke-linejoin: round;
}
.gs-contact-cta__phone-text { display: flex; flex-direction: column; gap: 6px; }
.gs-contact-cta__phone-label { color: var(--gs-muted); font-size: 13px; line-height: 13px; }
.gs-contact-cta__phone-num {
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  white-space: nowrap;
  transition: color .2s ease;
}
.gs-contact-cta__phone:hover .gs-contact-cta__phone-num { color: var(--gs-red); }

.gs-contact-cta__title {
  margin: 24px 0 0;                    /* Figma 32 cap-to-cap */
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.03em;
}

.gs-contact-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 54px;
  margin-top: 24px;
  padding: 16px 32px;
  background: var(--gs-red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-contact-cta__btn:hover, .gs-contact-cta__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-contact-cta__phone:focus-visible, .gs-contact-cta__btn:focus-visible { outline: 2px solid var(--gs-dark); outline-offset: 3px; }

/* =========================================================
   LAPTOP (1200–1439): keep the text clear of the red stripe
   ========================================================= */
@media (max-width: 1439.98px) {
  .gs-contact-cta__inner { margin-left: auto; margin-right: max(24px, calc(50% - 585px)); }
}

/* =========================================================
   TABLET / MOBILE: show the calm right part of the artwork behind the
   text, keep a short red diagonal as the brand accent in the corner.
   ========================================================= */
@media (max-width: 991.98px) {
  .gs-contact-cta {
    min-height: 0;
    padding: 70px 0;
    background-position: right center;
  }
  .gs-contact-cta::before {             /* red diagonal accent (echoes the stripe) */
    content: "";
    position: absolute;
    top: -40px;
    left: -30px;
    width: 46px;
    height: 180px;
    background: var(--gs-red);
    transform: rotate(-42deg);
    transform-origin: top left;
  }
  .gs-contact-cta__inner {
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: center;
    text-align: center;
  }
  .gs-contact-cta__title { font-size: 34px; line-height: 44px; }
}

@media (max-width: 575.98px) {
  .gs-contact-cta { padding: 56px 0; }
  .gs-contact-cta::before { width: 34px; height: 130px; }
  .gs-contact-cta__inner { padding: 0 18px; }
  .gs-contact-cta__title { margin-top: 20px; font-size: 28px; line-height: 36px; }
  .gs-contact-cta__btn { width: 100%; max-width: 320px; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-contact-cta * { transition: none !important; }
  .gs-contact-cta__btn:hover { transform: none; }
}

 /* <!-- ===========================================================book your drive--> */
.gs-book {
  --u: min(1px, 0.0520833vw);
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(880 * var(--u));
  display: flex;
  align-items: center;
  background: #fff;
  font-family: "Manrope", sans-serif;
}

/* Figma: the textured panel is 1920 × 800 inside an 880-tall section, so the
   photo overhangs it by 40px top and bottom. The gradient fades the texture
   out to the right, leaving white behind the photo. */
.gs-book__panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(40 * var(--u));
  height: calc(800 * var(--u));
  z-index: 0;
  /* CHANGE BACKGROUND IMAGE HERE */
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 45%, #fff 93%),   /* fades to white behind the photo */
    url("../images/Contact%20From.webp") left center / cover no-repeat,
    #f5f5f5;
}
.gs-book *, .gs-book *::before, .gs-book *::after { box-sizing: border-box; }

/* text block 603 wide at Figma x 375 */
.gs-book__wrap {
  position: relative;
  z-index: 2;
  width: calc(1170 * var(--u));
  margin: 0 auto;
  padding: calc(40 * var(--u)) 0;
}
.gs-book__text { max-width: calc(603 * var(--u)); }

.gs-book__eyebrow {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  margin: 0 0 calc(20 * var(--u));
  color: var(--gs-muted);
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1;
}
.gs-book__chev { width: calc(22.5 * var(--u)); min-width: 16px; height: auto; fill: var(--gs-red); flex: 0 0 auto; }

.gs-book__title {
  margin: 0;
  max-width: calc(433 * var(--u));
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: max(28px, calc(40 * var(--u)));
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.gs-book__lead {
  margin: calc(56 * var(--u)) 0 0;
  max-width: calc(577 * var(--u));
  color: var(--gs-muted);
  font-size: max(12px, calc(16 * var(--u)));
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: .03em;
}

.gs-book__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(225 * var(--u));
  height: max(44px, calc(54 * var(--u)));
  margin-top: calc(56 * var(--u));
  padding: 0 calc(32 * var(--u));
  background: var(--gs-red);
  color: #fff;
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-book__btn:hover, .gs-book__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-book__btn:focus-visible { outline: 2px solid var(--gs-dark); outline-offset: 3px; }

/* ---------- Right-hand photo and shapes ---------- */
.gs-book__media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gs-book__media img {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(875 * var(--u));
  height: calc(880 * var(--u));      /* taller than the panel: overhangs it */
  object-fit: contain;
  object-position: right center;
}
/* =========================================================
   TABLET / MOBILE — text first, photo below, decorations off
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-book {
    --u: 1px;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }
  .gs-book__panel { position: absolute; top: 0; height: 100%; }
  .gs-book__wrap { width: auto; padding: 72px 24px 40px; }
  .gs-book__text { max-width: 640px; }
  .gs-book__title { max-width: 560px; font-size: 34px; line-height: 44px; }
  .gs-book__lead { max-width: 640px; margin-top: 24px; font-size: 16px; }
  .gs-book__btn { margin-top: 28px; }

  .gs-book__media { position: relative; inset: auto; width: 100%; }
  .gs-book__media img {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    height: auto;
  }
}

@media (max-width: 767.98px) {
  .gs-book__wrap { padding: 56px 18px 32px; }
  .gs-book__title { font-size: 28px; line-height: 36px; }
  .gs-book__lead { font-size: 15px; line-height: 1.8; }
  .gs-book__btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-book * { transition: none !important; }
  .gs-book__btn:hover { transform: none; }
}

/* links the admin put inside a sentence ([text](/page)) */
.gs-lhero__lead a, .gs-why4__intro a, .gs-why4__text a, .gs-values__intro a, .gs-acc__panel a, .gs-courses__sub a, .gs-course__text a, .gs-book__lead a { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gs-lhero__lead a:hover, .gs-why4__intro a:hover, .gs-why4__text a:hover, .gs-values__intro a:hover, .gs-acc__panel a:hover, .gs-courses__sub a:hover, .gs-course__text a:hover, .gs-book__lead a:hover { text-decoration-thickness: 2px; }