/* ------------------------------------------------------------------
   869.Design — homepage monochrome refinement (preview)
   Loaded after the inline critical/Tailwind layers, so these rules
   own the palette, surfaces and interactive states. No copy, section,
   link, image, metadata or interaction changes: styling only.
   Dark zones: #hero, #showcase media overlays, #engagement, CTA, footer.
   ------------------------------------------------------------------ */

:root {
    --ink: #111111;
    --ink-deep: #0b0b0b;
    --body-text: #464646;
    --muted: #6b6b6b;
    --faint: #8a8a8a;
    --line: #e7e7e7;
    --line-strong: #d2d2d2;
    --surface: #ffffff;
    --tint: #fafafa;
    --tint-2: #f5f5f5;
    --dark: #101010;
    --dark-deep: #0c0c0c;
    --btn-radius: 0.625rem;
    --card-radius: 1.25rem;
    --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 40px -30px rgba(17, 17, 17, 0.4);
}

/* ---------- base ---------- */

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

body {
    background-color: var(--surface);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main {
    background-color: var(--surface);
}

main > section:where(:not(#hero, #showcase, #engagement)) {
    color: var(--ink);
}

p {
    text-wrap: pretty;
}

::selection {
    background: var(--ink);
    color: #ffffff;
}

section[id] {
    scroll-margin-top: 5.5rem;
}

/* Harmonised desktop measure without shrinking the mobile gutters. */
.max-w-7xl {
    max-width: 1200px;
}

@media (min-width: 1024px) {
    main section.py-32 {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }

    main section.py-24 {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }

    main section.py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    main section.pt-20.pb-32 {
        padding-top: 5.5rem;
        padding-bottom: 6.5rem;
    }

    #showcase {
        row-gap: 5rem;
    }
}

/* ---------- header / navigation ---------- */

header.fixed {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(17, 17, 17, 0.08);
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.04);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

header.fixed,
header.fixed a,
header.fixed button {
    color: var(--ink);
}

header.fixed .text-xl {
    letter-spacing: -0.03em;
}

header.fixed nav a.text-white\/70,
header.fixed .text-white\/70 {
    color: #3b3b3b;
}

header.fixed .text-white\/80 {
    color: #232323;
}

header.fixed a:hover,
header.fixed button:hover,
header.fixed .hover\:text-primary:hover {
    color: #000000;
}

/* logo mark: black tile, white glyph */
header.fixed .bg-primary {
    background-color: var(--ink);
}

header.fixed .text-background-dark {
    color: #ffffff;
}

header.fixed .rounded-sm {
    border-radius: 6px;
}

/* desktop services dropdown: white panel, dark readable submenu */
header.fixed .bg-black {
    background-color: #ffffff;
    border-color: var(--line);
    box-shadow: 0 24px 48px -28px rgba(17, 17, 17, 0.45);
}

header.fixed .bg-black a {
    color: #2c2c2c;
}

header.fixed .bg-black a:hover,
header.fixed .bg-black a:focus-visible {
    background-color: var(--tint-2);
    color: #000000;
}

/* header call to action */
header.fixed a.bg-primary {
    background-color: var(--ink);
    color: #ffffff;
    border-radius: var(--btn-radius);
    box-shadow: 0 12px 24px -16px rgba(17, 17, 17, 0.7);
}

header.fixed a.bg-primary:hover {
    background-color: #000000;
    color: #ffffff;
}

/* mobile menu shell + toggle */
header.fixed [data-mobile-menu] {
    border-top-color: var(--line);
}

header.fixed [data-mobile-menu] .border-white\/10,
header.fixed [data-mobile-services-menu] {
    border-color: var(--line);
}

header.fixed button[data-mobile-menu-toggle] {
    border-color: var(--line-strong);
    color: var(--ink);
}

header.fixed button[data-mobile-menu-toggle]:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* ---------- hero (dark, atmospheric, monochrome) ---------- */

#hero {
    background-color: var(--ink-deep);
}

#hero img.hero-bg-img {
    filter: grayscale(1) contrast(1.06) brightness(0.92);
    opacity: 0.78;
}

#hero [class*="radial-gradient"] {
    background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.6) 58%, rgba(0, 0, 0, 0.9) 100%);
}

#hero .data-overlay {
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
}

#hero h1 {
    color: #ffffff;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
}

#hero h1 .text-primary {
    color: #d5d5d5;
}

#hero .text-white\/50 {
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.16em;
}

#hero p.text-white\/80 {
    color: rgba(255, 255, 255, 0.88);
}

#hero a.bg-primary {
    background-color: #ffffff;
    color: #0b0b0b;
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.85);
}

#hero a.bg-primary:hover {
    background-color: #ebebeb;
    color: #000000;
}

#hero a.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.02);
}

#hero a.border-white\/20:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ---------- buttons ---------- */

a.rounded {
    border-radius: var(--btn-radius);
}

