/* =================================================================
   NORTHSTAR HEATING & COOLING — STYLESHEET

   TABLE OF CONTENTS:
    1.  CSS Custom Properties (design tokens / variables)
    2.  Reset & Base Styles
    3.  Typography Scale
    4.  Layout Utilities
    5.  Buttons
    6.  Header & Navigation
    7.  Hero Section
    8.  Trust Bar
    9.  Emergency Banner
    10. Services Section
    11. Service Area Section
    12. About Section
    13. Pricing Section
    14. Testimonials Section
    15. Gallery Section
    16. Contact Section
    17. Footer
    18. Back-to-Top Button
    19. Scroll Animations
    20. Media Queries (Tablet & Mobile)
================================================================= */


/* =================================================================
   1. CSS CUSTOM PROPERTIES
   Think of these like variables in programming — define once, use
   everywhere. Change a value here and it updates the whole site.
================================================================= */
:root {
    /* Brand Colors */
    --navy:          #1a2744;   /* Deep navy — primary brand color */
    --navy-dark:     #0d1b2a;   /* Darker navy — footer, dark backgrounds */
    --navy-light:    #243660;   /* Lighter navy — hover states */
    --orange:        #f47c20;   /* Warm orange — heating/energy accent */
    --orange-dark:   #d9650c;   /* Darker orange — hover states */
    --orange-light:  #ffa04d;   /* Lighter orange — backgrounds, footer text */
    --red-alert:     #c0392b;   /* Emergency red — banner */
    --white:         #ffffff;
    --off-white:     #f8f9fc;   /* Very light background — alternating sections */
    --light-gray:    #e9ecef;   /* Borders, dividers */
    --mid-gray:      #adb5bd;   /* Disabled/unavailable text */
    --text-dark:     #1a2027;   /* Primary body text */
    --text-gray:     #6c757d;   /* Secondary / muted text */

    /* Typography */
    --font-heading:  'Montserrat', sans-serif;  /* Bold, modern, professional */
    --font-body:     'Open Sans', sans-serif;   /* Clean, readable for body text */

    /* Layout */
    --section-pad:   80px;      /* Vertical padding for each section */
    --container-max: 1200px;    /* Max content width */
    --container-px:  24px;      /* Horizontal padding inside container */

    /* Shape */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;

    /* Shadows */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.16);

    /* Animation */
    --transition:  color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}


/* =================================================================
   2. RESET & BASE STYLES
   Browsers apply their own default styles which differ between them.
   A reset removes those defaults so we start from a consistent base.
================================================================= */
*, *::before, *::after {
    /* box-sizing: border-box means padding and borders are included
       in an element's width/height — makes layouts much easier. */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* scroll-behavior: smooth enables CSS-native smooth scrolling.
       We also add JS-based smooth scroll for offset with the sticky header. */
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes the small gap below inline images */
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul {
    list-style: none;
}


/* =================================================================
   3. TYPOGRAPHY SCALE
   clamp(min, preferred, max) — font scales fluidly with viewport width.
   This means we don't need as many media query font overrides.
================================================================= */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }


/* =================================================================
   4. LAYOUT UTILITIES
================================================================= */

/* The .container class centers content and limits its width.
   It's reused in every section. */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-px);
}

/* Every <section> gets vertical breathing room */
section {
    padding: var(--section-pad) 0;
}

/* Alternating section backgrounds — light/white pattern */
#services,
#pricing,
#gallery {
    background: var(--off-white);
}

#about,
#contact {
    background: var(--white);
}

/* Centered headline + intro paragraph above each section's content */
.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.section-header p {
    color: var(--text-gray);
    font-size: 1.05rem;
    margin-top: 12px;
}

/* Small pill label above section headings (e.g. "What We Do") */
.section-tag {
    display: inline-block;
    background: rgba(244, 124, 32, 0.12);
    color: var(--orange-dark);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}


