/* ==========================================================================
   JAIN PU College — LUXURY LAYER
   Loaded last, after style.css, marquee-popup.css and upgrade.css.

   This file re-skins the whole site to a midnight-navy and champagne-gold
   identity, and repairs the header/hero layout collisions. It overrides the
   theme's design tokens rather than editing style.css, so nothing in the
   vendor stylesheet is touched and the whole layer can be removed by
   deleting one <link>.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS — the luxury palette
   ========================================================================== */
:root {
    /* Grounds — the brand navy from logo2.svg (#001C54) */
    --navy:            #001C54;   /* Brand blue — primary dark */
    --navy-deep:       #00133A;   /* Deeper, for footers and overlays */
    --navy-raise:      #002B7A;   /* Lifted blue for gradients */
    --navy-line:       rgba(255, 255, 255, .12);

    /* Accent — the JAIN dark yellow sampled from logo-icon.svg (#FDB92E) */
    --gold:            #FDB92E;   /* JAIN dark yellow: fills, badges, rules */
    --gold-bright:     #FFC94F;   /* Lighter, for highlights */
    --gold-amber:      #E0A21E;   /* Deeper, for button hover */
    --gold-deep:       #123A7A;   /* INK on yellow/light — blue, never yellow */
    --gold-wash:       rgba(253, 185, 46, .16);
    --gold-line:       rgba(253, 185, 46, .50);

    /* Papers */
    --alabaster:       #FAFAFA;
    --slate:           #F1F5F9;
    --ink:             #001C54;
    --ink-soft:        #47566E;
    --hairline:        #E2E8F0;

    /* Type — Google Sans where it is installed, DM Sans on the web */
    --display-font:    "Google Sans", "Google Sans Text", "Product Sans", "DM Sans", "Plus Jakarta Sans", sans-serif;
    --brand-sans:      "Google Sans", "Google Sans Text", "Product Sans", "DM Sans", "Plus Jakarta Sans", sans-serif;

    /* Motion + depth */
    --lux-ease:        300ms cubic-bezier(.4, 0, .2, 1);
    --lux-shadow:      0 20px 40px rgba(0, 0, 0, .06);
    --lux-shadow-lg:   0 28px 60px rgba(0, 28, 84, .16);
    --lux-radius:      20px;
    --lux-radius-sm:   14px;

    /* ---- Re-point the theme's own tokens at the brand palette ---------- */
    --theme-color:     #FDB92E;
    --theme-color2:    #001C54;
    --title-color:     #001C54;
    --title-color2:    #001C54;
    --title-color3:    #001C54;
    --title-color4:    #002B7A;
    --body-color:      #47566E;
    --black-color:     #001C54;
    --black-color2:    #00133A;
    --smoke-color:     #FAFAFA;
    --smoke-color2:    #F1F5F9;
    --smoke-color3:    #FAFAFA;
    --gray-color:      #F1F5F9;
    --th-border-color: #E2E8F0;
    --th-border-color2:#EDF1F6;
    --yellow-color:    #FDB92E;

    /* Every theme rule that reaches for --title-font gets the brand sans too,
       so no Playfair Display survives anywhere. */
    --title-font:      "Google Sans", "Google Sans Text", "Product Sans", "DM Sans", "Plus Jakarta Sans", sans-serif;

    /* Body font follows the brand sans too */
    --body-font:       "Google Sans", "Google Sans Text", "Product Sans", "DM Sans", "Plus Jakarta Sans", sans-serif;
    --subtitle-font:   "Google Sans", "Google Sans Text", "Product Sans", "DM Sans", "Plus Jakarta Sans", sans-serif;

    /* Upgrade-layer tokens */
    --trust-gold:      #FDB92E;
    --surface-raise:   0 20px 40px rgba(0, 0, 0, .06);
    --jpc-radius:      12px;
    --jpc-radius-lg:   20px;

    /* Generous rhythm */
    --section-space:        120px;
    --section-space-mobile: 80px;
}

/* ==========================================================================
   2 · TYPOGRAPHY — editorial serif headings, clean sans body
   ========================================================================== */
