/* ==========================================================================
   NaxosCars — Travel Guide editorial design system
   Scoped entirely under .nxg so the homepage / header / footer are untouched.
   ========================================================================== */

.nxg {
    --g-cream:      #ECEFF3;      /* cool dove grey, soft blue undertone — primary section ground */
    --g-cream-deep: #DEE4EA;      /* deeper slate-grey — alternate section rhythm */
    --g-white:      #FFFFFF;
    --g-ink:        #16232E;
    --g-ink-soft:   #4A5A66;
    --g-line:       rgba(22, 35, 46, 0.12);
    --g-terracotta: #1E5F82;      /* editorial accent (cool Aegean blue): eyebrows, kickers, inline links, borders */
    --g-teal:       #1F6F6B;
    --g-brand:      #0066FF;      /* pulled from the existing site palette */
    --g-cta:        #0077B6;      /* Cycladic sea blue — interactive buttons & CTAs only */
    --g-cta-deep:   #005B8E;      /* deeper ocean blue — hover / active states */
    --g-serif:      'Playfair Display', Georgia, serif;
    --g-sans:       'Plus Jakarta Sans', 'Lato', system-ui, sans-serif;
    --g-max:        1180px;
    --g-narrow:     760px;

    background: var(--g-cream);
    color: var(--g-ink);
    font-family: var(--g-sans);
    font-size: 17px;
    line-height: 1.75;
    display: block;
    overflow-x: hidden;
}

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

.nxg img { max-width: 100%; height: auto; display: block; }

/* style.css declares a global `nav { position: fixed; top: 0; width: 100% }`
   for the site header. Any <nav> inside the guide pages (breadcrumb, guide
   links) must opt out of that or it pins itself to the viewport. */
.nxg nav {
    position: static;
    top: auto;
    width: auto;
    z-index: auto;
    padding: 0;
    transition: none;
}

/* ---------- Typography ---------------------------------------------------- */

.nxg h1, .nxg h2, .nxg h3, .nxg h4 {
    font-family: var(--g-serif);
    color: var(--g-ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.12;
    margin: 0 0 0.5em;
}

.nxg h1 { font-size: clamp(2rem, min(4.4vw, 6vh), 3.9rem); font-weight: 700; line-height: 1.15; }
.nxg h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.nxg h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.nxg h4 { font-size: 1.12rem; font-family: var(--g-sans); font-weight: 800; letter-spacing: -0.01em; }

.nxg p { margin: 0 0 1.35em; color: var(--g-ink-soft); }
.nxg p:last-child { margin-bottom: 0; }
.nxg strong { color: var(--g-ink); font-weight: 700; }

.nxg a { color: var(--g-terracotta); text-decoration: none; }
.nxg-body-link {
    color: var(--g-terracotta);
    font-weight: 700;
    border-bottom: 1px solid rgba(30, 95, 130, 0.35);
    transition: border-color .25s ease, color .25s ease;
}
.nxg-body-link:hover { border-bottom-color: var(--g-terracotta); color: #164B67; }

.nxg-eyebrow {
    display: inline-block;
    font-family: var(--g-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--g-terracotta);
    margin: 0 0 20px;
}
.nxg-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px; height: 1px;
    background: var(--g-terracotta);
    vertical-align: middle;
    margin-right: 12px;
    opacity: .8;
}

.nxg-lead {
    font-size: clamp(1.06rem, 1.5vw, 1.22rem);
    line-height: 1.8;
    color: var(--g-ink-soft);
    max-width: 65ch;
}

.nxg-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--g-teal);
    margin-bottom: 10px;
    display: block;
}

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

