/* ============================================================
   PUROHIT SETU — DIVINE VEDIC HEADER
   ============================================================ */

:root {

    /* -- sacred palette -- */
    --ps-maroon: #66110B;
    --ps-maroon-dark: #3a0906;
    --ps-maroon-light: #941d15;

    --ps-gold: #CD9933;
    --ps-gold-light: #f3d98a;
    --ps-gold-bright: #ffd873;

    --ps-green: #00674F;         /* leaf green accent */
    --ps-green-dark: #004d3b;

    --ps-saffron: #ff7e2e;       /* kesariya accent */
    --ps-diya: #ffb347;          /* flame glow */

    --ps-cream: #fffaf0;
    --ps-cream-dark: #f5e9c8;

    --ps-text: #401010;
    --ps-text-soft: #7a5555;

    --ps-white: #ffffff;

    --ps-shadow: 0 12px 35px rgba(55, 5, 5, 0.14);
    --ps-shadow-heavy: 0 22px 55px rgba(55, 5, 5, 0.24);

    --ps-radius: 16px;

    /* Tall enough to fully contain the 48px-tall nav links with
       breathing room — the logo emblem is intentionally taller
       than this and hangs below it, that overflow is by design. */
    --ps-header-height: 96px;

    --ps-font-display: 'Cinzel', serif;
    --ps-font-script: 'Cormorant Garamond', serif;
    --ps-font-body: 'Poppins', sans-serif;
    --ps-font-deva: 'Noto Serif Devanagari', serif;

}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--ps-font-body);
    background: var(--ps-cream);
}

/* ============================================================
   HEADER
   ============================================================ */

.ps-header {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ps-header-height);
    z-index: 9999;

    background: linear-gradient(180deg, rgba(255, 252, 241, 0.98), rgba(255, 249, 232, 0.96));
    border-bottom: 1px solid rgba(205, 153, 51, 0.28);
    box-shadow: 0 5px 25px rgba(67, 9, 9, 0.10);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* Header never changes size — only its shadow/blur (scrolled state)
       and its own position (slide up/down on scroll direction) animate. */
    transition: box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease,
                transform 0.45s cubic-bezier(.22,.85,.32,1);

}

/* Top gold decoration — slow devotional shimmer sweep */

.ps-top-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: linear-gradient(90deg, transparent, rgba(205,153,51,0.35), transparent);
}

.ps-top-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--ps-gold-bright), var(--ps-diya), var(--ps-gold-bright), transparent);
    animation: ps-shimmer-sweep 5.5s ease-in-out infinite;
}

@keyframes ps-shimmer-sweep {
    0%   { left: -35%; }
    60%  { left: 100%; }
    100% { left: 100%; }
}

/* ============================================================
   HEADER INNER
   ============================================================ */

.ps-header-inner {
    width: min(1500px, 100%);
    height: 100%;
    margin: auto;
    padding: 0 clamp(18px, 3vw, 45px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.ps-nav {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.6vw, 12px);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.ps-nav-left { justify-content: flex-start; }
.ps-nav-right { justify-content: flex-end; }

.ps-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 48px;
    padding: 0 12px;
    color: var(--ps-text);
    text-decoration: none;
    font-family: var(--ps-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    border-radius: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ps-nav-link:hover {
    color: var(--ps-maroon);
    background: rgba(205, 153, 51, 0.09);
    transform: translateY(-1px);
}

.ps-nav-link.active { color: var(--ps-maroon); }

.ps-nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 20px;
    height: 2px;
    transform: translateX(-50%) scaleX(1);
    border-radius: 20px;
    background: var(--ps-gold);
    box-shadow: 0 0 8px rgba(205,153,51,0.7);
    animation: ps-underline-glow 2.4s ease-in-out infinite;
}

@keyframes ps-underline-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(205,153,51,0.5); }
    50% { box-shadow: 0 0 12px rgba(255,216,115,0.9); }
}

.ps-nav-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--ps-gold);
    font-size: 14px;
    border-radius: 50%;
    background: rgba(205, 153, 51, 0.09);
    transition: 0.3s cubic-bezier(.34,1.56,.64,1);
}

.ps-nav-link:hover .ps-nav-icon {
    color: var(--ps-white);
    background: var(--ps-maroon);
    transform: rotate(-8deg) scale(1.12);
    box-shadow: 0 0 12px rgba(255, 179, 71, 0.55);
}

.ps-chevron { font-size: 10px; color: var(--ps-gold); transition: transform 0.2s ease; }

/* ============================================================
   CENTER LOGO — divine emblem, enlarged
   ============================================================ */

