/* Complete AI Design System — shared tokens and primitives.
   Ported from design_handoff_website_restyle/design-tokens.css.

   This site has no build step and every page carries its own inline <style>.
   This file holds the things that must not drift between pages: the palette,
   the type scale, spacing, radius, and the shared primitives (pill buttons,
   hairline cards, the gradient mesh). Page files keep their own layout CSS.

   Load it BEFORE the page's inline <style> so a page can still override.

   Rules worth knowing before editing:
   - Headings stay at 400, with 500 for the smaller tiers. Newsreader carries
     heavier weights fine — this is a house style, not a limit of the face.
     Italic 300 is reserved for the emphasis signature.
   - Every number, price or stat is Inter with tabular figures, never Newsreader.
   - Sky blue (--accent) is for navy backgrounds only. It fails contrast on
     white. On white use --accent-link.
   - No colour outside the navy/blue family. No green, amber or red, including
     for error and success states.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500&display=swap");

:root {
    /* ---- Type families ---- */
    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Inter', Arial, sans-serif;
    --font-numeric: 'Inter', Arial, sans-serif;

    /* ---- Palette ---- */
    --navy: #0A1E3F;
    --navy-deep: #061430;
    --navy-press: #061430;

    --accent: #5FB3F7;        /* sky — on navy only */
    --accent-hover: #3D94DB;
    --accent-soft: #B8D9F5;   /* pale — tag fills, secondary hover */
    --accent-link: #236FA8;   /* links and small accents on white (5.37:1) */

    --text: #1A2332;
    --text-light: #4A5568;
    --text-muted: #6B7280;
    --text-on-dark: #FFFFFF;

    --bg: #FFFFFF;
    --bg-alt: #F7F9FC;
    --bg-tonal: #EEF6FC;
    --bg-navy: #0A1E3F;
    --border: #E5E8ED;
    --border-input: #8A94A3;

    /* ---- Elevation. Blue-tinted, never neutral black. Most cards use none. ---- */
    --shadow-sm: rgba(0, 55, 112, 0.08) 0 1px 3px;
    --shadow-md: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;

    /* ---- Radius ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius: 12px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* ---- Spacing, 8px base ---- */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-huge: 64px;
    --section-pad: 96px;
    --section-pad-min: 64px;
    --card-pad: 32px;
    --max-width: 1200px;
    --control-min-height: 40px;

    /* ---- Motion. Short, un-bouncy. ---- */
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Type roles, web mode ---- */
    --type-display-xxl: 400 56px/1.06 var(--font-display);
    --tracking-display-xxl: -0.02em;
    --type-display-xl: 400 48px/1.08 var(--font-display);
    --tracking-display-xl: -0.02em;
    --type-display-lg: 400 32px/1.14 var(--font-display);
    --tracking-display-lg: -0.02em;
    --type-display-md: 500 26px/1.18 var(--font-display);
    --tracking-display-md: -0.015em;
    --type-heading-lg: 500 22px/1.22 var(--font-display);
    --type-heading-md: 500 20px/1.3 var(--font-display);
    --type-heading-sm: 500 18px/1.35 var(--font-display);
    --type-display-xxl-mobile: 400 36px/1.1 var(--font-display);

    --type-body-lg: 400 16px/1.4 var(--font-body);
    --type-body-md: 400 15px/1.4 var(--font-body);
    --type-button-md: 600 16px/1 var(--font-body);
    --type-button-sm: 600 14px/1 var(--font-body);
    --type-caption: 400 13px/1.4 var(--font-body);
    --type-micro-cap: 600 10px/1.15 var(--font-body);

    --feature-numeric: "tnum";
}

/* ---------------------------------------------------------------------------
   Typographic signature. Emphasis inside a headline is italic 300 Newsreader in
   link blue — never bold, never a colour fill on a sans face. This is the most
   recognisable thing the brand does typographically.
--------------------------------------------------------------------------- */
h1 em, h2 em, h3 em, .t-em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    color: var(--accent-link);
}

