.gs-bde {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;
  --gs-line: #d4d4d6;

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

/* decorative circle */
.gs-bde::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  /* full circle: sized from the viewport, not clipped to the margin */
  width: min(60vw, 720px);
  /* CHANGE DECORATION IMAGE HERE */
  background: url("../images/Bg_element_2.png") left center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 1099.98px) { .gs-bde::before { display: none; } }   /* too narrow for the circle */

.gs-bde__wrap { position: relative; z-index: 1; width: min(1040px, 100% - 30px); margin: 0 auto; display: flex; flex-direction: column; gap: 100px; }

/* shared type */
.gs-bde__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--gs-muted); font-size: 16px; line-height: 16px; }
.gs-bde__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-bde__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-bde__lead { margin: 20px 0 0; color: var(--gs-muted); font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: .03em; }

/* ---------- Block 1 ---------- */
.gs-bde__intro { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.gs-bde__text { flex: 1 1 480px; min-width: 0; }

.gs-bde__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 316px; height: 57px;
  margin-top: 42px;
  padding: 0 32px;
  background: var(--gs-red);
  color: #fff;
  font-size: 18px; font-weight: 700; line-height: 25px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-bde__btn:hover, .gs-bde__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-bde__btn:focus-visible { outline: 2px solid var(--gs-dark); outline-offset: 3px; }

.gs-bde__pathway { margin-top: 42px; }
.gs-bde__pathway-label { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--gs-muted); font-size: 16px; line-height: 16px; }
.gs-bde__pathway-label svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--gs-red); stroke-width: 1.5; stroke-linecap: round; }
.gs-bde__hours { margin: 0; color: var(--gs-dark); font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 32px; line-height: 38px; text-transform: capitalize; }
.gs-bde__pathway .gs-bde__lead { max-width: 429px; }

/* composite image group (550 × 392 in Figma) */
.gs-bde__media { flex: 0 1 490px; width: 100%; max-width: 490px; height: auto; display: block; }

/* ---------- Block 2 ---------- */
.gs-bde__steps-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; }
.gs-bde__steps-intro { flex: 1 1 400px; min-width: 0; }
.gs-bde__steps-intro .gs-bde__title { font-size: 40px; }
.gs-bde__steps-img { display: block; width: 100%; height: auto; margin-top: 42px; aspect-ratio: 454 / 256; object-fit: cover; background: #d9d9d9; }

.gs-bde__steps { flex: 1 1 540px; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-top: 1px solid var(--gs-line); padding-top: 24px; }
.gs-bde__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gs-line);
}

.gs-bde__step-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gs-bde__step-num { margin: 0 0 0 54px; color: var(--gs-red); font-size: 14px; font-weight: 600; line-height: 19px; }
.gs-bde__step-body { display: flex; align-items: flex-start; gap: 24px; }
.gs-bde__step-ico { flex: 0 0 30px; width: 30px; height: 30px; }
.gs-bde__step-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--gs-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gs-bde__step-name { margin: 0; color: var(--gs-dark); font-family: "Urbanist", sans-serif; font-weight: 700; font-size: 18px; line-height: 22px; text-transform: capitalize; }
.gs-bde__step-desc { margin: 16px 0 0; color: var(--gs-muted); font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: .05em; }
.gs-bde__step-hours { flex: 0 0 auto; margin: 0; color: var(--gs-dark); font-family: "Urbanist", sans-serif; font-weight: 700; font-size: 16px; line-height: 19px; text-transform: capitalize; }

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
  .gs-bde { padding: 80px 0; }
  .gs-bde__wrap { width: auto; padding: 0 24px; gap: 70px; }
  .gs-bde__intro, .gs-bde__steps-row { flex-direction: column; align-items: stretch; gap: 44px; }
  .gs-bde__text, .gs-bde__steps-intro, .gs-bde__steps { flex: none; }
  .gs-bde__media { flex: none; width: 100%; max-width: 550px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .gs-bde { padding: 56px 0; }
  .gs-bde__wrap { padding: 0 18px; gap: 50px; }
  .gs-bde__title, .gs-bde__steps-intro .gs-bde__title { font-size: 28px; line-height: 36px; }
  .gs-bde__hours { font-size: 26px; line-height: 32px; }
  .gs-bde__lead, .gs-bde__step-desc { font-size: 15px; line-height: 28px; letter-spacing: .02em; }
  .gs-bde__btn { width: 100%; min-width: 0; max-width: 340px; font-size: 16px; padding: 0 20px; }
  .gs-bde__step { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gs-bde__step-num { margin-left: 0; }
  .gs-bde__step-body { gap: 16px; }
  .gs-bde__step-hours { margin-left: 46px; }
}

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



/* ====================================================2nd section */


.gs-after {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;
  --gs-green: #00a93e;

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

.gs-after__wrap { width: min(1040px, 100% - 30px); margin: 0 auto; }

.gs-after__card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 56px;
  background: #fff;
  border-left: 5px solid var(--gs-red);
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
}

.gs-after__tick {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1000px;
  background: var(--gs-green);
}
.gs-after__tick svg { width: 16px; height: 11px; }

.gs-after__text { min-width: 0; }
.gs-after__title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 38px;
  text-transform: capitalize;
}
.gs-after__body {
  margin: 32px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .05em;
}

@media (max-width: 991.98px) {
  .gs-after__card { padding: 36px; }
  .gs-after__title { font-size: 26px; line-height: 32px; }
}
@media (max-width: 767.98px) {
  .gs-after { padding: 28px 0; }
  .gs-after__wrap { width: auto; padding: 0 18px; }
  .gs-after__card { gap: 16px; padding: 24px; }
  .gs-after__title { font-size: 22px; line-height: 28px; }
  .gs-after__body { margin-top: 18px; font-size: 15px; line-height: 28px; letter-spacing: .02em; }
}

 /* <!-- =========================================================================3rd section --> */