body {
    background: var(--alabaster);
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.sec-title, .box-title, .hero-title, .breadcumb-title,
.jpc-flow-title, .jpc-hof-title, .jpc-stream-title {
    font-family: var(--display-font);
    color: var(--ink);
    letter-spacing: -.018em;
}

.hero-title,
.breadcumb-title {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.028em;
}

.sec-title,
.jpc-flow-title,
.jpc-hof-title,
.jpc-stream-title {
    font-weight: 700;
    line-height: 1.16;
}

/* Small-caps eyebrow, used everywhere a section opens. */
.sub-title,
.jpc-eyebrow {
    font-family: var(--subtitle-font, "Urbanist", sans-serif);
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep) !important;
}

/* On dark grounds the brighter gold is both legible and richer. */
.bg-title .sub-title,
.jpc-hof .jpc-eyebrow,
.jpc-chair .jpc-eyebrow,
.jpc-enquiry-band .jpc-eyebrow,
.footer-wrapper .sub-title {
    color: var(--gold) !important;
}

p, .box-text, .sec-text {
    line-height: 1.8;
    letter-spacing: .002em;
}

/* ==========================================================================
   3 · HEADER — repairs the wrap, removes the hero collision, adds glass
   ========================================================================== */

/* The theme pulls the menu bar down onto the hero by 36px. With the CTA
   cluster present that produced the overlap in review. */
.header-layout1 .menu-area,
.header-layout2 .menu-area { margin-bottom: 0; }

/* One row, never two. */
.menu-wrapp > .row {
    flex-wrap: nowrap;
    align-items: center;
}

.menu-wrapp {
    background-color: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--lux-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 28, 84, .07);
}

.header-layout1 .sticky-wrapper.sticky .menu-wrapp,
.header-layout2 .sticky-wrapper.sticky .menu-wrapp {
    background-color: rgba(255, 255, 255, .92) !important;
}

/* The legacy "Get More Info" pill duplicates Enquire Now and is what pushed
   the row over the container width. Hidden from xl up; still in the markup
   and still shown on smaller screens. */
@media (min-width: 1200px) {
    .header-left .header-button .th-btn { display: none !important; }
}

.header-button { gap: 12px; }

/* Utility strip + info strip */
.header-top {
    background: var(--navy-deep) !important;
    border-bottom: 1px solid var(--navy-line);
}

.header-top a,
.header-top li,
.header-top i { color: rgba(255, 255, 255, .86) !important; }
.header-top a:hover { color: var(--gold) !important; }

.header-info { padding: 18px 0; }

.header-info-title,
.header-info-title a { font-family: var(--body-font); font-size: 15px; font-weight: 600; }
.header-info-text { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.header-info-icon i { color: var(--gold) !important; }

/* Nav links */
.main-menu > ul > li > a {
    font-family: var(--body-font);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .012em;
    color: var(--ink);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a { color: var(--gold-deep); }

.main-menu ul .sub-menu {
    border-top: 2px solid var(--gold);
    border-radius: 0 0 var(--lux-radius-sm) var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-lg);
}

.main-menu ul .sub-menu li a:hover { color: var(--gold-deep); }

/* ---- Header CTA cluster --------------------------------------------- */
.jpc-header-cta { gap: 14px; margin-right: 12px; flex: 0 0 auto; }

.jpc-header-phone i {
    background: var(--gold-wash);
    color: var(--gold-deep);
}

.jpc-header-phone span { font-size: 15px; }
.jpc-header-phone small { letter-spacing: .18em; font-size: 10.5px; }

.jpc-portal-trigger {
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    padding: 11px 20px;
    font-size: 14.5px;
    transition: all var(--lux-ease);
}

.jpc-portal-trigger:hover {
    border-color: var(--gold);
    color: var(--gold-deep);
    background: var(--gold-wash);
}

.jpc-header-btn {
    border-radius: 999px;
    padding: 13px 28px;
    font-size: 14.5px;
    letter-spacing: .02em;
    background: var(--gold);
    color: var(--navy);
    box-shadow: 0 8px 22px rgba(253, 185, 46, .32);
    transition: all var(--lux-ease);
}

.jpc-header-btn:hover {
    background: var(--gold-amber);
    color: var(--navy);
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(253, 185, 46, .42);
}

@media (max-width: 1499.98px) {
    .jpc-header-cta { gap: 10px; }
}

/* ==========================================================================
   4 · BUTTONS — gold foil on navy type
   ========================================================================== */
.th-btn {
    border-radius: 999px !important;
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--gold);
    color: var(--navy) !important;
    border: 0;
    box-shadow: 0 8px 22px rgba(253, 185, 46, .26);
    transition: all var(--lux-ease);
}

