/* ==========================================================================
   Standby Restrooms - premium service-marketplace design system
   Palette sampled from brand/portable-logo.png:
     deep navy #0B2545 | royal blue #1B6FE0 | fresh green #34B759
   ========================================================================== */

:root{
  /* brand */
  --navy:#0b2545; --navy-2:#123a6b; --navy-3:#0f2f57;
  --blue:#1b6fe0; --blue-2:#3d88f0; --blue-soft:#e8f1fe; --blue-ring:rgba(27,111,224,.18);
  --green:#34b759; --green-2:#2aa14c; --green-soft:#e7f8ec;

  /* surfaces */
  --bg:#ffffff; --bg-alt:#f6f9fc; --bg-alt2:#eef4fa;
  --ink:#0f1b2d; --ink-2:#243josh; --muted:#5a6b85; --line:#e4eaf2;
  --card:#ffffff; --white:#fff;

  /* shape */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --maxw:1240px;

  /* elevation */
  --sh-xs:0 1px 2px rgba(11,37,69,.05);
  --sh-sm:0 2px 8px rgba(11,37,69,.06);
  --sh:0 4px 16px rgba(11,37,69,.07),0 1px 3px rgba(11,37,69,.04);
  --sh-md:0 12px 32px rgba(11,37,69,.10),0 2px 6px rgba(11,37,69,.05);
  --sh-lg:0 24px 60px rgba(11,37,69,.16),0 4px 12px rgba(11,37,69,.06);
  --sh-blue:0 16px 40px rgba(27,111,224,.24);

  /* type */
  --disp:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,.75,.28,1);
}
:root{ --ink-2:#243b57; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* No overflow-x clip on html/body. It masks real overflow bugs, and a non-visible
   overflow on the root makes body a scroll container in mobile browsers, which is
   what breaks position:fixed on the sticky call bar. Overflow is fixed at source. */

/* Bulletproof visually-hidden. clip-path guarantees the box cannot contribute to
   the scroll area, which left:-9999px and width:1px alone do not.
   Applied to thead only inside the mobile restack, not here. */
.sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
body{
  margin:0;font-family:var(--body);font-size:17px;line-height:1.7;
  color:var(--ink-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp);color:var(--navy);margin:0 0 .5em;line-height:1.14;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.4rem,4.6vw,3.75rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.2vw,2.65rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1.1rem}
a{color:var(--blue);text-decoration:none;transition:color .16s var(--ease)}
a:hover{color:var(--navy-2)}
img{max-width:100%;display:block}
ul{margin:0;padding:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sec{padding:104px 0}
.sec--alt{background:var(--bg-alt)}
.sec--tight{padding:80px 0}
/* translate rather than left:-9999px, so the box never sits outside the page */
.skip{position:absolute;left:0;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--r) 0;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 18px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);border-radius:2px}
.sec-head{max-width:760px;margin:0 auto 62px;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head h2{margin-bottom:16px}
.sec-head p{color:var(--muted);font-size:1.12rem;margin:0}
.lead{font-size:1.16rem;color:var(--muted);line-height:1.75}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:15px 28px;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:all .18s var(--ease)
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.btn--primary:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px);box-shadow:0 20px 44px rgba(27,111,224,.3)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 14px 34px rgba(52,183,89,.28)}
.btn--green:hover{background:var(--green-2);color:#fff;transform:translateY(-2px)}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px)}
.btn--outline{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:.92rem}
.btn--wide{width:100%}

.tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--green-soft);flex:0 0 auto}
.tick svg{width:13px;height:13px;stroke:var(--green-2);fill:none;stroke-width:3}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:rgba(255,255,255,.82);font-size:.85rem}
.topbar .wrap{display:flex;align-items:center;gap:20px;padding:10px 28px;flex-wrap:wrap}
.topbar span{display:inline-flex;align-items:center;gap:8px}
.topbar svg{width:14px;height:14px;fill:var(--green);flex:0 0 auto}
.topbar .sp{margin-left:auto}
.topbar a{color:#fff;font-weight:600}
.topbar a:hover{color:var(--green)}

/* ---------- navbar ---------- */
.nav{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:14px;padding:16px 28px;max-width:var(--maxw);margin:0 auto}
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{height:48px;width:auto;max-width:250px;object-fit:contain}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links>a,.drop>button{
  font-family:var(--disp);font-weight:600;font-size:.94rem;color:var(--ink-2);background:none;border:0;
  padding:10px 14px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:.16s var(--ease)
}
.nav__links>a:hover,.drop>button:hover{background:var(--blue-soft);color:var(--blue)}
.nav__links>a[aria-current="page"]{color:var(--blue)}
.drop{position:relative}
.drop>button::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:8px;vertical-align:2px;opacity:.5}
.drop__menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:12px;min-width:300px;opacity:0;visibility:hidden;transition:.18s var(--ease);z-index:130
}
.drop:hover .drop__menu,.drop:focus-within .drop__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop__menu a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:var(--r-sm);color:var(--navy);font-weight:600;font-size:.94rem}
.drop__menu a small{font-weight:400;font-size:.8rem;color:var(--muted)}
.drop__menu a:hover{background:var(--blue-soft);color:var(--blue)}
.drop__menu--wide{min-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.drop__menu--wide .all{grid-column:1/-1;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:6px;color:var(--blue)}
.nav__tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;color:var(--navy);font-size:.95rem;white-space:nowrap;padding:0 6px}
.nav__tel svg{width:16px;height:16px;fill:var(--green)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;padding:11px 12px}
.burger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px}
.burger span+span{margin-top:5px}
.nav__m{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--bg);overflow:hidden;padding:88px 0 104px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 480px at 88% 8%,var(--blue-soft) 0%,transparent 62%),
             radial-gradient(620px 420px at 4% 96%,var(--green-soft) 0%,transparent 60%)
}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:70px;align-items:center}
.hero h1{margin-bottom:22px}
.hero h1 .hl{background:linear-gradient(120deg,var(--blue),var(--navy-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:52ch;margin-bottom:32px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero__trust{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;max-width:480px;list-style:none}
.hero__trust li{display:flex;align-items:center;gap:11px;font-size:.95rem;font-weight:600;color:var(--navy)}

.hero__media{position:relative}
.hero__media>img{width:100%;height:auto;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
.fcard{
  position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);
  padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--line)
}
.fcard b{display:block;font-family:var(--disp);font-size:1.05rem;color:var(--navy);line-height:1.2}
.fcard span{font-size:.78rem;color:var(--muted)}
.fcard__ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fcard__ic svg{width:19px;height:19px;fill:none;stroke-width:2}
.fcard--a{top:26px;left:-30px}
.fcard--a .fcard__ic{background:var(--green-soft)} .fcard--a svg{stroke:var(--green-2)}
.fcard--b{bottom:96px;right:-26px}
.fcard--b .fcard__ic{background:var(--blue-soft)} .fcard--b svg{stroke:var(--blue)}
.fcard--c{bottom:-22px;left:22px}
.fcard--c .fcard__ic{background:#fff4e0} .fcard--c svg{stroke:#d99114}

/* ---------- logo / stat strip ---------- */
.strip{background:var(--navy);color:#fff}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:34px 28px}
.strip div{text-align:center}
.strip b{display:block;font-family:var(--disp);font-size:1.9rem;font-weight:800;color:#fff;line-height:1.1}
.strip b em{font-style:normal;color:var(--green)}
.strip span{font-size:.88rem;color:rgba(255,255,255,.66)}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.scard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.22s var(--ease);box-shadow:var(--sh-xs)
}
.scard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.scard__img{position:relative;overflow:hidden}
.scard__img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--ease)}
.scard:hover .scard__img img{transform:scale(1.05)}
.scard__tag{
  position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  color:var(--navy);font-family:var(--disp);font-weight:700;font-size:.76rem;padding:6px 12px;border-radius:var(--r-pill)
}
.scard__b{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.scard h3{margin:0 0 8px}
.scard p{color:var(--muted);font-size:.95rem;margin:0 0 18px;flex:1}
.scard .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--blue)}
.scard .more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s var(--ease)}
.scard:hover .more svg{transform:translateX(4px)}

