/* Shared palette drawn from the homepage slider. */
:root {
    --site-deep: #0b202d;
    --site-teal: #143645;
    --site-accent: #10445a;
    --site-ice: #9adbea;
    --site-text: #183340;
    --site-muted: #586f7b;
    --site-surface: #f2f7f9;
    --site-card: #ffffff;
    --site-line: #d9e5eb;
    --site-dark-gradient: radial-gradient(ellipse at 85% 20%, #275768, transparent 55%), linear-gradient(120deg, #0b202d, #143645);
    --glorify-base: #10445a;
    --glorify-base-rgb: 16, 68, 90;
    --glorify-black: #183340;
    --glorify-black-rgb: 24, 51, 64;
    --glorify-gray: #586f7b;
    --glorify-gray-rgb: 88, 111, 123;
    --glorify-primary: #f2f7f9;
    --glorify-primary-rgb: 242, 247, 249;
}
html.dark-theme {
    --site-text: #edf5f8;
    --site-muted: #b4c8d2;
    --site-surface: #0b202d;
    --site-card: #14303f;
    --site-line: #2c4a59;
}
/* Bridge the individual page themes to one set of colors. */
html:root body:is(.navkar-home, .about-modern-page, .portfolio-premium, .journal-page, .services-overview-page) {
    --nh-ink: var(--site-text); --nh-muted: var(--site-muted); --nh-card: var(--site-card); --nh-paper: var(--site-surface); --nh-line: var(--site-line);
    --about-ink: var(--site-text); --about-muted: var(--site-muted); --about-card: var(--site-card); --about-surface: var(--site-surface); --about-line: var(--site-line);
    --pf-ink: var(--site-text); --pf-muted: var(--site-muted); --pf-card: var(--site-card); --pf-paper: var(--site-surface); --pf-line: var(--site-line);
    --jr-ink: var(--site-text); --jr-muted: var(--site-muted); --jr-card: var(--site-card); --jr-paper: var(--site-surface); --jr-line: var(--site-line);
    --sd-ink: var(--site-text); --sd-muted: var(--site-muted); --sd-card: var(--site-card); --sd-paper: var(--site-surface); --sd-line: var(--site-line);
}
html body .portfolio-gallery { --portfolio-ink: var(--site-text); --portfolio-muted: var(--site-muted); --portfolio-surface: var(--site-card); --portfolio-line: var(--site-line); }
/* Keep the existing header image under the same teal treatment as the slider. */
html body .page-header { background: var(--site-dark-gradient); }
html body .page-header__bg { opacity: .1; mix-blend-mode: luminosity; }
html body .page-header__shape-1 { opacity: .12; }
html body .page-header .page-header__inner :is(h1, h3) { color: #fff; }
html body .page-header .thm-breadcrumb li { color: #c4dce6; }
html body .page-header .thm-breadcrumb li a { color: #e4f4f9; }
html body .page-header .thm-breadcrumb li a:hover { color: var(--site-ice); }
html body .webapp-hero { background: radial-gradient(ellipse at 90% 10%, rgba(39,87,104,.1), transparent 60%), var(--site-card); }
html body .webapp-section:not(.webapp-section--dark) { background: var(--site-card); }
html body .webapp-section.webapp-section--soft, html body .webapp-section.webapp-industries-section { background: var(--site-surface); }
html body :is(.webapp-hero__text, .webapp-section__text) { color: var(--site-muted); }
html body :is(.webapp-section--dark, .webapp-hero__stat, .cta-one, .nh-process, .nh-closing__panel, .journal-cta, .journal-sidebar__contact, .service-directory__cta, .portfolio-detail-page .portfolio-invitation, .about-modern-proof) { background: var(--site-dark-gradient); }
html body :is(.webapp-section--dark, .cta-one, .about-modern-proof) .section-title__title { color: #fff; }
html body .webapp-section--dark .section-title__tagline { color: var(--site-ice); }
html body :is(.webapp-section--dark, .cta-one) .section-title__text { color: #c4dce6; }
html body .cta-one__bg { opacity: .1; }
html body .cta-one__title { color: #fff; }
html body .cta-one__text { color: #c4dce6; }
html body .portfolio-invitation { background: linear-gradient(115deg, var(--site-surface), var(--site-card)); border-color: var(--site-line); }
html body .thm-btn { background-color: var(--site-accent); color: #fff; }
html body .thm-btn span { background-color: #28657e; }
html body .thm-btn:hover { color: #fff; }
html body :is(.cta-one, .webapp-section--dark, .about-modern-proof) .thm-btn { background-color: #e0f3f8; color: #123746; }
html body :is(.cta-one, .webapp-section--dark, .about-modern-proof) .thm-btn:hover { color: #fff; }
html body :is(.portfolio-premium-button, .portfolio-gallery__contact, .journal-button) { background: var(--site-accent); border-color: var(--site-accent); color: #fff; }
html body :is(.portfolio-premium-button, .portfolio-gallery__contact, .journal-button):hover { background: #28657e; border-color: #28657e; color: #fff; }
html body :is(.portfolio-detail-page .portfolio-invitation, .journal-cta, .journal-sidebar__contact) :is(.portfolio-premium-button, .journal-button) { background: #e0f3f8; border-color: #e0f3f8; color: #123746; }
/* Footer uses the hero palette with clear contrast for links and contact details. */
html body .site-footer { background: var(--site-dark-gradient); color: #bfd3de; border-top: 1px solid #ffffff15; }
html body .site-footer__bg { opacity: .045; }
html body .site-footer__top { background: transparent; }
html body .footer-widget__title { color: #fff; }
html body :is(.footer-widget__about-text, .footer-widget__contact-list li p, .footer-widget__contact-list li p a, .footer-widget__links-list li a) { color: #bfd3de; }
html body .footer-widget__links-list li > span, html body .footer-widget__contact-list .icon { color: var(--site-ice); }
html body .site-footer a:hover { color: #fff; }
html body .footer-widget__about-cta { color: #b6e6f1; border-bottom: 1px solid #9adbea50; padding-bottom: 7px; }
html body .site-footer__social a { color: #c7e5ef; background: #ffffff08; border: 1px solid #ffffff26; }
html body .site-footer__social a:hover, html body .site-footer__social a::after { background: #28657e; color: #fff; border-color: #6da4b9; }
html body .site-footer__bottom { background: rgba(4,17,26,.28); border-top: 1px solid #ffffff16; }
html body .site-footer__bottom-inner { border-color: #ffffff16; }
html body :is(.site-footer__copyright-text, .site-footer__copyright-text a, .site-footer__bottom-menu li a) { color: #aac4d2; }
html body .site-footer a:focus-visible { outline: 2px solid var(--site-ice); outline-offset: 4px; }
/* Bright accents remain legible on dark cards. */
html.dark-theme body :is(.journal-eyebrow, .journal-category, .portfolio-gallery__eyebrow, .portfolio-card__type, .about-eyebrow, .about-text-link, .service-directory__eyebrow, .service-group__icon, .service-group li i, .portfolio-case__enquiry span, .portfolio-card__arrow) { color: var(--site-ice); }
html.dark-theme body :is(.service-group__icon, .portfolio-card__arrow, .journal-category, .portfolio-card__type) { background: #9adbea14; }
html.dark-theme body .webapp-hero .section-title__title { color: var(--site-text); }
html.dark-theme body .webapp-hero .section-title__tagline { color: var(--site-ice); }

/* Finish inner-page contrast and shared card surfaces. */
html body .webapp-section:not(.webapp-section--dark) .section-title__title,
html body .webapp-hero .section-title__title { color: var(--site-text); }
html body .webapp-section--dark .webapp-section__text { color: #c4dce6; }
html body :is(.webapp-list-card, .webapp-reason, .webapp-stack) { background: var(--site-card); border-color: var(--site-line); }
html body :is(.webapp-list-card, .webapp-reason, .webapp-stack) :is(h3, h4) { color: var(--site-text); }
html body :is(.webapp-list-card, .webapp-reason, .webapp-stack) :is(p, li) { color: var(--site-muted); }
html body .site-footer .footer-widget__contact-list .icon span { color: var(--site-ice); }
html body :is(.portfolio-detail-page .portfolio-invitation, .journal-cta, .journal-sidebar__contact) :is(.portfolio-premium-button, .journal-button):hover { background: #c5e8f1; border-color: #c5e8f1; color: #123746; }
html.dark-theme body .webapp-section:not(.webapp-section--dark) .section-title__tagline { color: var(--site-ice); }

/* The navigation uses a dark glass surface in both page themes. */
html { --menu-underline: #ffffff; }
html.dark-theme { --menu-underline: #ffffff; }
html body :is(.main-menu, .stricky-header) .main-menu__list > li > a::before {
    height: 2px;
    border-radius: 2px;
    background-color: var(--menu-underline);
    transition: transform .25s ease, background-color .25s ease;
}
html body :is(.main-menu, .stricky-header) .main-menu__list > li:focus-within > a::before,
html body :is(.main-menu, .stricky-header) .main-menu__list > li > a[aria-current="page"]::before {
    transform: scale(1, 1);
}
@media (prefers-reduced-motion: reduce) {
    html body :is(.main-menu, .stricky-header) .main-menu__list > li > a::before { transition: none; }
}

/* Dropdown chevrons follow the link color on the dark glass navigation. */
html body :is(.main-menu, .stricky-header) .main-menu__list > li.dropdown > a::after {
    color: currentColor;
    transition: color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    html body :is(.main-menu, .stricky-header) .main-menu__list > li.dropdown > a::after { transition: none; }
}

/* Slow color wash behind internal-page header images and titles. */
html body .page-header::before {
    content: '';
    position: absolute;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 25% 40%, #24708080, transparent 60%),
                radial-gradient(ellipse at 80% 65%, #365e9670, transparent 60%);
    animation: page-header-color-flow 14s ease-in-out infinite alternate;
}
@keyframes page-header-color-flow {
    from { opacity: .35; transform: translate3d(-3%, 0, 0) scale(1); }
    to { opacity: .85; transform: translate3d(3%, -2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    html body .page-header::before { animation: none; opacity: .45; }
}

/* List cards follow the shared palette, overriding legacy dark.css colors. */
html body .webapp-list-card {
    background: var(--site-card) !important;
    border-color: var(--site-line) !important;
}
html body .webapp-list-card:is(:hover, :focus-within) {
    background: var(--site-surface) !important;
    border-color: var(--site-accent) !important;
}
html.dark-theme body .webapp-list-card:is(:hover, :focus-within) {
    background: #193b4b !important;
    border-color: #568395 !important;
}
html body .webapp-list-card :is(h3, h4) { color: var(--site-text) !important; }
html body .webapp-list-card :is(p, li) { color: var(--site-muted) !important; }
html body .webapp-list-card::before { background: var(--site-accent) !important; }
html.dark-theme body .webapp-list-card::before { background: var(--site-ice) !important; }