/********** Template CSS **********/
:root {
    --primary: #F0A93E;     /* Solar gold — CTA buttons, go-home */
    --secondary: #D9603A;   /* Ember clay — hover states, secondary bg */
    --accent: #D9603A;      /* Ember clay — icon highlights, link underlines, borders */
    --light: #F6F1E7;       /* Warm sand — section backgrounds */
    --dark: #101B2D;        /* Ink navy — nav, footer, headings, hero overlay */
    --text-body: #4A5A68;   /* Slate — body/paragraph copy */
}

/* =============================================
   Bootstrap utility overrides — driven by CSS vars
   ============================================= */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--accent) !important; }  /* ember clay for icons & decorative links */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #101B2D !important;  /* ink navy text on gold — passes contrast */
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #F6F1E7 !important;  /* warm sand text on ember clay — passes contrast */
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

/* Override the generic btn::after underline from primary to accent */
.btn::after {
    background: var(--accent);
}
.btn.btn-primary::after {
    background: var(--dark);
}

/* bg-dark override for nav, footer */
.bg-dark { background-color: var(--dark) !important; }
.text-dark { color: var(--dark) !important; }
.border-primary { border-color: var(--accent) !important; }

/* Contrast fix: gold bg requires dark text — never white on gold */
.bg-primary.text-white,
.bg-primary .text-white {
    color: #101B2D !important;
}

.pt-6 {
    padding-top: 90px;
}

.pb-6 {
    padding-bottom: 90px;
}

.py-6 {
    padding-top: 90px;
    padding-bottom: 90px;
}

/* Scale section spacing down on smaller screens so content doesn't
   feel over-padded and pages aren't needlessly long on mobile */
@media (max-width: 991.98px) {
    .pt-6 { padding-top: 60px; }
    .pb-6 { padding-bottom: 60px; }
    .py-6 { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 575.98px) {
    .pt-6 { padding-top: 45px; }
    .pb-6 { padding-bottom: 45px; }
    .py-6 { padding-top: 45px; padding-bottom: 45px; }
}

/* Prevent any residual layout from creating horizontal scroll on mobile.
   Use clip on html (more aggressive than hidden — clips at border box,
   no scroll container created) and hidden on body as fallback for older
   browsers that don't support clip. */
html {
    overflow-x: clip;
}

body {
    overflow-x: hidden;
}

/* container-fluid px-5 (3rem/48px each side) is far too much padding on
   phones/tablets, it eats a huge chunk of the available width */
@media (max-width: 991.98px) {
    .px-5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Feature checklist ($0 Down callout section)
   Icon + text used to be inline in a <p> (icon relying on vertical-align
   from the text baseline). Different browsers/devices calculate an icon
   font's baseline differently — Samsung Internet and Android Chrome in
   particular render Font Awesome's glyphs a few pixels off from the
   surrounding bold text, which is why the checkmarks looked unaligned on
   Samsung phones even though it looked fine on desktop/iOS.
   Using flexbox instead removes the dependency on font baseline
   metrics entirely, so the icon lines up with the text the same way on
   every browser and every screen size. */
.check-list {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    text-align: left;
}

.check-item i {
    flex: 0 0 auto;
    line-height: 1.4;
    position: relative;
    top: 0.05em;
}

.check-item span {
    flex: 1 1 auto;
}

@media (max-width: 575.98px) {
    .check-item {
        font-size: 1rem;
        gap: 0.6rem;
        margin-bottom: 0.85rem;
    }
}

.btn {
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
}

.btn::after {
    position: absolute;
    content: "";
    width: 0;
    height: 5px;
    bottom: -1px;
    left: 50%;
    background: var(--primary);
    transition: .5s;
}

.btn.btn-primary::after {
    background: var(--dark);
}

.btn:hover::after,
.btn.active::after {
    width: 50%;
    left: 25%;
}

.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    left: 50%;
    bottom: 0;
    margin-left: -22px;
    border-radius: 0;
    z-index: 99;
}

.bg-dark-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

.bg-light-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

/* Remove the busy dotted/grid texture on mobile — it reads as visual noise
   on small screens where the 3px pattern is disproportionately dense */
@media (max-width: 767.98px) {
    .bg-light-radial,
    .bg-dark-radial {
        background-image: none !important;
    }
}

/* =============================================
   Navbar — original layout + mobile compact
   ============================================= */

/* Nav links — desktop */
.navbar-dark .navbar-nav .nav-link {
    position: relative;
    padding: 35px 15px;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--light);
    white-space: nowrap;
    outline: none;
    transition: .5s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--accent);
}

