/* ============================================================
   HandyBud — shared site styles (Brand B)
   Palette via body class: .pal-plum (homepage) / .pal-blue (landings)
   Faithful to the Claude Design handoff, rebuilt responsive.
   ============================================================ */
:root{
  --head:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --r:18px; --r-lg:24px; --r-sm:12px;
}
.pal-blue{
  --primary:#3B5BDB; --primary-press:#2D49B8; --accent:#FF6B6B;
  --ink:#1B2230; --muted:#5A6172; --muted2:#8A8F9C; --body-ink:#2A3140;
  --page:#FFFFFF; --cream:#F7F6F1; --cream2:#F1F0EC; --line:#EEEDE6; --dark:#1B2230;
  --card-dark:#28314D; --card-dark2:#39456A; --on-dark-muted:#9BA6C4; --eyebrow:#3B5BDB;
}
.pal-plum{
  --primary:#6D4AA8; --primary-press:#5a3c90; --accent:#FF9E7A;
  --ink:#2A1E3A; --muted:#5E5468; --muted2:#9489A6; --body-ink:#3A3047;
  --page:#F7EFE8; --cream:#fff; --cream2:#F7EFE8; --line:#EBE0E6; --dark:#2A1E3A;
  --card-dark:#382A4C; --card-dark2:#4a3a60; --on-dark-muted:#BCAFC8; --eyebrow:#6D4AA8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Guard: any stray wide element must clip, not widen the phone layout. */
html,body{overflow-x:clip}
body{font-family:var(--body);color:var(--ink);background:var(--page);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:1.5px;color:var(--eyebrow)}
h1,h2,h3{font-family:var(--head);letter-spacing:-1px;color:var(--ink);line-height:1.05}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:700;
  border:none;border-radius:var(--r-sm);cursor:pointer;transition:transform .12s ease,box-shadow .15s ease;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent);color:var(--ink);font-size:18px;padding:17px 34px}
