:root {
    /* Black & white main theme, orange used only on hover + emergency banner */
    --dark-bg: #0a0a0a;           /* Deep Black/Grey */
    --card-bg: #1a1a1a;           /* Slightly lighter grey for cards */
    --accent-orange: #f28d01;     /* Frosty orange — hover + emergency accent */
    --bright-navy: #FFFFFF;       /* White (main theme accent) */
    --white: #ffffff;
    --off-white: #e0e0e0;         /* For secondary text */
    --emergency-red: #f28d01;     /* Solid orange on the emergency banner */
    --border-color: #FFFFFF;
    --input-bg: #252525;          /* Background for form fields */
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6;
    color: var(--white);
    background-color: var(--dark-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;        /* Safety net against any element causing horizontal scroll */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;              /* Defeat flex-item default min-width: auto */
}

h1, h2, h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
    text-transform: uppercase;
    color: var(--white);
}

/* --- NAVIGATION CORE --- */
nav {
    background: #111111; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.5);
    border-bottom: 1px solid var(--border-color);
    height: 70px;
}

/* --- Updated LOGO CSS --- */
.logo {
    display: flex;          /* Enables side-by-side layout */
    align-items: center;     /* Centers image and text vertically */
    gap: 12px;              /* Adds space between the image and the text */
    
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 1px;
    z-index: 1100;
}

.logo img {
    height: 35px;           /* Adjust this height to fit your 70px nav height */
    width: auto;            /* Maintains aspect ratio */
    display: block;
}

/* Desktop View: Links and Socials side-by-side */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-links a {
    text-decoration: none;
    color: var(--off-white);
    font-weight: 600;
    transition: 0.3s;
}

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

.nav-socials {
    display: flex;
    gap: 15px;
}

.nav-socials a {
    color: var(--off-white);
    font-size: 1.2rem;
    transition: 0.3s;
}

.nav-socials a:hover {
    color: var(--accent-orange);
}

/* --- BURGER MENU --- */
.burger {
    display: none;
    cursor: pointer;
    z-index: 1100;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--white);
    margin: 5px;
    transition: all 0.3s ease;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {

    /* Keep the logo image visible on the closed mobile navbar so the brand
       is identifiable. The image + text fit comfortably on iPhone widths
       because the nav links slide out of view (the burger menu replaces them). */

    .burger {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #111111;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 50px;
        transition: 0.5s ease-in-out;
        z-index: 1050;
        border-left: none;
    }

    /* ... the rest of your existing mobile CSS ... */
    .nav-menu.active {
        right: 0;
    }

    .nav-links {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        list-style: none;
    }

    .nav-links a {
        font-size: 1.5rem;
        color: var(--white);
        text-align: center;
        text-decoration: none;
    }

    .nav-socials {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }
}

/* --- IPHONE-SIZE NAV (≤430px) ---
   Tighter padding so the logo + burger don't crowd on iPhone Pro Max widths.
   Smaller font on the brand text so "FROSTY PLUMBING CO." doesn't wrap. */
@media (max-width: 430px) {
    nav {
        padding: 0.75rem 4%;
        height: auto;
        min-height: 60px;
    }

    .logo {
        font-size: 1.05rem;        /* Was 1.5rem — too big, wraps on iPhone */
        gap: 8px;
        letter-spacing: 0.5px;
    }

    .logo img {
        height: 28px;              /* Was 35px — too big on iPhone */
    }

    .burger div {
        width: 22px;
        height: 2.5px;
        margin: 4px;
    }
}

/* --- IPHONE-SIZE HERO (≤430px) ---
   The hero height is clamped globally (see .hero below), so the banner is
   already tall enough on phones. We only tighten the overlay text clamps so
   it fits the shorter phone banner comfortably. */
@media (max-width: 430px) {
    .hero-overlay h2 {
        font-size: clamp(1.1rem, 6vw, 1.8rem);
    }

    .hero-overlay p {
        font-size: clamp(0.8rem, 3.2vw, 1rem);
    }

    .hero-overlay .btn-navy {
        padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 26px);
    }
}

/* --- SMALL PHONES (≤360px) --- */
@media (max-width: 360px) {
    .logo {
        font-size: 0.9rem;
    }

    .logo img {
        height: 24px;
    }
}