.ps-logo-wrap {
    position: relative;
    width: 230px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 10;
}

.ps-logo-frame {
    width: 230px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

/* rotating mandala ring — the signature element */

.ps-logo-mandala {
    position: absolute;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    pointer-events: none;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgb(251, 142, 1) 0deg 4deg,
            transparent 4deg 18deg
        );
    -webkit-mask: radial-gradient(circle, transparent 62%, black 64%, black 74%, transparent 76%);
            mask: radial-gradient(circle, transparent 62%, black 64%, black 74%, transparent 76%);
    animation: ps-mandala-spin 40s linear infinite;
    opacity: 0.85;
}

.ps-logo-mandala.ps-mandala-reverse {
    width: 118px;
    height: 118px;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgb(251, 142, 1) 0deg 2deg,
            transparent 2deg 10deg
        );
    -webkit-mask: radial-gradient(circle, transparent 68%, black 70%, black 78%, transparent 80%);
            mask: radial-gradient(circle, transparent 68%, black 70%, black 78%, transparent 80%);
    animation: ps-mandala-spin-reverse 26s linear infinite;
    opacity: 0.7;
}

@keyframes ps-mandala-spin { to { transform: rotate(360deg); } }
@keyframes ps-mandala-spin-reverse { to { transform: rotate(-360deg); } }

.ps-logo {
    width: 230px;
    height: 230px;
    object-fit: contain;
    display: block;
    position: relative;
    top: 4px;
    filter: drop-shadow(0 10px 14px rgba(61, 6, 6, 0.20));
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), filter 0.35s ease;
}

.ps-logo-wrap:hover .ps-logo {
    transform: translateY(-3px) scale(1.035);
    filter: drop-shadow(0 16px 20px rgba(61, 6, 6, 0.28));
}

.ps-logo-wrap:hover .ps-logo-mandala { opacity: 1; }

/* breathing divine glow behind the emblem */

.ps-logo-glow {
    position: absolute;
    width: 180px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(251, 142, 1), rgb(251, 142, 1) 55%, transparent 75%);
    filter: blur(14px);
    pointer-events: none;
    animation: ps-breathe 4.2s ease-in-out infinite;
}

@keyframes ps-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.75; }
    50% { transform: scale(1.12); opacity: 1; }
}

/* wide warm halo — the "sunlight" wash sitting behind everything */

.ps-logo-halo {
    position: absolute;
    width: 208px;
    height: 208px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 216, 115, 0.32) 0%, rgba(255, 183, 71, 0.18) 40%, rgba(255, 126, 46, 0.08) 62%, transparent 78%);
    filter: blur(6px);
    pointer-events: none;
    animation: ps-halo-pulse 5s ease-in-out infinite;
}

@keyframes ps-halo-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* rotating sunburst rays radiating from the emblem */

.ps-logo-sunrays {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    pointer-events: none;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 216, 115, 0.5) 0deg 2.5deg,
            transparent 2.5deg 12deg,
            rgba(255, 126, 46, 0.32) 12deg 14deg,
            transparent 14deg 24deg
        );
    -webkit-mask: radial-gradient(circle, transparent 40%, black 46%, black 82%, transparent 96%);
            mask: radial-gradient(circle, transparent 40%, black 46%, black 82%, transparent 96%);
    animation: ps-sun-rotate 24s linear infinite;
    opacity: 0.65;
}

@keyframes ps-sun-rotate { to { transform: rotate(360deg); } }

/* tiny twinkling sparks around the emblem */

.ps-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ps-gold-bright);
    box-shadow: 0 0 6px 1px rgba(255, 216, 115, 0.9);
    animation: ps-twinkle 3s ease-in-out infinite;
}
.ps-spark:nth-child(1) { top: 18%; left: 10%; animation-delay: 0s; }
.ps-spark:nth-child(2) { top: 68%; left: 88%; animation-delay: 1s; }
.ps-spark:nth-child(3) { top: 82%; left: 22%; animation-delay: 2s; }

@keyframes ps-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ============================================================
   SERVICES DROPDOWN
   ============================================================ */

.ps-nav-dropdown { position: relative; }

.ps-nav-dropdown.is-open .ps-chevron { transform: rotate(180deg); }

.ps-nav-dropdown.is-open .ps-nav-link {
    color: var(--ps-maroon);
    background: rgba(205, 153, 51, 0.10);
}

.ps-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: 580px;
    transform: translateX(-50%) translateY(-8px) scale(0.98);
    padding: 18px;
    background: rgba(255, 251, 239, 0.98);
    border: 1px solid rgba(205, 153, 51, 0.30);
    border-radius: 20px;
    box-shadow: var(--ps-shadow-heavy);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.2,1), visibility 0.22s ease;
}

