/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    --primary-blue: rgb(14 165 233);
    --primary-color-solid: rgb(10 94 140);
    --secondary-blue: rgb(2 132 199);
    --tertiary-blue: rgb(3 105 161);
    --quaternary-blue: rgb(7 89 133);
    --input-focus-bg: rgba(0, 0, 0, 1);
    --body-color: rgb(14 23 38);
    --warning-color: rgb(245 158 11);
    --error-color: rgb(220 38 38);
    --info-color: rgb(59 130 246);
    --primary-color: rgb(14 165 233 / 50%);
    --deep-water: rgb(14 165 233 / 12%);
    --shallow-water: rgb(125 211 252 / 92%);
    --cursor-color: #00BFFF;
    --ripple-highlight: rgb(255 255 255 / 14%);
    --success-color: rgb(34 197 94 / 20%);
    --success-color-solid: rgb(34 197 94);
    --glass-effect: rgba(255, 255, 255, 0.05);
    --glass-effect-strong: rgba(255, 255, 255, 0.1);
    --glass-effect-subtle: rgba(255, 255, 255, 0.02);
    --form-bg: rgba(0, 0, 0, 0.8); /* Slightly off-black for form backgrounds */
    --overlay-dark: rgb(0 0 0 / 50%);
    --text-color: rgb(255 255 255);
    --text-muted: rgb(203 213 225);
    --input-bg: var(--input-focus-bg);
    --link-color: var(--primary-blue);

    --cta-blue-1: #013A7A;
    --cta-blue-2: #0157AB;

    --page-gradient: linear-gradient(135deg, rgba(14, 23, 38, 1) 0%, rgba(11, 18, 32, .1) 100%);
    --water-gradient: linear-gradient(var(--primary-blue) 8%, var(--deep-water) 18%);
    --body-gradient: linear-gradient(var(--body-color) 10%, var(--bg-color) 90%);
    --primary-gradient: linear-gradient(var(--cta-blue-2) 10%, var(--cta-blue-1) 90%);
    --secondary-gradient: linear-gradient(var(--cta-blue-1) 10%, var(--cta-blue-2) 90%);

    --shadow-content: 0 clamp(3px, 4px, 5px) clamp(6px, 8px, 10px) rgb(0 119 190 / 30%), 0 0 clamp(1.5px, 2px, 2.5px) rgb(255 255 255 / 10%);
    --shadow-sm: 0 clamp(0.8px, 1px, 1.2px) clamp(1.6px, 2px, 2.4px) rgb(0 0 0 / 10%);
    --shadow-md: 0 clamp(1.6px, 2px, 2.4px) clamp(3.2px, 4px, 4.8px) rgb(0 0 0 / 12%);
    --shadow-lg: 0 clamp(3.2px, 4px, 4.8px) clamp(4.8px, 6px, 7.2px) rgb(0 0 0 / 15%);
    --shadow-water: 0 clamp(3.2px, 4px, 4.8px) clamp(12px, 15px, 18px) rgb(0 119 190 / 30%);
    --blur-radius: 20px;
    --spread-radius: 20px;
    --box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);

    --logo-size: clamp(120px, 160px, 200px);
    --nav-btn-height: 48px;

    --border-width: clamp(0.4px, 0.5px, 0.6px);
    --border-style: solid;
    --border-color: var(--primary-blue);
    --border-color-solid: var(--primary-color-solid);
    --border-radius: clamp(6.4px, 8px, 9.6px);
    --border-radius-sm: clamp(3.2px, 4px, 4.8px);
    --border-radius-lg: clamp(12.8px, 16px, 19.2px);
    --border-radius-full: 50%;
    --border-std: var(--border-width) var(--border-style) var(--border-color);

    --spacing-unit: clamp(0.4rem, 0.5rem, 0.6rem);
    --spacing-xs: calc(var(--spacing-unit) * 0.25);
    --spacing-sm: calc(var(--spacing-unit) * 0.5);
    --spacing-lg: calc(var(--spacing-unit) * 2);
    --spacing-xl: calc(var(--spacing-unit) * 3);
    --spacing-2xl: calc(var(--spacing-unit) * 4);
    --spacing-3xl: calc(var(--spacing-unit) * 5);
    --spacing-4xl: calc(var(--spacing-unit) * 10);

    --nav-btn-padding: clamp(6.4px, 8px, 9.6px) clamp(12.8px, 16px, 19.2px);
    --nav-btn-font-size: clamp(11.2px, 14px, 16.8px);

	--font-base: "Inter", system-ui, sans-serif;
	--font-heading: var(--font-base);
	--font-body: var(--font-base);
	--font-ui: var(--font-base);
    --font-size-base: clamp(0.875rem, 0.9rem + 0.1vw, 1rem);
    --font-size-md: clamp(0.9375rem, 0.95rem + 0.1vw, 1.05rem);
    --font-size-lg: clamp(1rem, 1rem + 0.1vw, 1.1rem);
    --font-size-xl: clamp(1.125rem, 1.125rem + 0.1vw, 1.25rem);
    --font-size-2xl: clamp(1.25rem, 1.25rem + 0.1vw, 1.375rem);
    --font-size-3xl: clamp(1.5rem, 1.5rem + 0.1vw, 1.625rem);
    --font-size-4xl: clamp(1.875rem, 1.875rem + 0.1vw, 2rem);
    --font-size-5xl: clamp(2.25rem, 2.25rem + 0.1vw, 2.375rem);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-xs: clamp(1.08, 1.2, 1.32);
    --line-height-sm: clamp(1.26, 1.4, 1.54);
    --line-height-base: clamp(1.35, 1.5, 1.65);
    --line-height-lg: clamp(1.44, 1.6, 1.76);
    --line-height-xl: clamp(1.53, 1.7, 1.87);

    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --button-hover-transform: translateY(-2px);
    --outline-std: 2px solid var(--primary-blue);
    --text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 4px rgba(0, 0, 0, 0.6),
        0.08em 0.08em 0.1em rgba(0, 0, 0, 0.9);

    --z-body: -10;
    --z-zero: 0;
    --z-canvas: 1;
    --z-base: 2;
    --z-header: 10;
    --z-nav: 20;
    --z-dropdown: 30;
    --z-modal: 40;
    --z-toast: 50;

    /* Unified dropdown styling */
    --dropdown-bg: var(--bg-color);
    --dropdown-hover-bg: var(--primary-gradient);
    --dropdown-selected-bg: var(--primary-blue);
    --dropdown-text: #212529;

    --link-hover-transform: scale(1.03);
    --link-hover-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */






body {
    background-color: var(--bg-color);
	font-family: var(--font-body);
    background-image: url('../images/pagepics/bg-full.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
 width: 100%;
 margin: 0 auto;

}

/* ==========================================================================
   UTILITY CLASSES - For common inline styles
   ========================================================================== */



img {
    border-radius: var(--border-radius);
}

/* Exclude logos and already-circular images from border-radius */
img[src*="logo"],
.welcome-image-1 img,
.welcome-image-2 img,
.provider-content p img,
.partner-logo img {
    border-radius: var(--border-radius-full); /* Keep circular for logos */
}

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

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.table-container {
    overflow-x: auto;
    margin: var(--spacing-unit) 0;
}

/* Info box for notices and highlights */
.info-box {
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    margin: var(--spacing-lg) 0;
}

.info-box p {
    margin: 0;
    color: var(--text-color);
}

.info-box p:not(:first-child) {
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
}

table th,
table td {
    padding: var(--spacing-sm);
    border: var(--border-std);
    border-color: var(--primary-blue);
    text-align: left;
}

table th {
    background: var(--glass-effect-subtle);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-blue);
}

table tr:nth-child(even) {
    background: var(--glass-effect-subtle);
}




/* Text alignment */
.text-center {
    text-align: center;
}

/* Border radius */
.rounded-full {
    border-radius: var(--border-radius-full);
}

.rounded {
    border-radius: var(--border-radius);
}

/* Spacing utilities */
.mb-1 {
    margin-bottom: var(--spacing-unit);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* Display utilities */
.hidden {
    display: none;
}

/* Color utilities */

/* Flex utilities */
.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

/* Photo upload button style */
li {
    list-style-type: none;
}




/* Form fieldset and legend styling (mobile-first) */
fieldset {
    border: var(--border-std);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.5); /* White with opacity to show form container through */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: visible; /* Allow expanded selects to overflow */
}

legend {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: rgba(14, 23, 38, 1); /* Dark text for white fieldset background */
    padding: 0 var(--spacing-unit);
    background: rgba(255, 255, 255, 0.85); /* White with opacity to match fieldset */
    border-radius: var(--border-radius-sm);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    position: relative;
    color: var(--text-color);
    min-height: 100%;
    max-width: 100%;
    height: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    list-style-type: none;
}

/* Hide scrollbar for Safari */
html::-webkit-scrollbar {
    display: none;
}

