/* =============================================================
   INVEST GOLD GENERAL FINANCE (P) LIMITED
   Premium royal theme — gold + deep navy
   Sections:
     01. Tokens & themes      07. Investments
     02. Reset & base         08. Calculator
     03. Utilities/animation  09. Why choose us
     04. Header               10. Testimonials
     05. Hero                 11. App / News / FAQ / Enquiry
     06. Products             12. Footer, FAB, responsive
   ============================================================= */

/* ---------- 01. TOKENS & THEMES ---------- */
:root {
    /* brand golds (constant across themes) */
    --gold-100: #fbf3d2;
    --gold-200: #f2dfa0;
    --gold-300: #e7c766;
    --gold-400: #d4af37;
    --gold-500: #c9a227;
    --gold-600: #a87f16;
    --gold-700: #7c5d0c;

    --navy-900: #070c1f;
    --navy-800: #0a0f2c;
    --navy-700: #0b1b3f;
    --navy-600: #12275a;

    --grad-gold: linear-gradient(
        135deg,
        var(--gold-200) 0%,
        var(--gold-400) 45%,
        var(--gold-600) 100%
    );
    --grad-gold-text: linear-gradient(
        100deg,
        var(--gold-200),
        var(--gold-400) 40%,
        var(--gold-100) 55%,
        var(--gold-500)
    );

    /* type */
    --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --font-body:
        "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* metrics */
    --container: 1240px;
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 26px;
    --topbar-h: 74px;
    --nav-h: 66px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.55s;
}

/* DARK (default) */
:root,
[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--navy-900);
    --bg-alt: #090f26;
    --bg-deep: #05091a;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.075);
    --surface-solid: #0d142e;
    --border: rgba(212, 175, 55, 0.2);
    --border-soft: rgba(255, 255, 255, 0.08);
    --text: #ecf1ff;
    --text-strong: #ffffff;
    --muted: #a3aecb;
    --gold-ink: var(--gold-300);
    --shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.85);
    --shadow-gold: 0 20px 50px -22px rgba(212, 175, 55, 0.55);
    --glow: radial-gradient(
        closest-side,
        rgba(212, 175, 55, 0.34),
        transparent 72%
    );
    --hero-wash:
        radial-gradient(
            1100px 620px at 78% 8%,
            rgba(212, 175, 55, 0.18),
            transparent 62%
        ),
        radial-gradient(
            900px 520px at 8% 92%,
            rgba(18, 39, 90, 0.85),
            transparent 65%
        );
    --sheen: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.16) 48%,
        transparent 58%
    );
    --card-top: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0)
    );
}

/* LIGHT */
[data-theme="light"] {
    color-scheme: light;
    --bg: #fcfaf5;
    --bg-alt: #f5f0e3;
    --bg-deep: #efe8d6;
    --surface: rgba(255, 255, 255, 0.78);
    --surface-2: #ffffff;
    --surface-solid: #ffffff;
    --border: rgba(168, 127, 22, 0.26);
    --border-soft: rgba(11, 27, 63, 0.1);
    --text: #16203f;
    --text-strong: var(--navy-800);
    --muted: #5a6486;
    --gold-ink: var(--gold-700);
    /* the dark theme's gold text gradient peaks at near-white gold-100/200,
       which vanishes on the cream backgrounds; keep the shimmer but run it
       through the deeper golds so headings stay readable */
    --grad-gold-text: linear-gradient(
        100deg,
        var(--gold-700),
        var(--gold-500) 40%,
        var(--gold-400) 55%,
        var(--gold-700)
    );
    --shadow: 0 22px 50px -26px rgba(11, 27, 63, 0.38);
    --shadow-gold: 0 20px 46px -24px rgba(168, 127, 22, 0.45);
    --glow: radial-gradient(
        closest-side,
        rgba(212, 175, 55, 0.28),
        transparent 72%
    );
    --hero-wash:
        radial-gradient(
            1100px 620px at 78% 6%,
            rgba(212, 175, 55, 0.22),
            transparent 62%
        ),
        radial-gradient(
            900px 520px at 6% 92%,
            rgba(255, 255, 255, 0.9),
            transparent 60%
        );
    --sheen: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.75) 48%,
        transparent 58%
    );
    --card-top: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0)
    );
}

/* ---------- 02. RESET & BASE ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 18px);
    -webkit-text-size-adjust: 100%;
    /* keep the viewport still when in-page panels (e.g. the calculator) change
       height — don't let the browser scroll-anchor and shift what you're looking at */
    overflow-anchor: none;
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.68;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition:
        background-color 0.4s var(--ease),
        color 0.4s var(--ease);
}
img,
svg,
video {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}
button {
    background: none;
    border: 0;
    cursor: pointer;
}
:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 3px;
    border-radius: 6px;
}
::selection {
    background: var(--gold-400);
    color: var(--navy-900);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    color: var(--text-strong);
    letter-spacing: 0.2px;
}
h1 {
    font-size: clamp(2.35rem, 5.4vw, 4.15rem);
}
h2 {
    font-size: clamp(1.95rem, 3.9vw, 3rem);
}
h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}
p {
    color: var(--muted);
}

.container {
    width: min(100% - 2.6rem, var(--container));
    margin-inline: auto;
}
.section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    position: relative;
}
.section--alt {
    background: var(--bg-alt);
}
.section--deep {
    background: var(--bg-deep);
}

/* ---------- 03. UTILITIES, TEXT FX, ANIMATION ---------- */
.gold-text {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 220% 100%;
    animation: shimmerText 6s linear infinite;
}
@keyframes shimmerText {
    to {
        background-position: -220% 0;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-ink);
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.eyebrow::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--grad-gold);
}

.section-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(2.6rem, 5vw, 4rem);
}
.section-head p {
    margin-top: 1rem;
    font-size: 1.03rem;
}
.section-head h2 {
    margin-top: 1.1rem;
}

.divider {
    width: 132px;
    height: 14px;
    margin: 1.1rem auto 0;
    opacity: 0.95;
}
.divider svg {
    width: 100%;
    height: 100%;
}

/* buttons */
.btn {
    --btn-pad: 0.92rem 1.9rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--btn-pad);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition:
        transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        border-color 0.3s var(--ease),
        color 0.3s var(--ease);
}
.btn::after {
    /* gold shimmer sweep */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sheen);
    transform: translateX(-120%);
    transition: transform 0.8s var(--ease);
}
.btn:hover::after {
    transform: translateX(120%);
}
.btn:hover {
    transform: translateY(-3px);
}
.btn:active {
    transform: translateY(-1px);
}

.btn--gold {
    background: var(--grad-gold);
    color: var(--navy-900);
    box-shadow: var(--shadow-gold);
}
.btn--gold:hover {
    box-shadow: 0 26px 60px -20px rgba(212, 175, 55, 0.7);
}
.btn--ghost {
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
}
.btn--ghost:hover {
    border-color: var(--gold-400);
    color: var(--gold-ink);
}
.btn--sm {
    --btn-pad: 0.62rem 1.25rem;
    font-size: 0.82rem;
}
.btn--block {
    width: 100%;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--gold-ink);
}
.link-arrow svg {
    transition: transform 0.35s var(--ease);
}
.link-arrow:hover svg {
    transform: translateX(5px);
}

/* scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal="left"] {
    transform: translateX(-34px);
}
[data-reveal="right"] {
    transform: translateX(34px);
}
[data-reveal="zoom"] {
    transform: scale(0.94);
}

/* generic gold card */
.card {
    position: relative;
    padding: 1.9rem 1.7rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.45s var(--ease),
        border-color 0.45s var(--ease),
        box-shadow 0.45s var(--ease),
        background-color 0.45s var(--ease);
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-top);
    opacity: 0.8;
    z-index: -1;
}
.card::after {
    /* hover glow follows pointer */
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(
        360px circle at var(--mx, 50%) var(--my, 0%),
        rgba(212, 175, 55, 0.2),
        transparent 62%
    );
    transition: opacity 0.45s var(--ease);
}

.card:hover::after {
    opacity: 1;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(
        150deg,
        rgba(212, 175, 55, 0.22),
        rgba(212, 175, 55, 0.04)
    );
    border: 1px solid var(--border);
    color: var(--gold-ink);
    margin-bottom: 1.25rem;
    transition:
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease);
}
.card:hover .card-icon {
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: var(--shadow-gold);
}
.card-icon svg {
    width: 28px;
    height: 28px;
}

/* ---------- 04. HEADER ---------- */
.topbar {
    background: linear-gradient(
        90deg,
        var(--navy-800),
        var(--navy-700) 55%,
        var(--navy-800)
    );
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    color: #eaf0ff;
    position: relative;
    z-index: 60;
}
.topbar__inner {
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
}
.brand {
    display: flex;
    align-items: center;
}
.brand__logo {
    width: auto;
    height: 42px;
    max-width: 100%;
    object-fit: contain;
}
.brand--footer .brand__logo {
    max-width: 240px;
}
.brand--footer .brand__logo {
    height: 92px;
}
.topbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.social {
    display: flex;
    gap: 0.38rem;
}
.social a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.28);
    color: var(--gold-300);
    transition:
        transform 0.35s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease);
}
.social a:hover {
    background: var(--grad-gold);
    color: var(--navy-900);
    transform: translateY(-3px) scale(1.06);
}
.social svg {
    width: 15px;
    height: 15px;
}
.topbar__sep {
    width: 1px;
    height: 22px;
    background: rgba(212, 175, 55, 0.25);
    margin-inline: 0.35rem;
}
.topbar__call {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #eaf0ff;
}
.topbar__call svg {
    width: 14px;
    height: 14px;
    color: var(--gold-300);
}

.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--gold-300);
    transition:
        transform 0.4s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease);
}
.theme-toggle:hover {
    background: var(--grad-gold);
    color: var(--navy-900);
    transform: rotate(35deg);
}
.theme-toggle svg {
    width: 17px;
    height: 17px;
}
.theme-toggle .i-moon {
    display: none;
}
[data-theme="light"] .theme-toggle .i-moon {
    display: block;
}
[data-theme="light"] .theme-toggle .i-sun {
    display: none;
}

.nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    transition:
        box-shadow 0.4s var(--ease),
        background-color 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.nav.is-stuck {
    box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.8);
    border-color: var(--border);
}
.nav__inner {
    min-height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.nav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
}
.nav__links a {
    position: relative;
    display: block;
    padding: 0.55rem 0.82rem;
    border-radius: 10px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text);
    transition:
        color 0.3s var(--ease),
        background 0.3s var(--ease);
}
.nav__links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: var(--grad-gold);
    transform: translateX(-50%);
    transition: width 0.35s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active {
    color: var(--gold-ink);
}
.nav__links a:hover::after,
.nav__links a.is-active::after {
    width: calc(100% - 1.6rem);
}
.nav__cta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.nav__burger {
    display: none;
    position: relative;
    z-index: 2; /* above the drawer while it slides open/closed */
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0; /* Safari gives buttons 1px 6px by default */
    border-radius: 12px;
    border: 1px solid var(--border);
    color: var(--gold-ink);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* the three bars are absolutely centred so the icon doesn't depend on button
   internals or margin collapsing — the X lands dead-centre on every browser */
.nav__burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    margin: -1px 0 0 -9px;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform 0.35s var(--ease),
        opacity 0.3s,
        visibility 0.3s;
}
.nav__burger span:nth-child(1) {
    transform: translateY(-6px);
}
.nav__burger span:nth-child(3) {
    transform: translateY(6px);
}
.nav.is-open .nav__burger span:nth-child(1) {
    transform: rotate(45deg);
}
/* iOS Safari ignores `opacity` on descendants of a backdrop-filter element
   (the nav bar), which left this bar visible as an asterisk — so collapse it
   with a transform and hide it outright as well */
.nav.is-open .nav__burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    visibility: hidden;
}
.nav.is-open .nav__burger span:nth-child(3) {
    transform: rotate(-45deg);
}

/* scroll progress */
.progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    z-index: 90;
    background: var(--grad-gold);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.8);
}

/* ---------- 05. HERO ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: var(--hero-wash); */
    pointer-events: none;
}
.hero::after {
    /* royal pillar grid */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    /* background-image: linear-gradient(
        90deg,
        var(--border-soft) 1px,
        transparent 1px
    ); */
    /* background-size: 88px 100%; */
    /* mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 92%);
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent,
        #000 30%,
        transparent 92%
    ); */
}
.hero__video-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(7, 12, 31, 0.7) 0%,
            rgba(7, 12, 31, 0.48) 45%,
            rgba(7, 12, 31, 0.88) 100%
        ),
        linear-gradient(
            90deg,
            rgba(7, 12, 31, 0.92) 0%,
            rgba(7, 12, 31, 0.38) 60%,
            rgba(7, 12, 31, 0.12) 100%
        );
}
.hero {
    background-color: #070c1f;
}
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero::before,
.hero::after {
    z-index: 1;
}
.hero__inner {
    position: relative;
    z-index: 2;
}

/* Keep hero copy readable on the video in either colour theme */
.hero .eyebrow,
.hero h1,
.hero .hero__lead {
    color: #fff;
}
/* the hero always sits on the dark video, whatever the theme — so its pill,
   ghost button and gold highlight keep their dark-surface treatment instead
   of following the light theme's white surfaces / deep-gold text gradient */
.hero .eyebrow {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
}
.hero .btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}
.hero .btn--ghost:hover {
    color: var(--gold-200);
    border-color: var(--gold-400);
}
.hero .gold-text {
    background-image: linear-gradient(
        100deg,
        var(--gold-200),
        var(--gold-400) 40%,
        var(--gold-100) 55%,
        var(--gold-500)
    );
}
.hero .badge {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}
.hero .badge b,
.hero .badge span {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }
}

/* Hide the homepage hero mascot medallion + orbiting product links; the
   background video is the visual now. !important + late position so it beats
   the design's own `.hero__visual { display:grid }` block further down and the
   responsive `@media` rules. */
.hero__visual {
    display: none !important;
}
.hero .hero__inner {
    grid-template-columns: 1fr;
}
.hero .hero__copy {
    max-width: 46rem;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.hero h1 {
    margin: 1.3rem 0 1.15rem;
}
.hero__lead {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    max-width: 56ch;
}
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.1rem;
}

.hero__badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-top: 2.8rem;
}
.badge {
    padding: 1.05rem 1rem;
    border-radius: 16px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 0.45s var(--ease),
        border-color 0.45s var(--ease),
        box-shadow 0.45s var(--ease);
}

.badge svg {
    width: 22px;
    height: 22px;
    margin: 0 auto 0.5rem;
    color: var(--gold-ink);
}
.badge span {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    display: block;
}
.badge b,
.badge b span {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text-strong);
    line-height: 1;
}

/* hero mascot medallion */
.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 540px;
}
.medallion {
    position: relative;
    width: min(100%, 470px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    isolation: isolate;
    background: radial-gradient(
        circle at 50% 32%,
        #16255a 0%,
        var(--navy-700) 42%,
        var(--navy-900) 100%
    );
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow:
        0 40px 90px -40px rgba(0, 0, 0, 0.9),
        inset 0 0 70px rgba(212, 175, 55, 0.12);
    animation: floaty 6.5s var(--ease) infinite;
}
@keyframes floaty {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

.medallion::before {
    /* rotating gold aura */
    content: "";
    position: absolute;
    inset: -14%;
    z-index: -2;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0 12%,
        rgba(212, 175, 55, 0.55) 22%,
        transparent 34%,
        transparent 50% 62%,
        rgba(212, 175, 55, 0.4) 72%,
        transparent 84%
    );
    filter: blur(22px);
    opacity: 0.85;
    animation: spin 16s linear infinite;
}
.medallion::after {
    /* inner ring */
    content: "";
    position: absolute;
    inset: 4.5%;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.38);
    animation: spin 40s linear infinite reverse;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.medallion__frame {
    position: relative;
    width: 91%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--navy-700);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}
.medallion__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
    /* the 1.3s loop — royal idle "breath" applied to the supplied mascot artwork */
    animation: mascotIdle 1.3s ease-in-out infinite;
    transform-origin: 50% 88%;
}
@keyframes mascotIdle {
    0% {
        transform: translateY(0) scale(1);
    }
    35% {
        transform: translateY(-6px) scale(1.012);
    }
    60% {
        transform: translateY(-3px) scale(1.006) rotate(0.4deg);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}
.medallion__shine {
    /* 1.3s gold shimmer sweep across the medallion */
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden;
}
.medallion__shine::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 60%;
    height: 220%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: rotate(22deg);
    animation: shineSweep 1.3s linear infinite;
}
@keyframes shineSweep {
    0% {
        transform: translate(-40%, 0) rotate(22deg);
    }
    100% {
        transform: translate(360%, 0) rotate(22deg);
    }
}

.crown-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.crown-orbit i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-gold);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.9);
    animation: orbitPulse 2.6s ease-in-out infinite;
}
.crown-orbit i:nth-child(1) {
    top: 6%;
    left: 50%;
}
.crown-orbit i:nth-child(2) {
    top: 30%;
    right: 3%;
    animation-delay: 0.4s;
}
.crown-orbit i:nth-child(3) {
    bottom: 12%;
    right: 16%;
    animation-delay: 0.8s;
}
.crown-orbit i:nth-child(4) {
    bottom: 6%;
    left: 34%;
    animation-delay: 1.2s;
}
.crown-orbit i:nth-child(5) {
    top: 34%;
    left: 2%;
    animation-delay: 1.6s;
}
@keyframes orbitPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.7);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

/* ---- hero orbit: product badges circling the mascot (poster layout) ---- */
.orbit {
    position: relative;
    width: min(100%, 540px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.orbit .medallion {
    width: 58%;
    animation-duration: 7s;
}

/* glowing connector ring the badges sit on */
.orbit__web {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.orbit__ring-solid {
    opacity: 0.55;
}
.orbit__ring-dash {
    opacity: 0.9;
    transform-origin: 50% 50%;
    animation: spin 38s linear infinite;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.7));
}

.orbit__items {
    position: absolute;
    inset: 0;
}
.orbit__item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: block;
    /* floats on the independent 'translate' property so it composes with the
     centring transform above and with the disc's hover transform below */
    animation: orbitFloat var(--float-dur) var(--ease) var(--float-delay)
        infinite;
}
/* every badge on its own clock — different durations, not just offsets */
.orbit__item:nth-child(1) {
    --float-dur: 5.2s;
    --float-delay: 0s;
}
.orbit__item:nth-child(2) {
    --float-dur: 6.7s;
    --float-delay: -1.4s;
}
.orbit__item:nth-child(3) {
    --float-dur: 7.9s;
    --float-delay: -3.1s;
}
.orbit__item:nth-child(4) {
    --float-dur: 6.1s;
    --float-delay: -2.2s;
}
@keyframes orbitFloat {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -13px;
    }
}
/* the crown catches the light on its own cycle too */
.orbit__item:nth-child(1) .orbit__crown {
    animation: crownGlint 4.3s ease-in-out infinite;
}
.orbit__item:nth-child(2) .orbit__crown {
    animation: crownGlint 5.6s ease-in-out -1.9s infinite;
}
.orbit__item:nth-child(3) .orbit__crown {
    animation: crownGlint 3.7s ease-in-out -2.6s infinite;
}
.orbit__item:nth-child(4) .orbit__crown {
    animation: crownGlint 6.2s ease-in-out -0.8s infinite;
}
@keyframes crownGlint {
    0%,
    100% {
        opacity: 0.75;
        filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 9px rgba(212, 175, 55, 0.95));
    }
}

.orbit__disc {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(
        circle at 50% 28%,
        #16255a,
        var(--navy-900) 78%
    );
    border: 1px solid rgba(212, 175, 55, 0.55);
    color: var(--gold-300);
    box-shadow:
        0 0 0 5px rgba(212, 175, 55, 0.07),
        0 18px 38px -16px rgba(0, 0, 0, 0.85),
        inset 0 0 22px rgba(212, 175, 55, 0.2);
    transition:
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease),
        border-color 0.45s var(--ease);
}
.orbit__disc svg {
    width: 28px;
    height: 28px;
}
.orbit__item:hover .orbit__disc,
.orbit__item:focus-visible .orbit__disc {
    transform: translateY(-6px) scale(1.07);
    border-color: var(--gold-300);
    box-shadow:
        0 0 0 5px rgba(212, 175, 55, 0.16),
        0 0 34px rgba(212, 175, 55, 0.6),
        inset 0 0 26px rgba(212, 175, 55, 0.32);
}

