/* =============================================================================
   NOVALYNK — PUBLIC SITE DESIGN SYSTEM
   Single global stylesheet for the frontend. Mobile-first, no build step.
   Loaded AFTER Bootstrap 5.3.2 / Font Awesome / AOS, BEFORE @yield('styles').

   CONTENTS
     01. Tokens (brand scale + legacy aliases)
     02. Base layer (reset, fluid type, focus, motion, media)
     03. Layout (sections, container, grid & flex helpers)
     04. Components
         4.1  Buttons
         4.2  Eyebrow + section headers
         4.3  Cards
         4.4  Media frames
         4.5  Chips, badges, tags
         4.6  Stat tiles
         4.7  Icon tiles + feature lists
         4.8  Forms
         4.9  Pagination
         4.10 Breadcrumbs
         4.11 Tables
         4.12 Empty states
         4.13 Alerts
         4.14 Quote / testimonial
         4.15 Prose (rich text from the DB)
         4.16 Hero scaffold
         4.17 Bootstrap component polish (accordion, dropdown, carousel)
     05. Dark surfaces (navy hero, CTA bands, footer)
     06. Sticky mobile CTA bar
     07. Mobile refinements (tap targets, nav panel, overflow guards)
     08. Legacy compatibility layer (classes that existed in master.blade.php)

   NAMING
     nv-*        new design-system classes — prefer these in new markup
     *-custom    legacy classes kept alive for existing pages
   ========================================================================== */


/* =============================================================================
   01. TOKENS
   ========================================================================== */

:root {
    /* --- Brand colour ---------------------------------------------------- */
    --nv-navy-900: #0B1220;   /* deepest background, hero base */
    --nv-navy-800: #0F172A;   /* dark sections, footer */
    --nv-blue-900: #1E3A8A;   /* gradient mid-stop */
    --nv-blue-700: #1E40AF;   /* primary brand blue */
    --nv-blue-500: #3B82F6;   /* secondary / interactive blue */
    --nv-blue-300: #93C5FD;   /* accents on dark */
    --nv-blue-100: #DBEAFE;   /* tinted chips / icon tiles */
    --nv-blue-50:  #EFF6FF;   /* tinted surfaces */

    --nv-ink:       #0F172A;  /* headings */
    --nv-body:      #475569;  /* body copy */
    --nv-muted:     #64748B;  /* secondary copy */
    --nv-line:      #E2E8F0;  /* borders */
    --nv-surface:   #FFFFFF;  /* cards */
    --nv-surface-2: #F8FAFC;  /* alternating sections */

    --nv-cyan:    #22D3EE;    /* highlight accent — use sparingly */
    --nv-success: #10B981;
    --nv-warning: #F59E0B;
    --nv-danger:  #EF4444;

    /* Tints derived from the accent — used for rings, hovers, borders */
    --nv-tint-blue:   rgba(59, 130, 246, .12);
    --nv-tint-border: rgba(59, 130, 246, .38);
    --nv-ring:        0 0 0 4px rgba(59, 130, 246, .18);
    --nv-ring-danger: 0 0 0 4px rgba(239, 68, 68, .16);

    /* --- Type ------------------------------------------------------------ */
    --nv-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --nv-fs-display: clamp(2.1rem, 1.35rem + 3.2vw, 3.75rem);
    --nv-fs-h1:      clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
    --nv-fs-h2:      clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem);
    --nv-fs-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    --nv-fs-lead:    clamp(1rem, 0.95rem + 0.4vw, 1.175rem);
    --nv-fs-body:    1rem;
    --nv-fs-sm:      0.9375rem;
    --nv-fs-xs:      0.8125rem;

    --nv-lh-tight: 1.15;
    --nv-lh-snug:  1.35;
    --nv-lh-body:  1.7;
    --nv-measure:  68ch;

    /* --- Space (8px base) ------------------------------------------------ */
    --nv-1: .25rem;
    --nv-2: .5rem;
    --nv-3: .75rem;
    --nv-4: 1rem;
    --nv-5: 1.5rem;
    --nv-6: 2rem;
    --nv-7: 3rem;
    --nv-8: 4rem;
    --nv-9: 6rem;

    --nv-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
    --nv-gutter:    clamp(1.15rem, 0.9rem + 1vw, 1.5rem);

    /* --- Radius ---------------------------------------------------------- */
    --nv-r-sm:   10px;
    --nv-r:      16px;
    --nv-r-lg:   22px;
    --nv-r-pill: 999px;

    /* --- Elevation (layered, never one hard drop) ------------------------ */
    --nv-shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --nv-shadow-2: 0 4px 12px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.07);
    --nv-shadow-3: 0 12px 24px rgba(15,23,42,.08), 0 28px 56px rgba(15,23,42,.10);
    --nv-shadow-blue: 0 12px 30px rgba(30,64,175,.28);

    /* --- Motion ---------------------------------------------------------- */
    --nv-ease: cubic-bezier(.22, .61, .36, 1);
    --nv-t-fast: .18s var(--nv-ease);
    --nv-t:      .28s var(--nv-ease);
    --nv-t-slow: .45s var(--nv-ease);

    /* --- Layout constants ------------------------------------------------ */
    --nv-nav-h: 86px;             /* sticky navbar height, for scroll-margin */
    --nv-mobile-cta-h: 4.25rem;   /* sticky bottom CTA bar height (<768px) */
    --nv-tap: 44px;               /* minimum tap target */
    --nv-z-navbar: 1020;
    --nv-z-mobile-cta: 1040;
    --nv-z-assistant: 1055;

    /* ---------------------------------------------------------------------
       LEGACY ALIASES — every custom property that existed in the old inline
       stylesheet, remapped onto the tokens above. Do not remove: existing
       pages and partials still reference these.
       ------------------------------------------------------------------- */
    --primary-blue:   var(--nv-blue-700);
    --secondary-blue: var(--nv-blue-500);
    --light-blue:     var(--nv-blue-100);
    --dark-blue:      var(--nv-blue-900);
    --white:          #FFFFFF;

    --gray-50:  #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;   /* was referenced by .footer-link but never defined */
    --gray-500: #64748B;
    --gray-600: #475569;   /* referenced inline by home/blog-detail */
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    --shadow-sm: var(--nv-shadow-1);
    --shadow:    var(--nv-shadow-2);
    --shadow-md: var(--nv-shadow-2);
    --shadow-lg: var(--nv-shadow-3);

    --radius-sm: var(--nv-r-sm);
    --radius:    var(--nv-r);
    --radius-lg: var(--nv-r-lg);
}


/* =============================================================================
   02. BASE LAYER
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nv-nav-h) + 1rem);
}

body {
    font-family: var(--nv-font);
    font-size: var(--nv-fs-body);
    font-weight: 400;
    line-height: var(--nv-lh-body);
    color: var(--nv-body);
    background-color: var(--nv-surface);
    overflow-x: hidden;   /* fallback */
    overflow-x: clip;     /* safety net only — real overflow must still be fixed */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Anchors land below the sticky navbar instead of behind it */
:target,
[id]:not(body):not(html) { scroll-margin-top: calc(var(--nv-nav-h) + 1rem); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nv-font);
    color: var(--nv-ink);
    font-weight: 700;
    line-height: var(--nv-lh-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: var(--nv-fs-h1); font-weight: 800; }
