/* =========================================================

   SERVICES.CSS — FINAL CLEAN LOCKED VERSION

   Uses design-system.css as master visual reference.

   Page CSS controls Services-specific layout only.

=========================================================

01. Page Base

02. Hero Section

03. Hero Animation

04. Our Approach Section

05. Main Services Area

06. Services Cards

07. Service Detail Panel

08. Comparison Section + Cards

09. Comparison Popup

10. iPad / Tablet Layout

11. Mobile Layout

12. Laptop / Desktop Layout

========================================================= */

/* =========================================================

   01. PAGE BASE

========================================================= */

body.services-page {

  margin: 0;

  padding: 0;

  background: var(--brand-cream);

  color: var(--brand-white);

  overflow-x: hidden;

  font-family: var(--font-heading);

}

.services-page *,

.services-page *::before,

.services-page *::after {

  box-sizing: border-box;

}

.services-page img {

  max-width: 100%;

  display: block;

}

.services-page a {

  text-decoration: none;

}

/* =========================================================

   02. HERO SECTION

========================================================= */

.services-hero {

  position: relative;

  width: 100%;

  height: 400px;

  overflow: hidden;

  background-image: url('services-hero-dark.png');

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

}

.services-hero-content {

  position: absolute;

  left: 5.5%;

  top: 58%;

  transform: translateY(-50%);

  z-index: 2;

  max-width: 760px;

}

.services-hero-script {

  margin: 0 0 var(--title-to-line-gap);

  opacity: 0;

}

.services-hero .hero-title {

  margin: 0;

  max-width: 720px;

  color: var(--hero-title-color-light);

  opacity: 0;

  text-shadow: var(--hero-title-text-shadow-light);

}

/* =========================================================

   03. HERO ANIMATION

========================================================= */

.services-hero.animate .services-hero-script {

  animation: servicesScriptReveal 3.8s ease forwards;

}

.services-hero.animate .hero-title {

  animation: servicesHeroDrop 2.8s ease forwards;

  animation-delay: 2.2s;

}

@keyframes servicesScriptReveal {

  0% {

    opacity: 0;

    transform:

      translateX(var(--hero-script-align-x-desktop))

      translateY(14px)

      scaleY(var(--script-scale-y))

      scaleX(var(--script-scale-x))

      skewX(var(--script-skew-x))

      rotate(var(--script-rotate));

    filter: blur(3px);

  }

  100% {

    opacity: 0.94;

    transform:

      translateX(var(--hero-script-align-x-desktop))

      translateY(0)

      scaleY(var(--script-scale-y))

      scaleX(var(--script-scale-x))

      skewX(var(--script-skew-x))

      rotate(var(--script-rotate));

    filter: blur(0);

  }

}

