/* ==========================================================================
   Abhigyan Consultancy — design system

   Navy carries the institutional weight this business needs; gold is scarce
   and means "approved". If gold is on more than one element per viewport,
   something has gone wrong.

   Sections
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout
     5. Components
     6. Motion
     7. Utilities
   ========================================================================== */

/* ==========================================================================
   0. FONTS

   Self-hosted variable fonts — no request to Google, no third-party latency,
   nothing to disclose in a privacy policy.

   The latin-ext subset matters more than it looks: the rupee sign U+20B9 lives
   in that range, so without it every price on the site falls back to a
   different typeface mid-word.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    --navy-900: #071A36;
    --navy-800: #0B2145;
    --navy-700: #0E2A56;   /* primary */
    --navy-600: #14386E;
    --navy-500: #1D4B8F;
    --navy-400: #3A6BB0;
    --navy-300: #7A9BCB;
    --navy-200: #B9CBE3;
    --navy-100: #E1E9F3;
    --navy-050: #F2F6FB;

    --gold-700: #8A6B12;
    --gold-600: #A8841B;
    --gold-500: #C9A227;   /* accent */
    --gold-400: #DDBB55;
    --gold-300: #EBD494;
    --gold-200: #F5E8C4;
    --gold-100: #FBF4E3;

    /* --- Neutrals ------------------------------------------------------- */
    --ink:        #101828;
    --ink-muted:  #475467;
    --ink-subtle: #667085;
    --ink-faint:  #98A2B3;
    --line:       #E4E7EC;
    --line-soft:  #F2F4F7;
    --surface:    #FFFFFF;
    --surface-2:  #F7F8FA;
    --surface-3:  #EFF2F6;

    /* --- Semantic ------------------------------------------------------- */
    --success:     #12805C;
    --success-bg:  #E7F5F0;
    --warning:     #B54708;
    --warning-bg:  #FEF3E7;
    --danger:      #B42318;
    --danger-bg:   #FEF0EF;
    --info:        var(--navy-600);
    --info-bg:     var(--navy-050);

    /* --- Typography ----------------------------------------------------- */
    --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Fluid scale. Min is the 360px value, max is the 1280px value. */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   clamp(1.25rem, 1.15rem + 0.4vw,  1.5rem);
    --text-2xl:  clamp(1.5rem,  1.32rem + 0.75vw, 2rem);
    --text-3xl:  clamp(1.875rem, 1.6rem + 1.2vw,  2.75rem);
    --text-4xl:  clamp(2.25rem, 1.75rem + 2.2vw,  3.75rem);
    --text-5xl:  clamp(2.75rem, 1.9rem + 3.6vw,   5rem);

    --leading-tight:   1.12;
    --leading-snug:    1.28;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.06em;
    --tracking-wider:  0.16em;

    /* --- Space (4px base) ----------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Vertical rhythm between page sections, tightening on small screens */
    --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

    /* --- Radii ---------------------------------------------------------- */
    --radius-sm:   0.25rem;
    --radius:      0.5rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-xl:   1.5rem;
    --radius-full: 999px;

    /* --- Elevation ------------------------------------------------------ */
    /* Tinted navy rather than neutral black — grey shadows on a navy-accented
       palette read as dirty. */
    --shadow-xs: 0 1px 2px rgba(7, 26, 54, 0.05);
    --shadow-sm: 0 1px 3px rgba(7, 26, 54, 0.08), 0 1px 2px rgba(7, 26, 54, 0.04);
    --shadow-md: 0 4px 12px rgba(7, 26, 54, 0.08), 0 2px 4px rgba(7, 26, 54, 0.04);
    --shadow-lg: 0 12px 32px rgba(7, 26, 54, 0.10), 0 4px 8px rgba(7, 26, 54, 0.04);
    --shadow-xl: 0 24px 56px rgba(7, 26, 54, 0.14);

    /* --- Motion --------------------------------------------------------- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   140ms;
    --dur:        240ms;
    --dur-slow:   420ms;
    --dur-reveal: 700ms;

    /* --- Layout --------------------------------------------------------- */
    --container:      75rem;   /* 1200px */
    --container-wide: 87.5rem; /* 1400px */
    --container-prose: 44rem;  /* ~70ch at body size */
    --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

    --header-h: 4.5rem;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--navy-500); }

ul, ol { padding-left: 1.25em; }

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

hr { border: 0; border-top: 1px solid var(--line); }

::selection { background: var(--gold-200); color: var(--navy-900); }

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first thing in the tab order, invisible until focused */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 999;
    padding: var(--space-3) var(--space-5);
    background: var(--navy-700);
    color: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

