/**
 * WC Service Pages — external stylesheet
 *
 * Loaded only on commercial-cleaning / builders-cleaning / homecare-cleaning.
 * Enqueued by wc_service_enqueue_assets() in wc-content-pages.php.
 *
 * Depends on wc-custom-styles (design tokens, .wc-card base, .wc-city-card shared component).
 * All values use CSS custom properties — no hardcoded colours / sizes.
 *
 * Sections:
 *   1. Service Hero
 *   2. Intro body
 *   3. Industry Cards + 3 grid variants (desktop + tablet + mobile)
 *   4. 6-Step Process
 *   5. Flex Cards (schedule_picker / frequency_options) + badge variants
 *   6. Phase Checklist (builders)
 *   7. Testimonials + View all link
 */

/* === 1. Service Hero — Photo as Column ============================
   Direction 2: photo absolute, top:0 so it extends behind the site's
   fixed-transparent nav (defined in wc-custom-styles.css:221-232).
   A thin vertical "spine" runs down the container's left padding edge,
   an editorial Est. 2011 circular seal anchors the upper-left, and the
   H1 is indented from the spine for magazine-style rhythm.

   Top gradient overlay on the photo is copied byte-for-byte from the
   homepage hero (wc-homepage.css ~L85-94, layer 2) so that the site-wide
   ink-coloured nav remains legible against the bright photo background.

   Mobile (<768) unconditionally collapses to the previous stacked order:
   eyebrow → photo → H1 → subtitle → CTA, with spine + seal hidden. */

.wc-service-hero {
  position: relative;
  background: linear-gradient(180deg, #FAFAF5 0%, #F0EDE4 100%);
  /* padding-top:0 lets the photo column reach the viewport top and slip
     behind the transparent nav; the text block clears the nav via its
     own padding-top further down. */
  padding-top: 0;
  padding-bottom: clamp(80px, 10vh, 120px);
  min-height: clamp(720px, 92vh, 920px);
  overflow: hidden;
}

/* Spine — 1px vertical guide on the container's left padding edge.
   Aligned with var(--space-container-padding) so spine, photo right
   anchor, and any container content share the same left/right grid. */
.wc-service-hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--space-container-padding);
  width: 1px;
  background: var(--color-text-primary);
  opacity: 0.18;
  z-index: 2;
}

/* Photo column — spans hero section below nav down to bottom padding.
   Top clearance matches the fixed nav height so the photo is never
   clipped by the opaque nav bar (the site nav is theoretically
   transparent but an inner Elementor container paints a solid white). */
.wc-service-hero__photo {
  position: absolute;
  top: clamp(72px, 9vh, 96px);
  bottom: clamp(60px, 6vh, 100px);
  right: var(--space-container-padding);
  width: clamp(420px, 38vw, 580px);
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
  /* 5-layer cascading shadow (DESIGN.md §2 convention) */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 3px 7px rgba(0, 0, 0, 0.06),
    0 13px 13px rgba(0, 0, 0, 0.08),
    0 30px 22px -10px rgba(0, 0, 0, 0.10),
    0 54px 44px -20px rgba(0, 0, 0, 0.12);
}
.wc-service-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.96) brightness(0.98) contrast(1.02);
}

/* Top darken gradient — copy of homepage layer 2 so the transparent nav
   keeps WCAG AA contrast against the photo top. */
.wc-service-hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 8, 0.45) 0%,
    rgba(8, 8, 8, 0.30) 8%,
    rgba(8, 8, 8, 0.15) 18%,
    transparent 30%
  );
  pointer-events: none;
}

/* Figcaption — credit band at photo bottom (inside photo, white on
   gradient so it reads on any photo content). */
.wc-service-hero__figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
}

/* Seal — circular Est. 2011 trust mark, top-left column anchor.
   aria-hidden in PHP because the same info is in the subtitle prose. */
