/* ============================================================
   THOMAS ROOFING & REPAIR — Cinematic Brutalist-Warmth Edition
   Fonts: Gambetta (serif display) + Satoshi (geometric sans)
   Palette: Terracotta + Warm Charcoal + Sandstone Gold
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=gambetta@400,500,600,700&f[]=satoshi@400,500,700&display=swap');

@layer reset, tokens, base, layout, sections, motion, utilities;

/* ============================================================
   @layer TOKENS
   ============================================================ */
@layer tokens {
  :root {
    /* Brand Colors */
    --c-primary:         #C45D3E;
    --c-primary-rgb:     196, 93, 62;
    --c-primary-dark:    #A84A2E;
    --c-primary-light:   #D4704F;
    --c-accent:          #D4A574;
    --c-accent-dark:     #B8875A;

    /* Surfaces */
    --c-bg:              #0F0E0C;
    --c-bg-secondary:    #1C1917;
    --c-bg-tertiary:     #252220;
    --c-surface:         #1C1917;
    --c-surface-raised:  #252220;

    /* Light mode surfaces */
    --c-cream:           #F5F0EB;
    --c-cream-dark:      #E8E0D5;

    /* Text */
    --c-text:            #F5F0EB;
    --c-text-muted:      #A8A29E;
    --c-text-faint:      #6B6560;
    --c-text-dark:       #1C1917;
    --c-error:           #E87070;

    /* Typography — Fluid Scale */
    --fs-10:  clamp(0.625rem,  0.5vw + 0.5rem,  0.75rem);
    --fs-12:  clamp(0.75rem,   0.6vw + 0.55rem, 0.875rem);
    --fs-14:  clamp(0.875rem,  0.7vw + 0.65rem, 1rem);
    --fs-16:  clamp(1rem,      1vw + 0.6rem,    1.125rem);
    --fs-18:  clamp(1.125rem,  1.2vw + 0.7rem,  1.35rem);
    --fs-20:  clamp(1.25rem,   1.5vw + 0.75rem, 1.5rem);
    --fs-24:  clamp(1.5rem,    2vw + 0.8rem,    2rem);
    --fs-32:  clamp(2rem,      3vw + 0.8rem,    2.75rem);
    --fs-48:  clamp(2.75rem,   5vw + 0.5rem,    4.5rem);
    --fs-64:  clamp(3.5rem,    7vw + 0.5rem,    6.5rem);
    --fs-80:  clamp(4rem,      8vw + 0.5rem,    8rem);
    --fs-120: clamp(5rem,      12vw + 0.5rem,   12rem);

    /* Font families */
    --ff-serif:  'Gambetta', Georgia, 'Times New Roman', serif;
    --ff-sans:   'Satoshi', system-ui, -apple-system, sans-serif;
    --ff-mono:   'JetBrains Mono', 'Courier New', monospace;

    /* Spacing */
    --sp-1:   0.25rem;
    --sp-2:   0.5rem;
    --sp-3:   0.75rem;
    --sp-4:   1rem;
    --sp-6:   1.5rem;
    --sp-8:   2rem;
    --sp-12:  3rem;
    --sp-16:  4rem;
    --sp-20:  5rem;
    --sp-24:  6rem;
    --sp-32:  8rem;

    /* Layout */
    --max-w:       1400px;
    --gutter:      clamp(1.5rem, 5vw, 5rem);
    --section-py:  clamp(5rem, 10vw, 10rem);

    /* Motion */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    0.2s;
    --dur-med:     0.45s;
    --dur-slow:    0.8s;
    --dur-xslow:   1.2s;

    /* Borders */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-pill: 999px;
    --border:      1px solid rgba(var(--c-primary-rgb), 0.15);
    --border-warm: 1px solid rgba(212, 165, 116, 0.2);

    /* Z-index scale */
    --z-base:      1;
    --z-overlay:   10;
    --z-nav:       100;
    --z-menu:      200;
    --z-preloader: 999;
    --z-cursor:    9999;
  }
}