/* primary buttons on light surfaces: crisp black */
main > section:where(:not(#hero, #showcase, #engagement)) a.bg-primary {
    background-color: var(--ink);
    color: #ffffff;
    border: 1px solid var(--ink);
    box-shadow: 0 14px 28px -20px rgba(17, 17, 17, 0.75);
}

main > section:where(:not(#hero, #showcase, #engagement)) a.bg-primary:hover {
    background-color: #000000;
    color: #ffffff;
    box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.8);
}

main > section:where(:not(#hero, #showcase, #engagement)) a.border-white\/20 {
    border-color: var(--line-strong);
    color: var(--ink);
}

main > section:where(:not(#hero, #showcase, #engagement)) a.border-white\/20:hover {
    border-color: var(--ink);
    color: var(--ink);
}

main > section:where(:not(#hero, #showcase, #engagement)) .text-background-dark {
    color: #ffffff;
}

/* ---------- section surfaces ---------- */

main > section[class*="bg-white/"] {
    background-color: var(--tint);
}

main > section[class*="bg-neutral-900/"] {
    background-color: var(--tint-2);
}

main > section.border-y {
    border-color: var(--line);
}

/* ---------- light-zone text palette ---------- */

main > section:where(:not(#hero, #showcase, #engagement)) .text-white {
    color: var(--ink);
}

main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/90 {
    color: #1b1b1b;
}

main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/85,
main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/80 {
    color: #2f2f2f;
}

main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/75,
main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/70,
main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/65 {
    color: var(--body-text);
}

main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/60,
main > section:where(:not(#hero, #showcase, #engagement)) .text-white\/50 {
    color: var(--muted);
}

/* inline rgba() text colours carried by two body paragraphs */
main > section:where(:not(#hero, #showcase, #engagement)) p[style*="rgba(255, 255, 255"] {
    color: #2f2f2f !important;
}

/* ---------- accents: cyan -> charcoal ---------- */

main > section:where(:not(#hero, #showcase)) .text-primary {
    color: var(--ink);
}

main > section:where(:not(#hero, #showcase)) .text-primary\/90 {
    color: var(--ink);
}

main > section:where(:not(#hero, #showcase)) .bg-primary {
    background-color: var(--ink);
}

main .text-gradient-cyan {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--ink);
}

main .neon-cyan,
main .neon-orange {
    box-shadow: none;
}

/* secondary heading lines read as quiet grey, not accent colour */
#identity h2 .text-primary,
#trusted-businesses h2 .text-primary,
main > section:where(:not(#hero, #showcase, #engagement)) h2 .text-primary {
    color: var(--muted);
}

#faq p.text-primary {
    color: var(--muted);
}

/* inline paragraph links inside body copy */
main > section:where(:not(#hero, #showcase, #engagement)) p a.text-primary {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(17, 17, 17, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

main > section:where(:not(#hero, #showcase, #engagement)) p a.text-primary:hover {
    color: #000000;
    text-decoration-color: var(--ink);
}

/* ---------- cards ---------- */

main > section:where(:not(#hero, #showcase, #engagement)) .glass-morphism {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-card);
}

main > section:where(:not(#hero, #showcase, #engagement)) .glass-morphism:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 26px 52px -34px rgba(17, 17, 17, 0.5);
}

/* services card carries inline cyan surface/shadow styles of its own */
main .services-card-premium {
    background-color: #ffffff !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
}

main .services-card-premium:hover {
    border-color: var(--line-strong) !important;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 26px 52px -34px rgba(17, 17, 17, 0.5) !important;
}

main .services-card-premium > div[aria-hidden="true"] {
    background: linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.16), transparent) !important;
}

/* capability icon tiles + list bullets stay monochrome */
main > section:where(:not(#hero, #showcase, #engagement)) .material-symbols-outlined.text-primary {
    color: var(--ink);
}

main > section:where(:not(#hero, #showcase, #engagement)) .size-1.bg-primary {
    background-color: var(--ink);
}

/* identity section: grayscale product shot in a clean white frame */
#identity .glass-morphism {
    overflow: hidden;
}

#identity picture img {
    filter: grayscale(1);
    opacity: 0.9;
    border-radius: 0.75rem;
}

#identity h2 .whitespace-nowrap {
    white-space: normal;
}

/* ---------- showcase (full-bleed video reels, inset + rounded) ---------- */

#showcase > .group {
    width: min(1200px, calc(100% - 2rem));
    margin-inline: auto;
    border-radius: 1.5rem;
    box-shadow: 0 30px 70px -46px rgba(17, 17, 17, 0.65);
}

#showcase video {
    filter: grayscale(1) contrast(1.04);
}

#showcase [class*="bg-black/40"] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.45));
}

#showcase .group:hover [class*="bg-black/40"] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.3));
}

#showcase h3 {
    overflow-wrap: anywhere;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

#showcase a[class*="neon-cyan"] {
    /* A dark backing keeps the small label readable over bright reel frames. */
    background-color: rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#showcase a[class*="neon-cyan"]:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0b0b0b;
}

/* ---------- engagement (dark process band) ---------- */

#engagement {
    color: #f7f7f7;
}

#engagement h2,
#engagement h3 {
    color: #ffffff;
}

#engagement .bg-gradient-to-b {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.22);
    opacity: 1;
}

#engagement .glass-morphism {
    background: #191919;
    border-color: rgba(255, 255, 255, 0.26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

#engagement .material-symbols-outlined.text-primary {
    color: #ffffff;
}

#engagement p.text-primary {
    color: rgba(255, 255, 255, 0.58);
}

#engagement .text-white\/75 {
    color: rgba(255, 255, 255, 0.78);
}

#engagement .text-white\/70 {
    color: rgba(255, 255, 255, 0.72);
}

#engagement .space-y-32 > * + * {
    margin-top: 6rem;
}

/* ---------- trusted by / review strip / marquee ---------- */

#trusted-businesses p[class*="rounded-full"] {
    background-color: #ffffff;
    border-color: var(--line);
    color: #3a3a3a;
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#trusted-businesses p[class*="rounded-full"] .text-primary {
    color: var(--ink);
}

#trusted-businesses p[class*="rounded-full"] .text-white {
    color: var(--ink);
}

.client-name {
    color: var(--faint);
}

.client-name a {
    color: inherit;
}

.client-name:hover,
.client-name a:focus-visible {
    color: var(--ink);
}

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

main .faq-item {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

main .faq-item[open] {
    background: #fdfdfd;
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 26px 52px -36px rgba(17, 17, 17, 0.45);
}

main .faq-item summary {
    color: var(--ink);
}

main .faq-item summary:hover {
    color: #000000;
}

.faq-chevron {
    color: var(--ink);
}

.scanline-effect::after {
    content: none;
    animation: none;
    background: none;
}

/* ---------- closing CTA + footer (single dark block) ---------- */

body > section.bg-neutral-900 {
    background-color: var(--dark);
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.08);
}

body > section.bg-neutral-900 h2 {
    color: #ffffff;
}

/* The preview rewrites this CTA to /new/contact, so keep both forms. */
body > section.bg-neutral-900 a[href="/contact"],
body > section.bg-neutral-900 a[href="/new/contact"] {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0b0b0b;
    box-shadow: 0 22px 46px -26px rgba(255, 255, 255, 0.4);
}

body > section.bg-neutral-900 a[href="/contact"]:hover,
body > section.bg-neutral-900 a[href="/new/contact"]:hover {
    background-color: #ededed;
    border-color: #ededed;
    color: #000000;
}

/* The source button also carries a cyan neon glow class; replace it with the
   neutral card lift so the action stays obviously white on the dark band. */
body > section.bg-neutral-900 .neon-cyan,
body > section.bg-neutral-900 [class*="shadow-[0_0_24px"] {
    box-shadow: 0 22px 46px -26px rgba(255, 255, 255, 0.45) !important;
}

body > footer {
    background-color: var(--dark-deep);
    color: #e9e9e9;
    border-top-color: rgba(255, 255, 255, 0.08);
    margin-top: 0;
}

body > footer .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.12);
}

body > footer .text-white {
    color: #ffffff;
}

body > footer .text-white\/60 {
    color: rgba(255, 255, 255, 0.68);
}

body > footer .text-white\/35 {
    color: rgba(255, 255, 255, 0.58);
}

body > footer .text-white\/20 {
    color: rgba(255, 255, 255, 0.3);
}

body > footer .hover\:text-primary:hover {
    color: #ffffff;
}

body > footer a:focus-visible {
    outline-color: #ffffff;
}

/* ---------- focus visibility ---------- */

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
}

#hero :where(a, button):focus-visible,
#showcase :where(a, button):focus-visible,
#engagement :where(a, button, summary):focus-visible,
body > section.bg-neutral-900 a:focus-visible {
    outline-color: #ffffff;
}

