/* Petwal Gems — home page (app/Views/pages/home.php).
   Everything is scoped under .ph so the theme and other pages are untouched.
   Motion lives in js/home.js; the CSS here keeps every section readable without it. */

.ph {
    --night: #12070a;
    --night-2: #1f0b10;
    --maroon: #8B1A1A;
    --maroon-dark: #6e1419;
    --gold: #C59B2B;
    --gold-hi: #F6DC98;
    --gold-soft: #E2B46A;
    --gold-grad: linear-gradient(135deg, #F6DC98 0%, #D9B048 38%, #C59B2B 62%, #8A6417 100%);
    --ivory: #FFF8EF;
    --cream: #FBF3E7;
    --ink: #241c19;
    --muted: #6a5d52;
    --border: #EFE3CF;
    --wa: #1FAF54;
    --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    /* Seamless low-poly facet tiles (generated; 160px) used for the gem finish. */
    --ph-facets-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff' stroke='%23fff' stroke-opacity='.10' stroke-width='.6'%3E%3Cpath d='M0 0L0 40L40 40Z' fill-opacity='0.050'/%3E%3Cpath d='M0 0L80 0L40 40Z' fill-opacity='0.110'/%3E%3Cpath d='M80 0L40 40L120 40Z' fill-opacity='0.020'/%3E%3Cpath d='M80 0L120 40L160 40Z' fill-opacity='0.080'/%3E%3Cpath d='M80 0L160 0L160 40Z' fill-opacity='0.140'/%3E%3Cpath d='M0 40L40 40L0 80Z' fill-opacity='0.040'/%3E%3Cpath d='M40 40L0 80L80 80Z' fill-opacity='0.090'/%3E%3Cpath d='M40 40L120 40L80 80Z' fill-opacity='0.010'/%3E%3Cpath d='M120 40L80 80L160 80Z' fill-opacity='0.120'/%3E%3Cpath d='M120 40L160 40L160 80Z' fill-opacity='0.060'/%3E%3Cpath d='M0 80L0 120L40 120Z' fill-opacity='0.030'/%3E%3Cpath d='M0 80L80 80L40 120Z' fill-opacity='0.100'/%3E%3Cpath d='M80 80L40 120L120 120Z' fill-opacity='0.070'/%3E%3Cpath d='M80 80L120 120L160 120Z' fill-opacity='0.130'/%3E%3Cpath d='M80 80L160 80L160 120Z' fill-opacity='0.020'/%3E%3Cpath d='M0 120L40 120L0 160Z' fill-opacity='0.080'/%3E%3Cpath d='M40 120L0 160L80 160Z' fill-opacity='0.050'/%3E%3Cpath d='M40 120L120 120L80 160Z' fill-opacity='0.110'/%3E%3Cpath d='M120 120L80 160L160 160Z' fill-opacity='0.030'/%3E%3Cpath d='M120 120L160 120L160 160Z' fill-opacity='0.090'/%3E%3C/g%3E%3C/svg%3E");
    --ph-facets-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23C59B2B' stroke='%23C59B2B' stroke-opacity='.12' stroke-width='.6'%3E%3Cpath d='M0 0L0 40L40 40Z' fill-opacity='0.035'/%3E%3Cpath d='M0 0L80 0L40 40Z' fill-opacity='0.077'/%3E%3Cpath d='M80 0L40 40L120 40Z' fill-opacity='0.014'/%3E%3Cpath d='M80 0L120 40L160 40Z' fill-opacity='0.056'/%3E%3Cpath d='M80 0L160 0L160 40Z' fill-opacity='0.098'/%3E%3Cpath d='M0 40L40 40L0 80Z' fill-opacity='0.028'/%3E%3Cpath d='M40 40L0 80L80 80Z' fill-opacity='0.063'/%3E%3Cpath d='M40 40L120 40L80 80Z' fill-opacity='0.007'/%3E%3Cpath d='M120 40L80 80L160 80Z' fill-opacity='0.084'/%3E%3Cpath d='M120 40L160 40L160 80Z' fill-opacity='0.042'/%3E%3Cpath d='M0 80L0 120L40 120Z' fill-opacity='0.021'/%3E%3Cpath d='M0 80L80 80L40 120Z' fill-opacity='0.070'/%3E%3Cpath d='M80 80L40 120L120 120Z' fill-opacity='0.049'/%3E%3Cpath d='M80 80L120 120L160 120Z' fill-opacity='0.091'/%3E%3Cpath d='M80 80L160 80L160 120Z' fill-opacity='0.014'/%3E%3Cpath d='M0 120L40 120L0 160Z' fill-opacity='0.056'/%3E%3Cpath d='M40 120L0 160L80 160Z' fill-opacity='0.035'/%3E%3Cpath d='M40 120L120 120L80 160Z' fill-opacity='0.077'/%3E%3Cpath d='M120 120L80 160L160 160Z' fill-opacity='0.021'/%3E%3Cpath d='M120 120L160 120L160 160Z' fill-opacity='0.063'/%3E%3C/g%3E%3C/svg%3E");
    --num: "Playfair Display", Georgia, serif; /* Cormorant only has old-style figures; numbers use Playfair's lining ones */
    --sans: "Raleway", "Roboto", system-ui, sans-serif;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --radius: 18px;
    --shadow-card: 0 1px 2px rgba(60, 31, 18, .04), 0 12px 32px -12px rgba(60, 31, 18, .18);
    --shadow-lift: 0 2px 4px rgba(60, 31, 18, .05), 0 28px 60px -20px rgba(110, 20, 25, .35);
    font-family: var(--sans);
    font-variant-numeric: lining-nums; /* Cormorant defaults to old-style figures */
    color: var(--ink);
    background: var(--ivory);
    overflow: clip;
}
.ph *, .ph *::before, .ph *::after { box-sizing: border-box; }
.ph img { max-width: 100%; display: block; }
.ph a { text-decoration: none; }
.ph :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.ph em { font-style: italic; }
.ph .container { position: relative; }
/* Bootstrap 3's clearfix pseudo-elements would become grid/flex items. */
.ph-hero__grid::before, .ph-hero__grid::after,
.ph-navratna__head::before, .ph-navratna__head::after { content: none; display: none; }

/* ---------- Shared: headings, eyebrow, links, buttons ---------- */
.ph-section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.ph-section--cream { background: var(--cream); }
.ph-center { text-align: center; margin-top: 48px; }

.ph-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); height: auto; float: none; } /* theme reset.css fixes header { height: 65px } */
.ph-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font: 600 12.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase;
    color: var(--maroon); margin: 0 0 16px;
}
.ph-eyebrow__line { width: 36px; height: 1px; background: var(--gold); transform-origin: left center; }
.ph-eyebrow--light { color: var(--gold-soft); }
.ph-title {
    font: 600 clamp(34px, 4.6vw, 56px)/1.08 var(--serif);
    color: var(--ink); margin: 0; letter-spacing: -.01em;
}
.ph-title em { color: var(--maroon); font-weight: 600; }
.ph-title--sm { font-size: clamp(30px, 3.4vw, 44px); }
.ph-intro { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 18px auto 0; max-width: 600px; }
.ph-head--light .ph-title { color: #fff; }
.ph-head--light .ph-title em { color: transparent; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; }
.ph-head--light .ph-intro { color: rgba(255, 244, 228, .72); }
.ph-head--light .ph-eyebrow { color: var(--gold-soft); }

.ph-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
    font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--maroon);
}
.ph-link i { transition: transform .35s var(--ease-out); }
a:hover .ph-link i, .ph-link:hover i { transform: translateX(6px); }
.ph-link--light { color: var(--gold-soft); }