.wc-service-hero__seal {
  position: absolute;
  z-index: 3;
  top: clamp(140px, 18vh, 200px);
  left: calc(var(--space-container-padding) + 16px);
  width: 96px; height: 96px;
  border: 1px solid var(--color-text-primary);
  border-radius: 50%;
  background: #FAFAF5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.wc-service-hero__seal-year {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 2px 0;
}

/* Text column — single column, indented from spine for editorial rhythm.
   No position:relative here: photo is a sibling (not descendant) so its
   absolute offsets resolve against .wc-service-hero, giving the photo the
   full section height. Text paints above photo naturally because content
   comes after photo in DOM order. */
.wc-service-hero__content {
  position: relative;  /* keeps z-index:3 behaviour for stacking text above photo edge */
  z-index: 3;
  padding-top: clamp(140px, 18vh, 200px);
}
.wc-service-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding-left: clamp(40px, 6vw, 88px);
  max-width: 560px;
}

.wc-service-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wc-service-hero__eyebrow::after {
  content: "";
  flex: 0 1 64px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.wc-service-hero__h1 {
  /* Display Hero per DESIGN.md §3: 80px / 600 / 1.04 / -0.8px.
     Shared --text-display token ensures service H1 stays in typographic
     lockstep with homepage .wc-hero__title. */
  font: var(--text-display);
  font-size: var(--text-display-responsive);
  letter-spacing: var(--text-display-ls);
  text-wrap: balance;
  color: var(--color-text-primary);
  margin: 0;
  max-width: 14ch;
}

.wc-service-hero__subtitle {
  font-size: 18px;
  line-height: 1.55;
  max-width: 42ch;
  color: var(--color-text-secondary);
  margin: 0;
}

.wc-service-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-9);
}
.wc-service-hero__secondary-cta {
  font-size: 15px;
  color: var(--color-text-link-muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 200ms ease;
}
.wc-service-hero__secondary-cta:hover,
.wc-service-hero__secondary-cta:focus-visible {
  color: var(--color-text-primary);
}

/* Motion — single-stage fade-up, 500ms, no stagger. Respects reduced-motion. */
@keyframes wc-svc-hero-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wc-service-hero__text > *,
.wc-service-hero__photo,
.wc-service-hero__seal {
  opacity: 0;
  animation: wc-svc-hero-enter 500ms cubic-bezier(0.2, 0, 0, 1) 100ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .wc-service-hero__text > *,
  .wc-service-hero__photo,
  .wc-service-hero__seal {
    opacity: 1;
    animation: none;
  }
}

/* Tablet 768–1023 — keep column structure, narrower photo + seal.
   Text max-width is re-clamped so H1/subtitle/eyebrow don't collide with
   the right-side photo column. Seal top is pushed below the eyebrow
   baseline to avoid horizontal overlap at the left margin. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wc-service-hero { min-height: clamp(640px, 86vh, 760px); }
  .wc-service-hero__content { padding-top: clamp(140px, 18vh, 180px); }
  .wc-service-hero__text {
    padding-left: clamp(32px, 5vw, 56px);
    /* Hard cap so text never enters the photo's right-edge column */
    max-width: clamp(300px, calc(100vw - 440px), 440px);
  }
  .wc-service-hero__subtitle { max-width: 100%; }
  .wc-service-hero__eyebrow::after { flex: 0 1 32px; }
  .wc-service-hero__photo {
    width: clamp(320px, 36vw, 420px);
  }
  /* Seal pushed down past eyebrow so left-edge circle + eyebrow ruler don't
     share the same y-band. Also nudged further left so it overhangs the
     container padding line instead of conflicting with text indent. */
  .wc-service-hero__seal {
    top: clamp(200px, 24vh, 260px);
    left: max(8px, calc(var(--space-container-padding) - 8px));
    width: 76px; height: 76px;
    font-size: 8px;
  }
  .wc-service-hero__seal-year { font-size: 13px; }
}

