/* ==========================================================================
   Buena Park CA Plumbing Point — design system
   Palette + type inherited from the replicated site theme:
   navy #0E2A4D · blue #1F8FFB · amber #F6C445 · body slate #5B6B7C
   ========================================================================== */

:root{
  --ink:#0E2A4D;
  --ink-800:#143A63;
  --blue:#1F8FFB;
  --blue-700:#1276D8;
  --blue-050:#EAF4FF;
  --amber:#F6C445;
  --body:#5B6B7C;
  --body-strong:#40505F;
  --line:#EEF1F6;
  --line-2:#DFE6EE;
  --surface:#F7F9FC;
  --white:#FFFFFF;

  --font-head:'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:'Source Sans 3', system-ui, -apple-system, sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px;

  --shadow-sm:0 2px 10px rgba(14,42,77,.06);
  --shadow-md:0 12px 34px rgba(14,42,77,.10);
  --shadow-lg:0 26px 60px rgba(14,42,77,.16);

  --t-fast:.18s ease;
  --t:.28s cubic-bezier(.2,.7,.3,1);

  --container:1200px;

  --h1:clamp(34px, 5.2vw, 60px);
  --h2:clamp(27px, 3.3vw, 38px);
  --h3:clamp(19px, 1.6vw, 22px);
  --lead:clamp(17px, 1.4vw, 19px);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.78;
  text-wrap:pretty;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.18;
  margin:0 0 var(--s-4);
  font-weight:800;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); font-weight:700; line-height:1.35; }
h4{ font-size:17px; font-weight:700; }

p{ margin:0 0 var(--s-5); }
p:last-child{ margin-bottom:0; }

a{ color:var(--blue-700); text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--ink); }

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

ul,ol{ margin:0 0 var(--s-5); padding-left:22px; }
li{ margin-bottom:var(--s-2); }
li:last-child{ margin-bottom:0; }

strong{ color:var(--body-strong); font-weight:700; }

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px;
  font-family:var(--font-head); font-weight:600; font-size:14px;
}
.skip-link:focus{ left:16px; top:16px; color:#fff; }

.container{
  width:100%; max-width:var(--container);
  margin:0 auto; padding:0 24px;
}
.container-narrow{ max-width:860px; }

.section{ position:relative; padding:clamp(56px,7vw,96px) 0; }
.section--tight{ padding:clamp(40px,5vw,64px) 0; }
.section--surface{
  background-color:var(--surface);
  background-image:linear-gradient(180deg, rgba(245,247,250,.93) 0%, rgba(245,247,250,.90) 50%, rgba(245,247,250,.93) 100%), url(../photos/checking-water-pressure-800.webp);
  background-size:cover, cover;
  background-position:center, center 35%;
  background-repeat:no-repeat, no-repeat;
}
.section--ink{
  color:rgba(255,255,255,.82);
  background-color:var(--ink);
  background-image:linear-gradient(180deg, rgba(9,26,48,.90) 0%, rgba(9,26,48,.95) 100%), url(../photos/working-on-drain-800.webp);
  background-size:cover, cover;
  background-position:center, center 40%;
  background-repeat:no-repeat, no-repeat;
}
.section--ink h2,.section--ink h3{ color:#fff; }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
  font-family:var(--font-head); font-weight:700;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-700);
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--blue-700); flex:none;
}
.eyebrow--center{ justify-content:center; }

/* amber reads at 8.85:1 on the navy grounds, 1.63:1 on white — so it is
   scoped to the dark sections only and the light ones use blue-700 (4.56:1) */
.hero .eyebrow,.banner .eyebrow,.section--ink .eyebrow,.cta-band .eyebrow,.trust .eyebrow,.footer .eyebrow{ color:var(--amber); }
.hero .eyebrow::before,.banner .eyebrow::before,.section--ink .eyebrow::before,.cta-band .eyebrow::before,.trust .eyebrow::before,.footer .eyebrow::before{ background:var(--amber); }

.lead{ font-size:var(--lead); }

.section-head{ max-width:720px; margin-bottom:var(--s-7); }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px;
  font-family:var(--font-head); font-weight:600; font-size:15px;
  border-radius:var(--r-sm); border:2px solid transparent;
  cursor:pointer; text-align:center;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:var(--blue-700); color:#fff; }