.th-btn:hover {
    background: var(--gold-amber);
    color: var(--navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(253, 185, 46, .40);
}

.th-btn.style-border1,
.th-btn.style-border2 {
    background: transparent;
    border: 1px solid var(--gold-line);
    color: var(--ink) !important;
    box-shadow: none;
}

.th-btn.style-border1:hover,
.th-btn.style-border2:hover {
    background: var(--gold-wash);
    border-color: var(--gold);
    color: var(--gold-deep) !important;
}

/* On dark grounds the outline button turns to light. */
.bg-title .th-btn.style-border1,
.jpc-hof .th-btn.style-border1,
.th-hero-wrapper .th-btn.style-border1 {
    border-color: rgba(255, 255, 255, .42);
    color: #fff !important;
}

.th-hero-wrapper .th-btn.style-border1:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--gold);
    color: var(--gold) !important;
}

.jpc-submit,
.jpc-inline-btn,
.jpc-side-btn,
.jpc-hof-btn {
    border-radius: 999px !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    box-shadow: 0 8px 22px rgba(253, 185, 46, .28);
    letter-spacing: .02em;
    transition: all var(--lux-ease);
}

.jpc-submit:hover,
.jpc-inline-btn:hover,
.jpc-side-btn:hover,
.jpc-hof-btn:hover {
    background: var(--gold-amber) !important;
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(253, 185, 46, .40);
}

/* ==========================================================================
   5 · HERO — cinematic, no longer collides with the header
   ========================================================================== */
.th-hero-wrapper.hero-1 { position: relative; background: var(--navy); }

.hero-inner { position: relative; }

/* A deeper, directional overlay: darkest at the left where the type sits. */
.th-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 19, 58, .93) 0%,
        rgba(0, 28, 84, .85) 38%,
        rgba(0, 28, 84, .56) 68%,
        rgba(0, 28, 84, .40) 100%);
}

.hero-style1 { position: relative; z-index: 2; padding: 150px 0 130px; }

.hero-title {
    font-size: clamp(40px, 5vw, 74px);
    color: #fff;
    margin-bottom: 22px;
}

.hero-title span { color: var(--gold) !important; }

.hero-text {
    max-width: 560px;
    font-size: 17.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .8) !important;
    margin-bottom: 36px;
}

/* A hairline gold rule above the headline reads as a crest. */
.hero-text-wrap::before {
    content: "";
    display: block;
    width: 68px;
    height: 2px;
    margin-bottom: 26px;
    background: var(--gold);
}

@media (max-width: 1199.98px) {
    .hero-style1 { padding: 90px 0 70px; text-align: center; }
    .hero-text { margin-left: auto; margin-right: auto; }
    .hero-text-wrap::before { margin-left: auto; margin-right: auto; }
}

/* ---- Hero enquiry card: frosted glass ------------------------------- */
.jpc-hero-form { width: 396px; }

.jpc-hero-form .jpc-form-card {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-top: 3px solid var(--gold);
    border-radius: var(--lux-radius);
    box-shadow: 0 30px 70px rgba(0, 19, 58, .40);
    padding: 30px 28px;
}

.jpc-hero-form .jpc-form-card h3 {
    font-family: var(--display-font);
    font-size: 27px;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .jpc-hero-form { width: 100%; margin-top: 0; padding: 0 16px 60px; }
    .jpc-hero-form .jpc-form-card { box-shadow: var(--lux-shadow-lg); }
}