.ps-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--ps-cream);
    border-left: 1px solid rgba(205, 153, 51, 0.30);
    border-top: 1px solid rgba(205, 153, 51, 0.30);
    transform: translateX(-50%) rotate(45deg);
}

.ps-nav-dropdown.is-open .ps-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.ps-dropdown-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 16px;
    border-bottom: 1px solid rgba(205, 153, 51, 0.18);
}

.ps-dropdown-heading-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--ps-white);
    background: linear-gradient(135deg, var(--ps-maroon), var(--ps-maroon-light));
    box-shadow: 0 7px 15px rgba(102, 17, 11, 0.20);
    position: relative;
    overflow: hidden;
}

.ps-dropdown-heading-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,216,115,0.5), transparent 60%);
}

.ps-dropdown-heading strong { display: block; color: var(--ps-text); font-family: var(--ps-font-display); font-size: 15px; letter-spacing: 0.3px; }
.ps-dropdown-heading small { display: block; margin-top: 2px; color: var(--ps-text-soft); font-family: var(--ps-font-deva); font-size: 12px; }

.ps-dropdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px 0; }

.ps-service-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 67px;
    padding: 8px;
    border-radius: 13px;
    text-decoration: none;
    color: var(--ps-text);
    transition: background 0.18s ease, transform 0.18s ease;
}

.ps-service-item:hover {
    background: rgba(205, 153, 51, 0.10);
    transform: translateX(3px);
}

.ps-service-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--ps-gold);
    background: linear-gradient(145deg, #fff9e7, #f4e6bf);
    border: 1px solid rgba(205, 153, 51, 0.22);
    transition: 0.25s cubic-bezier(.34,1.56,.64,1);
}

.ps-service-item:hover .ps-service-icon {
    color: var(--ps-white);
    background: var(--ps-maroon);
    transform: rotate(-6deg) scale(1.08);
}

.ps-service-content strong { display: block; font-size: 13px; line-height: 1.2; font-weight: 600; }
.ps-service-content small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ps-text-soft); font-family: var(--ps-font-deva); }

.ps-service-item > .fa-arrow-right {
    font-size: 10px;
    color: var(--ps-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: 0.18s ease;
}

.ps-service-item:hover > .fa-arrow-right { opacity: 1; transform: translateX(0); }

.ps-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 5px 2px;
    border-top: 1px solid rgba(205, 153, 51, 0.18);
    font-size: 11px;
}

.ps-dropdown-footer span { display: flex; align-items: center; gap: 6px; color: var(--ps-text-soft); }
.ps-dropdown-footer span i { color: var(--ps-green); }
.ps-dropdown-footer a { color: var(--ps-maroon); text-decoration: none; font-weight: 800; }
.ps-dropdown-footer a i { margin-left: 4px; font-size: 9px; }

/* ============================================================
   BOOK NOW — with a living diya flame
   ============================================================ */

.ps-book-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 9px 5px 7px;
    border-radius: 15px;
    color: white;
    text-decoration: none;
    background: linear-gradient(135deg, var(--ps-maroon), var(--ps-maroon-light));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 18px rgba(102, 17, 11, 0.20);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.ps-book-btn:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(102, 17, 11, 0.32), 0 0 18px rgba(255, 179, 71, 0.35);
}

.ps-book-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--ps-maroon);
    background: linear-gradient(135deg, var(--ps-gold-light), var(--ps-gold));
    position: relative;
}

.ps-book-icon i { position: relative; z-index: 1; }

.ps-book-icon::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ps-diya);
    box-shadow: 0 0 6px 2px rgba(255, 179, 71, 0.85);
    animation: ps-flicker 1.6s ease-in-out infinite;
}

@keyframes ps-flicker {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.ps-book-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.ps-book-text strong { font-size: 12px; font-weight: 700; }
.ps-book-text small { margin-top: 3px; font-size: 9px; opacity: 0.8; font-family: var(--ps-font-deva); }

.ps-book-arrow { margin-left: 2px; font-size: 10px; transition: transform 0.2s ease; }
.ps-book-btn:hover .ps-book-arrow { transform: translateX(3px); }

/* ============================================================
   MOBILE CONTROLS
   ============================================================ */

.ps-mobile-controls { display: none; align-items: center; gap: 8px; }

.ps-mobile-book {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ps-maroon), var(--ps-maroon-light));
    color: white;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 6px 15px rgba(102, 17, 11, 0.22);
}

.ps-mobile-book i { color: var(--ps-gold-light); }

