/* =========================================================



   ALBION LANDSCAPES LTD



   Main Stylesheet



========================================================= */







@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');











/* =========================================================



   VARIABLES



========================================================= */







:root {



    --green: #17392d;



    --green-dark: #0d241c;



    --green-deep: #081b15;



    --green-light: #244d3e;







    --gold: #b98943;



    --gold-light: #d3ae70;







    --cream: #f4f0e7;



    --cream-light: #faf8f3;







    --white: #ffffff;



    --black: #111613;







    --grey: #6f756f;



    --border: rgba(16, 39, 30, 0.14);







    --heading: "Playfair Display", Georgia, serif;



    --body: "DM Sans", Arial, sans-serif;







    --container: 1240px;







    --shadow:



        0 20px 60px rgba(8, 27, 21, 0.12);







    --transition: 0.3s ease;



}











/* =========================================================



   RESET



========================================================= */







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







html {



    scroll-behavior: smooth;



}







body {



    font-family: var(--body);



    background: var(--cream-light);



    color: var(--black);



    line-height: 1.7;



    overflow-x: hidden;



}







body.no-scroll {



    overflow: hidden;



}







img {



    display: block;



    max-width: 100%;



}







a {



    color: inherit;



    text-decoration: none;



}







button,



input,



textarea,



select {



    font: inherit;



}







button {



    border: 0;



}







::selection {



    background: var(--gold);



    color: var(--white);



}











/* =========================================================



   GLOBAL



========================================================= */







.container {



    width: min(calc(100% - 48px), var(--container));



    margin-inline: auto;



}







.section-label {



    margin-bottom: 16px;



    color: var(--gold);



    font-size: 0.76rem;



    font-weight: 700;



    letter-spacing: 0.2em;



    text-transform: uppercase;



}







.light-label {



    color: var(--gold-light);



}







h1,



h2,



h3 {



    line-height: 1.1;



}







h1,



h2 {



    font-family: var(--heading);



}







h2 {



    color: var(--green-dark);



    font-size: clamp(2.6rem, 5vw, 4.8rem);



    letter-spacing: -0.035em;



}







h2 span {



    color: var(--gold);



}







.btn {



    display: inline-flex;



    min-height: 56px;



    align-items: center;



    justify-content: center;



    padding: 0 28px;



    border: 1px solid transparent;



    cursor: pointer;



    font-size: 0.86rem;



    font-weight: 700;



    letter-spacing: 0.04em;



    transition:



        transform var(--transition),



        background var(--transition),



        border-color var(--transition),



        color var(--transition);



}







.btn:hover {



    transform: translateY(-2px);



}







.btn-primary {



    background: var(--gold);



    color: var(--white);



}







.btn-primary:hover {



    background: var(--gold-light);



}







.btn-secondary {



    border-color: rgba(255,255,255,0.48);



    color: var(--white);



}







.btn-secondary:hover {



    background: var(--white);



    color: var(--green-dark);



}







.btn-dark {



    background: var(--green-dark);



    color: var(--white);



}







.btn-dark:hover {



    background: var(--gold);



}











/* =========================================================



   HEADER



========================================================= */







.site-header {



    position: fixed;



    z-index: 1000;



    top: 0;



    left: 0;



    width: 100%;



    border-bottom: 1px solid rgba(255,255,255,0.12);



    background: rgba(8, 27, 21, 0.86);



    backdrop-filter: blur(16px);



    -webkit-backdrop-filter: blur(16px);



    transition:



        background var(--transition),



        box-shadow var(--transition);



}







.site-header.scrolled {



    background: rgba(8, 27, 21, 0.97);



    box-shadow: 0 8px 35px rgba(0,0,0,0.14);



}







.nav-container {



    display: flex;



    height: 94px;



    align-items: center;



    gap: 34px;



}







.brand {



    display: flex;



    align-items: center;



    margin-right: auto;



}







.brand-logo {



    width: 175px;



    max-height: 80px;



    object-fit: contain;



}