/* Fraunces is variable: SOFT softens the terminals, WONK enables the
   alternate italic-ish forms. A little wonk at display sizes is the "jazz";
   at small sizes it just looks like a mistake, so it scales down. */
h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--navy-800);
    font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 40;
    text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); font-variation-settings: 'SOFT' 12, 'WONK' 0, 'opsz' 20; }
h4 { font-size: var(--text-xl);  font-variation-settings: 'SOFT' 8,  'WONK' 0, 'opsz' 14; }

h5, h6 {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 650;
    line-height: var(--leading-snug);
    color: var(--navy-800);
}

.display--xl { font-size: var(--text-5xl); }

p { text-wrap: pretty; }

.lede {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-muted);
    max-width: 52ch;
}

/* The small gold uppercase label above a heading. Used a lot; keep it small. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: var(--space-3);
}
.eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: var(--gold-500);
}
.eyebrow--plain::before { display: none; }

/* Numerals in stats and calculators must not jitter as they animate */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.prose {
    max-width: var(--container-prose);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-muted);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-12); font-size: var(--text-2xl); }
.prose h3 { margin-top: var(--space-10); font-size: var(--text-xl); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-4); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--gold-500); }
.prose img { border-radius: var(--radius-lg); margin-block: var(--space-8); }
.prose blockquote {
    border-left: 3px solid var(--gold-500);
    padding-left: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--navy-700);
}
.prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--surface-3);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
}
.prose a { color: var(--navy-600); text-decoration: underline; }
.prose table { font-size: var(--text-base); margin-block: var(--space-6); }
.prose th, .prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--navy-800); font-weight: 650; background: var(--surface-2); }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide  { max-width: var(--container-wide); }
.container--prose { max-width: var(--container-prose); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

.section--muted { background: var(--surface-2); }
.section--navy {
    background: var(--navy-800);
    color: var(--navy-100);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy .lede { color: var(--navy-200); }
.section--navy a { color: var(--gold-300); }

.section-head { max-width: 44rem; margin-bottom: var(--space-12); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-8); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.8125rem var(--space-6);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border-radius: var(--radius);
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    transition: background var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }

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

/* The one gold button. Reserve for the single most important action on a page. */
.btn--gold {
    background: var(--gold-500);
    color: var(--navy-900);
    box-shadow: var(--shadow-sm);
}
.btn--gold:hover { background: var(--gold-400); color: var(--navy-900); box-shadow: var(--shadow-md); }

.btn--outline {
    border-color: var(--line);
    background: var(--surface);
    color: var(--navy-700);
}
.btn--outline:hover { border-color: var(--navy-300); background: var(--navy-050); color: var(--navy-700); }

.btn--ghost { color: var(--navy-700); }
.btn--ghost:hover { background: var(--navy-050); color: var(--navy-700); }

.btn--on-navy { background: #fff; color: var(--navy-800); }
.btn--on-navy:hover { background: var(--navy-100); color: var(--navy-900); }

.btn--whatsapp { background: #25D366; color: #06301A; }
.btn--whatsapp:hover { background: #1FBE5A; color: #06301A; }

/* Large CTAs carry the longest labels on the site, and some are built from
   data (the country pages compose "Check your {country} points, free"), so
   their width is not knowable here. Let them wrap: a label that already fits
   on one line is unaffected, and one that does not now reflows instead of
   overflowing the screen. */
.btn--lg {
    padding: 1rem var(--space-8);
    font-size: var(--text-base);
    white-space: normal;
    text-wrap: balance;
}
.btn--sm { padding: 0.5rem var(--space-4); font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* Arrow that slides on hover — cheap motion that makes CTAs feel alive */
.btn__arrow { flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

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

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.card--link:hover {
    border-color: var(--navy-200);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.card--flush { padding: 0; overflow: hidden; }
.card--muted { background: var(--surface-2); border-color: transparent; }

/* Gold hairline that draws in on hover. The restraint is the point. */
.card--accent::after {
    content: '';
    position: absolute;
    inset-inline: var(--space-6);
    bottom: 0;
    height: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.card--accent:hover::after { transform: scaleX(1); }

.card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--navy-050);
    color: var(--navy-600);
    margin-bottom: var(--space-4);
}
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card__text  { color: var(--ink-muted); font-size: var(--text-sm); }

/* Whole card clickable without nesting interactive elements */
.card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* --- Module / pricing cards --------------------------------------------- */

.module {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
}
.module__step {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--navy-700);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.module--free .module__step { background: var(--gold-500); color: var(--navy-900); }

.module__price {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--navy-800);
    font-variant-numeric: tabular-nums;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 20;
}
.module__price small {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.module__price--free { color: var(--success); }

.module__list { list-style: none; padding: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.module__list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding-block: var(--space-2);
}
.module__list li + li { border-top: 1px solid var(--line-soft); }
.module__list svg { flex: none; margin-top: 0.2em; color: var(--gold-600); }

.module__footer { margin-top: auto; padding-top: var(--space-4); }

/* --- Badges & pills ----------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.02em;
    background: var(--surface-3);
    color: var(--ink-muted);
}
.badge--gold    { background: var(--gold-100); color: var(--gold-700); }
.badge--navy    { background: var(--navy-050); color: var(--navy-600); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }

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

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }

.label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--navy-800);
}
.label__optional { font-weight: 400; color: var(--ink-faint); }

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.75rem var(--space-4);
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

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

.textarea { min-height: 8rem; resize: vertical; }

.select {
    appearance: none;
    padding-right: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
}

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--danger); }
.field--error .input:focus { box-shadow: 0 0 0 3px var(--danger-bg); }

.field__error { font-size: var(--text-sm); color: var(--danger); }
.field__hint  { font-size: var(--text-sm); color: var(--ink-subtle); }

/* Radio/checkbox cards — used heavily in the calculators */
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}
.choice__box:hover { border-color: var(--navy-300); background: var(--navy-050); }
.choice input:checked + .choice__box {
    border-color: var(--navy-600);
    background: var(--navy-050);
    box-shadow: inset 0 0 0 1px var(--navy-600);
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.choice__title { font-weight: 600; font-size: var(--text-sm); color: var(--navy-800); }
.choice__desc  { font-size: var(--text-sm); color: var(--ink-subtle); }

/* Bare consent checkboxes, the ones not wrapped in a .choice card. The UA
   default is 13px square, which is a genuinely hard target to hit with a
   thumb, and these gate form submission. */
.checkbox {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.125rem;
    accent-color: var(--navy-700);
}

/* Honeypot — must be invisible to humans but present for bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden;
}

/* --- Alerts ------------------------------------------------------------- */

.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border: 1px solid transparent;
}
.alert svg { flex: none; margin-top: 0.15em; }
.alert--success { background: var(--success-bg); color: #0B5D43; border-color: #B5E3D3; }
.alert--warning { background: var(--warning-bg); color: #8A3606; border-color: #F5CFA8; }
.alert--danger  { background: var(--danger-bg);  color: #8C1B12; border-color: #F5C2BD; }
.alert--info    { background: var(--info-bg);    color: var(--navy-700); border-color: var(--navy-200); }

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

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.header[data-scrolled='true'] {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; }
.logo__mark { width: 2.5rem; height: 2.5rem; flex: none; }
.logo__mark--plated {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 0.1875rem;
}
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    color: var(--navy-800);
}
.logo__sub {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--ink-subtle);
    margin-top: 0.25rem;
}

.nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }

.nav__link {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--navy-700); background: var(--navy-050); }
.nav__link[aria-current='page'] { color: var(--navy-800); font-weight: 650; }
.nav__link[aria-current='page']::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 0.25rem;
    height: 2px;
    background: var(--gold-500);
    border-radius: 1px;
}

/* Dropdown for the services mega-menu */
.nav__item { position: relative; }
.nav__panel-inner { overflow: hidden; }
.nav__panel {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    translate: -50% 0;
    min-width: 30rem;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__toggle { display: none; }

/* The disclosure chevron only exists in the drawer; on desktop the panel is a
   hover dropdown and the button would be redundant. */
.nav__disclosure { display: none; }
.nav__chevron { transition: transform var(--dur) var(--ease-out); }

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

.footer {
    background: var(--navy-900);
    color: var(--navy-200);
    padding-block: var(--space-16) var(--space-8);
    font-size: var(--text-sm);
}
.footer a { color: var(--navy-200); text-decoration: none; }
.footer a:hover { color: var(--gold-300); }
.footer h4 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}
.footer__grid {
    display: grid;
    gap: var(--space-10);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    /* The brand cell spans two columns. Below ~34rem the grid resolves to a
       single track, and a span of 2 would then invent an implicit track sized
       to its content, pushing the whole footer past the viewport. Pinning
       implicit tracks to 1fr keeps that impossible. */
    grid-auto-columns: minmax(0, 1fr);
}
.footer__brand { max-width: 22rem; }
.footer__list { list-style: none; padding: 0; }
.footer__list li + li { margin-top: var(--space-2); }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--navy-300);
    font-size: var(--text-xs);
}

/* --- Stats -------------------------------------------------------------- */

.stat { text-align: center; }
.stat__value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: 1;
    color: var(--navy-800);
    font-variant-numeric: tabular-nums;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
}
.stat__label {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}
.section--navy .stat__value { color: var(--gold-400); }
.section--navy .stat__label { color: var(--navy-200); }

