/* Peña's Landscape Services: commercial.css (group commercial-fire: /commercial/ and /fire-rebuild/)
   Loaded after site.css. Same tokens, same voice: no new colors, fonts, radii or spacing values.
   Blocks: .ctrust (hero credential chips), .who + .tlist (serif text lists with brass rules),
   .nlist (numbered 3-up / 4-up lists), .cols (head + body two-column bands), .rsteps (rebate order),
   .packet (vendor packet), .photos--lead (lead photo grid), .bid* (bid walk form), .rules (fire rules). */

/* ===== Hero credentials (commercial): a plain, non-interactive line, not chips.
   Serif small caps with a brass diamond, like the footer license line; only CSLB is a link. ===== */
.ctrust{display:flex;flex-wrap:wrap;gap:0 22px;margin:26px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.ctrust li{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-family:var(--serif);font-variant:small-caps;letter-spacing:.06em;font-size:17px;font-weight:600;line-height:1.25;color:var(--green)}
.ctrust li::before{content:"";width:6px;height:6px;background:var(--brass);transform:rotate(45deg);flex:none}
.ctrust a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:4px}
.ctrust a:hover{color:var(--brass-ink)}
.nowrap{white-space:nowrap}
/* Desktop hero: the commercial text column runs long (5-line H1 + credentials), so the photo sits at
   the top next to the H1 instead of floating in the middle of the column. */
@media (min-width:1024px){
  .page-commercial .hero--inner--img .hero--inner__grid{align-items:start}
  .page-commercial .hero--inner__fig{margin-top:86px}
}
.hero--inner .places{margin:0 0 22px}

/* ===== Serif text list with brass rules (who we work with, what we build) ===== */
.who{padding:44px 0 48px}
.who__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.who .who__h{margin:0}
.tlist{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px}
.tlist li{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.2;color:var(--green);padding:14px 0 16px;border-top:1px solid var(--brass);text-wrap:balance}
.tlist li:last-child{border-bottom:1px solid var(--line)}
@media (min-width:560px){
  .tlist--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlist--4 li:nth-last-child(2){border-bottom:1px solid var(--line)}
}
@media (min-width:768px){
  .tlist--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .tlist li{font-size:24px;padding:18px 0 22px}
  .tlist li:last-child,.tlist--4 li:nth-last-child(2){border-bottom:0}
}
@media (min-width:1024px){
  .who{padding:56px 0 60px}
  .who__grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:56px;align-items:start}
  .who .who__h{padding-top:22px}
  .tlist--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tlist--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
  .tlist--3 li{font-size:26px}
}

/* ===== Numbered list: services (3-up) and process steps (4-up) ===== */
.nlist{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.nlist li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 14px;padding:26px 0;border-bottom:1px solid var(--line)}
.nlist__n{grid-row:span 2;font-family:var(--serif);font-size:40px;line-height:.9;font-weight:500;color:var(--brass-ink);font-variant-numeric:lining-nums}
.nlist h3{grid-column:2;font-size:clamp(25px,2.3vw,30px);color:var(--green);margin:0 0 8px;text-wrap:balance}
.nlist p{grid-column:2;margin:0;color:var(--muted);font-size:16.5px}
@media (min-width:768px){
  .nlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:0}
  .nlist li{grid-template-columns:minmax(0,1fr);align-content:start;border-top:1px solid var(--brass);border-bottom:0;padding:24px 0 40px}
  .nlist__n,.nlist h3,.nlist p{grid-column:auto;grid-row:auto}
  .nlist__n{font-size:48px;margin-bottom:18px}
}
@media (min-width:1024px){
  .nlist{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
  .nlist--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px}
}
.nlist + .svc__foot{margin-top:8px}
.nlist__cta{margin-top:40px;align-items:flex-start}
@media (max-width:479px){.nlist__cta .btn{width:100%}}

/* ===== Head + body two-column bands (AB 1572, rebates, planting plans) ===== */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.cols__head h2{margin:0}
.cols__stamp{margin:22px 0 0}
.cols__body{min-width:0}
.cols__body > p{max-width:62ch}
.cols__lead{font-family:var(--serif);font-size:clamp(23px,2.3vw,28px);font-weight:500;line-height:1.32;color:var(--green);font-variant-numeric:lining-nums;margin-bottom:22px}
.cols__body .src{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);max-width:none}
.cols__body .rsteps + .src{border-top:0;padding-top:0;margin-top:18px}
.cols__body p a{color:var(--brass-ink);text-underline-offset:3px}
.dark .cols__body p a{color:var(--brass-hi)}
.dark .cols__lead{color:var(--cream)}
.dark .cols__body > p:not(.cols__lead):not(.src){color:rgba(244,239,228,.85)}
.dark .cols__body .src{border-top-color:var(--line-dark)}
@media (min-width:1024px){
  .cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;align-items:start}
  .cols__head{position:sticky;top:120px}
  /* AB 1572: "The non-functional" needs about 470px at the 62px h2 size; an even split keeps it on
     one line instead of orphaning "The". */
  #ab-1572 .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Rebate steps (the order matters) ===== */
