/* ==================================================
   TSANKI TRAVELZ — COMPONENTS
   Every component earns its place. Nothing decorative
   that doesn't serve the premium experience.
================================================== */

/* ==================================================
   NAVIGATION
   Thin, confident, stays out of the content's way.
   Gold underline hover — the only flourish needed.
================================================== */

nav{
position:sticky;
top:0;
z-index:1000;
background:rgba(252,252,250,.95);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border-bottom:1px solid var(--border-faint);
transition:box-shadow var(--ease-fast);
}

.nav-scrolled{
box-shadow:0 1px 24px rgba(0,0,0,.07);
}

.hamburger{
display:none;
align-items:center;
justify-content:center;
background:none;
border:none;
cursor:pointer;
font-size:1.4rem;
color:var(--navy);
padding:8px;
line-height:1;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

/* Logo — serif presence, controlled size */
.logo{
display:flex;
align-items:center;
text-decoration:none;
flex-shrink:0;
}

.logo-img{
height:48px;
width:auto;
display:block;
/* Transparent PNG — works on cream/white nav */
}

.nav-links{
display:flex;
align-items:center;
gap:2.2rem;
}

.nav-links a{
position:relative;
font-size:.8125rem;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--text-secondary);
transition:color var(--ease-fast);
}

.nav-links a:hover{
color:var(--navy);
}

.nav-links a::after{
content:'';
position:absolute;
left:0;bottom:-4px;
width:0;height:1px;
background:var(--gold);
transition:width var(--ease);
}

.nav-links a:hover::after,
.active-link::after{
width:100%;
}

.active-link{
color:var(--navy) !important;
}

/* ==================================================
   NAV WHATSAPP CTA
================================================== */

.nav-cta-wa{
display:inline-flex;
align-items:center;
gap:7px;
padding:9px 18px;
background:#25D366;
color:white;
border-radius:999px;
font-size:.78rem;
font-weight:500;
letter-spacing:.04em;
transition:var(--ease-fast);
}

.nav-cta-wa:hover{
background:#1dba58;
transform:translateY(-1px);
}

.nav-cta-wa svg{
flex-shrink:0;
}

/* ==================================================
   BUTTONS
   Primary: gold. Secondary: ghost. Both restrained.
================================================== */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:13px 30px;
border-radius:999px;
font-size:.825rem;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
transition:var(--ease);
cursor:pointer;
}

.btn-primary{
background:var(--gold);
color:white;
}

.btn-primary:hover{
background:#B8821F;
transform:translateY(-1px);
box-shadow:0 6px 24px rgba(200,146,42,.3);
}

.btn-secondary{
background:transparent;
color:var(--navy);
border:1px solid var(--border-mid);
}

.btn-secondary:hover{
background:var(--navy);
color:white;
border-color:var(--navy);
}

/* ==================================================
   HERO
   The opening statement. Text leads, image confirms.
================================================== */

.hero{
min-height:90vh;
display:flex;
align-items:center;
background:linear-gradient(160deg,var(--warm-white) 0%,var(--cream) 100%);
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:5rem;
align-items:center;
}

/* Eyebrow already defined in style.css */

.hero-tag{
display:inline-block;
padding:7px 16px;
background:var(--gold-muted);
color:var(--gold);
border-radius:999px;
font-size:.72rem;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:1.4rem;
}

.hero h1{
margin-bottom:1.25rem;
}

.hero h1 em{
font-style:italic;
color:var(--gold);
font-weight:400;
}

.hero > .container > div > p{
font-size:1rem;
max-width:480px;
margin-bottom:2.25rem;
line-height:1.9;
color:var(--text-tertiary);
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:center;
}

.hero-image{
position:relative;
}

.hero-image::before{
display:none;
}

.hero-image img{
position:relative;
z-index:1;
border-radius:var(--radius-xl);
box-shadow:var(--shadow-lg);
width:100%;
}

/* ==================================================
   TRUST RIBBON
   Hairline borders, small caps. Quiet authority.
================================================== */

.trust-ribbon{
background:white;
padding:22px 0;
border-top:1px solid var(--border-faint);
border-bottom:1px solid var(--border-faint);
}

.ribbon-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}

.ribbon-item{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-size:.72rem;
font-weight:500;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--text-tertiary);
}

