@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Figtree:wght@300;400;500;600&display=swap');

:root {
  --navy:     #1A2744;
  --navy-d:   #0F1A30;
  --teal:     #1AAB98;
  --teal-d:   #148A79;
  --gold:     #C6993A;
  --white:    #ffffff;
  --off-white:#F5F4EF;
  --gray-lt:  #ECEDF2;
  --gray:     #8A97AB;
  --gray-dk:  #3F5264;
  --text:     #171F2D;
  --text-lt:  #4A5F75;
  --border:   #DDE2EC;
  --font-head:'Fraunces', Georgia, serif;
  --font-body:'Figtree', sans-serif;

    --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(15, 26, 48, 0.06);
  --shadow:    0 4px 24px rgba(15, 26, 48, 0.09);
  --shadow-lg: 0 12px 48px rgba(15, 26, 48, 0.13);
  --transition: 0.25s ease;
}

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
      }

      body {
        font-family: var(--font-body);
        color: var(--text);
        background: var(--white);
        overflow-x: hidden
      }

      img {
        max-width: 100%;
        display: block
      }

      a {
        text-decoration: none;
        color: inherit
      }

      /* ── PAGE HERO ── */
      .services-hero {
        background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 100%);
        padding: 72px 5% 64px;
        position: relative;
        overflow: hidden;
      }

      .services-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(-55deg,
            transparent 0px, transparent 18px,
            rgba(255, 255, 255, 0.02) 18px, rgba(255, 255, 255, 0.02) 20px);
      }

      .services-hero::after {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(27, 153, 139, 0.20) 0%, transparent 65%);
        pointer-events: none;
      }

      .services-hero-inner {
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }

      .section-label {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .section-label::before {
        content: '';
        display: inline-block;
        width: 28px;
        height: 2px;
        background: var(--teal);
        border-radius: 2px;
      }

      .services-hero h1 {
        font-family: var(--font-head);
        font-size: clamp(2rem, 4vw, 2.8rem);
        font-weight: 700;
        color: var(--white);
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin-bottom: 14px;
      }

      .services-hero h1 em {
        color: var(--gold);
        font-style: italic
      }

      .services-hero p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.62);
        line-height: 1.75;
        max-width: 560px;
      }

      /* ── STATS STRIP ── */
      .stats-strip {
        background: var(--teal);
        padding: 28px 5%;
      }

      .stats-strip-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
      }

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 24px;
        border-right: 1px solid rgba(255, 255, 255, 0.20);
      }

      .stat-item:last-child {
        border-right: none
      }

      .stat-num {
        font-family: var(--font-head);
        font-size: 2rem;
        font-weight: 700;
        color: var(--gold) !important;
        line-height: 1;
      }

      .stat-label {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.72);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-top: 5px;
      }

      /* ── FILTER TABS ── */
      .filter-section {
        background: var(--off-white);
        padding: 32px 5%;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 72px;
        z-index: 50;
      }

      .filter-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .filter-btn {
        padding: 8px 20px;
        border-radius: 50px;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        border: 1.5px solid var(--border);
        background: var(--white);
        color: var(--gray-dk);
        transition: all var(--transition);
      }

      .filter-btn:hover {
        border-color: var(--teal);
        color: var(--teal)
      }

      .filter-btn.active {
        background: var(--navy);
        border-color: var(--navy);
        color: var(--white);
      }

      /* ── SERVICES GRID ── */
      .services-section {
        padding: 72px 5%;
        background: var(--white);
      }

      .services-inner {
        max-width: 1100px;
        margin: 0 auto
      }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
      }

      /* ── SERVICE CARD ── */
      .service-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        position: relative;
      }

      .service-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 12px 40px rgba(27, 153, 139, 0.18);
        border-color: var(--teal);
      }

      .service-card-img {
        position: relative;
        width: 100%;
        height: 180px;
        overflow: hidden;
        flex-shrink: 0;
      }

      .service-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .service-card:hover .service-card-img img {
        transform: scale(1.07)
      }

      .service-card-img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(10, 35, 66, 0.05) 0%, rgba(10, 35, 66, 0.40) 100%);
        transition: var(--transition);
      }

      .service-card:hover .service-card-img-overlay {
        background: linear-gradient(to bottom, rgba(10, 35, 66, 0.05) 0%, rgba(27, 153, 139, 0.45) 100%);
      }

      .service-tag {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgba(255, 255, 255, 0.94);
        color: var(--teal-d);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 4px 11px;
        border-radius: 50px;
        backdrop-filter: blur(4px);
        z-index: 1;
      }

      .service-body {
        padding: 22px 24px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .service-icon-wrap {
        width: 38px;
        height: 38px;
        background: var(--gray-lt);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        transition: all var(--transition);
        flex-shrink: 0;
      }

      .service-card:hover .service-icon-wrap {
        background: rgba(27, 153, 139, 0.10);
        border-color: rgba(27, 153, 139, 0.25);
      }

      .service-icon-wrap i {
        font-size: 0.9rem;
        color: var(--navy);
        transition: color var(--transition);
      }

      .service-card:hover .service-icon-wrap i {
        color: var(--teal)
      }

      .service-body h3 {
        font-family: var(--font-head);
        font-size: 1.08rem;
        color: var(--navy);
        margin-bottom: 8px;
        line-height: 1.35;
        font-weight: 600;
      }

      .service-body p {
        font-size: 0.83rem;
        color: var(--text-lt);
        line-height: 1.72;
        flex: 1;
        margin-bottom: 16px;
      }

      .service-body p strong {
        color: var(--navy)
      }

      .service-link {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--teal);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: auto;
        transition: all var(--transition);
      }

      .service-card:hover .service-link {
        gap: 10px;
        color: var(--teal-d)
      }

      /* Featured card */
      .service-card.featured {
        border-color: var(--navy)
      }

      .service-card.featured .service-body {
        background: var(--navy)
      }

      .service-card.featured .service-icon-wrap {
        background: rgba(201, 168, 76, 0.12);
        border-color: rgba(201, 168, 76, 0.22);
      }

      .service-card.featured .service-icon-wrap i {
        color: var(--gold)
      }

      .service-card.featured:hover .service-icon-wrap {
        background: rgba(201, 168, 76, 0.22);
        border-color: rgba(201, 168, 76, 0.35);
      }

      .service-card.featured h3 {
        color: var(--white)
      }

      .service-card.featured p {
        color: rgba(255, 255, 255, 0.60)
      }

      .service-card.featured p strong {
        color: var(--gold)
      }

      .service-card.featured .service-link {
        color: var(--gold)
      }

      .service-card.featured:hover {
        border-color: var(--gold)
      }

      /* ── WHY CHOOSE STRIP ── */
      .why-strip {
        background: var(--off-white);
        padding: 64px 5%;
        border-top: 1px solid var(--border);
      }

      .why-strip-inner {
        max-width: 1100px;
        margin: 0 auto;
      }

      .why-strip h2 {
        font-family: var(--font-head);
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        color: var(--navy);
        margin-bottom: 36px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-align: center;
      }

      .why-strip h2 em {
        color: var(--teal);
        font-style: italic
      }

      .why-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      .why-item {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        padding: 24px 22px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        transition: all var(--transition);
      }

      .why-item:hover {
        border-color: var(--teal);
        box-shadow: var(--shadow-sm)
      }

      .why-icon {
        width: 44px;
        height: 44px;
        background: rgba(27, 153, 139, 0.08);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid rgba(27, 153, 139, 0.15);
      }

      .why-icon i {
        color: var(--teal);
        font-size: 1rem
      }

      .why-body h4 {
        font-family: var(--font-head);
        font-size: 0.95rem;
        color: var(--navy);
        margin-bottom: 5px;
        font-weight: 600;
      }

      .why-body p {
        font-size: 0.82rem;
        color: var(--text-lt);
        line-height: 1.68
      }

      /* ── CTA BANNER ── */
      .services-cta {
        background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 100%);
        padding: 72px 5%;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .services-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(-55deg,
            transparent 0px, transparent 18px,
            rgba(255, 255, 255, 0.015) 18px, rgba(255, 255, 255, 0.015) 20px);
      }

      .services-cta-inner {
        position: relative;
        z-index: 1
      }

      .services-cta h2 {
        font-family: var(--font-head);
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
        color: var(--white);
        margin-bottom: 14px;
        font-weight: 700;
      }

      .services-cta h2 em {
        color: var(--gold);
        font-style: italic
      }

      .services-cta p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.60);
        max-width: 500px;
        margin: 0 auto 36px;
        line-height: 1.75;
      }

      .cta-btns {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap
      }

      .btn-primary {
        background: var(--teal);
        color: var(--white);
        padding: 14px 32px;
        border-radius: 50px;
        font-family: var(--font-body);
        font-size: 0.92rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        transition: all var(--transition);
        border: none;
        cursor: pointer;
      }

      .btn-primary:hover {
        background: var(--teal-d);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(27, 153, 139, 0.35);
        color: var(--white);
      }

      .btn-ghost {
        background: transparent;
        color: var(--white);
        padding: 13px 30px;
        border-radius: 50px;
        font-family: var(--font-body);
        font-size: 0.92rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1.5px solid rgba(255, 255, 255, 0.35);
        transition: all var(--transition);
      }

      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.65);
        color: var(--white);
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 1024px) {
        .services-grid {
          grid-template-columns: repeat(2, 1fr)
        }

        .why-items {
          grid-template-columns: repeat(2, 1fr)
        }

        .stats-strip-inner {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px
        }

        .stat-item {
          border-right: none
        }
      }

      @media (max-width: 640px) {
        .services-grid {
          grid-template-columns: 1fr
        }

        .why-items {
          grid-template-columns: 1fr
        }

        .stats-strip-inner {
          grid-template-columns: repeat(2, 1fr)
        }

        .filter-section {
          top: 0
        }

        .cta-btns {
          flex-direction: column;
          align-items: center
        }
      }