/* ══════════════════════════════════════════════════════════════
         SERVICES PAGE — matching Figma node 164:4511 + services.pdf
         ══════════════════════════════════════════════════════════════ */

:root {
  --animation-fade: 0.1s linear;
  --animation-fast: 0.35s cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --animation-primary: 0.735s cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --size-unit: 16;
  --size-container-ideal: 1920;
  --size-container-min: 992px;
  --size-container-max: 2160px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 1384;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 377;
    --size-container-min: 320px;
    --size-container-max: 767px;
  }
}

/* ── 1. TOP HEADER ───────────────────────────────────────────── */
.serv-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7em 4em 1.5em 4em;
}

.serv-stamp-group {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.serv-stamp-icon {
  width: 40px;
  height: 44px;
  object-fit: contain;
}

.serv-stamp-text {
  font-family: Comedik, Arial, sans-serif;
  font-size: 40px;
  line-height: 0.81;
  color: #748370;
  text-transform: uppercase;
}

/* ── 2. HERO ─────────────────────────────────────────────────── */
.serv-hero-section {
  padding: 2em 0 4em;
}

.serv-hero-grid {
  display: grid;
  grid-template-columns: 593px 1fr;
  gap: 5em;
  align-items: start;
}

/* Left Hero Column: Badge + Image */
.serv-hero-left {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}

.serv-hero-badge-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  /* padding: 40px; */
  min-height: 195px;
}

.serv-hero-arrow-decor {
  width: 220px;
  height: auto;
  margin-top: 20px;
  align-self: center;
  pointer-events: none;
}

.serv-hero-badge-bounce {
  display: inline-flex;
}

.serv-hero-badge-crossout {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(-9deg);
}

.serv-hero-badge-crossline-wrap {
  position: relative;
  display: inline-block;
}

.serv-hero-badge-title {
  font-family: Comedik, Arial, sans-serif;
  font-size: 40px;
  color: #E2F533;
  margin: 0;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  font-weight: 400;
}

.draw-line.is--serv-badge-top {
  color: #8A9686;
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 0.5em;
  transform: translateY(-50%) rotate(-2deg);
}

.draw-line.is--serv-badge-bottom {
  color: #8A9686;
  position: absolute;
  top: 75%;
  left: 0;
  width: 100%;
  height: 0.5em;
  transform: translateY(-50%) rotate(2deg);
}

.serv-hero-img-box {
  width: 100%;
  aspect-ratio: 593 / 519;
  border-radius: 24px;
  overflow: hidden;
}

.serv-hero-main-img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

/* Right Hero Column: "WE solve problems..." */
.serv-hero-right {
  padding-top: 1.5em;
}

.serv-solutions-preface {
  font-family: Comedik, Arial, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.serv-preface-green {
  color: #E2F533;
  font-size: 25px;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.02em;
}

.serv-preface-orange {
  color: #FF6316;
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: 0.02em;
  max-width: 850px;
}

.serv-main-heading {
  font-family: 'Schabo Condensed', Arial, sans-serif;
  font-size: 135px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.08;
  color: #FCFFDB;
  margin: 0;
}

.serv-heading-circle-wrap {
  position: relative;
  display: inline-block;
}

.serv-draw-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  pointer-events: none;
  z-index: 1;
}

.serv-draw-circle-svg {
  width: 100%;
  max-width: none;
  display: none;
  position: relative;
}

.serv-draw-circle-svg-mask {
  opacity: 1;
  width: 100%;
  position: relative;
}

/* ── INTRO / TEXT BLOCK ──────────────────────────────────────── */
.serv-solutions-preface {
  margin-bottom: 2em;
}

.serv-intro-section {
  padding: 2em 0 1em;
}

.serv-intro-desc {
  font-family: 'Object Sans', Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #FEFEFE;
  margin: 0 0 3em;
  max-width: 900px;
}

.serv-intro-grid {
  display: flex;
  justify-content: center;
  gap: 6.5em;
  align-items: start;
  margin-left: 3em;
}

.serv-intro-left {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  padding-right: 2.5em;
}

.serv-gap-headline-wrap {
  display: inline-block;
}

.serv-gap-headline {
  font-family: Comedik, Arial, sans-serif;
  line-height: 1.15;
  color: #FF6316;
  margin: 0;
  transform: rotate(-4deg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.serv-gap-line {
  white-space: nowrap;
}

.serv-gap-line--1 {
  margin-left: 0;
}

.serv-gap-line--2 {
  margin-left: 0.6em;
}

.serv-gap-line--3 {
  align-self: flex-end;
  margin-top: -3.4em;
}

.serv-gap-small {
  font-size: 38.4px;
}

.serv-gap-big {
  font-size: 76.8px;
}

.serv-gap-ticks-svg {
  display: inline-block;
  width: 3.1em;
  height: auto;
  vertical-align: top;
  position: relative;
  top: -0.6em;
  margin-left: 0.15em;
  color: #FF6316;
}

.serv-gap-bang {
  font-size: 89px;
  color: #FF6316;
}

.serv-intro-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3em;
  margin-top: 0.3em;
  flex: 0 0 auto;
  max-width: 460px;
}

.serv-intro-note {
  font-family: Comedik, Arial, sans-serif;
  font-size: 30px;
  line-height: 1.2;
  color: #E2F533;
  margin: 0;
}

/* CTA Pill */
.serv-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #EEE0C6;
  border-radius: 60px;
  padding: 14px 28px 14px 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--animation-fast), box-shadow 0.25s var(--animation-fast);
  white-space: nowrap;
}