.desktop-nav {



    display: flex;



    align-items: center;



    gap: 32px;



}







.desktop-nav a {



    position: relative;



    color: rgba(255,255,255,0.88);



    font-size: 0.85rem;



    font-weight: 600;



}







.desktop-nav a::after {



    position: absolute;



    bottom: -8px;



    left: 0;



    width: 0;



    height: 1px;



    background: var(--gold-light);



    content: "";



    transition: width var(--transition);



}







.desktop-nav a:hover::after {



    width: 100%;



}







.nav-quote-btn {



    display: inline-flex;



    min-height: 48px;



    align-items: center;



    justify-content: center;



    padding: 0 22px;



    background: var(--gold);



    color: var(--white);



    font-size: 0.8rem;



    font-weight: 700;



    transition: background var(--transition);



}







.nav-quote-btn:hover {



    background: var(--gold-light);



}







.menu-toggle {



    display: none;



    width: 44px;



    height: 44px;



    cursor: pointer;



    background: transparent;



}







.menu-toggle span {



    display: block;



    width: 25px;



    height: 2px;



    margin: 6px auto;



    background: var(--white);



    transition: var(--transition);



}







.mobile-nav {



    display: none;



}











/* =========================================================



   HERO



========================================================= */







.hero {



    position: relative;



    display: flex;



    min-height: 100vh;



    align-items: center;



    overflow: hidden;



    background: var(--green-deep);



    color: var(--white);



}







.hero-background {



    position: absolute;



    inset: 0;







    /*



       We can change this after seeing all 23 photos.



       For now Albion 01 is the hero.



    */



    background:



        url("../assets/images/albion-01.jpeg")



        center / cover no-repeat;







    transform: scale(1.03);



}







.hero-overlay {



    position: absolute;



    inset: 0;



    background:



        linear-gradient(



            90deg,



            rgba(5, 20, 15, 0.93) 0%,



            rgba(5, 20, 15, 0.76) 42%,



            rgba(5, 20, 15, 0.28) 72%,



            rgba(5, 20, 15, 0.14) 100%



        ),



        linear-gradient(



            0deg,



            rgba(5, 20, 15, 0.45),



            transparent 45%



        );



}







.hero-content {



    position: relative;



    z-index: 2;



    padding-top: 150px;



    padding-bottom: 90px;



}







.eyebrow {



    display: flex;



    align-items: center;



    gap: 13px;



    margin-bottom: 22px;



    color: var(--gold-light);



    font-size: 0.77rem;



    font-weight: 700;



    letter-spacing: 0.22em;



    text-transform: uppercase;



}







.eyebrow::before {



    width: 42px;



    height: 1px;



    background: var(--gold-light);



    content: "";



}







.hero h1 {



    max-width: 850px;



    margin-bottom: 26px;



    font-size: clamp(3.7rem, 7.4vw, 7rem);



    letter-spacing: -0.045em;



}







.hero h1 span {



    color: var(--gold-light);



}







.hero-description {



    max-width: 610px;



    margin-bottom: 36px;



    color: rgba(255,255,255,0.82);



    font-size: clamp(1rem, 1.7vw, 1.2rem);



}







.hero-actions {



    display: flex;



    flex-wrap: wrap;



    gap: 14px;



}







.hero-trust {



    display: flex;



    width: fit-content;



    align-items: center;



    gap: 28px;



    margin-top: 66px;



    padding-top: 28px;



    border-top: 1px solid rgba(255,255,255,0.18);



}







.trust-item {



    display: flex;



    flex-direction: column;



}







.trust-item strong {



    color: var(--white);



    font-family: var(--heading);



    font-size: 1.45rem;



}







.trust-item span {



    color: rgba(255,255,255,0.58);



    font-size: 0.72rem;



    letter-spacing: 0.08em;



    text-transform: uppercase;



}







.trust-divider {



    width: 1px;



    height: 40px;



    background: rgba(255,255,255,0.18);



}







