/* Shared section surfaces, loaded after each page's existing stylesheet.
   Only semantic outer bands are painted. Layout, media, cards and motion stay
   owned by their original stylesheets; hero and FOUR PRACTICES are untouched. */
:root {
  --section-ivory: #FFFEFA;
  --section-cream: #EEE8DC;
  --section-sage: #E2ECE5;
  --section-gray: #ECEAE5;
  --section-green: #203F35;
  --section-light: #FFFEFA;
  --section-muted-light: #E1E8E2;
}

/* Each page uses color to group a subject, not to alternate individual cards. */
.page-tools #datalab,
.page-partner #field,
.page-partner #questions,
.page-datalab #use,
.page-amenity #products,
.page-books #published,
.page-branding #brand-experience,
.page-about #company {
  --section-tone: var(--section-ivory);
}

.home-page #support,
.page-tools #partnership,
.page-datalab #decision,
.page-amenity #stay,
.page-books #education,
.page-branding #details,
.page-about #work,
.page-method #scope,
.page-contact .ct-inquiry {
  --section-tone: var(--section-cream);
}

.home-page #tools-preview,
.page-tools #operations,
.page-partner #packages,
.page-datalab #look,
.page-branding #starts {
  --section-tone: var(--section-sage);
}

.home-page #partnership,
.page-partner #management,
.page-datalab .dl-information,
.page-amenity #process,
.page-about #principles,
.page-method #steps {
  --section-tone: var(--section-gray);
}

/* A clipped, unblurred paint-only spread reaches the viewport edges without
   100vw widths/negative margins, scroll overflow, generated layers or a new
   positioning context. The vertical clip keeps adjacent bands separate. */
:is(
  .home-page #support,
  .home-page #tools-preview,
  .home-page #partnership,
  .page-tools #datalab,
  .page-tools #operations,
  .page-tools #partnership,
  .page-partner #field,
  .page-partner #packages,
  .page-partner #management,
  .page-partner #questions,
  .page-datalab #look,
  .page-datalab #use,
  .page-datalab #decision,
  .page-datalab .dl-information,
  .page-amenity #products,
  .page-amenity #stay,
  .page-amenity #process,
  .page-books #published,
  .page-books #education,
  .page-branding #brand-experience,
  .page-branding #starts,
  .page-branding #details,
  .page-about #work,
  .page-about #principles,
  .page-about #company,
  .page-method #steps,
  .page-method #scope,
  .page-contact .ct-inquiry
) {
  background-color: var(--section-tone);
  box-shadow: 0 0 0 100vmax var(--section-tone);
  clip-path: inset(0 -100vmax);
}

/* Support is the last child of the field-work section. Paint its existing
   parent bottom padding too, so there is no ivory strip before the tools band.
   These are exactly the existing .sm-working desktop/mobile padding values. */
.home-page #support {
  --section-tone-tail: 78px;
  clip-path: inset(0 -100vmax calc(-1 * var(--section-tone-tail)));
}
@media (max-width: 760px) {
  .home-page #support { --section-tone-tail: 48px; }
}

/* The small story disclosure needs stronger ink against the sage surface. */
.home-page #tools-preview,
.page-partner #packages {
  --section-tone: #D4E3D9;
}

.home-page #tools-preview.home-tools-story .ht-disclaimer {
  color: #586661;
}

/* Existing closing sections are already full width. A tools-page closing can
   opt in using section-tone-dark, without restyling the neighboring sections.
   Keep form fields and illustrative cards out of this dark surface. */
body.detail-page main > :is(.detail-end, .section-tone-dark, .ct-contact-note) {
  --ink: var(--section-light);
  --muted: var(--section-muted-light);
  --line: #81948A;
  color: var(--section-light);
  background-color: var(--section-green);
}

.page-tools .tl-contact.section-tone-dark.shell {
  box-shadow: 0 0 0 100vmax var(--section-green);
  clip-path: inset(0 -100vmax);
}

body.detail-page main > :is(.detail-end, .section-tone-dark, .ct-contact-note) :is(h2, h3, .label, a) {
  color: var(--section-light);
}

body.detail-page main > :is(.detail-end, .section-tone-dark, .ct-contact-note) :is(p:not(.label), small) {
  color: var(--section-muted-light);
}

body.detail-page main > :is(.detail-end, .section-tone-dark, .ct-contact-note) :is(.text-link, .button) {
  color: var(--section-light);
  background-color: transparent;
  border-color: currentColor;
}

body.detail-page main > :is(.detail-end, .section-tone-dark, .ct-contact-note) :is(.text-link, .button):hover {
  color: var(--section-light);
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
}

body.detail-page main > :is(.detail-end, .section-tone-dark, .ct-contact-note) :is(a, button):focus-visible {
  outline: 2px solid var(--section-light);
  outline-offset: 5px;
}