/* ===========================================================hero section */

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

  /* Header.png covers nav + hero (hero starts 160px down in Figma).
     If your Header.png is the hero ONLY, set this to 0. */
  --gs-bg-offset: 160;

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

  /* CHANGE BACKGROUND IMAGE HERE */
 background: #fff url("../images/Header.png") no-repeat;
  background-size: 100% auto;
  background-position: center calc(-1 * var(--gs-bg-offset) * var(--u));

  font-family: "Manrope", sans-serif;
}
.gs-hero *, .gs-hero *::before, .gs-hero *::after { box-sizing: border-box; }

/* ---------- Text ---------- */
.gs-hero__wrap {
  position: relative;
  z-index: 3;
  width: calc(1170 * var(--u));                     /* text starts at Figma x 375 */
  margin: 0 auto;
  padding: calc(40 * var(--u)) 0;
}
.gs-hero__text { max-width: calc(752 * var(--u)); display: grid; }
/* every slide's text sits in the same grid cell, so the box is as tall as the longest one and nothing jumps when they swap */
.gs-hero__panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.gs-hero__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gs-hero__panel:only-child { opacity: 1; visibility: visible; transform: none; }

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

.gs-hero__title {
  margin: calc(32 * var(--u)) 0 0;
  max-width: calc(720 * var(--u));
  color: var(--gs-ink);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: max(40px, calc(80 * var(--u)));
  line-height: 1.125;                                 /* 90 / 80 */
  letter-spacing: -0.03em;
}
/* red brush under "School" (Figma Layer_1: 246 × 23) */
.gs-hero__mark { position: relative; white-space: nowrap; }
.gs-hero__mark svg {
  position: absolute;
  left: -2%;
  bottom: -0.32em;
  width: 104%;
  height: 0.29em;
  fill: var(--gs-red);
}

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

.gs-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(171 * var(--u));
  height: max(40px, calc(56 * var(--u)));
  margin-top: calc(50 * var(--u));
  padding: 0 calc(40 * var(--u));
  background: var(--gs-red);
  color: #fff;
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-hero__btn:hover, .gs-hero__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }

/* ---------- Slider (1188 × 632 at x 926 → 50% − 34u) ---------- */
.gs-hero__media {
  position: absolute;
  z-index: 1;
  left: calc(50% - 34 * var(--u));
  top: calc(50% - 367.5 * var(--u));                  /* Figma y 0 in a 735 frame */
  width: calc(1188 * var(--u));
  height: calc(632 * var(--u));
}
.gs-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* every slide fills the same frame and sits against its right edge, whatever shape the uploaded picture has
     (a taller picture is trimmed top and bottom instead of shrinking and floating to the left) */
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  transition: opacity .7s ease;
}
.gs-hero__slide.is-active { opacity: 1; }

/* ---------- Bars ---------- */
.gs-hero__bar {
  position: absolute;
  z-index: 1;
  width: calc(517 * var(--u));
  height: calc(10 * var(--u));
  background: var(--gs-dark);
}
.gs-hero__bar--1 { left: calc(50% + 247 * var(--u)); top: calc(50% + 283.5 * var(--u)); }  /* 1207, 651 */
.gs-hero__bar--2 { left: calc(50% + 400 * var(--u)); top: calc(50% + 310.5 * var(--u)); }  /* 1360, 678 */

/* ---------- Pagination 290 × 74 at (882, 601) ---------- */
.gs-hero__dots {
  position: absolute;
  z-index: 4;
  left: calc(50% - 78 * var(--u));
  top: calc(50% + 233.5 * var(--u));
  width: calc(290 * var(--u));
  height: calc(74 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  filter: drop-shadow(6px 6px 30px rgba(0,0,0,.16));   /* shadow follows the slanted shape */
}
.gs-hero__dots::before {                               /* white slanted box (Figma Vector) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.gs-hero__dot {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--gs-muted);
  font-family: "Manrope", sans-serif;
  font-size: max(14px, calc(20 * var(--u)));
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
.gs-hero__dot.is-active, .gs-hero__dot:hover { color: var(--gs-red); }
.gs-hero__dot:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 2px; }
.gs-hero__sep {                                        /* slanted divider, 50% opacity */
  width: 1px;
  height: calc(34 * var(--u));
  background: var(--gs-muted);
  opacity: .5;
  transform: rotate(30deg);
}

/* =========================================================
   TABLET / MOBILE (<1200px) — clean stacked layout.
   The desktop Header.png is NOT used here: scaled to a narrow screen its
   dark shape landed behind the text. Instead: light grey panel + small
   brand accents kept at the edges, well away from the text.
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-hero {
    --u: 1px;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 56px;
    background: linear-gradient(180deg, #f3f3f3 0%, #f3f3f3 62%, #fff 62%);
  }
  /* accent: dark slanted tab, top-right corner */
  .gs-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 46px;
    background: var(--gs-dark);
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
  }
  /* accent: thin red slanted line beside it */
  .gs-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 128px;
    width: 38px;
    height: 46px;
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--gs-red) 50%, transparent calc(50% + 1px));
    z-index: 0;
  }

  .gs-hero__wrap { width: auto; padding: 84px 24px 44px; }
  .gs-hero__text { max-width: 640px; }
  .gs-hero__sub { font-size: 16px; padding-bottom: 12px; border-bottom-width: 2px; }
  .gs-hero__title { margin-top: 24px; max-width: 600px; font-size: 56px; }
  .gs-hero__lead { margin-top: 32px; max-width: 520px; font-size: 16px; line-height: 1.75; }
  .gs-hero__btn { min-width: 171px; height: 56px; margin-top: 32px; padding: 0 40px; font-size: 16px; }

  .gs-hero__media {
    position: relative;
    left: auto; top: auto;
    width: calc(100% - 24px);            /* bleeds off the right edge like desktop */
    height: auto;
    margin-left: 24px;
    aspect-ratio: 1188 / 632;
  }
  .gs-hero__bar { display: block; height: 8px; }
  .gs-hero__bar--1 { left: auto; right: 0; top: auto; bottom: 40px; width: 55%; }
  .gs-hero__bar--2 { left: auto; right: 0; top: auto; bottom: 24px; width: 38%; }

  .gs-hero__dots {
    position: relative;
    left: auto; top: auto;
    width: 230px;
    height: 60px;
    gap: 16px;
    margin: -30px 0 0 24px;
  }
  .gs-hero__dot { font-size: 18px; }
  .gs-hero__sep { height: 26px; }
}

