/*
 * Unified public-page theme
 * Keeps every inner page visually aligned with the approved Home and Projects pages.
 */

.project-page,
.detail-page,
.contact-page {
    --project-accent: var(--blue) !important;
    --project-accent-dark: var(--navy) !important;
    --project-accent-soft: var(--soft-blue) !important;
    color: var(--ink);
    background: var(--white);
}

.project-page .site-nav,
.detail-page .site-nav,
.contact-page .site-nav {
    background: rgba(255, 255, 255, .95);
    border-bottom-color: rgba(223, 230, 240, .85);
}

.project-page .nav-link::after,
.detail-page .nav-link::after,
.contact-page .nav-link::after {
    background: var(--blue);
}

.project-page .nav-link.active,
.project-page .mobile-menu a.active,
.detail-page .nav-link.active,
.detail-page .mobile-menu a.active,
.contact-page .nav-link.active,
.contact-page .mobile-menu a.active {
    color: var(--ink);
}

.project-page .nav-cta,
.project-page .floating-contact,
.detail-page .nav-cta,
.detail-page .floating-contact,
.contact-page .nav-cta,
.contact-page .floating-contact {
    background: var(--navy);
}

.project-page .nav-cta:hover,
.project-page .floating-contact:hover,
.detail-page .nav-cta:hover,
.detail-page .floating-contact:hover,
.contact-page .nav-cta:hover,
.contact-page .floating-contact:hover {
    background: var(--blue);
}

.project-main,
.detail-main {
    background: var(--white);
}

.project-hero,
.detail-hero,
.contact-detail-hero {
    position: relative;
    background:
        radial-gradient(circle at 82% 16%, rgba(96, 201, 242, .22), transparent 32%),
        radial-gradient(circle at 8% 84%, rgba(255, 201, 40, .12), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f3f7ff 72%, #ffffff 100%);
}

.project-hero::before,
.detail-hero::before,
.contact-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(38, 117, 232, .13) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000 8%, transparent 93%);
}

.project-orb.one {
    background: var(--sky);
    opacity: .16;
}

.project-orb.two {
    background: var(--yellow);
    opacity: .11;
}

.breadcrumbs a:hover,
.breadcrumbs span,
.project-badge,
.project-eyebrow,
.project-section-label,
.detail-dashboard-head small,
.client-hero-card > span,
.contact-hero-panel > small {
    color: var(--blue);
}

.project-badge,
.project-tags span {
    border-color: rgba(38, 117, 232, .24);
    background: rgba(255, 255, 255, .86);
}

.project-tags span,
.project-hero-copy h2,
.detail-dashboard-head strong,
.contact-hero-panel > h3 {
    color: var(--navy);
}

.project-tags i,
.project-section-icon,
.overview-points i,
.project-feature-card > span,
.project-audience-card > span,
.detail-card-grid article > i,
.detail-check-list i,
.detail-process-card > i,
.contact-hero-panel > div > i,
.contact-hero-panel > div > span > strong,
.contact-hero-panel > div > span > small {
    color: var(--blue);
}

.project-primary {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 14px 30px rgba(38, 117, 232, .24);
}

.project-primary:hover {
    color: #fff;
    background: var(--navy);
}

.project-screenshot-glow,
.detail-visual-glow {
    background: linear-gradient(145deg, rgba(38, 117, 232, .28), rgba(53, 199, 180, .18));
    opacity: .22;
}

.project-showcase > img,
.detail-dashboard,
.client-hero-card,
.contact-hero-panel {
    border-color: #d5e1ee;
    box-shadow: 0 32px 80px rgba(7, 29, 60, .15);
}

.detail-dashboard-body,
.client-hero-card,
.contact-hero-panel {
    background: linear-gradient(145deg, #ffffff, #edf5ff);
}

.detail-dashboard-head > span,
.contact-hero-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--blue));
}

.detail-card-grid article,
.project-feature-card,
.project-audience-card,
.detail-check-list > div,
.detail-process-card,
.client-logo-cloud > div {
    border-color: #dce6f1;
    background: linear-gradient(145deg, #ffffff, #fbfdff);
    box-shadow: 0 12px 34px rgba(7, 29, 60, .055);
}

.detail-card-grid article > i,
.project-feature-card > span,
.project-audience-card > span,
.detail-process-card > i,
.project-section-icon {
    background: var(--soft-blue);
}

.project-feature-card:hover,
.detail-process-card:hover,
.project-audience-card:hover,
.detail-card-grid article:hover,
.detail-check-list > div:hover {
    border-color: rgba(38, 117, 232, .34);
    box-shadow: 0 22px 48px rgba(7, 29, 60, .09);
}

.project-content-section,
.detail-content-section,
.contact-next-section,
.project-trust {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.project-content-shell {
    border-color: #dce6f1;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 28px 75px rgba(7, 29, 60, .09);
}

.project-divider {
    background: #e4ebf4;
}

.project-cta {
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(96, 201, 242, .24), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--blue));
    box-shadow: 0 24px 54px rgba(7, 29, 60, .18);
}

.project-cta-light {
    color: var(--navy);
    background: #fff;
}

.project-cta-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .07);
}

.project-cta-outline:hover {
    background: rgba(255, 255, 255, .15);
}

.contact-section {
    background:
        radial-gradient(circle at 88% 16%, rgba(96, 201, 242, .16), transparent 30%),
        linear-gradient(145deg, #071d3c 0%, #0d2c57 100%);
}

.contact-card {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 30px 80px rgba(1, 12, 30, .28);
}

.submit-button,
.enquiry-modal-head {
    background: linear-gradient(135deg, var(--blue), var(--teal));
}

/* Keep project overview cards colourful through imagery, but unify their UI accents. */
.project-page:not(.projects-page) {
    --project-accent: var(--blue) !important;
    --project-accent-dark: var(--navy) !important;
    --project-accent-soft: var(--soft-blue) !important;
}

/* Home-style heading rhythm on every inner page. */
.project-hero h1,
.detail-hero h1,
.contact-detail-hero h1 {
    color: var(--ink);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(3.35rem, 6vw, 6.15rem);
    line-height: .94;
    letter-spacing: -.06em;
}

.project-hero-copy h2,
.detail-hero .project-hero-copy h2,
.contact-detail-hero .project-hero-copy h2 {
    color: var(--navy);
}

.project-section-head h2,
.project-overview h2,
.detail-split h2,
.contact-next-section h2,
.project-cta h2 {
    color: var(--ink);
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: -.045em;
}

/* Clients and contact should use the same clean blue visual system. */
.client-hero-card,
.contact-hero-panel {
    border-radius: 24px;
}

.client-logo-cloud > div {
    background: #fff;
}

/* Consistent footer and floating CTA treatment. */
.site-footer {
    background: var(--navy);
}

.floating-contact {
    box-shadow: 0 16px 36px rgba(7, 29, 60, .2);
}

@media (max-width: 980px) {
    .project-hero,
    .detail-hero,
    .contact-detail-hero {
        background:
            radial-gradient(circle at 86% 8%, rgba(96, 201, 242, .18), transparent 30%),
            linear-gradient(180deg, #fbfdff 0%, #f3f7ff 74%, #fff 100%);
    }
}

@media (max-width: 740px) {
    .project-hero h1,
    .detail-hero h1,
    .contact-detail-hero h1 {
        font-size: clamp(2.65rem, 13vw, 4.25rem);
    }

    .project-content-shell {
        padding: 26px 20px;
        border-radius: 22px;
    }

    .project-divider {
        margin-inline: -20px;
    }
}