.nxg-section { padding: clamp(70px, 9vw, 130px) 24px; position: relative; }
.nxg-section--tight { padding-top: clamp(46px, 5vw, 70px); }
.nxg-section--cream { background: var(--g-cream); }
.nxg-section--deep  { background: var(--g-cream-deep); }
.nxg-section--white { background: var(--g-white); }
.nxg-section--ink   { background: var(--g-ink); }
.nxg-section--ink h2,
.nxg-section--ink h3,
.nxg-section--ink h4 { color: #fff; }
.nxg-section--ink p  { color: rgba(255,255,255,0.72); }
.nxg-section--ink .nxg-eyebrow { color: #8FBEDA; }
.nxg-section--ink .nxg-eyebrow::before { background: #8FBEDA; }

/* Contrast guard — white-on-white fix.
   `.nxg-section--ink` paints ALL descendant headings/paragraphs white so text
   reads on the dark ground. But white-surface components (a `.nxg-card` or a
   `.nxg-feature__card`) dropped into an ink section keep their own light
   background, so that inherited white text renders white-on-white. Restore the
   ink text colours on those light surfaces. (Tiles, facts, cta and compare
   panels already carry their own ink-context background overrides.) */
.nxg-section--ink .nxg-card h2,
.nxg-section--ink .nxg-card h3,
.nxg-section--ink .nxg-card h4,
.nxg-section--ink .nxg-feature__card h2,
.nxg-section--ink .nxg-feature__card h3,
.nxg-section--ink .nxg-feature__card h4 { color: var(--g-ink); }
.nxg-section--ink .nxg-card p,
.nxg-section--ink .nxg-feature__card p { color: var(--g-ink-soft); }
.nxg-section--ink .nxg-card strong,
.nxg-section--ink .nxg-feature__card strong { color: var(--g-ink); }

/* Bold text sits directly on the dark ink ground in plain ink sections (e.g.
   inside `.nxg-split` or `.nxg-tile` copy). `.nxg strong` colours it dark ink,
   which is invisible on dark — force it to white on the ink ground. */
.nxg-section--ink strong { color: #fff; }

/* Accent-coloured text on the dark ink ground (tile numbers, inline body links)
   would use the dark editorial blue and disappear. Use the light accent. Light
   card/feature surfaces inside ink sections keep the dark editorial treatment. */
.nxg-section--ink .nxg-tile__num,
.nxg-section--ink .nxg-body-link { color: #8FBEDA; }
.nxg-section--ink .nxg-body-link { border-bottom-color: rgba(143, 190, 218, 0.45); }
.nxg-section--ink .nxg-body-link:hover { color: #B9D8EA; border-bottom-color: #B9D8EA; }
.nxg-section--ink .nxg-card .nxg-body-link,
.nxg-section--ink .nxg-feature__card .nxg-body-link { color: var(--g-terracotta); border-bottom-color: rgba(30, 95, 130, 0.35); }

.nxg-wrap   { max-width: var(--g-max); margin: 0 auto; }
.nxg-narrow { max-width: var(--g-narrow); margin: 0 auto; }

.nxg-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 70px); }
.nxg-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.nxg-head--center .nxg-lead { margin-left: auto; margin-right: auto; }

.nxg-rule { height: 1px; background: var(--g-line); border: 0; margin: 0; }

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

.nxg-hero {
    --g-nav-h: 104px;
    position: relative;
    min-height: calc(100vh - var(--g-nav-h));
    min-height: calc(100svh - var(--g-nav-h));
    display: flex;
    align-items: flex-end;
    padding: 24px;
    overflow: hidden;
    background: var(--g-ink);
}
.nxg-hero__media { position: absolute; inset: 0; }
.nxg-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    animation: nxg-heroPan 14s ease-out forwards;
}
@keyframes nxg-heroPan { to { transform: scale(1); } }

.nxg-hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,18,26,0.42) 0%, rgba(10,18,26,0.06) 34%, rgba(10,18,26,0.80) 100%);
}
.nxg-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--g-max);
    margin: 0 auto;
    padding: 0 0 clamp(34px, 6vh, 84px);
    color: #fff;
}
.nxg-hero h1 { color: #fff; max-width: min(940px, 100%); text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.nxg-hero .nxg-eyebrow { color: #fff; opacity: .92; }
.nxg-hero .nxg-eyebrow::before { background: #fff; }
.nxg-hero__sub {
    color: rgba(255,255,255,0.88);
    font-size: clamp(0.98rem, 1.4vw, 1.16rem);
    max-width: 56ch;
    margin: clamp(12px, 2.2vh, 22px) 0 0;
    line-height: 1.7;
}
/* `.nxg p` (0,1,1) out-specifies `.nxg-hero__sub` (0,1,0) and would paint the
   dark body-text colour on the dark hero. Raise specificity so the intended
   near-white wins — otherwise the subtitle reads dark-on-dark. */
.nxg-hero .nxg-hero__sub { color: rgba(255,255,255,0.88); }
.nxg-hero__meta {
    display: flex; flex-wrap: wrap; gap: 12px 30px;
    margin-top: clamp(20px, 3.4vh, 36px); padding-top: clamp(16px, 2.4vh, 26px);
    border-top: 1px solid rgba(255,255,255,0.22);
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}
.nxg-hero__cue {
    position: absolute; left: 50%; bottom: 22px;
    transform: translateX(-50%);
    width: 1px; height: 46px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 100%);
    animation: nxg-cue 2.2s ease-in-out infinite;
}
@keyframes nxg-cue { 0%,100% { opacity:.25; height:30px; } 50% { opacity:1; height:52px; } }

/* ---------- Hero-integrated guide cards (2x2) ----------------------------- */

.nxg-hero--cards .nxg-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(26px, 3.4vw, 60px);
    align-items: end;
    padding-bottom: clamp(18px, 3.6vh, 56px);
}
.nxg-hero--cards .nxg-hero__meta { margin-top: clamp(18px, 3vh, 30px); }
.nxg-hero--cards h1 { max-width: min(760px, 100%); }