/* ==========================================================================
   6 · CARDS & SURFACES — frosted glass, soft radii, gold on hover
   ========================================================================== */
.feature-card,
.why-card,
.campus-card,
.jpc-step,
.jpc-vmv-card,
.jpc-404-card,
.jpc-contact-card,
.jpc-results-stat,
.jpc-side-card,
.jpc-combo,
.jpc-form-card,
.jpc-checklist,
.blog-card,
.event-card {
    border-radius: var(--lux-radius) !important;
    border: 1px solid var(--hairline);
    background: #fff;
    box-shadow: var(--lux-shadow);
    transition: transform var(--lux-ease), box-shadow var(--lux-ease), border-color var(--lux-ease);
}

.feature-card:hover,
.why-card:hover,
.jpc-step:hover,
.jpc-vmv-card:hover,
.jpc-404-card:hover,
.jpc-contact-card:hover,
.jpc-side-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold-line);
    box-shadow: var(--lux-shadow-lg);
}

.jpc-vmv-card { border-top: 3px solid var(--gold); }
.jpc-combo { border-left: 3px solid var(--gold); }

/* Icon wells */
.box-icon,
.jpc-vmv-icon,
.jpc-contact-icon,
.jpc-step-icon {
    border-radius: 16px !important;
}

.jpc-vmv-icon {
    background: var(--gold-wash);
    color: var(--gold-deep);
}

.jpc-contact-icon,
.jpc-step-icon {
    background: var(--navy);
    color: var(--gold);
}

/* Imagery framing */
.img-box1 img,
.campus-img img,
.why-video-bg img,
.gallery-card img,
.blog-img img,
.global-img img {
    border-radius: var(--lux-radius);
}

.global-img,
.campus-img,
.blog-img { border-radius: var(--lux-radius); overflow: hidden; }

/* ==========================================================================
   7 · DARK LUXE SECTIONS
   ========================================================================== */
.bg-title,
.jpc-hof,
.jpc-enquiry-band,
.apply-stadum-area {
    background: var(--navy) !important;
}

.jpc-hof::before,
.jpc-enquiry-band::before { background: rgba(253, 185, 46, .07) !important; }

.jpc-topper-card {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--navy-line);
    border-radius: var(--lux-radius);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.jpc-topper-card:hover {
    border-color: var(--gold);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .34);
}

.jpc-topper-avatar {
    border-color: var(--gold);
    background: var(--gold-wash);
    color: var(--gold);
}

.jpc-topper-stream {
    background: var(--gold-wash);
    color: var(--gold);
}

.jpc-topper-score { color: var(--gold); }

.jpc-chair-inner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-raise) 100%) !important;
    border-radius: var(--lux-radius);
    border: 1px solid var(--navy-line);
}

.jpc-chair-avatar { border-color: var(--gold); background: var(--gold-wash); color: var(--gold); }
.jpc-bar-fill { background: var(--gold) !important; }

/* ==========================================================================
   8 · TRUST STRIP — minimal, gold-ruled
   ========================================================================== */
.jpc-trust-bar {
    border-radius: var(--lux-radius);
    border: 1px solid var(--hairline);
    box-shadow: var(--lux-shadow);
}

.jpc-trust-item { border-right-color: var(--hairline); }

.jpc-trust-num {
    font-family: var(--display-font);
    font-size: 46px;
    font-weight: 600;
    color: var(--gold-deep);
}

.jpc-trust-label { font-size: 14px; letter-spacing: .01em; }

.jpc-trust-strip {
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.jpc-glance {
    border-radius: var(--lux-radius);
    border: 1px solid var(--hairline);
    box-shadow: var(--lux-shadow);
}

.jpc-glance-item { border-right-color: var(--hairline); }
.jpc-glance-label { letter-spacing: .18em; color: var(--gold-deep); }

/* ==========================================================================
   9 · FORMS
   ========================================================================== */
.jpc-form .form-control,
.jpc-form .form-select,
.form-control,
.form-select {
    border-radius: 12px !important;
    border-color: var(--hairline);
    letter-spacing: .01em;
}

.jpc-form .form-control:focus,
.jpc-form .form-select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--gold-wash) !important;
}