.rsteps{margin:30px 0 4px;border-top:1px solid var(--brass)}
.rsteps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.rsteps__n{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1;color:var(--brass-ink);font-variant-numeric:lining-nums}
.rsteps__t{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.2;color:var(--green)}
@media (min-width:768px){.rsteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}

/* ===== Vendor packet ===== */
.packet{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.packet__text h2{margin-bottom:18px}
.packet__text .lede{margin:0 0 28px}
.packet__card .list--diamond{margin:0}
.packet__card .list--diamond li{font-size:17px;color:var(--ink)}
.packet__card a{color:var(--brass-ink);text-underline-offset:3px}
.packet__after{display:none;margin:0}
@media (max-width:1023px){.packet__text .btn{display:none}.packet__after{display:block}}
@media (max-width:479px){.packet .btn{width:100%}}
@media (min-width:1024px){.packet{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:88px;align-items:center}.packet__card{padding:36px 36px 34px}}

/* ===== Photo grid with a lead photo (5 landscape photos: 1 wide + 4) ===== */
@media (max-width:899px){.photos--lead .ph:first-child{grid-column:1/-1}}
@media (min-width:900px){
  .photos--lead{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px}
  .photos--lead .ph:first-child{grid-column:span 2;grid-row:span 2}
  .photos--lead .ph:first-child .ph__img{position:relative;aspect-ratio:auto;flex:1;min-height:300px}
  .photos--lead .ph:first-child .ph__img img{position:absolute;inset:0}
}

/* ===== Bid walk form (dark band, white card; field styles come from .qual in site.css) ===== */
.bid__intro .lede{margin:0}
.bid__reach{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-dark)}
.dark .cta-phone{color:var(--cream)}
.dark .cta-phone small{color:var(--brass-hi)}
.dark .cta-phone:hover b{color:var(--brass-hi)}
.dark .cta-text{color:var(--cream);border-bottom-color:var(--line-dark)}
.dark .cta-text svg{color:var(--brass-hi)}
.dark .cta-text:hover{border-bottom-color:var(--brass)}
@media (min-width:1024px){.bid__intro{position:sticky;top:120px}}
.bid__group + .bid__group{margin-top:30px}
.qual .bid__h{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1.4;color:var(--brass-ink);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.qual textarea.inp{min-height:110px;resize:vertical;line-height:1.5}
.qual input[type=date].inp{display:block;min-width:0;-webkit-appearance:none;appearance:none;line-height:1.3}
.qual .inp--file{padding:9px 12px;font-size:15px;cursor:pointer}
.qual .inp--file::file-selector-button{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;min-height:32px;padding:0 14px;margin-right:12px;border:1px solid var(--green);border-radius:2px;background:transparent;color:var(--green);cursor:pointer}
.qual .inp--file:hover::file-selector-button{background:var(--green);color:var(--cream)}
.bid__summary{font-size:15px;line-height:1.5;margin:0 0 20px;padding:12px 14px;background:var(--bg);border-left:3px solid var(--err);color:var(--err);font-weight:500}
.bid__summary:focus{outline:3px solid var(--brass);outline-offset:2px}
.bid__summary a{color:var(--err)}
/* SMS consent: the label is the tap target (box drawn with ::before), never pre-checked */
.consent{margin:4px 0 0}
.consent__box{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:13.5px;line-height:1.5;color:var(--muted);cursor:pointer;padding:4px 0}
.consent__box::before{content:"";width:22px;height:22px;margin-top:1px;border:1px solid var(--line-strong);border-radius:2px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--cream);transition:background .2s,border-color .2s}
.consent__box:hover::before{border-color:var(--brass)}
input:checked + .consent__box::before{content:"\2713";background:var(--green);border-color:var(--green)}
input:focus-visible + .consent__box::before{outline:3px solid var(--brass);outline-offset:2px}
.consent__links{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 14px 36px;font-size:13.5px}
.consent__links a{color:var(--brass-ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.bid__ts{margin:8px 0 16px;min-height:65px;max-width:100%;overflow:hidden}
.bid .btn[aria-busy="true"]{opacity:.75;cursor:progress;transform:none}

/* ===== Fire rules (authority + zone, with sources) ===== */
.rules{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
.rules__item p{margin:0}
.rules__item p:not(.src){color:var(--ink);font-size:16.5px}
.rules__item .src{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
@media (min-width:768px){.rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.rules__caveat{margin:32px 0 0}

/* ===== FAQ without art: head left, questions right on desktop ===== */
@media (min-width:1024px){
  .page-commercial #faq > .wrap,.page-fire-rebuild #faq > .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;align-items:start}
  .page-commercial #faq .head,.page-fire-rebuild #faq .head{position:sticky;top:120px}
}