/* =================================================================
   5. BUTTONS
   All buttons share the .btn base class, then get a modifier class
   for their specific style (e.g., .btn-primary, .btn-outline).
================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

/* Orange fill — main CTA */
.btn-primary {
    background: var(--orange);
    color: var(--white);
    border-color: var(--orange);
}
.btn-primary:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 124, 32, 0.4);
}

/* Navy outline */
.btn-outline {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn-outline:hover {
    background: var(--navy);
    color: var(--white);
    transform: translateY(-2px);
}

/* Orange button in header — slightly smaller */
.btn-cta {
    background: var(--orange);
    color: var(--white);
    border-color: var(--orange);
    padding: 10px 18px;
    font-size: 0.85rem;
}
.btn-cta:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
}

/* Hero secondary CTA — frosted glass look over dark background */
.btn-emergency-hero {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    border-color: var(--white);
    backdrop-filter: blur(4px);
}
.btn-emergency-hero:hover {
    background: var(--white);
    color: var(--navy);
    transform: translateY(-2px);
}

/* Used in the emergency banner */
.btn-emergency-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 0.85rem;
}
.btn-emergency-outline:hover {
    background: var(--white);
    color: var(--red-alert);
}

/* Full-width button — used in the contact form */
.btn-full {
    width: 100%;
    justify-content: center;
}


/* =================================================================
   6. HEADER & NAVIGATION
================================================================= */
#site-header {
    position: sticky;   /* Sticks to top of screen as user scrolls */
    top: 0;
    z-index: 1000;      /* High z-index keeps it above all other content */
    background: var(--navy);
    padding: 12px 0;
    transition: box-shadow 0.3s ease;
}

/* Shadow added by JS when page is scrolled */
#site-header.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Logo: SVG icon + text stack */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0; /* Don't let the logo compress */
}

.logo-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.logo-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.3px;
}

.logo-sub {
    font-size: 0.66rem;
    color: var(--orange-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Desktop nav — centered between logo and CTA button */
#main-nav {
    flex: 1; /* Takes up remaining space in the header */
}

#main-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#main-nav a {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

#main-nav a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: var(--transition);
}

/* Animate hamburger → ✕ when nav is open (JS adds .open class) */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Semi-transparent overlay behind mobile nav panel */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999;
}
.nav-overlay.active {
    display: block;
}


/* =================================================================
   7. HERO SECTION
   Full-width background image with a dark overlay.
   Left side: eyebrow tag, headline, subheadline, two CTAs.
   Right side: floating "Book Your Service" form card.
================================================================= */
#hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;

    /* Local HVAC photo as the full-width background */
    background-image: url('images/hero.jpg');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

/* Dark overlay — darker on the left so text is more readable */
#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.65) 55%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 1;
}

/* Container sits above the overlay via z-index */
#hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Flex row: text left, booking card right */
.hero-split {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 80px 0;
}

/* Left side — text content */
.hero-left {
    flex: 1;
    color: var(--white);
    max-width: 600px;
}

/* Right side — booking form card */
.hero-form-card {
    flex: 0 0 290px;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clips the navy header to the card's border-radius */
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* Navy header strip at the top of the card */
.hero-form-header {
    background: var(--navy);
    padding: 14px 22px;
    text-align: center;
}

.hero-form-header i {
    color: var(--orange);
    font-size: 1.2rem;
    display: block;
    margin-bottom: 4px;
}

.hero-form-header h3 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 2px;
}

.hero-form-header p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
}

/* Form fields inside the hero card */
.hero-form {
    padding: 14px 20px 0;
}

.hf-group {
    margin-bottom: 8px;
}

.hf-group input,
.hf-group select {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid var(--light-gray);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.hf-group input:focus,
.hf-group select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(244, 124, 32, 0.15);
}

/* Custom dropdown arrow */
.hf-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
    cursor: pointer;
}

/* Privacy note below the submit button */
.hf-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-gray);
    padding: 8px 20px 14px;
    text-align: center;
}

.hf-note i {
    color: var(--mid-gray);
    font-size: 0.68rem;
}