.jpc-form .jpc-consent input { accent-color: var(--gold-deep); }
.jpc-form .jpc-micro i { color: var(--gold-deep); }

/* ==========================================================================
   10 · TABS, TABLES, LISTS
   ========================================================================== */
.jpc-tab.is-active { color: var(--ink); }
.jpc-tab.is-active::after { background: var(--gold); }

.jpc-table thead th {
    background: var(--navy);
    border-color: var(--navy);
    letter-spacing: .04em;
    font-weight: 600;
}

.jpc-table tbody th { background: var(--slate); }
.jpc-table tbody tr:nth-child(even) td { background: rgba(241, 245, 249, .55); }

.jpc-note {
    background: var(--gold-wash);
    border-left: 3px solid var(--gold);
    border-radius: 0 12px 12px 0;
}

.jpc-check li::before {
    background: var(--gold-wash);
    color: var(--gold-deep);
}

.jpc-road-num {
    background: var(--gold);
    color: var(--navy);
    font-family: var(--display-font);
}

.jpc-road-step::before { background: var(--gold-line); }
.jpc-flow-track::before { border-top-color: var(--gold-line); }
.jpc-flow { background: var(--slate); }
.jpc-apply { background: var(--slate); }

/* ==========================================================================
   11 · RIBBON — restrained, not a traffic cone
   ========================================================================== */
.jpc-ribbon {
    background: var(--navy-deep);
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
}

.jpc-ribbon p { color: rgba(255, 255, 255, .88); letter-spacing: .01em; }
.jpc-ribbon strong { color: var(--gold); font-weight: 600; }
.jpc-ribbon-dot { background: var(--gold); }
.jpc-ribbon-sep { color: var(--gold-line); }

.jpc-ribbon-cta {
    border-color: var(--gold-line);
    color: var(--gold);
    border-radius: 999px;
}

.jpc-ribbon-cta:hover { background: var(--gold); color: var(--navy); }
.jpc-ribbon-close { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   12 · FLOATING ELEMENTS — stacked, never over the headline
   ========================================================================== */

/* The rail must sit under the sticky header, not across it. */
.jpc-rail {
    z-index: 1040;
    background: var(--navy);
    border: 1px solid var(--gold-line);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    letter-spacing: .18em;
    font-size: 13px;
}

.jpc-rail:hover { background: var(--gold); color: var(--navy); }
.jpc-rail i { color: var(--gold); }
.jpc-rail:hover i { color: var(--navy); }

/* Appearance only — every bottom-right POSITION is set once, in section 22. */
.jpc-wa-float { box-shadow: 0 10px 26px rgba(37, 211, 102, .36); }

#admissionFloatBtn {
    border-radius: 999px !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    box-shadow: 0 10px 26px rgba(253, 185, 46, .38) !important;
}

/* The legacy social bubble: smaller, lower, navy — out of the headline. */
.float-sm { left: 22px !important; bottom: 26px !important; z-index: 1039 !important; }
.float-sm .main-btn {
    width: 52px !important;
    height: 52px !important;
    line-height: 56px !important;
    font-size: 21px !important;
    background: var(--navy) !important;
    border: 1px solid var(--gold-line);
}



/* ==========================================================================
   13 · BREADCRUMB — editorial page openers
   ========================================================================== */
.breadcumb-wrapper {
    background-color: var(--navy) !important;
    position: relative;
}

.breadcumb-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0, 19, 58, .92), rgba(0, 28, 84, .62));
    z-index: 0;
}

.breadcumb-wrapper > * { position: relative; z-index: 1; }

.breadcumb-title {
    font-size: clamp(34px, 3.6vw, 56px);
    color: #fff;
}

