/* The custom made and home viewings pages (Raouf 2026-10-14: "redesign this page like all we did for the main page"), after Designer Rugs' custom page
   and our own home: a full-screen photo hero with the words over it, the choices on a stone band beside the swatch photo, the
   gallery, the process as large numbered steps on graphite, the questions as the home's numbered accordion, and a graphite close.
   Words, links and images are the page's own (scripts/redesign/landing_pages.py); this file only lays them out. Scoped to
   body.lp-custom and body.lp-viewings (inc/pages.php), so the other landing pages keep gallery.css alone. */

body:is(.lp-custom, .lp-viewings, .lp-cleaning) main .entry > * { --bleed: max(var(--gutter, 16px), calc((100vw - var(--page-max, 1440px)) / 2 + var(--gutter, 16px))); }
body.lp-custom .entry > :is(.lp-hero, .lp-split:nth-child(2), .lp-split:nth-child(5), .lp-cta),
body.lp-viewings .entry > :is(.lp-hero, .lp-split:nth-child(2), .lp-cta),
body.lp-cleaning .entry > :is(.lp-hero, .lp-split:nth-child(2), .lp-split:nth-child(3), .lp-split:nth-child(5), .lp-cta) {
  box-sizing: border-box; width: 100vw; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }

/* ---------- the hero: desktop splits the first screen (words on graphite, the whole stair runner beside them, the photo is portrait);
   phones lay the words over the photo ---------- */