.btn--blue{ background:var(--blue-700); color:#fff; }
.btn--blue:hover{ background:var(--ink); color:#fff; }
.btn--amber{ background:var(--amber); color:var(--ink); }
.btn--amber:hover{ background:#fff; color:var(--ink); }
.btn--outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--outline-ink{ border-color:var(--line-2); color:var(--ink); background:#fff; }
.btn--outline-ink:hover{ border-color:var(--blue-700); color:var(--blue-700); }
.btn--lg{ min-height:58px; padding:17px 36px; font-size:16px; }
.btn--block{ width:100%; }

.cta-row{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }
.cta-note{
  margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--body);
}
.section--ink .cta-note{ color:rgba(255,255,255,.75); }
.cta-band .cta-note{ color:#fff; }

/* ---------- top bar ---------- */
.topbar{ background:#fff; border-bottom:1px solid var(--line); }
.topbar__inner{
  display:flex; align-items:center; gap:var(--s-6);
  padding:14px 24px; min-height:74px;
}
.topbar__brand{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-right:auto; }
.topbar__brand svg{ display:block; }
.topbar__facts{ display:flex; align-items:center; gap:var(--s-6); }
.fact{ display:flex; align-items:center; gap:12px; }
.fact__icon{
  width:30px; height:30px; flex:none; border-radius:var(--r-full);
  border:2px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.fact__icon svg{ width:15px; height:15px; }
.fact__body{ line-height:1.4; }
.fact__t{
  display:block;
  font-family:var(--font-head); font-weight:600; font-size:13.5px; color:var(--ink);
}
.fact__s{ display:block; font-size:13.5px; }
.topbar__rule{ width:1px; height:36px; background:var(--line); }

/* ---------- sticky nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-fast);
}
.site-header.is-stuck{ box-shadow:var(--shadow-sm); }
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  padding:12px 24px;
}
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative;
  display:inline-flex; align-items:center; min-height:44px; padding:6px 14px;
  font-family:var(--font-head); font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px;
  height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.nav a:hover{ color:var(--blue-700); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--blue-700); }

.header-call{ display:flex; align-items:center; gap:var(--s-4); }
.header-call .btn{ white-space:nowrap; }
.header-call__num{
  display:flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--ink);
}
.header-call__num:hover{ color:var(--blue-700); }
.header-call__num svg{ width:16px; height:16px; color:var(--blue); flex:none; }
.header-call__sub{
  font-family:var(--font-body); font-weight:400; font-size:13px;
  color:var(--body); display:block; line-height:1.3;
}

.nav-toggle{
  display:none; align-items:center; gap:8px;
  min-height:44px; padding:8px 14px;
  background:var(--ink); color:#fff; border:0; border-radius:var(--r-sm);
  font-family:var(--font-head); font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
}
.nav-toggle svg{ width:16px; height:16px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,26,48,.92) 0%, rgba(9,26,48,.80) 46%, rgba(9,26,48,.55) 100%);
}
.hero__inner{
  position:relative;
  padding-block:clamp(64px,9vw,120px) clamp(72px,9vw,124px);
}
.hero__col{ max-width:720px; }
.hero .eyebrow{ color:var(--amber); }
.hero h1{ color:#fff; margin-bottom:var(--s-5); }
.hero p{ color:rgba(255,255,255,.88); font-size:var(--lead); max-width:620px; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.18);
  list-style:none; padding-left:0;
}
.hero__meta li{
  display:flex; align-items:center; gap:9px; margin:0;
  font-family:var(--font-head); font-weight:600; font-size:14px; color:#fff;
}
.hero__meta li::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); flex:none;
}
.hero__curve{
  position:absolute; left:50%; bottom:-58px; transform:translateX(-50%);
  width:130%; height:110px; background:#fff; border-radius:50%;
}

/* page banner (inner pages) */
.banner{ position:relative; background:var(--ink); overflow:hidden; }
.banner__media{ position:absolute; inset:0; }
.banner__media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; }
.banner__scrim{ position:absolute; inset:0; background:rgba(9,26,48,.80); }
.banner__inner{ position:relative; padding-block:clamp(48px,6vw,86px); }
.banner h1{ color:#fff; max-width:900px; margin-bottom:var(--s-4); }
.banner p{ color:rgba(255,255,255,.85); max-width:680px; }

.breadcrumb{ font-size:14px; margin-bottom:var(--s-4); }
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.breadcrumb li{ margin:0; color:rgba(255,255,255,.65); }
.breadcrumb a{ color:rgba(255,255,255,.85); }
.breadcrumb a:hover{ color:var(--amber); }
.breadcrumb li+li::before{ content:"/"; margin-right:8px; color:rgba(255,255,255,.62); }

/* ---------- trust strip ---------- */
.trust{
  background-color:var(--ink);
  background-image:linear-gradient(120deg, rgba(9,26,48,.94) 0%, rgba(9,26,48,.90) 100%), url(../photos/inspecting-pipes-800.webp);
  background-size:cover, cover;
  background-position:center, center 45%;
  background-repeat:no-repeat, no-repeat;
}
.trust__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-left:1px solid rgba(255,255,255,.12);
}
.trust__item{
  padding:28px 26px;
  border-right:1px solid rgba(255,255,255,.12);
}
.trust__item h2{
  font-size:16px; color:#fff; margin:0 0 6px; font-weight:700;
}
.trust__item p{ margin:0; font-size:14.5px; color:rgba(255,255,255,.72); line-height:1.6; }
.trust__icon{
  width:34px; height:34px; border-radius:var(--r-full);
  background:rgba(31,143,251,.18); color:var(--amber);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.trust__icon svg{ width:17px; height:17px; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:var(--s-6); }
.grid > *,.steps > *,.stats > *,.split > *,.linklist > li{ min-width:0; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(31,143,251,.5);
}
.card__media{ position:relative; aspect-ratio:16/10; background:var(--surface); }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__badge{
  position:absolute; top:12px; left:12px;
  width:36px; height:36px; border-radius:var(--r-full);
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.card__badge svg{ width:17px; height:17px; }
.card__body{ padding:22px 24px 26px; }
.card__body h3{ margin:0 0 10px; }
.card__body p{ margin:0; font-size:15.5px; line-height:1.66; }
.card__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--font-head); font-weight:600; font-size:13.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blue-700);
}
.card__more svg{ width:13px; height:13px; transition:transform var(--t-fast); }

/* stretched link — whole card clickable, keyboard accessible */
.stretched{ position:static; }
.stretched::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit;
}
.card:focus-within{
  box-shadow:0 0 0 3px rgba(31,143,251,.45), var(--shadow-md);
  border-color:var(--blue);
}

.card--flat{ border-radius:var(--r-md); }
.card--flat .card__body{ padding:26px 26px 28px; }

/* ---------- split media/text ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px);
  align-items:center;
}
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; }
.split__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.split__stat{
  position:absolute; right:0; bottom:0;
  background:var(--blue-700); color:#fff; padding:20px 26px;
  font-family:var(--font-head);
}
.split__stat b{ display:block; font-size:30px; line-height:1; }
.split__stat span{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- steps ---------- */
.steps{ display:grid; gap:var(--s-6); grid-template-columns:repeat(4,1fr); }
.step{
  padding-top:20px; border-top:3px solid var(--line);
  transition:border-color var(--t);
}
.step:hover{ border-top-color:var(--blue); }
.step b{
  display:block; font-family:var(--font-head); font-weight:800;
  font-size:34px; color:var(--blue); line-height:1; margin-bottom:12px;
}
.step h3{ margin:0 0 8px; font-size:18px; }
.step p{ margin:0; font-size:15.5px; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
.stats--3{ grid-template-columns:repeat(3,1fr); }
.stat{ text-align:center; }
.stat b{
  display:block; font-family:var(--font-head); font-weight:800;
  font-size:clamp(34px,4vw,48px); color:var(--amber); line-height:1;
}
.stat span{
  display:block; margin-top:10px; font-size:15px; color:rgba(255,255,255,.78);
}

/* ---------- prose ---------- */
.prose h2{ margin-top:var(--s-7); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:var(--s-6); }
.prose ul{ margin-bottom:var(--s-5); }
.prose li{ line-height:1.7; }
.callout{
  border-left:3px solid var(--blue);
  background:var(--surface);
  padding:22px 26px; border-radius:0 var(--r-md) var(--r-md) 0;
  margin:0 0 var(--s-5);
}
.callout p{ margin:0; }
.callout p+p{ margin-top:var(--s-4); }

.checklist{ list-style:none; padding-left:0; }
.checklist li{
  position:relative; padding-left:30px; margin-bottom:12px;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:14px; height:8px; border-left:2.5px solid var(--blue);
  border-bottom:2.5px solid var(--blue); transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; min-height:56px; padding:20px 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--ink);
  line-height:1.4;
}
.faq__q h3{ margin:0; font-size:inherit; font-weight:inherit; }
.faq__q:hover{ color:var(--blue-700); }
.faq__chev{
  flex:none; width:26px; height:26px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue); transition:transform var(--t);
}
.faq__chev svg{ width:14px; height:14px; }
.faq__q[aria-expanded="true"] .faq__chev{ transform:rotate(180deg); }
.faq__a{ overflow:hidden; transition:height var(--t); }
/* only collapse once the script is live, so the answers stay readable without JS */
.js .faq__a{ height:0; }
.faq__a > div{ padding:0 0 24px; max-width:820px; }
.faq__a p{ margin:0 0 var(--s-4); }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; background:var(--blue-700); color:#fff; overflow:hidden;
}
.cta-band{
  background-image:linear-gradient(100deg, rgba(9,26,48,.94) 0%, rgba(12,58,110,.90) 55%, rgba(12,58,110,.84) 100%), var(--band-photo, url(../photos/soldering-copper-pipe-800.webp));
  background-size:cover, cover;
  background-position:center, center 40%;
  background-repeat:no-repeat, no-repeat;
}
.cta-band--ink{
  background-image:linear-gradient(100deg, rgba(6,18,34,.95) 0%, rgba(9,26,48,.92) 100%), var(--band-photo, url(../photos/soldering-copper-pipe-800.webp));
}
.cta-band--photo-1{ --band-photo:url(../photos/using-drain-snake-800.webp); }
.cta-band--photo-2{ --band-photo:url(../photos/installing-water-heater-800.webp); }
.cta-band--photo-3{ --band-photo:url(../photos/inspecting-sewer-line-800.webp); }
.cta-band--photo-4{ --band-photo:url(../photos/digging-yard-800.webp); }
.cta-band--photo-5{ --band-photo:url(../photos/checking-for-leaks-800.webp); }
.cta-band--photo-6{ --band-photo:url(../photos/repairing-pipe-leak-800.webp); }
.cta-band--photo-7{ --band-photo:url(../photos/clearing-floor-drain-800.webp); }
.cta-band--photo-8{ --band-photo:url(../photos/replacing-valve-800.webp); }
.cta-band__inner{
  position:relative; z-index:2;
  padding-block:clamp(44px,5vw,64px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-6);
}
.cta-band h2{ color:#fff; margin:0 0 8px; max-width:640px; }
.cta-band p{ margin:0; color:#fff; max-width:600px; }


/* ---------- footer ---------- */
.footer{
  color:rgba(255,255,255,.72);
  background-color:var(--ink);
  background-image:linear-gradient(180deg, rgba(9,26,48,.95) 0%, rgba(9,26,48,.97) 100%), url(../photos/tightening-pipe-joint-800.webp);
  background-size:cover, cover;
  background-position:center, center 30%;
  background-repeat:no-repeat, no-repeat;
}
.footer a{ color:rgba(255,255,255,.78); }
.footer a:hover{ color:var(--amber); }
.footer__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1.15fr; gap:var(--s-6);
  padding:clamp(48px,6vw,76px) 0 var(--s-7);
}
.footer__sitemap{
  display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s-6);
  border-top:1px solid rgba(255,255,255,.12);
  padding:var(--s-6) 0 var(--s-7);
}
.footer__sitemap ul{ columns:2; column-gap:var(--s-6); }
.footer__sitemap li{ font-size:14.5px; margin-bottom:9px; break-inside:avoid; }
.footer h3{
  color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 18px;
}
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:10px; font-size:15.5px; }
/* footer link lists clear the WCAG 2.5.8 target minimum without bloating the footer */
.footer li a{ display:inline-flex; align-items:center; min-height:28px; }
.footer__brand > a{ min-height:44px; }
.footer__brand p{ font-size:15.5px; margin:18px 0 0; }
.footer__call{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:18px;
  font-family:var(--font-head); font-weight:800; font-size:22px; color:#fff;
}
.footer__call:hover{ color:var(--amber); }
.footer__nap{ font-size:15px; margin-top:16px; line-height:1.7; }
.footer__nap a{ display:inline-flex; align-items:center; min-height:44px; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:26px 0 40px;
  display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-6);
  justify-content:space-between; align-items:flex-start;
}
.footer__disclosure{
  font-size:14px; line-height:1.7; max-width:760px; color:rgba(255,255,255,.78);
}
.footer__copy{ font-size:14px; color:rgba(255,255,255,.78); }

