/* =====================================================================
   Arcadia Water Leak Pros: styles.css
   Mobile-first (base = 360px). Breakpoints: 640 / 768 / 1024 / 1280.
   Fonts (loaded in <head>): Sora 700/800 headings, Inter 400/500/600 body.
   Accent is for CTAs and highlights only. Accent buttons use DARK text (AA).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --p-50: #EEF4F6; --p-100: #D8E5EA; --p-200: #B1CBD5; --p-300: #86AEBE; --p-400: #49869D;
  --p-500: #0C5E7C; --p-600: #0A516B; --p-700: #084257; --p-800: #062F3E; --p-900: #041E28;
  --accent: #FF6A2B; --accent-hover: #FF8247; --accent-soft: #FFF2EA;
  --dark: #08202B; --off-white: #F4F8FA; --border: #D6E2E8; --white: #fff;

  --font-head: "Sora", "Trebuchet MS", Verdana, sans-serif;
  --font-body: "Inter", "Segoe UI", Verdana, sans-serif;

  /* semantic (redefined inside dark sections) */
  --ink: #08202B; --text: #1B3340; --muted: #4F6672;
  --card-bg: #fff; --card-border: var(--border);
  --link: var(--p-600); --eyebrow: var(--p-500); --sec-bg: #fff;

  --r: 20px; --r-sm: 14px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(8,32,43,.06), 0 6px 14px -2px rgba(8,32,43,.07), 0 18px 36px -12px rgba(8,32,43,.10);
  --shadow-2: 0 2px 4px rgba(8,32,43,.07), 0 14px 28px -4px rgba(8,32,43,.12), 0 32px 56px -16px rgba(8,32,43,.18);
  --glow: 0 0 0 1px rgba(255,106,43,.35), 0 10px 28px -6px rgba(255,106,43,.55);

  --gutter: 20px; --sec-pad: 64px; --header-h: 72px;
  --ease: cubic-bezier(.22,.8,.3,1);

  --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.55rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v34C1200 84 960 2 720 34S240 74 0 34z'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5E7C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --sec-pad: 112px; --header-h: 80px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: #fff; color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.7;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.05; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.3; }
p { margin: 0 0 1.1em; max-width: 68ch; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }
strong { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--p-500); outline-offset: 3px; border-radius: 6px; }
.section--dark :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible, .call-bar :focus-visible { outline-color: #fff; }
::selection { background: var(--p-200); color: var(--dark); }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--dark); color: #fff; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

.container { width: min(100% - var(--gutter) * 2, 1200px); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 820px); margin-inline: auto; }

/* icons: inline SVG sprite, Lucide style, 2px stroke */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 18px; height: 18px; } .icon--lg { width: 28px; height: 28px; }
.icon-box { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--p-50); color: var(--p-600); border: 1px solid var(--p-100); }
.icon-box--sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-box--lg { width: 64px; height: 64px; border-radius: 20px; }
.icon-box--onDark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }

/* ---------- 3. Sections, rhythm, dividers ---------- */
.section { position: relative; padding-block: var(--sec-pad); background: var(--sec-bg); }
.section--white { --sec-bg: #fff; }
.section--alt   { --sec-bg: var(--off-white); }
.section--tint  { --sec-bg: var(--p-50); }
.section--dark, .cta-band, .site-footer, .page-hero {
  --sec-bg: var(--dark); --ink: #fff; --text: #C9DBE3; --muted: #9DB6C2;
  --card-bg: rgba(255,255,255,.05); --card-border: rgba(255,255,255,.13);
  --link: var(--p-200); --eyebrow: #8CCBE0; color: var(--text);
}
.section--dark { background: radial-gradient(900px 500px at 85% -10%, rgba(12,94,124,.55), transparent 70%), var(--dark); overflow: hidden; }

.section__head { max-width: 760px; margin-bottom: 40px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }
.section__head h2 { margin-bottom: .4em; }
.section__intro { font-size: 1.1875rem; color: var(--muted); margin: 0; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 600 .8125rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--eyebrow); }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
.section__head--center .eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }

/* wave divider: put .wave-top + .from-white|alt|tint|dark on the section that follows */
.wave-top { padding-top: calc(var(--sec-pad) + 16px); }
.wave-top::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(32px, 5vw, 64px); background: var(--wave, #fff); -webkit-mask: var(--wave-shape) center bottom / 100% 100% no-repeat; mask: var(--wave-shape) center bottom / 100% 100% no-repeat; pointer-events: none; }
.from-white { --wave: #fff; } .from-alt { --wave: var(--off-white); } .from-tint { --wave: var(--p-50); } .from-dark { --wave: var(--dark); }
/* angled divider */
.angle-top { --angle: clamp(28px, 4.5vw, 64px); margin-top: calc(var(--angle) * -1); padding-top: calc(var(--sec-pad) + var(--angle)); clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%); z-index: 1; }

.grain { position: absolute; inset: 0; background-image: var(--grain); opacity: .13; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
.section--dark .grain, .cta-band .grain, .page-hero .grain { mix-blend-mode: soft-light; opacity: .5; }

/* ---------- 4. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: var(--r-pill); border: 2px solid transparent; font: 700 1rem/1 var(--font-head); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s; }
.btn--accent { background: var(--accent); color: var(--dark); box-shadow: var(--glow); }
.btn--accent:hover { background: var(--accent-hover); color: var(--dark); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,130,71,.5), 0 14px 34px -6px rgba(255,106,43,.65); }
.btn--outline { background: transparent; border-color: var(--p-500); color: var(--p-600); }
.btn--outline:hover { background: var(--p-50); color: var(--p-700); transform: translateY(-2px); }
.btn--outline-light { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: .9375rem; }
.btn--lg { min-height: 60px; padding: 0 34px; font-size: 1.125rem; }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.actions .btn { width: 100%; }
@media (min-width: 640px) { .actions { flex-direction: row; flex-wrap: wrap; } .actions .btn { width: auto; } }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--link); min-height: 44px; }
.text-link .icon { transition: transform .25s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }

/* ---------- 5. Header and navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
/* blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile panel inside it */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.site-header.is-scrolled { border-color: var(--border); box-shadow: 0 8px 24px -16px rgba(8,32,43,.25); }
.header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: var(--header-h); gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; position: relative; z-index: 3; min-height: 44px; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font: 800 1.3125rem/1 var(--font-head); letter-spacing: -.02em; color: var(--dark); }
.brand__sub { margin-top: 5px; font: 700 .6875rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--p-500); }