/* --- Floating WhatsApp -------------------------------------------------- */

.wa-float {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: #25D366;
    color: #06301A;
    font-size: var(--text-sm);
    font-weight: 650;
    text-decoration: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); color: #06301A; }
.wa-float__text { display: none; }

/* --- Breadcrumbs -------------------------------------------------------- */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    list-style: none;
    padding: 0;
}
.crumbs a { color: var(--ink-subtle); text-decoration: none; }
.crumbs a:hover { color: var(--navy-600); text-decoration: underline; }
.crumbs li + li::before { content: '/'; margin-right: var(--space-2); color: var(--ink-faint); }

/* --- Accordion (FAQs) --------------------------------------------------- */

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) 0;
    text-align: left;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--navy-800);
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 8, 'WONK' 0, 'opsz' 14;
}
.accordion__icon { flex: none; color: var(--gold-600); transition: transform var(--dur) var(--ease-out); }
.accordion__trigger[aria-expanded='true'] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; }
.accordion__inner > div { padding-bottom: var(--space-5); color: var(--ink-muted); }

/* ==========================================================================
   6. MOTION
   ========================================================================== */

/* Scroll reveal. Elements start slightly displaced and settle in — enough to
   feel considered, not enough to make the page feel like a slideshow. */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-revealed='true'] {
    opacity: 1;
    transform: none;
}