input:not([type="hidden"]):not(.success):not(.error):focus-visible,
select:not(.success):not(.error):focus-visible,
textarea:not(.success):not(.error):focus-visible {
    outline: var(--outline-std);
    outline-offset: 2px;
    border-color: var(--shallow-water);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}



.contact-form .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);  
    justify-content: center;
}



/* Collapsible info-card notes (mobile-first) - expanded by default */
.info-card-note.collapsible .aside-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    width: 100%;
    min-height: 44px; /* Minimum touch target size */
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-fast), box-shadow var(--transition-smooth), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Prevent text selection on click */
    user-select: none;
    background: var(--primary-gradient);
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Add spacing after emoji in aside-title */
.aside-title > span:first-child {
    margin-right: var(--spacing-sm);
}

.info-card-note.collapsible .aside-title:hover {
    background-color: var(--primary-gradient);
    box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);
    transform: var(--button-hover-transform);
}
.info-card-note.collapsible .aside-title:active {
    background-color: var(--glass-effect);
}
.info-card-note.collapsible .toggle-indicator {
    display: none; /* Hidden by default, shown with JS */
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid var(--shallow-water);
    border-bottom: 2px solid var(--shallow-water);
    transform: rotate(45deg);
    transition: transform var(--transition-fast) var(--transition-smooth);
}

/* Show toggle indicator when JS is available */
html.js-enabled .info-card-note.collapsible .toggle-indicator {
    display: inline-block;
}
.info-card-note.collapsible .aside-title[aria-expanded="false"] .toggle-indicator {
    transform: rotate(-45deg);
}
/* Default: show content (expanded) - no-JS fallback */
.info-card-note.collapsible > :not(.aside-title):not(.product-grid):not(.serviceinfo-grid):not(.index-serviceinfo-grid) {
    display: block;
}
/* Only hide when explicitly collapsed - JS will add this class */
.info-card-note.collapsible.collapsed > :not(.aside-title):not(.product-grid):not(.serviceinfo-grid):not(.index-serviceinfo-grid) {
    display: none;
}
.info-card-note.collapsible.open > :not(.aside-title):not(.product-grid):not(.serviceinfo-grid):not(.index-serviceinfo-grid) {
    display: block;
}

/* Add box-shadow on hover for expanded collapsible cards */
.info-card-note.collapsible.expanded:hover {
    transform: var(--button-hover-transform);
    box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);
}

.flex-1 { flex: 1; }
.flex-2 { flex: 1.5; }
.zip-col { flex: 0 0 120px; }
.zip-input { width: 120px; min-width: 120px; }


.form-error {
    color: var(--error-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Status message styles */
.status-message {
    padding: var(--spacing-unit);
    margin: var(--spacing-sm) 0;
    border-radius: var(--border-radius);
    text-align: center;
}

.status-message.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.status-message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.status-message h2 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-unit);
}

.status-message strong {
    font-weight: bold;
}



/* Keep provider list items on one line */
.serviceinfo-grid ul li {
    white-space: nowrap;
}

/* Ensure links in provider list stay inline */
.serviceinfo-grid ul li a {
    display: inline;
    white-space: nowrap;
}


/* Fix ::before pseudo-element interference in service lists */
.service-list {
    width: 100%;
    padding-left: var(--spacing-lg);
}

.service-list li {
    position: relative;
    padding: var(--spacing-unit); /* Account for ::before width */
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-blue);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 2px 2px 0;
    z-index: 1;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    padding: var(--spacing-unit);
    text-align: center;
}

h1 {
    font-size: clamp(2rem, 2.2rem, 2.5rem);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: clamp(1.5rem, 1.75rem, 1.9rem);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: clamp(1.1rem, 1.25rem, 1.4rem);
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
    text-decoration: none;
    transition: all var(--transition-normal) ease;
    color: var(--primary-blue);
    -webkit-tap-highlight-color: transparent;
}

a:visited {
    color: var(--primary-blue); /* Same as unvisited links for consistent nav */
}

a:hover,
a:focus-visible {
    color: var(--cursor-color);
    text-decoration: underline;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button {
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.btn-effect {
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    border-radius: var(--border-radius);
}

.btn-effect:hover,
.btn-effect:focus-visible {
    background: var(--primary-blue);
    color: var(--text-color);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                0 0 40px rgba(14, 165, 233, 0.4),
                0 0 60px rgba(14, 165, 233, 0.2);
    transition: all 0.2s ease;
    border-color: var(--text-color);
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-nav);
    width: 100%;
    max-width: 400px;
    border: var(--border-std);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) ease;
    font-size: var(--nav-btn-font-size);
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow); /* Subtle shadow for better visibility */
    height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    margin: var(--spacing-unit) auto;
    color: var(--text-color);
    text-decoration: none;
    will-change: transform;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    background: var(--primary-gradient);
    border-color: var(--text-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.cta-button:hover,
.cta-button:focus-visible {
    background: var(--secondary-gradient);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
}

.cta-button:active {
    transform: scale(0.98);
}



/* ==========================================================================
   Form Container
   ========================================================================== */
   .form-container {
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) ease;
    width: 100%;
    background: rgba(36, 113, 246, 0.2); /* Site-themed dark blue-gray - semi-transparent */
    box-shadow: var(--shadow-water);
    position: relative;
    z-index: 1000;
    overflow: visible; /* Allow expanded selects to overflow */
 
}

/* Maintenance Mode - Hide forms and show message when maintenance mode is enabled */
.maintenance-mode .form-container {
    display: none;
}

/* Hide the form collapsible when maintenance mode is enabled */
body.maintenance-mode #form-collapsible {
    display: none;
}

/* Show and style maintenance message when maintenance mode is enabled */
body.maintenance-mode .maintenance-message {
    display: block;
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--glass-effect);
    border: 2px solid var(--primary-blue);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
    font-family: var(--font-body);
    width: 100%;
}

.maintenance-mode .maintenance-message h3 {
    color: var(--primary-blue);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-body);
}

.maintenance-mode .maintenance-message p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    font-family: var(--font-body);
}

.maintenance-mode .maintenance-message .maintenance-contact {
    color: var(--dropdown-text);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    font-family: var(--font-body);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */
label {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    color: rgba(14, 23, 38, 1); /* Dark text for white fieldset background */
    display: block;
}

/* Base input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    padding: var(--spacing-unit);
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    background-color: #f8f9fa;
    color:var(--dropdown-text); 
    font-size: 16px;
    font-family: var(--font-body);
    transition: all var(--transition-normal) ease;
    width: 100%;
    min-height: 44px;
    text-align: center;
}

/* Filled inputs - darker grey to show they have data (no checkmark until JS validates) */
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
    background-color: #ced4da; /* Darker grey when filled */
}

/* Input focus state */
input:focus,
textarea:focus,
select:focus {
    background-color: #ffffff; /* White when focused */
    border-color: var(--shallow-water);
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Override browser's autofill white background - this is the class that gets applied */
/* Long transition prevents default white flash when hovering over autofill suggestions */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f8f9fa inset !important; /* Match regular input background */
    -webkit-text-fill-color: #212529 !important; /* Match regular input text color */
    background-color: #f8f9fa !important; /* Match regular input background */
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Autofilled fields - darker grey (no checkmark until JS validates) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ced4da inset !important; /* Darker grey when filled */
    background-color: #ced4da !important;
}

/* Ensure autofill styles persist on all states */
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ced4da inset !important;
    background-color: #ced4da !important;
}


.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
select:active {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-color: var(--shallow-water);
    box-shadow: 
        0 0 10px rgba(14, 165, 233, 0.5),
        0 0 20px rgba(14, 165, 233, 0.3),
        inset 0 0 10px rgba(14, 165, 233, 0.1);
}

/* Thicker dark border for select on focus */
select:focus {
    border: 3px solid rgba(14, 23, 38, 0.9) !important; /* Dark border */
    border-color: rgba(14, 23, 38, 0.9) !important; /* Dark border color */
}

/* Textarea specific */
textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
    cursor: text;
}

/* Select specific */
select {
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: calc(var(--spacing-unit) * 3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    color-scheme: dark;
    position: relative;
    pointer-events: auto !important; /* Ensure select is always interactive */
}

/* Remove appearance: none on focus to allow native dropdown to work */
select:focus {
    -moz-appearance: menulist !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none !important; /* Remove custom arrow when native dropdown is active */
}

/* When select is expanded (size > 1), ensure it appears above info-card-note elements */
select[size]:not([size="1"]) {
    z-index: 2000;
    position: relative !important; /* Ensure z-index works */
    min-height: auto !important; /* Remove min-height constraint when expanded */
    height: auto !important; /* Allow natural height based on size */
    overflow: visible !important; /* Force visible overflow to show all options */
    overflow-y: visible !important; /* Force visible overflow to show all options */
    overflow-x: visible !important; /* Force visible overflow to show all options */
    /* Remove appearance: none to allow native listbox rendering */
    -webkit-appearance: listbox !important;
    -moz-appearance: listbox !important;
    appearance: listbox !important;
    background-image: none !important; /* Remove dropdown arrow when expanded */
    display: block !important; /* Ensure it's displayed as block */
    /* Ensure options are visible */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Only show invalid state after user interaction - handled by JS */
select:invalid:not(:focus):not([data-touched="true"]) {
    color: var(--text-color);
}

/* Ensure placeholder text is visible in urgency select when invalid */
select#urgency:invalid:not(:focus):not([data-touched="true"]) {
    color: var(--text-color) !important;
    opacity: 1;
}

select:hover {
    border-color: var(--text-color);
}

/* Select options */
select option {
    color: var(--dropdown-text); 
    background-color: #f8f9fa;
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
}

select option[disabled] {
    color: #b0b0b0;
}

/* Make placeholder visible in urgency select */
select#urgency option[value=""][disabled] {
    color: #666666 !important;
    opacity: 1;
}

