"use client";

import Image from "next/image";
import {
  ArrowRight,
  Building2,
  Check,
  ChevronLeft,
  ChevronRight,
  Home,
  Menu,
  MessageCircle,
  Phone,
  ShieldCheck,
  Sparkles,
  X,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";

type Service = {
  id: string;
  label: string;
  eyebrow: string;
  title: string;
  description: string;
  image: string;
  tasks: string[];
};

const highlights = [
  {
    eyebrow: "Residential cleaning",
    title: "A cleaner home changes how the whole space feels.",
    image: "/images/lark-editorial/home-cleaning.jpg",
  },
  {
    eyebrow: "Commercial cleaning",
    title: "Professional spaces that stay ready for business.",
    image: "/images/lark-editorial/office-cleaning.jpg",
  },
  {
    eyebrow: "Deep cleaning",
    title: "Detailed attention beyond the immediately visible.",
    image: "/images/lark-editorial/bathroom-cleaning.jpg",
  },
  {
    eyebrow: "Glass and windows",
    title: "A clearer finish from every angle.",
    image: "/images/lark-editorial/window-cleaning.jpg",
  },
  {
    eyebrow: "Floor care",
    title: "Professional equipment. Consistent results.",
    image: "/images/lark-editorial/floor-cleaning.jpg",
  },
];

const services: Service[] = [
  {
    id: "home",
    label: "Homes",
    eyebrow: "Residential cleaning",
    title: "A complete clean for the spaces you live in.",
    description:
      "Cleaning support for apartments, villas and residential properties, with careful attention to everyday surfaces, rooms and frequently used areas.",
    image: "/images/lark-editorial/home-cleaning.jpg",
    tasks: [
      "Living areas and bedrooms",
      "Kitchens and worktops",
      "Bathrooms and fixtures",
      "Floor cleaning and finishing",
      "Dusting and surface care",
      "Custom cleaning requests",
    ],
  },
  {
    id: "office",
    label: "Offices",
    eyebrow: "Commercial cleaning",
    title: "A workspace that always feels ready.",
    description:
      "Reliable cleaning for offices, commercial spaces, shared areas and customer-facing environments.",
    image: "/images/lark-editorial/office-cleaning.jpg",
    tasks: [
      "Desks and shared surfaces",
      "Meeting and reception areas",
      "Washrooms and pantry areas",
      "Floor and carpet care",
      "High-contact touchpoints",
      "Flexible service scheduling",
    ],
  },
  {
    id: "deep",
    label: "Deep clean",
    eyebrow: "Detailed cleaning",
    title: "For spaces that need a complete reset.",
    description:
      "A deeper level of cleaning for difficult areas, accumulated residue, fixtures, corners and overlooked surfaces.",
    image: "/images/lark-editorial/bathroom-cleaning.jpg",
    tasks: [
      "Detailed kitchen cleaning",
      "Bathroom descaling",
      "Fixtures and fittings",
      "Hard-to-reach areas",
      "Edges, corners and skirting",
      "Detailed floor cleaning",
    ],
  },
  {
    id: "glass",
    label: "Glass",
    eyebrow: "Glass and window care",
    title: "Clarity that transforms the entire room.",
    description:
      "Professional care for windows, internal glass, partitions and reflective surfaces.",
    image: "/images/lark-editorial/window-cleaning.jpg",
    tasks: [
      "Interior windows",
      "Glass doors and partitions",
      "Frames and accessible edges",
      "Reflective surfaces",
      "Mark and residue removal",
      "Final finish inspection",
    ],
  },
  {
    id: "floors",
    label: "Floors",
    eyebrow: "Professional floor care",
    title: "The right method for every surface.",
    description:
      "Professional floor cleaning using suitable tools and methods for the material and condition of the space.",
    image: "/images/lark-editorial/floor-cleaning.jpg",
    tasks: [
      "Hard-floor cleaning",
      "Surface-appropriate methods",
      "Edge and corner attention",
      "Commercial floor care",
      "Detailed finishing",
      "Routine maintenance options",
    ],
  },
  {
    id: "move",
    label: "Move in/out",
    eyebrow: "Property preparation",
    title: "Ready for handover. Ready for what comes next.",
    description:
      "Detailed property cleaning before moving in, after moving out or ahead of a new tenant, resident or guest.",
    image: "/images/lark-editorial/housekeeping.jpg",
    tasks: [
      "Empty-property cleaning",
      "Cabinets and storage areas",
      "Kitchen and bathroom detail",
      "Floor and surface cleaning",
      "Final preparation",
      "Apartment and villa service",
    ],
  },
];

const process = [
  {
    number: "01",
    title: "Tell us about your space.",
    text: "Share the property type, approximate size, preferred timing and the kind of cleaning required.",
  },
  {
    number: "02",
    title: "Receive the right recommendation.",
    text: "We review the requirement and recommend the most suitable service for your property.",
  },
  {
    number: "03",
    title: "Professional cleaning begins.",
    text: "Our team carries out the agreed work using appropriate equipment, materials and methods.",
  },
  {
    number: "04",
    title: "Final inspection and handover.",
    text: "The completed areas are checked before the service is considered finished.",
  },
];

function scrollToCard(
  container: HTMLDivElement | null,
  direction: "left" | "right",
) {
  if (!container) return;

  container.scrollBy({
    left: direction === "right" ? container.clientWidth * 0.72 : -container.clientWidth * 0.72,
    behavior: "smooth",
  });
}

export default function LarkAppleHome() {
  const [activeService, setActiveService] = useState(services[0]);
  const [menuOpen, setMenuOpen] = useState(false);
  const [comparison, setComparison] = useState(50);
  const [heroProgress, setHeroProgress] = useState(0);

  const heroRef = useRef<HTMLElement>(null);
  const highlightRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let animationFrame = 0;

    const updateHero = () => {
      cancelAnimationFrame(animationFrame);

      animationFrame = requestAnimationFrame(() => {
        if (!heroRef.current) return;

        const rect = heroRef.current.getBoundingClientRect();
        const distance = Math.max(heroRef.current.offsetHeight - window.innerHeight, 1);
        const value = Math.min(1, Math.max(0, -rect.top / distance));

        setHeroProgress(value);
      });
    };

    updateHero();

    window.addEventListener("scroll", updateHero, { passive: true });
    window.addEventListener("resize", updateHero);

    return () => {
      cancelAnimationFrame(animationFrame);
      window.removeEventListener("scroll", updateHero);
      window.removeEventListener("resize", updateHero);
    };
  }, []);

  const introOpacity = Math.max(0, 1 - heroProgress * 3.3);
  const imageOpacity = Math.min(1, Math.max(0, (heroProgress - 0.12) * 4.5));
  const finalOpacity = Math.min(1, Math.max(0, (heroProgress - 0.58) * 4.8));

  return (
    <main className="lark-pro">
      <header className="global-header">
        <div className="global-header-inner">
          <a href="#overview" className="brand-logo" aria-label="Lark Shine home">
            <Image
              src="/images/lark-shine-wordmark.png"
              alt="Lark Shine"
              width={1036}
              height={314}
              priority
            />
          </a>

          <nav className="desktop-navigation">
            <a href="#overview">Overview</a>
            <a href="#highlights">Highlights</a>
            <a href="#services">Services</a>
            <a href="#standard">Our standard</a>
            <a href="#process">Process</a>
          </nav>

          <div className="header-actions">
            <a
              href="https://wa.me/971555822480"
              target="_blank"
              rel="noreferrer"
              className="header-quote"
            >
              Get a quote
            </a>

            <button
              className="mobile-menu-button"
              onClick={() => setMenuOpen((value) => !value)}
              aria-label="Toggle menu"
            >
              {menuOpen ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>
        </div>

        {menuOpen && (
          <nav className="mobile-navigation">
            <a href="#overview" onClick={() => setMenuOpen(false)}>Overview</a>
            <a href="#highlights" onClick={() => setMenuOpen(false)}>Highlights</a>
            <a href="#services" onClick={() => setMenuOpen(false)}>Services</a>
            <a href="#standard" onClick={() => setMenuOpen(false)}>Our standard</a>
            <a href="#process" onClick={() => setMenuOpen(false)}>Process</a>
            <a href="#contact" onClick={() => setMenuOpen(false)}>Contact</a>
          </nav>
        )}
      </header>

      <div className="announcement-bar">
        <span>
          Professional residential and commercial cleaning services.
        </span>
        <a href="#contact">
          Book through WhatsApp
          <ArrowRight size={14} />
        </a>
      </div>

      <section ref={heroRef} id="overview" className="hero-story">
        <div className="hero-sticky">
          <div
            className="hero-opening"
            style={{
              opacity: introOpacity,
              transform: `translate3d(0, ${heroProgress * -90}px, 0)`,
            }}
          >
            <p>Lark Shine Building Cleaning Services LLC</p>

            <h1>
              Cleaning.
              <span>Reimagined.</span>
            </h1>
          </div>

          <div
            className="hero-visual"
            style={{
              opacity: imageOpacity,
              transform: `scale(${0.78 + imageOpacity * 0.22 + finalOpacity * 0.08})`,
            }}
          >
            <Image
              src="/images/lark-editorial/office-cleaning.jpg"
              alt="Professional cleaning in a premium commercial space"
              fill
              priority
              sizes="100vw"
            />

            <div className="hero-visual-overlay" />
          </div>

          <div
            className="hero-final-copy"
            style={{
              opacity: finalOpacity,
              transform: `translate3d(0, ${50 - finalOpacity * 50}px, 0)`,
            }}
          >
            <p>Professional residential and commercial cleaning</p>

            <h2>
              Professional care.
              <span>Visible in every detail.</span>
            </h2>

            <div className="hero-final-actions">
              <a
                href="https://wa.me/971555822480"
                target="_blank"
                rel="noreferrer"
              >
                Request a quote
              </a>

              <a href="#highlights">
                Explore Lark Shine
                <ArrowRight size={17} />
              </a>
            </div>
          </div>

          <div className="hero-scroll-progress">
            <span style={{ width: `${Math.max(5, heroProgress * 100)}%` }} />
          </div>
        </div>
      </section>

      <section id="highlights" className="highlights-section">
        <div className="section-shell highlights-heading">
          <h2>Get the highlights.</h2>

          <div className="highlight-controls">
            <button
              onClick={() => scrollToCard(highlightRef.current, "left")}
              aria-label="Previous highlight"
            >
              <ChevronLeft />
            </button>

            <button
              onClick={() => scrollToCard(highlightRef.current, "right")}
              aria-label="Next highlight"
            >
              <ChevronRight />
            </button>
          </div>
        </div>

        <div ref={highlightRef} className="highlight-track">
          {highlights.map((highlight) => (
            <article key={highlight.eyebrow} className="highlight-card">
              <Image
                src={highlight.image}
                alt={highlight.eyebrow}
                fill
                sizes="(max-width: 767px) 88vw, 78vw"
              />

              <div className="highlight-card-overlay" />

              <div className="highlight-card-content">
                <p>{highlight.eyebrow}</p>
                <h3>{highlight.title}</h3>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="standard" className="standard-intro">
        <div className="section-shell">
          <p className="chapter-label">The Lark Shine standard</p>

          <h2>
            Detailed
            <span>by design.</span>
          </h2>

          <p className="chapter-description">
            Different spaces, materials and surfaces require different approaches.
            We focus on suitable methods, professional equipment and careful finishing
            instead of treating every cleaning requirement the same.
          </p>
        </div>
      </section>

      <section className="standard-visual">
        <Image
          src="/images/lark-editorial/home-cleaning.jpg"
          alt="Detailed professional residential cleaning"
          fill
          sizes="100vw"
        />

        <div className="standard-overlay" />

        <div className="detail-marker marker-one">
          <span />
          <div>
            <strong>Surface-aware care</strong>
            <p>Cleaning methods selected for the area and material.</p>
          </div>
        </div>

        <div className="detail-marker marker-two">
          <span />
          <div>
            <strong>High-contact attention</strong>
            <p>Frequently used surfaces receive deliberate attention.</p>
          </div>
        </div>

        <div className="detail-marker marker-three">
          <span />
          <div>
            <strong>Professional equipment</strong>
            <p>Appropriate tools for more consistent results.</p>
          </div>
        </div>

        <div className="detail-marker marker-four">
          <span />
          <div>
            <strong>Final inspection</strong>
            <p>Completed areas are reviewed before handover.</p>
          </div>
        </div>
      </section>

      <section id="services" className="services-chapter">
        <div className="section-shell services-heading">
          <p className="chapter-label">Services</p>

          <h2>
            One company.
            <span>Every level of clean.</span>
          </h2>
        </div>

        <div className="service-selector-shell">
          <div className="service-tabs" role="tablist">
            {services.map((service) => (
              <button
                key={service.id}
                type="button"
                className={activeService.id === service.id ? "active" : ""}
                onClick={() => setActiveService(service)}
                role="tab"
                aria-selected={activeService.id === service.id}
              >
                {service.label}
              </button>
            ))}
          </div>

          <div className="service-experience">
            <div className="service-image">
              <Image
                key={activeService.image}
                src={activeService.image}
                alt={activeService.title}
                fill
                sizes="(max-width: 900px) 100vw, 58vw"
              />

              <div className="service-image-shade" />
              <span>{activeService.eyebrow}</span>
            </div>

            <div className="service-information">
              <p>{activeService.eyebrow}</p>

              <h3>{activeService.title}</h3>

              <p className="service-description">
                {activeService.description}
              </p>

              <div className="service-task-grid">
                {activeService.tasks.map((task) => (
                  <div key={task}>
                    <Check size={16} />
                    <span>{task}</span>
                  </div>
                ))}
              </div>

              <a
                href={`https://wa.me/971555822480?text=${encodeURIComponent(
                  `Hello Lark Shine, I would like to request information about ${activeService.label} cleaning.`,
                )}`}
                target="_blank"
                rel="noreferrer"
                className="service-cta"
              >
                Request this service
                <ArrowRight size={17} />
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="equipment-chapter">
        <div className="equipment-background">
          <Image
            src="/images/lark-editorial/floor-cleaning.jpg"
            alt="Professional floor cleaning equipment"
            fill
            sizes="100vw"
          />
        </div>

        <div className="equipment-overlay" />

        <div className="section-shell equipment-content">
          <p className="chapter-label">Professional equipment</p>

          <h2>
            More capability.
            <span>More consistent results.</span>
          </h2>

          <p>
            Equipment and materials should match the surface, environment and
            level of cleaning required. This helps deliver a more thorough,
            controlled and consistent finish.
          </p>

          <div className="equipment-features">
            <div>
              <strong>Floor care</strong>
              <span>Equipment suited to larger and frequently used areas.</span>
            </div>

            <div>
              <strong>Glass care</strong>
              <span>Tools designed for clearer, more controlled finishing.</span>
            </div>

            <div>
              <strong>Detailed cleaning</strong>
              <span>Access to edges, fixtures and difficult areas.</span>
            </div>
          </div>
        </div>
      </section>

      <section id="process" className="process-chapter">
        <div className="section-shell process-layout">
          <div className="process-heading">
            <p className="chapter-label">The process</p>

            <h2>
              Professional from
              <span>booking to finish.</span>
            </h2>
          </div>

          <div className="process-list">
            {process.map((step) => (
              <article key={step.number}>
                <span>{step.number}</span>

                <div>
                  <h3>{step.title}</h3>
                  <p>{step.text}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="difference-chapter">
        <div className="section-shell difference-heading">
          <p className="chapter-label">The result</p>

          <h2>
            See the
            <span>difference.</span>
          </h2>

          <p>
            Drag the control to compare a space before detailed care and after
            professional preparation.
          </p>
        </div>

        <div className="comparison-shell">
          <div className="comparison">
            <Image
              src="/images/lark-editorial/bathroom-cleaning.jpg"
              alt="Cleaning result"
              fill
              sizes="100vw"
              className="comparison-after"
            />

            <div
              className="comparison-before"
              style={{ width: `${comparison}%` }}
            >
              <Image
                src="/images/lark-editorial/home-cleaning.jpg"
                alt="Space before cleaning"
                fill
                sizes="100vw"
              />
              <div className="before-treatment" />
            </div>

            <div
              className="comparison-line"
              style={{ left: `${comparison}%` }}
            >
              <span>
                <ChevronLeft size={17} />
                <ChevronRight size={17} />
              </span>
            </div>

            <span className="comparison-label before-label">Before</span>
            <span className="comparison-label after-label">After</span>

            <input
              type="range"
              min="5"
              max="95"
              value={comparison}
              onChange={(event) => setComparison(Number(event.target.value))}
              aria-label="Before and after comparison"
            />
          </div>
        </div>
      </section>

      <section className="company-chapter">
        <div className="section-shell company-layout">
          <div className="company-heading">
            <p className="chapter-label">About Lark Shine</p>

            <h2>
              Cleaning support
              <span>for every kind of space.</span>
            </h2>
          </div>

          <div className="company-copy">
            <p>
              Lark Shine Building Cleaning Services LLC provides professional
              residential and commercial cleaning services for apartments,
              villas, offices, buildings and commercial properties.
            </p>

            <p>
              Our services include routine cleaning, deep cleaning, glass and
              window care, floor cleaning and property preparation for move-in,
              move-out and handover requirements.
            </p>

            <div className="audience-grid">
              <div>
                <Home size={25} />
                <strong>Residential</strong>
                <span>
                  Homeowners, tenants, landlords, apartments and villas.
                </span>
              </div>

              <div>
                <Building2 size={25} />
                <strong>Commercial</strong>
                <span>
                  Offices, workplaces, buildings and commercial facilities.
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="proof-chapter">
        <div className="section-shell">
          <p className="proof-intro">Built around what matters.</p>

          <div className="proof-grid">
            <article>
              <Sparkles />
              <strong>Detailed</strong>
              <span>Attention beyond visible surfaces.</span>
            </article>

            <article>
              <ShieldCheck />
              <strong>Professional</strong>
              <span>Suitable tools, methods and communication.</span>
            </article>

            <article>
              <Home />
              <strong>Residential</strong>
              <span>Support for apartments, villas and homes.</span>
            </article>

            <article>
              <Building2 />
              <strong>Commercial</strong>
              <span>Cleaning for offices and business properties.</span>
            </article>
          </div>
        </div>
      </section>

      <section id="contact" className="contact-chapter">
        <div className="contact-background">
          <Image
            src="/images/lark-editorial/window-cleaning.jpg"
            alt="Professional Lark Shine cleaning service"
            fill
            sizes="100vw"
          />
        </div>

        <div className="contact-overlay" />

        <div className="contact-content">
          <Image
            src="/images/lark-shine-icon.png"
            alt="Lark Shine"
            width={110}
            height={110}
          />

          <p>Choose the right clean for your space.</p>

          <h2>
            Ready for a
            <span>cleaner space?</span>
          </h2>

          <div className="contact-actions">
            <a
              href="https://wa.me/971555822480"
              target="_blank"
              rel="noreferrer"
            >
              <MessageCircle size={19} />
              Get a quote
            </a>

            <a href="tel:+971555822480">
              <Phone size={18} />
              +971 55 582 2480
            </a>
          </div>
        </div>
      </section>

      <footer className="lark-footer">
        <div className="section-shell">
          <div className="footer-top">
            <Image
              src="/images/lark-shine-wordmark.png"
              alt="Lark Shine"
              width={1036}
              height={314}
            />

            <p>
              Professional residential and commercial cleaning services.
            </p>
          </div>

          <div className="footer-links">
            <div>
              <strong>Explore</strong>
              <a href="#overview">Overview</a>
              <a href="#highlights">Highlights</a>
              <a href="#services">Services</a>
              <a href="#process">Our process</a>
            </div>

            <div>
              <strong>Services</strong>
              <a href="#services">Residential</a>
              <a href="#services">Commercial</a>
              <a href="#services">Deep cleaning</a>
              <a href="#services">Glass and floor care</a>
            </div>

            <div>
              <strong>Contact</strong>
              <a href="tel:+971555822480">+971 55 582 2480</a>
              <a
                href="https://wa.me/971555822480"
                target="_blank"
                rel="noreferrer"
              >
                WhatsApp enquiry
              </a>
            </div>
          </div>

          <div className="footer-bottom">
            <span>
              © {new Date().getFullYear()} Lark Shine Building Cleaning
              Services LLC
            </span>

            <span>Residential and commercial enquiries welcome.</span>
          </div>
        </div>
      </footer>

      <style jsx global>{`
        :root {
          --lark-blue: #0071e3;
          --lark-blue-hover: #0077ed;
          --lark-text: #1d1d1f;
          --lark-muted: #6e6e73;
          --lark-light-muted: #a1a1a6;
          --lark-background: #f5f5f7;
          --lark-border: #d2d2d7;
          --lark-shell: min(1440px, calc(100% - 88px));
        }

        * {
          box-sizing: border-box;
        }

        html {
          scroll-behavior: smooth;
        }

        body {
          margin: 0;
        }

        button,
        input {
          font: inherit;
        }

        a {
          text-decoration: none;
        }

        .lark-pro {
          overflow: clip;
          background: white;
          color: var(--lark-text);
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            "SF Pro Display",
            "SF Pro Text",
            "Helvetica Neue",
            Arial,
            sans-serif;
          -webkit-font-smoothing: antialiased;
        }

        .section-shell {
          width: var(--lark-shell);
          margin-inline: auto;
        }

        .global-header {
          position: fixed;
          z-index: 1000;
          top: 0;
          right: 0;
          left: 0;
          background: rgba(255, 255, 255, 0.82);
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
          backdrop-filter: saturate(180%) blur(22px);
          -webkit-backdrop-filter: saturate(180%) blur(22px);
        }

        .global-header-inner {
          display: grid;
          width: var(--lark-shell);
          min-height: 66px;
          margin-inline: auto;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
        }

        .brand-logo {
          display: flex;
          width: 194px;
          height: 54px;
          align-items: center;
        }

        .brand-logo img {
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        .desktop-navigation {
          display: flex;
          align-items: center;
          gap: 30px;
        }

        .desktop-navigation a {
          color: rgba(29, 29, 31, 0.74);
          font-size: 12px;
          font-weight: 500;
        }

        .header-actions {
          display: flex;
          justify-self: end;
          align-items: center;
          gap: 12px;
        }

        .header-quote {
          display: inline-flex;
          min-height: 34px;
          align-items: center;
          border-radius: 999px;
          background: var(--lark-blue);
          padding: 0 17px;
          color: white;
          font-size: 12px;
          font-weight: 600;
        }

        .mobile-menu-button {
          display: none;
          width: 38px;
          height: 38px;
          align-items: center;
          justify-content: center;
          border: 0;
          background: transparent;
          color: var(--lark-text);
        }

        .mobile-navigation {
          display: none;
        }

        .announcement-bar {
          position: relative;
          z-index: 40;
          display: flex;
          min-height: 50px;
          margin-top: 66px;
          align-items: center;
          justify-content: center;
          gap: 8px;
          background: var(--lark-background);
          padding: 10px 20px;
          color: #424245;
          font-size: 13px;
          text-align: center;
        }

        .announcement-bar a {
          display: inline-flex;
          align-items: center;
          gap: 3px;
          color: #0066cc;
        }

        .hero-story {
          position: relative;
          height: 430vh;
          background: #000;
        }

        .hero-sticky {
          position: sticky;
          top: 0;
          height: 100svh;
          overflow: hidden;
          background: #000;
        }

        .hero-opening,
        .hero-final-copy {
          position: absolute;
          z-index: 10;
          inset: 0;
          display: flex;
          padding: 88px max(34px, 6vw);
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          will-change: opacity, transform;
        }

        .hero-opening p,
        .hero-final-copy > p {
          margin: 0 0 22px;
          color: rgba(255, 255, 255, 0.7);
          font-size: clamp(0.82rem, 1vw, 1rem);
          font-weight: 600;
          letter-spacing: 0.035em;
        }

        .hero-opening h1,
        .hero-final-copy h2 {
          margin: 0;
          color: white;
          font-size: clamp(6rem, 13vw, 14rem);
          font-weight: 600;
          letter-spacing: -0.09em;
          line-height: 0.8;
        }

        .hero-opening h1 span,
        .hero-final-copy h2 span {
          display: block;
          color: rgba(255, 255, 255, 0.42);
        }

        .hero-visual {
          position: absolute;
          inset: 0;
          will-change: opacity, transform;
        }

        .hero-visual img {
          object-fit: cover;
        }

        .hero-visual-overlay {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.56)),
            linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent, rgba(0, 0, 0, 0.18));
        }

        .hero-final-copy h2 {
          max-width: 1320px;
          font-size: clamp(4.7rem, 9.5vw, 11rem);
        }

        .hero-final-actions {
          display: flex;
          margin-top: 38px;
          flex-wrap: wrap;
          justify-content: center;
          gap: 13px;
        }

        .hero-final-actions a {
          display: inline-flex;
          min-height: 49px;
          align-items: center;
          justify-content: center;
          gap: 8px;
          border-radius: 999px;
          padding: 0 23px;
          font-size: 14px;
          font-weight: 600;
        }

        .hero-final-actions a:first-child {
          background: var(--lark-blue);
          color: white;
        }

        .hero-final-actions a:last-child {
          border: 1px solid rgba(255, 255, 255, 0.46);
          color: white;
          backdrop-filter: blur(12px);
        }

        .hero-scroll-progress {
          position: absolute;
          z-index: 20;
          right: 7vw;
          bottom: 26px;
          left: 7vw;
          height: 2px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.2);
        }

        .hero-scroll-progress span {
          display: block;
          height: 100%;
          background: white;
        }

        .highlights-section {
          padding: 170px 0 180px;
          background: var(--lark-background);
        }

        .highlights-heading {
          display: flex;
          margin-bottom: 65px;
          align-items: flex-end;
          justify-content: space-between;
          gap: 30px;
        }

        .highlights-heading h2 {
          margin: 0;
          font-size: clamp(4rem, 7.5vw, 8.5rem);
          font-weight: 600;
          letter-spacing: -0.075em;
          line-height: 0.9;
        }

        .highlight-controls {
          display: flex;
          gap: 12px;
        }

        .highlight-controls button {
          display: flex;
          width: 48px;
          height: 48px;
          align-items: center;
          justify-content: center;
          border: 0;
          border-radius: 50%;
          background: #e2e2e5;
          color: #515154;
          cursor: pointer;
        }

        .highlight-track {
          display: flex;
          overflow-x: auto;
          gap: 24px;
          padding: 0 max(44px, calc((100vw - 1440px) / 2));
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
        }

        .highlight-track::-webkit-scrollbar {
          display: none;
        }

        .highlight-card {
          position: relative;
          min-width: min(78vw, 1180px);
          height: min(78vh, 820px);
          overflow: hidden;
          border-radius: 40px;
          background: #111;
          scroll-snap-align: center;
        }

        .highlight-card img {
          object-fit: cover;
          transition: transform 800ms cubic-bezier(0.2, 0.75, 0.25, 1);
        }

        .highlight-card:hover img {
          transform: scale(1.025);
        }

        .highlight-card-overlay {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 46%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 35%);
        }

        .highlight-card-content {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 0;
          left: 0;
          padding: clamp(30px, 4vw, 65px);
        }

        .highlight-card-content p {
          margin: 0 0 14px;
          color: rgba(255, 255, 255, 0.72);
          font-size: 14px;
          font-weight: 600;
        }

        .highlight-card-content h3 {
          max-width: 950px;
          margin: 0;
          color: white;
          font-size: clamp(2.8rem, 5vw, 6.4rem);
          font-weight: 600;
          letter-spacing: -0.065em;
          line-height: 0.95;
        }

        .standard-intro,
        .services-chapter,
        .process-chapter,
        .company-chapter,
        .difference-chapter {
          padding: 190px 0;
        }

        .chapter-label {
          margin: 0 0 21px;
          color: var(--lark-blue);
          font-size: 14px;
          font-weight: 650;
        }

        .standard-intro h2,
        .services-heading h2,
        .equipment-content h2,
        .process-heading h2,
        .difference-heading h2,
        .company-heading h2,
        .contact-content h2 {
          margin: 0;
          font-size: clamp(5rem, 9vw, 10.8rem);
          font-weight: 600;
          letter-spacing: -0.085em;
          line-height: 0.84;
        }

        .standard-intro h2 span,
        .services-heading h2 span,
        .equipment-content h2 span,
        .process-heading h2 span,
        .difference-heading h2 span,
        .company-heading h2 span,
        .contact-content h2 span {
          display: block;
          color: var(--lark-light-muted);
        }

        .chapter-description {
          max-width: 870px;
          margin: 48px 0 0 auto;
          color: var(--lark-muted);
          font-size: clamp(1.25rem, 2vw, 1.7rem);
          font-weight: 550;
          line-height: 1.45;
        }

        .standard-visual {
          position: relative;
          min-height: 115svh;
          overflow: hidden;
          background: #111;
        }

        .standard-visual > img {
          object-fit: cover;
        }

        .standard-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, rgba(0, 0, 0, 0.54), transparent 56%);
        }

        .detail-marker {
          position: absolute;
          z-index: 3;
          display: flex;
          max-width: 300px;
          align-items: flex-start;
          gap: 15px;
          color: white;
        }

        .detail-marker > span {
          width: 13px;
          min-width: 13px;
          height: 13px;
          margin-top: 4px;
          border: 3px solid white;
          border-radius: 50%;
          background: var(--lark-blue);
          box-shadow: 0 0 0 8px rgba(0, 113, 227, 0.22);
        }

        .detail-marker strong {
          display: block;
          font-size: 16px;
        }

        .detail-marker p {
          margin: 7px 0 0;
          color: rgba(255, 255, 255, 0.7);
          font-size: 13px;
          line-height: 1.5;
        }

        .marker-one {
          top: 20%;
          left: 8%;
        }

        .marker-two {
          top: 42%;
          right: 8%;
        }

        .marker-three {
          right: 12%;
          bottom: 22%;
        }

        .marker-four {
          bottom: 12%;
          left: 10%;
        }

        .services-chapter {
          background: white;
        }

        .services-heading {
          margin-bottom: 90px;
        }

        .service-selector-shell {
          width: min(1600px, calc(100% - 48px));
          margin-inline: auto;
        }

        .service-tabs {
          display: flex;
          overflow-x: auto;
          margin-bottom: 32px;
          gap: 12px;
          scrollbar-width: none;
        }

        .service-tabs::-webkit-scrollbar {
          display: none;
        }

        .service-tabs button {
          min-height: 45px;
          white-space: nowrap;
          border: 0;
          border-radius: 999px;
          background: #e8e8ed;
          padding: 0 21px;
          color: #515154;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
        }

        .service-tabs button.active {
          background: var(--lark-text);
          color: white;
        }

        .service-experience {
          display: grid;
          min-height: 790px;
          overflow: hidden;
          border-radius: 46px;
          background: var(--lark-background);
          grid-template-columns: minmax(0, 1.2fr) minmax(440px, 0.8fr);
        }

        .service-image {
          position: relative;
          min-height: 720px;
          overflow: hidden;
        }

        .service-image img {
          object-fit: cover;
          animation: service-image-in 600ms ease both;
        }

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

        .service-image-shade {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.45));
        }

        .service-image > span {
          position: absolute;
          z-index: 2;
          bottom: 38px;
          left: 42px;
          color: white;
          font-size: 14px;
          font-weight: 650;
        }

        .service-information {
          display: flex;
          padding: clamp(42px, 5vw, 78px);
          flex-direction: column;
          justify-content: center;
        }

        .service-information > p:first-child {
          margin: 0 0 18px;
          color: var(--lark-blue);
          font-size: 13px;
          font-weight: 650;
        }

        .service-information h3 {
          margin: 0;
          font-size: clamp(3.3rem, 5vw, 6.2rem);
          font-weight: 600;
          letter-spacing: -0.07em;
          line-height: 0.9;
        }

        .service-description {
          margin: 27px 0 0;
          color: var(--lark-muted);
          font-size: 17px;
          line-height: 1.65;
        }

        .service-task-grid {
          display: grid;
          margin-top: 35px;
          grid-template-columns: 1fr 1fr;
          gap: 15px;
        }

        .service-task-grid > div {
          display: flex;
          align-items: center;
          gap: 9px;
          color: #424245;
          font-size: 13px;
          font-weight: 550;
        }

        .service-task-grid svg {
          min-width: 16px;
          color: var(--lark-blue);
        }

        .service-cta {
          display: inline-flex;
          width: fit-content;
          margin-top: 40px;
          align-items: center;
          gap: 8px;
          color: #0066cc;
          font-size: 15px;
          font-weight: 600;
        }

        .equipment-chapter {
          position: relative;
          display: flex;
          min-height: 120svh;
          overflow: hidden;
          align-items: center;
          background: #000;
        }

        .equipment-background,
        .equipment-background img,
        .equipment-overlay {
          position: absolute;
          inset: 0;
        }

        .equipment-background img {
          object-fit: cover;
        }

        .equipment-overlay {
          background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0.12)),
            linear-gradient(0deg, rgba(0, 0, 0, 0.4), transparent);
        }

        .equipment-content {
          position: relative;
          z-index: 2;
          padding: 120px 0;
          color: white;
        }

        .equipment-content h2 {
          max-width: 1100px;
        }

        .equipment-content h2 span {
          color: rgba(255, 255, 255, 0.4);
        }

        .equipment-content > p:not(.chapter-label) {
          max-width: 700px;
          margin: 40px 0 0;
          color: rgba(255, 255, 255, 0.68);
          font-size: 19px;
          line-height: 1.65;
        }

        .equipment-features {
          display: grid;
          max-width: 1100px;
          margin-top: 75px;
          grid-template-columns: repeat(3, 1fr);
          border-top: 1px solid rgba(255, 255, 255, 0.25);
        }

        .equipment-features > div {
          padding: 30px 35px 15px 0;
        }

        .equipment-features strong {
          display: block;
          color: white;
          font-size: 21px;
        }

        .equipment-features span {
          display: block;
          margin-top: 11px;
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
          line-height: 1.55;
        }

        .process-chapter {
          background: var(--lark-background);
        }

        .process-layout,
        .company-layout {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(440px, 0.78fr);
          gap: 10vw;
        }

        .process-heading,
        .company-heading {
          position: sticky;
          top: 150px;
          height: fit-content;
        }

        .process-list {
          border-top: 1px solid var(--lark-border);
        }

        .process-list article {
          display: grid;
          min-height: 240px;
          padding: 45px 0;
          border-bottom: 1px solid var(--lark-border);
          grid-template-columns: 72px 1fr;
          gap: 18px;
        }

        .process-list article > span {
          color: var(--lark-light-muted);
          font-size: 13px;
          font-weight: 700;
        }

        .process-list h3 {
          margin: 0;
          font-size: clamp(2rem, 3.2vw, 3.8rem);
          font-weight: 600;
          letter-spacing: -0.055em;
          line-height: 1;
        }

        .process-list p {
          max-width: 540px;
          margin: 18px 0 0;
          color: var(--lark-muted);
          font-size: 16px;
          line-height: 1.62;
        }

        .difference-chapter {
          background: #000;
          color: white;
        }

        .difference-heading h2 span {
          color: rgba(255, 255, 255, 0.38);
        }

        .difference-heading > p:last-child {
          max-width: 650px;
          margin: 38px 0 0;
          color: rgba(255, 255, 255, 0.62);
          font-size: 18px;
          line-height: 1.65;
        }

        .comparison-shell {
          width: min(1600px, calc(100% - 48px));
          margin: 90px auto 0;
        }

        .comparison {
          position: relative;
          height: min(80vh, 900px);
          overflow: hidden;
          border-radius: 46px;
          background: #222;
        }

        .comparison img {
          object-fit: cover;
        }

        .comparison-before {
          position: absolute;
          z-index: 2;
          top: 0;
          bottom: 0;
          left: 0;
          overflow: hidden;
        }

        .comparison-before img {
          min-width: min(1600px, calc(100vw - 48px));
          max-width: none;
        }

        .before-treatment {
          position: absolute;
          inset: 0;
          background: rgba(74, 58, 44, 0.22);
          filter: saturate(0.58) brightness(0.76);
          backdrop-filter: blur(1px);
        }

        .comparison-line {
          position: absolute;
          z-index: 5;
          top: 0;
          bottom: 0;
          width: 3px;
          background: white;
          transform: translateX(-50%);
          pointer-events: none;
        }

        .comparison-line > span {
          position: absolute;
          top: 50%;
          left: 50%;
          display: flex;
          width: 58px;
          height: 58px;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: white;
          color: #111;
          transform: translate(-50%, -50%);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
        }

        .comparison-label {
          position: absolute;
          z-index: 6;
          top: 28px;
          border-radius: 999px;
          background: rgba(0, 0, 0, 0.48);
          padding: 9px 14px;
          color: white;
          font-size: 12px;
          font-weight: 650;
          backdrop-filter: blur(12px);
        }

        .before-label {
          left: 28px;
        }

        .after-label {
          right: 28px;
        }

        .comparison input {
          position: absolute;
          z-index: 10;
          inset: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: ew-resize;
        }

        .company-chapter {
          background: white;
        }

        .company-copy > p {
          margin: 0 0 26px;
          color: var(--lark-muted);
          font-size: clamp(1.15rem, 1.7vw, 1.45rem);
          line-height: 1.65;
        }

        .audience-grid {
          display: grid;
          margin-top: 55px;
          grid-template-columns: 1fr 1fr;
          gap: 22px;
        }

        .audience-grid > div {
          min-height: 230px;
          border-radius: 30px;
          background: var(--lark-background);
          padding: 30px;
        }

        .audience-grid svg {
          color: var(--lark-blue);
        }

        .audience-grid strong {
          display: block;
          margin-top: 45px;
          font-size: 23px;
        }

        .audience-grid span {
          display: block;
          margin-top: 10px;
          color: var(--lark-muted);
          font-size: 14px;
          line-height: 1.55;
        }

        .proof-chapter {
          padding: 170px 0;
          background: var(--lark-background);
        }

        .proof-intro {
          margin: 0;
          font-size: clamp(3.8rem, 7vw, 8rem);
          font-weight: 600;
          letter-spacing: -0.075em;
          line-height: 0.9;
        }

        .proof-grid {
          display: grid;
          margin-top: 80px;
          grid-template-columns: repeat(4, 1fr);
          border-top: 1px solid var(--lark-border);
          border-bottom: 1px solid var(--lark-border);
        }

        .proof-grid article {
          min-height: 300px;
          padding: 42px 28px;
          border-right: 1px solid var(--lark-border);
        }

        .proof-grid article:last-child {
          border-right: 0;
        }

        .proof-grid svg {
          color: var(--lark-blue);
        }

        .proof-grid strong {
          display: block;
          margin-top: 95px;
          font-size: clamp(2rem, 3vw, 3.6rem);
          letter-spacing: -0.055em;
        }

        .proof-grid span {
          display: block;
          margin-top: 12px;
          color: var(--lark-muted);
          font-size: 14px;
          line-height: 1.5;
        }

        .contact-chapter {
          position: relative;
          display: flex;
          min-height: 110svh;
          overflow: hidden;
          align-items: center;
          justify-content: center;
          background: #000;
          text-align: center;
        }

        .contact-background,
        .contact-background img,
        .contact-overlay {
          position: absolute;
          inset: 0;
        }

        .contact-background img {
          object-fit: cover;
        }

        .contact-overlay {
          background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.72)),
            radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.45));
        }

        .contact-content {
          position: relative;
          z-index: 2;
          width: min(1200px, calc(100% - 40px));
          color: white;
        }

        .contact-content > img {
          width: 80px;
          height: 80px;
          margin: 0 auto 29px;
          object-fit: contain;
          filter: brightness(0) invert(1);
        }

        .contact-content > p {
          margin: 0 0 24px;
          color: rgba(255, 255, 255, 0.68);
          font-size: 15px;
          font-weight: 600;
        }

        .contact-content h2 span {
          color: rgba(255, 255, 255, 0.42);
        }

        .contact-actions {
          display: flex;
          margin-top: 42px;
          flex-wrap: wrap;
          justify-content: center;
          gap: 13px;
        }

        .contact-actions a {
          display: inline-flex;
          min-height: 52px;
          align-items: center;
          justify-content: center;
          gap: 9px;
          border-radius: 999px;
          padding: 0 25px;
          font-size: 14px;
          font-weight: 600;
        }

        .contact-actions a:first-child {
          background: var(--lark-blue);
          color: white;
        }

        .contact-actions a:last-child {
          border: 1px solid rgba(255, 255, 255, 0.48);
          color: white;
          backdrop-filter: blur(12px);
        }

        .lark-footer {
          padding: 85px 0 35px;
          background: #ececee;
        }

        .footer-top img {
          width: 210px;
          height: auto;
        }

        .footer-top p {
          max-width: 480px;
          margin: 25px 0 0;
          color: var(--lark-muted);
          font-size: 14px;
          line-height: 1.6;
        }

        .footer-links {
          display: grid;
          margin-top: 75px;
          grid-template-columns: repeat(3, 1fr);
          gap: 40px;
        }

        .footer-links > div {
          display: flex;
          flex-direction: column;
          gap: 13px;
        }

        .footer-links strong {
          margin-bottom: 5px;
          font-size: 12px;
        }

        .footer-links a {
          width: fit-content;
          color: #515154;
          font-size: 12px;
        }

        .footer-bottom {
          display: flex;
          margin-top: 70px;
          padding-top: 22px;
          border-top: 1px solid #c7c7cc;
          justify-content: space-between;
          gap: 20px;
          color: #86868b;
          font-size: 11px;
        }

        @media (max-width: 1024px) {
          :root {
            --lark-shell: min(100% - 48px, 1200px);
          }

          .desktop-navigation {
            gap: 18px;
          }

          .service-experience {
            grid-template-columns: 1fr;
          }

          .service-image {
            min-height: 68vh;
          }

          .service-information {
            min-height: 650px;
          }

          .process-layout,
          .company-layout {
            grid-template-columns: 1fr;
            gap: 80px;
          }

          .process-heading,
          .company-heading {
            position: static;
          }

          .proof-grid {
            grid-template-columns: 1fr 1fr;
          }

          .proof-grid article:nth-child(2) {
            border-right: 0;
          }

          .proof-grid article:nth-child(-n + 2) {
            border-bottom: 1px solid var(--lark-border);
          }
        }

        @media (max-width: 767px) {
          :root {
            --lark-shell: calc(100% - 36px);
          }

          .global-header-inner {
            min-height: 60px;
            grid-template-columns: 1fr auto;
          }

          .brand-logo {
            width: 152px;
          }

          .desktop-navigation {
            display: none;
          }

          .header-quote {
            min-height: 32px;
            padding: 0 13px;
            font-size: 11px;
          }

          .mobile-menu-button {
            display: flex;
          }

          .mobile-navigation {
            display: flex;
            padding: 16px 18px 24px;
            border-top: 1px solid rgba(0, 0, 0, 0.07);
            flex-direction: column;
            background: rgba(255, 255, 255, 0.97);
          }

          .mobile-navigation a {
            padding: 14px 0;
            border-bottom: 1px solid #e7e7e9;
            color: var(--lark-text);
            font-size: 17px;
            font-weight: 550;
          }

          .announcement-bar {
            min-height: 66px;
            margin-top: 60px;
            flex-direction: column;
            gap: 3px;
            font-size: 11px;
          }

          .hero-story {
            height: 340vh;
          }

          .hero-opening,
          .hero-final-copy {
            padding: 90px 18px 45px;
          }

          .hero-opening {
            align-items: flex-start;
            justify-content: center;
            text-align: left;
          }

          .hero-opening h1 {
            font-size: clamp(4.7rem, 21vw, 7.5rem);
          }

          .hero-final-copy {
            align-items: flex-start;
            justify-content: flex-end;
            padding-bottom: 80px;
            text-align: left;
          }

          .hero-final-copy h2 {
            font-size: clamp(3.7rem, 16vw, 6rem);
          }

          .hero-final-actions {
            width: 100%;
            justify-content: flex-start;
          }

          .hero-final-actions a {
            width: 100%;
          }

          .highlights-section {
            padding: 105px 0 115px;
          }

          .highlights-heading {
            width: calc(100% - 36px);
            margin-bottom: 40px;
            align-items: center;
          }

          .highlights-heading h2 {
            font-size: 3.7rem;
          }

          .highlight-controls {
            display: none;
          }

          .highlight-track {
            gap: 14px;
            padding: 0 18px;
            scroll-padding-left: 18px;
          }

          .highlight-card {
            min-width: 88vw;
            height: 72svh;
            border-radius: 28px;
            scroll-snap-align: start;
          }

          .highlight-card-content {
            padding: 28px 25px;
          }

          .highlight-card-content h3 {
            font-size: 2.85rem;
          }

          .standard-intro,
          .services-chapter,
          .process-chapter,
          .company-chapter,
          .difference-chapter {
            padding: 110px 0;
          }

          .standard-intro h2,
          .services-heading h2,
          .equipment-content h2,
          .process-heading h2,
          .difference-heading h2,
          .company-heading h2,
          .contact-content h2 {
            font-size: clamp(3.8rem, 16vw, 5.7rem);
          }

          .chapter-description {
            margin-top: 35px;
            font-size: 18px;
          }

          .standard-visual {
            min-height: 950px;
          }

          .standard-overlay {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.72));
          }

          .detail-marker {
            right: 18px;
            left: 18px;
            max-width: 330px;
          }

          .marker-one {
            top: auto;
            bottom: 310px;
          }

          .marker-two {
            top: auto;
            right: 18px;
            bottom: 220px;
            left: 18px;
          }

          .marker-three {
            right: 18px;
            bottom: 130px;
            left: 18px;
          }

          .marker-four {
            right: 18px;
            bottom: 40px;
            left: 18px;
          }

          .service-selector-shell,
          .comparison-shell {
            width: calc(100% - 24px);
          }

          .service-tabs {
            padding: 0 6px;
          }

          .service-experience {
            min-height: auto;
            border-radius: 30px;
          }

          .service-image {
            min-height: 60svh;
          }

          .service-image > span {
            bottom: 25px;
            left: 25px;
          }

          .service-information {
            min-height: auto;
            padding: 42px 25px 50px;
          }

          .service-information h3 {
            font-size: 3.55rem;
          }

          .service-task-grid {
            grid-template-columns: 1fr;
          }

          .equipment-chapter {
            min-height: 1000px;
            align-items: flex-end;
          }

          .equipment-overlay {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.92) 60%);
          }

          .equipment-content {
            padding: 110px 0 65px;
          }

          .equipment-content > p:not(.chapter-label) {
            font-size: 16px;
          }

          .equipment-features {
            margin-top: 45px;
            grid-template-columns: 1fr;
          }

          .equipment-features > div {
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            padding: 24px 0;
          }

          .process-layout,
          .company-layout {
            gap: 60px;
          }

          .process-list article {
            min-height: auto;
            padding: 35px 0;
            grid-template-columns: 45px 1fr;
          }

          .process-list h3 {
            font-size: 2.35rem;
          }

          .comparison-shell {
            margin-top: 55px;
          }

          .comparison {
            height: 70svh;
            min-height: 580px;
            border-radius: 28px;
          }

          .comparison-before img {
            min-width: calc(100vw - 24px);
          }

          .comparison-line > span {
            width: 49px;
            height: 49px;
          }

          .audience-grid {
            grid-template-columns: 1fr;
          }

          .proof-chapter {
            padding: 110px 0;
          }

          .proof-intro {
            font-size: 3.8rem;
          }

          .proof-grid {
            margin-top: 55px;
            grid-template-columns: 1fr;
          }

          .proof-grid article {
            min-height: 230px;
            border-right: 0;
            border-bottom: 1px solid var(--lark-border);
          }

          .proof-grid article:last-child {
            border-bottom: 0;
          }

          .proof-grid strong {
            margin-top: 55px;
          }

          .contact-chapter {
            min-height: 900px;
            align-items: flex-end;
          }

          .contact-overlay {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.9));
          }

          .contact-content {
            padding-bottom: 80px;
            text-align: left;
          }

          .contact-content > img {
            margin-right: 0;
            margin-left: 0;
          }

          .contact-actions {
            flex-direction: column;
          }

          .contact-actions a {
            width: 100%;
          }

          .footer-links {
            grid-template-columns: 1fr 1fr;
          }

          .footer-links > div:last-child {
            grid-column: 1 / -1;
          }

          .footer-bottom {
            flex-direction: column;
          }
        }

        @media (max-width: 390px) {
          .hero-opening h1 {
            font-size: 4.25rem;
          }

          .hero-final-copy h2,
          .standard-intro h2,
          .services-heading h2,
          .equipment-content h2,
          .process-heading h2,
          .difference-heading h2,
          .company-heading h2,
          .contact-content h2 {
            font-size: 3.35rem;
          }

          .service-information h3 {
            font-size: 3rem;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          html {
            scroll-behavior: auto;
          }

          .hero-story {
            height: 100svh;
          }

          .hero-opening {
            display: none;
          }

          .hero-visual,
          .hero-final-copy {
            opacity: 1 !important;
            transform: none !important;
          }

          .highlight-card img,
          .service-image img {
            animation: none;
            transition: none;
          }
        }
      `}</style>
    </main>
  );
}