/* commercial.html only. Tokens (--ink, --accent, --cream…) come from legal.css,
 * which this page loads first — same pattern as plans.css. Don't redefine them
 * here; a second :root block is exactly the duplicate-copy drift the site has
 * already been bitten by twice. */

/* ── Hero ───────────────────────────────────────────────────────────── */
.cm-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.cm-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% 10%,rgba(46,134,200,.34),transparent 62%),
    linear-gradient(180deg,rgba(46,134,200,.10),transparent 45%);
}
/* Faint blueprint grid, faded out before it reaches the bottom edge so it
 * never fights the text or the form card. */
.cm-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:
    linear-gradient(rgba(152,162,170,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(152,162,170,.35) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.cm-hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;
  padding:72px 0 80px;
}
.cm-eyebrow{
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:16px;
}
.cm-hero h1{
  font-size:clamp(34px,4.6vw,56px);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;color:#fff;
}
.cm-hero h1 em{font-style:normal;color:var(--accent-light)}
.cm-lead{color:#C6D0D8;font-size:clamp(16px,1.5vw,19px);line-height:1.6;margin-top:20px;max-width:52ch}
.cm-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.cm-btn{display:inline-block;padding:15px 28px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;transition:.18s}
.cm-btn-solid{background:var(--accent);color:#fff}
.cm-btn-solid:hover{background:var(--accent-deep)}
.cm-btn-ghost{border:2px solid rgba(255,255,255,.4);color:#fff}
.cm-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Stat strip. Every figure here is verified — see the comment in
 * commercial.html before adding a new one. */
.cm-stats{display:flex;border-top:1px solid rgba(152,162,170,.25);margin-top:42px;flex-wrap:wrap}
.cm-stats div{flex:1 1 150px;padding:22px 22px 0}
.cm-stats div + div{border-left:1px solid rgba(152,162,170,.25)}
.cm-stats b{display:block;font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#fff;letter-spacing:-.02em}
.cm-stats span{display:block;font-size:13.5px;color:#98A2AA;font-weight:600;margin-top:2px}

/* ── In-hero quote card ─────────────────────────────────────────────── */
.cm-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(152,162,170,.3);
  border-radius:16px;padding:26px;backdrop-filter:blur(6px);
}
.cm-card h2{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.01em}
.cm-card > p{font-size:14px;color:#98A2AA;line-height:1.55;margin-top:6px}
.cm-card label{display:block;font-size:12.5px;font-weight:700;color:#98A2AA;letter-spacing:.03em;margin:16px 0 6px}
.cm-card input,.cm-card select{
  width:100%;padding:12px 14px;border-radius:9px;font:inherit;font-size:15px;
  border:1px solid rgba(152,162,170,.38);background:rgba(20,24,27,.55);color:#fff;
}
.cm-card select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2398A2AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.cm-card input::placeholder{color:#6E7A83}
.cm-card input:focus,.cm-card select:focus{outline:2px solid var(--accent-light);outline-offset:1px;border-color:transparent}
.cm-card .cm-btn{width:100%;text-align:center;margin-top:20px}
.cm-card small{display:block;text-align:center;color:#98A2AA;font-size:12px;margin-top:12px}
.cm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Sectors ────────────────────────────────────────────────────────── */
.cm-sectors{padding:76px 0;background:var(--white)}
.cm-head{max-width:62ch;margin-bottom:34px}
.cm-head .cm-eyebrow{color:var(--accent)}
.cm-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.cm-head p{color:var(--ink-soft);font-size:17px;line-height:1.6}
/* Six cards, three columns — deliberately NOT four. Six cards in a 4-col grid
   renders 4+2, the exact lopsided layout the homepage "Why Choose Us" grid had
   to be redesigned to fix. */
.cm-sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cm-sector{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;padding:24px;transition:.2s;background:var(--white)}
.cm-sector:hover{border-color:var(--accent);box-shadow:0 14px 30px -20px rgba(28,95,146,.6)}
.cm-sector .cm-ic{width:42px;height:42px;border-radius:11px;background:var(--teal-tint);display:grid;place-items:center;margin-bottom:14px}
.cm-sector h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px}
.cm-sector p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.cm-i{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── Services list ──────────────────────────────────────────────────── */
.cm-services{padding:76px 0;background:var(--cream)}
.cm-group{
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);margin:34px 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.cm-group:first-of-type{margin-top:0}
.cm-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cm-svc{
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px;
  text-decoration:none;color:inherit;min-height:170px;transition:.2s;
}
.cm-svc:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.cm-svc h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px}
.cm-svc p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.cm-svc .cm-go{font-size:14px;font-weight:700;color:var(--accent)}

/* ── Process ────────────────────────────────────────────────────────── */
.cm-process{padding:76px 0;background:var(--white)}
.cm-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.cm-steps > div{padding:28px 24px}
.cm-steps > div + div{border-left:1px solid var(--line)}
.cm-steps b{display:block;font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.12em;margin-bottom:10px}
.cm-steps h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:7px}
.cm-steps p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}

/* ── Closing band ───────────────────────────────────────────────────── */
.cm-band{background:var(--ink);color:#fff;padding:64px 0}
.cm-band-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cm-band h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:#fff;max-width:24ch}
.cm-band > .wrap > .cm-band-row > div > p{color:#98A2AA;font-size:16.5px;line-height:1.6;margin-top:16px}
.cm-band .cm-eyebrow{color:var(--accent-light)}
.cm-proof{display:grid;gap:14px}
.cm-proof > div{display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid rgba(152,162,170,.3);border-radius:12px}
.cm-proof .cm-i{stroke:var(--accent-light);flex:0 0 22px}
.cm-proof b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.cm-proof p{font-size:13.5px;color:#98A2AA;margin-top:3px;line-height:1.5}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .cm-sector:hover{transform:translateY(-2px)}
}

@media (max-width:980px){
  .cm-sector-grid{grid-template-columns:repeat(2,1fr)}
  .cm-svc-grid{grid-template-columns:repeat(2,1fr)}
  .cm-steps{grid-template-columns:repeat(2,1fr)}
  .cm-steps > div:nth-child(odd) + div{border-left:1px solid var(--line)}
  .cm-steps > div:nth-child(3),.cm-steps > div:nth-child(4){border-top:1px solid var(--line)}
  .cm-steps > div:nth-child(3){border-left:0}
}
@media (max-width:760px){
  .cm-hero-inner{grid-template-columns:1fr;gap:34px;padding:52px 0 60px}
  .cm-band-row{grid-template-columns:1fr;gap:32px}
  .cm-sector-grid,.cm-svc-grid,.cm-steps{grid-template-columns:1fr}
  .cm-steps > div + div{border-left:0;border-top:1px solid var(--line)}
  .cm-stats div + div{border-left:0}
  .cm-stats div{flex:1 1 45%;padding:18px 0 0}
  .cm-ctas .cm-btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cm-svc:hover{transform:none}
}