.breadcumb-menu li,
.breadcumb-menu li a { color: rgba(255, 255, 255, .78); }
.breadcumb-menu li a:hover { color: var(--gold); }

/* ==========================================================================
   14 · FOOTER
   ========================================================================== */
.footer-wrapper { background-color: var(--navy-deep) !important; }
.footer-wrapper .widget_title { font-family: var(--display-font); font-weight: 600; }
.footer-wrapper .widget_title::after { background: var(--gold) !important; }
.footer-wrapper a:hover { color: var(--gold) !important; }
.footer-wrapper .th-social a:hover { background: var(--gold) !important; color: var(--navy) !important; }
.copyright-wrap { border-top: 1px solid var(--navy-line); }

/* ==========================================================================
   15 · MOTION — one duration, and honoured preferences
   ========================================================================== */
a, button, .th-btn, .feature-card, .why-card, .jpc-step,
.jpc-vmv-card, .jpc-contact-card, .jpc-404-card, .jpc-topper-card {
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   16 · MOBILE POLISH
   ========================================================================== */
@media (max-width: 1199.98px) {
    .menu-wrapp { border-radius: 0; }
    .jpc-trust-wrap { margin-top: 40px; }
}

@media (max-width: 767.98px) {
    .sec-title, .jpc-flow-title, .jpc-hof-title { font-size: 30px !important; }
    .jpc-trust-num { font-size: 34px; }
    .sub-title, .jpc-eyebrow { letter-spacing: .16em; }
}

/* ==========================================================================
   17 · OVERFLOW GUARDS
   A single element wider than the viewport shifts the whole page sideways,
   which is what clipped the hero headline in review.
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }

.th-hero-wrapper,
.breadcumb-wrapper,
.jpc-hof,
.jpc-enquiry-band { overflow-x: clip; }

/* Fixed furniture must never contribute to document width. */
.jpc-rail,
.jpc-wa-float,
.jpc-dock,
.float-sm,
#admissionFloatBtn { will-change: transform; }

/* Decorative shapes are the usual culprits — keep them inside the frame. */
.shape-mockup { pointer-events: none; }

@media (max-width: 1399.98px) {
    .shape-mockup { display: none !important; }
}

/* ==========================================================================
   18 · SHORT-VIEWPORT HERO
   On a 768px-tall laptop the centred enquiry card was being clipped. Anchor
   it near the top and let it scroll internally rather than run off-screen.
   ========================================================================== */
@media (min-width: 1200px) and (max-height: 900px) {
    .jpc-hero-form {
        top: 112px;
        transform: none;
    }
    .jpc-hero-form .jpc-form-card {
        padding: 24px 24px 22px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }
    .jpc-hero-form .jpc-form-card h3 { font-size: 23px; }
    .jpc-hero-form .jpc-form-card .jpc-form-sub { margin-bottom: 16px; font-size: 14px; }
    .jpc-hero-form .jpc-field { margin-bottom: 10px; }
    .jpc-hero-form .form-control,
    .jpc-hero-form .form-select { height: 46px; }
    .hero-style1 { padding: 120px 0 104px; }
}

/* Keep the hero copy clear of the floating card on wide screens. */
@media (min-width: 1200px) {
    .hero-style1 .hero-text-wrap { max-width: 640px; }
}

/* ==========================================================================
   19 · SECTION RHYTHM — the generous white space the brief asks for
   ========================================================================== */
.space { padding-top: 120px; padding-bottom: 120px; }
.space-top { padding-top: 120px; }
.space-bottom { padding-bottom: 120px; }

@media (max-width: 991.98px) {
    .space { padding-top: 80px; padding-bottom: 80px; }
    .space-top { padding-top: 80px; }
    .space-bottom { padding-bottom: 80px; }
}

/* Section openers get room to breathe. */
.title-area { margin-bottom: 56px; }
.sec-title { margin-bottom: 18px; }

/* ==========================================================================
   20 · GOLD FOIL HOVER — the one flourish, used sparingly
   ========================================================================== */
.jpc-vmv-card,
.jpc-404-card,
.jpc-contact-card,
.jpc-step,
.feature-card { position: relative; overflow: hidden; }

.jpc-vmv-card::after,
.jpc-404-card::after,
.jpc-contact-card::after,
.jpc-step::after,
.feature-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lux-ease);
}