/* keyboard-only caret on the marquee links stays visible on white */
#trusted-businesses :where(a):focus-visible {
    outline-color: var(--ink);
}

/* ---------- mobile guards ---------- */

@media (max-width: 1023px) {
    body {
        padding-bottom: 0;
    }

    #showcase > .group {
        width: calc(100% - 1.5rem);
        border-radius: 1.125rem;
    }

    #showcase h3 {
        font-size: clamp(1.35rem, 6.4vw, 1.875rem);
        line-height: 1.15;
    }

    #identity h2 .whitespace-nowrap,
    #trusted-businesses h2 {
        overflow-wrap: break-word;
    }

    main .faq-item {
        padding: 1.5rem;
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-bg-img,
    #showcase video,
    .services-card-premium,
    .glass-morphism,
    a.rounded {
        transition: none !important;
        transform: none !important;
    }

    a.rounded:hover,
    a.bg-primary:hover {
        transform: none !important;
    }

    .scanline-effect::after {
        animation: none !important;
        display: none;
    }
}

/* Neutralize the original dark-band background token. */
#engagement { background-color: #111111; }

/* The shared site script creates this action with inline accent colours. */
#mobile-sticky-contact-cta {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
}

main > section:where(:not(#hero, #showcase, #engagement)) p[style*="rgba(255,255,255"] {
    color: #2f2f2f !important;
}

@media (max-width: 1023px) {
    body { padding-bottom: 96px; }
}

/* ==================================================================
   Full public-site preview (inner pages)
   Scoped to the authenticated /new routes; the homepage rules above
   are unchanged. Dark hero bands and the footer keep the homepage's
   monochrome rhythm; every content section becomes light.
   ================================================================== */

html[data-theme-869]:not([data-theme-page="home"]) body {
    background-color: var(--surface);
    color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) body.bg-surface,
html[data-theme-869]:not([data-theme-page="home"]) body.bg-background-dark,
html[data-theme-869]:not([data-theme-page="home"]) body.dark\:bg-background-dark {
    background-color: var(--surface);
    color: var(--ink);
}

/* ---------- dark hero band ---------- */

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] {
    background-color: var(--ink-deep) !important;
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .hero-overlay {
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.94)),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.06), transparent 42%);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .hero-gradient {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.94) 100%);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] img,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] video {
    filter: grayscale(1) contrast(1.05) brightness(0.86);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .grid-overlay,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .hero-grid-breathe {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    opacity: 0.5;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] h1,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] h2,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] h3 {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/90,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-on-surface {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/85,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/80,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-slate-300 {
    color: rgba(255, 255, 255, 0.86);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/75,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/70,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/65,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-on-surface-variant {
    color: rgba(255, 255, 255, 0.76);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/60,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/55,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/50,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-white\/40 {
    color: rgba(255, 255, 255, 0.68);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-primary,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-primary\/90 {
    color: #dfdfdf;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .text-gradient-cyan,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] .bg-clip-text {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] a.text-primary {
    color: #e8e8e8;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] a.bg-primary {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #0b0b0b !important;
}

html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] a.border-white\/20,
html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] a.bg-white\/10 {
    border-color: rgba(255, 255, 255, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

/* ---------- light content sections ---------- */

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) {
    background-color: var(--surface) !important;
    color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900)[class*="border-y"] {
    background-color: var(--tint) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900)[class*="bg-white\/"] {
    background-color: var(--tint) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) h1,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) h2,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) h3,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) h4 {
    color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/90,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-on-surface {
    color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/85,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/80,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/75,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/70,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/65,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-slate-300,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-slate-400,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-on-surface-variant {
    color: var(--body-text);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/60,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/55,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-white\/50,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-slate-500 {
    color: var(--muted);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-primary,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-primary\/90,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-primary\/50 {
    color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) h2 .text-primary {
    color: var(--muted);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-gradient-cyan {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--muted);
}

/* borders */

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-white\/5,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-white\/10,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-white\/15,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-white\/20 {
    border-color: var(--line) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-primary,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-primary\/20,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-primary\/30,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .border-primary\/40 {
    border-color: var(--line-strong) !important;
}

/* surfaces inside light sections */

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-surface,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-surface-container-low,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-surface-container-high,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-background-dark,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-neutral-900,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-black {
    background-color: var(--surface) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-white\/5,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-white\/10,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-white\/20 {
    background-color: var(--tint) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-primary {
    background-color: var(--ink) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-primary\/5,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-primary\/10,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-primary\/15,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-primary\/20 {
    background-color: rgba(17, 17, 17, 0.06) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) [class*="bg-primary"][class*="text-black"],
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) [class*="bg-primary"][class*="text-background-dark"] {
    color: #ffffff !important;
}

/* cards and media */

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .glass-morphism,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .glass-card,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .insight-card,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .process-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .glass-morphism:hover,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .insight-card:hover {
    border-color: var(--line-strong) !important;
}

/* soft overlays over grayscale media become light so in-card copy stays legible */
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .from-background-dark,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .via-background-dark\/40,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .to-background-dark {
    --tw-gradient-from: rgba(255, 255, 255, 0.88);
    --tw-gradient-to: rgba(255, 255, 255, 0.88);
    --tw-gradient-stops: rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) img,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) video {
    filter: grayscale(1) contrast(1.02);
}

/* buttons */

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) a.bg-primary,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) button.bg-primary {
    background-color: var(--ink) !important;
    border: 1px solid var(--ink);
    color: #ffffff !important;
    box-shadow: 0 14px 28px -20px rgba(17, 17, 17, 0.75);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) a.bg-primary:hover,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) button.bg-primary:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) a.text-background-dark,
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .text-background-dark {
    color: #ffffff;
}

/* FAQ / details */

html[data-theme-869]:not([data-theme-page="home"]) main .faq-item[open],
html[data-theme-869]:not([data-theme-page="home"]) main .about-faq-item[open],
html[data-theme-869]:not([data-theme-page="home"]) main .blog-faq-item[open],
html[data-theme-869]:not([data-theme-page="home"]) main .insights-intro-item[open] {
    background: #fdfdfd !important;
    border-color: var(--line-strong) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) main .faq-chevron {
    color: var(--ink);
}

/* ---------- contact hero form ---------- */

html[data-theme-869] section[data-theme-hero] .contact-form-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.65);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card h2,
html[data-theme-869] section[data-theme-hero] .contact-form-card h3,
html[data-theme-869] section[data-theme-hero] .contact-form-card label,
html[data-theme-869] section[data-theme-hero] .contact-form-card p {
    color: var(--ink) !important;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card .text-white\/40,
html[data-theme-869] section[data-theme-hero] .contact-form-card .text-white\/60 {
    color: var(--muted) !important;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card input,
html[data-theme-869] section[data-theme-hero] .contact-form-card textarea,
html[data-theme-869] section[data-theme-hero] .contact-form-card select {
    color: var(--ink) !important;
    border-color: var(--line-strong) !important;
    background-color: transparent !important;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card input::placeholder,
html[data-theme-869] section[data-theme-hero] .contact-form-card textarea::placeholder {
    color: var(--muted) !important;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card select option {
    color: #111111;
    background: #ffffff;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card input:focus,
html[data-theme-869] section[data-theme-hero] .contact-form-card textarea:focus,
html[data-theme-869] section[data-theme-hero] .contact-form-card select:focus {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
}

html[data-theme-869] section[data-theme-hero] .contact-form-card button[type="submit"] {
    background-color: var(--ink) !important;
    color: #ffffff !important;
    border: 1px solid var(--ink);
}

html[data-theme-869] section[data-theme-hero] .contact-whatsapp-link {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ---------- article + listing typography ---------- */

html[data-theme-869]:not([data-theme-page="home"]) main article {
    color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) main article h2 {
    color: var(--ink);
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-top: 2.4rem;
    margin-bottom: 0.9rem;
}

html[data-theme-869]:not([data-theme-page="home"]) main article h3 {
    color: var(--ink);
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 1.9rem;
    margin-bottom: 0.7rem;
}

html[data-theme-869]:not([data-theme-page="home"]) main article p,
html[data-theme-869]:not([data-theme-page="home"]) main article li {
    color: var(--body-text);
    line-height: 1.78;
}

html[data-theme-869]:not([data-theme-page="home"]) main article p {
    margin-bottom: 1.1rem;
}

html[data-theme-869]:not([data-theme-page="home"]) main article ul,
html[data-theme-869]:not([data-theme-page="home"]) main article ol {
    padding-left: 1.35rem;
    margin: 1rem 0 1.4rem;
}

html[data-theme-869]:not([data-theme-page="home"]) main article ul {
    list-style: disc;
}

html[data-theme-869]:not([data-theme-page="home"]) main article ol {
    list-style: decimal;
}

html[data-theme-869]:not([data-theme-page="home"]) main article li {
    margin-bottom: 0.45rem;
}

html[data-theme-869]:not([data-theme-page="home"]) main article a {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(17, 17, 17, 0.4);
    text-underline-offset: 3px;
}

html[data-theme-869]:not([data-theme-page="home"]) main article a:hover {
    text-decoration-color: var(--ink);
}

html[data-theme-869]:not([data-theme-page="home"]) main article blockquote {
    border-left: 3px solid var(--line-strong);
    padding: 0.25rem 0 0.25rem 1.2rem;
    margin: 1.5rem 0;
    color: var(--body-text);
}

html[data-theme-869]:not([data-theme-page="home"]) main article code {
    background: var(--tint-2);
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.92em;
}

html[data-theme-869]:not([data-theme-page="home"]) main article pre {
    background: #111111;
    color: #f4f4f4;
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
}

html[data-theme-869]:not([data-theme-page="home"]) main article pre code {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
}

html[data-theme-869]:not([data-theme-page="home"]) main article img {
    border-radius: 0.9rem;
    border: 1px solid var(--line);
}

/* listing cards and article hero metadata */
html[data-theme-869]:not([data-theme-page="home"]) main .insight-card .text-white\/70,
html[data-theme-869]:not([data-theme-page="home"]) main .insight-card .text-white\/60 {
    color: var(--muted) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) main .insight-card .border-white\/15 {
    border-color: var(--line) !important;
}

/* ---------- outer CTA bands and footer ---------- */

/* Closing CTA bands are direct children of <body> on most pages, but inside
   <main> on Nevis and Contact. Style both parents identically. */
html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) {
    background-color: var(--dark) !important;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(h1, h2, h3, h4) {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.text-white, .text-white\/90) {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.text-white\/85, .text-white\/80, .text-white\/75, .text-white\/70, .text-white\/65) {
    color: rgba(255, 255, 255, 0.82);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.text-white\/60, .text-white\/55, .text-white\/50, .text-white\/40) {
    color: rgba(255, 255, 255, 0.72);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.text-primary, .text-primary\/90) {
    color: #d8d8d8;
}

/* One visible action per band: the source anchor is cyan; keep its markup and
   make it the same obvious white CTA used on the homepage. */
html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(a.bg-primary, a.bg-primary\/15, a[href="/contact"], a[href="/new/contact"], a[class*="border-primary"]) {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #0b0b0b !important;
    box-shadow: 0 22px 46px -26px rgba(255, 255, 255, 0.45) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(a.bg-primary, a.bg-primary\/15, a[href="/contact"], a[href="/new/contact"], a[class*="border-primary"]):hover {
    background-color: #ededed !important;
    border-color: #ededed !important;
    color: #000000 !important;
}

/* Neutralise the cyan neon glow carried by those CTA anchors. */
html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.neon-cyan, .cyan-glow, .glow-cyan, [class*="shadow-[0_0"]) {
    box-shadow: none !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.bg-primary\/5, .bg-primary\/10, .bg-primary\/15, .bg-primary\/20) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(body, main) > section:is(.bg-neutral-900, .bg-background-dark):not([data-theme-hero]) :is(.border-primary, .border-primary\/20, .border-primary\/30, .border-primary\/40, .border-primary\/50, .border-primary\/60, .border-primary\/70) {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

html[data-theme-869] footer,
html[data-theme-869] main > footer {
    background-color: var(--dark-deep) !important;
    color: #e9e9e9;
    border-color: rgba(255, 255, 255, 0.08) !important;
    /* Source pages use mt-20 against a dark body; on the light preview that
       read as a white gap splitting the CTA from the footer. */
    margin-top: 0 !important;
}

/* Footer logo chip and muted link/copyright runs stay legible on the dark bar,
   including footers nested inside <main>. */
html[data-theme-869] footer .bg-white\/10,
html[data-theme-869] main > footer .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.14);
}

html[data-theme-869] footer .text-white,
html[data-theme-869] main > footer .text-white {
    color: #ffffff;
}

html[data-theme-869] footer .text-white\/60,
html[data-theme-869] main > footer .text-white\/60 {
    color: rgba(255, 255, 255, 0.72);
}

html[data-theme-869] footer .text-white\/35,
html[data-theme-869] main > footer .text-white\/35 {
    color: rgba(255, 255, 255, 0.62);
}

html[data-theme-869] footer .text-white\/20,
html[data-theme-869] main > footer .text-white\/20 {
    color: rgba(255, 255, 255, 0.34);
}

html[data-theme-869] footer .text-primary,
html[data-theme-869] main > footer .text-primary {
    color: #ffffff;
}

html[data-theme-869] footer a:hover,
html[data-theme-869] main > footer a:hover,
html[data-theme-869] footer .hover\:text-primary:hover,
html[data-theme-869] main > footer .hover\:text-primary:hover {
    color: #ffffff;
}

/* ---------- responsive + motion ---------- */

@media (max-width: 767px) {
    html[data-theme-869]:not([data-theme-page="home"]) section[data-theme-hero] {
        min-height: auto;
        padding-top: 7rem;
        padding-bottom: 4rem;
    }

    html[data-theme-869] section[data-theme-hero] .contact-form-card {
        padding: 1.5rem;
    }

    html[data-theme-869]:not([data-theme-page="home"]) main article h2 {
        margin-top: 1.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme-869] .insight-card,
    html[data-theme-869] .glass-morphism,
    html[data-theme-869] .glass-card,
    html[data-theme-869] .process-card,
    html[data-theme-869] .contact-form-card,
    html[data-theme-869] .faq-item,
    html[data-theme-869] .about-faq-item,
    html[data-theme-869] .blog-faq-item,
    html[data-theme-869] .insights-intro-item {
        transition: none !important;
        transform: none !important;
    }
}

/* Direct dark result/CTA bands outside <main> keep white type. */
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark h1,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark h2,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark h3,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark h4,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 h1,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 h2,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 h3,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 h4 {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark .text-white,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark .text-white\/90,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 .text-white,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 .text-white\/90 {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark .text-white\/75,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark .text-white\/70,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark .text-slate-300,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 .text-white\/75,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 .text-white\/70 {
    color: rgba(255, 255, 255, 0.8);
}

html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-background-dark .text-primary,
html[data-theme-869]:not([data-theme-page="home"]) body > section.bg-neutral-900 .text-primary {
    color: #d8d8d8;
}

/* Hero decoration cards stay dark; the contact form card is opted out below. */
html[data-theme-869] section[data-theme-hero] .glass-morphism:not(.contact-form-card) {
    background: #191919 !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme-869] section[data-theme-hero] .text-primary\/40,
html[data-theme-869] section[data-theme-hero] .text-primary\/50 {
    color: rgba(255, 255, 255, 0.52) !important;
}

html[data-theme-869] section[data-theme-hero] .glow-cyan {
    box-shadow: none !important;
}

html[data-theme-869] main > section[data-theme-hero] .contact-form-card label,
html[data-theme-869] main > section[data-theme-hero] .contact-form-card .text-white\/40 {
    color: #4a4a4a !important;
}

/* Article content cards are nested inside <article>, not direct main children. */
html[data-theme-869]:not([data-theme-page="home"]) main article .glass-morphism,
html[data-theme-869]:not([data-theme-page="home"]) main article .blog-faq-item {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme-869]:not([data-theme-page="home"]) main article .text-white,
html[data-theme-869]:not([data-theme-page="home"]) main article .text-white\/90,
html[data-theme-869]:not([data-theme-page="home"]) main article .text-white\/80,
html[data-theme-869]:not([data-theme-page="home"]) main article .text-white\/75,
html[data-theme-869]:not([data-theme-page="home"]) main article .text-white\/70 {
    color: var(--body-text);
}

html[data-theme-869]:not([data-theme-page="home"]) main article .border-white\/10,
html[data-theme-869]:not([data-theme-page="home"]) main article .border-white\/15 {
    border-color: var(--line) !important;
}

/* Neutralise the remaining cyan glass accents in the SEO hero artwork. */
html[data-theme-869] section[data-theme-hero] .bg-primary\/5,
html[data-theme-869] section[data-theme-hero] .bg-primary\/10,
html[data-theme-869] section[data-theme-hero] .bg-primary\/20 {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme-869] section[data-theme-hero] .border-primary\/20,
html[data-theme-869] section[data-theme-hero] .border-primary\/30,
html[data-theme-869] section[data-theme-hero] .border-primary\/40 {
    border-color: rgba(255, 255, 255, 0.24) !important;
}

/* ---------- case study: contain decoration, finish monochrome ---------- */

/* The Results band has a 500px glow translated half its width outside the
   section. Contain that decoration in its own band instead of clipping the
   whole page or any readable content. */
html[data-theme-869][data-theme-page="case-study"] .results-section {
    overflow: hidden;
}

html[data-theme-869][data-theme-page="case-study"] .results-section > .absolute[class*="bg-primary/5"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Remove the remaining cyan text/box shadows and green status accents. */
html[data-theme-869][data-theme-page="case-study"] .text-glow {
    text-shadow: none !important;
}

html[data-theme-869][data-theme-page="case-study"] .cyan-glow,
html[data-theme-869][data-theme-page="case-study"] .neon-cyan {
    box-shadow: none !important;
}

html[data-theme-869][data-theme-page="case-study"] .bg-emerald-500\/10 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme-869][data-theme-page="case-study"] .bg-emerald-500,
html[data-theme-869][data-theme-page="case-study"] .bg-emerald-400 {
    background-color: #cfcfcf !important;
}

html[data-theme-869][data-theme-page="case-study"] .text-emerald-400,
html[data-theme-869][data-theme-page="case-study"] .text-emerald-300 {
    color: #d0d0d0 !important;
}

html[data-theme-869][data-theme-page="case-study"] .border-emerald-500\/20,
html[data-theme-869][data-theme-page="case-study"] .border-emerald-500\/30,
html[data-theme-869][data-theme-page="case-study"] .hover\:border-emerald-400\/40:hover {
    border-color: rgba(255, 255, 255, 0.24) !important;
}

html[data-theme-869][data-theme-page="case-study"] [class*="shadow-[0_0_10px_rgba(16,185,129,0.5)]"] {
    box-shadow: none !important;
}

/* ==================================================================
   Accent leftovers on the shared inner pages
   The originals still carry cyan/orange/emerald utility classes and a
   few inline accent declarations. Inside the approved light reading
   areas they are remapped to the monochrome scale; hero and CTA/footer
   dark bands keep their own treatment above.
   ================================================================== */

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.text-primary\/40, .text-primary\/50) {
    color: var(--muted) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.from-primary, .from-primary\/80, .via-primary, .via-primary\/20, .via-primary\/30, .to-primary, .to-primary-container) {
    --tw-gradient-from: rgba(17, 17, 17, 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(17, 17, 17, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(17, 17, 17, 0.14) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.bg-primary\/40, .bg-primary\/55, .bg-primary\/60, .bg-primary\/70) {
    background-color: rgba(17, 17, 17, 0.1) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.border-primary\/10, .border-primary\/50, .border-primary\/60, .border-primary\/70) {
    border-color: var(--line-strong) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.hover\:border-primary:hover, .hover\:border-primary\/30:hover, .hover\:border-primary\/40:hover, .hover\:border-primary\/50:hover) {
    border-color: var(--line-strong) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.hover\:text-primary:hover, .hover\:decoration-primary:hover, .group:hover .group-hover\:text-primary, .group-hover\:text-primary\/50) {
    color: var(--ink) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .hover\:bg-primary:hover {
    background-color: var(--ink) !important;
    color: #ffffff !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.glow-cyan, .cyan-glow, .neon-cyan) {
    box-shadow: none !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.text-secondary, .text-on-primary) {
    color: var(--ink) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.text-emerald-400, .text-emerald-300) {
    color: var(--muted) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.bg-emerald-500, .bg-emerald-400) {
    background-color: var(--line-strong) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) .bg-emerald-500\/10 {
    background-color: rgba(17, 17, 17, 0.06) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.border-emerald-500\/20, .border-emerald-500\/30, .border-secondary, .border-secondary\/20, .border-secondary\/60, .border-secondary\/70) {
    border-color: var(--line) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.bg-secondary, .bg-secondary\/10, .bg-secondary\/15) {
    background-color: var(--tint-2) !important;
}

/* Inline accent declarations copied from the original pages. */
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]) [style*="color: rgba(0, 242, 255"] {
    color: var(--muted) !important;
}

/* SEO checklist rows: inline white copy and cyan chips on a now-light band. */
html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]) [style*="color:rgba(255,255,255,0.88)"] {
    color: var(--ink) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]) [style*="border:1px solid rgba(0,242,255,0.16)"] {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]) [style*="background:rgba(0,242,255,0.1)"] {
    background: rgba(17, 17, 17, 0.06) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]) [style*="background:rgba(0,242,255,0.1)"] :is(path, circle, line, polyline, rect, polygon) {
    stroke: var(--ink) !important;
}

/* Contact WhatsApp action keeps its outline but loses the green pulse. */
html[data-theme-869] .contact-whatsapp-link.neon-pulse-green {
    animation: none !important;
    box-shadow: none !important;
}

/* ==================================================================
   Nevis service page: light cards, dark copy, monochrome accents
   The page defines its own dark "nevis" surface tokens and cyan
   decorations. They are remapped here only; page structure, copy and
   links stay exactly as the original.
   ================================================================== */

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-copy-muted,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-stack-card-copy,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-panel p {
    color: var(--body-text);
}

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-stack-card,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid var(--ink);
    box-shadow: var(--shadow-card);
    color: var(--ink);
}

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-stack-card:hover,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-stack-card:focus-within,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-panel:hover,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-panel:focus-within {
    background: var(--tint);
    border-color: var(--line-strong);
    border-left-color: var(--ink);
}

html[data-theme-869][data-theme-page="web-design-nevis"] :is(.nevis-stack-card-title, .nevis-service-panel h3) {
    color: var(--ink);
}

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-watermark {
    color: rgba(17, 17, 17, 0.12);
    filter: none;
}

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-panel:hover .nevis-service-watermark,
html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-service-panel:focus-within .nevis-service-watermark {
    color: rgba(17, 17, 17, 0.2);
    transform: none;
}

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-section-rule {
    background: var(--ink);
}

html[data-theme-869][data-theme-page="web-design-nevis"] .nevis-rail-point::before {
    background: var(--ink);
    box-shadow: none;
}

html[data-theme-869][data-theme-page="web-design-nevis"] .perspective-rail::before {
    background: linear-gradient(to bottom, transparent, rgba(17, 17, 17, 0.2) 10%, rgba(17, 17, 17, 0.2) 90%, transparent);
}

/* Process-card hairline and card hover accent. */
html[data-theme-869][data-theme-page="web-design-nevis"] main > section .from-primary\/80 {
    --tw-gradient-from: rgba(17, 17, 17, 0.35) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(17, 17, 17, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(17, 17, 17, 0.12) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

html[data-theme-869][data-theme-page="web-design-nevis"] main > section .hover\:border-primary\/50:hover {
    border-color: var(--line-strong);
}


/* ---------- original custom components within the monochrome preview ---------- */

/* Keep custom cards consistent with the other preview surfaces, and neutralise
   the wireframe tokens used by the original hero decoration. */
html[data-theme-869][data-theme-page="web-design-nevis"] {
    --cyan-glow: #555555;
    --wireframe-stroke: rgba(255, 255, 255, 0.12);
}

html[data-theme-869][data-theme-page="web-design-nevis"] :is(.nevis-stack-card, .nevis-service-panel) {
    border-radius: var(--card-radius);
}

/* Only the heading sits on the light page; reel captions stay white on media. */
html[data-theme-869][data-theme-page="home"] #showcase > .max-w-7xl h2 {
    color: var(--ink);
}

/* Explicit source SVG paint does not inherit text-primary theme overrides. */
html[data-theme-869] :is(svg, svg *)[stroke="#00f2ff" i],
html[data-theme-869] :is(svg, svg *)[stroke="#0db9f2" i] {
    stroke: currentColor;
}

html[data-theme-869] :is(svg, svg *)[fill="#00f2ff" i],
html[data-theme-869] :is(svg, svg *)[fill="#0db9f2" i] {
    fill: currentColor;
}

html[data-theme-869] header.fixed .bg-primary .text-black {
    color: #ffffff;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.text-white\/35, .text-slate-400) {
    color: var(--muted);
}

html[data-theme-869] .client-name a {
    color: var(--body-text);
}

html[data-theme-869] section[data-theme-hero] .text-slate-400,
html[data-theme-869] .results-section .text-slate-400 {
    color: #b8b8b8;
}

/* Preserve the source action and footer, including pages nesting them in main.
   Give the closing copy room to wrap instead of overflowing its measure. */
html[data-theme-869] :is(body, main) > section:has(+ footer) {
    padding-block: clamp(4rem, 8vw, 7rem);
}

html[data-theme-869] :is(body, main) > section:has(+ footer) h2 {
    max-width: 24ch;
    margin-inline: auto;
    white-space: normal;
    line-height: 1.12;
}

html[data-theme-869] :is(body, main) > section:has(+ footer) a:focus-visible,
html[data-theme-869] footer a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 5px;
}

html[data-theme-869] footer :is(.text-\[10px\], .text-\[11px\]) {
    font-size: 0.75rem;
    line-height: 1.7;
}

html[data-theme-869] footer .flex.items-center.gap-3 {
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    html[data-theme-869] footer .flex.items-center.gap-3 {
        justify-content: center;
    }

    html[data-theme-869] :is(body, main) > section:has(+ footer) a.bg-primary {
        max-width: 100%;
        white-space: normal;
        line-height: 1.6;
    }
}

/* Homepage premium-card accents are inline in the original HTML. */
html[data-theme-869][data-theme-page="home"] .services-card-premium[style] {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
}

html[data-theme-869][data-theme-page="home"] .services-card-premium > [aria-hidden="true"][style*="rgba(0,242,255"] {
    background: linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.2), transparent) !important;
}

/* Reserve room for the shared mobile action within the dark footer, avoiding a
   white body-padding strip or covered footer copy at the end of the page. */
@media (max-width: 1023px) {
    html[data-theme-869] body {
        padding-bottom: 0;
    }

    html[data-theme-869] footer {
        padding-bottom: calc(3rem + 96px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==================================================================
   Reviewed /new UX uplift (W1–W4)
   Every rule is scoped by the preview page attribute plus a stable
   section ID or :has(). Copy, links, media, metadata and the dark
   bands (#hero, #showcase media overlays, #engagement, CTA, footer)
   are unchanged; the only new visible text is the 01/02/03 showcase
   index rendered by preview.js.
   ================================================================== */

/* ------------------------------------------------------------------
   W3 — home showcase selector
   Pills sit on the light page header, so the shared #showcase white
   focus ring needs an ink override here.
   ------------------------------------------------------------------ */

html[data-theme-869][data-theme-page="home"] #showcase > .max-w-7xl {
    margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
}

/* space-y-24 put 6rem above the first reel; the header margin above
   already spaces it, so clamp the combined gap. */
html[data-theme-869][data-theme-page="home"] #showcase > .max-w-7xl + .group {
    margin-top: clamp(1.5rem, 2.4vw, 2rem);
}

html[data-theme-869] .showcase-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

html[data-theme-869] .showcase-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html[data-theme-869] .showcase-tab:hover {
    border-color: var(--ink);
    background-color: var(--tint-2);
    color: var(--ink);
}

html[data-theme-869] .showcase-tab[aria-selected="true"] {
    border-color: var(--ink);
    background-color: var(--ink);
    color: #ffffff;
}

html[data-theme-869][data-theme-page="home"] #showcase .showcase-switcher .showcase-tab:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------
   W1 — St Kitts service cards
   The source cards keep a near-black Tailwind gradient while the
   preview remaps their copy to ink (1.05–1.91:1). Reset the card's own
   background/gradient and restate its text, icons and hairline.
   ------------------------------------------------------------------ */

html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--ink);
    padding: clamp(1.5rem, 2.4vw, 2.25rem) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article:hover {
    border-color: var(--line-strong) !important;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 22px 44px -32px rgba(17, 17, 17, 0.45) !important;
    transform: translateY(-2px);
}

html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem !important;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background-color: var(--tint);
    color: var(--ink) !important;
    font-size: 1.4rem;
    line-height: 1;
}

html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article h3 {
    color: var(--ink) !important;
    font-size: clamp(1.15rem, 1.4vw, 1.5rem);
    line-height: 1.25;
    margin-bottom: 0.9rem !important;
}

/* the 1px cyan/neutral hairline becomes a short solid ink rule */
html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article > div.h-px {
    width: 2rem;
    height: 2px;
    margin-bottom: 1.15rem !important;
    background: var(--ink) !important;
}

html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article p {
    margin: 0;
    max-width: 65ch;
    color: var(--body-text) !important;
    font-size: 1rem;
    line-height: 1.7;
}

/* Featured card full width, the other four as a 2×2 grid. DOM order and
   all five items are untouched; the nested row is the only structural
   difference between the first row and the second. */
@media (min-width: 1024px) {
    html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation .space-y-8 > .grid:has(> .grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation .space-y-8 > .grid:has(> .grid) > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* W4 — the two translucent cards on #local-authority and
   #local-seo-coverage measured 3.72:1 for body copy. Make them light. */
html[data-theme-869][data-theme-page="web-design-st-kitts"] :is(#local-authority, #local-seo-coverage) [class*="bg-surface-variant"] {
    background: var(--tint) !important;
    border-color: var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme-869][data-theme-page="web-design-st-kitts"] #comparison article {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
}

/* W4 — flat asides and supporting cards gain the same frame so white
   cards no longer sit borderless on white. No layout or text change. */
html[data-theme-869][data-theme-page="web-design-st-kitts"] :is(#definition aside, #web-design-st-kitts-authority aside, #supporting-authority article) {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
}

/* W4 — St Kitts process dots: solid ink circles with white numerals,
   matching the Nevis numbered treatment. The vertical rule stays. */
html[data-theme-869][data-theme-page="web-design-st-kitts"] #process .rounded-full.bg-surface-container-high {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    box-shadow: none !important;
}

html[data-theme-869][data-theme-page="web-design-st-kitts"] #process .rounded-full.bg-surface-container-high > span {
    color: #ffffff !important;
}

/* ------------------------------------------------------------------
   W2 — Nevis numbered process cards
   ------------------------------------------------------------------ */

html[data-theme-869][data-theme-page="web-design-nevis"] #process article {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-top: 2px solid var(--ink) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
    padding: clamp(1.5rem, 2.4vw, 2rem) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme-869][data-theme-page="web-design-nevis"] #process article:hover {
    border-color: var(--line-strong) !important;
    border-top-color: var(--ink) !important;
}