@media (max-width: 767.98px) {
  .gs-hero { padding-bottom: 48px; background: linear-gradient(180deg, #f3f3f3 0%, #f3f3f3 66%, #fff 66%); }
  .gs-hero::before { width: 92px; height: 36px; }
  .gs-hero::after  { right: 98px; width: 30px; height: 36px; }
  .gs-hero__wrap { padding: 64px 18px 36px; }
  .gs-hero__sub { font-size: 14px; }
  .gs-hero__title { margin-top: 20px; font-size: clamp(34px, 10vw, 44px); line-height: 1.12; }
  .gs-hero__mark svg { bottom: -0.28em; height: 0.24em; }
  .gs-hero__lead { margin-top: 26px; font-size: 15px; line-height: 1.7; }
  .gs-hero__btn { width: 100%; max-width: 320px; margin-top: 28px; }
  .gs-hero__media { width: calc(100% - 18px); margin-left: 18px; }
  .gs-hero__dots { width: 190px; height: 52px; gap: 12px; margin: -26px 0 0 18px; }
  .gs-hero__dot { font-size: 16px; }
  .gs-hero__sep { height: 22px; }
  .gs-hero__bar { height: 6px; }
  .gs-hero__bar--1 { bottom: 30px; width: 50%; }
  .gs-hero__bar--2 { bottom: 18px; width: 34%; }
}

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


/* ===========================================================Book your drive section */


.gs-book {
  --u: 1px;
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;

  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  font-family: "Manrope", sans-serif;
  margin-top: 8%;
}
.gs-book *, .gs-book *::before, .gs-book *::after { box-sizing: border-box; }

@media (min-width: 768px) {
  .gs-book {
    --u: min(1px, 0.0520833vw);          /* 1 / 1920 of the viewport */
    min-height: calc(880 * var(--u));     /* grows when the card holds more choices, so nothing spills out of the grey panel */
    display: flex;
    align-items: center;
    padding: calc(90 * var(--u)) 0;
  }

  /* Grey panel — Figma "Bg": 1225 × 817, x = 695, 31.5 from top & bottom */
  .gs-book__bg {
    position: absolute;
    left: calc(50% - 265 * var(--u));      /* 695 − 960 */
    right: 0;
    top: calc(31.5 * var(--u));
    bottom: calc(31.5 * var(--u));
    background: #f5f5f5 url("../images/Bg%20(1).webp") right center / auto 100% no-repeat;
    z-index: 0;
  }

  /* Left image — Figma "Group 1597883272": 875 × 880 at x = 0, full height */
  .gs-book__left {
    position: absolute;
    left: calc(50% - 960 * var(--u));
    top: 50%;
    transform: translateY(-50%);
    width: calc(875 * var(--u));
    height: calc(880 * var(--u));
    object-fit: contain;
    z-index: 1;
  }

  /* Form — Figma "Frame 2095587722": 603 × 649 at x = 942, centred */
  .gs-book .gs-book__content {
    position: relative;
    margin-left: calc(50% - 18 * var(--u));   /* 942 − 960 */
    z-index: 2;
    /* the form keeps its real size (fonts, boxes, gaps) at every width, like the other sections; only the photo and panel scale */
    --u: 1px;
    width: min(603px, calc(50vw - 12px));
  }
}

/* ---------- Form (all sizes in Figma px × --u) ---------- */
.gs-book__content {
  width: calc(603 * var(--u));
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--u));
}

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

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

.gs-book__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.gs-book__label {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: 0 0 calc(16 * var(--u));
  padding: 0;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 1;
}
.gs-book__label b { color: var(--gs-red); font-weight: 600; }

.gs-book__options { display: grid; clear: both; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); }   /* clear: the legend above is a full-width float, and only the group right after it gets cleared by the reset - a later city's group must clear it too */   /* 2 per row on desktop, 1 on phones (see the mobile rule below) */
.gs-book__pair    { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)); }

/* Card look: white, 5u red bar, slanted dark corner 67u */
.gs-opt, .gs-sel {
  position: relative;
  overflow: hidden;
  height: calc(64 * var(--u));
  background: #fff linear-gradient(var(--gs-red), var(--gs-red)) left / calc(5 * var(--u)) 100% no-repeat;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.16);
}
.gs-opt::after, .gs-sel::after {
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: calc(67 * var(--u)); height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 64'%3E%3Cpath fill='%23111117' d='M4 64 51 4h5L9 64z'/%3E%3Cpath fill='%23111117' d='M20 64 67 4v60z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

.gs-opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--u));
  height: auto;                               /* grows when a package name needs two lines */
  min-height: calc(64 * var(--u));
  padding: calc(12 * var(--u)) calc(60 * var(--u)) calc(12 * var(--u)) calc(28 * var(--u));
  cursor: pointer;
  transition: box-shadow .25s ease, transform .25s ease;
}
.gs-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gs-opt__title {
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
.gs-opt__price { color: var(--gs-muted); font-size: 14px; line-height: 1.35; }
.gs-opt:hover { transform: translateY(-2px); }
.gs-opt:has(input:checked) { box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.6); }
.gs-opt:has(input:checked)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 64'%3E%3Cpath fill='%23111117' d='M4 64 51 4h5L9 64z'/%3E%3Cpath fill='%23D71111' d='M20 64 67 4v60z'/%3E%3C/svg%3E");
}
.gs-opt:has(input:focus-visible) { outline: 2px solid var(--gs-red); outline-offset: 3px; }

.gs-sel select {
  width: 100%;
  height: 100%;
  padding: 0 calc(70 * var(--u)) 0 calc(57.5 * var(--u));
  border: 0;
  background: transparent;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.gs-sel select:focus-visible { outline: 2px solid var(--gs-red); outline-offset: -4px; }
.gs-sel::before {
  content: "";
  position: absolute;
  left: calc(29.5 * var(--u)); top: 50%;
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  transform: translateY(-50%);
  background: center / contain no-repeat;
  pointer-events: none;
}
.gs-sel--pin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D71111' stroke-width='1.5'%3E%3Cpath d='M8 15s5.5-5 5.5-9A5.5 5.5 0 0 0 2.5 6c0 4 5.5 9 5.5 9z'/%3E%3Ccircle cx='8' cy='6' r='2'/%3E%3C/svg%3E");
}
.gs-sel--clock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D71111' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M8 4v4l2.5 2'/%3E%3C/svg%3E");
}

