/* ==========================================================================
   GLOBAL CORE (main.css)
   ========================================================================== */

/* 1. RESET & BASE */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body {
    width: 100%;
    /* WIDE-CORE FEATHERED GRADIENT: 
       0% - Lightest misty edge (#aeb7ba)
       15% - Transition feather (#879196)
       40% to 60% - Solid Brand Grey Core (#626d71)
       85% - Transition feather (#879196)
       100% - Lightest misty edge (#aeb7ba)
    */
/* Lightened version of your current family */
background: linear-gradient(
    90deg, 
    #d1d8da 0%,   /* Even lighter edge */
    #aeb7ba 15%,  /* Old light edge is now the mid-point */
    #879196 40%,  /* Old mid-point is now the core */
    #879196 60%, 
    #aeb7ba 85%, 
    #d1d8da 100%
);
    background-attachment: fixed;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
    overflow-x: hidden;
}

/* 2. CINEMATIC REVEAL SYSTEM */
body {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

body.page-loaded {
    opacity: 1 !important;
}

/* 3. LAYOUT & CONTAINERS */
#nav-placeholder {
    min-height: 80px;
    display: block;
}

/* Standardized 75% Wrapper for PC */
.main-wrapper {
    width: 75%;
    margin: 30px auto 100px;
}

/* 4. SHARED COMPONENT: THE PAGE HEADER (Pill + Subtext) */
.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.header-pill {
    background-color: #ebc3af; /* Brand Tan */
    width: 75%; 
    padding: 8px 0;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-bottom: 15px;
}

.header-pill h1 {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.header-subtext {
    font-size: 1.2rem;
    color: #ebc3af;
    font-weight: 500;
}

/* 5. GLOBAL MOBILE OVERRIDES */
@media (max-width: 850px) {
    .main-wrapper { width: 92%; margin-top: 20px; }
    .header-pill { width: 100%; padding: 10px 20px; }
    .header-pill h1 { font-size: 1.8rem; }
    .header-subtext { font-size: 0.92rem; white-space: nowrap; }
}