/* ---------- floating call button ---------- */
.fab{
  position:fixed; z-index:90;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:60px; height:60px; border-radius:var(--r-full);
  background:var(--blue-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(9,26,48,.35);
  opacity:0; transform:translateY(20px) scale(.9); pointer-events:none;
  transition:opacity var(--t), transform var(--t), background var(--t-fast);
}
.fab svg{ width:25px; height:25px; }
.fab.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.fab:hover{ background:var(--ink); color:#fff; }
.fab::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--blue);
  animation:fabPulse 2.4s ease-out 3;
}
@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}

/* ---------- scroll reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(12px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

/* inline text CTAs — 44px minimum so they are tappable on a phone */
.text-cta{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-head); font-weight:600;
}

/* ---------- pills / tags ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.pills a{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 18px;
  border:1px solid var(--line-2); border-radius:var(--r-full);
  font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--ink);
  background:#fff; transition:all var(--t-fast);
}
.pills a:hover{ border-color:var(--blue-700); color:var(--blue-700); }

.linklist{ list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.linklist a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px; padding:12px 18px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--ink);
  background:#fff; transition:all var(--t-fast);
}
.linklist a:hover{ border-color:var(--blue-700); color:var(--blue-700); background:var(--blue-050); }
.linklist svg{ width:13px; height:13px; flex:none; }

/* ---------- hover lift — pointer devices only, so it never sticks after a tap ---------- */
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); }
  .card:hover{ transform:translateY(-6px); }
  .card:hover .card__more svg{ transform:translateX(4px); }
  .pills a:hover{ transform:translateY(-2px); }
}