h2 { font-size: var(--nv-fs-h2); font-weight: 700; }
h3 { font-size: var(--nv-fs-h3); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 1rem; letter-spacing: -0.01em; }

p { line-height: var(--nv-lh-body); }
p:not(:last-child) { margin-bottom: var(--nv-4); }

small, .small { font-size: var(--nv-fs-sm); }

strong, b { font-weight: 600; color: var(--nv-ink); }

a {
    color: var(--nv-blue-700);
    text-decoration: none;
    transition: color var(--nv-t), background-color var(--nv-t), border-color var(--nv-t), transform var(--nv-t);
}
a:hover { color: var(--nv-blue-900); }

hr {
    height: 1px;
    border: 0;
    background: var(--nv-line);
    opacity: 1;
    margin-block: var(--nv-5);
}

/* Media never breaks the layout */
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}
img { display: block; }
iframe { border: 0; }

/* Forms inherit the brand font */
input, button, select, textarea, optgroup { font: inherit; color: inherit; }

/* Focus — visible, on-brand, never removed */
:focus-visible {
    outline: 2px solid var(--nv-blue-500);
    outline-offset: 3px;
    border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection {
    background: rgba(59, 130, 246, .20);
    color: var(--nv-ink);
}

/* Skip link for keyboard users (markup optional) */
.nv-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--nv-blue-700);
    color: #fff;
    border-radius: 0 0 var(--nv-r-sm) 0;
}
.nv-skip-link:focus { left: 0; color: #fff; }

/* Respect the user's motion preference (also neutralises AOS) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =============================================================================
   03. LAYOUT
   ========================================================================== */

/* Container gutters: always wider than the widest Bootstrap row gutter we
   allow on phones (see §07), so a .row can never push past the viewport. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    padding-inline: var(--nv-gutter);
    width: 100%;
}

/* Section rhythm ---------------------------------------------------------- */
.nv-section {
    position: relative;
    padding-block: var(--nv-section-y);
}
.nv-section--tight { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }
.nv-section--flush-top    { padding-top: 0; }
.nv-section--flush-bottom { padding-bottom: 0; }
.nv-section--alt  { background: var(--nv-surface-2); }
.nv-section--tint { background: var(--nv-blue-50); }

/* A soft hairline between two same-coloured sections */
.nv-section--ruled { border-top: 1px solid var(--nv-line); }

/* Vertical stack ---------------------------------------------------------- */
.nv-stack {
    display: flex;
    flex-direction: column;
    gap: var(--nv-stack-gap, var(--nv-4));
}
.nv-stack--xs { --nv-stack-gap: var(--nv-2); }
.nv-stack--sm { --nv-stack-gap: var(--nv-3); }
.nv-stack--lg { --nv-stack-gap: var(--nv-5); }
.nv-stack--xl { --nv-stack-gap: var(--nv-6); }

/* Horizontal wrapping group ----------------------------------------------- */
.nv-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nv-cluster-gap, var(--nv-3));
    min-width: 0;
}
.nv-cluster--sm     { --nv-cluster-gap: var(--nv-2); }
.nv-cluster--lg     { --nv-cluster-gap: var(--nv-4); }
.nv-cluster--center { justify-content: center; }
.nv-cluster--between{ justify-content: space-between; }
.nv-cluster--top    { align-items: flex-start; }

/* Button row: side by side, but full width and stacked on small phones */
.nv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nv-3);
}
.nv-actions--center { justify-content: center; }
@media (max-width: 399.98px) {
    .nv-actions { flex-direction: column; align-items: stretch; }
    .nv-actions > .nv-btn,
    .nv-actions > .btn { width: 100%; }
}

/* Auto-fit grid: 1 col on phones, 2 on tablets, 3–4 on desktop, no
   breakpoints required. Override the column floor with --nv-col. */
.nv-grid {
    display: grid;
    gap: var(--nv-grid-gap, clamp(1rem, .65rem + 1.2vw, 1.75rem));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--nv-col, 17rem)), 1fr));
}
.nv-grid--2     { --nv-col: 22rem; }
.nv-grid--3     { --nv-col: 17rem; }
.nv-grid--4     { --nv-col: 13.5rem; }
.nv-grid--tiles { --nv-col: 9.5rem; }   /* logo / tech chips */
.nv-grid--wide  { --nv-col: 26rem; }

/* Two-column feature split: stacks below 900px */
.nv-split {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 4rem);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

/* Reading measure helpers */
.nv-measure       { max-width: var(--nv-measure); }
.nv-measure--tight{ max-width: 46ch; }
.nv-center        { margin-inline: auto; }
.nv-text-center   { text-align: center; }

/* Generic scroll container for anything that must not widen the page */
.nv-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}


/* =============================================================================
   04. COMPONENTS
   ========================================================================== */

/* --- 4.1 Buttons ---------------------------------------------------------
   One primary (solid) action per screen. Outline = secondary,
   ghost = tertiary in dense UI, text+arrow = "next step" link.
   All variants clear the 44px tap target. */

.nv-btn {
    --_bg: transparent;
    --_fg: var(--nv-blue-700);
    --_bd: transparent;
    --_sh: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--nv-tap);
    max-width: 100%;
    padding: .75rem 1.5rem;
    background: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_bd);
    border-radius: var(--nv-r-sm);
    box-shadow: var(--_sh);
    font-size: var(--nv-fs-sm);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--nv-t), color var(--nv-t),
                border-color var(--nv-t), box-shadow var(--nv-t), transform var(--nv-t);
}
.nv-btn i, .nv-btn svg { flex: none; }
.nv-btn:hover { transform: translateY(-2px); }
.nv-btn:active { transform: translateY(0); }
.nv-btn:disabled,
.nv-btn.is-disabled { opacity: .55; pointer-events: none; }

/* Primary — solid blue */
.nv-btn--solid {
    --_bg: var(--nv-blue-700);
    --_fg: #fff;
    --_bd: var(--nv-blue-700);
    --_sh: 0 6px 16px rgba(30,64,175,.18);
}
.nv-btn--solid:hover {
    --_bg: var(--nv-blue-900);
    --_bd: var(--nv-blue-900);
    --_fg: #fff;
    --_sh: var(--nv-shadow-blue);
}

/* Secondary — outline */
.nv-btn--outline {
    --_bg: transparent;
    --_fg: var(--nv-ink);
    --_bd: var(--nv-line);
}
.nv-btn--outline:hover {
    --_bg: var(--nv-blue-50);
    --_fg: var(--nv-blue-700);
    --_bd: var(--nv-tint-border);
}

/* Tertiary — ghost (no border until hover) */
.nv-btn--ghost {
    --_bg: transparent;
    --_fg: var(--nv-blue-700);
}
.nv-btn--ghost:hover {
    --_bg: var(--nv-tint-blue);
    --_fg: var(--nv-blue-900);
}

/* Text + arrow — the "way forward" link that ends a section */
.nv-btn--text {
    --_bg: transparent;
    --_fg: var(--nv-blue-700);
    padding-inline: .25rem;
    border-radius: 8px;
}
.nv-btn--text:hover {
    --_fg: var(--nv-blue-900);
    transform: none;
}
.nv-btn--text i,
.nv-btn--text .nv-btn__arrow { transition: transform var(--nv-t); }
.nv-btn--text:hover i,
.nv-btn--text:hover .nv-btn__arrow { transform: translateX(4px); }

