/* ══════════════════════════════════════
       PAGE-LEVEL CSS VARIABLES
    ══════════════════════════════════════ */
    :root {
      --green:      #a8e832;
      --dark:       #0a0a0f;
      --white:      #ffffff;
      --navy:       #11222a;
      --navy-deep:  #0c1a20;
    }

    [data-theme="light"] {
      --bg:         #f1f5f9;
      --bg2:        #ffffff;
      --text:       #0f172a;
      --text2:      #475569;
      --text3:      #94a3b8;
      --border:     rgba(15,23,42,0.11);
      --card-bg:    #ffffff;
    }

    [data-theme="dark"] {
      --bg:         #0a0a0f;
      --bg2:        #0f0f18;
      --text:       #f0eee8;
      --text2:      #888;
      --text3:      #555;
      --border:     rgba(255,255,255,0.07);
      --card-bg:    #13131f;
    }

    /* ══════════════════════════════════════
       PAGE HERO
    ══════════════════════════════════════ */
    .page-hero {
      padding-top: 220px;
      padding-bottom: 52px;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .page-hero::before {
      content: 'SERVICES';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(6rem, 14vw, 14rem);
      color: transparent;
      -webkit-text-stroke: 1px var(--border);
      pointer-events: none;
      white-space: nowrap;
      line-height: 1;
    }

    [data-theme="dark"] .page-hero::before {
      -webkit-text-stroke: 1.5px #2a2a3a;
    }

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

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 16px;
    }

    .hero-eyebrow span {
      display: inline-block;
      width: 28px;
      height: 2px;
      background: var(--green);
    }

    .page-hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2rem, 8vw, 7.5rem);
      line-height: .88;
      letter-spacing: .01em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 10px;
    }

    /* ── italic accent (orange) inside hero heading ── */
    .page-hero h1 em {
      font-style: normal;
      font-family: 'Outfit', sans-serif;
      color: var(--accent2);
      text-transform: uppercase;
      font-weight: 700;
    }

    .page-hero-sub {
      font-size: 0.97rem;
      color: var(--text2);
      max-width: 540px;
      line-height: 1.7;
      margin-top: 16px;
    }

    /* ── Hero stats row ── */
    .hero-stats-row {
      display: flex;
      gap: 40px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .hstat {
      display: flex;
      flex-direction: column;
    }

    .hstat strong {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem;
      color: var(--text);
      line-height: 1;
    }

    .hstat span {
      font-size: 0.78rem;
      color: var(--text3);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 600;
    }

    .hero-divider {
      width: 1px;
      height: 44px;
      background: var(--border);
      align-self: center;
    }

    /* ══════════════════════════════════════
       SECTION & LAYOUT BASE
    ══════════════════════════════════════ */
    .section     { padding: 70px 0; }
    .section-alt { background: var(--bg2); }

    .centered { text-align: center; }
    .centered .sec-sub { margin-left: auto; margin-right: auto; }

    /* ── Shared eyebrow label ── */
    .sec-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 14px;
    }

    .sec-eyebrow span {
      display: inline-block;
      width: 22px;
      height: 2px;
      background: var(--green);
    }

    /* ── Shared section heading ── */
    .sec-heading {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text);
      line-height: 1.05;
    }

    /* ── italic accent (orange) inside section headings ── */
    .sec-heading em {
      font-style: normal;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--accent2);
    }

    .sec-sub {
      font-size: 0.97rem;
      color: var(--text2);
      line-height: 1.7;
      max-width: 560px;
      margin-top: 12px;
    }

    /* ══════════════════════════════════════
       ABOUT SERVICES — intro split
    ══════════════════════════════════════ */
    .intro-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }

    @media (max-width: 900px) {
      .intro-split { grid-template-columns: 1fr; gap: 40px; }
    }

    .intro-img-main {
      width: 100%;
      height: 440px;
      object-fit: cover;
      border-radius: 4px;
      display: block;
    }

    .intro-content p {
      font-size: 0.97rem;
      color: var(--text2);
      line-height: 1.78;
      margin-bottom: 24px;
    }

    /* ── CTA button override for dark-on-green style ── */
    .intro-content .btn-primary,
    .intro-content a.btn-primary {
      background: var(--dark) !important;
      color: var(--green) !important;
      border-radius: 4px !important;
      font-size: 0.85rem !important;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    [data-theme="dark"] .intro-content .btn-primary,
    [data-theme="dark"] .intro-content a.btn-primary {
      background: var(--green) !important;
      color: var(--dark) !important;
    }

    /* ══════════════════════════════════════
       THREE PILLARS — approach section
    ══════════════════════════════════════ */

    /* "What We Can Do For You" intro header */
    .svc-intro-header { padding: 60px 0 40px; }
    .svc-intro-title {
      font-size: clamp(2.8rem, 7vw, 5.5rem);
      line-height: 1;
      letter-spacing: 2px;
    }

    /* dramatic two-line heading: "THREE PILLARS OF" + "EXCELLENCE" in orange */
    .pillars-big-heading {
      font-size: clamp(3rem, 7.5vw, 6rem);
      line-height: 1;
      letter-spacing: 2px;
    }
    .pillars-big-heading em {
      display: block;
      font-size: 1.08em;
      text-transform: uppercase;
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: var(--border);
    }

    @media (max-width: 860px) {
      .pillars-grid { grid-template-columns: 1fr; }
    }

    .pillar-box {
      background: var(--card-bg);
      padding: 48px 36px;
      position: relative;
      overflow: hidden;
      transition: background 0.3s;
    }

    .pillar-box::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 4px;
      background: var(--green);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pillar-box:hover::before { transform: scaleX(1); }

    .pillar-icon {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--green);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: var(--dark);
      margin-bottom: 24px;
    }

    .pillar-box h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 12px;
    }

    .pillar-lines {
      list-style: none;
      display: flex; flex-direction: column;
      gap: 10px;
    }

    .pillar-lines li {
      font-size: 0.88rem;
      color: var(--text2);
      line-height: 1.45;
      display: flex; align-items: flex-start; gap: 10px;
    }

    .pillar-lines li::before {
      content: '—';
      color: var(--green);
      font-weight: 800;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════
       7 SERVICE CARDS — what we offer
    ══════════════════════════════════════ */
    .services-section {
      padding: 72px 0 48px;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .services-section::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 20% 50%, rgba(168,232,50,0.04) 0%, transparent 60%);
      pointer-events: none;
    }

    .services-header { text-align: center; margin-bottom: 40px; }

    .svc-grid-top {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 20px;
    }

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

    @media (max-width: 1024px) {
      .svc-grid-top    { grid-template-columns: repeat(2, 1fr); }
      .svc-grid-bottom { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
      .svc-grid-top    { grid-template-columns: 1fr; }
      .svc-grid-bottom { grid-template-columns: 1fr; }
    }

    .svc-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 340px;
      display: block;
      cursor: pointer;
      text-decoration: none;
    }

    .svc-grid-bottom .svc-card { height: 380px; }

    .svc-bg {
      position: absolute; inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
      filter: brightness(0.45) saturate(0.9);
    }

    .svc-card:hover .svc-bg {
      transform: scale(1.08);
      filter: brightness(0.25) saturate(0.7);
    }

    .svc-gradient {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.4) 45%, transparent 100%);
      transition: opacity 0.4s;
    }

    .svc-card:hover .svc-gradient { opacity: 0.85; }

    .svc-accent {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--green);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
    }

    .svc-card:hover .svc-accent { transform: scaleY(1); }

    .svc-content {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      justify-content: flex-end;
      padding: 28px 26px;
      z-index: 2;
    }

    .svc-tag {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 8px;
      opacity: 0.9;
    }

    .svc-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.55rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .svc-desc {
      font-size: 0.82rem;
      color: rgba(255,255,255,0);
      line-height: 1.6;
      max-width: 280px;
      transform: translateY(12px);
      transition: color 0.35s 0.05s, transform 0.35s 0.05s;
    }

    .svc-card:hover .svc-desc {
      color: rgba(255,255,255,0.72);
      transform: translateY(0);
    }

    .svc-explore {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 16px;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--green);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s 0.1s, transform 0.35s 0.1s;
    }

    .svc-explore i {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--green);
      color: var(--dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem;
      transition: transform 0.2s;
    }

    .svc-card:hover .svc-explore           { opacity: 1; transform: translateY(0); }
    .svc-card:hover .svc-explore i         { transform: rotate(-45deg); }

    .svc-num-badge {
      position: absolute;
      top: 20px; right: 20px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 3.5rem;
      line-height: 1;
      color: rgba(255,255,255,0.07);
      letter-spacing: 2px;
      z-index: 2;
      transition: color 0.4s;
      pointer-events: none;
    }

    .svc-card:hover .svc-num-badge { color: rgba(168,232,50,0.12); }

    /* ══════════════════════════════════════
       PROCESS — four-step numbered row
    ══════════════════════════════════════ */
    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      position: relative;
    }

    .process-steps::before {
      content: '';
      position: absolute;
      top: 36px; left: 10%; right: 10%;
      height: 2px;
      background: var(--border);
      z-index: 0;
    }

    @media (max-width: 860px) {
      .process-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .process-steps::before { display: none; }
    }

    @media (max-width: 480px) {
      .process-steps { grid-template-columns: 1fr; }
    }

    .process-step {
      position: relative; z-index: 1;
      padding: 0 16px;
      text-align: center;
    }

    .step-num {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      color: var(--green);
      transition: background 0.3s, border-color 0.3s;
    }

    .process-step:hover .step-num {
      background: var(--green);
      border-color: var(--green);
      color: var(--dark);
    }

    .process-step h4 {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .process-step p {
      font-size: 0.82rem;
      color: var(--text2);
      line-height: 1.6;
    }

    /* ══════════════════════════════════════
       FAQ — accordion list
    ══════════════════════════════════════ */
    .faq-list { max-width: 820px; margin: 0 auto; }

    .faq-item { border-bottom: 1px solid var(--border); overflow: hidden; }

    .faq-q {
      width: 100%;
      background: none; border: none;
      padding: 22px 0;
      display: flex; justify-content: space-between; align-items: center;
      gap: 16px; cursor: pointer; text-align: left;
    }

    .faq-q span {
      font-size: 0.98rem; font-weight: 600;
      color: var(--text); line-height: 1.4;
    }

    .faq-icon {
      flex-shrink: 0;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--bg2);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      color: var(--green);
      transition: background 0.25s, transform 0.35s;
    }

    .faq-item.open .faq-icon {
      background: var(--green);
      color: var(--dark);
      transform: rotate(45deg);
    }

    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
    }

    .faq-item.open .faq-a { max-height: 260px; }

    .faq-a p {
      font-size: 0.9rem; color: var(--text2);
      line-height: 1.72; padding-bottom: 22px;
    }

    /* ══════════════════════════════════════
       CONTACT BAND — green CTA strip
    ══════════════════════════════════════ */
    .contact-band {
      background: var(--green);
      padding: 40px;
      text-align: center;
    }

    .contact-band h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.5rem, 6vw, 5.5rem);
      text-transform: uppercase; letter-spacing: 2px;
      color: var(--dark); line-height: 1; margin-bottom: 16px;
    }

    .contact-band h2 em {
      font-style: normal;
      font-family: 'Outfit', sans-serif;
      text-transform: uppercase;
    }

    .contact-band p {
      font-size: 1rem;
      color: rgba(10,10,15,0.6);
      margin-bottom: 36px;
    }

    .contact-band .btn-dark {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--dark); color: var(--green);
      font-size: 0.88rem; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      padding: 16px 32px; border-radius: 4px;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .contact-band .btn-dark:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    }

    /* ══════════════════════════════════════
       RESPONSIVE — mobile header fix
    ══════════════════════════════════════ */
    @media (max-width: 768px) {
      .site-logo-bar       { height: 70px !important; }
      .site-logo-bar img   { height: 54px !important; }
      .navbar              { top: 70px !important; }
      .page-hero           { padding-top: 155px !important; padding-bottom: 36px; }
      .hero-stats-row      { gap: 20px; }
    }

    @media (max-width: 480px) {
      .page-hero           { padding-top: 145px !important; }
      .hero-stats-row      { flex-direction: column; gap: 16px; }
      .hero-divider        { display: none; }
    }

    /* ══════════════════════════════════════
       PREMIUM LIGHT MODE OVERRIDES
    ══════════════════════════════════════ */

    /* Page hero — subtle gradient depth */
    [data-theme="light"] .page-hero {
      background: linear-gradient(180deg, #f1f5f9 0%, #e8eef8 100%);
    }

    /* Pillar boxes — elevated cards */
    [data-theme="light"] .pillar-box {
      box-shadow: 0 2px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    }
    [data-theme="light"] .pillar-box:hover {
      box-shadow: 0 8px 28px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
      background: #fafcff;
    }

    /* Service cards — lighter border in light mode */
    [data-theme="light"] .svc-card {
      box-shadow: 0 4px 20px rgba(15,23,42,0.10);
    }

    /* Process steps — better circle styling */
    [data-theme="light"] .step-num {
      background: #ffffff;
      border-color: rgba(15,23,42,0.14);
      box-shadow: 0 2px 8px rgba(15,23,42,0.07);
    }

    /* FAQ items — sharper separator */
    [data-theme="light"] .faq-item {
      border-bottom-color: rgba(15,23,42,0.10);
    }
    [data-theme="light"] .faq-icon {
      background: #f1f5f9;
      border-color: rgba(15,23,42,0.12);
    }

    /* Intro image — polished border */
    [data-theme="light"] .intro-img-main {
      box-shadow: 0 8px 32px rgba(15,23,42,0.12);
    }

    /* Section alt background */
    [data-theme="light"] .section-alt {
      background: #ffffff;
    }

/* ══════════════════════════════════════
   SERVICES ZIGZAG TIMELINE
══════════════════════════════════════ */

.svc-timeline-section { padding: 20px 0 60px; }

.svc-timeline {
  position: relative;
  margin: 8px 0 0;
}

.stl-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--accent2) 4%, var(--accent2) 96%, transparent);
  z-index: 0;
}