.scroll-indicator {



    position: absolute;



    z-index: 3;



    right: 50px;



    bottom: 38px;



    display: flex;



    width: 42px;



    height: 64px;



    align-items: flex-start;



    justify-content: center;



    border: 1px solid rgba(255,255,255,0.3);



    border-radius: 30px;



}







.scroll-indicator span {



    width: 4px;



    height: 9px;



    margin-top: 12px;



    border-radius: 10px;



    background: var(--gold-light);



    animation: scrollDot 1.8s infinite;



}







@keyframes scrollDot {



    0% {



        transform: translateY(0);



        opacity: 0;



    }







    30% {



        opacity: 1;



    }







    100% {



        transform: translateY(26px);



        opacity: 0;



    }



}











/* =========================================================



   INTRO



========================================================= */







.intro-section {



    padding: 130px 0;



    background: var(--cream-light);



}







.intro-grid {



    display: grid;



    grid-template-columns: 0.9fr 1.1fr;



    gap: 100px;



    align-items: start;



}







.intro-heading h2 {



    max-width: 600px;



}







.intro-copy {



    max-width: 650px;



    padding-top: 30px;



}







.intro-copy p {



    margin-bottom: 22px;



    color: #5d645f;



    font-size: 1rem;



}







.intro-copy .intro-lead {



    color: var(--green-dark);



    font-family: var(--heading);



    font-size: 1.55rem;



    line-height: 1.45;



}







.text-link {



    display: inline-flex;



    align-items: center;



    gap: 12px;



    margin-top: 12px;



    color: var(--green-dark);



    font-size: 0.85rem;



    font-weight: 700;



}







.text-link span {



    color: var(--gold);



    font-size: 1.4rem;



    transition: transform var(--transition);



}







.text-link:hover span {



    transform: translateX(6px);



}











/* =========================================================



   SERVICES



========================================================= */







.services-section {



    padding: 125px 0;



    background: var(--cream);



}







.section-heading {



    display: grid;



    grid-template-columns: 1.3fr 0.7fr;



    gap: 80px;



    align-items: end;



    margin-bottom: 65px;



}







.section-heading > p {



    max-width: 500px;



    padding-bottom: 9px;



    color: #626862;



}







.services-grid {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    border-top: 1px solid var(--border);



    border-left: 1px solid var(--border);



}







.service-card {



    position: relative;



    min-height: 310px;



    padding: 38px 30px;



    border-right: 1px solid var(--border);



    border-bottom: 1px solid var(--border);



    background: rgba(255,255,255,0.28);



    transition:



        background var(--transition),



        transform var(--transition),



        box-shadow var(--transition);



}







.service-card:hover {



    z-index: 2;



    background: var(--white);



    box-shadow: var(--shadow);



    transform: translateY(-5px);



}







.service-number {



    display: block;



    margin-bottom: 65px;



    color: var(--gold);



    font-size: 0.72rem;



    font-weight: 700;



    letter-spacing: 0.15em;



}







.service-card h3 {



    margin-bottom: 14px;



    color: var(--green-dark);



    font-family: var(--heading);



    font-size: 1.55rem;



}







.service-card p {



    color: #666d68;



    font-size: 0.9rem;



}







.featured-service {



    background: var(--green-dark);



}







.featured-service:hover {



    background: var(--green-light);



}







.featured-service h3,



.featured-service p {



    color: var(--white);



}







.featured-service p {



    color: rgba(255,255,255,0.68);



}







.featured-service a {



    display: inline-block;



    margin-top: 18px;



    color: var(--gold-light);



    font-size: 0.82rem;



    font-weight: 700;



}











/* =========================================================



   ALBION STANDARD



========================================================= */







.standard-section {



    display: grid;



    min-height: 760px;



    grid-template-columns: 1fr 1fr;



    background: var(--green-dark);



}







.standard-image {



    overflow: hidden;



}







.standard-image img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 1s ease;



}







.standard-section:hover .standard-image img {



    transform: scale(1.025);



}







.standard-content {



    display: flex;



    align-items: center;



    padding: 90px;



}