/* the decorative top gradient is replaced by the ink top border */
html[data-theme-869][data-theme-page="web-design-nevis"] #process article > div[aria-hidden="true"] {
    display: none !important;
}

html[data-theme-869][data-theme-page="web-design-nevis"] #process article > span.rounded-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem !important;
    border: 0 !important;
    border-radius: 0.55rem;
    background: var(--ink) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    line-height: 1;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

html[data-theme-869][data-theme-page="web-design-nevis"] #process article h3 {
    color: var(--ink) !important;
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 1rem !important;
}

html[data-theme-869][data-theme-page="web-design-nevis"] #process article p {
    color: var(--body-text) !important;
    font-size: 0.95rem;
    line-height: 1.65;
}

/* outcome line aligns across the three cards */
html[data-theme-869][data-theme-page="web-design-nevis"] #process article p:last-child {
    margin-top: auto !important;
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* W2 — "What Changes After Launch" (the section immediately before
   #service-depth) becomes a tint band with four statement cards. */
html[data-theme-869][data-theme-page="web-design-nevis"] main > section:has(+ #service-depth) {
    background: var(--tint) !important;
    border-block: 1px solid var(--line);
    padding-block: clamp(4rem, 7vw, 6rem) !important;
    padding-inline: 0 !important;
}

html[data-theme-869][data-theme-page="web-design-nevis"] main > section:has(+ #service-depth) > .max-w-7xl > .mb-12 {
    margin-bottom: 1.75rem !important;
}

html[data-theme-869][data-theme-page="web-design-nevis"] main > section:has(+ #service-depth) .glass-morphism {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 9rem;
    padding: 1.5rem !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
}

html[data-theme-869][data-theme-page="web-design-nevis"] main > section:has(+ #service-depth) .glass-morphism::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--ink);
}

html[data-theme-869][data-theme-page="web-design-nevis"] main > section:has(+ #service-depth) .glass-morphism p {
    margin: 0;
    color: var(--ink) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    text-wrap: balance;
}

/* W2/P2 — the #nevis-approach statements reuse the same card treatment. */
html[data-theme-869][data-theme-page="web-design-nevis"] #nevis-approach .glass-morphism {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 7rem;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-card) !important;
}