/* ============================================================
   HAMBURGER — transforms toward a lotus point
   ============================================================ */

.ps-menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: rgba(205, 153, 51, 0.09);
    border: 1px solid rgba(205, 153, 51, 0.22);
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.ps-menu-toggle span {
    width: 19px;
    height: 2px;
    border-radius: 5px;
    background: var(--ps-maroon);
    transition: 0.3s cubic-bezier(.2,.8,.2,1);
}

.ps-menu-toggle.is-open {
    background: var(--ps-maroon);
    box-shadow: 0 0 14px rgba(102, 17, 11, 0.35);
}
.ps-menu-toggle.is-open span { background: var(--ps-gold-light); }
.ps-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ps-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE MENU
   ============================================================ */

.ps-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(390px, 92vw);
    height: 100dvh;
    z-index: 10001;
    background:
        radial-gradient(circle at 100% 0%, rgba(205,153,51,0.14), transparent 45%),
        linear-gradient(180deg, #fffaf0, #fff4d9);
    box-shadow: -15px 0 50px rgba(47, 4, 4, 0.20);
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ps-mobile-menu.is-open { transform: translateX(0); }

.ps-mobile-menu-inner { min-height: 100%; padding: 20px; display: flex; flex-direction: column; }

.ps-mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(205, 153, 51, 0.20);
}

.ps-mobile-brand { position: relative; display: flex; align-items: center; }

.ps-mobile-brand img {
    width: 128px;
    height: 128px;
    object-fit: contain;
    display: block;
    margin: -18px 0 -18px -8px;
    filter: drop-shadow(0 8px 12px rgba(61, 6, 6, 0.18));
    position: relative;
    z-index: 1;
}

.ps-mobile-brand::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 92px;
    height: 92px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,179,71,0.32), transparent 72%);
    filter: blur(10px);
    animation: ps-breathe 4.2s ease-in-out infinite;
}

.ps-mobile-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(205, 153, 51, 0.25);
    background: rgba(205, 153, 51, 0.08);
    color: var(--ps-maroon);
    cursor: pointer;
    font-size: 17px;
    transition: transform 0.2s ease, background 0.2s ease;
}
.ps-mobile-close:hover { background: var(--ps-maroon); color: var(--ps-gold-light); transform: rotate(90deg); }

.ps-mobile-nav { padding: 14px 0; }

.ps-mobile-link {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 5px;
    color: var(--ps-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(205, 153, 51, 0.12);
    cursor: pointer;
    text-align: left;
    font-family: var(--ps-font-body);
    font-size: 14px;
}

.ps-mobile-link > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--ps-gold);
    background: rgba(205, 153, 51, 0.09);
    transition: 0.25s cubic-bezier(.34,1.56,.64,1);
}

.ps-mobile-link strong { font-size: 14.5px; font-weight: 600; }
.ps-mobile-link > i { font-size: 10px; color: var(--ps-gold); transition: transform 0.2s ease; }

.ps-mobile-link:active > span,
.ps-mobile-link:hover > span {
    color: var(--ps-white);
    background: var(--ps-maroon);
    transform: rotate(-6deg) scale(1.08);
}

.ps-mobile-services-btn > i { transition: transform 0.25s ease; }
.ps-mobile-services.is-open .ps-mobile-services-btn > i { transform: rotate(180deg); }

.ps-mobile-submenu {
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 52px;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.ps-mobile-services.is-open .ps-mobile-submenu {
    max-height: 400px;
    padding: 5px 0 10px 52px;
}

.ps-mobile-submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 8px;
    color: var(--ps-text-soft);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 9px;
}

.ps-mobile-submenu a:hover { color: var(--ps-maroon); background: rgba(205, 153, 51, 0.08); }
.ps-mobile-submenu a i { width: 20px; color: var(--ps-gold); }

.ps-mobile-cta {
    margin-top: auto;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ps-maroon), var(--ps-maroon-light));
    color: white;
    box-shadow: 0 12px 30px rgba(102, 17, 11, 0.22);
    position: relative;
    overflow: hidden;
}

.ps-mobile-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% -10%, rgba(255,216,115,0.28), transparent 55%);
    pointer-events: none;
}

.ps-mobile-cta-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    color: var(--ps-gold-light);
    margin-bottom: 10px;
    position: relative;
}

.ps-mobile-cta-content strong { display: block; font-size: 14.5px; font-family: var(--ps-font-display); letter-spacing: 0.3px; }
.ps-mobile-cta-content span { display: block; margin-top: 4px; font-size: 10.5px; opacity: 0.82; }

