/* ==========================================================================
   Ilaj Fil Hind — public theme
   Layered on top of Bootstrap 5.3 (public/vendor/bootstrap). No build step.
   RTL-first: every directional rule uses logical properties, so the only
   difference between locales is which Bootstrap sheet the layout links.
   ========================================================================== */

:root {
    /* Brand — clinical blue with a cyan accent. */
    --brand: #0B4F8C;
    --brand-700: #093F70;
    --brand-600: #0F6FC5;
    --brand-300: #7FB6E6;
    --brand-wash: #EAF3FB;
    --brand-wash-2: #D8E9F7;

    --accent: #12B5C9;
    --accent-600: #0E96A7;
    --accent-wash: #E4F7FA;

    /* Gold is reserved for money — prices, offers, savings. Nothing else. */
    --gold: #E9A23B;
    --gold-700: #B97C1E;
    --gold-wash: #FDF4E4;

    --ink: #0C1B2A;
    --ink-2: #44586B;
    --ink-3: #7389A0;

    --ground: #FFFFFF;
    --tint: #F2F8FC;
    --tint-2: #E8F2F9;
    --line: #E1EBF2;
    --line-2: #C9DBE8;

    --wa: #25D366;
    --wa-700: #1EA952;
    --star: #F5A524;
    --danger: #D64545;
    --danger-wash: #FCEDED;
    --success: #1C8C5B;
    --success-wash: #E7F6EF;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(12, 27, 42, .06), 0 1px 3px rgba(12, 27, 42, .04);
    --shadow: 0 4px 16px rgba(12, 27, 42, .07), 0 1px 3px rgba(12, 27, 42, .05);
    --shadow-lg: 0 18px 48px rgba(11, 79, 140, .14);

    --font-head: "Readex Pro", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Hand Bootstrap the brand so its own components inherit it. */
    --bs-primary: #0B4F8C;
    --bs-primary-rgb: 11, 79, 140;
    --bs-link-color: #0B4F8C;
    --bs-link-color-rgb: 11, 79, 140;
    --bs-link-hover-color: #0F6FC5;
    --bs-body-color: #0C1B2A;
    --bs-body-color-rgb: 12, 27, 42;
    --bs-body-bg: #FFFFFF;
    --bs-border-color: #E1EBF2;
    --bs-border-radius: 16px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 24px;
    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.75;
    --bs-emphasis-color: #0C1B2A;
    --bs-secondary-color: #44586B;
    --bs-tertiary-bg: #F2F8FC;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

/* Guard against horizontal overflow — Bootstrap parks the off-canvas mobile
   menu at translateX(100%), and because the sticky header uses backdrop-filter
   (which makes it the menu's containing block) that pushed the page to double
   width on phones. overflow-x: clip clips it WITHOUT creating a scroll
   container, so the sticky header and sidebar keep working (unlike hidden). */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[lang="ar"] body {
    font-size: 16.5px;
    line-height: 1.85;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    text-wrap: balance;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
    line-height: 1.45;
    letter-spacing: 0;
}

h1, .h1 { font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.15rem, .98rem + .7vw, 1.45rem); }

a { text-decoration: none; }
a:hover { color: var(--brand-600); }