/* benefit cards */
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;transition:.22s var(--ease);box-shadow:var(--sh-xs);position:relative;overflow:hidden}
.bcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green));opacity:0;transition:.22s var(--ease)}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:transparent}
.bcard:hover::after{opacity:1}
.bcard__ic{width:54px;height:54px;border-radius:15px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.bcard__ic svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.85}
.bcard--g .bcard__ic{background:var(--green-soft)} .bcard--g .bcard__ic svg{stroke:var(--green-2)}
.bcard h3{margin:0 0 8px}
.bcard p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative;counter-reset:st}
.steps::before{content:"";position:absolute;top:34px;left:14%;right:14%;height:2px;background:linear-gradient(90deg,var(--blue-soft),var(--blue),var(--green-soft));z-index:0}
.step{position:relative;z-index:1;text-align:center}
.step__n{
  counter-increment:st;width:68px;height:68px;margin:0 auto 22px;border-radius:20px;
  background:#fff;border:2px solid var(--blue);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:1.5rem;
  box-shadow:0 10px 26px rgba(27,111,224,.16)
}
.step__n::before{content:counter(st)}
.step:nth-child(3) .step__n{border-color:var(--green);color:var(--green-2);box-shadow:0 10px 26px rgba(52,183,89,.18)}
.step h3{margin:0 0 10px}
.step p{color:var(--muted);font-size:.97rem;margin:0;max-width:34ch;margin-inline:auto}