.ps-mobile-cta-button {
    height: 44px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ps-gold-light), var(--ps-gold));
    color: var(--ps-maroon);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 900;
    position: relative;
    transition: transform 0.2s ease;
}
.ps-mobile-cta-button:active { transform: scale(0.97); }
.ps-mobile-cta-button i { font-size: 10px; }

.ps-mobile-footer {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    padding: 18px 0 5px;
    color: var(--ps-text-soft);
    font-size: 9px;
}
.ps-mobile-footer span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ps-mobile-footer i { color: var(--ps-gold); }

.ps-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(32, 3, 3, 0.50);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ps-menu-overlay.is-visible { opacity: 1; visibility: visible; }

body.ps-menu-open { overflow: hidden; }

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1180px) {
    .ps-nav-link { padding: 0 7px; font-size: 12px; }
    .ps-nav-icon { width: 27px; height: 27px; font-size: 12px; }
    .ps-logo-wrap { width: 190px; height: 140px; }
    .ps-logo-frame { width: 190px; height: 140px; }
    .ps-logo { width: 195px; height: 195px; }
    .ps-logo-mandala { width: 128px; height: 128px; }
    .ps-book-text { display: none; }
    .ps-book-btn { width: 48px; min-height: 48px; justify-content: center; padding: 5px; }
    .ps-book-arrow { display: none; }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 850px) {

    :root { --ps-header-height: 76px; }

    .ps-header { height: var(--ps-header-height); }

    .ps-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
    }

    .ps-nav { display: none; }

    .ps-logo-wrap {
        position: static;
        width: 132px;
        height: 108px;
        flex-shrink: 0;
        margin-left: -8px;
    }

    .ps-logo-frame { width: 132px; height: 108px; }
    .ps-logo { width: 136px; height: 136px; top: 3px; }
    .ps-logo-glow { width: 90px; height: 55px; }
    .ps-logo-halo { width: 128px; height: 128px; }
    .ps-logo-sunrays { width: 136px; height: 136px; }
    .ps-logo-mandala { width: 96px; height: 96px; }
    .ps-logo-mandala.ps-mandala-reverse { width: 78px; height: 78px; }

    .ps-mobile-controls { display: flex; width: auto; justify-content: flex-end; }
    .ps-mobile-book { margin-right: 2px; }
    .ps-menu-toggle { display: flex; }
}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {
    .ps-mobile-book { width: 44px; justify-content: center; padding: 0; }
    .ps-mobile-book span { display: none; }
    .ps-logo-wrap { width: 112px; height: 96px; }
    .ps-logo-frame { width: 112px; height: 96px; }
    .ps-logo { width: 116px; height: 116px; }
    .ps-logo-halo { width: 108px; height: 108px; }
    .ps-logo-sunrays { width: 116px; height: 116px; }
    .ps-logo-mandala { width: 84px; height: 84px; }
    .ps-logo-mandala.ps-mandala-reverse { width: 68px; height: 68px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .ps-header *, .ps-header *::before, .ps-header *::after,
    .ps-mobile-menu *, .ps-mobile-menu *::before, .ps-mobile-menu *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   HEADER SCROLL BEHAVIOR — PURE SLIDE UP/DOWN, NO SHRINK
   ----------------------------------------------------------------
   The header keeps its normal size and look at all times. Two
   things are allowed to change on scroll:

   1. ".ps-header-scrolled" — once the page has scrolled past a
      small threshold, the header gets a slightly deeper shadow
      and a touch more glass blur, purely so it reads as "raised"
      above the page content. No element resizes.

   2. ".ps-header-scroll-down" / ".ps-header-scroll-up" — the
      ENTIRE header (logo, left nav, right nav, Book Now button —
      everything inside .ps-header-inner) slides up together as
      one unit when scrolling down past HIDE_THRESHOLD, and
      slides back down together the moment the user scrolls up.
   ================================================================ */

#psHeader.ps-header-scrolled {
    background: linear-gradient(180deg, rgba(255, 252, 241, 0.99), rgba(255, 249, 232, 0.98));
    border-bottom-color: rgba(205, 153, 51, 0.42);
    box-shadow: 0 10px 32px rgba(67, 9, 9, 0.16), 0 1px 0 rgba(205, 153, 51, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Only hide once actually scrolled past the header (not right at page top) */
.ps-header.ps-header-scrolled.ps-header-scroll-down {
    transform: translateY(-100%);
}

.ps-header.ps-header-scroll-up {
    transform: translateY(0);
}

/* Never hide while the mobile menu is open, or the user gets stuck */
body.ps-menu-open .ps-header {
    transform: translateY(0) !important;
}