.orbit__label {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    color: var(--gold-300);
    background: rgba(7, 12, 31, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        color 0.35s var(--ease),
        border-color 0.35s var(--ease),
        background 0.35s var(--ease);
}
.orbit__item:hover .orbit__label {
    color: var(--navy-900);
    background: var(--grad-gold);
    border-color: transparent;
}
.orbit__crown {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    color: var(--gold-400);
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.8));
}
.orbit__item:hover .orbit__crown {
    color: var(--gold-200);
}

@media (max-width: 1240px) {
    .orbit__disc {
        width: 74px;
        height: 74px;
    }
    .orbit__disc svg {
        width: 24px;
        height: 24px;
    }
    .orbit__label {
        font-size: 0.6rem;
        padding: 0.28rem 0.7rem;
        margin-top: 0.85rem;
    }
}
@media (max-width: 1024px) {
    .orbit {
        width: min(100%, 470px);
    }
}
/* below this the ring gets too tight — badges become a row under the mascot */
@media (max-width: 720px) {
    .orbit {
        width: 100%;
        aspect-ratio: auto;
    }
    .orbit .medallion {
        width: min(100%, 300px);
    }
    .orbit__web {
        display: none;
    }
    .orbit__items {
        position: static;
        margin-top: 1.8rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
    .orbit__item {
        position: static;
        transform: none;
        display: grid;
        justify-items: center;
    }
    .orbit__disc {
        width: 60px;
        height: 60px;
    }
    .orbit__disc svg {
        width: 20px;
        height: 20px;
    }
    .orbit__label {
        position: static;
        transform: none;
        margin-top: 0.7rem;
        font-size: 0.55rem;
        letter-spacing: 0.08em;
        padding: 0.26rem 0.5rem;
        white-space: normal;
    }
    .orbit__crown {
        width: 12px;
        height: 12px;
        top: -7px;
    }
}
@media (max-width: 400px) {
    .orbit__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.5rem;
    }
}

/* page-load entry */
/* opacity only: a transform here would break position:fixed on the floating assistant */
.preload-fade {
    animation: bodyIn 1.1s var(--ease) both;
}
@keyframes bodyIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pageIn {
    from {
        opacity: 0;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* marquee trust strip */
.marquee {
    border-block: 1px solid var(--border-soft);
    background: var(--surface);
    overflow: hidden;
    padding: 0.9rem 0;
}
.marquee__track {
    display: flex;
    gap: 3.2rem;
    width: max-content;
    animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track {
    animation-play-state: paused;
}
.marquee span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.marquee span::before {
    content: "◆";
    color: var(--gold-400);
    font-size: 0.6rem;
}
@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- 06. PRODUCTS ---------- */
.grid {
    display: grid;
    gap: 1.4rem;
}
.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.product h3 {
    margin-bottom: 0.35rem;
}
.product__sub {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--gold-ink);
    margin-bottom: 0.7rem;
    letter-spacing: 0.01em;
}
.product p {
    font-size: 0.92rem;
    margin-bottom: 1.3rem;
}
.product .link-arrow {
    margin-top: auto;
}
.product {
    display: flex;
    flex-direction: column;
}
.product::before {
    z-index: -1;
    /* ornament sits above the card-top wash, inside the existing layer */
    background:
        url("../img/card_bg.png") right top / 135px auto no-repeat,
        var(--card-top);
}
.ribbon {
    position: absolute;
    top: 1.1rem;
    right: -2.4rem;
    transform: rotate(38deg);
    background: var(--grad-gold);
    color: var(--navy-900);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 2.6rem;
    box-shadow: var(--shadow-gold);
}

/* ---------- 07. INVESTMENTS ---------- */
.invest {
    padding: 2.1rem 1.9rem;
}
.invest__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.invest__tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-ink);
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.invest h3 {
    margin-bottom: 0.6rem;
}
.invest p {
    font-size: 0.92rem;
}
.invest__list {
    list-style: none;
    padding: 0;
    margin: 1.3rem 0 1.6rem;
    display: grid;
    gap: 0.6rem;
}
.invest__list li {
    display: flex;
    gap: 0.6rem;
    font-size: 0.87rem;
    color: var(--muted);
}
.invest__list svg {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 0.32rem;
    color: var(--gold-400);
}
.invest--feature {
    background: linear-gradient(
        165deg,
        rgba(212, 175, 55, 0.16),
        var(--surface) 55%
    );
    border-color: var(--border);
}

/* ---------- 08. CALCULATOR ---------- */
.calc {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: clamp(1.6rem, 3.5vw, 3rem);
    align-items: center;
}
.calc__mascot {
    position: relative;
    display: grid;
    place-items: center;
}
.calc__mascot img {
    width: min(100%, 340px);
    aspect-ratio: 1 / 1; /* fixed portrait frame */
    height: auto;
    object-fit: cover; /* crop the wide navy edges — never distort the mascot */
    object-position: 50% 44%;
    justify-self: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: var(--navy-700);
    animation: floaty 7s var(--ease) infinite;
}
.bubble {
    position: relative;
    margin-bottom: 1.1rem;
    max-width: 330px;
    padding: 1rem 1.25rem;
    border-radius: 20px 20px 20px 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.bubble::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -9px;
    width: 16px;
    height: 16px;
    background: inherit;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
}
.bubble em {
    font-style: normal;
    color: var(--gold-ink);
}

.calc__panel {
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
}
.switch {
    --switch-gap: 0.6rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--switch-gap);
    margin-bottom: 1.8rem;
}
.switch__thumb {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(50% - var(--switch-gap) / 2);
    border-radius: 999px;
    background: var(--grad-gold);
    /* tight edge only — a wide glow made the active pill look bigger than the inactive one */
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55);
    transition: transform 0.45s var(--ease);
}
.switch[data-mode="cash"] .switch__thumb {
    transform: translateX(calc(100% + var(--switch-gap)));
}
.switch button {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 0; /* let the 1fr column shrink below the label's width */
    padding: 0.7rem 1rem;
    border-radius: 999px;
    /* each tab is its own pill; the gold thumb slides behind the selected one */
    background: var(--bg-deep);
    border: 1px solid var(--border);
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: var(--muted);
    /* labels wrap onto a second line when the pill is too narrow — balanced
       so both tabs break the same way ("Calculate by / Gold Weight") rather
       than one staying on a single line while the other wraps */
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    transition: color 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (max-width: 560px) {
    .switch {
        --switch-gap: 0.5rem;
    }
    .switch button {
        padding: 0.6rem 0.65rem;
        font-size: 0.82rem;
    }
}
/* very narrow phones: the labels would need three lines side by side, so
   stack the two tabs and let the gold thumb slide vertically instead */
@media (max-width: 360px) {
    .switch {
        grid-template-columns: 1fr;
    }
    .switch__thumb {
        inset: 0 0 auto 0;
        width: auto;
        height: calc(50% - var(--switch-gap) / 2);
    }
    .switch[data-mode="cash"] .switch__thumb {
        transform: translateY(calc(100% + var(--switch-gap)));
    }
}
.switch button[aria-selected="true"] {
    color: var(--navy-900);
    background: transparent;
    border-color: transparent;
}

.field {
    margin-bottom: 1.15rem;
}
.field label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.field label b {
    margin-left: auto; /* keep the value right-aligned even if the label wraps */
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gold-ink);
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
}
.input,
.select,
.textarea {
    width: 100%;
    padding: 0.85rem 1.05rem;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--text);
    transition:
        border-color 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}
.textarea {
    min-height: 128px;
    resize: vertical;
}
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 2.6rem;
}

/* Native option list: the field itself is translucent, so force a solid
   backing + readable text or the menu is white-on-white in dark mode. */
.select option,
.select optgroup {
    background-color: var(--surface-solid);
    color: var(--text);
}
.select optgroup {
    font-weight: 700;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--gold-400) var(--fill, 40%),
        var(--border-soft) var(--fill, 40%)
    );
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-gold);
    border: 2px solid var(--surface-solid);
    box-shadow: var(--shadow-gold);
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid var(--surface-solid);
    border-radius: 50%;
    background: var(--gold-400);
    cursor: pointer;
}

.calc__result {
    margin-top: 1.6rem;
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius);
    background: linear-gradient(
        150deg,
        rgba(212, 175, 55, 0.18),
        transparent 70%
    );
    border: 1px solid var(--border);
}
.calc__result small {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
}
.calc__amount {
    font-family: var(--font-body);
    font-size: clamp(1.6rem, 4.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--text-strong);
    line-height: 1.15;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}
.calc__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 1.2rem;
}
.calc__meta div {
    min-width: 0; /* let the 3 columns shrink so long ₹ values wrap instead of overflowing */
    padding: 0.7rem 0.55rem;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    text-align: center;
}
.calc__meta b {
    display: block;
    font-size: clamp(0.82rem, 2.6vw, 1rem);
    line-height: 1.3;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gold-ink);
    overflow-wrap: anywhere;
}
.calc__meta span {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    overflow-wrap: anywhere;
}
/* disclaimers read at the same size as body paragraphs (1rem / body line-height) */
.disclaimer {
    font-size: 1rem;
    color: var(--muted);
    margin-top: 1rem;
    line-height: inherit;
}

/* ---------- 09. WHY CHOOSE US ---------- */
.why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    counter-reset: why;
}
.why .card {
    counter-increment: why;
    padding-top: 2.6rem;
}
.why__num {
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.4);
    opacity: 0.8;
}
.why h3 {
    font-size: 1.16rem;
    margin-bottom: 0.55rem;
}
.why p {
    font-size: 0.88rem;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.2rem;
    margin-top: 3rem;
}
.stat {
    text-align: center;
    padding: 2.1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}
