/* ==========================================================================
   Medons India — public design system
   Hand-written, dependency-free CSS. No framework is loaded on the public
   site, so the critical path stays small and PageSpeed stays high.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    /* Brand */
    --navy-900: #101a3f;
    --navy-800: #16235a;
    --navy-700: #1d2b6b;
    --navy-600: #27377f;
    --navy-500: #3a4c9a;
    --navy-100: #e8ebf6;
    --navy-050: #f4f6fc;

    --gold-600: #c98a09;
    --gold-500: #f0b429;
    --gold-400: #f7c948;
    --gold-100: #fdf3d8;

    --teal-600: #0d7f76;
    --teal-500: #13a396;
    --teal-100: #dff4f1;

    /* Neutrals */
    --ink-900: #14181f;
    --ink-700: #333c4a;
    --ink-600: #4b5565;
    --ink-500: #697586;
    --ink-400: #98a2b3;
    --ink-300: #cdd5e0;
    --ink-200: #e3e8ef;
    --ink-100: #f2f4f7;
    --ink-050: #f8fafc;
    --white: #ffffff;

    --success: #0f7a3d;
    --danger: #b3261e;
    --warning: #b76e00;

    /* Type */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-head: "Segoe UI Semibold", var(--font-sans);

    --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.88rem);
    --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
    --step-1: clamp(1.12rem, 1.05rem + 0.32vw, 1.3rem);
    --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
    --step-3: clamp(1.65rem, 1.35rem + 1.35vw, 2.4rem);
    --step-4: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);

    /* Space */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 5.5rem;

    /* Shape */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 26, 63, 0.06);
    --shadow-sm: 0 2px 8px rgba(16, 26, 63, 0.07);
    --shadow-md: 0 8px 24px rgba(16, 26, 63, 0.09);
    --shadow-lg: 0 20px 48px rgba(16, 26, 63, 0.14);

    --container: 1200px;
    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------- resets */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.22;
    color: var(--navy-800);
    letter-spacing: -0.015em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); }

p { margin: 0 0 var(--sp-4); }

a {
    color: var(--navy-600);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--gold-600); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--gold-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--ink-200); margin: var(--sp-6) 0; }

table { border-collapse: collapse; width: 100%; }

figure { margin: 0 0 var(--sp-4); }

blockquote {
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--gold-500);
    background: var(--navy-050);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-700);
    font-size: var(--step-1);
}

blockquote p:last-child { margin-bottom: 0; }

code {
    background: var(--ink-100);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--navy-800);
    color: #fff;
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- layout */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--sp-5); }
}

.section { padding-block: var(--sp-8); }

@media (min-width: 992px) {
    .section { padding-block: var(--sp-9); }
}

.section--tight { padding-block: var(--sp-7); }
.section--light { background: var(--ink-050); }
.section--navy { background: var(--navy-800); color: rgba(255, 255, 255, 0.82); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--brand {
    background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-700) 100%);
    color: rgba(255, 255, 255, 0.86);
}
.section--brand h1, .section--brand h2, .section--brand h3 { color: #fff; }
.section--gradient { background: linear-gradient(180deg, var(--navy-050) 0%, var(--white) 100%); }

.grid { display: grid; gap: var(--sp-5); }

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--products { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.split {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
}

@media (min-width: 992px) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
    .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
    .split--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.stack > * + * { margin-top: var(--sp-4); }
.flow > * + * { margin-top: var(--sp-3); }

/* ----------------------------------------------------------- headings */
.section-head {
    max-width: 720px;
    margin-bottom: var(--sp-6);
}

.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: var(--sp-3);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--gold-500);
    border-radius: 2px;
}

.section--navy .eyebrow, .section--brand .eyebrow { color: var(--gold-400); }
.section-head--center .eyebrow::before { display: none; }

.section-head p { color: var(--ink-600); font-size: var(--step-1); margin-bottom: 0; }
.section--navy .section-head p, .section--brand .section-head p { color: rgba(255, 255, 255, 0.78); }

.lead { font-size: var(--step-1); color: var(--ink-600); }

/* ------------------------------------------------------------ buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn--primary {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--gold {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-900);
    box-shadow: var(--shadow-sm);
}

.btn--gold:hover {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--navy-900);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    background: transparent;
    border-color: var(--ink-300);
    color: var(--navy-700);
}

.btn--outline:hover { border-color: var(--navy-600); background: var(--navy-050); color: var(--navy-800); }

.btn--ghost-light {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.btn--sm { padding: 0.5rem 1rem; font-size: var(--step--1); }
.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; }

/* -------------------------------------------------------------- icons */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    vertical-align: -0.125em;
}

.icon--lg { width: 1.5em; height: 1.5em; }

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--navy-100);
    color: var(--navy-700);
    font-size: 1.45rem;
    margin-bottom: var(--sp-3);
}

.icon-badge--gold { background: var(--gold-100); color: var(--gold-600); }
.icon-badge--teal { background: var(--teal-100); color: var(--teal-600); }