.ph-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
    font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    isolation: isolate; overflow: hidden; white-space: nowrap;
    transition: box-shadow .35s var(--ease-out), color .3s, background-color .3s;
}
.ph-btn i { font-size: 16px; transition: transform .35s var(--ease-out); }
.ph-btn:hover i.fa-long-arrow-right { transform: translateX(5px); }
/* light sweep on hover */
.ph-btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.ph-btn:hover::after { transform: translateX(120%); }
.ph-btn--gold { color: #3b0d10; background: var(--gold-grad); box-shadow: 0 10px 30px -10px rgba(197, 155, 43, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ph-btn--gold:hover, .ph-btn--gold:focus { color: #3b0d10; box-shadow: 0 16px 40px -10px rgba(197, 155, 43, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.ph-btn--ghost { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .45); backdrop-filter: blur(6px); }
.ph-btn--ghost:hover, .ph-btn--ghost:focus { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--gold-hi); }
.ph-btn--maroon { color: #fff; background: var(--maroon); box-shadow: 0 12px 30px -12px rgba(139, 26, 26, .7); }
.ph-btn--wa { color: #fff; background: var(--wa); box-shadow: 0 12px 30px -12px rgba(31, 175, 84, .7); }
.ph-btn--wa i { font-size: 20px; }

/* ---------- HERO ---------- */
.ph-hero {
    position: relative; overflow: hidden; color: #fff; touch-action: pan-y;
    background:
        radial-gradient(1200px 700px at 78% 40%, rgba(139, 26, 26, .55), transparent 60%),
        radial-gradient(900px 600px at 10% 110%, rgba(197, 155, 43, .16), transparent 60%),
        linear-gradient(180deg, #1c0a0e 0%, var(--night) 100%);
}
.ph-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ph-hero__aura {
    position: absolute; width: 60vmax; height: 60vmax; right: -12vmax; top: 50%; translate: 0 -50%;
    background: radial-gradient(circle, rgba(226, 180, 106, .22), rgba(139, 26, 26, .12) 40%, transparent 68%);
    filter: blur(20px); pointer-events: none;
    animation: ph-breathe 9s ease-in-out infinite;
}
.ph-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.ph-hero__title {
    font: 600 clamp(42px, 5.4vw, 70px)/1.04 var(--serif); color: #fff; margin: 0 0 24px; letter-spacing: -.015em;
}
.ph-line { display: block; overflow: hidden; padding-bottom: .06em; }
.ph-line__in { display: inline-block; }
.ph-shimmer {
    color: transparent; font-style: italic;
    background: linear-gradient(100deg, #C59B2B 0%, #F6DC98 25%, #fff6dc 35%, #D9B048 50%, #C59B2B 70%, #F6DC98 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    animation: ph-shimmer 6s linear infinite;
}
.ph-hero__lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: rgba(255, 244, 228, .78); max-width: 540px; margin: 0 0 34px; }
.ph-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
.ph-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.ph-trust li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255, 244, 228, .8); }
.ph-trust i { color: var(--gold-soft); font-size: 15px; }

/* zodiac wheel + gem orbit */
.ph-hero__visual { display: grid; place-items: center; }
.ph-cosmos { --size: min(540px, 42vw); position: relative; width: var(--size); height: var(--size); }
.ph-wheel, .ph-orbit { position: absolute; inset: 0; }
.ph-wheel { animation: ph-spin 160s linear infinite; }
.ph-wheel__svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 12px rgba(197, 155, 43, .25)); }
.ph-wheel__sign {
    --w: calc(var(--size) * .085);
    position: absolute; top: 50%; left: 50%; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
    display: grid; place-items: center;
    transform: rotate(calc(var(--i) * 30deg + 15deg)) translateY(calc(var(--size) * -.4175));
}
.ph-wheel__sign i::before {
    margin: 0 !important; font-size: calc(var(--size) * .05) !important; line-height: 1;
    color: transparent; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
}
.ph-orbit { animation: ph-spin 90s linear infinite reverse; }
.ph-orbit__gem {
    --g: calc(var(--size) * .12);
    --a: calc(360deg / var(--n) * var(--i));
    position: absolute; top: 50%; left: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
    transform: rotate(var(--a)) translateY(calc(var(--size) * -.305)) rotate(calc(var(--a) * -1));
}
.ph-orbit__in {
    display: block; width: 100%; height: 100%; border-radius: 50%; padding: 5px;
    background: #fff; box-shadow: 0 0 0 1.5px var(--gold), 0 0 24px rgba(246, 220, 152, .45), 0 10px 24px rgba(0, 0, 0, .4);
    animation: ph-spin 90s linear infinite;
}
.ph-orbit__in img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
/* Parallax wrappers (GSAP moves these); the spinning layers inside keep their CSS rotation. */
.ph-layer { position: absolute; inset: 0; pointer-events: none; }
.ph-core {
    position: absolute; inset: 0; margin: auto; width: calc(var(--size) * .3); height: calc(var(--size) * .3);
    display: grid; place-items: center;
}
.ph-core img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(246, 220, 152, .9), 0 0 0 9px rgba(197, 155, 43, .25), 0 20px 50px rgba(0, 0, 0, .5); }
.ph-core__halo {
    position: absolute; inset: -38%; border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 220, 152, .45), rgba(197, 155, 43, .12) 45%, transparent 70%);
    animation: ph-breathe 5s ease-in-out infinite;
}
.ph-core__logo { object-fit: contain !important; padding: 20% 12%; background: radial-gradient(circle at 35% 30%, #3a1419, #12070a 75%); }

/* ---------- Slider: stacked slides, wipe, tabs, controls ---------- */
.ph-slides { position: relative; z-index: 2; display: grid; min-height: clamp(640px, calc(100vh - 180px), 860px); } /* 180px ≈ top bar + header + menu */
.ph-slide {
    grid-area: 1 / 1; position: relative; isolation: isolate; display: flex; align-items: center;
    padding: clamp(40px, 5vw, 72px) 0 150px; visibility: hidden; opacity: 0;
    transition: opacity .8s var(--ease-out), visibility .8s; /* no-GSAP fallback */
}
.ph-slide.is-active { visibility: visible; opacity: 1; }
.ph-hero.is-gsap .ph-slide { transition: none; }
.ph-slide > .container { margin-inline: auto; } /* keeps Bootstrap's fixed widths inside the flex slide */
@media (max-width: 767px) { .ph-slide > .container { width: 100%; } }
.ph-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ph-slide--pandit::before { background: radial-gradient(760px 620px at 74% 46%, rgba(96, 44, 150, .38), transparent 65%); }
.ph-slide--kendra::before { background: radial-gradient(760px 620px at 74% 46%, rgba(197, 155, 43, .2), transparent 62%), radial-gradient(600px 500px at 10% 90%, rgba(139, 26, 26, .45), transparent 70%); }
.ph-hero__wipe {
    position: absolute; top: 0; bottom: 0; left: 0; width: 26vw; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(246, 220, 152, .08) 35%, rgba(246, 220, 152, .38) 50%, rgba(246, 220, 152, .08) 65%, transparent);
    mix-blend-mode: screen; transform: translateX(-130%);
}
.ph-hero__wipe::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold-hi); box-shadow: 0 0 18px 4px rgba(246, 220, 152, .7); }