.standard-inner {



    max-width: 600px;



}







.standard-content h2 {



    margin-bottom: 28px;



    color: var(--white);



}







.standard-content h2 span {



    display: block;



    color: var(--gold-light);



}







.standard-inner > p:not(.section-label) {



    margin-bottom: 40px;



    color: rgba(255,255,255,0.67);



}







.standard-points {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 32px;



}







.standard-point {



    display: flex;



    gap: 15px;



}







.standard-point > span {



    display: flex;



    flex: 0 0 32px;



    width: 32px;



    height: 32px;



    align-items: center;



    justify-content: center;



    border: 1px solid rgba(211,174,112,0.5);



    border-radius: 50%;



    color: var(--gold-light);



}







.standard-point h3 {



    margin-bottom: 6px;



    color: var(--white);



    font-size: 0.95rem;



}







.standard-point p {



    color: rgba(255,255,255,0.55);



    font-size: 0.82rem;



}











/* =========================================================



   OUR WORK / GALLERY



========================================================= */







.work-section {



    padding: 130px 0;



    background: var(--cream-light);



}







.work-heading {



    margin-bottom: 60px;



}







.gallery {



    display: grid;



    grid-auto-rows: 280px;



    grid-template-columns: repeat(3, 1fr);



    gap: 12px;



}







.gallery-item {



    position: relative;



    overflow: hidden;



    cursor: zoom-in;



    background: #ddd8cd;



}







.gallery-item::after {



    position: absolute;



    inset: 0;



    background:



        linear-gradient(



            0deg,



            rgba(8,27,21,0.35),



            transparent 50%



        );



    content: "";



    opacity: 0;



    transition: opacity var(--transition);



}







.gallery-item:hover::after {



    opacity: 1;



}







.gallery-item img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.6s ease;



}







.gallery-item:hover img {



    transform: scale(1.055);



}







.gallery-large {



    grid-row: span 2;



    grid-column: span 2;



}







.gallery-action {



    display: flex;



    justify-content: center;



    margin-top: 38px;



}







.gallery-hidden {



    display: none;



    margin-top: 12px;



}







.gallery-hidden.visible {



    display: grid;



}











/* =========================================================



   QUOTE SECTION



========================================================= */







.quote-section {



    padding: 130px 0;



    background: var(--green-deep);



}







.quote-grid {



    display: grid;



    grid-template-columns: 0.85fr 1.15fr;



    gap: 90px;



    align-items: start;



}







.quote-copy {



    position: sticky;



    top: 140px;



}







.quote-copy h2 {



    margin-bottom: 25px;



    color: var(--white);



}







.quote-copy h2 span {



    display: block;



    color: var(--gold-light);



}







.quote-copy > p:not(.section-label) {



    max-width: 520px;



    color: rgba(255,255,255,0.65);



}







.direct-contact {



    display: grid;



    gap: 24px;



    margin-top: 50px;



}







.direct-contact div {



    display: flex;



    flex-direction: column;



    gap: 4px;



    padding-bottom: 20px;



    border-bottom: 1px solid rgba(255,255,255,0.12);



}







.direct-contact span {



    color: rgba(255,255,255,0.45);



    font-size: 0.72rem;



    letter-spacing: 0.12em;



    text-transform: uppercase;



}







.direct-contact a {



    color: var(--white);



    font-size: 1rem;



    transition: color var(--transition);



}







.direct-contact a:hover {



    color: var(--gold-light);



}







.quote-form-wrap {



    padding: 55px;



    background: var(--cream-light);



    box-shadow: 0 30px 80px rgba(0,0,0,0.22);



}







.form-row {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 20px;



}







.form-group {



    display: flex;



    flex-direction: column;



    gap: 9px;



    margin-bottom: 20px;



}







.form-group label {



    color: var(--green-dark);



    font-size: 0.76rem;



    font-weight: 700;



}







.form-group input,



.form-group select,