/* -------------------------------------------------------------- cards */
.card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.card:hover { box-shadow: var(--shadow-md); border-color: var(--navy-100); }

.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card--flat { box-shadow: none; }
.card--plain { border: 0; padding: 0; background: transparent; }

/* Product card */
.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    transition: box-shadow var(--transition), transform var(--transition);
}

.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--navy-050);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-4); }

.product-card__flags {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.product-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }

.product-card__cat {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--gold-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}

.product-card__title {
    font-size: 1.02rem;
    line-height: 1.35;
    margin-bottom: var(--sp-2);
}

.product-card__title a { color: var(--navy-800); }
.product-card__title a:hover { color: var(--navy-600); }

.product-card__meta {
    font-size: var(--step--1);
    color: var(--ink-500);
    margin-bottom: var(--sp-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__foot {
    margin-top: auto;
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* Post card */
.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--navy-050); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.post-card__title { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.post-card__title a { color: var(--navy-800); }
.post-card__excerpt { color: var(--ink-600); font-size: var(--step--1); margin-bottom: var(--sp-4); }
.post-card__foot { margin-top: auto; }

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--step--1);
    color: var(--ink-500);
}

.meta-row span { display: inline-flex; align-items: center; gap: 0.35em; }

/* Category tile */
.cat-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    height: 100%;
    transition: all var(--transition);
}

.cat-tile:hover {
    border-color: var(--navy-500);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.cat-tile h3 { font-size: 1.05rem; margin: 0; }
.cat-tile p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }
.cat-tile__count {
    margin-top: auto;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--navy-600);
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

/* -------------------------------------------------------------- badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge--gold { background: var(--gold-500); color: var(--navy-900); }
.badge--navy { background: var(--navy-700); color: #fff; }
.badge--teal { background: var(--teal-500); color: #fff; }
.badge--soft { background: var(--navy-100); color: var(--navy-700); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: var(--step--1);
    color: var(--ink-600);
    transition: all var(--transition);
}

.chip:hover, .chip.is-active {
    border-color: var(--navy-600);
    background: var(--navy-700);
    color: #fff;
}

/* --------------------------------------------------------------- forms */
.field { margin-bottom: var(--sp-4); }

.field label,
.form-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--navy-800);
}

.field .req { color: var(--danger); }

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius);
    background: #fff;
    font-family: inherit;
    font-size: var(--step-0);
    color: var(--ink-900);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus, .select:focus, .textarea:focus {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px rgba(58, 76, 154, 0.15);
    outline: none;
}

.input::placeholder, .textarea::placeholder { color: var(--ink-400); }

.textarea { min-height: 120px; resize: vertical; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23697586' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 14px;
    padding-right: 2.2rem;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--step--1);
    color: var(--ink-600);
}

.check input { margin-top: 0.25em; accent-color: var(--navy-600); width: 1rem; height: 1rem; flex: none; }

.field-error {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--step--1);
    color: var(--danger);
}

.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border-color: var(--danger); }

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

.form-grid { display: grid; gap: var(--sp-4); }