@keyframes servicesHeroDrop {

  0% {

    opacity: 0;

    transform: translateY(55px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

/* =========================================================

   04. OUR APPROACH SECTION

========================================================= */

.services-approach-section {

  background: var(--brand-cream);

  padding: 78px var(--page-padding-desktop) 84px;

}

.services-approach-inner {

  max-width: 980px;

}

.services-approach-script {

  margin: 0 0 var(--script-to-title-gap);

  opacity: 0.94;

}

.services-approach-inner h2 {

  margin: 0;

  color: var(--section-title-color-blue);

}

.services-approach-line {

  margin: var(--underline-gap-top) 0 var(--underline-gap-bottom);

}

.services-approach-text {

  max-width: var(--container-reading);

  margin: 0;

  color: var(--body-copy-color-dark);

}

/* =========================================================

   05. MAIN SERVICES AREA

========================================================= */

.services-main {

  background: var(--brand-steel-blue);

  color: var(--brand-white);

  padding: 0 0 72px;

}

.services-grid-section {

  padding: 64px 5.5% 56px;

}

.services-section-heading {

  max-width: var(--container-standard);

  margin: 0 auto var(--section-heading-bottom-gap);

}

.services-section-heading p,

.comparison-title p {

  margin: 0 0 18px;

  opacity: 0.94;

}

.services-section-heading h2,

.comparison-title h2 {

  margin: 0;

  color: var(--section-title-color-light);

}

.services-heading-line,

.comparison-heading-line {

  margin-top: var(--underline-gap-top);

  margin-bottom: 0;

}

/* =========================================================

   06. SERVICES CARDS

========================================================= */

.services-interactive {

  max-width: var(--container-standard);

  margin: 0 auto;

  display: block;

}

.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--card-gap-desktop);

}

.service-card {

  width: 100%;

  min-height: 125px;

  padding: 0 62px 0 var(--card-padding-desktop);

  border: 1px solid var(--card-dark-border);

  background: transparent;

  color: var(--brand-white);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  position: relative;

  text-align: left;

  transition:

    background 0.28s ease,

    border-color 0.28s ease,

    transform 0.28s ease;

}

.service-card:hover {

  background: var(--card-dark-hover-bg);

  border-color: var(--card-dark-border-hover);

  transform: translateY(-2px);

}

.service-card h3 {

  margin: 0;

  color: var(--card-title-color-light);

}

.service-card span,

.mobile-comparison-card span {

  position: absolute;

  right: 28px;

  top: 50%;

  width: 18px;

  height: 18px;

  transform: translateY(-50%);

}

.service-card span::before,

.mobile-comparison-card span::before {

  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  border-top: 1.5px solid var(--brand-gold-script);

  border-right: 1.5px solid var(--brand-gold-script);

  transform: rotate(45deg);

  right: 3px;

  top: 4px;

}

/* =========================================================

   07. SERVICE DETAIL PANEL

========================================================= */

.services-interactive.panel-open {

  display: flex;

  gap: 34px;

  align-items: flex-start;

}

.services-interactive.panel-open .services-grid {

  grid-template-columns: repeat(2, 1fr);

  max-width: 720px;

}

.service-panel {

  display: none;

  width: 430px;

  max-width: 430px;

  height: 650px;

  overflow-y: auto;

  position: relative;

  padding: 32px;

  background: var(--popup-bg);

  color: var(--popup-text);

  border: 1px solid var(--card-dark-border-hover);

  box-shadow: 0 24px 58px rgba(5,22,38,0.22);

}

.service-panel img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  margin-bottom: 26px;

}

.service-panel h2 {

  margin: 0 0 18px;

  color: var(--popup-title-color-dark);

  font-family: var(--popup-title-font-family);

  font-size: var(--popup-title-size-desktop);

  line-height: var(--popup-title-line-height);

  font-weight: var(--popup-title-font-weight);

  letter-spacing: var(--popup-title-letter-spacing);

}

.service-panel h3 {

  margin: 28px 0 12px;

  color: var(--popup-title-color-dark);

  font-family: var(--popup-title-font-family);

  font-size: 20px;

  line-height: 1.2;

  font-weight: 400;

}

.service-panel p,

.service-panel li {

  color: var(--body-copy-color-muted);

  font-family: var(--body-copy-font-family);

  font-size: var(--body-copy-font-size-mobile);

  line-height: 1.78;

  font-weight: var(--body-copy-font-weight);

}

.service-panel ul {

  padding-left: 20px;

}

.service-close,

.comparison-close {

  position: absolute;

  top: 10px;

  right: 16px;

  border: none;

  background: transparent;

  color: var(--popup-title-color-dark);

  font-size: 36px;

  line-height: 1;

  cursor: pointer;

}

.panel-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 22px;

  min-width: 230px;

  height: var(--button-height);

  padding: 0 24px;

  background: var(--brand-gold);

  color: var(--brand-white);

  font-family: var(--button-font-family);

  font-size: var(--button-font-size);

  line-height: 1;

  font-weight: var(--button-font-weight);

  letter-spacing: var(--button-letter-spacing);

  text-transform: uppercase;

}

.service-panel::-webkit-scrollbar {

  width: 7px;

}

.service-panel::-webkit-scrollbar-thumb {

  background: rgba(189,138,46,0.42);

}

