/* ======================================================
           CSS CUSTOM PROPERTIES
           ====================================================== */
        :root {
            --ct-primary:     #2E0651;
            --ct-secondary:   #E5932A;
            --ct-accent:      #A22A46;
            --ct-light-gold:  #F8D295;
            --ct-cream:       #F3E6D9;
            --ct-white:       #FFFFFF;
            --ct-dark:        #1A0330;
            --ct-glow:        rgba(229,147,42,.35);
            --ct-card-bg:     rgba(46,6,81,.72);
            --ct-radius:      18px;
            --ct-transition:  .38s cubic-bezier(.4,0,.2,1);
        }

        /* ======================================================
           RESET / BASE FOR THIS PAGE
           ====================================================== */
        .ct-page * { box-sizing: border-box; }
        .ct-page    { font-family: 'Georgia', serif; color: var(--ct-white); }

        /* ======================================================
           HERO SECTION
           ====================================================== */
        .ct-hero {
            position: relative;
            min-height: 88vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
            background:
                linear-gradient(160deg, rgba(26,3,48,.92) 0%, rgba(46,6,81,.85) 60%, rgba(162,42,70,.75) 100%),
                url('<?php echo $BASE_URL; ?>/static/images/contact-bg.jpg') center/cover no-repeat;
        }

        /* Animated star-field canvas sits behind everything */
        .ct-starfield {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* Glowing orbs */
        .ct-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: .45;
            animation: ct-orbFloat 8s ease-in-out infinite alternate;
            pointer-events: none;
            z-index: 0;
        }
        .ct-orb--1 { width: 420px; height: 420px; background: var(--ct-primary);    top: -80px;  left: -100px; animation-delay: 0s; }
        .ct-orb--2 { width: 300px; height: 300px; background: var(--ct-secondary);  bottom: -60px; right: -60px; animation-delay: -3s; }
        .ct-orb--3 { width: 200px; height: 200px; background: var(--ct-accent);     top: 40%;  left: 50%; transform: translate(-50%,-50%); animation-delay: -5s; }

        @keyframes ct-orbFloat {
            from { transform: translate(0,0) scale(1); }
            to   { transform: translate(30px,20px) scale(1.08); }
        }

        .ct-hero__inner {
            position: relative;
            z-index: 2;
            padding: 2rem 1.5rem;
            max-width: 780px;
        }

        /* Animated mandala ring */
        .ct-mandala-ring {
            width: 160px; height: 160px;
            margin: 0 auto 1.8rem;
            position: relative;
        }
        .ct-mandala-ring svg {
            width: 100%; height: 100%;
            animation: ct-rotateSlow 22s linear infinite;
        }
        .ct-mandala-ring .ct-mandala-center {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 2.6rem;
            animation: ct-pulse 3s ease-in-out infinite;
        }
        @keyframes ct-rotateSlow { to { transform: rotate(360deg); } }
        @keyframes ct-pulse {
            0%,100% { transform: scale(1);   filter: drop-shadow(0 0 6px var(--ct-secondary)); }
            50%      { transform: scale(1.15); filter: drop-shadow(0 0 18px var(--ct-secondary)); }
        }

        /* Eye-brow tag */
        .ct-eyebrow {
            display: inline-block;
            font-size: .78rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--ct-light-gold);
            border: 1px solid rgba(248,210,149,.4);
            padding: .35rem 1.1rem;
            border-radius: 99px;
            margin-bottom: 1.1rem;
            backdrop-filter: blur(4px);
            animation: ct-fadeDown .8s both;
        }

        .ct-hero__title {
            font-size: clamp(2.4rem, 5.5vw, 4rem);
            font-weight: 700;
            line-height: 1.13;
            margin: 0 0 1.1rem;
            animation: ct-fadeDown .9s .1s both;
        }
        .ct-hero__title span {
            background: linear-gradient(135deg, var(--ct-light-gold) 0%, var(--ct-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ct-hero__sub {
            font-size: 1.1rem;
            line-height: 1.7;
            opacity: .88;
            margin: 0 0 2rem;
            animation: ct-fadeDown 1s .2s both;
        }

        .ct-hero__cta {
            display: inline-flex; align-items: center; gap: .6rem;
            padding: .85rem 2.2rem;
            background: linear-gradient(135deg, var(--ct-secondary), var(--ct-accent));
            color: var(--ct-white);
            border-radius: 99px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 6px 28px rgba(229,147,42,.4);
            transition: transform var(--ct-transition), box-shadow var(--ct-transition);
            animation: ct-fadeDown 1s .3s both;
        }
        .ct-hero__cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(229,147,42,.55);
        }

        /* Scroll indicator */
        .ct-scroll-hint {
            position: absolute;
            bottom: 2rem; left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex; flex-direction: column; align-items: center; gap: .4rem;
            opacity: .6; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
            animation: ct-bounce 2s ease-in-out infinite;
        }
        .ct-scroll-hint i { font-size: 1.2rem; }
        @keyframes ct-bounce {
            0%,100% { transform: translateX(-50%) translateY(0); }
            50%      { transform: translateX(-50%) translateY(8px); }
        }

        /* ======================================================
           KEYFRAMES shared
           ====================================================== */
        @keyframes ct-fadeDown {
            from { opacity:0; transform:translateY(-22px); }
            to   { opacity:1; transform:translateY(0); }
        }
        @keyframes ct-fadeUp {
            from { opacity:0; transform:translateY(24px); }
            to   { opacity:1; transform:translateY(0); }
        }
        @keyframes ct-fadeIn {
            from { opacity:0; }
            to   { opacity:1; }
        }

        /* ======================================================
           SECTION WRAPPER
           ====================================================== */
        .ct-section {
            position: relative;
            padding: 5rem 1.5rem;
            overflow: hidden;
        }
        .ct-section--dark  { background: var(--ct-dark); }
        .ct-section--mid   { background: #1e0440; }
        .ct-section--cream { background: var(--ct-cream); color: var(--ct-primary); }

        .ct-container {
            max-width: 1180px;
            margin: 0 auto;
        }

        /* Section heading */
        .ct-heading {
            text-align: center;
            margin-bottom: 3.5rem;
        }
        .ct-heading__eyebrow {
            font-size: .78rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--ct-secondary);
            margin-bottom: .6rem;
        }
        .ct-heading__title {
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            font-weight: 700;
            margin: 0 0 .8rem;
            line-height: 1.2;
        }
        .ct-heading__title span { color: var(--ct-secondary); }
        .ct-heading__line {
            width: 70px; height: 3px;
            background: linear-gradient(90deg, var(--ct-secondary), var(--ct-accent));
            margin: .6rem auto 0;
            border-radius: 99px;
        }

        /* ======================================================
           CONTACT CARDS GRID
           ====================================================== */
        .ct-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.6rem;
        }

        .ct-card {
            background: var(--ct-card-bg);
            border: 1px solid rgba(248,210,149,.15);
            border-radius: var(--ct-radius);
            padding: 2.2rem 1.8rem;
            text-align: center;
            backdrop-filter: blur(14px);
            position: relative;
            overflow: hidden;
            transition: transform var(--ct-transition), border-color var(--ct-transition), box-shadow var(--ct-transition);
            cursor: default;
            opacity: 0;
            transform: translateY(30px);
        }
        .ct-card.ct-visible {
            animation: ct-fadeUp .7s forwards;
        }
        .ct-card:hover {
            transform: translateY(-6px);
            border-color: rgba(229,147,42,.5);
            box-shadow: 0 16px 50px rgba(0,0,0,.4), 0 0 28px var(--ct-glow);
        }

        /* Shimmer overlay */
        .ct-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 60%);
            border-radius: inherit;
            pointer-events: none;
        }

        /* Glow spot on hover */
        .ct-card::after {
            content: '';
            position: absolute;
            width: 150px; height: 150px;
            background: radial-gradient(circle, var(--ct-secondary) 0%, transparent 70%);
            opacity: 0;
            top: -40px; right: -40px;
            border-radius: 50%;
            transition: opacity var(--ct-transition);
            pointer-events: none;
        }
        .ct-card:hover::after { opacity: .12; }

        .ct-card__icon-wrap {
            width: 64px; height: 64px;
            margin: 0 auto 1.2rem;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem;
            transition: transform .4s ease, box-shadow .4s ease;
        }
        .ct-card:hover .ct-card__icon-wrap {
            transform: rotateY(360deg);
            box-shadow: 0 0 22px var(--ct-glow);
        }

        .ct-card__label {
            font-size: .78rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            opacity: .65;
            margin-bottom: .4rem;
        }
        .ct-card__value {
            font-size: 1.05rem;
            font-weight: 600;
            word-break: break-word;
            margin-bottom: 1.3rem;
            color: var(--ct-light-gold);
        }
        .ct-card__btn {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .6rem 1.5rem;
            border-radius: 99px;
            font-size: .88rem;
            font-weight: 600;
            text-decoration: none;
            color: var(--ct-white);
            transition: transform .3s, box-shadow .3s;
        }
        .ct-card__btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,.3);
        }

        /* ======================================================
           HOURS + SOCIAL SPLIT
           ====================================================== */
        .ct-info-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: start;
        }
        @media (max-width: 700px) { .ct-info-split { grid-template-columns: 1fr; } }

        /* Hours */
        .ct-hours-box {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(248,210,149,.12);
            border-radius: var(--ct-radius);
            padding: 2rem 1.8rem;
            backdrop-filter: blur(10px);
        }
        .ct-hours-box__title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--ct-secondary);
            margin: 0 0 1.4rem;
            display: flex; align-items: center; gap: .6rem;
        }
        .ct-hours-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .7rem 0;
            border-bottom: 1px solid rgba(255,255,255,.07);
            font-size: .95rem;
            gap: 1rem;
        }
        .ct-hours-row:last-child { border-bottom: none; }
        .ct-hours-row__day   { opacity: .8; }
        .ct-hours-row__time  { color: var(--ct-light-gold); font-weight: 600; text-align: right; }

        /* Status dot */
        .ct-status-badge {
            display: inline-flex; align-items: center; gap: .4rem;
            font-size: .8rem;
            padding: .28rem .8rem;
            border-radius: 99px;
            background: rgba(34,197,94,.18);
            color: #4ade80;
            border: 1px solid rgba(74,222,128,.3);
            margin-bottom: 1.2rem;
        }
        .ct-status-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #4ade80;
            animation: ct-blink 1.4s ease-in-out infinite;
        }
        @keyframes ct-blink {
            0%,100% { opacity:1; }
            50%      { opacity:.3; }
        }

        /* Social */
        .ct-social-box {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(248,210,149,.12);
            border-radius: var(--ct-radius);
            padding: 2rem 1.8rem;
            backdrop-filter: blur(10px);
        }
        .ct-social-box__title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--ct-secondary);
            margin: 0 0 .6rem;
            display: flex; align-items: center; gap: .6rem;
        }
        .ct-social-box__sub {
            font-size: .9rem; opacity: .65; margin-bottom: 1.6rem;
        }
        .ct-social-links {
            display: flex; flex-wrap: wrap; gap: .9rem;
        }
        .ct-social-link {
            width: 52px; height: 52px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            text-decoration: none;
            color: var(--ct-white);
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.12);
            transition: transform .35s, background .35s, box-shadow .35s;
            position: relative;
            overflow: hidden;
        }
        .ct-social-link::after {
            content: attr(aria-label);
            position: absolute;
            bottom: -26px; left: 50%;
            transform: translateX(-50%);
            font-size: .65rem;
            white-space: nowrap;
            opacity: 0;
            transition: opacity .3s, bottom .3s;
            color: var(--ct-light-gold);
        }
        .ct-social-link:hover {
            transform: translateY(-5px) scale(1.08);
            box-shadow: 0 8px 24px rgba(0,0,0,.35);
        }
        .ct-social-link:hover::after {
            opacity: 1; bottom: -22px;
        }

        /* Testimonial quote band */
        .ct-quote-band {
            background: linear-gradient(135deg, var(--ct-accent) 0%, var(--ct-primary) 100%);
            padding: 3.5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .ct-quote-band::before {
            content: '❝';
            position: absolute;
            font-size: 14rem;
            opacity: .06;
            top: -2rem; left: 1rem;
            line-height: 1;
            pointer-events: none;
        }
        .ct-quote-band__text {
            font-size: clamp(1.1rem, 2.2vw, 1.45rem);
            line-height: 1.75;
            max-width: 720px;
            margin: 0 auto 1rem;
            font-style: italic;
            position: relative; z-index: 1;
        }
        .ct-quote-band__author {
            font-size: .85rem;
            letter-spacing: .12em;
            opacity: .75;
            text-transform: uppercase;
            position: relative; z-index: 1;
        }

        /* ======================================================
           MAP SECTION
           ====================================================== */
        #ct-map {
            padding: 0;
            background: var(--ct-dark);
        }
        .ct-map-wrapper {
            position: relative;
        }
        .ct-map-overlay-badge {
            position: absolute;
            top: 1.5rem; left: 50%; transform: translateX(-50%);
            background: rgba(46,6,81,.9);
            border: 1px solid rgba(229,147,42,.5);
            border-radius: 99px;
            padding: .55rem 1.6rem;
            font-size: .9rem;
            color: var(--ct-light-gold);
            font-weight: 600;
            z-index: 10;
            backdrop-filter: blur(8px);
            white-space: nowrap;
            box-shadow: 0 4px 20px rgba(0,0,0,.4);
            display: flex; align-items: center; gap: .5rem;
        }
        .ct-map-frame {
            width: 100%;
            height: 420px;
            border: none;
            display: block;
            filter: saturate(.8) brightness(.88);
            transition: filter .5s;
        }
        .ct-map-frame:hover { filter: saturate(1) brightness(1); }

        /* ======================================================
           FLOATING PARTICLES (CSS only)
           ====================================================== */
        .ct-particles {
            position: absolute; inset: 0;
            overflow: hidden; pointer-events: none; z-index: 0;
        }
        .ct-particle {
            position: absolute;
            width: 3px; height: 3px;
            background: var(--ct-light-gold);
            border-radius: 50%;
            opacity: 0;
            animation: ct-particleFly var(--dur, 12s) var(--delay, 0s) linear infinite;
        }
        @keyframes ct-particleFly {
            0%   { transform: translateY(100%) translateX(var(--x0, 0px)); opacity: 0; }
            10%  { opacity: .7; }
            90%  { opacity: .4; }
            100% { transform: translateY(-120vh) translateX(var(--x1, 40px)); opacity: 0; }
        }

        /* ======================================================
           ANIMATED DIVIDER
           ====================================================== */
        .ct-divider {
            display: flex; align-items: center; gap: 1rem;
            max-width: 400px; margin: 0 auto;
            padding: 2rem 0;
        }
        .ct-divider__line {
            flex: 1; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(229,147,42,.5), transparent);
        }
        .ct-divider__star { color: var(--ct-secondary); font-size: 1.1rem; animation: ct-rotateSlow 8s linear infinite; }

        /* ======================================================
           RESPONSIVE
           ====================================================== */
        @media (max-width: 900px) {
            .ct-cards-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 520px) {
            .ct-cards-grid { grid-template-columns: 1fr; }
            .ct-hero { min-height: 95vh; }
            .ct-map-frame { height: 300px; }
        }