.ph-slider-ui { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 4; }
.ph-slider-ui__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ph-slider-ui__row::before, .ph-slider-ui__row::after { content: none; display: none; }
.ph-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 230px)); gap: 20px; flex: 1; }
.ph-tab {
    position: relative; display: flex; align-items: baseline; gap: 12px; padding: 0 0 14px; border: 0; background: none;
    text-align: left; cursor: pointer; color: rgba(255, 244, 228, .5);
    font: 600 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: color .3s;
}
.ph-tab:hover, .ph-tab.is-active { color: #fff; }
.ph-tab__num { font: 600 italic 22px/1 var(--serif); letter-spacing: 0; color: var(--gold-soft); }
.ph-tab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(246, 220, 152, .2); }
.ph-tab__bar span { display: block; height: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: left center; }
.ph-hero:not(.is-gsap) .ph-tab.is-active .ph-tab__bar span { transform: scaleX(1); }
.ph-ctrl { display: flex; gap: 10px; }
.ph-ctrl__btn {
    width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    color: #fff; font-size: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .4);
    backdrop-filter: blur(6px); transition: background-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.ph-ctrl__btn:hover, .ph-ctrl__btn:focus-visible { color: #3b0d10; background: var(--gold-hi); box-shadow: 0 10px 26px -10px rgba(246, 220, 152, .8); transform: translateY(-2px); }
.ph-ctrl__btn i { font-size: 20px; line-height: 1; }
.ph-ctrl__btn[data-toggle] i { font-size: 13px; }

/* slide 2: portrait in a gold arch */
.ph-arch { --size: min(520px, 40vw); position: relative; width: var(--size); height: var(--size); display: grid; place-items: center; }
.ph-arch__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(246, 220, 152, .5); stroke-width: .8; animation: ph-spin 120s linear infinite; }
.ph-arch__dot { fill: var(--gold-hi); stroke: none; }
.ph-arch__frame {
    position: relative; width: 64%; aspect-ratio: 4 / 5; padding: 5px; border-radius: 999px 999px 30px 30px;
    background: var(--gold-grad); box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .85), 0 0 70px rgba(197, 155, 43, .28);
}
.ph-arch__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border-radius: 999px 999px 26px 26px; }
.ph-chips { position: absolute; inset: 0; pointer-events: none; }
/* Positioning + float live on .ph-chip; the look + pop-in scale on .ph-chip__in, so GSAP
   never animates an element that also has a CSS translate/rotate animation. */
.ph-chip { position: absolute; }
.ph-chip__in {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; white-space: nowrap;
    font: 600 13px/1.2 var(--sans); color: #fff; background: rgba(28, 10, 14, .74); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .45), 0 18px 40px -16px rgba(0, 0, 0, .85);
}
.ph-chip i { color: var(--gold-hi); font-size: 16px; }
.ph-chip--a { left: -6%; top: 20%; }
.ph-chip--b { right: -8%; top: 50%; animation-delay: -2s; }
.ph-chip--c { left: 2%; bottom: 8%; animation-delay: -4s; }

/* slide 3: yantra with orbiting remedies */
.ph-yantra { --size: min(540px, 42vw); position: relative; width: var(--size); height: var(--size); }
.ph-yantra__mandala {
    position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none;
    stroke: rgba(246, 220, 152, .32); stroke-width: .7; animation: ph-spin 110s linear infinite;
}
.ph-yantra__petal { fill: rgba(246, 220, 152, .6); stroke: none; }
.ph-mantra { position: absolute; inset: 0; animation: ph-spin 70s linear infinite reverse; }
.ph-mantra__item {
    --a: calc(360deg / var(--n) * var(--i));
    position: absolute; top: 50%; left: 50%; width: 0; height: 0;
    transform: rotate(var(--a)) translateY(calc(var(--size) * -.4)) rotate(calc(var(--a) * -1));
}
.ph-mantra__in { position: absolute; left: 0; top: 0; translate: -50% -50%; animation: ph-spin 70s linear infinite; }
.ph-mantra__pill {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 16px; border-radius: 14px; white-space: nowrap; background: rgba(28, 10, 14, .78); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .45), 0 14px 30px -14px rgba(0, 0, 0, .8);
}
.ph-mantra__in b { font-size: 15px; font-weight: 600; color: var(--gold-hi); }
.ph-mantra__in small { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 244, 228, .68); }
.ph-yantra .ph-core { width: calc(var(--size) * .36); height: calc(var(--size) * .36); }

