/* Shared atmospheric treatment for restrained page mastheads.
 * Keep this subtle: the grid should be discovered, not announced.
 */

/* Services: keep its existing technical hero composition, but align the ambient
 * light/grid direction with the other institutional mastheads. */
.offerings-page .offerings-hero-frame {
    background:
        radial-gradient(circle at 88% 10%, rgba(225, 161, 113, .16), transparent 28%),
        linear-gradient(142deg, #173f55 0%, #0f2d3d 52%, var(--deep) 100%);
}

.offerings-page .offerings-hero-frame::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    opacity: .23;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(270deg, #000, rgba(0, 0, 0, .42) 46%, transparent 84%);
    content: '';
    pointer-events: none;
}

/* ROSHAN: retain its dark institutional surface while adding depth. */
.roshan-page .roshan-hero-frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(225, 161, 113, .16), transparent 28%),
        linear-gradient(145deg, #173f55 0%, #0f2d3d 52%, var(--deep) 100%);
}

.roshan-page .roshan-hero-frame::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: auto;
    opacity: .23;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(270deg, #000, rgba(0, 0, 0, .42) 46%, transparent 84%);
    content: '';
    pointer-events: none;
}

.roshan-page .roshan-hero-copy {
    position: relative;
    z-index: 1;
}

/* Knowledge landing: the editorial masthead gets the same technical atmosphere. */
.knowledge-hub-page .kh-masthead-copy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(225, 161, 113, .15), transparent 29%),
        linear-gradient(145deg, #1b465b, #0a222e);
}

.knowledge-hub-page .kh-masthead-copy::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(270deg, #000, rgba(0, 0, 0, .4) 46%, transparent 84%);
    content: '';
    pointer-events: none;
}

.knowledge-hub-page .kh-masthead-copy > * {
    position: relative;
    z-index: 1;
}

/* Insights and research archives share one masthead structure. */
.knowledge-archive-page .kh-archive-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(225, 161, 113, .14), transparent 29%),
        linear-gradient(145deg, #1b465b, #0a222e);
}

.research-archive-page .kh-archive-intro {
    background:
        radial-gradient(circle at 88% 10%, rgba(225, 161, 113, .14), transparent 29%),
        linear-gradient(145deg, var(--navy), var(--deep));
}

.knowledge-archive-page .kh-archive-intro::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(270deg, #000, rgba(0, 0, 0, .4) 46%, transparent 84%);
    content: '';
    pointer-events: none;
}

.knowledge-archive-page .kh-archive-intro > * {
    position: relative;
    z-index: 1;
}

/* Contact is deliberately lighter, but keeps the same visual vocabulary. */
.contact-page .page-hero-surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(196, 123, 72, .12), transparent 28%),
        linear-gradient(145deg, #fff 0%, var(--paper) 100%);
}

.contact-page .page-hero-surface::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(16, 32, 42, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 32, 42, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(270deg, #000, rgba(0, 0, 0, .32) 45%, transparent 82%);
    content: '';
    pointer-events: none;
}

.contact-page .page-hero-copy {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px) {
    .offerings-page .offerings-hero-frame::before,
    .roshan-page .roshan-hero-frame::before,
    .knowledge-hub-page .kh-masthead-copy::before,
    .knowledge-archive-page .kh-archive-intro::before,
    .contact-page .page-hero-surface::before {
        background-size: 36px 36px;
        opacity: .18;
    }

    .contact-page .page-hero-surface::before {
        opacity: .32;
    }
}