.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.text-glow {
    text-shadow: 0 0 30px rgba(179, 197, 255, 0.2);
}
.no-line-rule { border: none !important; }
.tonal-shift { background-color: rgba(19, 19, 19, 0.7); }
.tonal-shift-bg-only { background-color: #1c1b1b; }

/* Monolithic Depth Effects */
.depth-layer-1 { transform: translateZ(20px); }
.depth-layer-2 { transform: translateZ(50px); }
.monolith-shadow {
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
}

/* Theme variables and utility overrides to enable light/dark switching
   These override a handful of Tailwind-generated utility classes using
   CSS variables so we can toggle themes at runtime without rebuilding. */
:root {
    /* Dark (default) palette tweaks */
    --bg: #0b0b0d;
    --text: #e6e6e6;
    --text-60: rgba(230,230,230,0.6);
    --primary: #9fb8ff;
    --primary-container: #1e6bff;
    --surface: #0f0f10;
    --surface-container-low: #181719;
    --surface-container-lowest: #070707;
    --surface-container-highest: #2f2f31;
    --on-surface-variant: #bfc4d1;
    --outline-variant: #424656;
    --tertiary-container: #cc4204;
    --on-primary-container: #f8f7ff;
    --nav-bg: rgba(11,11,13,0.7);
    --cta-shadow: 0 0 20px rgba(30,107,255,0.25);
    --footer-bg: #1c1b1b;
    --footer-text: var(--text);
    --footer-link: rgba(230,230,230,0.6);
    --footer-link-hover: var(--primary);
    --text-40: rgba(230,230,230,0.4);
}

:root[data-theme="light"] {
    /* Light palette tweaks */
    --bg: #ffffff;
    --text: #0b1220;
    --text-60: rgba(11,18,32,0.6);
    --primary: #0b47d1;
    --primary-container: #e6f0ff;
    --surface: #ffffff;
    --surface-container-low: #f5f6f8;
    --surface-container-lowest: #fbfbfd;
    --surface-container-highest: #efeff2;
    --on-surface-variant: #4a5568;
    --outline-variant: #d1d5db;
    --tertiary-container: #ffd6c3;
    --on-primary-container: #ffffff;
    /* Make CTA darker blue on light mode */
    --primary-container: #0b47d1;
    --nav-bg: rgba(255,255,255,0.85);
    --cta-shadow: 0 20px 50px rgba(11,71,209,0.08);
    --footer-bg: #f7f8fb;
    --footer-text: var(--text);
    --footer-link: rgba(11,18,32,0.6);
    --footer-link-hover: var(--primary);
    --text-40: rgba(11,18,32,0.4);
}

/* Map common utility class names to variables (use !important so they override Tailwind).
   Add more mappings here if you find other classes that should respond to theme. */
.bg-background { background-color: var(--bg) !important; }
.text-on-background { color: var(--text) !important; }
.text-primary { color: var(--primary) !important; }
.bg-primary-container { background-color: var(--primary-container) !important; }
.text-on-primary-container { color: var(--on-primary-container) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-highest { background-color: var(--surface-container-highest) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.border-outline-variant { border-color: var(--outline-variant) !important; }
.bg-tertiary-container { background-color: var(--tertiary-container) !important; }

/* Nav and CTA theme-aware styling */
.top-nav { background-color: var(--nav-bg) !important; backdrop-filter: blur(18px); }
.cta-button { box-shadow: var(--cta-shadow) !important; transition: box-shadow .2s ease; }
.cta-button:hover { box-shadow: none !important; }

/* Active nav link styling */
.top-nav a.active, .top-nav a[aria-current="page"] {
    color: var(--primary) !important;
    font-weight: 700;
}

/* Map common Tailwind usages to theme-aware values */
.text-white { color: var(--text) !important; }
[class*="text-white/60"] { color: var(--text-60) !important; }
[class*="text-white/40"] { color: var(--text-40) !important; }

/* Footer theme mappings */
.site-footer { background-color: var(--footer-bg) !important; color: var(--footer-text) !important; }
.site-footer a { color: var(--footer-link) !important; }
.site-footer a:hover { color: var(--footer-link-hover) !important; }
.site-footer .text-white { color: var(--footer-text) !important; }

/* Case study CTA: default neutral, but stronger in light mode */
.case-cta { background-color: var(--surface-container-highest) !important; color: var(--on-surface-variant) !important; border-color: var(--outline-variant) !important; }
:root[data-theme="light"] .case-cta { background-color: var(--primary-container) !important; color: var(--on-primary-container) !important; border-color: transparent !important; box-shadow: var(--cta-shadow) !important; }

/* Services section: theme-aware background and card styles for better contrast */
:root {
    --services-bg: var(--surface-container-low);
    --services-card-bg: var(--surface);
    --services-heading: var(--text);
    --services-copy: var(--on-surface-variant);
}
:root[data-theme="light"] {
    --services-bg: #f6f8fb;
    --services-card-bg: #ffffff;
    --services-heading: var(--text);
    --services-copy: #39404a;
}
.services-section { background-color: var(--services-bg) !important; }
.services-section h2 { color: var(--services-heading) !important; }
.services-section .services-card { background-color: var(--services-card-bg) !important; color: var(--services-copy) !important; }
.services-section .services-card a, .services-section .services-card ul { color: var(--services-copy) !important; }
/* Service number (large decorative) color — visible in dark, subtle in light */
:root { --services-number: rgba(230,230,230,0.18); }
:root[data-theme="light"] { --services-number: rgba(11,18,32,0.07); }
.services-section .service-number { color: var(--services-number); transition: color .24s ease; }

/* Small helper for the theme toggle button visuals */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

:root { --nav-height: 88px; }
html {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    scroll-padding-top: var(--nav-height);
}
/* Ensure page content never scrolls under the fixed header */
body {
    padding-top: var(--nav-height);
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}
main section, header, section {
    scroll-snap-align: none !important;
    scroll-snap-stop: unset !important;
}

/* Monolith heading helpers */
.monolith-text {
    -webkit-text-stroke: 1px rgba(179, 197, 255, 0.1);
    color: transparent;
}
.monolith-text-fill {
    color: var(--services-heading, #b3c5ff) !important;
}

/* Small helpers merged from inline snippet */
.monolith-mask {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}