.serv-cta-btn span {
  font-family: Comedik, Arial, sans-serif;
  font-size: 22px;
  color: #552200;
  text-transform: uppercase;
}

.serv-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ── 3. WHAT'S IN OUR ARSENAL? ───────────────────────────────── */
.serv-arsenal-section {
  padding: 4em 0;
}

.serv-arsenal-header {
  margin-bottom: 3em;
}

.serv-arsenal-title {
  font-family: 'Schabo Condensed', Arial, sans-serif;
  font-size: 120px;
  font-weight: 400;
  text-transform: uppercase;
  color: #FCFFDB;
  margin: 0;
  line-height: 1;
  text-align: center;
}

/* Staggered Grid Layout */
.serv-arsenal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5em;
  row-gap: 8em;
}

.serv-arsenal-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.serv-card-box {
  position: relative;
  width: 100%;
  transition: transform 0.35s var(--animation-fast);
}

.serv-arsenal-card:hover .serv-card-box {
  transform: translateY(-5px);
}

.serv-card-img {
  width: 100%;
  height: auto;
  display: block;
}

.serv-card-arrow-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 32%;
  transform: translate(15%, -15%);
  z-index: 2;
  transition: transform 0.35s var(--animation-fast);
}

.serv-card-arrow-icon {
  width: 100%;
  height: auto;
  display: block;
}

.serv-arsenal-card:hover .serv-card-arrow-btn {
  transform: translate(15%, -15%) scale(1.08) rotate(15deg);
}

.serv-card-desc {
  font-family: 'Object Sans', Arial, sans-serif;
  font-size: 1.375em;
  line-height: 1.35;
  color: #FEFEFE;
  margin-top: 0em;
  /* Reduced gap */
  text-align: left;
  padding-left: 10%;
}

/* Desktop positioning and staggering using transforms to prevent grid row expansion */
@media screen and (min-width: 992px) {
  .serv-arsenal-card--1 {
    grid-column: 2;
    grid-row: 1;
  }

  .serv-arsenal-card--2 {
    grid-column: 1;
    grid-row: 1;
    transform: translateY(9.375em);
    /* 150px staggered shift */
  }

  .serv-arsenal-card--3 {
    grid-column: 3;
    grid-row: 1;
    transform: translateY(9.375em);
    /* 150px staggered shift */
  }

  .serv-arsenal-card--4 {
    grid-column: 2;
    grid-row: 2;
  }

  .serv-arsenal-card--5 {
    grid-column: 1;
    grid-row: 2;
    transform: translateY(9.375em);
    /* 150px staggered shift */
  }

  .serv-arsenal-card--6 {
    grid-column: 3;
    grid-row: 2;
    transform: translateY(9.375em);
    /* 150px staggered shift */
  }

  .serv-arsenal-card--7 {
    grid-column: 2;
    grid-row: 3;
  }

  .serv-arsenal-grid {
    padding-bottom: 20px;
  }
}

/* ── 4. WHY ONE TEAM BEATS THREE VENDORS ──────────────────────── */
.serv-compare-section {
  padding-top: 0em;
  padding-bottom: 6em;
}

.serv-compare-header {
  margin-bottom: 3.5em;
  max-width: 970px;
}

.serv-compare-title {
  font-family: 'Schabo Condensed', Arial, sans-serif;
  font-size: 96px;
  font-weight: 400;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.08;
}

.serv-compare-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 3em;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1000px;
}

.serv-compare-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  font-family: Comedik, Arial, sans-serif;
  font-size: 26px;
  line-height: 1.3;
  color: #E2F533;
}

.serv-compare-bullet-icon {
  width: 34px;
  height: auto;
  flex-shrink: 0;
  margin-top: 6px;
}

/* Bottom row: CTA + text + eye icon */
.serv-compare-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  margin-top: 3.5em;
  width: 100%;
}

.serv-compare-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
  max-width: 820px;
  margin-left: 62px;
}

.serv-compare-agency-text {
  font-family: Comedik, Arial, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  color: #FF6316;
  text-transform: uppercase;
  margin: 0;
  text-align: left;
}

.serv-compare-btn-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.serv-compare-eye-icon {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}

.serv-eye-blink-group {
  animation: servEyeBlink 4.5s infinite;
  transform-origin: 65px 69px;
}

@keyframes servEyeBlink {

  0%,
  88%,
  92%,
  96%,
  100% {
    transform: scaleY(1);
  }

  90%,
  94% {
    transform: scaleY(0.05);
  }
}

/* ── 5. FAQ ──────────────────────────────────────────────────── */
.serv-faq-section {
  padding: 0 0 8em;
}

.serv-faq-inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.serv-faq-bg {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.85;
}