.nxg-herocards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(9px, 1.5vh, 14px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nxg-herocards li { display: flex; min-width: 0; margin: 0; padding: 0; }
.nxg-herocards a {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: clamp(5px, 0.9vh, 8px);
    padding: clamp(13px, 2.2vh, 22px) 20px clamp(14px, 2.4vh, 24px);
    border-radius: 6px;
    background: rgba(14, 22, 30, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    transition: transform .4s cubic-bezier(.16,.84,.44,1), background .4s ease, border-color .4s ease, box-shadow .4s ease;
    min-width: 0;
}
.nxg-herocards a:hover,
.nxg-herocards a:focus-visible {
    transform: translateY(-5px);
    background: rgba(30, 95, 130, 0.82);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
    outline: none;
}
.nxg-herocards span {
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.19em;
    text-transform: uppercase; color: #A9CFE6;
    transition: color .3s ease;
}
.nxg-herocards a:hover span { color: #fff; }
.nxg-herocards strong {
    font-family: var(--g-serif); font-size: clamp(1.05rem, 1.5vw, 1.34rem);
    font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.2;
}
.nxg-herocards em {
    font-style: normal; font-size: 0.84rem; line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
}
.nxg-herocards a:hover em { color: rgba(255, 255, 255, 0.95); }

/* ---------- Breadcrumb ---------------------------------------------------- */

.nxg-crumb {
    background: var(--g-white);
    border-bottom: 1px solid var(--g-line);
    padding: 15px 24px;
    font-size: 0.82rem;
}
.nxg-crumb ol {
    max-width: var(--g-max); margin: 0 auto; padding: 0;
    list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
    color: var(--g-ink-soft);
}
.nxg-crumb li::after { content: "/"; margin-left: 10px; color: var(--g-line); }
.nxg-crumb li:last-child::after { content: ""; }
.nxg-crumb a { color: var(--g-ink-soft); }
.nxg-crumb a:hover { color: var(--g-terracotta); }
.nxg-crumb [aria-current] { color: var(--g-ink); font-weight: 700; }

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

.nxg-btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 30px;
    border-radius: 999px;
    font-family: var(--g-sans);
    font-size: 0.82rem; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase;
    background: var(--g-ink); color: #fff;
    border: 1.5px solid var(--g-ink);
    transition: transform .3s cubic-bezier(.16,.84,.44,1), background .3s ease, box-shadow .3s ease;
    line-height: 1;
}
.nxg-btn:hover {
    background: var(--g-cta); border-color: var(--g-cta); color: #fff;
    transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,119,182,.32);
}
.nxg-btn svg { transition: transform .3s ease; }
.nxg-btn:hover svg { transform: translateX(4px); }

.nxg-btn--accent { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }
.nxg-btn--accent:hover { background: var(--g-cta-deep); border-color: var(--g-cta-deep); box-shadow: 0 14px 30px rgba(0,91,142,.4); }

.nxg-btn--ghost { background: transparent; color: var(--g-ink); border-color: var(--g-ink); }
.nxg-btn--ghost:hover { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }

.nxg-btn--light { background: #fff; color: var(--g-ink); border-color: #fff; }
.nxg-btn--light:hover { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }

.nxg-btn--lg { padding: 21px 42px; font-size: 0.9rem; }

/* Contrast guard: the generic `.nxg a { color: terracotta }` rule (0,1,1) would
   otherwise out-specify `.nxg-btn` (0,1,0) and paint button text terracotta —
   invisible on the terracotta accent button until hover flips the background.
   Every rule below carries the `a` element token so all anchor buttons share the
   same specificity (0,2,1) and plain source order picks the winner per variant. */
.nxg .nxg-btn,          .nxg a.nxg-btn            { color: #fff; }
.nxg .nxg-btn--accent,  .nxg a.nxg-btn--accent    { color: #fff; }
.nxg .nxg-btn--light,   .nxg a.nxg-btn--light     { color: var(--g-ink); }
.nxg .nxg-btn--light:hover, .nxg a.nxg-btn--light:hover { color: #fff; }
.nxg .nxg-btn--ghost,   .nxg a.nxg-btn--ghost     { color: var(--g-ink); }
.nxg .nxg-btn--ghost:hover, .nxg a.nxg-btn--ghost:hover { color: #fff; }

/* ---------- Inline contextual CTA band ------------------------------------ */

.nxg-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
    background: var(--g-white);
    border: 1px solid var(--g-line);
    border-left: 4px solid var(--g-terracotta);
    border-radius: 4px;
    padding: clamp(28px, 3.5vw, 44px);
    margin: clamp(40px, 5vw, 64px) auto 0;
    max-width: var(--g-max);
}
.nxg-cta__txt { flex: 1 1 380px; }
.nxg-cta__txt h3 { margin-bottom: 8px; font-size: clamp(1.3rem, 2vw, 1.75rem); }
.nxg-cta__txt p  { margin: 0; font-size: 0.98rem; }
.nxg-section--ink .nxg-cta { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); border-left-color: #8FBEDA; }
.nxg-section--ink .nxg-cta h3 { color: #fff; }

/* Big conversion block */
.nxg-convert {
    background: var(--g-ink);
    border-radius: 6px;
    padding: clamp(44px, 6vw, 86px);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.nxg-convert::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(30,95,130,.35), transparent 55%);
    pointer-events: none;
}
.nxg-convert > * { position: relative; z-index: 1; }
.nxg-convert h2 { color: #fff; max-width: 18ch; margin: 0 auto 20px; }
.nxg-convert p  { color: rgba(255,255,255,.75); max-width: 60ch; margin: 0 auto 36px; }
.nxg-convert__meta {
    margin-top: 30px; font-size: 0.78rem; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700;
}
/* The conversion block is dark but is not a `.nxg-section--ink`, so its eyebrow
   defaulted to the dark editorial accent on a dark ground. Use the light accent
   (matching the ink-section treatment) for legible contrast. */
.nxg-convert .nxg-eyebrow { color: #8FBEDA; }
.nxg-convert .nxg-eyebrow::before { background: #8FBEDA; }

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

.nxg-grid { display: grid; gap: clamp(22px, 2.6vw, 36px); }
.nxg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nxg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nxg-grid--4 { grid-template-columns: repeat(4, 1fr); }

.nxg-card {
    background: var(--g-white);
    border: 1px solid var(--g-line);
    border-radius: 4px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .45s cubic-bezier(.16,.84,.44,1), box-shadow .45s ease;
}
.nxg-card:hover { transform: translateY(-7px); box-shadow: 0 26px 50px rgba(22,35,46,.11); }
.nxg-card__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--g-cream-deep); }
.nxg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,.84,.44,1); }
.nxg-card:hover .nxg-card__media img { transform: scale(1.07); }
.nxg-card__body { padding: 30px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.nxg-card__body h3 { margin-bottom: 12px; }
.nxg-card__body p { font-size: 0.97rem; margin-bottom: 18px; }
.nxg-card__foot {
    margin-top: auto; padding-top: 18px; border-top: 1px solid var(--g-line);
    font-size: 0.76rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--g-ink-soft);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.nxg-card__link { color: var(--g-terracotta); }
.nxg-card__link:hover { color: var(--g-ink); }

/* Numbered / icon plain cards */
.nxg-tile {
    background: var(--g-white);
    border: 1px solid var(--g-line);
    border-radius: 4px;
    padding: 40px 32px;
    transition: transform .4s cubic-bezier(.16,.84,.44,1), border-color .4s ease, box-shadow .4s ease;
}
.nxg-tile:hover { transform: translateY(-6px); border-color: rgba(30,95,130,.5); box-shadow: 0 22px 44px rgba(22,35,46,.08); }
.nxg-tile__num {
    font-family: var(--g-serif); font-size: 2.4rem; line-height: 1;
    color: var(--g-terracotta); opacity: .55; display: block; margin-bottom: 18px;
}
.nxg-tile h3 { font-size: 1.28rem; margin-bottom: 12px; }
.nxg-tile p  { font-size: 0.97rem; margin: 0; }
.nxg-section--ink .nxg-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

.nxg-ico {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30,95,130,.1); color: var(--g-terracotta);
    margin-bottom: 22px;
}
.nxg-ico svg { width: 21px; height: 21px; }

/* ---------- Split (asymmetric image + text) ------------------------------- */

.nxg-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(34px, 5vw, 78px);
    align-items: center;
    max-width: var(--g-max);
    margin: 0 auto;
}
.nxg-split--flip .nxg-split__media { order: 2; }
.nxg-split__media { position: relative; }
.nxg-split__media img {
    width: 100%; border-radius: 4px;
    aspect-ratio: 4 / 3.2; object-fit: cover;
}
.nxg-split__media--tall img { aspect-ratio: 3 / 4; }
.nxg-split__cap {
    position: absolute; bottom: -1px; left: -1px;
    background: var(--g-cream);
    padding: 18px 26px 0 0;
    font-size: 0.74rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: var(--g-ink-soft);
    max-width: 78%;
}
.nxg-section--white .nxg-split__cap { background: var(--g-white); }
.nxg-section--deep  .nxg-split__cap { background: var(--g-cream-deep); }
.nxg-split__body h2 { margin-bottom: 22px; }

/* Overlapping editorial feature */
.nxg-feature { position: relative; max-width: var(--g-max); margin: 0 auto; }
.nxg-feature__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 4px; }
.nxg-feature__card {
    background: var(--g-white);
    border-radius: 4px;
    padding: clamp(30px, 4vw, 54px);
    max-width: 560px;
    margin: -90px 0 0 clamp(16px, 5vw, 70px);
    position: relative;
    box-shadow: 0 30px 60px rgba(22,35,46,.13);
}
.nxg-feature__card h2 { margin-bottom: 18px; }

/* ---------- Image grid / mosaic ------------------------------------------ */

.nxg-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: 16px;
    max-width: var(--g-max);
    margin: 0 auto;
}
.nxg-mosaic figure { margin: 0; overflow: hidden; border-radius: 4px; position: relative; }
.nxg-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,.84,.44,1); }
.nxg-mosaic figure:hover img { transform: scale(1.07); }
.nxg-mosaic figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 26px 20px 16px; color: #fff;
    font-size: 0.78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: linear-gradient(180deg, transparent, rgba(10,18,26,.8));
}
.nxg-mosaic .is-wide { grid-column: span 2; }
.nxg-mosaic .is-tall { grid-row: span 2; }