/* If JS never runs, content must still be visible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@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;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

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

.text-center { text-align: center; }
.text-muted  { color: var(--ink-muted); }
.text-subtle { color: var(--ink-subtle); }
.text-gold   { color: var(--gold-600); }
.text-navy   { color: var(--navy-700); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }

.hairline { height: 1px; background: var(--line); border: 0; }
.hairline--gold { background: linear-gradient(90deg, var(--gold-500), transparent); }

.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 60rem) {
    .nav { display: none; }

    .nav__toggle {
        display: inline-grid;
        place-items: center;
        margin-left: auto;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--radius);
        color: var(--navy-700);
    }
    .nav__toggle:hover { background: var(--navy-050); }

    /* Mobile drawer.
       Anchored to the header, not the viewport, and that is deliberate.
       .header sets backdrop-filter, which makes it the containing block for
       fixed-position descendants, so `position: fixed` here resolves against
       the 4.5rem header box instead of the screen and collapses the drawer to
       a sliver. Absolute against the same box is well defined: top:100% is
       exactly the underside of the header. */
    .nav[data-open='true'] {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: var(--space-6) var(--gutter) var(--space-10);
        max-height: calc(100vh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .nav[data-open='true'] .nav__link {
        padding: var(--space-4) 0;
        font-size: var(--text-lg);
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0;
    }
    .nav[data-open='true'] .nav__link[aria-current='page']::after { display: none; }

    /* Services collapses to a disclosure here. Left permanently expanded it
       runs to roughly 450px, which is enough to push the client login and the
       primary CTA off the bottom of every common phone. The link itself still
       navigates to /services; the chevron beside it does the expanding. */
    .nav[data-open='true'] .nav__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-bottom: 1px solid var(--line-soft);
    }
    .nav[data-open='true'] .nav__item .nav__link { border-bottom: 0; }

    .nav[data-open='true'] .nav__disclosure {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--radius);
        color: var(--ink-subtle);
    }
    .nav__disclosure[aria-expanded='true'] .nav__chevron { transform: rotate(180deg); }

    .nav[data-open='true'] .nav__panel {
        grid-column: 1 / -1;
        position: static;
        translate: none;
        min-width: 0;
        opacity: 1;
        transform: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        /* 0fr to 1fr animates to the content height without hard-coding one.
           Same mechanism as .accordion__panel. Visibility is carried along so
           a collapsed panel is out of the tab order, not just clipped. */
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows var(--dur) var(--ease-out),
                    visibility var(--dur);
    }
    .nav[data-open='true'] .nav__panel[data-open='true'] {
        grid-template-rows: 1fr;
        visibility: visible;
    }
    .nav[data-open='true'] .nav__panel-inner > div { padding-bottom: var(--space-4); }
    .nav[data-open='true'] .btn { margin-top: var(--space-4); }

    body[data-nav-open='true'] { overflow: hidden; }
}

@media (min-width: 30rem) {
    .wa-float__text { display: inline; }
}

/* Two footer tracks exist from roughly here up, so the brand cell can have
   its row to itself. Below this it is already the full width of the grid. */
@media (min-width: 34rem) {
    .footer__brand { grid-column: span 2; }
}

@media print {
    .header, .footer, .wa-float, .btn { display: none !important; }
    body { color: #000; background: #fff; }
    .container { max-width: none; }
}