/* Show placeholder text when no option is selected (invalid state) */
select#urgency :invalid:not(:focus):not([data-touched="true"]) {
    color: #666666 !important;
}

/* Urgency option colors - simple text coloring */
select#urgency option[value="planning"] {
    color: rgb(34, 197, 94); /* Green */
    font-weight: bold;
}

select#urgency option[value="flexible"] {
    color: rgb(163, 230, 53); /* Light green */
    font-weight: bold;
}

select#urgency option[value="normal"] {
    color: rgb(245, 158, 11); /* Yellow/Orange */
    font-weight: bold;
}

select#urgency option[value="urgent"] {
    color: rgb(249, 115, 22); /* Orange */
    font-weight: bold;
}

select#urgency option[value="emergency"] {
    color: rgb(220, 38, 38); /* Red */
    font-weight: bold;
}

/* Start date option colors - timing-based coloring */
select#startDate option[value="asap"] {
    color: rgb(220, 38, 38); /* Red - most urgent */
    font-weight: bold;
}

select#startDate option[value="this-week"] {
    color: rgb(249, 115, 22); /* Orange - urgent */
    font-weight: bold;
}

select#startDate option[value="next-week"] {
    color: rgb(245, 158, 11); /* Yellow/Orange - normal */
    font-weight: bold;
}

select#startDate option[value="this-month"] {
    color: rgb(163, 230, 53); /* Light green - flexible */
    font-weight: bold;
}

select#startDate option[value="specific"] {
    color: rgb(34, 197, 94); /* Green - planning */
    font-weight: bold;
}

/* Placeholder styling for startDate */
select#startDate option[value=""][disabled] {
    color: #666666 !important;
    opacity: 1;
}

select#startDate:invalid:not(:focus):not([data-touched="true"]) {
    color: #666666 !important;
}

select option:hover,
select option:focus {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-text);
}

select option:checked {
    background: var(--dropdown-selected-bg);
    font-weight: 600;
} 
/* ==========================================================================
   Interactive Elements (dropdowns)
   ========================================================================== */

/* Custom Select Component (with directional control) */
.cs-select {
    position: relative;
    width: 100%;
}

.cs-select.is-hidden-native select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cs-trigger {
    width: 100%;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 3) var(--spacing-unit) var(--spacing-unit);
    background-color: var(--ripple-highlight);
    color: var(--text-color);
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-family: var(--font-body);
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
    transition: all var(--transition-normal) ease;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    pointer-events: auto !important; /* Ensure trigger is always interactive */
}

.cs-trigger:hover {
    background-color: var(--body-color);
    border-color: var(--text-color);
}

.cs-trigger:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.15);
}

.cs-options {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--dropdown-bg, var(--body-color));
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin-top: 4px;
}

.cs-select.open .cs-options {
    display: block;
}

/* Open downward (default) */
.cs-select.open-down .cs-options {
    top: 100%;
    bottom: auto;
}

/* Open upward */
.cs-select.open-up .cs-options {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 4px;
}

.cs-option {
    padding: 12px 16px;
    color: var(--dropdown-text, var(--text-color));
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
}

.cs-option:last-child {
    border-bottom: none;
}

.cs-option:hover {
    background: var(--dropdown-hover-bg, rgba(14, 165, 233, 0.2));
    color: var(--dropdown-text, var(--text-color));
}

.cs-option[aria-selected="true"] {
    background: var(--dropdown-selected-bg, rgba(14, 165, 233, 0.3));
    font-weight: 600;
}

.cs-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-option[aria-disabled="true"]:hover {
    background: transparent;
}


/* ==========================================================================
   State Classes (error, success, loading)
   ========================================================================== */
/* Error state - only show after user interaction */
.form-select.error,
input.error,
input[type="text"].error,
input[type="email"].error,
input[type="tel"].error,
input[type="password"].error,
input[type="number"].error,
input[type="url"].error,
textarea.error,
select.error {
    border: 2px solid #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Hide invalid state on page load and on focus - only show after user interaction */
/* This includes optional fields with patterns (like ZIP) that might be invalid when empty */
input:invalid:not([data-touched="true"]),
textarea:invalid:not([data-touched="true"]),
select:invalid:not([data-touched="true"]) {
    border-color: var(--primary-blue);
    box-shadow: none;
}

/* Specifically handle optional fields with patterns - they should not show as invalid when empty */
input:not([required]):invalid:not([data-touched="true"]):placeholder-shown,
input:not([required])[pattern]:invalid:not([data-touched="true"])[value=""] {
    border-color: var(--primary-blue);
    box-shadow: none;
}


.form-select.success,
input.success,
input[type="text"].success,
input[type="email"].success,
input[type="tel"].success,
input[type="password"].success,
input[type="number"].success,
input[type="url"].success,
textarea.success,
select.success {
    border: 2px solid #10b981; /* Thicker green border - only when JS validates */
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
    padding-right: calc(var(--spacing-unit) * 3.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

/* For select elements, overlay checkmark on existing dropdown arrow */
select.success {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7l4.5 4.5L14.5 7z'/%3E%3C/svg%3E");
    background-position: right 12px center, right 36px center;
    background-size: 20px 20px, 16px 16px;
    padding-right: calc(var(--spacing-unit) * 5);
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Extra spacing for submit button to account for select dropdown padding */
.form-group:has(#submit-button) {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.form-row {
    gap: var(--spacing-sm);
}


/* On mobile, keep City and ZIP side-by-side inside service-location */
.contact-form fieldset.service-location .form-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Form Section (repair-hybrid specific) */
.form-section {
    background: var(--form-bg);
    border: var(--border-std);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}


.form-section-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}

.form-section-group h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--shallow-water);
    margin-bottom: var(--spacing-sm);
}


/* Form Hint */
.form-hint {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}


/* Urgency Radio Options */
.urgency-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}

.radio-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    padding: var(--spacing-unit);
    padding-left: var(--spacing-xl);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast) var(--transition-smooth);
    width: 100%;
}

.radio-option:hover {
    border-color: var(--shallow-water);
}

.radio-option input[type="radio"] {
    margin-top: 2px;
    margin-right: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    flex: 1;
}

.radio-content strong {
    color: var(--text-color);
    font-size: var(--font-size-base);
}

.radio-content small {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.radio-option.urgent {
    border-color: var(--warning-color);
}

.radio-option:has(input[type="radio"]:checked) {
    border-color: var(--shallow-water);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
}

.radio-option.urgent:has(input[type="radio"]:checked) {
    border-color: var(--warning-color);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.radio-option:focus-within {
    outline: var(--outline-std);
    outline-offset: 2px;
}




.submit-btn,
.submit-button {
    background: var(--primary-gradient);
    color: var(--text-color);
    border: var(--border-std);
    border-color: var(--text-color);
    border-radius: var(--border-radius);
    display: block;
    align-items: center;
    justify-content: center;
    height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--nav-btn-font-size);
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow); /* Subtle shadow for better visibility */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--box-shadow);
    text-transform: uppercase;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#submit-button {
    display: block;
}

.submit-btn:hover,
.submit-button:hover {
    background: var(--secondary-gradient);
    color: var(--text-color);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
    transform: var(--button-hover-transform);
}

.submit-btn:active,
.submit-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.submit-btn:disabled,
.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.honeypot,
.honeypot-label {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */


.master-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    transition: all var(--transition-normal) ease;
    position: relative;
    overflow: hidden;

    margin-top: var(--spacing-unit);
    box-sizing: border-box;
    min-width: 0;
}

/* Content container for policy pages (mobile-first) */
.content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-lg);
}

/* Policy page styles (mobile-first) */
.policy-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.policy-header h1 {
    margin-bottom: var(--spacing-sm);
}

.policy-section {
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.policy-section h2 {
    margin-bottom: var(--spacing-unit);
    color: var(--primary-blue);
}

.policy-section p {
    margin-bottom: var(--spacing-unit);
    line-height: var(--line-height-lg);
}

.policy-section ul {
    margin: var(--spacing-unit) 0;
    padding-left: var(--spacing-lg);
}

.policy-section li {
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-lg);
}

.contact-info {
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}


