/* =============================================================================
   Kinetico Dealer v5 — Design System
   ============================================================================= */

:root {
  --navy-950: #040d18;
  --navy-900: #061828;
  --navy-800: #0b2f4e;
  --navy-700: #0d3d63;
  --navy-600: #0a5c8a;
  --blue-500: #0081bb;
  --blue-400: #0099d9;
  --blue-300: #00aeef;
  --blue-200: #5dd0f7;
  --blue-100: #bce8fb;
  --blue-50:  #e8f6fd;
  --teal:     #0a9d8f;
  --white:      #ffffff;
  --off-white:  #f4f9fd;
  --gray-50:    #edf4fa;
  --gray-100:   #d8e9f4;
  --gray-300:   #9cb8cc;
  --gray-500:   #556d7c;
  --gray-700:   #4a6070;
  --text:       #1a2e3d;
  --text-mid:   #2c4255;
  /* Aliases for --color-* names used by some inline page styles (water-problem pages) */
  --color-navy: var(--navy-800);
  --color-primary: var(--blue-500);
  --color-accent: var(--blue-300);
  --color-border: var(--gray-100);
  --color-gray-100: var(--gray-100);
  --color-text-muted: var(--gray-500);
  --font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
  --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --sp-20:5rem; --sp-24:6rem;
  --radius-sm:4px; --radius:8px; --radius-lg:14px; --radius-xl:20px; --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(6,24,40,.10); --shadow:0 4px 12px rgba(6,24,40,.12);
  --shadow-lg:0 8px 28px rgba(6,24,40,.16); --shadow-xl:0 16px 48px rgba(6,24,40,.20);
  --glow-blue:0 4px 24px rgba(0,129,187,.30); --glow-blue-lg:0 8px 40px rgba(0,129,187,.40);
  --container-max:1200px; --container-pad:clamp(1rem,4vw,2rem);
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:150ms; --dur:250ms; --dur-slow:400ms;
  --header-h:70px; --topbar-h:36px;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--fw-normal);line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:var(--blue-500);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--blue-400)}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;border:none;background:none;cursor:pointer}
fieldset{border:0;min-width:0;margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:var(--fw-bold);line-height:1.2;color:var(--text)}

/* --- Layout --- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.container--narrow{max-width:780px}
.container--wide{max-width:1400px}
.grid{display:grid;gap:var(--sp-8)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.hidden{display:none!important}

/* --- Type utils --- */
.text-center{text-align:center}
.text-white{color:var(--white)!important}
.text-muted{color:var(--gray-500)}
.text-blue{color:var(--blue-500)}
.text-teal{color:var(--teal)}
.label{display:inline-block;font-family:var(--font-head);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.10em;text-transform:uppercase;color:var(--blue-300)}
.section-title{font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl));font-weight:var(--fw-black);line-height:1.15;margin-bottom:var(--sp-4)}
.section-subtitle{font-size:var(--text-lg);color:var(--gray-700);max-width:600px;line-height:1.7}
.text-center .section-subtitle{margin-inline:auto}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)} .mb-10{margin-bottom:var(--sp-10)}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mt-10{margin-top:var(--sp-10)}
.section-head{margin-bottom:var(--sp-12)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.75rem 1.75rem;font-family:var(--font-head);font-size:var(--text-sm);font-weight:var(--fw-semi);letter-spacing:.03em;border-radius:var(--radius-full);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease);white-space:nowrap;user-select:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue-500);color:var(--white);border-color:var(--blue-500);box-shadow:var(--glow-blue)}
.btn--primary:hover{background:var(--blue-400);border-color:var(--blue-400);box-shadow:var(--glow-blue-lg);color:var(--white)}
.btn--secondary{background:var(--white);color:var(--blue-500);border-color:var(--white)}
.btn--secondary:hover{background:var(--blue-50);color:var(--navy-800);border-color:var(--blue-50)}
.btn--outline{background:transparent;color:var(--blue-500);border-color:var(--blue-500)}
.btn--outline:hover{background:var(--blue-500);color:var(--white)}
.btn--outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.50)}
.btn--outline-white:hover{background:rgba(255,255,255,.15);color:var(--white);border-color:var(--white)}
.btn--dark{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}
.btn--dark:hover{background:var(--navy-700);color:var(--white)}
.btn--lg{padding:.95rem 2.25rem;font-size:var(--text-base)}
.btn--sm{padding:.55rem 1.25rem;font-size:var(--text-xs)}
.btn--full{width:100%;justify-content:center}
.btn-group{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}

/* --- Header --- */
.site-header{position:relative;z-index:1000;transition:background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}
.header-topbar{background:var(--navy-950);padding:var(--sp-2) 0;height:var(--topbar-h);font-size:var(--text-xs);color:rgba(255,255,255,.60);border-bottom:1px solid rgba(255,255,255,.06)}
.header-topbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:100%}
.header-topbar a{color:rgba(255,255,255,.65)}
.header-topbar a:hover{color:var(--white)}
.topbar-right{display:flex;align-items:center;gap:var(--sp-6)}
.header-topbar .btn{padding:.55rem 1.45rem;font-size:.72rem;border-width:1px;margin-left:var(--sp-3)}
.topbar-phone{font-family:var(--font-head);font-weight:var(--fw-semi);color:var(--blue-300)!important;font-size:var(--text-sm)}
.topbar-phone:hover{color:var(--white)!important}
.header-nav{background:rgba(6,24,40,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07);height:var(--header-h)}
.header-nav.scrolled{background:rgba(4,13,24,.98);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.header-nav__inner{display:flex;align-items:center;gap:var(--sp-6);height:100%}
.site-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-logo img{height:40px;width:auto}
.primary-nav{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}
.primary-nav li{position:relative}
.primary-nav>li>a{display:flex;align-items:center;gap:4px;padding:var(--sp-3) var(--sp-4);font-family:var(--font-head);font-size:var(--text-sm);font-weight:var(--fw-medium);color:rgba(255,255,255,.80);text-decoration:none;border-radius:var(--radius);transition:color var(--dur) var(--ease),background var(--dur) var(--ease);white-space:nowrap}
.primary-nav>li>a:hover,.primary-nav>li.active>a{color:var(--white);background:rgba(255,255,255,.08)}
.nav-arrow{transition:transform var(--dur) var(--ease);width:12px;height:12px;opacity:.50;flex-shrink:0}
.has-dropdown:hover .nav-arrow{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--navy-900);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--sp-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:100}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);color:rgba(255,255,255,.70);border-radius:var(--radius);transition:color var(--dur) var(--ease),background var(--dur) var(--ease);text-decoration:none}
.dropdown a:hover{color:var(--white);background:rgba(255,255,255,.07)}
.header-ctas{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;margin-left:auto;border-radius:var(--radius);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--white);border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.skip-link{position:absolute;top:-100%;left:1rem;z-index:2000;padding:.75rem 1.5rem;background:var(--blue-500);color:var(--white);font-weight:var(--fw-semi);border-radius:0 0 var(--radius) var(--radius);transition:top var(--dur) var(--ease)}
.skip-link:focus{top:0;color:var(--white)}

