@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ====================
   TEXAS ROOF BUILDERS
   ==================== */

/* CSS Variables / Design Tokens */
:root {
    /* Primary Colors - Slate Blue */
    --primary: #1f3949;
    --primary-10: #2c4a5f;
    --primary-20: #152a38;
    --primary-30: #0f202b;
    --primary-40: #0a161f;

    /* Secondary/Accent - Burnt Orange */
    --secondary: #E07A2D;
    --secondary-dark: #c96a20;
    --secondary-light: #e89150;

    /* Accent - Brick Red */
    --brick-red: #8B2332;
    --brick-red-dark: #6d1b27;
    --brick-red-light: #a52d3d;

    /* Neutrals */
    --white: #ffffff;
    --off-white: #FAFAFA;
    --gray: #f5f5f5;
    --gray-20: #e8eaeb;
    --gray-30: #dde1e3;
    --gray-80: #6b7280;

    /* Typography */
    --font-heading: 'Libre Baskerville', serif;
    --font-heading-weight: 700;
    --font-body: 'Inter', sans-serif;
    /* Corrected from user input to ensure valid CSS */

    /* Spacing */
    --container-max: 1370px;
    --container-narrow: 750px;
    --section-padding: clamp(3rem, 8vw, 6rem);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Background Patterns */
    --pattern-svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="116" viewBox="0 0 116 116"%3E%3Cdefs%3E%3Cpath id="a" d="m0 49.241.985.984L49.241 1.97l48.256 48.255.985-.984L49.241 0z"/%3E%3Cpath id="c" d="m0 39.392.985.985L39.392 1.97l38.407 38.407.985-.985L39.392 0z"/%3E%3Cpath id="e" d="m0 29.544.985.986 28.56-28.56 28.56 28.56.985-.986L29.545 0z"/%3E%3Cpath id="g" d="m0 19.696.985.985L19.696 1.97l18.711 18.711.985-.985L19.696 0z"/%3E%3Cpath id="i" d="m0 9.849.983.985L9.847 1.97l8.864 8.864.985-.985L9.847 0z"/%3E%3Cpath id="k" d="m0 49.239.985.985L49.241 1.968l48.256 48.256.985-.985L49.241 0z"/%3E%3Cpath id="m" d="m0 39.392.985.985L39.392 1.968l38.407 38.409.985-.985L39.392 0z"/%3E%3Cpath id="o" d="m0 29.543.985.985L29.545 1.97l28.56 28.558.985-.985L29.545 0z"/%3E%3Cpath id="q" d="m0 49.241.985.985L49.241 1.97l48.256 48.256.983-.985L49.241 0z"/%3E%3Cpath id="s" d="m0 39.394.984.983L39.393 1.97 77.8 40.377l.985-.983L39.393 0z"/%3E%3Cpath id="u" d="m0 29.545.985.985 28.56-28.56 28.558 28.56.985-.985L29.545 0z"/%3E%3Cpath id="w" d="m0 19.696.983.983L19.696 1.968l18.711 18.711.985-.983L19.696 0z"/%3E%3Cpath id="y" d="m0 9.847.985.985 8.864-8.863 8.862 8.863.985-.985L9.849 0z"/%3E%3Cpath id="A" d="m0 49.241.985.985L49.239 1.97l48.256 48.256.985-.985L49.239 0z"/%3E%3Cpath id="C" d="m0 39.394.985.983L39.392 1.97l38.409 38.407.985-.983L39.392 0z"/%3E%3Cpath id="E" d="m0 29.545.985.985L29.543 1.97l28.559 28.56.986-.985L29.543 0z"/%3E%3Cpath id="G" d="m0 19.696.985.983L19.696 1.968l18.713 18.711.983-.983L19.696 0z"/%3E%3Cpath id="I" d="m0 9.847.985.985 8.862-8.863 8.864 8.863.984-.985L9.847 0z"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd" %3E%3Cpath fill="%23ffffff" d="M10.23.064 58.486-48.19 106.742.064l.985-.983L58.486-50.16 9.245-.919z"/%3E%3Cg transform="translate(9.245 -50.16)"%3E%3Cmask id="b" fill="%23fff"%3E%3Cuse xlink:href="%23a"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23b)" d="M0 50.224h98.482V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m19.094 8.928.985.985 38.407-38.407L96.893 9.913l.985-.985-39.392-39.392z"/%3E%3Cg transform="translate(19.094 -30.464)"%3E%3Cmask id="d" fill="%23fff"%3E%3Cuse xlink:href="%23c"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23d)" d="M0 40.377h78.784V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m87.045 19.762.985-.985-29.545-29.545L28.94 18.777l.985.985 28.56-28.56z"/%3E%3Cg transform="translate(28.94 -10.768)"%3E%3Cmask id="f" fill="%23fff"%3E%3Cuse xlink:href="%23e"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23f)" d="M0 30.53h59.09V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m58.486 10.898 18.711 18.711.985-.985L58.486 8.928 38.79 28.624l.985.985z"/%3E%3Cg transform="translate(38.79 8.928)"%3E%3Cmask id="h" fill="%23fff"%3E%3Cuse xlink:href="%23g"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23h)" d="M0 20.681h39.392V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m58.486 30.594 8.864 8.864.985-.985-9.849-9.849-9.847 9.849.983.985z"/%3E%3Cg transform="translate(48.639 28.624)"%3E%3Cmask id="j" fill="%23fff"%3E%3Cuse xlink:href="%23i"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23j)" d="M0 10.834h19.696V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m10.23 116.272 48.256-48.256 48.256 48.256.985-.985-49.241-49.239-49.241 49.239z"/%3E%3Cg transform="translate(9.245 66.048)"%3E%3Cmask id="l" fill="%23fff"%3E%3Cuse xlink:href="%23k"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23l)" d="M0 50.224h98.482V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="M97.878 125.136 58.486 85.744l-39.392 39.392.985.985 38.407-38.409 38.407 38.409z"/%3E%3Cg transform="translate(19.094 85.744)"%3E%3Cmask id="n" fill="%23fff"%3E%3Cuse xlink:href="%23m"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23n)" d="M0 40.377h78.784V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="M88.031 134.983 58.486 105.44l-29.545 29.543.985.985 28.56-28.558 28.56 28.558z"/%3E%3Cg transform="translate(28.94 105.44)"%3E%3Cmask id="p" fill="%23fff"%3E%3Cuse xlink:href="%23o"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23p)" d="M0 30.528h59.09V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="M-47.873 58.169.383 9.913l48.256 48.256.983-.985L.383 7.943l-49.241 49.241z"/%3E%3Cg transform="translate(-48.858 7.943)"%3E%3Cmask id="r" fill="%23fff"%3E%3Cuse xlink:href="%23q"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23r)" d="M0 50.226h98.48V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m-39.009 67.033.983.983L.383 29.609 38.79 68.016l.985-.983L.383 27.639z"/%3E%3Cg transform="translate(-39.01 27.639)"%3E%3Cmask id="t" fill="%23fff"%3E%3Cuse xlink:href="%23s"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23t)" d="M.001 40.377h78.784V0H.001z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m28.941 77.865.985-.985L.383 47.335-29.162 76.88l.985.985 28.56-28.56z"/%3E%3Cg transform="translate(-29.163 47.335)"%3E%3Cmask id="v" fill="%23fff"%3E%3Cuse xlink:href="%23u"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23v)" d="M0 30.53h59.088V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m.383 69.001 18.711 18.711.985-.983L.383 67.033l-19.696 19.696.983.983z"/%3E%3Cg transform="translate(-19.313 67.033)"%3E%3Cmask id="x" fill="%23fff"%3E%3Cuse xlink:href="%23w"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23x)" d="M0 20.679h39.392V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m.383 88.697 8.862 8.864.985-.985-9.847-9.847-9.849 9.847.985.985z"/%3E%3Cg transform="translate(-9.466 86.729)"%3E%3Cmask id="z" fill="%23fff"%3E%3Cuse xlink:href="%23y"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23z)" d="M0 10.832h19.696V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m68.334 58.169 48.254-48.256 48.256 48.256.985-.985-49.241-49.241-49.239 49.241z"/%3E%3Cg transform="translate(67.35 7.943)"%3E%3Cmask id="B" fill="%23fff"%3E%3Cuse xlink:href="%23A"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23B)" d="M0 50.226h98.48V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m155.982 67.033-39.394-39.394-39.392 39.394.985.983 38.407-38.407 38.409 38.407z"/%3E%3Cg transform="translate(77.197 27.639)"%3E%3Cmask id="D" fill="%23fff"%3E%3Cuse xlink:href="%23C"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23D)" d="M0 40.377h78.786V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m146.133 76.88-29.545-29.545L87.045 76.88l.985.985 28.558-28.56 28.56 28.56z"/%3E%3Cg transform="translate(87.046 47.335)"%3E%3Cmask id="F" fill="%23fff"%3E%3Cuse xlink:href="%23E"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23F)" d="M0 30.53h59.088V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m136.285 86.729-19.696-19.696-19.696 19.696.985.983 18.711-18.711 18.713 18.711z"/%3E%3Cg transform="translate(96.892 67.033)"%3E%3Cmask id="H" fill="%23fff"%3E%3Cuse xlink:href="%23G"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23H)" d="M0 20.679h39.392V0H0z"/%3E%3C/g%3E%3Cpath fill="%23ffffff" d="m126.437 96.576-9.849-9.847-9.847 9.847.985.985 8.862-8.864 8.864 8.864z"/%3E%3Cg transform="translate(106.741 86.729)"%3E%3Cmask id="J" fill="%23fff"%3E%3Cuse xlink:href="%23I"/%3E%3C/mask%3E%3Cpath fill="%23ffffff" mask="url(%23J)" d="M0 10.832h19.696V0H0z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary);
    background: var(--off-white);
    overflow-x: hidden;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
    color: var(--primary);
}