.stat b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4.8vw, 3.8rem);
    line-height: 1.05;
    margin-bottom: 0.45rem;
}
.stat b span[data-count] {
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.stat > span {
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- 10. TESTIMONIALS ---------- */
/* Gold-line artwork sits over the deep base so the edges stay on-palette
   wherever "cover" crops the image. */
#testimonials {
    background:
        url(../img/trusted_bg.png) center / cover no-repeat,
        var(--bg-deep);
}
/* The artwork is dark, so on the light theme it is washed back to a faint
   texture — otherwise the dark body copy would sit on a near-black panel. */
[data-theme="light"] #testimonials {
    background:
        linear-gradient(rgba(239, 232, 214, 0.94), rgba(239, 232, 214, 0.94)),
        url(../img/trusted_bg.png) center / cover no-repeat,
        var(--bg-deep);
}
.tcar {
    position: relative;
}
.tcar__viewport .owl-stage-outer {
    padding: 3.2rem 0 1rem;
}
/* equal-height cards */
.tcar__viewport .owl-stage {
    display: flex;
    align-items: stretch;
}
.tcar__viewport .owl-item {
    display: flex;
}
.tslide {
    width: 100%;
    padding: 0 0.9rem;
    transition:
        transform 0.7s var(--ease),
        opacity 0.7s var(--ease),
        filter 0.7s var(--ease);
    transform: scale(0.86);
    opacity: 0.5;
}
.owl-item.center .tslide {
    transform: scale(1);
    opacity: 1;
}
.tslide__card {
    position: relative;
    height: 100%;
    padding: 3.4rem 1.7rem 1.9rem;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.owl-item.center .tslide__card {
    border-color: var(--border);
    box-shadow: var(--shadow-gold);
    background: linear-gradient(
        170deg,
        rgba(212, 175, 55, 0.12),
        var(--surface) 60%
    );
}
.tslide__avatar {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy-900);
    background: var(--grad-gold);
    border: 3px solid var(--surface-solid);
    box-shadow: var(--shadow-gold);
}
.tslide q {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
    font-style: italic;
    line-height: 1.75;
    quotes: "“" "”";
}
.tslide__name {
    margin-top: 1.1rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-strong);
}
.tslide__loc {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-ink);
}
.stars {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-bottom: 0.9rem;
    color: var(--gold-400);
}
.stars svg {
    width: 15px;
    height: 15px;
}

.tcar__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--gold-ink);
    box-shadow: var(--shadow);
    transition:
        transform 0.35s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease);
}
.tcar__nav:hover {
    background: var(--grad-gold);
    color: var(--navy-900);
    transform: translateY(-50%) scale(1.08);
}
.tcar__nav--prev {
    left: -6px;
}
.tcar__nav--next {
    right: -6px;
}
.tcar__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.6rem;
}
.tcar__dots.disabled {
    display: none;
}
.tcar__dots .owl-dot {
    cursor: pointer;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--border-soft);
    border: 1px solid var(--border);
    transition:
        width 0.4s var(--ease),
        background 0.4s var(--ease);
}
.tcar__dots .owl-dot.active {
    width: 30px;
    background: var(--grad-gold);
}

/* ---------- 11. APP / NEWS / FAQ / ENQUIRY ---------- */
.app {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2rem, 4vw, 3.6rem);
    align-items: center;
}
.app__list {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 2rem;
    display: grid;
    gap: 0.7rem;
}
.app__list li {
    display: flex;
    gap: 0.7rem;
    font-size: 0.93rem;
    color: var(--muted);
}
.app__list svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 0.34rem;
    color: var(--gold-400);
}
.store {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.store a {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.68rem 1.25rem;
    border-radius: 14px;
    background: var(--navy-800);
    border: 1px solid var(--border);
    color: #fff;
    transition:
        transform 0.35s var(--ease),
        box-shadow 0.35s var(--ease),
        border-color 0.35s var(--ease);
}
[data-theme="light"] .store a {
    background: var(--navy-800);
}
.store a:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
    border-color: var(--gold-400);
}
.store svg {
    width: 24px;
    height: 24px;
    color: var(--gold-300);
}
.store small {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.store b {
    font-size: 0.92rem;
    font-family: var(--font-display);
}

.phones {
    position: relative;
    height: clamp(400px, 46vw, 520px);
    display: grid;
    place-items: center;
}
.phones__stage {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
}
.phone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 216px;
    height: 440px;
    border-radius: 32px;
    background: linear-gradient(160deg, #1b2a55, var(--navy-800));
    border: 2px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    transition:
        transform 0.8s var(--ease),
        opacity 0.8s var(--ease),
        filter 0.8s var(--ease);
    will-change: transform;
}
.phone::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 3;
}
.phone svg {
    width: 100%;
    height: 100%;
}
.phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.phone[data-pos="0"] {
    transform: translate(-50%, -50%) translateX(0) scale(1) rotateY(0deg);
    z-index: 5;
    opacity: 1;
}
.phone[data-pos="1"] {
    transform: translate(-50%, -50%) translateX(60%) scale(0.86) rotateY(-16deg);
    z-index: 4;
    opacity: 0.78;
    filter: brightness(0.78);
}
.phone[data-pos="-1"] {
    transform: translate(-50%, -50%) translateX(-60%) scale(0.86) rotateY(16deg);
    z-index: 4;
    opacity: 0.78;
    filter: brightness(0.78);
}
.phone[data-pos="2"] {
    transform: translate(-50%, -50%) translateX(108%) scale(0.72)
        rotateY(-22deg);
    z-index: 3;
    opacity: 0.42;
    filter: brightness(0.6);
}
.phone[data-pos="-2"] {
    transform: translate(-50%, -50%) translateX(-108%) scale(0.72)
        rotateY(22deg);
    z-index: 3;
    opacity: 0.42;
    filter: brightness(0.6);
}
.phone[data-pos="hide"] {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    z-index: 1;
}

/* news */
.card.news {
    display: flex;
    flex-direction: column;
}
.card.news .link-arrow {
    margin-top: auto; /* keep "Learn More / Read Article" on the card foot so it lines up across a row */
    align-self: flex-start;
}
.news__media {
    position: relative;
    height: 190px;
    margin: -1.9rem -1.7rem 1.4rem;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.news__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
}
.news__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        120% 90% at 50% 0%,
        rgba(212, 175, 55, 0.35),
        transparent 60%
    );
}
.news__media svg {
    position: relative;
    width: 62px;
    height: 62px;
    color: var(--gold-300);
    opacity: 0.95;
}
.news__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.news__date {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(7, 12, 31, 0.72);
    color: var(--gold-300);
    border: 1px solid rgba(212, 175, 55, 0.4);
    backdrop-filter: blur(6px);
}
.news h3 {
    font-size: 1.18rem;
    margin-bottom: 0.5rem;
}
.news p {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

/* faq */
.faq {
    max-width: 880px;
    margin-inline: auto;
    display: grid;
    gap: 0.85rem;
}
.acc {
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition:
        border-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.acc.is-open {
    border-color: var(--border);
    box-shadow: var(--shadow);
}
.acc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
}
.acc__icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    color: var(--gold-ink);
    transition:
        transform 0.45s var(--ease),
        background 0.45s var(--ease),
        color 0.45s var(--ease);
}
.acc.is-open .acc__icon {
    background: var(--grad-gold);
    color: var(--navy-900);
    transform: rotate(135deg);
}
.acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease);
}
.acc.is-open .acc__panel {
    grid-template-rows: 1fr;
}
.acc__panel > div {
    overflow: hidden;
}
.acc__panel p {
    padding: 0 1.5rem 1.4rem;
    font-size: 0.93rem;
}

/* enquiry */
.enquiry {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: start;
}
.enquiry__form {
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-grid .field {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
/* Reserve the same label height whether or not the label carries a value
   chip (e.g. "Rate per gram  22K" vs plain "Purity"), so the controls beneath
   two side-by-side fields start on the same line. */
.form-grid .field label {
    min-height: 1.65rem;
}
/* When a slider shares a grid row with a taller control (a number input or a
   select), the grid cell stretches to the tall one's height. Centre the slider
   in that space so it lines up with the control beside it instead of floating
   at the top with dead space beneath. */
.form-grid .field > input[type="range"] {
    margin-block: auto;
}
.field--full {
    grid-column: 1 / -1;
}
.field .err {
    display: none;
    font-size: 0.74rem;
    color: #ff8a80;
    margin-top: 0.35rem;
    letter-spacing: normal;
    text-transform: none;
}
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
    border-color: #ff8a80;
}
.field.is-invalid .err {
    display: block;
}
.form-note {
    margin-top: 1rem;
    font-size: 0.78rem;
}
.form-ok {
    display: none;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.1rem;
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05));
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-400);
    font-size: 0.87rem;
    color: var(--text);
}
.form-ok.is-shown {
    display: flex;
    animation: pageIn 0.5s var(--ease);
}
.form-ok svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--gold-ink);
}

/* enquiry submit button: swap label <-> spinner while the request is in flight */
.btn__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn__loading {
    display: none;
    align-items: center;
    gap: 0.5rem;
}
.btn.is-loading .btn__label {
    display: none;
}
.btn.is-loading .btn__loading {
    display: inline-flex;
}
.btn__spinner {
    animation: spin 0.8s linear infinite;
}

.contact-card {
    display: grid;
    gap: 1rem;
}
.contact-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.contact-row:hover {
    transform: translateX(6px);
    border-color: var(--border);
}
.contact-row svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--gold-ink);
    margin-top: 0.3rem;
}
.contact-row b {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.contact-row span {
    font-size: 0.95rem;
    color: var(--text);
}

/* ---------- 12. FOOTER, FAB, MASCOT GUIDE ---------- */
.footer {
    position: relative;
    background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
    color: #dce4fa;
    padding-top: 4.5rem;
    overflow: hidden;
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--grad-gold);
}
.footer::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -180px;
    bottom: -320px;
    background: var(--glow);
    pointer-events: none;
}
.footer__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 2.4rem;
    padding-bottom: 3rem;
}
.footer h4 {
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 1.1rem;
}
.footer p,
.footer a,
.footer li {
    color: #a9b4d0;
    font-size: 0.9rem;
}
.footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.footer ul a {
    transition:
        color 0.3s var(--ease),
        padding-left 0.3s var(--ease);
}
.footer ul a:hover {
    color: var(--gold-300);
    padding-left: 6px;
}
.footer__bottom {
    position: relative;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    padding: 1.4rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #8e9ab8;
}
.footer .social a {
    border-color: rgba(212, 175, 55, 0.3);
}

/* floating mascot assistant — fixed in right bottom corner with full scroll animation */
.fab {
    position: fixed;
    right: -8px;
    bottom: 18px;
    z-index: 85;
    pointer-events: none;
}

.fab__btn {
    position: relative;
    width: 168px;
    height: 205px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transition:
        transform 0.35s var(--ease),
        filter 0.35s var(--ease);
    /* filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 16px rgba(212, 175, 55, 0.3)); */
}

.fab:hover .fab__btn,
.fab.is-open .fab__btn {
    transform: scale(1.05) translateY(-4px);
    /* filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 24px rgba(212, 175, 55, 0.55)); */
}

.fab__canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    mix-blend-mode: screen;
}

.fab__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
    pointer-events: none;
}

.fab__btn.has-canvas .fab__fallback {
    display: none;
}