/* Success state shown inside the hero form card after submission */
.hf-success {
    padding: 24px 28px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.hf-success .fa-circle-check {
    font-size: 2.4rem;
    color: #27ae60;
}

.hf-success p {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}

/* Small orange pill label above the headline */
.hero-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.hero-left h1 {
    color: var(--white);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero-sub {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    line-height: 1.75;
    max-width: 500px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}


/* =================================================================
   8a. TRUST CARDS
   Three feature cards below the stats bar — license, pricing, 24/7.
   Horizontal icon + text layout. Sits between trust bar and emergency banner.
================================================================= */
.trust-cards {
    background: var(--off-white);
    border-bottom: 1px solid var(--light-gray);
    padding: 36px 0;
}

.trust-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.trust-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.trust-card:hover {
    border-color: var(--orange-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.trust-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(244, 124, 32, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--orange);
    transition: var(--transition);
}

.trust-card:hover .trust-card-icon {
    background: var(--orange);
    color: var(--white);
}

.trust-card h4 {
    font-size: 0.98rem;
    margin-bottom: 6px;
    color: var(--navy);
}

.trust-card p {
    font-size: 0.84rem;
    color: var(--text-gray);
    line-height: 1.6;
}


/* =================================================================
   8. TRUST BAR
   Thin strip directly below the hero with 4 key stats.
================================================================= */
.trust-bar {
    background: var(--white);
    border-top: 3px solid var(--orange);
    border-bottom: 1px solid var(--light-gray);
    padding: 18px 0;
}

.trust-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.trust-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 36px;
    text-align: center;
    position: relative;
}

/* Vertical divider between stats using a pseudo-element */
.trust-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--light-gray); /* Visible on the white background */
}

.stat-stars {
    color: #ffd700; /* Gold stars */
    font-size: 0.75rem;
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-gray); /* Dark text now that background is white */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}


/* =================================================================
   9. EMERGENCY BANNER
================================================================= */
.emergency-banner {
    background: linear-gradient(135deg, #b03020, var(--red-alert));
    padding: 15px 0;
    color: var(--white);
}

.emergency-banner .container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.emergency-banner .fa-triangle-exclamation {
    font-size: 1.3rem;
    flex-shrink: 0;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.emergency-banner p {
    flex: 1;
    font-size: 0.95rem;
    min-width: 200px;
}


/* =================================================================
   10. SERVICES SECTION
================================================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--orange-light);
}

/* Icon box — changes from orange-tinted to solid orange on hover */
.service-icon {
    width: 54px;
    height: 54px;
    background: rgba(244, 124, 32, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: var(--transition);
}

.service-icon i {
    font-size: 1.4rem;
    color: var(--orange);
    transition: var(--transition);
}

.service-card:hover .service-icon {
    background: var(--orange);
}

.service-card:hover .service-icon i {
    color: var(--white);
}

.service-card h3 {
    margin-bottom: 10px;
}

.service-card p {
    color: var(--text-gray);
    font-size: 0.92rem;
    flex: 1; /* Pushes the link to the bottom of the card */
    margin-bottom: 20px;
    line-height: 1.65;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--orange);
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    transition: var(--transition);
    margin-top: auto;
}

.service-link:hover {
    color: var(--orange-dark);
    gap: 10px; /* Arrow moves right on hover */
}


/* =================================================================
   11. SERVICE AREA SECTION
   Dark section so it visually separates from services above.
================================================================= */
#service-area {
    background: var(--navy-dark);
    color: var(--white);
}

/* Override defaults for dark background */
#service-area .section-tag {
    background: rgba(244, 124, 32, 0.2);
    color: var(--orange-light);
}

#service-area h2 {
    color: var(--white);
}

#service-area .section-header p {
    color: rgba(255, 255, 255, 0.65);
}

/* Location pill chips */
.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 36px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 9px 20px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.87rem;
    font-weight: 600;
    transition: var(--transition);
}

.chip:hover {
    background: rgba(244, 124, 32, 0.2);
    border-color: var(--orange);
    color: var(--orange-light);
}

.chip i {
    color: var(--orange);
    font-size: 0.78rem;
}