.ribbon-item::before{
content:'—';
color:var(--gold);
font-weight:300;
}

/* ==================================================
   STATISTICS
   Numbers are a flex of credibility, not a boast.
   Keep them measured.
================================================== */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--border-faint);
border:1px solid var(--border-faint);
border-radius:var(--radius-lg);
overflow:hidden;
}

.stat{
background:white;
padding:36px 28px;
text-align:center;
}

.stat-number{
font-family:'Cormorant Garamond',serif;
font-size:2.6rem;
font-weight:500;
line-height:1;
color:var(--navy);
margin-bottom:8px;
letter-spacing:-.02em;
}

.stat-label{
font-size:.72rem;
font-weight:500;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--text-tertiary);
}

/* ==================================================
   PREMIUM CARDS
   White surface, hairline border, barely-there shadow.
   Hover lifts 4px — subtle, purposeful.
================================================== */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.card{
background:white;
padding:32px 30px;
border-radius:var(--radius-lg);
border:1px solid var(--border-faint);
box-shadow:var(--shadow-xs);
transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}

.card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
border-color:var(--border-light);
}

.card h3{
margin-bottom:10px;
font-size:1.25rem;
}

/* Gold top-border accent on hover */
.card::before{
content:'';
display:block;
width:32px;
height:1px;
background:var(--gold);
margin-bottom:20px;
transition:width var(--ease);
}

.card:hover::before{
width:56px;
}

.card-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:var(--gold-muted);
border-radius:50%;
margin-bottom:18px;
font-size:1.1rem;
color:var(--gold);
}

/* ==================================================
   FEATURE SECTIONS (homepage fleet preview)
================================================== */

.feature{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
margin-bottom:90px;
}

.feature:last-child{
margin-bottom:0;
}

.feature img{
border-radius:var(--radius-xl);
box-shadow:var(--shadow-md);
width:100%;
}

.feature-content h2{
margin-bottom:14px;
}

.feature-content p{
margin-bottom:22px;
}

/* ==================================================
   FLEET CARDS
================================================== */

.fleet-card{
background:white;
border-radius:var(--radius-xl);
overflow:hidden;
border:1px solid var(--border-faint);
box-shadow:var(--shadow-xs);
transition:transform var(--ease),box-shadow var(--ease);
}

.fleet-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}

.fleet-card img{
height:240px;
width:100%;
object-fit:cover;
}

.fleet-content{
padding:28px;
}

.fleet-meta{
display:flex;
gap:10px;
margin-top:14px;
flex-wrap:wrap;
}

.fleet-badge{
padding:6px 14px;
background:var(--soft-grey);
border-radius:999px;
font-size:.78rem;
font-weight:500;
color:var(--text-secondary);
}

/* ==================================================
   CONTACT PAGE
================================================== */

.contact-layout{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:40px;
}

.contact-info{
background:var(--navy);
padding:44px;
border-radius:var(--radius-xl);
color:white;
}

.contact-info h2{
color:white;
margin-bottom:16px;
}

.contact-info p{
color:rgba(255,255,255,.7);
font-size:.9rem;
}

.contact-block{
margin-top:26px;
}

.contact-block h4{
color:var(--gold-light);
margin-bottom:6px;
font-size:.9rem;
letter-spacing:.04em;
}

.contact-block p{
color:rgba(255,255,255,.75);
font-size:.9rem;
}

.contact-form{
background:white;
padding:44px;
border-radius:var(--radius-xl);
border:1px solid var(--border-faint);
box-shadow:var(--shadow-sm);
}

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:14px 16px;
border:1px solid var(--border-light);
border-radius:var(--radius-md);
margin-bottom:14px;
font-family:inherit;
font-size:.9rem;
color:var(--text-primary);
background:var(--warm-white);
transition:border-color var(--ease-fast),box-shadow var(--ease-fast);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(200,146,42,.1);
}

/* ==================================================
   CTA SECTION
   Navy block with restrained gold accent.
================================================== */

.cta-section{
background:var(--navy);
color:white;
border-radius:var(--radius-xl);
padding:64px;
text-align:center;
position:relative;
overflow:hidden;
}

/* Subtle gold corner accent */
.cta-section::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.cta-section h2{
color:white;
margin-bottom:14px;
}

