---
import Layout from "@/layouts/main.astro"
import { siteContent } from "@/content/site-content"

const navItems = [
  { label: "Leistungen", href: "#leistungen" },
  { label: "Team", href: "#team" },
  { label: "Zeiten", href: "#zeiten" },
  { label: "Kontakt", href: "#kontakt" },
]
---

<Layout title="Haarscharf Crimmitschau | Friseur in der Annenstraße">
  <a class="skip-link" href="#top">Zum Inhalt springen</a>

  <header class="site-header-v2">
    <a class="brand-lockup" href="#top" aria-label="Haarscharf Startseite">
      <span class="brand-mark">H</span>
      <span>
        <span class="block font-heading text-lg leading-none">{siteContent.business.name}</span>
        <span class="brand-descriptor">{siteContent.business.descriptor}</span>
      </span>
    </a>

    <nav aria-label="Hauptnavigation" class="hidden items-center gap-1 md:flex">
      {navItems.map((item) => <a class="nav-link-v2" href={item.href}>{item.label}</a>)}
    </nav>

    <div class="flex items-center gap-2">
      <button
        class="mobile-nav-toggle md:hidden"
        aria-expanded="false"
        aria-controls="mobile-nav"
        aria-label="Menü öffnen"
        type="button"
      >
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
          <line x1="3" y1="5" x2="17" y2="5" />
          <line x1="3" y1="10" x2="17" y2="10" />
          <line x1="3" y1="15" x2="17" y2="15" />
        </svg>
      </button>
      <a class="button-link-v2 button-link-v2--compact" href={siteContent.cta.primary.href}>
        Anrufen
      </a>
    </div>
  </header>

  <div id="mobile-nav" class="mobile-nav" aria-label="Mobile Navigation" role="dialog" aria-modal="true">
    <div class="mobile-nav-backdrop"></div>
    <div class="mobile-nav-panel">
      <button class="mobile-nav-close" aria-label="Menü schließen" type="button">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
          <line x1="4" y1="4" x2="16" y2="16" />
          <line x1="16" y1="4" x2="4" y2="16" />
        </svg>
      </button>
      <ul class="mobile-nav-list">
        {navItems.map((item) => (
          <li><a class="mobile-nav-link" href={item.href}>{item.label}</a></li>
        ))}
      </ul>
      <a class="mobile-nav-phone" href={siteContent.business.phone.href}>
        <span class="contact-label">Telefon</span>
        <strong>{siteContent.business.phone.display}</strong>
      </a>
    </div>
  </div>

  <main>
    <!-- Hero: asymmetric, oversized typography, decorative H -->
    <section id="top" class="hero-v2" aria-labelledby="hero-title">
      <div class="hero-deco" aria-hidden="true">H</div>
      <div class="hero-v2__copy">
        <p class="eyebrow-v2">{siteContent.hero.eyebrow}</p>
        <h1 id="hero-title">{siteContent.hero.title}</h1>
        <p class="hero-v2__intro">{siteContent.hero.intro}</p>

        <div class="hero-v2__actions">
          <a class="button-link-v2" href={siteContent.cta.primary.href}>
            {siteContent.cta.primary.label}
          </a>
          <a class="button-link-v2 button-link-v2--ghost" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
            {siteContent.cta.secondary.label}
          </a>
        </div>
      </div>

      <dl class="hero-v2__meta" aria-label="Saloninformationen">
        <div>
          <dt>Adresse</dt>
          <dd>{siteContent.business.address.display}</dd>
        </div>
        <div>
          <dt>Telefon</dt>
          <dd>{siteContent.business.phone.display}</dd>
        </div>
        <div>
          <dt>{siteContent.hours[0].day}</dt>
          <dd>{siteContent.hours[0].time}</dd>
        </div>
      </dl>
    </section>

    <!-- Salon Promise: dark background, asymmetric -->
    <section class="section-v2 promise-v2" aria-labelledby="promise-title">
      <div class="promise-v2__intro">
        <p class="eyebrow-v2">Salonversprechen</p>
        <h2 id="promise-title">Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.</h2>
      </div>

      <div class="promise-v2__grid">
        {
          siteContent.promise.map((item, index) => (
            <article class="promise-v2__card">
              <span class="index-label-v2">{String(index + 1).padStart(2, "0")}</span>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </article>
          ))
        }
      </div>
    </section>

    <!-- Editorial image break: full-bleed, no radius -->
    <figure class="editorial-v2">
      <img
        src="https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=1600&q=80"
        alt="Warm beleuchteter Salon-Innenraum mit Friseurstühlen und Spiegeln"
        width="1600"
        height="900"
        loading="lazy"
        decoding="async"
      />
      <figcaption>Atmosphäre im Salon</figcaption>
    </figure>

    <!-- Services: asymmetric offset grid -->
    <section id="leistungen" class="section-v2 services-v2" aria-labelledby="services-title">
      <div class="section-heading-v2">
        <p class="eyebrow-v2">Leistungen</p>
        <h2 id="services-title">Alles, was ein guter Salonbesuch braucht.</h2>
        <p>Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.</p>
      </div>

      <div class="services-v2__grid">
        {
          siteContent.services.map((service, index) => (
            <article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3rem;" : undefined}>
              <span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span>
              <h3>{service.title}</h3>
              <p>{service.text}</p>
            </article>
          ))
        }
      </div>
    </section>

    <!-- Team: warm surface, bold presentation -->
    <section id="team" class="section-v2 team-v2" aria-labelledby="team-title">
      <div class="section-heading-v2 section-heading-v2--centered">
        <p class="eyebrow-v2">Unser Team</p>
        <h2 id="team-title">Die Menschen hinter den Scheren.</h2>
      </div>

      <figure class="team-image-v2">
        <img
          src="https://images.unsplash.com/photo-1711274093746-b588a17d2716?auto=format&fit=crop&w=1200&q=82"
          alt="Eine Friseurin bei der Arbeit mit Schere"
          width="1200"
          height="600"
          loading="lazy"
          decoding="async"
        />
        <figcaption>Handwerk mit Präzision</figcaption>
      </figure>

      <div class="team-v2__grid">
        {
          siteContent.team.map((member) => (
            <article class="team-v2__card">
              <div class="team-v2__avatar">
                <span>{member.initials}</span>
              </div>
              <h3>{member.name}</h3>
              <p class="team-v2__role">{member.role}</p>
              <p>{member.bio}</p>
            </article>
          ))
        }
      </div>
    </section>

    <!-- Hours: asymmetric -->
    <section id="zeiten" class="section-v2 hours-v2" aria-labelledby="hours-title">
      <div class="section-heading-v2">
        <p class="eyebrow-v2">Öffnungszeiten</p>
        <h2 id="hours-title">Planbar von Montag bis Samstag.</h2>
        <p>Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.</p>
      </div>

      <div class="hours-v2__panel">
        {
          siteContent.hours.map((entry) => (
            <div class="hours-v2__row">
              <span>{entry.day}</span>
              <time>{entry.time}</time>
            </div>
          ))
        }
      </div>
    </section>

    <!-- Trust: dramatic, oversized number -->
    <section class="trust-v2" aria-labelledby="trust-title">
      <div class="trust-v2__rating">
        <p class="eyebrow-v2">Lokales Vertrauen</p>
        <h2 id="trust-title">{siteContent.reviewSummary.rating}</h2>
      </div>
      <p class="trust-v2__copy">
        <strong>{siteContent.reviewSummary.count}</strong>
        <span>{siteContent.reviewSummary.text}</span>
      </p>
    </section>

    <!-- Contact: asymmetric, large address -->
    <section id="kontakt" class="section-v2 contact-v2" aria-labelledby="contact-title">
      <div class="section-heading-v2">
        <p class="eyebrow-v2">Kontakt & Anfahrt</p>
        <h2 id="contact-title">Mitten in Crimmitschau.</h2>
        <p class="contact-note">Der schnellste Weg zum Termin: ein kurzer Anruf.</p>
      </div>

      <div class="contact-v2__layout">
        <div class="contact-v2__left">
          <address class="contact-v2__address">
            <span>{siteContent.business.name}</span>
            <span>{siteContent.business.address.street}</span>
            <span>{siteContent.business.address.postalCode} {siteContent.business.address.city}</span>
          </address>

          <figure class="contact-image-v2">
            <img
              src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=800&q=80"
              alt="Friseur-Werkzeuge: Schere und Kamm auf einer Marmor-Arbeitsfläche"
              width="800"
              height="600"
              loading="lazy"
              decoding="async"
            />
            <figcaption>Detail &amp; Sorgfalt</figcaption>
          </figure>
        </div>

        <div class="contact-v2__actions contact-v2__card">
          <a class="contact-v2__line" href={siteContent.business.phone.href}>
            <span class="contact-label-v2">Telefon</span>
            <strong>{siteContent.business.phone.display}</strong>
          </a>
          <a class="contact-v2__line" href={`mailto:${siteContent.business.email}`}>
            <span class="contact-label-v2">E-Mail</span>
            <strong>{siteContent.business.email}</strong>
          </a>
          <a class="button-link-v2" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
            Route über Google Maps
          </a>
        </div>
      </div>
    </section>

    <!-- Final CTA: full-bleed, high contrast -->
    <section class="final-cta-v2" aria-labelledby="final-cta-title">
      <p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
      <h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
      <div class="final-cta-v2__actions">
        <a class="button-link-v2 button-link-v2--light" href={siteContent.cta.primary.href}>
          {siteContent.business.phone.display}
        </a>
      </div>
    </section>
  </main>

  <script is:inline>
    (function() {
      const toggle = document.querySelector('.mobile-nav-toggle');
      const nav = document.querySelector('#mobile-nav');
      if (!toggle || !nav) return;

      const closeBtn = nav.querySelector('.mobile-nav-close');
      const backdrop = nav.querySelector('.mobile-nav-backdrop');
      const links = nav.querySelectorAll('a');

      function open() {
        nav.classList.add('is-open');
        toggle.setAttribute('aria-expanded', 'true');
        document.body.style.overflow = 'hidden';
        if (links.length) {
          setTimeout(() => links[0].focus(), 0);
        }
        document.addEventListener('keydown', onKeyDown);
      }

      function close() {
        nav.classList.remove('is-open');
        toggle.setAttribute('aria-expanded', 'false');
        document.body.style.overflow = '';
        document.removeEventListener('keydown', onKeyDown);
        toggle.focus();
      }

      function onKeyDown(e) {
        if (e.key === 'Escape') close();
      }

      toggle.addEventListener('click', open);
      if (closeBtn) closeBtn.addEventListener('click', close);
      if (backdrop) backdrop.addEventListener('click', close);
      links.forEach(link => link.addEventListener('click', close));
    })();

    /* Scroll-triggered section reveals */
    (function() {
      var revealSelectors = [
        '.promise-v2__intro',
        '.promise-v2__card',
        '.editorial-v2',
        '.section-heading-v2',
        '.services-v2__card',
        '.team-image-v2',
        '.team-v2__card',
        '.hours-v2__row',
        '.trust-v2__rating',
        '.trust-v2__copy',
        '.contact-v2__left',
        '.contact-v2__actions',
        '.final-cta-v2'
      ];

      var revealElements = document.querySelectorAll(revealSelectors.join(','));
      if (!revealElements.length) return;

      var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            observer.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.12,
        rootMargin: '0px 0px -40px 0px'
      });

      revealElements.forEach(function(el) {
        observer.observe(el);
      });
    })();
  </script>