/* --- Hero --- */
.hero{position:relative;min-height:calc(100vh - var(--topbar-h) - var(--header-h));min-height:calc(100svh - var(--topbar-h) - var(--header-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--sp-12);padding-bottom:140px;background:radial-gradient(ellipse 120% 60% at 25% 80%,rgba(0,174,239,.10) 0%,transparent 55%),radial-gradient(ellipse 70% 50% at 75% 15%,rgba(0,129,187,.07) 0%,transparent 60%),linear-gradient(175deg,#040d18 0%,#061828 20%,#0b2f4e 50%,#0d4a6e 78%,#0a5c8a 100%)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(168deg,transparent 0%,transparent 46%,rgba(0,174,239,.022) 47%,rgba(0,174,239,.022) 53%,transparent 54%,transparent 100%);background-size:280px 100%;animation:light-rays 22s ease-in-out infinite alternate}
@keyframes light-rays{0%{opacity:.35;transform:translateX(0) skewX(-1deg)}100%{opacity:1;transform:translateX(50px) skewX(2deg)}}
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:rgba(0,174,239,.20);animation:bubble-rise linear infinite}
.particle:nth-child(1){width:7px;height:7px;left:10%;animation-duration:13s;animation-delay:0s}
.particle:nth-child(2){width:4px;height:4px;left:24%;animation-duration:10s;animation-delay:2.5s;opacity:.5}
.particle:nth-child(3){width:10px;height:10px;left:41%;animation-duration:16s;animation-delay:4s;opacity:.3}
.particle:nth-child(4){width:5px;height:5px;left:58%;animation-duration:9s;animation-delay:1s;opacity:.6}
.particle:nth-child(5){width:8px;height:8px;left:75%;animation-duration:14s;animation-delay:6s;opacity:.4}
.particle:nth-child(6){width:3px;height:3px;left:87%;animation-duration:8s;animation-delay:3s;opacity:.7}
.particle:nth-child(7){width:6px;height:6px;left:33%;animation-duration:15s;animation-delay:7s;opacity:.35}
.particle:nth-child(8){width:9px;height:9px;left:51%;animation-duration:11s;animation-delay:5s;opacity:.25}
.particle:nth-child(9){width:4px;height:4px;left:6%;animation-duration:17s;animation-delay:9s;opacity:.5}
.particle:nth-child(10){width:7px;height:7px;left:93%;animation-duration:12s;animation-delay:2s;opacity:.4}
@keyframes bubble-rise{0%{transform:translateY(100vh) translateX(0) scale(1);opacity:0}5%{opacity:.8}90%{opacity:.4}100%{transform:translateY(-20px) translateX(18px) scale(1.4);opacity:0}}
.hero__content{position:relative;z-index:2;max-width:680px}
.hero__label{display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-5);font-family:var(--font-head);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300)}
.hero__label::before{content:'';display:block;width:28px;height:2px;background:var(--blue-300);border-radius:2px}
.hero__title{font-family:var(--font-head);font-size:clamp(2.6rem,7vw,4.6rem);font-weight:var(--fw-black);line-height:1.04;color:var(--white);margin-bottom:var(--sp-6);letter-spacing:-.02em}
.hero__title .accent{color:var(--blue-300)}
.hero__subtitle{font-size:clamp(var(--text-base),1.8vw,var(--text-xl));color:rgba(255,255,255,.68);line-height:1.75;margin-bottom:var(--sp-10);max-width:540px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-12)}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.trust-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--fw-medium);color:rgba(255,255,255,.70)}
.trust-pill svg{color:var(--blue-300);width:14px;height:14px;flex-shrink:0}
.hero-waves{position:absolute;bottom:-2px;left:0;right:0;height:120px;pointer-events:none}
.wave{position:absolute;bottom:0;left:0;width:200%;max-width:none;height:100%}
.wave--3{animation:wave-drift 22s linear infinite;opacity:.15}
.wave--2{animation:wave-drift 14s linear infinite reverse;opacity:.20}
.wave--1{animation:wave-drift 8s linear infinite;opacity:1}
@keyframes wave-drift{0%{transform:translateX(0) translateZ(0)}100%{transform:translateX(-50%) translateZ(0)}}
.hero__scroll{position:absolute;bottom:130px;left:var(--container-pad);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);animation:scroll-pulse 2.4s ease-in-out infinite alternate}
.hero__scroll svg{width:20px;height:20px}
@keyframes scroll-pulse{0%{opacity:.3;transform:translateY(0)}100%{opacity:.8;transform:translateY(6px)}}

/* --- Trust Bar --- */
.trust-bar{background:var(--navy-800);border-bottom:1px solid rgba(255,255,255,.06);padding:var(--sp-6) 0}
.trust-bar__inner{display:flex;align-items:center;justify-content:space-around;gap:var(--sp-8);flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:var(--sp-3);color:rgba(255,255,255,.70)}
.trust-item__icon{width:42px;height:42px;background:rgba(0,174,239,.10);border:1px solid rgba(0,174,239,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue-300);flex-shrink:0}
.trust-item__icon svg{width:20px;height:20px}
.trust-item__text strong{display:block;font-family:var(--font-head);font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--white)}
.trust-item__text span{font-size:var(--text-xs);color:rgba(255,255,255,.45)}

/* --- Sections --- */
.section{padding:clamp(var(--sp-12),8vw,var(--sp-24)) 0;position:relative}
.section--sm{padding:clamp(var(--sp-8),5vw,var(--sp-16)) 0}
.section--xs{padding:clamp(var(--sp-6),3vw,var(--sp-10)) 0}
.section--light{background:var(--off-white)}
.section--gray{background:var(--gray-50)}
.section--navy{background:var(--navy-800)}
.section--dark{background:var(--navy-900)}
.section--navy .label,.section--dark .label{color:var(--blue-200)}
.section--navy .section-title,.section--dark .section-title{color:var(--white)}
.section--navy .section-subtitle,.section--dark .section-subtitle{color:rgba(255,255,255,.58)}
.wave-divider{display:block;width:100%;overflow:hidden;line-height:0;margin:-2px 0}
.wave-divider svg{display:block;width:100%}

/* --- Water Solver --- */
.water-solver{background:var(--navy-900);border:1px solid rgba(0,174,239,.14);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl),0 0 80px rgba(0,129,187,.07);max-width:840px;margin-inline:auto}
.solver-header{padding:var(--sp-8) var(--sp-8) var(--sp-6);border-bottom:1px solid rgba(255,255,255,.07);text-align:center}
.solver-header h2{font-size:var(--text-2xl);color:var(--white);margin-bottom:var(--sp-2)}
.solver-header p{color:rgba(255,255,255,.50);font-size:var(--text-sm)}
.solver-steps{display:flex;align-items:center;justify-content:center;margin-top:var(--sp-6)}
.step-dot__num{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:var(--text-xs);font-weight:var(--fw-bold);color:rgba(255,255,255,.35);transition:all var(--dur) var(--ease)}
.step-dot.active .step-dot__num{background:var(--blue-500);border-color:var(--blue-500);color:var(--white);box-shadow:var(--glow-blue)}
.step-dot.done .step-dot__num{background:var(--teal);border-color:var(--teal);color:var(--white)}
.step-connector{width:48px;height:2px;background:rgba(255,255,255,.10);margin:0 var(--sp-2);border-radius:2px;transition:background var(--dur-slow) var(--ease)}
.step-connector.done{background:var(--teal)}
.solver-body{padding:var(--sp-8)}
.solver-step{display:none}
.solver-step.active{display:block}
.solver-step h3{font-size:var(--text-xl);color:var(--white);margin-bottom:var(--sp-2)}
.solver-step>p{color:rgba(255,255,255,.50);font-size:var(--text-sm);margin-bottom:var(--sp-6)}
.problem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:var(--sp-3)}
.problem-option{position:relative;display:flex}
.problem-option input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.problem-option label{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-3);background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--dur) var(--ease);font-size:var(--text-sm);color:rgba(255,255,255,.70);user-select:none}
.problem-option label .p-icon{width:40px;height:40px;background:rgba(0,174,239,.09);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue-300);transition:all var(--dur) var(--ease);flex-shrink:0}
.problem-option label .p-icon svg{width:20px;height:20px}
.problem-option input:checked+label{background:rgba(0,129,187,.15);border-color:var(--blue-400);color:var(--white)}
.problem-option input:checked+label .p-icon{background:var(--blue-500);color:var(--white)}
.problem-option label:hover{background:rgba(255,255,255,.09);border-color:rgba(0,174,239,.35);color:var(--white)}
.home-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-6)}
.radio-option{position:relative;display:flex}
.radio-option input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.radio-option label{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-4);background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--dur) var(--ease);font-size:var(--text-sm);color:rgba(255,255,255,.70);text-align:center}
.radio-option label svg{width:28px;height:28px;color:var(--blue-300)}
.radio-option input:checked+label{background:rgba(0,129,187,.18);border-color:var(--blue-400);color:var(--white)}
.radio-option label:hover{background:rgba(255,255,255,.09);border-color:rgba(0,174,239,.35);color:var(--white)}
.result-products{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.result-product-item{display:flex;align-items:center;gap:var(--sp-4);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-lg);padding:var(--sp-4);animation:result-appear .4s var(--ease-out) both}
.result-product-item img{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.result-product-item h4{color:var(--white);font-size:var(--text-base);margin-bottom:var(--sp-1)}
.result-product-item p{color:rgba(255,255,255,.50);font-size:var(--text-xs)}
@keyframes result-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.solver-result-ctas{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.solver-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-6) var(--sp-8);border-top:1px solid rgba(255,255,255,.07)}