/* --- HERO SECTION ---
   Strategy:
   - .hero is a direct child of <body>, which is already full-width with no
     padding, so plain width:100% spans edge-to-edge with no scrollbar
     misalignment. (The old width:100vw + -50vw trick is dropped — it offset
     the banner by the scrollbar width and could fail to sit flush.)
   - aspect-ratio: 2/1 keeps the banner at the image's native 1440x720 shape
     so the full picture shows with no crop — the look you liked — on every
     screen wide enough to honour it.
   - max-height caps the banner on large desktops so it is never too tall,
     but is generous enough (560px) to show the full Frosty logo at the top
     of the 1440x720 image. When the cap bites, object-fit:cover trims a
     little of the top/bottom only on those wide screens.
   - min-height lifts the banner on narrow phones, where 2:1 would be too
     short to read. Again cover handles the small extra fill.
   - .hero-overlay is absolute, inset:0, so it always matches the banner size
     and the text sits on top. Text uses clamp(min, vw, max) so it scales
     fluidly with the viewport — no hard breakpoint jumps. */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;          /* Native 1440x720 image ratio — full banner shown */
    max-height: 560px;            /* Cap on wide desktops — tall enough to show the full logo */
    min-height: 240px;            /* Floor on narrow phones so it's not too short */
    margin: 0;
    background-color: var(--dark-bg);
    overflow: hidden;
    min-width: 0;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;            /* Fills edge-to-edge; crops only when max/min-height overrides the ratio */
    object-position: center;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;                   /* Sits above the image */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* Vertical center */
    align-items: center;          /* Horizontal center */
    text-align: center;
    color: var(--white);
    padding: clamp(12px, 3vw, 40px);
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}

.hero-overlay h2 {
    font-size: clamp(1.25rem, 4.5vw, 3.25rem);   /* 20px → 36px → 52px */
    line-height: 1.1;
    margin-bottom: clamp(8px, 1.5vw, 20px);
    max-width: 90%;
}

.hero-overlay h2::after {
    /* Kill the .section-title underline bar inside the hero */
    content: none;
}

.hero-overlay p {
    font-size: clamp(0.85rem, 1.8vw, 1.25rem);   /* 14px → 18px → 20px */
    line-height: 1.5;
    max-width: min(700px, 85%);
    margin-bottom: clamp(12px, 2vw, 24px);
}

.hero-overlay .btn-navy {
    font-size: clamp(0.75rem, 1.4vw, 1.05rem);
    padding: clamp(10px, 1.3vw, 16px) clamp(20px, 2.8vw, 36px);
}


.btn-navy {
    background-color: var(--bright-navy);
    color: var(--dark-bg);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.btn-navy:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(242, 141, 1, 0.5);
}

.emergency-banner {
    background: var(--emergency-red);
    color: var(--white);
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- SECTION STYLING --- */
section {
    padding: 80px 10%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
}

.section-title::after {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--bright-navy);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* --- WHY CHOOSE FROSTY (home) ---
   Desktop: three cards across, free-quotes card centred on the row below.
   Mobile (≤768px): single column as before. Scoped with .services-grid.why-grid
   so it outranks the base .services-grid rule further down this file. */
.services-grid.why-grid {
    grid-template-columns: repeat(3, 1fr);
}

.services-grid.why-grid .service-card:last-child {
    grid-column: 2 / 3;
}

@media (max-width: 768px) {
    .services-grid.why-grid {
        grid-template-columns: 1fr;
    }

    .services-grid.why-grid .service-card:last-child {
        grid-column: auto;
    }
}

/* --- SERVICES --- */
.services-intro {
    text-align: center;
    max-width: 700px;
    margin: -20px auto 50px;
    color: var(--off-white);
}

/* Each category is a block: funky title + grid of cards */
.service-category {
    margin-bottom: 60px;
}

.service-category:last-of-type {
    margin-bottom: 30px;
}

/* Funky category title — uppercase, with a thick left tab in bright-navy,
   a small underline accent under the heading, and a subtle category label.
   Gives the page rhythm and breaks up the wall of cards. */
.service-category-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 30px;
    padding-left: 18px;
    border-left: 5px solid var(--bright-navy);
    position: relative;
}

.service-category-title i {
    color: var(--bright-navy);
    font-size: 1.4rem;
}

.service-category-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--bright-navy), transparent);
    margin-left: 10px;
}

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

.service-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 35px 28px 30px;
    text-align: center;
    transition: 0.3s;
    border-radius: 10px;
    color: var(--off-white);
    overflow: hidden;
}

/* Top accent stripe on each card — white by default, lights up orange on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bright-navy);
    transition: 0.3s;
}

.service-card:hover {
    border-color: var(--accent-orange);
    box-shadow: 0 8px 25px rgba(242, 141, 1, 0.22);
    transform: translateY(-5px);
}

.service-card:hover::before {
    height: 5px;
    background: var(--accent-orange);
}

.service-card i {
    font-size: 2.6rem;
    color: var(--bright-navy);
    margin-bottom: 15px;
    display: inline-block;
    transition: 0.3s;
}

.service-card:hover i {
    color: var(--accent-orange);
    transform: scale(1.08);
}

.service-card h3 {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--white);
}

.service-card p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--off-white);
}

/* --- GALLERY & REVIEWS --- */
/* --- GALLERY & REVIEWS SECTION --- */
.gallery-reviews-section {
    padding: 80px 10%;
    background-color: var(--dark-bg); /* Keeps it in dark mode */
}