.fab__panel {
    position: absolute;
    right: 14px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    pointer-events: none;
    z-index: 2; /* sit above the mascot button/canvas, not behind it */
}
.fab__btn {
    z-index: 1;
}
/* when open, grow the hover region so the pointer can travel from the mascot
   to any fanned-out icon without crossing "dead" space */
.fab.is-open .fab__panel {
    width: 260px;
    height: 315px;
    pointer-events: auto;
}

.fab__item {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--navy-900);
    background: var(--grad-gold);
    box-shadow: 0 12px 28px -10px rgba(212, 175, 55, 0.85);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    transition:
        transform 0.5s var(--ease),
        opacity 0.4s var(--ease);
}

.fab__item svg {
    width: 20px;
    height: 20px;
}

.fab__item::after {
    content: attr(data-label);
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--navy-800);
    color: var(--gold-300);
    border: 1px solid var(--border);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.fab__item:hover::after {
    opacity: 1;
}

.fab.is-open .fab__item {
    opacity: 1;
    pointer-events: auto;
}

/* icons fan out in a shallow arc well clear of the mascot's body, down its
   LEFT side (kept off the viewport's right edge) */
.fab.is-open .fab__item:nth-child(1) {
    transform: translate(-176px, -202px);
    transition-delay: 0.04s;
}

.fab.is-open .fab__item:nth-child(2) {
    transform: translate(-192px, -140px);
    transition-delay: 0.08s;
}

.fab.is-open .fab__item:nth-child(3) {
    transform: translate(-196px, -78px);
    transition-delay: 0.12s;
}

.fab.is-open .fab__item:nth-child(4) {
    transform: translate(-188px, -16px);
    transition-delay: 0.16s;
}

.fab.is-open .fab__item:nth-child(5) {
    transform: translate(-150px, -262px);
    transition-delay: 0.2s;
}

.fab__item--wa {
    background: linear-gradient(140deg, #4bd463, #1fa855);
    color: #fff;
}

/* ---------- side mascot (mid-right) — reveals social links ---------- */
.smascot {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 84;
    pointer-events: none;
}

.smascot__btn {
    position: relative;
    display: block;
    width: 70px;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gold-400);
    background: var(--navy-800);
    box-shadow: 0 18px 40px -14px rgba(212, 175, 55, 0.7);
    animation: floaty 4.5s var(--ease) infinite;
    transition: transform 0.45s var(--ease);
}

.smascot__btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.smascot:hover .smascot__btn,
.smascot.is-open .smascot__btn {
    transform: scale(1.06);
}

.smascot__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.smascot__item {
    position: absolute;
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--navy-900);
    background: var(--grad-gold);
    box-shadow: 0 12px 28px -10px rgba(212, 175, 55, 0.85);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    transition:
        transform 0.45s var(--ease),
        opacity 0.35s var(--ease);
}

.smascot__item svg {
    width: 19px;
    height: 19px;
}

.smascot.is-open .smascot__item {
    opacity: 1;
    pointer-events: auto;
    transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(1);
}

/* half circle around the mascot: top, through left, to bottom */
.smascot__item:nth-child(1) {
    --sx: 0px;
    --sy: -88px;
    transition-delay: 0.04s;
}

.smascot__item:nth-child(2) {
    --sx: -62px;
    --sy: -62px;
    transition-delay: 0.08s;
}

.smascot__item:nth-child(3) {
    --sx: -88px;
    --sy: 0px;
    transition-delay: 0.12s;
}

.smascot__item:nth-child(4) {
    --sx: -62px;
    --sy: 62px;
    transition-delay: 0.16s;
}

.smascot__item:nth-child(5) {
    --sx: 0px;
    --sy: 88px;
    transition-delay: 0.2s;
}

@media (max-width: 1024px) {
    .smascot {
        display: none;
    }
}

/* back to top */
.totop {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 70;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--gold-ink);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition:
        opacity 0.4s var(--ease),
        transform 0.4s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease);
}
.totop.is-shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.totop:hover {
    background: var(--grad-gold);
    color: var(--navy-900);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .why {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* mobile nav takes over below 991px */
@media (max-width: 991px) {
    .nav__links {
        display: none;
    }
    .nav__burger {
        display: block;
    }
    .nav__cta {
        width: 100%;
        justify-content: space-between;
    }
}
@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
    /* .hero__lead {
        margin-inline: auto;
    } */
    .hero__cta,
    .eyebrow {
        justify-content: start;
    }
    .hero__cta {
        justify-content: start;
    }
    .hero__visual {
        order: -1;
        min-height: 340px;
    }
    .calc,
    .app,
    .enquiry {
        grid-template-columns: 1fr;
        display: block;
    }
    /* `display: block` drops the grid gap, so restore the spacing between the
       stacked contact card and enquiry form */
    .enquiry > * + *,
    .calc > * + * {
        margin-top: clamp(1.6rem, 4vw, 2.4rem);
    }
    .calc__mascot {
        max-width: 420px;
        margin-inline: auto;
    }
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
    .hero__visual {
        display: none;
    }
    #why::before {
        right: -70px;
    }
    .section {
        overflow: hidden;
    }
}
/* tablets: touch target, so give the mascot button a little more room */
@media (min-width: 761px) and (max-width: 1024px) {
    .fab__btn {
        width: 186px;
        height: 227px;
    }
}
@media (max-width: 760px) {
    .topbar__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .brand__logo {
        height: 52px;
    }
    .brand--footer .brand__logo {
        height: 76px;
    }
    .topbar__call,
    .topbar__sep {
        display: none;
    }
    .hero__badges {
        grid-template-columns: 1fr;
    }
    .grid--4,
    .grid--3,
    .grid--2,
    .why,
    .stats,
    .form-grid,
    .calc__meta {
        grid-template-columns: 1fr;
    }
    /* "by the numbers" band: three equal columns on small tablets (minmax(0,…)
       stops the wide "10,000+" card from stealing width from its neighbours) */
    .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.8rem;
    }
    .stat {
        padding: 1.5rem 0.7rem;
    }
    .stat b {
        font-size: clamp(1.7rem, 4.6vw, 2.6rem);
    }
    .stat > span {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }
    /* stack the result stats on phones so long ₹ values stay on one line */
    .calc__meta {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .calc__meta div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: left;
        padding: 0.7rem 0.9rem;
    }
    .calc__meta b {
        font-size: 1rem;
        white-space: nowrap;
    }
    .calc__meta span {
        text-align: right;
    }
    .tslide {
        transform: scale(1);
        opacity: 1;
    }
    .tcar__nav--prev {
        left: -4px;
    }
    .tcar__nav--next {
        right: -4px;
    }
    .footer__grid {
        grid-template-columns: 1fr;
    }
    .fab {
        right: 2px;
        bottom: 16px;
    }
    /* keep the desktop 168:205 aspect so the mascot isn't squeezed into a square */
    .fab__btn {
        width: 104px;
        height: 127px;
    }
    .fab__item {
        width: 42px;
        height: 42px;
    }
    .fab__item svg {
        width: 18px;
        height: 18px;
    }
    .fab.is-open .fab__item:nth-child(1) {
        transform: translate(-98px, -150px);
    }
    .fab.is-open .fab__item:nth-child(2) {
        transform: translate(-114px, -100px);
    }
    .fab.is-open .fab__item:nth-child(3) {
        transform: translate(-118px, -50px);
    }
    .fab.is-open .fab__item:nth-child(4) {
        transform: translate(-110px, 0);
    }
    .fab.is-open .fab__item:nth-child(5) {
        transform: translate(-84px, -196px);
    }
    .totop {
        left: 10px;
        bottom: 18px;
        width: 34px;
        height: 34px;
    }
    .phone {
        width: 178px;
        height: 364px;
    }
    .news__media {
        margin: -1.9rem -1.7rem 1.2rem;
        height: 165px;
    }
}
/* phones: two equal stat columns; an odd last card spans the row instead of
   sitting orphaned on the left */
@media (max-width: 560px) {
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .stat b {
        font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    }
}

/* mobile nav drawer */
@media (max-width: 991px) {
    .nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        align-content: start;
        gap: 0.2rem;
        padding: 1rem 1.3rem 1.4rem;
        /* full-screen drawer: fill everything below the sticky nav so the page
           never shows through beneath the last item; the list scrolls inside.
           JS sets --drawer-h to the measured space (viewport minus the nav's
           bottom edge, which moves as the topbar scrolls away); the calc()
           is only the pre-JS fallback. */
        height: calc(100vh - var(--nav-h));
        height: var(--drawer-h, calc(100dvh - var(--nav-h)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: color-mix(in srgb, var(--bg) 96%, transparent);
        border-bottom: 1px solid var(--border);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition:
            opacity 0.35s var(--ease),
            transform 0.35s var(--ease),
            visibility 0.35s;
    }
    .nav.is-open .nav__links {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    /* page scroll is locked while the full-screen drawer is open (JS toggles
       this). Lock `html` ONLY — an overflow value on `body` as well would turn
       body into its own scroll container, and the sticky nav (with the drawer
       hanging off it) would then stick to body instead of the viewport, i.e.
       scroll away with the page. */
    html.nav-open {
        overflow: hidden;
    }
    /* body normally carries `overflow-x: hidden` (see the base body rule) —
       once html stops propagating, that would make body a scroll container
       and break the sticky nav, so lift it while the lock is on (html's
       overflow: hidden already clips horizontally). */
    html.nav-open body {
        overflow: visible;
    }
    .nav__links {
        overscroll-behavior: contain; /* scrolling the list never drags the page */
    }
    .nav__links a {
        padding: 0.8rem 0.6rem;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--border-soft);
        border-radius: 0;
    }
    .nav__links a::after {
        display: none;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* print */
@media print {
    .nav,
    .fab,
    .totop,
    .progress,
    .topbar {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
}

/* =============================================================
   13. INNER PAGES — shared components
   ============================================================= */

/* ---- nav dropdowns ---- */
.nav__links li {
    position: relative;
}
/* keep the label and its caret on one line — svg is display:block globally */
.nav__links .has-sub > a {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    white-space: nowrap;
}
.nav__links .caret {
    width: 11px;
    height: 11px;
    flex: none;
    transition: transform 0.35s var(--ease);
}
.has-sub:hover .caret,
.has-sub:focus-within .caret {
    transform: rotate(180deg);
}
/* drawer-only entries — hidden on the desktop bar */
.subnav__parent,
.nav__social {
    display: none;
}
.subnav {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 244px;
    z-index: 20;
    display: grid;
    gap: 2px;
    padding: 0.5rem;
    list-style: none;
    margin: 0;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.3s var(--ease),
        transform 0.3s var(--ease),
        visibility 0.3s;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.subnav a {
    padding: 0.6rem 0.85rem;
    font-size: 0.86rem;
    border-radius: 10px;
}
.subnav a::after {
    display: none;
}
.subnav a:hover {
    background: var(--surface-2);
    color: var(--gold-ink);
}

/* ---- inner page hero ---- */
.pagehero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.8rem, 5.5vw, 4.6rem) 0 clamp(2.8rem, 5vw, 4.2rem);
    border-bottom: 1px solid var(--border-soft);
}
.pagehero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-wash);
    pointer-events: none;
}
.pagehero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(1.6rem, 4vw, 3.2rem);
    align-items: center;
}
.pagehero h1 {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    margin: 1rem 0 0.9rem;
}
.pagehero__lead {
    max-width: 62ch;
    font-size: 1.02rem;
}
.pagehero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.8rem;
}
.pagehero__art {
    display: grid;
    place-items: center;
}
.pagehero__art .medallion {
    width: min(100%, 300px);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.breadcrumb a:hover {
    color: var(--gold-ink);
}
.breadcrumb em {
    font-style: normal;
    color: var(--gold-ink);
}
.breadcrumb i {
    font-style: normal;
    opacity: 0.5;
}

/* ---- process steps ---- */
.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}
.steps li {
    position: relative;
    counter-increment: step;
    padding: 1.05rem 1.3rem 1.05rem 4.3rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    font-size: 0.95rem;
    color: var(--text);
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-400);
}
.steps li:hover {
    transform: translateX(7px);
    border-color: var(--border);
}