.layout-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    font-size: clamp(0.9rem, 1rem, 1.1rem);
    margin: 0 auto;
    justify-content: flex-start;
    position: relative;
    top: 0;
    left: 0;
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-radius: var(--border-radius);
    border-color: var(--primary-blue);
    background: var(--page-background-subtle);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* margin-top: var(--spacing-unit); */
    padding: var(--spacing-unit);
    /* max-height: 100vh; */
}

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* padding: var(--spacing-unit); */
    padding-bottom: 4px;
}





 .header {
    position: relative;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: var(--spacing-unit);
    isolation: isolate;
    border: var(--border-std);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--spacing-unit);
    background: transparent;
    gap: var(--spacing-unit);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-header);
    width: var(--logo-size);
    height: var(--logo-size);
    max-width: var(--logo-size);
    transition: filter 0.3s ease, transform 0.3s ease;
    border-radius: var(--border-radius-full);
    isolation: isolate;
    margin: var(--spacing-unit);
    padding: 0;
    overflow: hidden;
    flex: 0 0 auto;
    align-self: center;
}

.logo-link {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-full);
    transition: filter 0.3s ease, transform 0.3s ease;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-header);
}

.logo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: var(--logo-size);
    max-height: var(--logo-size);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: var(--z-header);
    overflow: hidden;
    object-fit: contain;
    object-position: center;
    border-radius: var(--border-radius-full);
    border: var(--border-std);
    border-color: var(--primary-blue);
    background: var(--glass-effect);
    box-shadow: var(--box-shadow);
    filter: brightness(1.0);
    transition: transform var(--transition-normal) ease, filter var(--transition-normal) ease;
    will-change: transform;
}

.logo-image:hover {
    transform: scale(clamp(1.02, 1.03, 1.05));
    will-change: transform;
    filter: brightness(1.4);
}

.pools-header {
    font-weight: var(--font-weight-bold);
    text-align: center;
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
    font-size: clamp(1rem, 2.5vw + 0.7rem, 1.8rem);
    line-height: 1.2;
    text-shadow: var(--text-shadow);
}

/* ==========================================================================
   Hero Text - Same for All Pages
   ========================================================================== */
.hero-text {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    text-shadow: var(--text-shadow);
    font-style: italic;
    text-align: center;
    z-index: var(--z-base);
    width: 100%;
    order: -1;
}

/* Index page: hero-text is inside hero-nav-container, no order needed */
.index-page .hero-text {
    order: unset;
    display: flex;
}

.hero-text h1 {
    font-size: clamp(1.2rem, 3.5vw + 0.8rem, 2.2rem);
    line-height: 1.2;
    margin: 0;
    text-shadow: var(--text-shadow);
}

/* ==========================================================================
   Index Page Header Grid Layout
   ========================================================================== */
.header-content-grid {
    display: flex;
    flex-direction: column;
      align-items: center;
 
}

.hero-nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.main-nav {
    position: relative;
    z-index: var(--z-nav);
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--spacing-sm);
    margin: var(--spacing-sm) auto;
    justify-content: center;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-nav);
    width: 100%;
    margin: var(--spacing-xs) auto;
    border: var(--border-std);
    border-radius: var(--border-radius);
    transition: transform var(--transition-normal) var(--transition-smooth), 
                box-shadow var(--transition-normal) var(--transition-smooth);
    min-height: var(--nav-btn-height);
    padding: 0;
    max-width: none;
    will-change: transform;
backdrop-filter: blur(10px);   
}

.nav-item:hover {
    transform: var(--button-hover-transform);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                0 0 40px rgba(14, 165, 233, 0.4),
                0 0 60px rgba(14, 165, 233, 0.2);
}

.nav-item a {
    align-content: center;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    min-height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    text-decoration: none;
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

/* Index navigation toggle button (hamburger menu) */
.index-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: clamp(44px, 50px, 56px);
    height: clamp(44px, 50px, 56px);
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: var(--z-toast);
    margin: 0 auto var(--spacing-sm) auto;
    color: var(--text-color);
    align-self: center;
}

.index-nav-toggle span {
    width: 100%;
    height: 5px;
    background: var(--text-color);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal) ease;
    box-shadow: black 0.1em 0.1em 0.2em;
}

.index-nav-toggle:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
}

.index-nav-toggle.active {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
}

/* Index dropdown navigation items */
.index-nav-dropdown {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.index-nav-dropdown .nav-item a {
    color: var(--text-color);
}

/* Hide dropdowns when collapsed (mobile with JS) - only apply when JS has initialized */
.index-navitem-with-dropdown.js-collapsed:not(.active) > .index-nav-dropdown {
    display: none;
}

.index-navitem-with-dropdown.active .index-column-header .toggle-indicator {
    transform: rotate(45deg);
}

.index-nav-dropdown .nav-item:hover {
    background: var(--primary-gradient);
    color: var(--text-color);
    border: var(--border-std);
    border-color: var(--text-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.index-nav-dropdown .nav-item a:hover,
.index-nav-dropdown .nav-item a:focus-visible {
    text-decoration: underline;
}

/* Mobile navigation - same for all pages */
.nav-columns {
    display: none; /* Hidden by default on mobile */
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
    margin: 0 auto;
    background: transparent;
  
}



.nav-columns.active {
    display: flex; /* Show when hamburger is active */
    width: 100%;
   
}


.index-column-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    text-decoration: none;
    border: var(--border-std);
    border-color: var(--text-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: all var(--transition-normal) ease;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    text-shadow: var(--text-shadow);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    letter-spacing: 0.03em;
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    backdrop-filter: blur(var(--backdrop-blur));
    background: var(--primary-gradient);
}

/* Toggle indicator for nav column headers - mobile only */
.index-column-header .toggle-indicator {
    display: none; /* Hidden by default, shown with JS */
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--transition-fast) var(--transition-smooth);
    position: absolute;
    right: var(--spacing-unit);
    flex-shrink: 0;
}

/* Show toggle indicator when JS is available */
html.js-enabled .index-column-header .toggle-indicator {
    display: inline-block;
}



.index-column-header:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    background: var(--primary-blue);
    color: var(--text-color); /* White text on focus too */
}

/* ==========================================================================
   Content Sections
   ========================================================================== */




.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    width: 100%;
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    background: var(--overlay-dark);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--spacing-unit);

}

.welcome-text {
    flex: 1;
    text-align: center;
    padding: var(--spacing-unit);
    margin: var(--spacing-unit) auto;
    border: var(--border-std);
    /* border: var(--border-none); */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;    
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-color);
    border: none;
    border-color: none;
    box-shadow: none;
    width: 100%;    
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-color);
    margin: auto;
    height: 100%;
}

.welcome-text h1 {
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    margin-bottom: var(--spacing-unit);
    font-weight: var(--font-weight-bold);
}

/* Mobile: hide welcome images */
.welcome-image-1,
.welcome-image-2 {
    display: none;
}

.emoji-desktop {
    display: none;
}

/* .index-column-header:hover .emoji-desktop,
.index-column-header:focus-visible .emoji-desktop,
.nav-item a:hover .emoji-desktop,
.nav-item a:focus-visible .emoji-desktop,
button:hover .emoji-desktop,
button:focus-visible .emoji-desktop {
    text-decoration: none;
    color: inherit;
} */

/* Nav column headers - hover styling (same for all pages) */






.serviceinfo-grid {
    display: grid;
    gap: var(--spacing-unit);
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    background-image: url(../images/gallerypics/localproviderlogos/santanas-spas-delivery-pic.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Scroll on mobile for better performance */
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(var(--blur-radius));
    backdrop-filter: blur(var(--blur-radius));
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
    margin-top: var(--spacing-unit);
}
.index-serviceinfo-grid {
    display: grid;
    gap: var(--spacing-unit);
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    background: var(--page-background-subtle);
    background-image: url(../images/pagepics/builtinspa.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    
}

/* Remove background image from serviceinfo-grid on spa-delivery-removal page */
.spa-delivery-page .serviceinfo-grid {
    background-image: none;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Add background image to last info-card on spa-delivery-removal page */
.spa-delivery-page .spa-delivery-last-card {
    background-image: url(../images/gallerypics/localproviderlogos/santanas-spas-delivery-pic.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: var(--spacing-lg);
    position: relative;
}

/* Ensure text is readable over background */
.spa-delivery-page .spa-delivery-last-card p,
.spa-delivery-page .spa-delivery-last-card a {
    position: relative;
    z-index: 1;
}

/* Service category - mobile-first styles */
.service-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: var(--spacing-unit);
    /* border: var(--border-std);
    border-color: var(--primary-blue); */
    border-radius: var(--border-radius);
    text-align: left;
    transition: all var(--transition-normal) ease;
    background: var(--page-background-subtle);
}

/* Vineyard background only on local-providers page */
.local-providers-page .service-category {
    background-image: url(../images/gallerypics/localproviderlogos/vineyardhills.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

/* Product images container - mobile: stack cards vertically */
.product-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
    align-items: center;
    width: 100%;
}

/* Product card - individual image with description */
.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-unit);
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) ease;
    width: 400px;
    max-height: 600px;
    overflow: hidden;
}

.product-card:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--box-shadow);
    border-color: var(--shallow-water);
}

.product-card img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius);
    object-fit: contain;
    object-position: center;
}

/* Standalone product images with border */
img.product-card {
    border: var(--border-std);
    border-color: var(--primary-blue);
    display: block;
    margin: var(--spacing-unit) auto;
}

/* Override for logos in product cards - keep them circular */
.product-card img[src*="logo"],
.product-card img[src*="raypaklogo"] {
    border-radius: var(--border-radius-full);
}

.product-card .product-name {
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 100%;
    overflow: hidden;
}


.product-card a {
    text-align: center;
    display: block;
    transition: all var(--transition-normal) ease;
    border-radius: var(--border-radius);
    color: var(--primary-blue);
    text-decoration: underline;
    max-width: 100%;
    overflow: hidden;
}

.product-card p:not(.product-name) a {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.product-card a:hover,
.product-card a:focus-visible {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.8), 0 0 40px rgba(14, 165, 233, 0.6), 0 0 60px rgba(14, 165, 233, 0.4);
}

.product-card a:hover img,
.product-card a:focus-visible img {
    filter: brightness(1.1);
   
}

/* Brand information links after product sections */
.brand-info-link {
    text-align: center;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-unit);
}

.brand-info-link a {
    display: inline-block;
    color: var(--text-color);
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.1rem, 1.3rem, 1.4rem);
    padding: var(--spacing-sm) var(--spacing-unit);
    border-radius: var(--border-radius);
    background-color: rgba(0, 102, 153, 0.05);
    border: 1px solid rgba(0, 102, 153, 0.2);
    text-shadow: var(--text-shadow);
    box-shadow: 0 2px 8px rgba(0, 102, 153, 0.15), 0 0 12px rgba(0, 102, 153, 0.1);
    transition: all var(--transition-normal) ease;
}

.brand-info-link a:hover,
.brand-info-link a:focus {
    color: var(--shallow-water);
    background-color: rgba(0, 102, 153, 0.1);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 153, 0.25), 0 0 16px rgba(0, 102, 153, 0.2);
    transform: var(--button-hover-transform);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Manufacturer Links Container */
.manufacturer-links-container {
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-unit);
    text-align: center;
    width: 60%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.manufacturer-links-container .brand-info-link {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    border: var(--border-std);
    border-radius: var(--border-radius);
    transition: transform var(--transition-normal) var(--transition-smooth), 
                box-shadow var(--transition-normal) var(--transition-smooth);
    min-height: var(--nav-btn-height);
    padding: 0;
    will-change: transform;
    background-color: rgba(14, 165, 233, 0.12);
}

.manufacturer-links-container .brand-info-link:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                0 0 40px rgba(14, 165, 233, 0.4),
                0 0 60px rgba(14, 165, 233, 0.2);
}

.manufacturer-links-container .brand-info-link a {
    align-content: center;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    min-height: var(--nav-btn-height);
    padding: var(--nav-btn-padding);
    color: var(--text-color);     
    text-decoration: none;
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

.manufacturer-links-container .brand-info-link a:hover,
.manufacturer-links-container .brand-info-link a:focus {
    color: var(--text-color);
    background: none;
    border: none;
    transform: none;
    box-shadow: none;
    text-shadow: var(--text-shadow);
}

.manufacturer-links-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: clamp(2rem, 2.2rem, 2.5rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-unit);
    color: var(--text-color);
    text-shadow: var(--text-shadow);
}

.manufacturer-links-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(0, 102, 153, 0.3);
}

/* Smaller logo images in product cards */
.product-card img[src*="logo"] {
    max-width: 120px;
}

.product-card img[src*="raypaklogo"] {
    max-width: 80px;
}

.service-category h3 {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    color: var(--primary-blue);
    margin: var(--spacing-lg) 0 var(--spacing-unit) 0;
    text-align: left;
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: var(--spacing-sm);
}

.service-category p {
    line-height: var(--line-height-base);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    color: var(--text-color);
    text-align: left;
  
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    font-style: italic;
}

.service-category p:last-child {
    margin-bottom: 0;
}

.service-category:hover h3 {
    background: var(--deep-water);
}

.red-glow-italic,
.service-category p.red-glow-italic,
.exclusion-notice.red-glow-italic,
.aside-title.red-glow-italic {
    color: #dc2626 ;
    font-style: italic ;
    text-shadow: 
        /* Black outline */
        -1px -1px 0 rgba(0, 0, 0, 1),
        1px -1px 0 rgba(0, 0, 0, 1),
        -1px 1px 0 rgba(0, 0, 0, 1),
        1px 1px 0 rgba(0, 0, 0, 1),
        0 -1px 0 rgba(0, 0, 0, 1),
        0 1px 0 rgba(0, 0, 0, 1),
        -1px 0 0 rgba(0, 0, 0, 1),
        1px 0 0 rgba(0, 0, 0, 1),
        /* White glow */
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(220, 38, 38, 0.3);
}

.exclusion-notice + .service-list li {
    font-style: italic;
}

.service-list {
    list-style: none;
    margin: 0;
    padding: var(--spacing-unit);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}

.service-item {
    margin: 0;
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    text-align: center;
    background: var(--glass-effect);
    transition: all var(--transition-normal) ease;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.service-item:hover {
    background: var(--deep-water);
    transform: var(--button-hover-transform);
    box-shadow: var(--box-shadow);
}

.service-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-blue);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 2px 2px 0;
    z-index: 1;
}

.service-item:hover::before {
    transform: scaleY(1);
}

.service-item h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
   
}

.service-item a {
    color: var(--text-color);
    text-decoration: none;
    transition: color var(--transition-normal) ease;
    display: block;
    text-align: center;
}

.service-item a:hover {
    color: var(--primary-blue);
}

.service-item p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.5;
    font-size: var(--font-size-base);
    text-align: center;
}

.service-list li {
    border-top: 1px solid var(--shallow-water);
    border-bottom: 1px solid var(--shallow-water);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal) ease;
    position: relative;
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-xs);
    text-align: left;
}

.service-list li:last-child {
    margin-bottom: 0;
}

.service-list li:hover {
    background: var(--glass-effect);
    transform: var(--button-hover-transform);
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-blue);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 2px 2px 0;
}

.service-list li:hover::before {
    transform: scaleY(1);
}

/* Links within list item text content (inline) */
.service-list li a {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
}

/* Add non-breaking space before inline links */
.service-list li a::before {
    content: '\00A0';
}

/* Direct child links (full-width flex layout) */
.service-list li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-unit);
    padding-left: calc(var(--spacing-unit) * 2);
}

.service-list li > a::before {
    content: normal;
}

.service-list a span:first-child {
    font-size: 1.2em;
    margin-right: var(--spacing-sm);
}

.services-two-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: var(--spacing-unit);
    margin: 0;
}

.services-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--spacing-unit);
    margin: 0;
}

.services-right {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Shared h4 styles for services columns */
.services-left h4,
.services-right h4 {
    width: 100%;
    color: var(--text-color);
    font-weight: 600;
    text-align: left;
    line-height: 1.3;
    display: block;
    margin: 0 0 var(--spacing-unit);
}

/* Left column specific styles */
.services-left h4 {
    padding: var(--spacing-sm) var(--spacing-unit);
    font-size: var(--font-size-xl);
    font-style: italic;
    background: transparent;
    border-left: none;
    border-radius: 0;
}

/* Right column specific styles */
.services-right h4 {
    font-size: var(--font-size-lg);
}

/* ==========================================================================
   Navigation Components
   ========================================================================== */
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    width: 100%;
    justify-content: center;
}

.nav-link {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--text-color);
    text-decoration: none;
    border: var(--border-std);
    border-radius: var(--border-radius);
    background: var(--glass-effect);
    transition: all var(--transition-normal) ease;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    min-width: 120px;
}

.nav-link:hover,
.nav-link:focus-visible {
    background: var(--primary-blue);
    color: var(--text-color);
    transform: var(--button-hover-transform);
    box-shadow: var(--box-shadow);
    text-decoration: none;
}

/* ==========================================================================
   Card Components
   ========================================================================== */
.card {
    display: flex;
    flex-direction: column;
    background: var(--glass-effect);
    border: var(--border-std);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.card-header {
    background: var(--primary-gradient);
    padding: var(--spacing-lg);
    border-bottom: var(--border-std);
    text-align: center;
}

.card-header h4 {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.card-body {
    padding: var(--spacing-lg);
    flex: 1;
}

.card-body p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
    line-height: var(--line-height-base);
}

.card-footer {
    padding: var(--spacing-lg);
    border-top: var(--border-std);
    background: var(--glass-effect-subtle);
    text-align: center;
}

/* ==========================================================================
   Content Cards & Info Sections
   ========================================================================== */


.badges-container {
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    height: 100%;
    padding: var(--spacing-unit);
    margin-bottom: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    
}

.warranty-badges {
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-unit);
    width: 100%;
}