.form-group textarea {



    width: 100%;



    border: 1px solid #d8d5cd;



    border-radius: 0;



    outline: none;



    background: var(--white);



    color: var(--black);



    transition:



        border-color var(--transition),



        box-shadow var(--transition);



}







.form-group input,



.form-group select {



    height: 54px;



    padding: 0 16px;



}







.form-group textarea {



    min-height: 145px;



    padding: 15px 16px;



    resize: vertical;



}







.form-group input:focus,



.form-group select:focus,



.form-group textarea:focus {



    border-color: var(--gold);



    box-shadow: 0 0 0 3px rgba(185,137,67,0.1);



}







.form-group textarea::placeholder {



    color: #999d98;



}







.privacy-check {



    display: flex;



    align-items: flex-start;



    gap: 12px;



    margin: 4px 0 24px;



    color: #666c67;



    cursor: pointer;



    font-size: 0.78rem;



}







.privacy-check input {



    width: 17px;



    height: 17px;



    margin-top: 3px;



    accent-color: var(--green-dark);



}







.form-submit {



    width: 100%;



    border: 0;



    background: var(--gold);



    color: var(--white);



}







.form-submit:hover {



    background: var(--green-dark);



}







.form-note {



    margin-top: 14px;



    color: #868a86;



    font-size: 0.72rem;



    text-align: center;



}











/* =========================================================



   CONTACT STRIP



========================================================= */







.contact-strip {



    padding: 70px 0;



    background: var(--gold);



}







.contact-strip-inner {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 40px;



}







.contact-strip .section-label {



    margin-bottom: 7px;



    color: rgba(255,255,255,0.7);



}







.contact-strip h2 {



    color: var(--white);



    font-size: clamp(2rem, 4vw, 3.4rem);



}







.contact-strip .btn-primary {



    flex-shrink: 0;



    background: var(--green-dark);



}







.contact-strip .btn-primary:hover {



    background: var(--white);



    color: var(--green-dark);



}











/* =========================================================



   FOOTER



========================================================= */







.site-footer {



    padding-top: 85px;



    background: #071611;



    color: var(--white);



}







.footer-grid {



    display: grid;



    grid-template-columns: 1.5fr 0.7fr 1fr 0.7fr;



    gap: 60px;



    padding-bottom: 65px;



}







.footer-logo {



    width: 210px;



    margin-bottom: 25px;



}







.footer-brand p {



    max-width: 350px;



    color: rgba(255,255,255,0.53);



    font-size: 0.86rem;



}







.footer-column {



    display: flex;



    flex-direction: column;



    align-items: flex-start;



    gap: 10px;



}







.footer-column h3 {



    margin-bottom: 10px;



    color: var(--gold-light);



    font-size: 0.77rem;



    letter-spacing: 0.13em;



    text-transform: uppercase;



}







.footer-column a,



.footer-column p {



    color: rgba(255,255,255,0.57);



    font-size: 0.82rem;



}







.footer-column a:hover {



    color: var(--white);



}







.footer-bottom {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 30px;



    padding: 25px 0;



    border-top: 1px solid rgba(255,255,255,0.1);



}







.footer-bottom p {



    color: rgba(255,255,255,0.4);



    font-size: 0.72rem;



}











/* =========================================================



   LIGHTBOX



========================================================= */







.lightbox {



    position: fixed;



    z-index: 3000;



    inset: 0;



    display: flex;



    visibility: hidden;



    align-items: center;



    justify-content: center;



    padding: 60px 90px;



    background: rgba(3, 12, 9, 0.96);



    opacity: 0;



    transition:



        opacity var(--transition),



        visibility var(--transition);



}







.lightbox.active {



    visibility: visible;



    opacity: 1;



}







.lightbox img {



    max-width: 100%;



    max-height: 88vh;



    object-fit: contain;



    box-shadow: 0 20px 80px rgba(0,0,0,0.4);



}







.lightbox-close {



    position: absolute;



    top: 25px;



    right: 35px;



    cursor: pointer;



    background: transparent;



    color: var(--white);



    font-size: 3rem;



    font-weight: 300;



}







