/*
Theme Name: Suburban India Holidays – Fleet Services
Theme URI: https://suburbanholidays.in/
Author: Suburban India Holidays
Description: Custom WordPress theme based on the approved Replit Fleet Services design. Built for chauffeur-driven mobility, fleet services and corporate mobility.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: suburban-fleet
*/

:root{
--bg:#f7f4ed;
--fg:#2a241f;
--border:#ddd5c8;
--card:#fbfaf7;
--muted:#6f6a63;
--gold:#d49a2f;
--gold-dark:#b87917;
--dark:#251f1a;
--dark2:#302920;
--light:#f7f4ed;
--serif:'Manrope',Arial,sans-serif;
--sans:'DM Sans',Arial,sans-serif;
--mono:'Space Mono',monospace
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:var(--bg);
color:var(--fg);
font-family:var(--sans);
font-size:16px;
line-height:1.6
}

a{
color:inherit;
text-decoration:none
}

img{
max-width:100%;
height:auto
}

button,input,select,textarea{
font:inherit
}

button{
cursor:pointer
}

.wrap{
width:min(1440px,calc(100% - 40px));
margin:auto
}

.eyebrow{
font-family:var(--mono);
font-size:.8rem;
line-height:1.5;
letter-spacing:.12em;
text-transform:uppercase
}

.display{
font-family:var(--serif);
font-weight:800;
letter-spacing:-.055em
}

.gold{
color:var(--gold)
}

.dark{
background:var(--dark);
color:var(--light)
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:14px 20px;
background:var(--gold);
color:#241c13;
font-size:.85rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
transition:.2s
}

.btn:hover{
transform:translateY(-2px);
background:#e0a63a
}

.btn.outline{
background:transparent;
color:inherit;
border:1px solid currentColor
}

.btn.outline:hover{
background:rgba(255,255,255,.08)
}

.site-header{
position:absolute;
z-index:30;
inset:0 0 auto;
color:var(--light)
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:22px 0
}

.brand{
display:flex;
align-items:center;
gap:12px
}

.brand img{
width:42px;
height:50px;
object-fit:contain
}

.brand-copy{
border-left:1px solid rgba(255,255,255,.3);
padding-left:12px
}

.brand-name{
font-family:var(--serif);
font-size:18px;
font-weight:800;
line-height:1.05
}

.brand-sub{
font-family:var(--mono);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
opacity:.76;
margin-top:4px
}

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

.main-nav a{
font-size:15px;
font-weight:700
}

.main-nav a:hover,
.main-nav .current{
color:var(--gold)
}

.header-actions{
display:flex;
gap:18px;
align-items:center
}

.mobile-toggle{
display:none;
background:none;
border:0;
color:inherit;
font-size:25px
}

.hero{
position:relative;
min-height:850px;
display:flex;
align-items:flex-end;
overflow:hidden;
background:var(--dark);
color:var(--light);
padding:150px 0 70px
}

/* HERO IMAGE VISIBILITY – FINAL APPROVED BALANCE */
.hero-media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.78
}

.hero:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(25,20,15,.78),
rgba(25,20,15,.48) 42%,
rgba(25,20,15,.08)
),
linear-gradient(
0deg,
rgba(25,20,15,.78),
transparent 65%
)
}

.hero-content,
.hero-strip{
position:relative;
z-index:1
}

.hero-content{
max-width:900px
}

.hero h1{
font-size:clamp(58px,8vw,120px);
line-height:.95;
margin:28px 0 0
}

.hero-copy{
max-width:680px;
font-size:20px;
line-height:1.8;
margin:30px 0 0;
color:rgba(247,244,237,.9)
}

.hero-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:38px
}

.hero-strip{
margin-top:100px;
border-top:1px solid rgba(255,255,255,.25);
padding-top:22px;
display:flex;
flex-wrap:wrap;
gap:35px
}

.hero-strip span{
font-family:var(--mono);
font-size:11px;
text-transform:uppercase;
letter-spacing:.15em;
opacity:.82
}

.section{
padding:110px 0
}

.section.alt{
background:#ebe5db
}

.grid{
display:grid;
gap:24px
}

