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

<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import { reveal } from '$lib/actions/reveal';
  import BookingSection from '$lib/components/BookingSection.svelte';
  import ServiceHero from '$lib/components/ServiceHero.svelte';
  import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import type { ServicePageContent, SiteSharedContent } from '$lib/types';

  export let content: SiteSharedContent;
  export let pageContent: ServicePageContent;
  export let currentPath = '';
  let benefitScroller: HTMLDivElement | null = null;

  function numericPrice(price: string) {
    const value = Number(price.replace(/[^0-9.]/g, ''));
    return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY;
  }

  function decoratePlans<T extends { price: string }>(plans: T[]) {
    const sorted = [...plans]
      .map((plan, index) => ({ plan, index, value: numericPrice(plan.price) }))
      .sort((a, b) => a.value - b.value || a.index - b.index);

    const cheapestIndex = sorted[0]?.index ?? -1;
    const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order]));

    return plans.map((plan, index) => ({
      ...plan,
      isPopular: index === cheapestIndex,
      mobileOrder: mobileOrder.get(index) ?? index
    }));
  }

  $: 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 scrollBenefits(direction: -1 | 1) {
    if (!benefitScroller) return;

    benefitScroller.scrollBy({
      left: direction * Math.round(benefitScroller.clientWidth * 0.86),
      behavior: 'smooth'
    });
  }
</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="service-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="service-inner">
      <div class="service-section-heading">
        <h2>{pageContent.benefits.title}</h2>
        {#if pageContent.benefits.intro}
          <p>{pageContent.benefits.intro}</p>
        {/if}
      </div>

      <p class="service-benefit-mobile-hint">Swipe through the reasons Tiny Gang works so well.</p>

      <div class="service-benefit-shell">
        <div bind:this={benefitScroller} class="service-benefit-grid">
          {#each benefitCards as benefit}
            <article 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" on:click={() => scrollBenefits(-1)}>
            <Icon name="fas fa-chevron-left" />
          </button>
          <button type="button" class="service-benefit-mobile-button" aria-label="Next benefit" 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="service-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}
          <article
            class:service-plan-popular={plan.isPopular}
            class="service-plan-card"
            style={`--mobile-order:${plan.mobileOrder};`}
          >
            {#if plan.isPopular}
              <span class="service-plan-ribbon">Popular</span>
            {/if}

            <h3>{plan.title}</h3>
            <div class="service-plan-price">{plan.price}</div>
            <p class="service-plan-period">{plan.period}</p>

            <ul class="service-plan-features">
              {#each plan.features as feature}
                <li>{feature}</li>
              {/each}
            </ul>

            <a class="btn btn-yellow service-plan-cta" href="#newlead">Book a Meet &amp; Greet</a>
          </article>
        {/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="service-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-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 50px;
  }

  .service-related {
    padding: 0 0 96px;
  }

  .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: 80px 0 96px;
  }

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

  .service-benefit-shell {
    position: relative;
    overflow: visible;
  }

  .service-benefit-mobile-hint {
    display: none;
  }

  .service-benefit-mobile-controls {
    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-plan-card,
  .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-plan-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
  }

  .service-plan-popular {
    border: 2px solid var(--yellow);
  }

  .service-plan-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--yellow);
    color: #000;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media (hover: hover) {
    .service-plan-card:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.055),
        0 10px 40px rgba(0, 0, 0, 0.08);
      filter: brightness(1.015);
    }
  }

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

  :global(.reveal-ready.reveal-block) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 24px), 0);
    transition:
      opacity 0.55s ease,
      transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  :global(.reveal-visible.reveal-block) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

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

  .service-plan-price {
    margin-top: 20px;
    font-family: var(--font-head);
    font-size: 44px;
    line-height: 1;
    color: var(--gw-green);
  }

  .service-plan-period {
    margin: 8px 0 0;
    color: #5d6166;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .service-plan-features {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
  }

  .service-plan-features li {
    position: relative;
    padding-left: 24px;
    color: #34363a;
    font-size: 15px;
    line-height: 1.5;
  }

  .service-plan-features li + li {
    margin-top: 12px;
  }

  .service-plan-features li::before {
    content: '•';
    position: absolute;
    left: 6px;
    top: 0;
    color: var(--yellow);
    font-size: 20px;
    line-height: 1;
  }

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

  .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-inner {
      padding: 0 24px;
    }

    .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: minmax(272px, 84vw);
      grid-template-columns: none;
      gap: 14px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      scroll-padding-left: 24px;
      padding: 0 24px 8px 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

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

    .service-benefit-card {
      padding: 24px 22px 22px;
      border-radius: 24px;
      scroll-snap-align: start;
    }

    .service-plan-card {
      order: var(--mobile-order, 0);
    }

    .service-highlight {
      padding-top: 56px;
      padding-bottom: 72px;
    }

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

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

    .service-benefit-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 18px;
    }

    .service-benefit-card h3 {
      max-width: none;
      font-size: 20px;
    }

    .service-benefit-card p {
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.68;
    }

    .service-benefit-mobile-hint {
      display: block;
      margin: -10px 0 16px;
      color: var(--gray);
      font-size: 13px;
      line-height: 1.5;
    }

    .service-benefit-mobile-controls {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 16px;
    }

    .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,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .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-cta {
      display: none;
    }

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