/* ══════════════════════════════════════════════════════════════
         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;
      }
      .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: 80%;
        object-fit: cover;
      }

      /* Right Hero Column: "WE solve problems..." */
      .serv-hero-right {
        padding-top: 1.5em;
      }
      .serv-main-heading {
        font-family: 'Schabo Condensed', Arial, sans-serif;
        font-size: 114px;
        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-intro-section {
        padding: 2em 0 5em;
      }
      .serv-intro-desc {
        font-family: 'Object Sans', Arial, sans-serif;
        font-size: 22px;
        line-height: 1.5;
        color: #FEFEFE;
        margin: 0 0 3em;
        max-width: 900px;
      }
      .serv-intro-grid {
        display: flex;
        justify-content: center;
        gap: 2em;
        align-items: start;
        margin-left: 3em;
      }
      .serv-intro-left {
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
      }
      .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 {
        margin-left: 2.4em;
      }
      .serv-gap-small {
        font-size: 32px;
      }
      .serv-gap-big {
        font-size: 64px;
      }
      .serv-gap-ticks {
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
      }
      .serv-gap-bang {
        font-size: 44px;
        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: 0.5em; /* Reduced gap */
        text-align: left;
      }

      /* 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: 140px;
        }
      }

      /* ── 4. WHY ONE TEAM BEATS THREE VENDORS ──────────────────────── */
      .serv-compare-section {
        padding: 5em 0;
      }
      .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 + eye icon */
      .serv-compare-bottom-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 2em;
        margin-left: 62px;
      }
      .serv-compare-eye-icon {
        width: 110px;
        height: auto;
      }

      /* ── 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: 2em; margin-left: 0; }
        .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; }
      }
 
      @media screen and (max-width: 767px) {
        .serv-top-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 1em;
          padding: 5em 1.5em 1em;
        }
        .serv-hero-badge-title { font-size: 28px; }
        .serv-hero-img-box { aspect-ratio: 1 / 1; }
        .serv-main-heading { font-size: 60px; }
        .serv-intro-desc, .serv-card-desc { font-size: 1.05em; }
        .serv-intro-note { font-size: 20px; }
        .serv-gap-small { font-size: 22px; }
        .serv-gap-big { font-size: 40px; }
        .serv-gap-bang { font-size: 30px; }
        .serv-gap-line--2 { margin-left: 0.4em; }
        .serv-gap-line--3 { margin-left: 1.2em; }
        .serv-arsenal-title { font-size: 60px; }
        .serv-arsenal-grid { grid-template-columns: 1fr; }
        .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; gap: 1.5em; }
        .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; }
      }