/* ---- check lists ---- */
.checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}
.checks li {
    display: flex;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--muted);
}
.checks svg {
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 0.3rem;
    color: var(--gold-400);
}

/* ---- at a glance ---- */
.glance {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.glance > div {
    padding: 1.5rem 1.2rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    text-align: center;
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.glance > div:hover {
    transform: translateY(-6px);
    border-color: var(--border);
}
.glance svg {
    width: 24px;
    height: 24px;
    margin: 0 auto 0.7rem;
    color: var(--gold-ink);
}
.glance b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.16rem;
    color: var(--text-strong);
    margin-bottom: 0.25rem;
}
.glance span {
    font-size: 0.82rem;
    color: var(--muted);
}

/* ---- interest rate cards ---- */
.rate {
    cursor: pointer;
}
.rate__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.rate__head h3 {
    font-size: 1.15rem;
}
/* long scheme titles must wrap — never squeeze the icon box (a flex item
   shrinks by default, which left some icons narrower than others on phones) */
.rate__head > div {
    min-width: 0;
}
.rate__head .card-icon {
    flex: none;
}
.rate__head .acc__icon {
    flex: none;
}
.rate__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease);
}
.rate.is-open .rate__panel {
    grid-template-rows: 1fr;
}
.rate__panel > div {
    overflow: hidden;
}
.table-wrap {
    overflow-x: auto;
    margin-top: 1.2rem;
}
table.rates {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.rates th,
.rates td {
    padding: 0.68rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}
.rates th {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-ink);
    font-weight: 700;
}
.rates td {
    color: var(--muted);
}
.rates td:first-child {
    color: var(--text);
    font-weight: 600;
}
.rates tbody tr:hover td {
    background: var(--surface-2);
}

/* ---- article prose ---- */
.article {
    max-width: 840px;
    margin-inline: auto;
}
.article > p {
    margin-bottom: 1.15rem;
    font-size: 1.01rem;
}
.article h2 {
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    margin: 2.2rem 0 0.9rem;
}
.article h3 {
    margin: 1.7rem 0 0.7rem;
}
.article ul,
.article ol {
    margin: 0 0 1.3rem 1.25rem;
    padding: 0;
}
.article li {
    color: var(--muted);
    margin-bottom: 0.55rem;
}
.article blockquote {
    margin: 1.7rem 0;
    padding: 1.15rem 1.5rem;
    font-style: italic;
    color: var(--text);
    background: var(--surface);
    border-left: 3px solid var(--gold-400);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---- banner (event / blog hero image slot) ---- */
.banner {
    position: relative;
    height: clamp(210px, 32vw, 380px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
}
.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
}
.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        120% 90% at 50% 0%,
        rgba(212, 175, 55, 0.38),
        transparent 62%
    );
}
.banner svg {
    position: relative;
    width: 78px;
    height: 78px;
    color: var(--gold-300);
}
.banner__tag {
    position: absolute;
    z-index: 2;
    top: 1.1rem;
    left: 1.1rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    background: rgba(7, 12, 31, 0.7);
    color: var(--gold-300);
    border: 1px solid rgba(212, 175, 55, 0.45);
}

/* ---- meta row ---- */
.metarow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 1.6rem 0 2rem;
    padding: 1.1rem 1.35rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}
.metarow > div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.9rem;
    color: var(--text);
}
.metarow svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--gold-ink);
}
.metarow b {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}

/* ---- gallery slideshow ---- */
.gallery {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--navy-800);
}
.gallery__viewport {
    position: relative;
    height: clamp(230px, 38vw, 440px);
}
.gallery__item {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.7s var(--ease);
}
.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}
.gallery__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
}
.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        110% 80% at 50% 10%,
        rgba(212, 175, 55, 0.32),
        transparent 62%
    );
}
.gallery__item.is-active {
    opacity: 1;
}
.gallery__item > div {
    position: relative;
    display: grid;
    place-items: center;
}
.gallery__item svg {
    width: 66px;
    height: 66px;
    color: var(--gold-300);
}
.gallery__item span {
    margin-top: 0.9rem;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c6d0ec;
}
.gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(7, 12, 31, 0.6);
    border: 1px solid var(--border);
    color: var(--gold-300);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        background 0.35s var(--ease),
        color 0.35s var(--ease);
}
.gallery__nav:hover {
    background: var(--grad-gold);
    color: var(--navy-900);
}
.gallery__nav--prev {
    left: 12px;
}
.gallery__nav--next {
    right: 12px;
}
.gallery__dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 0.45rem;
}
.gallery__dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    transition:
        width 0.35s var(--ease),
        background 0.35s var(--ease);
}
.gallery__dots button[aria-current="true"] {
    width: 26px;
    background: var(--grad-gold);
}

/* ---- job / careers ---- */
.job__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1rem 0 1.5rem;
}
.tagpill {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--gold-ink);
    background: var(--surface);
}
.jobcard {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* even rhythm between icon, title, meta and the button */
}
.jobcard .card-icon {
    margin-bottom: 0.4rem; /* was 1.25rem — the icon looked orphaned at the top */
}
.jobcard .btn {
    margin-top: auto; /* keep Apply Now pinned to the card foot; `gap` guarantees min spacing */
    align-self: flex-start;
}
.sticky-apply {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
}

/* ---- career detail: description + apply card ---- */
.job__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
    margin-top: 1.4rem;
}
.job__body {
    min-width: 0; /* long words / URLs in the description can't widen the column */
}
.job__title {
    font-size: clamp(1.9rem, 4vw, 3rem);
}
.job__aside .disclaimer a {
    overflow-wrap: anywhere; /* the contact email must never overflow the card */
}
.job__back {
    grid-column: 1; /* under the description, not the sticky card */
    justify-self: start;
    margin-top: 0.6rem;
}
/* tablets: keep the card beside the copy but give it a fixed, readable width */
@media (max-width: 1024px) {
    .job__layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 1.6rem;
    }
}
/* phones: single column — the apply card follows the description and stops
   being sticky (a sticky card in a one-column flow just pins over content) */
@media (max-width: 760px) {
    .job__layout {
        grid-template-columns: 1fr;
        margin-top: 1rem;
    }
    .job__aside {
        position: static;
    }
    .job__badges {
        margin: 0.8rem 0 1.2rem;
    }
    .metarow > div {
        flex: 1 1 calc(50% - 1rem);
        min-width: 0;
    }
}

/* ---- modal ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1200; /* above the sticky .nav (z-index 1000), which was painting over the modal header */
    /* flex + margin:auto centres the box while leaving any overflow above it
       reachable; `place-items:center` pushed the header off the top edge once
       the content grew taller than the visible viewport. */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.2rem;
    background: rgba(3, 6, 18, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.35s var(--ease),
        visibility 0.35s;
}
.modal.is-open {
    opacity: 1;
    visibility: visible;
}
.modal__box {
    position: relative;
    width: min(100%, 540px);
    margin: auto;
    /* dvh follows the phone address bar; the vh line above is the fallback. */
    max-height: calc(100vh - 2.4rem);
    max-height: calc(100dvh - 2.4rem);
    overflow: auto;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.4s var(--ease);
}
.modal.is-open .modal__box {
    transform: none;
}

/* Split boxes pin the heading and scroll only the content beneath it, so the
   title and close button stay put on a long form. */
.modal__box--split {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.modal__head {
    flex: 0 0 auto;
    /* the right pad keeps the heading clear of the close button */
    padding: clamp(1.3rem, 3vw, 1.9rem) 3.5rem clamp(0.9rem, 2vw, 1.15rem)
        clamp(1.3rem, 3vw, 2.1rem);
    border-bottom: 1px solid var(--border);
}
.modal__head > :last-child {
    margin-bottom: 0;
}
.modal__title {
    font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.4rem);
    margin: 0.75rem 0 0;
    overflow-wrap: anywhere;
}
.modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.3rem, 3vw, 2.1rem)
        clamp(1.3rem, 3vw, 2.1rem);
}
.modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    color: var(--gold-ink);
    transition:
        background 0.3s var(--ease),
        color 0.3s var(--ease);
}
.modal__close:hover {
    background: var(--grad-gold);
    color: var(--navy-900);
}

/* file input */
.filedrop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px dashed var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color 0.3s var(--ease);
}
.filedrop:hover {
    border-color: var(--gold-400);
}
.filedrop svg {
    width: 22px;
    height: 22px;
    color: var(--gold-ink);
    flex: none;
}
.filedrop span {
    font-size: 0.87rem;
    color: var(--muted);
}
.filedrop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---- downloads ---- */
.dl {
    display: grid;
    gap: 0.8rem;
    max-width: 820px;
    margin-inline: auto;
}
.dl a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.dl a:hover {
    transform: translateX(7px);
    border-color: var(--border);
}
.dl svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--gold-ink);
}
.dl b {
    display: block;
    font-size: 0.96rem;
    color: var(--text);
    font-weight: 600;
}
.dl small {
    color: var(--muted);
    font-size: 0.76rem;
}

