/* ============ Buddy's Plumbing — multi-page site styles (extends styles.css) ============ */

/* ---- Static-HTML header nav: dropdowns ---- */
.nav .has-sub{position:relative;}
.nav .has-sub > a{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.nav .has-sub > a .caret{width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s;}
.submenu{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:10px; min-width:268px; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; z-index:70;}
.submenu::before{content:""; position:absolute; top:-18px; left:0; right:0; height:18px;}
.nav .has-sub:hover .submenu, .nav .has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav .has-sub:hover > a .caret{transform:rotate(-135deg) translateY(-2px);}
.submenu a{display:flex; flex-direction:column; gap:2px; padding:10px 13px; border-radius:10px; font-size:14.5px; font-weight:700; color:var(--ink);}
.submenu a small{font-weight:500; font-size:12.5px; color:var(--ink-faint);}
.submenu a::after{display:none;}
.submenu a:hover{background:var(--paper-2); color:var(--red);}
.submenu.wide{min-width:520px; display:grid; grid-template-columns:1fr 1fr;}
.submenu.mega{width:min(720px,92vw); padding:16px; left:0; transform:translateX(0) translateY(8px);}
.nav .has-sub:hover .submenu.mega, .nav .has-sub:focus-within .submenu.mega{transform:translateX(0) translateY(0);}
.mega-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px 14px;}
.mega-head .mh-ic{display:inline-flex; align-items:center; color:var(--red); margin-right:8px;}
.mega-cta{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:14px; padding:14px 16px; background:var(--paper-2); border-radius:12px;}
.mega-cta > div{min-width:0;}
.mega-cta b{display:block; font-family:var(--font-display); font-size:15px; color:var(--ink);}
.mega-cta span{display:block; font-size:13px; color:var(--ink-soft);}
.mega-cta .btn{white-space:nowrap; padding:11px 18px;}
.submenu.mega .mega-cta .btn-red{display:inline-flex; align-items:center; gap:8px; color:#fff; background:var(--red); padding:11px 18px;}
.submenu.mega .mega-cta .btn-red:hover{color:#fff; background:var(--red-deep);}
.mega-col{display:flex; flex-direction:column; gap:1px;}
.submenu.mega a{display:block; padding:7px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.submenu.mega a::after{display:none;}
.submenu.mega a:hover{background:var(--paper-2); color:var(--red);}
.submenu.mega .mega-head{font-weight:800; color:var(--ink); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:9px 12px 5px; margin-top:2px; border-bottom:1px solid var(--line-soft); border-radius:0; display:flex; align-items:center;}
.submenu.mega .mega-head:hover{background:none; color:var(--red);}
.mm-sub{padding-left:22px !important; font-size:15px !important; font-weight:600 !important; color:var(--ink-soft) !important; border-bottom:1px solid var(--line-soft);}

/* ---- Breadcrumb ---- */
.crumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; font-weight:600; color:var(--ink-faint);}
.crumb a{color:var(--ink-soft);}
.crumb a:hover{color:var(--red);}
.crumb .sep{opacity:.5;}

/* ---- Sub-page hero ---- */
.subhero{position:relative; overflow:hidden; background:var(--paper-2); border-bottom:1px solid var(--line-soft);}
.subhero .wrap{padding-top:46px; padding-bottom:54px;}
.subhero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.subhero.no-media .subhero-grid{grid-template-columns:1fr; max-width:900px;}
.subhero .eyebrow{margin-bottom:16px;}
.subhero h1{font-size:clamp(32px,4.2vw,52px); margin-top:14px;}
.subhero .hook{font-size:clamp(18px,2vw,21px); color:var(--ink-soft); margin:18px 0 0; font-weight:600; max-width:54ch; text-wrap:pretty;}
.subhero-actions{display:flex; gap:13px; margin-top:28px; flex-wrap:wrap; align-items:center;}
.subhero-media{position:relative;}
.subhero-photo{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3.2; border:6px solid #fff; box-shadow:var(--shadow-lg); position:relative; background:var(--paper);}
.subhero-photo img{width:100%; height:100%; object-fit:cover;}
.subhero-badge{position:absolute; right:-18px; bottom:24px; background:var(--red); color:#fff; border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-red); max-width:200px;}
.subhero-badge b{font-family:var(--font-display); font-size:15px; display:block;}
.subhero-badge small{font-size:12px; opacity:.92;}

/* ---- Quick Answer (AEO) ---- */
.quick-answer{background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow-sm); margin:0 0 8px;}
.quick-answer .qa-label{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:9px;}
.quick-answer p{margin:0; font-size:17px; line-height:1.6; color:var(--ink); font-weight:500;}

/* ---- Prose (story/offer) ---- */
.prose{max-width:none;}
.prose > p{font-size:17px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; text-wrap:pretty;}
.prose > p:last-child{margin-bottom:0;}
.prose h2{font-size:clamp(26px,3vw,36px); margin:0 0 8px;}
.prose h3{font-size:21px; margin:26px 0 10px;}
.prose ul.checks{list-style:none; padding:0; margin:18px 0; display:grid; gap:12px;}
.prose ul.checks li{display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink); line-height:1.5;}
.prose ul.checks li .ck{width:26px; height:26px; border-radius:8px; background:#FDEAEB; color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}

/* content layout: body + sticky aside */
.page-body{padding:72px 0;}
.body-grid{display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:start;}
.body-main .blk{margin-bottom:40px;}
.body-main .eyebrow{margin-bottom:12px;}
.aside{position:sticky; top:150px; display:flex; flex-direction:column; gap:18px;}
.aside-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm);}
.aside-card.red{background:linear-gradient(160deg,var(--red),var(--red-deep)); color:#fff; border:none; box-shadow:var(--shadow-red);}
.aside-card.red h4{color:#fff;}
.aside-card h4{font-size:18px; margin-bottom:6px;}
.aside-card p{font-size:14px; color:var(--ink-soft); margin:0 0 14px;}
.aside-card.red p{color:rgba(255,255,255,.9);}
.aside-phone{font-family:var(--font-display); font-weight:900; font-size:26px; display:flex; align-items:center; gap:10px; color:#fff;}
.aside-card .btn{width:100%;}
.trust-mini{display:flex; flex-direction:column; gap:12px;}
.trust-mini .tm{display:flex; gap:11px; align-items:center; font-size:14px; font-weight:600; color:var(--ink);}
.trust-mini .tm .ic{width:36px; height:36px; border-radius:10px; background:var(--paper-2); color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* ---- Child services grid (hub pages) ---- */
.link-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.link-card{display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s;}
.link-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line);}
.link-card .lc-ic{width:46px; height:46px; border-radius:12px; background:#FDEAEB; color:var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.link-card h3{font-size:18px;}
.link-card p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5;}
.link-card .go{margin-top:auto; padding-top:10px; color:var(--red); font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:6px;}

/* ---- Related services ---- */
.related{background:var(--paper-2); border-top:1px solid var(--line-soft);}
.related h2{font-size:28px; margin-bottom:24px;}
.related-row{display:flex; gap:12px; flex-wrap:wrap;}
.rel-chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 18px; font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:9px; box-shadow:var(--shadow-sm); transition:.18s;}
.rel-chip:hover{border-color:var(--red); color:var(--red); transform:translateY(-2px);}
.rel-chip .ic{color:var(--red);}

/* ---- FAQ ---- */
.faq{max-width:840px; margin:0 auto;}
.faq-head{text-align:center; margin-bottom:40px;}
.faq-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:12px;}
.faq-item{border-bottom:1px solid var(--line); }
.faq-q{width:100%; text-align:left; background:none; border:none; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--font-display); font-weight:700; font-size:18.5px; color:var(--ink);}
.faq-q .pm{width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; position:relative; transition:.2s;}
.faq-q .pm::before,.faq-q .pm::after{content:""; position:absolute; left:50%; top:50%; background:var(--red); transition:.2s;}
.faq-q .pm::before{width:12px; height:2px; transform:translate(-50%,-50%);}
.faq-q .pm::after{width:2px; height:12px; transform:translate(-50%,-50%);}
.faq-item.open .faq-q .pm{background:var(--red); border-color:var(--red);}
.faq-item.open .faq-q .pm::before,.faq-item.open .faq-q .pm::after{background:#fff;}
.faq-item.open .faq-q .pm::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{margin:0; padding:0 4px 24px; color:var(--ink-soft); font-size:16px; line-height:1.65; max-width:70ch;}

/* ---- CTA band ---- */
.ctaband{background:linear-gradient(160deg,#C8202A,#921318); color:#fff; position:relative; overflow:hidden;}
.ctaband::before{content:""; position:absolute; right:-140px; top:-140px; width:460px; height:460px; border-radius:50%; background:rgba(255,255,255,.06);}
.ctaband .wrap{position:relative; z-index:2; text-align:center; padding-top:72px; padding-bottom:72px;}
.ctaband h2{color:#fff; font-size:clamp(30px,3.8vw,46px); max-width:20ch; margin:0 auto;}
.ctaband p{color:rgba(255,255,255,.9); font-size:18px; margin:16px auto 30px; max-width:54ch;}
.ctaband-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn-onred{background:#fff; color:var(--red);}
.btn-onred:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-outline-w{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.btn-outline-w:hover{background:rgba(255,255,255,.12); border-color:#fff;}
/* CTA-band phone button: white number by default, inverts to white+red on hover */
.ctaband-actions .btn-onred{background:transparent; color:#fff; border-color:#fff;}
.ctaband-actions .btn-onred:hover{background:#fff; color:var(--red); border-color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lg);}

/* ---- About page ---- */
.about-story{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.legacy{display:flex; gap:22px; flex-wrap:wrap; margin-top:8px;}
.legacy .lg{flex:1; min-width:150px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; text-align:center; box-shadow:var(--shadow-sm);}
.legacy .lg b{font-family:var(--font-display); font-weight:900; font-size:38px; color:var(--red); display:block; line-height:1;}
.legacy .lg small{font-size:13.5px; color:var(--ink-soft); font-weight:600;}
.owner-card{background:var(--ink); color:#f4ede3; border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-lg);}
.owner-card .ph{position:relative; aspect-ratio:1/1; border-radius:14px; margin-bottom:20px;}
.owner-photo{aspect-ratio:3/2; border-radius:14px; overflow:hidden; margin-bottom:20px; background:#1a1714;}
.owner-photo img{width:100%; height:100%; object-fit:cover;}
.owner-card h3{color:#fff; font-size:22px;}
.owner-card .role{color:#ff9a9a; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:4px 0 14px;}
.owner-card p{color:#cdbfb0; font-size:14.5px; line-height:1.6; margin:0;}
.owner-card .lic{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:12px; font-weight:700; font-size:14px; color:#fff;}

/* ---- Contact ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:start;}
.loc-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px;}
.loc-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm);}
.loc-card .tag{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red);}
.loc-card h4{font-size:18px; margin:8px 0;}
.loc-card p{font-size:14px; color:var(--ink-soft); margin:0;}
.contact-list{display:flex; flex-direction:column; gap:14px; margin-top:26px;}
.social-row{display:flex; gap:12px; margin-top:22px;}
.social-row a{width:46px; height:46px; border-radius:12px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.2s;}
.social-row a:hover{background:var(--red); color:#fff; border-color:var(--red);}

/* ---- Two office locations (service areas) ---- */
.offices{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:10px;}
.office{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm); display:flex; gap:16px; align-items:flex-start;}
.office .oic{width:50px; height:50px; border-radius:13px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.office h3{font-size:20px;}
.office address{font-style:normal; color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin-top:4px;}

/* ---- Blog ---- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.post-card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.post-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.post-card .pc-photo{aspect-ratio:16/10; position:relative; background:var(--paper-2); overflow:hidden;}
.post-card .pc-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.article .post-hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.post-card .pc-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-card .pc-meta{font-size:12.5px; font-weight:700; color:var(--red); letter-spacing:.04em; text-transform:uppercase;}
.post-card h3{font-size:20px; line-height:1.2;}
.post-card p{margin:0; font-size:14.5px; color:var(--ink-soft);}
.post-card .pc-go{margin-top:auto; padding-top:8px; color:var(--red); font-weight:800; font-size:14px;}
.post-featured{grid-column:1 / -1; display:grid; grid-template-columns:1.1fr .9fr; gap:0;}
.post-featured .pc-photo{aspect-ratio:auto; min-height:320px;}
.post-featured .pc-body{padding:38px; justify-content:center;}
.post-featured h3{font-size:30px;}

/* article */
.article{max-width:760px; margin:0 auto;}
.article .prose > p{font-size:18px;}
.article h2{font-size:28px; margin:36px 0 12px;}
.article .post-hero-img{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/8; margin:8px 0 32px; position:relative; background:var(--paper-2);}
.article .meta-row{display:flex; align-items:center; gap:14px; color:var(--ink-faint); font-size:14px; font-weight:600; margin-top:14px;}
.article .author{display:flex; align-items:center; gap:10px;}
.article .author .av{width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;}

.article .quick-answer{margin:0 0 30px;}
.article-toc{background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--r); padding:22px 26px; margin:0 0 34px;}
.article-toc h4{font-family:var(--font-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px;}
.article-toc ol{margin:0; padding-left:20px; display:grid; gap:8px;}
.article-toc a{color:var(--ink); font-weight:600; font-size:15.5px;}
.article-toc a:hover{color:var(--red); text-decoration:underline;}
.article h2{scroll-margin-top:120px;}
.article .faq{margin:44px 0 0;}
.article .faq-head{text-align:left; margin-bottom:10px;}
.article .faq-head h2{margin:0;}
.article-cta{background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff; border-radius:var(--r-lg); padding:32px; margin:40px 0 0; text-align:center;}
.article-cta h3{color:#fff; font-size:24px; margin:0 0 8px;}
.article-cta p{color:rgba(255,255,255,.9); margin:0 0 20px; font-size:16px;}
.article-share{display:flex; align-items:center; gap:12px; margin:34px 0 0; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap;}
.article-share .rel-chip{cursor:default;}

/* discounts strip */
.disc-strip{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}
.disc{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-weight:700; font-size:14px; box-shadow:var(--shadow-sm);}
.disc .ic{color:var(--red);}

/* subhero trust line + city sections */
.subhero-trust{margin-top:20px; font-size:13.5px; font-weight:600; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start; max-width:52ch; line-height:1.5;}
.subhero-trust .ic{color:var(--red); flex-shrink:0; margin-top:1px;}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.review-card{background:#26211c; border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:14px;}
.review-card .stars{color:var(--gold); letter-spacing:2px; font-size:16px;}
.review-card p{margin:0; color:#f2ebe2; font-size:15px; line-height:1.6; flex:1;}
.review-card .who{display:flex; align-items:center; gap:11px;}
.review-card .who .av{width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;}
.review-card .who b{display:block; color:#fff; font-size:14.5px;}
.review-card .who small{color:#a99e90; font-size:12.5px;}
.rev-summary{display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0 38px; flex-wrap:wrap; color:#cdbfb0; font-weight:600;}
.rev-summary .big{font-family:var(--font-display); font-weight:900; font-size:40px; color:#fff; line-height:1;}
.rev-summary .stars{color:var(--gold); font-size:20px; letter-spacing:2px;}
@media (max-width:760px){ .rev-grid{grid-template-columns:1fr;} }

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.gallery-item{aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; position:relative; background:var(--paper-2); box-shadow:var(--shadow-sm);}
.gallery-item img{width:100%; height:100%; object-fit:cover;}
.gallery-item.tall{grid-row:span 2; aspect-ratio:auto;}
@media (max-width:760px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }

@media (max-width:600px){
  .subhero-badge{right:10px; bottom:10px; max-width:62%; padding:11px 14px;}
}

/* page intro (centered) */
.page-intro{text-align:center; max-width:720px; margin:0 auto 50px;}
.page-intro h2{font-size:clamp(28px,3.4vw,40px); margin-top:12px;}
.page-intro .lead{margin:16px auto 0;}

/* responsive */
@media (max-width:1024px){
  .body-grid{grid-template-columns:1fr; gap:40px;}
  .aside{position:static; flex-direction:row; flex-wrap:wrap;}
  .aside-card{flex:1; min-width:260px;}
  .subhero-grid,.about-story,.contact-grid{grid-template-columns:1fr; gap:36px;}
  .subhero-media{max-width:520px;}
  .link-grid,.blog-grid{grid-template-columns:repeat(2,1fr);}
  .post-featured{grid-template-columns:1fr;}
  .nav{display:none;}
}
@media (max-width:760px){
  .link-grid,.blog-grid,.loc-cards,.offices{grid-template-columns:1fr;}
  .legacy{gap:12px;}
}