.stl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 44px;
}

.stl-card {
  flex: 0 0 calc(50% - 36px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 22px;
  position: relative;
  z-index: 1;
  transition: border-color .25s, box-shadow .25s;
}
.stl-card:hover {
  border-color: rgba(245, 109, 67, 0.35);
  box-shadow: 0 8px 32px rgba(245, 109, 67, 0.12);
}

.stl-void {
  flex: 0 0 calc(50% - 36px);
}

.stl-node {
  flex: 0 0 72px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 24px;
  position: relative;
  z-index: 2;
}
.stl-node::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent2);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent2);
  display: block;
  flex-shrink: 0;
}

.stl-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.stl-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(245, 109, 67, 0.12);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.stl-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.5px;
  color: var(--text);
}

.stl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 16px;
}
.stl-list li {
  font-size: 0.84rem;
  color: var(--text2);
  padding: 3px 0 3px 16px;
  position: relative;
  break-inside: avoid;
  line-height: 1.5;
}
.stl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: 0.7;
}

[data-theme="light"] .stl-node::before { border-color: var(--bg); }

@media (max-width: 768px) {
  .stl-spine { display: none; }
  .stl-item { flex-direction: column !important; margin-bottom: 20px; }
  .stl-void, .stl-node { display: none; }
  .stl-card { flex: 0 0 auto; width: 100%; border-radius: 12px; padding: 20px; }
  .stl-list { columns: 1; }
}