.cta-section p{
color:rgba(255,255,255,.65);
margin-bottom:28px;
max-width:500px;
margin-left:auto;
margin-right:auto;
font-size:.9375rem;
}

/* ==================================================
   FOOTER
   Navy, minimal, links in small caps.
================================================== */

footer{
background:var(--navy-dark);
padding:80px 0 60px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:44px;
}

.footer-brand h3{
color:white;
margin-bottom:14px;
font-size:1.3rem;
letter-spacing:.04em;
}

.footer-brand p{
color:rgba(255,255,255,.5);
font-size:.875rem;
line-height:1.7;
}

.footer-divider{
border:none;
border-top:1px solid rgba(255,255,255,.08);
margin-top:52px;
padding-top:24px;
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:52px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.08);
}

.footer-bottom p{
font-size:.78rem;
color:rgba(255,255,255,.35);
}

.footer-column h4{
color:rgba(255,255,255,.4);
margin-bottom:16px;
font-family:'Inter',sans-serif;
font-size:.68rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
}

.footer-column a,
.footer-column p{
display:block;
margin-bottom:10px;
color:rgba(255,255,255,.6);
font-size:.875rem;
transition:color var(--ease-fast);
}

.footer-column a:hover{
color:var(--gold-light);
}



/* ==================================================
   DIVIDER — thin gold line between sections
================================================== */

.section-divider{
width:60px;
height:1px;
background:var(--gold-rule);
margin:0 auto 52px;
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:900px){

.hero-grid,
.feature,
.contact-layout{
grid-template-columns:1fr;
}

.hero-grid{
gap:3rem;
}

.hero-image::before{
display:none;
}

.ribbon-grid,
.stats{
grid-template-columns:1fr 1fr;
}

.stats{
gap:1px;
}

.footer-grid{
grid-template-columns:1fr 1fr;
gap:32px;
}

.footer-bottom{
flex-direction:column;
gap:8px;
text-align:center;
}

.nav-links{
display:none;
}

.hamburger{
display:flex;
}

.nav-cta-wa{
display:none;
}

.nav-links.nav-open{
display:flex;
flex-direction:column;
gap:0;
position:absolute;
top:100%;
left:0;
width:100%;
background:rgba(252,252,250,.98);
backdrop-filter:blur(24px);
padding:16px 0 24px;
border-bottom:1px solid var(--border-faint);
box-shadow:0 16px 40px rgba(0,0,0,.07);
z-index:999;
}

.nav-links.nav-open a{
padding:13px 24px;
border-radius:0;
font-size:.8125rem;
}

.hero{
padding:60px 0;
min-height:auto;
}

.cta-section{
padding:44px 28px;
}

.active-link{
color:var(--navy) !important;
}

.active-link::after{
width:100% !important;
}

}

@media(max-width:768px){

.ribbon-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}

.footer-grid{
grid-template-columns:1fr;
}

}

/* ==================================================
   RESPONSIVE — TABLET (481–768px)
   Two-column grids where they make sense.
   Nav stays hamburger. Stats 2-col.
================================================== */

@media(min-width:481px) and (max-width:768px){

.stats{
grid-template-columns:repeat(2,1fr);
}

.ribbon-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.cards{
grid-template-columns:repeat(2,1fr);
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* ==================================================
   RESPONSIVE — SMALL PHONE (≤480px)
================================================== */

@media(max-width:480px){

.logo-img{
height:38px;
}

.nav-container{
padding:14px 0;
}

.stat-number{
font-size:2rem;
}

.stat{
padding:24px 16px;
}

.stats{
grid-template-columns:repeat(2,1fr);
}

.ribbon-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.btn{
padding:12px 22px;
font-size:.78rem;
}

.hero-actions{
flex-direction:column;
align-items:flex-start;
}

.cta-section{
padding:36px 20px;
}

.contact-info{
padding:28px 24px;
}

.contact-form{
padding:28px 20px;
}

.footer-grid{
grid-template-columns:1fr;
}

.footer-brand{
margin-bottom:8px;
}

}


/* ==================================================
   FOOTER LOGO (on dark navy bg)
================================================== */

.footer-logo-img{
height:44px;
width:auto;
display:block;
/* Invert dark text to white for navy background */
filter:brightness(0) invert(1);
opacity:0.85;
}