.badge {
    display: flex;
  width: 100%;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-unit);
    color: var(--text-color);
    border: var(--border-std);
    border-color: var(--shallow-water);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    line-height: 1;
    transition: transform var(--transition-normal) var(--transition-smooth), 
                box-shadow var(--transition-normal) var(--transition-smooth);
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}


.info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: rgba(10, 94, 140, 0.5);
    border-radius: var(--border-radius);
    border: var(--border-std);
    border-color: var(--primary-blue);
    text-align: center;
    padding: var(--spacing-unit);
    transition: all var(--transition-normal) ease;
    box-sizing: border-box;
    min-width: 0;
}

.info-card p {
    line-height: var(--line-height-base);
    margin-left: 0;
    margin-right: 0;
}

.info-card p:first-of-type {
    font-size: var(--font-size-base);
}

.info-card:hover {
    background: var(--deep-water);
    transform: var(--button-hover-transform);
    box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);
}

/* Prevent hover from overriding background image on spa-delivery-last-card */
.spa-delivery-page .spa-delivery-last-card:hover {
    background: var(--deep-water);
    background-image: url(../images/gallerypics/localproviderlogos/santanas-spas-delivery-pic.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

/* Info Card Note - for service information sections */
.info-card-note {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; 
    width: 100%;
    max-width: 100%;
    background: transparent;
    border-radius: var(--border-radius);
    border: var(--border-std);
    border-color: var(--primary-blue);
    padding: var(--spacing-unit);
    transition: all var(--transition-normal) ease;
    margin-bottom: var(--spacing-unit);
    box-sizing: border-box;
    overflow: hidden;
}

/* Box-shadow hover effect for collapsible expanded cards */
.info-card-note.collapsible.expanded:hover {
    transform: var(--button-hover-transform);
    box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);
}

/* Remove border and padding from info-card-note when nested in master-container */
.master-container > .info-card-note {
    border: none;
    margin-bottom: 0;
    border-radius: 0;
    padding: var(--spacing-unit) calc(var(--spacing-unit) + 2px);
}

/* Make the first section more pronounced (forms, cover orders, main sections) */
.master-container > .info-card-note.first-section {
    padding: calc(var(--spacing-unit) * 1.5);
    margin-bottom: var(--spacing-lg);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    background: rgba(10, 94, 140, 0.05);
}

.info-card-note h2,
.info-card-note h3 {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

.aside-title {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
}

/* Title row container for h1 and h2 on same line */
.info-card-note .title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    flex-wrap: nowrap;
    width: 100%;
}

.info-card-note .title-row h1 {
    margin-bottom: 0;
    flex-shrink: 0;
}

.info-card-note .title-row h2.aside-title {
    flex-shrink: 1;
    margin-bottom: 0;
    white-space: nowrap;
    
}



.info-card-note em {
    font-style: italic;
    color: var(--primary-blue);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.info-card-note .service-category {
    margin-top: calc(var(--spacing-unit) * 0.5);
    padding-left: var(--spacing-lg);
}

.master-container .service-category {
    padding-left: var(--spacing-lg);
}

/* Reduce margins when service-category is inside serviceinfo-grid */
.serviceinfo-grid .service-category {
    margin: calc(var(--spacing-unit) * 0.5) auto;
}

/* Reduce margins when info-card-note is inside serviceinfo-grid */
.serviceinfo-grid .info-card-note {
    margin: calc(var(--spacing-unit) * 0.5) auto;
}

.info-card-note a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    margin-bottom: calc(var(--spacing-unit) * 0.5); 
    padding: var(--spacing-unit);
}



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

/* ==========================================================================
   Aside/Sidebar Components
   ========================================================================== */


.info-card h2,
.info-card h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin-bottom: var(--spacing-unit);
    text-shadow: var(--text-shadow);
}


.info-card p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-unit);
}


/* Safety Section */
.safety-section {
    background: var(--glass-effect-subtle);
    border: var(--border-std);
    border-color: var(--warning-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

.safety-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.safety-header h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

.safety-header p {
    color: var(--warning-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.safety-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.safety-card {
    background: var(--glass-effect);
    border: var(--border-std);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.safety-card h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin-bottom: var(--spacing-unit);
}

.safety-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.safety-card li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--text-muted);
    position: relative;
}

.safety-card li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--warning-color);
    font-weight: var(--font-weight-bold);
}

.safety-note-small {
    margin-top: var(--spacing-unit);
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--primary-blue);
    font-size: 0.875rem;
    color: var(--text-muted);
}


.aside__title {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: var(--text-shadow);
    color: var(--primary-blue);
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

.aside__text,
.aside__text--highlight {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
    text-align: center;
}

.aside__text span,
.aside__text--highlight {
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Contact Components
   ========================================================================== */
.contact-form {
    /* Panel background to prevent background/canvas bleed */
    background: transparent; /* Transparent - form-container provides the background */
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: none; /* No border - form-container has the border */
    box-shadow: none; /* No shadow - form-container has the shadow */
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;      /* form fills its container */
    margin: 0 auto;           /* keep centered if used standalone */
    position: relative;
    z-index: 1001;
    opacity: 1; /* Fully visible */
    transition: opacity var(--transition-normal) ease;
}

/* Ensure the visual card sizing is on the container */
.form-container {
 width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1000;
}

.contact-form:hover,
.contact-form:focus-within {
    opacity: 1;
}

.master-container,
.serviceinfo-grid {
    width: 100%;  
    margin-inline: auto;
}


.contact-note {
    background: var(--page-background-subtle);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    border: var(--border-std);
    border-color: var(--primary-blue);
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: var(--spacing-unit);
}

.contact-item {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--shallow-water);
    background-color: var(--glass-effect);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-unit);
    background: rgba(0, 119, 190, 0.05);
}

.contact-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.contact-item a {
    color: var(--shallow-water);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--text-color);
}



/* ==========================================================================
   Experience & Timeline Components
   ========================================================================== */
.experience-card {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: var(--border-std);
    border-color: var(--primary-blue);
    text-align: center;
}

.experience-number {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--shallow-water);
    font-family: var(--font-heading);
}

.experience-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: var(--spacing-unit);
}

.timeline {
    margin: var(--spacing-lg) 0;
}

.timeline-item {
    background-color: var(--glass-effect);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-unit);
    border-left: 4px solid var(--primary-blue);
}

.timeline-year {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--shallow-water);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial {
    background-color: rgba(22, 163, 74, 0.2);
    border: 1px solid rgb(34, 197, 94);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
}

.testimonial-author {
    font-weight: var(--font-weight-bold);
    color: rgb(34, 197, 94);
    margin-top: var(--spacing-unit);
}

/* ==========================================================================
   Canvas & Visual Effects
   ========================================================================== */
.canvas-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: var(--z-canvas);
    pointer-events: none;
    background: var(--page-background-strong);
    will-change: transform;
    transform: translateZ(0);
    isolation: isolate;
    border-radius: var(--border-radius);
}

.header .canvas-wrapper::before {
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(6px, 0.6vh, 10px);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0.0) 100%);
    z-index: calc(var(--z-canvas) + 1);
    pointer-events: none;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#ripple-canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-canvas);
    will-change: transform;
    transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    #ripple-canvas {
        display: none;
    }
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

.cta-container img {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-unit);
}


/* ==========================================================================
   Additional Components (Logos, Providers, etc.)
   ========================================================================== */
.partner-logo {
    text-align: center;
    margin: var(--spacing-unit) 0;
    padding: var(--spacing-unit);
    width: 100%;
}

.partner-logo:hover {
    box-shadow: var(--shadow-lg);
}

/* Partner logo images inherit from universal style above */

/* Phone image fallback - shown when JS is disabled */
.phone-image {
    white-space: nowrap;
    display: inline-block;
}

.phone-image a {
    display: inline-block;
    white-space: nowrap;
}

.phone-image svg {
    display: inline-block;
    vertical-align: middle;
}

.phone-image .phone-fallback {
    max-width: 150px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Hide phone fallback when SVG is created by JS */
.phone-image svg ~ .phone-fallback,
.phone-image:has(svg) .phone-fallback {
    display: none;
}

/* Logo images inherit from universal style above */

/* Provider content - mobile-first: column layout */
.provider-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    width: 100%;
    margin-bottom: var(--spacing-unit);
   
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    background: rgba(10, 94, 140, 0.5);
    transition: all var(--transition-normal) ease;
    text-align: center;

}

/* Show logos in provider-content on mobile */
.provider-content > .welcome-image-1 {
    display: block;
    width: clamp(140px, 28vw, 180px);
    height: clamp(140px, 28vw, 180px);
    margin: 0 auto;
    border: none;
}

.provider-content > .welcome-image-1 a {
    display: block;
    width: 100%;
    height: 100%;
}

.provider-content > .welcome-image-1 img {
    border: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-full);
}

.provider-content:hover {
    background: rgba(10, 94, 140, 0.5);
    transform: var(--button-hover-transform);
    box-shadow: 0 4px var(--blur-radius) var(--spread-radius) rgba(0, 119, 190, 0.3);
}