/* --- Product Cards --- */
.product-card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}
.product-card:hover{box-shadow:0 12px 40px rgba(0,129,187,.14);transform:translateY(-4px);border-color:var(--blue-200)}
.product-card__img{background:var(--gray-50);padding:var(--sp-8) var(--sp-6);display:flex;align-items:center;justify-content:center;min-height:210px;position:relative;overflow:hidden}
.product-card__img img{width:155px;height:155px;object-fit:contain;position:relative;z-index:1;transition:transform var(--dur-slow) var(--ease)}
.product-card:hover .product-card__img img{transform:scale(1.05)}
.product-card__badge{position:absolute;top:var(--sp-4);right:var(--sp-4);z-index:2;padding:var(--sp-1) var(--sp-3);background:var(--blue-500);color:var(--white);font-size:var(--text-xs);font-weight:var(--fw-bold);font-family:var(--font-head);border-radius:var(--radius-full);letter-spacing:.04em}
.product-card__badge--best{background:var(--teal)}
.product-card__body{padding:var(--sp-6);flex:1;display:flex;flex-direction:column}
.product-card__title{font-size:var(--text-xl);font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}
.product-card__tagline{font-size:var(--text-sm);color:var(--blue-500);font-weight:var(--fw-semi);font-family:var(--font-head);margin-bottom:var(--sp-4)}
.product-card__desc{font-size:var(--text-sm);color:var(--gray-700);line-height:1.65;flex:1;margin-bottom:var(--sp-5)}
.product-card__features{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.product-card__feature{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);color:var(--gray-700)}
.product-card__feature::before{content:'';width:16px;height:16px;flex-shrink:0;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain}

/* --- Icon Boxes --- */
.icon-box{display:flex;flex-direction:column;gap:var(--sp-4)}
.icon-box--horizontal{flex-direction:row;align-items:flex-start}
.icon-box__icon{width:52px;height:52px;border-radius:var(--radius-lg);background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-500);transition:all var(--dur) var(--ease)}
.icon-box__icon svg{width:26px;height:26px}
.icon-box:hover .icon-box__icon{background:var(--blue-500);color:var(--white)}
.icon-box--dark .icon-box__icon{background:rgba(0,174,239,.10);color:var(--blue-300)}
.icon-box--dark:hover .icon-box__icon{background:var(--blue-500);color:var(--white)}
.icon-box__title{font-size:var(--text-xl);font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}
.icon-box--dark .icon-box__title{color:var(--white)}
.icon-box__text{font-size:var(--text-sm);color:var(--gray-700);line-height:1.7}
.icon-box--dark .icon-box__text{color:rgba(255,255,255,.55)}

/* --- Testimonials --- */
.testimonial-card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);transition:box-shadow var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.testimonial-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.testimonial-card--dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.testimonial-card>*{position:relative;z-index:1}
.testimonial-card__quote{position:absolute;top:-2.5rem;right:.5rem;z-index:0;font-size:12rem;color:var(--blue-50);line-height:1;font-family:Georgia,serif;pointer-events:none;user-select:none}
.testimonial-card--dark .testimonial-card__quote{color:rgba(255,255,255,.05)}
.testimonial-card__text{font-size:var(--text-sm);line-height:1.85;color:var(--gray-700);flex:1}
.testimonial-card--dark .testimonial-card__text{color:rgba(255,255,255,.60)}
.testimonial-card__stars{display:flex;gap:3px}
.star{color:#f59e0b;font-size:22px;line-height:1}
.testimonial-card__author{display:flex;align-items:center;gap:var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--gray-100);margin-top:auto}
.testimonial-card--dark .testimonial-card__author{border-color:rgba(255,255,255,.08)}
.testimonial-card__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.testimonial-card__name{font-family:var(--font-head);font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--text)}
.testimonial-card--dark .testimonial-card__name{color:var(--white)}
.testimonial-card__location{font-size:var(--text-xs);color:var(--gray-500)}

/* --- Blog Cards --- */
.blog-card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.blog-card__img{aspect-ratio:16/9;overflow:hidden;background:var(--gray-50)}
.blog-card__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.blog-card:hover .blog-card__img img{transform:scale(1.04)}
.blog-card__body{padding:var(--sp-6);flex:1;display:flex;flex-direction:column}
.blog-card__meta{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--text-xs);color:var(--gray-500)}
.blog-card__cat{color:var(--blue-500);font-weight:var(--fw-semi);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em}
.blog-card__title{font-size:var(--text-lg);font-weight:var(--fw-bold);line-height:1.35;color:var(--text);margin-bottom:var(--sp-3);transition:color var(--dur) var(--ease)}
.blog-card:hover .blog-card__title{color:var(--blue-500)}
.blog-card__excerpt{font-size:var(--text-sm);color:var(--gray-700);line-height:1.65;flex:1;margin-bottom:var(--sp-5)}
.read-more{font-size:var(--text-sm);font-weight:var(--fw-semi);font-family:var(--font-head);color:var(--blue-500);display:inline-flex;align-items:center;gap:var(--sp-1);text-decoration:none;transition:gap var(--dur) var(--ease)}
.read-more:hover{gap:var(--sp-3);color:var(--blue-500)}
.read-more::after{content:'→'}

/* --- Problem Cards --- */
.problem-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);padding:var(--sp-6) var(--sp-5);background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);text-decoration:none;transition:all var(--dur-slow) var(--ease)}
.problem-card:hover{box-shadow:0 8px 32px rgba(0,129,187,.12);border-color:var(--blue-200);transform:translateY(-3px)}
.problem-card__img{width:72px;height:72px;object-fit:contain}
.problem-card__title{font-size:var(--text-base);font-weight:var(--fw-semi);font-family:var(--font-head);color:var(--text);transition:color var(--dur) var(--ease)}
.problem-card:hover .problem-card__title{color:var(--blue-500)}
.problem-card__sub{font-size:var(--text-xs);color:var(--gray-500);line-height:1.5}

/* --- Stats Bar --- */
.stats-bar{background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 100%);padding:var(--sp-12) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);text-align:center}
.stat-item__num{display:block;font-family:var(--font-head);font-weight:var(--fw-black);font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));color:var(--white);line-height:1;margin-bottom:var(--sp-2)}
.stat-item__num .accent{color:var(--blue-300)}
.stat-item__label{font-size:var(--text-sm);color:rgba(255,255,255,.50);font-family:var(--font-head)}