/* ---------- pricing ---------- */
.ptable{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.ptable .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:820px}
caption{caption-side:top;text-align:left;padding:22px 28px 4px;font-size:.88rem;color:var(--muted)}
thead th{
  background:var(--navy);color:#fff;font-family:var(--disp);font-weight:700;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;padding:16px 22px;text-align:left;white-space:nowrap
}
tbody th,tbody td{padding:18px 22px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tbody th{font-family:var(--disp);font-weight:700;color:var(--navy);font-size:.98rem;white-space:nowrap}
tbody td{font-size:.94rem;color:var(--ink-2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-alt)}
td.price{font-family:var(--disp);font-weight:800;color:var(--blue);font-size:1.06rem;white-space:nowrap}
td.price small{display:block;font-family:var(--body);font-weight:500;font-size:.78rem;color:var(--muted)}
.disclaimer{
  display:flex;gap:14px;align-items:flex-start;margin:24px auto 0;max-width:860px;
  background:var(--blue-soft);border-radius:var(--r);padding:18px 22px;font-size:.9rem;color:var(--ink-2)
}
.disclaimer svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--blue);fill:none;stroke-width:2;margin-top:2px}
.disclaimer p{margin:0}

/* rule blocks (OSHA / ADA verbatim) */
.rule{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 var(--r) var(--r) 0;padding:26px 28px;box-shadow:var(--sh-xs)}
.rule--g{border-left-color:var(--green)}
.rule__cite{font-family:var(--disp);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.rule--g .rule__cite{color:var(--green-2)}
.rule blockquote{margin:0 0 14px;padding:0 0 0 18px;border-left:2px solid var(--line);font-style:italic;color:var(--navy)}
.rule blockquote p:last-child{margin:0}
.rule>p:last-child{margin:0;color:var(--muted);font-size:.94rem}
.src{font-size:.86rem;color:var(--muted)}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;max-width:1040px;margin:0 auto}
.calc__form{padding:44px}
.calc__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--disp);font-weight:700;font-size:.86rem;color:var(--navy)}
.field input,.field select{
  font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;width:100%;transition:.16s var(--ease)
}
.field input:focus,.field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-ring)}
/* position:relative gives the absolutely-positioned radios a containing block.
   Without it they resolved against the viewport and pushed ~12px past its right edge. */