/* ---------- MARQUEE ---------- */
.ph-marquee { background: var(--maroon); border-block: 1px solid rgba(246, 220, 152, .35); overflow: hidden; padding: 18px 0; }
.ph-marquee__track { display: flex; width: max-content; animation: ph-marquee 48s linear infinite; }
.ph-marquee__set { display: flex; align-items: center; flex-shrink: 0; }
.ph-marquee__item { font: 500 italic 26px/1 var(--serif); color: #fff3dc; padding: 0 26px; white-space: nowrap; }
.ph-marquee__item .pg_deva { font-style: normal; font-size: 17px; color: var(--gold-soft); margin-left: 6px; }
.ph-marquee__gem { width: 10px; height: 10px; background: var(--gold-grad); transform: rotate(45deg); flex-shrink: 0; box-shadow: 0 0 10px rgba(246, 220, 152, .7); }

/* ---------- CONSULTATION ---------- */
.ph-consult { padding: clamp(64px, 8vw, 104px) 0 0; }
.ph-consult__card {
    display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 56px);
    background: #fff; border: 1px solid var(--border); border-radius: 28px;
    padding: clamp(28px, 4vw, 52px); box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
}
.ph-consult__card::before {
    content: ""; position: absolute; width: 380px; height: 380px; left: -140px; top: -160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 180, 106, .22), transparent 70%); pointer-events: none;
}
.ph-consult__intro { position: relative; }
.ph-consult__text { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 16px 0 26px; }
.ph-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ph-steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--ink); }
.ph-steps span {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    font: 700 16px/1 var(--serif); color: var(--maroon); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--gold-soft);
}
.ph-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-content: start; position: relative; }
.ph-field { display: flex; flex-direction: column; gap: 7px; margin: 0; font-weight: 400; }
.ph-field > span { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ph-field input, .ph-field select {
    width: 100%; height: 50px; padding: 0 16px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--ivory); color: var(--ink); font: 500 15px var(--sans);
    transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.ph-field input:hover, .ph-field select:hover { border-color: var(--gold-soft); }
.ph-field input:focus, .ph-field select:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(197, 155, 43, .18); }
.ph-form__submit { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.ph-form-wrap { position: relative; }
.ph-field.has-error input, .ph-field.has-error select { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.ph-field__err { font-size: 12.5px; font-weight: 600; color: #b3261e; }
.ph-form__submit.is-busy { pointer-events: none; opacity: .75; }
.ph-form-thanks { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100%; padding: 30px 10px; }
.ph-form-thanks[hidden] { display: none; }
.ph-form-thanks__tick { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; margin-bottom: 16px; font-size: 32px; color: #fff;
    background: radial-gradient(circle at 30% 22%, #7ce8a4, #1FAF54 50%, #0b5d2c); box-shadow: 0 0 0 8px rgba(31, 175, 84, .12), 0 18px 34px -12px rgba(31, 175, 84, .7);
    animation: ph-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.ph-form-thanks h3 { font: 600 32px/1.1 var(--serif); margin: 0 0 10px; color: var(--ink); }
.ph-form-thanks p { color: var(--muted); line-height: 1.7; max-width: 440px; margin: 0 0 20px; }
.ph-btn--ghost-dark { color: var(--maroon); background: #fff; box-shadow: inset 0 0 0 1px var(--gold-soft); }
.ph-btn--ghost-dark:hover, .ph-btn--ghost-dark:focus { color: var(--maroon); background: var(--cream); }
@keyframes ph-pop { from { scale: 0; } to { scale: 1; } }

/* ---------- ZODIAC ---------- */
@property --ph-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ph-zodiac__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ph-sign {
    --rx: 0deg; --ry: 0deg; --ty: 0px;
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 28px 10px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border);
    box-shadow: var(--shadow-card); color: var(--ink);
    transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));
    transition: transform .5s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
    will-change: transform;
}
.ph-sign:hover, .ph-sign:focus-visible { --ty: -8px; box-shadow: var(--shadow-lift); border-color: transparent; color: var(--ink); }
.ph-sign__ring {
    position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--ph-angle), transparent 0 55%, var(--gold-hi) 72%, var(--maroon) 86%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    transition: opacity .4s; animation: ph-ring 3.2s linear infinite;
}
.ph-sign:hover .ph-sign__ring, .ph-sign:focus-visible .ph-sign__ring { opacity: 1; }
.ph-sign__icon {
    width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
    background: radial-gradient(circle at 30% 25%, #fffaf0, var(--cream)); box-shadow: inset 0 0 0 1px var(--border);
    transition: transform .6s var(--ease-out), box-shadow .4s;
}
.ph-sign__icon i::before {
    margin: 0 !important; font-size: 36px !important; line-height: 1;
    color: transparent; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
}
.ph-sign:hover .ph-sign__icon { transform: translateZ(30px) rotate(-8deg) scale(1.06); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 10px 24px -8px rgba(197, 155, 43, .6); }
.ph-sign__name { font: 600 22px/1.1 var(--serif); }
.ph-sign__hi { font-size: 15px; color: var(--maroon); margin: 4px 0 6px; }
.ph-sign__dates { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }

/* ---------- FEATURED (bento) ---------- */
.ph-bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(260px, 1fr)); gap: 22px; }
.ph-bento__card {
    position: relative; overflow: hidden; border-radius: 24px; display: flex; align-items: flex-end;
    min-height: 280px; color: #fff; isolation: isolate; box-shadow: var(--shadow-card);
}
.ph-bento__card--lg { grid-row: span 2; min-height: 560px; }
.ph-bento__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; z-index: -2; transition: scale 1.2s var(--ease-out); }
.ph-bento__card:hover .ph-bento__img { scale: 1.07; }
.ph-bento__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 7, 10, .05) 20%, rgba(18, 7, 10, .55) 55%, rgba(18, 7, 10, .92) 100%); transition: background-color .5s; }
.ph-bento__card:hover .ph-bento__shade { background-color: rgba(110, 20, 25, .25); }
.ph-bento__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 36px); max-width: 520px; }
.ph-bento__num { font: 600 italic 18px/1 var(--serif); color: var(--gold-soft); }
.ph-bento__title { font: 600 clamp(26px, 2.6vw, 36px)/1.1 var(--serif); color: #fff; }
.ph-bento__text { font-size: 15px; line-height: 1.65; color: rgba(255, 244, 228, .82); }
.ph-bento__card .ph-link { color: var(--gold-hi); margin-top: 6px; }
.ph-bento__card:hover, .ph-bento__card:focus { color: #fff; }

/* ---------- PILLARS ---------- */
.ph-pillars {
    position: relative; overflow: hidden; color: #fff; padding: clamp(80px, 9vw, 128px) 0;
    background: radial-gradient(900px 500px at 50% 0%, rgba(139, 26, 26, .6), transparent 70%), var(--night);
}
.ph-mandala {
    position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; margin: -450px 0 0 -450px;
    fill: none; stroke: rgba(197, 155, 43, .14); stroke-width: .35; pointer-events: none;
    animation: ph-spin 240s linear infinite;
}
.ph-pillars__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.ph-pillar { display: flex; flex-direction: column; }
.ph-pillar__num { font: 600 italic 64px/1 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(246, 220, 152, .55); }
.ph-pillar__rule { display: block; height: 1px; margin: 18px 0 22px; background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left center; }
.ph-pillar__kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 12px; }
.ph-pillar__title { font: 600 clamp(26px, 2.4vw, 32px)/1.15 var(--serif); color: #fff; margin: 0 0 16px; }
.ph-pillar__text { font-size: 15.5px; line-height: 1.75; color: rgba(255, 244, 228, .72); margin: 0 0 24px; }

/* ---------- ABOUT ---------- */
.ph-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.ph-about__media { position: relative; padding: 0 28px 28px 0; }
.ph-about__frame { position: absolute; inset: 28px 0 0 28px; border: 1px solid var(--gold-soft); border-radius: 28px; }
.ph-about__main { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: var(--shadow-lift); }
.ph-about__main img { width: 100%; height: 116%; object-fit: cover; margin-top: -8%; }
.ph-about__badge {
    position: absolute; left: -18px; bottom: 56px; display: flex; align-items: center; gap: 14px;
    padding: 16px 22px; border-radius: 18px; color: #fff;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); box-shadow: 0 20px 40px -14px rgba(110, 20, 25, .7);
}
.ph-about__badge strong { font: 700 38px/1 var(--serif); color: var(--gold-hi); }
.ph-about__badge span { font-size: 13px; line-height: 1.4; color: rgba(255, 244, 228, .9); }
.ph-about__copy .ph-head { text-align: left; margin: 0 0 24px; }
.ph-about__copy p { font-size: 16px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; }
.ph-about__copy .ph-about__lead { font: 500 21px/1.55 var(--serif); color: var(--ink); }
.ph-about__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 30px; }
.ph-phone { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font: 600 24px/1.1 var(--serif); }
.ph-phone small { display: block; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.ph-phone:hover, .ph-phone:focus { color: var(--maroon); }
.ph-phone__icon {
    position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: var(--maroon); font-size: 20px;
}
.ph-phone__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--maroon); animation: ph-ping 2.4s var(--ease-out) infinite; }
.ph-stats {
    list-style: none; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ph-stats li { padding: 30px 16px; text-align: center; position: relative; }
.ph-stats li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--border); }
.ph-stats strong { display: block; font: 600 clamp(40px, 4.4vw, 58px)/1 var(--serif); color: transparent; background: linear-gradient(135deg, var(--maroon), #b0342a); -webkit-background-clip: text; background-clip: text; font-variant-numeric: tabular-nums; }
.ph-stats span { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- NAVRATNA (horizontal) ---------- */
.ph-navratna { position: relative; color: #fff; background: radial-gradient(1000px 600px at 85% 30%, rgba(139, 26, 26, .55), transparent 65%), linear-gradient(180deg, var(--night-2), var(--night)); }
.ph-navratna__pin { padding: clamp(72px, 8vw, 100px) 0 clamp(64px, 7vw, 90px); overflow: hidden; }
.ph-navratna__head { display: flex; flex-direction: column; align-items: center; }
.ph-navratna__head .ph-head { margin-bottom: 28px; }
.ph-navratna__progress { width: min(320px, 60vw); height: 2px; background: rgba(246, 220, 152, .18); border-radius: 2px; overflow: hidden; margin-bottom: 44px; }
.ph-navratna__progress span { display: block; width: 100%; height: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: left center; }
.ph-navratna__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ph-navratna__viewport::-webkit-scrollbar { display: none; }
.ph-navratna__track { list-style: none; margin: 0; padding: 0 max(24px, calc((100vw - 1140px) / 2)); display: flex; gap: 24px; width: max-content; }
.ph-gem { width: 300px; flex-shrink: 0; scroll-snap-align: center; }
.ph-gem__link {
    position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px;
    border-radius: 24px; color: #fff; overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .18);
    transition: box-shadow .45s var(--ease-out), transform .5s var(--ease-out), background-color .4s;
}
.ph-gem__link:hover, .ph-gem__link:focus-visible { color: #fff; transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .6), 0 30px 60px -24px rgba(0, 0, 0, .7); background-color: rgba(139, 26, 26, .25); }
.ph-gem__idx { position: absolute; top: 18px; right: 22px; font: 600 italic 40px/1 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(246, 220, 152, .4); }
.ph-gem__stage { position: relative; width: 150px; height: 150px; margin: 8px auto 14px; display: grid; place-items: center; }
.ph-gem__halo {
    position: absolute; inset: -12px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(246, 220, 152, .9), rgba(197, 155, 43, .05) 30%, rgba(246, 220, 152, .9) 50%, rgba(197, 155, 43, .05) 80%, rgba(246, 220, 152, .9));
    -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%);
    mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%);
    animation: ph-spin 12s linear infinite;
}
.ph-gem__stage img { position: relative; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: center; background: #fff; padding: 0; display: block; overflow: hidden; box-shadow: 0 0 40px rgba(246, 220, 152, .25), 0 18px 34px rgba(0, 0, 0, .45); transition: transform .8s var(--ease-out); }
.ph-gem__link:hover .ph-gem__stage img { transform: rotate(-10deg) scale(1.08); }
.ph-gem__name { font: 600 26px/1.15 var(--serif); }
.ph-gem__name .pg_deva { font-size: 16px; color: var(--gold-soft); }
.ph-gem__planet { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--gold-hi); background: rgba(197, 155, 43, .14); }
.ph-gem__blurb { font-size: 14.5px; line-height: 1.65; color: rgba(255, 244, 228, .72); flex-grow: 1; }
.ph-gem--more .ph-gem__link { justify-content: center; align-items: flex-start; background: linear-gradient(160deg, rgba(197, 155, 43, .22), rgba(139, 26, 26, .25)); }
.ph-gem__more-title { font: 600 38px/1.05 var(--serif); }
.ph-gem--more .ph-btn { margin-top: 14px; }

/* Desktop: js/home.js pins the section and slides the track with scroll. */
.ph-navratna.is-pinned .ph-navratna__pin { padding: 44px 0 40px; }
.ph-navratna.is-pinned .ph-navratna__progress { margin-bottom: 34px; }
.ph-navratna.is-pinned .ph-navratna__viewport { overflow: visible; scroll-snap-type: none; }

/* ---------- SERVICES ---------- */
.ph-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ph-service {
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 28px;
    border-radius: var(--radius); background: #fff; border: 1px solid var(--border); color: var(--ink);
    box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate;
    transition: transform .5s var(--ease-out), box-shadow .45s var(--ease-out), color .35s;
}
.ph-service::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(160deg, var(--maroon), var(--maroon-dark));
    clip-path: circle(0% at 44px 56px); transition: clip-path .7s var(--ease-out);
}
.ph-service:hover, .ph-service:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lift); color: #fff; }
.ph-service:hover::before, .ph-service:focus-visible::before { clip-path: circle(150% at 44px 56px); }
.ph-service__icon {
    width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
    background: var(--ivory); box-shadow: inset 0 0 0 1px var(--gold-soft); color: var(--maroon);
    transition: background-color .4s, color .4s, transform .6s var(--ease-out);
}
.ph-service__icon i, .ph-service__icon i::before { font-size: 28px !important; margin: 0 !important; line-height: 1; }
.ph-service:hover .ph-service__icon { background: rgba(255, 255, 255, .12); color: var(--gold-hi); transform: rotate(-8deg) scale(1.05); }
.ph-service__name { font: 600 23px/1.15 var(--serif); margin-top: 6px; }
.ph-service__text { font-size: 14.5px; line-height: 1.65; color: var(--muted); flex-grow: 1; transition: color .35s; }
.ph-service:hover .ph-service__text { color: rgba(255, 244, 228, .82); }
.ph-service:hover .ph-link { color: var(--gold-hi); }

