:root{
  --ink:#14181B; --ink2:#2A3037; --steel:#6E7B85; --line:#DCE1E5;
  --paper:#F4F5F6; --amber:#E0B14A; --amber-dk:#B8892B; --w:#fff;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w);color:var(--ink);font:400 17px/1.6 var(--sans);
  padding-bottom:74px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* header */
.top{position:sticky;top:0;z-index:80;background:var(--w);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;
  font-size:19px;letter-spacing:-.4px}
.brand svg{width:30px;height:32px;flex:none}
.nav{margin-left:auto;display:flex;gap:22px;font-size:15px}
.nav a{text-decoration:none;color:var(--steel)}
.nav a:hover{color:var(--ink)}
.top .tel{font-weight:700;text-decoration:none;white-space:nowrap;font-size:17px}
@media(max-width:760px){.nav{display:none}.top .tel{margin-left:auto}}

/* hero */
.hero{padding:52px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
h1{margin:0 0 18px;font-size:clamp(33px,4.6vw,54px);line-height:1.04;
  letter-spacing:-1.4px;font-weight:800}
.lede{font-size:19px;color:var(--ink2);margin:0 0 26px;max-width:46ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:16px 26px;border-radius:3px;text-decoration:none;
  font-weight:700;font-size:17px;border:2px solid var(--ink)}
.btn-a{background:var(--ink);color:var(--w)}
.btn-b{background:var(--w);color:var(--ink)}
.btn:hover{opacity:.88}
.promise{margin:18px 0 0;font-size:15px;color:var(--steel)}

/* before/after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba figure{margin:0;position:relative}
.ba figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--w);
  font-size:12px;letter-spacing:1.6px;padding:6px 11px;font-weight:700}
.ba img{aspect-ratio:3/4;object-fit:cover;width:100%}
@media(max-width:800px){.hero-grid{grid-template-columns:1fr;gap:22px}
 .hero{padding:26px 0 24px}
 .hero .cta{display:none}
 .hero .promise{margin:14px 0 0}
 h1{font-size:clamp(30px,7.4vw,40px);letter-spacing:-1px}
 .lede{font-size:17.5px;margin-bottom:14px}}

/* trust strip */
.trust{background:var(--ink);color:#C9D0D6}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;padding:20px 22px;font-size:15px}
.trust b{color:var(--w)}
.stars{color:var(--amber);letter-spacing:2px}

/* section */
section{padding:58px 0;border-top:1px solid var(--line)}
h2{margin:0 0 8px;font-size:clamp(25px,3vw,35px);letter-spacing:-.9px;font-weight:800}
.sub{color:var(--steel);margin:0 0 32px;max-width:56ch}
h3{font-size:21px;margin:0 0 8px;font-weight:700}

/* breaker schedule */
.schedule{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row .n{font-variant-numeric:tabular-nums;font-size:14px;color:var(--steel);font-weight:700}
.row .t{font-weight:700;font-size:18px}
.row .d{color:var(--ink2);font-size:15.5px;margin-top:3px;max-width:62ch}
.row .p{font-size:15px;color:var(--steel);white-space:nowrap;font-variant-numeric:tabular-nums}
a.row:hover .t{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.row{grid-template-columns:36px 1fr;gap:12px}
  .row .p{grid-column:2;margin-top:6px}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gal img{aspect-ratio:1;object-fit:cover}
@media(max-width:700px){.gal{grid-template-columns:repeat(2,1fr)}}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rev{border-left:3px solid var(--amber);padding-left:18px}
.rev p{margin:0 0 10px;font-size:16.5px}
.rev cite{font-style:normal;font-size:14px;color:var(--steel)}
@media(max-width:820px){.revs{grid-template-columns:1fr;gap:22px}}

/* price */
.price{background:var(--paper);padding:26px;border-left:3px solid var(--ink)}
.price dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:12px 20px}
.price dt{font-size:16px}
.price dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.price .note{margin:18px 0 0;font-size:14.5px;color:var(--steel)}

/* form */
.form{background:var(--paper);padding:30px;max-width:560px}
.form label{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.form input,.form select,.form textarea{width:100%;padding:13px 12px;font:400 16px var(--sans);
  border:1px solid #B9C1C7;border-radius:2px;background:var(--w);margin:0 0 16px}
.form textarea{min-height:64px;resize:vertical}
.form button{width:100%;padding:17px;background:var(--ink);color:var(--w);border:0;
  font:700 18px var(--sans);border-radius:3px;cursor:pointer}
.form button:hover{background:var(--ink2)}
.form .fine{font-size:14px;color:var(--steel);margin:12px 0 0;text-align:center}
.form .above{font-size:15px;margin:0 0 20px;padding:12px 14px;background:var(--w);
  border-left:3px solid var(--amber)}

/* area */
.area{columns:3;column-gap:30px;font-size:16px;color:var(--ink2)}
.area span{display:block;padding:5px 0}
@media(max-width:640px){.area{columns:2}}

/* footer */
footer{background:var(--ink);color:#9AA5AD;padding:44px 0;font-size:15px}
footer a{color:var(--w)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr;gap:22px}}

/* sticky */
#bar{position:fixed;bottom:0;left:0;right:0;z-index:99;display:flex;background:var(--ink);
  padding:9px;gap:9px}
#bar a{flex:1;text-align:center;padding:15px;font:700 16px var(--sans);
  text-decoration:none;border-radius:3px}
#bar .c{background:var(--w);color:var(--ink)}
#bar .q{background:var(--amber);color:var(--ink)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}