/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.container-narrow {
    max-width: var(--container-narrow);
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    transition: transform var(--transition-base), background var(--transition-base);
}

/* Utility Bar */
.header-utility {
    background: var(--primary-30);
    padding: 0.5rem 0;
    display: none;
}

@media (min-width: 1024px) {
    .header-utility {
        display: block;
    }
}

.header-utility-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

.header-utility a,
.header-utility .utility-address {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-80);
    transition: color var(--transition-fast);
}

.header-utility a:hover {
    color: var(--white);
}

.header-utility svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Main Header Bar */
.header-main {
    background: var(--primary);
    padding: 0;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
    width: 100%;
}

/* Lock header container to viewport */
.site-header .container {
    max-width: var(--container-max);
    width: 100%;
}

/* Header Main Content - Relative for absolute positioning of center logo */
.header-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 70px;
    position: relative;
    /* Added */
}

@media (min-width: 1024px) {
    .header-main-content {
        min-height: 80px;
    }
}

/* Logo Group */
.header-logo-group {
    display: flex;
    align-items: center;
}

/* Icon Logo (Left) */
.logo-icon {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.logo-icon img {
    height: 55px;
    /* Mobile size */
    width: auto;
    display: block;
    filter: drop-shadow(2.5px 2.5px 2.5px rgba(0, 0, 0, 0.75));
}

.logo-icon:hover {
    transform: translateY(-2px);
}

.logo-icon:hover img {
    filter: drop-shadow(0 3px 5px rgba(255, 255, 255, 0.4))
            drop-shadow(0 6px 12px rgba(255, 255, 255, 0.25));
}

/* Text Logo (Center on Mobile) */
.logo-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text img {
    height: 60px;
    /* Mobile size */
    width: auto;
    display: block;
}

@media (min-width: 1024px) {

    /* Desktop: Restore side-by-side layout */
    .header-logo-group {
        gap: 20px;
    }

    .logo-text {
        position: static;
        transform: none;
    }

    .logo-icon img {
        height: 67.5px;
        /* Desktop size */
    }

    .logo-text img {
        height: 74px;
        /* Desktop size */
        width: auto;
    }
}

/* Navigation */
.main-nav {
    display: none;
}

@media (min-width: 1024px) {
    .main-nav {
        display: flex;
        align-items: center;
        height: 100%;
        /* margin-left: auto; Removed to allow center logo */
    }
}

.main-nav ul {
    display: flex;
    list-style: none;
    height: 100%;
}

.main-nav li {
    position: relative;
}

.main-nav a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--secondary);
}