/* =========================================================

   08. COMPARISON SECTION + CARDS

========================================================= */

.comparison-section {

  max-width: var(--container-standard);

  margin: 0 auto;

  padding: 10px 0 0;

}

.comparison-title {

  margin: 0 0 32px;

}

.mobile-comparison-cards {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--card-gap-desktop);

}

.mobile-comparison-card {

  min-height: 110px;

  padding: 0 62px 0 var(--card-padding-desktop);

  border: 1px solid var(--card-dark-border);

  background: transparent;

  color: var(--brand-white);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  position: relative;

  text-align: left;

  transition:

    background 0.28s ease,

    border-color 0.28s ease,

    transform 0.28s ease;

}

.mobile-comparison-card:hover {

  background: var(--card-dark-hover-bg);

  border-color: var(--card-dark-border-hover);

  transform: translateY(-2px);

}

.mobile-comparison-card h3 {

  margin: 0;

  color: var(--card-title-color-light);

}

/* =========================================================

   09. COMPARISON POPUP

========================================================= */

.comparison-overlay {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 18000;

  background: var(--popup-overlay-bg);

  align-items: center;

  justify-content: center;

  padding: 26px;

}

.comparison-popup {

  position: relative;

  width: 100%;

  max-width: 460px;

  max-height: 82vh;

  overflow-y: auto;

  padding: 34px 32px;

  background: var(--popup-bg);

  color: var(--popup-text);

  box-shadow: var(--popup-shadow);

}

.comparison-popup h2 {

  margin: 0 0 20px;

  color: var(--popup-title-color-dark);

  font-family: var(--popup-title-font-family);

  font-size: var(--popup-title-size-desktop);

  line-height: var(--popup-title-line-height);

  font-weight: var(--popup-title-font-weight);

  letter-spacing: var(--popup-title-letter-spacing);

}

.comparison-popup ul {

  margin: 0;

  padding-left: 20px;

}

.comparison-popup li {

  color: var(--body-copy-color-muted);

  font-family: var(--body-copy-font-family);

  font-size: var(--body-copy-font-size-mobile);

  line-height: 1.78;

  font-weight: var(--body-copy-font-weight);

  margin-bottom: 8px;

}

/* =========================================================

   10. iPAD / TABLET LAYOUT

========================================================= */

@media (min-width: 701px) and (max-width: 1180px) {

  .services-hero {

    height: 400px;

  }

  .services-hero-content {

    left: 5%;

    top: 66%;

    max-width: 620px;

  }

  @keyframes servicesScriptReveal {

    0% {

      opacity: 0;

      transform:

        translateX(var(--hero-script-align-x-tablet))

        translateY(14px)

        scaleY(var(--script-scale-y))

        scaleX(var(--script-scale-x))

        skewX(var(--script-skew-x))

        rotate(var(--script-rotate));

      filter: blur(3px);

    }

    100% {

      opacity: 0.94;

      transform:

        translateX(var(--hero-script-align-x-tablet))

        translateY(0)

        scaleY(var(--script-scale-y))

        scaleX(var(--script-scale-x))

        skewX(var(--script-skew-x))

        rotate(var(--script-rotate));

      filter: blur(0);

    }

  }

  .services-approach-section {

    padding: var(--section-medium-tablet) var(--page-padding-desktop) 74px;

  }

  .services-main {

    padding-bottom: 64px;

  }

  .services-grid-section {

    padding: 56px var(--page-padding-tablet) 48px;

  }

  .services-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: var(--card-gap-tablet);

  }

  .service-card {

    min-height: 112px;

    padding: 0 56px 0 24px;

  }

  .services-interactive.panel-open {

    display: flex;

    gap: 28px;

    align-items: flex-start;

  }

  .services-interactive.panel-open .services-grid {

    max-width: 620px;

    grid-template-columns: repeat(2, 1fr);

  }

  .service-panel {

    width: 390px;

    max-width: 390px;

    height: 620px;

    max-height: none;

    margin-top: 0;

  }

  .comparison-section {

    width: 90%;

  }

}