/* ---------- Pull quote ---------------------------------------------------- */

.nxg-quote {
    max-width: 900px; margin: 0 auto; text-align: center; padding: 0 12px;
}
.nxg-quote blockquote {
    margin: 0;
    font-family: var(--g-serif);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.32;
    color: var(--g-ink);
    letter-spacing: -0.02em;
}
.nxg-section--ink .nxg-quote blockquote { color: #fff; }
.nxg-quote cite {
    display: block; margin-top: 28px; font-style: normal;
    font-family: var(--g-sans); font-size: 0.76rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase; color: var(--g-terracotta);
}

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

.nxg-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--g-line);
    border: 1px solid var(--g-line); border-radius: 4px; overflow: hidden;
    max-width: var(--g-max); margin: 0 auto;
}
.nxg-stat { background: var(--g-white); padding: 42px 26px; text-align: center; }
.nxg-section--deep .nxg-stat { background: var(--g-cream); }
.nxg-stat b {
    display: block; font-family: var(--g-serif); font-weight: 600;
    font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--g-terracotta);
    margin-bottom: 12px; letter-spacing: -0.02em;
}
.nxg-stat span {
    font-size: 0.76rem; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; color: var(--g-ink-soft);
}

/* ---------- Quotable fact callout ---------------------------------------- */