body:is(.lp-custom, .lp-viewings, .lp-cleaning) main.page-main { padding-top: 0 !important; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero { --c-band: var(--c-band-stone); position: relative; isolation: isolate; overflow: hidden; display: grid !important;
  grid-template-columns: minmax(0, 1fr); gap: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0;
  min-height: clamp(560px, 100svh, 1100px); background: var(--c-band); color: var(--c-on-photo); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column { grid-area: 1 / 1; margin: 0; min-width: 0; flex-basis: auto !important; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column:last-child { align-self: stretch; position: relative; z-index: -2; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .wp-block-image { margin: 0; position: absolute; inset: 0; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .wp-block-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 70%; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column:first-child { align-self: end; z-index: 1; box-sizing: border-box; max-width: 46rem;
  padding: calc(var(--header-h, 56px) + var(--sp-8, 72px)) var(--gutter, 16px) var(--sp-8, 72px); text-shadow: 0 1px 18px color-mix(in srgb, var(--c-photo-shade) 40%, transparent); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column:last-child::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-photo-shade) 75%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 35%, transparent) 25%, color-mix(in srgb, var(--c-photo-shade) 60%, transparent) 55%, color-mix(in srgb, var(--c-photo-shade) 90%, transparent) 100%); }
@media (min-width: 782px) {
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column:first-child { grid-area: 1 / 1; align-self: center; max-width: none; text-shadow: none;
    padding: calc(var(--header-h, 56px) + var(--sp-7, 48px)) clamp(32px, 5vw, 96px) var(--sp-8, 72px) var(--bleed); }
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column:last-child { grid-area: 1 / 2; z-index: 0; }
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero > .wp-block-column:last-child::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--c-photo-shade) 55%, transparent) 0, transparent 22%); }
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .wp-block-image img { object-position: 50% 60%; }
}
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero :is(h1, p) { color: var(--c-on-photo); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero h1 { font-size: clamp(2.5rem, 4.8vw, 4.5rem); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .lp-lede { max-width: 36rem; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .lp-note { color: var(--c-band-saffron); letter-spacing: 0.04em; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .wp-block-button__link { background-color: var(--c-on-photo); border: 1px solid var(--c-on-photo); color: var(--c-ink); text-shadow: none; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .is-style-outline .wp-block-button__link { background-color: transparent; color: var(--c-on-photo); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero :focus-visible { outline-color: var(--c-on-photo); }

/* ---------- the choices: a stone band, the swatch photo full height on the left ---------- */
body.lp-custom .entry > .lp-split:nth-child(2) { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 var(--bleed) 0 0; gap: 0 !important;
  align-items: stretch !important; background: color-mix(in srgb, var(--c-text) 6%, var(--c-page)); }
body.lp-custom .entry > .lp-split:nth-child(2) > .wp-block-column:first-child { align-self: stretch; }
body.lp-custom .entry > .lp-split:nth-child(2) .wp-block-image { margin: 0; height: 100%; }
body.lp-custom .entry > .lp-split:nth-child(2) .wp-block-image img { height: 100%; max-height: none; aspect-ratio: auto; min-height: 520px; }
body.lp-custom .entry > .lp-split:nth-child(2) > .wp-block-column:last-child { padding: var(--sp-8, 72px) 0 var(--sp-8, 72px) clamp(32px, 6vw, 112px); }
body.lp-custom .entry > .lp-split:nth-child(2) h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 16ch; }

/* ---------- the gallery heading and the quality row: more air ---------- */
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-section { border-top: 0; padding-top: var(--section-y, 56px); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-section > h2, body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq > h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
body.lp-custom .entry > .lp-split:nth-child(4) h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 18ch; }
body.lp-custom .entry > .lp-split:nth-child(4) ul { padding-left: 0; list-style: none; border-top: 1px solid var(--c-rule); }
body.lp-custom .entry > .lp-split:nth-child(4) ul li { padding: var(--sp-3, 12px) 0; border-bottom: 1px solid var(--c-rule); font: 400 clamp(1.0625rem, 1.3vw, 1.1875rem) / 1.45 var(--font-display); }

/* ---------- the process: graphite, four large numbers ---------- */
body.lp-custom .entry > .lp-split:nth-child(5) { --c-band: var(--c-band-stone); margin-block: var(--section-y, 56px) 0 !important; padding: 0 0 0 0; gap: 0 !important;
  align-items: stretch !important; background: var(--c-band); color: var(--c-on-band); }
body.lp-custom .entry > .lp-split:nth-child(5) > .wp-block-column:first-child { position: relative; align-self: stretch; }
body.lp-custom .entry > .lp-split:nth-child(5) .wp-block-image { margin: 0; position: absolute; inset: 0; }   /* the photo fills its half; the steps set the height */
body.lp-custom .entry > .lp-split:nth-child(5) .wp-block-image img { height: 100%; aspect-ratio: auto; object-position: 50% 70%; }
body.lp-custom .entry > .lp-split:nth-child(5) > .wp-block-column:last-child { align-self: center; }
body.lp-custom .entry > .lp-split:nth-child(5) > .wp-block-column:last-child { padding: var(--sp-8, 72px) var(--bleed) var(--sp-8, 72px) clamp(32px, 6vw, 112px); }
body.lp-custom .entry > .lp-split:nth-child(5) h2 { color: var(--c-on-band); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 14ch; }
body.lp-custom .entry > .lp-split:nth-child(5) .lp-steps li { border-top-color: color-mix(in srgb, var(--c-on-band) 25%, transparent); }
body.lp-custom .entry > .lp-split:nth-child(5) .lp-steps li::before { color: var(--c-band-saffron); font-style: italic; font-weight: 400; }
body.lp-custom .entry > .lp-split:nth-child(5) .lp-steps li > strong { color: var(--c-on-band); font: 400 1.375rem / 1.25 var(--font-display); }
body.lp-custom .entry > .lp-split:nth-child(5) .lp-steps li > span { color: color-mix(in srgb, var(--c-on-band) 82%, transparent); }

/* ---------- the questions: the home's numbered accordion ---------- */
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq { border-top: 0; counter-reset: q; padding-top: var(--section-y, 56px); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq > .wp-block-details { max-width: 52rem; margin: 0; border-bottom: 1px solid var(--c-rule); counter-increment: q; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq > .wp-block-details:first-of-type { border-top: 1px solid var(--c-rule); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq summary { display: flex; align-items: baseline; gap: var(--sp-3, 12px); padding: var(--sp-5, 24px) 0; cursor: pointer; list-style: none;
  font: 400 clamp(1.25rem, 2vw, 1.625rem) / 1.25 var(--font-display); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq summary::-webkit-details-marker { display: none; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq summary::before { content: counter(q, decimal-leading-zero); flex: 0 0 2.4em; color: var(--c-muted); font: 500 0.8125rem / 1 var(--font-ui); letter-spacing: 0.12em; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq summary::after { content: "+"; margin-left: auto; font: 300 1.5rem / 1 var(--font-ui); transition: transform 0.3s ease; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq details[open] summary::after { transform: rotate(45deg); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-faq details > p { margin: 0; padding: 0 0 var(--sp-5, 24px) calc(2.4em + var(--sp-3, 12px)); color: var(--c-muted); max-width: 40rem; }

/* ---------- the close: graphite, centred ---------- */
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta { --c-band: var(--c-band-stone); margin-top: var(--section-y, 56px) !important; padding: var(--sp-9, 96px) var(--bleed);
  background: var(--c-band); text-align: center; border-radius: 0; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; max-width: 18ch; margin-inline: auto; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta p { margin-inline: auto; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta .wp-block-buttons { justify-content: center; }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta .wp-block-button__link { color: var(--c-band-stone); }
body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta .is-style-outline .wp-block-button__link { color: var(--c-on-band); }

/* ---------- phones ---------- */
@media (max-width: 781px) {
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero { min-height: clamp(520px, 88svh, 860px); }
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-hero .lp-note { color: var(--c-on-photo); }
  body.lp-custom .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(5)) { padding: 0; }
  body.lp-custom .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(5)) .wp-block-image img { min-height: 0; aspect-ratio: 4 / 3; }
  body.lp-custom .entry > .lp-split:nth-child(5) .wp-block-image { position: static; }
  body.lp-custom .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(5)) > .wp-block-column:last-child { padding: var(--sp-7, 48px) var(--gutter, 16px); }
  body:is(.lp-custom, .lp-viewings, .lp-cleaning) .entry > .lp-cta { padding: var(--sp-8, 72px) var(--gutter, 16px); }
}


/* ---------- home viewings (Raouf 2026-10-14 pm: "do the same redesign"): the same hero, gallery, questions and close; its one split
   (the viewing video beside the four steps) is the graphite band, the video full height in its half ---------- */
body.lp-viewings .entry > .lp-split:nth-child(2) { --c-band: var(--c-band-stone); margin-block: 0 !important; padding: 0; gap: 0 !important;
  align-items: stretch !important; background: var(--c-band); color: var(--c-on-band); }
body.lp-viewings .entry > .lp-split:nth-child(2) > .wp-block-column:first-child { position: relative; align-self: stretch; background: var(--c-ink); }
body.lp-viewings .entry > .lp-split:nth-child(2) .wp-block-video { margin: 0; position: absolute; inset: 0; }
body.lp-viewings .entry > .lp-split:nth-child(2) .wp-block-video video { width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; }
body.lp-viewings .entry > .lp-split:nth-child(2) > .wp-block-column:last-child { align-self: center; padding: var(--sp-8, 72px) var(--bleed) var(--sp-8, 72px) clamp(32px, 6vw, 112px); }
body.lp-viewings .entry > .lp-split:nth-child(2) h2 { color: var(--c-on-band); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 14ch; }
body.lp-viewings .entry > .lp-split:nth-child(2) .lp-steps li { border-top-color: color-mix(in srgb, var(--c-on-band) 25%, transparent); }
body.lp-viewings .entry > .lp-split:nth-child(2) .lp-steps li::before { color: var(--c-band-saffron); font-style: italic; font-weight: 400; }
body.lp-viewings .entry > .lp-split:nth-child(2) .lp-steps li > strong { color: var(--c-on-band); font: 400 1.375rem / 1.25 var(--font-display); }
body.lp-viewings .entry > .lp-split:nth-child(2) .lp-steps li > span { color: color-mix(in srgb, var(--c-on-band) 82%, transparent); }
body.lp-viewings .entry > .lp-split:nth-child(2) p { color: color-mix(in srgb, var(--c-on-band) 90%, transparent); }
body.lp-viewings .entry > .lp-split:nth-child(2) a:not([class]) { color: var(--c-on-band); text-decoration: underline; text-decoration-color: var(--c-band-saffron); text-underline-offset: 4px; }
body.lp-viewings .entry > .lp-split:nth-child(2) :focus-visible { outline-color: var(--c-on-band); }
@media (max-width: 781px) {
  body.lp-viewings .entry > .lp-split:nth-child(2) .wp-block-video { position: static; }
  body.lp-viewings .entry > .lp-split:nth-child(2) .wp-block-video video { aspect-ratio: 16 / 9 !important; height: auto; }
  body.lp-viewings .entry > .lp-split:nth-child(2) > .wp-block-column:last-child { padding: var(--sp-7, 48px) var(--gutter, 16px); }
}

/* ---------- home viewings colour (Raouf 2026-10-15: "give home viewing another color of the site"): custom made keeps graphite;
   home viewings is deep green throughout (hero, the video band, the close; the espresso reviews band follows the close) ---------- */
body.lp-viewings .entry > :is(.lp-hero, .lp-split:nth-child(2), .lp-cta) { --c-band: var(--c-band-lapis); }
body.lp-viewings .entry > .lp-cta .wp-block-button__link { color: var(--c-band-lapis); }

/* ---------- rug cleaning and repairs (Raouf 2026-10-15: "a complete redesign" like custom made and home viewings): the same hero,
   splits, questions and close on khaki, the site's light band, so its words are always ink (--c-ink is the same in both schemes).
   Children: 1 hero, 2 intro + film, 3 the cleaning steps (khaki band), 4 Rug Cleaning Pro line, 5 repairs, 6 why us, 7 questions, 8 close ---------- */
body.lp-cleaning .entry > :is(.lp-hero, .lp-split:nth-child(3), .lp-cta) { --c-band: var(--c-band-saffron); --c-on-band: var(--c-ink); }
@media (min-width: 782px) {   /* the hero words sit on khaki here, not on the photo; khaki takes 60% so the centred logo stays on it */
  body.lp-cleaning .entry > .lp-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  body.lp-cleaning .entry > .lp-hero :is(h1, p, .lp-note) { color: var(--c-ink); }
  body.lp-cleaning .entry > .lp-hero .wp-block-button__link { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-photo); }
  body.lp-cleaning .entry > .lp-hero .is-style-outline .wp-block-button__link { background-color: transparent; color: var(--c-ink); }
  body.lp-cleaning .entry > .lp-hero :focus-visible { outline-color: var(--c-ink); }
}

/* the intro: words left, the cleaning film full height to the right edge */
body.lp-cleaning .entry > .lp-split:nth-child(2) { margin-block: 0 !important; padding: 0 0 0 var(--bleed); gap: 0 !important; align-items: stretch !important; }
body.lp-cleaning .entry > .lp-split:nth-child(2) > .wp-block-column:first-child { align-self: center; padding: var(--sp-9, 96px) clamp(32px, 6vw, 112px) var(--sp-9, 96px) 0; }
body.lp-cleaning .entry > .lp-split:nth-child(2) > .wp-block-column:last-child { position: relative; align-self: stretch; min-height: 480px; background: var(--c-ink); }
body.lp-cleaning .entry > .lp-split:nth-child(2) .wp-block-video { margin: 0; position: absolute; inset: 0; }
body.lp-cleaning .entry > .lp-split:nth-child(2) .wp-block-video video { width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; }
body.lp-cleaning .entry > .lp-split:nth-child(2) h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 16ch; }
body.lp-cleaning .entry > .lp-split:nth-child(2) p { max-width: 34rem; }

/* the cleaning steps: khaki, the hand-wash photo full height on the left, five large numbers */
body.lp-cleaning .entry > .lp-split:nth-child(3) { margin-block: 0 !important; padding: 0; gap: 0 !important; align-items: stretch !important;
  background: var(--c-band); color: var(--c-on-band); }
body.lp-cleaning .entry > .lp-split:nth-child(3) > .wp-block-column:first-child { position: relative; align-self: stretch; }
body.lp-cleaning .entry > .lp-split:nth-child(3) .wp-block-image { margin: 0; position: absolute; inset: 0; }
body.lp-cleaning .entry > .lp-split:nth-child(3) .wp-block-image img { height: 100%; aspect-ratio: auto; object-position: 50% 60%; }
body.lp-cleaning .entry > .lp-split:nth-child(3) > .wp-block-column:last-child { align-self: center; padding: var(--sp-8, 72px) var(--bleed) var(--sp-8, 72px) clamp(32px, 6vw, 112px); }
body.lp-cleaning .entry > .lp-split:nth-child(3) h2 { color: var(--c-ink); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 14ch; }
body.lp-cleaning .entry > .lp-split:nth-child(3) :is(p, strong) { color: var(--c-ink); }
body.lp-cleaning .entry > .lp-split:nth-child(3) .lp-steps li { border-top-color: color-mix(in srgb, var(--c-ink) 28%, transparent); }
body.lp-cleaning .entry > .lp-split:nth-child(3) .lp-steps li::before { color: var(--c-ink); font-style: italic; font-weight: 400; }
body.lp-cleaning .entry > .lp-split:nth-child(3) .lp-steps li > strong { font: 400 1.375rem / 1.25 var(--font-display); }
body.lp-cleaning .entry > .lp-split:nth-child(3) .lp-steps li > span { color: var(--c-ink); }   /* solid: ink on khaki is 4.8:1, any tint drops under AA */
body.lp-cleaning .entry > .lp-split:nth-child(3) :focus-visible { outline-color: var(--c-ink); }

/* the Rug Cleaning Pro line: a quiet ruled row, no box */
body.lp-cleaning .entry > .lp-aside { margin-block: var(--section-y, 56px) 0; padding: var(--sp-5, 24px) 0; background: none; border: 0;
  border-block: 1px solid var(--c-rule); border-radius: 0; }
body.lp-cleaning .entry > .lp-aside p { font: 400 clamp(1.125rem, 1.6vw, 1.375rem) / 1.4 var(--font-display); }

/* the repairs: words left, the restored rug full height to the right edge */
body.lp-cleaning .entry > .lp-split:nth-child(5) { margin-block: var(--section-y, 56px) 0 !important; padding: 0 0 0 var(--bleed); gap: 0 !important;
  align-items: stretch !important; background: color-mix(in srgb, var(--c-text) 6%, var(--c-page)); }
body.lp-cleaning .entry > .lp-split:nth-child(5) > .wp-block-column:first-child { align-self: center; padding: var(--sp-8, 72px) clamp(32px, 6vw, 112px) var(--sp-8, 72px) 0; }
body.lp-cleaning .entry > .lp-split:nth-child(5) > .wp-block-column:last-child { position: relative; align-self: stretch; min-height: 520px; }
body.lp-cleaning .entry > .lp-split:nth-child(5) .wp-block-image { margin: 0; position: absolute; inset: 0; }
body.lp-cleaning .entry > .lp-split:nth-child(5) .wp-block-image img { height: 100%; aspect-ratio: auto; }
body.lp-cleaning .entry > .lp-split:nth-child(5) h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 16ch; }
body.lp-cleaning .entry > .lp-split:nth-child(5) ul { padding-left: 0; list-style: none; border-top: 1px solid var(--c-rule); }
body.lp-cleaning .entry > .lp-split:nth-child(5) ul li { padding: var(--sp-3, 12px) 0; border-bottom: 1px solid var(--c-rule); font: 400 clamp(1.0625rem, 1.3vw, 1.1875rem) / 1.45 var(--font-display); }

/* why us: five ruled columns with large display words instead of boxed cards */
body.lp-cleaning .entry > .lp-section .lp-cards { display: grid !important; gap: var(--sp-6, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
body.lp-cleaning .entry > .lp-section .lp-cards > li { padding: var(--sp-4, 16px) 0 0; background: none; box-shadow: none; border-top: 1px solid var(--c-text); }
body.lp-cleaning .entry > .lp-section .lp-cards > li > strong:first-child { font: 400 clamp(1.5rem, 2.2vw, 2rem) / 1.15 var(--font-display); }
body.lp-cleaning .entry > .lp-section .lp-cards > li > span { color: var(--c-muted); }
body.lp-cleaning .entry > .lp-section > p:last-child { margin-top: var(--sp-6, 32px); font: italic 400 clamp(1.25rem, 2vw, 1.75rem) / 1.3 var(--font-display); }

/* the close on khaki: ink words, ink buttons */
body.lp-cleaning .entry > .lp-cta :is(h2, p, .lp-note, a:not([class]), strong) { color: var(--c-ink); opacity: 1; }
body.lp-cleaning .entry > .lp-cta .wp-block-button__link { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-photo); }
html body.lp-cleaning .entry > .lp-cta .is-style-outline .wp-block-button__link { background-color: transparent; color: var(--c-ink); }
body.lp-cleaning .entry > .lp-cta :focus-visible { outline-color: var(--c-ink); }

@media (max-width: 781px) {
  body.lp-cleaning .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(5)) { padding: 0; }
  body.lp-cleaning .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(5)) > .wp-block-column:first-child { padding: var(--sp-7, 48px) var(--gutter, 16px); }
  body.lp-cleaning .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(3), .lp-split:nth-child(5)) > .wp-block-column:is(:first-child, :last-child) { min-height: 0; }
  body.lp-cleaning .entry > :is(.lp-split:nth-child(2), .lp-split:nth-child(3), .lp-split:nth-child(5)) :is(.wp-block-image, .wp-block-video) { position: static; }
  body.lp-cleaning .entry > :is(.lp-split:nth-child(3), .lp-split:nth-child(5)) .wp-block-image img { aspect-ratio: 4 / 3; height: auto; }
  body.lp-cleaning .entry > .lp-split:nth-child(2) .wp-block-video video { aspect-ratio: 16 / 9 !important; height: auto; }
  body.lp-cleaning .entry > .lp-split:nth-child(3) > .wp-block-column:last-child { padding: var(--sp-7, 48px) var(--gutter, 16px); }
}

/* the header's left half (Menu) and the logo sit on khaki on desktop: ink there; Visit us and the scheme switch stay white on the photo */
@media (min-width: 782px) {
  html:not(.menu-open) body.lp-cleaning .site-header:not(:hover, :focus-within) :is(.brand, .brand-sub, .nav-toggle, .nav-nojs) { color: var(--c-ink); }
  html:not(.menu-open) body.lp-cleaning .site-header:not(:hover, :focus-within) .hd-left :is(a, button):focus-visible { outline-color: var(--c-ink); }
}

/* contrast (axe, 2026-10-15): the hero note in khaki read 3.9:1 on graphite and 2.7:1 on green, so on the band it is the band's text colour;
   on khaki the logo's "Fine Rugs" is solid ink; on phones the cleaning hero's fill under the photo is dark, as on the other two pages */
@media (min-width: 782px) {
  body:is(.lp-custom, .lp-viewings) .entry > .lp-hero .lp-note { color: var(--c-on-band); }
  html:not(.menu-open) body.lp-cleaning .site-header:not(:hover, :focus-within) .brand-sub { opacity: 1; }
}
@media (max-width: 781px) { body.lp-cleaning .entry > .lp-hero { background: var(--c-band-stone); } }

/* button sweep on khaki (Raouf 2026-10-15: "the button animation becomes dark and the text inside unreadable"): the shared dark-band
   rule (buttons.css) sweeps ink with --c-on-band text, and on khaki --c-on-band is ink too. Here the ink button sweeps ivory with ink
   text and the outline button sweeps ink with ivory text. Desktop hero and the close (html: buttons.css loads later with equal weight) */
html body.lp-cleaning .entry > .lp-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { --sweep: var(--c-on-photo); --sweep-ink: var(--c-ink); }
html body.lp-cleaning .entry > .lp-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--c-ink); border-color: var(--c-ink); }
html body.lp-cleaning .entry > .lp-cta .is-style-outline .wp-block-button__link { --sweep: var(--c-ink); --sweep-ink: var(--c-on-photo); }
html body.lp-cleaning .entry > .lp-cta .is-style-outline .wp-block-button__link:is(:hover, :focus-visible) { border-color: var(--c-ink); }
@media (min-width: 782px) {
  body.lp-cleaning .entry > .lp-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { --sweep: var(--c-on-photo); --sweep-ink: var(--c-ink); }
  body.lp-cleaning .entry > .lp-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--c-ink); border-color: var(--c-ink); }
  body.lp-cleaning .entry > .lp-hero .is-style-outline .wp-block-button__link { --sweep: var(--c-ink); --sweep-ink: var(--c-on-photo); }
  body.lp-cleaning .entry > .lp-hero .is-style-outline .wp-block-button__link:is(:hover, :focus-visible) { background-color: transparent; border-color: var(--c-ink); }
}
@media (max-width: 781px) {
  body.lp-cleaning .entry > .lp-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { --sweep: var(--c-ink); --sweep-ink: var(--c-on-photo); }
  body.lp-cleaning .entry > .lp-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--c-on-photo); border-color: var(--c-on-photo); }
  body.lp-cleaning .entry > .lp-hero .is-style-outline .wp-block-button__link { --sweep: var(--c-on-photo); --sweep-ink: var(--c-ink); }
  body.lp-cleaning .entry > .lp-hero .is-style-outline .wp-block-button__link:is(:hover, :focus-visible) { background-color: transparent; border-color: var(--c-on-photo); }
}