.lightbox-arrow {



    position: absolute;



    top: 50%;



    width: 55px;



    height: 70px;



    cursor: pointer;



    background: rgba(255,255,255,0.08);



    color: var(--white);



    font-size: 2.5rem;



    transform: translateY(-50%);



    transition: background var(--transition);



}







.lightbox-arrow:hover {



    background: var(--gold);



}







.lightbox-prev {



    left: 20px;



}







.lightbox-next {



    right: 20px;



}











/* =========================================================



   MOBILE QUICK ACTIONS



========================================================= */







.mobile-actions {



    display: none;



}











/* =========================================================



   TABLET



========================================================= */







@media (max-width: 1050px) {







    .desktop-nav {



        gap: 20px;



    }







    .desktop-nav a {



        font-size: 0.78rem;



    }







    .services-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    .standard-content {



        padding: 65px 45px;



    }







    .standard-points {



        grid-template-columns: 1fr;



    }







    .quote-grid {



        gap: 50px;



    }







    .footer-grid {



        grid-template-columns: 1.3fr 1fr 1fr;



    }







    .footer-grid .footer-column:last-child {



        grid-column: 2;



    }



}











/* =========================================================



   MOBILE NAV BREAKPOINT



========================================================= */







@media (max-width: 850px) {







    .container {



        width: min(calc(100% - 34px), var(--container));



    }







    .nav-container {



        height: 80px;



    }







    .brand-logo {



        width: 145px;



        max-height: 67px;



    }







    .desktop-nav,



    .nav-quote-btn {



        display: none;



    }







    .menu-toggle {



        display: block;



    }







    .menu-toggle.active span:nth-child(1) {



        transform: translateY(8px) rotate(45deg);



    }







    .menu-toggle.active span:nth-child(2) {



        opacity: 0;



    }







    .menu-toggle.active span:nth-child(3) {



        transform: translateY(-8px) rotate(-45deg);



    }







    .mobile-nav {



        position: fixed;



        z-index: 999;



        top: 80px;



        right: 0;



        left: 0;



        display: flex;



        visibility: hidden;



        flex-direction: column;



        padding: 28px 25px 35px;



        background: var(--green-deep);



        opacity: 0;



        transform: translateY(-12px);



        transition:



            opacity var(--transition),



            transform var(--transition),



            visibility var(--transition);



    }







    .mobile-nav.active {



        visibility: visible;



        opacity: 1;



        transform: translateY(0);



    }







    .mobile-nav a {



        padding: 14px 0;



        border-bottom: 1px solid rgba(255,255,255,0.1);



        color: var(--white);



        font-weight: 600;



    }







    .mobile-nav .mobile-quote-btn {



        margin-top: 20px;



        border: 0;



        background: var(--gold);



        text-align: center;



    }







    .hero {



        min-height: 900px;



    }







    .hero-overlay {



        background:



            linear-gradient(



                90deg,



                rgba(5,20,15,0.9),



                rgba(5,20,15,0.55)



            ),



            linear-gradient(



                0deg,



                rgba(5,20,15,0.55),



                transparent



            );



    }







    .hero-content {



        padding-top: 130px;



    }







    .hero h1 {



        font-size: clamp(3.4rem, 12vw, 5.5rem);



    }







    .scroll-indicator {



        display: none;



    }







    .intro-grid,



    .section-heading,



    .quote-grid {



        grid-template-columns: 1fr;



    }







    .intro-grid {



        gap: 40px;



    }







    .intro-copy {



        padding-top: 0;



    }







    .section-heading {



        gap: 25px;



    }







    .standard-section {



        grid-template-columns: 1fr;



    }







    .standard-image {



        min-height: 520px;



    }







    .gallery {



        grid-auto-rows: 240px;



        grid-template-columns: repeat(2, 1fr);



    }







    .gallery-large {



        grid-column: span 2;



    }







    .quote-copy {



        position: static;



    }







    .footer-grid {



        grid-template-columns: 1fr 1fr;



    }







    .footer-grid .footer-column:last-child {



        grid-column: auto;



    }







    .contact-strip-inner {



        align-items: flex-start;



        flex-direction: column;



    }



}











