/* ===========================
   ABOUT PAGE ADDITIONS
   3Hermanas Concepts
=========================== */

.nav-links{
display:flex;
gap:28px;
align-items:center;
}

.nav-links a{
text-decoration:none;
color:var(--ink,#1b2430);
font-weight:600;
transition:.25s;
}

.nav-links a:hover,
.nav-links a.active{
color:var(--accent,#c49b3a);
}

.about-hero{
padding:120px 0 90px;
background:
linear-gradient(rgba(8,22,46,.88),rgba(8,22,46,.92)),
url("assets/about-hero.jpg") center/cover no-repeat;
color:#fff;
}

.about-hero h1{
max-width:12ch;
font-size:clamp(2.8rem,6vw,4.8rem);
line-height:1.05;
margin-bottom:24px;
}

.about-hero .lead{
max-width:62ch;
opacity:.92;
font-size:1.12rem;
line-height:1.9;
}

.timeline{
position:relative;
margin:70px auto;
padding-left:40px;
border-left:4px solid var(--accent,#c49b3a);
display:grid;
gap:42px;
}

.timeline-item{
position:relative;
background:#fff;
border-radius:22px;
padding:30px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
transition:.3s;
}

.timeline-item::before{
content:"";
position:absolute;
left:-54px;
top:34px;
width:18px;
height:18px;
background:var(--accent,#c49b3a);
border-radius:50%;
border:5px solid #fff;
box-shadow:0 0 0 4px rgba(196,155,58,.25);
}

.timeline-item:hover{
transform:translateY(-6px);
}

.timeline-item h3{
margin-bottom:10px;
font-family:Fraunces,serif;
}

.feature{
background:#fff;
border-radius:24px;
padding:34px;
box-shadow:0 18px 45px rgba(0,0,0,.08);
transition:.3s;
}

.feature:hover{
transform:translateY(-8px);
}

.feature .ic{
font-size:2rem;
margin-bottom:18px;
}

.stat{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:170px;
background:#fff;
border-radius:24px;
box-shadow:0 18px 45px rgba(0,0,0,.08);
transition:.3s;
}

.stat:hover{
transform:translateY(-8px);
}

.stat b{
font-size:2.6rem;
font-family:Fraunces,serif;
color:var(--accent,#c49b3a);
}

.stat span{
margin-top:10px;
font-weight:600;
}

.final{
background:linear-gradient(135deg,#0d223f,#162f57);
color:#fff;
text-align:center;
padding:90px 0;
}

.final h2{
color:#fff;
}

@media(max-width:1100px){

.nav-links{
display:none;
}

.about-hero{
padding:90px 0;
}

.timeline{
padding-left:24px;
}

.timeline-item::before{
left:-38px;
}

}

@media(max-width:768px){

.about-hero h1{
font-size:2.6rem;
}

.timeline{
border-left-width:3px;
}

.timeline-item{
padding:24px;
}

.stat{
min-height:140px;
}

}

/* ==========================================
   ABOUT CTA
========================================== */

.about-cta{
padding:90px 0;
background:#f7f3ec;
}

.about-cta-card{

background:#14213d;

color:#fff;

padding:80px 70px;

border-radius:32px;

text-align:center;

box-shadow:0 30px 80px rgba(0,0,0,.18);

}

.about-cta-card .eyebrow{
color:#d4a83d;
}

.about-cta-card h2{

color:#fff;

max-width:900px;

margin:20px auto;

font-size:3rem;

}

.about-cta-card p{

max-width:760px;

margin:0 auto;

font-size:1.1rem;

line-height:1.8;

color:rgba(255,255,255,.86);

}

@media(max-width:700px){

.about-cta-card{

padding:55px 28px;

}

.about-cta-card h2{

font-size:2.2rem;

}

}

/* ==========================================
   ABOUT PAGE FINAL FIXES
========================================== */

/* 1. Reduce huge top space in about hero */
.about-hero{
    padding-top:70px !important;
}

/* 2 & 3. Fix invisible text inside white cards on dark sections */
.band .feature h3,
.band .feature p,
.band .feature{
    color:#071528 !important;
}

.band .feature p{
    color:#3f4a5a !important;
}

/* Make cards brighter and more readable */
.band .feature{
    background:#ffffff;
    box-shadow:0 20px 55px rgba(0,0,0,.12);
}

/* 4. Premium Flagship Product section */
.about-flagship{
    padding:110px 0;
    background:linear-gradient(135deg,#071528,#14335c);
    color:#fff;
    text-align:center;
}

.about-flagship .section-head{
    max-width:850px;
    margin:0 auto;
}

.about-flagship .eyebrow{
    color:#d4a83d;
    letter-spacing:3px;
}

.about-flagship h2{
    color:#fff;
    font-size:clamp(2.8rem,5vw,4.5rem);
    margin:18px 0 22px;
}

.about-flagship p{
    color:rgba(255,255,255,.86);
    font-size:1.15rem;
    line-height:1.8;
}

.about-flagship .cta-row{
    margin-top:42px;
}

/* About page CTA button override */
.about-cta .btn-ghost{
    color:#fff;
    border:2px solid rgba(255,255,255,.35);
    background:transparent;
}

.about-cta .btn-ghost:hover{
    background:#fff;
    color:#0f213d;
    border-color:#fff;
}