html[data-theme-869][data-theme-page="web-design-nevis"] #nevis-approach .glass-morphism::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--ink);
}

html[data-theme-869][data-theme-page="web-design-nevis"] #nevis-approach .glass-morphism p {
    margin: 0;
    color: var(--ink) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* ------------------------------------------------------------------
   W4 — cross-page states: FAQ open cards, contact accents, motion
   ------------------------------------------------------------------ */

html[data-theme-869]:not([data-theme-page="home"]) main :is(.service-faq-item, .nevis-faq-item) {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

html[data-theme-869]:not([data-theme-page="home"]) :is(main, body) > section:not([data-theme-hero]):not(.bg-background-dark):not(.bg-neutral-900) :is(.faq-item, .service-faq-item, .nevis-faq-item)[open] {
    background: #fdfdfd !important;
    border-color: var(--line-strong) !important;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 26px 52px -36px rgba(17, 17, 17, 0.45);
}

/* The source hover turns this action WhatsApp green with a green glow. */
html[data-theme-869] section[data-theme-hero] .contact-whatsapp-link:hover,
html[data-theme-869] section[data-theme-hero] .contact-whatsapp-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none;
}

/* The accent line is 2rem minimum with white-space: nowrap; at 320–360px
   "ST KITTS & NEVIS" can exceed the content width. */