/* On dark surfaces */
.nv-btn--light {
    --_bg: #fff;
    --_fg: var(--nv-blue-700);
    --_bd: #fff;
    --_sh: 0 10px 26px rgba(2, 6, 23, .28);
}
.nv-btn--light:hover { --_bg: var(--nv-blue-50); --_fg: var(--nv-blue-900); --_bd: var(--nv-blue-50); }

.nv-btn--on-dark {
    --_bg: transparent;
    --_fg: #fff;
    --_bd: rgba(255,255,255,.42);
}
.nv-btn--on-dark:hover { --_bg: rgba(255,255,255,.12); --_fg: #fff; --_bd: rgba(255,255,255,.7); }

/* WhatsApp channel button (colour is the product's, not an invented brand) */
.nv-btn--whatsapp {
    --_bg: #128C7E;
    --_fg: #fff;
    --_bd: #128C7E;
}
.nv-btn--whatsapp:hover { --_bg: #0E7268; --_bd: #0E7268; --_fg: #fff; }

/* Sizes — never below 44px */
.nv-btn--sm { padding: .55rem 1rem; font-size: var(--nv-fs-xs); }
.nv-btn--lg { min-height: 52px; padding: .95rem 2rem; font-size: var(--nv-fs-body); }
.nv-btn--block { width: 100%; }
@media (max-width: 575.98px) {
    .nv-btn--block-sm { width: 100%; }
}

/* --- 4.2 Eyebrow + section headers --------------------------------------- */

.nv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--nv-3);
    color: var(--nv-blue-700);
    font-size: var(--nv-fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
}
.nv-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .55;
    flex: none;
}
.nv-eyebrow--plain::before { display: none; }
.nv-eyebrow--pill {
    padding: .4rem .85rem;
    border-radius: var(--nv-r-pill);
    background: var(--nv-blue-50);
    border: 1px solid rgba(59,130,246,.18);
    letter-spacing: .08em;
}
.nv-eyebrow--pill::before { display: none; }

.nv-section-head {
    max-width: 56ch;
    margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.25rem);
}
.nv-section-head--center {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
}
.nv-section-head--center .nv-eyebrow { justify-content: center; }

.nv-section-title {
    font-size: var(--nv-fs-h2);
    font-weight: 700;
    color: var(--nv-ink);
    letter-spacing: -0.02em;
    line-height: var(--nv-lh-tight);
    margin-bottom: var(--nv-3);
}
.nv-section-title--display { font-size: var(--nv-fs-h1); font-weight: 800; }

.nv-section-sub {
    font-size: var(--nv-fs-lead);
    color: var(--nv-muted);
    line-height: 1.65;
    max-width: 60ch;
    margin-bottom: 0;
}
.nv-section-head--center .nv-section-sub { margin-inline: auto; }

/* --- 4.3 Cards ------------------------------------------------------------
   Hover = layered lift + a blue border tint, not just a fatter shadow. */

.nv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r);
    box-shadow: var(--nv-shadow-1);
    overflow: hidden;
    transition: transform var(--nv-t), box-shadow var(--nv-t), border-color var(--nv-t);
}

/* thin accent that grows in on hover — the "layer" in the layered lift */
.nv-card::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nv-blue-700), var(--nv-blue-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--nv-t);
    pointer-events: none;
}

.nv-card--interactive:hover,
.nv-card--interactive:focus-within {
    transform: translateY(-6px);
    border-color: var(--nv-tint-border);
    box-shadow: var(--nv-shadow-3);
}
.nv-card--interactive:hover::after,
.nv-card--interactive:focus-within::after { transform: scaleX(1); }

.nv-card--flat  { box-shadow: none; }
.nv-card--tint  { background: var(--nv-blue-50); border-color: rgba(59,130,246,.16); }
.nv-card--muted { background: var(--nv-surface-2); }
.nv-card--bare  { background: transparent; border-color: transparent; box-shadow: none; }

.nv-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
    gap: var(--nv-3);
}
.nv-card__title {
    font-size: var(--nv-fs-h3);
    font-weight: 700;
    color: var(--nv-ink);
    line-height: var(--nv-lh-snug);
    margin: 0;
}
.nv-card__title a { color: inherit; }
.nv-card__title a:hover { color: var(--nv-blue-700); }
.nv-card__text {
    color: var(--nv-muted);
    font-size: var(--nv-fs-sm);
    margin: 0;
}
/* Outcome-first line: the value the customer gets, above the feature list */
.nv-card__outcome {
    color: var(--nv-ink);
    font-size: var(--nv-fs-sm);
    font-weight: 600;
    line-height: 1.55;
    margin: 0;
}
.nv-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nv-3);
    margin-top: auto;
    padding-top: var(--nv-3);
}
.nv-card__foot--ruled { border-top: 1px solid var(--nv-line); }

/* Whole-card link overlay: keeps one accessible anchor, whole card clickable */
.nv-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* --- 4.4 Media frames -----------------------------------------------------
   Fixed aspect-ratio so grids never jag when images differ. */

.nv-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--nv-surface-2);
    flex: none;
}
.nv-media img,
.nv-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--nv-t-slow);
}
.nv-media--16x9 { aspect-ratio: 16 / 9; }
.nv-media--4x3  { aspect-ratio: 4 / 3; }
.nv-media--3x2  { aspect-ratio: 3 / 2; }
.nv-media--1x1  { aspect-ratio: 1 / 1; }
.nv-media--portrait { aspect-ratio: 3 / 4; }
.nv-media--rounded  { border-radius: var(--nv-r); }
.nv-media--contain img { object-fit: contain; padding: var(--nv-4); }

.nv-card--interactive:hover .nv-media img { transform: scale(1.05); }

/* Gradient scrim for text laid over an image */
.nv-media__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,18,32,.88) 0%, rgba(11,18,32,.35) 45%, transparent 78%);
}

/* --- 4.5 Chips, badges, tags ---------------------------------------------- */

.nv-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--nv-tap);
    padding: .5rem 1rem;
    background: var(--nv-surface);
    color: var(--nv-ink);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r-pill);
    font-size: var(--nv-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: all var(--nv-t);
}
a.nv-chip:hover,
button.nv-chip:hover {
    color: var(--nv-blue-700);
    border-color: var(--nv-tint-border);
    background: var(--nv-blue-50);
}
.nv-chip.is-active,
.nv-chip[aria-current="page"] {
    background: var(--nv-blue-700);
    border-color: var(--nv-blue-700);
    color: #fff;
}
.nv-chip--static { min-height: 0; padding: .35rem .75rem; font-size: var(--nv-fs-xs); }

.nv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-2);
}

