/* =============================================================================
   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;
  /* Comparison-table verdict colors. Named to avoid colliding with home.css's
     --green/--green-ink, which mean different values on the marketing site. */
  --check-green:#1a6e3c;
  --cross-red:  #c0392b;
  /* 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%}
/* Every <img> here carries width/height attributes. Those map to the CSS width/height
   properties, so whenever max-width squeezes the width the height stays at the attribute
   value and the image stretches vertically. height:auto restores the aspect ratio.
   Element specificity, so component rules that set an explicit height still win. */
img{height:auto}
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)}
/* Grid items stretch by default, so a short card beside a tall one (a form next to a map)
   grows dead space inside itself to match. --start opts one grid out of that. */
.grid--start{align-items:start}
.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)}
/* The dropdown arrow sat 2px from the hover pill's right edge while plain nav
   items had 14px, so the highlight looked clipped on the arrow side. Measured
   at 1280 and 1600; it is not a squeeze. Give arrow items matching clearance. */
.primary-nav>li.has-dropdown>a{padding-right:calc(var(--sp-4) + 12px)}
.primary-nav>li>a{gap:6px}
.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(--white);border:1px solid var(--gray-100);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);max-width:840px;margin-inline:auto}
.solver-header{padding:var(--sp-8) var(--sp-8) var(--sp-6);border-bottom:1px solid var(--gray-100);text-align:center}
.solver-header h2{font-size:var(--text-2xl);color:var(--text);margin-bottom:var(--sp-2)}
.solver-header p{color:var(--gray-700);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:var(--gray-50);border:2px solid var(--gray-100);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--gray-500);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(--check-green);border-color:var(--check-green);color:var(--white)}
.step-connector{width:48px;height:2px;background:var(--gray-100);margin:0 var(--sp-2);border-radius:2px;transition:background var(--dur-slow) var(--ease)}
.step-connector.done{background:var(--check-green)}
.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(--text);margin-bottom:var(--sp-2)}
.solver-step>p{color:var(--gray-700);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:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--dur) var(--ease);font-size:var(--text-sm);color:var(--text-mid);user-select:none}
.problem-option label .p-icon{width:40px;height:40px;background:var(--blue-50);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue-500);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:var(--blue-50);border-color:var(--blue-400);color:var(--text)}
.problem-option input:checked+label .p-icon{background:var(--blue-500);color:var(--white)}
.problem-option label:hover{background:var(--gray-100);border-color:var(--blue-300);color:var(--text)}
.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:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--dur) var(--ease);font-size:var(--text-sm);color:var(--text-mid);text-align:center}
.radio-option label svg{width:28px;height:28px;color:var(--blue-500)}
.radio-option input:checked+label{background:var(--blue-50);border-color:var(--blue-400);color:var(--text)}
.radio-option label:hover{background:var(--gray-100);border-color:var(--blue-300);color:var(--text)}
.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:var(--gray-50);border:1px solid var(--gray-100);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(--text);font-size:var(--text-base);margin-bottom:var(--sp-1)}
.result-product-item p{color:var(--gray-700);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 var(--gray-100)}

/* --- 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(--white);border-bottom:1px solid var(--gray-100);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(--check-green);font-weight:var(--fw-semi)}
.comparison-table .cross{color:var(--gray-700)}

/* --- 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)}
/* Light variant of the form band. The default .form-section--dark tunes every child for
   navy; each rule below outranks its dark counterpart on specificity, so the two variants
   can coexist. Links use --navy-600 (6.54:1 on --blue-50) because --blue-500 drops to
   3.92:1 on a light ground and would fail AA where the dark variant passes. */
.form-section--light{background:var(--blue-50)}
.form-section--light .form-side{color:var(--text-mid)}
.form-section--light .form-side :is(h2,h3){color:var(--text)}
.form-section--light .form-side p{color:var(--gray-700)}
.form-section--light .form-side a{color:var(--navy-600)}
.form-section--light .form-side a:hover{color:var(--blue-500)}
.form-section--light .form-side__call{color:var(--gray-700)}
.form-section--light .form-side__call a{color:var(--navy-600)}
.form-section--light .form-side :is(.icon-box__title,.process-step__title){color:var(--text)}
.form-section--light .form-side :is(.icon-box__text,.process-step__text){color:var(--gray-700)}
.form-section--light .form-side .icon-boxes--compact{border-top-color:var(--gray-100)}
.form-section--light .form-side .trust-list li{color:var(--gray-700)}
.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)}
/* Town names that have their own area page link to it. --navy-600 rather than --blue-500:
   the latter is 3.92:1 on these light grounds and fails AA. Towns with no page stay plain. */
