/* ================================================================
   PAGES V4 — distinct identity per page (R2 fix round)
   Loaded after styles.css (and after booking.css on booking.html).
   Every rule is scoped to one page via the class on <main>:
   .pg-res residential · .pg-com commercial · .pg-price pricing
   .pg-about about · .pg-doc policies · .pg-book booking
   Brand tokens only: navy #0B2A4A / green #2F9E4F / ivory — Manrope
   is inherited from styles.css. Presentation only: no content,
   price, calculator or form behaviour lives here.
   ================================================================ */

/* ================================================================
   RESIDENTIAL — checklist-led, warm ivory band rhythm.
   The room-by-room checklists lead the page (moved up in markup);
   bands run ivory → white → ivory → navy so the page feels like a
   well-kept house binder, not a brochure.
   ================================================================ */
.pg-res .hero-scrim {
  background: linear-gradient(94deg,
    rgba(16, 34, 24, 0.82) 0%,
    rgba(11, 42, 74, 0.58) 52%,
    rgba(11, 42, 74, 0.16) 100%);
}
.pg-res .hero-bg { object-position: 50% 62%; }

/* Checklist cards read as binder pages: white sheet, green tab on top */
.pg-res #checklists .check-card {
  background: #fff;
  border-top: 5px solid var(--cta);
  box-shadow: var(--shadow-soft);
}
.pg-res #checklists .check-card h3 .why-icon {
  background: var(--cta-tint);
  border-radius: 10px;
  padding: 7px;
}
/* The detail cards below keep a warm paper feel against the white band */
.pg-res #services-detail { background: #fff; }
.pg-res #services-detail .detail-card {
  background: var(--ivory);
  border: 1px solid var(--line);
}

/* ================================================================
   COMMERCIAL — sector-led, cooler white/steel rhythm, tighter
   B2B grid. Ivory bands cool down to steel; cards get square-ish
   corners and a navy keyline instead of the soft consumer look.
   ================================================================ */
.pg-com .hero-scrim {
  background: linear-gradient(94deg,
    rgba(4, 18, 34, 0.90) 0%,
    rgba(11, 42, 74, 0.62) 55%,
    rgba(38, 66, 102, 0.28) 100%);
}
.pg-com .section { padding: 80px 0; }
.pg-com .section-ivory { background: #EDF1F4; } /* ivory → steel tint */
.pg-com .sector-grid { gap: 14px; }
.pg-com .sector-grid .aud-card {
  border: 1px solid #C7D2DC;
  border-top: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: none;
}
.pg-com .switch-item { border-radius: 10px; border-color: #C7D2DC; }
.pg-com .strip { background: #123B66; }

/* ================================================================
   PRICING — table-led. The hero shrinks to a slim title band (the
   photo <img> is gone in markup) over a thin photo strip, so the
   first real thing on the page is the price table itself — the
   page reads like a published price list, because it is one.
   ================================================================ */
.pg-price .hero {
  background: linear-gradient(118deg, var(--ink-deep) 0%, var(--ink) 78%);
}
.pg-price .hero-inner { min-height: 0; padding: 52px 24px 44px; }
.pg-price .hero-h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 22ch; }
.pg-price .hero-sub { font-size: 1.06rem; margin-top: 14px; }
.pg-price .hero-ctas { margin-top: 24px; }
.pg-price .hero-chips { margin-top: 24px; }

/* Thin photo strip directly under the title band */
.pg-strip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--ink-deep);
}
.pg-strip img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 4px;
}
@media (max-width: 700px) {
  .pg-strip { grid-template-columns: 1fr 1fr; }
  .pg-strip img { height: 84px; }
  .pg-strip img:first-child { grid-column: span 2; }
}

/* Photo opening + block photo headers (owner request, Oct 21).
   The title band now opens on a real photo from the site's own set
   (bright finished living room); the navy gradient moves onto the
   scrim so the band keeps its slim shape and the white type stays
   readable. Each pricing block gets a photo header in the compact-
   card language (.check-photo): a cleaning photo over the house-
   cleaning table, a duct photo over the duct packages. No money or
   coin imagery anywhere — it cheapens the brand. */
.pg-price .hero-scrim {
  background: linear-gradient(118deg, rgba(7, 26, 47, 0.94) 0%, rgba(11, 42, 74, 0.83) 78%);
}
.pg-price .block-photo {
  display: block; width: 100%; height: 190px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-soft); margin-bottom: 20px;
}
@media (max-width: 700px) {
  .pg-price .block-photo { height: 128px; margin-bottom: 16px; }
}

