gw-svelte/src/lib/components/ServiceLandingPage.svelte

<script lang="ts">
  import { onMount, tick } from 'svelte';
  import Icon from '$lib/components/Icon.svelte';
  import { reveal } from '$lib/actions/reveal';
  import BookingSection from '$lib/components/BookingSection.svelte';
  import PricingPlanCard from '$lib/components/PricingPlanCard.svelte';
  import ServiceHero from '$lib/components/ServiceHero.svelte';
  import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import { decoratePlans } from '$lib/utils/pricing';
  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);
  $: benefitCards = pageContent.benefits.items.map((benefit, index) => ({
    ...benefit,
    tintClass: `service-benefit-tint-${(index % 3) + 1}`,
    featured: index === 0
  }));
  $: 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;
  }

  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);
  }

  async function scrollBenefitTo(index: number) {
    if (!benefitScroller || !isMobileViewport()) return;

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

    activeBenefitIndex = index;
    await tick();
    targetCard.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'start'
    });
  }

  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);
      } 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">
  <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">
          {#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>

        <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)}
              />
            {/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>
      </div>
    </div>
  </section>

  <section use:reveal 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">
          <div class="service-extras-heading">Extras</div>
          {#each pageContent.pricing.extras as extra}
            <div class="service-extra-row">
              <span class="service-extra-label">
                {extra.label}
                {#if extra.note}
                  <span class="service-extra-pill">{extra.note}</span>
                {/if}
              </span>
              <span class="service-extra-price">{extra.price}</span>
            </div>
          {/each}
        </div>
      {/if}
    </div>
  </section>

  {#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}
  />
  <BookingSection booking={pageContent.booking} />
</main>

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

  .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: 680px;
    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;
  }

  .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;
  }

  .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 {
    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 {
    margin-top: 30px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
    overflow: hidden;
  }

  .service-extras-heading {
    padding: 18px 28px 14px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #ece9e3;
  }

  .service-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 28px;
    color: #34363a;
    font-size: 16px;
    line-height: 1.4;
  }

  .service-extra-row + .service-extra-row {
    border-top: 1px solid #ece9e3;
  }

  .service-extra-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .service-extra-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
  }

  .service-extra-price {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--gw-green);
    white-space: nowrap;
  }

  .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 {
    background: linear-gradient(90deg, #ffd54a 0%, rgba(242, 191, 47, 0.72) 100%);
  }

  .service-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 250, 236, 0.96) 0%, rgba(242, 191, 47, 0.18) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.04),
      0 8px 20px rgba(17, 20, 24, 0.08);
    color: var(--gw-green);
    font-size: 17px;
    margin-top: 4px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
  }

  .service-benefit-tint-1 .service-benefit-icon {
    background: linear-gradient(180deg, rgba(255, 250, 236, 0.96) 0%, rgba(242, 191, 47, 0.16) 100%);
  }

  .service-benefit-tint-2 .service-benefit-icon {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(229, 214, 194, 0.42) 100%);
  }

  .service-benefit-tint-3 .service-benefit-icon {
    background: linear-gradient(180deg, rgba(250, 252, 248, 0.96) 0%, rgba(33, 48, 33, 0.08) 100%);
  }

  .service-benefit-card-featured .service-benefit-icon {
    background: linear-gradient(180deg, rgba(255, 248, 214, 0.96) 0%, rgba(255, 209, 0, 0.34) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 10px 24px rgba(0, 0, 0, 0.16);
  }

  .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-plan-grid,
    .service-plan-grid-three,
    .service-related-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .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-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 {
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: 420px;
    }

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