.nv-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: var(--nv-r-pill);
    background: var(--nv-blue-50);
    color: var(--nv-blue-700);
    border: 1px solid rgba(59,130,246,.18);
    font-size: var(--nv-fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
.nv-badge--neutral { background: var(--gray-100); color: var(--nv-body); border-color: var(--nv-line); }
.nv-badge--success { background: rgba(16,185,129,.10); color: #047857; border-color: rgba(16,185,129,.24); }
.nv-badge--warning { background: rgba(245,158,11,.12); color: #B45309; border-color: rgba(245,158,11,.26); }
.nv-badge--danger  { background: rgba(239,68,68,.10);  color: #B91C1C; border-color: rgba(239,68,68,.24); }
.nv-badge--accent  { background: rgba(34,211,238,.12); color: #0E7490; border-color: rgba(34,211,238,.28); }

/* --- 4.6 Stat tiles -------------------------------------------------------- */

.nv-stats {
    display: grid;
    gap: var(--nv-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.nv-stat {
    padding: clamp(.9rem, .7rem + .6vw, 1.35rem);
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r-sm);
    min-width: 0;
}
.nv-stat__num {
    display: block;
    font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--nv-ink);
}
.nv-stat__label {
    display: block;
    margin-top: .25rem;
    font-size: var(--nv-fs-xs);
    line-height: 1.4;
    color: var(--nv-muted);
    overflow-wrap: break-word;
}

/* --- 4.7 Icon tiles + feature lists ---------------------------------------- */

.nv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: var(--nv-r-sm);
    background: var(--nv-blue-50);
    color: var(--nv-blue-700);
    font-size: 1.35rem;
    border: 1px solid rgba(59,130,246,.14);
    transition: background-color var(--nv-t), color var(--nv-t), transform var(--nv-t);
}
.nv-icon--lg { width: 4rem; height: 4rem; font-size: 1.65rem; border-radius: var(--nv-r); }
.nv-icon--sm { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.nv-icon--solid { background: var(--nv-blue-700); color: #fff; border-color: transparent; }
.nv-card--interactive:hover .nv-icon { background: var(--nv-blue-700); color: #fff; }

.nv-feature-list { list-style: none; display: grid; gap: var(--nv-2); margin: 0; }
.nv-feature-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: var(--nv-fs-sm);
    color: var(--nv-body);
    line-height: 1.6;
}
.nv-feature-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    flex: none;
    margin-top: .18rem;
    font-size: .75rem;
    color: var(--nv-blue-700);
}
.nv-feature-list--success li::before { color: var(--nv-success); }

/* --- 4.8 Forms -------------------------------------------------------------
   Inputs are 48px tall and 16px font (never smaller — iOS zooms below 16px). */

.nv-form { display: grid; gap: var(--nv-4); }
.nv-form-grid {
    display: grid;
    gap: var(--nv-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.nv-field { display: grid; gap: .4rem; min-width: 0; }
.nv-field--full { grid-column: 1 / -1; }

.nv-label,
.form-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--nv-fs-sm);
    font-weight: 600;
    color: var(--nv-ink);
    margin-bottom: .1rem;
    line-height: 1.4;
}
.nv-label__req { color: var(--nv-danger); font-weight: 700; }

.nv-input,
.nv-select,
.nv-textarea,
.form-control,
.form-select,
.form-control-admin {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--nv-ink);
    background-color: var(--nv-surface);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r-sm);
    box-shadow: none;
    transition: border-color var(--nv-t-fast), box-shadow var(--nv-t-fast), background-color var(--nv-t-fast);
    appearance: none;
}
.nv-select,
.form-select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' 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 1rem center;
    background-size: 16px 16px;
}
.nv-textarea,
textarea.form-control,
textarea.form-control-admin {
    min-height: 8.5rem;
    resize: vertical;
}

.nv-input::placeholder,
.nv-textarea::placeholder,
.form-control::placeholder,
.form-control-admin::placeholder { color: #94A3B8; opacity: 1; }

.nv-input:hover,
.nv-textarea:hover,
.form-control:hover,
.form-control-admin:hover { border-color: #CBD5E1; }

.nv-input:focus,
.nv-select:focus,
.nv-textarea:focus,
.form-control:focus,
.form-select:focus,
.form-control-admin:focus {
    outline: none;
    border-color: var(--nv-blue-500);
    box-shadow: var(--nv-ring);
    background-color: var(--nv-surface);
    color: var(--nv-ink);
}

/* Error state */
.nv-input.is-invalid,
.nv-select.is-invalid,
.nv-textarea.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.nv-field--error .nv-input,
.nv-field--error .nv-textarea,
.nv-field--error .nv-select {
    border-color: var(--nv-danger);
    background-image: none;
}
.nv-input.is-invalid:focus,
.form-control.is-invalid:focus,
.nv-field--error .nv-input:focus { box-shadow: var(--nv-ring-danger); }

.nv-error,
.invalid-feedback {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    color: var(--nv-danger);
    font-size: var(--nv-fs-xs);
    font-weight: 500;
    line-height: 1.45;
}
.nv-help,
.form-text {
    color: var(--nv-muted);
    font-size: var(--nv-fs-xs);
    line-height: 1.5;
}

/* Checkbox / radio rows keep a 44px hit area */
.nv-check {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: var(--nv-tap);
    font-size: var(--nv-fs-sm);
    cursor: pointer;
}
.nv-check input[type="checkbox"],
.nv-check input[type="radio"],
.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    accent-color: var(--nv-blue-700);
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--nv-blue-700); border-color: var(--nv-blue-700); }
.form-check-input:focus { border-color: var(--nv-blue-500); box-shadow: var(--nv-ring); }

/* --- 4.9 Pagination -------------------------------------------------------- */

.nv-pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nv-pagination .page-link,
.pagination .page-link,
.nv-pagination a,
.nv-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--nv-tap);
    min-height: var(--nv-tap);
    padding: .5rem .75rem;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r-sm);
    background: var(--nv-surface);
    color: var(--nv-body);
    font-size: var(--nv-fs-sm);
    font-weight: 600;
    box-shadow: none;
    transition: all var(--nv-t);
}
.pagination .page-link:hover {
    color: var(--nv-blue-700);
    background: var(--nv-blue-50);
    border-color: var(--nv-tint-border);
    z-index: 1;
}
.pagination .page-item.active .page-link {
    background: var(--nv-blue-700);
    border-color: var(--nv-blue-700);
    color: #fff;
    box-shadow: 0 6px 16px rgba(30,64,175,.20);
}
.pagination .page-item.disabled .page-link {
    color: #CBD5E1;
    background: var(--nv-surface-2);
    border-color: var(--nv-line);
}
.pagination .page-link:focus { box-shadow: var(--nv-ring); }
/* Laravel's default pagination markup wraps arrows in svg */
.pagination .page-link svg { width: 1rem; height: 1rem; }

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

.nv-breadcrumb,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--nv-fs-sm);
    color: var(--nv-muted);
    background: transparent;
}
.nv-breadcrumb li,
.breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; min-width: 0; }
.nv-breadcrumb a,
.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-block: .25rem;
    color: var(--nv-muted);
    font-weight: 500;
}
.nv-breadcrumb a:hover,
.breadcrumb-item a:hover { color: var(--nv-blue-700); }
.nv-breadcrumb li[aria-current],
.nv-breadcrumb .is-current,
.breadcrumb-item.active { color: var(--nv-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: #CBD5E1;
    padding-right: .5rem;
}
.nv-breadcrumb li + li::before {
    content: '/';
    color: #CBD5E1;
    margin-right: .5rem;
}

/* --- 4.11 Tables ----------------------------------------------------------- */

.nv-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r);
    background: var(--nv-surface);
}
.nv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nv-fs-sm);
}
/* Opt in when the table genuinely needs more room than a phone screen —
   the wrapper scrolls, the page never does. */