/* The table is the hero of this page: framed like a printed list */
.pg-price #price-table { padding-top: 58px; }
.pg-price .price-table-wrap {
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.pg-price .price-table tbody td {
  color: var(--cta-dark);
  font-size: 1.14rem;
  font-weight: 800;
}

/* ================================================================
   ABOUT — story-led. Full photo hero (crew member at work), a big
   pull-line out of the story, story blocks alternating image
   left/right, and its own band rhythm:
   story white → pull ivory → rules white → audiences ivory →
   areas white → promise navy.
   ================================================================ */
.pg-about .crumbs { color: rgba(255, 255, 255, 0.72); }
.pg-about .crumbs a { color: #fff; }
.pg-about .crumbs .sep { color: rgba(255, 255, 255, 0.55); }

.pg-about .story-grid + .story-grid { margin-top: 64px; }
.pg-about .story-grid.flip { grid-template-columns: 1fr 1.12fr; }
@media (max-width: 900px) {
  .pg-about .story-grid.flip { grid-template-columns: 1fr; }
}

.pg-pullband { background: var(--ivory); padding: 66px 0; }
.pg-pull {
  font-size: clamp(1.55rem, 3.4vw, 2.45rem);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 26ch;
  border-left: 6px solid var(--cta);
  padding-left: 28px;
}

.pg-about #rules { background: #fff; }
.pg-about #audiences { background: var(--ivory); }
.pg-about #areas { background: #fff; }
@media (max-width: 700px) {
  .pg-pull { padding-left: 20px; }
}

/* ================================================================
   POLICIES — the paperwork page, on purpose. A pale desk, a plain
   document header, and sections 1–7 on one white sheet with
   generous margins and numbered headings. No photo hero.
   ================================================================ */
.pg-doc { background: #ECE8DC; }
.pg-doc .page-hero {
  background: transparent;
  border-bottom: 0;
  padding: 54px 0 4px;
}
.pg-doc .page-hero .container {
  border-bottom: 3px double var(--ink);
  padding-bottom: 36px;
}
.pg-doc .policy-nav a { background: #fff; }

/* The sheet */
.pg-doc .page-hero + .container {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  max-width: 980px;
  padding: 16px 64px 26px;
  margin-top: 42px;
  margin-bottom: 58px;
}
.pg-doc .policy-block h2 { align-items: center; }
.pg-doc .policy-num {
  border: 1.5px solid var(--cta);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
/* Closing CTA sits on the desk as its own white card */
.pg-doc > .section { background: transparent; }
.pg-doc > .section .container {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  padding-top: 42px;
  padding-bottom: 42px;
}
@media (max-width: 700px) {
  .pg-doc .page-hero + .container { padding: 8px 24px 18px; }
}

/* ================================================================
   BOOKING — steps-led. The intro becomes a deep navy band and a
   visual 4-step strip sits between it and the wizard, mirroring
   the wizard's own step names (Service → Date & time → Your
   details → Review). Wizard markup/ids are untouched.
   ================================================================ */
.pg-book .bk-hero {
  background: linear-gradient(118deg, var(--ink-deep) 0%, var(--ink) 80%);
  color: #fff;
}
.pg-book .bk-hero h1 { color: #fff; }
.pg-book .bk-hero .eyebrow { color: #8FDCA6; }
.pg-book .bk-hero .lead { color: rgba(255, 255, 255, 0.88); }
.pg-book .bk-points li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}
.pg-book .bk-points .tick { color: #9FE8B4; }

.pg-steps { background: #fff; border-bottom: 1px solid var(--line); }
.pg-steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 30px 0;
}
.pg-steps-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: 800;
  color: var(--ink);
  font-size: 1.02rem;
  position: relative;
}
.pg-steps-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--cta);
  border-right: 2px solid var(--cta);
  transform: translateY(-50%) rotate(45deg);
}
.pg-step-n {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
}
.pg-steps-list li:first-child .pg-step-n { background: var(--cta); }
@media (max-width: 700px) {
  .pg-steps-list { grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px 0; }
  .pg-steps-list li::after { display: none; }
}

/* ================================================================
   REBUILD ROUND 6 — owner video-feedback orders (Oct 21, 2026)
   ================================================================ */

/* RESIDENTIAL (points 12-14): checklist cards carry a real photo
   header instead of reading as flat poster sheets; the 13 detail
   cards fold their long text into a "What's included" expander so
   they sit at compact-card size; the calculator gets its own
   presentation (white band, ink frame, green total) so the page
   no longer copies the homepage's calculator block. */
.pg-res #checklists .check-card { padding: 0 0 24px; overflow: hidden; }
.pg-res #checklists .check-card h3,
.pg-res #checklists .check-card .tick-list { padding-inline: 24px; }
.pg-res .check-photo {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  margin-bottom: 18px;
}
.pg-res .detail-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .pg-res .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .pg-res .detail-grid { grid-template-columns: 1fr; } }
.pg-res .detail-card .svc-body { padding: 16px 18px 18px; gap: 6px; }
.pg-res .detail-card h3 { font-size: 1.14rem; }
.pg-res .detail-more { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.pg-res .detail-more summary {
  font-weight: 800; color: var(--cta-dark); cursor: pointer; font-size: 0.95rem;
}
.pg-res .detail-more summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.pg-res .detail-more p { margin-top: 10px; font-size: 0.97rem; }
.pg-res .detail-more .tick-list { margin-top: 10px; }
.pg-res .detail-foot { margin-top: 12px; }
.pg-res #home-calc { background: #fff; }
.pg-res #home-calc .calc {
  border: 2px solid var(--ink); box-shadow: var(--shadow-card);
}
.pg-res #home-calc .calc-total { background: var(--cta-dark); }

/* COMMERCIAL (point 16): sector cards open up — each carries its
   sector's needs and what we do about them, not just a name. */
.pg-com .sector-more { margin-top: 12px; border-top: 1px solid #C7D2DC; padding-top: 12px; }
.pg-com .sector-more summary {
  font-weight: 800; color: var(--ink); cursor: pointer; font-size: 0.98rem;
}
.pg-com .sector-more summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.pg-com .sector-more h4 {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cta-dark); margin: 14px 0 8px;
}
.pg-com .sector-more ul { font-size: 0.97rem; }