.nxg-fact {
    max-width: 940px; margin: 0 auto;
    background: var(--g-white);
    border: 1px solid var(--g-line);
    border-left: 4px solid var(--g-teal);
    border-radius: 4px;
    padding: clamp(26px, 3.4vw, 40px);
    display: grid; grid-template-columns: 44px 1fr; gap: 22px; align-items: start;
}
.nxg-fact__mark {
    font-family: var(--g-serif); font-size: 2.6rem; line-height: .8;
    color: var(--g-teal); opacity: .5;
}
.nxg-fact p {
    margin: 0; font-family: var(--g-serif); font-weight: 500;
    font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.4;
    color: var(--g-ink); letter-spacing: -0.01em;
}
.nxg-section--ink .nxg-fact { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); border-left-color: #6FBEB8; }
.nxg-section--ink .nxg-fact p { color: #fff; }
.nxg-section--ink .nxg-fact__mark { color: #6FBEB8; }

/* ---------- Safe-legal / confirm-with-provider note ---------------------- */

.nxg-note {
    max-width: var(--g-max); margin: clamp(30px, 4vw, 48px) auto 0;
    background: rgba(30, 95, 130, 0.06);
    border: 1px solid rgba(30, 95, 130, 0.28);
    border-radius: 4px;
    padding: clamp(24px, 3vw, 36px);
    display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.nxg-note__icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30, 95, 130, 0.14); color: var(--g-terracotta);
}
.nxg-note__icon svg { width: 22px; height: 22px; }
.nxg-note__body { flex: 1 1 300px; min-width: 0; }
.nxg-note__body h4 { margin: 0 0 8px; font-size: 1.02rem; color: var(--g-ink); }
.nxg-note__body p { margin: 0 0 16px; font-size: 0.97rem; }
.nxg-note__body p:last-child { margin-bottom: 0; }

/* ---------- Vehicle-to-destination mini-answer (Part B) ------------------ */
/* Compact, quotable "best vehicle to reach X" block. Sea-blue accent so it
   reads as a vehicle CTA, consistent with the button palette. */
.nxg-pick {
    margin-top: 20px;
    padding: 15px 18px;
    border-radius: 8px;
    background: rgba(0, 119, 182, 0.06);
    border: 1px solid rgba(0, 119, 182, 0.22);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--g-ink-soft);
}
.nxg-pick > b {
    display: block;
    font-family: var(--g-sans);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--g-cta);
    margin-bottom: 6px;
}
.nxg-pick strong { color: var(--g-ink); }
.nxg-pick a {
    color: var(--g-cta);
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 119, 182, 0.35);
    white-space: nowrap;
    transition: color .25s ease, border-color .25s ease;
}
.nxg-pick a:hover { color: var(--g-cta-deep); border-bottom-color: var(--g-cta-deep); }
.nxg-section--ink .nxg-pick { background: rgba(143,211,244,.1); border-color: rgba(143,211,244,.3); color: rgba(255,255,255,.82); }
.nxg-section--ink .nxg-pick strong { color: #fff; }
.nxg-section--ink .nxg-pick > b, .nxg-section--ink .nxg-pick a { color: #8FD3F4; }

/* ---------- Quick-facts snapshot (icon grid) ----------------------------- */

.nxg-facts {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--g-line);
    border: 1px solid var(--g-line); border-radius: 4px; overflow: hidden;
    max-width: var(--g-max); margin: 0 auto;
}
.nxg-qf { background: var(--g-white); padding: 32px 26px; }
.nxg-section--deep .nxg-qf { background: var(--g-cream); }
.nxg-qf__ico {
    width: 40px; height: 40px; border-radius: 10px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30,95,130,.1); color: var(--g-terracotta);
}
.nxg-qf__ico svg { width: 20px; height: 20px; }
.nxg-qf h4 {
    font-family: var(--g-sans); font-size: 0.72rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: var(--g-ink-soft);
    margin: 0 0 8px;
}
.nxg-qf p { margin: 0; font-size: 1.02rem; color: var(--g-ink); font-weight: 600; line-height: 1.4; }

@media (max-width: 900px) {
    .nxg-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .nxg-facts { grid-template-columns: 1fr; }
    .nxg-fact { grid-template-columns: 1fr; gap: 10px; }
    .nxg-fact__mark { font-size: 2rem; }
}

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