/* ============================================================
   @layer RESET
   ============================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: auto; /* JS handles smooth scroll */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-sans);
    font-size: var(--fs-16);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, video {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  ul, ol {
    list-style: none;
  }

  address {
    font-style: normal;
  }

  ::selection {
    background-color: rgba(var(--c-primary-rgb), 0.25);
    color: var(--c-text);
  }

  :focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-track { background: var(--c-bg-secondary); }
  ::-webkit-scrollbar-thumb { background: var(--c-primary); border-radius: var(--radius-pill); }

  /* Cursor override on desktop */
  @media (hover: hover) {
    body { cursor: none; }
    a, button, [role="button"] { cursor: none; }
  }

  /* Screen reader only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}

/* ============================================================
   @layer BASE
   ============================================================ */
@layer base {
  h1, h2, h3, h4, h5 {
    font-family: var(--ff-serif);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  p { line-height: 1.7; }

  strong { font-weight: 700; }
}

/* ============================================================
   @layer LAYOUT — Shared structural patterns
   ============================================================ */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Grain overlay */
  .grain-overlay {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
    z-index: var(--z-overlay);
    opacity: 0.6;
    mix-blend-mode: overlay;
  }

  /* Grid lines */
  .grid-lines {
    position: fixed;
    inset: 0;
    display: flex;
    pointer-events: none;
    z-index: 0;
    padding-inline: var(--gutter);
    gap: calc((100% - var(--gutter) * 2) / 7);
  }

  .grid-lines span {
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(var(--c-primary-rgb), 0.04);
    flex-shrink: 0;
  }
}

/* ============================================================
   @layer SECTIONS
   ============================================================ */
@layer sections {

  /* ─────────────────── CUSTOM CURSOR ─────────────────── */
  .cursor {
    position: fixed;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: var(--z-cursor);
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out);
    will-change: transform;
  }

  .cursor__cross {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s var(--ease-out);
  }

  .cursor__h,
  .cursor__v {
    position: absolute;
    background: var(--c-cream);
    border-radius: 1px;
  }

  .cursor__h {
    width: 28px;
    height: 1.5px;
  }

  .cursor__v {
    width: 1.5px;
    height: 28px;
  }

  body.cursor--hover .cursor { width: 60px; height: 60px; }
  body.cursor--hover .cursor__cross { transform: rotate(45deg); }
  body.cursor--click .cursor { transform: translate(-50%, -50%) scale(0.7); }

  @media (hover: none) {
    .cursor { display: none; }
  }

  /* ─────────────────── PRELOADER ─────────────────── */
  .preloader {
    position: fixed;
    inset: 0;
    background: var(--c-bg);
    z-index: var(--z-preloader);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
  }

  .preloader__inner {
    text-align: center;
  }

  .preloader__word {
    display: flex;
    gap: 0.05em;
    justify-content: center;
    overflow: hidden;
  }

  .preloader__letter {
    font-family: var(--ff-serif);
    font-size: var(--fs-80);
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.04em;
    display: inline-block;
    transform: translateY(110%);
    line-height: 1;
  }

  .preloader__sub {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.3em;
    color: var(--c-text-muted);
    text-transform: uppercase;
    margin-top: var(--sp-4);
    opacity: 0;
    transform: translateY(8px);
  }

  .preloader__bar {
    width: 200px;
    height: 1px;
    background: rgba(var(--c-primary-rgb), 0.2);
    overflow: hidden;
    border-radius: var(--radius-pill);
  }

  .preloader__fill {
    height: 100%;
    width: 0%;
    background: var(--c-primary);
    transition: width 1.2s var(--ease-out);
    border-radius: var(--radius-pill);
  }

  .preloader--done {
    pointer-events: none;
  }

  /* ─────────────────── BUTTONS ─────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.75em 1.75em;
    font-family: var(--ff-sans);
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    isolation: isolate;
  }

  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--btn-fill, transparent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease-in-out);
    border-radius: inherit;
    z-index: -1;
  }

  .btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .btn--primary {
    background: var(--c-primary);
    color: var(--c-cream);
    --btn-fill: var(--c-primary-dark);
  }

  .btn--ghost {
    background: transparent;
    color: var(--c-text);
    border: 1px solid rgba(var(--c-primary-rgb), 0.4);
    --btn-fill: rgba(var(--c-primary-rgb), 0.1);
  }

  .btn--light {
    background: var(--c-cream);
    color: var(--c-text-dark);
    --btn-fill: var(--c-cream-dark);
  }

  .btn--lg {
    padding: 1em 2.5em;
    font-size: var(--fs-16);
  }

  .btn--full {
    width: 100%;
    justify-content: center;
  }

  /* ─────────────────── NAV ─────────────────── */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-6) var(--gutter);
    transition: background var(--dur-med) var(--ease-out),
                padding var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out);
  }

  .nav--scrolled {
    background: var(--c-bg-secondary);
    padding-block: var(--sp-4);
    border-bottom: var(--border);
  }

  .nav--hidden {
    transform: translateY(-100%);
  }

  .nav__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--ff-serif);
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--c-text);
    flex-shrink: 0;
    mix-blend-mode: normal;
  }

  .nav__logo-mark {
    width: 36px;
    height: 36px;
    background: var(--c-primary);
    color: var(--c-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-18);
    font-weight: 700;
    flex-shrink: 0;
    transition: transform var(--dur-med) var(--ease-spring);
  }

  .nav:hover .nav__logo-mark {
    transform: rotate(12deg);
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin-left: auto;
  }

  .nav__link {
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    transition: color var(--dur-fast);
  }

  .nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--c-primary);
    transition: width var(--dur-med) var(--ease-out);
  }

  .nav__link:hover {
    color: var(--c-text);
  }

  .nav__link:hover::after {
    width: 100%;
  }

  .nav__cta {
    margin-left: var(--sp-4);
    flex-shrink: 0;
  }

  .nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--sp-2);
    margin-left: auto;
  }

  .nav__hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--c-text);
    border-radius: 1px;
    transition: transform var(--dur-med) var(--ease-out),
                opacity var(--dur-med);
    transform-origin: center;
  }

  .nav__hamburger[aria-expanded="true"] span:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }

  .nav__hamburger[aria-expanded="true"] span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  @media (max-width: 900px) {
    .nav__links, .nav__cta { display: none; }
    .nav__hamburger { display: flex; }
  }

  /* ─────────────────── MOBILE MENU ─────────────────── */
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--c-bg-secondary);
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    padding: var(--sp-32) var(--gutter) var(--sp-12);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s var(--ease-in-out);
    pointer-events: none;
  }

  .mobile-menu.is-open {
    clip-path: inset(0 0 0% 0);
    pointer-events: all;
  }

  .mobile-menu__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    gap: var(--sp-16);
  }

  .mobile-menu__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }

  .mobile-menu__link {
    font-family: var(--ff-serif);
    font-size: var(--fs-48);
    font-weight: 600;
    color: var(--c-text);
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s var(--ease-out),
                transform 0.5s var(--ease-out),
                color var(--dur-fast);
  }

  .mobile-menu__link::before {
    content: attr(data-index);
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    color: var(--c-text-muted);
    margin-bottom: 0.2em;
  }

  .mobile-menu__link:hover {
    color: var(--c-primary);
  }

  .mobile-menu.is-open .mobile-menu__link {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.1s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.15s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.2s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.25s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.3s; }

  .mobile-menu__footer {
    border-top: var(--border);
    padding-top: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .mobile-menu__phone {
    font-family: var(--ff-serif);
    font-size: var(--fs-24);
    color: var(--c-primary);
    font-weight: 600;
  }

  .mobile-menu__addr {
    font-size: var(--fs-14);
    color: var(--c-text-muted);
  }

  /* ─────────────────── HERO ─────────────────── */
  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    isolation: isolate;
  }

  .hero__media {
    position: absolute;
    inset: 0 40% 0 0;
    overflow: hidden;
  }

  .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    will-change: transform;
  }

  .hero__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(15, 14, 12, 0.2) 0%,
      rgba(15, 14, 12, 0.7) 60%,
      rgba(15, 14, 12, 1) 100%
    );
  }

  /* Vertical EST text */
  .hero__edge-text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--ff-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(-90deg) translateX(calc(-50% + 60px));
    padding: var(--sp-3);
    z-index: 2;
  }

  .hero__content {
    position: relative;
    z-index: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-32) var(--gutter) var(--sp-32) var(--sp-8);
    padding-top: calc(var(--sp-32) + 80px);
  }

  .hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-11, 0.7rem);
    font-size: clamp(0.65rem, 0.7vw + 0.5rem, 0.8rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-6);
  }

  .hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-primary);
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }

  .hero__headline {
    font-family: var(--ff-serif);
    font-size: var(--fs-64);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-6);
  }

  /* char-split class added by JS */
  .hero__headline .char {
    display: inline-block;
    overflow: hidden;
  }

  .hero__headline .char-inner {
    display: inline-block;
    /* Initial hidden state managed by GSAP gsap.from() */
  }

  /* When js-ready fires, we animate via GSAP */

  .hero__body {
    font-size: var(--fs-18);
    color: var(--c-text-muted);
    max-width: 38ch;
    margin-bottom: var(--sp-8);
    line-height: 1.65;
  }

  .hero__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
    flex-wrap: wrap;
  }

  .hero__rating {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    border-top: var(--border);
    padding-top: var(--sp-6);
  }

  .hero__stars {
    display: flex;
    gap: 2px;
  }

  .hero__stars svg {
    width: 16px;
    height: 16px;
    color: var(--c-accent);
  }

  .hero__rating-text {
    font-size: var(--fs-14);
    color: var(--c-text-muted);
  }

  .hero__rating-text strong {
    color: var(--c-text);
  }

  .hero__scroll-indicator {
    position: absolute;
    bottom: var(--sp-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    z-index: 2;
    opacity: 0.5;
    animation: scroll-bob 2s ease-in-out infinite;
  }

  @keyframes scroll-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
  }

  .hero__scroll-line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--c-primary), transparent);
  }

  .hero__scroll-label {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  @media (max-width: 900px) {
    .hero {
      grid-template-columns: 1fr;
      min-height: 100svh;
    }

    .hero__media {
      inset: 0;
    }

    .hero__media-overlay {
      background: linear-gradient(
        to top,
        rgba(15, 14, 12, 0.97) 40%,
        rgba(15, 14, 12, 0.5) 100%
      );
    }

    .hero__content {
      grid-column: 1;
      justify-content: flex-end;
      padding: var(--sp-8) var(--gutter);
      padding-bottom: var(--sp-16);
    }

    .hero__headline,
    .hero__headline .char,
    .hero__headline .char-inner {
      font-size: clamp(2.25rem, 8vw + 0.5rem, 3.5rem);
      font-family: var(--ff-serif);
      line-height: 1.1;
      font-weight: 700;
    }

    .hero__edge-text {
      display: none;
    }
  }

  /* ─────────────────── TRUST RIBBON ─────────────────── */
  .trust-ribbon {
    background: var(--c-bg-secondary);
    border-top: var(--border);
    border-bottom: var(--border);
    padding-block: var(--sp-4);
    overflow: hidden;
  }

  .trust-ribbon__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    white-space: nowrap;
    width: max-content;
    animation: ribbon-scroll 18s linear infinite;
  }

  @keyframes ribbon-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .trust-ribbon__item {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    flex-shrink: 0;
  }

  .trust-ribbon__sep {
    color: var(--c-primary);
    opacity: 0.5;
    flex-shrink: 0;
    font-size: var(--fs-18);
    line-height: 1;
  }

  /* ─────────────────── ABOUT ─────────────────── */
  .about {
    padding-block: var(--section-py);
    background: var(--c-bg-secondary);
    position: relative;
    overflow: hidden;
  }

  /* Diagonal deco line */
  .about::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -10%;
    width: 120%;
    height: 60px;
    background: var(--c-bg);
    transform: skewY(-2deg);
    transform-origin: top right;
  }

  .about__layout {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }

  .about__visual {
    position: relative;
    margin-top: var(--sp-12);
  }

  .about__img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 3 / 4;
  }

  .about__img {
    width: 100%;
    height: 120%; /* Extra height for parallax range */
    object-fit: cover;
    object-position: center top;
    will-change: transform;
  }

  .about__visual-badge {
    position: absolute;
    bottom: -var(--sp-6);
    right: calc(-1 * var(--sp-8));
    background: var(--c-primary);
    color: var(--c-cream);
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: 0 20px 60px rgba(196, 93, 62, 0.3);
  }

  .about__badge-number {
    display: block;
    font-family: var(--ff-serif);
    font-size: var(--fs-64);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .about__badge-label {
    display: block;
    font-size: var(--fs-12);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: var(--sp-1);
  }

  .about__copy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding-top: var(--sp-8);
  }

  .about__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-primary);
  }

  .about__headline {
    font-size: var(--fs-48);
    line-height: 1.1;
    color: var(--c-text);
  }

  .about__pullquote {
    font-family: var(--ff-serif);
    font-size: var(--fs-20);
    font-style: italic;
    color: var(--c-accent);
    border-left: 3px solid var(--c-primary);
    padding-left: var(--sp-6);
    line-height: 1.5;
  }

  .about__body {
    font-size: var(--fs-16);
    color: var(--c-text-muted);
    line-height: 1.75;
  }

  .about__quick-stats {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding-block: var(--sp-6);
    border-top: var(--border);
    border-bottom: var(--border);
  }

  .about__stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .about__stat-n {
    font-family: var(--ff-serif);
    font-size: var(--fs-32);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
  }

  .about__stat-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .about__stat-div {
    width: 1px;
    height: 48px;
    background: rgba(var(--c-primary-rgb), 0.2);
    flex-shrink: 0;
  }

  @media (max-width: 900px) {
    .about__layout {
      grid-template-columns: 1fr;
      gap: var(--sp-6);
    }

    .about__visual {
      order: -1;
      margin-top: 0;
      max-width: 100%;
      position: relative;
      height: auto;
    }

    .about__img-wrap {
      display: none;
    }

    .about__visual-badge {
      position: relative;
      right: auto;
      top: auto;
      margin-left: auto;
    }
  }

  /* ─────────────────── SERVICES ACCORDION ─────────────────── */
  .services {
    padding-block: var(--section-py);
    background: var(--c-bg);
    position: relative;
  }

  .services__header {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-bottom: var(--sp-12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--sp-8);
  }

  .services__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-primary);
    grid-column: 1;
  }

  .services__headline {
    font-size: var(--fs-48);
    color: var(--c-text);
    grid-column: 2;
    grid-row: 1;
  }

  .services__list {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    border-top: var(--border);
  }

  .services__item {
    border-bottom: var(--border);
    overflow: hidden;
  }

  .services__row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
    text-align: left;
    transition: background var(--dur-fast);
    position: relative;
  }

  .services__row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--c-primary-rgb), 0.03);
    opacity: 0;
    transition: opacity var(--dur-fast);
  }

  .services__row:hover::after {
    opacity: 1;
  }

  .services__num {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    color: var(--c-primary);
    letter-spacing: 0.1em;
    min-width: 2.5em;
    flex-shrink: 0;
  }

  .services__name {
    font-family: var(--ff-serif);
    font-size: var(--fs-32);
    font-weight: 600;
    color: var(--c-text);
    flex: 1;
    transition: color var(--dur-fast);
  }

  .services__row:hover .services__name,
  .services__row[aria-expanded="true"] .services__name {
    color: var(--c-primary);
  }

  .services__arrow {
    font-size: var(--fs-24);
    color: var(--c-text-muted);
    transition: transform var(--dur-med) var(--ease-out),
                color var(--dur-fast);
    flex-shrink: 0;
    display: inline-block;
  }

  .services__row[aria-expanded="true"] .services__arrow {
    transform: rotate(90deg);
    color: var(--c-primary);
  }

  .services__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.6s var(--ease-out);
  }

  .services__panel:not([hidden]) {
    max-height: 800px;
  }

  .services__panel[hidden] {
    display: block !important; /* override hidden for animation */
    max-height: 0;
    visibility: hidden;
  }

  .services__panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    padding-bottom: var(--sp-8);
    padding-left: calc(2.5em + var(--sp-6));
    align-items: start;
  }

  .services__panel-text {
    padding-right: var(--sp-8);
  }

  .services__panel-text p {
    font-size: var(--fs-16);
    color: var(--c-text-muted);
    line-height: 1.75;
    margin-bottom: var(--sp-6);
  }

  .services__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .services__bullets li {
    font-size: var(--fs-14);
    color: var(--c-text-muted);
    padding-left: var(--sp-6);
    position: relative;
  }

  .services__bullets li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--c-primary);
    font-size: var(--fs-12);
    top: 0.1em;
  }

  .services__panel-img {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }

  .services__panel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
  }

  .services__item:hover .services__panel-img img {
    transform: scale(1.04);
  }

  @media (max-width: 900px) {
    .services__header {
      grid-template-columns: 1fr;
    }

    .services__headline {
      grid-column: 1;
      font-size: var(--fs-32);
    }

    .services__name {
      font-size: var(--fs-24);
    }

    .services__panel-inner {
      grid-template-columns: 1fr;
      padding-left: 0;
    }
  }

  /* ─────────────────── GALLERY BENTO ─────────────────── */
  .gallery {
    padding-block: var(--section-py);
    background: var(--c-bg-secondary);
    overflow: hidden;
  }

  .gallery__header {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-bottom: var(--sp-12);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .gallery__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-primary);
  }

  .gallery__headline {
    font-size: var(--fs-48);
    color: var(--c-text);
    max-width: 20ch;
  }

  .gallery__bento {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 400px 300px;
    gap: var(--sp-4);
  }

  .gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    isolation: isolate;
    margin: 0;
  }

  /* Clip-path reveal — managed by GSAP in script.js */
  /* No-JS fallback: items visible by default */

  .gallery__item img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    transition: transform 0.8s var(--ease-out);
  }

  .gallery__item:hover img {
    transform: scale(1.04);
  }

  .gallery__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-6) var(--sp-4);
    background: linear-gradient(to top, rgba(15,14,12,0.85), transparent);
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    transform: translateY(100%);
    transition: transform var(--dur-med) var(--ease-out);
  }

  .gallery__item:hover .gallery__caption {
    transform: translateY(0);
  }

  /* Bento layout */
  .gallery__item--tall { grid-row: 1 / 3; }
  .gallery__item--wide { grid-column: 2; grid-row: 1; }
  .gallery__item--square { grid-column: 2; grid-row: 2; display: none; }
  .gallery__item--wide2 { display: none; }

  /* Four items version */
  @media (min-width: 900px) {
    .gallery__bento {
      grid-template-columns: 3fr 2fr 2fr;
      grid-template-rows: 350px 300px;
    }

    .gallery__item--tall { grid-row: 1 / 3; grid-column: 1; }
    .gallery__item--wide { grid-column: 2; grid-row: 1; }
    .gallery__item--square { display: block; grid-column: 2; grid-row: 2; }
    .gallery__item--wide2 { display: block; grid-column: 3; grid-row: 1 / 3; }
  }

  /* Negative margin overlap effect */
  .gallery__item--tall {
    margin-bottom: calc(-1 * var(--sp-8));
    z-index: 2;
  }

  @media (max-width: 600px) {
    .gallery__bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .gallery__item--tall { grid-row: auto; margin-bottom: 0; }
    .gallery__item--wide { grid-column: 1; }
  }

  /* ─────────────────── SHIELD EFFECT ─────────────────── */
  .shield {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }

  .shield__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .shield__img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
  }

  .shield__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 14, 12, 0.55);
    backdrop-filter: blur(0.5px);
  }

  .shield__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-w);
    padding-inline: var(--gutter);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Four annotation positions */
  .shield__annotation {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0;
    opacity: 0;
    transform: translateY(20px);
  }

  .shield__annotation--tl {
    top: 20%;
    left: 10%;
    flex-direction: row;
  }

  .shield__annotation--tr {
    top: 25%;
    right: 10%;
    flex-direction: row-reverse;
  }

  .shield__annotation--bl {
    bottom: 25%;
    left: 15%;
    flex-direction: row;
  }

  .shield__annotation--br {
    bottom: 20%;
    right: 12%;
    flex-direction: row-reverse;
  }

  .shield__annotation.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }

  .shield__annotation--tl.is-visible { transition-delay: 0s; }
  .shield__annotation--tr.is-visible { transition-delay: 0.15s; }
  .shield__annotation--bl.is-visible { transition-delay: 0.3s; }
  .shield__annotation--br.is-visible { transition-delay: 0.45s; }

  .shield__ann-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(196, 93, 62, 0.3);
    flex-shrink: 0;
  }

  .shield__ann-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, var(--c-primary), rgba(196,93,62,0.3));
    flex-shrink: 0;
  }

  .shield__annotation--tr .shield__ann-line,
  .shield__annotation--br .shield__ann-line {
    background: linear-gradient(to left, var(--c-primary), rgba(196,93,62,0.3));
  }

  .shield__ann-data {
    background: rgba(28, 25, 23, 0.85);
    backdrop-filter: blur(12px);
    border: var(--border);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .shield__ann-number {
    font-family: var(--ff-serif);
    font-size: var(--fs-64);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .shield__ann-suffix {
    font-family: var(--ff-serif);
    font-size: var(--fs-32);
    color: var(--c-primary);
    vertical-align: super;
    line-height: 1;
    font-weight: 700;
  }

  .shield__ann-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  @media (max-width: 700px) {
    .shield {
      min-height: auto;
    }

    .shield__content {
      height: auto;
      padding-block: var(--sp-12);
      flex-direction: column;
    }

    .shield__annotations {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-3);
      width: 100%;
    }

    .shield__annotation {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      flex-direction: column;
      align-items: flex-start;
      opacity: 1;
      transform: none;
    }

    .shield__ann-point,
    .shield__ann-line {
      display: none;
    }

    .shield__ann-data {
      width: 100%;
      padding: var(--sp-3) var(--sp-4);
    }

    .shield__ann-number {
      font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .shield__ann-label {
      font-size: 0.6rem;
      letter-spacing: 0.1em;
    }
  }

  /* ─────────────────── PROCESS ─────────────────── */
  .process {
    padding-block: var(--section-py);
    background: var(--c-bg-secondary);
    overflow: hidden;
  }

  .process__header {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-bottom: var(--sp-12);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .process__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-primary);
  }

  .process__headline {
    font-size: var(--fs-48);
    color: var(--c-text);
    max-width: 20ch;
  }

  /* Desktop horizontal scroll */
  .process__track-wrapper {
    overflow: hidden;
  }

  .process__track {
    display: flex;
    gap: var(--sp-8);
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-8);
    position: relative;
  }

  /* Connector line */
  .process__connector {
    position: absolute;
    top: 64px; /* aligned with step number center */
    left: var(--gutter);
    right: var(--gutter);
    height: 1px;
    background: linear-gradient(to right,
      var(--c-primary) 0%,
      rgba(196, 93, 62, 0.2) 100%
    );
    z-index: 0;
  }

  .process__step {
    flex: 0 0 min(380px, 85vw);
    background: var(--c-bg-tertiary);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    transition: border-color var(--dur-med);
  }

  .process__step:hover {
    border-color: rgba(var(--c-primary-rgb), 0.4);
  }

  .process__step-num {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.2em;
    color: var(--c-primary);
  }

  .process__step-icon {
    width: 48px;
    height: 48px;
    background: rgba(var(--c-primary-rgb), 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
  }

  .process__step-icon svg {
    width: 24px;
    height: 24px;
  }

  .process__step-title {
    font-family: var(--ff-serif);
    font-size: var(--fs-24);
    color: var(--c-text);
  }

  .process__step-body {
    font-size: var(--fs-16);
    color: var(--c-text-muted);
    line-height: 1.7;
  }

  @media (max-width: 900px) {
    .process__track {
      flex-direction: column;
      gap: var(--sp-6);
    }

    .process__connector { display: none; }
    .process__step { flex: none; }
  }

  /* ─────────────────── REVIEWS ─────────────────── */
  .reviews {
    padding-block: var(--section-py);
    background: var(--c-bg);
    overflow: hidden;
  }

  .reviews__container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--sp-12);
    align-items: start;
  }

  /* ── Left column: rating hero ── */
  .reviews__left {
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-8));
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }

  .reviews__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-primary);
  }

  .reviews__rating-block {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .reviews__big-number {
    font-family: var(--ff-serif);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .reviews__rating-detail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .reviews__stars-row {
    font-size: var(--fs-24);
    color: var(--c-accent);
    letter-spacing: 2px;
  }

  .reviews__count {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
  }

  .reviews__headline {
    font-family: var(--ff-serif);
    font-size: var(--fs-32);
    color: var(--c-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  /* ── Right column: cards ── */
  .reviews__right {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .reviews__card {
    background: var(--c-bg-secondary);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: transform var(--dur-med) var(--ease-out),
                border-color var(--dur-med) var(--ease-out);
  }

  .reviews__card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c-primary-rgb), 0.4);
  }

  .reviews__card--featured {
    padding: var(--sp-8);
    background: linear-gradient(135deg, var(--c-bg-secondary), var(--c-bg-tertiary));
    border-color: rgba(var(--c-primary-rgb), 0.2);
  }

  .reviews__card--featured .reviews__card-quote {
    font-size: var(--fs-20);
  }

  .reviews__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .reviews__card-stars {
    font-size: var(--fs-14);
    color: var(--c-accent);
    letter-spacing: 2px;
  }

  .reviews__card-quote {
    font-family: var(--ff-serif);
    font-size: var(--fs-16);
    font-style: italic;
    color: var(--c-text);
    line-height: 1.65;
  }

  .reviews__card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: var(--border);
    padding-top: var(--sp-3);
    margin-top: auto;
  }

  .reviews__card-author {
    font-weight: 700;
    font-size: var(--fs-14);
    color: var(--c-text);
  }

  .reviews__card-loc {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
  }

  @media (max-width: 900px) {
    .reviews__container {
      grid-template-columns: 1fr;
      gap: var(--sp-8);
    }

    .reviews__left {
      position: static;
    }

    .reviews__two-col {
      grid-template-columns: 1fr;
    }
  }

  /* ─────────────────── FINANCING CTA ─────────────────── */
  .financing {
    padding-block: var(--section-py);
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 40%, var(--c-accent-dark) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--sp-12);
  }

  /* Large decorative diagonal line */
  .financing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='60' x2='60' y2='0' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E") repeat;
    background-size: 60px 60px;
  }

  .financing__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    flex: 1;
    text-align: center;
    align-items: center;
  }

  .financing__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(245, 240, 235, 0.7);
  }

  .financing__headline {
    font-family: var(--ff-serif);
    font-size: var(--fs-64);
    font-weight: 700;
    color: var(--c-cream);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .financing__body {
    font-size: var(--fs-18);
    color: rgba(245, 240, 235, 0.8);
    max-width: 50ch;
    line-height: 1.7;
  }

  .financing__deco {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.12;
  }

  .financing__deco-n {
    font-family: var(--ff-serif);
    font-size: var(--fs-120);
    font-weight: 700;
    color: var(--c-cream);
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .financing__deco-sub {
    font-family: var(--ff-mono);
    font-size: var(--fs-14);
    letter-spacing: 0.2em;
    color: var(--c-cream);
    text-transform: uppercase;
  }

  @media (max-width: 700px) {
    .financing__deco {
      display: none;
    }

    .financing__headline {
      font-size: clamp(2rem, 8vw, 3rem);
    }

    .financing__inner {
      padding: var(--sp-8) var(--gutter);
    }
  }

  /* ─────────────────── CONTACT ─────────────────── */
  .contact {
    padding-block: var(--section-py);
    background: var(--c-bg-secondary);
  }

  .contact__layout {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }

  .contact__eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: var(--sp-3);
  }

  .contact__headline {
    font-size: var(--fs-48);
    color: var(--c-text);
    margin-bottom: var(--sp-3);
  }

  .contact__sub {
    font-size: var(--fs-16);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-8);
  }

  /* Form */
  .contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }

  .contact__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    position: relative;
  }

  .contact__label {
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .contact__label-opt {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-11, 0.7rem);
    opacity: 0.7;
  }

  .contact__input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.2);
    padding: var(--sp-3) 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-16);
    color: var(--c-text);
    outline: none;
    transition: border-color var(--dur-fast);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
  }

  .contact__input::placeholder {
    color: var(--c-text-faint);
  }

  .contact__input:focus {
    border-bottom-color: var(--c-primary);
  }

  .contact__input:focus + .contact__focus-line { }

  /* animated underline on focus */
  .contact__field::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-primary);
    transition: width var(--dur-med) var(--ease-out);
  }

  .contact__field:focus-within::after {
    width: 100%;
  }

  .contact__select {
    background: transparent;
    color: var(--c-text);
  }

  .contact__select option {
    background: var(--c-bg-secondary);
    color: var(--c-text);
  }

  .contact__textarea {
    resize: vertical;
    min-height: 100px;
  }

  .contact__err {
    font-size: var(--fs-12);
    color: var(--c-error);
    min-height: 1.2em;
  }

  .contact__privacy {
    font-size: var(--fs-12);
    color: var(--c-text-faint);
    text-align: center;
    margin-top: calc(-1 * var(--sp-3));
  }

  /* Success state */
  .contact__success {
    background: rgba(var(--c-primary-rgb), 0.08);
    border: 1px solid rgba(var(--c-primary-rgb), 0.3);
    border-radius: var(--radius-lg);
    padding: var(--sp-12) var(--sp-8);
    text-align: center;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
  }

  .contact__success.is-visible {
    display: flex;
  }

  .contact__success-icon {
    width: 56px;
    height: 56px;
    background: var(--c-primary);
    color: var(--c-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-24);
    font-weight: 700;
  }

  .contact__success h3 {
    font-family: var(--ff-serif);
    font-size: var(--fs-32);
    color: var(--c-text);
  }

  .contact__success p {
    color: var(--c-text-muted);
    max-width: 40ch;
  }

  /* Info column */
  .contact__info-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding-top: var(--sp-12);
    border-left: 1px solid rgba(var(--c-primary-rgb), 0.12);
    padding-left: clamp(2rem, 5vw, 5rem);
  }

  .contact__info-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .contact__info-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-primary);
    font-weight: 400;
  }

  .contact__address,
  .contact__hours,
  .contact__areas {
    font-size: var(--fs-16);
    color: var(--c-text-muted);
    line-height: 1.65;
  }

  .contact__phone {
    font-family: var(--ff-serif);
    font-size: var(--fs-32);
    font-weight: 700;
    color: var(--c-primary);
    transition: color var(--dur-fast);
  }

  .contact__phone:hover {
    color: var(--c-primary-light);
  }

  .contact__certifications {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--border);
  }

  .contact__cert-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .contact__cert-icon {
    width: 40px;
    height: 40px;
    background: rgba(var(--c-primary-rgb), 0.12);
    color: var(--c-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-18);
    flex-shrink: 0;
  }

  .contact__cert-badge strong {
    display: block;
    font-size: var(--fs-14);
    color: var(--c-text);
  }

  .contact__cert-badge span {
    display: block;
    font-size: var(--fs-12);
    color: var(--c-text-muted);
    font-family: var(--ff-mono);
    letter-spacing: 0.05em;
  }

  @media (max-width: 900px) {
    .contact__layout {
      grid-template-columns: 1fr;
      gap: var(--sp-12);
    }

    .contact__info-col {
      border-left: none;
      border-top: var(--border);
      padding-left: 0;
      padding-top: var(--sp-12);
    }
  }

  /* ─────────────────── FOOTER ─────────────────── */
  .footer {
    background: var(--c-bg);
    border-top: var(--border);
    padding-block: var(--sp-8);
  }

  .footer__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    flex-wrap: wrap;
  }

  .footer__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--ff-serif);
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--c-text);
  }

  .footer__logo-mark {
    width: 32px;
    height: 32px;
    background: var(--c-primary);
    color: var(--c-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-16);
    font-weight: 700;
    flex-shrink: 0;
  }

  .footer__nav {
    display: flex;
    gap: var(--sp-6);
    margin-inline: auto;
    flex-wrap: wrap;
  }

  .footer__link {
    font-size: var(--fs-14);
    color: var(--c-text-muted);
    letter-spacing: 0.05em;
    transition: color var(--dur-fast);
  }

  .footer__link:hover {
    color: var(--c-primary);
  }

  .footer__phone {
    font-family: var(--ff-serif);
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--c-primary);
  }

  .footer__bottom {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-top: var(--sp-6);
    border-top: var(--border);
    margin-top: var(--sp-6);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .footer__copy,
  .footer__legal {
    font-size: var(--fs-12);
    color: var(--c-text-faint);
    font-family: var(--ff-mono);
    letter-spacing: 0.05em;
  }

  @media (max-width: 700px) {
    .footer__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-6);
    }

    .footer__nav {
      margin-inline: 0;
    }

    .footer__bottom {
      flex-direction: column;
    }
  }

} /* end @layer sections */

