/* ═══════════════════════════════════════════════
           SECTION: CTA / BOOKING — Immersive Exit Scene
           Dramatic atmospheric closing scene — cinematic grand finale
           ═══════════════════════════════════════════════ */

        .cta {
          position: relative;
          overflow: hidden;
          padding: clamp(6rem, 14vw, 12rem) 0 clamp(5rem, 10vw, 8rem);
          background: var(--bg-primary);
        }

        /* Layered atmospheric background */
        .cta::before {
          content: '';
          position: absolute;
          inset: 0;
          background:
            radial-gradient(ellipse 90% 60% at 50% 80%, rgba(142,153,164,0.08) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 20% 20%, rgba(142,153,164,0.05) 0%, transparent 50%),
            radial-gradient(ellipse 70% 50% at 80% 30%, rgba(142,153,164,0.06) 0%, transparent 55%);
          pointer-events: none;
          animation: ctaAtmosphereDrift 20s var(--ease-in-out) infinite alternate;
        }

        @keyframes ctaAtmosphereDrift {
          0% { opacity: 1; transform: scale(1); }
          100% { opacity: 0.85; transform: scale(1.1) translate(10px, -5px); }
        }

        /* ── 1. ATMOSPHERIC AMBIENT GLOW — breathing pulse over 6s ── */
        .cta__glow {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: clamp(300px, 60vw, 900px);
          height: clamp(300px, 50vw, 700px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(142,153,164,0.18) 0%, rgba(142,153,164,0.06) 40%, transparent 70%);
          pointer-events: none;
          filter: blur(60px);
          animation: ctaGlowBreathe 6s var(--ease-in-out) infinite;
          will-change: transform, opacity;
        }

        @keyframes ctaGlowBreathe {
          0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
          50%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.2); }
          100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
        }

        /* ── 5. DECORATIVE LINE TRAVELING PULSE ── */
        .cta__line {
          position: absolute;
          width: 1px;
          top: 10%;
          bottom: 10%;
          pointer-events: none;
          opacity: 0.25;
        }

        .cta__line--left {
          left: 8%;
          background: linear-gradient(180deg, transparent 0%, var(--accent-dim) 30%, var(--accent) 50%, var(--accent-dim) 70%, transparent 100%);
        }

        .cta__line--left::after {
          content: '';
          position: absolute;
          left: -2px;
          width: 5px;
          height: 60px;
          background: linear-gradient(180deg, transparent, rgba(142,153,164,0.7), transparent);
          border-radius: 50%;
          animation: ctaLineTravelDown 3.5s linear infinite;
          filter: blur(1px);
        }

        .cta__line--right {
          right: 8%;
          background: linear-gradient(180deg, transparent 0%, var(--accent-dim) 30%, var(--accent) 50%, var(--accent-dim) 70%, transparent 100%);
        }

        .cta__line--right::after {
          content: '';
          position: absolute;
          left: -2px;
          width: 5px;
          height: 60px;
          background: linear-gradient(180deg, transparent, rgba(142,153,164,0.7), transparent);
          border-radius: 50%;
          animation: ctaLineTravelDown 3.5s linear infinite;
          animation-delay: 1.75s;
          filter: blur(1px);
        }

        @keyframes ctaLineTravelDown {
          0%   { top: -60px;  opacity: 0; }
          8%   { opacity: 1; }
          92%  { opacity: 1; }
          100% { top: calc(100% + 60px); opacity: 0; }
        }

        /* Small diamond ornament at line midpoint */
        .cta__diamond {
          position: absolute;
          width: 8px;
          height: 8px;
          border: 1px solid var(--accent-dim);
          transform: rotate(45deg);
          pointer-events: none;
          opacity: 0.5;
        }

        .cta__diamond--left {
          left: calc(8% - 4px);
          top: 50%;
        }

        .cta__diamond--right {
          right: calc(8% - 4px);
          top: 50%;
        }

        /* Inner content container */
        .cta__inner {
          position: relative;
          z-index: 2;
          max-width: var(--container-max);
          margin: 0 auto;
          padding: 0 var(--container-padding);
          display: grid;
          grid-template-columns: 1fr;
          gap: 3rem;
          text-align: center;
        }

        /* Eyebrow — hidden initially for choreographed reveal */
        .cta__eyebrow {
          font-family: var(--font-body);
          font-size: 0.6rem;
          font-weight: 500;
          letter-spacing: 0.4em;
          text-transform: uppercase;
          color: var(--accent);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          margin-bottom: 1rem;
          opacity: 0;
          transform: translateY(25px);
          transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cta__eyebrow.cta-fade-revealed {
          opacity: 1;
          transform: translateY(0);
        }

        .cta__eyebrow::before,
        .cta__eyebrow::after {
          content: '';
          display: block;
          width: 50px;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--accent-dim));
        }

        .cta__eyebrow::after {
          background: linear-gradient(90deg, var(--accent-dim), transparent);
        }

        /* ── 2. TITLE SPLIT REVEAL — mask-wipe per word ── */
        .cta__headline {
          font-family: var(--font-display);
          font-size: clamp(2.8rem, 7vw, 6.5rem);
          font-weight: 900;
          line-height: 0.95;
          color: var(--fg-primary);
          margin-bottom: 1.5rem;
        }

        .cta__headline em {
          font-style: italic;
          font-weight: 400;
          color: var(--accent);
        }

        /* Split-mask word wrappers — each word sits behind a mask */
        .cta__word-mask {
          display: inline-block;
          overflow: hidden;
          vertical-align: bottom;
          line-height: 1;
        }

        .cta__word-inner {
          display: inline-block;
          transform: translateY(115%);
          opacity: 0;
          transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                      opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Accent/italic word gets special scale+rotation entrance */
        .cta__word-inner--accent {
          transform: translateY(115%) scale(0.8) rotate(-3deg);
          transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1),
                      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cta__word-inner.cta-word-revealed {
          transform: translateY(0);
          opacity: 1;
        }

        .cta__word-inner--accent.cta-word-revealed {
          transform: translateY(0) scale(1) rotate(0deg);
          opacity: 1;
        }

        .cta__word-break {
          display: block;
          height: 0;
          overflow: hidden;
        }

        /* Supporting subtitle — hidden initially */
        .cta__subtitle {
          font-family: var(--font-accent);
          font-size: clamp(1rem, 1.6vw, 1.35rem);
          font-weight: 300;
          font-style: italic;
          color: var(--fg-muted);
          line-height: 1.8;
          max-width: 560px;
          margin: 0 auto 3rem;
          opacity: 0;
          transform: translateY(25px);
          transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cta__subtitle.cta-fade-revealed {
          opacity: 1;
          transform: translateY(0);
        }

        /* ── 3. CTA BUTTON GRAND ENTRANCE ── */
        .cta__btn {
          display: inline-flex;
          align-items: center;
          gap: 1rem;
          font-family: var(--font-body);
          font-size: 0.75rem;
          font-weight: 600;
          letter-spacing: 0.3em;
          text-transform: uppercase;
          color: #FFFFFF;
          background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
          padding: 1.4rem 3.5rem;
          clip-path: none;
          border-radius: var(--radius-pill);
          transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                      box-shadow 0.5s var(--ease-out-expo),
                      background 0.5s var(--ease-out-expo),
                      opacity 0.5s ease;
          position: relative;
          overflow: hidden;
          margin-bottom: clamp(4rem, 8vw, 6rem);
          /* Grand entrance: starts invisible and rotated */
          transform: scale(0) rotate(-8deg);
          opacity: 0;
        }

        .cta__btn::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
          transform: translateX(-120%);
          transition: transform 0.7s var(--ease-out-expo);
        }

        /* Spring entrance reveal */
        .cta__btn.cta-btn-revealed {
          transform: scale(1) rotate(0deg);
          opacity: 1;
        }

        /* Shimmer sweep + elevated hover */
        .cta__btn.cta-btn-revealed:hover::before {
          transform: translateX(120%);
        }

        /* Premium: Button top highlight */
        .cta__btn::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
          z-index: 1;
        }

        .cta__btn.cta-btn-revealed:hover {
          transform: scale(1.05) rotate(0deg);
          box-shadow:
            0 8px 24px rgba(142,153,164,0.25),
            0 20px 60px rgba(142,153,164,0.2),
            0 0 80px rgba(142,153,164,0.08);
          background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
        }

        .cta__btn svg {
          width: 18px;
          height: 18px;
          transition: transform 0.4s var(--ease-out-expo);
        }

        .cta__btn:hover svg { transform: translateX(4px); }

        /* ── 4. CONTACT INFO STAGGER ── */
        .cta__contact-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2rem;
          max-width: 900px;
          margin: 0 auto;
          position: relative;
          padding-top: 3rem;
        }

        .cta__contact-grid::before {
          content: '';
          position: absolute;
          top: 0;
          left: 15%;
          right: 15%;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--border-light), transparent);
        }

        .cta__contact-item {
          text-align: center;
          opacity: 0;
          transform: translateY(25px) translateX(-15px);
          transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cta__contact-item.cta-contact-revealed {
          opacity: 1;
          transform: translateY(0) translateX(0);
        }

        .cta__contact-label {
          font-family: var(--font-body);
          font-size: 0.5rem;
          font-weight: 500;
          letter-spacing: 0.35em;
          text-transform: uppercase;
          color: var(--fg-dim);
          margin-bottom: 0.6rem;
        }

        .cta__contact-value {
          font-family: var(--font-accent);
          font-size: 0.95rem;
          font-weight: 300;
          color: var(--fg-secondary);
          line-height: 1.6;
          transition: color 0.3s ease;
        }

        .cta__contact-item:hover .cta__contact-value {
          color: var(--accent-light);
        }

        @media (max-width: 900px) {
          .cta__contact-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5rem 2rem;
          }
          .cta__line, .cta__diamond { display: none; }
        }

        @media (max-width: 540px) {
          .cta__contact-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
          }
          .cta__headline {
            font-size: clamp(2.2rem, 10vw, 3.5rem);
          }
          .cta__btn {
            padding: 1.2rem 2.5rem;
            width: 100%;
            justify-content: center;
          }
        }