/* Mobile <768 — stacked flow, spine + seal hidden.
   Photo is now a direct child of .wc-service-hero (not of content). To
   interleave photo with the H1/subtitle/CTA in a single flex column,
   make the section a flex container and use display:contents on content
   + text so their descendants become direct flex items of section. */
@media (max-width: 767px) {
  .wc-service-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-top: clamp(100px, 14vh, 140px);
    padding-bottom: clamp(60px, 8vh, 100px);
    min-height: 0;
  }
  .wc-service-hero::before { display: none; }
  .wc-service-hero__seal { display: none; }

  .wc-service-hero__photo {
    position: relative;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4/5;
    margin: 0 auto;
    order: 2;
  }
  .wc-service-hero__photo::after { display: none; }
  .wc-service-hero__figcaption {
    position: static;
    left: auto; right: auto; bottom: auto;
    color: var(--color-text-link-muted);
    background: none;
    padding: 12px 0 0;
    text-align: center;
  }

  .wc-service-hero__content {
    display: contents;
  }
  .wc-service-hero__text {
    display: contents;
    padding-left: 0;
  }
  .wc-service-hero__eyebrow  { order: 1; }
  .wc-service-hero__h1       { order: 3; max-width: none; }
  .wc-service-hero__subtitle { order: 4; }
  .wc-service-hero__cta-row  { order: 5; margin-top: 0; }
}

/* === 2. Intro body — Stripe-style: narrow left column (~60ch), heading matches === */
.wc-intro-body { font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-tertiary); max-width: 60ch; line-height: 1.75; }
.wc-intro-body p + p { margin-top: var(--space-10); }
/* Scope heading width to intro sections only, without touching other sections */
.wc-section:has(.wc-intro-body) .wc-section-heading { max-width: 60ch; }

/* === 3. Industry Cards (icon-based per PRD §2.2) === */
.wc-industry-card { padding: var(--space-12); min-height: 180px; }
/* Span default is display:inline which ignores width/height — force block so the
   48×48 reservation actually holds (PRD §2.2). Inner <svg> output by
   wc_home_industry_icon() then scales within the reserved box. */
.wc-industry-card__icon { display: block; width: 48px; height: 48px; margin-bottom: var(--space-10); color: var(--color-primary-text); }
.wc-industry-card__icon svg { width: 100%; height: 100%; }
.wc-industry-card__title { font: var(--text-h3); color: var(--color-text-primary); margin-bottom: var(--space-7); }
.wc-industry-card__desc { font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-tertiary); }

.wc-industries__grid { display: grid; gap: var(--space-11); }

/* ── Variant A: Commercial 6-card (desktop) ── */
.wc-industries__grid--6 { grid-template-columns: repeat(12, 1fr); }
@media (min-width: 992px) {
  .wc-industries__grid--6 > .wc-industry-card:nth-child(1) { grid-column: span 5; }
  .wc-industries__grid--6 > .wc-industry-card:nth-child(2) { grid-column: span 4; }
  .wc-industries__grid--6 > .wc-industry-card:nth-child(3) { grid-column: span 3; }
  .wc-industries__grid--6 > .wc-industry-card:nth-child(4) { grid-column: span 3; }
  .wc-industries__grid--6 > .wc-industry-card:nth-child(5) { grid-column: span 4; }
  .wc-industries__grid--6 > .wc-industry-card:nth-child(6) { grid-column: span 5; }
}
/* Fix 1 — 6-card tablet (768-991): alternating 7fr/5fr so cards don't collapse to thin strips */
@media (min-width: 768px) and (max-width: 991px) {
  .wc-industries__grid--6 > .wc-industry-card:nth-child(odd)  { grid-column: span 7; }
  .wc-industries__grid--6 > .wc-industry-card:nth-child(even) { grid-column: span 5; }
}