/* ============================================================
   @layer MOTION — Scroll-driven + reduced motion
   ============================================================ */
@layer motion {

  /* CSS scroll-driven animations — instance 1: trust ribbon slow fade-in */
  @supports (animation-timeline: scroll()) {
    .trust-ribbon {
      animation: ribbon-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }

    @keyframes ribbon-fade {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* instance 2: about section heading reveal */
    .about__headline {
      animation: heading-slide linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    @keyframes heading-slide {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* instance 3: services list reveal */
    .services__item {
      animation: service-slide linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    @keyframes service-slide {
      from { opacity: 0; transform: translateX(-20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* instance 4: process steps subtle reveal */
    .process__step {
      animation: step-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    @keyframes step-rise {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* instance 5: review cards */
    .reviews__card {
      animation: card-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    @keyframes card-rise {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }

  /* Reduced motion — kill everything fancy */
  @media (prefers-reduced-motion: reduce) {
    *:not(.trust-ribbon__inner), *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .trust-ribbon__inner { animation-duration: 60s; } /* Slow down but keep moving */
    .hero__scroll-indicator { animation: none; }
    .hero__eyebrow-dot { animation: none; }

    .js-ready .js-reveal-clip {
      clip-path: inset(0 0 0 0) !important;
    }
  }

}

/* ============================================================
   @layer UTILITIES
   ============================================================ */
@layer utilities {

  .u-text-primary  { color: var(--c-primary); }
  .u-text-accent   { color: var(--c-accent); }
  .u-text-muted    { color: var(--c-text-muted); }
  .u-font-mono     { font-family: var(--ff-mono); }
  .u-font-serif    { font-family: var(--ff-serif); }
  .u-uppercase     { text-transform: uppercase; letter-spacing: 0.1em; }
  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
}

/* ── Mobile Readability Floor ── */
@media (max-width: 600px) {
  p, span, a, li, label, figcaption, blockquote,
  .service__desc, .process__text, .review__body,
  .about__desc, .hero__body, .financing__body,
  .contact__text, .footer__text, .shield__label,
  .gallery__caption, .section-label, .trust__item {
    font-size: max(0.875rem, 14px);
    line-height: 1.6;
  }

  .hero__body {
    font-size: max(1rem, 16px);
  }
}