/* PP Properties — shared UI: compact page header, section identity, mobile dock.
   Linked from every public layout. Mobile first: base rules are for phones, @media(min-width) adds laptop. */

/* ── Brand colours, the same on every section. A section is told apart by its icon + gold label, never by a new colour ── */
.ph, .sec-chip, [data-sec] { --sec:#0E5835; --sec-bg:#EEF5F0; --sec-line:#D3E4D9; --sec-gold:#8A5A0E; }

/* ── Compact page header (replaces the full-screen green banners) ── */
.ph {
    background: linear-gradient(115deg, #EAF3EE 0%, #F1F4EC 55%, #F7F1E3 100%);
    border-bottom: 1px solid var(--sec-line);
    font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
    color: #10231A;
}
.ph__in { max-width: 1100px; margin: 0 auto; padding: 14px 16px 18px; }
.ph__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.ph__crumbs { font-size: .74rem; color: #5b6b62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph__crumbs a { color: #5b6b62; text-decoration: none; }
.ph__crumbs a:hover { color: var(--sec); text-decoration: underline; }
.ph__crumbs span[aria-current] { color: #1f2d26; font-weight: 600; }
.ph__lang {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--sec-line);
    font-size: .78rem; font-weight: 600; color: var(--sec); text-decoration: none; line-height: 1.3;
}
.ph__lang:hover { border-color: var(--sec); color: var(--sec); text-decoration: none; }
.ph__lang svg { width: 14px; height: 14px; }

.ph__head { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.ph__ico {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
    background: var(--sec); color: #fff; display: grid; place-items: center;
}
.ph__ico svg { width: 21px; height: 21px; }
.ph__kicker {
    margin: 0 0 2px; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--sec-gold);
}
.ph .ph__h1 {
    margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 700; color: #0B2A1B; letter-spacing: -.01em;
}
.ph .ph__sub { margin: 10px 0 0; font-size: .9rem; line-height: 1.6; color: #44544b; max-width: 720px; }
.ph__note { margin: 8px 0 0; font-size: .74rem; font-weight: 600; color: var(--sec); }
.ph__extra { margin-top: 14px; }

@media (min-width: 768px) {
    .ph__in { padding: 18px 24px 26px; }
    .ph__head { gap: 16px; margin-top: 14px; align-items: center; }
    .ph__ico { width: 52px; height: 52px; border-radius: 14px; }
    .ph__ico svg { width: 26px; height: 26px; }
    .ph .ph__h1 { font-size: 2rem; }
    .ph .ph__sub { font-size: .98rem; margin-top: 12px; }
}

/* ── Topic chips: one tidy row, swipe sideways on a phone ── */
.pp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 99px; background: #fff; border: 1px solid var(--sec-line, #dbe5df);
    font-size: .8rem; font-weight: 600; color: #1f2d26; text-decoration: none; white-space: nowrap;
}
.pp-chip small { font-weight: 500; color: #7b8a82; font-size: .72rem; }
.pp-chip:hover { border-color: var(--sec, #0E5835); color: var(--sec, #0E5835); text-decoration: none; }
.pp-chip.is-on { background: var(--sec, #0E5835); border-color: var(--sec, #0E5835); color: #fff; }
.pp-chip.is-on small { color: rgba(255,255,255,.75); }
.pp-chip--alt { background: transparent; border-style: dashed; }
@media (min-width: 900px) {
    .pp-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 0; }
}

/* ── Small section label used on cards (Guides / Tools / Area / News) ── */
.sec-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px;
    background: var(--sec-bg); color: var(--sec); font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}

/* ── Header: show which part of the site you are in ── */
.hdr__link.is-on { color: var(--sec) !important; background: var(--sec-bg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sec); }

/* ── Mobile dock: WhatsApp + Call always one thumb away ── */
.pp-dock { display: none; }
@media (max-width: 899px) {
    .pp-dock {
        display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff;
        border-top: 1px solid #e3e9e5; box-shadow: 0 -4px 18px rgba(0,0,0,.08);
        font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
    }
    .pp-dock a {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 10px; border-radius: 11px; font-weight: 700; font-size: .9rem; text-decoration: none;
    }
    .pp-dock__wa { flex: 1; background: #1FAF55; color: #fff !important; }
    .pp-dock__call { flex: 0 0 auto; padding-left: 18px !important; padding-right: 18px !important; background: #fff; color: #0B3B26 !important; border: 1.5px solid #0B3B26; }
    .pp-dock svg { width: 18px; height: 18px; }
    body.has-dock { padding-bottom: 76px; }
}

/* ── No fade-in on scroll: content shows at once (faster, nothing looks blank) ── */
.rv, .bp-rv, .ab-rv, .pv-rv, .pa-rv, .rg-rv, .np-rv { opacity: 1 !important; transform: none !important; }

/* ── Buttons for page heads ── */
.pp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: .9rem; text-decoration: none;
    border: 1.5px solid transparent; font-family: inherit; line-height: 1.2;
}
.pp-btn:hover { text-decoration: none; opacity: .92; }
.pp-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.pp-btn--wa { background: #1FAF55; color: #fff !important; }
.pp-btn--main { background: var(--sec, #0E5835); color: #fff !important; }
.pp-btn--ghost { background: #fff; color: var(--sec, #0E5835) !important; border-color: var(--sec-line, #cfe0d6); }
@media (max-width: 479px) { .pp-btns .pp-btn { flex: 1 1 100%; } }
.ph:lang(hi) .ph__h1 { line-height: 1.4; }
.ph:lang(hi) .ph__kicker { letter-spacing: 0; }

/* ── Buttons for page heads ── */
.pp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: .9rem; text-decoration: none;
    border: 1.5px solid transparent; font-family: inherit; line-height: 1.2;
}
.pp-btn:hover { text-decoration: none; opacity: .92; }
.pp-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.pp-btn--wa { background: #1FAF55; color: #fff !important; }
.pp-btn--main { background: var(--sec, #0E5835); color: #fff !important; }
.pp-btn--ghost { background: #fff; color: var(--sec, #0E5835) !important; border-color: var(--sec-line, #cfe0d6); }
@media (max-width: 479px) { .pp-btns .pp-btn { flex: 1 1 100%; } }
.ph:lang(hi) .ph__h1 { line-height: 1.4; }
.ph:lang(hi) .ph__kicker { letter-spacing: 0; }

/* ── Service pages keep their dark hero (it holds the fee card), but no full-screen height and no fade-in ── */
.pv-hero, .pa-hero, .rg-hero { min-height: 0 !important; }
.pv-hero__body { padding-top: 64px !important; padding-bottom: 72px !important; }
.rg-hero__body { padding-top: 32px !important; }
.pa-hero__body { padding-top: 32px !important; }
.pv-hero__left, .pv-hero__card, .rg-hero__card, .rg-hero__left, .pa-hero__body, .pa-hero__body > * { animation: none !important; opacity: 1 !important; transform: none !important; }
.pv-hero__orb, .pa-hero__orb, .rg-hero__orb { animation: none !important; }
@media (max-width: 900px) {
    .pv-hero__body { padding-top: 76px !important; padding-bottom: 56px !important; }
    .rg-hero__body { padding-top: 20px !important; padding-bottom: 56px !important; }
}

/* ── Service hero (components/service-hero): the three service pages share it; same dark green as the home hero ── */
.sh {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0B3B26 0%, #0E5835 55%, #13704A 100%);
    font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}
.sh::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 52px 52px;
}
.sh__in { position: relative; max-width: 1100px; margin: 0 auto; padding: 14px 16px 36px; }
.sh__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.sh__crumbs { font-size: .74rem; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sh__crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.sh__crumbs a:hover { color: #fff; text-decoration: underline; }
.sh__crumbs [aria-current] { color: #fff; font-weight: 600; }
.sh .ph__lang { --sec: #0E5835; border-color: transparent; }
.sh__grid { display: grid; gap: 24px; margin-top: 18px; align-items: center; }
.sh__badge {
    display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E2B95A;
}
.sh__badge svg { width: 16px; height: 16px; }
.sh .sh__h1 { margin: 0 0 14px; font-size: 1.7rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sh .sh__h1 em { font-style: normal; color: #E2B95A; }
.sh .sh__h1 br { display: none; }
.sh:lang(hi) .sh__h1 { line-height: 1.38; }
.sh .sh__sub { margin: 0 0 20px; font-size: .95rem; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 580px; }
.sh .sh__sub strong { color: #fff; }
.sh__ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.4); }
.sh__ghost:hover { background: rgba(255,255,255,.08); }
.sh__pills { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sh__pills li { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: rgba(255,255,255,.8); }
.sh__pills svg { width: 14px; height: 14px; color: #E2B95A; flex-shrink: 0; }
.sh__card { background: #fff; color: #10231A; border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.sh__card-tag {
    display: inline-block; margin-bottom: 10px; padding: 4px 9px; border-radius: 6px;
    background: #F6EEDC; color: #8A5A0E; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sh .sh__card-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: #0B2A1B; line-height: 1.3; }
.sh .sh__card-sub { margin: 0 0 14px; font-size: .84rem; line-height: 1.6; color: #4a5a52; }
.sh__fee { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #F3F6F4; border-left: 4px solid #A06C14; }
.sh__fee b { font-size: 1.2rem; color: #0B3B26; }
.sh__fee span { font-size: .8rem; color: #4a5a52; }
.sh__list { list-style: none; margin: 0 0 16px; padding: 0; }
.sh__list li { display: flex; gap: 9px; padding: 7px 0; font-size: .86rem; line-height: 1.5; color: #33443b; border-bottom: 1px solid #edf1ee; }
.sh__list li:last-child { border-bottom: 0; }
.sh__list li::before { content: '✓'; color: #0E5835; font-weight: 800; flex-shrink: 0; }
.sh *, .sh *::before, .sh *::after, .ph *, .pp-btn { box-sizing: border-box; }
.ph__in, .sh__in { box-sizing: content-box; } /* lines up with the page content below */
.sh__card-btn { width: 100%; }
.sh .sh__note { margin: 10px 0 0; text-align: center; font-size: .74rem; color: #6b7a72; }
@media (max-width: 479px) { .sh__btns .pp-btn { flex: 1 1 100%; } }
@media (min-width: 900px) {
    .sh__in { padding: 18px 24px 56px; }
    .sh__grid { grid-template-columns: 1.15fr .85fr; gap: 48px; margin-top: 22px; }
    .sh .sh__h1 { font-size: 2.5rem; }
    .sh .sh__sub { font-size: 1rem; }
    .sh__card { padding: 26px; }
}
/* the service pages' own bottom bars are replaced by the site-wide dock */
.pa-mobile-cta, .pv-mobile-cta, .rg-mob-cta { display: none !important; }