/* Latin numerals, prices and phone numbers must never be bidi-reordered. */
.num, .price, .tel, time, .stat-value {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--brand-wash-2); color: var(--brand-700); }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(48px, 6vw, 88px); }
.section--sm { padding-block: clamp(32px, 4vw, 56px); }
.section--tint { background: var(--tint); }
.section--wash { background: linear-gradient(180deg, var(--brand-wash) 0%, #fff 100%); }
.section--ink { background: var(--ink); color: #DCE8F2; }
.section--ink h2, .section--ink h3 { color: #fff; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin-block-end: .6rem;
}

.eyebrow::before {
    content: "";
    inline-size: 22px;
    block-size: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.sec-head { margin-block-end: clamp(24px, 3vw, 40px); }
.sec-head p { color: var(--ink-2); max-width: 62ch; margin-block-end: 0; }
.sec-head.text-center p { margin-inline: auto; }
.sec-head.text-center .eyebrow { justify-content: center; }

.lede { font-size: 1.08rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .68rem;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-border-radius: 999px;
    font-family: var(--font-head);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn:active { transform: translateY(1px); }

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    box-shadow: 0 6px 18px rgba(11, 79, 140, .22);
}

.btn-brand:hover { box-shadow: 0 10px 26px rgba(11, 79, 140, .28); }

.btn-accent {
    --bs-btn-color: #04323A;
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #04323A;
    --bs-btn-hover-bg: var(--accent-600);
    --bs-btn-hover-border-color: var(--accent-600);
}

.btn-outline-brand {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--line-2);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--brand-700);
    --bs-btn-hover-bg: var(--brand-wash);
    --bs-btn-hover-border-color: var(--brand-300);
}

.btn-wa {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--wa);
    --bs-btn-border-color: var(--wa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wa-700);
    --bs-btn-hover-border-color: var(--wa-700);
    box-shadow: 0 6px 18px rgba(37, 211, 102, .25);
}

.btn-light-glass {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, .14);
    --bs-btn-border-color: rgba(255, 255, 255, .38);
    --bs-btn-hover-color: var(--brand-700);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    backdrop-filter: blur(6px);
}

/* Directional glyphs mirror in RTL. Bootstrap Icons are drawn LTR, so an
   "arrow-right" meaning "onwards" points the wrong way in Arabic. Markup
   always uses the LTR-semantic name and this rule flips it. */
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-chevron-left,
[dir="rtl"] .icon-flip { display: inline-block; transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--brand-700);
    color: #CFE3F4;
    font-size: .875rem;
    padding-block: .45rem;
}

.topbar a { color: #fff; }
.topbar a:hover { color: var(--accent); }

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--line);
    transition: box-shadow .2s ease;
}

.site-header.is-stuck { box-shadow: 0 6px 24px rgba(12, 27, 42, .08); }

/* Below the navbar's lg breakpoint the header holds a fixed off-canvas menu.
   A backdrop-filter on the header makes it the menu's containing block, which
   collapses the OPEN menu to the header's height (the nav links vanish). Drop
   it on mobile — the desktop frosted header is untouched, since there the menu
   is an inline nav, not a fixed off-canvas. */
@media (max-width: 991.98px) {
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
    }
}

.brand-link { display: inline-flex; align-items: center; gap: .65rem; }

/* The lockup carries the name itself, so the header shows the artwork alone.
   Height-driven sizing keeps it crisp whatever the file's pixel width is. */
.brand-logo {
    block-size: 36px;
    inline-size: auto;
    max-inline-size: 100%;
}

.brand-logo-mark {
    block-size: 40px;
    inline-size: auto;
}

.main-nav .nav-link {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--ink-2);
    padding-inline: .85rem;
    border-radius: 999px;
}

.main-nav .nav-link:hover { color: var(--brand); background: var(--brand-wash); }
.main-nav .nav-link.active { color: var(--brand); font-weight: 600; }

/* Treatments mega-menu */
.mega-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1.1rem;
    min-inline-size: min(760px, 92vw);
}

.mega-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .92rem;
}

.mega-item:hover { background: var(--brand-wash); color: var(--brand); }
.mega-item i { color: var(--accent); font-size: 1.05rem; }

.lang-switch {
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2);
}

.lang-switch:hover { background: var(--brand-wash); color: var(--brand); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 45%, #0C6FA8 100%);
    color: #fff;
    padding-block: clamp(40px, 6vw, 84px);
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -12%;
    inline-size: 60vw;
    block-size: 60vw;
    max-inline-size: 760px;
    max-block-size: 760px;
    background: radial-gradient(circle, rgba(18, 181, 201, .34) 0%, transparent 62%);
    z-index: -1;
}

.hero::before {
    content: "";
    position: absolute;
    inset-block-end: -40%;
    inset-inline-start: -10%;
    inline-size: 46vw;
    block-size: 46vw;
    background: radial-gradient(circle, rgba(255, 255, 255, .08) 0%, transparent 65%);
    z-index: -1;
}