.jpc-vmv-card:hover::after,
.jpc-404-card:hover::after,
.jpc-contact-card:hover::after,
.jpc-step:hover::after,
.feature-card:hover::after { transform: scaleX(1); }

/* ==========================================================================
   21 · HEADER FIT
   The theme sizes the side-menu toggler at 72px and fills it with
   --theme-color, which under the brand palette became a yellow slab that
   overflowed the container. These rules make the row actually fit.
   ========================================================================== */

/* The toggler: a quiet outlined square, not a colour block. */
.header-layout1 .icon-btn,
.header-layout2 .icon-btn,
.header-button .icon-btn {
    --btn-size: 44px;
    width: 44px !important;
    height: 44px !important;
    line-height: 42px !important;
    flex: 0 0 auto;
    margin: 0 !important;
    background-color: transparent !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    transition: all var(--lux-ease);
}

.header-layout1 .icon-btn:hover,
.header-layout2 .icon-btn:hover,
.header-button .icon-btn:hover {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
}

.header-button .icon-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.header-button .icon-btn:hover img { filter: brightness(0) invert(1); }

/* Nothing in the header may push past the container. Note: .menu-wrapp must
   NOT get overflow:hidden — the nav dropdowns are absolutely positioned
   children and would be clipped. Fit is achieved by sizing instead. */
.menu-wrapp > .row { max-width: 100%; }
.menu-wrapp > .row > .col-auto { min-width: 0; }
.menu-wrapp > .row > .col-auto:last-child { flex: 0 0 auto; }
.header-left { min-width: 0; }
.header-button { flex-wrap: nowrap; flex: 0 0 auto; }

/* Reclaim width from the nav before anything is dropped. */
@media (max-width: 1699.98px) {
    .main-menu > ul > li { margin: 0 11px !important; }
}

@media (max-width: 1599.98px) {
    .main-menu > ul > li { margin: 0 9px !important; }
    .main-menu > ul > li > a { font-size: 15px; }
    .jpc-header-cta { gap: 10px; margin-right: 8px; }
}

/* Below this the phone block is the first thing to go — the number is still
   one tap away in the utility bar, the dock and the footer. */
@media (max-width: 1619.98px) {
    .jpc-header-phone { display: none; }
}

@media (max-width: 1379.98px) {
    .jpc-portal-trigger { display: none; }
    .header-button .icon-btn { display: none !important; }
}

/* Sticky state: keep the bar compact. */
.sticky-wrapper.sticky .menu-area { padding: 10px 0; }

/* ==========================================================================
   22 · BOTTOM-RIGHT STACK
   Four fixed elements were landing on each other: the theme's scroll-to-top
   (right:30px, bottom:55px, z-index:10000), the WhatsApp bubble, the
   admission pill and, on mobile, the action dock. They now sit in one
   column with consistent 14px gaps and a sane z-order.

   Desktop, from the floor up:
     scroll-top   26px  (50px tall)  -> occupies  26-76
     WhatsApp     90px  (60px tall)  -> occupies  90-150
     Admission   164px  (~48 tall)   -> occupies 164-212
   ========================================================================== */

.scroll-top {
    right: 26px !important;
    bottom: 26px !important;
    z-index: 9050 !important;     /* under the modals (9990), not over them */
}

.scroll-top svg {
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 28, 84, .16);
}

.scroll-top::after {
    color: var(--navy) !important;
    border-color: var(--gold) !important;
}

.scroll-top .progress-circle path { stroke: var(--gold) !important; }

.jpc-wa-float {
    right: 26px;
    bottom: 90px;
    z-index: 9060;
}

#admissionFloatBtn {
    right: 26px !important;
    bottom: 164px !important;
    z-index: 9060 !important;
}

/* The sticky Apply rail is vertically centred on the right edge, so it must
   not run into the stack on short screens. */
