/* The Commercial roofing trade page, from the 2026-11-03 handoff. It reuses
   the Labor productivity page's hero, problem, founder, and closing styles,
   and adds the stage cards. Loaded after home.css and pages.css. */
@import url("/assets/css/labor-productivity.css");

/* The problem callout: three short columns instead of two figures. */
.cr-callout-grid { grid-template-columns: 1fr; gap: 18px; }
.cr-callout .lp-stat-note { margin-top: 6px; font-size: 14.5px; line-height: 1.5; }
.lp-stat.is-white { border-color: rgba(255, 255, 255, .55); }

/* The stages: a segment bar that sticks under the nav, then eight rows that
   scroll by, copy on the left and a large screenshot panel on the right. The
   active segment follows the scroll, and selecting one scrolls to its row. */
.cr-segbar-wrap { position: sticky; top: calc(var(--nav) + 10px); z-index: 5; display: flex; justify-content: center; margin-top: 36px; padding-inline: var(--gutter); pointer-events: none; }
.cr-segbar { display: flex; gap: 2px; max-width: 100%; padding: 4px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 8px 24px rgba(18, 43, 67, .10); overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
.cr-segbar::-webkit-scrollbar { display: none; }
.cr-segbar button { flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: none; font: 600 14px/1 Manrope, system-ui, sans-serif; color: var(--muted); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.cr-segbar button:hover { color: var(--navy); }
.cr-segbar button:focus-visible { outline: 2px solid #2D9FC1; outline-offset: -2px; }
.cr-segbar button.is-active { background: var(--navy); color: var(--white); }
.cr-steps { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 56px; align-items: start; margin-top: 24px; }
.cr-step-list { display: flex; flex-direction: column; }
.cr-step { display: flex; align-items: center; min-height: 72vh; padding-block: 40px; scroll-margin-top: calc(var(--nav) + 80px); }
.cr-step-copy { display: flex; flex-direction: column; gap: 16px; }
.cr-step-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--teal); }
.cr-step-copy h3 { font-size: 38px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.cr-step-copy > p:not(.cr-step-eyebrow) { font-size: 17px; line-height: 1.6; color: var(--body); }
.cr-step-copy .text-link { align-self: flex-start; font-weight: 700; }
/* The image panel stays put beside the scrolling copy and swaps as the active step changes. */
.cr-step-stage { position: sticky; top: calc(var(--nav) + 72px); padding-top: 16px; }
.cr-step-visual { position: relative; display: grid; place-items: center; height: min(calc(100vh - var(--nav) - 120px), 640px); }
.cr-step-visual-inline { display: none; }
.cr-step-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .45s ease; }
.cr-step-slide.is-active { opacity: 1; transform: none; }
.cr-step-shot { width: 100%; max-height: 100%; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 18px 40px rgba(18, 43, 67, .14); }
/* A capture that already has its own border and square corners: no added frame. */
.cr-step-visual .cr-step-shot.is-flat { border-radius: 0; box-shadow: none; }
/* A very wide capture fills the panel height and crops on the right. */
.cr-step-visual .cr-step-shot-cover { height: 100%; object-fit: cover; object-position: left top; }
/* A phone render keeps its transparency: no card shadow, scaled to the panel height. */
.cr-step-visual .cr-step-phone { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* Two phones resting on each other: the second sits behind and to the left, most of it showing. */
.cr-step-phones { position: relative; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.cr-step-phones .cr-step-phone { position: absolute; bottom: 0; }
.cr-step-phones .is-front { height: 100%; left: 50%; transform: translateX(-18%); z-index: 2; }
.cr-step-phones .is-back { height: 92%; left: 50%; transform: translateX(-95%); z-index: 1; filter: drop-shadow(0 12px 24px rgba(18, 43, 67, .18)); }
.cr-step-visual-inline .cr-step-phone { height: auto; max-height: 520px; }
.cr-step-visual-inline .cr-step-phones { height: 440px; }
.cr-step-visual-inline .cr-step-phones .is-front { height: 100%; left: auto; right: 0; transform: none; }
.cr-step-visual-inline .cr-step-phones .is-back { height: 92%; left: 0; transform: none; }
.cr-step-visual .cr-step-placeholder { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; background: rgba(255, 255, 255, .55); font-size: 15px; }
.cr-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 16px; color: var(--navy); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cr-card:hover, .cr-card:focus-visible { color: var(--navy); transform: translateY(-4px); border-color: #2D9FC1; box-shadow: 0 18px 40px rgba(18, 43, 67, .12); }
.cr-card:focus-visible { outline: 2px solid #2D9FC1; outline-offset: 2px; }
.cr-card-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.cr-card-step > span { display: grid; place-items: center; width: 26px; height: 26px; background: var(--navy); border-radius: 50%; font-size: 12.5px; letter-spacing: 0; color: var(--white); }
.cr-card-outcome { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.cr-card > p:not(.cr-card-outcome), .cr-band div > p:not(.cr-card-outcome) { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.cr-card-link { display: inline-flex; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 700; color: var(--teal); }
.cr-card-link span { transition: transform .2s ease; }
.cr-card:hover .cr-card-link span { transform: translateX(3px); }
.cr-card-shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border: 1px solid var(--line); border-radius: 10px; }
.cr-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; background: #E5E5E0; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cr-band { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px 40px; align-items: start; padding: 32px 36px; }
.cr-band > div { display: flex; flex-direction: column; gap: 12px; }
.cr-band .cr-card-step { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--teal); }
.cr-band .cr-card-outcome { font-size: 22px; }

/* Founder band: a heading above the full quote, and a link under the name. */
.cr-founder .wrap > h2 { max-width: 980px; margin-bottom: 36px; color: var(--white); }
.cr-founder-link { display: inline-flex; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 700; color: #8FD3E2; }
.cr-founder-link:hover, .cr-founder-link:focus-visible { color: var(--white); }

/* Other trades: the same link grid as the Labor page's "Part of one job record". */
.cr-trades { padding-block: 96px; }
.cr-trades h2 { margin-bottom: 36px; }
/* Pricing card sits between the stages and the founder band. */
/* Tighter after the stages, with the homepage's short hairline above the pricing card and again above the service band. */
.cr-stages { padding-bottom: 40px; }

.cr-pricing { position: relative; padding-block: 64px 96px; }
.cr-pricing::before, .cr-service::before { content: ""; position: absolute; top: 24px; left: 50%; width: min(320px, 60%); height: 1px; background: linear-gradient(90deg, transparent, #CFC9BC 25%, #CFC9BC 75%, transparent); transform: translateX(-50%); }

@media (max-width: 960px) {
  .cr-band { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cr-steps { grid-template-columns: 1fr; }
  .cr-step-stage { display: none; }
  .cr-step { flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding-block: 28px; }
  .cr-step-copy h3 { font-size: 28px; }
  .cr-step-visual-inline { display: grid; height: auto; }
  .cr-step-visual .cr-step-placeholder { aspect-ratio: 16 / 10; height: auto; }
  .cr-segbar-wrap { top: calc(var(--nav) + 8px); margin-top: 24px; justify-content: flex-start; }
  .cr-steps { gap: 48px; }
  .cr-band-wrap { margin-top: 24px; }
  .cr-band { padding: 24px 20px; }
  .cr-founder .wrap > h2 { margin-bottom: 28px; }
  .cr-trades { padding-block: 64px; }
  .cr-pricing { padding-top: 56px; }
}

/* Roof service and maintenance: its own navy band after the stages, with a
   lifecycle loop that draws itself once on view. */
.cr-service { position: relative; margin-top: 0; padding-block: 72px 88px; background: var(--cream); color: var(--navy); }
.cr-service-stack { display: flex; flex-direction: column; gap: 48px; }
.cr-service-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.cr-service-lead { display: flex; flex-direction: column; gap: 14px; }
.cr-service .cr-step-eyebrow { color: var(--teal); }
.cr-service h2 { font-size: 32px; line-height: 1.2; color: var(--navy); }
.cr-service-body { display: flex; flex-direction: column; gap: 16px; padding-top: 30px; }
.cr-service-body p { font-size: 16.5px; line-height: 1.65; color: var(--body); }
.cr-service-body .text-link { align-self: flex-start; font-weight: 700; }
.cr-service-flow { width: 100%; max-width: 1000px; margin-inline: auto; }
.cr-service .flow-tools li { text-decoration: none; color: var(--navy); border-style: solid; border-color: var(--line-strong); }
.cr-service .flow.is-live { height: 260px; }
@media (max-width: 960px) { .cr-service-head { grid-template-columns: 1fr; gap: 20px; } .cr-service-body { padding-top: 0; } }
@media (max-width: 720px) { .cr-service { margin-top: 64px; padding-block: 64px; } .cr-service h2 { font-size: 26px; } }
/* The last stage: its copy is centered like the others, and the extra bottom padding keeps the pinned panel in place until the copy lines up with it (Alan, 2026-11-05). */
.cr-step-list .cr-step:last-child { align-items: center; padding-bottom: 200px; }

/* The trades grid reuses the homepage's .everything section, which gained a cream-to-blue gradient for the homepage band
   below it. Here it is a .wrap, so that gradient stopped at the content edges and showed as two lines; the page color is kept instead. */
.cr-trades { background: transparent; }

/* The shop band: the same head as the roofing service band, with the stock
   levels screen and the Field app time clock in place of the flow. Same
   rules as the Concrete page's fleet band. */
.cr-fleet { position: relative; width: 100%; max-width: 1000px; margin-inline: auto; padding: 0 110px 36px 0; }
.cr-fleet .screen-card { height: 380px; }
.cr-fleet .screen-card img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cr-fleet-phone { position: absolute; right: -10px; bottom: -6px; width: 230px; height: auto; filter: drop-shadow(0 20px 30px rgba(18, 43, 67, .3)); }
@media (max-width: 720px) {
  .cr-fleet { padding: 0 0 24px; }
  .cr-fleet .screen-card { height: 220px; }
  .cr-fleet-phone { width: 128px; right: -4px; bottom: 0; }
}

/* "sync." is wider than the homepage accent word, so the underline stroke scales with the svg and draws in one pass (see the Estimating page). */
.lp-hero .word-accent path { vector-effect: none; stroke-width: 4; }