.hero h1 { color: #fff; }
.hero-lede { color: #CFE3F4; font-size: 1.1rem; max-width: 58ch; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: .34rem .8rem;
    font-size: .82rem;
    font-weight: 500;
    color: #fff;
}

.hero-badge i { color: var(--accent); }

.hero-stat { border-inline-start: 2px solid rgba(255, 255, 255, .22); padding-inline-start: .9rem; }
.hero-stat .stat-value {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.hero-stat .stat-label { font-size: .82rem; color: #BBD6EC; }

.hero-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.25rem, 2vw, 1.9rem);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    block-size: 100%;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-300);
}

.card-title { font-size: 1.08rem; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--brand); }

.card-icon {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 14px;
    background: var(--brand-wash);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.card-icon--accent { background: var(--accent-wash); color: var(--accent-600); }
.card-icon--gold { background: var(--gold-wash); color: var(--gold-700); }

.card-media {
    block-size: 180px;
    object-fit: cover;
    inline-size: 100%;
    background: var(--tint-2);
}

.card-media--sm { block-size: 132px; }

.card-foot {
    border-block-start: 1px solid var(--line);
    padding: .85rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Specialty tile */
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    padding: 1.35rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    block-size: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-300);
    color: var(--brand);
}

.tile i { font-size: 1.7rem; color: var(--accent); }
.tile-name { font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1.35; }
.tile-count { font-size: .78rem; color: var(--ink-3); }

/* Offer card */
.offer {
    position: relative;
    overflow: hidden;
    border-color: var(--gold);
}

.offer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--accent) 100%);
}

.offer .price { color: var(--gold-700); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }
.offer .price-was { color: var(--ink-3); text-decoration: line-through; font-size: .9rem; }

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--tint);
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.6;
}

.chip--brand { background: var(--brand-wash); border-color: var(--brand-wash-2); color: var(--brand); }
.chip--accent { background: var(--accent-wash); border-color: #BFEDF3; color: var(--accent-600); }
.chip--gold { background: var(--gold-wash); border-color: #F5DFB8; color: var(--gold-700); }

.price { font-family: var(--font-head); font-weight: 700; color: var(--brand); }

/* Doctor card */
.doc-photo {
    inline-size: 68px;
    block-size: 68px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-wash);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.4rem;
    flex: 0 0 auto;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--line);
}

.doc-photo--lg { inline-size: 104px; block-size: 104px; font-size: 2rem; }

.doc-stat {
    background: var(--tint);
    border-radius: var(--radius-sm);
    padding: .5rem .7rem;
    text-align: center;
}

.doc-stat .stat-value { font-family: var(--font-head); font-weight: 700; color: var(--brand); font-size: 1.05rem; }
.doc-stat .stat-label { font-size: .72rem; color: var(--ink-3); line-height: 1.3; }

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */

.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.15rem 1.15rem;
    block-size: 100%;
}

.step-no {
    position: absolute;
    inset-block-start: -18px;
    inset-inline-start: 1.15rem;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 160%);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(11, 79, 140, .25);
}

.step h3 { font-size: 1rem; margin-block: .35rem .4rem; }
.step p { font-size: .9rem; color: var(--ink-2); margin-block-end: 0; }

/* --------------------------------------------------------------------------
   Cost comparison table
   -------------------------------------------------------------------------- */

