/* /services/contractor-marketing/ page styles (loaded only by that page via $EXTRA_HEAD). Builds on site.css + homepage-case-studies.css. 2026-10-21 */

/* Hero */
.cm-hero{padding:170px 40px 96px}
.cm-hero h1{font-size:clamp(46px,7.4vw,112px);max-width:1100px}
.cm-hero .sub{max-width:760px;margin-top:30px}
.cm-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:stretch}
.cm-cta-row .btn-primary,.cm-cta-row .btn-ghost{min-height:62px;box-sizing:border-box}
.cm-call{font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.cm-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:0 0 auto}
.cm-trust{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:24px;font-size:14px;color:var(--ink-dim)}
.cm-trust b{color:var(--ink);font-weight:600}
.cm-trust:hover{color:var(--ink)}
.cm-trust-sep{color:var(--ink-faint)}
.cm-stars{color:#f0b429;letter-spacing:.12em;font-size:14px}

/* Shared */
.cm-head{margin-bottom:56px}
.cm-head h2{font-size:clamp(38px,5vw,72px)}
.cm-link{color:var(--accent-2);border-bottom:1px solid rgba(123,175,212,.35);padding-bottom:1px;transition:color .2s,border-color .2s}
.cm-link:hover{color:var(--ink);border-color:var(--ink)}
.two-col h2{margin-top:18px}
.feature-list h3.fl-title{font-size:17px}

/* What we build */
.cm-build-list{border-top:1px solid var(--line)}
.cm-build-list li:first-child{border-top:0;padding-top:22px}

/* What we add — equal cards (grid rows stretch) */
.cm-add-grid .fcard{gap:14px;padding:34px 30px 36px}
.cm-add-grid .fcard h3{font-size:26px}
.cm-add-grid .fcard p{font-size:15px}
@media(min-width:901px) and (max-width:1100px){.cm-add-grid{grid-template-columns:repeat(2,1fr)}}

/* Contractor work */
.cm-work .hp-cs-card h3{min-height:0}
.cm-work .hp-cs-card{gap:14px;padding:14px 14px 22px}
.cm-work .hp-cs-card .fthumb-browser{margin-bottom:4px}
.cm-work-band{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:18px;padding:22px 28px;background:#0d1a36;border:1px solid var(--line);border-radius:18px}
.cm-work-band p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.5}
.cm-work-band b{color:var(--ink);font-weight:500}
.cm-work-links{display:flex;gap:22px;flex-wrap:wrap}

/* How it works */
.cm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.cm-step{display:flex;flex-direction:column;gap:12px;background:#0d1a36;border:1px solid var(--line);border-radius:18px;padding:28px 26px 30px}
.cm-step-num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500}
.cm-step h3{margin:0;font-size:24px;font-weight:400;letter-spacing:-.02em;line-height:1.15}
.cm-step p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6}
.cm-step-opt{background:transparent;border-style:dashed;border-color:var(--line-2)}
.cm-step-opt .cm-step-num{color:var(--ink-faint)}
@media(max-width:1100px){.cm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cm-steps{grid-template-columns:1fr}}

/* Trades */
.cm-trades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cm-trades li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cm-trades li a,.cm-trades li span{display:flex;align-items:center;gap:14px;min-height:72px;padding:0 24px;font-size:17px;color:var(--ink);box-sizing:border-box;height:100%}
.cm-trades li a::before,.cm-trades li span::before{content:"→";color:var(--accent);flex:0 0 auto}
.cm-trades li a:hover{background:rgba(255,255,255,.03)}
.cm-review-card{display:flex;align-items:center;gap:22px;margin-top:30px;padding:22px 26px;background:#0d1a36;border:1px solid var(--line);border-radius:18px;max-width:460px;transition:border-color .2s}
.cm-review-card:hover{border-color:var(--line-2)}
.cm-review-score{font-size:52px;font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.cm-review-copy{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink-dim)}
.cm-review-copy .cm-link{align-self:flex-start;font-size:14px}

/* FAQ */
.cm-faq .faq-answer a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.cm-faq .faq-item summary{font-size:18px}

/* Final CTA */
.cm-cta-sub{max-width:620px;margin:22px auto 0;color:var(--ink-dim);font-size:17px;line-height:1.6}
.ctaband .qform button.btn-primary{background:var(--ink);color:#0a1530;padding:16px 22px 16px 26px}
.ctaband .qform button.btn-primary:hover{background:var(--ink)}

/* Mobile */
@media(max-width:900px){
  .cm-head{margin-bottom:40px}
  .cm-trades li a,.cm-trades li span{min-height:60px;padding:0 18px;font-size:16px}
}
@media(max-width:600px){
  .cm-hero{padding:120px 20px 56px}
  .cm-hero h1{font-size:clamp(40px,11vw,56px)}
  .cm-hero .sub{font-size:16.5px}
  .cm-cta-row{flex-direction:column}
  .cm-cta-row .btn-primary,.cm-cta-row .btn-ghost{width:100%;justify-content:center}
  .cm-trades{grid-template-columns:1fr}
  .cm-work-band{padding:20px;flex-direction:column;align-items:flex-start}
  .cm-review-card{padding:18px 20px;gap:16px}
  .cm-review-score{font-size:42px}
  .ctaband h2{font-size:clamp(38px,10vw,56px)}
  .cm-add-grid .fcard{padding:28px 22px}
}
@media(max-width:600px){
  .cm-trust{flex-direction:column;align-items:flex-start;gap:6px}
  .cm-trust-sep{display:none}
}
a[href^="tel:"]{white-space:nowrap}
/* Keep "Get a free website review & quote" on one line on small phones */
@media(max-width:400px){
  .cm-cta-row .btn-primary,.ctaband .qform button.btn-primary{padding-left:18px;padding-right:14px;gap:10px;font-size:14px;white-space:nowrap}
}
@media(max-width:340px){
  .cm-cta-row .btn-primary,.ctaband .qform button.btn-primary{white-space:normal}
}