/* ==========================================================================
   Services Page — The House of Minds
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280
   ========================================================================== */

.gold {
  color: var(--soft-gold);
}
.eyebrow-arrow {
  color: var(--soft-gold);
  font-size: 0.85em;
}

.section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-brown);
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-eyebrow.center {
  justify-content: center;
}

/* ---------- Hero ---------- */
.svc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 100px;
}
.svc-hero-bg {
  display: block; /* overrides global `picture { display: contents }` which breaks position:absolute */
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.svc-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
}
.svc-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.svc-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-sage);
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* margin-left: 25%; */
}
.svc-hero-title {
  color: var(--warm-ivory);
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1.15;
  max-width: 640px;
  margin-bottom:2% ;
}
.svc-hero-text {
  margin: 22px 0 32px;
  color: rgba(244, 232, 220, 0.82);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  max-width: 460px;
  line-height: 1.6;
}
.svc-hero-content .btn span {
  margin-left: 2px;
}

/* ---------- Approach ---------- */
.approach-section {
  background: var(--warm-ivory);
  padding: var(--section-pad) 0;
}
.approach-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
  margin-top: 4%;
}
.approach-content {
  min-width: 0;
}
.approach-image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(30, 39, 25, 0.14);
  aspect-ratio: 6/6;
  min-width: 125px;
}
.approach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.approach-title {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 18px;
}
.approach-text {
  color: var(--muted-grey);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  max-width: 540px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.approach-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.approach-feature {
  text-align: left;
}
.af-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--soft-gold);
  color: var(--deep-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;

}
.af-icon svg {
  width: 22px;
  height: 22px;
}
.approach-feature h4 {
  font-size: 0.92rem;
  line-height: 1.35;
  margin-bottom: 6px;
  font-weight: 600;
}
.approach-feature p {
  font-size: 0.8rem;
  color: var(--muted-grey);
  line-height: 1.4;
}

/* ---------- Services Grid ---------- */
.services-grid-section {
  background: var(--soft-beige);
  padding: 30px 0;
  position: relative;
  overflow: hidden;
}
.services-grid-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
  margin-top: 7%;
}
.services-grid-section .section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}
.services-grid-section .section-head p {
  max-width: 520px;
  margin-inline: auto;
}

.svc-cards-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 22px);
  align-items: center;
  margin-top: clamp(32px, 5vw, 56px);
}
.svc-card-nav {
  width: clamp(42px, 4vw, 54px);
  height: clamp(42px, 4vw, 54px);
  border: 1px solid rgba(125, 102, 84, 0.32);
  border-radius: 999px;
  background: var(--warm-ivory);
  color: var(--deep-forest);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 0 14px 28px rgba(30, 39, 25, 0.1);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}
.svc-card-nav:hover {
  background: var(--soft-gold);
  border-color: var(--soft-gold);
  transform: translateY(-2px);
}
.svc-card-nav:focus-visible {
  outline: 2px solid var(--soft-gold);
  outline-offset: 4px;
}
.svc-card-nav:disabled {
  opacity: 0.34;
  cursor: not-allowed;
  transform: none;
}

.svc-cards {
  --svc-card-gap: clamp(16px, 2vw, 24px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--svc-card-gap) * 3)) / 4);
  gap: var(--svc-card-gap);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 10px;
}
.svc-cards::-webkit-scrollbar {
  display: none;
}
.svc-card {
  background: var(--deep-forest);
  border-radius: 18px;
  padding: clamp(26px, 2.6vw, 32px) clamp(20px, 2.2vw, 26px);
  color: var(--warm-ivory);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 250px;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(20, 28, 22, 0.28);
}
.svc-card-cta {
  background: var(--soft-gold);
  color: var(--deep-forest);
}
.svc-card-cta .svc-icon {
  border-color: var(--deep-forest);
  color: var(--deep-forest);
  background: rgba(30, 39, 25, 0.08);
}
.svc-card-cta h3 {
  color: var(--deep-forest);
}
.svc-card-cta p {
  color: rgba(30, 39, 25, 0.72);
}
.svc-card-cta .svc-link {
  color: var(--deep-forest);
}
.svc-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--soft-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-gold);
  margin-bottom: 20px;
  margin-left: 35%;
}
.svc-icon svg {
  width: 24px;
  height: 24px;
}
.svc-card h3 {
  color: var(--warm-ivory);
  font-size: 1.08rem;
  line-height: 1.3;
  margin-bottom: 10px;
}
.svc-card p {
  color: var(--muted-sage);
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 20px;
  flex-grow: 1;
}
.svc-link {
  color: var(--soft-gold);
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}
.svc-link span {
  transition: transform 0.25s ease;
}
.svc-link:hover span {
  transform: translateX(4px);
}

/* ---------- Process ---------- */
.process-section {
  background: var(--warm-ivory);
  padding: 30px 0;
}
.process-section .section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}