@media (min-width: 640px) {
    .form-grid--2 { grid-template-columns: 1fr 1fr; }
    .form-grid .span-2 { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- alerts */
.alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: var(--sp-4);
    font-size: var(--step--1);
}

.alert--success { background: #eaf6ee; border-color: #bfe0cb; color: #0f5c2e; }
.alert--danger { background: #fdecea; border-color: #f5c6c3; color: #8f1d17; }
.alert--info { background: var(--navy-050); border-color: var(--navy-100); color: var(--navy-700); }
.alert--warning { background: #fff6e6; border-color: #ffe0ab; color: #8a5300; }

/* ------------------------------------------------------- announcement */
.announce {
    background: var(--navy-900);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--step--1);
    padding: 0.5rem 0;
}

.announce .container { display: flex; gap: var(--sp-4); align-items: center; justify-content: center; text-align: center; }
.announce a { color: var(--gold-400); font-weight: 600; }
.announce a:hover { color: var(--gold-500); }

/* ------------------------------------------------------------ topbar */
.topbar {
    background: var(--navy-800);
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--step--1);
    padding: 0.45rem 0;
}

.topbar .container { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.topbar a { color: rgba(255, 255, 255, 0.85); }
.topbar a:hover { color: var(--gold-400); }
.topbar__contacts { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.topbar__contacts span, .topbar__contacts a { display: inline-flex; align-items: center; gap: 0.4em; }
.topbar__social { display: flex; gap: var(--sp-3); }

@media (max-width: 767px) {
    .topbar { display: none; }
}

/* ------------------------------------------------------------- header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    transition: box-shadow var(--transition);
}

.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand img { max-height: 52px; width: auto; }
.brand__text { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy-800); line-height: 1.15; }
.brand__text small {
    display: block;
    max-width: 240px;
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--ink-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.header-phone {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--step--1);
    color: var(--ink-600);
}

.header-phone strong { display: block; font-size: var(--step-0); color: var(--navy-800); }

@media (min-width: 1200px) { .header-phone { display: inline-flex; } }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius);
    background: #fff;
    color: var(--navy-800);
    font-size: 1.25rem;
    cursor: pointer;
}

@media (min-width: 1100px) { .nav-toggle { display: none; } }

/* ------------------------------------------------------- primary nav */
.primary-nav { display: none; }

@media (min-width: 1100px) {
    .primary-nav { display: block; }

    .primary-nav > ul {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .primary-nav > ul > li { position: relative; margin: 0; }

    .primary-nav > ul > li > a {
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        padding: 0.75rem 0.85rem;
        font-family: var(--font-head);
        font-size: 0.94rem;
        font-weight: 600;
        color: var(--navy-800);
        border-radius: var(--radius-sm);
        white-space: nowrap;
    }

    .primary-nav > ul > li > a:hover,
    .primary-nav > ul > li.is-active > a { color: var(--navy-600); background: var(--navy-050); }

    .primary-nav > ul > li.is-active > a { box-shadow: inset 0 -2px 0 var(--gold-500); }

    .primary-nav .has-children > a::after {
        content: "";
        width: 0.42em;
        height: 0.42em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform var(--transition);
    }

    .primary-nav .cta > a {
        background: var(--gold-500);
        color: var(--navy-900);
        margin-left: var(--sp-2);
        padding-inline: 1.15rem;
    }

    .primary-nav .cta > a:hover { background: var(--gold-400); color: var(--navy-900); }

    /* Dropdown */
    .primary-nav .submenu {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        min-width: 260px;
        margin: 0;
        padding: var(--sp-2);
        list-style: none;
        background: #fff;
        border: 1px solid var(--ink-200);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: all var(--transition);
        z-index: 60;
    }

    .primary-nav li:hover > .submenu,
    .primary-nav li:focus-within > .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .primary-nav .submenu li { margin: 0; }

    .primary-nav .submenu a {
        display: block;
        padding: 0.55rem 0.75rem;
        border-radius: var(--radius-sm);
        font-size: 0.92rem;
        color: var(--ink-700);
    }

    .primary-nav .submenu a:hover { background: var(--navy-050); color: var(--navy-700); }
    .primary-nav .submenu a small { display: block; font-size: 0.76rem; color: var(--ink-500); }

    /* Mega menu */
    .primary-nav .megamenu {
        position: absolute;
        top: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        width: min(920px, calc(100vw - 3rem));
        padding: var(--sp-5);
        background: #fff;
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
        z-index: 60;
    }

    .primary-nav li:hover > .megamenu,
    .primary-nav li:focus-within > .megamenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .megamenu__grid { display: grid; gap: var(--sp-2) var(--sp-5); }
    .megamenu__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
    .megamenu__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .megamenu__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

    .megamenu__link {
        display: flex;
        gap: var(--sp-3);
        padding: var(--sp-3);
        border-radius: var(--radius);
        transition: background var(--transition);
    }

    .megamenu__link:hover { background: var(--navy-050); }
    .megamenu__link strong { display: block; font-size: 0.94rem; color: var(--navy-800); font-weight: 600; }
    .megamenu__link span { font-size: 0.8rem; color: var(--ink-500); }
    .megamenu__icon { color: var(--navy-600); font-size: 1.1rem; padding-top: 0.15rem; }
}

/* ------------------------------------------------------- mobile nav */
.mobile-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    background: #fff;
    z-index: 200;
    transform: translateX(100%);
    transition: transform var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--ink-200);
}

.mobile-nav__body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-6); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--ink-100); }

.mobile-nav a {
    display: block;
    padding: 0.8rem 0;
    font-weight: 600;
    color: var(--navy-800);
}

.mobile-nav .submenu { padding-left: var(--sp-4); display: none; }
.mobile-nav .submenu.is-open { display: block; }
.mobile-nav .submenu a { font-weight: 500; color: var(--ink-600); font-size: 0.92rem; }
.mobile-nav .submenu li { border-bottom: 0; }

.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }

.submenu-toggle {
    border: 0;
    background: var(--navy-050);
    color: var(--navy-700);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.submenu-toggle[aria-expanded="true"] { background: var(--navy-700); color: #fff; }

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 26, 63, 0.5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- hero */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 50%, var(--navy-600) 100%);
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 82% 18%, rgba(240, 180, 41, 0.22), transparent 45%),
        radial-gradient(circle at 12% 88%, rgba(19, 163, 150, 0.18), transparent 42%);
    pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; padding-block: var(--sp-8); width: 100%; }

.hero__layout { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 992px) {
    .hero__layout { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); }
}

.hero__panel {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    backdrop-filter: blur(6px);
}

