* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Montserrat', sans-serif; line-height:1.6; color:#333;}
:root {--primary:#003087; --secondary:#f7b500;}
.container {width:90%; max-width:1200px; margin:auto;}

/* TOP BAR */
.top-bar {background:var(--primary); color:white; padding:10px 0; font-size:14px;}
.top-bar .container {display:flex; justify-content:space-between; flex-wrap:wrap;}
.top-bar a {color:var(--secondary); text-decoration:none; font-weight:600;}

/* HERO */
.hero {position:relative; background:url('a_website_homepage_screenshot_for_north_yorkshire.png') center/cover no-repeat; padding:100px 0; color:white;}
.overlay {position:absolute; inset:0; background:rgba(0,48,135,0.8);}
.hero-content {position:relative; display:flex; gap:40px; align-items:center; flex-wrap:wrap;}
.hero-text {flex:1;}
.hero-text h1 {font-size:36px; margin-bottom:10px;}
.hero-text h2 {font-size:22px; margin-bottom:15px;}
.cta-primary {display:inline-block; background:var(--secondary); color:black; padding:12px 25px; text-decoration:none; font-weight:bold; border-radius:5px; margin-top:15px;}
.cta-primary.large {font-size:20px;}

/* HERO FORM */
.hero-form {flex:1; background:white; padding:30px; border-radius:8px; color:#333; opacity:0; transform: translateY(30px); transition:1s ease-out;}
.hero-form h3 {margin-bottom:15px;}
.hero-form input, .hero-form textarea {width:100%; padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:4px;}
.hero-form button {width:100%; padding:12px; background:var(--primary); color:white; border:none; font-weight:bold; cursor:pointer; border-radius:5px;}
.success-box {background:#d4edda; padding:10px; margin-bottom:10px; border-radius:5px;}
.error-box {background:#f8d7da; padding:10px; margin-bottom:10px; border-radius:5px;}

/* SERVICES */
.services {padding:70px 0; text-align:center; opacity:0; transform:translateY(30px); transition:1s ease-out;}
.service-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:30px;}
.card {background:#f4f4f4; padding:25px; border-radius:8px; font-weight:600; transition:0.3s; cursor:pointer;}
.card:hover {background:var(--primary); color:white; transform: translateY(-5px);}
.card i {display:block; font-size:28px; margin-bottom:10px;}

/* CTA SECTION */
.cta-section {background:var(--primary); color:white; text-align:center; padding:60px 0; opacity:0; transform:translateY(30px); transition:1s ease-out;}

/* FOOTER */
footer {background:#111; color:white; text-align:center; padding:25px;}

/* FADE IN CLASSES */
.fade-in, .fade-in-delay, .fade-up {opacity:0; transform:translateY(30px);}
.appear {opacity:1; transform:translateY(0);}
.fade-in-delay {transition-delay:0.3s;}

/* MOBILE */
@media(max-width:768px){ .hero-content {flex-direction:column;} .hero-text h1{font-size:26px;} }