/* --- Process Steps --- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);position:relative}
.process-grid::before{content:'';position:absolute;top:27px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);height:2px;background:linear-gradient(to right,var(--blue-500),var(--teal));border-radius:2px;z-index:0}
.process-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);position:relative;z-index:1}
.process-step__num{width:54px;height:54px;border-radius:50%;background:var(--blue-500);box-shadow:var(--glow-blue);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:var(--text-xl);font-weight:var(--fw-black);color:var(--white);flex-shrink:0}
.process-step:nth-child(2) .process-step__num{background:#0099d9}
.process-step:nth-child(3) .process-step__num{background:#00aeef}
.process-step:nth-child(4) .process-step__num{background:var(--teal)}
.process-step__title{font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--text);line-height:1.3}
.process-step__text{font-size:var(--text-sm);color:var(--gray-700);line-height:1.6}
.section--navy .process-step__title{color:var(--white)}
.section--navy .process-step__text{color:rgba(255,255,255,.50)}

/* --- Forms --- */
.form-card{background:var(--white);border-radius:var(--radius-xl);padding:clamp(var(--sp-8),5vw,var(--sp-12));box-shadow:var(--shadow-xl)}
.form-card--dark{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.form-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.form-label{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-mid);font-family:var(--font-head)}
.form-card--dark .form-label{color:rgba(255,255,255,.65)}
.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-100);border-radius:var(--radius);background:var(--white);color:var(--text);font-size:var(--text-sm);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,129,187,.12)}
.form-card--dark .form-input,.form-card--dark .form-select,.form-card--dark .form-textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--white)}
.form-card--dark .form-input::placeholder{color:rgba(255,255,255,.30)}
.form-card--dark .form-input:focus,.form-card--dark .form-textarea:focus{border-color:var(--blue-400);background:rgba(255,255,255,.09)}
.form-textarea{resize:vertical;min-height:120px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8899' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.form-note{font-size:var(--text-xs);color:var(--gray-500);display:flex;align-items:center;gap:var(--sp-2)}
.form-card--dark .form-note{color:rgba(255,255,255,.6)}
.required{color:#e05252;margin-left:2px}

/* --- CTA Section --- */
.cta-section{position:relative;padding:clamp(var(--sp-16),10vw,var(--sp-24)) 0;overflow:hidden}
.cta-section__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.22) saturate(1.5)}
.cta-section__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,47,78,.95) 0%,rgba(10,92,138,.80) 100%)}
.cta-section__inner{position:relative;z-index:2;text-align:center}
.cta-section__title{font-size:clamp(var(--text-2xl),5vw,var(--text-5xl));font-weight:var(--fw-black);color:var(--white);margin-bottom:var(--sp-4)}
.cta-section__sub{font-size:var(--text-lg);color:rgba(255,255,255,.68);max-width:560px;margin:0 auto var(--sp-10);line-height:1.7}

/* --- Inner Page Hero --- */
.page-hero{background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 50%,var(--navy-700) 100%);padding:var(--sp-12) 0 var(--sp-16);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(165deg,transparent 0%,transparent 44%,rgba(0,174,239,.02) 45%,rgba(0,174,239,.02) 55%,transparent 56%,transparent 100%);background-size:200px 100%}
.page-hero__inner{position:relative;z-index:1}
.page-hero__title{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));font-weight:var(--fw-black);color:var(--white);margin-bottom:var(--sp-4);line-height:1.1}
.page-hero__sub{font-size:var(--text-lg);color:rgba(255,255,255,.62);max-width:640px;line-height:1.75;margin-bottom:var(--sp-8)}
.page-hero__wave{position:absolute;bottom:-2px;left:0;right:0;line-height:0}
.page-hero__wave svg{display:block;width:100%;height:40px}
.breadcrumb{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);color:rgba(255,255,255,.66);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.breadcrumb a{color:rgba(255,255,255,.50)}
.breadcrumb a:hover{color:var(--blue-300)}
.breadcrumb .sep{color:rgba(255,255,255,.22)}
.breadcrumb .current{color:rgba(255,255,255,.65)}
.breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:0}
.breadcrumb ol li{display:flex;align-items:center;gap:var(--sp-2)}
.breadcrumb ol li+li::before{content:'/';color:rgba(255,255,255,.22)}
.breadcrumb [aria-current="page"]{color:rgba(255,255,255,.65)}
.section--light .breadcrumb,.section--gray .breadcrumb{color:var(--gray-500)}
.section--light .breadcrumb a,.section--gray .breadcrumb a{color:var(--gray-700)}
.section--light .breadcrumb a:hover,.section--gray .breadcrumb a:hover{color:var(--blue-500)}
.section--light .breadcrumb [aria-current="page"],.section--gray .breadcrumb [aria-current="page"]{color:var(--text-mid)}
.section--light .breadcrumb ol li+li::before,.section--gray .breadcrumb ol li+li::before{color:var(--gray-300)}

/* --- Blog Post --- */
.post-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-12);align-items:start}
.post-content h2{font-size:var(--text-2xl);margin:var(--sp-10) 0 var(--sp-4)}
.post-content h3{font-size:var(--text-xl);margin:var(--sp-8) 0 var(--sp-3)}
.post-content p{margin-bottom:var(--sp-5);line-height:1.85;color:var(--gray-700)}
.post-content ul,.post-content ol{margin:var(--sp-5) 0 var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{color:var(--gray-700);line-height:1.75}
.post-content blockquote{border-left:4px solid var(--blue-500);margin:var(--sp-8) 0;padding:var(--sp-5) var(--sp-6);background:var(--blue-50);border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-size:var(--text-lg);color:var(--navy-700);font-style:italic}
.post-meta{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-8);padding-bottom:var(--sp-6);border-bottom:1px solid var(--gray-100)}
.post-meta__item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--gray-500)}
.post-meta__item svg{width:16px;height:16px;color:var(--blue-500)}
.sidebar{display:flex;flex-direction:column;gap:var(--sp-8)}
.sidebar-widget{background:var(--off-white);border-radius:var(--radius-lg);padding:var(--sp-6)}
.sidebar-widget__title{font-size:var(--text-base);font-weight:var(--fw-bold);margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:2px solid var(--blue-100)}

/* --- FAQ accordion --- */
.faq-item{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.faq-item:hover{border-color:var(--blue-100)}
.faq-item.open{border-color:var(--blue-200);box-shadow:var(--shadow-sm)}
.faq-question{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);font-family:var(--font-head);font-size:var(--text-base);font-weight:var(--fw-semi);letter-spacing:-.01em;color:var(--text);cursor:pointer;background:none;border:none;transition:color var(--dur) var(--ease)}
.faq-question:hover{color:var(--blue-500)}
.faq-icon{flex-shrink:0;width:28px;height:28px;border:2px solid var(--gray-300);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);font-size:18px;line-height:1;color:var(--gray-500)}
.faq-icon::after{content:'+'}
.faq-item.open .faq-icon{border-color:var(--blue-500);background:var(--blue-500);color:var(--white)}
.faq-item.open .faq-icon::after{content:'−'}
.faq-item.open .faq-question{color:var(--blue-500)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.faq-item.open .faq-answer{max-height:1200px}
/* Answer body — one rule for both <p> and __inner markup so padding/size never diverge.
   Horizontal padding matches the question (var(--sp-6)) so the answer aligns under it. */
.faq-answer p,.faq-answer__inner{padding:0 var(--sp-6) var(--sp-5);margin:0;color:var(--gray-700);line-height:1.7;font-size:var(--text-base)}
.faq-answer p:not(:last-child),.faq-answer__inner p:not(:last-child){margin-bottom:var(--sp-3)}
.faq-answer a{color:var(--blue-500);font-weight:var(--fw-medium);text-decoration:underline;text-underline-offset:2px}
.faq-answer a:hover{color:var(--blue-400)}

/* --- Comparison Table --- */
.comparison-table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{padding:var(--sp-4) var(--sp-5);text-align:left;border-bottom:1px solid var(--gray-100);font-size:var(--text-sm)}
.comparison-table th{font-family:var(--font-head);font-weight:var(--fw-semi);background:var(--gray-50);color:var(--text)}
.comparison-table td:first-child{font-weight:var(--fw-medium)}
.comparison-table .check{color:var(--teal)}
.comparison-table .cross{color:var(--gray-300)}

/* --- Footer --- */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.60);padding-top:var(--sp-16)}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.5fr;gap:var(--sp-10);padding-bottom:var(--sp-12);border-bottom:1px solid rgba(255,255,255,.06)}
.footer-brand__logo{height:36px;width:auto;margin-bottom:var(--sp-5)}
.footer-brand__desc{font-size:var(--text-sm);line-height:1.8;color:rgba(255,255,255,.45);margin-bottom:var(--sp-6)}
.footer-brand__auth{font-size:var(--text-xs);color:rgba(255,255,255,.62)}
.footer-col__title{font-family:var(--font-head);font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--white);margin-bottom:var(--sp-5);letter-spacing:.05em;text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer-links a{font-size:var(--text-sm);color:rgba(255,255,255,.45);transition:color var(--dur) var(--ease)}
.footer-links a:hover{color:var(--blue-300)}
.footer-contact{display:flex;flex-direction:column;gap:var(--sp-4)}
.footer-contact__item{display:flex;gap:var(--sp-3);font-size:var(--text-sm);color:rgba(255,255,255,.45)}
.footer-contact__item svg{color:var(--blue-300);width:18px;height:18px;flex-shrink:0;margin-top:2px}
.footer-contact__item a{color:rgba(255,255,255,.60)}
.footer-contact__item a:hover{color:var(--white)}
/* footer-contact reused on a light section (e.g. contact page) needs dark text */
.section--light .footer-contact__item,.section--gray .footer-contact__item{color:var(--text-mid)}
.section--light .footer-contact__item a,.section--gray .footer-contact__item a{color:var(--blue-500)}
.section--light .footer-contact__item a:hover,.section--gray .footer-contact__item a:hover{color:var(--navy-700)}
.footer-bottom{padding:var(--sp-5) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--text-xs);color:rgba(255,255,255,.62)}
.footer-bottom a{color:rgba(255,255,255,.38)}
.footer-bottom a:hover{color:rgba(255,255,255,.65)}
.footer-bottom-links{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.social-links{display:flex;gap:var(--sp-3)}
.social-link{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);transition:all var(--dur) var(--ease);text-decoration:none}
.social-link:hover{background:var(--blue-500);border-color:var(--blue-500);color:var(--white)}
.social-link svg{width:15px;height:15px}