.hero__panel h2 {
    font-size: var(--step-1);
    color: #fff;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hero__panel ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }

.hero__panel li {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    margin-bottom: var(--sp-3);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
}

.hero__panel li svg { color: var(--gold-400); margin-top: 0.2rem; flex: none; }
.hero__panel li strong { display: block; color: #fff; font-weight: 600; }

@media (min-width: 992px) { .hero__inner { padding-block: var(--sp-9); min-height: 520px; display: flex; align-items: center; } }

.hero h1 { color: #fff; max-width: 18ch; }
.hero p { font-size: var(--step-1); color: rgba(255, 255, 255, 0.82); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.hero__slide { display: none; }
.hero__slide.is-active { display: block; animation: fade-in 420ms ease; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.hero__dots { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }

.hero__dots button {
    width: 28px;
    height: 4px;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition);
}

.hero__dots button[aria-selected="true"] { background: var(--gold-500); width: 44px; }

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero__trust div { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); color: rgba(255, 255, 255, 0.82); }
.hero__trust svg { color: var(--gold-400); }

/* ---------------------------------------------------------- page head */
.page-head {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: rgba(255, 255, 255, 0.85);
    padding-block: var(--sp-7);
}

.page-head h1 { color: #fff; margin-bottom: var(--sp-2); }
.page-head p { color: rgba(255, 255, 255, 0.8); max-width: 70ch; margin-bottom: 0; }

.breadcrumbs { font-size: var(--step--1); margin-bottom: var(--sp-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.5em; color: rgba(255, 255, 255, 0.65); }
.breadcrumbs li + li::before { content: "/"; color: rgba(255, 255, 255, 0.35); }
.breadcrumbs a { color: rgba(255, 255, 255, 0.85); }
.breadcrumbs a:hover { color: var(--gold-400); }
.breadcrumbs [aria-current] { color: #fff; font-weight: 600; }

.breadcrumbs--light li { color: var(--ink-500); }
.breadcrumbs--light li + li::before { color: var(--ink-300); }
.breadcrumbs--light a { color: var(--navy-600); }
.breadcrumbs--light [aria-current] { color: var(--ink-700); }

/* ------------------------------------------------------------ usp bar */
.usp-strip { border-bottom: 1px solid var(--ink-200); background: #fff; }
.usp-strip .grid { gap: 0; }

.usp {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-5) var(--sp-4);
    border-right: 1px solid var(--ink-200);
}

.usp:last-child { border-right: 0; }
.usp svg { color: var(--gold-600); font-size: 1.5rem; flex: none; margin-top: 0.15rem; }
.usp strong { display: block; color: var(--navy-800); font-size: 0.98rem; }
.usp span { font-size: var(--step--1); color: var(--ink-500); }

@media (max-width: 991px) { .usp { border-right: 0; border-bottom: 1px solid var(--ink-200); } }

/* --------------------------------------------------------------- stats */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); }
.stat { text-align: center; padding: var(--sp-4); background: var(--navy-050); border-radius: var(--radius); }
.stat strong { display: block; font-family: var(--font-head); font-size: var(--step-3); color: var(--navy-700); line-height: 1.1; }
.stat span { font-size: var(--step--1); color: var(--ink-500); }

/* ---------------------------------------------------------- media box */
.media-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--navy-050);
}

.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }

.media-placeholder {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: repeating-linear-gradient(45deg, var(--navy-050), var(--navy-050) 12px, #fff 12px, #fff 24px);
    color: var(--ink-400);
    font-size: var(--step--1);
    text-align: center;
    padding: var(--sp-5);
}

/* -------------------------------------------------------------- video */
.video-facade {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--navy-900);
    cursor: pointer;
    border: 0;
    padding: 0;
    width: 100%;
}

.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity var(--transition), transform var(--transition); }
.video-facade:hover img { opacity: 1; transform: scale(1.03); }

.video-facade__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 4rem;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.video-facade__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    background: linear-gradient(transparent, rgba(16, 26, 63, 0.85));
    color: #fff;
    font-weight: 600;
    text-align: left;
    pointer-events: none;
}

.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------- accordion */
.accordion { border: 1px solid var(--ink-200); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.accordion details { border-bottom: 1px solid var(--ink-200); }
.accordion details:last-child { border-bottom: 0; }

.accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy-800);
    list-style: none;
    transition: background var(--transition);
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--navy-050); }

.accordion summary::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    flex: none;
    border-right: 2px solid var(--navy-600);
    border-bottom: 2px solid var(--navy-600);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
}

.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-600); }
.accordion__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------- testimonials */
.quote-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.quote-card__mark { color: var(--gold-500); font-size: 1.6rem; }
.quote-card blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: var(--step-0); color: var(--ink-700); }
.quote-card__person { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.quote-card__person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote-card__person strong { display: block; color: var(--navy-800); }
.quote-card__person span { font-size: var(--step--1); color: var(--ink-500); }
.stars { color: var(--gold-500); display: inline-flex; gap: 2px; }

/* ------------------------------------------------------------ sidebar */
.sidebar { display: grid; gap: var(--sp-5); }

@media (min-width: 992px) {
    .sidebar--sticky { position: sticky; top: 96px; }
}

.widget { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: var(--sp-5); }
.widget__title { font-size: 1.02rem; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--gold-500); display: inline-block; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin: 0; border-bottom: 1px solid var(--ink-100); }
.widget li:last-child { border-bottom: 0; }