.nv-table--wide { min-width: 34rem; }
.nv-table th,
.nv-table td {
    padding: .85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--nv-line);
}
.nv-table thead th {
    background: var(--nv-surface-2);
    color: var(--nv-ink);
    font-weight: 600;
    font-size: var(--nv-fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nv-table tbody tr:last-child td { border-bottom: 0; }
.nv-table tbody tr:hover td { background: var(--nv-surface-2); }

/* --- 4.12 Empty states ------------------------------------------------------ */

.nv-empty {
    display: grid;
    justify-items: center;
    gap: var(--nv-3);
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--nv-4);
    text-align: center;
    background: var(--nv-surface-2);
    border: 1px dashed var(--nv-line);
    border-radius: var(--nv-r);
}
.nv-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--nv-r-pill);
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
    color: #94A3B8;
    font-size: 1.35rem;
}
.nv-empty__title { font-size: var(--nv-fs-h3); color: var(--nv-ink); }
.nv-empty__text  { color: var(--nv-muted); font-size: var(--nv-fs-sm); max-width: 44ch; margin: 0; }

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

.nv-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: var(--nv-4);
    border-radius: var(--nv-r-sm);
    border: 1px solid var(--nv-line);
    background: var(--nv-surface-2);
    color: var(--nv-body);
    font-size: var(--nv-fs-sm);
    line-height: 1.6;
}
.nv-alert i { margin-top: .15rem; flex: none; }
.nv-alert--success,
.alert-success-custom {
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.28);
    color: #047857;
    border-radius: var(--nv-r-sm);
    padding: var(--nv-4);
    font-size: var(--nv-fs-sm);
}
.nv-alert--danger  { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.26);  color: #B91C1C; }
.nv-alert--warning { background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.28); color: #B45309; }
.nv-alert--info    { background: var(--nv-blue-50);    border-color: rgba(59,130,246,.22); color: var(--nv-blue-900); }

/* --- 4.14 Quote / testimonial ------------------------------------------------ */

.nv-quote {
    display: flex;
    flex-direction: column;
    gap: var(--nv-4);
    height: 100%;
    padding: clamp(1.35rem, 1rem + 1vw, 2rem);
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r);
    box-shadow: var(--nv-shadow-1);
}
.nv-quote__stars { display: flex; gap: .2rem; color: var(--nv-warning); font-size: .85rem; }
.nv-quote__text {
    color: var(--nv-body);
    font-size: var(--nv-fs-sm);
    line-height: 1.75;
    margin: 0;
}
.nv-quote__person { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.nv-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--nv-blue-50);
    color: var(--nv-blue-700);
    overflow: hidden;
}
.nv-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nv-quote__name { font-size: var(--nv-fs-sm); font-weight: 700; color: var(--nv-ink); line-height: 1.3; }
.nv-quote__role { font-size: var(--nv-fs-xs); color: var(--nv-muted); line-height: 1.4; }

/* --- 4.15 Prose ------------------------------------------------------------
   For DB-stored rich text (h2/h3/p/ul/ol/strong/img/blockquote/table/code).
   .article-content and .service-content are the legacy hooks in the blades. */

.nv-prose,
.article-content,
.service-content {
    color: var(--nv-body);
    font-size: 1.0625rem;
    line-height: var(--nv-lh-body);
    max-width: 72ch;
    overflow-wrap: anywhere;   /* long URLs never widen the page */
    word-break: break-word;
}
.nv-prose--wide { max-width: none; }

.nv-prose > * + *,
.article-content > * + *,
.service-content > * + * { margin-top: var(--nv-4); }

.nv-prose h2, .article-content h2, .service-content h2,
.nv-prose h3, .article-content h3, .service-content h3,
.nv-prose h4, .article-content h4, .service-content h4 {
    color: var(--nv-ink);
    line-height: var(--nv-lh-snug);
    letter-spacing: -0.02em;
    margin-top: var(--nv-6);
    margin-bottom: var(--nv-3);
    scroll-margin-top: calc(var(--nv-nav-h) + 1rem);
}
.nv-prose h2, .article-content h2, .service-content h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 700; }
.nv-prose h3, .article-content h3, .service-content h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);  font-weight: 700; }
.nv-prose h4, .article-content h4, .service-content h4 { font-size: 1.0625rem; font-weight: 600; }
.nv-prose > :first-child,
.article-content > :first-child,
.service-content > :first-child { margin-top: 0; }

.nv-prose ul, .article-content ul, .service-content ul,
.nv-prose ol, .article-content ol, .service-content ol {
    padding-left: 1.35rem;
    display: grid;
    gap: .5rem;
}
.nv-prose li::marker,
.article-content li::marker,
.service-content li::marker { color: var(--nv-blue-500); }

.nv-prose a, .article-content a, .service-content a {
    color: var(--nv-blue-700);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(30,64,175,.35);
}
.nv-prose a:hover, .article-content a:hover, .service-content a:hover {
    color: var(--nv-blue-900);
    text-decoration-color: currentColor;
}

.nv-prose img, .article-content img, .service-content img {
    border-radius: var(--nv-r);
    margin-block: var(--nv-5);
    box-shadow: var(--nv-shadow-1);
}

.nv-prose blockquote, .article-content blockquote, .service-content blockquote {
    margin-block: var(--nv-5);
    padding: var(--nv-4) var(--nv-5);
    border-left: 3px solid var(--nv-blue-500);
    border-radius: 0 var(--nv-r-sm) var(--nv-r-sm) 0;
    background: var(--nv-blue-50);
    color: var(--nv-ink);
    font-style: normal;
}
.nv-prose blockquote p:last-child { margin-bottom: 0; }

.nv-prose code, .article-content code, .service-content code {
    padding: .15em .4em;
    border-radius: 6px;
    background: var(--gray-100);
    color: var(--nv-blue-900);
    font-size: .9em;
}
.nv-prose pre, .article-content pre, .service-content pre {
    overflow-x: auto;
    padding: var(--nv-4);
    border-radius: var(--nv-r-sm);
    background: var(--nv-navy-800);
    color: #E2E8F0;
    font-size: var(--nv-fs-sm);
    line-height: 1.6;
}
.nv-prose pre code { background: none; color: inherit; padding: 0; }

.nv-prose table, .article-content table, .service-content table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--nv-fs-sm);
}
.nv-prose th, .nv-prose td,
.article-content th, .article-content td {
    padding: .7rem .9rem;
    border: 1px solid var(--nv-line);
    text-align: left;
}
.nv-prose th, .article-content th { background: var(--nv-surface-2); color: var(--nv-ink); }

.nv-prose hr { margin-block: var(--nv-6); }

/* --- 4.16 Hero scaffold -----------------------------------------------------
   Never a fixed vh on phones: content height + generous padding, so the
   headline, sub-headline, CTA and a hint of the next section all fit. */

.nv-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, var(--nv-navy-800) 0%, var(--nv-blue-900) 55%, var(--nv-blue-700) 100%);
}
.nv-hero__bg { position: absolute; inset: 0; z-index: -2; }
.nv-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.nv-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, rgba(11,18,32,.94) 16%, rgba(30,58,138,.78) 58%, rgba(59,130,246,.42) 100%);
}
.nv-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(3.25rem, 2rem + 6vw, 7rem);
    max-width: 46rem;
}
@media (min-width: 768px) {
    .nv-hero--tall { min-height: min(84vh, 780px); display: flex; align-items: center; }
}
.nv-hero__title {
    font-size: var(--nv-fs-display);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: var(--nv-4);
}
.nv-hero__sub {
    font-size: var(--nv-fs-lead);
    color: rgba(255,255,255,.82);
    line-height: 1.7;
    max-width: 40rem;
    margin-bottom: var(--nv-5);
}