/* Financing Button in Nav */
.main-nav .nav-item-financing {
    display: flex;
    align-items: center;
}

.main-nav .nav-item-financing a {
    height: auto;
    padding: 0.6rem 1.2rem;
    background: var(--brick-red);
    border: 2px solid var(--brick-red);
    color: var(--white);
    border-radius: 4px;
    margin: 0 0.5rem;
    line-height: 1;
    transition: all var(--transition-fast);
}

.main-nav .nav-item-financing a:hover {
    background: var(--brick-red);
    border-color: var(--brick-red);
    color: var(--secondary);
}

/* Header CTAs */
.header-ctas {
    display: none;
}

@media (min-width: 1024px) {
    .header-ctas {
        display: flex;
        height: 100%;
    }
}

.header-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--white);
    transition: background var(--transition-fast);
    height: 100%;
    min-height: 80px;
}

.header-cta-primary {
    background: var(--primary-10);
}

.header-cta-primary:hover {
    background: var(--primary-20);
}

.header-cta-secondary {
    background: var(--secondary);
}

.header-cta-secondary:hover {
    background: var(--secondary-dark);
}

/* Mobile Menu Toggle */
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--white);
}

@media (min-width: 1024px) {
    .mobile-toggle {
        display: none;
    }
}

.mobile-toggle svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Hero Background Layers */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    background: url('/images/close-up-shingles.webp') center/cover no-repeat;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(26, 51, 68, 0.92) 0%,
            rgba(26, 51, 68, 0.75) 50%,
            rgba(26, 51, 68, 0.6) 100%);
}