/* ── Variant B: Builders 3-card (desktop = 2+1 asymmetric) ── */
.wc-industries__grid--3 { grid-template-columns: 7fr 5fr; }
@media (min-width: 992px) {
  .wc-industries__grid--3 > .wc-industry-card:nth-child(3) { grid-column: 1 / -1; max-width: 66.67%; }
}
/* Fix 1 — 3-card tablet (768-991): same 2+1 layout holds */
@media (min-width: 768px) and (max-width: 991px) {
  .wc-industries__grid--3 > .wc-industry-card:nth-child(3) { grid-column: 1 / -1; max-width: 66.67%; }
}

/* ── Variant C: HomeCare 4-card (desktop: 1 left / 2 stacked right / 1 full-width bottom) ── */
.wc-industries__grid--4 { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto auto; }
@media (min-width: 992px) {
  .wc-industries__grid--4 > .wc-industry-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}
/* Fix 1 — 4-card tablet (768-991): flat 2-col, first card no row span, last card full width */
@media (min-width: 768px) and (max-width: 991px) {
  .wc-industries__grid--4 { grid-template-rows: auto; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(1) { grid-column: 1; grid-row: auto; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(2) { grid-column: 2; grid-row: auto; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(3) { grid-column: 2; grid-row: auto; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(4) { grid-column: 1 / -1; grid-row: auto; }
}

/* Mobile — all three variants collapse to single column */
@media (max-width: 767px) {
  .wc-industries__grid--6,
  .wc-industries__grid--3,
  .wc-industries__grid--4 { grid-template-columns: 1fr; }
  .wc-industries__grid--3 > .wc-industry-card:nth-child(3) { max-width: 100%; }
  .wc-industries__grid--4 > .wc-industry-card:nth-child(1) { grid-row: auto; }
}

/* === 4. 6-Step Process === */
.wc-process__list { list-style: none; counter-reset: step-counter; position: relative; padding: 0; }
.wc-process__step { counter-increment: step-counter; display: grid; gap: var(--space-11); padding-bottom: var(--space-13); position: relative; }
.wc-process__number { width: 48px; height: 48px; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wc-process__number::before { content: counter(step-counter); font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--color-primary); line-height: 1; }
.wc-process__title { font: var(--text-h3); color: var(--color-text-primary); margin-bottom: var(--space-7); }
.wc-process__desc { font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-tertiary); }
.wc-process__desc a { color: var(--color-primary-text); text-decoration: underline; }
.wc-process__contact-exit { font: var(--text-caption); color: var(--color-text-link-muted); text-align: center; margin-top: var(--space-12); }
@media (min-width: 992px) {
  .wc-process__step { grid-template-columns: 48px 1fr; align-items: start; }
  .wc-process__list::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 48px; width: 2px; background: var(--color-border-default); }
  .wc-process__number { position: relative; z-index: 1; background: var(--color-bg-canvas); }
}
@media (max-width: 767px) {
  .wc-process__step { grid-template-columns: 1fr; text-align: center; }
  .wc-process__number { margin: 0 auto var(--space-10); }
  .wc-process__list::before { display: none; }
}

/* === 5. Flex Cards (schedule_picker / frequency_options) === */
.wc-flex-cards__grid { display: grid; gap: var(--space-11); }
.wc-flex-card { padding: var(--space-12); border-radius: var(--radius-lg); }

/* Fix 6 — badge tone variants: Schedule uses primary blue, Frequency uses pink */
.wc-flex-card__badge {
  display: inline-block;
  padding: var(--space-5) var(--space-9);
  border-radius: var(--radius-sm);
  font: var(--text-badge);
  text-transform: uppercase;
  margin-bottom: var(--space-7);
}
.wc-flex-card__badge--primary { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary-text); }
.wc-flex-card__badge--pink    { background: rgba(237, 82, 203, 0.1);              color: var(--color-accent-pink); }

.wc-flex-card__title { font: var(--text-h3); color: var(--color-text-primary); margin-bottom: var(--space-7); }
.wc-flex-card__desc  { font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-tertiary); }
.wc-flex-cards__grid--schedule  { grid-template-columns: 5fr 7fr; }
@media (min-width: 992px) {
  .wc-flex-cards__grid--schedule > .wc-flex-card:nth-child(1) { grid-column: 1 / -1; }
}
.wc-flex-cards__grid--frequency { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) {
  .wc-flex-cards__grid--schedule,
  .wc-flex-cards__grid--frequency { grid-template-columns: 1fr; }
}
.wc-flex-support { font: var(--text-caption); color: var(--color-text-link-muted); text-align: center; margin-top: var(--space-11); }