.gs-sched-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-sched-cta *, .gs-sched-cta *::before, .gs-sched-cta *::after { box-sizing: border-box; }

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

/* eyebrow with red chevrons */
.gs-sched-cta__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gs-muted); font-size: 16px; line-height: 16px; }
.gs-sched-cta__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }

.gs-sched-cta__title {
  margin: 20px 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-sched-cta__lead {
  margin: 20px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .05em;
}

.gs-sched-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 266px;
  height: 54px;
  margin-top: 28px;
  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-sched-cta__btn:hover, .gs-sched-cta__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-sched-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-sched-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-sched-cta {
    min-height: 0;
    padding: 70px 0;
    background-position: right center;
  }
  .gs-sched-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-sched-cta__inner {
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: center;
    text-align: center;
  }
  .gs-sched-cta__title { font-size: 32px; line-height: 42px; }
}

@media (max-width: 575.98px) {
  .gs-sched-cta { padding: 56px 0; }
  .gs-sched-cta::before { width: 34px; height: 130px; }
  .gs-sched-cta__inner { padding: 0 18px; }
  .gs-sched-cta__title { margin-top: 16px; font-size: 26px; line-height: 34px; }
  .gs-sched-cta__lead { font-size: 15px; line-height: 28px; letter-spacing: .02em; }
  .gs-sched-cta__btn { width: 100%; max-width: 320px; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-sched-cta * { transition: none !important; }
  .gs-sched-cta__btn:hover { transform: none; }
}
 /* <!-- =========================================================================4th section --> */



.gs-dtl {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;
  --gs-line: #d4d4d6;

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

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

/* ---------- Header ---------- */
.gs-dtl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
.gs-dtl__title-block { flex: 0 0 auto; }
.gs-dtl__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--gs-muted); font-size: 16px; line-height: 16px; }
.gs-dtl__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-dtl__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-dtl__intro { flex: 0 1 608px; margin: 0; color: var(--gs-muted); font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: .05em; }

/* ---------- Tiles: 3 × 2, divided by 1px rules ---------- */
.gs-dtl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-dtl__grid > li { display: flex; }

.gs-dtl__tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 56px;
  padding: 32px;
  border-right: 1px solid var(--gs-line);
  border-bottom: 1px solid var(--gs-line);
  text-decoration: none;
  transition: box-shadow .3s ease;
}
.gs-dtl__grid > li:nth-child(3n) .gs-dtl__tile { border-right: 0; }
.gs-dtl__grid > li:nth-last-child(-n+3) .gs-dtl__tile { border-bottom: 0; }

/* red glow (Figma Ellipse 50, blur 50) */
.gs-dtl__tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -20px;
  bottom: -30px;
  width: 93px; height: 94px;
  border-radius: 50%;
  background: var(--gs-red);
  filter: blur(50px);
  opacity: 0;
  transition: opacity .3s ease;
}
.gs-dtl__tile.is-active::before, .gs-dtl__tile:hover::before { opacity: 1; }
.gs-dtl__grid:hover .gs-dtl__tile.is-active:not(:hover)::before { opacity: 0; }

.gs-dtl__row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.gs-dtl__ico { display: flex; }
.gs-dtl__ico svg { width: 48px; height: 42px; fill: none; stroke: var(--gs-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.gs-dtl__arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--gs-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease, transform .3s ease; }
.gs-dtl__tile.is-active .gs-dtl__arrow svg, .gs-dtl__tile:hover .gs-dtl__arrow svg { stroke: var(--gs-red); }
.gs-dtl__tile:hover .gs-dtl__arrow svg { transform: translate(2px, -2px); }
.gs-dtl__grid:hover .gs-dtl__tile.is-active:not(:hover) .gs-dtl__arrow svg { stroke: var(--gs-dark); }

.gs-dtl__name {
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  text-transform: capitalize;
}
.gs-dtl__tile:focus-visible { outline: 2px solid var(--gs-red); outline-offset: -4px; }

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .gs-dtl { padding: 80px 0; }
  .gs-dtl__wrap { width: auto; padding: 0 24px; gap: 40px; }
  .gs-dtl__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gs-dtl__intro { flex: none; }
  .gs-dtl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-dtl__grid > li:nth-child(3n) .gs-dtl__tile { border-right: 1px solid var(--gs-line); }
  .gs-dtl__grid > li:nth-child(2n) .gs-dtl__tile { border-right: 0; }
  .gs-dtl__grid > li:nth-last-child(-n+3) .gs-dtl__tile { border-bottom: 1px solid var(--gs-line); }
  .gs-dtl__grid > li:nth-last-child(-n+2) .gs-dtl__tile { border-bottom: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .gs-dtl { padding: 56px 0; }
  .gs-dtl__wrap { padding: 0 18px; gap: 32px; }
  .gs-dtl__title { font-size: 28px; line-height: 36px; }
  .gs-dtl__intro { font-size: 15px; line-height: 28px; letter-spacing: .02em; }
  .gs-dtl__grid { grid-template-columns: 1fr; }
  .gs-dtl__grid > li .gs-dtl__tile { border-right: 0; border-bottom: 1px solid var(--gs-line); }
  .gs-dtl__grid > li:last-child .gs-dtl__tile { border-bottom: 0; }
  .gs-dtl__tile { min-height: 0; gap: 28px; padding: 24px 6px; }
}

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