.nav-toggle { display: none; position: relative; z-index: 3; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--border); background: #fff; color: var(--dark); cursor: pointer; }
.nav-toggle .icon { grid-area: 1 / 1; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav { width: 100%; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav__link { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 4px; font: 600 1rem/1.2 var(--font-body); color: var(--dark); text-decoration: none; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--p-500); }
.nav__menu { list-style: none; margin: 0; padding: 0 0 8px 14px; }
.nav__menu a { display: flex; align-items: center; min-height: 44px; padding: 6px 4px; color: var(--text); text-decoration: none; font-size: .9688rem; }
.nav__menu a:hover { color: var(--p-500); }
.nav__cta { margin-top: 12px; width: 100%; }
.nav__dd-btn .icon { margin-left: auto; transition: transform .25s var(--ease); width: 18px; height: 18px; }

/* no-JS fallback (mobile): nav shows inline below the brand */
@media (max-width: 1023.98px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav { position: fixed; inset: 0; z-index: 2; overflow-y: auto; background: #fff; padding: calc(var(--header-h) + 12px) var(--gutter) 40px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
  .js .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .nav__list > li > .nav__link { font: 700 1.5rem/1.2 var(--font-head); letter-spacing: -.02em; border-bottom: 1px solid var(--border); min-height: 60px; }
  .js .nav__dd-btn .icon { display: none; }
  .js .nav__menu a { font-size: 1.0625rem; }
  .js .nav__cta { min-height: 60px; font-size: 1.125rem; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 1024px) {
  .nav { width: auto; display: flex; align-items: center; gap: 12px; }
  .nav__list { flex-direction: row; align-items: center; gap: 4px; }
  .nav__item { position: relative; }
  .nav__link { width: auto; padding: 8px 14px; border-radius: var(--r-pill); font-size: .9688rem; }
  .nav__link:hover { background: var(--p-50); }
  .nav__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
  .nav__menu a { padding: 8px 12px; border-radius: 10px; }
  .nav__menu a:hover { background: var(--p-50); }
  .nav__item--dd:hover > .nav__menu, .nav__item--dd:focus-within > .nav__menu, .nav__dd-btn[aria-expanded="true"] + .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__dd-btn[aria-expanded="true"] .icon, .nav__item--dd:hover .nav__dd-btn .icon { transform: rotate(180deg); }
  .nav__dd-btn .icon { margin-left: 2px; }
  .nav__cta { margin: 0 0 0 8px; width: auto; }
}

/* ---------- 6. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 40px var(--sec-pad); isolation: isolate;
  background:
    radial-gradient(60% 50% at 10% 6%, rgba(177,203,213,.8), transparent 62%),
    radial-gradient(50% 60% at 92% 18%, rgba(134,174,190,.5), transparent 62%),
    radial-gradient(60% 60% at 68% 104%, rgba(216,229,234,.95), transparent 62%),
    linear-gradient(180deg, #F4F8FA, #fff); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 78% 34%, transparent 0 26px, rgba(12,94,124,.07) 26px 27px); -webkit-mask: radial-gradient(70% 80% at 78% 34%, #000, transparent 75%); mask: radial-gradient(70% 80% at 78% 34%, #000, transparent 75%); }
.hero__grid { display: grid; gap: 36px; align-items: center; position: relative; z-index: 1; }
.hero__title { margin-bottom: .45em; }
.hero__lead { font-size: 1.1875rem; color: var(--text); margin-bottom: 0; }
.hero__fine { margin: 20px 0 0; font-size: .875rem; color: var(--muted); max-width: 54ch; line-height: 1.55; }
.hl { background: linear-gradient(transparent 64%, var(--accent) 64% 90%, transparent 90%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__art { position: relative; max-width: 560px; margin-inline: auto; width: 100%; }
.hero__scene { display: block; width: 100%; filter: drop-shadow(0 30px 40px rgba(8,32,43,.18)); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.75); border: 1px solid var(--border); font-size: .875rem; font-weight: 600; color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip .icon { width: 18px; height: 18px; color: var(--p-500); }

.glass { position: absolute; z-index: 2; display: none; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 10px 30px -8px rgba(8,32,43,.25); color: var(--ink); font-size: .8125rem; line-height: 1.3; animation: float 7s ease-in-out infinite alternate; }
.glass strong { display: block; font: 700 .9375rem/1.2 var(--font-head); letter-spacing: -.01em; }
.glass span { color: var(--muted); }
.glass--1 { top: 6%; left: 2%; }
.glass--2 { top: 20%; right: 2%; animation-delay: -2.4s; }
.glass--3 { bottom: 5%; left: 8%; animation-delay: -4.6s; }
@media (min-width: 640px)  { .glass { display: flex; padding: 9px 12px 9px 9px; } .glass .icon-box { width: 38px; height: 38px; border-radius: 12px; } }
@media (min-width: 1024px) {
  .hero { padding-block: 72px var(--sec-pad); }
  .hero__grid { grid-template-columns: 1.02fr .98fr; gap: 56px; }
  .glass { padding: 12px 18px 12px 12px; } .glass .icon-box { width: 48px; height: 48px; border-radius: 16px; }
  .glass--1 { left: -6%; top: 4%; } .glass--2 { right: -5%; top: 22%; } .glass--3 { left: -7%; bottom: 8%; }
}

/* inner page hero (services, locations, about, contact) */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 40px 56px;
  background: radial-gradient(70% 90% at 90% 0%, rgba(12,94,124,.75), transparent 65%), radial-gradient(50% 70% at 0% 100%, rgba(8,66,87,.8), transparent 70%), var(--dark); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 88% 20%, transparent 0 28px, rgba(255,255,255,.055) 28px 29px); }
.page-hero h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); max-width: 22ch; }
.page-hero__lead { font-size: 1.1875rem; max-width: 60ch; color: var(--text); margin: 0; }
.page-hero .hero__fine { color: var(--muted); }
@media (min-width: 1024px) { .page-hero { padding-block: 64px 88px; } }