/* ---------- 404 ---------- */
.errpage{ padding:clamp(64px,9vw,120px) 0; text-align:center; }
.errpage__code{
  font-family:var(--font-head); font-weight:800; font-size:clamp(70px,12vw,150px);
  color:var(--blue-050); line-height:1; margin:0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px){
  .topbar__facts .fact:nth-of-type(3),.topbar__rule{ display:none; }
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--s-6); }
  .footer__sitemap{ grid-template-columns:1fr; }
}

@media (max-width:1000px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md); padding:8px 12px 16px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 14px; font-size:14.5px; }
  .nav a::after{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .site-header__inner{ position:relative; }
  .header-call__sub{ display:none; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:var(--s-7) var(--s-6); }
  .stats--3{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  .topbar__inner{ min-height:0; padding:12px 24px; }
  .topbar__facts{ display:none; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .hero__curve{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16.5px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .trust__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__sitemap ul{ columns:1; }
  .stats--3{ grid-template-columns:1fr; }
  .linklist{ grid-template-columns:1fr; }
  .cta-band__inner{ position:relative; z-index:2; flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .fab{ width:58px; height:58px; }

  /* single 64px sticky row — the topbar scrolls away with the page */
  .site-header__inner{
    flex-wrap:nowrap; gap:var(--s-3);
    padding:10px 16px; min-height:64px;
  }
  .site-header .btn{ width:auto; min-height:44px; padding:10px 16px; font-size:14px; }
  .header-call{ gap:var(--s-2); }
  .header-call__num{ display:none; }
  .nav-toggle{ padding:8px 12px; }
}

@media (max-width:400px){
  .site-header__inner{ padding:8px 12px; }
  .site-header .btn{ padding:10px 13px; font-size:13.5px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal, .js .reveal.is-in{ opacity:1; transform:none; }
  .fab::before{ display:none; }
  .btn:hover,.card:hover,.pills a:hover{ transform:none; }
}