</Layout>

<style>
  /* ─── V2 Design Tokens ─── */
  :root {
    --v2-bg: oklch(0.965 0.016 78);
    --v2-fg: oklch(0.13 0.035 35);
    --v2-primary: oklch(0.36 0.145 42);
    --v2-primary-dim: oklch(0.3 0.12 42);
    --v2-accent: oklch(0.78 0.14 62);
    --v2-muted: oklch(0.52 0.03 42);
    --v2-surface: oklch(0.94 0.022 75);
    --v2-surface-dark: oklch(0.2 0.04 45);
    --v2-surface-warm: oklch(0.93 0.028 72);
    --v2-hairline: color-mix(in oklch, var(--v2-fg) 14%, transparent);
    --v2-hero-ink: oklch(0.98 0.012 82);
    --v2-radius: 0.25rem;

    /* Animation */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ─── Animation Keyframes ─── */
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.94);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* ─── Hero Load Choreography ─── */
  .hero-deco {
    opacity: 0;
    animation: scale-in 1.2s var(--ease-out-expo) 0.15s forwards;
  }

  .hero-v2__copy .eyebrow-v2 {
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.3s forwards;
  }

  .hero-v2__copy h1 {
    opacity: 0;
    animation: fade-up 0.75s var(--ease-out-expo) 0.42s forwards;
  }

  .hero-v2__intro {
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.54s forwards;
  }

  .hero-v2__actions {
    opacity: 0;
    animation: fade-up 0.6s var(--ease-out-expo) 0.64s forwards;
  }

  .hero-v2__meta {
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.8s forwards;
  }

  /* ─── Scroll-Triggered Reveals ─── */
  .promise-v2__intro,
  .promise-v2__card,
  .editorial-v2,
  .section-heading-v2,
  .services-v2__card,
  .team-image-v2,
  .team-v2__card,
  .hours-v2__row,
  .trust-v2__rating,
  .trust-v2__copy,
  .contact-v2__left,
  .contact-v2__actions,
  .final-cta-v2 {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
  }

  .promise-v2__intro.is-visible,
  .promise-v2__card.is-visible,
  .editorial-v2.is-visible,
  .section-heading-v2.is-visible,
  .services-v2__card.is-visible,
  .team-image-v2.is-visible,
  .team-v2__card.is-visible,
  .hours-v2__row.is-visible,
  .trust-v2__rating.is-visible,
  .trust-v2__copy.is-visible,
  .contact-v2__left.is-visible,
  .contact-v2__actions.is-visible,
  .final-cta-v2.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delays */
  .promise-v2__card:nth-child(1) { transition-delay: 0ms; }
  .promise-v2__card:nth-child(2) { transition-delay: 100ms; }
  .promise-v2__card:nth-child(3) { transition-delay: 200ms; }

  .services-v2__card:nth-child(1) { transition-delay: 0ms; }
  .services-v2__card:nth-child(2) { transition-delay: 120ms; }
  .services-v2__card:nth-child(3) { transition-delay: 240ms; }
  .services-v2__card:nth-child(4) { transition-delay: 360ms; }

  .team-v2__card:nth-child(1) { transition-delay: 0ms; }
  .team-v2__card:nth-child(2) { transition-delay: 100ms; }
  .team-v2__card:nth-child(3) { transition-delay: 200ms; }

  .hours-v2__row:nth-child(1) { transition-delay: 0ms; }
  .hours-v2__row:nth-child(2) { transition-delay: 60ms; }
  .hours-v2__row:nth-child(3) { transition-delay: 120ms; }
  .hours-v2__row:nth-child(4) { transition-delay: 180ms; }
  .hours-v2__row:nth-child(5) { transition-delay: 240ms; }
  .hours-v2__row:nth-child(6) { transition-delay: 300ms; }

  /* Trust number dramatic entrance */
  .trust-v2__rating h2 {
    transition: transform 0.9s var(--ease-out-expo);
    transform: scale(0.9);
  }
  .trust-v2__rating.is-visible h2 {
    transform: scale(1);
  }

  /* ─── Micro-interactions ─── */
  .button-link-v2:active {
    transform: scale(0.97) translateY(-1px);
    transition-duration: 100ms;
  }

  .button-link-v2--compact:active,
  .button-link-v2--ghost:active,
  .button-link-v2--light:active {
    transform: scale(0.97);
    transition-duration: 100ms;
  }

  /* Team avatar hover */
  .team-v2__avatar {
    transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
  }
  .team-v2__card:hover .team-v2__avatar {
    transform: scale(1.06);
  }

  /* Image subtle zoom on hover */
  .editorial-v2 img,
  .team-image-v2 img,
  .contact-image-v2 img {
    transition: transform 0.9s var(--ease-out-quart);
  }
  .editorial-v2:hover img,
  .team-image-v2:hover img,
  .contact-image-v2:hover img {
    transform: scale(1.03);
  }

  /* Mobile nav link stagger */
  .mobile-nav.is-open .mobile-nav-list li {
    opacity: 0;
    animation: fade-up 0.45s var(--ease-out-expo) forwards;
  }
  .mobile-nav.is-open .mobile-nav-list li:nth-child(1) { animation-delay: 0.08s; }
  .mobile-nav.is-open .mobile-nav-list li:nth-child(2) { animation-delay: 0.14s; }
  .mobile-nav.is-open .mobile-nav-list li:nth-child(3) { animation-delay: 0.20s; }
  .mobile-nav.is-open .mobile-nav-list li:nth-child(4) { animation-delay: 0.26s; }

  .mobile-nav.is-open .mobile-nav-phone {
    opacity: 0;
    animation: fade-up 0.45s var(--ease-out-expo) 0.32s forwards;
  }

  /* Reduced motion: ensure visibility */
  @media (prefers-reduced-motion: reduce) {
    .hero-deco,
    .hero-v2__copy .eyebrow-v2,
    .hero-v2__copy h1,
    .hero-v2__intro,
    .hero-v2__actions,
    .hero-v2__meta,
    .promise-v2__intro,
    .promise-v2__card,
    .editorial-v2,
    .section-heading-v2,
    .services-v2__card,
    .team-image-v2,
    .team-v2__card,
    .hours-v2__row,
    .trust-v2__rating,
    .trust-v2__copy,
    .contact-v2__left,
    .contact-v2__actions,
    .final-cta-v2 {
      opacity: 1;
      transform: none;
      animation: none;
      transition: none;
    }
    .trust-v2__rating h2 {
      transform: none;
    }
  }

  /* ─── Base overrides for v2 ─── */
  body {
    background: var(--v2-bg);
    color: var(--v2-fg);
  }

  /* ─── Header ─── */
  .site-header-v2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem);
    color: var(--v2-fg);
    mix-blend-mode: difference;
  }

  .site-header-v2 .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    color: inherit;
    text-decoration: none;
  }

  .site-header-v2 .brand-mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 600;
  }

  .site-header-v2 .brand-descriptor {
    display: block;
    color: color-mix(in oklch, currentColor 65%, transparent);
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .nav-link-v2 {
    border-radius: 999px;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .nav-link-v2:hover,
  .nav-link-v2:focus-visible {
    background: color-mix(in oklch, currentColor 14%, transparent);
  }

  /* ─── Buttons ─── */
  .button-link-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    width: fit-content;
    border: 1.5px solid var(--v2-primary);
    border-radius: var(--v2-radius);
    background: var(--v2-primary);
    color: var(--v2-hero-ink);
    font-weight: 700;
    line-height: 1;
    padding: 0.85rem 1.35rem;
    text-decoration: none;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, border-color 180ms ease;
  }

  .button-link-v2:hover,
  .button-link-v2:focus-visible {
    background: var(--v2-primary-dim);
    border-color: var(--v2-primary-dim);
    transform: translateY(-2px);
  }

  .button-link-v2--compact {
    min-height: 2.45rem;
    padding: 0.55rem 0.95rem;
    background: transparent;
    border-color: color-mix(in oklch, currentColor 45%, transparent);
    color: inherit;
  }

  .button-link-v2--compact:hover,
  .button-link-v2--compact:focus-visible {
    background: var(--v2-fg);
    border-color: var(--v2-fg);
    color: var(--v2-bg);
  }

  .button-link-v2--ghost {
    background: transparent;
    color: var(--v2-fg);
    border-color: var(--v2-fg);
  }

  .button-link-v2--ghost:hover,
  .button-link-v2--ghost:focus-visible {
    background: var(--v2-fg);
    color: var(--v2-bg);
  }

  .button-link-v2--light {
    background: var(--v2-hero-ink);
    border-color: var(--v2-hero-ink);
    color: var(--v2-primary);
  }

  .button-link-v2--light:hover,
  .button-link-v2--light:focus-visible {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-fg);
  }

  /* ─── Eyebrow ─── */
  .eyebrow-v2 {
    color: var(--v2-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: uppercase;
  }

  /* ─── Hero: asymmetric, oversized ─── */
  .hero-v2 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    min-height: 100svh;
    overflow: hidden;
    padding: clamp(8rem, 16vw, 12rem) clamp(1rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem);
    background:
      linear-gradient(170deg, color-mix(in oklch, var(--v2-surface-warm) 60%, transparent) 0%, transparent 55%);
  }

  .hero-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 55vw;
    font-weight: 600;
    line-height: 0.8;
    color: color-mix(in oklch, var(--v2-primary) 4%, transparent);
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  .hero-v2__copy {
    position: relative;
    z-index: 2;
    max-width: 52rem;
  }

  .hero-v2__copy .eyebrow-v2 {
    margin-bottom: 1.25rem;
  }

  .hero-v2__copy h1 {
    font-family: var(--font-heading);
    font-size: clamp(3.8rem, 11vw, 10rem);
    font-weight: 600;
    line-height: 0.88;
    margin: 0 0 1.6rem;
    max-width: 14ch;
  }

  .hero-v2__intro {
    max-width: 38ch;
    color: var(--v2-muted);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.55;
    margin: 0;
  }

  .hero-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 2rem;
  }

  .hero-v2__meta {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    align-self: end;
    margin: 0;
    border-top: 1.5px solid var(--v2-hairline);
  }

  .hero-v2__meta div {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem 0;
    border-bottom: 1.5px solid var(--v2-hairline);
  }

  .hero-v2__meta dt {
    color: var(--v2-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .hero-v2__meta dd {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
  }

  /* ─── Sections ─── */
  .section-v2 {
    padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem);
  }

  .section-heading-v2 {
    display: grid;
    gap: 1rem;
    max-width: 44rem;
  }

  .section-heading-v2--centered {
    text-align: center;
    margin: 0 auto;
  }

  .section-heading-v2 h2,
  .promise-v2__intro h2,
  .final-cta-v2 h2 {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 6.5vw, 6.5rem);
    font-weight: 600;
    line-height: 0.95;
    margin: 0;
  }

  .section-heading-v2 p:not(.eyebrow-v2) {
    color: var(--v2-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
    margin: 0;
  }

  /* ─── Promise: dark, asymmetric ─── */
  .promise-v2 {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(3rem, 6vw, 6rem);
    background: var(--v2-surface-dark);
    color: var(--v2-hero-ink);
    position: relative;
  }

  .promise-v2__intro {
    position: sticky;
    top: 6rem;
    align-self: start;
  }

  .promise-v2__intro .eyebrow-v2 {
    color: var(--v2-accent);
  }

  .promise-v2__intro h2 {
    color: var(--v2-hero-ink);
    margin-top: 1rem;
  }

  .promise-v2__grid {
    display: grid;
    gap: 0;
    border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent);
  }

  .promise-v2__card {
    display: grid;
    grid-template-columns: minmax(4rem, 0.2fr) minmax(0, 0.8fr);
    column-gap: clamp(1.2rem, 3vw, 2.5rem);
    border-bottom: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent);
    padding: clamp(1.5rem, 2.5vw, 2.5rem) 0;
  }

  .index-label-v2 {
    color: var(--v2-accent);
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 0.85;
    opacity: 0.95;
  }

  .promise-v2__card h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
    line-height: 1.05;
    margin: 0 0 0.75rem;
    color: var(--v2-hero-ink);
  }

  .promise-v2__card p {
    color: color-mix(in oklch, var(--v2-hero-ink) 72%, transparent);
    line-height: 1.65;
    margin: 0;
  }

  /* ─── Editorial image: full-bleed, sharp ─── */
  .editorial-v2 {
    margin: 0;
    position: relative;
    width: 100%;
    height: clamp(22rem, 55vw, 38rem);
    overflow: hidden;
  }

  .editorial-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.85) contrast(1.05);
  }

  .editorial-v2 figcaption {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: 1.25rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    background: oklch(0.1 0.02 28 / 55%);
    color: oklch(0.95 0.01 84);
    font-size: 0.78rem;
    font-weight: 500;
  }

  /* ─── Services: asymmetric offset grid ─── */
  .services-v2 {
    background: var(--v2-bg);
  }

  .services-v2__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(3rem, 5vw, 5rem);
  }

  .services-v2__card {
    display: grid;
    gap: 0.75rem;
    padding-bottom: clamp(2rem, 3vw, 3rem);
    border-bottom: 1.5px solid var(--v2-hairline);
  }

  .services-v2__card:nth-child(even) {
    margin-top: 4rem;
  }

  .service-index-v2 {
    color: var(--v2-primary);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.85;
    display: block;
    margin-bottom: 0.5rem;
  }

  .services-v2__card h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.1;
    margin: 0;
  }

  .services-v2__card p {
    color: var(--v2-muted);
    line-height: 1.65;
    margin: 0;
    max-width: 36ch;
  }

  /* ─── Team: warm surface ─── */
  .team-v2 {
    background: var(--v2-surface-warm);
  }

  .team-image-v2 {
    margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    max-width: 72rem;
    position: relative;
    overflow: hidden;
  }

  .team-image-v2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    display: block;
    filter: saturate(0.85) contrast(1.05);
  }

  .team-image-v2 figcaption {
    position: absolute;
    right: 1.25rem;
    bottom: 1rem;
    color: oklch(0.95 0.01 84);
    font-size: 0.78rem;
    text-shadow: 0 1px 4px oklch(0.1 0.02 28 / 50%);
  }

  .team-v2__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
    margin-top: clamp(2rem, 4vw, 4rem);
    border-top: 1.5px solid var(--v2-hairline);
    border-left: 1.5px solid var(--v2-hairline);
  }

  .team-v2__card {
    display: grid;
    justify-items: start;
    gap: 0.625rem;
    border-bottom: 1.5px solid var(--v2-hairline);
    border-right: 1.5px solid var(--v2-hairline);
    padding: clamp(2.2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    transition: background-color 200ms ease;
  }

  .team-v2__card:hover {
    background: color-mix(in oklch, var(--v2-bg) 55%, transparent);
  }

  .team-v2__avatar {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: var(--v2-surface-dark);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--v2-hero-ink);
  }

  .team-v2__card h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.2;
    margin: 0;
  }

  .team-v2__role {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--v2-primary);
    margin: 0;
  }

  .team-v2__card > p:last-child {
    color: var(--v2-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
  }

  /* ─── Hours ─── */
  .hours-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: clamp(3rem, 6vw, 6rem);
    background: var(--v2-surface);
  }

  .hours-v2__panel {
    border-top: 2px solid var(--v2-fg);
    background: color-mix(in oklch, var(--v2-bg) 50%, transparent);
    padding: 0 clamp(0.2rem, 1vw, 0.8rem);
  }

  .hours-v2__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1.5px solid color-mix(in oklch, var(--v2-fg) 16%, transparent);
    padding: 1.15rem 0;
  }

  .hours-v2__row span {
    font-weight: 800;
  }

  .hours-v2__row time {
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ─── Trust: dramatic, oversized ─── */
  .trust-v2 {
    display: grid;
    align-items: center;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--v2-primary);
    color: var(--v2-hero-ink);
    padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
  }

  .trust-v2 .eyebrow-v2 {
    color: var(--v2-accent);
  }

  .trust-v2 h2 {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 14vw, 13rem);
    line-height: 0.85;
    margin: 0.6rem 0 0;
  }

  .trust-v2__copy {
    display: grid;
    gap: 0.75rem;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.55;
    max-width: 38ch;
    margin: 0;
    color: color-mix(in oklch, var(--v2-hero-ink) 82%, transparent);
  }

  .trust-v2__copy strong {
    color: var(--v2-hero-ink);
    font-size: 1.3em;
  }

  /* ─── Contact ─── */
  .contact-v2__layout {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
  }

  .contact-v2__left {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-content: start;
  }

  .contact-v2__address {
    display: grid;
    gap: 0.35rem;
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 4.2rem);
    font-style: normal;
    line-height: 1.05;
    color: var(--v2-fg);
  }

  .contact-image-v2 {
    margin: 0;
    overflow: hidden;
  }

  .contact-image-v2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    filter: saturate(0.85) contrast(1.05);
  }

  .contact-image-v2 figcaption {
    color: var(--v2-muted);
    font-size: 0.82rem;
    margin-top: 0.5rem;
  }

  .contact-v2__actions {
    display: grid;
    gap: 0;
    align-content: start;
  }

  .contact-v2__card {
    border-top: 2px solid var(--v2-fg);
    border-bottom: 1.5px solid var(--v2-hairline);
  }

  .contact-v2__line {
    display: grid;
    gap: 0.5rem;
    border: 0;
    border-bottom: 1.5px solid var(--v2-hairline);
    color: inherit;
    padding: 1.25rem 0;
    text-decoration: none;
    transition: border-color 200ms ease, background-color 200ms ease;
  }

  .contact-v2__line:hover,
  .contact-v2__line:focus-visible {
    background: color-mix(in oklch, var(--v2-surface) 45%, transparent);
    border-color: var(--v2-primary);
  }

  .contact-label-v2 {
    display: block;
    color: var(--v2-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .contact-v2__line strong {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  }

  .contact-v2__actions > .button-link-v2 {
    margin-top: 1.5rem;
  }

  /* ─── Final CTA: full-bleed, dark ─── */
  .final-cta-v2 {
    display: grid;
    gap: 1.75rem;
    justify-items: start;
    background: var(--v2-surface-dark);
    color: var(--v2-hero-ink);
    padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
  }

  .final-cta-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 80% 120%, color-mix(in oklch, var(--v2-primary) 35%, transparent) 0%, transparent 70%);
    pointer-events: none;
  }

  .final-cta-v2 .eyebrow-v2 {
    color: var(--v2-accent);
    position: relative;
    z-index: 2;
  }

  .final-cta-v2 h2 {
    max-width: 14ch;
    position: relative;
    z-index: 2;
    color: var(--v2-hero-ink);
  }

  .final-cta-v2__actions {
    border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 28%, transparent);
    padding-top: 1.5rem;
    position: relative;
    z-index: 2;
  }

  /* ─── Mobile Navigation ─── */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid color-mix(in oklch, currentColor 30%, transparent);
    border-radius: var(--v2-radius);
    background: color-mix(in oklch, currentColor 10%, transparent);
    color: inherit;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    background: color-mix(in oklch, currentColor 18%, transparent);
    border-color: color-mix(in oklch, currentColor 50%, transparent);
  }

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    visibility: hidden;
  }

  .mobile-nav.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  .mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: oklch(0.1 0.02 28 / 60%);
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .mobile-nav.is-open .mobile-nav-backdrop {
    opacity: 1;
  }

  .mobile-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(22rem, 85vw);
    background: var(--v2-bg);
    color: var(--v2-fg);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px oklch(0.1 0.02 28 / 15%);
  }

  .mobile-nav.is-open .mobile-nav-panel {
    transform: translateX(0);
  }

  .mobile-nav-close {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid var(--v2-hairline);
    border-radius: var(--v2-radius);
    background: transparent;
    color: var(--v2-fg);
    cursor: pointer;
    transition: background-color 180ms ease;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:focus-visible {
    background: var(--v2-surface);
  }

  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mobile-nav-link {
    display: block;
    padding: 0.9rem 0.5rem;
    border-radius: var(--v2-radius);
    color: var(--v2-fg);
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 180ms ease;
    min-height: 44px;
    line-height: 1.2;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible {
    background: var(--v2-surface);
  }

  .mobile-nav-phone {
    margin-top: auto;
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: var(--v2-radius);
    border: 1.5px solid var(--v2-hairline);
    background: color-mix(in oklch, var(--v2-surface) 50%, transparent);
    color: var(--v2-fg);
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  .mobile-nav-phone:hover,
  .mobile-nav-phone:focus-visible {
    background: var(--v2-surface);
    border-color: var(--v2-primary);
  }

  .mobile-nav-phone strong {
    font-size: 1.4rem;
    font-weight: 700;
  }

  /* ─── Mobile overrides ─── */
  @media (max-width: 820px) {
    .hero-v2 {
      grid-template-columns: 1fr;
      min-height: 100svh;
    }

    .hero-v2__copy h1 {
      font-size: clamp(2.8rem, 12vw, 5rem);
    }

    .hero-v2__meta {
      margin-top: 2rem;
    }

    .promise-v2,
    .hours-v2,
    .trust-v2,
    .contact-v2__layout {
      grid-template-columns: 1fr;
    }

    .promise-v2__intro {
      position: static;
    }

    .services-v2__grid {
      grid-template-columns: 1fr;
    }

    .services-v2__card:nth-child(even) {
      margin-top: 0;
    }

    .trust-v2 h2 {
      font-size: clamp(4.5rem, 18vw, 8rem);
    }

    .site-header-v2 {
      grid-template-columns: 1fr auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
</style>