/* ===========================================================
   CELETIOUS
   Shared Internal Page Foundation
   =========================================================== */

.internal-page{
    --internal-background:#050608;
    --internal-text:#F5F5F5;
    --internal-text-soft:rgba(245,245,245,.72);
    --internal-text-muted:rgba(245,245,245,.52);
    --internal-accent:#A8C6FF;
    --internal-border:rgba(255,255,255,.11);
    --internal-container:1180px;
    --internal-reading-width:70ch;

    position:relative;
    isolation:isolate;
    min-height:100%;
    background:
        linear-gradient(
            180deg,
            rgba(8,10,16,.22) 0%,
            var(--internal-background) 38%,
            var(--internal-background) 100%
        );
    color:var(--internal-text);
}

/* Static atmospheric framing. No animation or interactive layer. */

.internal-page::before,
.internal-page::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.internal-page::before{
    background:
        radial-gradient(
            circle at 84% 10%,
            rgba(168,198,255,.10),
            rgba(168,198,255,.025) 24%,
            transparent 48%
        ),
        radial-gradient(
            circle at 10% 38%,
            rgba(119,157,229,.055),
            transparent 32%
        );
    opacity:.9;
}

.internal-page::after{
    background-image:
        radial-gradient(circle, rgba(238,244,255,.72) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(168,198,255,.50) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.34) 0 .8px, transparent 1.3px),
        radial-gradient(circle, rgba(168,198,255,.38) 0 .8px, transparent 1.2px);
    background-position:
        7% 12%,
        91% 22%,
        17% 68%,
        82% 78%;
    background-size:
        310px 310px,
        430px 430px,
        370px 370px,
        520px 520px;
    background-repeat:repeat;
    opacity:.38;
    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        rgba(0,0,0,.78) 34%,
        transparent 82%
    );
    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        rgba(0,0,0,.78) 34%,
        transparent 82%
    );
}

.internal-main,
.internal-page > .footer{
    position:relative;
    z-index:1;
}

.internal-main{
    min-height:100vh;
}

/* ===========================================================
   Accessible Skip Link
   =========================================================== */

.skip-link{
    position:fixed;
    top:0;
    left:50%;
    z-index:3100;
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border:1px solid rgba(190,214,255,.42);
    border-radius:0 0 12px 12px;
    background:rgba(5,6,8,.97);
    color:#FFFFFF;
    font-size:15px;
    font-weight:var(--font-medium);
    line-height:1.4;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:
        0 12px 32px rgba(0,0,0,.46),
        0 0 24px rgba(168,198,255,.10);
    transform:translate(-50%,calc(-100% - 16px));
    transition:transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus,
.skip-link:focus-visible{
    transform:translate(-50%,0);
}

.internal-container{
    width:min(
        calc(100% - 64px),
        var(--internal-container)
    );
    margin-inline:auto;
}

.internal-section{
    position:relative;
    padding-block:clamp(88px,10vw,136px);
}

/* ===========================================================
   Internal Hero
   =========================================================== */

.internal-hero{
    position:relative;
    padding-block:
        clamp(176px,21vh,236px)
        clamp(88px,10vw,132px);
}

.internal-hero__inner{
    max-width:850px;
}

.internal-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin:0 0 24px;
    color:rgba(190,214,255,.68);
    font-size:12px;
    font-weight:var(--font-medium);
    line-height:1.4;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.internal-eyebrow::before{
    content:"";
    width:28px;
    height:1px;
    background:rgba(168,198,255,.50);
}

.internal-title{
    max-width:900px;
    margin:0;
    font-family:"Gambetta", Georgia, serif;
    font-size:clamp(52px,7vw,84px);
    font-weight:500;
    line-height:.98;
    letter-spacing:-.035em;
    text-wrap:balance;
}

.internal-intro{
    max-width:680px;
    margin:32px 0 0;
    color:var(--internal-text-soft);
    font-size:clamp(18px,2vw,21px);
    line-height:1.72;
}

.internal-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 20px;
    margin:28px 0 0;
    color:var(--internal-text-muted);
    font-size:14px;
    line-height:1.6;
}

/* ===========================================================
   Shared Links and Actions
   =========================================================== */

.internal-text-link{
    color:var(--internal-accent);
    text-decoration:underline;
    text-decoration-color:rgba(168,198,255,.42);
    text-decoration-thickness:1px;
    text-underline-offset:.22em;
}

.internal-text-link:hover{
    color:#D7E4FF;
    text-decoration-color:currentColor;
}

.internal-button{
    display:inline-flex;
    min-height:52px;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.055);
    color:#FFFFFF;
    font-size:16px;
    line-height:1.4;
    text-align:center;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:
        transform var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}

.internal-button:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.09);
    border-color:rgba(190,214,255,.38);
}

.internal-button:active{
    transform:translateY(0);
}

/* ===========================================================
   Shared Internal CTA
   =========================================================== */

.internal-cta{
    padding-block:clamp(88px,11vw,144px);
}

.internal-cta__inner{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:48px;
    padding-top:clamp(48px,6vw,72px);
    border-top:1px solid var(--internal-border);
}

.internal-cta__copy{
    max-width:680px;
}

.internal-cta__title{
    margin:0;
    font-family:"Gambetta", Georgia, serif;
    font-size:clamp(36px,5vw,58px);
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.025em;
    text-wrap:balance;
}

.internal-cta__text{
    margin:20px 0 0;
    color:var(--internal-text-soft);
    font-size:17px;
    line-height:1.7;
}

/* ===========================================================
   Responsive Foundation
   =========================================================== */

@media (max-width:960px){

    .internal-container{
        width:min(
            calc(100% - 44px),
            var(--internal-container)
        );
    }

    .internal-hero{
        padding-block:150px 86px;
    }

    .internal-hero__inner{
        max-width:720px;
    }

    .internal-title{
        font-size:clamp(46px,10vw,70px);
    }

    .internal-cta__inner{
        align-items:flex-start;
        flex-direction:column;
        gap:32px;
    }

}

@media (max-width:600px){

    .internal-page::after{
        opacity:.26;
    }

    .internal-section{
        padding-block:76px;
    }

    .internal-hero{
        padding-block:132px 72px;
    }

    .internal-eyebrow{
        margin-bottom:20px;
        font-size:11px;
    }

    .internal-title{
        font-size:clamp(42px,13vw,58px);
        line-height:1.02;
    }

    .internal-intro{
        margin-top:26px;
        font-size:17px;
        line-height:1.7;
    }

    .internal-meta{
        margin-top:24px;
        font-size:13px;
    }

    .internal-button{
        width:100%;
        min-height:54px;
        padding-inline:22px;
    }

    .internal-cta{
        padding-block:76px 92px;
    }

    .internal-cta__title{
        font-size:clamp(34px,10vw,46px);
    }

}

@media (prefers-reduced-motion:reduce){

    .skip-link,
    .internal-button{
        transition:none;
    }

    .internal-button:hover,
    .internal-button:active{
        transform:none;
    }

}