.widget__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.6rem 0;
    color: var(--ink-700);
    font-size: 0.94rem;
}

.widget__link:hover { color: var(--navy-600); }
.widget__count { font-size: 0.75rem; background: var(--navy-050); color: var(--ink-500); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); }

.widget--cta { background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: rgba(255, 255, 255, 0.85); border: 0; }
.widget--cta .widget__title { color: #fff; border-color: var(--gold-500); }

.mini-post { display: flex; gap: var(--sp-3); padding: 0.7rem 0; }
.mini-post img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.mini-post strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--navy-800); line-height: 1.35; }
.mini-post span { font-size: 0.76rem; color: var(--ink-500); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.sidebar-toggle { display: none; }

@media (max-width: 991px) {
    .sidebar-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: var(--sp-4);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius);
        background: #fff;
        font-family: var(--font-head);
        font-weight: 600;
        color: var(--navy-800);
        cursor: pointer;
        margin-bottom: var(--sp-4);
    }

    .sidebar.is-collapsed { display: none; }
}

/* ------------------------------------------------------------- prose */
.prose { font-size: 1.02rem; line-height: 1.8; color: var(--ink-700); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose img { border-radius: var(--radius); margin-block: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li::marker { color: var(--gold-600); }
.prose a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-600); }

.prose table { margin-block: var(--sp-5); font-size: 0.94rem; }
.prose th, .prose td { border: 1px solid var(--ink-200); padding: 0.65rem 0.85rem; text-align: left; }
.prose th { background: var(--navy-050); color: var(--navy-800); font-weight: 600; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------- spec table */
.spec-table { width: 100%; font-size: 0.95rem; }
.spec-table th, .spec-table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--ink-200); text-align: left; vertical-align: top; }
.spec-table th { width: 38%; color: var(--navy-800); font-weight: 600; background: var(--navy-050); }

/* -------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; list-style: none; padding: 0; margin: var(--sp-6) 0 0; }
.pagination li { margin: 0; }

.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.7rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink-700);
    font-size: 0.92rem;
    font-weight: 600;
}

.pagination a:hover { border-color: var(--navy-500); color: var(--navy-700); background: var(--navy-050); }
.pagination .is-current span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pagination .is-disabled span { opacity: 0.45; }

/* --------------------------------------------------------- filter bar */
.filter-bar {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-5);
}

@media (min-width: 768px) { .filter-bar { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); align-items: center; }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.68); font-size: 0.94rem; }
.site-footer a { color: rgba(255, 255, 255, 0.78); }
.site-footer a:hover { color: var(--gold-400); }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-4); }

.footer-main { padding-block: var(--sp-8) var(--sp-6); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }

@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--sp-7); } }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.footer-brand img { max-height: 54px; background: #fff; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); }

.footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer-contact svg { color: var(--gold-400); margin-top: 0.25rem; flex: none; }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.footer-social a:hover { background: var(--gold-500); color: var(--navy-900); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    justify-content: space-between;
    font-size: 0.86rem;
}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-bottom li { margin: 0; }

.footer-disclaimer {
    background: rgba(0, 0, 0, 0.25);
    padding-block: var(--sp-4);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

/* ------------------------------------------------------ floating CTAs */
.float-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 0;
    cursor: pointer;
    transition: transform var(--transition);
}

.float-btn:hover { transform: translateY(-2px); color: #fff; }
.float-btn--whatsapp { background: #25d366; }
.float-btn--phone { background: var(--navy-700); }
.float-btn--top { background: var(--ink-700); opacity: 0; visibility: hidden; }
.float-btn--top.is-visible { opacity: 1; visibility: visible; }

@media (max-width: 767px) {
    .float-stack { bottom: 12px; right: 12px; }
    .float-btn { width: 46px; height: 46px; font-size: 1.3rem; }
}

/* ------------------------------------------------------------- utils */
.text-center { text-align: center; }
.text-muted { color: var(--ink-500); }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.w-100 { width: 100%; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-lg);
    color: var(--ink-500);
    background: var(--ink-050);
}

.empty-state svg { font-size: 2.4rem; color: var(--ink-300); margin-bottom: var(--sp-3); }

/* ------------------------------------------------------------ print */
@media print {
    .site-header, .site-footer, .float-stack, .announce, .topbar, .breadcrumbs { display: none !important; }
    body { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Hero secondary slide titles keep the visual weight of an h1 without
   introducing a second <h1> into the document outline. */
.hero__title {
    font-family: var(--font-head);
    font-size: var(--step-4);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: #fff;
    margin-bottom: var(--sp-3);
    max-width: 18ch;
}

/* Keep both hero CTAs on one line inside the narrower hero column. */
@media (min-width: 992px) {
    .hero__actions .btn--lg { padding: 0.85rem 1.45rem; font-size: var(--step-0); }
}

/* Forms placed inside a dark widget need inverted label/helper colours. */
.widget--cta .field label,
.widget--cta .form-label,
.widget--cta .check span { color: rgba(255, 255, 255, 0.92); }

.widget--cta .check a,
.widget--cta .text-muted { color: var(--gold-400); }
.widget--cta .text-muted { color: rgba(255, 255, 255, 0.6) !important; }
.widget--cta .input,
.widget--cta .textarea,
.widget--cta .select { border-color: rgba(255, 255, 255, 0.25); }
.widget--cta .enquiry-form > p { color: rgba(255, 255, 255, 0.75); }

/* The dark hero panel and navy sections share the same need. */
.section--navy .field label,
.section--brand .field label { color: rgba(255, 255, 255, 0.92); }

/* ---------------------------------------------------------------------------
   Small-phone header.
   At 390px the logo lock-up, the CTA button and the menu button cannot all
   fit. The CTA is duplicated inside the mobile drawer, so it is the one that
   gives way — the menu button must always remain reachable.
   --------------------------------------------------------------------------- */
.site-header__inner { min-width: 0; }
.brand { min-width: 0; flex: 0 1 auto; }
.brand img { max-width: 190px; object-fit: contain; }
.header-actions { flex: none; }

@media (max-width: 600px) {
    .header-actions .btn { display: none; }
    .brand__text { font-size: 1.02rem; }
    .brand__text small { max-width: 180px; font-size: 0.6rem; }
    .site-header__inner { min-height: 62px; gap: var(--sp-2); }
}

@media (max-width: 380px) {
    .brand__text small { display: none; }
}

/* ===========================================================================
   PART 2 — action surfaces, gated download flow and mobile density
   ---------------------------------------------------------------------------
   Everything below was added after the first live review of the site on a
   phone. Three problems were being solved:

     1. Button labels inside the mobile drawer inherited `.mobile-nav a`'s
        colour, which lands later in this file than `.btn--primary`, so the
        white label was repainted navy-on-navy and vanished.
     2. A vertical stack of floating circles is wrong on a phone — it covers
        content and sits where the browser's own chrome appears. Phones now
        get a proper bottom action bar instead.
     3. The homepage was punishingly long on mobile because every card grid
        collapsed to a single column at full desktop padding.
   =========================================================================== */

/* ------------------------------------------------- mobile drawer buttons */
/*
   Specificity fix, not a colour change: `.btn` already declares the right
   colour, it was simply being overridden. These restate it at a specificity
   the drawer's link rule cannot beat.
*/
.mobile-nav .btn--primary,
.mobile-nav .btn--primary:hover { color: #fff; }

.mobile-nav .btn--gold,
.mobile-nav .btn--gold:hover { color: var(--navy-900); }

.mobile-nav .btn--outline { color: var(--navy-700); }
.mobile-nav .btn--outline:hover { color: var(--navy-800); }

.mobile-nav .btn {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-block: 0.8rem;
}

.mobile-nav__cta {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--ink-200);
}

/* Room for the fixed action bar so the last drawer button is never hidden. */
.mobile-nav__body { padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); }

/* ------------------------------------------------- desktop floating stack */
.float-stack { align-items: flex-end; }

.float-btn { position: relative; }

.float-btn--enquiry { background: var(--gold-500); color: var(--navy-900); }
.float-btn--enquiry:hover { color: var(--navy-900); }

/*
   Label slides out of the circle on hover. `max-width` rather than `width`
   keeps it readable at any phone number length without hard-coding one.
*/
.float-btn__tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy-800);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}

.float-btn:hover .float-btn__tip,
.float-btn:focus-visible .float-btn__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-2px);
}

/* ----------------------------------------------------- mobile action bar */
.action-bar { display: none; }