/* --- MOBILE FIX 11 --- */
@media (max-width: 640px) {
  .service-hero {
    padding-top: 160px !important;
    padding-bottom: 50px !important;
    min-height: auto !important;
  }
  .service-hero h1 {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
  }
  .services-cat-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .svc-cat-card {
    padding: 28px 20px !important;
    min-height: auto !important;
  }
}

@media (max-width: 480px) {
  .service-hero {
    padding-top: 140px !important;
  }
}

/* === AGGRESSIVE MOBILE COMPRESSION === */
@media (max-width: 1024px) {
  body[data-page="services"] .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
  }
  body[data-page="services"] .hide-on-mobile {
    display: none;
  }
  body[data-page="services"] .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  body[data-page="services"] .footer-brand p {
    margin: 0;
  }
  body[data-page="services"] .footer-list a {
    min-height: 24px;
    font-size: 0.75rem;
  }
  body[data-page="services"] .footer-head {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }
  body[data-page="services"] .svc-card {
    height: 120px;
    min-height: 120px;
    border-radius: 8px;
  }
  body[data-page="services"] .svc-card h3 {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  body[data-page="services"] .svc-content {
    padding: 12px;
  }
  body[data-page="services"] .flip-cards-grid {
    gap: 10px;
    padding: 0 4px;
  }
  body[data-page="services"] .flip-card {
    height: auto;
    border-radius: 8px;
  }
  body[data-page="services"] .flip-card-inner {
    border-radius: 8px;
  }
  body[data-page="services"] .flip-face-img {
    height: 60px;
  }
  body[data-page="services"] .flip-face-img .face-overlay {
    padding: 6px 10px;
  }
  body[data-page="services"] .flip-face-img .face-num {
    font-size: 0.6rem;
    margin-bottom: 2px;
  }
  body[data-page="services"] .flip-face-img .face-title {
    font-size: 0.95rem;
  }
  body[data-page="services"] .flip-front-icon {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }
  body[data-page="services"] .flip-face-text {
    padding: 10px 10px 12px;
    border-radius: 0 0 8px 8px;
  }
  body[data-page="services"] .flip-face-text p {
    font-size: 0.75rem;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  body[data-page="services"] .flip-face-text .face-link {
    padding: 6px 10px;
    font-size: 0.75rem;
    min-height: 32px;
    margin: 0;
  }
  body[data-page="services"] section:not([class*="-hero"]):not(.hero) {
    padding: 30px 0;
  }
  body[data-page="services"] .sec-heading {
    font-size: 1.5rem;
    margin-bottom: 12px;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.1;
  }
  body[data-page="services"] .sec-sub {
    font-size: 0.85rem;
    margin-bottom: 20px;
  }
}