.fleet-cats{
grid-template-columns:repeat(3,1fr)
}

.fleet-card{
background:var(--card);
border:1px solid var(--border);
display:flex;
flex-direction:column
}

.fleet-card img{
width:100%;
aspect-ratio:1.35;
object-fit:cover
}

.fleet-card-body{
padding:22px
}

.fleet-card h3{
font-family:var(--serif);
font-size:22px;
margin:8px 0 0;
letter-spacing:-.04em
}

.fleet-card p{
font-size:18px;
color:var(--muted);
line-height:1.55;
margin:10px 0 0
}

.category-tag{
font-family:var(--mono);
font-size:10px;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--gold-dark)
}

.private-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:80px;
align-items:center
}

.private-grid .image{
aspect-ratio:1/1;
overflow:hidden
}

.private-grid .image img{
width:100%;
height:100%;
object-fit:cover
}

.private-copy h2,
.section-title{
font-family:var(--serif);
font-weight:800;
line-height:1.05;
letter-spacing:-.045em;
font-size:clamp(42px,5vw,70px);
margin:0
}

.body-lg{
font-size:18px;
line-height:1.8;
color:var(--muted)
}

.checks{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px 30px;
margin:35px 0
}

.check{
display:flex;
gap:10px;
align-items:center;
font-size:18px;
font-weight:600
}

.check:before{
content:"✓";
color:var(--gold);
font-weight:900
}

.corp{
background:#e8e1d7
}

.corp-grid{
display:grid;
grid-template-columns:1fr 1.5fr;
gap:90px;
align-items:center
}

.icons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px
}

.icon-item{
text-align:center;
font-size:17px;
font-weight:800;
line-height:1.25
}

.icon-circle{
width:64px;
height:64px;
margin:0 auto 16px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--bg);
color:var(--gold);
font-size:25px
}

.management{
margin-top:80px;
border-top:1px solid rgba(42,36,31,.18);
padding-top:50px
}

.steps{
display:grid;
grid-template-columns:repeat(5,1fr);
border-top:1px solid rgba(42,36,31,.18);
border-bottom:1px solid rgba(42,36,31,.18);
margin-top:35px
}

.step{
padding:22px 20px;
border-right:1px solid rgba(42,36,31,.18)
}

.step:last-child{
border-right:0
}

.step small{
font-family:var(--mono);
color:var(--gold-dark)
}

.step strong{
display:block;
font-family:var(--serif);
font-size:18px;
margin-top:10px
}

.cta{
padding:100px 0;
background:var(--dark);
color:var(--light)
}

.cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px
}

.cta h2{
font-size:clamp(40px,5vw,68px);
max-width:850px;
margin:0
}

.page-hero{
padding:180px 0 105px;
background:var(--dark);
color:var(--light)
}

.page-hero h1{
font-size:clamp(52px,8vw,115px);
line-height:.94;
max-width:1000px;
margin:25px 0 0
}

.page-hero p{
max-width:680px;
font-size:18px;
line-height:1.8;
color:rgba(247,244,237,.84);
margin:30px 0 0
}

.filterbar{
display:flex;
gap:8px;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--border);
padding-bottom:28px
}

.filters{
display:flex;
gap:5px;
overflow:auto
}

.filter{
border:0;
background:none;
padding:8px 12px;
font-weight:700;
font-size:13px;
white-space:nowrap
}

.filter.active{
background:var(--dark);
color:var(--light)
}

.search{
border:0;
border-bottom:1px solid var(--border);
background:transparent;
padding:8px;
width:280px;
outline:0
}

.vehicle-grid{
grid-template-columns:repeat(3,1fr);
margin-top:32px
}

.vehicle-image{
position:relative
}

.vehicle-image img{
width:100%;
aspect-ratio:1.35;
object-fit:cover
}

.vehicle-image .tag{
position:absolute;
left:14px;
top:14px;
background:var(--dark);
padding:7px 10px;
color:var(--gold);
font-family:var(--mono);
font-size:9px;
text-transform:uppercase
}

.vehicle-body{
border:1px solid var(--border);
border-top:0;
padding:20px
}