/* Compact page header for interior pages */
.nv-page-header {
    position: relative;
    padding-block: clamp(2.5rem, 1.75rem + 4vw, 5rem);
    background:
        radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 38%),
        linear-gradient(180deg, var(--nv-surface-2), var(--nv-surface));
    border-bottom: 1px solid var(--nv-line);
}

/* --- 4.17 Bootstrap component polish ---------------------------------------- */

/* Accordion (contact FAQ) */
.accordion { --bs-accordion-border-color: var(--nv-line); }
.accordion-item {
    border: 1px solid var(--nv-line) !important;
    border-radius: var(--nv-r) !important;
    overflow: hidden;
    background: var(--nv-surface);
}
.accordion-button {
    min-height: 56px;
    padding: 1rem 1.15rem;
    font-weight: 600;
    font-size: var(--nv-fs-sm);
    color: var(--nv-ink);
    background: var(--nv-surface);
    line-height: 1.5;
}
.accordion-button:not(.collapsed) {
    color: var(--nv-blue-700);
    background: var(--nv-blue-50);
    box-shadow: none;
}
.accordion-button:focus { border-color: transparent; box-shadow: var(--nv-ring); }
.accordion-body { padding: 0 1.15rem 1.15rem; color: var(--nv-body); font-size: var(--nv-fs-sm); }

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r);
    box-shadow: var(--nv-shadow-3);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--nv-r-sm); min-height: 44px; display: flex; align-items: center; }

/* Carousel controls stay reachable but never overlap text on phones */
.carousel-indicators [data-bs-target] { border-radius: var(--nv-r-pill); }

/* Bootstrap alerts inherit the system radius */
.alert { border-radius: var(--nv-r-sm); font-size: var(--nv-fs-sm); }


/* =============================================================================
   05. DARK SURFACES
   Remap the tokens inside navy areas so every component adapts automatically.
   Apply .nv-dark to a hero, a CTA band, or any navy panel.
   ========================================================================== */

.nv-dark,
.nv-section--dark,
.footer-custom {
    --nv-ink: #FFFFFF;
    --nv-body: rgba(255,255,255,.78);
    --nv-muted: rgba(255,255,255,.62);
    --nv-line: rgba(255,255,255,.14);
    --nv-surface: rgba(255,255,255,.06);
    --nv-surface-2: rgba(255,255,255,.04);
    --nv-blue-50: rgba(255,255,255,.10);
    color: var(--nv-body);
}

.nv-section--dark {
    background: linear-gradient(135deg, var(--nv-navy-900) 0%, var(--nv-blue-900) 60%, var(--nv-blue-700) 100%);
}
.nv-surface-dark {
    background: linear-gradient(135deg, var(--nv-navy-900), var(--nv-navy-800));
    color: rgba(255,255,255,.78);
}

