/* ============================================================
           CONTACT — PAGE STYLES
           Prefix: .ctp-  (avoids collisions with global stylesheets)

           A shorter, functional hero (this page's job is speed to
           contact, not narrative), then a set of reach-us cards built
           directly from the footer's own card system (.footer-col-card,
           .footer-menu-row, .footer-menu-address, .footer-directions-pill)
           so the address/social/contact treatment matches the footer
           exactly, per brief. A real Google Maps embed and a static-
           friendly mailto form follow.
           ============================================================ */
        :root {
            --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
            --ctp-graphite-deep: #35363F;
        }

        /* ---------- Shared on-scroll animation classes ---------- */
        .fade-in-up {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s var(--premium-ease), transform 1s var(--premium-ease);
        }
        .fade-in-up.visible { opacity: 1; transform: translateY(0); }
        .fade-in { opacity: 0; transition: opacity 1s var(--premium-ease); }
        .fade-in.visible { opacity: 1; }
        .scale-up {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 1s var(--premium-ease), transform 1s var(--premium-ease);
        }
        .scale-up.visible { opacity: 1; transform: scale(1); }
        .nav-reveal {
            animation: navSlideDown 1.2s var(--premium-ease) forwards;
            opacity: 0;
            transform: translateY(-100%);
        }
        @keyframes navSlideDown { to { opacity: 1; transform: translateY(0); } }

        /* ============================================================
           1. HERO — short, functional, one floating headset for
              continuity with the rest of the site (not the full
              two-object treatment used on How It Works).
           ============================================================ */
        .ctp-hero {
            position: relative;
            min-height: 62vh;
            padding-top: 120px;
            background: var(--ctp-graphite-deep);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ctp-hero-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            pointer-events: none;
            z-index: 1;
            animation: ctpOrbDrift 34s ease-in-out infinite alternate;
        }
        .ctp-orb-1 { width: 420px; height: 420px; left: 2%; top: -6%; background: var(--primary-orange); opacity: 0.2; }
        .ctp-orb-2 { width: 320px; height: 320px; right: 4%; bottom: -80px; background: #FF9C4A; opacity: 0.14; animation-delay: -12s; }
        @keyframes ctpOrbDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18px, 22px, 0); } }

        .ctp-hero-content { position: relative; z-index: 2; text-align: center; width: 100%; padding: 40px clamp(20px, 6vw, 60px) 90px; }
        .ctp-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-lato);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 2.6px;
            text-transform: uppercase;
            color: var(--light-orange);
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 217, 168, 0.28);
            padding: 11px 22px;
            border-radius: 100px;
            margin-bottom: 26px;
            opacity: 0;
            animation: ctpFadeSoft 1s var(--premium-ease) 0.3s forwards;
        }
        .ctp-hero-badge i { color: var(--primary-orange); }
        @keyframes ctpFadeSoft { to { opacity: 1; } }

        .ctp-hero-title {
            font-family: var(--font-lato);
            font-size: clamp(2.4rem, 5.6vw, 4.2rem);
            font-weight: 900;
            color: var(--light-orange);
            line-height: 1.05;
            letter-spacing: -0.03em;
            margin-bottom: 18px;
            opacity: 0;
            animation: ctpRiseSoft 1.1s var(--premium-ease) 0.45s forwards;
        }
        .ctp-hero-title em { font-style: normal; color: #FF9C4A; }
        @keyframes ctpRiseSoft { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

        .ctp-hero-subtitle {
            font-family: var(--font-nunito);
            font-size: clamp(1.02rem, 1.7vw, 1.24rem);
            line-height: 1.7;
            color: rgba(245, 241, 232, 0.88);
            max-width: 580px;
            margin: 0 auto;
            opacity: 0;
            animation: ctpRiseSoft 1s var(--premium-ease) 0.75s forwards;
        }

        .ctp-hero-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
            margin-top: 36px;
            opacity: 0;
            animation: ctpRiseSoft 1s var(--premium-ease) 1.05s forwards;
        }

        /* ============================================================
           SHARED TOKENS
           ============================================================ */
        .ctp-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-lato);
            font-weight: 700;
            font-size: 0.82rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #B54A00;
        }
        .ctp-eyebrow--center { justify-content: center; }
        .ctp-eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--primary-orange); }
        .ctp-eyebrow--center::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--primary-orange); }
        .ctp-h2 {
            font-family: var(--font-lato);
            font-weight: 900;
            font-size: clamp(1.9rem, 4vw, 2.8rem);
            line-height: 1.16;
            color: var(--graphite);
            margin: 18px 0 16px;
            letter-spacing: -0.015em;
        }
        .ctp-h2 em { color: var(--primary-orange); font-style: normal; }
        .ctp-lede { font-family: var(--font-nunito); font-size: 1.05rem; line-height: 1.75; color: #55524C; max-width: 620px; margin: 0 auto; }
        .ctp-section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }

        /* ============================================================
           2. REACH US — a single wide, quiet panel with generous
              breathing room, divided by hairlines rather than boxed
              into cards. Deliberately unlike the footer's glassmorphism
              card grid (shadowed tiles, tinted icon squares, pill
              buttons): here the icons sit bare and accent-colored, the
              typography carries the hierarchy, and negative space does
              the separating. Reads like a hotel concierge directory,
              not a repeated component.
           ============================================================ */
        .ctp-reach { padding: 150px 6vw 70px; background-color: var(--ivory); position: relative; z-index: 1; }
        .ctp-reach-panel {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            border-radius: 28px;
            border: 1px solid rgba(65, 66, 76, 0.06);
            box-shadow: 0 30px 70px rgba(65, 66, 76, 0.09);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
        .ctp-reach-col {
            padding: 64px 44px;
            border-right: 1px solid rgba(65, 66, 76, 0.08);
            display: flex;
            flex-direction: column;
        }
        .ctp-reach-col:last-child { border-right: none; }
        .ctp-reach-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-lato);
            font-weight: 800;
            font-size: 0.72rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #9A968C;
            margin-bottom: 28px;
        }
        .ctp-reach-label i { color: var(--primary-orange); font-size: 0.92rem; }

        .ctp-reach-value {
            display: block;
            font-family: var(--font-lato);
            font-weight: 800;
            font-size: 1.28rem;
            letter-spacing: -0.01em;
            color: var(--graphite);
            text-decoration: none;
            margin-bottom: 14px;
            transition: color 0.25s ease;
        }
        .ctp-reach-value--sub {
            font-family: var(--font-nunito);
            font-weight: 600;
            font-size: 0.98rem;
            color: #6B6C76;
            margin-bottom: 0;
            word-break: break-word;
        }
        @media (hover: hover) and (pointer: fine) {
            .ctp-reach-value:hover { color: var(--primary-orange); }
        }
        .ctp-reach-col-spacer { flex: 1; }

        .ctp-reach-address {
            font-style: normal;
            font-family: var(--font-nunito);
            font-size: 1.05rem;
            line-height: 1.65;
            color: var(--graphite);
            margin-bottom: 22px;
        }
        .ctp-reach-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-lato);
            font-weight: 700;
            font-size: 0.86rem;
            letter-spacing: 0.02em;
            color: var(--primary-orange);
            text-decoration: none;
            padding-bottom: 3px;
            border-bottom: 1px solid rgba(255, 122, 0, 0.3);
            width: fit-content;
            transition: border-color 0.25s ease, gap 0.25s ease;
        }
        .ctp-reach-link i { font-size: 0.74rem; transition: transform 0.3s var(--ease-out); }
        @media (hover: hover) and (pointer: fine) {
            .ctp-reach-link:hover { border-color: var(--primary-orange); }
            .ctp-reach-link:hover i { transform: translateX(3px); }
        }

        .ctp-hours-list { display: flex; flex-direction: column; }
        .ctp-hours-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 0;
            border-bottom: 1px dashed rgba(65, 66, 76, 0.14);
        }
        .ctp-hours-row:first-child { padding-top: 0; }
        .ctp-hours-row:last-child { border-bottom: none; }
        .ctp-hours-day { font-family: var(--font-nunito); font-weight: 700; font-size: 0.94rem; color: var(--graphite); }
        .ctp-hours-time { font-family: var(--font-lato); font-weight: 800; font-size: 0.9rem; color: #9A968C; }

        .ctp-reach-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
        .ctp-reach-social a {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1px solid rgba(65, 66, 76, 0.16);
            color: var(--graphite);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            text-decoration: none;
            transition: background 0.3s var(--ease-out), border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .ctp-reach-social a:hover {
                background: var(--primary-orange);
                border-color: var(--primary-orange);
                color: #fff;
                transform: translateY(-3px);
            }
        }

        @media (max-width: 1100px) {
            .ctp-reach-panel { grid-template-columns: 1fr 1fr; }
            .ctp-reach-col:nth-child(2) { border-right: none; }
            .ctp-reach-col:nth-child(1), .ctp-reach-col:nth-child(2) { border-bottom: 1px solid rgba(65, 66, 76, 0.08); }
        }
        @media (max-width: 640px) {
            .ctp-reach { padding: 90px 6vw 40px; }
            .ctp-reach-panel { grid-template-columns: 1fr; border-radius: 22px; }
            .ctp-reach-col { padding: 40px 32px; border-right: none !important; border-bottom: 1px solid rgba(65, 66, 76, 0.08) !important; }
            .ctp-reach-col:last-child { border-bottom: none !important; }
        }

        /* ============================================================
           3. MAP
           ============================================================ */
        .ctp-map-section { padding: 70px 6vw 20px; background-color: var(--ivory); }
        .ctp-map-frame {
            max-width: 1180px;
            margin: 0 auto;
            position: relative;
            aspect-ratio: 21 / 8;
            min-height: 280px;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 20px 48px rgba(65, 66, 76, 0.14);
            border: 1px solid rgba(65, 66, 76, 0.08);
        }
        .ctp-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
        @media (max-width: 640px) { .ctp-map-frame { aspect-ratio: 4 / 5; } }

        /* ============================================================
           4. FORM
           ============================================================ */
        .ctp-form-section { padding: 100px 6vw 150px; background-color: var(--ivory); }
        .ctp-form-wrap {
            max-width: 760px;
            margin: 0 auto;
            background: #fff;
            border-radius: 26px;
            padding: clamp(30px, 5vw, 56px);
            box-shadow: 0 24px 60px rgba(65, 66, 76, 0.1);
            border: 1px solid rgba(65, 66, 76, 0.06);
        }
        .ctp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
        .ctp-field { display: flex; flex-direction: column; gap: 8px; }
        .ctp-field--full { grid-column: 1 / -1; }
        .ctp-field label {
            font-family: var(--font-lato); font-weight: 700; font-size: 0.78rem;
            letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite);
        }
        .ctp-field input,
        .ctp-field select,
        .ctp-field textarea {
            font-family: var(--font-nunito);
            font-size: 1rem;
            color: var(--graphite);
            background: var(--ivory);
            border: 1px solid rgba(65, 66, 76, 0.14);
            border-radius: 12px;
            padding: 14px 16px;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .ctp-field textarea { resize: vertical; min-height: 120px; }
        .ctp-field input:focus,
        .ctp-field select:focus,
        .ctp-field textarea:focus {
            outline: none;
            border-color: var(--primary-orange);
            box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.12);
        }
        .ctp-form-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
        .ctp-form-note { font-family: var(--font-nunito); font-size: 0.86rem; color: #8A8B94; margin-top: 1.25rem; text-align: center; }
        .ctp-hs-embed { min-height: 120px; }
        .ctp-hs-embed .hs-form-frame,
        .ctp-hs-embed iframe {
            width: 100% !important;
            max-width: 100%;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 640px) {
            .ctp-hero { min-height: 56vh; padding-top: 100px; }
            .ctp-hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
            .ctp-hero-actions .btn-primary-small { width: 100%; justify-content: center; }
            .ctp-form-grid { grid-template-columns: 1fr; }
        }

        /* ============================================================
           REDUCED MOTION
           ============================================================ */
        @media (prefers-reduced-motion: reduce) {
            .ctp-hero-orb { animation: none; }
            .fade-in-up, .scale-up { transform: none; }
        }