.city-list li a,.service-area-list li a{color:var(--navy-600);text-decoration:none;border-bottom:1px solid rgba(10,92,138,.28)}
.city-list li a:hover,.service-area-list li a:hover{color:var(--blue-500);border-bottom-color:currentColor}

/* Kinetico vs competitor table: a green check on our column, a red cross on theirs. The
   meaning is already in the cell text, so these are decorative ::before and carry no aria.
   Left-aligned because a centred row of glyph+text reads ragged down the column. */
.cmp-table tbody td:nth-child(n+2){position:relative}
/* Shared glyph geometry. The hex inside each data URI duplicates --check-green /
   --cross-red on purpose: a CSS variable cannot be interpolated into a url(). */
.cmp-table tbody td:nth-child(n+2)::before,
.comparison-table td:is(.yes,.check,.no,.cross)::before{content:'';position:absolute;width:15px;height:15px;background-repeat:no-repeat;background-position:center;background-size:contain}
.cmp-table tbody td:nth-child(n+2)::before{left:1rem;top:1.1rem}
.cmp-table tbody td:nth-child(2)::before,
.comparison-table td:is(.yes,.check)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5' fill='none' stroke='%231a6e3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cmp-table tbody td:nth-child(3)::before,
.comparison-table td:is(.no,.cross)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23c0392b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
/* Verdict cells in the shared .comparison-table: hanging indent so wrapped lines
   clear the glyph. Left padding is --sp-5, so the glyph sits at that offset. */
.comparison-table td:is(.yes,.check,.no,.cross){position:relative;padding-left:2.85rem}
.comparison-table td:is(.yes,.check,.no,.cross)::before{left:var(--sp-5);top:calc(var(--sp-4) + 1px)}
.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(--check-green);font-weight:var(--fw-semi)}
.comparison-table .no{color:var(--gray-700)}

/* --- 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}

/* ============================================================
   Accessibility: WCAG AA contrast corrections, 2026-08-21.
   --blue-500 is darkened just enough that white label text on a
   primary button clears 4.5:1 while the fill still holds 3:1
   against a navy section. --blue-ink is the blue used for text on
   light surfaces, where the brand blue only reaches about 4:1.
   Dark section overrides above use compound selectors, so they
   keep winning over the single class rules below.
   ============================================================ */
:root{
  --blue-500:#007db5;
  --blue-ink:#0a5c8a;
}

/* Blue text on light surfaces */
a{color:var(--blue-ink)}
.text-blue,.btn--secondary,.product-card__tagline,.blog-card__cat,
.blog-card__category,.read-more,.read-more:hover,.team-member__role,
.ws-field__val,.label,.section-label,.section__label,.faq-question:hover,
.blog-card:hover .blog-card__title,.problem-card:hover .problem-card__title,
.badge--blue{color:var(--blue-ink)}
.btn--outline{color:var(--blue-ink);border-color:var(--blue-ink)}
.section--light .breadcrumb a:hover,.section--gray .breadcrumb a:hover{color:var(--blue-ink)}

/* Blue text on dark surfaces takes the light end of the ramp instead */
.section--navy a:not(.btn),.section--dark a:not(.btn),
.inner-hero a:not(.btn){color:var(--blue-200)}
/* .label falls through to --blue-ink here because .cta-section is not a section--navy,
   and --blue-ink is the same colour as the overlay gradient (1.20:1, invisible).
   --blue-200 is what section--navy already uses for this label and holds 4.89:1
   against the lightest end of the gradient. */
.cta-section .label,.cta-section .section-label{color:var(--blue-200)}
.cta-section a:not(.btn){color:var(--blue-100)}
.cta-section__sub{color:rgba(255,255,255,.78)}

/* Breadcrumbs stay neutral, just legible enough on the navy gradient */
.breadcrumb a,.inner-hero .breadcrumb a{color:rgba(255,255,255,.70)}
.section--light .breadcrumb a,.section--gray .breadcrumb a{color:var(--gray-700)}