/* Subtle Pattern Texture */
.hero-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: var(--pattern-svg);
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 10;
    padding-top: calc(80px + 1rem);
    /* Reduced top padding on mobile */
    padding-bottom: 3rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .hero-content {
        padding-top: calc(120px + 4rem);
        padding-bottom: 4rem;
    }
}

.hero-inner {
    max-width: 900px;
}



/* Hero Title */
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1.25;
    /* Increased for mobile readability */
    color: var(--white);
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

@media (min-width: 768px) {
    .hero-title {
        line-height: 1.1;
        /* Tighter on larger screens */
    }
}

.hero-title span {
    display: block;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    /* Full width on mobile */
    margin-bottom: 2.5rem;
    animation: fadeInUp 0.6s ease-out 0.2s both;
    text-align: justify;
}

@media (min-width: 768px) {
    .hero-subtitle {
        max-width: 80%;
        /* 80% of hero-inner (900px) = 720px */
    }
}



/* Hero Buttons */
.hero-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-bottom: 3rem;
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
}

/* Hero Trust Indicators */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 2rem;
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
}

.trust-item svg {
    width: 28px;
    height: 28px;
    color: var(--secondary);
}

.trust-item span {
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ============================================
   PAGE BANNER (Interior Pages)
   ============================================ */

.page-banner {
    position: relative;
    background: var(--primary);
    padding: clamp(120px, 15vw, 160px) 0 clamp(3rem, 8vw, 5rem);
    text-align: center;
    overflow: hidden;
}

.page-banner-bg {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: var(--pattern-svg);
}

.page-banner h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
    position: relative;
}

.page-banner p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 54px;
}

.btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.btn:hover svg {
    transform: translateX(4px);
}

.btn-primary {
    background: var(--brick-red);
    color: var(--white);
    position: relative;
    z-index: 2;
}

.btn-primary:hover {
    background: var(--brick-red-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--primary);
}

.btn-white {
    background: var(--white);
    color: var(--primary);
}

.btn-white:hover {
    background: var(--gray);
}

/* Button with Icon - Arrow Style */
.btn-icon {
    padding-right: 1.25rem;
}

.btn-icon svg {
    width: 20px;
    height: 16px;
}

/* Drop shadows for buttons on different backgrounds */
/* Light shadow for buttons on dark backgrounds */
.hero-section .btn,
.cta-section .btn,
.page-banner .btn,
.mobile-nav .btn,
.main-footer .btn {
    box-shadow:
        2px 2px 4px rgba(255, 255, 255, 0.4),
        4px 6px 12px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.hero-section .btn:hover,
.cta-section .btn:hover,
.page-banner .btn:hover,
.mobile-nav .btn:hover,
.main-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow:
        2px 2px 6px rgba(255, 255, 255, 0.5),
        6px 10px 20px rgba(255, 255, 255, 0.4);
}

/* Dark shadow for buttons on light backgrounds */
.why-choose-section .btn,
.services-section .btn,
.process-cta .btn,
.contact-form .btn,
.testimonials-cta .btn,
.explore-section .btn,
.about-cta .btn {
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.4),
        4px 6px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.why-choose-section .btn:hover,
.services-section .btn:hover,
.process-cta .btn:hover,
.contact-form .btn:hover,
.testimonials-cta .btn:hover,
.explore-section .btn:hover,
.about-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow:
        2px 2px 6px rgba(0, 0, 0, 0.5),
        6px 10px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */

.why-choose-section {
    padding: var(--section-padding) 0;
    background: var(--white);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--primary);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.125rem;
    color: var(--gray-80);
    max-width: 900px;
    margin: 0 auto;
}

.why-choose-grid {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }

    .why-choose-image {
        justify-content: flex-end;
    }

    .why-choose-image img {
        max-width: 450px;
    }
}

