/* Saira's Driving School — shared stylesheet */

@font-face{
font-family:'Inter';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('/assets/fonts/inter-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*{margin:0;padding:0;box-sizing:border-box;}

:root{
--primary:#16a34a;
--primary-dark:#15803d;
--primary-light:#4ade80;
--dark:#0f172a;
--darker:#020617;
--light:#f8fafc;
--text:#1e293b;
--muted:#64748b;
--border:#e5e7eb;
--maxw:1250px;
}

html{scroll-behavior:smooth;}

body{
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
background:white;
color:var(--text);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}

a{color:var(--primary-dark);}

:focus-visible{
outline:3px solid var(--primary);
outline-offset:3px;
border-radius:4px;
}

.skip-link{
position:absolute;
left:-9999px;
top:0;
background:var(--dark);
color:white;
padding:14px 22px;
z-index:2000;
border-radius:0 0 12px 0;
font-weight:700;
text-decoration:none;
}

.skip-link:focus{left:0;}

/* ---------- Header ---------- */

header{
position:fixed;
top:0;
width:100%;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
z-index:999;
}

.nav{
max-width:var(--maxw);
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:16px 24px;
}

.logo{
font-size:24px;
font-weight:800;
color:var(--dark);
text-decoration:none;
line-height:1.2;
white-space:nowrap;
}

.logo span{color:var(--primary);}

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

.nav-links a{
text-decoration:none;
color:var(--dark);
font-weight:600;
font-size:16px;
}

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

.nav-links a[aria-current="page"]{
color:var(--primary);
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:5px;
}

.nav-call{
background:var(--primary);
color:white!important;
padding:11px 20px;
border-radius:999px;
font-weight:700;
}

.nav-call:hover{background:var(--primary-dark);color:white!important;}

.nav-toggle{
display:none;
background:white;
border:1px solid var(--border);
border-radius:12px;
width:46px;
height:46px;
cursor:pointer;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
flex:0 0 auto;
}

.nav-toggle span{
display:block;
width:20px;
height:2px;
background:var(--dark);
border-radius:2px;
transition:transform 0.25s,opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */

.hero{
position:relative;
min-height:92vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:150px 20px 90px;
color:white;
overflow:hidden;
background:var(--dark);
}

.hero.hero-compact{min-height:auto;padding:150px 20px 70px;}

.hero-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(rgba(2,6,23,0.62),rgba(2,6,23,0.68));
z-index:1;
}

.hero-content{position:relative;z-index:2;max-width:900px;}

.hero h1{
font-size:clamp(34px,6vw,68px);
line-height:1.06;
margin-bottom:22px;
letter-spacing:-0.02em;
}

.hero p.hero-sub{
font-size:clamp(17px,2.2vw,22px);
margin-bottom:16px;
}

.hero-usps{
list-style:none;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px 20px;
margin-bottom:30px;
font-weight:600;
font-size:15px;
}

.hero-usps li{
background:rgba(255,255,255,0.12);
border-radius:999px;
padding:7px 16px;
}

/* ---------- Google rating ---------- */

.rating{
display:inline-flex;
align-items:center;
gap:9px;
text-decoration:none;
color:inherit;
font-size:15px;
line-height:1;
}

.rating-stars{
display:inline-flex;
gap:1px;
color:#fbbf24;
flex-shrink:0;
}

.rating-text{font-weight:500;}
.rating-text strong{font-weight:800;}
.rating:hover .rating-text{text-decoration:underline;}

.rating-hero{
margin-bottom:22px;
padding:9px 18px;
border-radius:999px;
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.22);
color:white;
}

.rating-lg{font-size:18px;gap:12px;}
.rating-lg .rating-stars svg{width:22px;height:22px;}

.rating-panel{
display:flex;
align-items:center;
justify-content:center;
gap:28px;
flex-wrap:wrap;
max-width:640px;
margin:0 auto 44px;
padding:26px 30px;
background:var(--light);
border:1px solid var(--border);
border-radius:16px;
}

.rating-score{
display:flex;
flex-direction:column;
align-items:center;
line-height:1;
flex-shrink:0;
}

.rating-score-value{
font-size:56px;
font-weight:800;
color:var(--dark);
letter-spacing:-0.03em;
}

.rating-score-out{
margin-top:6px;
font-size:13px;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--muted);
}