.provider-content h2 {
    margin: 0;
    text-align: center;
}

.provider-content h2 a {
    color: var(--primary-blue);
    text-decoration: none;
}

.provider-content h2 a:hover {
    text-decoration: underline;
}

.provider-content p {
    margin: 0;
    text-align: center;
}

/* Universal logo image style - works for all provider logos */
.welcome-image-1 img,
.welcome-image-2 img,
.provider-content p img,
.partner-logo img {
    width: 70px;
    height: 70px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    display: block;
    margin: var(--spacing-unit) auto;
    object-position: center;
}

/* Exclude provider-content main logos from universal rule - more specific selector */
.provider-content > .welcome-image-1 img {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Other paragraphs */

/* ==========================================================================
   Payment Section Styles
   ========================================================================== */

/* Payment Container */
/* ==========================================================================
   Payment Section Styles
   ========================================================================== */

/* Payment Container */
.payment-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    gap: var(--spacing-lg);
    background: var(--glass-effect);
    border: var(--border-std);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.payment-container::before {
    content: "🔒 Secure Payment Form";
    position: absolute;
    top: -0.75em;
    left: var(--spacing-unit);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--shallow-water);
    padding: 0 var(--spacing-sm);
    background: var(--bg-color);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

#payment-section {
    display: none;
}

/* Payment Header */
.payment-header {
    text-align: center;
    width: 100%;
    padding: 0;
    margin-bottom: var(--spacing-unit);
}

.payment-header h1 {
    color: var(--text-color);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.payment-header h2 {
    color: var(--text-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.payment-header p {
    color: var(--text-muted);
    font-size: var(--font-size-base);
    margin: var(--spacing-sm) 0;
}

.payment-header .alternative-note {
    color: var(--text-muted);
    font-size: var(--font-size-base);
    font-style: italic;
    margin-top: var(--spacing-unit);
}

.payment-header .alternative-note a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.payment-header .alternative-note a:hover {
    color: var(--shallow-water);
}

/* Payment Summary */
.payment-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-lg);
    margin: var(--spacing-unit) 0;
    background: var(--background-color);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
}

.payment-description {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 0;
}

.payment-description p {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

/* Service Price Row */
.service-price-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-unit);
    margin-top: var(--spacing-sm);
}

#service-item {
    flex: 1 1 auto;
    color: var(--shallow-water);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

#total-item {
    flex: 0 0 auto;
    color: var(--shallow-water);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-heading);
    white-space: nowrap;
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-lg);
    margin: var(--spacing-unit) 0;
    text-align: center;
    align-items: center;
}

.payment-method {
    display: none;
    overflow: hidden;
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal) ease;
}

.payment-method.active {
    display: block;
    background: var(--deep-water);
    border-color: var(--shallow-water);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* PayPal Button */
.paypal-button-container {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.paypal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: var(--spacing-unit) var(--spacing-xl);
    gap: var(--spacing-md);
    background: #0070ba;
    border: 2px solid #005ea6;
    border-radius: var(--border-radius);
    color: white;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-normal) ease;
}

.paypal-button:hover {
    background: #005ea6;
    border-color: #004a8c;
    transform: var(--button-hover-transform);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.paypal-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.paypal-button img {
    margin: 0;
}

.paypal-logo {
    width: 140px;
    height: auto;
    max-height: 35px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}


.btn-primary {
    background: var(--primary-gradient);
    color: var(--text-color);
    border: var(--border-std);
    border-color: var(--text-color);
    padding: var(--spacing-unit) var(--spacing-xl);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    width: 100%;
    max-width: 400px;
    min-height: 44px;
    box-shadow: var(--box-shadow);
}

.btn-primary:hover {
    background: var(--secondary-gradient);
    transform: var(--button-hover-transform);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
}


.btn-secondary {
    background: transparent;
    color: var(--text-color);
    border: var(--border-std);
    border-color: var(--primary-blue);
    padding: var(--spacing-unit) var(--spacing-xl);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    width: 100%;
    max-width: 400px;
    min-height: 44px;
}

.btn-secondary:hover {
    background: var(--glass-effect);
    border-color: var(--text-color);
    transform: var(--button-hover-transform);
}

/* Error States */
.form-group.error input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Success States */
.form-group.success input {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Payment Success Page Styles */
.payment-success-container {
    text-align: center;
    padding: var(--spacing-lg);
    max-width: 600px;
    margin: 0 auto;
    background: var(--glass-effect-subtle);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--border-radius);
}

.success-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    color: #10b981;
    display: block;
}

.payment-success-container h1 {
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xxl);
}