.serv-faq-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4em 5em;
  text-align: center;
  gap: 1em;
}

.serv-faq-label {
  font-family: Comedik, Arial, sans-serif;
  font-size: 30px;
  color: #141D11;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
}

.serv-faq-q {
  font-family: Comedik, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  color: #FF6316;
  margin: 0;
  font-weight: 400;
}

.serv-faq-a {
  font-family: Comedik, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: #292929;
  margin: 0;
  font-weight: 400;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media screen and (max-width: 1200px) {
  .serv-hero-grid {
    grid-template-columns: 1fr;
    gap: 3em;
  }

  .serv-intro-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 3em;
    margin-left: 0;
  }

  .serv-intro-left {
    padding-right: 0 !important;
  }

  .serv-intro-right {
    max-width: 100%;
  }

  .serv-arsenal-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 3em;
    row-gap: 4em;
  }

  .serv-arsenal-card {
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
  }
}

@media screen and (max-width: 991px) {
  .serv-top-header {
    padding: 6em 2em 1.5em;
  }

  .serv-main-heading {
    font-size: 90px;
  }

  .serv-arsenal-title {
    font-size: 90px;
  }

  .serv-compare-title {
    font-size: 64px;
  }

  .serv-compare-bullets li {
    font-size: 24px;
  }

  .serv-intro-note {
    font-size: 24px;
  }

  .serv-card-desc {
    font-size: 1.2em;
    padding-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .serv-top-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    padding: 4.5em 1.5em 0 !important;
  }

  .serv-hero-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 1.2em !important;
  }

  .serv-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1em !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .serv-hero-left {
    display: contents !important;
  }

  .serv-hero-badge-wrap {
    order: 1 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
  }

  .serv-hero-right {
    order: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .serv-main-heading {
    font-size: 54px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .serv-preface-green {
    font-size: 20px !important;
  }

  .serv-preface-orange {
    font-size: 22px !important;
  }

  .serv-stamp-text {
    font-size: 28px;
  }

  .serv-hero-badge-crossout {
    transform: rotate(0deg) !important;
  }

  .serv-hero-badge-crossline-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.3em !important;
    white-space: nowrap !important;
    border-bottom: 2px solid #8A9686 !important;
    padding-bottom: 6px !important;
    width: 100% !important;
  }

  .serv-hero-badge-title {
    font-size: 24px !important;
    display: inline !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .draw-line.is--serv-badge-top,
  .draw-line.is--serv-badge-bottom {
    display: none !important;
  }

  .serv-hero-arrow-decor {
    display: none !important;
  }

  .serv-hero-img-box {
    order: 3 !important;
    aspect-ratio: 1 / 1;
    width: 60% !important;
    align-self: center;
  }

  .serv-main-heading {
    font-size: 60px;
  }

  .serv-intro-desc,
  .serv-card-desc {
    font-size: 1em;
    padding-left: 0%;
  }

  .serv-intro-note {
    font-size: 20px;
  }

  .serv-gap-small {
    font-size: 26.4px;
  }

  .serv-gap-big {
    font-size: 48px;
  }

  .serv-gap-bang {
    font-size: 61px !important;
  }

  .serv-gap-line--2 {
    margin-left: 0.4em;
  }

  .serv-gap-ticks-svg {
    width: 1.8em !important;
    top: -0.4em !important;
    margin-left: 0.1em !important;
  }

  .serv-gap-line--3 {
    align-self: flex-end !important;
    margin-left: 0 !important;
    margin-top: -1.7em !important;
  }

  .serv-arsenal-title {
    font-size: 60px;
  }

  .serv-arsenal-grid {
    grid-template-columns: 1fr;
  }

  .serv-card-box {
    width: 50% !important;
    margin: 0 auto;
  }

  .serv-card-desc {
    text-align: center;
  }

  .serv-card-img-wrap {
    padding: 24px;
  }

  .serv-compare-title {
    font-size: 44px;
  }

  .serv-compare-bullets li {
    font-size: 20px;
    gap: 16px;
  }

  .serv-compare-bullet-icon {
    width: 22px;
    height: 22px;
  }

  .serv-compare-bottom-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5em;
  }

  .serv-compare-text-group {
    margin-left: 0 !important;
  }

  .serv-compare-agency-text {
    font-size: 20px !important;
    text-align: left !important;
  }

  .serv-compare-eye-icon {
    width: 70px;
  }

  .serv-faq-content {
    padding: 2.5em 1.5em;
  }

  .serv-faq-q,
  .serv-faq-a {
    font-size: 15px;
  }

  .serv-faq-label {
    font-size: 18px;
  }

  .serv-cta-btn span {
    font-size: 18px;
  }
}

/* ── TABLET (768px - 991px) REFINEMENTS ────────────────────── */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .serv-arsenal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2em !important;
  }

  .serv-arsenal-card:last-child {
    grid-column: span 2;
    max-width: 500px;
    justify-self: center;
    width: 100%;
  }

  .serv-hero-badge-wrap {
    transform: scale(0.9) rotate(-6deg);
    margin-left: 0;
  }

  .serv-faq-section {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
  }
}