/* Areas of Support — page-specific styles.
   Artwork hooks and composition tweaks only.
============================================================ */

.s-hero--services-system {
  --hero-title-measure: 16ch;
  --hero-min-height: min(820px, 92svh);
}

.s-hero--services-system .s-hero__inner {
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.84fr);
}

.s-hero--services-system .s-hero__copy {
  max-width: 62ch;
}

/* Orientation panel */
.services-cta-panel h3 {
  margin: var(--space-5) 0;
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.2rem + 0.95vw, 2.3rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.16;
}

/* Core service cards */
.services-card-grid {
  --grid-2-min: 28rem;
  margin-top: clamp(3rem, 5.5vw, 4.75rem);
}

/* Overlap */
.services-approach-link {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.services-approach-link a {
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  text-decoration: none;
}

.services-approach-link a:hover {
  color: var(--brand-champagne);
}

/* Approach */
.services-approach-grid {
  margin-top: clamp(3rem, 5.5vw, 4.75rem);
}

.services-methods-note {
  max-width: 980px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.services-methods-note h3 {
  max-width: 24ch;
}

/* Inclusive */
.services-scope-note {
  align-self: start;
}

.services-scope-note h3 {
  color: var(--brand-champagne);
}

/* CTA */
.services-cta-panel h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 760px) {
  .s-hero--services-system .s-hero__inner {
    grid-template-columns: 1fr;
  }

  .services-card-grid {
    --grid-2-min: 20rem;
  }
}


/* Phase 2.13 refinements */

/* Before you choose: simpler typography and fewer competing styles. */
.services-orientation-panel p {
  color: var(--section-copy);
}

/* Four starting points: preserve original number-left rhythm. */
.services-card-grid .c-service-card__title {
  margin-top: 0;
}

.services-card-grid .c-service-card__number {
  flex-shrink: 0;
}

/* How the areas overlap: restore original split + note rail feeling. */
.services-overlap-layout {
  align-items: start;
}

.services-overlap-rail {
  align-self: start;
}

.services-approach-link {
  margin-top: var(--space-6);
  text-align: left;
}

.services-approach-link a {
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  text-decoration: none;
}

@media (max-width: 880px) {
  .services-approach-link {
    text-align: center;
  }
}


/* Phase 2.14 contrast and hover refinements */

/* Before you choose: dark panel legibility. */
.services-orientation-panel {
  --inset-muted: rgba(247, 239, 227, 0.86);
}

.services-orientation-panel__lead {
  color: var(--brand-gold);
}

.services-orientation-panel p {
  color: rgba(247, 239, 227, 0.86);
}

/* Four starting points: warmer hover, avoiding the greyed feel. */
.services-card-grid .c-service-card:hover {
  background:
    radial-gradient(circle at 92% 12%, rgba(216, 163, 74, 0.12), transparent 9rem),
    linear-gradient(145deg, rgba(255, 251, 244, 0.98), rgba(244, 229, 204, 0.94));
}

.services-card-grid .c-service-card:hover .c-service-card__number {
  background: rgba(216, 163, 74, 0.13);
}

/* Still not sure?: keep right-hand scope/orientation panel readable. */
.services-cta-panel {
  --inset-muted: rgba(247, 239, 227, 0.86);
}

.services-cta-panel .c-eyebrow {
  color: var(--brand-gold);
}

.services-cta-panel p {
  color: rgba(247, 239, 227, 0.86);
}


/* Phase 2.15 final All Services polish */

/* Before you choose: calmer, heading-coloured title with more consistent rhythm. */
.services-orientation-panel__lead {
  color: var(--brand-champagne);
  font-size: clamp(1.32rem, 1.08rem + 0.62vw, 1.82rem);
  line-height: 1.18;
  margin-bottom: var(--space-5);
}

.services-orientation-panel p:not(.services-orientation-panel__lead) {
  color: rgba(247, 239, 227, 0.84);
}

/* Same careful approach: remove decorative mini-rules under labels. */
.services-approach-grid .c-pattern-card__label::after {
  display: none;
}

/* Still not sure: reduce gold usage and keep typography calmer. */
.services-cta-panel h3 {
  color: var(--brand-champagne);
  font-size: clamp(1.32rem, 1.08rem + 0.62vw, 1.82rem);
  font-style: normal;
  line-height: 1.18;
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.services-cta-panel .c-eyebrow {
  color: var(--brand-gold);
}

.services-cta-panel p {
  color: rgba(247, 239, 227, 0.84);
}

.services-cta-panel p strong {
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-weight: 400;
}