.gallery-reviews-container {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Space between the pairs */
    margin-top: 40px;
}

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

/* This flips the second row so image is on the right */
.gallery-row.reverse {
    flex-direction: row-reverse;
}

.gallery-img-box {
    flex: 1;
}

.gallery-img-box img {
    width: 100%;
    max-width: 500px;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    border: 2px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: 0.3s;
}

.gallery-img-box img:hover {
    border-color: var(--accent-orange);
    transform: scale(1.02);
}

.review-box {
    flex: 1;
    background: var(--card-bg);
    padding: 30px;
    border-left: 5px solid var(--bright-navy);
    border-radius: 0 15px 15px 0;
    color: var(--off-white);
    font-style: italic;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.review-box strong {
    color: var(--white);
    font-style: normal;
    font-weight: 600;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .gallery-reviews-section {
        padding: 60px 5%;
    }

    .gallery-row, .gallery-row.reverse {
        flex-direction: column; /* Stack Image on top of Review */
        text-align: center;
        gap: 20px;
    }

    .review-box {
        border-left: none;
        border-top: 5px solid var(--bright-navy);
        border-radius: 15px 15px 15px 15px;
        padding: 20px;
    }

    .gallery-img-box img {
        height: 250px;
    }
}

/* --- ABOUT US --- */
.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.about-text {
    flex: 1;
    min-width: 300px;
    color: var(--off-white);
}

.certs-section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 10px;
    text-align: left;
    flex: 1;
    min-width: 300px;
    border: 2px dashed var(--bright-navy);
    color: var(--off-white);
}

.certs-section h3 {
    margin-bottom: 15px;
    color: var(--bright-navy);
}

/* --- CONTACT FORM --- */
.contact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

.contact-info h3 {
    margin-bottom: 20px;
    color: var(--white);
}

.contact-form {
    background: var(--card-bg);
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    color: var(--white);
}

.contact-links a,
  .contact-links a:visited {
      color: #ffffff;             /* Stop the default blue/purple on visited tel:/mailto: links */
      text-decoration: none;
      transition: color 0.3s ease;
      -webkit-tap-highlight-color: transparent;  /* Kill the blue tap flash on mobile */
  }

  .contact-links a:hover,
  .contact-links a:focus,
  .contact-links a:active {
      color: var(--accent-orange);
  }

/* --- CONTACT IMAGE --- */
.contact-pic {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-top: 25px;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .contact-pic {
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
    }
}
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--off-white);
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: inherit;
    color: var(--white);
    transition: 0.3s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 5px rgba(242, 141, 1, 0.5);
}

.price-disclaimer {
    font-size: 0.9rem;
    color: var(--off-white);
    margin-bottom: 15px;
    background: #222;
    padding: 10px;
    border-left: 4px solid var(--bright-navy);
}

.emergency-text {
    display: block;
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--emergency-red);
}

/* --- FOOTER --- */
footer {
    background: #000000;
    color: var(--white);
    padding: 50px 10% 20px;
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

/* Brand block in the footer — clickable logo + wordmark that returns to home */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--white);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: 0.3s;
    align-self: start;
}

.footer-brand:hover {
    color: var(--accent-orange);
    transform: translateX(2px);
}

.footer-brand img {
    height: 45px;
    width: auto;
    display: block;
}

.footer-col h4 {
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--bright-navy);
    display: inline-block;
    padding-bottom: 5px;
    color: var(--white);
}

.footer-col p, .footer-col li {
    font-size: 0.9rem;
    list-style: none;
    margin-bottom: 10px;
    color: var(--off-white);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    font-size: 0.8rem;
    color: #666;
}

/* Google review button — white outline (main theme), fills orange on hover */
.btn-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    border: 1px solid var(--bright-navy);
    border-radius: 5px;
    color: var(--white);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.btn-review i {
    font-size: 1rem;
}

.btn-review:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(242, 141, 1, 0.4);
}

/* Snowfall toggle button — matches .nav-socials visual weight */
.snow-toggle {
    background: none;
    border: none;
    color: var(--off-white);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    transition: 0.3s;
}

.snow-toggle:hover {
    color: var(--accent-orange);
}

.snow-toggle[aria-pressed="true"] {
    color: var(--accent-orange);
}

/* Snowfall particles */
.snow-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10px;
    color: #ffffff;
    font-size: 10px;
    user-select: none;
    will-change: transform;
    animation: snowfall linear forwards;
}

@keyframes snowfall {
    from { transform: translateY(0) translateX(0); opacity: 1; }
    to   { transform: translateY(105vh) translateX(40px); opacity: 0.6; }
}