/* --- Scroll Reveal --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.visible{opacity:1;transform:none}
.reveal-left{transform:translateX(-24px)}
.reveal-right{transform:translateX(24px)}
.reveal-left.visible,.reveal-right.visible{transform:none;opacity:1}
.reveal-delay-1{transition-delay:.10s}
.reveal-delay-2{transition-delay:.20s}
.reveal-delay-3{transition-delay:.30s}
.reveal-delay-4{transition-delay:.40s}
.reveal-delay-5{transition-delay:.50s}

/* --- Misc --- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.highlight-box{background:var(--blue-50);border:1px solid var(--blue-100);border-left:4px solid var(--blue-500);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:var(--sp-5) var(--sp-6)}
.highlight-box p{color:var(--navy-700);font-size:var(--text-sm);margin:0;line-height:1.75}
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--fw-semi);font-family:var(--font-head)}
.badge--blue{background:var(--blue-50);color:var(--blue-500)}
.badge--teal{background:rgba(11,204,184,.10);color:var(--teal)}

/* --- Responsive --- */
@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .post-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .primary-nav>li>a{padding:var(--sp-3) var(--sp-3);font-size:.8rem}
}
@media(max-width:768px){
  :root{--header-h:64px}
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--navy-950);flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--header-h) + 20px) var(--sp-6) var(--sp-8);overflow-y:auto;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease);z-index:500;margin-left:0}
  .primary-nav.open{transform:translateX(0)}
  .primary-nav>li{border-bottom:1px solid rgba(255,255,255,.06)}
  .primary-nav>li>a{padding:var(--sp-4) var(--sp-2);font-size:var(--text-base)}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:rgba(255,255,255,.03);padding-left:var(--sp-4);border-radius:0;display:none}
  .has-dropdown.open .dropdown{display:block}
  .header-topbar{display:none}
  .header-ctas{display:none}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .process-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .form-row{grid-template-columns:1fr}
  .hero__ctas{flex-direction:column}
  .hero__ctas .btn{justify-content:center}
  .btn-group{flex-direction:column;align-items:stretch}
  .btn-group .btn{justify-content:center}
  .problem-grid{grid-template-columns:repeat(2,1fr)}
  .home-type-grid{grid-template-columns:repeat(2,1fr)}
  .solver-nav{flex-direction:column}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .problem-grid{grid-template-columns:1fr}
}

/* --- Inner Page Hero (alias for page-hero) --- */
.inner-hero{background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 50%,var(--navy-700) 100%);padding:var(--sp-12) 0 var(--sp-16);position:relative;overflow:hidden}
.inner-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(165deg,transparent 0%,transparent 44%,rgba(0,174,239,.02) 45%,rgba(0,174,239,.02) 55%,transparent 56%,transparent 100%);background-size:200px 100%}
.inner-hero .container{position:relative;z-index:1}
.inner-hero__title{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));font-weight:var(--fw-black);color:var(--white);margin-bottom:var(--sp-4);line-height:1.1}
.inner-hero__sub{font-size:var(--text-lg);color:rgba(255,255,255,.62);max-width:640px;line-height:1.75;margin-bottom:var(--sp-6)}

/* --- Blog Post Layout --- */
.blog-post__layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-12);align-items:start}
.blog-post__header{margin-bottom:var(--sp-4)}
.blog-post__cat{display:inline-block;font-family:var(--font-head);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.10em;text-transform:uppercase;color:var(--blue-300);margin-bottom:var(--sp-3)}
.blog-post__meta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--text-sm);color:rgba(255,255,255,.45);margin-bottom:var(--sp-2)}
.blog-post__img{width:100%;border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--sp-10)}
.blog-post__img img{width:100%;height:auto;display:block}
.blog-post__body h1,.blog-post__body h2{font-size:clamp(var(--text-xl),3vw,var(--text-3xl));margin:var(--sp-10) 0 var(--sp-4)}
.blog-post__body h3{font-size:var(--text-xl);margin:var(--sp-8) 0 var(--sp-3)}
.blog-post__body p{margin-bottom:var(--sp-5);line-height:1.85;color:var(--gray-700)}
.blog-post__body ul,.blog-post__body ol{margin:var(--sp-5) 0 var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.blog-post__body ul{list-style:disc}
.blog-post__body ol{list-style:decimal}
.blog-post__body li{color:var(--gray-700);line-height:1.75}
.blog-post__body blockquote{border-left:4px solid var(--blue-500);margin:var(--sp-8) 0;padding:var(--sp-5) var(--sp-6);background:var(--blue-50);border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-size:var(--text-lg);color:var(--navy-700);font-style:italic}
.blog-post__body table{width:100%;border-collapse:collapse;margin:var(--sp-8) 0}
.blog-post__body table th,.blog-post__body table td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--gray-100);font-size:var(--text-sm)}
.blog-post__body table th{font-family:var(--font-head);font-weight:var(--fw-semi);background:var(--gray-50)}

/* --- Sidebar (blog) --- */
.blog-post__sidebar{display:flex;flex-direction:column;gap:var(--sp-6);position:sticky;top:calc(var(--topbar-h) + var(--header-h) + var(--sp-6))}
.sidebar-box{background:var(--off-white);border-radius:var(--radius-lg);padding:var(--sp-6);border:1px solid var(--gray-100)}
.sidebar-box h3{font-size:var(--text-base);font-weight:var(--fw-bold);margin-bottom:var(--sp-4)}
.sidebar-box p{font-size:var(--text-sm);color:var(--gray-700);margin-bottom:var(--sp-4);line-height:1.65}
.sidebar-box a:not(.btn){color:var(--blue-500);font-weight:var(--fw-medium)}
.sidebar-box a:not(.btn):hover{color:var(--blue-400)}