.gs-book__cta { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.gs-book__btn {
  width: 100%;
  height: calc(73 * var(--u));
  padding: 0 calc(48 * var(--u));
  border: 0;
  background: var(--gs-red);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.gs-book__btn:hover, .gs-book__btn:focus-visible { background: #b90e0e; }

.gs-book__perks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(12 * var(--u)) calc(42 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-book__perks li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 1;
}
.gs-book__perks li::before {
  content: "";
  flex: 0 0 auto;
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D71111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M5 8.2l2 2 4-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   MOBILE (<768px) — stacked (photo on top, form below), real px sizes. From 768px up the two sit side by side, scaled.
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-book { padding: 0 0 80px; }
  .gs-book__bg {
    position: absolute;
    inset: 0;
    background: #f5f5f5 url("../images/Bg%20(1).webp") right bottom / cover no-repeat;
    z-index: 0;
  }
  .gs-book__left {
    position: relative;
    z-index: 1;
    display: block;
    width: min(620px, 100%);
    height: auto;
    margin: 0 auto 48px 0;
  }
  .gs-book__content {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .gs-book__options { grid-template-columns: 1fr; }   /* the form is only about 380-480px wide here */
}
@media (max-width: 767.98px) {
  .gs-book { padding-bottom: 60px; }
  .gs-book__content { padding: 0 18px; gap: 36px; }
  .gs-book__title { font-size: 30px; }
  .gs-book__intro { font-size: 15px; }
  .gs-book__options, .gs-book__pair { grid-template-columns: 1fr; gap: 14px; }
  .gs-book__btn { height: 64px; font-size: 16px; }
}

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


/* ================================================================our student section  */

   
.gs-stats {
  --gs-red: #d71111;
  --gs-ink: #111117;
  --gs-muted: #6d7076;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: 593px;
  display: flex;
  align-items: center;
  padding: 80px 0 116px;              /* Figma: content top 80, 593 − 80 − 397 = 116 */
  background: #6d7076;                /* Figma base layer */
  font-family: "Manrope", sans-serif;
 
}
.gs-stats *, .gs-stats *::before, .gs-stats *::after { box-sizing: border-box; }

/* Figma "Overlay": image + 2 × 20% black, multiply, 83% opacity */
.gs-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
    /* CHANGE BACKGROUND IMAGE HERE */
    url("../images/08477be5a5cc684d34e1b2fbffd04ec18c3c03be.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .83;
}

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

/* ---------- Counter cards: 4 × 270, gap 30 ---------- */
.gs-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 270px));
  justify-content: space-between;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card 270 × 189.
   Red L-frame (91 × 80 top-left + 270 × 81 from y=80) sits 5px above/right
   of the dark boxes, showing as a thin red edge. */
.gs-stat {
  position: relative;
  height: 189px;
}
.gs-stat::before,
.gs-stat::after {
  content: "";
  position: absolute;
  left: 0;
  background: var(--gs-red);
}
.gs-stat::before { top: 0;    width: 91px;  height: 80px; box-shadow: 0 4px 30px rgba(0,0,0,.08); }
.gs-stat::after  { top: 80px; width: 100%;  height: 81px; }

/* Dark boxes, offset 5px down, with the Figma drop shadow */
.gs-stat__icon,
.gs-stat__body {
  position: absolute;
  left: 0;
  z-index: 1;
  background: var(--gs-ink);
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
.gs-stat__icon {                       /* 86 × 80 at (0, 5) */
  top: 5px;
  width: 86px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-stat__icon svg {
  width: 50px;
  height: 56px;
  fill: none;
  stroke: var(--gs-red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gs-stat__body {                       /* 270 × 104 at (0, 85) */
  top: 85px;
  width: 100%;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;                            /* Figma 16 cap-to-cap */
  padding: 24px 0;
  text-align: center;
}
.gs-stat__num {
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 40px;
}
.gs-stat__label {
  color: #a4a7ad;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

/* ---------- CTA row: title 770 | button 192 × 56 ---------- */
.gs-stats__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.gs-stats__title {
  max-width: 770px;
  margin: -16px 0;                 /* trims 60px line-height to Figma's 88px cap box */
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 60px;
  letter-spacing: -0.03em;
}
.gs-stats__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 192px;
  height: 56px;
  padding: 14px 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-stats__btn:hover,
.gs-stats__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-stats { min-height: 0; padding: 80px 0; }
  .gs-stats__wrap { width: auto; padding: 0 24px; gap: 80px; }
  .gs-stats__grid { grid-template-columns: repeat(2, minmax(0, 270px)); justify-content: center; gap: 40px 30px; }
  .gs-stats__cta { flex-direction: column; align-items: flex-start; gap: 28px; }
  .gs-stats__title { margin: 0; font-size: 34px; line-height: 48px; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-stats { padding: 60px 0; }
  .gs-stats__wrap { padding: 0 18px; gap: 56px; }
  .gs-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .gs-stat { height: 164px; }
  .gs-stat::before { width: 71px; height: 64px; }
  .gs-stat::after  { top: 64px; height: 72px; }
  .gs-stat__icon { width: 66px; height: 64px; }
  .gs-stat__icon svg { width: 38px; height: 42px; }
  .gs-stat__body { top: 69px; height: 95px; padding: 16px 6px; }
  .gs-stat__num { font-size: 30px; line-height: 30px; }
  .gs-stat__label { font-size: 13px; }
  .gs-stats__title { font-size: 28px; line-height: 38px; }
}

@media (max-width: 380px) {
  .gs-stats__grid { grid-template-columns: 1fr; }
}

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



/* ===========================================================services areas section */

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

  position: relative;
  overflow: hidden;              /* bg element never causes horizontal scroll */
  width: 100%;
  padding: 120px 0;
 
  font-family: "Manrope", sans-serif;
}
.gs-aw *, .gs-aw *::before, .gs-aw *::after { box-sizing: border-box; }

.gs-aw__wrap {
  position: relative;
  z-index: 1;
  width: min(1170px, 100% - 30px);
  margin: 0 auto;
}

/* 200px gap with Bg Element centred on it.
   The PNG is the full 1920 × 939 Figma frame, so it scales with the screen width
   (ratio locked, never stretched) → looks identical to the Figma frame at any
   desktop width. Content sits above it (z-index). Hidden below 1200px. */
.gs-aw__divider { position: relative; height: 200px; }
.gs-aw__divider::after {           /* full-width grey line (PNG line is at y=469 = centre) */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
 
  background: #d4d4d6;
  pointer-events: none;
}
.gs-aw__divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100vw;                    /* PNG = full Figma frame → scale it with the screen */
  height: calc(100vw * 939 / 1920);/* locked to the PNG ratio → never stretched */
  transform: translateY(-50%);
  /* CHANGE BG ELEMENT HERE */
  background: url("../images/Bg%20Element.png") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;                      /* always behind the content */
}

.gs-aw__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 16px;
}
.gs-aw__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }

.gs-aw__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-aw__line { position: absolute; border: 2px solid var(--gs-red); pointer-events: none; z-index: 1; }

.gs-aw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 14px 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-aw__btn:hover, .gs-aw__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }

/* =========================================================
   SERVICE AREAS
   ========================================================= */
.gs-areas__head {
  width: min(461px, 100%);
  margin: 0 auto 56px;
  text-align: center;
}
.gs-areas__head .gs-aw__eyebrow { justify-content: center; margin-bottom: 8px; }
.gs-areas__intro {
  margin: 24px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .03em;
}

/* 2 rows × 5, gap 24, cards 64px tall */
.gs-areas__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}

.gs-city {
  position: relative;
  overflow: hidden;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 70px 0 29.5px;
  border: 0;
  background: #fff;
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 19px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .25s ease, transform .25s ease;
}
/* pin icon (13 × 16, 1.5px red outline) */
.gs-city::before {
  content: "";
  flex: 0 0 13px;
  width: 13px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16' fill='none' stroke='%23D71111' stroke-width='1.5'%3E%3Cpath d='M6.5 15s5.5-5 5.5-9A5.5 5.5 0 0 0 1 6c0 4 5.5 9 5.5 9z'/%3E%3Ccircle cx='6.5' cy='6' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* right corner: slanted stripe + triangle (Figma "Shape" + "Vector 8") */
.gs-city::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 67px;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 64'%3E%3Cpath fill='%23111117' d='M4 64 51 4h5L9 64z'/%3E%3Cpath fill='%23111117' d='M20 64 67 4v60z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* 5px red left bar */
.gs-city { background-image: linear-gradient(var(--gs-red), var(--gs-red)); background-size: 5px 100%; background-repeat: no-repeat; }

.gs-city:hover { transform: translateY(-2px); }
.gs-city.is-active { box-shadow: 6px 6px 30px rgba(0,0,0,.6); }
.gs-city.is-active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 64'%3E%3Cpath fill='%23111117' d='M4 64 51 4h5L9 64z'/%3E%3Cpath fill='%23D71111' d='M20 64 67 4v60z'/%3E%3C/svg%3E");
}
.gs-city:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 3px; }

/* Detail: card (grow) | 56 | image 237 × 225 */
.gs-areas__detail { display: flex; align-items: flex-start; gap: 56px; }

.gs-areas__card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 225px;
  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-areas__pin {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(215,17,17,.16);
}
.gs-areas__pin svg { width: 23px; height: 28px; fill: none; stroke: var(--gs-red); stroke-width: 2.6; }