.why-choose-image {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.why-choose-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border-radius: 2px;
    color: var(--white);
}

.feature-icon svg {
    width: 18px;
    height: 18px;
}

.feature-item h3 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.feature-item p {
    font-size: 0.9375rem;
    color: var(--gray-80);
    line-height: 1.6;
}

.section-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.section-cta .btn-primary {
    background: var(--primary);
}

.section-cta .btn-primary:hover {
    background: var(--primary-10);
}

.section-cta .btn-secondary {
    color: var(--primary);
    border-color: var(--primary);
}

.section-cta .btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

/* ============================================
   SERVICES SECTION (Product Cards Style)
   ============================================ */

.services-section {
    padding: var(--section-padding) 0;
    background: var(--gray);
    position: relative;
}

/* Pattern Overlay */
.services-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: var(--pattern-svg);
    pointer-events: none;
}



.services-grid {
    display: grid;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Service Card - Brava Product Card Style */
.service-card {
    position: relative;
    aspect-ratio: 335/372;
    background: var(--gray-20);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid var(--primary);
}

.service-card-shadow {
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5);
    transition: box-shadow var(--transition-base);
}

@media (min-width: 1024px) {
    .service-card-shadow:hover {
        box-shadow: 7.5px 7.5px 6px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 768px) {
    .service-card {
        aspect-ratio: 450/500;
    }
}

.service-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.service-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card:hover .service-card-bg img {
    transform: scale(1.05);
}

.service-card-content {
    position: relative;
    z-index: 10;
    padding: 20px 0.75rem 15px 15px;
    /* top right bottom left */
    padding-right: 7.5%;
    background: var(--gray-30);
    transition: background var(--transition-base);
}

@media (min-width: 768px) {
    .service-card-content {
        padding: 20px 1.25rem 20px 20px;
        /* top right bottom left */
        padding-right: 10%;
    }
}

.service-card:hover .service-card-content {
    background: var(--primary);
}

.service-card-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.2;
    color: var(--primary);
    margin-bottom: 0.5rem;
    transition: color var(--transition-base);
}

.service-card:hover .service-card-content h3 {
    color: var(--white);
}

.service-card-content p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--primary);
    opacity: 0.8;
    transition: color var(--transition-base);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-card:hover .service-card-content p {
    color: var(--white);
}

.service-card-arrow {
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: var(--primary);
    transition: color var(--transition-base);
    cursor: pointer;
    z-index: 20;
    animation: pulse-soft 2s infinite ease-in-out;
}

.service-card:hover .service-card-arrow {
    color: var(--secondary);
}

.service-card-arrow svg {
    width: 32px;
    height: 32px;
    transition: transform var(--transition-fast);
}

.service-card:hover .service-card-arrow svg {
    transform: scale(1.1);
}

/* Services Page - Full Page Layout */
.services-section.services-page {
    padding-top: var(--section-padding);
}

/* ============================================
   PROCESS SECTION
   ============================================ */

.process-section {
    padding: var(--section-padding) 0;
    background: var(--white);
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.process-step {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 768px) {
    .process-step {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .process-step:nth-child(even) .process-step-image {
        order: 2;
    }

    .process-step:nth-child(even) .process-step-content {
        order: 1;
    }
}

.process-step-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--primary);
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5);
}

.process-step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-step-content {
    position: relative;
}



.process-step-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--primary);
    margin-bottom: 1rem;
}

.process-step-intro {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 1.25rem;
}

.process-step-details p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--primary);
    opacity: 0.85;
    margin-bottom: 1rem;
}

.process-step-details ul {
    list-style: none;
    margin: 1rem 0 1.25rem;
}

.process-step-details li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--primary);
    opacity: 0.85;
}

.process-step-details li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
}

.process-highlight {
    font-weight: 600;
    color: var(--secondary) !important;
    opacity: 1 !important;
}

/* Process CTA */
.process-cta {
    text-align: center;
    padding-top: 4rem;
    margin-top: 2rem;
    border-top: 1px solid var(--gray-20);
}

.process-cta h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.process-cta p {
    font-size: 1.125rem;
    color: var(--primary);
    opacity: 0.8;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}





/* ============================================
   ABOUT PAGE
   ============================================ */

.about-article {
    padding: 3rem 0 4rem;
    background: var(--white);
}

.container-narrow {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.prose-section {
    margin-bottom: 2.5rem;
}

.prose-section h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1rem;
}