.segment{display:flex;gap:8px;position:relative}
.segment label{
  flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px;font-weight:600;font-size:.94rem;
  color:var(--muted);transition:.16s var(--ease);font-family:var(--body)
}
.segment input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.segment input:checked+label{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:700}
.calc__out{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.calc__out h3{color:#fff;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin:0 0 14px;font-weight:600}
.calc__num{font-family:var(--disp);font-size:5rem;font-weight:800;line-height:1;color:var(--green);margin:0 0 6px}
.calc__unit{font-size:1.05rem;color:rgba(255,255,255,.86);margin:0 0 22px}
.calc__basis{font-size:.84rem;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.16);padding-top:18px;margin:22px 0 0;text-align:left;line-height:1.6}

/* ---------- service areas ---------- */
.zip{display:flex;gap:12px;max-width:520px;margin:0 auto 44px}
.zip input{flex:1;font-family:var(--body);font-size:1.02rem;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:16px 20px;background:#fff}
.zip input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-ring)}
.zip__msg{text-align:center;margin:-30px auto 40px;font-size:.94rem;color:var(--muted);min-height:1.4em}
.states{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.states a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font-size:.9rem;font-weight:600;color:var(--ink-2);text-align:center;transition:.16s var(--ease)
}
.states a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}
.states a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.states a.on:hover{background:var(--navy-2);color:#fff}

/* ---------- faq ---------- */
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);transition:.2s var(--ease)}
.faq details[open]{box-shadow:var(--sh-md);border-color:var(--blue-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 28px;font-family:var(--disp);font-weight:700;font-size:1.06rem;
  color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:20px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:12px;height:12px;flex:0 0 auto;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s var(--ease)
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq .a{padding:0 28px 26px;color:var(--muted);font-size:.99rem}
.faq .a p{margin:0 0 .8rem}
.faq .a p:last-child{margin:0}

/* ---------- final cta ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,#17509b 100%);
  color:#fff;padding:76px 56px;text-align:center;box-shadow:var(--sh-lg)
}
.cta-band::before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:var(--green);opacity:.14}
.cta-band::after{content:"";position:absolute;left:-70px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:var(--blue);opacity:.22}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;margin:0 0 16px}
.cta-band p{color:rgba(255,255,255,.86);max-width:56ch;margin:0 auto 34px;font-size:1.1rem}
.cta-band .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-band .eyebrow{color:var(--green);justify-content:center}
.cta-band .eyebrow::before{background:var(--green)}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:rgba(255,255,255,.68);padding:78px 0 30px;font-size:.95rem}
.ft__cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.11)}
.ft__logo{display:inline-flex;background:#fff;border-radius:var(--r);padding:11px 16px;margin-bottom:20px}
.ft__logo img{height:42px;width:auto;max-width:210px;object-fit:contain}
.ft p{color:rgba(255,255,255,.62);max-width:34ch;font-size:.94rem}
.ft h3{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px;font-weight:700}
.ft ul{list-style:none}
.ft li{margin:0 0 10px}
.ft a{color:rgba(255,255,255,.68);font-size:.94rem}
.ft a:hover{color:var(--green)}
.ft__contact li{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.68)}
.ft__contact svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:1.9;flex:0 0 auto;margin-top:3px}
.ft__contact a{font-weight:700;color:#fff}
.ft__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.86rem;color:rgba(255,255,255,.44)}
.ft__bar p{margin:0;max-width:none;color:rgba(255,255,255,.44)}
.ft__bar nav{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- mobile sticky CTA ---------- */
/* Fixed to the viewport. It is a direct child of body and nothing above it sets
   transform, filter, backdrop-filter, perspective, contain or a non-visible root
   overflow, all of which would turn an ancestor into its containing block and make
   it scroll away. env(safe-area-inset-bottom) keeps it clear of the iOS home bar. */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:140;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(11,37,69,.1);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));gap:10px;
}
/* While the burger menu is open the bar would sit on top of the panel's own
   View Pricing / Get a Free Quote buttons. Two competing quote CTAs is also
   redundant, so the bar stands down until the menu closes. */
