<script lang="ts">
  import { onMount, tick } from 'svelte';
  import Icon from '$lib/components/Icon.svelte';
  import { reveal } from '$lib/actions/reveal';
  import BookingWizard from '$lib/components/BookingWizard.svelte';
  import PricingPlanCard from '$lib/components/PricingPlanCard.svelte';
  import ServiceHero from '$lib/components/ServiceHero.svelte';
  import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
  import FaqSection from '$lib/components/FaqSection.svelte';
  import ServiceAreaMap from '$lib/components/ServiceAreaMap.svelte';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import { decoratePlans } from '$lib/utils/pricing';
  import { locationPages } from '$lib/content/locations';
  import type { ServicePageContent, SiteSharedContent } from '$lib/types';

  export let content: SiteSharedContent;
  export let pageContent: ServicePageContent;
  export let currentPath = '';
  let benefitScroller: HTMLDivElement | null = null;
  let activeBenefitIndex = 0;
  let mobileBenefitObserver: IntersectionObserver | null = null;

  $: highlightEnhanced = pageContent.highlight ? getEnhancedImage(pageContent.highlight.imageUrl) : null;
  $: highlightCollageImages =
    pageContent.highlight?.collageImages?.map((image) => ({
      ...image,
      enhanced: getEnhancedImage(image.imageUrl)
    })) ?? [];
  $: relatedServices = content.services.filter((s) => s.href && s.href !== currentPath);
  $: pricingPlans = decoratePlans(pageContent.pricing.plans);
  $: introLeadParagraph = pageContent.hero.paragraphs?.[0] ?? '';
  $: introBodyParagraphs = pageContent.hero.paragraphs?.slice(1) ?? [];
  $: heroDetailHighlights = pageContent.hero.detailHighlights ?? [];
  $: benefitCards = pageContent.benefits.items.map((benefit, index) => ({
    ...benefit,
    tintClass: `service-benefit-tint-${(index % 3) + 1}`,
    featured: index === 0
  }));
  $: isPackWalks = currentPath === '/pack-walks';
  $: isDogWalking = currentPath === '/dog-walking';
  $: isPuppyVisits = currentPath === '/puppy-visits';
  $: usesWideServiceShell = isPackWalks || isDogWalking || isPuppyVisits;
  $: decisionEyebrow = isPackWalks ? 'Fit check' : isDogWalking ? 'Solo fit' : 'Fit check';
  $: decisionIntro = isPackWalks
    ? 'A quick way to see whether Tiny Gang is likely to suit your dog before you enquire.'
    : isDogWalking
      ? 'A calmer, more personal option for dogs who need space, steadier handling, or one familiar walker.'
      : 'A quick way to see whether this service is likely to suit your dog before you enquire.';
  $: decisionFitKicker = isPackWalks ? 'Good fit' : isDogWalking ? 'Best on solo' : 'Good fit';
  $: decisionNotKicker = isPackWalks ? 'Better on solo' : isDogWalking ? 'Better in Tiny Gang' : 'Alternative fit';
  $: useSimpleBenefitSwipe =
    isPackWalks ||
    isDogWalking ||
    isPuppyVisits;
  $: showRelatedServices = relatedServices.length > 0 && currentPath !== '/pack-walks';

  $: relatedCards = [
    ...relatedServices.map((s) => ({
      icon: s.icon,
      title: s.title,
      body: s.body,
      href: s.href as string,
      priceFrom: s.priceFrom,
      pill: undefined as string | undefined
    })),
    {
      icon: 'fas fa-tags',
      title: 'Our Pricing',
      body: 'Compare every service and add-on in one place.',
      href: '/our-pricing',
      priceFrom: undefined,
      pill: 'All services'
    }
  ];

  function isMobileViewport() {
    return typeof window !== 'undefined' && window.innerWidth <= 768;
  }

  function benefitCardScrollLeft(card: HTMLElement) {
    return Math.max(0, card.offsetLeft - 8);
  }

  async function scrollBenefits(direction: -1 | 1) {
    if (!benefitScroller || !isMobileViewport()) return;

    const nextIndex = Math.max(0, Math.min(activeBenefitIndex + direction, benefitCards.length - 1));
    await scrollBenefitTo(nextIndex, 'smooth');
  }

  async function scrollBenefitTo(index: number, behavior: ScrollBehavior = 'smooth') {
    if (!benefitScroller || !isMobileViewport()) return;

    const cards = benefitScroller.querySelectorAll<HTMLElement>('.service-benefit-card');
    const targetCard = cards[index];
    if (!targetCard) return;

    activeBenefitIndex = index;
    await tick();
    benefitScroller.scrollTo({
      left: benefitCardScrollLeft(targetCard),
      behavior
    });
  }

  function bindMobileBenefitObserver() {
    mobileBenefitObserver?.disconnect();

    if (!benefitScroller || !isMobileViewport()) return;

    const cards = benefitScroller.querySelectorAll<HTMLElement>('.service-benefit-card');
    if (!cards.length) return;

    mobileBenefitObserver = new IntersectionObserver(
      (entries) => {
        const visibleEntry = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];

        if (!visibleEntry) return;

        const nextIndex = [...cards].indexOf(visibleEntry.target as HTMLElement);
        if (nextIndex >= 0) {
          activeBenefitIndex = nextIndex;
        }
      },
      {
        root: benefitScroller,
        threshold: [0.6, 0.75, 0.9]
      }
    );

    cards.forEach((card) => mobileBenefitObserver?.observe(card));
  }

  onMount(() => {
    const handleResize = () => {
      if (!benefitScroller) return;

      if (isMobileViewport()) {
        if (activeBenefitIndex === 0) {
          benefitScroller.scrollTo({ left: 0, behavior: 'auto' });
        }
        bindMobileBenefitObserver();
        void scrollBenefitTo(activeBenefitIndex, 'auto');
      } else {
        mobileBenefitObserver?.disconnect();
      }
    };

    if (benefitScroller && isMobileViewport()) {
      benefitScroller.scrollTo({ left: 0, behavior: 'auto' });
      bindMobileBenefitObserver();
    }

    window.addEventListener('resize', handleResize);

    return () => {
      mobileBenefitObserver?.disconnect();
      window.removeEventListener('resize', handleResize);
    };
  });