.prose-section p {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* ============================================
   TESTIMONIALS PAGE (Brava Prose Style)
   ============================================ */

.testimonials-page-section {
    padding: var(--section-padding) 0;
    background: var(--white);
}

.prose-content {
    max-width: 750px;
    margin: 0 auto;
}

.prose-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--primary);
    margin-bottom: 1rem;
}

.prose-content h2+p {
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.prose-content figure.testimonial-image {
    margin: 2rem 0 1.5rem;
}

.prose-content figure.testimonial-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.prose-content blockquote {
    margin: 1.5rem 0;
    padding: 0;
    border: none;
    font-style: italic;
}

.prose-content blockquote p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--primary);
    opacity: 0.9;
}

.prose-content .testimonial-author {
    margin-bottom: 2rem;
    border-top: none;
    padding-top: 0;
    display: block;
}

.prose-content .testimonial-author strong {
    font-size: 1.125rem;
    color: var(--primary);
}

.prose-content .testimonial-author br+* {
    color: var(--gray-80);
}

.prose-content hr {
    border: none;
    border-top: 1px solid var(--gray-20);
    margin: 2.5rem 0;
}

.prose-content a {
    color: var(--secondary);
    transition: color var(--transition-fast);
}

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

.service-expanded-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.prose-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--primary);
    margin-bottom: 1rem;
}



/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    position: relative;
    width: 100%;
    background: var(--primary);
    overflow: hidden;
}

.cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .cta-wrapper {
        flex-direction: row;
        gap: 4rem;
    }
}

.cta-content {
    flex: 1;
    padding: 3rem 1.25rem;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .cta-content {
        padding: 4rem 0;
        width: 50%;
    }
}

.cta-inner {
    max-width: 500px;
    color: var(--white);
}

.cta-label {
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.cta-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 1rem;
}

.cta-inner p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cta-image {
    flex: 1;
    position: relative;
    min-height: 300px;
}

@media (min-width: 768px) {
    .cta-image {
        width: 50%;
        min-height: 400px;
        display: flex;
        justify-content: flex-end;
    }
}

.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* ============================================
   FOOTER
   ============================================ */

.main-footer {
    background: var(--brick-red);
    padding: 4rem 1.25rem 2rem;
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: var(--pattern-svg);
    pointer-events: none;
}

.footer-logo {
    text-align: center;
    margin-bottom: 2rem;
    display: inline-block;
    background: var(--off-white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.footer-logo img {
    height: 125px;
    margin: 0 auto;
    display: block;
}

.footer-contact {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.footer-contact p {
    font-size: 1rem;
}

.footer-contact strong {
    font-size: 1.125rem;
}

.footer-nav {
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    list-style: none;
}

.footer-nav a {
    font-size: 0.9375rem;
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.footer-nav a:hover {
    color: var(--secondary);
    background: rgba(255, 255, 255, 0.1);
}

.footer-nav a.active {
    background: var(--primary);
    color: var(--white);
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.footer-social a {
    color: var(--white);
    transition: color var(--transition-fast);
}

.footer-social a:hover {
    color: var(--secondary);
}

.footer-social svg {
    width: 24px;
    height: 24px;
}

/* Coming Soon Social Icons */
.social-icon {
    display: inline-block;
    color: var(--white);
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
    transition: opacity var(--transition-fast);
}

.social-icon:hover {
    opacity: 0.6;
}

/* Tooltip */
.social-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 100;
}

.social-icon[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 5px solid transparent;
    border-top-color: var(--primary);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 100;
}

.social-icon:hover::after,
.social-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.footer-bottom p {
    font-size: 0.875rem;
    opacity: 0.7;
    margin: 0;
}

.footer-credit a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-credit a:hover {
    opacity: 1;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   MOBILE CONTACT BAR
   ============================================ */

.mobile-contact-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary-30);
    font-size: 0.8125rem;
}

@media (min-width: 1024px) {
    .mobile-contact-bar {
        display: none;
    }
}

.mobile-contact-bar a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gray-80);
}

.mobile-contact-bar a:hover {
    color: var(--white);
}

.mobile-contact-bar svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0;
}

/* ============================================
   MOBILE MENU STYLES
   ============================================ */

.mobile-nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--white);
    z-index: 200;
    transition: right var(--transition-base);
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-menu-open .mobile-nav {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-20);
    background: var(--primary);
}

.mobile-nav-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
}

.mobile-nav ul {
    list-style: none;
    padding: 1rem 0;
}

.mobile-nav li {
    border-bottom: 1px solid var(--gray-20);
}