@media (max-width: 767px) {
    /* The circles give way entirely — only "back to top" is kept. */
    .float-stack { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 12px; }
    .float-stack .float-btn:not(.float-btn--top) { display: none; }
    .float-btn__tip { display: none; }

    .action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: #fff;
        border-top: 1px solid var(--ink-200);
        box-shadow: 0 -6px 20px rgba(16, 26, 63, 0.1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .action-bar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* 56px keeps every target above the 44px accessibility minimum. */
        min-height: 56px;
        padding: 0.45rem 0.25rem;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        color: var(--navy-800);
        border-right: 1px solid var(--ink-100);
    }

    .action-bar__item:last-child { border-right: 0; }
    .action-bar__item svg { font-size: 1.2rem; }
    .action-bar__item--whatsapp svg { color: #25d366; }
    .action-bar__item--primary { background: var(--gold-500); color: var(--navy-900); }
    .action-bar__item:active { background: var(--navy-050); }
    .action-bar__item--primary:active { background: var(--gold-400); }

    /*
       Without this the bar covers the last rows of the footer, which is
       exactly where the legal links and the enquiry CTA live.
    */
    .site-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------- mobile density */
/*
   The single biggest cause of the endless scroll was desktop section padding
   plus one-column card stacks. Halving both roughly halves the page height
   without touching a single line of content.
*/
@media (max-width: 767px) {
    .section { padding-block: var(--sp-6); }
    .section--tight { padding-block: var(--sp-5); }

    .section-head { margin-bottom: var(--sp-5); }
    .section-head p { font-size: var(--step-0); }

    .grid { gap: var(--sp-3); }

    /* Compact icon-and-label cards sit two to a row on a phone. */
    .grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

    .grid--compact .card,
    .grid--compact .cat-tile { padding: var(--sp-4) var(--sp-3); }

    .grid--compact .card h3,
    .grid--compact .cat-tile h3 { font-size: 0.92rem; line-height: 1.3; }

    .grid--compact .card p,
    .grid--compact .cat-tile p { font-size: 0.78rem; line-height: 1.45; }

    .grid--compact .icon-badge {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
        margin-bottom: var(--sp-2);
    }

    /* USP strip: two per row, no dividers, tighter type. */
    .usp { padding: var(--sp-3) var(--sp-2); border-bottom: 0; }
    .usp strong { font-size: 0.84rem; }
    .usp span { font-size: 0.72rem; }
    .usp svg { font-size: 1.15rem; }

    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .stat { padding: var(--sp-3); }

    .hero__inner { padding-block: var(--sp-6); }
    .hero__dots { margin-top: var(--sp-5); }
    .hero__trust { gap: var(--sp-3); }

    .page-head { padding-block: var(--sp-6); }

    .split { gap: var(--sp-5); }
    .stack > * + * { margin-top: var(--sp-3); }

    .mt-6 { margin-top: var(--sp-5); }
    .prose h2 { margin-top: var(--sp-5); }
}

/* Very narrow phones: two columns would leave ~150px per card, so stack. */
@media (max-width: 360px) {
    .grid--compact,
    .grid--products { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- enquiry form */
.enquiry-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-2);
}

.enquiry-form__note {
    margin: 0;
    color: var(--ink-500);
    font-size: var(--step--1);
}

@media (max-width: 575px) {
    .enquiry-form__actions { flex-direction: column; align-items: stretch; }
    .enquiry-form__actions .btn { width: 100%; justify-content: center; }
    .enquiry-form__note { text-align: center; }
    .field { margin-bottom: var(--sp-3); }
}

/* Labels inside dark panels, now that selects are used too. */
.section--navy .select,
.section--brand .select,
.widget--cta .select { color: var(--ink-900); }

/* ------------------------------------------- product list & thank you */
.tick-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }

.tick-list li {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    margin-bottom: var(--sp-3);
    color: var(--ink-600);
    font-size: var(--step--1);
}

.tick-list svg { color: var(--teal-600); flex: none; margin-top: 0.2em; }

.thanks__inner { max-width: 780px; margin-inline: auto; text-align: center; }

.thanks__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--teal-100);
    color: var(--teal-600);
    font-size: 2.2rem;
    margin-bottom: var(--sp-4);
}

.thanks__download {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    text-align: left;
    margin: var(--sp-6) 0;
    padding: var(--sp-5);
    background: var(--navy-050);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-lg);
}

.thanks__download-icon { font-size: 2rem; color: var(--navy-600); flex: none; }
.thanks__download strong { display: block; color: var(--navy-800); }
.thanks__download span { font-size: var(--step--1); color: var(--ink-500); }
.thanks__download .btn { margin-left: auto; flex: none; }

.thanks__next { margin-top: var(--sp-7); text-align: left; }
.thanks__next h2 { font-size: var(--step-1); margin-bottom: var(--sp-4); text-align: center; }

.thanks__tile {
    display: block;
    padding: var(--sp-5);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.thanks__tile:hover { border-color: var(--navy-100); box-shadow: var(--shadow-sm); }
.thanks__tile svg { font-size: 1.5rem; color: var(--gold-600); }
.thanks__tile strong { display: block; color: var(--navy-800); margin: var(--sp-2) 0 0.2rem; }
.thanks__tile span { font-size: var(--step--1); color: var(--ink-500); }

.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-7);
}