@media (max-width: 420px) {
    html[data-theme-869] .contact-hero-accent-line {
        white-space: normal;
        font-size: clamp(1.6rem, 8vw, 2rem);
        line-height: 1.05;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme-869] :is(.animate-pulse, .animate-ping, .animate-bounce) {
        animation: none !important;
    }

    html[data-theme-869] :is(.hero-vignette-breathe, .hero-grid-breathe) {
        animation: none !important;
        transform: none !important;
    }

    /* image/decoration scale on hover, including the about card shot */
    html[data-theme-869] :is(.group-hover\:scale-105, .group-hover\:scale-110),
    html[data-theme-869] :is(.group:hover .group-hover\:scale-105, .group:hover .group-hover\:scale-110),
    html[data-theme-869] #about-local-ux img {
        transform: none !important;
    }

    html[data-theme-869] .showcase-tab {
        transition: none !important;
    }

    html[data-theme-869][data-theme-page="web-design-st-kitts"] #seo-foundation article,
    html[data-theme-869][data-theme-page="web-design-nevis"] #process article {
        transition: none !important;
        transform: none !important;
    }
}

/* Owner refinements: shared preview mark, consistent project geometry and captions. */
html[data-theme-869] header .preview-island-brand { display:inline-flex; align-items:center; gap:12px; flex:none; color:#111; white-space:nowrap; }
html[data-theme-869] header .preview-brand-name { color:#111; font-size:24px; font-weight:800; letter-spacing:-.04em; line-height:1; }
html[data-theme-869] header .preview-island-brand svg { display:block; width:54px; height:54px; }
html[data-theme-869] #showcase.preview-project-tabs { display:grid; row-gap:clamp(1.5rem,2.4vw,2rem); }
html[data-theme-869] #showcase.preview-project-tabs > .max-w-7xl,
html[data-theme-869] #showcase.preview-project-tabs > .group { margin-block:0 !important; }
html[data-theme-869] .preview-project-tabs [role="tabpanel"][hidden] { display:none !important; margin:0 !important; }
html[data-theme-869] #recent-projects.preview-project-tabs > .max-w-7xl > [role="tabpanel"] { margin-top:0 !important; }
html[data-theme-869] #recent-projects .showcase-switcher { margin-top:1.5rem; }
html[data-theme-869] #recent-projects .showcase-tab:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
html[data-theme-869] #showcase [role="tabpanel"] :is(h3,p) { color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.85); }
html[data-theme-869] #showcase [role="tabpanel"] [class*="bg-black/40"],
html[data-theme-869] #showcase [role="tabpanel"]:hover [class*="bg-black/40"] { background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.6)) !important; }
html[data-theme-869][data-theme-page="insight"] section[data-theme-hero] .mt-8.flex.flex-wrap { margin-bottom:1.5rem; }
html[data-theme-869][data-theme-page="insight"] #blog-faq { padding-bottom:2rem !important; margin-bottom:2rem; }
html[data-theme-869][data-theme-page="about"] section[data-theme-hero] p:last-child { margin-bottom:1.5rem !important; }
html[data-theme-869][data-theme-page="contact"] .contact-hero .inline-flex:has(>span.text-primary) { display:flex; justify-content:flex-start; text-align:left; }
html[data-theme-869][data-theme-page="contact"] .contact-hero .inline-flex:has(>span.text-primary) > span.w-12 { display:none; }
@media(min-width:1024px) {
 html[data-theme-869] .preview-ready-heading { font-size:clamp(1.75rem,3.4vw,3rem) !important; white-space:nowrap; }
}

html[data-theme-869] #showcase [role="tabpanel"] p { font-size:clamp(1rem,1.2vw,1.125rem); line-height:1.65; max-width:70ch; margin-inline:auto; }

/* Keep the expanded preview menu reachable on short/landscape phones. */
@media (max-width:1023px) {
 html[data-theme-869] [data-mobile-menu] { max-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px)); overflow-y:auto; overscroll-behavior:contain; }
}