/* Rounded frame around the Google Maps iframe */
.map-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
}

.map-wrapper iframe {
    display: block;
}


/* =================================================================
   12. ABOUT SECTION
================================================================= */
.about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.about-image {
    position: relative; /* Needed so the .about-badge can be positioned relative to this */
}

.about-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* "Est. 2008" badge sits in the bottom-right corner of the image */
.about-badge {
    position: absolute;
    bottom: -18px;
    right: -18px;
    background: var(--orange);
    color: var(--white);
    border-radius: var(--radius-md);
    padding: 16px 22px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.badge-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.badge-label {
    font-size: 0.72rem;
    opacity: 0.88;
    display: block;
    margin-top: 2px;
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-text h2 {
    margin-top: 4px;
}

.about-text p {
    color: var(--text-gray);
    line-height: 1.8;
}

/* 2x2 grid of certification badges */
.cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.cert-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    transition: var(--transition);
}

.cert-badge:hover {
    border-color: var(--orange);
    background: rgba(244, 124, 32, 0.05);
}

.cert-badge i {
    color: var(--orange);
    font-size: 1rem;
    flex-shrink: 0;
}


/* =================================================================
   13. PRICING SECTION
================================================================= */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.pricing-card {
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: var(--radius-md);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    transition: var(--transition);
}

.pricing-card:hover {
    border-color: var(--navy);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Featured card — dark navy, slightly scaled up for visual hierarchy */
.pricing-featured {
    background: var(--navy);
    border-color: var(--navy);
    transform: scale(1.04);
    box-shadow: var(--shadow-lg);
}

.pricing-featured:hover {
    border-color: var(--orange);
    transform: scale(1.04) translateY(-3px);
}

/* Override text colors inside featured card */
.pricing-featured h3,
.pricing-featured .price-period,
.pricing-featured .price-desc {
    color: rgba(255, 255, 255, 0.8);
}

.pricing-featured .pricing-features li {
    color: rgba(255, 255, 255, 0.8);
}

.pricing-featured .price-amount {
    color: var(--orange);
}

/* "Most Popular" ribbon */
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 20px;
    white-space: nowrap;
}

.pricing-header h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 8px 0 4px;
}

.price-amount {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.price-period {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.price-desc {
    font-size: 0.84rem;
    color: var(--text-gray);
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1; /* Pushes button to the bottom of the card */
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.pricing-features li i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.78rem;
}

.pricing-features .fa-check { color: #27ae60; }
.pricing-features .fa-xmark { color: var(--mid-gray); }

.feature-unavailable {
    opacity: 0.45;
}

.pricing-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-gray);
    font-size: 0.85rem;
    margin-top: 28px;
}

.pricing-note a {
    color: var(--orange);
    font-weight: 600;
}

.pricing-note a:hover {
    text-decoration: underline;
}

.pricing-service-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 40px;
    margin-top: 20px;
    padding: 20px 28px;
    background: rgba(26, 39, 68, 0.04);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-dark);
}

.pricing-service-strip i {
    color: var(--orange);
    margin-right: 6px;
}

.pricing-service-strip p {
    width: 100%;
    text-align: center;
    color: var(--text-gray);
    font-size: 0.8rem;
    margin-top: 6px;
}


/* =================================================================
   14. TESTIMONIALS SECTION
================================================================= */
#testimonials {
    background: var(--off-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: var(--transition);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.stars {
    display: flex;
    gap: 3px;
    color: #f59e0b; /* Amber/gold for stars */
    font-size: 0.88rem;
}

.review-text {
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.8;
    flex: 1;
    font-style: italic;
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--light-gray);
}

/* Avatar circle with reviewer initials */
.reviewer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.reviewer-name {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navy);
}

.reviewer-location {
    font-size: 0.76rem;
    color: var(--text-gray);
    margin-top: 2px;
}


/* =================================================================
   15. GALLERY SECTION
================================================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

/* aspect-ratio enforces a consistent image shape regardless of photo dimensions */
.gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    grid-column: span 2;
}