.nxg-tablewrap {
    max-width: var(--g-max); margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--g-line); border-radius: 4px; background: var(--g-white);
    -webkit-overflow-scrolling: touch;
}
.nxg-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 0.95rem; }
.nxg-table caption {
    text-align: left; padding: 22px 26px 0;
    font-size: 0.75rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--g-ink-soft);
}
.nxg-table th, .nxg-table td { padding: 17px 26px; text-align: left; border-bottom: 1px solid var(--g-line); }
.nxg-table thead th {
    font-size: 0.72rem; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; color: var(--g-ink); background: var(--g-cream);
}
.nxg-table tbody tr:last-child td { border-bottom: 0; }
.nxg-table tbody tr { transition: background .25s ease; }
.nxg-table tbody tr:hover { background: var(--g-cream); }
.nxg-table td strong { color: var(--g-ink); }

/* ---------- Icon / checklist list ---------------------------------------- */

.nxg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
/* Marker is absolutely positioned rather than a grid column: a bare text node
   after <strong> would otherwise become an anonymous grid item and wrap into
   the narrow marker column, stacking one word per line. */
.nxg-checks li {
    position: relative; padding-left: 34px;
    color: var(--g-ink-soft); font-size: 1rem; line-height: 1.7;
}
.nxg-checks li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(31,111,107,.12);
    box-shadow: inset 0 0 0 1.5px var(--g-teal);
}
.nxg-checks--warn li::before { background: rgba(30,95,130,.12); box-shadow: inset 0 0 0 1.5px var(--g-terracotta); }
.nxg-checks li strong { display: block; color: var(--g-ink); }

/* Compare columns (with bus vs with car) */
.nxg-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5vw, 32px); max-width: var(--g-max); margin: 0 auto; }
.nxg-compare__col { border-radius: 4px; padding: clamp(30px, 3.5vw, 46px); border: 1px solid var(--g-line); background: var(--g-white); }
.nxg-compare__col--dim { background: var(--g-cream-deep); }
.nxg-compare__col--win { background: var(--g-ink); border-color: var(--g-ink); }
.nxg-compare__col--win h3, .nxg-compare__col--win h4 { color: #fff; }
.nxg-compare__col--win p, .nxg-compare__col--win li { color: rgba(255,255,255,.75); }
.nxg-compare__col--win .nxg-checks li::before { background: rgba(143,190,218,.16); box-shadow: inset 0 0 0 1.5px #8FBEDA; }
.nxg-compare__col--win .nxg-checks li strong { color: #fff; }
.nxg-compare__tag {
    display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.nxg-compare__col--dim .nxg-compare__tag { background: rgba(22,35,46,.08); color: var(--g-ink-soft); }
.nxg-compare__col--win .nxg-compare__tag { background: rgba(143,190,218,.18); color: #8FBEDA; }

/* ---------- Anchor / jump chips ------------------------------------------ */

.nxg-chips { display: flex; flex-wrap: wrap; gap: 12px; max-width: var(--g-max); margin: 0 auto; }
.nxg-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--g-line); background: var(--g-white);
    font-size: 0.8rem; font-weight: 700; color: var(--g-ink);
    letter-spacing: .02em; transition: all .3s ease;
}
.nxg-chip:hover { background: var(--g-ink); color: #fff; border-color: var(--g-ink); transform: translateY(-2px); }

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

.nxg-faq { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--g-line); }
.nxg-faq details { border-bottom: 1px solid var(--g-line); }
.nxg-faq summary {
    cursor: pointer; list-style: none;
    padding: 28px 46px 28px 0;
    position: relative;
    font-family: var(--g-serif); font-size: clamp(1.1rem, 1.8vw, 1.42rem);
    color: var(--g-ink); line-height: 1.35;
    transition: color .25s ease;
}
.nxg-faq summary::-webkit-details-marker { display: none; }
.nxg-faq summary:hover { color: var(--g-terracotta); }
.nxg-faq summary::after {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 13px; height: 13px; margin-top: -8px;
    border-right: 2px solid var(--g-terracotta);
    border-bottom: 2px solid var(--g-terracotta);
    transform: rotate(45deg); transition: transform .3s ease;
}
.nxg-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.nxg-faq__a { padding: 0 60px 30px 0; }
.nxg-faq__a p { font-size: 1rem; }

/* ---------- Cross-link hub strip ----------------------------------------- */

.nxg-hub { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--g-line); border: 1px solid var(--g-line); max-width: var(--g-max); margin: 0 auto; border-radius: 4px; overflow: hidden; }
.nxg-hub a {
    background: var(--g-white); padding: 34px 28px 30px;
    display: flex; flex-direction: column; gap: 10px;
    transition: background .3s ease, transform .3s ease;
}
.nxg-hub a:hover { background: var(--g-cream); }
.nxg-hub a span {
    font-size: .7rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--g-terracotta);
}
.nxg-hub a strong { font-family: var(--g-serif); font-size: 1.25rem; font-weight: 600; color: var(--g-ink); letter-spacing: -.01em; }
.nxg-hub a em { font-style: normal; font-size: .93rem; color: var(--g-ink-soft); line-height: 1.6; }

/* ---------- Sticky floating CTA ------------------------------------------ */

.nxg-float {
    /* Self-contained: the float is included in the footer, outside the `.nxg`
       scope, so it defines the tokens it needs locally rather than inheriting. */
    --g-cta:      #0077B6;
    --g-cta-deep: #005B8E;
    --g-sans:     'Plus Jakarta Sans', 'Lato', system-ui, sans-serif;
    font-family: var(--g-sans);
    position: fixed; right: 22px; bottom: 22px; z-index: 950;
    display: flex; align-items: stretch; gap: 0;
    padding: 8px; min-height: 68px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(135deg, #0E2A3D 0%, #123044 55%, #0B2233 100%);
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.16);
    max-width: calc(100vw - 28px);
    isolation: isolate;
    /* Visible immediately on load — no scroll trigger. Gentle bob + glow pulse. */
    animation: nxg-float-bob 3.4s ease-in-out infinite, nxg-float-glow 3.4s ease-in-out infinite;
    transition: box-shadow .35s ease;
}
.nxg-float:hover { color: #fff; }
.nxg-float:hover .nxg-float__go { background: var(--g-cta-deep); }

@keyframes nxg-float-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
/* Larger, slower float travel reserved for desktop (see min-width: 992px). */
@keyframes nxg-float-bob-lg {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}
@keyframes nxg-float-glow {
    0%, 100% { box-shadow: 0 14px 34px rgba(0,91,142,.4); }
    50%      { box-shadow: 0 22px 50px rgba(0,119,182,.72); }
}

/* Desktop eye-catcher: taller, slower, alternating float — the shimmer keeps
   running from the base rule. Small screens keep the gentler 6px bob. */
@media (min-width: 992px) {
    .nxg-float {
        animation: nxg-float-bob-lg 3.4s ease-in-out infinite alternate,
                   nxg-float-glow 3.6s ease-in-out infinite;
    }
}

/* Continuous shimmer wave sweeping across the whole widget */
.nxg-float::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.22) 46%, rgba(255,255,255,0.42) 50%, rgba(255,255,255,0.22) 54%, transparent 72%);
    background-size: 250% 100%;
    animation: nxg-shimmer 3.2s ease-in-out infinite;
    mix-blend-mode: screen;
}
@keyframes nxg-shimmer {
    0%   { background-position: 170% 0; }
    60%  { background-position: -70% 0; }
    100% { background-position: -70% 0; }
}