/* --- Form Sections --- */
.form-section{padding:clamp(var(--sp-12),8vw,var(--sp-20)) 0}
.form-section--dark{background:var(--navy-900)}
.form-section--dark .form-label{color:rgba(255,255,255,.65)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--sp-8),6vw,var(--sp-16));align-items:start}
.form-side{color:rgba(255,255,255,.75)}
.form-side h2{color:var(--white);font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:var(--fw-black);line-height:1.2;margin-bottom:var(--sp-6)}
.form-side h3{color:var(--white);font-size:var(--text-xl);font-weight:var(--fw-bold);line-height:1.25;margin-bottom:var(--sp-6)}
.form-side .process-grid--numbered .process-step{align-items:center}
.form-side .icon-boxes--compact{margin-top:var(--sp-8);padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,.12)}
.form-side p{font-size:var(--text-base);line-height:1.75;color:rgba(255,255,255,.60);margin-bottom:var(--sp-5)}
.form-box{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);padding:clamp(var(--sp-8),5vw,var(--sp-10));box-shadow:var(--shadow-xl)}
.form-box h2{color:var(--text);font-size:var(--text-2xl);margin-bottom:var(--sp-6)}
.form-box .form-input,.form-box .form-select,.form-box .form-textarea{background:var(--white);border-color:var(--gray-100);color:var(--text)}
.form-box .form-input::placeholder,.form-box .form-textarea::placeholder{color:var(--gray-300)}
.form-box .form-input:focus,.form-box .form-select:focus,.form-box .form-textarea:focus{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(0,129,187,.12)}
.form-box .form-select{color:var(--text)}
.form-box .form-select option{background:var(--white);color:var(--text)}
.form-box .form-label{color:var(--text-mid)}

/* --- Trust box (conversion pages) --- */
.trust-signal-box{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}
.trust-signal-item{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-sm);color:rgba(255,255,255,.65)}
.trust-signal-item svg{color:var(--teal);width:18px;height:18px;flex-shrink:0;margin-top:2px}
.trust-signal-item strong{color:rgba(255,255,255,.85)}

/* --- FAQ List wrapper --- */
.faq-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.section--navy .faq-item,.section--dark .faq-item{border-color:rgba(255,255,255,.07)}
.section--navy .faq-question,.section--dark .faq-question{color:rgba(255,255,255,.85)}
.section--navy .faq-question:hover,.section--dark .faq-question:hover{color:var(--blue-300)}
.section--navy .faq-answer__inner,.section--dark .faq-answer__inner{color:rgba(255,255,255,.50)}
.section--navy .faq-icon,.section--dark .faq-icon{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.62)}

/* --- Legal page content --- */
.legal-content{max-width:800px;margin-inline:auto}
.legal-content h2{font-size:var(--text-2xl);margin:var(--sp-10) 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--gray-100)}
.legal-content h3{font-size:var(--text-xl);margin:var(--sp-8) 0 var(--sp-3);color:var(--navy-800)}
.legal-content p{margin-bottom:var(--sp-5);line-height:1.85;color:var(--gray-700)}
.legal-content ul{margin:var(--sp-4) 0 var(--sp-5) var(--sp-6);list-style:disc;display:flex;flex-direction:column;gap:var(--sp-2)}
.legal-content li{color:var(--gray-700);line-height:1.75}

/* --- Responsive additions --- */
@media(max-width:1024px){
  .blog-post__layout{grid-template-columns:1fr}
  .blog-post__sidebar{position:static}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .inner-hero{padding-top:var(--sp-10)}
  .form-box{padding:var(--sp-6)}
}

/* ============================================================
   PAGE-COMPATIBILITY ADDITIONS
   Components referenced by the agent-built pages that were
   missing from the core stylesheet. Built on existing tokens
   and matched to existing component styling.
   ============================================================ */

/* --- Section eyebrow label (mirrors .label) --- */
.section-label,.section__label{display:inline-block;font-family:var(--font-head);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.10em;text-transform:uppercase;color:var(--blue-500);margin-bottom:var(--sp-3)}
.section--navy .section-label,.section--dark .section-label,.section--navy .section__label,.section--dark .section__label,.inner-hero .section-label{color:var(--blue-200)}
.section__title{font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl));font-weight:var(--fw-black);line-height:1.15;margin-bottom:var(--sp-4)}

/* --- Lead paragraph --- */
.lead{font-size:var(--text-lg);line-height:1.8;color:var(--text-mid)}

/* --- Icon box grid + compact variant --- */
.icon-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.icon-boxes--compact{display:flex;flex-direction:column;gap:var(--sp-4)}
.icon-box--compact{flex-direction:row;align-items:flex-start;gap:var(--sp-4)}
.icon-box--compact .icon-box__icon{width:42px;height:42px;border-radius:var(--radius)}
.icon-box--compact .icon-box__icon svg{width:20px;height:20px}
.icon-box--compact .icon-box__title{font-size:var(--text-base)}
.icon-box__content{display:flex;flex-direction:column;gap:var(--sp-1)}
.section--navy .icon-box--compact .icon-box__text,.section--dark .icon-box--compact .icon-box__text{color:rgba(255,255,255,.65)}
.section--navy .icon-box--compact .icon-box__title,.section--dark .icon-box--compact .icon-box__title{color:var(--white)}

/* --- Numbered process list (vertical; overrides the horizontal .process-grid) --- */
.process-grid--numbered{display:flex;flex-direction:column;gap:var(--sp-6);list-style:none;padding:0;margin:0}
.process-grid--numbered::before{display:none}
.process-grid--numbered .process-step{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--sp-5)}
ol.process-grid{list-style:none;padding-left:0;margin:0}
.process-step__body{display:flex;flex-direction:column;gap:var(--sp-2)}
.process-step__body .process-step__title{margin:0}
.process-step__number{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--blue-500);box-shadow:var(--glow-blue);color:var(--white);font-family:var(--font-head);font-weight:var(--fw-black);font-size:var(--text-xl);flex-shrink:0;margin-bottom:var(--sp-4)}

/* --- Stats list (vertical, about page) --- */
.stats-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.stats-list__item{display:flex;flex-direction:column;gap:var(--sp-1);padding-bottom:var(--sp-4);border-bottom:1px solid var(--gray-100)}
.stats-list__item:last-child{border-bottom:none;padding-bottom:0}
.stats-list__number{font-family:var(--font-head);font-weight:var(--fw-black);font-size:var(--text-3xl);color:var(--blue-500);line-height:1}
.stats-list__label{font-size:var(--text-sm);color:var(--gray-700)}

/* --- Stats grid 3-col + stat-item container --- */
.stats-grid--3{grid-template-columns:repeat(3,1fr)}
.stat-item{text-align:center}

/* --- Stats bar horizontal trust list (thank-you pages) --- */
.stats-bar__list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4) var(--sp-10)}
.stats-bar__item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:rgba(255,255,255,.75)}
.stats-bar__item::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0}
.stats-bar__label{font-family:var(--font-head)}

/* --- City / content / service-area lists --- */
.city-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-6)}
.city-list li,.service-area-list li{position:relative;padding-left:var(--sp-5);font-size:var(--text-sm);color:var(--gray-700);line-height:1.7}
.city-list li::before,.service-area-list li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--blue-300)}
.service-area-list{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3) var(--sp-5)}
.content-list{margin:var(--sp-4) 0 var(--sp-5) var(--sp-6);list-style:disc;display:flex;flex-direction:column;gap:var(--sp-2)}
.content-list li{color:var(--gray-700);line-height:1.75}

/* --- Highlight box light variant + heading --- */
.highlight-box--light{background:var(--off-white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-8)}
.highlight-box h2,.highlight-box--light h2{font-size:clamp(var(--text-xl),2.5vw,var(--text-3xl));color:var(--navy-800);margin-bottom:var(--sp-4)}

