.gs-about {
  --u: min(1px, 0.0520833vw);
  --gs-red: #d71111;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(800 * var(--u));
  display: flex;
  align-items: stretch;
  background: var(--gs-red);
  font-family: "Manrope", sans-serif;
}
.gs-about *, .gs-about *::before, .gs-about *::after { box-sizing: border-box; }

/* left red panel 1034 × 800 (about_1.png = red texture artwork) */
.gs-about__panel {
  flex: 0 0 calc(1034 * var(--u));
  display: flex;
  align-items: center;
  /* CHANGE LEFT BACKGROUND HERE */
  background: var(--gs-red) url("../images/about_1.png") center / cover no-repeat;
}

/* text block 609 wide, starting at Figma x 375, 46.5 below centre */
.gs-about__text {
  width: calc(609 * var(--u));
  margin-left: calc(375 * var(--u));
  padding: calc(40 * var(--u)) 0;
  transform: translateY(calc(23 * var(--u)));
}

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

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

.gs-about__lead {
  margin: calc(32 * var(--u)) 0 0;
  color: #ffffff;
  font-size: max(14px, calc(18 * var(--u)));
  font-weight: 500;
  line-height: 1.667;
  letter-spacing: .03em;
}

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

/* right photo 886 × 800 */
.gs-about__img {
  flex: 1 1 auto;
  width: calc(886 * var(--u));
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   TABLET / MOBILE — photo on top, red panel below
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-about {
    --u: 1px;
    min-height: 0;
    flex-direction: column;              /* text panel first, photo below */
  }
  .gs-about__img { width: 100%; height: auto; aspect-ratio: 886 / 620; }
  /* The red artwork is NOT used here: scaled to a narrow panel its white
     diagonal landed behind the heading. Plain red + small corner accents
     instead (same approach as the hero on mobile). */
  .gs-about__panel {
    position: relative;
    flex: none;
    width: 100%;
    padding: 72px 24px;
    background: var(--gs-red);
    overflow: hidden;
  }
  .gs-about__panel::before {            /* white diagonal accent, top-right corner */
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    width: 46px;
    height: 170px;
    background: #fff;
    transform: rotate(45deg);
    transform-origin: top right;
    opacity: .9;
  }
  .gs-about__panel::after {             /* thinner accent beside it */
    content: "";
    position: absolute;
    top: 0;
    right: 36px;
    width: 16px;
    height: 120px;
    background: rgba(255,255,255,.35);
    transform: rotate(45deg);
    transform-origin: top right;
  }
  .gs-about__text {
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    transform: none;
  }
  .gs-about__title { font-size: 56px; line-height: 1.07; }
  .gs-about__lead { font-size: 16px; }
}

@media (max-width: 767.98px) {
  .gs-about__img { aspect-ratio: 4 / 3; }
  .gs-about__panel { padding: 56px 18px; }
  .gs-about__panel::before { width: 36px; height: 130px; right: -24px; }
  .gs-about__panel::after  { width: 13px; height: 92px; right: 28px; }
  .gs-about__title { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.1; }
  .gs-about__lead { font-size: 15px; line-height: 1.75; }
  .gs-about__btn { width: 100%; max-width: 320px; }
}

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

/* ============================================================== MISSION + CORE VALUES section css */
.gs-mission {
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-ink: #111117;
  --gs-muted: #6d7076;

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/*======================================================================= call us any time section 3 */



/* =========================================================
   JOIN THE FAMILY — N × var(--u), 1u = 1 Figma px on desktop
   ========================================================= */
.gs-join {
  --u: min(1px, 0.0520833vw);
  --gs-red: #d71111;
  --gs-dark: #2a2a30;
  --gs-muted: #6d7076;

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

  /* CHANGE BACKGROUND IMAGE HERE */
  background: #f6f6f6 url("../images/Testimonial.png") center / cover no-repeat;
  font-family: "Manrope", sans-serif;
}
.gs-join *, .gs-join *::before, .gs-join *::after { box-sizing: border-box; }

/* content 794 wide at Figma x 376 */
.gs-join__inner {
  position: relative;
  z-index: 1;
  width: calc(794 * var(--u));
  margin-left: calc(376 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(56 * var(--u));
}

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

.gs-join__title {
  margin: 0;
  color: var(--gs-dark);
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: max(34px, calc(56 * var(--u)));
  line-height: 1.143;                       /* 64 / 56 */
  letter-spacing: -0.03em;
}

.gs-join__lead {
  margin: 0;
  color: var(--gs-muted);
  font-size: max(14px, calc(18 * var(--u)));
  font-weight: 500;
  line-height: 1.667;                       /* 30 / 18 */
  letter-spacing: .05em;
}

.gs-join__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(163 * var(--u));
  height: max(46px, calc(57 * var(--u)));
  padding: 0 calc(32 * var(--u));
  background: var(--gs-red);
  color: #fff;
  font-size: max(15px, calc(18 * var(--u)));
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.gs-join__btn:hover, .gs-join__btn:focus-visible { background: #b90e0e; transform: translateY(-2px); }
.gs-join__phone:focus-visible, .gs-join__btn:focus-visible { outline: 2px solid var(--gs-dark); outline-offset: 3px; }

/* =========================================================
   TABLET / MOBILE — full-width content, artwork kept to the edges
   ========================================================= */
@media (max-width: 1199.98px) {
  .gs-join {
    --u: 1px;
    min-height: 0;
    padding: 72px 0;
    background-size: auto 100%;
    background-position: right center;
  }
  .gs-join__inner {
    width: auto;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 34px;
  }
  .gs-join__title { font-size: 44px; line-height: 1.16; }
  .gs-join__lead { font-size: 16px; }
}

@media (max-width: 767.98px) {
  .gs-join {
    padding: 56px 0;
    background: #f6f6f6;                    /* artwork would sit under the text here */
  }
  .gs-join::before {                        /* small red/dark accent instead */
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    background:
      linear-gradient(to bottom left, var(--gs-red) 0 50%, transparent 50%),
      linear-gradient(to top right, var(--gs-dark) 0 22%, transparent 22%);
    opacity: .9;
  }
  .gs-join__inner { padding: 0 18px; gap: 26px; }
  .gs-join__title { font-size: clamp(30px, 8.5vw, 38px); line-height: 1.18; }
  .gs-join__lead { font-size: 15px; line-height: 1.75; letter-spacing: .03em; }
  .gs-join__btn { width: 100%; max-width: 320px; }
}

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