.pal-blue .btn-accent{color:#fff}
.btn-accent:hover{box-shadow:0 14px 30px rgba(0,0,0,.18)}
.btn-primary{background:var(--primary);color:#fff;font-size:17px;padding:15px 28px;box-shadow:0 10px 22px rgba(0,0,0,.16)}
.btn-primary:hover{background:var(--primary-press)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5);font-size:17px;padding:14px 26px}
.btn-block{width:100%}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:36px;height:36px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.pal-plum .brand .mark{background:var(--primary);transform:rotate(45deg);border-radius:6px;width:34px;height:34px}
.brand .mark span{font-family:var(--head);font-weight:800;font-size:19px;color:#fff;line-height:1}
.pal-plum .brand .mark span{transform:rotate(-45deg);font-size:17px}
.brand .name{font-family:var(--head);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.7px}
.pal-plum .brand .name{margin-left:6px}
.nav-right{display:flex;align-items:center;gap:26px;font-family:var(--body);font-weight:600;font-size:15px;color:var(--muted)}
.nav-links{display:flex;gap:26px}
.nav-links a:hover{color:var(--ink)}
.nav-trust{display:flex;align-items:center;gap:16px;font-weight:700;font-size:14px;color:var(--primary-press)}
.nav-trust .stars{color:var(--accent);letter-spacing:1px}
.nav-trust .rate{display:flex;align-items:center;gap:7px;color:var(--ink)}

/* sections */
.section{padding:64px 0}
.sec-head{text-align:center;max-width:600px;margin:0 auto}
.sec-head h2{font-size:clamp(28px,5vw,40px);margin-top:8px}
.lede{font-family:var(--body);font-size:18px;color:var(--muted);margin-top:12px}

/* ---------- PLUM HOME ---------- */
.hero-photo{position:relative;min-height:480px;background:#7a6a8a;display:flex;align-items:center;overflow:hidden}
.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(42,30,58,.9) 0%,rgba(58,40,80,.62) 46%,rgba(42,30,58,.06) 80%)}
.hero-photo .inner{position:relative;max-width:640px;padding:64px 0}
.hero-photo .eyebrow{color:var(--accent)}
.hero-photo h1{font-size:clamp(40px,7vw,58px);color:#fff;letter-spacing:-2px;margin-top:12px}
.hero-photo p{font-family:var(--body);font-size:19px;color:#EBE3F2;margin-top:18px;max-width:450px}
.hero-photo .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.icard{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.pal-plum .icard{background:#fff}
.icard .num{width:40px;height:40px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;font-size:19px}
.icard h3{font-size:22px;margin-top:18px;letter-spacing:-.5px}
.icard p{font-family:var(--body);font-size:15.5px;color:var(--muted);margin-top:8px}

.verticals{background:var(--dark);padding:68px 0}
.verticals .eyebrow{color:var(--accent)}
.verticals h2{font-size:clamp(28px,5vw,40px);color:#fff;margin-top:8px}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.vcard{background:var(--card-dark);border-radius:var(--r);overflow:hidden;transition:transform .15s ease}
.vcard:hover{transform:translateY(-4px)}
.vcard .ph{height:160px;background:var(--card-dark2)}
.vcard .ph img{width:100%;height:100%;object-fit:cover}
.vcard .body{padding:22px}
.vcard .body .top{display:flex;align-items:center;justify-content:space-between}
.vcard .body .top b{font-family:var(--head);font-weight:700;font-size:22px;color:#fff}
.vcard .body .top span{font-weight:700;font-size:16px;color:var(--accent)}
.vcard .body p{font-family:var(--body);font-size:14px;color:var(--on-dark-muted);margin-top:4px}

.reviews3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.pal-blue .rcard{border:none;box-shadow:0 10px 30px rgba(27,34,48,.07)}
.rcard .stars{color:var(--accent);font-size:15px;letter-spacing:2px}
.rcard p{font-family:var(--body);font-size:15.5px;color:var(--body-ink);margin-top:12px}
.rcard .who{font-family:var(--body);font-weight:700;font-size:13.5px;color:var(--ink);margin-top:14px}

.final{margin:0 auto 0;background:var(--primary);border-radius:var(--r-lg);padding:60px;text-align:center;position:relative;overflow:hidden}
.final .blob{position:absolute;width:200px;height:200px;border-radius:99px;background:rgba(255,158,122,.28);right:-40px;top:-40px}
.final h2{font-size:clamp(32px,5vw,44px);color:#fff;letter-spacing:-1.4px;position:relative}
.final p{font-family:var(--body);font-size:18px;color:#E3D7F0;margin-top:12px;position:relative}
.final .btn{position:relative;margin-top:26px}

.foot{background:var(--dark);padding:40px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.foot .legal{font-family:var(--body);font-size:12px;color:var(--muted2);max-width:560px;text-align:right;line-height:1.5}
.foot .brand .name{color:#fff}

/* ---------- BLUE LANDING ---------- */
.hero-split{background:var(--primary);position:relative;overflow:hidden}
.hero-split .blob{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:99px;background:rgba(255,107,107,.18)}
.hero-split .grid{display:flex;gap:44px;align-items:center;padding:56px 0 60px;position:relative}
.hero-split .copy{flex:1.05}
.hero-split .eyebrow{color:#AFBEF6}
.hero-split h1{font-size:clamp(38px,6vw,54px);color:#fff;letter-spacing:-2px;margin-top:12px}
.hero-split .copy>p{font-family:var(--body);font-size:19px;color:#D4DCFB;margin-top:18px;max-width:460px}
.hero-chips{display:flex;gap:22px;margin-top:28px;font-family:var(--body);font-weight:700;font-size:14px;color:#fff;flex-wrap:wrap}
.hero-chips span{display:flex;align-items:center;gap:7px}
.hero-chips .tick{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:11px}
.qcard{flex:.95;background:#fff;border-radius:var(--r);padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.24);display:block}
.qcard .qtop{display:flex;align-items:center;gap:10px}
.qcard .bar{flex:1;height:6px;border-radius:99px;background:#E8E6DD;overflow:hidden}
.qcard .bar i{display:block;width:17%;height:100%;background:var(--primary);border-radius:99px}
.qcard .qstep{font-family:var(--body);font-weight:700;font-size:12px;color:#8A8576}
.qcard h3{font-family:var(--head);font-weight:700;font-size:25px;color:var(--ink);margin-top:14px;letter-spacing:-.5px}
.qopts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.qopt{display:flex;align-items:center;gap:13px;background:#fff;border:2px solid var(--line);border-radius:var(--r-sm);padding:14px}
.qopt.sel{border-color:var(--primary);box-shadow:0 6px 16px rgba(59,91,219,.14)}
.qopt .box{width:22px;height:22px;border-radius:6px;background:#ECEAE0;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.qopt.sel .box{background:var(--primary)}
.qopt span.lbl{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink)}
.qcard .qfine{text-align:center;font-family:var(--body);font-size:12px;color:var(--muted2);margin-top:12px}

.trust-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 38px;padding:22px 0;border-bottom:1px solid var(--line);
  font-family:var(--body);font-weight:600;font-size:14px;color:var(--muted2)}
.trust-strip .dot{width:5px;height:5px;border-radius:99px;background:#D6D4CB}

.cover4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.ccard{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:24px}
.ccard .em{font-size:28px}
.ccard h3{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);margin-top:12px;letter-spacing:0}
.ccard p{font-family:var(--body);font-size:14px;color:#4B5364;margin-top:4px}

.imgrow{display:flex;gap:24px;align-items:center}
.imgrow .photo{flex:1.1;border-radius:var(--r);overflow:hidden;height:360px;background:#c9cdd9;box-shadow:0 16px 40px rgba(27,34,48,.14)}
.imgrow .photo img{width:100%;height:100%;object-fit:cover}
.imgrow .steps{flex:.9}
.imgrow .steps h2{font-size:clamp(28px,4.5vw,34px);margin-top:8px;line-height:1.05}
.stepline{display:flex;gap:14px;margin-top:16px}
.stepline:first-of-type{margin-top:24px}
.stepline .n{width:30px;height:30px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;font-size:15px;flex:none}
.stepline .t{font-family:var(--body);font-size:15.5px;color:var(--body-ink)}
.stepline .t strong{color:var(--ink)}

.reviews-band{background:var(--cream2);padding:64px 0}
.reviews-band h2{font-size:clamp(26px,4.5vw,32px);text-align:center}

.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.fcard{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.fcard h3{font-family:var(--head);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:0}
.fcard p{font-family:var(--body);font-size:14.5px;color:#4B5364;margin-top:6px;line-height:1.55}

.final-dark{background:var(--dark);border-radius:var(--r-lg);padding:56px;text-align:center;position:relative;overflow:hidden;margin-bottom:0}
.final-dark .b1{position:absolute;left:-30px;top:-40px;width:200px;height:200px;border-radius:99px;background:rgba(59,91,219,.3)}
.final-dark .b2{position:absolute;right:-30px;bottom:-50px;width:180px;height:180px;border-radius:99px;background:rgba(255,107,107,.22)}
.final-dark h2{font-size:clamp(30px,5vw,42px);color:#fff;letter-spacing:-1.4px;position:relative}
.final-dark p{font-family:var(--body);font-size:17px;color:#A9AEBC;margin-top:12px;position:relative}
.final-dark .btn{position:relative;margin-top:26px}

.foot-slim{background:var(--cream);border-top:1px solid var(--line);padding:28px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.foot-slim .legal{font-family:var(--body);font-size:12px;color:var(--muted2);max-width:620px;text-align:right;line-height:1.5}

/* ---------- broad services grid (homepage, HomeBuddy-style) ---------- */
.svc-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:36px}
.svc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  background:var(--card-dark);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:22px 12px;color:#fff;
  transition:transform .14s ease,background .14s ease,border-color .14s ease;min-height:104px}
.svc-tile:hover{transform:translateY(-3px);background:var(--card-dark2);border-color:rgba(255,255,255,.16)}
.svc-tile .ic{font-size:28px;line-height:1}
.svc-tile .nm{font-family:var(--head);font-weight:700;font-size:14.5px;letter-spacing:-.2px}
.svc-tile.in{border-color:rgba(255,107,107,.5)}
.svc-tile.in .nm::after{content:" →";color:var(--accent)}
.svc-note{font-family:var(--body);font-size:14.5px;color:var(--on-dark-muted);margin-top:24px;text-align:center}
.svc-note a{color:#fff;font-weight:700;text-decoration:underline}
@media (max-width:880px){.svc-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.svc-tiles{grid-template-columns:1fr 1fr}}

/* ---------- self-contained image panels (replace external photos) ---------- */
.imgfill{position:relative;width:100%;height:100%;min-height:160px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#3B5BDB,#28314D)}
.imgfill .imgpat{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.2px);background-size:18px 18px;opacity:.7}
.imgfill .glyph{position:relative;font-size:72px;line-height:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.imgfill.big .glyph{font-size:104px}
.imgfill.v-floor{background:linear-gradient(135deg,#3B5BDB,#2A2F66)}
.imgfill.v-kitchen{background:linear-gradient(135deg,#FF7A6B,#C2453E)}
.imgfill.v-bath{background:linear-gradient(135deg,#2D49B8,#15203A)}

/* ---------- photo overlays (photos sit on top of the branded panels;
     if a photo fails to load it is hidden and the panel shows) ---------- */
.ph{position:relative}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo{position:relative}
.hero-img-wrap{position:absolute;inset:0}
.hero-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img-wrap .hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,26,40,.92) 0%,rgba(36,52,102,.66) 46%,rgba(36,52,102,.10) 80%)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav-links{display:none}
  .nav-trust{display:none}
  .cards3,.vgrid,.reviews3{grid-template-columns:1fr}
  .cover4{grid-template-columns:1fr 1fr}
  .hero-split .grid{flex-direction:column;align-items:stretch}
  .hero-split .copy>p{max-width:none}
  .imgrow{flex-direction:column}
  .imgrow .photo{width:100%;flex:none;height:230px}
  .imgfill.big .glyph{font-size:64px}
  .faq-grid{grid-template-columns:1fr}
  .final,.final-dark{padding:42px 26px}
  .foot,.foot-slim{flex-direction:column;text-align:center}
  .foot .legal,.foot-slim .legal{text-align:center}
}
@media (max-width:480px){
  .cover4{grid-template-columns:1fr}
  .container{padding:0 18px}
}

/* ---------- homepage cost-guides strip (Learn first) ---------- */
.gstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.gs-card{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .13s ease,box-shadow .14s ease;text-decoration:none}
.gs-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(27,34,48,.10)}
.gs-tag{font-family:var(--body);font-weight:800;font-size:11.5px;letter-spacing:1.4px;color:var(--primary)}
.gs-t{display:block;font-family:var(--head);font-weight:700;font-size:18.5px;letter-spacing:-.4px;color:var(--ink);margin-top:8px;line-height:1.25}
.gs-d{display:block;font-family:var(--body);font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
.gs-n{display:block;font-family:var(--head);font-weight:700;font-size:14px;color:var(--primary);margin-top:auto;padding-top:14px}
@media (max-width:880px){.gstrip{grid-template-columns:1fr}}
.gs-img{display:block;height:130px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#3B5BDB,#28314D);margin-bottom:14px}
.gs-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Bud, the HandyBud mascot (assets/brand/) */
.brand .mark.mark-bud{background:transparent;border-radius:0}
.brand .mark.mark-bud img{width:auto;height:48px;display:block}