/* On navy the link blue goes muddy, so emphasis lifts to pale blue. */
.on-navy h1 em, .on-navy h2 em, .on-navy .t-em,
[data-surface="editorial"] h1 em,
[data-surface="editorial"] h2 em,
[data-surface="editorial"] .t-em { color: #8FC5EB; }

/* ---------------------------------------------------------------------------
   Numerals. Newsreader ships no tabular-figure feature and its digits are
   proportional, so prices and stats set in it wobble out of alignment.
   Anything numeric renders in Inter with tnum.
--------------------------------------------------------------------------- */
.tnum, [data-numeric] {
    font-family: var(--font-numeric);
    font-feature-settings: var(--feature-numeric);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   The gradient mesh — the signature backdrop. A bare white hero is off-brand.
   Applied as a masked pseudo-element so it fades to the page background rather
   than ending on a hard edge. Sits behind content; never intercepts clicks.
--------------------------------------------------------------------------- */
.ca-mesh { position: relative; isolation: isolate; }
.ca-mesh::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 620px;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(58% 92% at 6% 8%, rgba(184, 217, 245, 0.95) 0%, rgba(184, 217, 245, 0) 62%),
        radial-gradient(52% 88% at 32% 4%, rgba(95, 179, 247, 0.60) 0%, rgba(95, 179, 247, 0) 60%),
        radial-gradient(56% 100% at 62% 12%, rgba(35, 111, 168, 0.46) 0%, rgba(35, 111, 168, 0) 64%),
        radial-gradient(70% 120% at 96% 0%, rgba(10, 30, 63, 0.50) 0%, rgba(10, 30, 63, 0) 66%),
        linear-gradient(180deg, #E8F1FB 0%, #F3F8FD 46%, #FFFFFF 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.ca-mesh > * { position: relative; z-index: 1; }

@media (max-width: 767px) {
    .ca-mesh::before { height: 460px; }
}

/* ---------------------------------------------------------------------------
   Type utilities
--------------------------------------------------------------------------- */
.t-display-xxl { font: var(--type-display-xxl); letter-spacing: var(--tracking-display-xxl); }
.t-display-xl  { font: var(--type-display-xl);  letter-spacing: var(--tracking-display-xl); }
.t-display-lg  { font: var(--type-display-lg);  letter-spacing: var(--tracking-display-lg); }
.t-display-md  { font: var(--type-display-md);  letter-spacing: var(--tracking-display-md); }
.t-heading-lg  { font: var(--type-heading-lg); }
.t-heading-md  { font: var(--type-heading-md); }
.t-heading-sm  { font: var(--type-heading-sm); }
.t-body-lg     { font: var(--type-body-lg); }
.t-body-md     { font: var(--type-body-md); }
.t-caption     { font: var(--type-caption); }
.t-micro-cap   { font: var(--type-micro-cap); letter-spacing: 0.1px; text-transform: uppercase; }

@media (max-width: 767px) {
    .t-display-xxl { font: var(--type-display-xxl-mobile); letter-spacing: -0.9px; }
}

/* ---------------------------------------------------------------------------
   Pill tag — the small uppercase eyebrow above a section heading.
--------------------------------------------------------------------------- */
.ca-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--navy-deep);
    font: var(--type-micro-cap);
    letter-spacing: 0.1px;
    text-transform: uppercase;
}
.on-navy .ca-tag, [data-surface="editorial"] .ca-tag {
    background: rgba(255, 255, 255, 0.10);
    color: var(--accent);
}


/* ---------------------------------------------------------------------------
   Shared page chrome — icons, nav, buttons, footer.
   Lifted out of index.html so every page renders the same header and footer.
   Pages that still carry their own copy inline will override this; that is
   intentional while pages are migrated one at a time.
--------------------------------------------------------------------------- */
/* ===== Lucide-style inline icons ===== */
.icon { width: 24px; height: 24px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 40px; height: 40px; stroke-width: 1.8; }
.icon-xl { width: 56px; height: 56px; stroke-width: 1.5; }


/* ===== Navigation ===== */
nav {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    z-index: 100;
}
nav .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 34px; width: auto; display: block; object-fit: contain; object-position: left center; }

.nav-links { display: flex; gap: 26px; list-style: none; align-items: center; }
.nav-links a {
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-links a:hover { color: var(--accent-hover); }
.nav-cta {
    background: var(--navy);
    color: white !important;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    transition: background 0.2s, transform 0.1s;
}
.nav-cta:hover { background: var(--navy-deep); transform: translateY(-1px); }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}
.mobile-menu-toggle span {
    width: 26px;
    height: 2.5px;
    background: var(--navy);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

@media (max-width: 1024px) {
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 0.9rem; }
}
@media (max-width: 900px) {
    .mobile-menu-toggle { display: flex; }
    .nav-links {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 24px;
        box-shadow: var(--shadow-lg);
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 1000;
        gap: 0;
        align-items: stretch;
    }
    .nav-links.active { transform: translateY(0); }
    .nav-links li { border-bottom: 1px solid var(--border); padding: 14px 0; }
    .nav-links li:last-child { border-bottom: none; padding-top: 14px; }
    .nav-links a { display: block; width: 100%; }
    .nav-cta { text-align: center; margin-top: 6px; }
}


/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--navy);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    min-height: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: background var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1)), border-color var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1)), color var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
    border: 2px solid var(--navy);
    cursor: pointer;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: white; }
.btn-secondary {
    background: transparent;
    color: var(--navy);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--accent-soft); color: var(--navy); border-color: var(--accent-soft); }
.btn-accent {
    background: var(--accent);
    color: var(--navy);
    border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hover); color: white; border-color: var(--accent-hover); }
.btn-ghost-light {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,0.4);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); border-color: white; color: white; }


/* ===== Footer ===== */
footer {
    background: var(--navy-deep);
    color: rgba(255,255,255,0.75);
    padding: 56px 0 32px;
}
.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 36px;
}
.footer-brand img { height: 44px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.6; }

.footer-brand .wordmark {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.75rem;
    color: white;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}
.footer-brand .wordmark .dot { color: var(--accent); }
.footer-brand > img { display: none; }
/* Stronger card borders */
.service-card, .insight-card, .stat {
    border: 1.5px solid var(--border);
}

.footer-col h5 {
    font-family: 'Inter', sans-serif;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col a {
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
    transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: rgba(255,255,255,0.7); margin-left: 16px; }
.footer-bottom a:first-child { margin-left: 0; }
@media (max-width: 900px) {
    .footer-content { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .footer-content { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-bottom a:first-child { margin-left: 0; }
}

/* Accessibility: keep focus visible */
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}