/* ═══════════════════════════════════════════════
           SECTION: FOOTER — Footer Constellation
           Multi-zone footer with varied weight, compact & refined
           ═══════════════════════════════════════════════ */

        .footer {
          position: relative;
          background: var(--bg-dark);
          padding: clamp(3rem, 6vw, 5rem) 0 0;
          overflow: hidden;
        }

        /* Premium: Subtle ambient glow above footer */
        .footer::after {
          content: '';
          position: absolute;
          top: -80px;
          left: 15%;
          right: 15%;
          height: 80px;
          background: radial-gradient(ellipse at 50% 100%, rgba(142,153,164,0.04) 0%, transparent 70%);
          pointer-events: none;
        }

        /* ── 10. FOOTER BORDER GLOW — slow-moving copper gradient ── */
        .footer::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg,
            transparent 0%,
            rgba(142,153,164,0) 15%,
            rgba(142,153,164,0.5) 35%,
            rgba(200,210,220,0.7) 50%,
            rgba(142,153,164,0.5) 65%,
            rgba(142,153,164,0) 85%,
            transparent 100%);
          background-size: 250% 100%;
          animation: footerBorderGlow 8s var(--ease-in-out) infinite;
        }

        @keyframes footerBorderGlow {
          0%   { background-position: 150% 0; }
          50%  { background-position: -50% 0; }
          100% { background-position: 150% 0; }
        }

        .footer__inner {
          max-width: var(--container-max);
          margin: 0 auto;
          padding: 0 var(--container-padding);
          display: grid;
          grid-template-columns: 1.5fr 1fr 1fr 1fr;
          gap: clamp(2rem, 4vw, 4rem);
        }

        /* ── 7. ZONE STAGGERED REVEAL ON SCROLL ── */
        /* Zone 1: Brand + short tagline */
        .footer__brand {
          display: flex;
          flex-direction: column;
          gap: 1.2rem;
          opacity: 0;
          transform: translateY(45px);
          transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .footer__brand.footer-zone-revealed {
          opacity: 1;
          transform: translateY(0);
        }

        .footer__logo {
          font-family: var(--font-display);
          font-size: 1.6rem;
          font-weight: 700;
          letter-spacing: 0.3em;
          text-transform: uppercase;
            color: #FFFFFF;
          }

          .footer__logo-dot {
          color: var(--accent);
        }

        .footer__tagline {
          font-family: var(--font-accent);
          font-size: 0.9rem;
          font-weight: 300;
          font-style: italic;
          color: var(--fg-dim);
          line-height: 1.7;
          max-width: 240px;
        }

        /* ── 8. SOCIAL ICON HOVER — scale + rotate + copper fill ── */
        .footer__social {
          display: flex;
          gap: 0.75rem;
          margin-top: 0.5rem;
        }

        .footer__social-link {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border: 1px solid var(--border);
          border-radius: 2px;
          transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                      border-color 0.3s ease,
                      background 0.3s ease,
                      box-shadow 0.4s ease;
        }

        .footer__social-link:hover {
          border-color: var(--accent);
          background: var(--accent);
          transform: scale(1.2) rotate(5deg);
          box-shadow: 0 4px 20px rgba(142,153,164,0.35);
        }

        .footer__social-link svg {
          width: 14px;
          height: 14px;
          fill: var(--fg-dim);
          transition: fill 0.3s ease;
        }

        .footer__social-link:hover svg {
          fill: #FFFFFF;
        }

        /* Zones 2/3/4: Title + Links — hidden initially for stagger reveal */
        .footer__zone-title {
          font-family: var(--font-body);
          font-size: 0.55rem;
          font-weight: 600;
          letter-spacing: 0.3em;
          text-transform: uppercase;
          color: var(--fg-muted);
          margin-bottom: 1.5rem;
          padding-bottom: 0.6rem;
          border-bottom: 1px solid rgba(180,172,162,0.4);
        }

        .footer__links {
          display: flex;
          flex-direction: column;
          gap: 0.65rem;
        }

        .footer__link {
          font-family: var(--font-body);
          font-size: 0.8rem;
          font-weight: 300;
          color: var(--fg-dim);
          transition: color 0.3s ease, padding-left 0.3s var(--ease-out-expo);
          display: inline-block;
        }

        .footer__link:hover {
          color: #F2F2F7;
          padding-left: 4px;
        }

        /* Zone: Contact Details */
        .footer__contact-detail {
          font-family: var(--font-accent);
          font-size: 0.85rem;
          font-weight: 300;
          color: var(--fg-dim);
          line-height: 1.7;
          display: flex;
          flex-direction: column;
          gap: 0.1rem;
        }

        .footer__contact-detail a {
          color: var(--fg-dim);
          transition: color 0.3s ease;
        }

        .footer__contact-detail a:hover {
          color: var(--accent);
        }

        /* Zone: Hours */
        .footer__hours-list {
          display: flex;
          flex-direction: column;
          gap: 0.55rem;
        }

        .footer__hours-row {
          display: flex;
          justify-content: space-between;
          gap: 1rem;
        }

        .footer__hours-day {
          font-family: var(--font-body);
          font-size: 0.75rem;
          font-weight: 400;
          color: var(--fg-dim);
        }

        .footer__hours-time {
          font-family: var(--font-accent);
          font-size: 0.8rem;
          font-weight: 300;
          color: var(--fg-muted);
        }

        /* Footer zone stagger class — applied to each zone div */
        .footer__zone-reveal {
          opacity: 0;
          transform: translateY(45px);
          transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .footer__zone-reveal.footer-zone-revealed {
          opacity: 1;
          transform: translateY(0);
        }

        /* ── 9. BACK TO TOP — hero flash pulse ── */
        @keyframes heroFlashPulse {
          0%   { opacity: 0; }
          25%  { opacity: 1; }
          100% { opacity: 0; }
        }

        .hero-flash-overlay {
          position: absolute;
          inset: 0;
          z-index: 100;
          pointer-events: none;
          background: radial-gradient(ellipse at center, rgba(142,153,164,0.12) 0%, transparent 70%);
          opacity: 0;
          animation: heroFlashPulse 1s ease-out forwards;
        }

        /* Bottom bar */
        .footer__bottom {
          margin-top: clamp(3rem, 5vw, 4rem);
          padding: 1.5rem var(--container-padding);
          border-top: 1px solid rgba(180,172,162,0.3);
          display: flex;
          justify-content: space-between;
          align-items: center;
          max-width: var(--container-max);
          margin-left: auto;
          margin-right: auto;
        }

        .footer__copy {
          font-family: var(--font-body);
          font-size: 0.65rem;
          font-weight: 300;
          letter-spacing: 0.1em;
          color: var(--fg-dim);
        }

        .footer__back-top {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-family: var(--font-body);
          font-size: 0.6rem;
          font-weight: 400;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--fg-dim);
          transition: color 0.3s ease;
          cursor: pointer;
        }

        .footer__back-top:hover {
          color: var(--accent);
        }

        .footer__back-top svg {
          width: 14px;
          height: 14px;
          transition: transform 0.3s var(--ease-out-expo);
        }

        .footer__back-top:hover svg {
          transform: translateY(-3px);
        }

        /* Footer responsive */
        @media (max-width: 900px) {
          .footer__inner {
            grid-template-columns: 1fr 1fr;
          }
        }

        @media (max-width: 540px) {
          .footer__inner {
            grid-template-columns: 1fr;
            gap: 2.5rem;
          }
          .footer__brand {
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(180,172,162,0.3);
          }
          .footer__bottom {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
          }
        }