.success-message {
    background: var(--glass-effect-subtle);
    border: 1px solid rgba(16, 185, 129, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.success-message p {
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
}

.success-message ul {
    color: var(--text-color);
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

.success-message li {
    margin-bottom: var(--spacing-sm);
}

/* Payment Receipt */
.payment-receipt {
    background: var(--glass-effect);
    border: var(--border-std);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: left;
}

.payment-receipt h3 {
    color: var(--text-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: var(--spacing-sm);
}

.receipt-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(10, 94, 140, 0.2);
}

.receipt-row:last-child {
    border-bottom: none;
}

.receipt-label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    flex: 0 0 40%;
}

.receipt-value {
    color: var(--text-color);
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.success-actions .submit-btn.secondary {
    background: var(--glass-effect-subtle);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.success-actions .submit-btn.secondary:hover {
    background: var(--glass-effect);
    border-color: var(--primary-color);
}

/* ==========================================================================
   Desktop/Tablet Responsive Styles (768px+)
   ========================================================================== */
@media (min-width: 768px) {

    .layout-container {
        margin-bottom: 20px;
   
        max-width: 1400px;
    }

    
    /* Hide toggle indicator on desktop */
    .index-column-header .toggle-indicator {
        display: none;
    }
    
    .index-column-header {
        justify-content: center;
    }
    
    /* Form rows - desktop: row layout */
    .contact-form .form-row {
        flex-direction: row;
    }
    
    /* Warranty badges - desktop: row layout */
    .warranty-badges {
        flex-direction: row;
    }
    
    .badge {
        width: auto;
        flex: 1 1 auto;
    }
    
    .provider-content {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: var(--spacing-sm) var(--spacing-lg);
        align-items: center;
        padding: var(--spacing-unit) var(--spacing-4xl);
    }
    
    /* Desktop: logo in first column, vertically centered */
    .provider-content > .welcome-image-1 {
        grid-column: 1;
        grid-row: 1;
        display: block;
        max-width: 200px;
        width: 200px;
        height: 200px;
        align-self: center;
        justify-self: center;
        margin: 0 auto;
        padding: 0;
        border: none;
        transition: transform 0.3s ease;
    }
    
    .provider-content > .welcome-image-1 a {
        display: block;
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease;
    }
    
    .provider-content > .welcome-image-1 img {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
        border-radius: var(--border-radius-full);
        transition: transform 0.3s ease;
    }
    
    .provider-content > .welcome-image-1:hover,
    .provider-content > .welcome-image-1:hover a,
    .provider-content > .welcome-image-1:hover img {
        transform: scale(1.1);
    }
    
    /* Desktop: provider-info container in second column */
    .provider-content > .provider-info {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-sm);
        text-align: left;
        min-width: 0;
        max-width: 100%;
    }
    
    .provider-content > .provider-info h2 {
        margin: 0;
        padding: 0;
    }
    
    .provider-content > .provider-info p {
        margin: 0;
        padding: 0;
    }
    
    /* Desktop: local-provider-logo size override */
    .local-provider-logo {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        height: 100px;
        min-height: 100px;
        max-height: 100px;
        align-self: center;
    }
    
    /* Ensure both anchor and div elements align the same */
    a.local-provider-logo,
    div.local-provider-logo {
        align-self: center;
    }
    
    /* Universal logo image style - desktop size */
    .welcome-image-1 img,
    .welcome-image-2 img,
    .provider-content p img,
    .local-provider-logo img,
    .partner-logo img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        display: block;
    }
    
    /* Exclude provider-content main logos from universal rule - more specific selector */
    .provider-content > .welcome-image-1 img {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    /* Desktop: manufacturer links logo size */
    .manufacturer-links-logo {
        width: 50px;
        height: 50px;
    }

    /* Desktop: manufacturer links container - 3 column grid layout */
    .manufacturer-links-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-unit);
        width: 60%;
        max-width: 1200px;
        margin: var(--spacing-lg) auto;
    }

    .manufacturer-links-container .brand-info-link {
        margin: 0;
    }

    /* Desktop: table cell padding */
    table th,
    table td {
        padding: var(--spacing-unit);
    }
    
    .welcome-text h1 {
        text-shadow: var(--text-shadow);
        text-transform: uppercase;
        margin-bottom: var(--spacing-unit);
        font-weight: var(--font-weight-bold);
    }
    /* Service category - desktop: row layout for provider cards, column for equipment sections */
    .service-category {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-unit);
        justify-content: left;
        width: 100%;
    }

    /* Override for provider-content sections that need row layout */
    .provider-content .service-category,
    .local-provider-logo + .service-category {
        flex-direction: row;
    }
    
    .service-category h3 {
        text-align: left;
        margin: var(--spacing-xl) 0 var(--spacing-unit) 0;
    }
    
    /* Product images container - desktop: display cards in rows */

    
    .product-card {
        flex: 1 1 calc(50% - var(--spacing-unit));
        min-width: 250px;
        max-width: calc(50% - var(--spacing-unit));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .product-card .product-name {
        margin-top: auto;
    }
    
    .product-card img {
        max-width: 100%;
        max-height: 400px;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: center;
        border-radius: var(--border-radius);
    }
    
    /* Keep logos circular on desktop */
    .product-card img[src*="logo"],
    .product-card img[src*="raypaklogo"] {
        border-radius: var(--border-radius-full);
    }
    
    
    /* Smaller logo images on desktop */
    .product-card img[src*="logo"] {
        max-width: 100px;
    }
    

    .product-grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-items: stretch;
        padding: var(--spacing-unit);
        gap: var(--spacing-unit);
        width: 88%;
        min-width: 400px;
        margin: 0 auto;
    }
 

    .urgency-options {
        flex-direction: row;
    }

    .radio-option {
        flex: 1;
    }

    .safety-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Wider gutters on desktop */


   
    
    .header {
        overflow: visible;
        min-height: 266px;
        /* max-height: 100%; */
    }
    
    /* Desktop: Make header sticky */
    #header-container {
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        background: var(--body-color);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Desktop: hero-nav-container stays as row */
    .hero-nav-container {
        flex-direction: row;
    }
    
    /* Index page: logo and hero-text side by side */
    .index-page .hero-nav-container {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 88%;
        max-width: 100%;
        margin: 0 auto;
    }
   
    .index-page .hero-nav-container .logo {
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
    }

    .index-page .hero-nav-container .hero-text {
        flex: 1;
        align-self: center;
        margin: 0;
        text-align: center;
    }
    
    .index-page .header-content-grid .main-nav {
        width: 88%;
        margin: 0 auto;
    }
    
    /* Non-index pages: logo and nav side by side */
    body:not(.index-page) .header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        align-items: center;
        gap: var(--spacing-unit);
    }
    
    body:not(.index-page) .header > .logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: center;
    }
    
    body:not(.index-page) .header > .main-nav {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }


    .emoji-desktop {
        display: inline-block;
        margin-right: 0.4ch;
        font-size: 1em;
        line-height: 1;
        vertical-align: text-bottom;
    }



    .nav-columns {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-unit);
        width: 100%;
        margin-top: 0%;
    }


    .nav-column {
        flex: 1;
    }

    .nav-menu {
        position: relative;
        z-index: var(--z-nav);
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--spacing-sm);
        list-style: none;
        margin: 0;
        overflow: visible;
        -ms-overflow-style: none;
        padding: var(--spacing-unit);
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    
    .index-nav-toggle {
        display: none;
    }

    .index-nav-dropdown {
        display: flex;
        width: 100%;
        flex-direction: row;
        gap: var(--spacing-xs);
    }
    
    /* Non-index pages: nav dropdowns in column layout on desktop */
    body.non-index-page .index-nav-dropdown {
        flex-direction: column;
    }
    
    .index-column-header {
        margin: var(--spacing-xs) auto;
        font-weight: var(--font-weight-semibold);
    }

    .index-column-header,
    .index-nav-dropdown .nav-item a {
        font-weight: var(--font-weight-semibold);
    }
    
    .index-column-header:hover,
    .index-nav-dropdown .nav-item a:hover {
        box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                    0 0 40px rgba(14, 165, 233, 0.4),
                    0 0 60px rgba(14, 165, 233, 0.2);
    }
    
    .index-nav-dropdown .nav-item:hover,
    .nav-item:hover,
    .btn-effect:hover {
        transform: var(--button-hover-transform);
    }
    
    .btn-effect:hover {
        box-shadow: 0 0 20px rgba(14, 165, 233, 0.6),
                    0 0 40px rgba(14, 165, 233, 0.4),
                    0 0 60px rgba(14, 165, 233, 0.2);
    }
    .header-content-grid {
        flex-direction: column;
        align-items: stretch;
    }
    
    .main-content {
        height: auto;
    }


    .logo {
        width: clamp(96px, 180px, 220px);
        height: clamp(96px, 180px, 220px);
        max-width: clamp(96px, 180px, 220px);
        margin: 0;
    }

    .logo-link,
    .logo-link a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        border-radius: var(--border-radius-full);
        transition: transform var(--transition-normal) ease;
    }

    .pools-header {
        font-weight: var(--font-weight-bold);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .cta-container {
        padding: 0 var(--spacing-unit);
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-unit);
    }

    .main-nav {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin-bottom: var(--spacing-sm);
        width: 100%;
    }

    .nav-columns.active {
        flex-direction: row;
    }

    .content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        width: 100%;
        max-width: 100%;
        background-color: var(--glass-effect);
        box-shadow: var(--shadow-water);
        border: var(--border-std);
        border-color: var(--primary-blue);
        padding: var(--spacing-xl);
        border-radius: var(--border-radius);
        margin: auto;
    }
    .welcome-content {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: var(--spacing-lg);
        width: 100%;     
    }

    /* Image container 1 - 25% width (only within welcome-content) */
    .welcome-content .welcome-image-1 {
        display: flex;
        flex: 0 0 25%;
        max-width: 25%;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-unit);
    }

    /* Text container - 50% width */
    .welcome-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        align-self: stretch;
    }

    /* Image container 2 - 25% width (only within welcome-content) */
    .welcome-content .welcome-image-2 {
        display: flex;
        flex: 0 0 25%;       
        max-width: 25%;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-unit);
    }

    /* Ensure images are properly constrained within their 25% containers (only within welcome-content) */
    .welcome-content .welcome-image-1 img,
    .welcome-content .welcome-image-2 img {
        width: 100%; 
        max-width: 150px;
        max-height: 150px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: var(--border-radius-full);
        display: block;
        transition: transform var(--transition-normal) ease, filter var(--transition-normal) ease;
        margin: 0 auto;
    }
    .services-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-two-column {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--spacing-lg);
         }
    .services-left {
        width: 45%;
    }
    .services-right {
        width: 55%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
         }

    /* Payment styles for 768px+ */
    .payment-header h1 {
        font-size: var(--font-size-3xl);
    }
    .success-actions {
        flex-direction: row;
    }
    .payment-success-container {
        padding: var(--spacing-xl);
    }
    
    .payment-receipt {
        margin: var(--spacing-xl) 0;
    }
    
    .receipt-row {
        padding: var(--spacing-md) 0;
    }

    /* Desktop: enable fixed background attachment for parallax effect */
    .serviceinfo-grid {
        background-attachment: fixed;
    }
    
    .index-serviceinfo-grid {
        background-attachment: fixed;
    }
    
    .local-providers-page .service-category {
        background-attachment: fixed;
    }
}

/* ==========================================================================
   Larger Desktop Styles (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    body {width: 100%; max-width: 88%; margin: 0 auto;}
    .layout-container {width: 100%;
        max-width: 100%;
    }
    .payment-header h1 {
        font-size: var(--font-size-4xl);
    }
    .payment-success-container {
        max-width: 700px;
    }
}

/* ==========================================================================
   Hover Styles (devices with hover capability)
   ========================================================================== */
@media (hover: hover) {
    .welcome-image-1,
    .welcome-image-2 {
        cursor: pointer;
    }

    .welcome-image-1:hover,
    .welcome-image-1:focus-visible,
    .welcome-image-2:hover,
    .welcome-image-2:focus-visible {
        box-shadow: var(--shadow-lg);
        z-index: 1000;
    }

    .welcome-image-1:hover img,
    .welcome-image-1:focus-visible img,
    .welcome-image-2:hover img,
    .welcome-image-2:focus-visible img {
        filter: brightness(1.2) contrast(1.1);
        transform: scale(1.1);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    /* Hide navigation, footer, and buttons when printing */
    .header,
    .footer,
    .success-actions,
    .master-container,
    .submit-btn,
    .file-label {
        display: none
    }
    
    /* Optimize receipt for printing */
    .payment-success-container {
        max-width: 100%;
        border: none;
        box-shadow: none;
        background: white;
        padding: 20px;
    }
    
    .payment-receipt {
        background: white;
        border: 2px solid #000;
        page-break-inside: avoid;
    }
    
    .receipt-row {
        border-bottom: 1px solid #ccc;
    }
    
    .success-icon {
        color: #000 !important;
    }
    
    /* Ensure text is black for printing */
    .receipt-label,
    .receipt-value,
    .success-message p,
    .success-message strong {
        color: #000 !important;
    }
    
    .status-message {
        padding: var(--spacing-lg);
        margin: var(--spacing-unit) 0;
    }
}

/* ==========================================================================
   Additional Styles
   ========================================================================== */
select option[value=""] {
    color: var(--text-muted);
}