.nv-dark h1, .nv-dark h2, .nv-dark h3, .nv-dark h4, .nv-dark h5, .nv-dark h6,
.nv-section--dark h1, .nv-section--dark h2, .nv-section--dark h3,
.nv-section--dark h4, .nv-section--dark h5, .nv-section--dark h6 { color: #fff; }

.nv-dark .nv-eyebrow,
.nv-section--dark .nv-eyebrow { color: var(--nv-blue-300); }

.nv-dark .nv-section-title,
.nv-section--dark .nv-section-title { color: #fff; }

.nv-dark .nv-section-sub,
.nv-section--dark .nv-section-sub { color: rgba(255,255,255,.74); }

/* Glass cards on navy */
.nv-dark .nv-card,
.nv-section--dark .nv-card,
.nv-dark .nv-stat,
.nv-section--dark .nv-stat {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.nv-dark .nv-card--interactive:hover,
.nv-section--dark .nv-card--interactive:hover {
    background: rgba(255,255,255,.11);
    border-color: rgba(147,197,253,.45);
    box-shadow: 0 18px 44px rgba(2,6,23,.45);
}
.nv-dark .nv-stat__num,
.nv-section--dark .nv-stat__num { color: #fff; }
.nv-dark .nv-stat__label,
.nv-section--dark .nv-stat__label { color: rgba(255,255,255,.68); }

.nv-dark .nv-chip,
.nv-section--dark .nv-chip {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
.nv-dark .nv-chip.is-active,
.nv-section--dark .nv-chip.is-active { background: #fff; color: var(--nv-blue-900); border-color: #fff; }

.nv-dark .nv-badge,
.nv-section--dark .nv-badge {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}

.nv-dark .nv-icon,
.nv-section--dark .nv-icon {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    color: var(--nv-blue-300);
}

.nv-dark .nv-btn--solid,
.nv-section--dark .nv-btn--solid {
    --_bg: var(--nv-blue-500);
    --_bd: var(--nv-blue-500);
    --_fg: #fff;
}
.nv-dark .nv-btn--solid:hover,
.nv-section--dark .nv-btn--solid:hover { --_bg: #fff; --_bd: #fff; --_fg: var(--nv-blue-900); }

.nv-dark .nv-btn--outline,
.nv-section--dark .nv-btn--outline {
    --_fg: #fff;
    --_bd: rgba(255,255,255,.42);
}
.nv-dark .nv-btn--outline:hover,
.nv-section--dark .nv-btn--outline:hover { --_bg: rgba(255,255,255,.12); --_fg: #fff; --_bd: rgba(255,255,255,.75); }

.nv-dark .nv-btn--text,
.nv-section--dark .nv-btn--text { --_fg: var(--nv-blue-300); }
.nv-dark .nv-btn--text:hover,
.nv-section--dark .nv-btn--text:hover { --_fg: #fff; }

.nv-dark a:not(.nv-btn):not(.nv-chip):not(.btn),
.nv-section--dark a:not(.nv-btn):not(.nv-chip):not(.btn) { color: var(--nv-blue-300); }
.nv-dark a:not(.nv-btn):not(.nv-chip):not(.btn):hover,
.nv-section--dark a:not(.nv-btn):not(.nv-chip):not(.btn):hover { color: #fff; }

/* Footer links inherit the dark treatment but keep their own component rules */
.footer-custom a:not(.nv-btn):not(.btn):not(.footer-link):not(.footer-social-link):not(.footer-brand-logo-link) {
    color: #CBD5E1;
}
.footer-custom a:not(.nv-btn):not(.btn):not(.footer-link):not(.footer-social-link):not(.footer-brand-logo-link):hover {
    color: #fff;
}

.nv-dark :focus-visible,
.nv-section--dark :focus-visible { outline-color: var(--nv-blue-300); }

/* Subtle dotted texture for navy bands (no external asset) */
.nv-texture-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .6;
}


/* =============================================================================
   06. STICKY MOBILE CTA BAR  (<768px only)
   Two highest-intent actions. Rendered by the shell partial; it sits above the
   page and lifts the AI assistant launcher so the two never collide.
   ========================================================================== */

.nv-mobile-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--nv-z-mobile-cta);
    display: none;               /* shown only under 768px */
    align-items: center;
    gap: .5rem;
    padding: .6rem var(--nv-3);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--nv-line);
    box-shadow: 0 -6px 24px rgba(15,23,42,.10);
}
.nv-mobile-cta .nv-btn,
.nv-mobile-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding-inline: .6rem;
    font-size: var(--nv-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Icon-only variant for the secondary channel on very narrow phones */
.nv-mobile-cta__icon { flex: 0 0 auto; width: 46px; padding-inline: 0; }

@media (max-width: 767.98px) {
    .nv-mobile-cta { display: flex; }

    /* Content must never hide behind the bar */
    body:has(.nv-mobile-cta) {
        padding-bottom: calc(var(--nv-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
    }
    body.nv-has-mobile-cta {
        padding-bottom: calc(var(--nv-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Lift the floating AI assistant launcher clear of the bar.
       Doubled class beats the partial's inline `.site-assistant` rule. */
    body:has(.nv-mobile-cta) .site-assistant.site-assistant {
        bottom: calc(var(--nv-mobile-cta-h) + .5rem + env(safe-area-inset-bottom, 0px));
    }
    body.nv-has-mobile-cta .site-assistant.site-assistant {
        bottom: calc(var(--nv-mobile-cta-h) + .5rem + env(safe-area-inset-bottom, 0px));
    }
    .site-assistant .assistant-panel { max-height: calc(100dvh - var(--nv-mobile-cta-h) - 5rem); }
}
@media (min-width: 768px) {
    .nv-mobile-cta { display: none !important; }
}


/* =============================================================================
   07. MOBILE REFINEMENTS
   ========================================================================== */

/* Bootstrap's 3rem gutters are too wide on phones and can out-run the
   container padding — cap them (this is also the row-overflow guard). */
@media (max-width: 767.98px) {
    .row.g-5, .row.gx-5,
    .row.g-sm-5, .row.gx-sm-5,
    .row.g-md-5, .row.gx-md-5,
    .row.g-xl-5, .row.gx-xl-5 { --bs-gutter-x: 1.5rem; }
    .row.g-4, .row.gx-4 { --bs-gutter-x: 1.25rem; }
}

/* Nothing may create a horizontal scrollbar.
   NB: never redefine --bs-gutter-x in terms of itself — a cyclic custom
   property is invalid at computed-value time and kills every .col padding. */
img, table, pre, blockquote { max-width: 100%; }

/* Long unbroken strings (URLs, IDs, code) must wrap, not scroll */
p, li, dd, dt, td, th, figcaption, address,
.nv-card__text, .nv-section-sub, .nv-prose,
.article-content, .service-content { overflow-wrap: break-word; }
.nv-prose, .article-content, .service-content,
.nv-break { overflow-wrap: anywhere; }

/* --- Tap targets ---------------------------------------------------------- */

.navbar-custom .nav-link,
.footer-custom .footer-link,
.footer-custom .footer-social-link,
.nv-tap {
    min-height: var(--nv-tap);
}
/* Never set `display` here — Bootstrap's .navbar-expand-* must stay in charge
   of hiding the toggler on desktop. */
.navbar-custom .navbar-toggler {
    align-items: center;
    justify-content: center;
    min-width: var(--nv-tap);
    min-height: var(--nv-tap);
    border-radius: var(--nv-r-sm);
}
@media (max-width: 991.98px) {
    .navbar-custom.navbar-expand-lg .navbar-toggler { display: inline-flex; }
}

/* Inline text links inside content get vertical breathing room on phones */
@media (max-width: 767.98px) {
    .service-link,
    .nv-btn--text,
    .blog-list-link,
    .portfolio-work-link,
    .nv-inline-link,
    .nv-tap {
        display: inline-flex;
        align-items: center;
        min-height: var(--nv-tap);
    }
    .nv-chips .nv-chip { min-height: var(--nv-tap); }

    /* Inline links inside running text: vertical padding on an inline box
       grows the hit area (~44px) without disturbing the line layout. */
    .nv-prose p a,
    .nv-prose li a,
    .article-content p a,
    .article-content li a,
    .service-content p a,
    .service-content li a,
    .nv-inline-link--text { padding-block: .5rem; }

    .nv-breadcrumb a,
    .breadcrumb-item a {
        min-height: var(--nv-tap);
        padding-inline: .35rem;   /* short labels still reach ~44px wide */
        margin-inline: -.35rem;
    }

    /* Code blocks wrap on phones instead of forcing a side-scroll */
    .nv-prose pre,
    .article-content pre,
    .service-content pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}

/* Touch devices of any width (tablets included) get the same generous
   hit areas — this is the semantically correct query for tap targets. */
@media (hover: none), (pointer: coarse) {
    .nv-prose p a,
    .nv-prose li a,
    .article-content p a,
    .article-content li a,
    .service-content p a,
    .service-content li a { padding-block: .5rem; }

    .nv-breadcrumb a,
    .breadcrumb-item a {
        min-height: var(--nv-tap);
        padding-inline: .35rem;
        margin-inline: -.35rem;
    }

    .service-link,
    .nv-btn--text,
    .nv-inline-link { min-height: var(--nv-tap); display: inline-flex; align-items: center; }
}

/* --- Mobile navigation panel ---------------------------------------------- */

@media (max-width: 991.98px) {
    .navbar-custom .navbar-collapse {
        margin-top: var(--nv-3);
        padding: var(--nv-2);
        border-top: 1px solid var(--nv-line);
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .navbar-custom .navbar-nav {
        width: 100%;
        align-items: stretch !important;
        gap: .15rem;
    }
    .navbar-custom .nav-item { width: 100%; }
    .navbar-custom .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: .8rem .85rem;
        border-radius: var(--nv-r-sm);
        font-size: 1rem;
    }
    .navbar-custom .nav-link:hover { background: var(--nv-surface-2); }
    .navbar-custom .nav-link.active {
        background: var(--nv-blue-50);
        color: var(--nv-blue-700);
        font-weight: 600;
    }
    /* language switcher + CTA live inside the panel */
    .navbar-custom .navbar-nav .dropdown { width: 100%; margin-top: var(--nv-2); }
    .navbar-custom .navbar-nav .language-menu { width: 100%; }
    .navbar-custom .navbar-nav .btn-primary-custom,
    .navbar-custom .navbar-nav .nv-btn {
        width: 100%;
        margin-top: var(--nv-2);
    }
}

/* Keep decorative sliders/carousels from stretching the page */
.carousel, .carousel-inner { max-width: 100%; }


/* =============================================================================
   08. LEGACY COMPATIBILITY LAYER
   Every class from the old inline <style> in master.blade.php, restyled onto
   the new system. Keep these — existing pages depend on them.
   ========================================================================== */

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

.btn-primary-custom,
.btn-secondary-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--nv-tap);
    max-width: 100%;
    padding: .75rem 1.5rem;
    border-radius: var(--nv-r-sm);
    font-size: var(--nv-fs-sm);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--nv-t), color var(--nv-t),
                border-color var(--nv-t), box-shadow var(--nv-t), transform var(--nv-t);
}

.btn-primary-custom {
    background: var(--nv-blue-700);
    color: #fff;
    border: 1px solid var(--nv-blue-700);
    box-shadow: 0 6px 16px rgba(30,64,175,.18);
}
.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background: var(--nv-blue-900);
    border-color: var(--nv-blue-900);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--nv-shadow-blue);
}

.btn-secondary-custom {
    background: transparent;
    color: var(--nv-ink);
    border: 1px solid var(--nv-line);
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus {
    background: var(--nv-blue-50);
    color: var(--nv-blue-700);
    border-color: var(--nv-tint-border);
    transform: translateY(-2px);
}

/* Bootstrap buttons used across the pages get the same ergonomics */
.btn {
    min-height: var(--nv-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--nv-r-sm);
    font-weight: 600;
    font-size: var(--nv-fs-sm);
    line-height: 1.25;
    transition: all var(--nv-t);
}
.btn-lg { min-height: 52px; padding: .95rem 2rem; font-size: var(--nv-fs-body); border-radius: var(--nv-r-sm); }
.btn-sm { min-height: var(--nv-tap); padding: .5rem 1rem; font-size: var(--nv-fs-xs); border-radius: 8px; }
.btn:focus-visible { box-shadow: var(--nv-ring); }
.btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--nv-blue-700);
    box-shadow: 0 10px 26px rgba(2,6,23,.18);
}
.btn-light:hover { background: var(--nv-blue-50); border-color: var(--nv-blue-50); color: var(--nv-blue-900); }

/* --- Section rhythm & headings -------------------------------------------- */

.section-padding { padding-block: var(--nv-section-y); }

.section-title {
    font-size: var(--nv-fs-h2);
    font-weight: 700;
    color: var(--nv-ink);
    letter-spacing: -0.02em;
    line-height: var(--nv-lh-tight);
    margin-bottom: var(--nv-3);
}

.section-subtitle {
    font-size: var(--nv-fs-lead);
    color: var(--nv-muted);
    line-height: 1.65;
    margin-bottom: var(--nv-6);
    max-width: 60ch;
}

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

.card-custom {
    position: relative;
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-r);
    box-shadow: var(--nv-shadow-1);
    transition: transform var(--nv-t), box-shadow var(--nv-t), border-color var(--nv-t);
}
.card-custom:hover {
    transform: translateY(-6px);
    border-color: var(--nv-tint-border);
    box-shadow: var(--nv-shadow-3);
}

/* --- Utility colours ------------------------------------------------------- */

.text-primary-custom   { color: var(--nv-blue-700) !important; }
.text-secondary-custom { color: var(--nv-blue-500) !important; }
.bg-primary-custom     { background-color: var(--nv-blue-700) !important; color: #fff !important; }
.bg-gradient-custom    { background: linear-gradient(135deg, var(--nv-blue-700), var(--nv-blue-500)); }
.bg-light-custom       { background-color: var(--nv-surface-2); }
.bg-navy-custom        { background-color: var(--nv-navy-800); }

/* --- Navbar ---------------------------------------------------------------- */

.navbar-custom {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    padding-block: .75rem;
    z-index: var(--nv-z-navbar);
    transition: padding var(--nv-t), box-shadow var(--nv-t), border-color var(--nv-t), background-color var(--nv-t);
}
.navbar-custom.scrolled {
    padding-block: .5rem;
    background: rgba(255,255,255,.96);
    border-bottom-color: var(--nv-line);
    box-shadow: var(--nv-shadow-1);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nv-blue-700);
}
.navbar-brand span { color: var(--nv-blue-500); }

.navbar-custom .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: var(--nv-fs-sm);
    color: var(--nv-body);
    padding: .5rem .85rem;
    border-radius: var(--nv-r-sm);
    transition: color var(--nv-t), background-color var(--nv-t);
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus { color: var(--nv-blue-700); }
.navbar-custom .nav-link.active { color: var(--nv-blue-700); font-weight: 600; }

/* Desktop active indicator */
@media (min-width: 992px) {
    .navbar-custom .nav-link.active::after {
        content: '';
        position: absolute;
        left: .85rem;
        right: .85rem;
        bottom: .15rem;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--nv-blue-700), var(--nv-blue-500));
    }
}

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

.footer-custom {
    background: var(--nv-navy-800);
    color: rgba(255,255,255,.72);
    padding: clamp(3rem, 2rem + 4vw, 5rem) 0 var(--nv-6);
}

.footer-title {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--nv-4);
}

.footer-custom .footer-link {
    display: flex;
    align-items: center;
    min-height: var(--nv-tap);
    padding-block: .35rem;
    color: var(--gray-400);
    font-size: var(--nv-fs-sm);
    line-height: 1.5;
    transition: color var(--nv-t), transform var(--nv-t);
    overflow-wrap: break-word;
}
.footer-custom .footer-link:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: var(--nv-5);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-size: var(--nv-fs-sm);
}

/* Contact rows in the footer keep a comfortable hit area */
.footer-custom a[href^="mailto:"],
.footer-custom a[href^="tel:"],
.footer-custom a[href*="wa.me"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--nv-tap);
    overflow-wrap: anywhere;
}