/* ---------- ACHIEVEMENTS ---------- */
.ph-awards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ph-award { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--border); color: var(--ink); box-shadow: var(--shadow-card); transition: transform .5s var(--ease-out), box-shadow .45s var(--ease-out); }
.ph-award:hover, .ph-award:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lift); color: var(--ink); }
.ph-award__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ph-award__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-out); }
.ph-award:hover .ph-award__media img { scale: 1.08; }
.ph-award__tag { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3b0d10; background: var(--gold-grad); }
.ph-award__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 26px; flex-grow: 1; }
.ph-award__title { font: 600 23px/1.2 var(--serif); }
.ph-award__text { font-size: 14.5px; line-height: 1.65; color: var(--muted); flex-grow: 1; }

/* =====================================================================
   GEM FINISH — cut-gem buttons and faceted, slowly moving backgrounds.
   Same palette; depth comes from bevel highlights, facet bands, a flowing
   metallic gradient and a periodic glint.
   ===================================================================== */

/* ---------- Buttons ---------- */
.ph-btn { top: 0; transition: box-shadow .35s var(--ease-out), color .3s, filter .3s, top .15s; }
.ph-btn:active { top: 2px; }
.ph-btn:hover { filter: brightness(1.06) saturate(1.08); }
/* facet bands: angled light planes like a step-cut stone */
.ph-btn--gold::before, .ph-btn--maroon::before, .ph-btn--wa::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background:
        linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, .26) 18% 27%, transparent 27% 52%, rgba(255, 255, 255, .14) 52% 58%, transparent 58%),
        linear-gradient(62deg, transparent 0 68%, rgba(255, 255, 255, .16) 68% 75%, transparent 75%),
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 48%);
}
/* periodic glint (replaces the hover-only sweep) */
.ph-btn--gold::after, .ph-btn--maroon::after, .ph-btn--wa::after {
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, .15) 54%, transparent 62%);
    animation: ph-glint 5.5s var(--ease-io) infinite;
}
.ph-hero__ctas .ph-btn:nth-child(2)::after, .ph-about__cta .ph-btn::after { animation-delay: 1.4s; }