/* Center the last two items when 5 items fill a 6-column grid (3+2 layout) */
.gallery-item:nth-child(4) { grid-column: 2 / span 2; }
.gallery-item:nth-child(5) { grid-column: 4 / span 2; }

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crops image to fill its container without distorting */
    transition: transform 0.45s ease;
}

/* Slight zoom on hover */
.gallery-item:hover img {
    transform: scale(1.06);
}

/* Caption overlay — fades in on hover */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 27, 42, 0.82) 0%, transparent 55%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay p {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
}


/* =================================================================
   16. CONTACT SECTION
================================================================= */
.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 64px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info h2 {
    margin-top: 6px;
}

.contact-info > p {
    color: var(--text-gray);
    line-height: 1.75;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.contact-detail {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Orange icon box for each contact detail */
.contact-detail > i {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(244, 124, 32, 0.1);
    color: var(--orange);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    margin-top: 2px;
}

.detail-label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.contact-detail a {
    color: var(--navy);
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-detail a:hover {
    color: var(--orange);
}

.contact-detail p {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin: 1px 0;
}

/* ——— Contact Form ——— */
#contact-form {
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-lg);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Side-by-side field pairs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Shared styles for all form inputs */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--light-gray);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Remove browser default styling from select */
    appearance: none;
    -webkit-appearance: none;
}

/* Orange focus ring on all inputs */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(244, 124, 32, 0.15);
}

/* Custom dropdown arrow for <select> — since we removed the default */
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 110px;
}

.form-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-gray);
}

/* Success state shown after successful Formspree submission */
.form-success {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.form-success .fa-circle-check {
    font-size: 3rem;
    color: #27ae60;
}

.form-success h3 {
    font-size: 1.5rem;
}

.form-success p {
    color: var(--text-gray);
    max-width: 360px;
    line-height: 1.6;
}

.form-success a {
    color: var(--orange);
    font-weight: 600;
}

/* Error message shown if Formspree submission fails */
.form-error {
    color: var(--red-alert);
    font-size: 0.85rem;
    text-align: center;
    padding: 10px 14px;
    background: rgba(192, 57, 43, 0.08);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(192, 57, 43, 0.2);
}


/* =================================================================
   17. FOOTER
================================================================= */
#footer {
    background: var(--navy-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 64px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Footer logo — white text over dark background */
.logo-footer .logo-name { color: var(--white); }
.logo-footer .logo-sub  { color: var(--orange-light); }

.footer-tagline {
    font-size: 0.88rem;
    line-height: 1.75;
    max-width: 280px;
}

/* Social icon buttons */
.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--orange);
    color: var(--white);
    transform: translateY(-2px);
}

/* Footer column headings */
.footer-col h4 {
    color: var(--white);
    font-size: 0.82rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

/* Footer nav links */
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col ul a {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.6);
    transition: var(--transition);
}

.footer-col ul a:hover {
    color: var(--orange);
    padding-left: 4px;
}

/* Contact detail list in footer */
.footer-contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-contact i {
    color: var(--orange);
    font-size: 0.78rem;
    margin-top: 4px;
    flex-shrink: 0;
}

.footer-contact a { color: rgba(255, 255, 255, 0.6); }
.footer-contact a:hover { color: var(--orange); }
.footer-contact span { line-height: 1.55; }

.footer-hours {
    margin-top: 18px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.9;
}

.footer-hours strong { color: var(--white); }

.emergency-note {
    color: var(--orange-light) !important;
    font-weight: 700;
}

/* Footer bottom bar */
.footer-bottom {
    padding: 22px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.35);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.45);
    transition: var(--transition);
}

.footer-bottom a:hover { color: var(--orange); }

.license-numbers { font-size: 0.7rem; }


/* =================================================================
   18. BACK-TO-TOP BUTTON
   Fixed position, shown only when user has scrolled 400px (via JS).
================================================================= */
#back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    width: 44px;
    height: 44px;
    background: var(--orange);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    box-shadow: var(--shadow-md);

    /* Hidden by default — JS adds .visible class */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    background: var(--orange-dark);
}