@media (max-height: 700px) {
    .jpc-rail { display: none !important; }
}

/* ---- Mobile ---------------------------------------------------------- */
/* The dock owns the bottom 56px and already carries Call and Enquire, so the
   admission pill is redundant there and is stood down. */
@media (max-width: 991.98px) {
    .jpc-wa-float {
        right: 16px;
        bottom: 72px;
        width: 54px;
        height: 54px;
        font-size: 27px;
    }

    .scroll-top {
        right: 16px !important;
        bottom: 138px !important;
        height: 44px !important;
        width: 44px !important;
    }

    .scroll-top::after,
    .scroll-top svg { height: 44px; width: 44px; line-height: 44px; }

    #admissionFloatBtn { display: none !important; }

    .float-sm { left: 16px !important; bottom: 72px !important; }
}

/* ==========================================================================
   23 · BUTTON HOVER — the label must survive the sliding panel
   The theme animates `.th-btn::before` from width:0 to 100% on hover, filled
   with var(--title-color). Under the brand palette that is navy, so a navy
   label became navy-on-navy and disappeared, leaving only the arrow.

   Resting:  yellow fill, navy label, navy arrow
   Hover:    navy panel slides across, label and arrow go white
   ========================================================================== */

.th-btn::before { background: var(--navy); }

.th-btn:hover,
.th-btn:focus-visible,
.th-btn.style-border1:hover,
.th-btn.style-border2:hover,
.th-btn.white-hover:hover {
    color: #fff !important;
}

/* The arrow is a masked shape tinted with background-color, not a glyph.
   !important is needed to beat the theme's .th-btn.white-hover.th-btn:after. */
.th-btn.th-icon::after,
.th-btn.th-icon:after { background-color: var(--navy) !important; }

.th-btn.th-icon:hover::after,
.th-btn.th-icon:hover:after { background-color: #fff !important; }

/* Outline buttons start transparent, so their arrow is navy at rest and the
   same navy panel carries it to white on hover. */
.th-btn.style-border1.th-icon:after,
.th-btn.style-border2.th-icon:after { background-color: var(--navy) !important; }

/* On dark grounds the outline button's resting arrow and label are white. */
.th-hero-wrapper .th-btn.style-border1,
.bg-title .th-btn.style-border1,
.jpc-hof .th-btn.style-border1 { color: #fff !important; }

.th-hero-wrapper .th-btn.style-border1.th-icon:after,
.bg-title .th-btn.style-border1.th-icon:after { background-color: #fff !important; }

/* The inline <img class="th-arrow"> used by some buttons needs the same
   treatment — invert it on hover so it reads against the navy panel. */
.th-btn .th-arrow { transition: filter var(--lux-ease); }
.th-btn:hover .th-arrow { filter: brightness(0) invert(1); }

/* Keep the lift, drop the yellow glow once the panel is navy. */
.th-btn:hover { box-shadow: 0 14px 32px rgba(0, 28, 84, .28); }

/* ==========================================================================
   24 · YELLOW NEVER CARRIES MEANING ON A LIGHT SURFACE
   #FDB92E on white is ~1.8:1. Anywhere yellow was doing the job of a colour
   a reader has to perceive on a pale ground, it becomes blue.
   ========================================================================== */

/* Contact icons in the white header-info strip. */
.header-info-icon i { color: var(--gold-deep) !important; }

/* Step links sit on white cards — the hover colour must be readable. */
.jpc-step-link:hover { color: var(--gold-deep) !important; }
.jpc-step-link:hover i { color: var(--gold-deep); }

/* Anything else that hovers to the accent on a pale ground. */
.jpc-tab:hover,
.jpc-side-dl:hover span { color: var(--gold-deep) !important; }

/* Yellow stays where it belongs: on navy, or as a surface under navy ink. */
.jpc-band-contact a:hover,
.footer-wrapper a:hover,
.header-top a:hover,
.breadcumb-menu li a:hover,
.hero-title span { color: var(--gold) !important; }