/* --- Page loader ----------------------------------------------------------- */

.page-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--nv-surface);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease;
}
.loader-content { text-align: center; }
.loader-logo {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--nv-blue-700);
}
.spinner {
    width: 46px;
    height: 46px;
    margin: var(--nv-5) auto 0;
    border: 3px solid var(--nv-blue-100);
    border-top-color: var(--nv-blue-700);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: var(--nv-blue-100); }
}

/* --- Legacy responsive shims ------------------------------------------------
   The old file shrank .section-padding / .section-title in media queries.
   Both are fluid now, so nothing is needed here — kept as a marker so nobody
   re-adds fixed-px breakpoints. */

/* ==========================================================================
   AOS on small screens
   ==========================================================================
   AOS parks `fade-left` / `fade-right` at translateX(+/-100px) until the element
   scrolls into view. On a phone that is ~27% of the viewport, so the element hangs
   outside it - and because `body { overflow-x: clip }` (correctly) refuses to grow
   the page sideways, anything whose animation never fires stays permanently cut off.
   Below the tablet breakpoint we therefore move on the Y axis only: same reveal, no
   horizontal travel, nothing can be clipped.
   The selector is doubled to out-specify AOS's own `[data-aos^="fade"][data-aos^="fade"]`. */
@media (max-width: 767.98px) {
    [data-aos="fade-left"][data-aos="fade-left"],
    [data-aos="fade-right"][data-aos="fade-right"],
    [data-aos="fade-down-left"][data-aos="fade-down-left"],
    [data-aos="fade-down-right"][data-aos="fade-down-right"],
    [data-aos="fade-up-left"][data-aos="fade-up-left"],
    [data-aos="fade-up-right"][data-aos="fade-up-right"] {
        transform: translate3d(0, 28px, 0);
    }

    [data-aos="fade-left"][data-aos="fade-left"].aos-animate,
    [data-aos="fade-right"][data-aos="fade-right"].aos-animate,
    [data-aos="fade-down-left"][data-aos="fade-down-left"].aos-animate,
    [data-aos="fade-down-right"][data-aos="fade-down-right"].aos-animate,
    [data-aos="fade-up-left"][data-aos="fade-up-left"].aos-animate,
    [data-aos="fade-up-right"][data-aos="fade-up-right"].aos-animate {
        transform: translate3d(0, 0, 0);
    }
}