</script>

<main
  class:service-page-pack={isPackWalks}
  class:service-page-dog={isDogWalking}
  class:service-page-wide={usesWideServiceShell}
  class="service-page"
>
  <ServiceHero
    eyebrow={pageContent.hero.eyebrow}
    title={pageContent.hero.title}
    subtitle={pageContent.hero.subtitle}
    imageUrl={pageContent.hero.imageUrl}
    imageAlt={pageContent.hero.imageAlt}
    chips={pageContent.hero.chips ?? []}
    cta={pageContent.hero.cta}
  />

  {#if pageContent.highlight}
    <section use:reveal class="service-highlight reveal-block">
      <div class="page-inner">
        <div class:service-highlight-layout-points={pageContent.highlight.points?.length} class="service-highlight-layout">
          <div class="service-highlight-copy">
            <p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
            <h2>{pageContent.highlight.title}</h2>

            {#if pageContent.highlight.points?.length}
              <div class="service-highlight-points">
                {#each pageContent.highlight.points as point}
                  <article class="service-highlight-point">
                    <h3>{point.title}</h3>
                    <p>{point.body}</p>
                  </article>
                {/each}
              </div>
            {/if}
          </div>

          {#if highlightCollageImages.length}
            <div class="service-highlight-collage" aria-label={pageContent.highlight.title}>
              {#each highlightCollageImages as image, index}
                <figure class={`service-collage-card service-collage-card-${index + 1}`}>
                  {#if image.enhanced}
                    <enhanced:img src={image.enhanced} alt={image.imageAlt} loading="lazy" decoding="async" />
                  {:else}
                    <img src={image.imageUrl} alt={image.imageAlt} loading="lazy" decoding="async" />
                  {/if}
                </figure>
              {/each}
            </div>
          {:else}
            <div class="service-highlight-image">
              {#if highlightEnhanced}
                <enhanced:img
                  src={highlightEnhanced}
                  alt={pageContent.highlight.imageAlt}
                  loading="lazy"
                  decoding="async"
                />
              {:else}
                <img
                  src={pageContent.highlight.imageUrl}
                  alt={pageContent.highlight.imageAlt}
                  loading="lazy"
                  decoding="async"
                />
              {/if}
            </div>
          {/if}
        </div>
      </div>
    </section>
  {/if}

  <section use:reveal class="service-benefits reveal-block">
    <div class="page-inner">
      <div class="service-section-heading">
        <h2>{pageContent.benefits.title}</h2>
        {#if pageContent.benefits.intro}
          <p>{pageContent.benefits.intro}</p>
        {/if}
      </div>

      <div class="service-benefit-shell">
        <div bind:this={benefitScroller} class:service-benefit-grid-simple-swipe={useSimpleBenefitSwipe} class="service-benefit-grid">
          {#each benefitCards as benefit, index}
            <article
              class:active={index === activeBenefitIndex}
              class:service-benefit-card-featured={benefit.featured}
              class={`service-benefit-card ${benefit.tintClass}`}
            >
              <div class="service-benefit-icon" aria-hidden="true">
                <Icon name={benefit.icon ?? 'fas fa-paw'} />
              </div>
              {#if benefit.badge}
                <p class="service-benefit-kicker">{benefit.badge}</p>
              {/if}
              <h3>{benefit.title}</h3>
              <p>{benefit.body}</p>
            </article>
          {/each}
        </div>

        {#if !useSimpleBenefitSwipe}
          <div class="service-benefit-mobile-controls" aria-label="Benefit cards navigation">
            <button
              type="button"
              class="service-benefit-mobile-button"
              aria-label="Previous benefit"
              disabled={activeBenefitIndex === 0}
              on:click={() => scrollBenefits(-1)}
            >
              <Icon name="fas fa-chevron-left" />
            </button>
            <div class="service-benefit-mobile-pager" aria-label="Current benefit">
              {#each benefitCards as _, index}
                <button
                  type="button"
                  class:active={index === activeBenefitIndex}
                  class="service-benefit-mobile-dot"
                  aria-label={`Go to benefit ${index + 1}`}
                  aria-pressed={index === activeBenefitIndex}
                  on:click={() => scrollBenefitTo(index)}
                ></button>
              {/each}
            </div>
            <button
              type="button"
              class="service-benefit-mobile-button"
              aria-label="Next benefit"
              disabled={activeBenefitIndex === benefitCards.length - 1}
              on:click={() => scrollBenefits(1)}
            >
              <Icon name="fas fa-chevron-right" />
            </button>
          </div>
        {/if}
      </div>
    </div>
  </section>

  {#if pageContent.hero.paragraphs?.length}
    <section class:service-intro-pack={isPackWalks} use:reveal class="service-intro reveal-block">
      <div class="page-inner">
        <article class="service-intro-card">
          <div class="service-intro-header">
            <div class="service-intro-badge">
              <div class="service-intro-mark" aria-hidden="true">
                <Icon name="fas fa-paw" />
              </div>
              <p class="service-intro-eyebrow">
                {pageContent.hero.introEyebrow ?? 'The detail'}
              </p>
            </div>
            <h2 class="service-intro-heading">
              {pageContent.hero.introHeading ?? `More about ${pageContent.hero.eyebrow}`}
            </h2>
          </div>
          <div class="service-intro-body">
            <p class="service-intro-lead">{introLeadParagraph}</p>
            {#if heroDetailHighlights.length}
              <div class="service-intro-highlights" aria-label="Service highlights">
                {#each heroDetailHighlights as highlight}
                  <div class="service-intro-highlight">
                    <strong>{highlight.value}</strong>
                    <span>{highlight.label}</span>
                  </div>
                {/each}
              </div>
            {/if}
            {#if introBodyParagraphs.length}
              <div class="service-intro-prose">
                {#each introBodyParagraphs as paragraph}
                  <p>{paragraph}</p>
                {/each}
              </div>
            {/if}
          </div>
        </article>
      </div>
    </section>
  {/if}

  {#if pageContent.decision}
    <section class:service-decision-pack={isPackWalks} class:service-decision-dog={isDogWalking} use:reveal class="service-decision reveal-block" aria-labelledby="service-decision-heading">
      <div class="page-inner">
        <div class="service-decision-card">
          <div class="service-decision-header">
            <span class="service-decision-eyebrow">{decisionEyebrow}</span>
            <h2 id="service-decision-heading" class="service-decision-heading">
              {pageContent.decision.title ?? 'Is this right for your dog?'}
            </h2>
            <p class="service-decision-intro">
              {decisionIntro}
            </p>
          </div>
          <div class="service-decision-grid">
            <div class="service-decision-col service-decision-col-fit">
              <span class="service-decision-col-kicker service-decision-col-kicker-fit">{decisionFitKicker}</span>
              <h3>{pageContent.decision.fitTitle ?? 'A good fit if your dog:'}</h3>
              <ul>
                {#each pageContent.decision.fitItems as item}
                  <li>
                    <span class="service-decision-icon service-decision-icon-yes" aria-hidden="true">
                      <Icon name="fas fa-check" />
                    </span>
                    <span>{item}</span>
                  </li>
                {/each}
              </ul>
            </div>
            <div class="service-decision-col service-decision-col-not">
              <span class="service-decision-col-kicker service-decision-col-kicker-not">{decisionNotKicker}</span>
              <h3>{pageContent.decision.notFitTitle ?? 'Probably not a fit if:'}</h3>
              <ul>
                {#each pageContent.decision.notFitItems as item}
                  <li>
                    <span class="service-decision-icon service-decision-icon-no" aria-hidden="true">
                      <Icon name="fas fa-xmark" />
                    </span>
                    <span>{item}</span>
                  </li>
                {/each}
              </ul>
            </div>
          </div>
          {#if pageContent.decision.footnote}
            <p class="service-decision-footnote">{pageContent.decision.footnote}</p>
          {/if}
        </div>
      </div>
    </section>
  {/if}

  <section
    use:reveal
    class:service-pricing-immediate-mobile={useSimpleBenefitSwipe}
    class:service-pricing-pack={isPackWalks}
    class="service-pricing reveal-block"
  >
    <div class="page-inner">
      <div class="service-section-heading">
        <h2>{pageContent.pricing.title}</h2>
        {#if pageContent.pricing.intro}
          <p>{pageContent.pricing.intro}</p>
        {/if}
      </div>

      <div class:service-plan-grid-three={pageContent.pricing.plans.length === 3} class="service-plan-grid">
        {#each pricingPlans as plan}
          <PricingPlanCard {plan} variant="service" />
        {/each}
      </div>

      {#if pageContent.pricing.scarcityNote}
        <p class="service-plan-scarcity">
          <Icon name="fas fa-clock" />
          {pageContent.pricing.scarcityNote}
        </p>
      {/if}

      <p class="service-plan-reassurance">
        <Icon name="fas fa-shield-heart" />
        Every booking starts with a free, no-obligation Meet &amp; Greet.
      </p>

      <a class="btn btn-yellow btn-mobile-center service-plan-mobile-cta" href="#newlead">Book a Meet &amp; Greet</a>

      {#if pageContent.pricing.extras?.length}
        <div class="service-extras" aria-labelledby="service-extras-heading">
          <div class="service-extras-header">
            <span class="service-extras-eyebrow">
              <Icon name="fas fa-plus" />
              Add-ons
            </span>
            <h3 id="service-extras-heading" class="service-extras-title">Optional extras</h3>
          </div>
          <div class="service-extras-grid">
            {#each pageContent.pricing.extras as extra}
              <article class="service-extra-card">
                <div class="service-extra-card-body">
                  <span class="service-extra-card-label">{extra.label}</span>
                  {#if extra.note}
                    <span class="service-extra-card-note">{extra.note}</span>
                  {/if}
                </div>
                <span class="service-extra-card-price">{extra.price}</span>
              </article>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  </section>

  <section class:service-areas-pack={isPackWalks} use:reveal class="service-areas reveal-block" aria-labelledby="service-areas-heading">
    <div class="page-inner">
      <div class="service-areas-card">
        <div class="service-areas-header">
          <div class="service-areas-copy">
            <div class="service-areas-badge">
              <div class="service-areas-mark" aria-hidden="true">
                <Icon name="fas fa-map-location-dot" />
              </div>
              <span class="service-areas-eyebrow">Coverage map</span>
            </div>
            <h2 id="service-areas-heading" class="service-areas-heading">
              Where we walk across Auckland Central
            </h2>
            <p class="service-areas-lead">
              Free pickup and drop-off across Auckland Central and 17+ nearby suburbs. Selected suburbs link to local pages.
            </p>
          </div>
          <ul class="service-areas-stats" aria-label="Service area summary">
            <li>
              <strong>17+</strong>
              <span>suburbs covered</span>
            </li>
            <li>
              <strong>Free</strong>
              <span>pickup and drop-off</span>
            </li>
            <li>
              <strong>Local</strong>
              <span>parks and route pages</span>
            </li>
          </ul>
        </div>
        <ServiceAreaMap />
        <ul class="service-areas-chips" aria-label="Selected suburbs we cover">
          {#each locationPages as location}
            <li>
              <a class="service-areas-chip" href={`/locations/${location.slug}`}>{location.suburb}</a>
            </li>
          {/each}
        </ul>
      </div>
    </div>
  </section>

  {#if pageContent.faq?.items?.length}
    <section use:reveal class="service-faq reveal-block">
      <div class="page-inner">
        <div class="service-faq-card">
          <FaqSection
            title={pageContent.faq.title ?? 'Frequently asked questions'}
            intro={pageContent.faq.intro}
            faqs={pageContent.faq.items}
          />
        </div>
      </div>
    </section>
  {/if}

  {#if showRelatedServices}
    <section use:reveal class="service-related reveal-block" aria-label="Other services">
      <div class="page-inner">
        <div class="service-section-heading">
          <h2>Explore our other services</h2>
        </div>

        <div class="service-related-grid">
          {#each relatedCards as card, i}
            <a class="service-related-card service-related-tint-{i % 4}" href={card.href}>
              <div class="service-related-icon" aria-hidden="true">
                <Icon name={card.icon} />
              </div>
              <h3>{card.title}</h3>
              {#if card.body}
                <p>{card.body}</p>
              {/if}
              <div class="service-related-meta">
                {#if card.priceFrom}
                  <span class="service-related-price">{card.priceFrom}</span>
                {/if}
                {#if card.pill}
                  <span class="service-related-pill">{card.pill}</span>
                {/if}
              </div>
              <span class="service-related-link" aria-hidden="true">Learn more →</span>
            </a>
          {/each}
        </div>
      </div>
    </section>
  {/if}

  <TestimonialsSection
    heading={pageContent.testimonialsHeading}
    testimonials={content.testimonials}
    seedKey={currentPath}
  />
  <BookingWizard booking={pageContent.booking} pagePath={currentPath} />
</main>

<style>
  .service-page {
    --service-shell-max: 960px;
    --service-copy-max: 680px;
    --service-mobile-shell-pad-x: 18px;
    --service-mobile-shell-pad-y: 24px;
    --service-mobile-shell-pad-y-tight: 20px;
  }

  .service-page {
    background: var(--off-white);
  }

  .service-intro {
    padding: 18px 0 60px;
  }

  .service-intro-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr);
    gap: 44px;
    max-width: var(--service-shell-max);
    margin: 0 auto;
    padding: 38px 40px 40px;
    border-radius: 30px;
    background:
      radial-gradient(circle at top right, rgba(255, 209, 0, 0.14), transparent 30%),
      linear-gradient(180deg, rgba(252, 250, 243, 0.98) 0%, rgba(244, 239, 228, 0.98) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.08),
      0 24px 52px rgba(17, 20, 24, 0.07);
    position: relative;
    overflow: hidden;
  }

  .service-intro-card::before {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 24px;
    pointer-events: none;
  }

  .service-intro-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 48, 33, 0.08) 0%, transparent 72%);
    transform: translate(-28%, -36%);
    pointer-events: none;
  }

  .service-intro-header,
  .service-intro-body {
    position: relative;
    z-index: 1;
  }

  .service-intro-header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: flex-start;
    padding-right: 12px;
  }

  .service-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.07),
      0 12px 24px rgba(17, 20, 24, 0.04);
    backdrop-filter: blur(10px);
  }

  .service-intro-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--gw-green) 0%, var(--green-mid) 100%);
    color: var(--yellow);
    font-size: 17px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 10px 22px rgba(33, 48, 33, 0.18);
  }

  .service-intro-eyebrow,
  .service-decision-eyebrow,
  .service-areas-eyebrow,
  .service-extras-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.84;
  }

  .service-intro-heading {
    margin: 0;
    color: var(--gw-green);
    font-size: clamp(26px, 2.7vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .service-intro-body {
    display: grid;
    gap: 18px;
    align-content: start;
  }

  .service-intro-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .service-intro-highlight {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(var(--white-rgb), 0.72);
    box-shadow:
      inset 0 0 0 1px rgba(var(--brand-rgb), 0.08),
      0 10px 20px rgba(var(--ink-rgb), 0.04);
  }

  .service-intro-highlight strong {
    color: var(--text-brand);
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .service-intro-highlight span {
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.35;
  }

  .service-intro-prose p {
    margin: 0 0 15px;
    color: #454a50;
    font-size: 16px;
    line-height: 1.75;
  }

  .service-intro-prose p:last-child {
    margin-bottom: 0;
  }

  .service-intro-lead {
    margin: 0;
    padding: 18px 20px 18px 22px;
    border-radius: 22px;
    border-left: 4px solid var(--yellow-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(250, 247, 239, 0.92) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.05),
      0 12px 22px rgba(17, 20, 24, 0.04);
    color: #1f242a;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
  }

  @media (max-width: 768px) {
    .service-intro {
      padding: 6px 0 42px;
    }

    .service-intro-card {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: var(--service-mobile-shell-pad-y) var(--service-mobile-shell-pad-x) var(--service-mobile-shell-pad-y-tight);
      border-radius: 24px;
    }

    .service-intro-card::before {
      inset: 12px;
      border-radius: 18px;
    }

    .service-intro-header {
      gap: 16px;
      padding-right: 0;
    }

    .service-intro-badge {
      padding: 8px 14px 8px 8px;
      gap: 10px;
    }

    .service-intro-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      font-size: 16px;
    }

    .service-intro-heading {
      font-size: clamp(24px, 7vw, 30px);
      line-height: 1.12;
    }

    .service-intro-prose p {
      font-size: 15px;
    }

    .service-intro-lead {
      padding: 16px 16px 16px 18px;
      font-size: 16px;
      line-height: 1.65;
    }

    .service-intro-highlights {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  /* ── Decision block ── */
  .service-decision {
    padding: 12px 0 var(--space-section-featured-y);
  }

  .service-decision-card {
    max-width: var(--service-shell-max);
    margin: 0 auto;
    padding: 38px 40px 32px;
    border-radius: 30px;
    background:
      radial-gradient(circle at top right, rgba(255, 209, 0, 0.08), transparent 38%),
      linear-gradient(180deg, #fff 0%, #faf7ef 100%);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.06),
      0 18px 40px rgba(17, 20, 24, 0.06);
  }

  .service-decision-header {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 40rem;
    margin: 0 auto 26px;
    text-align: center;
  }

  .service-decision-heading {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(26px, 2.5vw, 32px);
    line-height: 1.15;
    color: var(--text-heading);
    text-align: center;
    text-wrap: balance;
  }

  .service-decision-intro {
    margin: 0;
    max-width: 34rem;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
  }

  .service-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  .service-decision-col {
    background: #fff;
    border-radius: 22px;
    padding: 22px 22px 18px;
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.06),
      0 8px 20px rgba(17, 20, 24, 0.04);
  }

  .service-decision-col-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 0 0 12px;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .service-decision-col-kicker-fit {
    background: rgba(33, 48, 33, 0.1);
    color: var(--gw-green);
  }

  .service-decision-col-kicker-not {
    background: rgba(255, 209, 0, 0.14);
    color: #5a4500;
  }

  .service-decision-col h3 {
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.25;
    color: var(--text-heading);
    max-width: 18ch;
  }

  .service-decision-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  .service-decision-col li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: var(--text-heading-soft);
    font-size: 15px;
    line-height: 1.55;
  }

  .service-decision-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    font-size: 10px;
  }

  .service-decision-icon-yes {
    background: rgba(33, 48, 33, 0.1);
    color: var(--gw-green);
  }

  .service-decision-icon-no {
    background: rgba(190, 60, 60, 0.1);
    color: #be3c3c;
  }

  .service-decision-footnote {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--brand-rgb), 0.08);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }

  @media (max-width: 768px) {
    .service-decision-card {
      padding: var(--service-mobile-shell-pad-y) var(--service-mobile-shell-pad-x) var(--service-mobile-shell-pad-y-tight);
      border-radius: 24px;
    }

    .service-decision-header {
      gap: 8px;
      margin-bottom: 20px;
    }

    .service-decision-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  /* ── Areas-we-cover (linked suburbs) ── */
  .service-areas {
    padding: 0 0 var(--space-section-featured-y);
  }

  .service-areas-card {
    max-width: var(--service-shell-max);
    margin: 0 auto;
    padding: 34px 36px 30px;
    border-radius: 32px;
    background:
      radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.13), transparent 24%),
      linear-gradient(180deg, rgba(var(--white-rgb), 0.98) 0%, rgba(251, 248, 242, 0.98) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.05),
      0 18px 44px rgba(17, 20, 24, 0.06);
  }

  .service-areas-header {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr);
    gap: 22px;
    align-items: end;
    margin-bottom: 6px;
  }

  .service-areas-copy {
    max-width: 34rem;
  }

  .service-areas-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-bottom: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.07),
      0 12px 24px rgba(17, 20, 24, 0.04);
    backdrop-filter: blur(10px);
  }

  .service-areas-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--gw-green) 0%, var(--green-mid) 100%);
    color: var(--yellow);
    font-size: 17px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 10px 22px rgba(33, 48, 33, 0.18);
  }

  .service-areas-eyebrow {
    margin-bottom: 0;
  }

  .service-areas-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .service-areas-stats li {
    display: grid;
    gap: 4px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(var(--brand-rgb), 0.09);
    border-radius: 18px;
    background: rgba(var(--white-rgb), 0.7);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.4);
    text-align: center;
  }

  .service-areas-stats strong {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-brand);
  }

  .service-areas-stats span {
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.35;
  }

  .service-areas-heading {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.2;
    color: var(--text-heading);
  }

  .service-areas-lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
  }

  .service-areas-chips {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .service-areas-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--brand-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.72);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(var(--ink-rgb), 0.04);
    transition:
      background 0.18s ease,
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .service-areas-chip:hover {
    background: rgba(var(--brand-rgb), 0.92);
    border-color: rgba(var(--brand-rgb), 0.2);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(var(--brand-rgb), 0.16);
  }

  @media (max-width: 768px) {
    .service-areas-header {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 18px;
    }

    .service-areas-stats {
      gap: 10px;
    }

    .service-areas-stats li {
      padding: 12px 10px 14px;
      border-radius: 16px;
    }

    .service-areas-card {
      padding: var(--service-mobile-shell-pad-y) var(--service-mobile-shell-pad-x) var(--service-mobile-shell-pad-y-tight);
      border-radius: 24px;
    }

    .service-areas-badge {
      gap: 10px;
      padding: 8px 14px 8px 8px;
    }

    .service-areas-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      font-size: 16px;
    }
  }

  .service-page-pack .service-section-heading {
    margin-bottom: 30px;
    text-align: center;
  }

  .service-page-pack {
    --service-shell-max: 1120px;
  }

  .service-page-wide {
    --service-shell-max: 1120px;
  }

  .service-page-pack .service-section-heading h2 {
    max-width: 14ch;
    color: var(--text-heading);
    margin-left: auto;
    margin-right: auto;
  }

  .service-page-pack .service-intro-card {
    background:
      radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.1), transparent 28%),
      linear-gradient(135deg, rgba(var(--white-rgb), 0.99) 0%, rgba(248, 247, 242, 0.98) 56%, rgba(244, 241, 234, 0.96) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--brand-rgb), 0.08),
      0 28px 58px rgba(var(--ink-rgb), 0.08);
  }

  .service-page-pack .service-intro-badge {
    background: rgba(var(--white-rgb), 0.76);
  }

  .service-page-pack .service-intro-lead {
    padding: 20px 22px;
    border-left: none;
    background:
      linear-gradient(180deg, rgba(var(--white-rgb), 0.92) 0%, rgba(248, 247, 242, 0.96) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--brand-rgb), 0.08),
      0 14px 28px rgba(var(--ink-rgb), 0.05);
    color: var(--text-heading);
  }

  .service-page-pack .service-intro-lead::before {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--yellow) 0%, rgba(var(--accent-rgb), 0.2) 100%);
  }

  .service-page-pack .service-intro-highlight {
    background: rgba(var(--white-rgb), 0.9);
  }

  .service-page-pack .service-decision-card {
    background:
      radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.09), transparent 30%),
      linear-gradient(180deg, rgba(var(--white-rgb), 0.99) 0%, rgba(248, 246, 240, 0.97) 100%);
  }

  .service-page-pack .service-decision-heading {
    text-align: center;
    max-width: 16ch;
    margin-left: auto;
    margin-right: auto;
  }

  .service-page-pack .service-decision-col-fit {
    background:
      radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.14), transparent 34%),
      linear-gradient(180deg, var(--green-mid) 0%, var(--gw-green) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--white-rgb), 0.08),
      0 12px 26px rgba(var(--ink-rgb), 0.12);
  }

  .service-page-pack .service-decision-col-fit h3,
  .service-page-pack .service-decision-col-fit li {
    color: var(--text-inverse);
  }

  .service-page-pack .service-decision-col-fit .service-decision-icon-yes {
    background: rgba(var(--white-rgb), 0.12);
    color: var(--text-inverse);
  }

  .service-page-pack .service-decision-col-fit .service-decision-col-kicker-fit {
    background: rgba(var(--white-rgb), 0.12);
    color: rgba(var(--white-rgb), 0.92);
  }

  .service-page-pack .service-decision-col-not {
    background:
      linear-gradient(180deg, rgba(var(--white-rgb), 0.98) 0%, rgba(248, 246, 240, 0.96) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--brand-rgb), 0.07),
      0 10px 24px rgba(var(--ink-rgb), 0.04);
  }

  .service-page-pack .service-decision-col-not .service-decision-col-kicker-not {
    background: rgba(var(--accent-rgb), 0.16);
    color: #5a4500;
  }

  .service-page-pack .service-pricing .service-section-heading {
    display: block;
  }

  .service-page-pack .service-plan-scarcity,
  .service-page-pack .service-plan-reassurance {
    margin-left: auto;
    margin-right: auto;
  }

  .service-page-pack .service-areas-card {
    background:
      radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.1), transparent 22%),
      linear-gradient(180deg, rgba(var(--white-rgb), 0.99) 0%, rgba(247, 245, 239, 0.97) 100%);
  }

  .service-page-pack .service-areas-header {
    align-items: end;
  }

  .service-page-pack .service-areas-stats li {
    background: rgba(var(--white-rgb), 0.9);
  }

  .service-page.service-page-dog .service-decision-card {
    background:
      radial-gradient(circle at top left, rgba(var(--brand-rgb), 0.08), transparent 26%),
      radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.08), transparent 22%),
      linear-gradient(180deg, rgba(var(--white-rgb), 0.99) 0%, rgba(246, 248, 245, 0.98) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--brand-rgb), 0.08),
      0 22px 48px rgba(var(--ink-rgb), 0.07);
  }

  .service-page.service-page-dog .service-decision-header {
    gap: 12px;
    margin-bottom: 30px;
  }

  .service-page.service-page-dog .service-decision-eyebrow {
    color: var(--text-brand);
    background: rgba(var(--brand-rgb), 0.09);
  }

  .service-page.service-page-dog .service-decision-intro {
    max-width: 36rem;
  }

  .service-page.service-page-dog .service-decision-grid {
    gap: 18px;
  }

  .service-page.service-page-dog .service-decision-col {
    position: relative;
    border-radius: 24px;
    padding: 24px 24px 20px;
    overflow: hidden;
  }

  .service-page.service-page-dog .service-decision-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), 0.14);
  }

  .service-page.service-page-dog .service-decision-col-fit {
    background:
      radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.12), transparent 30%),
      linear-gradient(180deg, rgba(var(--brand-rgb), 0.94) 0%, rgba(45, 66, 48, 0.98) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--white-rgb), 0.08),
      0 14px 28px rgba(var(--brand-rgb), 0.18);
  }

  .service-page.service-page-dog .service-decision-col-fit::before {
    background: rgba(var(--accent-rgb), 0.72);
  }

  .service-page.service-page-dog .service-decision-col-fit h3,
  .service-page.service-page-dog .service-decision-col-fit li {
    color: rgba(var(--white-rgb), 0.94);
  }

  .service-page.service-page-dog .service-decision-col-fit .service-decision-icon-yes {
    background: rgba(var(--white-rgb), 0.12);
    color: var(--yellow);
  }

  .service-page.service-page-dog .service-decision-col-not {
    background:
      linear-gradient(180deg, rgba(var(--white-rgb), 0.98) 0%, rgba(244, 247, 243, 0.96) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(var(--brand-rgb), 0.07),
      0 10px 24px rgba(var(--ink-rgb), 0.04);
  }

  @media (max-width: 768px) {
    .service-page-pack .service-section-heading h2,
    .service-page-pack .service-decision-heading {
      max-width: none;
    }

    .service-page-pack .service-pricing .service-section-heading {
      display: block;
    }

    .service-page-pack .service-intro-lead {
      padding: 18px;
    }

    .service-page.service-page-dog .service-decision-col {
      padding: 22px 18px 18px;
      border-radius: 22px;
    }

    .service-page.service-page-dog .service-decision-col::before {
      left: 18px;
      right: 18px;
    }
  }

  .service-faq {
    padding: 0 0 var(--space-section-featured-y);
  }

  .service-faq-card {
    max-width: var(--service-shell-max);
    margin: 0 auto;
    padding: 38px 40px 32px;
    border-radius: 30px;
    background: #fff;
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.06),
      0 18px 40px rgba(17, 20, 24, 0.06);
  }

  @media (max-width: 768px) {
    .service-faq-card {
      padding: var(--service-mobile-shell-pad-y) var(--service-mobile-shell-pad-x) var(--service-mobile-shell-pad-y-tight);
      border-radius: 24px;
    }
  }

  .service-related {
    padding: 0 0 var(--space-section-featured-y);
  }

  .service-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .service-related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 34px 28px 30px;
    border-radius: 28px;
    background: var(--off-white);
    box-shadow: 0 10px 28px rgba(17, 20, 24, 0.05);
    color: #000;
    text-decoration: none;
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease;
  }

  @media (hover: hover) {
    .service-related-card:hover {
      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 18px 38px rgba(17, 20, 24, 0.1);
    }
  }

  .service-related-card:active {
    transform: translateY(-1px) scale(0.992);
  }

  .service-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe173 0%, #ffd54a 100%);
    color: var(--gw-green);
    font-size: 28px;
    margin-bottom: 22px;
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.05),
      0 10px 24px rgba(17, 20, 24, 0.08);
  }

  .service-related-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.2;
  }

  .service-related-card p {
    margin: 0;
    color: #34363a;
    font-size: 15px;
    line-height: 1.65;
  }

  .service-related-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .service-related-price {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--gw-green);
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .service-related-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .service-related-link {
    margin-top: 18px;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
  }

  .service-section-heading h2,
  .service-highlight-copy h2 {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(34px, 4vw, 56px);
    color: #000;
  }

  .service-section-heading h2,
  .service-highlight-copy h2 {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }


  .service-section-heading p,
  .service-benefit-card p {
    margin: 20px 0 0;
    max-width: var(--service-copy-max);
    color: #34363a;
    font-size: 17px;
    line-height: 1.7;
  }

  .service-highlight-image {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #f4efe7;
    box-shadow: 0 16px 40px rgba(17, 20, 24, 0.08);
  }

  .service-highlight-image {
    aspect-ratio: 4 / 3;
    max-width: 900px;
    margin: 0 auto;
  }

  .service-highlight-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
    align-items: stretch;
  }

  .service-collage-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #f4efe7;
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.05),
      0 16px 40px rgba(17, 20, 24, 0.08);
  }

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

  .service-collage-card-1 {
    min-height: 250px;
  }

  .service-collage-card-2 {
    min-height: 250px;
  }

  .service-collage-card-3 {
    min-height: 250px;
  }

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

  .service-highlight {
    padding: var(--space-section-page-y) 0 var(--space-section-featured-y);
  }

  .service-highlight-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: center;
    max-width: var(--service-shell-max);
    margin: 0 auto;
  }

  .service-highlight-layout-points {
    align-items: start;
  }

  .service-highlight-copy {
    text-align: left;
    margin-bottom: 0;
  }

  /*
   * Decorative dingbat eyebrow on the highlight section. Inherits sizing /
   * colour from the shared .eyebrow utility; this rule only adjusts the
   * downward spacing relative to the H2 underneath.
   */
  .service-highlight-eyebrow {
    margin: 0 0 16px;
  }

  .service-highlight-points {
    display: grid;
    gap: 16px;
    margin-top: 28px;
  }

  .service-highlight-point {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(33, 48, 33, 0.1);
  }

  .service-highlight-point:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .service-highlight-point h3 {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.2;
    color: #000;
  }

  .service-highlight-point p {
    margin: 0;
    color: #34363a;
    font-size: 15px;
    line-height: 1.65;
  }

  .service-pricing,
  .service-benefits {
    padding: 0 0 var(--space-section-featured-y);
  }

  .service-benefit-shell {
    position: relative;
    overflow: visible;
    max-width: var(--service-shell-max);
    margin: 0 auto;
  }

  .service-benefit-mobile-controls,
  .service-benefit-mobile-pager {
    display: none;
  }

  .service-section-heading {
    text-align: center;
    margin-bottom: 38px;
  }

  .service-section-heading p {
    margin-left: auto;
    margin-right: auto;
  }

  .service-plan-grid {
    max-width: var(--service-shell-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .service-plan-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-benefit-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 246, 0.98) 100%);
    border-radius: 28px;
    padding: 30px 26px;
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.045),
      0 8px 40px rgba(0, 0, 0, 0.06);
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease,
      border-color 0.22s ease;
  }

  .service-benefit-card:active {
    transform: translateY(-2px) scale(0.992);
  }

  .service-benefit-card h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.2;
    color: #000;
  }

  .service-plan-mobile-cta {
    display: none;
  }

  .service-plan-reassurance,
  .service-plan-scarcity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 24px auto 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    color: var(--gw-green);
    font-size: 14px;
    font-weight: 600;
  }

  .service-plan-scarcity {
    background: rgba(255, 209, 0, 0.18);
    color: #5a4500;
  }

  .service-plan-reassurance + .service-plan-reassurance,
  .service-plan-scarcity + .service-plan-reassurance {
    margin-top: 12px;
  }

  :global(.service-plan-reassurance .icon) {
    color: var(--yellow);
    font-size: 14px;
  }

  :global(.service-plan-scarcity .icon) {
    color: #b88800;
    font-size: 14px;
  }

  .service-extras {
    max-width: var(--service-shell-max);
    margin: 40px auto 0;
    padding: 32px 36px 30px;
    border-radius: 28px;
    background:
      radial-gradient(circle at top right, rgba(255, 209, 0, 0.08), transparent 40%),
      linear-gradient(180deg, #fff 0%, #faf7ef 100%);
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.06),
      0 18px 40px rgba(17, 20, 24, 0.06);
  }

  .service-extras-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
  }

  .service-extras-eyebrow :global(.icon) {
    font-size: 9px;
    opacity: 0.82;
  }

  .service-extras-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.2;
    color: var(--text-heading);
  }

  .service-extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }

  .service-extra-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.06),
      0 8px 18px rgba(17, 20, 24, 0.04);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
  }

  @media (hover: hover) {
    .service-extra-card:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(33, 48, 33, 0.1),
        0 12px 24px rgba(17, 20, 24, 0.06);
    }
  }

  .service-extra-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .service-extra-card-label {
    color: var(--text-heading);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  .service-extra-card-note {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
  }

  .service-extra-card-price {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--gw-green);
    white-space: nowrap;
  }

  @media (max-width: 768px) {
    .service-extras {
      padding: var(--service-mobile-shell-pad-y) var(--service-mobile-shell-pad-x) var(--service-mobile-shell-pad-y-tight);
      border-radius: 22px;
      margin-top: 32px;
    }

    .service-extras-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  .service-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .service-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    overflow: hidden;
    border-radius: 28px;
    padding: 28px 26px 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 248, 246, 0.98) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.045),
      0 8px 28px rgba(17, 20, 24, 0.05);
  }

  .service-benefit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 100%);
    pointer-events: none;
  }

  .service-benefit-card::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 26px;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 209, 0, 0.42);
    pointer-events: none;
  }

  .service-benefit-tint-1::before {
    background:
      radial-gradient(circle at top left, rgba(255, 209, 0, 0.08) 0%, rgba(255, 209, 0, 0.03) 24%, transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 100%);
  }

  .service-benefit-tint-2::before {
    background:
      radial-gradient(circle at top right, rgba(229, 214, 194, 0.12) 0%, rgba(229, 214, 194, 0.04) 28%, transparent 54%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 100%);
  }

  .service-benefit-tint-3::before {
    background:
      radial-gradient(circle at top left, rgba(33, 48, 33, 0.04) 0%, rgba(33, 48, 33, 0.015) 28%, transparent 54%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 100%);
  }

  .service-benefit-card-featured {
    background:
      radial-gradient(circle at top right, rgba(255, 209, 0, 0.14) 0%, rgba(255, 209, 0, 0.04) 28%, transparent 52%),
      linear-gradient(180deg, var(--green-mid) 0%, var(--gw-green) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 14px 32px rgba(17, 20, 24, 0.12);
  }

  .service-benefit-card-featured::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  }

  .service-benefit-card-featured::after {
    display: none;
  }

  .service-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--gw-green);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 10px 22px rgba(33, 48, 33, 0.22);
    color: var(--yellow);
    font-size: 19px;
    margin-top: 4px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
  }

  .service-benefit-tint-1 .service-benefit-icon,
  .service-benefit-tint-2 .service-benefit-icon,
  .service-benefit-tint-3 .service-benefit-icon {
    background: var(--gw-green);
    color: var(--yellow);
  }

  .service-benefit-card-featured .service-benefit-icon {
    background: var(--yellow);
    color: var(--gw-green);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.4),
      0 10px 24px rgba(0, 0, 0, 0.22);
  }

  .service-benefit-card h3,
  .service-benefit-card p,
  .service-benefit-kicker {
    position: relative;
    z-index: 1;
  }

  .service-benefit-kicker {
    margin: 0 0 12px;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .service-benefit-card h3 {
    max-width: 16ch;
    text-wrap: balance;
    color: #000;
  }

  .service-benefit-card p {
    margin-top: 0;
    color: #5b6067;
    font-size: 15px;
    line-height: 1.7;
  }

  .service-benefit-card-featured .service-benefit-kicker {
    color: rgba(255, 245, 204, 0.92);
  }

  .service-benefit-card-featured h3 {
    color: #fff;
  }

  .service-benefit-card-featured p {
    color: rgba(255, 255, 255, 0.8);
  }

  @media (hover: hover) {
    .service-benefit-card:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.05),
        0 12px 30px rgba(17, 20, 24, 0.08);
      filter: brightness(1.01);
    }

    .service-benefit-card-featured:hover {
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 16px 36px rgba(17, 20, 24, 0.14);
    }
  }

  @media (max-width: 1024px) {
    .service-plan-grid,
    .service-plan-grid-three,
    .service-related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-benefit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .service-highlight-layout {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .service-section-heading-split {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .service-section-heading-split p {
      justify-self: start;
    }

    .service-highlight-collage {
      max-width: 720px;
    }

    .service-collage-card-2,
    .service-collage-card-3,
    .service-collage-card-1 {
      min-height: 220px;
    }
  }

  @media (max-width: 768px) {
    .service-page {
      --service-shell-max: 100%;
      --service-copy-max: 34rem;
    }

    .service-plan-grid,
    .service-plan-grid-three,
    .service-related-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .service-benefit-grid {
      grid-auto-flow: column;
      grid-auto-columns: calc(100% - 64px);
      grid-template-columns: none;
      align-items: stretch;
      gap: 10px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 8px;
      padding: 0 14px 8px 8px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pinch-zoom;
    }

    .service-benefit-grid::-webkit-scrollbar {
      display: none;
    }

    .service-benefit-card {
      min-height: clamp(230px, 42svh, 320px);
      width: 100%;
      min-width: 0;
      padding: 20px 18px 22px;
      border-radius: 24px;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      touch-action: pan-x;
      user-select: none;
      -webkit-user-select: none;
      transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.24s ease;
    }

    .service-benefit-card.active {
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.05),
        0 12px 24px rgba(17, 20, 24, 0.08);
    }

    .service-benefit-card:last-child {
      margin-right: 2px;
    }

    .service-benefit-grid-simple-swipe {
      display: flex;
      gap: 12px;
      margin: 0 -16px;
      padding: 0 16px 8px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pinch-zoom;
    }

    .service-benefit-grid-simple-swipe::-webkit-scrollbar {
      display: none;
    }

    .service-benefit-grid-simple-swipe .service-benefit-card {
      flex: 0 0 78%;
      min-height: clamp(230px, 42svh, 320px);
      min-width: 0;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    :global(.reveal-ready.reveal-block).service-pricing-immediate-mobile {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .service-highlight-layout {
      gap: 24px;
    }

    .service-highlight-copy {
      text-align: left;
    }

    .service-highlight-points {
      gap: 14px;
      margin-top: 22px;
    }

    .service-highlight-point {
      padding-bottom: 14px;
    }

    .service-highlight-point h3 {
      font-size: 17px;
    }

    .service-highlight-point p {
      font-size: 15px;
      line-height: 1.62;
    }

    .service-pricing,
    .service-benefits,
    .service-related {
      padding-bottom: var(--space-section-featured-y);
    }

    .service-section-heading h2 {
      font-size: clamp(30px, 7vw, 38px);
    }

    .service-benefit-icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      margin-bottom: 14px;
    }

    .service-benefit-card h3 {
      max-width: none;
      font-size: 21px;
      line-height: 1.08;
    }

    .service-benefit-card p {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.55;
    }

    .service-benefit-mobile-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 12px;
    }

    .service-benefit-mobile-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 50%;
      background: rgba(33, 48, 33, 0.08);
      color: var(--gw-green);
      box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
      transition:
        background 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .service-benefit-mobile-button:disabled {
      opacity: 0.35;
    }

    .service-benefit-mobile-pager {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
    }

    .service-benefit-mobile-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: rgba(33, 48, 33, 0.2);
      transition:
        width 0.22s ease,
        background 0.22s ease,
        transform 0.22s ease;
    }

    .service-benefit-mobile-dot.active {
      width: 28px;
      background: var(--yellow);
    }

    .service-benefit-mobile-button:active {
      transform: scale(0.97);
    }

    .service-benefit-mobile-button :global(.icon) {
      font-size: 14px;
    }

    .service-benefit-meta {
      gap: 10px;
      padding-top: 18px;
    }

    .service-benefit-badge {
      min-height: 34px;
      font-size: 11px;
      padding: 7px 12px;
      letter-spacing: 0.015em;
      white-space: normal;
    }

    .service-benefit-meta::before {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
    }

    .service-extra-row {
      flex-direction: column;
      align-items: flex-start;
    }


    .service-plan-mobile-cta {
      display: flex;
      width: fit-content;
      margin: 18px auto 0;
      font-family: var(--font-head);
    }

    .service-highlight-collage {
      display: flex;
      gap: 12px;
      max-width: none;
      margin: 0 -16px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      padding: 0 16px 8px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pinch-zoom;
    }

    .service-highlight-collage::-webkit-scrollbar {
      display: none;
    }

    .service-collage-card {
      flex: 0 0 78%;
      min-height: 168px;
      min-width: 0;
      border-radius: 22px;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .service-collage-card-1,
    .service-collage-card-2,
    .service-collage-card-3 {
      transform: none;
    }
  }
</style>