/* --- AREAS WE COVER --- */
.areas-section {
    text-align: center;
    padding: 40px 10% 20px;
}

.areas-intro {
    color: var(--off-white);
    margin-bottom: 24px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.areas-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
}

.area-chip {
    display: inline-block;
    padding: 8px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    color: var(--off-white);
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
}

.area-chip:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: translateY(-3px);
}

/* --- FILE UPLOAD INPUT (contact form) --- */
.form-group input[type="file"] {
    padding: 10px;
    cursor: pointer;
}

.form-group input[type="file"]::file-selector-button {
    background: var(--bright-navy);
    color: var(--dark-bg);
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    transition: 0.3s;
    font-family: inherit;
}

.form-group input[type="file"]::file-selector-button:hover {
    background: var(--accent-orange);
    color: var(--white);
}

.file-hint {
    font-weight: 400;
    font-size: 0.8rem;
    color: #888;
}

/* --- LEGAL PAGES (terms / privacy) --- */
.legal-section {
    padding: 40px 10%;
    max-width: 900px;
    margin: 0 auto;
}

.legal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 30px;
    color: var(--off-white);
    line-height: 1.8;
}

.legal-content h3 {
    color: var(--white);
    margin-top: 24px;
    margin-bottom: 10px;
    border-left: 4px solid var(--bright-navy);
    padding-left: 12px;
}

.legal-content p {
    margin-bottom: 12px;
}

.legal-list {
    list-style: none;
    padding-left: 8px;
    margin-bottom: 12px;
}

.legal-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.legal-list li::before {
    content: "\2022";
    color: var(--accent-orange);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.legal-link {
    color: var(--white);
    text-decoration: underline;
    transition: color 0.3s;
}

.legal-link:hover {
    color: var(--accent-orange);
}

/* --- FOOTER LEGAL LINKS --- */
.footer-legal-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-legal-links a:hover {
    color: var(--accent-orange);
}


/* --- FULL ADDRESS LOOKUP (contact form) --- */
.address-lookup {
    position: relative;
}

.address-field {
    position: relative;
}

.address-field input {
    width: 100%;
    padding-right: 42px;
}

.address-spinner {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: address-spinner 0.7s linear infinite;
    pointer-events: none;
}

.address-spinner[hidden] {
    display: none;
}

@keyframes address-spinner {
    to {
        transform: rotate(360deg);
    }
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.autocomplete-list[hidden] {
    display: none;
}

.autocomplete-list li {
    padding: 11px 14px;
    color: var(--off-white);
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.4;
    transition: background 0.2s ease;
}

.autocomplete-list li[role="option"]:hover,
.autocomplete-list li[role="option"].active {
    background: #333333;
    color: var(--white);
}

.autocomplete-line {
    display: block;
    overflow-wrap: anywhere;
}

.autocomplete-sub {
    display: block;
    margin-top: 2px;
    color: #999999;
    font-size: 0.78rem;
}

.autocomplete-empty {
    color: #888888 !important;
    cursor: default !important;
}

.address-note {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.84rem;
}

.address-note[hidden] {
    display: none;
}

.address-note.success {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4caf50;
}

.address-note.warning {
    color: var(--accent-orange);
    background: rgba(242, 141, 1, 0.1);
    border-left: 4px solid var(--accent-orange);
}

.address-note.muted {
    color: #888888;
    background: rgba(255, 255, 255, 0.04);
    border-left: 4px solid #555555;
}

.address-help {
    margin-top: 6px;
    color: #777777;
    font-size: 0.78rem;
}

/* Contact form AJAX status messages */
.form-status {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}
.form-status.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.form-status.error {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6cb;
}

/* Honeypot field: real users never see it */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* Explicit privacy consent */
.consent-group {
    margin-top: 14px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #dddddd;
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-orange);
}

.consent-label a {
    color: var(--accent-orange);
    text-decoration: underline;
}

.privacy-note {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--accent-orange);
    color: #e8e8e8;
    font-size: 0.86rem;
}

/* Accessible cookie banner */
.cookie-banner {
    position: fixed;
    z-index: 1200;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.cookie-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 18px 20px;
}

.cookie-inner h2 {
    font-size: 1rem;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.cookie-inner p {
    margin: 0 0 14px;
    font-size: 0.87rem;
    color: #dddddd;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-btn {
    min-width: 120px;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
}

.btn-outline {
    display: inline-block;
    padding: 12px 26px;
    color: var(--white);
    background: transparent;
    border: 1px solid var(--white);
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--white);
    color: var(--dark-bg);
}

@media (max-width: 768px) {
    .cookie-banner {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

    .cookie-inner {
        padding: 16px;
    }

    .cookie-btn {
        flex: 1 1 100%;
        min-width: 0;
    }
}