/*
 * REACT appearance proposals / 15 October 2026.
 * Load after the unchanged site.css and subpages.css.
 * Home only: no typography metrics, dimensions, spacing, image geometry,
 * content, layout, transitions or responsive behaviour are overridden.
 */

html[data-treatment="graphite"] body[data-page="home"] {
  --finish-hero: #0d1115;
  --finish-shade: 7, 11, 15;
  --finish-header: rgba(12, 17, 21, .79);
  --finish-range: #242b30;
  --finish-range-sheen: #2d353c;
  --finish-kits: #12171b;
  --finish-kits-ink: #f3f5f6;
  --finish-kits-muted: #bac5ce;
  --finish-kits-line: #47535d;
  --finish-kits-badge: #b62c36;
  --finish-kits-hover: #f2abb1;
  --finish-story: #192126;
  --finish-team: #242d33;
  --finish-team-ink: #f3f5f6;
  --finish-team-muted: #c0cad2;
  --finish-footer: #0d1216;
  --finish-light: #f3f5f6;
  --finish-muted: #c1cbd3;
  --finish-line: #54616c;
  --finish-tag: #b62c36;
  --finish-tag-ink: #ffffff;
  --finish-action: #b62c36;
  --finish-action-hover: #ce3843;
  --finish-link-hover: #f2abb1;
  --finish-focus: #f2abb1;
  background: var(--finish-kits);
  color: var(--finish-kits-ink);
}

html[data-treatment="ranger"] body[data-page="home"] {
  --finish-hero: #111812;
  --finish-shade: 10, 17, 10;
  --finish-header: rgba(17, 24, 18, .82);
  --finish-range: #252f23;
  --finish-range-sheen: #303b2c;
  --finish-kits: #d3d8d1;
  --finish-kits-ink: #1c251c;
  --finish-kits-muted: #4b5747;
  --finish-kits-line: #a0ad9c;
  --finish-kits-badge: #46563e;
  --finish-kits-hover: #96242c;
  --finish-story: #1c271b;
  --finish-team: #c6cec2;
  --finish-team-ink: #1c251c;
  --finish-team-muted: #465341;
  --finish-footer: #10170f;
  --finish-light: #f1f3ec;
  --finish-muted: #c6d0bd;
  --finish-line: #5d6c52;
  --finish-tag: #a8b699;
  --finish-tag-ink: #182116;
  --finish-action: #ad2932;
  --finish-action-hover: #c63540;
  --finish-link-hover: #eeb3b7;
  --finish-focus: #eeb3b7;
  background: var(--finish-kits);
  color: var(--finish-kits-ink);
}

/* Existing header, controls and branding; only their surfaces change. */
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .header {
  background: var(--finish-header);
  color: var(--finish-light);
  border-color: rgba(224, 233, 237, .22);
  mix-blend-mode: normal;
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"].menu-open .header {
  background: var(--finish-footer);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .header nav a:hover,
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .header nav a[aria-current] {
  color: #ffffff;
  border-color: var(--finish-action-hover);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .header-action {
  border-color: var(--finish-line);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .header-action:hover {
  background: var(--finish-light);
  border-color: var(--finish-light);
  color: var(--finish-hero);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .menu-toggle {
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .btn {
  background: var(--finish-action);
  border-color: var(--finish-action);
  color: #ffffff;
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .btn:hover {
  background: var(--finish-action-hover);
  border-color: var(--finish-action-hover);
  color: #ffffff;
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--finish-focus);
}

html[data-treatment="ranger"] body[data-page="home"] :is(.campaign-kits, .campaign-team) {
  --finish-focus: #96242c;
}

/* Preserve the hero's existing mask, crop, motion and overlay stops. */
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-hero {
  background: var(--finish-hero);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-hero::after {
  background: linear-gradient(90deg, rgba(var(--finish-shade), .79), rgba(var(--finish-shade), .33) 40%, transparent 68%),
    linear-gradient(0deg, rgba(var(--finish-shade), .44), transparent 25%, transparent 72%, rgba(var(--finish-shade), .44));
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-kicker::before {
  background: var(--finish-action);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] :is(.campaign-intro, .campaign-bottom > span) {
  color: var(--finish-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-bottom button {
  background: rgba(var(--finish-shade), .65);
  border-color: var(--finish-line);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-bottom button:not(:disabled):hover {
  background: var(--finish-range);
  border-color: var(--finish-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-bottom button:disabled {
  color: var(--finish-muted);
}

/* Range: the existing three photographs and labels retain their geometry. */
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-range {
  background: linear-gradient(140deg, var(--finish-range-sheen), var(--finish-range) 62%);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] :is(.campaign-marker, .campaign-heading > p) {
  color: var(--finish-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-marker > span {
  background: var(--finish-tag);
  color: var(--finish-tag-ink);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-category {
  background: var(--finish-hero);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-category::after {
  background: linear-gradient(0deg, rgba(var(--finish-shade), .96), transparent 51%);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-category small {
  color: var(--finish-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-range-end {
  border-color: var(--finish-line);
  color: var(--finish-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-range-end a {
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-range-end a:hover {
  color: var(--finish-link-hover);
}

/* Kits: charcoal for Graphite; a cooler stone grey for Ranger. */
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-kits {
  background: var(--finish-kits);
  color: var(--finish-kits-ink);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-kits :is(.campaign-marker, .fine-note, .campaign-model-copy p) {
  color: var(--finish-kits-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-kits .campaign-marker > span {
  background: var(--finish-kits-badge);
  color: #ffffff;
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-model figure {
  background: var(--finish-hero);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-model-index {
  background: rgba(var(--finish-shade), .88);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-model-copy {
  border-color: var(--finish-kits-line);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-kits .text-link:hover,
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-model:hover .campaign-text-link {
  color: var(--finish-kits-hover);
}

/* Story, team enquiry and footer keep their original content and controls. */
html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-story {
  background: var(--finish-story);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-story :is(.campaign-kicker, p:not(.campaign-kicker)) {
  color: var(--finish-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-outline {
  background: transparent;
  border-color: var(--finish-muted);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-outline:hover {
  background: var(--finish-range-sheen);
  border-color: var(--finish-light);
  color: #ffffff;
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-team {
  background: var(--finish-team);
  color: var(--finish-team-ink);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-team p {
  color: var(--finish-team-muted);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] footer {
  background: var(--finish-footer);
  color: var(--finish-light);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] :is(.footer-top p, .footer-top h3, .footer-bottom) {
  color: var(--finish-muted);
  border-color: var(--finish-line);
}

html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] footer a:hover {
  color: var(--finish-link-hover);
}

/* These match existing breakpoints and change surfaces only. */
@media (max-width: 950px) {
  html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .header nav {
    background: var(--finish-footer);
    border-color: var(--finish-line);
  }
}

@media (max-width: 600px) {
  html:is([data-treatment="graphite"], [data-treatment="ranger"]) body[data-page="home"] .campaign-hero::after {
    background: linear-gradient(180deg, rgba(var(--finish-shade), .47), transparent 50%, transparent 65%, rgba(var(--finish-shade), .87)),
      linear-gradient(90deg, rgba(var(--finish-shade), .27), transparent 80%);
  }
}