/* --- Form additions --- */
.contact-form{display:flex;flex-direction:column;gap:var(--sp-5)}
.contact-form .form-row{margin:0}
.form-row--2col{grid-template-columns:1fr 1fr}
.form-row--full{grid-template-columns:1fr}
.contact-form fieldset{border:none;padding:0;margin:0}
.form-side__call{font-size:var(--text-sm);color:rgba(255,255,255,.55);margin-top:var(--sp-6)}
.form-side__call a{color:var(--blue-300);font-weight:var(--fw-semi)}
.checkbox-group{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-2)}
.checkbox-label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--text-mid);cursor:pointer}
.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue-500);cursor:pointer;flex-shrink:0}
.trust-list{list-style:none;padding:0;margin:var(--sp-6) 0;display:flex;flex-direction:column;gap:var(--sp-4)}
.trust-list li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--text-sm);color:rgba(255,255,255,.70);line-height:1.6}
.trust-list li svg{color:var(--teal);width:20px;height:20px;flex-shrink:0;margin-top:2px}
.map-placeholder{background:var(--gray-50);min-height:280px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--gray-500);font-size:var(--text-sm)}
/* Dark form sidebar: force light text on the navy form-side (overrides default dark component colors) */
.form-side .icon-box__title,.form-side .process-step__title{color:var(--white)}
.form-side .icon-box__text,.form-side .process-step__text{color:rgba(255,255,255,.65)}
.form-side .icon-box__icon{background:rgba(0,174,239,.12);color:var(--blue-200)}
.form-side .icon-box--compact:hover .icon-box__icon{background:var(--blue-500);color:var(--white)}

/* --- Thank-you confirm + contact-center (global fallback; some pages also inline these) --- */
.confirm-block{max-width:720px;margin-inline:auto;text-align:center}
.confirm-icon{width:72px;height:72px;background:#16a34a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-8);box-shadow:0 4px 20px rgba(22,163,74,.30)}
.confirm-icon svg{width:36px;height:36px;color:#fff}
.confirm-title{font-family:var(--font-head);font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:var(--fw-black);color:var(--text);margin-bottom:var(--sp-4);line-height:1.2}
.confirm-sub{font-size:var(--text-lg);color:var(--gray-700);line-height:1.75;max-width:560px;margin-inline:auto}
.contact-center{text-align:center;max-width:560px;margin-inline:auto}
.contact-center__heading{font-size:var(--text-xl);font-weight:var(--fw-bold);color:var(--text);margin-bottom:var(--sp-4)}
.contact-center__phone{display:block;font-family:var(--font-head);font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));font-weight:var(--fw-black);color:var(--blue-500);text-decoration:none;margin-bottom:var(--sp-4)}
.contact-center__phone:hover{color:var(--blue-400)}
.contact-center__email{font-size:var(--text-base);color:var(--gray-700);margin-bottom:var(--sp-8)}
.contact-center__email a{color:var(--blue-500);font-weight:var(--fw-semi)}
.contact-center__secondary{font-size:var(--text-sm);color:var(--gray-500)}
.contact-center__secondary a{color:var(--blue-500);font-weight:var(--fw-semi);text-decoration:underline;text-underline-offset:2px}
.phone-link-large{font-family:var(--font-head);font-weight:var(--fw-black);font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));color:var(--blue-500);text-decoration:none}
.phone-link-large:hover{color:var(--blue-400)}

/* --- Comparison table yes/no cells --- */
.comparison-table .yes{color:var(--teal);font-weight:var(--fw-semi)}
.comparison-table .no{color:var(--gray-300)}

/* --- Footer brand container --- */
.footer-brand{max-width:340px}
.footer-brand__auth{font-size:var(--text-xs);color:rgba(255,255,255,.62);font-style:italic;margin-top:var(--sp-3)}

/* ============================================================
   BLOG
   ============================================================ */
.blog-card__category{color:var(--blue-500);font-weight:var(--fw-semi);font-family:var(--font-head);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em}
.blog-card__content{padding:var(--sp-6);flex:1;display:flex;flex-direction:column}
.blog-card__img-link{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--gray-50)}
.blog-card__img-link img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease)}
.blog-card:hover .blog-card__img-link img{transform:scale(1.05)}

.blog-featured-card{display:grid;grid-template-columns:1.05fr 1fr;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);margin-bottom:var(--sp-12)}
.blog-featured-card__img-link{display:block;overflow:hidden;background:var(--gray-50)}
.blog-featured-card__img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block}
.blog-featured-card__content{padding:clamp(var(--sp-6),4vw,var(--sp-10));display:flex;flex-direction:column;justify-content:center}
.blog-featured-card__meta{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-5);font-size:var(--text-xs);color:var(--gray-500)}
.blog-featured-card__title{font-size:clamp(var(--text-xl),3vw,var(--text-3xl));font-weight:var(--fw-black);line-height:1.2;margin-bottom:var(--sp-4)}
.blog-featured-card__title a{color:var(--text);text-decoration:none;transition:color var(--dur) var(--ease)}
.blog-featured-card__title a:hover{color:var(--blue-500)}
.blog-featured-card__excerpt{font-size:var(--text-base);color:var(--gray-700);line-height:1.7;margin-bottom:var(--sp-6)}

.blog-post__hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-5);font-size:var(--text-sm);color:rgba(255,255,255,.60)}
.blog-post__hero-meta .blog-card__category{color:var(--blue-200)}
.blog-post__featured-img{margin:var(--sp-8) 0;border-radius:var(--radius-lg);overflow:hidden}
.blog-post__featured-img img{width:100%;height:auto;display:block}
.blog-post__featured-img figcaption{font-size:var(--text-sm);color:var(--gray-500);text-align:center;margin-top:var(--sp-3)}
.blog-post__cta-box{background:var(--blue-50);border:1px solid var(--blue-100);border-left:4px solid var(--blue-500);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:clamp(var(--sp-6),4vw,var(--sp-8));margin:var(--sp-10) 0}
.blog-post__cta-box h3{margin:0 0 var(--sp-3);font-size:var(--text-xl);color:var(--navy-800)}
.blog-post__cta-box p{margin:0 0 var(--sp-5);color:var(--gray-700)}
.blog-post__related,.related-posts{margin-top:var(--sp-16);padding-top:var(--sp-12);border-top:1px solid var(--gray-100)}
.blog-post__related h2,.related-posts h2{font-size:var(--text-2xl);margin:0 0 var(--sp-8)}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--sp-8) 0}

/* ============================================================
   RESPONSIVE — page-compatibility additions
   ============================================================ */
@media(max-width:900px){
  .icon-boxes{grid-template-columns:repeat(2,1fr)}
  .blog-featured-card{grid-template-columns:1fr}
  .blog-featured-card__img{min-height:220px}
}
@media(max-width:768px){
  .stats-grid--3{grid-template-columns:1fr}
  .form-row--2col{grid-template-columns:1fr}
  .city-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .icon-boxes{grid-template-columns:1fr}
}

/* ============================================================
   DARK-SECTION TEXT CONTRAST
   Some pages place bare (uncolored) text directly in navy/dark
   sections, assuming the section auto-whitens text. Default
   dark-section content to light, then reset light cards/boxes
   (and their headings) back to dark so they stay readable.
   ============================================================ */
.section--navy, .section--dark{color:rgba(255,255,255,.82)}
.section--navy h2, .section--navy h3, .section--navy h4,
.section--dark h2, .section--dark h3, .section--dark h4{color:var(--white)}
.section--navy :is(.highlight-box,.highlight-box--light,.form-box,.blog-card,.testimonial-card),
.section--dark :is(.highlight-box,.highlight-box--light,.form-box,.blog-card,.testimonial-card){color:var(--text)}
.section--navy :is(.highlight-box,.highlight-box--light,.form-box,.blog-card,.testimonial-card) :is(h2,h3,h4),
.section--dark :is(.highlight-box,.highlight-box--light,.form-box,.blog-card,.testimonial-card) :is(h2,h3,h4){color:var(--text)}