.vehicle-body h3{
font-family:var(--serif);
font-size:26px;
margin:8px 0
}

.vehicle-body p{
color:var(--muted);
margin:0;
font-size:18px
}

.detail-grid{
display:grid;
grid-template-columns:1.5fr 1fr;
gap:45px
}

.detail-image img{
width:100%;
aspect-ratio:1.4;
object-fit:cover
}

.detail-side{
border-top:1px solid var(--border);
padding-top:25px
}

.detail-side ul{
list-style:none;
padding:0
}

.detail-side li{
padding:11px 0;
font-weight:700
}

.form-layout{
display:grid;
grid-template-columns:.8fr 1.35fr;
gap:80px
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
border-top:1px solid var(--border);
padding-top:25px
}

.field{
display:block
}

.field.full{
grid-column:1/-1
}

.field label{
display:block;
font-weight:800;
font-size:14px;
margin-bottom:7px
}

.field input,
.field select,
.field textarea{
width:100%;
border:1px solid #cfc6b8;
background:var(--card);
padding:12px 14px;
outline:none
}

.field input:focus,
.field select:focus,
.field textarea:focus{
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(212,154,47,.12)
}

.error{
color:#9d2e25;
font-size:13px;
margin-top:5px
}

.notice{
padding:12px 15px;
border-left:2px solid var(--gold);
background:rgba(212,154,47,.08);
margin-bottom:25px
}

.site-footer{
background:var(--dark);
color:var(--light)
}

.footer-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1fr;
gap:45px;
padding:75px 0
}

.footer-grid p{
color:rgba(247,244,237,.78);
font-size:18px;
line-height:1.8
}

.footer-links{
display:flex;
flex-direction:column;
gap:9px;
font-size:18px;
color:rgba(247,244,237,.84)
}

.footer-links a:hover{
color:var(--gold)
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
padding:18px 0;
color:rgba(247,244,237,.45);
font-family:var(--mono);
font-size:10px;
display:flex;
justify-content:space-between;
gap:20px
}

.admin-edit{
position:fixed;
right:15px;
bottom:15px;
z-index:99;
background:var(--dark);
color:#fff;
padding:8px 12px;
font-size:12px;
border-radius:3px
}

@media(max-width:1000px){

.main-nav,
.header-actions{
display:none
}

.mobile-toggle{
display:block
}

.fleet-cats,
.vehicle-grid{
grid-template-columns:1fr 1fr
}

.private-grid,
.corp-grid,
.detail-grid,
.form-layout{
grid-template-columns:1fr;
gap:45px
}

.icons{
grid-template-columns:1fr 1fr
}

.steps{
grid-template-columns:1fr
}

.step{
border-right:0;
border-bottom:1px solid rgba(42,36,31,.18)
}

.step:last-child{
border-bottom:0
}

.cta-inner{
flex-direction:column;
align-items:flex-start
}

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

}

@media(max-width:700px){

body{
font-size:16px
}

.wrap{
width:min(100% - 30px,1440px)
}

.brand img{
width:36px;
height:44px
}

.brand-name{
font-size:16px
}

.brand-sub{
display:none
}

.hero{
min-height:760px;
padding:125px 0 40px
}

.hero h1{
font-size:58px
}

.hero-copy{
font-size:16px;
line-height:1.65
}

.hero-strip{
margin-top:65px;
gap:15px 24px
}

.hero-strip span{
font-size:9px
}

.section{
padding:75px 0
}

.fleet-cats,
.vehicle-grid,
.icons,
.checks,
.footer-grid,
.form-grid{
grid-template-columns:1fr
}

.private-grid,
.corp-grid,
.detail-grid,
.form-layout{
gap:35px
}

.private-copy h2,
.section-title{
font-size:42px
}

.body-lg{
font-size:16px
}

.page-hero{
padding:145px 0 75px
}

.page-hero h1{
font-size:55px
}

.page-hero p{
font-size:16px
}

.filterbar{
display:block
}

.search{
width:100%;
margin-top:15px
}

.footer-bottom{
display:block
}

.footer-bottom span{
display:block;
margin-top:5px
}

}

#fleet{
scroll-margin-top:90px
}