.breadcrumbs { margin: 0 0 22px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .55; margin-right: 4px; }
.breadcrumbs a { color: var(--p-200); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; font-weight: 500; }

/* ---------- 7. Cards, bento, grids ---------- */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 26px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--p-200); }
.section--dark .card, .cta-band .card { box-shadow: none; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
@media (min-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-2 { gap: 28px; } }

/* bento: 1 col <640, 2 cols tablet, 4 cols desktop (big 2x2, wide 4x1) */
.bento { display: grid; gap: 18px; grid-template-columns: 1fr; }
.bento__card { display: flex; flex-direction: column; gap: 14px; min-height: 100%; overflow: hidden; }
.bento__card h3 { margin: 6px 0 0; }
.bento__card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.bento__link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: .9688rem; color: var(--p-600); text-decoration: none; }
.bento__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); } /* stretched link */
.bento__link .icon { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.bento__card:hover .bento__link .icon { transform: translateX(5px); }
.bento__card--big { background: linear-gradient(155deg, var(--p-600), var(--p-800) 70%, var(--p-900)); border-color: transparent; color: #CFE3EA; }
.bento__card--big h3 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.bento__card--big p { color: #CFE3EA; font-size: 1.0625rem; }
.bento__card--big .bento__link { color: #fff; }
.bento__card--big .icon-box { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.bento__art { position: absolute; right: -24px; bottom: -24px; width: 62%; max-width: 300px; opacity: .55; pointer-events: none; }
.bento__card--big > *:not(.bento__art) { position: relative; z-index: 1; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__card--big, .bento__card--wide { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .bento__card--big { grid-column: span 2; grid-row: span 2; padding: 36px; }
  .bento__card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; }
  .bento__card--wide .bento__body { flex: 1; } .bento__card--wide .bento__link { margin: 0; padding: 0; }
}

/* symptom checker */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter { min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: #fff; color: var(--ink); font: 600 .9375rem/1 var(--font-body); cursor: pointer; transition: all .2s; }
.filter:hover { border-color: var(--p-400); }
.filter[aria-pressed="true"] { background: var(--p-600); border-color: var(--p-600); color: #fff; }
.symptom-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .symptom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .symptom-grid { grid-template-columns: repeat(3, 1fr); } }
.symptom { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.symptom[hidden] { display: none; }
.symptom__sign { display: flex; gap: 12px; align-items: flex-start; font: 700 1.0625rem/1.35 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.symptom__cause { margin: 0; font-size: .9688rem; color: var(--muted); line-height: 1.6; }
.symptom__link { margin-top: auto; }
.symptom__link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: .9375rem; text-decoration: none; }

/* split sections */
.split { display: grid; gap: 40px; align-items: center; }
.split__media { background: linear-gradient(160deg, var(--p-50), #fff); border: 1px solid var(--p-100); border-radius: 28px; padding: 20px; box-shadow: var(--shadow-1); }
.section--dark .split__media { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.split__media svg { display: block; width: 100%; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } .split--reverse .split__media { order: 2; } .split__media { padding: 32px; } }

/* process: vertical on mobile, horizontal on desktop, connecting line behind outlined numbers */
.process { --steps: 4; position: relative; display: grid; gap: 36px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.process::before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--p-300), var(--p-200)); background-size: 2px 12px; }
.process__step { position: relative; padding-left: 92px; min-height: 64px; }
.process__num { position: absolute; left: 0; top: -6px; width: 64px; background: var(--sec-bg); font: 800 3.25rem/1 var(--font-head); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--p-400); text-align: center; padding-block: 6px; }
.process__step h3 { margin: 0 0 .35em; }
.process__step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(var(--steps), 1fr); gap: 32px; }
  .process::before { left: 0; right: 0; top: 36px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--p-300) 0 10px, transparent 10px 20px); }
  .process__step { padding: 0; }
  .process__num { position: relative; display: inline-block; width: auto; padding: 6px 18px 6px 0; font-size: 4.5rem; text-align: left; top: 0; margin-bottom: 14px; }
}

/* callouts */
.callout { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin: 28px 0; padding: 20px 22px; border-radius: 16px; border: 1px solid; border-left-width: 6px; max-width: 68ch; }
.callout__title { margin: 0 0 4px; font: 700 1rem/1.3 var(--font-head); letter-spacing: -.01em; color: var(--dark); }
.callout p { margin: 0; font-size: 1rem; line-height: 1.65; color: #1B3340; }
.callout p + p { margin-top: .6em; }
.callout--tip  { background: var(--p-50); border-color: var(--p-100); border-left-color: var(--p-500); }
.callout--tip .callout__icon { background: var(--p-500); color: #fff; border-color: var(--p-500); }
.callout--warn { background: var(--accent-soft); border-color: #FFD9C4; border-left-color: var(--accent); }
.callout--warn .callout__icon { background: var(--accent); color: var(--dark); border-color: var(--accent); }
.callout__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid; }
.callout--wide { max-width: none; }

/* tables: scroll wrapper; stacked cards <640 with .table--stack + data-label */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-1); margin: 24px 0; }
.table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; line-height: 1.55; }
.table th, .table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table thead th { background: var(--p-50); color: var(--ink); font: 700 .8125rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody th { font-weight: 600; color: var(--ink); }
@media (max-width: 639.98px) {
  .table--stack { min-width: 0; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .table--stack th, .table--stack td { padding: 6px 0; border: 0; }
  .table--stack td::before { content: attr(data-label); display: block; font: 700 .75rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--p-500); margin-bottom: 2px; }
}

/* lists */
.check-list { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 36px; line-height: 1.6; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 8px; background: var(--p-50) var(--check) center / 14px no-repeat; border: 1px solid var(--p-100); }
.sign-grid { display: grid; gap: 14px; list-style: none; padding: 0; margin: 24px 0; }
.sign-grid li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: #fff; line-height: 1.5; font-size: 1rem; }
.sign-grid .icon-box { width: 40px; height: 40px; border-radius: 12px; }
.sign-grid strong { display: block; font-family: var(--font-head); letter-spacing: -.01em; }
@media (min-width: 640px) { .sign-grid { grid-template-columns: repeat(2, 1fr); } }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 24px 0; display: grid; gap: 18px; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 4px 60px; min-height: 44px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--p-600); color: #fff; font: 800 1.125rem/1 var(--font-head); }
.steps strong { display: block; font-family: var(--font-head); letter-spacing: -.01em; margin-bottom: 2px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0; }
.pill-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: #fff; color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: all .2s; }
.pill-list a:hover { border-color: var(--p-500); background: var(--p-50); color: var(--p-700); }
.pill-list .icon { width: 18px; height: 18px; color: var(--p-500); }

/* areas + related */
.area-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .area-grid { grid-template-columns: repeat(6, 1fr); } .area-card { grid-column: span 2; } .area-card:nth-child(4) { grid-column: 2 / span 2; } .area-card:nth-child(5) { grid-column: span 2; } }
.area-card { display: flex; flex-direction: column; gap: 10px; }
.area-card h3 { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; }
.area-card h3 a { text-decoration: none; color: inherit; }
.area-card h3 a:hover { color: var(--p-500); }
.area-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }
.link-grid { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 640px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
.link-card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; text-decoration: none; color: var(--ink); }
.link-card strong { display: block; font: 700 1rem/1.3 var(--font-head); letter-spacing: -.01em; }
.link-card div > span { font-size: .9063rem; color: var(--muted); line-height: 1.4; display: block; }
.link-card > .icon:last-child { margin-left: auto; color: var(--p-500); transition: transform .25s var(--ease); }
.link-card:hover > .icon:last-child { transform: translateX(4px); }