/* Collapsed nav links — below lg breakpoint */
@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }
}

/* Brand / logo — fluid sizing so it never forces overflow */
.navbar-brand h1,
.footer h2.display-4 {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
    white-space: nowrap;
    text-decoration: none;
    border: none;
}

/* =============================================
   Mobile compact header (below 480px)
   ============================================= */

/* Reduce header vertical padding so it takes less screen real estate */
@media (max-width: 479.98px) {
    .navbar.py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* Shrink logo icon + text so it crowds the hamburger less */
@media (max-width: 479.98px) {
    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .navbar-brand h1 {
        font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    }

    .navbar-brand i {
        font-size: 0.9em;
    }
}

/* Shrink the hamburger to match the more compact header */
@media (max-width: 479.98px) {
    .navbar-toggler {
        padding: 0.3rem 0.55rem;
        font-size: 1rem;
    }

    .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }
}

/* Ensure a small gap between logo and hamburger so they don't collide.
   Bootstrap's navbar already has auto margins, but at very narrow widths
   the brand can grow wide enough to touch the toggler. Adding a small
   min-gap on the brand's right side prevents overlap. */
@media (max-width: 479.98px) {
    .navbar-brand {
        margin-right: 0.5rem !important;
    }
}

/* =============================================
   Hero Section (replaces old carousel)
   ============================================= */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    max-width: 900px;
    margin: clamp(1rem, 3vw, 2rem);
    background: rgba(16, 27, 45, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-headline {
    font-size: clamp(1.75rem, 5vw, 3.25rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-sub {
    font-size: clamp(0.95rem, 2.5vw, 1.3rem);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-trust-text {
    margin-top: 1rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Hero CTA button — orange primary */
.hero-content .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.hero-content .btn-primary:hover,
.hero-content .btn-primary:focus {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Hero: tablets and large phones */
@media (max-width: 1024px) {
    .hero-section {
        min-height: 75vh;
    }
}

/* Tablets / landscape phones — shift crop down so the solar panels
   and family are visible rather than mostly sky */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }

    .hero-bg img {
        object-position: center 60%;
    }

    .hero-content {
        padding: 1.25rem 1rem;
        margin: 0.75rem;
    }

    .hero-sub {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
}

/* Portrait phones — tighter crop, smaller type, reduced padding so the
   overlay box doesn't swallow the entire hero image */
@media (max-width: 480px) {
    .hero-section {
        min-height: 65vh;
    }

    .hero-bg img {
        object-position: center 65%;
    }

    .hero-headline {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    .hero-sub {
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 0.75rem;
    }

    .hero-trust-text {
        margin-top: 0.5rem;
        font-size: 0.82rem;
    }

    .hero-content {
        padding: 1rem 0.85rem;
        margin: 0.5rem;
        border-radius: 8px;
    }

    .hero-content .btn {
        min-height: 48px;
        font-size: 1rem;
    }
}

/* =============================================
   Trust Badge
   ============================================= */
.trust-badge {
    display: inline-flex;
    align-items: center;
    background: var(--dark);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
}

.trust-badge i {
    color: var(--accent);
    font-size: 1.25rem;
}

/* Apply section trust line */
.apply-trust-line {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--dark);
}

.apply-trust-line i {
    font-size: 1.1rem;
}

/* =============================================
   Page Header (preserved from template)
   ============================================= */
.page-header {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(16, 27, 45, .7), rgba(16, 27, 45, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

/* Full-width visual break behind the services grid */
.services-band {
    background-color: var(--light);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/*** Service ***/
.service-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Ensure service images are responsive — fixed 6:5 aspect ratio */
.service-item .img-fluid {
    width: 100%;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

/* Fixed min-heights on title and description for consistent alignment
   across all 6 cards regardless of text length */
.service-item h3 {
    min-height: 3.5rem;
}

.service-item p {
    min-height: 5.5rem;
}

/* Text area fills remaining space after image */
.service-item .position-relative {
    flex-grow: 1;
}

.service-icon {
    position: relative;
    margin: -50px 0 25px 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: #FFFFFF;
    border-radius: 100px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transition: .5s;
}

.service-item:hover .service-icon {
    color: #F6F1E7;
    background: var(--accent);
}

/* Mobile: scale service icon smaller so it doesn't dominate the card */
@media (max-width: 575.98px) {
    .service-icon {
        width: 75px;
        height: 75px;
        margin: -38px 0 18px 0;
    }

    .service-icon i {
        font-size: 2x;
    }
}

.portfolio-item {
    margin-bottom: 60px;
}

.portfolio-title {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    padding: 0 30px;
    right: 30px;
    left: 30px;
    bottom: -60px;
    background: #FFFFFF;
    z-index: 3;
}

.portfolio-btn {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    font-size: 120px;
    line-height: 0;
    transition: .1s;
    transition-delay: .3s;
    z-index: 2;
    opacity: 0;
}

.portfolio-item:hover .portfolio-btn {
    opacity: 1;
}

.portfolio-box::before,
.portfolio-box::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    transition: .5s;
    z-index: 1;
    background: rgba(4, 15, 40, .7);
}

.portfolio-box::before {
    left: 0;
}

.portfolio-box::after {
    right: 0;
}

.portfolio-item:hover .portfolio-box::before {
    left: 0;
    width: 50%;
}

.portfolio-item:hover .portfolio-box::after {
    right: 0;
    width: 50%;
}

@media (min-width: 992px) {
    .testimonial,
    .contact-form {
        margin-left: -90px;
    }
}

/* Footer brand — fluid size to match navbar brand */
.footer h2.display-4 {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .footer::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        background: var(--accent)
    }
}

.footer-shape::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 100%;
    top: 0;
    left: -40px;
    background: var(--accent);
    transform: skew(40deg);
}





/* =============================================
   SERVICE CARDS — MOBILE GRID
   ============================================= */

/* Ensure the 3-col grid collapses cleanly */
@media (max-width: 767.98px) {
    .row.g-4 > [class*="col-md-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Two columns on tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .row.g-4 > [class*="col-lg-4"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* =============================================
   ABOUT SECTION — MOBILE TWEAKS
   ============================================= */

@media (max-width: 575.98px) {
    /* The $0 circle callout — shrink it a bit on phones */
    #about .rounded-circle {
        width: 120px !important;
        height: 120px !important;
    }

    #about .rounded-circle .display-3 {
        font-size: 2rem;
    }

    #about .rounded-circle .small {
        font-size: 0.65rem;
    }
}


/* =============================================
   GENERAL MOBILE TWEAKS
   ============================================= */

/* Fix horizontal overflow: Bootstrap's gx-5 / g-5 set --bs-gutter-x: 3rem
   (48px).  The row applies a negative margin of half that (−24px) to offset
   column padding.  On mobile we reduce parent px-5 to 1rem (16px), so the
   row's −24px margin extends 8px past each viewport edge, creating a thin
   horizontal scrollbar.  Shrinking the gutter on mobile fixes this. */
@media (max-width: 575.98px) {
    .gx-5,
    .g-5 {
        --bs-gutter-x: 1rem;
    }
}

/* Belt-and-suspenders: clip overflow on every major section so stray
   decorative elements, pseudo-elements, or box-shadows can never cause
   a horizontal scrollbar on any screen size. */
.container-fluid,
.container-xxl,
.container {
    overflow-x: clip;
}

/* Ensure all headings use fluid sizing so they don't overflow on narrow screens */
.display-5 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.display-3 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

/* Minimum tap target for all CTA buttons */
.btn-primary,
.btn-primary.py-3 {
    min-height: 48px;
    min-width: 48px;
}

/* Reduce heading weight slightly on mobile so it doesn't feel heavy on small screens */
@media (max-width: 575.98px) {
    .display-5 {
        font-weight: 600;
    }
}


/* =============================================
   LEGAL PAGES — Content + Sticky Go Home Button
   ============================================= */

/* Legal page content styling */
.legal-content h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    color: var(--dark);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
}

.legal-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 1rem;
}

.legal-content ul {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-content ul li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 600;
}

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

/* Sticky Go Home button — fixed to bottom center, always visible */
.go-home-btn {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    display: inline-block;
    padding: 10px 28px;
    background: var(--primary);
    color: #101B2D;  /* ink navy on gold — meets contrast */
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
    white-space: nowrap;
}

.go-home-btn:hover {
    background: var(--dark);
    color: #F6F1E7;  /* warm sand on ink navy — meets contrast */
}