/* Keep project controls beside the title at every viewport width. */
html[data-theme-869][data-theme-page="home"] #showcase.preview-project-tabs > .max-w-7xl {
 display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
 width:min(1200px,calc(100% - 2rem)); max-width:none; padding-inline:0; gap:16px;
}
html[data-theme-869][data-theme-page="home"] #showcase > .max-w-7xl h2 { margin:0; }
html[data-theme-869][data-theme-page="home"] #showcase .showcase-switcher { justify-self:end; flex-wrap:nowrap; }
@media(max-width:600px) {
 html[data-theme-869][data-theme-page="home"] #showcase > .max-w-7xl h2 { font-size:clamp(1.125rem,4vw,1.5rem); line-height:1.15; }
 html[data-theme-869][data-theme-page="home"] #showcase.preview-project-tabs > .max-w-7xl { gap:12px; }
}

/* Public launch: keep article breadcrumbs below the fixed shared navbar. */
html[data-theme-869][data-theme-page="insight"] section[data-theme-hero] > .relative { padding-top:7.5rem !important; }

/* Mobile homepage: breathing room under the navbar; floating contact action replaces the duplicate hero CTA. */
@media (max-width:1023px) {
 html[data-theme-869][data-theme-page="home"] #hero h1 { margin-top:1rem !important; }
 html[data-theme-869][data-theme-page="home"] #hero a[href="/contact"] { display:none !important; }
}

/* Keep the floating contact action from covering an expanded mobile menu. */
@media (max-width:1023px) {
 html[data-theme-869] body:has([data-mobile-menu-toggle][aria-expanded="true"]) #mobile-sticky-contact-cta { display:none !important; }
}