/* =============================================================================
   ProIndemnity — Professional Indemnity Takaful / Insurance
   Design system + Navbar + Hero + About
   Palette + type scale mirror the reference style guide (Inter Tight + serif italic).
   ============================================================================= */

/* ---- Tokens ---- */
:root {
    --purple-light: #A58FFF;
    --purple: #3300FF;
    --grad: linear-gradient(135deg, #A58FFF 0%, #3300FF 100%);
    --grad-soft: linear-gradient(135deg, #b7a6ff 0%, #6a4dff 100%);
    --ink: #191919;
    --gray: #5D5D5D;
    --bg: #F5F5F5;
    --white: #ffffff;
    --border: rgba(25, 25, 25, .08);
    --radius: 22px;
    --radius-sm: 14px;
    --shadow: 0 24px 60px -24px rgba(51, 0, 255, .22);
    --shadow-sm: 0 10px 30px -12px rgba(25, 25, 25, .14);
    --font: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --maxw: 1200px;
    --nav-h: 92px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
    font-size: 16px;
    overflow-x: clip;              /* clip (not hidden) so position:sticky still works */
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---- Typography scale (Inter Tight; italic accents = Instrument Serif) ---- */
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: clamp(38px, 6vw, 64px); }
h2 { font-size: clamp(28px, 4vw, 32px); }
h3 { font-size: clamp(24px, 3vw, 28px); }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }
.em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
p { color: var(--gray); }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--gray); }
.small { font-size: 14px; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 10vw, 130px) 0; position: relative; }
.center { text-align: center; }

/* Pill eyebrow (⚙ About Us / Pricing / …) */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 16px 7px 8px;
    font-size: 14px; font-weight: 500; color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.eyebrow .dot {
    width: 22px; height: 22px; border-radius: 50%; background: var(--grad);
    display: grid; place-items: center; color: #fff; font-size: 12px;
}
.section-head { max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { margin: 20px 0 0; }
.section-head .lead { margin-top: 16px; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 500; font-size: 15px; border-radius: 999px;
    padding: 13px 26px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 12px 26px -10px rgba(51, 0, 255, .5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(51, 0, 255, .58); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--purple-light); }
.btn-lg { padding: 15px 30px; font-size: 16px; }

/* =============================================================================
   NAVBAR
   ============================================================================= */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--nav-h); display: flex; align-items: center;
    transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); box-shadow: 0 6px 24px -16px rgba(25, 25, 25, .3); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
/* full lockup logo (mark + wordmark + tagline) */
.brand-logo { height: 44px; width: auto; display: block; }
/* dark footer: invert the lockup to a clean white version */
.foot-brand .brand-logo { height: 48px; filter: brightness(0) invert(1); }
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px; background: var(--grad);
    display: grid; place-items: center; color: #fff; flex-shrink: 0;
    box-shadow: 0 8px 18px -8px rgba(51, 0, 255, .6);
}
.brand-mark svg { width: 19px; height: 19px; }

.nav-links {
    display: flex; align-items: center; gap: 4px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 999px; padding: 6px; box-shadow: var(--shadow-sm);
}
.nav-links a {
    padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink);
    transition: background .16s ease, color .16s ease; display: inline-flex; align-items: center; gap: 5px;
}
.nav-links a:hover, .nav-links a.active { background: var(--bg); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--border); }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; transition: .25s; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
    .nav-links {
        position: fixed; top: var(--nav-h); left: 16px; right: 16px;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
        border-radius: 20px; opacity: 0; visibility: hidden; transform: translateY(-12px);
        transition: .25s ease; box-shadow: var(--shadow);
    }
    .nav.open .nav-links { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-links a { padding: 13px 16px; justify-content: space-between; }
    .nav-toggle { display: block; }
    .nav-cta .btn { display: none; }
    .nav.open .nav-cta .btn { display: inline-flex; }
}

/* =============================================================================
   HERO
   ============================================================================= */
.hero {
    position: relative; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 0;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(165, 143, 255, .55) 0%, rgba(165, 143, 255, .12) 45%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 60%);
    overflow: hidden;
}
/* split hero: copy left, insured professional + claim-story cards right */
.hero-grid {
    display: grid; grid-template-columns: 1.08fr .92fr; align-items: center;
    gap: clamp(36px, 5vw, 72px);
    padding-top: clamp(24px, 3.5vw, 52px); padding-bottom: clamp(56px, 7vw, 92px);
}
.hero-copy h1 { margin: 22px 0 18px; font-size: clamp(34px, 3.9vw, 56px); }
.hero-copy .lead { max-width: 560px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hero-copy .hero-actions { justify-content: flex-start; }

/* who we cover — profession chips */
.hero-profs { margin-top: 34px; }
.hp-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--white); border: 1px solid var(--border); border-radius: 999px;
    padding: 8px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink);
    box-shadow: var(--shadow-sm); transition: color .18s, border-color .18s, transform .18s;
}
.hp-chip:hover { border-color: rgba(51, 0, 255, .35); color: var(--purple); transform: translateY(-1px); }
.hp-chip.more { background: transparent; border-style: dashed; box-shadow: none; color: var(--gray); }
.hp-chip.more:hover { color: var(--purple); }

/* right visual: transparent cutout emerging from a gradient arch,
   head breaking above the shape. Glides in from the right on page load. */
.hero-visual { position: relative; }
.hero-cutout {
    position: relative; width: min(100%, 470px); margin: 0 auto; aspect-ratio: 4 / 5;
    animation: hero-enter 2.4s cubic-bezier(.16, 1, .3, 1) .2s backwards;
}
.hero-cutout::before {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 88%; height: 82%;
    border-radius: 300px 300px 34px 34px;
    background: linear-gradient(165deg, #ddd2ff 0%, #8d6bff 58%, #3f14ff 125%);
    box-shadow: 0 30px 90px -20px rgba(63, 20, 255, .45), 0 0 140px 10px rgba(141, 107, 255, .28);
}
.hero-cutout img {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    height: 112%; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
}
@keyframes hero-enter {
    from { opacity: 0; transform: translateX(clamp(90px, 16vw, 220px)); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-cutout { animation: none; } }

/* trust strip under the hero */
.hero-trust { position: relative; z-index: 2; border-top: 1px solid var(--border); background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); }
.ht-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; }
.ht-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray); }
.ht-item b { font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

/* ---- Insurer panel: logo marquee (multi-company access, right below the hero) ---- */
.insurers { background: var(--white); padding: 36px 0 42px; border-bottom: 1px solid var(--border); }
.ins-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-bottom: 26px; }
.ins-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ins-track { display: flex; align-items: center; width: max-content; animation: ins-scroll 52s linear infinite; }
.ins-marquee:hover .ins-track { animation-play-state: paused; }
.ins-track img {
    height: 36px; width: auto; max-width: 150px; object-fit: contain; flex-shrink: 0;
    margin-right: clamp(44px, 6vw, 78px);
    filter: grayscale(1); opacity: .55; transition: filter .25s ease, opacity .25s ease;
}
.ins-track img:hover { filter: none; opacity: 1; }
@keyframes ins-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .ins-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 28px 44px; }
    .ins-track img { margin-right: 0; }
    .ins-track img[aria-hidden="true"] { display: none; }
}