.nxg-float__img {
    position: relative; flex: 0 0 auto;
    width: 52px; align-self: stretch; overflow: hidden;
    border-radius: 12px;
}
.nxg-float__img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s cubic-bezier(.16,.84,.44,1);
}
.nxg-float:hover .nxg-float__img img { transform: scale(1.14); }
.nxg-float__img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(22,35,46,.1), rgba(22,35,46,.55));
}

.nxg-float__txt {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 6px 20px 6px 16px; min-width: 0; text-align: left;
}
.nxg-float__txt b {
    font-family: var(--g-sans); font-size: .92rem; font-weight: 800;
    letter-spacing: .04em; line-height: 1.1; color: #fff;
    white-space: nowrap;
}
.nxg-float__txt em {
    font-style: normal; font-size: .68rem; font-weight: 700; line-height: 1.1;
    letter-spacing: .02em; white-space: nowrap; color: rgba(255,255,255,.72);
}
.nxg-float__txt em b {
    display: inline; font-size: inherit; letter-spacing: inherit;
    color: #8FD3F4; font-weight: 800;
}
.nxg-float__go {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 46px; align-self: stretch;
    background: var(--g-cta); color: #fff; border-radius: 12px;
    transition: background .35s ease;
}
.nxg-float__go svg { width: 17px; height: 17px; transition: transform .35s ease; }
.nxg-float:hover .nxg-float__go svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .nxg-float,
    .nxg-float::before { animation: none; }
    .nxg-float { box-shadow: 0 16px 40px rgba(0,91,142,.5); }
}

/* ---------- Scroll reveal ------------------------------------------------- */

.nxg-reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1); }
.nxg-reveal.is-in { opacity: 1; transform: none; }
.nxg-reveal[data-d="1"] { transition-delay: .09s; }
.nxg-reveal[data-d="2"] { transition-delay: .18s; }
.nxg-reveal[data-d="3"] { transition-delay: .27s; }
.nxg-reveal[data-d="4"] { transition-delay: .36s; }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1024px) {
    .nxg-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .nxg-stats  { grid-template-columns: repeat(2, 1fr); }
    .nxg-hub    { grid-template-columns: repeat(2, 1fr); }
    .nxg-mosaic { grid-auto-rows: 165px; }
}

@media (max-width: 900px) {
    .nxg-hero--cards .nxg-hero__inner {
        grid-template-columns: 1fr;
        align-items: end;
        padding-bottom: clamp(22px, 3.4vh, 44px);
    }
    .nxg-hero--cards { min-height: auto; }
}