/* =========================================================



   SMALL MOBILE



========================================================= */







@media (max-width: 600px) {







    body {



        padding-bottom: 62px;



    }







    .intro-section,



    .services-section,



    .work-section,



    .quote-section {



        padding: 85px 0;



    }







    h2 {



        font-size: clamp(2.4rem, 12vw, 3.5rem);



    }







    .hero {



        min-height: 820px;



    }







    .hero-background {



        background-position: center;



    }







    .hero-content {



        padding-top: 115px;



        padding-bottom: 70px;



    }







    .hero h1 {



        margin-bottom: 20px;



        font-size: clamp(3rem, 14vw, 4.5rem);



    }







    .hero-description {



        font-size: 0.98rem;



    }







    .hero-actions {



        align-items: stretch;



        flex-direction: column;



    }







    .hero-actions .btn {



        width: 100%;



    }







    .hero-trust {



        width: 100%;



        gap: 14px;



        justify-content: space-between;



        margin-top: 45px;



    }







    .trust-item strong {



        font-size: 1.1rem;



    }







    .trust-item span {



        font-size: 0.58rem;



    }







    .services-grid {



        grid-template-columns: 1fr;



    }







    .service-card {



        min-height: auto;



        padding: 30px 26px;



    }







    .service-number {



        margin-bottom: 35px;



    }







    .standard-image {



        min-height: 390px;



    }







    .standard-content {



        padding: 70px 22px;



    }







    .gallery {



        grid-auto-rows: 250px;



        grid-template-columns: 1fr;



    }







    .gallery-large {



        grid-row: span 1;



        grid-column: span 1;



    }







    .quote-form-wrap {



        padding: 30px 20px;



    }







    .form-row {



        grid-template-columns: 1fr;



        gap: 0;



    }







    .direct-contact a {



        overflow-wrap: anywhere;



    }







    .footer-grid {



        grid-template-columns: 1fr;



        gap: 38px;



    }







    .footer-grid .footer-column:last-child {



        grid-column: auto;



    }







    .footer-bottom {



        align-items: flex-start;



        flex-direction: column;



        gap: 8px;



    }







    .lightbox {



        padding: 55px 12px;



    }







    .lightbox-arrow {



        top: auto;



        bottom: 15px;



        width: 48px;



        height: 48px;



        transform: none;



    }







    .lightbox-prev {



        left: calc(50% - 55px);



    }







    .lightbox-next {



        right: calc(50% - 55px);



    }







    .lightbox-close {



        top: 8px;



        right: 17px;



    }







    .mobile-actions {



        position: fixed;



        z-index: 1500;



        right: 0;



        bottom: 0;



        left: 0;



        display: grid;



        height: 62px;



        grid-template-columns: 1fr 1fr;



        box-shadow: 0 -10px 30px rgba(0,0,0,0.14);



    }







    .mobile-actions a {



        display: flex;



        align-items: center;



        justify-content: center;



        background: var(--green-dark);



        color: var(--white);



        font-size: 0.8rem;



        font-weight: 700;



    }







    .mobile-actions a:last-child {



        background: var(--gold);



    }



}











/* =========================================================



   ACCESSIBILITY / REDUCED MOTION



========================================================= */







@media (prefers-reduced-motion: reduce) {







    html {



        scroll-behavior: auto;



    }







    *,



    *::before,



    *::after {



        animation-duration: 0.01ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: 0.01ms !important;



    }



}



/* =========================================================

   QUOTE SUCCESS MODAL

========================================================= */



.success-modal {

    position: fixed;

    z-index: 5000;

    inset: 0;

    display: flex;

    visibility: hidden;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 0;

    transition:

        opacity 0.28s ease,

        visibility 0.28s ease;

}



.success-modal.active {

    visibility: visible;

    opacity: 1;

}