/*
  Default state (also the permanent state on tablet/mobile, and the
  fallback for desktop when JS/GSAP can't run or prefers-reduced-motion is
  set): every card is statically visible in a responsive 2-column grid.
  The scroll-driven "deck" look is opt-in and only switched on above the
  1025px breakpoint once js/script.js adds .scroll-deck-active — see the
  @media block further down.
*/
.process-steps {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  position: relative;
  max-width: min(980px, 100%);
  margin-inline: auto;
}
.process-step {
  --ps-bg: none;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: clamp(24px, 3vw, 34px) clamp(20px, 4vw, 48px);
  box-shadow: 0 18px 34px rgba(30, 39, 25, 0.16);
  min-height: clamp(220px, 30vh, 300px);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-forest);
}
.ps-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ps-bg);
  background-size: cover;
  background-position: center;
  background-color: var(--deep-forest);
}
.ps-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(20, 26, 18, 0.42) 0%, rgba(20, 26, 18, 0.78) 100%); */
}
.ps-content {
  position: relative;
  z-index: 1;
}
.ps-step {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 232, 220, 0.88);
  margin-bottom: 12px;
  font-weight: 600;
}
.process-step h4 {
  color: var(--warm-ivory);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin-bottom: 12px;
}
.process-step p {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  color: rgba(244, 232, 220, 0.86);
  line-height: 1.65;
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 1025px) {
  /* The scroll-controlled deck: activated by js/script.js only once the
     Our Process panel has fully docked at the top of the viewport. Each
     card is absolutely stacked and slides up over the previous one as the
     visitor keeps scrolling; reversing direction reverses the stack. */
  .process-steps.scroll-deck-active {
    grid-template-columns: 1fr;
    min-height: clamp(320px, 50vh, 460px);
    overflow: hidden;
    isolation: isolate;
  }
  .process-steps.scroll-deck-active .process-step {
    position: absolute;
    inset: 0;
    will-change: transform;
    transform: translate3d(0, 100%, 0);
    backface-visibility: hidden;
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .process-steps.scroll-deck-active .process-step.is-visible {
    transform: translate3d(0, 0, 0);
  }
}

/* ---------- CTA ---------- */
.svc-cta-section {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 0;
  outline: 0;
  background: var(--deep-forest);
}
.svc-cta-bg {
  display: block; /* overrides global `picture { display: contents }` which breaks position:absolute */
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.svc-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-cta-section::before {
  display: none;
}
.svc-cta-section + .main-footer {
  /* A single, generous overlap (applied only here, on the footer side)
     replaces the previous mismatched -1px/-2px split between the two
     sections, which left a subpixel gap that rendered as a hairline seam
     at some zoom levels/DPRs. Both sections already share the same
     background color, so the overlap itself is invisible. */
  position: relative;
  z-index: 2;
  margin-top: -4px;
  border-top: 0;
  outline: 0;
  box-shadow: none;
}
.svc-cta-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
  padding-block: clamp(60px, 8vw, 100px);
}
.svc-cta-content h2 {
  color: var(--warm-ivory);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  max-width: 460px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.svc-cta-content p {
  color: rgba(244, 232, 220, 0.82);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 30px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  .svc-cards {
    grid-auto-columns: calc((100% - (var(--svc-card-gap) * 2)) / 3);
  }
}

@media (max-width: 1024px) {
  .approach-container {
    grid-template-columns: 1fr;
  }
  .approach-image {
    min-width: 0;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    aspect-ratio: 16/10;
  }
  .approach-content {
    text-align: center;
  }
  .approach-text {
    margin-inline: auto;
  }
  .approach-features {
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }
  .approach-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .svc-cards {
    grid-auto-columns: calc((100% - var(--svc-card-gap)) / 2);
  }
}

@media (max-width: 768px) {
  .svc-hero {
    padding-top: 90px;
    min-height: 100svh;
  }
  .svc-hero-content .hero-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .svc-hero-content .hero-cta-buttons .btn {
    margin-left: 0 !important;
  }
  .svc-hero-title {
    max-width: 100%;
  }
  .svc-hero-text {
    max-width: 100%;
  }
  .svc-cta-content h2,
  .svc-cta-content p {
    max-width: 100%;
  }
  .svc-cta-content {
    text-align: center;
  }
  .svc-cta-content p {
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .svc-cards-shell {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }
  .svc-card-nav {
    width: 38px;
    height: 38px;
  }
  .svc-cards {
    grid-auto-columns: 100%;
  }
  .approach-features {
    grid-template-columns: 1fr;
  }
  .process-step h4 {
    margin-bottom: 0;
  }
  .process-step {
    padding: 18px 14px;
    min-height: clamp(150px, 32vw, 200px);
  }
  .process-step p {
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  /* Only collapse to a single column on the very narrowest phones, where
     two columns would leave too little room to read the card copy. */
  .process-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .svc-hero-content .hero-cta-buttons {
    margin-bottom: 170px;
  }
  .svc-hero-content .btn {
    margin-bottom: 0;
    margin-left: 0;
  }
  .svc-cta-content .btn {
    width: 100%;
  }
}