@media (max-width: 575px) {
    .thanks__download { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
    .thanks__download .btn { margin-left: 0; width: 100%; justify-content: center; }
    .thanks__next .grid { grid-template-columns: 1fr; }
    .thanks__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------- grid overflow guard */
/*
   Grid and flex children default to `min-width: auto`, which means their
   min-content width wins over the track size. A <select> reports the width
   of its widest option, so "Dadra and Nagar Haveli and Daman and Diu" in the
   State dropdown was stretching the whole card past the viewport and giving
   the page a sideways scroll on phones. Found by measuring the rendered page
   at 390px, not by reading the markup.
*/
.grid > *,
.split > *,
.form-grid > *,
.sidebar > * { min-width: 0; }

.input,
.select,
.textarea { max-width: 100%; }

/* Truncate rather than push: a long option stays readable when opened. */
.select { text-overflow: ellipsis; }

/* --------------------------------------------------- header fit (desktop) */
/*
   Adding the Product List button made the header bar tighter. Without an
   explicit shrink order the brand was being squeezed below its own content
   and its text spilled out over the first nav link. Brand and actions now
   hold their size; the navigation is the part that gives way, wrapping onto
   a second row rather than colliding with anything.
*/
@media (min-width: 1100px) {
    .site-header__inner { flex-wrap: wrap; }

    .brand { flex: 0 0 auto; }

    .primary-nav {
        display: flex;
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }

    .primary-nav > ul { flex-wrap: wrap; justify-content: flex-end; }

    .header-actions { flex: 0 0 auto; }
}

.brand__text { overflow-wrap: anywhere; }

/*
   The bar carries eight nav links plus two buttons, which is more than fits
   at common laptop widths. Rather than let it wrap, the nav tightens first
   and the Product List button steps aside on narrower desktops - it is still
   one tap away in the drawer, the page CTAs and the mobile action bar.
*/
@media (min-width: 1100px) {
    .primary-nav > ul > li > a { padding-inline: 0.6rem; font-size: 0.9rem; }
    .header-actions { gap: var(--sp-2); }
}

/* --------------------------------------------------- top bar download link */
.topbar__download {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    color: var(--gold-400) !important;
}

.topbar__download:hover { color: #fff !important; }

/* The mobile action bar already carries this, so the strip stays uncluttered. */
@media (max-width: 767px) {
    .topbar__download { display: none; }
}

/* Narrowest desktop band: one more notch of tightening keeps a single row. */
@media (min-width: 1100px) and (max-width: 1199px) {
    .primary-nav > ul > li > a { padding-inline: 0.45rem; font-size: 0.86rem; }
}

/* ===========================================================================
   PART 3 — card action buttons, preview flag and the under-construction page
   =========================================================================== */

/* ------------------------------------------------ product card actions */
/*
   Two side-by-side buttons need roughly 190px. In the two-up mobile grid a
   card is about 165px wide, and `.btn` sets `white-space: nowrap`, so the
   pair could not shrink and "Enquire Now" was clipped by the card's
   `overflow: hidden`. Stacking is the only arrangement that always fits,
   and it gives both a full-width tap target.
*/
@media (max-width: 767px) {
    .product-card__foot,
    .post-card__foot {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }

    .product-card__foot .btn,
    .post-card__foot .btn {
        width: 100%;
        justify-content: center;
        padding-inline: 0.5rem;
    }

    .product-card__body { padding: var(--sp-3); }
    .product-card__title { font-size: 0.95rem; }
    .product-card__media img { padding: var(--sp-3); }
}

/* Below the two-up breakpoint the cards are full width again, so restore. */
@media (max-width: 360px) {
    .product-card__foot,
    .post-card__foot { flex-direction: row; }
    .product-card__foot .btn,
    .post-card__foot .btn { width: auto; }
}

/* ------------------------------------------------------- preview flag */
.preview-flag {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 96;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: calc(100vw - 24px);
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--warning);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

.preview-flag a { color: #fff; text-decoration: underline; white-space: nowrap; }

@media (max-width: 767px) {
    /* Sits above the action bar rather than behind it. */
    .preview-flag { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); font-size: 0.72rem; }
}

/* --------------------------------------------- under construction page */
.uc-body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-700) 100%);
    color: rgba(255, 255, 255, 0.86);
}

.uc {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.uc__card {
    width: 100%;
    max-width: 620px;
    padding: var(--sp-7) var(--sp-5);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(6px);
}

.uc__logo {
    max-height: 64px;
    max-width: 240px;
    width: auto;
    background: #fff;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-5);
}

.uc__brand {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--sp-5);
}

.uc__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--gold-500);
    color: var(--navy-900);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.uc h1 {
    color: #fff;
    font-size: var(--step-3);
    margin: var(--sp-4) 0 var(--sp-3);
}

.uc__message {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--step-1);
    margin: 0 auto;
    max-width: 48ch;
}

.uc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-6);
}

.uc__address {
    font-style: normal;
    margin: var(--sp-5) 0 0;
    font-size: var(--step--1);
    color: rgba(255, 255, 255, 0.62);
}

.uc__foot { margin: 0; font-size: var(--step--1); color: rgba(255, 255, 255, 0.5); }

@media (max-width: 575px) {
    .uc__card { padding: var(--sp-6) var(--sp-4); }
    .uc__actions .btn { width: 100%; justify-content: center; }
}