/* ---- gold CTA band ---- */
.ctaband {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 5vw, 3.8rem) 0;
    background: linear-gradient(
        120deg,
        var(--navy-800),
        var(--navy-700) 60%,
        var(--navy-800)
    );
    border-block: 1px solid var(--border);
}
.ctaband::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -160px;
    top: -280px;
    background: var(--glow);
    pointer-events: none;
}
.ctaband__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.ctaband h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
}
.ctaband p {
    color: #a9b4d0;
    margin-top: 0.5rem;
    max-width: 54ch;
}

/* ---- nearest branch highlight ---- */
.branch-near {
    background: linear-gradient(
        165deg,
        rgba(212, 175, 55, 0.17),
        var(--surface) 60%
    );
    border-color: var(--border);
    display: flex;
    flex-direction: column;
}
.branch-map {
    width: 100%;
    height: 190px;
    border: 0;
    display: block;
    border-radius: 12px;
    margin-top: auto; /* pin to the card foot so maps line up across a row regardless of address length */
    filter: saturate(0.9);
}

/* ---- inner-page responsive ---- */
@media (max-width: 991px) {
    /* drawer: sub-menus flow inline and stay collapsed until the parent
       row is tapped (JS toggles `.is-open` on the `li.has-sub`). Using
       `display: none` rather than opacity/visibility also means a closed
       submenu can never intercept taps on the page content underneath the
       sticky header (this used to break the calculator slider and the
       enquiry form on mobile). */
    .subnav {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        border: 0;
        padding: 0 0 0.4rem 1rem;
        min-width: 0;
        transition: none;
    }
    .has-sub.is-open > .subnav {
        display: grid;
    }
    .subnav a {
        font-size: 0.88rem;
        opacity: 0.85;
    }
    .subnav__parent {
        display: block;
    }
    /* parent row: label left, caret pinned right; caret flips when open */
    .nav__links .has-sub > a {
        justify-content: space-between;
    }
    .nav__links .caret {
        display: block;
        width: 14px;
        height: 14px;
        transform: none;
    }
    .has-sub.is-open > a .caret {
        transform: rotate(180deg);
    }
    /* hover shouldn't open anything in the drawer (touch devices leave
       :hover stuck on the last tapped element) */
    .has-sub:hover .caret,
    .has-sub:focus-within .caret {
        transform: none;
    }
    .has-sub.is-open:hover > a .caret,
    .has-sub.is-open:focus-within > a .caret {
        transform: rotate(180deg);
    }

    /* drawer foot: phone, social links, theme toggle */
    .nav__social {
        display: grid;
        gap: 0.8rem;
        margin-top: auto; /* sit at the foot of the full-height drawer */
        padding-top: 1.2rem;
        border-top: 1px solid var(--border);
    }
    .nav__links .nav__social .nav__call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text);
        background: var(--surface-2);
    }
    .nav__links .nav__social .nav__call svg {
        width: 15px;
        height: 15px;
        flex: none;
        color: var(--gold-ink);
    }
    .nav__social-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
    }
    .nav__social .social {
        justify-content: center;
        gap: 0.6rem;
    }
    /* the drawer's theme toggle sits on the page background, not the navy topbar */
    .nav__social .theme-toggle {
        width: 38px;
        height: 38px;
        margin-left: 0.4rem;
        border-color: var(--border);
        color: var(--gold-ink);
    }
    .nav__social .theme-toggle svg {
        width: 18px;
        height: 18px;
    }
    .nav__links .nav__social .social a {
        width: 38px;
        height: 38px;
        padding: 0;
        display: grid;
        border: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        border-radius: 50%;
        color: var(--gold-ink);
        font-size: 0;
    }
    .nav__links .nav__social .social a:hover {
        background: var(--grad-gold);
        color: var(--navy-900);
    }
    .nav__social .social svg {
        width: 16px;
        height: 16px;
    }
    /* the topbar extras (phone, social, theme) live in the drawer on these widths */
    .topbar__right {
        display: none;
    }
}
@media (max-width: 1024px) {
    .pagehero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pagehero__lead {
        margin-inline: auto;
    }
    .pagehero__cta,
    .breadcrumb {
        justify-content: center;
    }
    .pagehero__art {
        order: -1;
    }
    .glance {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 760px) {
    .glance {
        grid-template-columns: 1fr;
    }
    .metarow {
        gap: 1rem;
    }
    .steps li {
        padding-left: 3.8rem;
    }
    /* interest-rate cards: tighter padding on phones so the title, icon and
       table get the width; the table scrolls edge-to-edge inside the card */
    .card.rate {
        padding: 1.1rem 1rem;
    }
    .rate__head {
        gap: 0.6rem;
    }
    .rate__head h3 {
        font-size: 1rem;
    }
    .rate .table-wrap {
        margin-inline: -1rem;
        padding-inline: 1rem;
        margin-top: 0.9rem;
    }
    .rate .rates th,
    .rate .rates td {
        padding: 0.55rem 0.6rem;
    }
}

/* rate card toggle icon shares the accordion look */
.rate.is-open .acc__icon {
    background: var(--grad-gold);
    color: var(--navy-900);
    transform: rotate(135deg);
}
.rate .acc__icon {
    flex: none;
}

/* ---- policy documents: download rows + view-only viewer ---- */
.dl button {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.dl button:hover {
    transform: translateX(7px);
    border-color: var(--border);
}
.dl button svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--gold-ink);
}
.dl__tag {
    margin-left: auto;
    flex: none;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    color: var(--gold-ink);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* policy row: title/icon opens the viewer; each row carries a View action and,
   for downloadable documents, a Download action too */
.dl__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.dl__item:hover {
    transform: translateX(7px);
    border-color: var(--border);
}
.dl .dl__item .dl__main {
    flex: 1;
    width: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem 1rem 1.25rem;
    background: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transform: none;
}
.dl .dl__item .dl__main:hover {
    transform: none;
    border: 0;
}
.dl__item .dl__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 1.1rem;
    flex: none;
}
.dl__item .dl__actions .dl__tag {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-left: 0;
    width: auto;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: none;
    color: var(--gold-ink);
    /* typography set here (not just on .dl__tag) because `.dl button { font: inherit }`
       outranks .dl__tag and left the View <button> larger than the Download <a> */
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer; /* mascot cursor comes from the shared rule further down */
    transform: none;
    transition:
        border-color 0.3s var(--ease),
        background-color 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        transform 0.3s var(--ease);
}
/* gold shimmer sweep on hover — the same effect the site's .btn buttons use */
.dl__item .dl__actions .dl__tag::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sheen);
    transform: translateX(-130%);
    transition: transform 0.7s var(--ease);
}
.dl__item .dl__actions .dl__tag:hover::after {
    transform: translateX(130%);
}
.dl__item .dl__actions .dl__tag:hover {
    border-color: var(--gold-400);
    background-color: rgba(212, 175, 55, 0.14);
    transform: translateY(-3px);
}
.dl__item .dl__actions .dl__tag--dl {
    color: var(--navy-900);
    background: var(--grad-gold);
    border-color: transparent;
}
.dl__item .dl__actions .dl__tag--dl:hover {
    background-color: transparent; /* keep the gradient; don't tint over it */
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -10px rgba(212, 175, 55, 0.8);
}

.modal__box--wide {
    width: min(100%, 980px);
    max-height: calc(100vh - 2.4rem);
    max-height: calc(100dvh - 2.4rem);
}
.docview {
    display: block;
    width: 100%;
    height: min(72vh, 760px);
    border: 0;
    border-radius: 12px;
    background: #fff;
}
@media (max-width: 760px) {
    .dl__tag {
        display: none;
    }
    .docview {
        height: 62vh;
    }
}

/* lead-in term at the start of a prose bullet */
.article li b {
    color: var(--text);
    font-weight: 600;
}

/* ---------- mascot cursor on interactive elements ---------- */
a,
button,
summary,
[role="button"],
.btn,
.fab__btn,
.fab__panel,
.calc__type,
.calc__type span,
.calc__type input,
.dl__item .dl__actions .dl__tag,
.smascot__btn,
.totop,
input[type="submit"],
input[type="button"] {
    cursor:
        url("../img/cursor-mascot.png") 6 4,
        pointer;
    cursor:
        image-set(
                url("../img/cursor-mascot.png") 1x,
                url("../img/cursor-mascot-2x.png") 2x
            )
            6 4,
        pointer;
}

/* disabled controls keep the honest affordance */
button:disabled,
.btn:disabled,
input:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

/* ---------- investments: gold band + timeline selector ---------- */
.section--gold {
    background: linear-gradient(
        97deg,
        rgba(230, 205, 121, 0.1) -3.06%,
        rgba(159, 119, 10, 0.2) 105.08%
    );
}
.invtl__rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 660px;
    margin: 0 auto clamp(1.8rem, 4vw, 3rem);
}
/* dotted track, drawn between the first and last dot */
.invtl__rail::before {
    content: "";
    position: absolute;
    left: 16.6%;
    right: 16.6%;
    bottom: 6px;
    border-top: 2px dotted rgba(231, 199, 102, 0.45);
}
.invtl__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 0;
    border: 0;
    background: none;
}
.invtl__pill {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
    color: rgba(255, 250, 232, 0.72);
    border: 1px solid rgba(255, 250, 232, 0.28);
    background: rgba(20, 15, 2, 0.14);
    transition:
        color 0.3s var(--ease),
        border-color 0.3s var(--ease),
        background 0.3s var(--ease);
}
.invtl__step:hover .invtl__pill {
    color: #fffdf5;
    border-color: rgba(255, 250, 232, 0.55);
}
.invtl__step.is-active .invtl__pill {
    color: #fffdf5;
    border-color: rgba(255, 250, 232, 0.7);
    background: rgba(20, 15, 2, 0.28);
}
.invtl__dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(231, 199, 102, 0.32);
    transition:
        background 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}
.invtl__step.is-active .invtl__dot {
    background: var(--gold-200);
    box-shadow: 0 0 0 4px rgba(255, 252, 235, 0.3);
}

