:root{--gold:#d8b86a;--pink:#ff5aa5}
body{margin:0;background:#070707;color:#fff;font-family:Arial,sans-serif}
h1,h2{font-family:Georgia,serif}.nav{position:fixed;z-index:5;top:0;width:100%;padding:20px 6vw;/*background:#000b;*/display:flex;justify-content:space-between}.nav a{color:white}.brand{color:var(--gold);margin-right:10%;}
.hero{height:100vh;background:linear-gradient(90deg,#000b,#0003),url('../images/hero-leadership-center.jpg') center/cover;display:flex;align-items:center;padding:0 8vw}
.hero-content{max-width:800px}.eyebrow{color:var(--gold);letter-spacing:.3em;text-transform:uppercase}h1{font-size:clamp(3rem,8vw,7rem);line-height:.9}em{color:var(--pink);font-style:normal}
a{color:white;text-decoration:none}
.hero a,.closing a{border:1px solid var(--gold);padding:6px 25px;display:inline-block;margin-top:-4%;}
section{padding:100px 8vw}.thesis,.closing{text-align:center;background:#f2ece3;color:#17120f}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:30px}.rooms article{height:500px;background-size:cover;background-position:center;padding:35px;display:flex;flex-direction:column;justify-content:end;box-shadow:inset 0 -200px 80px #000}
.rooms h2{font-size:2.5rem}.rooms a{color:var(--gold)}
.architecture{text-align:center; background-color:#000000;}


.architecture span{display:inline-block;border:1px solid var(--gold);padding:35px;margin:10px}
@media(max-width:900px){.rooms{grid-template-columns:1fr}}

/* Base Section Styling */
.hero-section {
  position: relative;
  background-color: #000000;
  color: #ffffff;
  padding: 100px 20px;
  text-align: center;
  font-family: 'Georgia', serif; /* Keeps the executive editorial feel */
  overflow: hidden;
}

.container2 {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 2;
}

/* 1. Gradient Text Effect */
.headline {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, #d8b86a 0%, #ff5aa5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* 2. Typography Hierarchy & Spacing */
.tagline {
  font-family: system-ui, -apple-system, sans-serif; /* Clean sans-serif for contrast */
  font-size: 1.15rem;
  color: #ff5aa5; /* Muted pink accent line */
  line-height: 1.6;
  margin-bottom: 30px;
  opacity: 0.95;
}

.body-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  color: #e0e0e0; /* Off-white to prevent eye strain */
  line-height: 1.7;
  max-width: 850px;
  margin: 0 auto;
}

/* 3. Ambient Background Glows */
.glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15; /* Keeps it subtle and professional */
  pointer-events: none;
  z-index: 1;
}
.hero-def{margin-top:-6%;}

.glow-gold {
  top: -10%;
  left: 15%;
  background: #d8b86a;
}

.glow-pink {
  bottom: -10%;
  right: 15%;
  background: #ff5aa5;
}
.leadership-architecture {

    padding:120px 7vw;

    background:#050505;

    color:white;

    overflow:hidden;

}



.architecture-header {

    text-align:center;

    max-width:900px;

    margin:auto;

}



.eyebrow {

    color:#d8b86a;

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.8rem;

}



.architecture-header h2 {

    font-family:Georgia,serif;

    font-size:clamp(2.5rem,5vw,4rem);

}



.architecture-header p {

    color:#ddd;

}




.staircase {

    position:relative;

    margin:160px auto 60px;

    max-width:1100px;

    min-height:900px;

}





/* Gold ascending pathway */

.staircase::before {

    content:"";

    position:absolute;

    left:50%;

    top:80px;

    width:4px;

    height:750px;

    background:

    linear-gradient(

    to bottom,

    #d8b86a,

    #ff5aa5

    );

    transform:rotate(-28deg);

    opacity:.6;

}





.leadership-step {

    position:absolute;

    width:380px;

    padding:35px;

    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.12),

    rgba(255,255,255,.03)

    );


    border:

    1px solid

    rgba(216,184,106,.5);


    backdrop-filter:blur(15px);


    transition:.5s;


}





.leadership-step:hover {

    transform:

    translateY(-15px);

    border-color:#d8b86a;

    box-shadow:

    0 25px 60px

    rgba(216,184,106,.25);

}




.step-one {

    bottom:0;

    left:0;

}



.step-two {

    bottom:180px;

    left:250px;

}



.step-three {

    bottom:360px;

    left:500px;

}



.step-four {

    bottom:540px;

    left:720px;

}





.step-number {

    color:#d8b86a;

    font-size:3rem;

    font-family:Georgia,serif;

    opacity:.5;

}



.step-icon {

    font-size:2rem;

    margin:15px 0;

}



.leadership-step h3 {

    font-family:Georgia,serif;

    font-size:2.2rem;

    color:white;

}



.leadership-step h4 {

    color:#ff5aa5;

    text-transform:uppercase;

    font-size:.85rem;

    letter-spacing:.12em;

}



.leadership-step p {

    color:#ddd;

}




.connected {

    margin-top:25px;

}



.connected strong {

    display:block;

    color:#d8b86a;

    margin-bottom:10px;

}



.connected span {

    display:block;

    font-size:.85rem;

    padding:4px 0;

    color:#eee;

}




.architecture-footer {

    max-width:750px;

    margin:auto;

    text-align:center;

    border-top:

    1px solid

    rgba(216,184,106,.4);

    padding-top:40px;

    font-family:Georgia,serif;

    font-size:1.4rem;

}



.architecture-footer strong {

    color:#ff5aa5;

}




@media(max-width:1100px){


.staircase {

    min-height:auto;

    display:flex;

    flex-direction:column;

    gap:30px;

}



.staircase::before {

    display:none;

}


.leadership-step {

    position:relative;

    width:100%;

    left:auto;

    bottom:auto;

}


}
/* Responsive adjustments */
@media (max-width: 768px) {
  .headline { font-size: 2.25rem; }
  .tagline, .body-text { font-size: 1rem; }
  br { display: none; } /* Removes manual breaks on mobile devices */
}

.leadership-artifact {

    padding:120px 7vw;

    background:#050505;

    color:white;

}



.artifact-header {

    text-align:center;

    max-width:900px;

    margin:auto;

}



.artifact-header h1 {

    font-family:Georgia,serif;

    font-size:clamp(3rem,6vw,5rem);

}



.artifact-header h2 {

    color:#ff5aa5;

    font-family:Georgia,serif;

}



.eyebrow {

    color:#d8b86a;

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.8rem;

}




.artifact-display {

    margin:80px auto;

    max-width:1200px;

    padding:20px;

    border:

    1px solid

    rgba(216,184,106,.45);


    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    box-shadow:

    0 40px 100px

    rgba(216,184,106,.15);

}



.artifact-display img {

    width:100%;

    display:block;

}



.architecture-introduction {

    max-width:850px;

    margin:80px auto;

    text-align:center;

}



.architecture-introduction h2 {

    font-family:Georgia,serif;

    font-size:3rem;

}





.pillar-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.pillar-card {

    padding:35px;

    min-height:360px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid

    rgba(216,184,106,.35);


    backdrop-filter:blur(12px);


    transition:.4s;

}



.pillar-card:hover {

    transform:translateY(-10px);

    border-color:#d8b86a;

    box-shadow:

    0 20px 50px

    rgba(216,184,106,.2);

}



.pillar-card span {

    color:#d8b86a;

    font-size:2.5rem;

    font-family:Georgia,serif;

}



.pillar-card h3 {

    font-size:2rem;

    font-family:Georgia,serif;

}



.pillar-card h4 {

    color:#ff5aa5;

    text-transform:uppercase;

    font-size:.8rem;

    letter-spacing:.1em;

}



.pillar-card a {

    color:#d8b86a;

    text-decoration:none;

}



@media(max-width:1000px){

.pillar-grid{

grid-template-columns:1fr 1fr;

}

}



@media(max-width:600px){

.pillar-grid{

grid-template-columns:1fr;

}

}