/* --- Contact page: map embed + equal-size method cards (#15,#16) --- */
.map-embed{margin-top:var(--sp-6)}
.map-embed iframe{width:100%;height:340px;border:0;border-radius:var(--radius-lg);display:block;background:var(--gray-50)}
.contact-methods .icon-box{height:100%;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:var(--sp-8);align-items:flex-start;text-align:left;gap:var(--sp-3)}
.contact-methods .icon-box__title{font-size:var(--text-lg)}
.contact-methods .icon-box__text{flex:0 0 auto}
.contact-methods .icon-box .btn{margin-top:auto;align-self:flex-start}

/* --- About: team grid (#11) --- */
.team-grid{margin-top:var(--sp-8)}
.team-member{text-align:center}
.team-member picture{display:block;max-width:220px;margin:0 auto var(--sp-4)}
.team-member__photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);display:block;box-shadow:var(--shadow)}
.team-member__name{font-size:var(--text-lg);font-weight:var(--fw-bold);color:var(--text);margin-bottom:var(--sp-1)}
.team-member__role{font-size:var(--text-sm);color:var(--blue-500);font-family:var(--font-head)}
@media(max-width:768px){.team-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Services: uniform service cards (#12) --- */
.service-cards .icon-box{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:var(--sp-8);height:100%}

/* Testimonial text must win over container paragraph colors (e.g. .form-side p) (#13,#19) */
.testimonial-card .testimonial-card__text{color:var(--gray-700)}
.testimonial-card .testimonial-card__name{color:var(--text)}
.testimonial-card .testimonial-card__location{color:var(--gray-500)}
.testimonial-card .testimonial-card__quote{color:var(--blue-50)}
.testimonial-card--dark .testimonial-card__text{color:rgba(255,255,255,.60)}
.testimonial-card--dark .testimonial-card__name{color:var(--white)}

/* ============================================================
   WATER SCORE CALCULATOR (water-score.html)
   ============================================================ */
.water-score{max-width:880px;margin-inline:auto;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);padding:clamp(var(--sp-6),5vw,var(--sp-12));box-shadow:var(--shadow-lg)}
/* Gauge */
.ws-track{position:relative;padding-top:78px}
.ws-bar{height:46px;border-radius:var(--radius);background:linear-gradient(90deg,#ef8b3f 0%,#f0613f 16%,#ec5071 30%,#e0339a 44%,#b13fb0 60%,#6a5fc0 80%,#2e9fd8 100%)}
.ws-pointer{position:absolute;top:6px;left:50%;transform:translateX(-50%);transition:left .45s var(--ease);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.ws-pointer__num{min-width:58px;padding:.4rem .7rem;background:var(--navy-900);color:var(--white);font-family:var(--font-head);font-weight:var(--fw-black);font-size:var(--text-2xl);line-height:1;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-lg)}
.ws-pointer::after{content:'';width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid var(--navy-900);margin-top:-1px}
.ws-ticks{display:flex;justify-content:space-between;margin-top:var(--sp-3);font-size:var(--text-xs);font-weight:var(--fw-semi);color:var(--gray-500);font-family:var(--font-head)}
/* Verdict */
.ws-verdict{text-align:center;font-family:var(--font-head);font-weight:var(--fw-black);font-size:var(--text-2xl);margin:var(--sp-8) 0 var(--sp-10);transition:color var(--dur) var(--ease)}
.ws-verdict.is-excellent{color:#2e9fd8}
.ws-verdict.is-good{color:#4f74c4}
.ws-verdict.is-fair{color:#d6359a}
.ws-verdict.is-poor{color:#ef7a3f}
/* Sliders */
.ws-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-10);margin-bottom:var(--sp-10)}
.ws-field__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ws-field__top label{font-family:var(--font-head);font-weight:var(--fw-semi);font-size:var(--text-sm);color:var(--text)}
.ws-field__val{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--blue-500);font-size:var(--text-sm);white-space:nowrap}
.ws-field__hint{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--gray-500);margin-top:var(--sp-2)}
.ws-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--radius-full);background:linear-gradient(var(--blue-500),var(--blue-500)) 0/var(--ws-fill,50%) 100% no-repeat,var(--gray-100);cursor:pointer}
.ws-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--white);border:3px solid var(--blue-500);box-shadow:var(--shadow);cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
.ws-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.ws-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--white);border:3px solid var(--blue-500);box-shadow:var(--shadow);cursor:pointer}
.ws-range:focus{outline:none}
.ws-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,129,187,.25)}
/* Result */
.ws-result{text-align:center;border-top:1px solid var(--gray-100);padding-top:var(--sp-8)}
.ws-result__reco{font-size:var(--text-lg);color:var(--text-mid);line-height:1.65;margin-bottom:var(--sp-6);max-width:640px;margin-inline:auto;min-height:2.4em}
.ws-result__note{font-size:var(--text-xs);color:var(--gray-500);margin-top:var(--sp-4)}
@media(max-width:600px){.ws-controls{grid-template-columns:1fr;gap:var(--sp-6)}.ws-pointer__num{font-size:var(--text-xl);min-width:48px}}

/* ============================================================
   VIDEO HERO VARIANTS (hero-options.html / home hero v2)
   ============================================================ */
.hero--video{position:relative;min-height:calc(100svh - var(--topbar-h) - var(--header-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:var(--sp-16) 0;isolation:isolate;background:var(--navy-900)}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__overlay{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__overlay--left{background:linear-gradient(90deg,rgba(4,13,24,.94) 0%,rgba(6,24,40,.80) 42%,rgba(6,24,40,.42) 78%,rgba(6,24,40,.30) 100%)}
.hero__overlay--center{background:linear-gradient(180deg,rgba(4,13,24,.55),rgba(4,13,24,.62)),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 0%,rgba(4,13,24,.55) 100%)}
.hero__overlay--bottom{background:linear-gradient(180deg,rgba(4,13,24,.38) 0%,rgba(4,13,24,.55) 45%,rgba(4,13,24,.88) 100%)}
.hero__overlay--scrim{background:linear-gradient(110deg,rgba(4,13,24,.90) 0%,rgba(8,47,78,.72) 50%,rgba(0,129,187,.30) 100%)}
.hero--video .hero__content{position:relative;z-index:1}
.hero--video.hero--center{text-align:center}
.hero--video.hero--center .hero__content{margin-inline:auto;max-width:760px}
.hero--video.hero--center .hero__ctas,.hero--video.hero--center .hero__trust{justify-content:center}
.hero--video.hero--center .hero__label::before{margin-inline:auto}
/* option label chip (comparison page only) */
.ho-label{position:absolute;top:calc(var(--sp-4));left:var(--sp-4);z-index:5;display:inline-flex;align-items:center;gap:var(--sp-2);background:rgba(4,13,24,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);color:var(--white);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--text-sm);padding:.5rem 1rem;border-radius:var(--radius-full)}
.ho-label span{color:var(--blue-200);font-weight:var(--fw-medium)}
.ho-note{background:var(--navy-950);color:rgba(255,255,255,.7);text-align:center;font-size:var(--text-sm);padding:var(--sp-4) var(--sp-6)}
.ho-note strong{color:var(--white)}
/* honor reduced motion: video still shows first frame (paused via JS), overlay keeps legibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ===== Accessibility pass (pre-launch) ===== */
/* Visible keyboard focus, site-wide (mouse clicks unaffected via :focus-visible) */
:focus-visible{outline:3px solid var(--blue-300);outline-offset:2px;border-radius:3px}
.site-header :focus-visible,.site-footer :focus-visible,.section--navy :focus-visible,.section--dark :focus-visible,.hero :focus-visible{outline-color:#8fe0ff}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:none}
/* State-indicator contrast (WCAG 1.4.11 ≥3:1) */
.faq-icon{color:var(--gray-700);border-color:var(--gray-500)}
.star{color:#d97706}