/* mini info tiles (dark sections) */
.mini { display: flex; gap: 14px; align-items: flex-start; padding: 20px; }
.mini > .icon { width: 28px; height: 28px; margin-top: 2px; color: #8CCBE0; }
.mini strong { display: block; font: 700 1.0625rem/1.3 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.mini p { margin: 4px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.mini-grid { gap: 14px; }

/* ---------- 8. CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: var(--sec-pad);
  background: radial-gradient(60% 80% at 50% 120%, rgba(255,106,43,.34), transparent 65%), radial-gradient(50% 70% at 10% 0%, rgba(12,94,124,.7), transparent 70%), radial-gradient(40% 60% at 95% 10%, rgba(12,94,124,.45), transparent 70%), var(--dark); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 50% 120%, transparent 0 34px, rgba(255,255,255,.05) 34px 35px); }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { margin-inline: auto; }
.cta-band__phone { display: block; margin: 18px auto 8px; font: 800 clamp(2.25rem, 1.2rem + 6.4vw, 6.75rem)/1 var(--font-head); letter-spacing: -.035em; color: #fff; text-decoration: none; text-shadow: 0 0 60px rgba(255,106,43,.45); overflow-wrap: anywhere; }
.cta-band__phone:hover { color: #fff; text-shadow: 0 0 80px rgba(255,130,71,.7); }
.cta-band .actions { justify-content: center; }
.cta-band__fine { font-size: .875rem; color: var(--muted); max-width: 56ch; margin: 22px auto 0; }

/* ---------- 9. FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1); transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: var(--p-300); box-shadow: var(--shadow-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 22px; cursor: pointer; list-style: none; font: 700 1.0625rem/1.35 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--p-50); border: 1px solid var(--p-100); transition: transform .35s var(--ease), background-color .25s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--p-600); transition: background-color .25s; }
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon { transform: rotate(135deg); background: var(--p-600); border-color: var(--p-600); }
.faq details[open] .faq__icon::before, .faq details[open] .faq__icon::after { background: #fff; }
.faq__body { padding: 0 22px 22px; }
.faq__body p { margin: 0 0 .8em; font-size: 1.0313rem; }
.faq__body p:last-child { margin: 0; }

/* ---------- 10. Service/location page layout ---------- */
.page-layout { display: grid; gap: 28px; padding-block: 40px var(--sec-pad); }
.page-layout__aside { order: -1; }
.page-layout__main { min-width: 0; }
@media (min-width: 1024px) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; padding-top: 72px; }
  .page-layout__aside { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
  .page-layout__main { grid-column: 1; grid-row: 1; }
}
.toc { padding: 22px; }
.toc__title { margin: 0 0 12px; font: 700 .8125rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--p-500); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--border); }
.toc a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: .9375rem; line-height: 1.4; color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--p-500); }
.toc a.is-active, .toc a[aria-current="true"] { border-left-color: var(--p-500); color: var(--p-700); font-weight: 600; }
@media (max-width: 1023.98px) { .toc ol { grid-template-columns: 1fr; max-height: none; } .toc { padding: 18px 20px; } }
.call-card { position: relative; overflow: hidden; padding: 26px; border-radius: var(--r); background: radial-gradient(120% 90% at 100% 0%, rgba(12,94,124,.9), transparent 70%), var(--dark); color: #C9DBE3; box-shadow: var(--shadow-2); border: 1px solid rgba(255,255,255,.08); }
.call-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,43,.4), transparent); pointer-events: none; }
.call-card__title { margin: 0 0 6px; font: 700 1.25rem/1.25 var(--font-head); letter-spacing: -.02em; color: #fff; }
.call-card p { margin: 0 0 16px; font-size: .9688rem; line-height: 1.55; }
.call-card__phone { display: block; margin-bottom: 16px; font: 800 1.75rem/1 var(--font-head); letter-spacing: -.03em; color: #fff; text-decoration: none; }
.call-card .btn { width: 100%; position: relative; z-index: 1; }
.call-card .call-card__fine { margin: 14px 0 0; font-size: .8125rem; color: #9DB6C2; line-height: 1.5; }

.prose > * { max-width: 68ch; }
.prose > .table-wrap, .prose > .callout--wide, .prose > .sign-grid, .prose > .link-grid, .prose > .faq, .prose > .steps, .prose > .split-figure { max-width: none; }
.prose h2 { margin-top: 64px; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 36px; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.4em; }
.prose ul:not([class]) li, .prose ol:not([class]) li { margin-bottom: .55em; padding-left: .2em; }
.prose ul:not([class]) li::marker { color: var(--p-400); }
.prose ol:not([class]) li::marker { color: var(--p-500); font-weight: 700; }
.prose a:not(.btn):not(.text-link):not([class]) { font-weight: 500; text-decoration-color: var(--p-300); }
.prose a:not(.btn):not([class]):hover { text-decoration-color: currentColor; }
.prose .lead { font-size: 1.25rem; color: var(--ink); line-height: 1.6; }
.split-figure { margin: 32px 0; background: linear-gradient(160deg, var(--p-50), #fff); border: 1px solid var(--p-100); border-radius: 24px; padding: 20px; }
.split-figure figcaption { margin-top: 12px; font-size: .875rem; color: var(--muted); }

/* ---------- 11. Footer ---------- */
.site-footer { padding-top: 72px; background: var(--dark); font-size: .9688rem; }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1.15fr 1fr 1fr; gap: 56px; } }
.footer__brand .brand__name { color: #fff; } .footer__brand .brand__sub { color: #8CCBE0; }
.footer__brand p { margin: 18px 0 0; max-width: 34ch; line-height: 1.6; }
.footer__nap { font-style: normal; margin-top: 18px; display: grid; gap: 6px; }
.footer__nap a { color: #fff; font-weight: 600; text-decoration: none; }
.footer__title { margin: 0 0 16px; font: 700 .8125rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: #8CCBE0; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer__list a { display: inline-flex; align-items: center; min-height: 40px; color: #C9DBE3; text-decoration: none; }
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.footer__bottom { margin-top: 56px; padding: 28px 0 40px; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 14px; font-size: .8438rem; line-height: 1.6; color: #9DB6C2; }
.footer__bottom p { margin: 0; max-width: 100ch; }
.footer__bottom a { color: #C9DBE3; }

/* ---------- 12. Mobile call bar ---------- */
.call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(8,32,43,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.12); }
.call-bar .btn { width: 100%; min-height: 54px; }
body.nav-open .call-bar { display: none; }
@media (max-width: 767.98px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 768px) { .call-bar { display: none; } }

/* ---------- 13. Contact + utility ---------- */
.contact-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.info-card { display: flex; gap: 16px; align-items: flex-start; }
.info-card h3 { margin: 0 0 4px; font-size: 1.125rem; }
.info-card p, .info-card address { margin: 0; font-style: normal; color: var(--muted); line-height: 1.6; }
.info-card a { font-weight: 600; }
.text-center { text-align: center; } .text-center p { margin-inline: auto; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 32px; } .mt-4 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 1em; }
.actions--center { justify-content: center; }
.pill-list--center { justify-content: center; }
.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.not-found__code { margin: 0 0 .12em; font: 800 clamp(5rem, 3rem + 14vw, 11rem)/1 var(--font-head); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 3px var(--p-400); }

/* SVG scene helpers (fills/strokes from the palette) */
.f-p50 { fill: var(--p-50); } .f-p100 { fill: var(--p-100); } .f-p200 { fill: var(--p-200); } .f-p300 { fill: var(--p-300); } .f-p400 { fill: var(--p-400); }
.f-p500 { fill: var(--p-500); } .f-p600 { fill: var(--p-600); } .f-p700 { fill: var(--p-700); } .f-p800 { fill: var(--p-800); } .f-p900 { fill: var(--p-900); }
.f-dark { fill: var(--dark); } .f-white { fill: #fff; } .f-accent { fill: var(--accent); } .f-none { fill: none; }
.s-p200 { stroke: var(--p-200); } .s-p300 { stroke: var(--p-300); } .s-p400 { stroke: var(--p-400); } .s-p500 { stroke: var(--p-500); } .s-p600 { stroke: var(--p-600); }
.s-white { stroke: #fff; } .s-dark { stroke: var(--dark); } .s-accent { stroke: var(--accent); }
.sonar { fill: none; stroke: var(--accent); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: sonar 3.4s ease-out infinite; }
.sonar:nth-of-type(2) { animation-delay: 1.1s; } .sonar:nth-of-type(3) { animation-delay: 2.2s; }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 3.2s linear infinite; }
.drip { transform-box: fill-box; transform-origin: center top; animation: drip 2.4s ease-in infinite; }

/* ---------- 14. Motion ---------- */
@keyframes sonar { 0% { transform: scale(.35); opacity: .85; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes drip  { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(26px) scale(.8); opacity: 0; } }
@keyframes float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print { .site-header, .call-bar, .nav-toggle, .glass { display: none !important; } body { padding: 0; } }