/* =========================================================

   11. MOBILE LAYOUT

========================================================= */

@media (max-width: 700px) {

  .services-hero {

    height: 400px;

    background-position: 63% center;

  }

  .services-hero-content {

    left: 6%;

    right: 6%;

    top: 63%;

    max-width: none;

  }

  .services-hero-script {

    margin-bottom: 0;

    white-space: nowrap;

  }

  @keyframes servicesScriptReveal {

    0% {

      opacity: 0;

      transform:

        translateX(var(--hero-script-align-x-mobile))

        translateY(-14px)

        scaleY(var(--script-scale-y))

        scaleX(var(--script-scale-x))

        skewX(var(--script-skew-x))

        rotate(var(--script-rotate));

      filter: blur(3px);

    }

    100% {

      opacity: 0.94;

      transform:

        translateX(var(--hero-script-align-x-mobile))

        translateY(-28px)

        scaleY(var(--script-scale-y))

        scaleX(var(--script-scale-x))

        skewX(var(--script-skew-x))

        rotate(var(--script-rotate));

      filter: blur(0);

    }

  }

  .services-hero .hero-title {

    margin-top: 30px;

    max-width: 340px;

  }

  .services-approach-section {

    padding: var(--section-medium-mobile) var(--page-padding-mobile) 58px;

  }

  .services-approach-script {

    margin-bottom: 6px;

  }

  .services-approach-line {

    margin: var(--title-to-line-gap) 0 26px;

  }

  .services-main {

    padding-bottom: 52px;

  }

  .services-grid-section {

    padding: 48px 6% 42px;

  }

  .services-section-heading {

    margin-bottom: var(--section-heading-bottom-gap-mobile);

  }

  .services-section-heading p,

  .comparison-title p {

    margin-bottom: 14px;

  }

  .services-grid {

    grid-template-columns: 1fr;

    gap: var(--card-gap-mobile);

  }

  .service-card,

  .mobile-comparison-card {

    min-height: 88px;

    padding: 0 54px 0 var(--card-padding-mobile);

  }

  .service-card span,

  .mobile-comparison-card span {

    right: 22px;

  }

  .services-interactive.panel-open {

    display: block;

  }

  .services-interactive.panel-open .services-grid {

    grid-template-columns: 1fr;

  }

  .service-panel {

    position: fixed;

    top: 50%;

    left: 50%;

    width: 88%;

    max-width: 410px;

    max-height: 82vh;

    height: auto;

    transform: translate(-50%, -50%);

    z-index: 20000;

    padding: 26px 24px;

  }

  .service-panel img {

    height: 170px;

  }

  .service-panel h2,

  .comparison-popup h2 {

    font-size: var(--popup-title-size-mobile);

  }

  .comparison-section {

    width: 88%;

    padding-top: 0;

  }

  .comparison-title {

    margin-bottom: 24px;

  }

  .mobile-comparison-cards {

    grid-template-columns: 1fr;

    gap: var(--card-gap-mobile);

  }

  .comparison-popup {

    max-width: 390px;

    padding: 28px 24px;

  }

  .services-page .site-footer .footer-logo img {

    width: 190px !important;

    max-width: none !important;

    margin: 0 auto 22px auto !important;

  }

  .services-page .site-footer .footer-brand {

    max-width: 280px !important;

    margin: 0 auto !important;

    text-align: center !important;

  }

  .services-page .site-footer .footer-cta {

    width: 76%;

    max-width: 540px;

    margin-left: auto;

    margin-right: auto;

  }

}

/* =========================================================

   12. LAPTOP / DESKTOP LAYOUT

========================================================= */

@media (min-width: 1181px) {

  .services-hero {

    background-size: 100% auto;

    background-position: center -42px;

    background-repeat: no-repeat;

    background-color: #0b0b0b;

  }

  .services-main {

    padding-bottom: 72px;

  }

  .services-approach-section {

    padding-top: 78px;

    padding-bottom: 84px;

  }

}