.compare-table { --bs-table-border-color: var(--line); }
.compare-table thead th {
    background: var(--brand);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    border: 0;
    white-space: nowrap;
}
.compare-table thead th:first-child { border-start-start-radius: var(--radius-sm); }
.compare-table thead th:last-child { border-start-end-radius: var(--radius-sm); }
.compare-table tbody td { vertical-align: middle; font-size: .94rem; }
.compare-table .cell-india { background: var(--success-wash); color: var(--success); font-weight: 700; }
.compare-table .cell-save { color: var(--gold-700); font-weight: 700; }

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.table-wrap > .table { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.quote blockquote { margin: 0; color: var(--ink-2); font-size: .97rem; }
.quote blockquote::before { content: "\201C"; font-size: 2.4rem; line-height: 0; color: var(--brand-300); vertical-align: -.35em; margin-inline-end: .15rem; }
.stars { color: var(--star); font-size: .9rem; letter-spacing: .1em; }

.quote-avatar {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: var(--brand-wash);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    flex: 0 0 auto;
}

/* Same circle, but holding a photo: patient snapshots are any aspect ratio. */
img.quote-avatar { object-fit: cover; }

/* --------------------------------------------------------------------------
   Accordion / FAQ
   -------------------------------------------------------------------------- */

.accordion {
    --bs-accordion-border-color: var(--line);
    --bs-accordion-border-radius: var(--radius);
    --bs-accordion-inner-border-radius: var(--radius);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: var(--brand-wash);
    --bs-accordion-active-color: var(--brand);
    --bs-accordion-btn-padding-y: 1.05rem;
}

.accordion-button {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
}

.accordion-item { margin-block-end: .7rem; border-radius: var(--radius) !important; overflow: hidden; }
.accordion-body { color: var(--ink-2); padding-block-start: 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label { font-weight: 600; font-size: .88rem; color: var(--ink-2); margin-block-end: .35rem; }

.form-control, .form-select {
    border-color: var(--line-2);
    border-radius: var(--radius-sm);
    padding: .6rem .85rem;
    font-size: .95rem;
    background-color: #fff;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-300);
    box-shadow: 0 0 0 .2rem rgba(11, 79, 140, .12);
}

.form-control::placeholder { color: var(--ink-3); }
.form-text { font-size: .8rem; color: var(--ink-3); }

/* The honeypot must be reachable by bots and invisible to people. */
.honeypot {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.filters {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Page chrome
   -------------------------------------------------------------------------- */

.page-head {
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 60%, #0C6FA8 100%);
    color: #fff;
    padding-block: clamp(30px, 4vw, 56px);
}

.page-head h1 { color: #fff; margin-block-end: .5rem; }
.page-head p { color: #CFE3F4; margin-block-end: 0; max-width: 70ch; }

.breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5);
    --bs-breadcrumb-item-active-color: #fff;
    font-size: .85rem;
    margin-block-end: .6rem;
}

.breadcrumb a { color: #BBD6EC; }
.breadcrumb a:hover { color: #fff; }

/* Light breadcrumb for pages without a coloured head. */
.breadcrumb--light { --bs-breadcrumb-divider-color: var(--ink-3); --bs-breadcrumb-item-active-color: var(--ink-2); }
.breadcrumb--light a { color: var(--ink-3); }
.breadcrumb--light a:hover { color: var(--brand); }

.sidebar-sticky { position: sticky; inset-block-start: 96px; }

.side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.side-card--wash { background: linear-gradient(160deg, var(--brand-wash) 0%, #fff 100%); border-color: var(--brand-wash-2); }
.side-card--ink { background: var(--ink); color: #CFE3F4; border-color: transparent; }
.side-card--ink h3, .side-card--ink .h3 { color: #fff; }

.spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .55rem;
    border-block-end: 1px dashed var(--line);
    font-size: .92rem;
}

.spec-row:last-child { border-block-end: 0; }
.spec-row dt { color: var(--ink-3); font-weight: 500; margin: 0; }
.spec-row dd { color: var(--ink); font-weight: 600; margin: 0; text-align: end; }

.disclaimer {
    background: var(--gold-wash);
    border: 1px solid #F0DDB5;
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-size: .85rem;
    color: #7A5410;
    display: flex;
    gap: .6rem;
}

.disclaimer i { color: var(--gold-700); flex: 0 0 auto; margin-block-start: .15rem; }

.cta-band {
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 55%, var(--accent-600) 160%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-band::after {
    content: "";
    position: absolute;
    inset-block-start: -50%;
    inset-inline-end: -10%;
    inline-size: 340px;
    block-size: 340px;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 65%);
}

.cta-band h2 { color: #fff; }
.cta-band p { color: #D3E6F5; max-width: 62ch; margin-inline: auto; }

.prose { color: var(--ink-2); }
.prose h2 { font-size: 1.4rem; margin-block: 1.8rem .7rem; color: var(--ink); }
.prose h3 { font-size: 1.12rem; margin-block: 1.4rem .55rem; color: var(--ink); }
.prose p { margin-block-end: 1rem; }
.prose ul, .prose ol { margin-block-end: 1rem; padding-inline-start: 1.35rem; }
.prose li { margin-block-end: .4rem; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-sm); }
.prose blockquote {
    border-inline-start: 3px solid var(--accent);
    background: var(--tint);
    padding: .9rem 1.1rem;
    border-radius: var(--radius-sm);
    margin-block: 1.2rem;
}

.empty-state {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
    color: var(--ink-3);
}

.empty-state i { font-size: 2.6rem; color: var(--line-2); display: block; margin-block-end: .75rem; }

.pagination {
    --bs-pagination-color: var(--ink-2);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-bg: var(--brand-wash);
    --bs-pagination-hover-color: var(--brand);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-border-radius: var(--radius-sm);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(11, 79, 140, .12);
    gap: .3rem;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.post-card .card-media { block-size: 200px; }
.post-meta { font-size: .8rem; color: var(--ink-3); display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.post-body { font-size: 1.04rem; }
.post-body > p:first-of-type { font-size: 1.12rem; color: var(--ink); }

.toc {
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
}

.toc a { color: var(--ink-2); font-size: .9rem; display: block; padding-block: .25rem; }
.toc a:hover { color: var(--brand); }

.share-btn {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--ink-2);
    background: #fff;
}

.share-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: #08192A;
    color: #9FB6C9;
    padding-block: clamp(40px, 5vw, 64px) 0;
}

.site-footer h3, .site-footer .h3 { color: #fff; font-size: 1rem; margin-block-end: 1rem; }
.site-footer a { color: #9FB6C9; font-size: .92rem; }
.site-footer a:hover { color: var(--accent); }
/* The wordmark is navy; on the near-black footer it needs its own paper. */
.site-footer .brand-logo {
    block-size: 38px;
    background: #fff;
    padding: .5rem .7rem;
    border-radius: 12px;
}

.footer-links li { margin-block-end: .5rem; }

.social-btn {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .07);
    color: #CFE3F4;
}

.social-btn:hover { background: var(--brand-600); color: #fff; }

.footer-bottom {
    border-block-start: 1px solid rgba(255, 255, 255, .09);
    margin-block-start: 2.25rem;
    padding-block: 1.1rem;
    font-size: .85rem;
}

.footer-disclaimer {
    background: rgba(0, 0, 0, .25);
    font-size: .78rem;
    color: #7C93A8;
    padding-block: .85rem;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Floating actions
   -------------------------------------------------------------------------- */

.wa-float {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    background: var(--wa);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .42);
    z-index: 1040;
    transition: transform .2s ease;
}

.wa-float:hover { transform: scale(1.07); color: #fff; }

/* Mobile sticky call bar — hidden on desktop, sits under the WhatsApp bubble. */
.mobile-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1035;
    background: #fff;
    border-block-start: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(12, 27, 42, .09);
    display: none;
}

.mobile-bar a {
    flex: 1 1 0;
    padding-block: .7rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.mobile-bar a i { font-size: 1.15rem; color: var(--brand); }
.mobile-bar a.is-primary { background: var(--brand); color: #fff; }
.mobile-bar a.is-primary i { color: #fff; }

@media (max-width: 767.98px) {
    .mobile-bar { display: flex; }
    body { padding-block-end: 64px; }
    .wa-float { inset-block-end: 78px; inline-size: 50px; block-size: 50px; font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--accent-600) !important; }
.text-gold { color: var(--gold-700) !important; }
.text-muted-2 { color: var(--ink-2) !important; }
.bg-tint { background: var(--tint) !important; }
.bg-brand-wash { background: var(--brand-wash) !important; }
.border-line { border-color: var(--line) !important; }
.rounded-brand { border-radius: var(--radius) !important; }
.shadow-brand { box-shadow: var(--shadow) !important; }
.fw-head { font-family: var(--font-head); }

.logo-strip img {
    block-size: 44px;
    inline-size: auto;
    max-inline-size: 140px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .2s ease, opacity .2s ease;
}

.logo-strip a:hover img { filter: none; opacity: 1; }

.ratio-cover { object-fit: cover; inline-size: 100%; block-size: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .topbar, .site-footer, .wa-float, .mobile-bar, .cta-band, .filters, form { display: none !important; }
    body { padding: 0; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}