.invtl__panel {
    position: relative;
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(1.6rem, 3.2vw, 2.6rem);

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 40px 80px -42px rgba(0, 0, 0, 0.65);

    border-radius: 18px;
    border: 1px solid var(--Stroke, rgba(212, 175, 55, 0.2));
    background: linear-gradient(
        304deg,
        rgba(212, 175, 55, 0.32) 11.62%,
        rgba(255, 255, 255, 0.04) 53.6%
    );
    backdrop-filter: blur(7px);
}
.invtl__panel::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 35%;
    aspect-ratio: 53 / 33;
    opacity: 0.34;
    background: url(../img/wave-lines.webp) center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
    background-size: cover;
}
/* keep the copy above the wave */
.invtl__tag,
.invtl__cols {
    position: relative;
    z-index: 1;
}
.invtl__panel[hidden] {
    display: none;
}
.invtl__tag {
    display: inline-block;
    margin-bottom: clamp(1rem, 2.4vw, 1.8rem);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-300);
    padding: 0.34rem 0.85rem;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 999px;
}
.invtl__cols {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
    gap: clamp(1.4rem, 4vw, 3.2rem);
    align-items: start;
}
.invtl__panel h3 {
    margin: 0;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    color: #ecf1ff;
}
.invtl__body p {
    margin: 0;
    font-size: 0.95rem;
    color: #ecf1ff;
}
.invtl__body .invest__list {
    margin: 1.5rem 0 0;
}
.invtl__cta {
    margin-top: 1.6rem;
    justify-content: flex-end;
    width: 100%;
}

/* light theme: the band above is hard-coded for the navy palette (white copy,
   translucent-white pills on a gold wash) — remap to deep gold + navy ink */
[data-theme="light"] .section--gold {
    background: linear-gradient(
        97deg,
        rgba(230, 205, 121, 0.18) -3.06%,
        rgba(159, 119, 10, 0.16) 105.08%
    );
}
[data-theme="light"] .invtl__rail::before {
    border-top-color: rgba(168, 127, 22, 0.5);
}
[data-theme="light"] .invtl__pill {
    color: var(--gold-700);
    border-color: rgba(168, 127, 22, 0.4);
    background: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .invtl__step:hover .invtl__pill {
    color: var(--navy-800);
    border-color: var(--gold-500);
}
[data-theme="light"] .invtl__step.is-active .invtl__pill {
    color: #fffdf5;
    border-color: transparent;
    background: var(--gold-600);
}
[data-theme="light"] .invtl__dot {
    background: rgba(168, 127, 22, 0.35);
}
[data-theme="light"] .invtl__step.is-active .invtl__dot {
    background: var(--gold-600);
    box-shadow: 0 0 0 4px rgba(168, 127, 22, 0.22);
}
[data-theme="light"] .invtl__panel {
    border-color: rgba(168, 127, 22, 0.3);
    background: linear-gradient(
        304deg,
        rgba(212, 175, 55, 0.2) 11.62%,
        rgba(255, 255, 255, 0.72) 53.6%
    );
    box-shadow: 0 30px 60px -40px rgba(11, 27, 63, 0.35);
}
[data-theme="light"] .invtl__panel::before {
    opacity: 0.18;
}
[data-theme="light"] .invtl__tag {
    color: var(--gold-700);
    border-color: rgba(168, 127, 22, 0.45);
    background: rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .invtl__panel h3 {
    color: var(--text-strong);
}
[data-theme="light"] .invtl__body p {
    color: var(--text);
}
[data-theme="light"] .invtl__body .invest__list li {
    color: var(--text);
}
[data-theme="light"] .invtl__body .invest__list svg {
    color: var(--gold-600);
}

@media (max-width: 860px) {
    .invtl__cols {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }
    .invtl__rail {
        max-width: none;
    }
    .invtl__pill {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        padding: 0.3rem 0.55rem;
    }
    .invtl__cta {
        justify-content: flex-start;
    }
}

/* ---------- about: centred intro, 3-across cards, stats band ---------- */
.about__intro {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.about__intro p {
    margin: 0 0 1.1rem;
}
.about__intro p:first-child {
    font-size: 1.02rem;
}
.about__intro .btn {
    margin-top: 0.9rem;
}
.about__cards {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: clamp(1rem, 1.8vw, 1.5rem);
    margin-top: clamp(2rem, 4.5vw, 3.4rem);
}
.about__cards .card {
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
}
/* one rhythm for every card: the gap above owns all the spacing */
.about__cards .card .card-icon {
    margin-bottom: 0;
}
.about__cards .card h3 {
    font-size: 1.1rem;
    margin: 0;
}
.about__cards .card p {
    font-size: 0.88rem;
    margin: 0;
}
.stats-band {
    max-width: 960px;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.stats-band .stats {
    margin-top: 0;
}

@media (max-width: 980px) {
    .about__cards {
        grid-template-columns: 1fr;
    }
}

/* ---------- decorative halftone: calculator (bottom-left), why (bottom-right) ---------- */
#calculator::before,
#why::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: min(669px, 46%);
    aspect-ratio: 669 / 506;
    background: url("../img/bg_image.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}
#calculator::before {
    left: 0;
}
#why::before {
    right: -82px;
    transform: rotate(270deg);
}
/* keep section content above the ornament */
#calculator > .container,
#why > .container {
    position: relative;
    z-index: 1;
}

/* between the mobile breakpoint and full desktop the nav is tight:
   trim type, padding and gaps so all nine links stay on one line */
@media (min-width: 992px) and (max-width: 1199px) {
    .nav__inner {
        gap: 0.6rem;
    }
    .nav__links {
        gap: 0.05rem;
    }
    .nav__links a {
        padding: 0.5rem 0.48rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .nav__links a:hover::after,
    .nav__links a.is-active::after {
        width: calc(100% - 0.96rem);
    }
    .nav__cta .btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* page-hero artwork is dropped below 1024px */
@media (max-width: 1024px) {
    .pagehero__art {
        display: none;
    }
}

/* =============================================================
   14. 404 PAGE — reuses the page-hero wash, eyebrow, medallion and buttons
   ============================================================= */
.err404 {
    min-height: calc(100vh - var(--topbar-h) - var(--nav-h));
    min-height: calc(100dvh - var(--topbar-h) - var(--nav-h));
    display: grid;
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem);
}
.err404__inner {
    grid-template-columns: 1.15fr 0.85fr;
}
.err404__copy {
    min-width: 0;
}
/* the big number: two shimmering gold digits around a spinning gold coin */
.err404__code {
    display: flex;
    align-items: baseline; /* the coin rests on the digits' baseline like a real "0" */
    gap: clamp(0.15rem, 1vw, 0.6rem);
    margin: 1.3rem 0 0.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(5.4rem, 15vw, 10.5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    /* Cormorant's default old-style "4" descends below the baseline; lining
       figures sit on it at full height, level with the coin */
    font-variant-numeric: lining-nums;
}
.err404__code .gold-text {
    filter: drop-shadow(0 18px 34px rgba(212, 175, 55, 0.28));
}
.err404__zero {
    position: relative;
    display: inline-block;
    width: 0.68em; /* ≈ the display font's digit height */
    height: 0.68em;
    vertical-align: baseline;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.28), transparent 46%),
        var(--grad-gold);
    box-shadow:
        inset 0 0 0 0.045em rgba(120, 84, 10, 0.55),
        inset 0 0 0 0.075em rgba(255, 228, 150, 0.7),
        var(--shadow-gold);
}
.err404__zero::before {
    /* inner rim — turns slowly like the medallion's ring, so the coin
       animates without bobbing off the digits' baseline */
    content: "";
    position: absolute;
    inset: 0.13em;
    border-radius: 50%;
    border: 1px dashed rgba(120, 84, 10, 0.55);
    animation: spin 30s linear infinite;
}
.err404__zero::after {
    /* the "IG" mark, drawn as a small navy monogram ring */
    content: "";
    position: absolute;
    inset: 0.27em;
    border-radius: 50%;
    border: 0.06em solid var(--navy-900);
    opacity: 0.85;
}
.err404 h1 {
    margin-top: 0.6rem;
}
.err404__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-soft);
}
.err404__links-label {
    flex: none;
    margin-right: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.err404__links .tagpill {
    transition:
        border-color 0.3s var(--ease),
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        transform 0.3s var(--ease);
}
.err404__links .tagpill:hover {
    border-color: var(--gold-400);
    background: var(--grad-gold);
    color: var(--navy-900);
    transform: translateY(-2px);
}
.err404__art {
    position: relative;
}
.pagehero__art.err404__art .medallion {
    width: min(100%, 380px);
}
.err404__badge {
    position: absolute;
    right: 6%;
    bottom: 8%;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-ink);
    animation: floaty 7s var(--ease) infinite;
    animation-delay: -3s;
}
.err404__badge svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 1024px) {
    /* the shared page-hero rules already stack the grid and centre the copy;
       put the mascot above the copy here too and keep it a sensible size */
    .err404 {
        min-height: 0;
    }
    .err404__inner {
        grid-template-columns: 1fr;
    }
    /* the generic page-hero drops its artwork on small screens; the mascot
       is the point of this page, so keep it — above the copy, sized to fit */
    .pagehero__art.err404__art {
        display: grid;
        margin-bottom: 0.5rem;
    }
    .pagehero__art.err404__art .medallion {
        width: min(60vw, 280px);
    }
    .err404__code,
    .err404__links {
        justify-content: center;
    }
}
@media (max-width: 560px) {
    .err404__code {
        font-size: clamp(4.6rem, 26vw, 6.4rem);
    }
    .err404__badge {
        right: 0;
        bottom: 2%;
        font-size: 0.66rem;
        padding: 0.45rem 0.8rem;
    }
    .err404__links-label {
        width: 100%;
        text-align: center;
        margin: 0 0 0.2rem;
    }
    .pagehero__cta .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ---- modal · small screens ---- */
@media (max-width: 560px) {
    .modal {
        padding: 0.7rem;
    }
    .modal__box {
        width: 100%;
        max-height: calc(100vh - 1.4rem);
        max-height: calc(100dvh - 1.4rem);
    }
    .modal__head {
        padding: 1.1rem 3.2rem 0.85rem 1.15rem;
    }
    .modal__title {
        margin-top: 0.6rem;
    }
    .modal__body {
        padding: 1rem 1.15rem 1.2rem;
    }
    .modal__close {
        top: 0.65rem;
        right: 0.65rem;
    }
}

/* Landscape phones leave very little height — drop the chrome and let the
   body take what is left. */
@media (max-height: 520px) {
    .modal {
        padding: 0.5rem;
    }
    .modal__box {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
    .modal__head {
        padding-top: 0.9rem;
        padding-bottom: 0.7rem;
    }
}