.ph-btn--gold {
    color: #3b0d10; text-shadow: 0 1px 0 rgba(255, 245, 215, .55);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 45%, rgba(90, 55, 0, 0) 60%, rgba(90, 55, 0, .3) 100%),
        linear-gradient(115deg, #8A6417 0%, #D9B048 16%, #FFF1C4 30%, #C59B2B 45%, #F6DC98 60%, #A77A1E 78%, #EBCB6E 100%);
    background-size: 100% 100%, 260% 100%;
    animation: ph-liquid 6s ease-in-out infinite alternate;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 1px rgba(110, 70, 10, .45), inset 0 0 0 1px rgba(255, 236, 180, .55),
        0 3px 0 #8A6417, 0 14px 30px -10px rgba(197, 155, 43, .8);
}
.ph-btn--gold:hover, .ph-btn--gold:focus {
    color: #3b0d10;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 1px rgba(110, 70, 10, .45), inset 0 0 0 1px rgba(255, 236, 180, .7),
        0 3px 0 #8A6417, 0 18px 40px -10px rgba(226, 180, 106, .95), 0 0 30px rgba(246, 220, 152, .35);
}
.ph-btn--gold:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 1px rgba(110, 70, 10, .4), 0 1px 0 #8A6417, 0 8px 18px -8px rgba(197, 155, 43, .8); }

.ph-btn--maroon {
    color: #fff; text-shadow: 0 1px 1px rgba(40, 0, 0, .5);
    background:
        linear-gradient(180deg, rgba(255, 200, 200, .32) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 60%, rgba(30, 0, 0, .35) 100%),
        linear-gradient(115deg, #4a0b10 0%, #8B1A1A 22%, #cf4a4f 36%, #8B1A1A 52%, #b52d34 70%, #5a0f14 100%);
    background-size: 100% 100%, 260% 100%;
    animation: ph-liquid 7s ease-in-out infinite alternate;
    box-shadow:
        inset 0 1px 0 rgba(255, 190, 190, .6), inset 0 -2px 1px rgba(40, 0, 0, .55), inset 0 0 0 1px rgba(255, 150, 150, .22),
        0 3px 0 #4a0b10, 0 14px 30px -10px rgba(139, 26, 26, .75);
}
.ph-btn--maroon:hover, .ph-btn--maroon:focus {
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 200, .7), inset 0 -2px 1px rgba(40, 0, 0, .55), inset 0 0 0 1px rgba(255, 170, 170, .3),
        0 3px 0 #4a0b10, 0 18px 40px -12px rgba(176, 42, 47, .85), 0 0 28px rgba(207, 74, 79, .3);
}
.ph-btn--maroon:active { box-shadow: inset 0 1px 0 rgba(255, 190, 190, .5), 0 1px 0 #4a0b10, 0 8px 18px -8px rgba(139, 26, 26, .8); }

.ph-btn--wa {
    color: #fff; text-shadow: 0 1px 1px rgba(0, 40, 15, .45);
    background:
        linear-gradient(180deg, rgba(210, 255, 225, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 60%, rgba(0, 35, 15, .35) 100%),
        linear-gradient(115deg, #0b5d2c 0%, #1FAF54 22%, #7ce8a4 36%, #1FAF54 52%, #16a049 70%, #0a4f25 100%);
    background-size: 100% 100%, 260% 100%;
    animation: ph-liquid 6.5s ease-in-out infinite alternate;
    box-shadow:
        inset 0 1px 0 rgba(210, 255, 225, .7), inset 0 -2px 1px rgba(0, 45, 18, .5), inset 0 0 0 1px rgba(160, 255, 200, .25),
        0 3px 0 #0b5d2c, 0 14px 30px -10px rgba(31, 175, 84, .75);
}
.ph-btn--wa:hover, .ph-btn--wa:focus { color: #fff; box-shadow: inset 0 1px 0 rgba(210, 255, 225, .8), inset 0 -2px 1px rgba(0, 45, 18, .5), 0 3px 0 #0b5d2c, 0 18px 40px -12px rgba(31, 175, 84, .9), 0 0 26px rgba(124, 232, 164, .3); }
.ph-btn--wa:active { box-shadow: inset 0 1px 0 rgba(210, 255, 225, .6), 0 1px 0 #0b5d2c, 0 8px 18px -8px rgba(31, 175, 84, .8); }

/* ghost: smoked glass with a rotating gold facet rim */
.ph-btn--ghost {
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 55%, rgba(0, 0, 0, .12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .7);
    backdrop-filter: blur(10px);
}
.ph-btn--ghost::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--ph-angle), #F6DC98, #8A6417 18%, #FFF1C4 32%, #C59B2B 50%, #6b4c10 68%, #F6DC98 84%, #F6DC98);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: ph-ring 5s linear infinite;
}
.ph-btn--ghost:hover, .ph-btn--ghost:focus { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, rgba(0, 0, 0, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 36px -14px rgba(0, 0, 0, .8), 0 0 24px rgba(246, 220, 152, .25); }

/* slider controls: glass gems */
.ph-ctrl__btn {
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06) 45%, rgba(0, 0, 0, .25) 100%);
    box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .5), inset 0 1px 1px rgba(255, 255, 255, .4), 0 8px 20px -8px rgba(0, 0, 0, .7);
}
.ph-ctrl__btn:hover, .ph-ctrl__btn:focus-visible {
    background: radial-gradient(circle at 32% 26%, #fffbe9, #F6DC98 35%, #C59B2B 75%, #8A6417);
    box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px rgba(110, 70, 10, .4), 0 10px 26px -8px rgba(246, 220, 152, .8);
}
.ph-tab__bar span { background: linear-gradient(90deg, #8A6417, #F6DC98 40%, #fff6dc 50%, #C59B2B 70%); box-shadow: 0 0 10px rgba(246, 220, 152, .7); }

/* ---------- Faceted, moving backgrounds ---------- */
/* dark sections: a slowly turning gold / maroon / violet glow seen through crystal facets */
.ph-navratna { overflow: hidden; }
.ph-hero::before, .ph-pillars::before, .ph-navratna::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(139, 26, 26, .5) 55deg, rgba(197, 155, 43, .24) 115deg, transparent 165deg,
        rgba(96, 44, 150, .24) 215deg, rgba(139, 26, 26, .42) 275deg, rgba(197, 155, 43, .18) 330deg, transparent 360deg);
    filter: blur(70px); will-change: rotate; animation: ph-spin 80s linear infinite;
}
.ph-hero::after, .ph-pillars::after, .ph-navratna::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--ph-facets-light); background-size: 280px; opacity: .55; mix-blend-mode: overlay;
    -webkit-mask: radial-gradient(ellipse 80% 75% at 62% 45%, #000 15%, transparent 80%);
    mask: radial-gradient(ellipse 80% 75% at 62% 45%, #000 15%, transparent 80%);
}
.ph-pillars > .container, .ph-navratna__pin { position: relative; z-index: 1; }

/* light sections: drifting gold/rose glows + a faint gold facet texture */
.ph-section, .ph-consult { position: relative; isolation: isolate; }
.ph-section::before, .ph-consult::before {
    content: ""; position: absolute; inset: -10% -6%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 42% at 12% 18%, rgba(226, 180, 106, .26), transparent 70%),
        radial-gradient(34% 40% at 88% 72%, rgba(139, 26, 26, .09), transparent 70%),
        radial-gradient(28% 34% at 62% 8%, rgba(197, 155, 43, .14), transparent 70%);
    animation: ph-drift 24s ease-in-out infinite alternate;
}
.ph-section::after, .ph-consult::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--ph-facets-gold); background-size: 240px; opacity: .6;
    -webkit-mask: radial-gradient(ellipse 75% 65% at 50% 35%, #000, transparent 78%);
    mask: radial-gradient(ellipse 75% 65% at 50% 35%, #000, transparent 78%);
}

/* marquee: a band of ruby with a travelling sheen */
.ph-marquee {
    position: relative; overflow: hidden;
    background: linear-gradient(100deg, #5a0f14, #8B1A1A 18%, #b9353d 32%, #8B1A1A 46%, #6e1419 64%, #a8262f 82%, #5a0f14);
    background-size: 200% 100%; animation: ph-liquid-x 14s linear infinite;
    box-shadow: inset 0 1px 0 rgba(255, 210, 170, .45), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 12px 30px -14px rgba(110, 20, 25, .7);
}
.ph-marquee::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ph-facets-light); background-size: 180px; opacity: .35; mix-blend-mode: overlay; }

/* ---------- Gem accents on cards and icons ---------- */
.ph-consult__card, .ph-sign, .ph-service, .ph-award {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(145deg, rgba(246, 220, 152, .95), var(--border) 32%, var(--border) 68%, rgba(197, 155, 43, .85)) border-box;
}
.ph-sign__icon, .ph-service__icon, .ph-steps span {
    background: radial-gradient(circle at 32% 24%, #fff 0%, #fdf4e2 38%, #f2dcae 100%);
    box-shadow: inset 0 2px 2px #fff, inset 0 -3px 6px rgba(197, 155, 43, .28), 0 0 0 1px rgba(226, 180, 106, .65), 0 6px 14px -8px rgba(138, 100, 23, .6);
}
.ph-phone__icon, .ph-about__badge {
    background:
        linear-gradient(118deg, transparent 0 22%, rgba(255, 255, 255, .16) 22% 30%, transparent 30%),
        radial-gradient(circle at 30% 22%, #d9545a, #8B1A1A 45%, #4a0b10);
    box-shadow: inset 0 1px 1px rgba(255, 200, 200, .6), inset 0 -3px 6px rgba(30, 0, 0, .45), 0 16px 34px -14px rgba(110, 20, 25, .8);
}

@keyframes ph-liquid { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@keyframes ph-liquid-x { to { background-position: -200% 0; } }
@keyframes ph-glint { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
@keyframes ph-drift { from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(3%, 3%, 0) rotate(6deg) scale(1.08); } }

/* ---------- Numerals ---------- */
.ph-steps span, .ph-stats strong, .ph-gem__idx, .ph-pillar__num, .ph-bento__num, .ph-tab__num,
.ph-about__badge strong, .ph-phone { font-family: var(--num); }
.ph-stats strong { font-weight: 700; }
.ph-steps span { font-size: 16px; font-weight: 700; }
.ph-phone { font-size: 21px; }

/* ---------- Floating accents ---------- */
.ph-float { animation: ph-float 6s ease-in-out infinite; }

/* ---------- Keyframes ---------- */
@keyframes ph-spin { to { rotate: 360deg; } }
@keyframes ph-ring { to { --ph-angle: 360deg; } }
@keyframes ph-breathe { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
@keyframes ph-shimmer { to { background-position: -220% 0; } }
@keyframes ph-marquee { to { transform: translateX(-50%); } }
@keyframes ph-ping { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.6; } }
@keyframes ph-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ph-zodiac__grid { grid-template-columns: repeat(4, 1fr); }
    .ph-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .ph-slides { min-height: 0; }
    .ph-slide { padding: 36px 0 36px; }
    .ph-slider-ui { position: relative; bottom: auto; padding: 8px 0 28px; }
    .ph-hero__eyebrow .ph-eyebrow__line { display: none; }
    .ph-hero__grid { grid-template-columns: 1fr; text-align: center; }
    .ph-hero__lead { margin-inline: auto; }
    .ph-hero__ctas, .ph-trust { justify-content: center; }
    .ph-hero__visual { order: -1; }
    .ph-cosmos, .ph-yantra, .ph-arch { --size: min(400px, 80vw); }
    .ph-tabs { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ph-consult__card { grid-template-columns: 1fr; }
    .ph-bento { grid-template-columns: 1fr; grid-template-rows: none; }
    .ph-bento__card--lg { grid-row: auto; min-height: 380px; }
    .ph-pillars__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .ph-about__grid { grid-template-columns: 1fr; }
    .ph-about__media { max-width: 520px; margin: 0 auto; }
    .ph-stats { grid-template-columns: repeat(3, 1fr); }
    .ph-stats li:nth-child(4)::before { display: none; }
    .ph-awards__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
    .ph-tab__label { display: none; }
    .ph-tab { justify-content: center; }
    .ph-ctrl__btn { width: 42px; height: 42px; }
    .ph-chip__in { font-size: 11px; padding: 8px 12px; gap: 7px; }
    .ph-chip--a { left: -2%; } .ph-chip--b { right: -2%; }
    .ph-mantra__pill { padding: 7px 10px; } .ph-mantra__in b { font-size: 12.5px; } .ph-mantra__in small { font-size: 8.5px; }
    .ph-zodiac__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ph-sign { padding: 20px 6px 16px; }
    .ph-sign__icon { width: 58px; height: 58px; }
    .ph-sign__icon i::before { font-size: 28px !important; }
    .ph-sign__name { font-size: 19px; }
    .ph-form { grid-template-columns: 1fr; }
    .ph-form__submit { justify-self: stretch; }
    .ph-services__grid { grid-template-columns: 1fr; }
    .ph-stats { grid-template-columns: repeat(2, 1fr); }
    .ph-stats li::before { display: none; }
    .ph-stats li:last-child { grid-column: 1 / -1; }
    .ph-gem { width: 270px; }
    .ph-about__badge { left: 8px; bottom: 40px; }
    .ph-marquee__item { font-size: 21px; padding: 0 18px; }
}
@media (max-width: 479px) {
    .ph-zodiac__grid { grid-template-columns: repeat(2, 1fr); }
    .ph-btn { width: 100%; }
    .ph-hero__ctas { flex-direction: column; }
}

/* ---------- Reduced motion ----------
   js/home.js switches to its "gentle" mode (fades, cross-fading slideshow, no parallax,
   pinning or tilt). The slow ambient CSS motion (wheel spin, gem ribbon, shimmer,
   twinkle) stays; only the quicker bouncy bits are calmed here. */
@media (prefers-reduced-motion: reduce) {
    .ph-float { animation-duration: 10s; }
    .ph-sign:hover, .ph-service:hover, .ph-award:hover, .ph-gem__link:hover { transform: none; }
}