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

:root {
    --primary-green: #7a8471;
    --secondary-green: #6b7560;
    --tertiary-green: #5a6450;
    --text-white: #ffffff;
    --text-cream: #f5f3f0;
    --button-cream: #e8e4dc;
    --text-dark: #2c2c2c;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: rgb(250, 239, 224);
    background-color: var(--primary-green);
}

html, body { margin: 0; overflow-x: hidden; }

h1, h2 { font-family: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-style: normal; color: rgb(250, 239, 224); font-kerning: none; text-decoration: none; line-height: 0.95; letter-spacing: -0.075em; }


/* Header */
header { position: fixed; top: 0; width: 100%; z-index: 1000; background: rgba(122, 132, 113, 0.95); backdrop-filter: blur(10px); padding: 1rem 0; }
nav { display: flex; justify-content: flex-end; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 3rem; }
.nav-links { display: flex; list-style: none; gap: 3rem; }
.nav-links a { color: var(--text-white); text-decoration: none; font-weight: 500; font-size: 1rem; letter-spacing: 0.5px; transition: opacity 0.3s ease; }
.nav-links a:hover { opacity: 0.7; }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 0; background: var(--primary-green); width: 100%; }
.hero-content { max-width: none; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; align-items: center; width: 100%; }
.hero-text h1 { font-size: clamp(32px, 8vw, 80px); margin-bottom: 2rem; line-height: 1.1; }
.hero-text p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 0.8rem; opacity: 0.9; }
.hero-text .tagline { font-size: 1.2rem; margin-top: 2rem; margin-bottom: 3rem; opacity: 0.8; }
.cta-button { display: inline-block; border: 2px solid var(--text-white); color: var(--text-white); padding: 1rem 2.5rem; text-decoration: none; font-weight: 500; letter-spacing: 1px; transition: all 0.3s ease; background: transparent; }
.cta-button:hover { background: var(--text-white); color: var(--primary-green); }
.hero-image { height: 60vh; background-image: url('../img/sagebirmingham.svg'); background-size: cover; background-position: center; border-radius: 0; width: 100%; }

/* About */
.about { min-height: 100vh; display: flex; align-items: center; padding: 4rem 3rem; background: var(--secondary-green); }
.about-content { max-width: 1400px; margin: 0 auto; width: 100%; }
.about h2 { font-size: 4rem; line-height: 1.2; margin-bottom: 3rem; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 4rem; }
.about-image { height: 60vh; width: 100%; background-image: url('../img/sagetramstop.webp'); background-size: cover; background-position: center 25%; border-radius: 0; }
.about-text { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
.about-text p { font-weight: 600; font-style: normal; color: rgb(250, 239, 224); font-kerning: none; text-decoration: none; }
.about-button { display: inline-block; border: 2px solid rgb(250, 239, 224); color: rgb(250, 239, 224); padding: 1rem 2.5rem; text-decoration: none; font-weight: 500; letter-spacing: 1px; transition: all 0.3s ease; background: transparent; margin-top: 2rem; }
.about-button:hover { background: rgb(250, 239, 224); color: var(--primary-green); }

/* Vision */
.vision { min-height: 100vh; display: flex; align-items: center; padding: 4rem 0; background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; }
.vision::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); }
.vision-content { max-width: 1000px; margin: 0 auto; text-align: center; padding: 0 3rem; position: relative; z-index: 1; }
.vision h2 { font-size: 4rem; margin-bottom: 3rem; }
.vision p { font-size: 1.2rem; line-height: 1.6; opacity: 0.9; }

/* Services */
.services { padding: 6rem 3rem; background: var(--primary-green); }
.services-content { max-width: 1400px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; }
.service-card { border: 3px solid rgb(250, 239, 224); padding: 3rem; background: transparent; transition: all 0.3s ease; }
.service-card:hover { background: rgba(255, 255, 255, 0.05); }
.service-card h3 { font-size: 1.8rem; font-weight: 500; margin-bottom: 2rem; color: rgb(250, 239, 224); border-bottom: 2px solid rgb(250, 239, 224); padding-bottom: 1rem; }
.service-card p { font-size: 1rem; line-height: 1.6; opacity: 0.9; margin-bottom: 1.5rem; }
.pricing-button { display: block; background: var(--button-cream); color: var(--text-dark); padding: 1.2rem 3rem; text-decoration: none; font-weight: 600; letter-spacing: 1px; text-align: center; border-radius: 50px; transition: all 0.3s ease; margin: 0 auto; max-width: 300px; width: fit-content; }