.mobile-nav a {
    display: block;
    padding: 1rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    transition: all var(--transition-fast);
}

.mobile-nav a:hover,
.mobile-nav a.active {
    background: var(--gray);
    color: var(--secondary);
}

.mobile-nav-cta {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-nav-cta .btn {
    width: 100%;
    justify-content: center;
    font-weight: 700;
}

/* Mobile Overlay */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 51, 68, 0.7);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.mobile-menu-open .mobile-overlay {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when menu is open */
.mobile-menu-open {
    overflow: hidden;
}

/* ============================================
   HEADER SCROLL STATES
   ============================================ */

.site-header {
    transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.site-header.header-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.site-header.header-scrolled .header-utility {
    display: none;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered fade up animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
    opacity: 0;
}

/* Fade in animation */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast {
    padding: 1rem 1.5rem;
    border-radius: 4px;
    color: var(--white);
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    transition: transform var(--transition-base);
    max-width: 350px;
}

.toast-visible {
    transform: translateX(0);
}

.toast-success {
    background: #10b981;
}

.toast-error {
    background: #ef4444;
}

.toast-info {
    background: var(--primary);
}

.toast-warning {
    background: var(--secondary);
}

/* ============================================
   FORM ERROR STATES
   ============================================ */

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
}

.error-message {
    font-size: 0.8125rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-article {
    padding: 3rem 0;
    background: var(--white);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    text-align: center;
}

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

.business-hours-block {
    margin-top: 2rem;
    text-align: center;
}

.contact-form-section {
    background: var(--primary);
    padding: 2.5rem 0 3rem;
    position: relative;
}

.contact-form-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: var(--pattern-svg);
    pointer-events: none;
}

.contact-form {
    background: var(--white);
    padding: 2rem;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

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

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.375rem;
}

.form-group label[for="message"] {
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: var(--white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(44, 74, 110, 0.1);
}

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

.checkbox-group {
    margin-top: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
}

.checkbox-text {
    font-size: 0.9375rem;
    color: var(--text-light);
    line-height: 1.5;
}

.btn-block {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Map Section */
.map-section {
    padding: 0 0 3rem;
    background: var(--white);
}

.map-embed {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.66);
    border: 2px solid var(--primary);
}

.map-embed iframe {
    display: block;
}

/* ============================================
   EXPLORE SECTION
   ============================================ */

.explore-section {
    background: var(--off-white);
    padding: 4rem 0;
}

.explore-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: var(--font-heading-weight);
    color: var(--primary);
    margin-bottom: 2rem;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.explore-card {
    background: var(--white);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow var(--transition-base);
    border: 1px solid var(--primary);
    padding: 1.5rem;
}

.explore-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    background: var(--primary);
}

.explore-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.explore-card-header h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--font-heading-weight);
    color: var(--primary);
    margin: 0;
    transition: color var(--transition-fast);
}

.explore-card:hover .explore-card-header h3 {
    color: var(--white);
}

