/* /commercial only. Layouts follow Brent's commercial mockup (2026-10):
   ruled, numbered columns instead of cards, split section heads, a timeline,
   and a form card. Loaded after styles.css and carries its own ?v number,
   like dc-hero.css on the homepage. */

.cm-mint { background: #e8f2f0; }

/* in-page links jump straight to the section rather than smooth scrolling
   (Jacob, 2026-10-09). The margin keeps the heading clear of the sticky header. */
html { scroll-behavior: auto; }
section[id] { scroll-margin-top: 72px; }

/* ---- hero: copy on navy left, building photo bleeding off the right ---- */
.cm-hero { padding: 0; }
.cm-hero-main { position: relative; }
.cm-hero-main > .container { padding-top: 104px; padding-bottom: 104px; }
.cm-hero-copy { max-width: 54%; position: relative; z-index: 1; }
.cm-hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; height: 100%; object-fit: cover; object-position: center 30%; }
.cm-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.08; margin-top: 18px; text-wrap: balance; }
.cm-hero h1 .cm-hl { text-wrap: balance; }
.cm-hero h1 .cm-hl { display: block; color: #9fdcd2; }
.cm-hero .lead { color: rgba(255,255,255,0.86); margin-top: 24px; max-width: 46ch; }
.cm-hero .cta-pair { margin-top: 32px; align-items: center; gap: 28px; }
.cm-hero-strip { background: var(--brand-deep); border-top: 1px solid rgba(255,255,255,0.08); }
.cm-hero-strip .container { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding-block: 20px; font-size: 0.78rem; color: rgba(255,255,255,0.8); }
.cm-hero-strip .cm-caps { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

/* underlined text link with a trailing icon */
.cm-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.cm-link > span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.cm-link .msym { font-size: 18px; transition: transform 200ms var(--ease-out); }
.cm-link:hover .msym { transform: translateX(3px); }
.cm-hero .cm-link .msym { transform: rotate(90deg); }

/* ---- section head: heading left, intro right ---- */
.cm-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.cm-head h2 { margin-top: 12px; }
.cm-head > p { font-size: 1.1rem; color: var(--ink-muted); line-height: 1.65; }

/* ---- ruled, numbered columns ---- */
.cm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.cm-cols > div { border-top: 1px solid var(--hairline-strong); padding-top: 26px; }
.cm-tag { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-strong); margin-bottom: 18px; }
.cm-cols h3 { font-size: 1.4rem; margin-bottom: 14px; max-width: 18ch; }
.cm-cols p { color: var(--ink-muted); line-height: 1.65; }

/* ---- resident coordination: copy left, timeline right ---- */
.cm-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.cm-split h2 + p { margin-top: 22px; color: var(--ink-muted); line-height: 1.7; max-width: 44ch; }
.cm-split .cm-link { margin-top: 28px; }
.cm-aside { display: flex; gap: 16px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hairline-strong);
  font-size: 0.92rem; color: var(--ink-muted); max-width: 44ch; }
.cm-aside .msym { color: var(--teal-strong); font-size: 22px; flex: none; }
.cm-timeline { list-style: none; margin: 0; padding: 0; }
.cm-timeline li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 28px; padding-bottom: 36px; }
.cm-timeline li:last-child { padding-bottom: 0; }
.cm-timeline li::before { content: ""; position: absolute; left: 19.5px; top: 40px; bottom: 0; width: 1px; background: var(--steel); opacity: 0.5; }
.cm-timeline li:last-child::before { display: none; }
.cm-dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--steel); display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; color: var(--teal-strong); background: #e8f2f0; }
.cm-timeline .cm-tag { margin: 2px 0 6px; font-size: 0.7rem; }
.cm-timeline h3 { font-size: 1.35rem; margin-bottom: 10px; }
.cm-timeline p { color: var(--ink-muted); line-height: 1.65; }

/* ---- property record: numbered list on navy ---- */
.record-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.record-photo { margin: 0; position: sticky; top: 100px; }
.record-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-md); display: block; }
.record-photo::after { content: ""; display: block; width: 60%; height: 3px; margin-top: 18px; background: var(--teal); }
.record-grid .num-list { margin-top: 32px; }
.record-grid h2 + p { margin-top: 18px; }
.num-list { list-style: none; padding: 0; margin: 0; }
.num-list li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 26px 0; border-top: 1px solid var(--hairline); }
.num-list li:last-child { border-bottom: 1px solid var(--hairline); }
.num-list-n { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sand); padding-top: 6px; }
.num-list h3 { font-size: 1.3rem; margin-bottom: 8px; }
.num-list p { color: var(--ink-muted); font-size: 1rem; line-height: 1.6; max-width: 56ch; }