body.nav-open .mbar{display:none!important}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:var(--r-sm);font-family:var(--disp);font-weight:700;font-size:.98rem}
.mbar .c{background:var(--green);color:#fff}
.mbar .q{background:var(--blue);color:#fff}
.mbar svg{width:17px;height:17px;fill:currentColor}

/* ---------- inner pages ---------- */
.phero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:64px 0 68px;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:var(--blue);opacity:.2}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff;margin:0 0 16px}
.phero .eyebrow{color:var(--green)}
.phero .eyebrow::before{background:var(--green)}
.phero .lead{color:rgba(255,255,255,.85);max-width:60ch}
.crumb{font-size:.86rem;color:rgba(255,255,255,.62);margin-bottom:18px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumb li::after{content:"/";margin-left:8px;opacity:.45}
.crumb li:last-child::after{content:""}
.crumb a{color:rgba(255,255,255,.86)}
.crumb a:hover{color:#fff}
.answer{background:rgba(255,255,255,.1);border-left:4px solid var(--green);border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:0 0 28px;max-width:60ch}
.answer p{margin:0;font-size:1.09rem;color:#fff;line-height:1.66}
.article{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding:72px 0}
.article .body>h2{margin-top:2em;font-size:clamp(1.5rem,2.4vw,2rem)}
.article .body>h2:first-child{margin-top:0}
.article .body>h3{margin-top:1.6em}
.article .body>p,.article .body>ul,.article .body>ol{max-width:70ch}
.article .body ul,.article .body ol{padding-left:1.3em}
.article .body li{margin:.4em 0}
.article .body .ptable,.article .body .rule,.article .body .grid{margin:1.8em 0}
.aside{position:sticky;top:110px;align-self:start}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:30px;text-align:center}
.qcard h3{margin:0 0 8px}
.qcard p{color:var(--muted);font-size:.93rem}
.qcard .t{display:block;font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--navy);margin:10px 0 18px}
.qcard .btn{margin-bottom:10px}
.qcard__list{list-style:none;text-align:left;margin:20px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.qcard__list li{display:flex;gap:10px;align-items:center;font-size:.9rem;margin-bottom:10px;color:var(--ink-2)}
.reviewed{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:44px}

/* fact cards (metro) */
.factcard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-xs)}
.factcard h3{margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.factcard p{font-size:.95rem;margin:0 0 10px}
.factcard p:last-child{margin:0}
.factcard--gap{border-top-color:#e0a63a;background:#fffdf8}
.factcard--gap h3{color:#b07a12}
.needs-source{display:inline-block;font:700 .72rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;color:#8a5a08;background:#fdf3dd;border:1px dashed #d9a94a;border-radius:5px;padding:2px 8px;white-space:nowrap}
.gate{background:#fffdf8;border:1px solid #f0dcaf;border-left:4px solid #e0a63a;border-radius:0 var(--r) var(--r) 0;padding:24px 26px;margin:0 0 30px}
.gate h3{margin:0 0 10px;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b07a12}
.gate p,.gate ul{font-size:.94rem;color:var(--ink-2);margin:0 0 10px}
.gate ul{padding-left:22px}
.gate li{margin:.35em 0}
.gate>:last-child{margin-bottom:0}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
  html.anim .rv.in{opacity:1;transform:none}
  html.anim .hero__copy>*{opacity:0;animation:up .8s var(--ease) forwards}
  html.anim .hero__copy>*:nth-child(1){animation-delay:.08s}
  html.anim .hero__copy>*:nth-child(2){animation-delay:.18s}
  html.anim .hero__copy>*:nth-child(3){animation-delay:.28s}
  html.anim .hero__copy>*:nth-child(4){animation-delay:.38s}
  html.anim .hero__copy>*:nth-child(5){animation-delay:.48s}
  html.anim .hero__media{opacity:0;animation:pop .9s var(--ease) .3s forwards}
  html.anim .fcard{opacity:0;animation:pop .6s var(--ease) forwards}
  html.anim .fcard--a{animation-delay:.85s} html.anim .fcard--b{animation-delay:1s} html.anim .fcard--c{animation-delay:1.15s}
}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.965) translateY(14px)}to{opacity:1;transform:none}}

/* ==========================================================================
   RESPONSIVE
   Ladder: 1240 / 1080 / 980 / 860 / 700 / 560 / 400
   Every section is checked at each step. Wide tables become stacked cards on
   phones rather than a horizontal scroll nobody discovers.
   ========================================================================== */

/* ---- 1240: pull the grid in before the gutter collapses ---- */
@media(max-width:1240px){
  .wrap{padding:0 24px}
  .nav__in{padding:16px 24px}
  .topbar .wrap{padding:10px 24px}
  .states{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ft__cols{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
}

/* ---- 1260: burger takes over ----
   The desktop nav needs ~1250px for brand + 5 items + phone + CTA. Below that the
   flex row cannot shrink (every item is nowrap) and it pushed the CTA past the
   viewport. Switching to the burger here rather than at 1080 removes the overflow. */
@media(max-width:1260px){
  /* Panel height is measured from the real nav height (JS sets --nav-h), not a
     guessed 88px. dvh so the iOS URL bar cannot cut the last item off. The extra
     bottom padding plus overscroll-behavior stops the panel scroll chaining into
     the page, which is what made it feel stuck at the end. */
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:2px;border-bottom:1px solid var(--line);box-shadow:var(--sh-lg);
    padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - var(--nav-h,64px));
    max-height:calc(100dvh - var(--nav-h,64px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain
  }
  .nav__links.open{display:flex}
  .nav__links>a,.drop>button{width:100%;text-align:left;padding:14px 16px;font-size:1rem}
  .drop{position:static}
  .drop>button{display:flex;align-items:center;justify-content:space-between}
  .drop>button::after{margin-left:0;transition:transform .2s var(--ease)}
  .drop.open>button::after{transform:rotate(-135deg)}
  .drop__menu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    border-left:2px solid var(--blue-soft);border-radius:0;padding:2px 0 10px 14px;
    margin:0 0 6px 16px;min-width:0;display:none
  }
  .drop.open .drop__menu{display:block}
  /* The desktop rule .drop:hover .drop__menu is (0,2,0) and outranks the (0,1,0)
     .drop__menu reset above, so on touch the translateX(-50%) came back and shoved
     the open submenu half its own width off the left edge. Reset it at equal weight. */
  .drop:hover .drop__menu,
  .drop:focus-within .drop__menu,
  .drop.open .drop__menu{transform:none;left:auto;right:auto;top:auto;min-width:0;opacity:1;visibility:visible}
  .drop__menu--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drop.open .drop__menu--wide{display:grid}
  .drop__menu a{padding:10px 12px}
  .nav__tel,.nav__in>.btn{display:none}
  .burger{display:block}
  .nav__m{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
  .nav__m .btn{width:100%}
}

/* ---- 1080: section rhythm tightens ---- */
@media(max-width:1080px){
  .sec{padding:88px 0}
  .hero{padding:72px 0 88px}
  .states{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- 980: hero stacks, three-ups become two-ups ---- */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .hero__media{order:-1;max-width:620px;margin:0 auto;width:100%}
  .hero__media>img{aspect-ratio:16/10}
  .fcard--a{left:-6px;top:14px}
  .fcard--b{right:-6px;bottom:64px}
  .fcard--c{left:16px;bottom:-18px}
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr);gap:34px;max-width:520px;margin:0 auto}
  .steps::before{display:none}
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc__out{order:-1;padding:34px}
  .calc__num{font-size:4rem}
  .article{grid-template-columns:minmax(0,1fr);gap:40px;padding:52px 0}
  .aside{position:static;max-width:420px}
  .cta-band{padding:60px 36px}
  .ft__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .ft__cols>div:first-child{grid-column:1/-1}
  .mbar{display:flex}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* ---- 860: tablet portrait ---- */
@media(max-width:860px){
  .sec{padding:72px 0}
  .sec-head{margin-bottom:48px}
  .g2{grid-template-columns:minmax(0,1fr)}
  .grid{gap:20px}
  .bcard{padding:28px 26px}
  .rule{padding:22px 24px}
  .states{grid-template-columns:repeat(3,minmax(0,1fr))}
  .drop__menu--wide,.drop.open .drop__menu--wide{grid-template-columns:1fr}
}

/* ---- 700: phones. Tables restack, everything goes single column ---- */
@media(max-width:700px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav__in{padding:12px 20px;gap:10px}
  .topbar .wrap{padding:9px 20px;gap:12px;justify-content:center;font-size:.78rem}
  .topbar span{display:none}
  .topbar .sp{display:none}
  .brand img{height:40px;max-width:196px}
  .sec{padding:56px 0}
  .sec--tight{padding:44px 0}
  .sec-head{margin-bottom:36px}
  .hero{padding:40px 0 60px}
  .hero .wrap{gap:36px}
  .hero__cta{gap:10px;margin-bottom:30px}
  .hero__cta .btn{width:100%}
  .hero__trust{grid-template-columns:1fr;gap:11px}
  .strip .wrap{grid-template-columns:minmax(0,1fr);gap:18px;padding:28px 20px}
  .strip div{text-align:left;display:flex;align-items:baseline;gap:10px}
  .strip b{font-size:1.35rem}
  .g3,.g4{grid-template-columns:minmax(0,1fr)}
  .scard__img img{aspect-ratio:16/9}

  /* wide tables become stacked cards */
  .ptable{border:0;box-shadow:none;background:none;border-radius:0}
  .ptable .scroll{overflow:visible}
  .ptable table{min-width:0 !important;width:100%;display:block}
  .ptable thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .ptable tbody{display:block}
  .ptable caption{padding:0 0 14px;display:block}
  .ptable tbody tr{
    display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh-xs);padding:16px 18px;margin-bottom:14px
  }
  .ptable tbody tr:hover{background:#fff}
  .ptable tbody tr:last-child{margin-bottom:0}
  .ptable tbody th{
    display:block;border:0;padding:0 0 12px;font-size:1.06rem;white-space:normal;
    border-bottom:1px solid var(--line);margin-bottom:12px
  }
  .ptable tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    border:0;padding:6px 0;white-space:normal;text-align:right
  }
  .ptable tbody td::before{
    content:attr(data-label);font-family:var(--disp);font-weight:700;font-size:.76rem;
    letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;flex:0 0 auto
  }
  .ptable td.price{font-size:1rem}
  .ptable td.price small{display:inline;margin-left:6px}
  .ptable td.cta{display:block;text-align:left;padding-top:14px}
  .ptable td.cta::before{display:none}
  .ptable td.cta .btn{width:100%}

  .disclaimer{padding:16px 18px;font-size:.86rem;gap:12px}
  .calc__form{padding:28px 22px}
  .calc__out{padding:30px 22px}
  .calc__row{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:16px}
  .calc__num{font-size:3.5rem}
  .zip{flex-direction:column;gap:10px}
  .zip .btn{width:100%}
  .zip__msg{margin:-24px auto 32px}
  .states{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .states a{padding:11px 10px;font-size:.86rem}
  .faq summary{padding:18px 20px;font-size:1rem;gap:14px}
  .faq .a{padding:0 20px 20px;font-size:.95rem}
  .cta-band{padding:44px 24px;border-radius:var(--r-lg)}
  .cta-band p{font-size:1rem;margin-bottom:28px}
  .cta-band .row{flex-direction:column;gap:12px}
  .cta-band .row .btn{width:100%}
  .ft{padding:56px 0 26px}
  .ft__cols{grid-template-columns:minmax(0,1fr);gap:30px;padding-bottom:34px}
  .ft p{max-width:none}
  .ft__bar{flex-direction:column;gap:14px}
  .ft__bar nav{gap:18px}
  .phero{padding:44px 0 48px}
  .article{padding:40px 0;gap:32px}
  .aside{max-width:none}
  .qcard{padding:26px 22px}
  .factcard,.gate{padding:20px 18px}
  .answer{padding:18px 20px}
  .answer p{font-size:1rem}
}

/* ---- 560: small phones ---- */
@media(max-width:560px){
  h1{font-size:clamp(1.9rem,7.4vw,2.4rem)}
  h2{font-size:clamp(1.5rem,5.6vw,1.9rem)}
  .wrap{padding:0 16px}
  .nav__in{padding:11px 16px}
  .topbar .wrap{padding:8px 16px}
  .brand img{height:36px;max-width:172px}
  .sec{padding:48px 0}
  .lead{font-size:1.05rem}
  .sec-head p{font-size:1rem}
  .fcard{padding:10px 13px;gap:9px}
  .fcard__ic{width:32px;height:32px;border-radius:9px}
  .fcard__ic svg{width:16px;height:16px}
  .fcard b{font-size:.9rem}
  .fcard span{font-size:.7rem}
  .fcard--c{display:none}
  .scard__b{padding:20px 20px 22px}
  .bcard{padding:24px 22px}
  .bcard__ic{width:48px;height:48px;border-radius:13px;margin-bottom:16px}
  .step__n{width:58px;height:58px;font-size:1.3rem;margin-bottom:18px}
  .calc__num{font-size:3rem}
  .btn{padding:14px 22px;font-size:.96rem}
  .mbar{padding:9px 10px;gap:8px}
  .mbar a{padding:13px 8px;font-size:.92rem}
}

/* ---- 400: the floor ---- */
@media(max-width:400px){
  .wrap{padding:0 14px}
  .brand img{height:32px;max-width:150px}
  .fcard--a{top:8px;left:-2px}
  .fcard--b{bottom:44px;right:-2px}
  .states{grid-template-columns:minmax(0,1fr)}
  .ptable tbody tr{padding:14px 15px}
  .mbar a{font-size:.86rem;gap:6px}
  .mbar svg{width:15px;height:15px}
}

/* ---- coarse pointers: drop hover transforms, enforce tap targets ---- */
@media(hover:none){
  .scard:hover,.bcard:hover,.btn:hover,.states a:hover,.faq details:hover{transform:none}
  .scard:hover .scard__img img{transform:none}
  .faq summary,.states a,.drop>button,.nav__links>a{min-height:44px}
  .mbar a{min-height:48px}
}

/* ---- short landscape phones: release the sticky header ---- */
@media(max-height:460px) and (orientation:landscape){
  .nav{position:static}
  .topbar{display:none}
}

@media print{
  .topbar,.nav,.mbar,.cta-band,.hero__cta,.calc{display:none}
  .sec{padding:20px 0}
  body{padding-bottom:0}
}