.explore-card-icon {
    color: var(--primary);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

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

.explore-card-icon svg {
    width: 48px;
    height: 48px;
}

.explore-card-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.explore-card-content p {
    font-size: 0.9375rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    transition: color var(--transition-fast);
}

.explore-card:hover .explore-card-content p {
    color: var(--white);
}

.explore-card-arrow {
    color: var(--primary);
    transition: color var(--transition-fast);
    flex-shrink: 0;
    align-self: flex-end;
}

.explore-card:hover .explore-card-arrow {
    color: var(--white);
}

.explore-card-arrow svg {
    width: 24px;
    height: 18px;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

.testimonial-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    height: 400px;
    /* Increased height slightly to accommodate the collage better */
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    overflow: hidden;
}

.testimonial-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* First image takes up the left half */
.testimonial-collage img:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Mobile responsive adjustment for collage */
@media (max-width: 640px) {
    .testimonial-collage {
        height: 300px;
    }
}

/* Collage Layouts */
.testimonial-collage {
    display: grid;
    gap: 2px;
    height: 400px;
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    overflow: hidden;
}

.testimonial-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collage-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Image Labels (Before/After) */
.image-label {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Layout 1: Join L. (Default - 5 images, Hero Left) */
.testimonial-collage:not(.layout-pjm):not(.layout-evelyn) {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.testimonial-collage:not(.layout-pjm):not(.layout-evelyn) img:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Layout 2: PJ M. (4 images, Hero Bottom) */
.testimonial-collage.layout-pjm {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50% 50%;
    /* Explicitly set row heights */
}

.testimonial-collage.layout-pjm img {
    object-position: top;
}

/* Large image on bottom */
.testimonial-collage.layout-pjm img.pjm-1 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    object-position: 0 -20px;
    /* Push up by 20px */
}

/* Three small images on top */
.testimonial-collage.layout-pjm img.pjm-2 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.testimonial-collage.layout-pjm img.pjm-3 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.testimonial-collage.layout-pjm img.pjm-4 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}



/* After 2 (Hidden/Extra or Small overlay? Let's fit 5 images differently) */
/* Re-thinking Evelyn's 5-image grid to be more interesting */
/* Let's try: 2 Before on Left (stacked), 3 After on Right (1 large, 2 small) */

.testimonial-collage.layout-evelyn {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/* Before 1: Top Left */
.testimonial-collage.layout-evelyn .collage-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* Before 2: Bottom Left */
.testimonial-collage.layout-evelyn .collage-item:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* After 1: Large Middle */
.testimonial-collage.layout-evelyn .collage-item:nth-child(3) {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

/* After 2: Top Right */
.testimonial-collage.layout-evelyn .collage-item:nth-child(4) {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

/* After 3: Bottom Right */
.testimonial-collage.layout-evelyn .collage-item:nth-child(5) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .testimonial-collage {
        height: 300px;
    }
}

/* Mobile-only line break */
.mobile-only-br {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only-br {
        display: block;
    }
}

/* Desktop-only line break */
.desktop-only-br {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only-br {
        display: block;
    }
}

.mobile-only-br {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only-br {
        display: none;
    }
}

/* ============================================
   FINANCING WIDGET
   ============================================ */

.financing-widget-container {
    width: 100%;
    overflow-x: auto;
    position: relative;
    display: block;
}

/* ============================================
   SERVICE CARD EXPANSION
   ============================================ */

.service-card-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card-arrow {
    cursor: pointer;
    font-size: 1.5rem;
    /* Making it larger */
}

/* Expanded Info Container */
/* Expanded Info Container - Mobile Accordion Style */
.service-expanded-info {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: var(--white);
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
    z-index: 10;
}

.service-expanded-info.active {
    max-height: 2000px;
    /* Large enough to fit content */
    opacity: 1;
    visibility: visible;
    margin-top: 1rem;
    /* Space between card and details */
}

.service-expanded-content {
    background: var(--white);
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--brick-red);
}

/* Close Button */
.service-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--gray-50);
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    transition: color 0.2s;
    z-index: 5;
}

.service-close-btn:hover {
    color: var(--secondary);
}

.service-expanded-content h3 {
    font-family: var(--font-heading);
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    padding-right: 2rem;
    line-height: 1.2;
    font-weight: 700;
}

.service-expanded-content h4 {
    color: var(--brick-red);
    font-size: 1.15rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-expanded-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.service-cta-btn {
    align-self: flex-end;
    background: var(--brick-red);
    color: var(--white);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.service-cta-btn:hover {
    background: var(--brick-red-dark);
    color: var(--white);
}

/* Mobile: Slide Down below card */
@media (max-width: 1023px) {
    .service-expanded-info {
        margin-top: 0.5rem;
        border-radius: 4px;
        overflow: hidden;
        animation: slideDown 0.3s ease-out;
    }

    .service-expanded-content {
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Desktop: True Centered Modal */
@media (min-width: 1024px) {
    .service-expanded-info {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        max-height: none;
        /* Reset mobile max-height */
        opacity: 0;
        /* Star hidden for fade-in */
        visibility: hidden;
        background: rgba(0, 0, 0, 0.7);
        /* Backdrop */
        z-index: 9999;
        /* Highest priority */
        display: none;
        /* Use display toggle for desktop modal */
        align-items: center;
        justify-content: center;
        padding: 2rem;
        backdrop-filter: blur(4px);
        transition: opacity 0.3s ease;
        /* Desktop fade transition */
        margin-top: 0;
        /* Reset mobile margin */
    }

    .service-expanded-info.active {
        display: flex;
        opacity: 1;
        visibility: visible;
        animation: fadeIn 0.3s ease-out;
    }

    .service-expanded-content {
        width: 100%;
        max-width: 500px;
        /* Expanded from 480px */
        height: auto;
        /* Override global height: 100% */
        background: var(--white);
        padding: 2rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
        border-radius: 4px;
        /* Red border is already applied globally, but ensuring it's correct here */
        border: 2px solid var(--brick-red);
    }
}

@keyframes pulse-soft {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}