/* Short laptop screens: compress the hero so it still lands above the fold */
@media (min-width: 901px) and (max-height: 920px) {
    .nxg-hero h1 { font-size: clamp(1.8rem, min(3.4vw, 4.9vh), 3rem); }
    .nxg-hero__sub { font-size: 0.94rem; line-height: 1.55; max-width: 54ch; }
    .nxg-herocards em { font-size: 0.8rem; line-height: 1.4; }
    .nxg-herocards strong { font-size: 1.02rem; }
    .nxg-herocards a { padding: clamp(11px, 1.8vh, 16px) 18px clamp(12px, 2vh, 17px); }
    .nxg-hero--cards .nxg-hero__inner { padding-bottom: clamp(16px, 2.6vh, 34px); }
    /* the meta strip is decorative and repeated in the page body */
    .nxg-hero--cards .nxg-hero__meta { display: none; }
    .nxg-hero .nxg-eyebrow { margin-bottom: 12px; }
}

@media (max-width: 860px) {
    .nxg-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .nxg-split   { grid-template-columns: 1fr; }
    .nxg-split--flip .nxg-split__media { order: 0; }
    .nxg-split__media--tall img { aspect-ratio: 4 / 3; }
    .nxg-compare { grid-template-columns: 1fr; }
    .nxg-feature__card { margin: -50px auto 0; max-width: calc(100% - 32px); }
}

/* ---- Tablet / large phone ------------------------------------------------ */
@media (max-width: 768px) {
    .nxg-hero {
        min-height: 74vh;
        min-height: 74svh;
        padding: 0 20px;
        align-items: flex-end;
    }
    .nxg-hero--cards {
        min-height: auto;
        padding: 0 20px;
        align-items: flex-end;
    }
    .nxg-hero__inner { padding: clamp(90px, 20vw, 150px) 0 38px; }
    .nxg-hero h1 { font-size: clamp(2.1rem, 8.4vw, 3.1rem); max-width: none; }
    .nxg-hero__sub { font-size: 1rem; max-width: none; margin-top: 18px; }
    .nxg-hero__meta { gap: 10px 22px; margin-top: 26px; padding-top: 20px; font-size: .68rem; }
    .nxg-hero__cue { display: none; }
    .nxg-herocards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nxg-herocards a { padding: 16px 16px 18px; }
    .nxg-herocards em { display: none; }
    .nxg-crumb { font-size: .76rem; padding: 12px 20px; }
}

@media (max-width: 640px) {
    .nxg { font-size: 16px; }
    .nxg-section { padding-left: 20px; padding-right: 20px; }
    .nxg-grid--2, .nxg-grid--3, .nxg-grid--4 { grid-template-columns: 1fr; }
    .nxg-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    .nxg-mosaic .is-wide { grid-column: span 2; }
    .nxg-mosaic .is-tall { grid-row: span 1; }
    .nxg-cta { flex-direction: column; align-items: flex-start; }
    .nxg-cta .nxg-btn { width: 100%; justify-content: center; text-align: center; }
    .nxg-faq summary { padding-right: 38px; font-size: 1.08rem; }
    .nxg-faq__a { padding-right: 8px; }
    .nxg-hub { grid-template-columns: 1fr; }
    .nxg-stats { grid-template-columns: 1fr; }
    .nxg-feature__card { margin-top: -34px; padding: 26px 22px; }
    .nxg-quote blockquote { font-size: clamp(1.35rem, 6vw, 1.9rem); }
    .nxg-btn { padding: 15px 24px; font-size: .76rem; }
    .nxg-btn--lg { padding: 17px 26px; font-size: .8rem; }
    .nxg-convert { padding: 38px 22px; }
    .nxg-chip { padding: 10px 16px; font-size: .74rem; }
    .nxg-split__cap { position: static; max-width: none; padding: 12px 0 0; }
}

/* ---- Small phones (320–480) --------------------------------------------- */
@media (max-width: 480px) {
    .nxg-section { padding-left: 16px; padding-right: 16px; }
    .nxg-hero, .nxg-hero--cards { padding-left: 16px; padding-right: 16px; }
    .nxg-hero__inner { padding-bottom: 34px; }
    .nxg-hero h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
    .nxg-herocards { grid-template-columns: 1fr; }
    .nxg-herocards a { flex-direction: row; align-items: baseline; gap: 10px; padding: 14px 16px; }
    .nxg-herocards span { flex: 0 0 auto; font-size: .58rem; }
    .nxg-herocards strong { font-size: 1rem; }
    .nxg-mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .nxg-mosaic .is-wide { grid-column: span 1; }
    .nxg-card__body { padding: 24px 20px 26px; }
    .nxg-tile { padding: 28px 22px; }
    .nxg-checks li { padding-left: 30px; }
    .nxg-table th, .nxg-table td { padding: 14px 18px; }
    .nxg-float { right: 10px; bottom: 10px; min-height: 60px; padding: 6px; }
    .nxg-float__img { width: 44px; }
    .nxg-float__txt { padding: 4px 12px 4px 12px; gap: 3px; }
    .nxg-float__txt b { font-size: .82rem; }
    .nxg-float__txt em { font-size: .6rem; }
    .nxg-float__go { width: 40px; }
}

/* Anything anchored below the sticky site header needs clearance */
.nxg [id] { scroll-margin-top: 100px; }

@media (prefers-reduced-motion: reduce) {
    .nxg-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .nxg-hero__media img { animation: none; transform: none; }
    .nxg-hero__cue { animation: none; }
    .nxg * { transition-duration: .01ms !important; }
}