/* ============================================================
   Joe's Plumbing (demo concept) — design layer over kit.css
   Palette drawn from the fleet branding: charcoal ink, warm
   paper, safety yellow reserved for actions.
   ============================================================ */

:root{
  --k-head-h:84px;
  --k-ink:#1a1c20;
  --k-on-ink:#f6f4ee;
  --k-paper:#f7f5f0;
  --k-card:#ffffff;
  --k-muted:#5c5f66;
  --k-line:rgba(24,26,30,.13);
  --k-line-on-dark:rgba(255,255,255,.16);
  --k-accent:#f0b429;          /* safety yellow, actions only */
  --k-accent-ink:#1a1c20;
  --k-radius:10px;
  --k-font-display:'Barlow Condensed',system-ui,sans-serif;
  --k-font-body:'Inter',system-ui,sans-serif;
  --k-wrap:1180px;

  --jp-navy:#20242c;           /* deep band background */
  --jp-yellow:#f0b429;
  --jp-yellow-soft:#fdf3d7;
  --sp-blue:#1d4ed8;           /* SimplePath pitch band accent */
}

h1,h2,h3{text-transform:uppercase; letter-spacing:.015em; font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3rem); line-height:1.02}
h3{font-size:1.45rem}

/* ---------- demo ribbon ---------- */
.sp-ribbon{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:center;
  background:#10131a; color:#dfe3ec; padding:9px 16px; font-size:.85rem; line-height:1.45; text-align:center}
.sp-ribbon strong{color:#fff}
.sp-ribbon a{color:var(--jp-yellow); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center}

/* ---------- header ---------- */
.jp-brand{display:flex; align-items:center; gap:12px}
.jp-badge{display:inline-flex; align-items:center; justify-content:center; text-align:center;
  background:var(--jp-yellow); color:#1a1c20; font-family:var(--k-font-display);
  font-weight:800; text-transform:uppercase; line-height:.95; font-size:1.18rem;
  padding:10px 14px; border-radius:12px 12px 12px 4px; min-height:60px;
  box-shadow:inset 0 0 0 2px rgba(26,28,32,.28); letter-spacing:.02em}
.jp-badge--sm{min-height:52px; font-size:1rem}
.jp-brand-sub{font-size:.78rem; line-height:1.3; color:var(--k-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em}
.k-nav a{font-weight:600}

/* ---------- kicker (eyebrow variant: numeral + rule) ---------- */
.jp-kicker{display:flex; align-items:center; gap:12px; font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.22em; color:#8a6d1d; margin-bottom:16px}
.jp-kicker-num{font-family:var(--k-font-display); font-size:1.05rem; color:var(--k-ink);
  border-bottom:3px solid var(--jp-yellow); padding-bottom:2px; letter-spacing:.05em}
.jp-kicker--dark{color:#d9b95c}
.jp-kicker--dark .jp-kicker-num{color:var(--k-on-ink)}

/* ---------- hero: glass card over the truck photo ---------- */
.hero{position:relative; min-height:620px; display:flex; align-items:center; overflow:clip;
  background:#2a2d33}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:62% 42%}
.hero-in{position:relative; z-index:1; padding-top:56px; padding-bottom:96px; width:100%}
.hero-card{max-width:560px; background:rgba(247,245,240,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55); border-radius:14px;
  padding:clamp(26px,4vw,44px); box-shadow:var(--k-shadow)}
.hero-loc{display:flex; align-items:center; gap:10px; font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.2em; color:#6b5713; margin-bottom:14px}
.hero-rule{width:34px; height:3px; background:var(--jp-yellow); display:inline-block}
h1{font-size:clamp(2.15rem,4.6vw,3.4rem)}
.hero-lede{margin:16px 0 22px; font-size:1.05rem; color:#33363d}
/* Ghost buttons inside main sit on light surfaces here; the call bar keeps
   the kit's light-on-dark ghost. */
main .k-btn--ghost{border-color:rgba(26,28,32,.45); color:var(--k-ink); font-weight:700}
.hero-trust{margin-top:18px; font-size:.92rem; font-weight:600; color:#4a4d54}

/* ---------- stats: overlap card straddling the hero seam ---------- */
.stats{background:var(--k-paper)}
.stats-card{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  background:var(--jp-navy); color:var(--k-on-ink); border-radius:14px;
  padding:26px 18px; margin-top:-64px; position:relative; z-index:2; box-shadow:var(--k-shadow)}
.stat{text-align:center; padding:6px 10px}
.stat + .stat{border-left:1px solid var(--k-line-on-dark)}
.stat-big{display:block; font-family:var(--k-font-display); font-weight:800;
  font-size:clamp(1.7rem,3vw,2.4rem); color:var(--jp-yellow); text-transform:uppercase}
.stat-label{display:block; margin-top:2px; font-size:.9rem; color:#c6c9d2}

/* ---------- services ---------- */
.svc{padding:88px 0 72px; background:var(--k-paper)}
.svc-head{max-width:720px}
.svc-sub{margin-top:14px; color:var(--k-muted)}
.svc-featured{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.svc-big{background:var(--k-card); border:1px solid var(--k-line); border-radius:var(--k-radius);
  padding:30px 26px; display:flex; flex-direction:column; gap:14px}
.svc-big--urgent{background:var(--jp-navy); color:var(--k-on-ink); border-color:transparent}
.svc-big--urgent h3{color:var(--jp-yellow)}
.svc-big--urgent .svc-list li{border-color:var(--k-line-on-dark); color:#d4d7de}
.svc-big p{color:inherit; opacity:.92}
.svc-list{list-style:none; margin:0; padding:0}
.svc-list li{padding:9px 0 9px 24px; border-top:1px solid var(--k-line); position:relative; font-size:1rem}
.svc-list li::before{content:""; position:absolute; left:2px; top:16px; width:10px; height:10px;
  background:var(--jp-yellow); border-radius:2px}
.svc-link{margin-top:auto; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.9rem; color:inherit; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:3px solid var(--jp-yellow); align-self:flex-start}
.svc-more{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
.svc-small{background:var(--jp-yellow-soft); border-radius:var(--k-radius); padding:20px 22px}
.svc-small h4{font-family:var(--k-font-display); text-transform:uppercase; font-size:1.15rem; margin-bottom:6px}
.svc-small p{font-size:1rem; color:#4c4f56}

/* ---------- triage (signature widget) ---------- */
.triage{padding:80px 0; background:var(--jp-navy); color:var(--k-on-ink)}
.triage h2{color:#fff; max-width:760px}
.triage-sub{margin-top:14px; color:#c6c9d2; max-width:640px}
.triage-widget{margin-top:34px; background:rgba(255,255,255,.05);
  border:1px solid var(--k-line-on-dark); border-radius:14px; padding:clamp(18px,3vw,34px)}
.triage .k-tab{background:transparent; color:#d4d7de; border:1px solid var(--k-line-on-dark)}
.triage .k-tab[aria-selected="true"]{background:var(--jp-yellow); color:#1a1c20; border-color:var(--jp-yellow)}
.triage-stage{margin-top:22px}
.triage-steps{margin:0 0 22px; padding-left:22px; display:grid; gap:12px; max-width:720px}
.triage-steps li{padding-left:6px}
.triage-steps strong{color:#fff}

/* ---------- about ---------- */
.about{padding:88px 0; background:var(--k-card)}
.about-in{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center}
.about-photo{margin:0; position:relative}
.about-photo img{width:100%; border-radius:14px; object-fit:cover; min-height:320px;
  box-shadow:var(--k-shadow)}
.about-photo figcaption{margin-top:10px; color:var(--k-muted)}
.about-copy p{margin-bottom:16px; color:#3a3d44}
.about-line{font-weight:700; margin:6px 0 22px; padding-left:14px; border-left:4px solid var(--jp-yellow)}

/* ---------- reviews ---------- */
.reviews{padding:88px 0; background:var(--k-paper)}
.rev-pull{margin:30px 0 0; max-width:860px}
.rev-pull p{font-family:var(--k-font-display); font-weight:700; text-transform:none;
  font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.18}
.rev-pull footer{margin-top:14px; color:var(--k-muted)}
.rev-pull footer strong{color:var(--k-ink)}
.rev-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; max-width:860px}
.rev-card{background:var(--k-card); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:24px}
.rev-card .stars{color:#d99e0b; letter-spacing:3px; margin-bottom:10px}
.rev-card p{font-size:1rem}
.rev-card footer{margin-top:12px; font-size:1rem; color:var(--k-muted)}
.rev-card footer strong{color:var(--k-ink)}
.rev-note{margin-top:20px; color:var(--k-muted)}

/* ---------- SimplePath pitch ---------- */
.sp-pitch{padding:80px 0; background:linear-gradient(135deg,#0f172a,#1e2a4a); color:#e6eaf3}
.sp-pitch-in{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.sp-tag{display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:6px 14px; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; margin-bottom:18px}
.sp-pitch h2{color:#fff; text-transform:none; font-family:var(--k-font-body);
  font-weight:800; letter-spacing:-.01em; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.12}
.sp-pitch p{margin-top:16px; color:#c6cede}
.sp-pitch strong{color:#fff}
.sp-pitch-cta{display:grid; gap:12px}
.sp-btn{background:#fff; color:#0f172a; font-weight:700; justify-content:center}
.sp-btn-ghost{border:1px solid rgba(255,255,255,.4); color:#fff; justify-content:center}

/* ---------- booking ---------- */
.book{padding:88px 0; background:var(--k-paper)}
.book-in{display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,5vw,64px); align-items:start}
.book-side p{margin-top:14px; color:#3a3d44}
.book-tel{font-weight:700; text-decoration:underline; text-underline-offset:3px;
  min-height:44px; display:inline-flex; align-items:center}
.book-area{margin-top:30px; background:var(--jp-yellow-soft); border-radius:var(--k-radius); padding:22px 24px}
.book-area h3{font-size:1.2rem; margin-bottom:8px}
.book-area p{margin:0; font-size:1rem}
.book-form{background:var(--k-card); border:1px solid var(--k-line); border-radius:14px;
  padding:clamp(22px,3vw,34px); display:grid; gap:14px; box-shadow:var(--k-shadow)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.book-form label{display:grid; gap:6px; font-weight:600; font-size:.92rem}
.book-form input,.book-form select,.book-form textarea{width:100%; font:inherit; font-size:1rem;
  padding:12px 14px; border:1px solid var(--k-line); border-radius:8px; background:#fdfcf9; min-height:44px}
.book-form textarea{resize:vertical}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.book-note{color:var(--k-muted)}

/* ---------- FAQ page ---------- */
.faq-hero{padding:64px 0 12px; background:var(--k-paper)}
.faq-hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.faq-sub{margin-top:14px; max-width:640px; color:var(--k-muted); font-size:1.05rem}
.faq-sub a{font-weight:700; text-decoration:underline; text-underline-offset:3px}
.faq{padding:40px 0 88px; background:var(--k-paper)}
.faq-list{max-width:820px; display:grid; gap:14px}
.faq-item{background:var(--k-card); border:1px solid var(--k-line); border-radius:var(--k-radius); overflow:clip}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 24px; min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--k-font-display); font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{flex:none; width:22px; height:22px; position:relative}
.faq-icon::before,.faq-icon::after{content:""; position:absolute; top:50%; left:50%; background:var(--jp-yellow);
  transform:translate(-50%,-50%)}
.faq-icon::before{width:16px; height:3px}
.faq-icon::after{width:3px; height:16px; transition:transform .18s ease}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-a{padding:0 24px 22px}
.faq-a p{color:#3a3d44; max-width:680px}
.faq-cta{max-width:820px; margin-top:34px; padding:26px 28px; background:var(--jp-yellow-soft);
  border-radius:var(--k-radius); display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.faq-cta p{font-weight:700; margin-right:auto}

/* ---------- footer ---------- */
.foot{background:#14161b; color:#c9ccd4}
.foot-in{display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:clamp(24px,4vw,56px); padding-top:56px; padding-bottom:40px}
.foot-brand p{margin:14px 0; font-size:1rem}
.foot-tel{font-weight:700; color:var(--jp-yellow); min-height:44px; display:inline-flex; align-items:center}
.foot-nav{display:grid; gap:4px; align-content:start}
.foot-nav a{min-height:44px; display:inline-flex; align-items:center; font-size:1rem}
.foot-area h4{font-family:var(--k-font-display); text-transform:uppercase; color:#fff;
  font-size:1.1rem; margin-bottom:8px}
.foot-area p{font-size:1rem}
.foot-legal{border-top:1px solid var(--k-line-on-dark); padding:18px 0 4px}
.foot-legal a{color:var(--jp-yellow); text-decoration:underline; text-underline-offset:2px;
  min-height:44px; display:inline-flex; align-items:center}
[data-sp-credit] a{display:inline-block; padding:14px 10px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .svc-featured{grid-template-columns:1fr}
  .svc-more{grid-template-columns:repeat(2,1fr)}
  .about-in,.book-in,.sp-pitch-in{grid-template-columns:1fr}
  .stats-card{grid-template-columns:repeat(2,1fr); gap:14px}
  .stat + .stat{border-left:none}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .jp-brand-sub{display:none}
  .k-tel{display:none}
  .hero{min-height:0}
  .hero-photo{position:static; height:340px; object-position:60% 40%}
  .hero{display:block; background:var(--k-paper)}
  .hero-in{padding-top:0; padding-bottom:0; margin-top:-72px}
  .hero-card{max-width:none; background:var(--k-card)}
  .stats-card{margin-top:24px}
  .rev-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .sp-ribbon{font-size:.8rem}
}
@media (max-width:560px){
  .svc-more{grid-template-columns:1fr}
}