/* Services list (home page "Why us" / service overview) — brand palette
   (2026-05-08). All red accents → brand-green; text → dark on mint;
   image-mask hover-reveal stays but the placeholder background flips
   from dark grey #191919 to soft mint card-soft so the empty strip
   doesn't read as a foreign dark band on a light page. */

:root {
  --services-accent: #21A038;        /* was #a5121a red */
  --services-accent-hover: #1B8E2F;
  --services-accent-soft: #1B7A2C;
  --underline-thick: 0.15em;
  --underline-radius: 0.075em;
  --underline-duration: 0.22s;
}

.services-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px var(--site-gutter-x-desktop, 20px);
  box-sizing: border-box;
}

.services-header {
  max-width: 100%;
  margin-bottom: 30px;
}

.services-heading {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--services-accent);
  margin: 0;
  line-height: 1.2;
}

.services-heading span {
  font-weight: 700;
  letter-spacing: 1.2px;
}

.service-list {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  padding: 0 var(--site-gutter-x-desktop, 20px);
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 46%);
  align-items: flex-start;
  transition: box-shadow 0.3s;
  position: relative;
  gap: clamp(30px, 6vw, 80px);
  padding: 0;
}

.service-row:focus-visible {
  outline: 2px solid rgba(33, 160, 56, 0.85);
  outline-offset: 4px;
}

.service-divider {
  height: 1px;
  background: var(--brand-orange);
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
}

.service-info {
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-title {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  margin: 0;
  letter-spacing: clamp(0.3px, 0.05vw, 0.5px);
  line-height: 1.2;
  padding: clamp(6px, 1vw, 12px) 0 0 0;
}

/* The expand/collapse animation for `.service-desc`, `.learn-more`,
   and `.service-image-mask` is driven by services-section.js via the
   Web Animations API — see setupRowAccordion(). CSS here describes
   only the steady-state look of each variant ("collapsed" by default;
   "expanded" when the row carries `.is-expanded`). The previous
   approach used `transition: max-height 0.45s ...` on each property,
   which had a "dead phase" — max-height was clamp(120px, 20vw, 200px)
   but actual content height is often less, so the latter half of the
   transition advanced the property past the visible clipping point
   and produced no movement on screen. JS measures real content
   heights at hover-time and animates `height` between exact pixels. */
.service-desc {
  font-size: clamp(15px, 1.7vw, 19px);
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  margin: 0;
  max-width: 100%;
  line-height: 1.55;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}

.service-row.is-expanded .service-desc {
  pointer-events: auto;
  /* opacity, height and margin-top set inline by JS during animation */
}

/* Learn-more link — black text + black animated underline + black arrow.
   Per design direction: keeps the CTA grounded against the colorful
   gradient body even when the surrounding service-title and -desc go
   white. Black on the gradient passes WCAG AA on every region except
   the very middle of the saturated green (which is rare for the link
   to land on, since service-rows have spacing). */
.service-list .learn-more,
.service-list .learn-more:link,
.service-list .learn-more:visited,
.service-list .learn-more:hover,
.service-list .learn-more:focus-visible {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--brand-orange) !important;
  text-decoration: none;
  line-height: 1.1;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.service-row.is-expanded .learn-more {
  pointer-events: auto;
  /* opacity, height and margin-top set inline by JS during animation */
}

.learn-more__text {
  position: relative;
  display: inline-block;
  padding-bottom: clamp(0.25em, 0.35vw, 0.35em);
}

.learn-more__text::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--underline-thick);
  border-radius: var(--underline-radius);
  background: var(--brand-orange) !important;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
  transition:
    transform 0.24s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.learn-more:hover .learn-more__text::after,
.learn-more:focus-visible .learn-more__text::after {
  transform: scaleX(1);
}

.learn-more__arrow {
  display: inline-flex;
  align-items: baseline;
  font-size: 1em;
  line-height: 1;
  color: var(--brand-orange) !important;
  transition: transform 0.24s cubic-bezier(.22,1,.36,1);
  margin-left: 0.1em;
}

.learn-more__arrow svg {
  display: block;
  overflow: visible;
  color: currentColor;
}

.learn-more:hover .learn-more__arrow,
.learn-more:focus-visible .learn-more__arrow {
  transform: translateX(clamp(0.12em, 0.22vw, 0.22em));
}

/* Image-mask placeholder background was #191919 dark grey. On mint
   that read as a foreign band; flipped to a soft mint card-soft.
   Height is animated by services-section.js via WAAPI between the
   collapsed value below and the expanded value clamp(150px, 15vw, 206px).
   No CSS transition here — JS owns the motion (see services.css
   header comment). */
.service-image-mask {
  width: 100%;
  min-width: 0;
  height: clamp(40px, 4vw, 56px);
  overflow: hidden;
  border-radius: 12px;
  background: #F4F5F7;
  position: relative;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

.service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {

  .service-list {
    gap: 0;
    padding: 18px var(--site-gutter-x-mobile-left, 20px) 18px var(--site-gutter-x-mobile-right, 20px);
  }

  .service-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
    padding: 0;
    margin-bottom: 20px;
  }

  .service-divider {
    margin: 0 0 20px 0;
    width: 100%;
    max-width: 100%;
  }

  .service-divider:last-child {
    margin-bottom: 0;
  }

  .service-row:nth-child(1),
  .service-row:nth-child(3),
  .service-row:nth-child(5) {
    margin-bottom: 40px;
  }

  .service-image-mask {
    order: 1;
    width: 100%;
    margin: 0 0 20px 0;
    min-height: 160px !important;
    padding: 0;
    background: transparent !important;
    border-radius: 8px;
    overflow: hidden;
  }

  .service-info {
    width: 100%;
    padding: 0;
    order: 2;
  }

  .service-title {
    font-size: 18px;
    padding: 0;
    margin-bottom: 8px;
  }

  /* Mobile: every row is permanently expanded (no hover affordance on
     touch). Override the desktop "collapsed" defaults by forcing
     height: auto so the natural content height is used. JS does NOT
     run its accordion logic on mobile (gated behind desktopMedia). */
  .service-desc {
    font-size: 15px;
    max-width: 100%;
    margin: 8px 0 12px 0 !important;
    line-height: 1.5;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .learn-more {
    font-size: 16px;
    margin: 0 !important;
    align-self: flex-start;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .learn-more__text {
    padding-bottom: 0.23em;
  }

  .learn-more__text::after {
    height: 0.11em;
  }
}

/* Reduced-motion users: services-section.js skips its WAAPI animation
   entirely and just pins the expanded styles inline (or removes them).
   Inline transitions on the link underline + arrow remain CSS-driven,
   so we still need to disable those here to honour the preference. */
@media (prefers-reduced-motion: reduce) {
  .learn-more__text::after,
  .learn-more__arrow {
    transition: none !important;
  }
}