/* === 6. Phase Checklist (builders) === */
.wc-phases { display: grid; gap: var(--space-11); position: relative; }
@media (min-width: 992px) {
  .wc-phases { grid-template-columns: 1fr 1fr 1fr; }
  .wc-phases::before { content: ""; position: absolute; top: 24px; left: 48px; right: 48px; height: 2px; background: var(--color-border-default); z-index: 0; }
}
@media (max-width: 767px) {
  .wc-phases { grid-template-columns: 1fr; }
  .wc-phases::before { display: none; }
}
.wc-phase { padding: var(--space-12); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-canvas); }
.wc-phase__number { width: 48px; height: 48px; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-10); position: relative; z-index: 1; background: var(--color-bg-canvas); }
.wc-phase__number-text { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--color-primary); }
.wc-phase__title { font: var(--text-h3); color: var(--color-text-primary); margin-bottom: var(--space-10); }
.wc-phase__checklist { list-style: none; padding: 0; }
.wc-phase__checklist-item { display: flex; gap: var(--space-7); align-items: flex-start; margin-bottom: var(--space-7); font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-tertiary); }
.wc-phase__check-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent-green); margin-top: 2px; }

/* === 7. Testimonials === */
.wc-testimonial-card { padding: var(--space-12); border-radius: var(--radius-lg); }
.wc-testimonial-card__quote { font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-secondary); margin-bottom: var(--space-11); }
.wc-testimonial-card__name { font: var(--text-body); font-weight: 500; color: var(--color-text-primary); display: block; }
.wc-testimonial-card__company,
.wc-testimonial-card__city { font: var(--text-caption); color: var(--color-text-link-muted); display: block; }
.wc-testimonials__grid { display: grid; gap: var(--space-11); }
@media (min-width: 992px) {
  .wc-testimonials__grid { grid-template-columns: 7fr 5fr; }
}

/* Fix 4 — "View all testimonials →" exit link (prototype line 1162/1318/1454) */
.wc-testimonials__link { text-align: center; margin-top: var(--space-12); }
.wc-testimonials__link a { color: var(--color-primary-text); text-decoration: underline; font: var(--text-body); }

/* === 8a. Bottom CTA — Wisdom Blue full-bleed (mirrors BYOB + About pages) ===
   Service pages use the shared wc_render_bottom_cta() helper which
   emits .wc-bottom-cta markup. About pages inline equivalent CSS via
   wc_about_pages_inline_css(); that function is NOT emitted on service
   pages, so we scope the same visual treatment via .page-service here. */

.page-service .wc-bottom-cta {
  background: var(--color-primary);
  padding-block: var(--space-15);
  text-align: center;
}
.page-service .wc-bottom-cta__inner {
  display: grid;
  gap: var(--space-11);
  justify-items: center;
  max-width: 720px;
  margin: 0 auto;
}
.page-service .wc-bottom-cta__heading {
  font: var(--text-h2);
  font-size: var(--text-h2-responsive);
  font-weight: 600;
  color: var(--color-bg-canvas);
  margin: 0 auto;
  max-width: 20ch;
}
.page-service .wc-bottom-cta__subtitle {
  font: var(--text-body-lead);
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin-inline: auto;
}
.page-service .wc-bottom-cta__secondary {
  color: rgba(255, 255, 255, 0.65);
  font: var(--text-caption);
}
.page-service .wc-bottom-cta__secondary a { color: rgba(255, 255, 255, 0.85); }
.page-service .wc-bottom-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-10);
}
.page-service .wc-bottom-cta .wc-btn-primary {
  background: var(--color-bg-canvas);
  color: var(--color-primary);
  border-color: var(--color-bg-canvas);
}
.page-service .wc-bottom-cta .wc-btn-primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary-hover);
}