/* ---- property types: three photo cards ---- */
.cm-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cm-types figure { margin: 0; }
.cm-types img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.cm-types figcaption { padding-top: 18px; }
.cm-types h3 { font-size: 1.2rem; margin-bottom: 6px; }
.cm-types p { color: var(--ink-muted); font-size: 0.96rem; line-height: 1.6; }

/* ---- scope callout + add-on row ---- */
.cm-callout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 12px 40px; margin-top: 48px; padding: 26px 30px;
  background: var(--bg-elev); border-left: 3px solid var(--teal-strong); font-size: 0.95rem; color: var(--ink-muted); }
.cm-callout b { color: var(--ink); }
.cm-addon { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; margin-top: 40px; padding-top: 36px;
  border-top: 1px solid var(--hairline-strong); }
.cm-addon .cm-tag { margin-bottom: 8px; }
.cm-addon h3 { font-size: 1.4rem; }
.cm-addon p { color: var(--ink-muted); line-height: 1.65; }
.cm-addon small { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--ink-soft); }

/* ---- a person to talk to ---- */
.cm-talk .container { display: flex; justify-content: space-between; align-items: center; gap: 28px 48px; flex-wrap: wrap; }
.cm-talk h2 { margin: 12px 0 14px; }
.cm-talk p { color: var(--ink-muted); max-width: 56ch; }

/* ---- FAQ: heading left, questions right ---- */
.cm-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px 64px; align-items: start; }
.cm-faq h2 { margin-top: 12px; }
.cm-faq .faq { max-width: none; border-top: 1px solid var(--hairline-strong); }
.cm-faq .faq details { border-bottom-color: var(--hairline-strong); }
.cm-faq .faq summary .msym { color: var(--teal-strong); }

/* ---- proposal: copy left, form card right ---- */
.cm-proposal { padding: 96px 0 96px; }
.cm-proposal .contact-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
.cm-proposal h2 + p { margin-top: 22px; color: var(--ink-muted); line-height: 1.7; max-width: 40ch; }
.cm-receives { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hairline-strong); }
.cm-receives h3 { font-size: 1.3rem; margin-bottom: 6px; }
.cm-receives > p { font-size: 0.92rem; color: var(--ink-muted); margin-bottom: 14px; }
.cm-receives ul { margin: 0; padding-left: 20px; list-style: disc; display: grid; gap: 8px; font-size: 0.95rem; color: var(--ink); }
.cm-receives li::marker { color: var(--teal-strong); }
.cm-talk-line { margin-top: 28px; font-size: 0.95rem; color: var(--ink-muted); }
.cm-talk-line a { display: block; margin-top: 6px; font-weight: 700; color: var(--ink); }
.cm-form-card { background: #fff; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  padding: 36px 34px; box-shadow: var(--shadow-sm); }
.cm-form-card h3 { font-size: 1.5rem; margin-bottom: 6px; }
.cm-form-card > p { font-size: 0.92rem; color: var(--ink-muted); margin-bottom: 24px; }
.cm-form-card .form-success { border: 0; padding: 12px 0; }

@media (max-width: 960px) {
  .cm-hero-copy { max-width: none; }
  .cm-hero-main > .container { padding-top: 72px; padding-bottom: 56px; }
  .cm-hero-img { position: static; display: block; width: 100%; height: 360px; object-position: center 35%; }
  .cm-head, .cm-split, .record-grid, .cm-faq, .cm-callout, .cm-addon { grid-template-columns: 1fr; }
  .cm-head { gap: 16px; margin-bottom: 40px; }
  .cm-split, .record-grid { gap: 44px; }
  .cm-cols { grid-template-columns: 1fr; gap: 32px; }
  .cm-types { grid-template-columns: 1fr; gap: 32px; }
  .record-photo { position: static; max-width: 520px; }
  .record-photo img { aspect-ratio: 4/3; }
  .cm-proposal { padding: 96px 0 96px; }
.cm-proposal .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .cm-hero-main > .container { padding-top: 56px; padding-bottom: 44px; }
  .cm-hero-img { height: 280px; }
  .cm-hero .lead { font-size: 1.05rem; }
  .cm-hero .cta-pair { flex-direction: column; align-items: stretch; gap: 18px; }
  .cm-hero .cta-pair .btn { justify-content: center; }
  .cm-hero .cm-link { align-self: center; }
  .cm-proposal { padding: 64px 0; }
  .cm-timeline li { gap: 18px; }
  .num-list li { grid-template-columns: 44px 1fr; padding: 22px 0; }
  .num-list h3 { font-size: 1.15rem; }
  .cm-form-card { padding: 26px 20px; }
  .cm-talk .btn { width: 100%; justify-content: center; }
}

/* Client login (portal.nestflo.ca). Links ship with `hidden` until the portal
   is live, and .btn / inline-flex rules would otherwise override it. */
.nav-login { font-size: 0.92rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.nav-login:hover { color: var(--ink); }
.nav-login[hidden], .cta-pair .btn[hidden] { display: none; }