.rating-panel-body{flex:1 1 300px;min-width:0;}
.rating-panel-body p{margin-top:10px;color:#475569;font-size:15px;}

@media(max-width:560px){
.rating-panel{gap:16px;padding:22px;text-align:center;}
.rating-panel-body{flex-basis:100%;}
.rating-lg{justify-content:center;}
}

/* ---------- Buttons ---------- */

.buttons{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}

.btn{
display:inline-block;
padding:17px 30px;
border-radius:999px;
text-decoration:none;
font-weight:700;
font-size:17px;
transition:transform 0.2s,background 0.2s;
border:none;
cursor:pointer;
font-family:inherit;
}

.btn-primary{background:var(--primary);color:white;}
.btn-primary:hover{background:var(--primary-dark);color:white;}
.btn-secondary{background:white;color:var(--dark);}
.btn-secondary:hover{background:var(--light);color:var(--dark);}
.btn-outline{background:transparent;color:white;border:2px solid rgba(255,255,255,0.6);}
.btn-outline:hover{background:rgba(255,255,255,0.12);color:white;}
.btn:hover{transform:translateY(-3px);}

/* ---------- Layout ---------- */

.section{
max-width:var(--maxw);
margin:auto;
padding:90px 20px;
}

.section-tight{padding:60px 20px;}
.section-alt{background:var(--light);max-width:none;}
.section-alt > .inner{max-width:var(--maxw);margin:auto;}

.section-title{text-align:center;margin-bottom:50px;}
.section-title h2{font-size:clamp(28px,4.2vw,48px);margin-bottom:14px;letter-spacing:-0.02em;}
.section-title p{color:var(--muted);font-size:18px;max-width:680px;margin:auto;}

.prose{max-width:760px;}
.prose h2{font-size:clamp(26px,3.4vw,36px);margin:44px 0 16px;letter-spacing:-0.01em;}
.prose h3{font-size:22px;margin:30px 0 10px;}
.prose p{margin-bottom:16px;}
.prose ul{margin:0 0 20px 22px;}
.prose li{margin-bottom:9px;}
.prose > *:first-child{margin-top:0;}

.breadcrumbs{
max-width:var(--maxw);
margin:auto;
padding:22px 20px 0;
font-size:15px;
color:var(--muted);
}

.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.breadcrumbs li::after{content:"›";margin-left:8px;color:#cbd5e1;}
.breadcrumbs li:last-child::after{content:"";}
.breadcrumbs a{color:var(--muted);}

/* ---------- Cards ---------- */

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

.cards-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

.card{
background:var(--light);
padding:34px;
border-radius:24px;
transition:transform 0.25s,box-shadow 0.25s;
}

.card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(0,0,0,0.08);}
.card h3{margin-bottom:12px;font-size:24px;}
.card p{color:#475569;}
.card p + p{margin-top:10px;}

.card-link{
display:inline-block;
margin-top:14px;
font-weight:700;
color:var(--primary-dark);
text-decoration:none;
}

.card-link:hover{text-decoration:underline;}
.card-link::after{content:" →";}

/* ---------- Instructors ---------- */

.instructor{
background:var(--light);
border-radius:24px;
padding:34px;
display:flex;
gap:22px;
align-items:flex-start;
}

.avatar{
flex:0 0 auto;
width:78px;
height:78px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
font-weight:800;
overflow:hidden;
}

.avatar img{width:100%;height:100%;object-fit:cover;}

.instructor h3{font-size:24px;margin-bottom:4px;}
.instructor .role{color:var(--primary-dark);font-weight:700;font-size:15px;margin-bottom:12px;}
.instructor dl{margin-top:14px;font-size:15px;}
.instructor dt{font-weight:700;color:var(--dark);}
.instructor dd{margin-bottom:9px;color:#475569;}

/* ---------- Pricing ---------- */

.pricing-lead{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:22px;
margin-bottom:22px;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
}

.price-card{
background:white;
border:2px solid var(--border);
padding:36px 28px;
border-radius:24px;
text-align:center;
}

.price-card h3{font-size:20px;}

.price{
font-size:44px;
font-weight:800;
color:var(--primary);
margin:14px 0 4px;
letter-spacing:-0.02em;
}

.price-note{font-size:15px;color:var(--muted);}

.price-card.featured{background:var(--dark);border-color:var(--dark);color:white;}
.price-card.featured .price{color:var(--primary-light);}
.price-card.featured .price-note{color:#cbd5e1;}

.pricing-subhead{font-size:22px;font-weight:700;margin:46px 0 18px;}
.pricing-subhead:first-of-type{margin-top:0;}

.intensive-card{
background:linear-gradient(135deg,var(--dark),#1e3a2f);
color:white;
border-radius:24px;
padding:44px;
margin-top:22px;
}

.intensive-card h2,.intensive-card h3{letter-spacing:-0.01em;}
.intensive-card > p{margin-top:14px;max-width:680px;}

.intensive-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
margin:28px 0;
}

.intensive-price-box{
background:rgba(255,255,255,0.08);
border-radius:18px;
padding:26px;
text-align:center;
}

.intensive-price-box h3{font-size:20px;}
.intensive-price-box .price{color:var(--primary-light);margin:10px 0 4px;}
.intensive-price-box .price-note{color:#cbd5e1;}

.guarantee-list{
list-style:none;
margin:24px 0;
display:flex;
flex-direction:column;
gap:11px;
}

.guarantee-list li{padding-left:32px;position:relative;}

.guarantee-list li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:18px;
height:10px;
border-left:3px solid var(--primary-light);
border-bottom:3px solid var(--primary-light);
transform:rotate(-45deg);
}

.areas-note{
background:rgba(255,255,255,0.08);
border-radius:14px;
padding:20px 24px;
margin-top:10px;
font-size:16px;
}

.areas-note a{color:var(--primary-light);}

/* ---------- Reviews ---------- */

.review{
border-left:6px solid var(--primary);
background:white;
box-shadow:0 4px 18px rgba(0,0,0,0.05);
}

.review blockquote{font-size:17px;color:#334155;}
.review figcaption{margin-top:14px;font-size:14px;color:var(--muted);font-weight:600;}

.reviews-note{
text-align:center;
margin-top:34px;
color:var(--muted);
font-size:15px;
}

/* ---------- Area list ---------- */

.area-list{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:18px;
}

.area-list li a,.area-list li span{
display:inline-block;
background:white;
border:1px solid var(--border);
border-radius:999px;
padding:9px 18px;
font-size:15px;
font-weight:600;
text-decoration:none;
color:var(--dark);
}

.area-list li a:hover{border-color:var(--primary);color:var(--primary-dark);}

/* ---------- FAQ ---------- */

.faq{max-width:820px;margin:auto;}

.faq details{
border:1px solid var(--border);
border-radius:18px;
padding:0;
margin-bottom:12px;
background:white;
}

.faq summary{
cursor:pointer;
padding:22px 56px 22px 24px;
font-weight:700;
font-size:18px;
list-style:none;
position:relative;
}

.faq summary::-webkit-details-marker{display:none;}

.faq summary::after{
content:"+";
position:absolute;
right:24px;
top:19px;
font-size:26px;
font-weight:400;
color:var(--primary);
}

.faq details[open] summary::after{content:"−";}
.faq details[open] summary{padding-bottom:10px;}
.faq .answer{padding:0 24px 22px;color:#475569;}
.faq .answer p + p{margin-top:12px;}
.faq .answer ul{margin:12px 0 0 20px;}
.faq .answer li{margin-bottom:7px;}

/* ---------- CTA + form ---------- */

.cta{
background:var(--dark);
color:white;
padding:80px 28px;
text-align:center;
border-radius:32px;
}

.cta h2{font-size:clamp(28px,4vw,44px);margin-bottom:16px;letter-spacing:-0.02em;}
.cta > p{max-width:620px;margin:0 auto 30px;}

.form-divider{
margin:42px 0 22px;
color:#94a3b8;
font-weight:600;
}

.contact-form{
max-width:470px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:14px;
text-align:left;
}

.field label{
display:block;
font-size:14px;
font-weight:700;
margin-bottom:6px;
color:#e2e8f0;
}

.field .hint{font-weight:400;color:#94a3b8;}

.contact-form input,
.contact-form select{
width:100%;
padding:14px 18px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.22);
background:rgba(255,255,255,0.08);
color:white;
font-family:inherit;
font-size:16px;
}

.contact-form input::placeholder{color:#8fa0b8;}
.contact-form select option{color:var(--dark);}
.contact-form button{margin-top:8px;width:100%;}
.form-smallprint{font-size:13px;color:#94a3b8;margin-top:4px;text-align:center;}
.form-smallprint a{color:#cbd5e1;}
.hidden-field{position:absolute;left:-9999px;}

/* ---------- Footer ---------- */

footer{
background:var(--darker);
color:white;
padding:60px 20px 40px;
}

.footer-grid{
max-width:var(--maxw);
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:36px;
}

footer h2,footer h3{font-size:18px;margin-bottom:14px;}
footer p,footer li{color:#cbd5e1;font-size:15px;margin-bottom:7px;}
footer ul{list-style:none;}
footer a{color:#cbd5e1;text-decoration:none;}
footer a:hover{color:white;text-decoration:underline;}

.footer-bottom{
max-width:var(--maxw);
margin:40px auto 0;
padding-top:24px;
border-top:1px solid rgba(255,255,255,0.12);
font-size:14px;
color:#94a3b8;
}

/* ---------- Floating / sticky actions ---------- */

.whatsapp-float{
position:fixed;
bottom:22px;
right:22px;
background:var(--primary);
color:white;
padding:16px 24px;
border-radius:999px;
text-decoration:none;
font-weight:700;
box-shadow:0 10px 30px rgba(0,0,0,0.22);
z-index:900;
}

.whatsapp-float:hover{background:var(--primary-dark);color:white;}

.mobile-bar{
display:none;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:900;
background:rgba(255,255,255,0.97);
backdrop-filter:blur(12px);
border-top:1px solid var(--border);
padding:10px 12px calc(10px + env(safe-area-inset-bottom));
gap:10px;
}

.mobile-bar a{
flex:1;
text-align:center;
padding:14px 8px;
font-size:16px;
}

/* ---------- Modal ---------- */

.modal-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,0.72);
display:flex;
justify-content:center;
align-items:center;
padding:20px;
z-index:1200;
opacity:0;
visibility:hidden;
transition:opacity 0.3s;
}

.modal-overlay.open{opacity:1;visibility:visible;}

.modal{
background:white;
border-radius:26px;
max-width:480px;
width:100%;
padding:44px 36px;
position:relative;
text-align:center;
transform:translateY(18px);
transition:transform 0.3s;
}

.modal-overlay.open .modal{transform:translateY(0);}

.modal-close{
position:absolute;
top:16px;
right:16px;
background:var(--light);
border:none;
width:38px;
height:38px;
border-radius:50%;
font-size:18px;
cursor:pointer;
color:var(--dark);
line-height:1;
}

.modal h2{font-size:25px;margin-bottom:14px;letter-spacing:-0.01em;}
.modal p{margin-bottom:22px;color:#475569;}
.modal .btn{width:100%;text-align:center;}
.modal .btn + .btn{margin-top:10px;}

/* ---------- Responsive ---------- */

@media(max-width:900px){
.nav-links{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:white;
border-bottom:1px solid var(--border);
flex-direction:column;
align-items:stretch;
gap:0;
padding:8px 16px 18px;
box-shadow:0 14px 30px rgba(0,0,0,0.08);
}
.nav-links.open{display:flex;}
.nav-links a{padding:14px 8px;border-bottom:1px solid var(--border);font-size:17px;}
.nav-links a:last-child{border-bottom:none;}
.nav-call{text-align:center;margin-top:12px;border-bottom:none!important;}
.nav-toggle{display:flex;}
.logo{font-size:20px;}
}

@media(max-width:768px){
.section{padding:60px 20px;}
.intensive-card{padding:30px 22px;}
.cta{padding:56px 22px;border-radius:24px;}
.card{padding:28px;}
.instructor{flex-direction:column;gap:16px;}
.whatsapp-float{display:none;}
.mobile-bar{display:flex;}
body{padding-bottom:82px;}
.hero{min-height:auto;padding:120px 20px 60px;}
.buttons .btn{width:100%;}
}