/* === 8b. Section background rhythm (BYOB-style alternation) ===
   Unified with be-your-own-boss page: tint on every-other section
   using --color-surface-secondary (#F8FAFC) against --color-bg-canvas
   (#FFFFFF). Hero + Bottom CTA keep their own dark treatment; section
   padding remains shared --space-section-gap so rhythm stays honest. */

.wc-services-group,
.wc-process {
  background: var(--color-surface-secondary);
}

/* On tinted process background, keep step number pill + vertical guide
   readable: give the number chip an explicit canvas bg so it doesn't
   visually merge into the section tint. The existing rule at
   wc-process__number (L406) already does this at the ≥992px breakpoint
   — tint makes it mandatory at all sizes. */
.wc-process__number {
  background: var(--color-bg-canvas);
}

/* === 9. Services group (offerings + standards + gallery in ONE section) ===
   2026-04-16 layout decision: Offerings + Standards + Gallery are three
   sub-topics of the same category ("our services"), so they share one
   <section> box with a single "OUR SERVICES" eyebrow. BYOB-style
   alternating tint — this is one of the tinted rows in the rhythm
   (surface-secondary), contrasted with plain white neighbours (intro,
   why, testimonials). Inter-block rhythm: --space-15 between the three
   blocks so each reads as a distinct chunk within one shared section. */

.wc-services-group {
  background: var(--color-surface-secondary);
}
/* Eyebrow → first block heading vertical rhythm */
.wc-services-group > .wc-container > .wc-section-label {
  display: block;
  margin-bottom: var(--space-12);
}
/* Between-block spacing: offerings → standards → gallery */
.wc-services-group__block + .wc-services-group__block {
  margin-top: var(--space-15);
}
/* Each block's H2 top margin already handled by .wc-section-heading below */
.wc-services-group__block > .wc-section-heading {
  margin-bottom: var(--space-12);
}

/* Offerings grid — auto-fit cards, 3 wide on desktop, falls to 2 / 1. */
.wc-offerings__grid {
  display: grid;
  gap: var(--space-11);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.wc-offering-card {
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  /* On a tinted section, cards need bg-canvas to stay readable and visible */
  background: var(--color-bg-canvas);
  transition: transform 250ms var(--motion-easing),
              box-shadow 250ms var(--motion-easing);
}
.wc-offering-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 14px rgba(0, 0, 0, 0.06),
    0 18px 28px -12px rgba(0, 0, 0, 0.08);
}
.wc-offering-card__title { font: var(--text-h3); color: var(--color-text-primary); margin: 0; }
.wc-offering-card__desc  { font: var(--text-body); letter-spacing: var(--text-body-ls); color: var(--color-text-tertiary); margin: 0; }

/* Standards — 2-col no-border icon list (Option 3).
   Topology intentionally different from the Offering cards above:
   no box, no background — only a hairline row separator + icon anchor. */