.success-modal-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(3, 12, 9, 0.78);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.success-modal-card {

    position: relative;

    z-index: 1;

    width: min(100%, 520px);

    padding: 58px 48px 46px;

    border-top: 4px solid var(--gold);

    background: var(--cream-light);

    box-shadow: 0 30px 100px rgba(0,0,0,0.38);

    text-align: center;

    opacity: 0;

    transform: translateY(18px) scale(0.96);

    transition:

        opacity 0.3s ease,

        transform 0.3s ease;

}



.success-modal.active .success-modal-card {

    opacity: 1;

    transform: translateY(0) scale(1);

}



.success-modal-icon {

    display: flex;

    width: 72px;

    height: 72px;

    align-items: center;

    justify-content: center;

    margin: 0 auto 24px;

    border: 1px solid rgba(185,137,67,0.42);

    border-radius: 50%;

    background: var(--green-dark);

    color: var(--gold-light);

    font-size: 2rem;

    font-weight: 700;

}



.success-modal .section-label {

    margin-bottom: 10px;

}



.success-modal h2 {

    margin-bottom: 18px;

    color: var(--green-dark);

    font-size: clamp(2.3rem, 6vw, 3.4rem);

}



.success-modal-text {

    max-width: 400px;

    margin: 0 auto 30px;

    color: #626862;

    font-size: 0.98rem;

}



.success-modal-button {

    min-width: 180px;

}



.success-modal-close {

    position: absolute;

    top: 14px;

    right: 18px;

    width: 42px;

    height: 42px;

    cursor: pointer;

    background: transparent;

    color: var(--green-dark);

    font-size: 2rem;

    font-weight: 300;

    line-height: 1;

    transition:

        color var(--transition),

        transform var(--transition);

}



.success-modal-close:hover {

    color: var(--gold);

    transform: rotate(90deg);

}



@media (max-width: 600px) {

    .success-modal {

        padding: 18px;

    }



    .success-modal-card {

        padding: 50px 24px 34px;

    }



    .success-modal-icon {

        width: 64px;

        height: 64px;

        margin-bottom: 20px;

    }



    .success-modal-button {

        width: 100%;

    }

}


/* =========================================================
   PRIVACY POLICY
========================================================= */

.privacy-check a {
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-check a:hover {
    color: var(--gold);
}

.footer-bottom a,
.footer-legal-link {
    color: rgba(255,255,255,0.58);
    font-size: 0.72rem;
    transition: color var(--transition);
}

.footer-bottom a:hover,
.footer-legal-link:hover {
    color: var(--gold-light);
}

.legal-page {
    min-height: 100vh;
    padding: 170px 0 110px;
    background: var(--cream-light);
}

.legal-page-header {
    max-width: 850px;
    margin-bottom: 55px;
}

.legal-page-header h1 {
    margin-bottom: 20px;
    color: var(--green-dark);
    font-family: var(--heading);
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: -0.04em;
}

.legal-page-header > p:not(.section-label) {
    max-width: 720px;
    color: #626862;
}

.legal-content {
    max-width: 900px;
    padding: 55px;
    border-top: 4px solid var(--gold);
    background: var(--white);
    box-shadow: var(--shadow);
}

.legal-content section + section {
    margin-top: 38px;
    padding-top: 38px;
    border-top: 1px solid var(--border);
}

.legal-content h2 {
    margin-bottom: 14px;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.legal-content p,
.legal-content li {
    color: #5d645f;
    font-size: 0.95rem;
}

.legal-content p + p {
    margin-top: 14px;
}

.legal-content ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 0 20px;
}

.legal-content a {
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-content a:hover {
    color: var(--gold);
}

.legal-back {
    display: inline-flex;
    margin-bottom: 28px;
    color: var(--green-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.legal-back:hover {
    color: var(--gold);
}

@media (max-width: 600px) {
    .legal-page {
        padding: 125px 0 85px;
    }

    .legal-content {
        padding: 34px 22px;
    }
}