.gs-areas__name {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 24px;
}
.gs-areas__desc {
  margin: 16px 0 0;
  color: var(--gs-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: .03em;
}
.gs-areas__tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  margin: 16px 0 0;
  padding: 8px 24px;
  background: var(--gs-dark);
  border-left: 4px solid var(--gs-red);
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 21px;
}
.gs-areas__tag svg { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: var(--gs-red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Image block 237 × 224.85: image bottom-left, frames top-right (behind image) */
.gs-areas__media {
  position: relative;
  flex: 0 0 237px;
  height: 225px;
}
.gs-areas__img {
  position: absolute;
  left: 0;
  top: 30.36px;
  width: 205px;
  height: 194.49px;
  object-fit: cover;
  background: #f5f5f5;
  z-index: 2;
  /* Figma flips this image horizontally — uncomment if needed: */
  /* transform: scaleX(-1); */
}
.gs-areas__line--1 { left: 30px; top: 0;       width: 207px; height: 159.38px; }
.gs-areas__line--2 { left: 30px; top: 15.18px; width: 191px; height: 144.2px; }

/* =========================================================
   WHY CHOOSE US — image 500 | 70 | text 600
   ========================================================= */
.gs-why { display: flex; align-items: center; justify-content: center; gap: 70px; }

.gs-why__media {
  position: relative;
  flex: 0 0 500px;
  max-width: 100%;
  aspect-ratio: 500 / 650.59;
}
.gs-why__img-main {                 /* 470 × 580 at (0, 1.59) */
  position: absolute; left: 0; top: .24%;
  width: 94%; height: 89.15%;
  object-fit: cover; background: #f5f5f5;
}
.gs-why__line--1 { left: 52.6%; top: 63.57%; width: 41.4%; height: 25.82%; }  /* 207 × 168 at (263, 413.59) */
.gs-why__line--2 { left: 55.8%; top: 66.03%; width: 38.2%; height: 23.36%; }  /* 191 × 152 at (279, 429.59) */
.gs-why__img-small {                /* 205 × 205 at (295, 445.59) */
  position: absolute; left: 59%; top: 68.49%;
  width: 41%; height: 31.51%;
  object-fit: cover; background: #f5f5f5;
  z-index: 2;
}
.gs-why__phone {                    /* 255 × 69 at (0, 581.59) */
  position: absolute; z-index: 3;
  left: 0; top: 89.4%;
  width: 51%; min-width: 220px;
  height: 10.6%; min-height: 60px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px 0 39px;
  background: var(--gs-dark);
  text-decoration: none;
}
.gs-why__phone svg { flex: 0 0 32px; width: 32px; height: 32px; fill: none; stroke: var(--gs-red); stroke-width: 1.4; stroke-linejoin: round; }
.gs-why__phone-text { display: flex; flex-direction: column; gap: 6px; }
.gs-why__phone-label { color: #e6e6e6; font-size: 13px; line-height: 13px; }
.gs-why__phone-number { color: #fff; font-family: "Urbanist", sans-serif; font-weight: 700; font-size: 18px; line-height: 18px; white-space: nowrap; }
.gs-why__phone:hover .gs-why__phone-number { color: var(--gs-red); }

.gs-why__content {
  flex: 0 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;                        /* Figma 56 cap-to-cap, less line-height slack */
}
.gs-why__text {
  margin: 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .03em;
}

.gs-why__lists { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.gs-why__list { margin: 0; padding: 0; list-style: none; min-width: 187px; }
.gs-why__list li {
  display: flex;
  align-items: center;
  gap: 11.27px;
  padding: 16px 0;
  border-bottom: 1px solid #e6e6e6;
  color: var(--gs-muted);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 21px;
}
.gs-why__list li:first-child { padding-top: 0; }
.gs-why__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.gs-why__list li::before {          /* 22.55px red circle, white arrow */
  content: "";
  flex: 0 0 22.55px;
  width: 22.55px;
  height: 22.55px;
  border-radius: 50%;
  background: var(--gs-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l4-4M4 3h3v3'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-aw { padding: 90px 0; }
  .gs-aw__wrap { width: auto; padding: 0 24px; }
  .gs-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-why { flex-direction: column; align-items: flex-start; gap: 56px; }
  .gs-why__media { flex: none; width: 100%; max-width: 500px; }
  .gs-why__content { flex: none; width: 100%; max-width: 720px; }
  .gs-aw__divider::before { display: none; }   /* content is full width here — no room for the circle */
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-aw { padding: 60px 0; }
  .gs-aw__wrap { padding: 0 18px; }
  .gs-aw__divider { height: 120px; }
  .gs-aw__title { font-size: 30px; line-height: 38px; }

  .gs-areas__head { margin-bottom: 36px; }
  .gs-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; }
  .gs-city { height: 56px; padding: 0 44px 0 18px; font-size: 14px; gap: 8px; }
  .gs-city::after { width: 44px; height: 56px; }

  .gs-areas__detail { flex-direction: column; gap: 36px; }
  .gs-areas__card { width: 100%; padding: 28px 22px; gap: 16px; }
  .gs-areas__pin { flex-basis: 46px; width: 46px; height: 46px; }
  .gs-areas__name { font-size: 20px; }
  .gs-areas__tag { padding: 8px 16px; }

  .gs-why__content { gap: 32px; }
  .gs-why__text { font-size: 15px; line-height: 28px; }
  .gs-why__phone { padding-left: 18px; gap: 12px; }
  .gs-why__phone svg { flex-basis: 26px; width: 26px; height: 26px; }
  .gs-why__phone-number { font-size: 16px; }
}

@media (max-width: 420px) {
  .gs-areas__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-aw * { transition: none !important; }
  .gs-city:hover, .gs-aw__btn:hover { transform: none; }
}


/* <!-- =========================================================================Pricing  section --> */

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

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 100px 0 120px;

  /* CHANGE BACKGROUND IMAGE HERE
     Full 1920 × 1278 frame fitted to the WHOLE section (100% × 100%):
     always covers top to bottom, nothing cropped, tyre tracks stay in
     the top-right and bottom-left corners like Figma. */
  background: #f7f7f7 url("../images/pricing-bg.webp") center / 100% 100% no-repeat;
  font-family: "Manrope", sans-serif;
}
.gs-price *, .gs-price *::before, .gs-price *::after { box-sizing: border-box; }

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

/* ---------- Title (461 wide, centred) ---------- */
.gs-price__head {
  width: min(561px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gs-price__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 16px;
}
.gs-price__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }

.gs-price__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-price__intro {
  margin: 24px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .03em;
}

/* Selected location box 300 × 48 */
.gs-price__city { position: relative; width: min(300px, 100%); margin-top: 32px; }
.gs-price__city-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 48px; padding: 16px 24px;
  border: 0; border-left: 4px solid var(--gs-red);
  background: #fff; box-shadow: 6px 6px 30px rgba(0,0,0,.16);
  font-family: "Manrope", sans-serif; font-size: 16px; line-height: 16px;
  color: var(--gs-muted); cursor: pointer; text-align: left;
}
.gs-price__city-btn:focus-visible { outline: 2px solid var(--gs-dark); outline-offset: 2px; }
.gs-price__pin { width: 16px; height: 16px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-price__city-name { flex: 1; color: var(--gs-red); font-weight: 700; }
.gs-price__city-chev { width: 12px; height: 8px; color: var(--gs-red); flex: 0 0 auto; transition: transform .2s ease; }
.gs-price__city-btn[aria-expanded="true"] .gs-price__city-chev { transform: rotate(180deg); }
.gs-price__city-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 6px 0; list-style: none; max-height: 260px; overflow: auto;
  background: #fff; border-left: 4px solid var(--gs-red);
  box-shadow: 6px 6px 30px rgba(0,0,0,.16); text-align: left;
}
.gs-price__city-list[hidden] { display: none; }
.gs-price__city-list li {
  padding: 10px 24px; font-size: 15px; font-weight: 600; color: var(--gs-dark); cursor: pointer;
}
.gs-price__city-list li:hover, .gs-price__city-list li:focus { background: #f3f3f3; outline: 0; }
.gs-price__city-list li[aria-selected="true"] { color: var(--gs-red); font-weight: 800; }

/* Toggle 384 × 58 */
.gs-price__toggle {
  display: flex;
  margin-top: 32px;
  border: 1px solid var(--gs-red);
}
.gs-price__tab {
  position: relative;
  height: 56px;
  padding: 14px 40px;
  border: 0;
  background: transparent;
  color: var(--gs-dark);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.gs-price__tab:first-child { min-width: 179px; }
.gs-price__tab:last-child  { min-width: 203px; }
.gs-price__tab.is-active { background: var(--gs-red); color: #fff; }
.gs-price__tab:focus-visible { outline: 2px solid var(--gs-dark); outline-offset: 2px; }

/* brush underline: red on inactive, white on active (Figma Layer_1) */
.gs-price__brush {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 100px;
  height: 6px;
  transform: translateX(-50%);
  fill: var(--gs-red);
}
.gs-price__tab:last-child .gs-price__brush { width: 124px; height: 7px; }
.gs-price__tab.is-active .gs-price__brush { fill: #fff; }

/* ---------- Cards: 3 × 352, bottom-aligned (634 / 684 / 634) ---------- */
.gs-price__cards {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  padding-top: 35px;                  /* ribbons sit 35px above the cards */
}

.gs-plan {
  position: relative;
  flex: 0 0 352px;
  min-height: 634px;
  padding: 156px 32px 32px;
  background: #fff;
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
}
.gs-plan--featured {
  min-height: 684px;
  box-shadow: 0 6px 30px rgba(0,0,0,.6);
}

/* ---- Price ribbon ("Top": 304 × 159 band from y −35, 194 × 98 tail) ---- */
.gs-plan__top {
  position: absolute;
  left: 0;
  right: 0;
  top: -35px;
  height: 167px;
  pointer-events: none;
}
.gs-plan__band {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.gs-plan__band--back {                 /* 194 × 98 at y 69 (34 in card) */
  top: 69px;
  width: 194px;
  height: 98px;
  background: var(--gs-dark);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.gs-plan__band--front {                /* 304 × 159 at y 0 (−35 in card) */
  top: 0;
  width: 304px;
  height: 159px;
  background: var(--gs-red);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.gs-plan__fold {                        /* 33 × 35 fold at (−9, −35) */
  position: absolute;
  left: -9px;
  top: 0;
  width: 33px;
  height: 35px;
  background: #ed1718;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  filter: brightness(.7);
}
/* featured card: colours swapped, no fold */
.gs-plan--featured .gs-plan__band--back  { background: var(--gs-red); }
.gs-plan--featured .gs-plan__band--front { background: var(--gs-dark); }

.gs-plan__price {
  position: absolute;
  left: 50%;
  top: 33px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  text-align: center;
  color: #fff;
}
.gs-plan__amount {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.gs-plan__cur {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 22.86px;
  line-height: 1;
  padding-bottom: 20px;
}
.gs-plan__num {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
}
.gs-plan__per,
.gs-plan__note {
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.gs-plan__per { padding-bottom: 4px; }
.gs-plan__note { margin: 14px 0 0; }
.gs-plan--featured .gs-plan__per,
.gs-plan--featured .gs-plan__note { color: #fff; }

/* ---- Discounted ("was / now") price ---- */
.gs-plan__was {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 2px;
  line-height: 1;
}
.gs-plan__was-strike {
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: line-through;
  color: rgba(255,255,255,.72);
}
.gs-plan__off {
  display: inline-block;
  background: #fff;
  color: #111117;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.gs-plan--featured .gs-plan__off { background: #111117; color: #fff; }

/* ---- Body ---- */
.gs-plan__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-plan__name {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
}
.gs-plan__tag {
  margin: 10px 0 0;
  color: #6d7076;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}
.gs-plan__list {
  width: 100%;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gs-plan__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--gs-dark);
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  text-transform: capitalize;
}
.gs-plan__list li::after {             /* 12px red check-circle */
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D71111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M5 8.2l2 2 4-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gs-plan__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 199px;
  height: 52px;
  margin-top: 32px;
  padding: 0 48px;
  background: var(--gs-dark);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-plan--featured .gs-plan__btn { background: var(--gs-red); height: 50px; }
.gs-plan__btn:hover,
.gs-plan__btn:focus-visible { background: var(--gs-red); transform: translateY(-2px); }
.gs-plan--featured .gs-plan__btn:hover,
.gs-plan--featured .gs-plan__btn:focus-visible { background: #b90e0e; }

/* checkered flag on the featured card (Figma "Flag") */
.gs-plan__flag {
  position: absolute;
  top: -58px;
  right: -62px;
  width: 110px;
  height: 90px;
  z-index: 3;
  pointer-events: none;
}

/* per-city package panels + uneven numbers of cards */
.gs-price__panel { width: 100%; }
.gs-price__cards--few, .gs-price__cards--many { justify-content: center; }
.gs-price__cards--many { flex-wrap: wrap; row-gap: 70px; }
.gs-price__cards--few { gap: 40px; }

/* ---------- Individual lessons + road test (pricing page only) ---------- */
/* one shared background for both pricing sections */
.gs-price-group { background: #f7f7f7 url("../images/pricing-bg.webp") center top / 100% auto repeat-y; }
.gs-price-group .gs-price { background: none; }
.gs-price--lessons { padding: 0 0 120px; }
.gs-price--lessons .gs-price__head { width: min(584px, 100%); }
.gs-price--lessons .gs-price__title { margin-top: 20px; }
.gs-plan--mini { min-height: 552px; }
.gs-plan--mini.gs-plan--featured { min-height: 616px; }
.gs-plan--mini .gs-plan__body { width: 100%; }
.gs-plan--mini .gs-plan__name { line-height: 29px; }
.gs-plan--mini .gs-plan__list { margin-top: 32px; gap: 24px; }
.gs-plan--mini .gs-plan__list li { align-items: flex-start; line-height: 24px; padding-bottom: 12px; }
.gs-plan--mini .gs-plan__list li::after { margin-top: 6px; }
.gs-plan--mini .gs-plan__price { top: 57px; transform: translate(-50%, -50%); }
.gs-plan__pay {
  display: inline-flex; align-items: center; justify-content: center;
  width: 199px; height: 54px; margin-top: 32px;
  border: 1.5px solid var(--gs-dark); color: var(--gs-dark);
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.gs-plan__pay + .gs-plan__btn { margin-top: 16px; }
/* Pay Now (above Register Now) follows the Full / Partial switch: the partial link on Partial Payment, the full link on Full Payment */
.gs-price[data-mode="partial"] [data-show-in="full"],
.gs-price[data-mode="full"] [data-show-in="partial"] { display: none !important; }
.gs-plan--featured .gs-plan__pay { border-color: var(--gs-red); color: var(--gs-red); }
.gs-plan__pay:hover, .gs-plan__pay:focus-visible { background: var(--gs-dark); color: #fff; }
.gs-plan--featured .gs-plan__pay:hover, .gs-plan--featured .gs-plan__pay:focus-visible { background: var(--gs-red); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-price { padding: 90px 0; }
  .gs-price--lessons { padding: 0 0 90px; }
  .gs-plan--mini, .gs-plan--mini.gs-plan--featured { min-height: 0; }
  .gs-price__wrap { width: auto; padding: 0 24px; gap: 80px; }
  .gs-price__cards {
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 80px 30px;
  }
  .gs-plan, .gs-plan--featured { min-height: 0; }
  .gs-plan__flag { right: -20px; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-price { padding: 60px 0; }
  .gs-price--lessons { padding: 0 0 60px; }
  .gs-plan__pay { width: 100%; max-width: 199px; }
  .gs-price__wrap { padding: 0 18px; gap: 60px; }
  .gs-price__title { font-size: 30px; line-height: 38px; }
  .gs-price__toggle { width: 100%; }
  .gs-price__tab { flex: 1 1 50%; min-width: 0 !important; padding: 14px 10px; font-size: 14px; }
  .gs-price__brush, .gs-price__tab:last-child .gs-price__brush { width: 70%; }
  .gs-price__cards { gap: 70px; }
  .gs-plan { flex: 0 1 352px; width: 100%; padding: 150px 22px 28px; }
  .gs-plan__band--front { width: calc(100% - 36px); }
  .gs-plan__flag { width: 84px; height: 70px; top: -48px; right: -6px; }
}

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


/* /* <!-- =========================================================================CTA  section --> */
/* =========================================================
   CONTACT CTA — values from Figma (1920 × 356)
   ========================================================= */
.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; }
}

/* <!-- ========================================================================Confident Driver  section --> */

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

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;

  /* Fluid height: 879/1920 = 45.78% of viewport width, never below 720px.
     No aspect-ratio / fixed widths → no horizontal scroll. */
  min-height: max(720px, 45.78vw);
  padding: 60px 0;

  /* SAME BACKGROUND AS TESTIMONIAL */
  background-color: #f6f6f6;
  background-image: url("../images/Testimonial.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  font-family: "Manrope", sans-serif;
  margin-top: 8% !important;
}

.gs-cta *, .gs-cta *::before, .gs-cta *::after { box-sizing: border-box; }

.gs-cta__inner {
  position: relative;
  z-index: 1;
  width: min(1170px, 100% - 30px);
  margin: 0 auto;
}

/* ---------- Title (same spec as testimonial) ---------- */
.gs-cta__head { margin-bottom: 56px; }

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

.gs-cta__title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.03em;
}

/* ---------- Row: 606 (grow) | gap 64 | 500 ---------- */
.gs-cta__row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.gs-cta__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gs-cta__text {
  max-width: 599px;
  margin: -12px 0 0;               /* offsets 37px line-height vs Figma cap trim */
  color: var(--gs-muted);
  font-size: 18px;
  line-height: 37px;
}
.gs-cta__text strong { color: var(--gs-dark); font-weight: 700; }

/* Progress — label 12px cap, bar 10px, bar top 31px below label top */
.gs-cta__progress {
  width: 100%;
  margin-top: 30px;                /* Figma 42px gap, less the line-height offset */
}
.gs-cta__progress-label {
  display: flex;
  justify-content: space-between;
  width: calc(var(--gs-progress) + 18px);   /* 80% sits at the end of the fill (517/606) */
  max-width: 100%;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 16px;
}
.gs-cta__progress-label span:first-child { font-weight: 600; }
.gs-cta__progress-label span:last-child  { font-weight: 500; }

.gs-cta__bar {
  position: relative;
  height: 10px;
  margin-top: 15px;
  background: #fff;
}
.gs-cta__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--gs-progress);        /* 498.94 / 606 = 82.33% */
  background: var(--gs-red);
}

/* Button 168 × 56 */
.gs-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  height: 56px;
  margin-top: 42px;
  padding: 14px 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-cta__btn:hover,
.gs-cta__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }

/* ---------- Image block 500 × 476.31 — all positions as % so it scales ---------- */
.gs-cta__media {
  position: relative;
  flex: 0 0 500px;
  max-width: 100%;
  aspect-ratio: 500 / 476.31;
}

.gs-cta__img-main {               /* 470 × 409 at (0,0) */
  position: absolute;
  left: 0; top: 0;
  width: 94%;
  height: 85.87%;
  object-fit: cover;
  background: #f5f5f5;
}

.gs-cta__img-small {              /* 205 × 160.21 at (295, 315.76) */
  position: absolute;
  left: 59%;
  top: 66.29%;
  width: 41%;
  height: 33.64%;
  object-fit: cover;
  background: #f5f5f5;
  z-index: 2;                     /* sits ON TOP of the red frames */
}

.gs-cta__line {                   /* 2px red frames: above main image, BEHIND small image */
  position: absolute;
  z-index: 1;
  border: 2px solid var(--gs-red);
  pointer-events: none;
}
.gs-cta__line--1 { left: 52.6%; top: 61.04%; width: 41.4%; height: 27.57%; }  /* 207 × 131.3 at (263, 290.75) */
.gs-cta__line--2 { left: 55.8%; top: 63.67%; width: 38.2%; height: 24.94%; }  /* 191 × 118.79 at (279, 303.25) */

/* Phone card 255 × 67 at (0, 409.31) */
.gs-cta__phone {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 85.93%;
  width: 51%;
  min-width: 220px;
  height: 14.07%;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px 0 39px;
  background: var(--gs-dark);
  text-decoration: none;
}
.gs-cta__phone svg {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--gs-red);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.gs-cta__phone-text { display: flex; flex-direction: column; gap: 6px; }
.gs-cta__phone-label { color: #e6e6e6; font-size: 13px; line-height: 13px; }
.gs-cta__phone-number {
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  white-space: nowrap;
}
.gs-cta__phone:hover .gs-cta__phone-number { color: var(--gs-red); }

/* =========================================================
   TABLET — stack text above images
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-cta { min-height: 0; padding: 90px 0 110px; }
  .gs-cta__inner { width: auto; padding: 0 24px; }
  .gs-cta__row { flex-direction: column; align-items: flex-start; gap: 56px; }
  .gs-cta__content { width: 100%; }
  .gs-cta__text { max-width: 720px; }
  .gs-cta__progress { max-width: 606px; }
  .gs-cta__media { flex: none; width: 100%; max-width: 500px; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-cta { padding: 60px 0 90px; background-size: 160% auto; background-position: right bottom; }
  .gs-cta__inner { padding: 0 18px; }
  .gs-cta__head { margin-bottom: 36px; }
  .gs-cta__title { font-size: 30px; line-height: 38px; }
  .gs-cta__text { margin-top: -8px; font-size: 16px; line-height: 30px; }
  .gs-cta__btn { margin-top: 32px; }
  .gs-cta__phone { padding-left: 18px; gap: 12px; }
  .gs-cta__phone svg { flex-basis: 26px; width: 26px; height: 26px; }
  .gs-cta__phone-number { font-size: 16px; }
}

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


/* <!-- ========================================================================testimonial section  section --> */


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

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;

  /* Fluid height: 879/1920 = 45.78% of viewport width (Figma ratio),
     never below 640px. Width is always 100% — no fixed widths, so no
     horizontal scroll. (aspect-ratio + min-height was widening the
     section past the viewport — removed.) */
  width: 100%;
  max-width: 100%;
  min-height: max(640px, 53.75vw);          /* Figma: 1920 x 1032 */
  padding: clamp(64px, 7.5vw, 144px) 0 clamp(100px, calc(7.5vw + 36px), 180px);   /* room above the heading and below the ribbon that hangs under the frame */

  /* CHANGE BACKGROUND IMAGE HERE */
  /* Figma: grey dots in the top-left corner, coloured triangles in the bottom-right corner (two pictures, so both stay in their corner at any height) */
  background-color: #f6f6f6;
  background-image: url("../images/testimonial-dots.png"), url("../images/testimonial-triangles.png");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  /* the corner pictures shrink with the free space beside the 1170px content, so on a laptop they do not sit on top of the frame */
  background-size: clamp(200px, calc((100vw - 1170px) / 2 + 280px), 420px) auto, clamp(120px, calc((100vw - 1170px) / 2 + 60px), 320px) auto;

  font-family: "Manrope", sans-serif;
}

.gs-testi *, .gs-testi *::before, .gs-testi *::after { box-sizing: border-box; }

.gs-testi__inner {
  position: relative;
  z-index: 1;
  width: min(1170px, 100% - 30px);
  margin: 0 auto;
  padding-bottom: 33px;          /* room for ribbon hanging below card */
}

/* ---------- Title (Figma: 12px eyebrow + 20px gap + 28px heading) ---------- */
.gs-testi__head { margin-bottom: 56px; }

.gs-testi__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 16px;
}
.gs-testi__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }

.gs-testi__title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.03em;
}

/* ---------- Card: 1170 × 386, 3px red border ---------- */
.gs-testi__card {
  position: relative;
  height: 386px;
  border: 3px solid var(--gs-red);
}

.gs-testi__slides { position: relative; height: 100%; }

.gs-testi__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 267px minmax(0, 1fr);
  column-gap: 58px;               /* image 40→307, text starts at 365 */
  padding: 37px 67px 0 37px;      /* 40px left edge, text column ends at 1100 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.gs-testi__slide.is-active { opacity: 1; visibility: visible; }

/* Image 267 × 306 + quote badge 65px at (275, 30) */
.gs-testi__media { position: relative; width: 267px; height: 306px; background: #f6f6f6; }
.gs-testi__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gs-testi__quote {
  position: absolute;
  top: -10px;                     /* 30 − 40 */
  left: 235px;                    /* 275 − 40 */
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gs-red);
}
.gs-testi__quote svg { width: 26px; height: 20px; fill: #fff; }

/* Body column: stars @57, text @121 (cap), name row @259 */
.gs-testi__body { padding-top: 17px; }

.gs-testi__stars { display: flex; height: 24px; }
.gs-testi__stars svg { width: 29.83px; height: 24px; fill: var(--gs-red); }

.gs-testi__text {
  margin: 28px 0 0;
  max-width: 737px;
  color: var(--gs-muted);
  font-size: 20px;
  line-height: 37px;
}

.gs-testi__person { margin-top: 45px; }
.gs-testi__name {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 26px;
}
.gs-testi__time {
  margin: 6px 0 0;
  color: var(--gs-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Arrows: 50px, gap 16, at (984, 259) ---------- */
.gs-testi__arrows {
  position: absolute;
  z-index: 2;
  right: 67px;                    /* Figma: 1170 − 984 − 116 − 3px border */
  top: 256px;                     /* 259 − 3px border */
  display: flex;
  gap: 16px;
}
.gs-testi__arrow {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.gs-testi__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gs-red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.gs-testi__arrow--prev { background: var(--gs-dark); }
.gs-testi__arrow--next { background: #fff; box-shadow: 6px 6px 30px rgba(0,0,0,.16); }

.gs-testi__arrow:hover,
.gs-testi__arrow:focus-visible { background: var(--gs-red); transform: translateY(-2px); }
.gs-testi__arrow:hover svg,
.gs-testi__arrow:focus-visible svg { stroke: #fff; }

/* ---------- Ribbon: 304 × 70 at (365, 465) → 33px below card ---------- */
.gs-testi__ribbon {
  position: absolute;
  z-index: 2;
  left: 362px;                    /* 365 − 3px border */
  bottom: -36px;                  /* 70 tall, 33px hangs below + 3px border */
  width: 304px;
  height: 70px;
}
.gs-testi__ribbon-bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--gs-red); }

.gs-testi__dots {
  position: absolute;
  left: 46px;
  top: 13px;
  display: flex;
  gap: 13.54px;                   /* 60.21 pitch − 46.67 */
}
.gs-testi__dot {
  width: 46.67px;
  height: 46.67px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--gs-dark);
  cursor: pointer;
  transition: border-color .25s ease;
}
.gs-testi__dot.is-active { border-color: #fff; }
.gs-testi__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-testi {
    min-height: 0;
    padding: 90px 0 110px;
  }
  .gs-testi__inner { width: auto; padding: 0 24px 33px; }

  .gs-testi__card { height: auto; }
  .gs-testi__slides { display: grid; }
  .gs-testi__slide {
    position: relative;
    grid-area: 1 / 1;
    grid-template-columns: 240px 1fr;
    column-gap: 40px;
    padding: 34px 34px 100px;
  }
  .gs-testi__media { width: 240px; height: 275px; }
  .gs-testi__quote { left: 205px; }

  .gs-testi__arrows { left: auto; right: 34px; top: auto; bottom: 34px; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-testi { padding: 60px 0 90px; background-size: 40vw auto, 46vw auto; }
  .gs-testi__inner { padding: 0 18px 33px; }
  .gs-testi__head { margin-bottom: 36px; }
  .gs-testi__title { font-size: 30px; line-height: 38px; }

  .gs-testi__slide {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 24px 20px 110px;
  }
  .gs-testi__media { width: 100%; max-width: 267px; height: 280px; }
  .gs-testi__quote { left: auto; right: -12px; width: 54px; height: 54px; }
  .gs-testi__quote svg { width: 22px; height: 17px; }

  .gs-testi__body { padding-top: 0; }
  .gs-testi__text { margin-top: 18px; font-size: 16px; line-height: 29px; }
  .gs-testi__person { margin-top: 24px; }
  .gs-testi__name { font-size: 20px; }

  .gs-testi__arrows { right: 20px; bottom: 50px; gap: 12px; }
  .gs-testi__arrow { width: 44px; height: 44px; }

  .gs-testi__ribbon { left: 16px; transform: scale(.85); transform-origin: left bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-testi *, .gs-testi__slide { transition: none !important; }
  .gs-testi__arrow:hover { transform: none; }
}

/* <!-- ========================================================================Why choose us section --> */


/* =========================================================
   WHY CHOOSE US + COMPARISON — values from Figma
   ========================================================= */
.gs-why2 {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;

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

.gs-why2__wrap {
  position: relative;
  z-index: 1;
  width: min(1170px, 100% - 30px);
  margin: 0 auto;
}

/* ---------- Divider with Bg Element (same behaviour as Service Areas) ---------- */
.gs-why2__divider { position: relative; height: 200px; }
.gs-why2__divider::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
 
  background: #d4d4d6;
}
.gs-why2__divider::before {
  content: "";
  position: absolute;
  left: 0;
  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;
}

/* ---------- Header row: title (494) | intro (506), space-between ---------- */
.gs-why2__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 56px;
}
.gs-why2__title-block { flex: 0 1 494px; }
.gs-why2__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--gs-dark);
  font-size: 16px;
  line-height: 16px;
}
.gs-why2__chev { width: 22.5px; height: 9px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-why2__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-why2__intro {
  flex: 0 1 506px;
  margin: 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .05em;
}

/* ---------- 3 × 3 cards, gap 24, 248 tall ---------- */
.gs-why2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-feat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
/* red glow (Figma Ellipse 50: 93 × 94, blur 50, top-right) */
.gs-feat::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -47px;
  right: -46px;
  width: 93px;
  height: 94px;
  border-radius: 50%;
  background: var(--gs-red);
  filter: blur(50px);
  opacity: 0;
  transition: opacity .3s ease;
}
/* active / hover = Figma card 1 */
.gs-feat.is-active,
.gs-feat:hover {
  border-color: rgba(215,17,17,.42);
  box-shadow: 6px 6px 30px rgba(0,0,0,.6);
}
.gs-feat.is-active::before,
.gs-feat:hover::before { opacity: 1; }
.gs-feat:hover { transform: translateY(-4px); }
.gs-why2__grid:hover .gs-feat.is-active:not(:hover) {       /* only one highlighted at a time */
  border-color: transparent;
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
}
.gs-why2__grid:hover .gs-feat.is-active:not(:hover)::before { opacity: 0; }

.gs-feat__icon {
  width: auto;
  height: 56px;
  fill: none;
  stroke: var(--gs-red);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gs-feat__title {
  margin: 24px 0 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}
.gs-feat__text {
  margin: 14px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .03em;
}

/* ---------- Comparison table (481 | 344.5 | 344.5) ---------- */
.gs-compare {
  width: 100%;
  overflow-x: auto;
  background: #f7f7f7;
  box-shadow: 6px 6px 30px rgba(0,0,0,.16);
}
.gs-compare:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 3px; }
.gs-compare table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}
.gs-compare th, .gs-compare td { padding: 16px 56px; vertical-align: middle; }
.gs-compare col, .gs-compare thead th:first-child { width: 41.11%; }       /* 481 / 1170 */
.gs-compare thead th {
  height: 61px;
  background: var(--gs-red);
  color: #f5f5f5;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
}
.gs-compare thead th:first-child { text-align: left; }
.gs-compare thead th:not(:first-child) { padding-left: 20px; padding-right: 20px; }
.gs-compare tbody th {
  height: 56px;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  text-transform: capitalize;
}
.gs-compare tbody td { text-align: center; }
.gs-compare tbody tr:nth-child(even) { background: rgba(215,17,17,.16); }

/* 20px status icons: green check (#44D605) / red cross (#F51C1C) */
.gs-yes, .gs-no {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border-radius: 50%;
  background: center / 12px no-repeat;
}
.gs-yes {
  background-color: #44d605;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}
.gs-no {
  background-color: #f51c1c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5'/%3E%3C/svg%3E");
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-why2 { padding: 90px 0; }
  .gs-why2__wrap { width: auto; padding: 0 24px; }
  .gs-why2__divider { height: 120px; }
  .gs-why2__divider::before { display: none; }
  .gs-why2__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 44px; }
  .gs-why2__title-block, .gs-why2__intro { flex: none; max-width: 640px; }
  .gs-why2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-feat { min-height: 0; }
  .gs-compare th, .gs-compare td { padding: 16px 28px; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
  .gs-why2 { padding: 60px 0; }
  .gs-why2__wrap { padding: 0 18px; }
  .gs-why2__divider { height: 70px; }
  .gs-why2__title { font-size: 30px; line-height: 38px; }
  .gs-why2__intro { font-size: 15px; line-height: 28px; letter-spacing: .02em; }
  .gs-why2__grid { grid-template-columns: 1fr; gap: 18px; }
  .gs-feat { padding: 22px; }
  .gs-feat__icon { height: 48px; }
  .gs-feat__title { margin-top: 18px; font-size: 19px; }
  .gs-feat__text { font-size: 15px; line-height: 27px; }
  .gs-feat:hover { transform: none; }

  /* table becomes compact: 3 columns still visible, no side-scroll needed */
  .gs-compare table { min-width: 0; }
  .gs-compare thead th:first-child { width: 52%; }
  .gs-compare th, .gs-compare td { padding: 14px 12px; }
  .gs-compare thead th { height: auto; font-size: 14px; line-height: 18px; }
  .gs-compare tbody th { height: auto; font-size: 13px; line-height: 18px; }
}

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

/* form result banners (registration + contact) */
.gs-form-alert{margin:0 0 28px;padding:16px 20px;border-left:4px solid var(--gs-red);background:#fff;box-shadow:6px 6px 30px rgba(0,0,0,.12);font-size:15px;line-height:24px;color:var(--gs-dark)}
.gs-form-alert--ok{border-left-color:#16a34a}
.gs-form-alert ul{margin:8px 0 0;padding-left:20px}

/* service area card: link to the location page */
.gs-areas__link{display:inline-block;margin-top:18px;color:var(--gs-red);font-weight:700;font-size:15px;text-decoration:none}
.gs-areas__link:hover,.gs-areas__link:focus-visible{text-decoration:underline}
.gs-areas__tag[hidden],.gs-areas__link[hidden]{display:none}

/* ---------- Clients gallery (replaces the review slider): red frame, 3 pictures at a time ---------- */
.gs-testi__card--gallery { height: auto; padding: 56px; --gap: 36px; }   /* Figma: 56px all round (same gap above and below the pictures), 36px between them */
@media (min-width: 1200px) { .gs-testi__card--gallery .gs-testi__ribbon { left: 37%; } }   /* Figma: the ribbon starts 433px into the 1170px frame */
.gs-gal__view { overflow: hidden; }
.gs-gal__track {
  --per: 3; --first: 0;
  display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; width: 100%;
  transform: translateX(calc(var(--first) * -1 * ((100% - (var(--per) - 1) * var(--gap)) / var(--per) + var(--gap))));
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.gs-gal__item { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; background: #ececec; overflow: hidden; }
.gs-gal__item img { display: block; width: 100%; height: auto; object-fit: cover; }
.gs-testi__ribbon[hidden] { display: none; }
@media (max-width: 1199.98px) { .gs-testi__card--gallery { padding: 36px; --gap: 24px; } }
@media (max-width: 991.98px) { .gs-testi__card--gallery { padding: 28px; --gap: 20px; } }
@media (max-width: 575.98px) { .gs-testi__card--gallery { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .gs-gal__track { transition: none; } }
/* many pages: smaller dots, or a "3 / 12" counter, so they always fit on the ribbon */
.gs-testi__dots.is-small { top: 28px; gap: 7px; }
.gs-testi__dots.is-small .gs-testi__dot { width: 14px; height: 14px; border-width: 2px; }
.gs-testi__dots.is-count { top: 0; height: 70px; display: flex; align-items: center; }
.gs-testi__count { color: #fff; font: 700 18px/1 "Urbanist", sans-serif; letter-spacing: .02em; }

/* ---------- Google reviews (rating on the left, review cards on the right) ---------- */
.gs-grev { background: #fff; font-family: "Manrope", sans-serif; padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 4vw, 64px); }
.gs-grev *, .gs-grev *::before, .gs-grev *::after { box-sizing: border-box; }
.gs-grev__inner { width: min(1170px, 100% - 30px); margin: 0 auto; }
.gs-grev__title { margin: 0 0 clamp(28px, 3vw, 44px); text-align: center; color: #111117; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 40px; line-height: 50px; letter-spacing: -0.03em; }
.gs-grev__body { display: flex; align-items: center; gap: 34px; }

.gs-grev__summary { flex: 0 0 190px; text-align: center; color: #111117; }
.gs-grev__label { margin: 0; font: 800 24px/1.2 "Urbanist", sans-serif; letter-spacing: .01em; }
.gs-grev__stars { display: flex; justify-content: center; gap: 2px; margin: 8px 0 6px; }
.gs-grev__stars svg { width: 30px; height: 30px; fill: #fbbc04; }
.gs-grev__count { margin: 0; font-size: 14px; }
.gs-grev__google { display: inline-block; margin-top: 6px; text-decoration: none; font: 700 40px/1.1 "Urbanist", sans-serif; letter-spacing: -.04em; }
.gs-grev__google:hover { opacity: .85; }

.gs-grev__slider { position: relative; flex: 1 1 auto; min-width: 0; }
.gs-grev__view { overflow: hidden; }
.gs-grev__track {
  --per: 2; --pos: 0; --gap: 20px;
  display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none;
  transform: translateX(calc(var(--pos) * -1 * ((100% - (var(--per) - 1) * var(--gap)) / var(--per) + var(--gap))));
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.gs-grev__card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; padding: 20px; background: #f3f3f3; border-radius: 12px; display: flex; flex-direction: column; }   /* every card as tall as the tallest one, so the grey boxes line up */
.gs-grev__head { display: flex; align-items: center; gap: 12px; }
.gs-grev__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gs-grev__avatar--letter { display: grid; place-items: center; color: #fff; font: 700 18px/1 "Urbanist", sans-serif; }
.gs-grev__who { min-width: 0; flex: 1; }
.gs-grev__name { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.3; color: #111117; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-grev__time { margin: 1px 0 0; font-size: 13px; color: #8a8d93; }
.gs-grev__g svg { display: block; width: 22px; height: 22px; }
.gs-grev__rate { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; }
.gs-grev__rate-stars { display: flex; gap: 1px; }
.gs-grev__rate-stars svg { width: 20px; height: 20px; fill: #fbbc04; }
.gs-grev__verified { width: 16px; height: 16px; }
.gs-grev__text { margin: 0; font-size: 15px; line-height: 23px; color: #111117; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gs-grev__card.is-open .gs-grev__text { -webkit-line-clamp: unset; display: block; }
.gs-grev__more { align-self: flex-start; margin: 8px 0 0; padding: 0; border: 0; background: none; color: #8a8d93; font: 500 14px/1 "Manrope", sans-serif; cursor: pointer; }
.gs-grev__more:hover { color: #111117; }
.gs-grev__more[hidden] { display: none; }

.gs-grev__arrow {
  position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px;
  display: grid; place-items: center; border: 1px solid #e3e3e5; border-radius: 50%;
  background: #fff; color: #111117; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.gs-grev__arrow svg { width: 9px; height: 14px; }
.gs-grev__arrow--next { right: -14px; }
.gs-grev__arrow--prev { left: -14px; }
.gs-grev__arrow:hover { background: #d71111; border-color: #d71111; color: #fff; }
.gs-grev__arrow[hidden] { display: none; }

@media (max-width: 991.98px) {
  .gs-grev__title { font-size: 32px; line-height: 40px; }
  .gs-grev__body { flex-direction: column; gap: 22px; }
  .gs-grev__summary { flex: none; }
  .gs-grev__slider { width: 100%; }
  .gs-grev__arrow--next { right: -6px; }
  .gs-grev__arrow--prev { left: -6px; }
}
@media (max-width: 575.98px) { .gs-grev__title { font-size: 28px; line-height: 36px; } .gs-grev__google { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .gs-grev__track { transition: none; } }