/* Desktop centering for pricing button */
@media (min-width: 969px) {
    .services-content {  text-align: center; }
    .pricing-button { margin-left: auto; margin-right: auto; display: block; }
}
.pricing-button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); }

/* Contact */
.contact { padding: 6rem 3rem; background: var(--tertiary-green); }
.contact-content { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.contact-info .logo { display: flex; align-items: center; margin-bottom: 3rem; }
.logo-icon { width: 400px; height: 400px; background-image: url('../img/sagestudios.png'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 1rem; }
.logo-text { font-size: 2rem; font-weight: 500; color: var(--text-white); }
.contact-info h2 { font-size: 3rem; font-weight: 300; margin-bottom: 2rem; color: var(--text-cream); }
.contact-details { margin-bottom: 3rem; }
.contact-details p { font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 400; font-style: normal; color: rgb(250, 239, 224); font-kerning: none; text-decoration: none; }
.enquiry-button { display: inline-block; background: rgba(122, 132, 113, 0.8); color: var(--text-white); padding: 1rem 2.5rem; text-decoration: none; font-weight: 500; letter-spacing: 1px; border-radius: 50px; transition: all 0.3s ease; margin-bottom: 4rem; }
.enquiry-button:hover { background: rgba(122, 132, 113, 1); }
.socials { margin-top: 2rem; padding: 1.5rem; background: rgba(122, 132, 113, 0.3); border-radius: 12px; text-align: center; }
.socials h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 1rem; color: rgb(250, 239, 224); }
.social-link { display: flex; align-items: center; justify-content: center; color: rgb(250, 239, 224); text-decoration: none; font-size: 1.1rem; font-weight: 400; }
.social-icon { width: 30px; height: 30px; margin-right: 1rem; background: rgb(250, 239, 224); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.phone-mockup { background-image: url('https://images.unsplash.com/photo-1556656793-08538906a9f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80'); background-size: cover; background-position: center; height: 500px; border-radius: 0; position: relative; overflow: hidden; }
.portfolio-button { position: absolute; top: 2rem; right: 2rem; background: rgba(122, 132, 113, 0.9); color: var(--text-white); padding: 0.8rem 1.5rem; text-decoration: none; font-weight: 500; border-radius: 25px; font-size: 0.9rem; letter-spacing: 0.5px; }

/* Mobile */
@media (max-width: 968px) {
    .nav-links { display: flex; }
    .hero-content, .about-grid, .contact-content { grid-template-columns: 1fr; gap: 2rem; }
    .hero-text { text-align: center; padding: 2rem; }
    .services-grid { grid-template-columns: 1fr; }
    .about h2, .vision h2 { font-size: 3rem; }
    nav { padding: 0 2rem; }
    .about, .services, .contact { padding-left: 2rem; padding-right: 2rem; }
    .about-grid { justify-items: center; }
    .about-text { max-width: 36ch; text-align: center; margin: 0 auto; }
    .about-text p { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; overflow-wrap: break-word; word-break: normal; hyphens: none; }
    .about-button { display: block; margin-left: auto; margin-right: auto; text-align: center; }
    .enquiry-button { display: inline-block; margin-left: auto; margin-right: auto; }
    .contact-info { text-align: center; }
    .contact-info .logo { justify-content: center; }
    .logo-icon { width: 200px; height: 200px; }
    .pricing-button { margin-left: auto; margin-right: auto; }
    .vision { background-attachment: scroll; }
}

@media (max-width: 640px) {
    .about h2, .vision h2 { font-size: 2.5rem; }
    .about-text { max-width: 34ch; text-align: center; }
    .about-grid { justify-items: center; }
    .about-button { display: block; margin-left: auto; margin-right: auto; text-align: center; }
    .enquiry-button { margin-left: auto; margin-right: auto; }
    .contact-info { text-align: center; }
    .contact-info .logo { justify-content: center; }
    .pricing-button { margin-left: auto; margin-right: auto; }
    .about-text p { font-size: 1.2rem; overflow-wrap: break-word; word-break: normal; hyphens: none; }
    .contact-info h2 { font-size: 2.5rem; }
    .vision { background-attachment: scroll; }
}

/* Animations */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }