/* Bayline Plumbing & Heating — the sample plumbing site.
   Mobile-first in the literal sense: everything below is written for a phone,
   and the only @media block widens it for desktop. A plumbing customer is
   standing in a basement with a wet floor; the phone is the real design. */

:root{
  --ink:#12202b; --ink-2:#4a6274; --line:#dde6ec;
  --bg:#fff; --bg-alt:#f2f7fa;
  --brand:#12507d; --brand-dk:#0d3b5d; --hot:#d24317; --go:#f5a623;
  --wrap:1080px; --r:10px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:66px; /* room for the sticky book bar */
}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.02em; font-weight:750}
h1{font-size:1.85rem} h2{font-size:1.4rem} h3{font-size:1.1rem}
p{margin:0 0 1rem}
a{color:var(--brand)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}

/* ── sample ribbon — on every page, so nobody mistakes this for a client ── */
.sample{
  background:#2a1d00; color:var(--go); text-align:center;
  font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 12px;
}
.sample a{color:#fff}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10}
.hdr__row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 18px; max-width:var(--wrap); margin:0 auto}
.hdr__brand{font-weight:850; font-size:1.02rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.hdr__brand small{display:block; font-size:.62rem; font-weight:600; color:var(--ink-2); letter-spacing:.05em; text-transform:uppercase}
.hdr__call{background:var(--brand); color:#fff; text-decoration:none; font-weight:750; font-size:.86rem; padding:9px 13px; border-radius:99px; white-space:nowrap}
.nav{display:flex; gap:4px; overflow-x:auto; padding:0 18px 9px; max-width:var(--wrap); margin:0 auto; -webkit-overflow-scrolling:touch}
.nav a{
  color:var(--ink-2); text-decoration:none; font-size:.88rem; font-weight:650;
  padding:7px 12px; border-radius:99px; white-space:nowrap;
}
.nav a:hover{background:var(--bg-alt)}
.nav a[aria-current=page]{background:var(--brand); color:#fff}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,#eaf3f9,#fff); padding:30px 0 26px}
.hero__kicker{display:inline-block; background:var(--hot); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px; border-radius:99px; margin-bottom:12px}
.hero p{color:var(--ink-2); max-width:46ch}
.hero__acts{display:flex; flex-direction:column; gap:10px; margin-top:18px}

.btn{display:inline-block; text-align:center; text-decoration:none; font-weight:800; padding:15px 20px; border-radius:var(--r); border:0; font-size:1rem; cursor:pointer; line-height:1.2}
.btn--go{background:var(--go); color:#2a1d00}
.btn--call{background:var(--brand); color:#fff}
.btn--ghost{background:#fff; color:var(--brand); border:2px solid var(--brand)}

/* ── blocks ─────────────────────────────────────────────────────────────── */
.sec{padding:34px 0; border-top:1px solid var(--line)}
.sec--alt{background:var(--bg-alt)}
.lede{color:var(--ink-2); max-width:58ch}

.svc{display:grid; gap:14px; margin-top:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px}
.card--lead{border:2px solid var(--brand); box-shadow:0 6px 22px rgba(18,80,125,.1)}
.card__tag{display:inline-block; background:var(--brand); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:99px; margin-bottom:9px}
.card h3{margin:0 0 .35em}
.card p{margin:0 0 .7rem; color:var(--ink-2); font-size:.95rem}
.card ul{margin:0 0 .8rem; padding-left:1.15em; color:var(--ink-2); font-size:.93rem}
.card ul li{margin:.25em 0}
.card__link{font-weight:750; font-size:.92rem; text-decoration:none}

.areas{list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:9px}
.areas li{background:#fff; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:.93rem; font-weight:650}

.trust{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.trust li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-2)}
.trust b{color:var(--ink)}
.tick{flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:var(--brand); color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px}

/* ── forms (sample only — inert) ────────────────────────────────────────── */
.form{margin-top:18px; max-width:560px}
.field{display:block; margin:0 0 15px}
.field span{display:block; font-weight:700; margin-bottom:6px; font-size:.93rem}
.form input,.form select,.form textarea{width:100%; padding:13px 14px; font:inherit; font-size:1rem; border:1px solid var(--line); border-radius:8px; background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--brand); outline-offset:1px}
.inert{background:#fff4e5; border:1px solid #f0c98a; color:#6b4a12; border-radius:8px; padding:11px 13px; font-size:.85rem; margin-top:14px}

/* ── sticky book bar — the two-tap booking claim, made real ─────────────── */
.bookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:9px; padding:9px 12px;
  background:rgba(255,255,255,.97); border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(0,0,0,.07);
}
.bookbar a{flex:1; padding:13px 10px; font-size:.95rem}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--ink); color:#c2d3de; padding:26px 0 30px; margin-top:0}
.foot a{color:#fff}
.foot__grid{display:grid; gap:16px}
.foot h4{color:#fff; font-size:.95rem; margin:0 0 .4em}
.foot p,.foot li{font-size:.88rem; margin:.2em 0}
.foot ul{list-style:none; padding:0; margin:0}
.foot__note{border-top:1px solid rgba(255,255,255,.15); margin-top:18px; padding-top:14px; font-size:.78rem; color:#8fa8b8}

@media (min-width:760px){
  h1{font-size:2.6rem} h2{font-size:1.9rem}
  .hero{padding:54px 0 46px}
  .sec{padding:52px 0}
  .hero__acts{flex-direction:row}
  .hero__acts .btn{min-width:210px}
  .svc{grid-template-columns:repeat(2,1fr)}
  .card--lead{grid-column:1/-1}
  .areas{grid-template-columns:repeat(4,1fr)}
  .foot__grid{grid-template-columns:repeat(3,1fr)}
  body{padding-bottom:0}
  .bookbar{display:none} /* desktop has the header CTA in view already */
}