/* ---- (archived) dashboard mockup styles — markup lives in _archive/dash-mockup.html ---- */
.hero-stage { position: relative; margin-top: clamp(56px, 6vw, 100px); padding-bottom: clamp(60px, 8vw, 110px); }
.dash {
    position: relative; z-index: 2; max-width: 1080px; margin: 0 auto;
    background: var(--white); border: 1px solid var(--border); border-radius: 26px;
    box-shadow: var(--shadow); overflow: visible;   /* let the stat cards fly out above the dash on load */
    display: grid; grid-template-columns: 250px 1fr;
    min-height: 520px;
}
.dash-side { border-right: 1px solid var(--border); padding: 22px 18px; display: flex; flex-direction: column; gap: 22px; }
.dash-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; }
.dash-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.dash-brand .brand-mark svg { width: 15px; height: 15px; }
.dash-avatar {
    width: 92px; height: 92px; border-radius: 50%; margin: 4px auto 8px;
    background: linear-gradient(135deg, #d9cfff, #b7a6ff); display: grid; place-items: center;
    color: #3a1f9e; font-size: 26px; font-weight: 600; border: 4px solid #f1edff;
}
.dash-menu { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.dash-menu li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-size: 14px; color: var(--gray); }
.dash-menu li.on { background: var(--grad); color: #fff; }
.dash-menu li .mi { width: 16px; height: 16px; opacity: .85; }
.dash-main { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-search { flex: 1; max-width: 320px; height: 42px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; padding: 0 14px; color: #9aa0ac; font-size: 14px; gap: 8px; }
.dash-badge { background: var(--grad); color: #fff; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 10px; }

/* the 4 stat cards row (these fly in) */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card {
    border-radius: 16px; padding: 14px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between;
    background: var(--white); border: 1px solid var(--border);
    will-change: transform;
}
.stat-card.filled { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 16px 30px -14px rgba(51, 0, 255, .5); }
.stat-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(51, 0, 255, .08); color: var(--purple); }
.stat-card.filled .stat-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.stat-label { font-size: 12.5px; color: var(--gray); }
.stat-card.filled .stat-label { color: rgba(255, 255, 255, .85); }
.stat-val { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-pill { font-size: 11px; font-weight: 600; background: rgba(25,25,25,.05); border-radius: 999px; padding: 3px 8px; color: var(--gray); }
.stat-card.filled .stat-pill { background: rgba(255,255,255,.22); color: #fff; }

/* consult + chat row */
.dash-body { display: grid; grid-template-columns: 1fr 300px; gap: 14px; flex: 1; }
.dash-consult { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0e1424; position: relative; min-height: 260px; }
.dash-consult .cv-head { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px; color: #fff; font-size: 13px; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent); }
.dash-consult .cv-img { position: absolute; inset: 0; background: linear-gradient(135deg, #2a3350, #171d30); }
.dash-consult .cv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--purple); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.dash-consult .cv-bar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: rgba(255,255,255,.95); border-radius: 999px; padding: 8px 12px; }
.dash-consult .cv-bar i { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; color: var(--gray); font-style: normal; font-size: 13px; }
.dash-consult .cv-bar i.end { background: var(--grad); color: #fff; }
.dash-chat { border-radius: 16px; border: 1px solid var(--border); background: var(--white); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dash-chat .cc-note { font-size: 11px; color: #9aa0ac; text-align: center; }
.bubble { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; }
.bubble.them { background: var(--bg); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.me { background: var(--grad); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bubble.doc { background: #eef0f4; color: var(--gray); }
.dash-chat .cc-input { margin-top: auto; height: 40px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; padding: 0 12px; color: #9aa0ac; font-size: 13px; justify-content: space-between; }
.dash-chat .cc-input .send { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; }

/* floating decorative cards around the dashboard (also settle in) */
.float-card {
    position: absolute; z-index: 3; background: var(--white); border: 1px solid var(--border);
    border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); width: 208px;
    will-change: transform;
}
.float-card.filled { background: var(--grad); border-color: transparent; color: #fff; }
.float-card .fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.float-card .fc-ico { width: 32px; height: 32px; border-radius: 9px; background: rgba(51,0,255,.08); color: var(--purple); display: grid; place-items: center; font-size: 15px; }
.float-card.filled .fc-ico { background: rgba(255,255,255,.22); color: #fff; }
.float-card .fc-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; background: rgba(25,25,25,.05); color: var(--gray); border-radius: 999px; padding: 3px 9px; }
.float-card.filled .fc-tag { background: rgba(255,255,255,.22); color: #fff; }
.float-card .fc-title { font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.float-card.filled .fc-title { color: #fff; }
.float-card .fc-sub { font-size: 11.5px; color: #9aa0ac; margin-top: 3px; line-height: 1.3; }
.float-card.filled .fc-sub { color: rgba(255,255,255,.78); }
/* label kept for any legacy use */
.float-card .fc-label { font-size: 12.5px; color: var(--gray); }
.float-card.filled .fc-label { color: rgba(255,255,255,.85); }
/* threat card (amber) — the claim that PI protects against */
.float-card.alert .fc-ico { background: rgba(226,146,18,.14); color: #c9760a; }
.float-card.alert .fc-tag { background: rgba(226,146,18,.14); color: #b76a08; }
/* resolved card (green) — the outcome */
.float-card.good .fc-ico { background: rgba(22,163,74,.12); color: #16a34a; }
.float-card.good .fc-tag { background: rgba(22,163,74,.12); color: #15803d; }
/* resting spots around the hero photo (positioning context = .hero-visual) */
.fc-1 { top: 3%; left: -4%; }
.fc-2 { bottom: 21%; left: -8%; }
.fc-3 { top: 17%; right: -5%; }
.fc-4 { bottom: 3%; right: -3%; }

@media (max-width: 980px) {
    /* single column: roomier gap + smaller head-pop so the cutout never
       collides with the profession chips above it */
    .hero-grid { grid-template-columns: 1fr; gap: 64px; text-align: center; }
    .hero-copy .lead { margin: 0 auto; }
    .hero-copy .hero-actions { justify-content: center; }
    .hp-chips { justify-content: center; }
    .ht-row { justify-content: center; text-align: left; }
    .hero-cutout img { height: 106%; }
}

@media (max-width: 900px) {
    .dash { grid-template-columns: 1fr; min-height: 0; }
    .dash-side { flex-direction: row; align-items: center; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
    .dash-menu { flex-direction: row; flex-wrap: wrap; margin: 0; }
    .dash-avatar { display: none; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-body { grid-template-columns: 1fr; }
    /* compact float cards: same scatter/settle animation as desktop, sized down
       and parked in the four corners so the doctor stays visible */
    .float-card { padding: 10px 12px; border-radius: 12px; max-width: 150px; }
    .float-card .fc-top { margin-bottom: 6px; }
    .float-card .fc-ico { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }
    .float-card .fc-tag { font-size: 8.5px; padding: 2px 6px; }
    .float-card .fc-title { font-size: 11px; }
    .float-card .fc-sub { font-size: 9px; }
    .fc-1 { top: 0; left: 0; }
    .fc-3 { top: 34%; right: 0; }
    .fc-2 { bottom: 16%; left: 0; }
    .fc-4 { bottom: 0; right: 0; }
}

/* =============================================================================
   ABOUT — full-bleed team photo + frosted-glass cards (photo stays visible)
   ============================================================================= */
.about { position: relative; overflow: hidden; background: #17123f url('../assets/img/background_aboutus.webp') center 30% / cover no-repeat; background-attachment: fixed; }
/* scrim: dark where text sits (top & bottom), light in the middle so the faces read */
.about::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(15,10,48,.88) 0%, rgba(17,11,54,.46) 32%, rgba(19,12,60,.26) 54%, rgba(24,12,80,.62) 78%, rgba(13,9,44,.88) 100%); }
.about > .container { position: relative; z-index: 1; }
.about .section-head { margin-bottom: 0; }
.about .section-head h2 { color: #fff; text-shadow: 0 2px 18px rgba(10, 6, 40, .45); }
.about .section-head .em { color: var(--purple-light); }
.about .section-head .lead { color: rgba(255, 255, 255, .88); }
.about .eyebrow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* the "window": empty band that lets the professionals in the photo carry the message,
   capped by a small caption naming them */
.about-roll {
    text-align: center; margin: clamp(110px, 16vw, 250px) 0 20px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .9); text-shadow: 0 2px 14px rgba(10, 6, 40, .6);
}

.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-card {
    background: rgba(15, 11, 50, .42); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 24px 22px; min-height: 236px; display: flex; flex-direction: column;
    color: #fff; position: relative; overflow: hidden;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* gradient sheet slides in on hover */
.about-card::before {
    content: ''; position: absolute; inset: 0; background: var(--grad);
    opacity: 0; transition: opacity .35s ease; z-index: 0;
}
.about-card > * { position: relative; z-index: 1; }
.about-card:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-4px); box-shadow: 0 24px 44px -18px rgba(10, 5, 60, .65); }
.about-card:hover::before { opacity: 1; }
.about-card h4 { font-size: 20px; font-weight: 500; }
.about-card p { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .76); }
.about-card:hover p { color: rgba(255, 255, 255, .9); }
.about-divider { height: 1px; background: rgba(255, 255, 255, .16); margin: auto 0 16px; }
.about-card:hover .about-divider { background: rgba(255, 255, 255, .28); }
.about-stat { display: flex; align-items: center; gap: 12px; }
.about-stat .as-ico {
    width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
}
.about-card:hover .as-ico { background: rgba(255, 255, 255, .2); }
.about-stat .as-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.about-stat .as-cap { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

.about-cta { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 980px) { .about-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-grid { grid-template-columns: 1fr; } .about-card { min-height: 0; } }

/* =============================================================================
   COVERAGE — "everything in one place": left panel + right cards that rise & tilt
   ============================================================================= */
/* Tall section → the inner wrapper pins (sticky) while you scroll through it, so the
   left panel stays put and the right cards cycle through the centre (JS-driven). */
.everything { background: #14102e; position: relative; height: 300vh; }
/* bg lives on the pinned 100vh element so it holds still while the cards stack */
.ever-sticky {
    position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden;
    background: #14102e url('../assets/img/background_coverage.webp') center / cover no-repeat;
}
.ever-sticky::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 100% at 50% 0%, rgba(10, 7, 34, .3) 0%, rgba(10, 7, 34, .48) 60%, rgba(10, 7, 34, .66) 100%); }
.ever-sticky > .container { width: 100%; position: relative; z-index: 1; }
/* white panel & cards pop on the dark office scene; heading flips to light */
.ever-heading .eyebrow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ever-heading h2 { color: #fff; text-shadow: 0 2px 18px rgba(5, 3, 24, .5); }
.ever-heading .em { color: var(--purple-light); }
.ever-heading .lead { color: rgba(255, 255, 255, .85); }
.ever-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ever-right { position: relative; }
.ever-heading { margin-bottom: 30px; }             /* static — stays put while cards stack */
.ever-heading .eyebrow { margin-bottom: 16px; }
.ever-heading h2 { margin-bottom: 14px; }
.ever-stage { position: relative; height: 440px; } /* cards pile up inside here */

/* left coverage panel (branded product mock) */
.ever-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.cov-head { display: flex; align-items: center; justify-content: space-between; }
.cov-brand { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cov-badge { font-size: 12px; font-weight: 600; color: #1f9d6b; background: #e7f6ee; border-radius: 999px; padding: 4px 12px; }
.cov-person { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.cov-ava { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #d9cfff, #b7a6ff); color: #3a1f9e; display: grid; place-items: center; font-weight: 600; }
.cov-name { font-weight: 600; }
.cov-role { font-size: 13px; color: var(--gray); }
.cov-rows { display: flex; flex-direction: column; gap: 2px; }
.cov-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 12px; font-size: 14px; color: var(--gray); }
.cov-row b { color: var(--ink); font-weight: 600; }
.cov-row:nth-child(odd) { background: var(--bg); }
.cov-row.on { background: var(--grad); color: #fff; margin-top: 6px; }
.cov-row.on b { color: #fff; }

/* right cards: absolutely anchored to the top of the stage; JS raises each from below
   and piles it onto the stack, tilting the card beneath as the next one lands. */
.ever-card {
    position: absolute; top: 0; left: 0; width: 100%; max-width: 480px;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow); will-change: transform, opacity; backface-visibility: hidden;
}
.ever-card.filled { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--shadow); }
.ec-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ec-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(51, 0, 255, .08); color: var(--purple); display: grid; place-items: center; font-size: 18px; }
.ever-card.filled .ec-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.ec-pill { font-size: 12px; font-weight: 600; color: var(--gray); background: var(--bg); border-radius: 999px; padding: 5px 12px; }
.ever-card.filled .ec-pill { color: #fff; background: rgba(255, 255, 255, .2); }
.ever-card h4 { font-size: 20px; font-weight: 500; }
.ever-card p { font-size: 14px; margin-top: 6px; }
.ever-card.filled p { color: rgba(255, 255, 255, .88); }

@media (max-width: 860px) {
    .everything { height: auto; }
    .ever-sticky { position: static; height: auto; overflow: visible; }
    .ever-grid { grid-template-columns: 1fr; }
    .ever-right { position: static; height: auto; }
    .ever-heading { position: static; transform: none !important; opacity: 1 !important; margin-bottom: 22px; }
    .ever-stage { position: static; height: auto; }
    .ever-card { position: static; transform: none !important; max-width: none; margin-bottom: 16px; opacity: 1 !important; }
}

/* =============================================================================
   PROCESS — 3 cards grouped in the centre → spread left/right on scroll
   ============================================================================= */
/* overflow hidden: the proc-cards start ±230px off-centre (scroll scene),
   without this the mobile layout viewport widens and the page zooms out */
.process { background: var(--white); overflow: hidden; }
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proc-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px; will-change: transform; transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.proc-card:hover { box-shadow: var(--shadow); border-color: var(--purple-light); }
.pc-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 19px; box-shadow: 0 10px 22px -10px rgba(51, 0, 255, .55); }
.proc-card h4 { font-size: 21px; font-weight: 500; margin: 18px 0 8px; }
.proc-card p { font-size: 14px; }
.pc-img { margin-top: 20px; height: 168px; border-radius: 14px; background: linear-gradient(135deg, #e9e2ff, #cbbcff); position: relative; overflow: hidden; }
.pc-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .5), transparent 60%); }
.pc-img .pc-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; opacity: .9; }
/* 3D step render fills the box; sits above the ::after glow so it isn't washed */
.pc-img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }

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

/* =============================================================================
   REVIEWS — testimonial cards start tilted, straighten (balance) on scroll
   ============================================================================= */
.reviews { position: relative; overflow: hidden; background: #17123f url('../assets/img/background_review.webp') center / cover no-repeat; }
/* scrim: darker at top (heading) and base, lighter mid so the consultation scene reads */
.reviews::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12,8,40,.6) 0%, rgba(12,8,40,.28) 42%, rgba(12,8,40,.55) 100%); }
.reviews > .container { position: relative; z-index: 1; }
.reviews .section-head h2 { color: #fff; text-shadow: 0 2px 18px rgba(5, 3, 24, .5); }
.reviews .section-head .em { color: var(--purple-light); }
.reviews .eyebrow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rev-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 24px; position: relative; will-change: transform; box-shadow: var(--shadow);
}
.rev-stars { color: #f5b23e; font-size: 15px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.rev-stars b { color: var(--ink); font-weight: 600; }
.rev-quote { margin: 16px 0 22px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.rev-person { display: flex; align-items: center; gap: 12px; }
.rev-ava { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #d9cfff, #b7a6ff); color: #3a1f9e; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.rev-name { font-weight: 600; font-size: 14px; }
.rev-role { font-size: 12.5px; color: var(--gray); }
.rev-mark { position: absolute; right: 22px; bottom: 20px; font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--purple); opacity: .9; }

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

/* =============================================================================
   KEY METRICS — big visual + floating renewal card + metric stats
   ============================================================================= */
.metrics { position: relative; overflow: hidden; background: #14102e url('../assets/img/background_metric.webp') center / cover no-repeat; }
/* scrim: keeps the towers visible while the numbers stay the loudest thing on screen */
.metrics::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(11,8,36,.5) 0%, rgba(11,8,36,.32) 42%, rgba(11,8,36,.64) 100%); }
.metrics > .container { position: relative; z-index: 1; }
.metrics .eyebrow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.metrics-body h2 { color: #fff; text-shadow: 0 2px 18px rgba(5, 3, 24, .5); }
.metrics-body .em { color: var(--purple-light); }
.metrics-body .lead { color: rgba(255, 255, 255, .85); }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }

/* left: big visual — transparent cutouts on a gradient arch (same language as the hero) */
.metrics-visual { position: relative; }
.mv-photo { position: relative; width: min(100%, 470px); margin: 0 auto; aspect-ratio: 4 / 5; }
.mv-photo::before {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 88%; height: 78%;
    border-radius: 300px 300px 34px 34px;
    background: linear-gradient(165deg, #ddd2ff 0%, #8d6bff 58%, #3f14ff 125%);
    box-shadow: 0 30px 90px -20px rgba(63, 20, 255, .5), 0 0 140px 10px rgba(141, 107, 255, .3);
}
.mv-photo .mv-img {
    position: absolute; bottom: 0; left: 50%;
    height: 106%; width: auto; max-width: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
    opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
}
.mv-photo .mv-img.on { opacity: 1; }
/* rotating renewal card text: soften the swap */
.mv-card .mvc-name, .mv-card .mvc-meta { transition: opacity .3s ease; }
.mv-badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* floating "upcoming renewal" card */
.mv-card {
    position: absolute; right: -18px; bottom: -24px; width: 300px; z-index: 3;
    background: var(--white); border: 1px solid var(--border); border-radius: 18px;
    padding: 18px; box-shadow: var(--shadow);
}
.mvc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mvc-ico { width: 32px; height: 32px; border-radius: 9px; background: rgba(51, 0, 255, .08); color: var(--purple); display: grid; place-items: center; }
.mvc-tag { font-size: 12.5px; font-weight: 600; color: var(--gray); }
.mvc-name { font-weight: 600; font-size: 16px; }
.mvc-meta { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.mvc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.mvc-label { font-size: 12px; color: var(--gray); }
.mvc-val { font-size: 17px; font-weight: 600; color: var(--purple); }
.mvc-val.ok { color: #16a34a; font-size: 15px; }
.mvc-btn { font-size: 13px; font-weight: 600; color: #fff; background: var(--grad); padding: 9px 14px; border-radius: 10px; white-space: nowrap; }

/* right: the numbers */
.metrics-body .eyebrow { margin-bottom: 18px; }
.metrics-body h2 { margin-bottom: 14px; }
.metric-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
.metric-card {
    border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-sm); padding: 22px;
    background: rgba(15, 11, 50, .42); color: #fff;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.metric-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -18px rgba(10, 5, 60, .65); border-color: rgba(255, 255, 255, .34); }
.metric-card.filled { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 16px 34px -14px rgba(51, 0, 255, .55); }
.mc-num { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.mc-cap { font-size: 13.5px; color: rgba(255, 255, 255, .74); margin-top: 8px; }
.metric-card.filled .mc-cap { color: rgba(255, 255, 255, .88); }

@media (max-width: 860px) {
    .metrics-grid { grid-template-columns: 1fr; gap: 64px; }
    .mv-card { right: 12px; bottom: -26px; width: 264px; }
}
@media (max-width: 460px) {
    .metric-cards { grid-template-columns: 1fr; }
    .mv-photo { width: min(100%, 380px); }
}

/* =============================================================================
   FEATURES — horizontal scroll-snap carousel with arrow controls
   ============================================================================= */
.features { background: var(--bg); overflow: hidden; }
.feat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.feat-intro h2 { margin-top: 18px; max-width: 520px; }
.feat-intro .lead { margin-top: 12px; max-width: 560px; }
.feat-nav { display: flex; gap: 10px; flex-shrink: 0; }
.feat-arrow {
    width: 50px; height: 50px; border-radius: 50%; background: var(--white); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); font-size: 24px; line-height: 1; color: var(--ink); display: grid; place-items: center;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.feat-arrow:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-2px); }

.feat-carousel { position: relative; }
.feat-track {
    display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 0 18px; scroll-behavior: smooth; scrollbar-width: none;
}
.feat-track::-webkit-scrollbar { display: none; }
.feat-card {
    flex: 0 0 340px; scroll-snap-align: start;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(51, 0, 255, .22); }
.feat-card h4 { font-size: 19px; font-weight: 500; margin: 0 0 8px; }
.feat-card p { font-size: 14px; }

/* risk scenario cards: profession + claim size → story → covered + link */
.feat-card.risk { display: flex; flex-direction: column; min-height: 218px; }
.rk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.rk-prof { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--bg); border-radius: 999px; padding: 6px 12px; }
.rk-cost { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: #b76a08; background: rgba(226, 146, 18, .12); border-radius: 10px; padding: 5px 10px; white-space: nowrap; }
.rk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.rk-covered { font-size: 12px; font-weight: 600; color: #15803d; background: rgba(22, 163, 74, .12); border-radius: 999px; padding: 4px 10px; }
.rk-link { font-size: 13px; font-weight: 600; color: var(--purple); white-space: nowrap; }
.rk-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .feat-head { flex-direction: column; align-items: flex-start; }
    .feat-card { flex-basis: 82%; }
}

/* =============================================================================
   PRICING — 3 tiers, middle one featured (raised gradient)
   ============================================================================= */
.pricing { background: var(--white); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 26px; position: relative; display: flex; flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--purple-light); }
.price-card.featured { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--shadow); transform: translateY(-8px); }
.price-card.featured:hover { transform: translateY(-12px); }
.pc-badge { position: absolute; top: 22px; right: 24px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.pc-tier { font-size: 15px; font-weight: 600; }
.pc-for { font-size: 13.5px; color: var(--gray); margin-top: 6px; min-height: 38px; }
.price-card.featured .pc-for { color: rgba(255, 255, 255, .85); }
.pc-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; flex-wrap: wrap; }
/* headline is the limit of liability (e.g. "RM 5,000,000+"), so size for long figures */
.pc-amt { font-size: clamp(28px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pc-per { font-size: 14px; color: var(--gray); }
.price-card.featured .pc-per { color: rgba(255, 255, 255, .8); }
.pc-limit { font-size: 13.5px; color: var(--purple); font-weight: 600; }
.price-card.featured .pc-limit { color: #fff; }
.pc-btn { margin: 22px 0; width: 100%; }
.price-card.featured .pc-btn.btn-primary { background: #fff; color: var(--purple); box-shadow: none; }
.price-card.featured .pc-btn.btn-primary:hover { transform: translateY(-2px); }
.pc-list-label { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.price-card.featured .pc-list-label { color: rgba(255, 255, 255, .9); }
.pc-list { display: flex; flex-direction: column; gap: 11px; }
.pc-list li { position: relative; padding-left: 28px; font-size: 14px; color: var(--gray); }
.pc-list li::before {
    content: '✓'; position: absolute; left: 0; top: -1px; width: 19px; height: 19px; border-radius: 50%;
    background: rgba(51, 0, 255, .1); color: var(--purple); font-size: 11px; display: grid; place-items: center;
}
.price-card.featured .pc-list li { color: rgba(255, 255, 255, .9); }
.price-card.featured .pc-list li::before { background: rgba(255, 255, 255, .25); color: #fff; }
.price-note { text-align: center; font-size: 13px; color: var(--gray); margin-top: 26px; }
/* pricing page: the note must stay readable above the advisor cutout */
.pricing-page .price-note {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, .82); border-radius: 10px;
    padding: 10px 18px; backdrop-filter: blur(2px);
}

@media (max-width: 900px) {
    .price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .price-card.featured { transform: none; }
    .price-card.featured:hover { transform: translateY(-4px); }
}

/* =============================================================================
   BLOG + NEWSLETTER
   ============================================================================= */
.blog { background: var(--bg); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bc-img { height: 190px; border-radius: 14px; position: relative; overflow: hidden; margin-bottom: 18px; background: linear-gradient(135deg, #e9e2ff, #cbbcff); }
.bc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.blog-card:hover .bc-img img { transform: scale(1.05); }
.bc-cat { display: inline-block; font-size: 12px; font-weight: 600; color: var(--purple); background: var(--bg); border-radius: 999px; padding: 5px 12px; margin: 0 6px; }
.blog-card h4 { font-size: 19px; font-weight: 500; line-height: 1.25; margin: 12px 0 14px; padding: 0 6px; }
.bc-meta { font-size: 13px; color: var(--gray); padding: 0 6px 6px; }

.newsletter {
    margin-top: 40px; background: var(--ink); border-radius: var(--radius);
    padding: clamp(30px, 5vw, 50px); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.nl-text h3 { color: #fff; font-weight: 500; }
.nl-text p { color: rgba(255, 255, 255, .7); margin-top: 8px; font-size: 14.5px; max-width: 420px; }
.nl-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 460px; }
.nl-input {
    flex: 1; height: 52px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08); padding: 0 20px; color: #fff; font-family: inherit; font-size: 15px;
}
.nl-input::placeholder { color: rgba(255, 255, 255, .5); }
.nl-input:focus { outline: none; border-color: var(--purple-light); }
.nl-form .btn { flex-shrink: 0; }

@media (max-width: 860px) {
    .blog-grid { grid-template-columns: 1fr; }
    .newsletter { flex-direction: column; align-items: flex-start; }
    .nl-form { max-width: none; width: 100%; }
}

/* =============================================================================
   CTA BAND
   ============================================================================= */
.cta-band { padding: clamp(20px, 6vw, 40px) 0 clamp(60px, 8vw, 90px); background: var(--white); }
.cta-inner {
    background: var(--grad); border-radius: 30px; padding: clamp(40px, 7vw, 80px) 24px;
    text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.cta-inner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 120% at 50% -20%, rgba(255, 255, 255, .28), transparent 60%); pointer-events: none; }
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 { color: #fff; font-size: clamp(28px, 5vw, 44px); }
.cta-inner p { color: rgba(255, 255, 255, .85); max-width: 520px; margin: 16px auto 0; font-size: clamp(15px, 1.4vw, 18px); }
.cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-actions .btn-primary { background: #fff; color: var(--purple); }
.btn.on-dark { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.btn.on-dark:hover { background: rgba(255, 255, 255, .2); border-color: #fff; transform: translateY(-2px); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.footer { background: var(--ink); color: rgba(255, 255, 255, .7); padding: clamp(50px, 7vw, 80px) 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand .brand { color: #fff; margin-bottom: 16px; }
.foot-brand p { color: rgba(255, 255, 255, .6); font-size: 14px; max-width: 300px; }
.foot-col h5 { color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 16px; }
.foot-col a { display: block; color: rgba(255, 255, 255, .6); font-size: 14px; padding: 6px 0; transition: color .2s ease; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px; color: rgba(255, 255, 255, .5);
}
.fb-copy { margin: 0; }
.fb-copy a {
    color: rgba(255, 255, 255, .78); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3);
    transition: color .2s ease, text-decoration-color .2s ease;
}
.fb-copy a:hover { color: #fff; text-decoration-color: var(--purple-light); }
.fb-follow { display: flex; align-items: center; gap: 14px; }
.fb-follow > span { color: rgba(255, 255, 255, .78); font-weight: 500; }
.fb-icons { display: flex; gap: 10px; }
.fb-icons a {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
    display: grid; place-items: center; color: #fff;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fb-icons a svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.fb-icons a:hover { background: var(--grad); border-color: transparent; transform: translateY(-2px); }

@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) {
    .foot-grid { grid-template-columns: 1fr; }
    .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   INDUSTRIES — profession card grid (SEO landing hub)
   ============================================================================= */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ind-card {
    position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; box-shadow: var(--shadow-sm); overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.ind-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--purple-light); }
/* photo header: real professionals, gentle zoom on hover */
.ind-photo { aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(135deg, #e9e2ff, #cbbcff); }
.ind-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; transition: transform .5s ease; }
a.ind-card:hover .ind-photo img { transform: scale(1.05); }
.ind-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ind-card h3 { font-size: 21px; font-weight: 500; margin-bottom: 8px; }
.ind-card p { font-size: 14px; margin-bottom: 20px; }
.ind-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--purple); }
.ind-link .arw { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 13px; transition: transform .2s ease; }
a.ind-card:hover .ind-link .arw { transform: translate(2px, -2px); }

@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   PROFESSION LANDING PAGE — hero + why + claims + covered
   ============================================================================= */
.prof-hero {
    padding: calc(var(--nav-h) + 56px) 0 clamp(48px, 7vw, 90px);
    background:
        radial-gradient(120% 65% at 80% -10%, rgba(165, 143, 255, .5) 0%, rgba(165, 143, 255, .1) 45%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 82%);
}
.prof-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.prof-hero h1 { margin: 18px 0 16px; }
.prof-hero .hero-actions { justify-content: flex-start; }
.prof-visual { border-radius: var(--radius); overflow: hidden; min-height: 400px; position: relative; background: linear-gradient(150deg, #cbbcff 0%, #6a4dff 60%, #3300ff 100%); box-shadow: var(--shadow); }
.prof-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,40,.1) 0%, transparent 28%, transparent 66%, rgba(13,10,40,.16) 100%); pointer-events: none; }
.prof-visual .pv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.prof-visual .pv-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(90px, 13vw, 160px); }

/* what's covered: 2-col checklist + side CTA */
.covered-wrap { display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(28px, 5vw, 56px); align-items: center; margin-top: 8px; }
.covered-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.covered-cta { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.covered-cta p { font-size: 14.5px; margin-bottom: 18px; }
.covered-cta p b { color: var(--ink); }
.covered-cta .btn { width: 100%; }

@media (max-width: 860px) {
    .prof-hero-grid { grid-template-columns: 1fr; }
    .prof-visual { min-height: 300px; order: -1; }
    .covered-wrap { grid-template-columns: 1fr; }
    .covered-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   PLAN DETAIL PAGE — plan card + buy card, then about / features / benefits
   ============================================================================= */
.plan-hero {
    padding: calc(var(--nav-h) + 56px) 0 clamp(48px, 7vw, 90px);
    background:
        radial-gradient(120% 60% at 50% -5%, rgba(165, 143, 255, .5) 0%, rgba(165, 143, 255, .12) 40%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 88%);
}
.plan-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: start; }
.plan-card, .plan-buy { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(28px, 4vw, 44px); }
.plan-card h1 { font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 8px; }
.plan-card .plan-sub { color: var(--gray); font-size: 15px; margin-bottom: 26px; }
.plan-includes { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 26px; }
.plan-includes h5 { font-size: 15px; font-weight: 600; margin-bottom: 18px; }
.plan-inc-list { display: flex; flex-direction: column; gap: 14px; }
.plan-inc-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink); }
.plan-inc-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 11px; display: grid; place-items: center; }

.plan-buy h2 { font-size: 26px; font-weight: 500; }
.plan-buy .plan-sub { color: var(--gray); font-size: 14.5px; margin: 10px 0 0; }
.plan-divider { height: 1px; background: var(--border); margin: 24px 0; }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price .amt { font-size: clamp(36px, 5vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan-price .per { font-size: 15px; color: var(--gray); }
.plan-field { margin-top: 24px; }
.plan-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray); margin-bottom: 8px; }
.plan-select {
    width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: 12px;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235D5D5D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    padding: 14px 44px 14px 16px; font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
.plan-select:focus { outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(165, 143, 255, .25); }
.plan-cta { margin-top: 22px; width: 100%; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

.plan-about h2 { font-size: clamp(24px, 3.5vw, 32px); margin-bottom: 16px; }
.plan-about h3 { font-size: 22px; font-weight: 500; margin: 40px 0 18px; }
.plan-about > p { font-size: 15.5px; line-height: 1.7; max-width: 900px; color: var(--gray); }
.plan-list { display: flex; flex-direction: column; gap: 16px; counter-reset: pl; max-width: 900px; list-style: none; padding-left: 0; margin: 0; }
.plan-list li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.6; color: var(--gray); }
.plan-list li::before { counter-increment: pl; content: counter(pl) '.'; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--purple); }
.plan-list li b { color: var(--ink); font-weight: 600; }

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

/* =============================================================================
   CONTACT PAGE — hero + info cards · get-in-touch form + visual
   ============================================================================= */
.contact-hero {
    padding: calc(var(--nav-h) + 56px) 0 clamp(56px, 8vw, 100px);
    background:
        radial-gradient(120% 60% at 50% -5%, rgba(165, 143, 255, .5) 0%, rgba(165, 143, 255, .12) 40%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 85%);
}
.contact-hero .section-head { max-width: 680px; margin-bottom: clamp(40px, 6vw, 60px); }
.contact-hero h1 { margin-bottom: 18px; }

.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; min-height: 280px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-card .ic-ico { width: 54px; height: 54px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: auto; box-shadow: 0 12px 24px -10px rgba(51, 0, 255, .5); }
.info-card h4 { font-size: 20px; font-weight: 500; margin: 20px 0 10px; }
.info-card p { font-size: 14px; line-height: 1.7; word-break: break-word; }

/* get in touch */
.git-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.git-left h2 { margin: 16px 0 12px; }
.git-socials { display: flex; gap: 10px; margin: 22px 0 30px; }
.git-socials a { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; box-shadow: 0 10px 20px -10px rgba(51, 0, 255, .5); transition: transform .2s ease; }
.git-socials a:hover { transform: translateY(-3px); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.cf-label .req { color: var(--purple); }
.cf-input { position: relative; }
.cf-input .cf-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .55; pointer-events: none; }
.cf-input.cf-area .cf-ico { top: 17px; transform: none; }
.cf-input input, .cf-input textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--white); padding: 14px 16px 14px 42px; font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
.cf-input textarea { min-height: 132px; resize: vertical; }
.cf-input input:focus, .cf-input textarea:focus { outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(165, 143, 255, .25); }
.cf-input input::placeholder, .cf-input textarea::placeholder { color: #9aa0ac; }
.cf-submit { margin-top: 4px; width: 100%; }
.cf-note { text-align: center; font-size: 13px; color: var(--gray); }
.cf-note a { color: var(--purple); }

.git-visual { border-radius: var(--radius); min-height: 480px; position: relative; background: linear-gradient(150deg, #cbbcff 0%, #6a4dff 60%, #3300ff 100%); box-shadow: var(--shadow); }
.git-visual::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .4), transparent 55%); }
/* advisor cutout welcoming the enquiry: flush to the panel bottom, head breaking the top */
.git-visual .gv-cut {
    position: absolute; bottom: 0; left: 50%; z-index: 1;
    height: 120%; width: auto; max-width: none;
    /* start state: fully sunk into the panel floor. script.js section 5 scrubs
       transform + clip + opacity with the scroll position. */
    opacity: 0; transform: translate(-50%, 110px); clip-path: inset(0 0 110px 0);
    will-change: transform, clip-path, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .git-visual .gv-cut { opacity: 1; transform: translate(-50%, 0); clip-path: none; }
}

@media (max-width: 900px) {
    .info-grid { grid-template-columns: repeat(2, 1fr); }
    .git-grid { grid-template-columns: 1fr; }
    .git-visual { min-height: 300px; margin-top: 40px; }
    .git-visual .gv-cut { height: 112%; }
}
@media (max-width: 560px) {
    .info-grid { grid-template-columns: 1fr; }
    .info-card { min-height: 0; }
    .cf-row { grid-template-columns: 1fr; }
}

/* =============================================================================
   PRICING PAGE — centred hero + 3 tiers (template order: price → features → button)
   ============================================================================= */
.pricing-hero {
    overflow: hidden; /* the presenting advisor slides beyond the grid edge */
    padding: calc(var(--nav-h) + 56px) 0 clamp(64px, 9vw, 120px);
    background:
        radial-gradient(120% 60% at 50% -5%, rgba(165, 143, 255, .5) 0%, rgba(165, 143, 255, .12) 40%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 82%);
}
.pricing-hero .section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.pricing-hero h1 { margin: 20px 0 18px; }

/* card layout follows the template: tier → price → blurb → divider → features → button (bottom) */
.pricing-page .price-grid { align-items: stretch; position: relative; }
.pricing-page .price-card { height: 100%; z-index: 1; }
/* advisor presenting the plans: sits statically to the left of the cards,
   fully visible from the start (no scroll-in slide). script.js section 6 only
   pins her to the viewport, then the next section scrolls over (covers) her.
   Height tracks the cards so the figure and the card stay level. */
.pz-cut {
    position: absolute; z-index: 0; bottom: 0; left: 0;
    /* ~1.8x card height: bigger presence. Feet share the cards' baseline,
       head rises above the card top. */
    height: 180%; width: auto; max-width: none;
    /* static resting spot: slid out to the left of the cards, fully visible */
    opacity: 1; transform: translateX(-240px);
    will-change: transform;
    pointer-events: none;
}
@media (max-width: 980px) { .pz-cut { display: none; } }
@media (prefers-reduced-motion: reduce) { .pz-cut { opacity: 1; transform: translateX(-240px); } }
/* desktop: once the advisor pins (JS sets position:fixed), the sections below
   sit above her and are opaque, so they scroll over (cover) her cleanly */
@media (min-width: 981px) {
    .pricing-hero ~ section, .pricing-hero ~ footer { position: relative; z-index: 1; }
    .pricing-hero ~ section:not(.values) { background-color: var(--white); }
}
.pricing-page .pc-tier { font-size: 18px; }
.pricing-page .pc-price { margin: 14px 0 6px; }
.pricing-page .pc-for { min-height: 0; margin-bottom: 0; }
.pc-divider { height: 1px; background: var(--border); margin: 20px 0; }
.price-card.featured .pc-divider { background: rgba(255, 255, 255, .22); }
.pricing-page .pc-list { margin-bottom: 26px; }
.pricing-page .pc-btn { margin: auto 0 0; }   /* push the button to the bottom */

/* underwriting strip: explains why there is no flat price (contribution is
   individually underwritten). Sits between the tier cards and the fine print. */
.uw-strip {
    margin-top: 34px; padding: 26px 28px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    position: relative; z-index: 2;   /* above the pinned advisor cutout */
}
.uw-strip h3 { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.02em; margin-bottom: 6px; }
.uw-copy p { font-size: 15px; color: var(--gray); max-width: 680px; }
.uw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px; }
.uw-chip {
    font-size: 14px; font-weight: 500; color: var(--ink);
    background: rgba(51, 0, 255, .05); border: 1px solid rgba(51, 0, 255, .12);
    padding: 8px 14px; border-radius: 100px;
}
.uw-ncd { font-size: 14.5px; font-weight: 600; color: var(--purple); }

/* =============================================================================
   ABOUT PAGE — hero banner · stats · mission · team · values · faq
   ============================================================================= */
.about-hero {
    padding-top: calc(var(--nav-h) + 56px);
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(165, 143, 255, .5) 0%, rgba(165, 143, 255, .1) 45%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 72%);
}
.about-hero .section-head { max-width: 840px; margin-bottom: clamp(32px, 5vw, 52px); }
.about-hero h1 { margin: 20px 0 18px; }
/* advisor feature banner: copy left, transparent cutout right,
   head breaking above the panel edge (overflow stays visible) */
.adv-banner {
    position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: end;
    gap: clamp(20px, 4vw, 56px);
    background: linear-gradient(135deg, #8d6bff 0%, #5b2eff 55%, #3300ff 100%);
    border-radius: 28px; margin-top: clamp(40px, 6vw, 80px);
    box-shadow: 0 40px 80px -30px rgba(51, 0, 255, .45);
}
.adv-banner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(110% 90% at 18% 0%, rgba(255, 255, 255, .28), transparent 55%); pointer-events: none; }
.adv-copy { position: relative; padding: clamp(30px, 4.5vw, 60px) 0 clamp(30px, 4.5vw, 60px) clamp(26px, 4.5vw, 60px); }
.adv-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.adv-copy h2 { margin: 18px 0 12px; font-size: clamp(26px, 3vw, 40px); color: #fff; letter-spacing: -0.02em; }
.adv-copy p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .85); max-width: 460px; }
.adv-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.adv-list li { position: relative; padding-left: 32px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.adv-list li::before {
    content: '✓'; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 700; color: #fff;
}
.adv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.adv-btn-white { background: #fff; color: var(--purple); box-shadow: 0 14px 28px -12px rgba(10, 4, 60, .5); }
.adv-btn-white:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(10, 4, 60, .55); }
.adv-cut { position: relative; align-self: end; padding: 0 clamp(10px, 2.5vw, 40px); }
/* the cutout sliced into 7 vertical strips: each strip falls from above and lands
   at a scattered delay, like rain. Triggered when the banner reveals (.in). */
.adv-rain {
    position: relative; width: min(100%, 400px); margin: clamp(-84px, -6vw, -36px) auto 0;
    aspect-ratio: 5 / 8;
}
/* each strip is a FULL-SIZE copy of the image clipped to its own vertical band,
   so once landed every band aligns pixel-perfect: no visible seams. The 0.2%
   bleed on inner edges swallows anti-aliasing gaps. Per-strip fall distance,
   speed and delay vary so it reads as rain, not a wipe. */
.adv-rain .rs {
    position: absolute; inset: 0;
    background: url('../assets/img/advisor_2.webp') center / 100% 100% no-repeat;
    opacity: 0; transform: translateY(var(--fall, -80px));
}
.adv-rain .rs:nth-child(1)  { clip-path: inset(0 91.467% 0 0);        --fall: -70px;  --d: 1.7s; --dl: .28s; }
.adv-rain .rs:nth-child(2)  { clip-path: inset(0 83.133% 0 8.133%);   --fall: -95px;  --d: 2s;   --dl: .05s; }
.adv-rain .rs:nth-child(3)  { clip-path: inset(0 74.8% 0 16.467%);    --fall: -60px;  --d: 1.6s; --dl: .48s; }
.adv-rain .rs:nth-child(4)  { clip-path: inset(0 66.467% 0 24.8%);    --fall: -105px; --d: 2.1s; --dl: .14s; }
.adv-rain .rs:nth-child(5)  { clip-path: inset(0 58.133% 0 33.133%);  --fall: -80px;  --d: 1.8s; --dl: .6s; }
.adv-rain .rs:nth-child(6)  { clip-path: inset(0 49.8% 0 41.467%);    --fall: -65px;  --d: 1.7s; --dl: .02s; }
.adv-rain .rs:nth-child(7)  { clip-path: inset(0 41.467% 0 49.8%);    --fall: -110px; --d: 2.2s; --dl: .34s; }
.adv-rain .rs:nth-child(8)  { clip-path: inset(0 33.133% 0 58.133%);  --fall: -75px;  --d: 1.8s; --dl: .52s; }
.adv-rain .rs:nth-child(9)  { clip-path: inset(0 24.8% 0 66.467%);    --fall: -90px;  --d: 2s;   --dl: .1s; }
.adv-rain .rs:nth-child(10) { clip-path: inset(0 16.467% 0 74.8%);    --fall: -60px;  --d: 1.6s; --dl: .66s; }
.adv-rain .rs:nth-child(11) { clip-path: inset(0 8.133% 0 83.133%);   --fall: -100px; --d: 2.1s; --dl: .22s; }
.adv-rain .rs:nth-child(12) { clip-path: inset(0 0 0 91.467%);        --fall: -80px;  --d: 1.9s; --dl: .4s; }
.adv-banner.in .rs { animation: rain-in var(--d, 1.9s) cubic-bezier(.16, 1, .3, 1) var(--dl, 0s) forwards; }
@keyframes rain-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .adv-rain .rs { opacity: 1; transform: none; animation: none !important; }
}
/* credential tag over the cutout: name matches the BNM FAR listing, so it's verifiable */
.adv-id {
    position: absolute; left: 50%; bottom: clamp(16px, 3vw, 30px);
    width: min(92%, 330px); text-align: center;
    background: rgba(18, 10, 58, .55); border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 14px; padding: 13px 16px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 34px -16px rgba(8, 3, 40, .6);
    /* hidden until the rain strips have mostly landed */
    opacity: 0; transform: translate(-50%, 14px);
    transition: opacity .8s ease 1.6s, transform .8s ease 1.6s;
}
.adv-banner.in .adv-id { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
    .adv-id { opacity: 1; transform: translate(-50%, 0); transition: none; }
}
.ai-name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.ai-role { margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, .82); }
.ai-firm { font-size: 11.5px; color: rgba(255, 255, 255, .62); }
.ai-verify {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    font-size: 11px; font-weight: 600; color: #fff;
    background: rgba(80, 220, 140, .18); border: 1px solid rgba(120, 230, 165, .45);
    border-radius: 999px; padding: 4px 11px;
    transition: background .18s, border-color .18s;
}
.ai-verify:hover { background: rgba(80, 220, 140, .3); border-color: rgba(150, 240, 185, .7); }
@media (max-width: 900px) {
    .adv-banner { grid-template-columns: 1fr; gap: 0; text-align: center; }
    .adv-copy { padding: clamp(28px, 6vw, 44px) clamp(22px, 5vw, 40px) 0; }
    .adv-copy p { margin: 0 auto; }
    .adv-list { justify-items: center; }
    .adv-list li { text-align: left; }
    .adv-actions { justify-content: center; }
    .adv-rain { width: min(72%, 330px); margin-top: 20px; }
}

/* stats band */
.stats-band { padding: clamp(48px, 7vw, 84px) 0; background: var(--white); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-blk { text-align: center; padding: 10px clamp(16px, 3vw, 40px); position: relative; }
.stat-blk + .stat-blk::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 64px; width: 1px; background: var(--border); }
.sb-num { font-size: clamp(40px, 6vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.sb-cap { margin-top: 10px; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gray); }

/* mission pair */
.mission { padding-top: clamp(30px, 5vw, 54px); }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mission-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--purple-light); }
.mission-card .mc-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; box-shadow: 0 10px 22px -10px rgba(51, 0, 255, .5); }
.mission-card h3 { font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.mission-card p { font-size: 15px; }

/* why work with us (replaced the placeholder team grid) */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.why-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: clamp(24px, 3vw, 34px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--purple-light); }
.wc-num { font-family: var(--serif); font-style: italic; font-size: 38px; line-height: 1; color: var(--purple-light); display: block; }
.why-card h4 { font-size: 20px; font-weight: 500; margin: 14px 0 8px; }
.why-card p { font-size: 14.5px; color: var(--gray); line-height: 1.65; }
.why-card p a { color: var(--purple); font-weight: 500; }
.why-card p a:hover { text-decoration: underline; }

/* values */
.values { background: var(--bg); }
/* profession pages: fixed risk-scene "windows" — the bg anchors to the viewport
   (background-attachment: fixed) so Exposure, What's Covered and FAQ all reveal
   the SAME still scene while the light sections between them slide over it. */
.bg-window { position: relative; overflow: hidden; background-color: #14102e; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.bg-window::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(11,8,36,.68) 0%, rgba(11,8,36,.42) 45%, rgba(11,8,36,.7) 100%); }
.bg-window > .container { position: relative; z-index: 1; }
.bg-window .section-head h2, .bg-window .faq-intro h2 { color: #fff; text-shadow: 0 2px 18px rgba(5, 3, 24, .5); }
.bg-window .em { color: var(--purple-light); }
.bg-window .lead { color: rgba(255, 255, 255, .85); }
.bg-window .eyebrow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* covered checklist reads on the dark scene */
.bg-window .pc-list li { color: rgba(255, 255, 255, .88); }
.bg-window .pc-list li::before { background: rgba(255, 255, 255, .16); color: #fff; }
/* light window: same fixed scene behind a translucent white veil (prof pages' CTA band) —
   the scene ghosts through so Exposure → FAQ reads as one continuous backdrop */
.bg-window.light::before { background: rgba(255, 255, 255, .84); }
/* iOS/touch: fixed attachment is unsupported/janky — degrade to normal scroll */
@media (hover: none), (max-width: 900px) {
    .bg-window, .about { background-attachment: scroll; }
}
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--purple-light); }
.value-card .vc-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(51, 0, 255, .08); color: var(--purple); display: grid; place-items: center; font-size: 20px; margin-bottom: 16px; }
.value-card h4 { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.value-card p { font-size: 14px; }

/* reviews carousel (about) */
.rev-carousel { position: relative; }
.rev-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 8px; scroll-behavior: smooth; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-track .rev-card { flex: 0 0 clamp(280px, 32%, 360px); scroll-snap-align: start; }
.rev-nav { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }

/* faq */
.faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.faq-intro h2 { margin: 16px 0 14px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 22px; box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 0; font-weight: 500; font-size: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { color: var(--purple); font-weight: 600; }
.faq-plus { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; font-size: 18px; color: var(--ink); transition: transform .25s ease, background .25s ease, color .25s ease; flex-shrink: 0; }
.faq-item[open] .faq-plus { transform: rotate(45deg); background: var(--grad); color: #fff; }
.faq-a { padding: 0 0 20px 34px; font-size: 14.5px; color: var(--gray); line-height: 1.6; }

@media (max-width: 900px) {
    .mission-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .stats-row { grid-template-columns: 1fr; gap: 30px; }
    .stat-blk + .stat-blk::before { display: none; }
    .why-grid, .values-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Reveal-on-scroll utility (IntersectionObserver adds .in)
   ============================================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* =============================================================================
   BLOG ARTICLE — long-form reading layout
   ============================================================================= */
.article-hero {
    padding: calc(var(--nav-h) + 56px) 0 clamp(28px, 4vw, 48px);
    background:
        radial-gradient(120% 60% at 50% -5%, rgba(165, 143, 255, .45) 0%, rgba(165, 143, 255, .1) 40%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #efeaff 0%, #ffffff 85%);
}
.article-hero .container { max-width: 820px; }
.article-hero h1 { margin: 20px 0 16px; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.02em; }
.art-meta { font-size: 14px; color: var(--gray); }

.article-body { padding: clamp(16px, 3vw, 32px) 0 clamp(64px, 9vw, 110px); }
.article-body .container { max-width: 760px; }
.article-body h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; margin: 44px 0 16px; }
.article-body p { font-size: 17px; line-height: 1.75; color: var(--gray); margin: 0 0 18px; }
.article-body p strong { color: var(--ink); }
.article-body a { color: var(--purple); font-weight: 500; }
.article-body a:hover { text-decoration: underline; }

.art-quote {
    font-family: 'Instrument Serif', serif; font-style: italic;
    font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5; color: var(--ink);
    border-left: 3px solid var(--purple); background: rgba(51, 0, 255, .045);
    padding: 20px 26px; border-radius: 0 16px 16px 0; margin: 30px 0;
}
.art-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.art-list li { position: relative; padding-left: 32px; font-size: 16.5px; line-height: 1.65; color: var(--gray); }
.art-list li strong { color: var(--ink); }
.art-list li::before {
    content: '✓'; position: absolute; left: 0; top: 3px;
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(51, 0, 255, .08); color: var(--purple); font-size: 12px; font-weight: 700;
}
.art-note {
    background: var(--white); border: 1px solid var(--border); border-radius: 16px;
    padding: 22px 26px; box-shadow: var(--shadow-sm); margin: 30px 0;
    font-size: 16.5px; line-height: 1.65; color: var(--gray);
}
.art-note strong { color: var(--ink); }
.art-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(135deg, #8d6bff 0%, #5b2eff 55%, #3300ff 100%);
    border-radius: 22px; padding: clamp(26px, 4vw, 40px); margin-top: 48px;
    box-shadow: 0 30px 60px -24px rgba(51, 0, 255, .45);
}
.art-cta h3 { color: #fff; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em; }
.art-cta p { color: rgba(255, 255, 255, .85); font-size: 14.5px; margin: 6px 0 0; }
.art-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================================================
   ADVISOR BIO — "Hi, I'm Saliza" story (about.html #advisor)
   ============================================================================= */
.bio { background: var(--white); scroll-margin-top: calc(var(--nav-h) + 10px); }
.bio-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.bio-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.bio-side h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 18px 0 26px; }
.bio-tag {
    background: var(--grad); color: #fff; border-radius: var(--radius);
    padding: 26px 28px; box-shadow: var(--shadow); display: grid; gap: 2px;
}
.bio-tag .bt-line { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; }
.bio-tag .bt-sub { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.bio-body p { color: var(--gray); font-size: clamp(15px, 1.35vw, 17px); line-height: 1.75; margin-bottom: 20px; }
.bio-quote {
    margin-top: 28px; padding: 6px 0 6px 24px; border-left: 3px solid var(--purple);
    font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.5; color: var(--ink);
}
@media (max-width: 860px) {
    .bio-grid { grid-template-columns: 1fr; }
    .bio-side { position: static; }
}

/* ---- About-the-author box (blog articles) ---- */
.author-box {
    display: flex; gap: 20px; align-items: flex-start; margin-top: 34px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: clamp(20px, 3vw, 28px);
}
.ab-photo {
    width: 74px; height: 74px; flex: 0 0 74px; border-radius: 50%;
    background: var(--grad-soft); object-fit: cover; object-position: 50% 0%;
}
.ab-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.ab-name { font-weight: 600; font-size: 17px; margin: 4px 0 6px; color: var(--ink); }
.author-box p { font-size: 14px; color: var(--gray); line-height: 1.65; margin: 0 0 10px; }
.author-box .ab-more { font-size: 14px; font-weight: 600; color: var(--purple); }
.author-box .ab-more:hover { text-decoration: underline; }
@media (max-width: 480px) { .author-box { flex-direction: column; } }

/* =============================================================================
   PERSONAL TAKAFUL PRODUCT PAGES (medical-card / motor / travel / hibah)
   ============================================================================= */
/* excluded item inside a pc-list (plan type comparisons) */
.pc-list li.no { color: rgba(93, 93, 93, .55); }
.pc-list li.no::before { content: '\2715'; background: rgba(25, 25, 25, .06); color: rgba(93, 93, 93, .6); }
.price-card.featured .pc-list li.no { color: rgba(255, 255, 255, .55); }
.price-card.featured .pc-list li.no::before { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); }

/* simple comparison table (NCD rates, hibah vs faraid) */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp-table th { background: var(--bg); text-align: left; padding: 14px 18px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp-table td { padding: 13px 18px; border-top: 1px solid var(--border); color: var(--gray); }
.cmp-table .hl { color: var(--purple); font-weight: 600; }
.cmp-table th.feat, .cmp-table td.feat { background: rgba(51, 0, 255, .05); }
.cmp-note { font-size: 13px; color: var(--gray); margin-top: 14px; text-align: center; }

/* ---- nav "Products" dropdown ---- */
.nav-drop { position: relative; }
.nav-drop > a .nd-caret { font-size: 10px; line-height: 1; color: var(--gray); transition: transform .2s ease; }
.nav-drop:hover > a .nd-caret { transform: translateY(1px); color: var(--purple); }
/* invisible bridge keeps hover alive across the gap to the panel */
.nav-drop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nd-menu {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 235px; background: var(--white); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 60;
}
.nav-drop:hover .nd-menu, .nav-drop:focus-within .nd-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-links .nd-menu a { display: flex; width: 100%; border-radius: 10px; font-size: 14.5px; padding: 10px 14px; }
@media (max-width: 940px) {
    /* mobile panel: dropdown renders expanded in place */
    .nav-drop { position: static; }
    .nav-drop::after { display: none; }
    .nav-drop > a .nd-caret { display: none; }
    .nd-menu {
        position: static; transform: none; opacity: 1; visibility: visible;
        min-width: 0; border: none; box-shadow: none; border-radius: 0;
        padding: 0 0 4px 14px;
    }
    .nav-links .nd-menu a { padding: 11px 16px; }
}

/* ---- homepage cross-sell strip: personal takaful products ---- */
/* Beyond Your Practice: branded logo wall sits fixed behind the section, so the
   image stays static while the next section (blog) scrolls up and covers it.
   A white scrim keeps the heading + cards readable; the top/bottom fade to solid
   white blends the fixed panel into the neighbouring sections (no hard edge). */
.brandwall {
    position: relative;
    /* clips the fixed ::before to this section's box, turning it into a
       "window" onto a viewport-fixed fullscreen brand layer. Unlike
       background-attachment: fixed, this works on iOS Safari too. */
    clip-path: inset(0);
}
.brandwall::before {
    content: '';
    position: fixed; inset: 0;      /* fullscreen, stays put while scrolling */
    z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(180deg,
            #ffffff 0%,
            rgba(255, 255, 255, .74) 16%,
            rgba(255, 255, 255, .74) 84%,
            #ffffff 100%),
        url('../assets/img/bg-bg01.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* portrait cover-crop would show only the middle of the wide logo lockup:
   bias towards the 3D "P" mark so the brand stays recognisable on phones */
@media (max-width: 768px) {
    .brandwall::before { background-position: 20% center; }
}

.xsell-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
a.xsell-card {
    display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.xsell-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--purple-light); }
.xs-ico {
    width: 48px; height: 48px; border-radius: 13px; background: var(--grad); color: #fff;
    display: grid; place-items: center; font-size: 21px; margin-bottom: 16px;
    box-shadow: 0 10px 22px -10px rgba(51, 0, 255, .5);
}
.xsell-card h4 { font-size: 18.5px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.xsell-card p { font-size: 14px; color: var(--gray); line-height: 1.6; flex: 1; }
.xs-more { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--purple); }
a.xsell-card:hover .xs-more { text-decoration: underline; }
@media (max-width: 1000px) { .xsell-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .xsell-grid { grid-template-columns: 1fr; } }

/* ---- motor takaful hero: car drives in from the right, layered behind the copy ----
   Anchored to the right edge on desktop so the driver's face sits clear of the copy.
   Centering uses `right`/`margin` (not transform) so the drive-in transform is free. */
.mt-hero { position: relative; overflow: hidden; padding-bottom: clamp(40px, 6vw, 80px); }
.mt-hero .container { position: relative; z-index: 1; }
.mt-car {
    position: absolute; right: -2%; bottom: 26px; z-index: 0;
    width: min(74%, 1000px);
    animation: mt-drive-in 2.6s cubic-bezier(.16, 1, .3, 1) .3s backwards;
    pointer-events: none;
}
@keyframes mt-drive-in {
    from { transform: translateX(58vw); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mt-car { animation: none; } }
/* the lead sits over the car, so darken + slightly bolden it for legibility */
.mt-hero .lead { color: #232323; font-weight: 500; }
/* mobile: bigger car pinned to the RIGHT edge, lifted into the middle of the hero */
@media (max-width: 640px) {
    .mt-car { left: auto; right: -30%; margin-left: 0; width: 130%; bottom: auto; top: 46%; }
    /* stronger glow keeps the lead crisp where it sits over the car */
    .mt-hero .section-head::before {
        inset: -20px -24px;
        background: radial-gradient(closest-side, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .82) 62%, rgba(255, 255, 255, 0) 100%);
    }
}

/* soft white glow behind the hero copy so it stays readable over the car layer */
.mt-hero .section-head { position: relative; }
.mt-hero .section-head::before {
    content: ''; position: absolute; inset: -30px -80px; z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* ---- travel takaful hero: advisor figure stands to the right, slides in like the motor car ---- */
.tt-hero { position: relative; overflow: hidden; padding-bottom: 0; }
.tt-hero .container { position: relative; z-index: 1; }
.tt-figure {
    position: absolute; right: 9%; bottom: 0; z-index: 0;
    height: min(90%, 640px); width: auto;
    animation: mt-drive-in 2.6s cubic-bezier(.16, 1, .3, 1) .3s backwards;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .tt-figure { animation: none; } }
.tt-hero .lead { color: #232323; font-weight: 500; }
.tt-hero .section-head { position: relative; }
.tt-hero .section-head::before {
    content: ''; position: absolute; inset: -30px -70px; z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .62) 56%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
/* mobile: figure sized by HEIGHT (not width, or a tall figure blows up) and
   parked bottom-right behind the copy, so the text above it stays clear */
@media (max-width: 640px) {
    .tt-figure { right: -14%; height: clamp(700px, 90vh, 560px); width: auto; bottom: 0; }
    .tt-hero .section-head::before {
        inset: -18px -20px;
        background: radial-gradient(closest-side, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .84) 60%, rgba(255, 255, 255, .1) 100%);
    }
}

/* ---- medical card hero: advisor figure to the right, same treatment as travel ---- */
.mk-hero { position: relative; overflow: hidden; padding-bottom: 0; }
.mk-hero .container { position: relative; z-index: 1; }
.mk-figure {
    position: absolute; right: 7%; bottom: 0; z-index: 0;
    height: min(96%, 620px); width: auto;
    animation: mt-drive-in 2.6s cubic-bezier(.16, 1, .3, 1) .3s backwards;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 94%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .mk-figure { animation: none; } }
.mk-hero .lead { color: #232323; font-weight: 500; }
.mk-hero .section-head { position: relative; }
.mk-hero .section-head::before {
    content: ''; position: absolute; inset: -30px -70px; z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .62) 56%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
@media (max-width: 640px) {
    .mk-figure { left: -20%; right: auto; height: clamp(560px, 82vh, 720px); width: auto; bottom: 0; }
    .mk-hero .section-head::before {
        inset: -18px -20px;
        background: radial-gradient(closest-side, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .84) 60%, rgba(255, 255, 255, .1) 100%);
    }
}

/* ---- hibah hero: the protected family, same treatment as travel (wide group, sits right) ---- */
.hb-hero { position: relative; overflow: hidden; padding-bottom: 0; }
.hb-hero .container { position: relative; z-index: 1; }
.hb-figure {
    position: absolute; right: 0; bottom: 0; z-index: 0;
    height: min(88%, 560px); width: auto;
    animation: mt-drive-in 2.6s cubic-bezier(.16, 1, .3, 1) .3s backwards;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 95%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 95%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .hb-figure { animation: none; } }
.hb-hero .lead { color: #232323; font-weight: 500; }
.hb-hero .section-head { position: relative; }
.hb-hero .section-head::before {
    content: ''; position: absolute; inset: -30px -70px; z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .64) 56%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
@media (max-width: 640px) {
    .hb-figure { right: -16%; height: auto; width: 128%; bottom: 0; }
    .hb-hero .section-head::before {
        inset: -18px -20px;
        background: radial-gradient(closest-side, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .85) 60%, rgba(255, 255, 255, .12) 100%);
    }
}

/* =============================================================================
   MOBILE PINNED HERO FIGURE (product pages) — figure fixes to the viewport and
   stays put; the following opaque sections simply scroll over (cover) it. No JS.
   ============================================================================= */
@media (max-width: 640px) {
    .tt-figure, .mk-figure, .hb-figure, .mt-car { position: fixed; z-index: 0; }
    /* every section/footer after each hero sits above the pinned figure so they
       scroll over (cover) it smoothly — the figure just stays put, no JS hiding */
    .tt-hero ~ section, .tt-hero ~ footer,
    .mk-hero ~ section, .mk-hero ~ footer,
    .hb-hero ~ section, .hb-hero ~ footer,
    .mt-hero ~ section, .mt-hero ~ footer { position: relative; z-index: 1; }
    /* plain sections are see-through (they only show the page's white); give them
       an explicit opaque fill so the fixed figure can never bleed through them */
    .tt-hero ~ section:not(.values),
    .mk-hero ~ section:not(.values),
    .hb-hero ~ section:not(.values),
    .mt-hero ~ section:not(.values) { background-color: var(--white); }
}