/* =================================================================
   19. SCROLL ANIMATIONS
   Elements with .fade-up start invisible and shifted down.
   JS uses IntersectionObserver to add .visible when they enter
   the viewport, triggering the CSS transition.
================================================================= */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =================================================================
   20. MEDIA QUERIES
   Mobile-first adjustments. We use max-width queries here since
   this is a desktop-first design. "Tablet" = 1024px, "Mobile" = 768px.
================================================================= */

/* ——— Tablet: 769px–1024px ——— */
@media (max-width: 1024px) {
    :root {
        --section-pad: 64px;
    }

    .services-grid,
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .about-inner {
        gap: 44px;
    }

    .contact-inner {
        gap: 44px;
    }

    .pricing-featured {
        transform: scale(1.02);
    }
    .pricing-featured:hover {
        transform: scale(1.02) translateY(-3px);
    }
}

/* ——— Mobile: under 768px ——— */
@media (max-width: 768px) {
    :root {
        --section-pad: 52px;
        --container-px: 18px;
    }

    /* Mobile nav: slides in from the right as a full-height panel */
    #main-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 275px;
        background: var(--navy-dark);
        z-index: 1000;
        padding: 80px 24px 32px;
        transform: translateX(110%); /* Start off-screen to the right */
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: -8px 0 30px rgba(0,0,0,0.3);
    }

    /* JS adds .open to slide it into view */
    #main-nav.open {
        transform: translateX(0);
    }

    #main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #main-nav a {
        font-size: 1rem;
        padding: 11px 16px;
        width: 100%;
        display: block;
        border-radius: var(--radius-sm);
    }

    /* Show hamburger button on mobile */
    .nav-toggle {
        display: flex;
    }

    /* Hide phone number text in header CTA on small screens (keep icon) */
    .cta-text {
        display: none;
    }

    /* ——— Hero ——— */
    /* Stack vertically: text on top, booking form below */
    #hero {
        min-height: auto;
        align-items: flex-start;
    }

    .hero-split {
        flex-direction: column;
        padding: 52px 0 40px;
        gap: 32px;
    }

    .hero-left {
        max-width: 100%;
    }

    /* Form card goes full-width below the text on mobile */
    .hero-form-card {
        flex: none;
        width: 100%;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ——— Trust Cards ——— */
    .trust-cards-grid {
        grid-template-columns: 1fr;
    }

    /* ——— Trust Bar ——— */
    .trust-stat {
        padding: 10px 18px;
        min-width: 50%;
    }

    /* Remove dividers after every other stat */
    .trust-stat:nth-child(even)::after {
        display: none;
    }

    /* ——— Emergency Banner ——— */
    .emergency-banner .container {
        flex-direction: column;
        text-align: center;
    }

    /* ——— Services ——— */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* ——— About ——— */
    .about-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-badge {
        bottom: 12px;
        right: 12px;
    }

    .cert-grid {
        grid-template-columns: 1fr;
    }

    /* ——— Pricing ——— */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-featured {
        transform: none;  /* Remove scale on mobile — looks odd in single column */
        order: -1;        /* Featured card moves to the top */
    }

    .pricing-featured:hover {
        transform: translateY(-3px);
    }

    /* ——— Testimonials ——— */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* ——— Gallery ——— */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-item,
    .gallery-item:nth-child(4),
    .gallery-item:nth-child(5) {
        grid-column: auto;
    }

    /* ——— Contact ——— */
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    #contact-form {
        padding: 24px 18px;
    }

    /* ——— Footer ——— */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* ——— Back to Top ——— */
    #back-to-top {
        bottom: 16px;
        right: 16px;
    }
}

/* ——— Very Small Screens: under 480px ——— */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .gallery-item,
    .gallery-item:nth-child(4),
    .gallery-item:nth-child(5) {
        grid-column: auto;
    }

    .trust-stat {
        min-width: 100%;
    }

    .trust-stat::after {
        display: none !important;
    }

    .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }
}