.wc-standards__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
}
.wc-standard-item {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  padding: var(--space-11) var(--space-12) var(--space-11) 0;
  border-bottom: 1px solid var(--color-border-default);
}
/* odd items get a right divider + extra right padding */
.wc-standard-item:nth-child(odd) {
  padding-right: var(--space-13);
  border-right: 1px solid var(--color-border-default);
}
/* even items get left padding instead */
.wc-standard-item:nth-child(even) {
  padding-left: var(--space-13);
  padding-right: 0;
}
/* remove bottom border from last two items */
.wc-standard-item:nth-last-child(-n+2) { border-bottom: none; }
/* lone last item if total is odd: spans both columns, max-width 50% */
.wc-standard-item--last-odd {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
  max-width: 50%;
  padding-left: 0;
}
.wc-standard-item__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.wc-standard-item__icon svg { width: 18px; height: 18px; display: block; }
.wc-standard-item__title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
}
@media (max-width: 767px) {
  .wc-standards__list { grid-template-columns: 1fr; }
  .wc-standard-item,
  .wc-standard-item:nth-child(odd),
  .wc-standard-item:nth-child(even) {
    padding: var(--space-10) 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border-default);
  }
  .wc-standard-item:last-child { border-bottom: none; }
  .wc-standard-item--last-odd { max-width: 100%; grid-column: 1; }
  .wc-standards__list .wc-standard-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border-default); }
}

/* === 10. Gallery (2.5) ===
   Single image → feature crop. Multiple → horizontal snap-scroll track with
   prev/next buttons (JS at wc-service-manager.php:889). Track uses native
   overflow-x + scroll-snap — no JS needed for touch/trackpad scrolling. */

.wc-gallery__feature {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 24px 32px -14px rgba(0, 0, 0, 0.08);
}
.wc-gallery__feature img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.wc-gallery__carousel {
  position: relative;
}
.wc-gallery__track {
  display: flex;
  gap: var(--space-10);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-8);
}
.wc-gallery__track::-webkit-scrollbar { display: none; }
.wc-gallery__track:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.wc-gallery__item {
  flex: 0 0 clamp(280px, 60vw, 560px);
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 14px rgba(0, 0, 0, 0.06);
}
.wc-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.wc-gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 14px rgba(0, 0, 0, 0.08);
  transition: background-color 200ms var(--motion-easing),
              transform 200ms var(--motion-easing);
}
.wc-gallery__btn:hover {
  background: var(--color-primary);
  color: var(--color-bg-canvas);
  transform: translateY(-50%) scale(1.04);
}
.wc-gallery__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.wc-gallery__btn--prev { left: calc(var(--space-11) * -1); }
.wc-gallery__btn--next { right: calc(var(--space-11) * -1); }

/* Mobile: buttons move inside viewport so they don't sit off-screen. */
@media (max-width: 767px) {
  .wc-gallery__btn--prev { left: var(--space-8); }
  .wc-gallery__btn--next { right: var(--space-8); }
  .wc-gallery__btn { width: 40px; height: 40px; }
}

/* === 11. Why Wisdom (2.6) — auto-fit card grid ===
   3–6 items stay visually balanced via auto-fit. Cards sit on the neutral
   canvas, deliberately lighter than Offerings (thinner border, no hover
   lift) so the rhythm is "loud offerings / quiet reasons". */

/* Why section — editorial numbered row list.
   Each item spans full width with a left green bar on hover. */
.wc-why__list {
  display: flex;
  flex-direction: column;
}
.wc-why-row {
  display: flex;
  align-items: center;
  gap: var(--space-13);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border-default);
  position: relative;
  cursor: default;
}
.wc-why-row:last-child {
  border-bottom: 1px solid var(--color-border-default);
}
/* Green bar slides in from center on hover */
.wc-why-row::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-15));
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.wc-why-row:hover::before {
  transform: scaleY(1);
}
.wc-why-row__num {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  min-width: 28px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.wc-why-row:hover .wc-why-row__num {
  opacity: 1;
}
.wc-why-row__title {
  font: var(--text-h3);
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .wc-why-row { gap: var(--space-11); }
  .wc-why-row::before { left: calc(-1 * var(--space-12)); }
}

/* Reduced motion — kill any hover translate. */
@media (prefers-reduced-motion: reduce) {
  .wc-offering-card,
  .wc-gallery__btn { transition: none; }
  .wc-offering-card:hover { transform: none; }
  .wc-gallery__btn:hover  { transform: translateY(-50%); }
}