/* Groenhart — Home (compositie). Gedeelde componenten staan in style.css. */

/* 1. Hero */
.home-hero { min-height: min(calc(100svh - 36px), 940px); }
.home-hero__text { max-width: 50rem; }
.home-hero .hero__lead { max-width: 28ch; }
@media (min-width: 900px) { .home-hero .hero__media img { object-position: 0% 50%; } }
.home-hero .hero__title { max-width: 11ch; }
@media (min-width: 900px) { .home-hero .hero__title { max-width: 14ch; } }
@media (max-width: 599px) {
  .home-hero .legend { display: none; }
  .home-hero .hero__inner { justify-content: flex-end; padding-bottom: 2rem; }
  .home-hero .hero__actions .btn { width: 100%; }
  /* Donker verloop begint hoger, zodat het label boven de kop niet op het lichte gras staat */
  .home-hero::before {
    background: linear-gradient(180deg, rgba(16, 26, 20, .55) 0%, rgba(16, 26, 20, .08) 18%, rgba(16, 26, 20, .55) 31%, rgba(16, 26, 20, .82) 42%, rgba(16, 26, 20, .9) 60%, rgba(16, 26, 20, .95) 100%);
  }
  .home-hero .label { color: var(--tekst-licht); }
  .home-hero .hero__title { max-width: none; text-wrap: wrap; }
}
/* Tablet en desktop: de middenband nooit helemaal open (lead over het lichte gras) en een donkerder onderkant onder de legenda (AA) */
@media (min-width: 600px) {
  .home-hero::before {
    background:
      linear-gradient(180deg, rgba(16, 26, 20, .62) 0%, rgba(16, 26, 20, .3) 30%, rgba(16, 26, 20, .36) 50%, rgba(16, 26, 20, .74) 68%, rgba(16, 26, 20, .88) 100%),
      linear-gradient(90deg, rgba(16, 26, 20, .7) 0%, rgba(16, 26, 20, .45) 45%, rgba(16, 26, 20, 0) 75%);
  }
}

/* 2. Intro */
.intro__grid { display: grid; gap: var(--space-l) var(--gap); }
.intro__label { order: 1; }
.intro__title {
  order: 2;
  font-size: clamp(1.85rem, 1.2rem + 2.5vw, 3.5rem); font-weight: 300; line-height: 1.12; letter-spacing: -.02em;
  max-width: 24ch;
}
.intro__photo { order: 3; }
.intro__photo .media { aspect-ratio: 3 / 2; }
.intro__text { order: 4; display: grid; gap: 1rem; justify-items: start; max-width: 46ch; }
.intro__facts { order: 5; }
@media (min-width: 960px) {
  .intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .intro__label { grid-column: 1 / span 3; grid-row: 1; padding-top: 1.1rem; align-self: start; }
  .intro__title { grid-column: 4 / -1; grid-row: 1; }
  .intro__text { grid-column: 4 / span 4; grid-row: 2; align-self: start; }
  .intro__facts { grid-column: 4 / span 5; grid-row: 3; align-self: start; }
  .intro__facts > div { grid-template-columns: min(11rem, 45%) 1fr; }
  .intro__photo { grid-column: 9 / -1; grid-row: 2 / span 2; align-self: start; }
  .intro__photo .media { aspect-ratio: 4 / 5; }
}

/* 3. Diensten: tuintekening met legenda. De kop staat in het titelblok van de tekening,
   niet in de kantlijn; elke dienst wijst zijn deel van de tekening aan. */
.svcsheet {
  display: grid; background: var(--linnen-licht);
  border: 1px solid var(--steen-lijn);
}
.svcsheet__plan { margin: 0; display: grid; border-bottom: 1px solid var(--steen-lijn); }
.svcsheet__plan svg { display: block; width: 100%; height: auto; }
.svcsheet__plan .sheet__title { border-top: 1px solid var(--steen-lijn); }
.svcsheet__block { display: grid; align-content: start; }
.svcsheet__title { display: grid; gap: .9rem; align-content: start; padding: 1.5rem 1.25rem 1.6rem; border-bottom: 1px solid var(--steen-lijn); }
.svcsheet__title h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.1rem); font-weight: 320; line-height: 1.04; letter-spacing: -.022em; max-width: 13ch; }
.svcsheet__intro { font-size: var(--fs-small); color: var(--kiezel); max-width: 36ch; }
.svc-legend li { border-bottom: 1px solid var(--steen-lijn); }
.svc-legend a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .1rem .9rem; align-items: start;
  padding: .9rem 1.25rem; min-height: 44px; text-decoration: none; color: inherit;
  transition: background-color var(--t-fast);
}
.svc-legend__n {
  grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--bos); color: var(--linnen-licht); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: transform var(--t) var(--ease), background-color var(--t-fast);
}
.svc-legend__name { font-family: var(--serif); font-size: 1.3rem; font-weight: 380; line-height: 1.2; padding-top: .2rem; }
.svc-legend__text { font-size: var(--fs-small); color: var(--kiezel); max-width: 38ch; }
.svc-legend a:hover, .svc-legend a:focus-visible { background: var(--linnen); }
.svc-legend a:hover .svc-legend__name, .svc-legend a:focus-visible .svc-legend__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.svc-legend a:hover .svc-legend__n, .svc-legend a:focus-visible .svc-legend__n { transform: scale(1.12); }
.svcsheet__all { margin: 1.25rem 1.25rem 1.5rem; justify-self: start; }

/* Merktekens op de tekening */
.svc-mark circle { fill: var(--bos); stroke: var(--linnen-licht); stroke-width: 2; transition: r .3s var(--ease), fill .2s; }
.svc-mark text { fill: var(--linnen-licht); font-size: 12px; font-weight: 600; font-stretch: 100%; pointer-events: none; }
.svcsheet [data-svc] { transition: opacity .4s var(--ease); }

/* Aanwijzen: de andere delen van de tekening worden lichter (werkt met muis en toetsenbord, zonder JS) */
.svcsheet:has([data-svc-key="aanleg"]:is(:hover, :focus-within)) [data-svc]:not([data-svc="aanleg"], [data-svc="base"]),
.svcsheet:has([data-svc-key="renovatie"]:is(:hover, :focus-within)) [data-svc]:not([data-svc="renovatie"], [data-svc="base"]),
.svcsheet:has([data-svc-key="beplanting"]:is(:hover, :focus-within)) [data-svc]:not([data-svc="beplanting"], [data-svc="base"]),
.svcsheet:has([data-svc-key="houtwerk"]:is(:hover, :focus-within)) [data-svc]:not([data-svc="houtwerk"], [data-svc="base"]),
.svcsheet:has([data-svc-key="onderhoud"]:is(:hover, :focus-within)) [data-svc]:not([data-svc="onderhoud"], [data-svc="base"]) { opacity: .22; }
.svcsheet:has([data-svc-key="ontwerp"]:is(:hover, :focus-within)) .svc-bound { stroke-width: 1.6; stroke-dasharray: none; }
.svcsheet:has([data-svc-key="ontwerp"]:is(:hover, :focus-within)) .svc-mark[data-mark="ontwerp"] circle,
.svcsheet:has([data-svc-key="aanleg"]:is(:hover, :focus-within)) .svc-mark[data-mark="aanleg"] circle,
.svcsheet:has([data-svc-key="renovatie"]:is(:hover, :focus-within)) .svc-mark[data-mark="renovatie"] circle,
.svcsheet:has([data-svc-key="beplanting"]:is(:hover, :focus-within)) .svc-mark[data-mark="beplanting"] circle,
.svcsheet:has([data-svc-key="houtwerk"]:is(:hover, :focus-within)) .svc-mark[data-mark="houtwerk"] circle,
.svcsheet:has([data-svc-key="onderhoud"]:is(:hover, :focus-within)) .svc-mark[data-mark="onderhoud"] circle { fill: var(--mos); r: 17; }
.svcsheet:has(.svc-legend li:is(:hover, :focus-within)) .svc-mark circle { fill: var(--steen); }
.svcsheet:has(.svc-legend li:is(:hover, :focus-within)) .svc-mark text { fill: var(--bos); }
.svcsheet:has([data-svc-key="ontwerp"]:is(:hover, :focus-within)) .svc-mark[data-mark="ontwerp"] text,
.svcsheet:has([data-svc-key="aanleg"]:is(:hover, :focus-within)) .svc-mark[data-mark="aanleg"] text,
.svcsheet:has([data-svc-key="renovatie"]:is(:hover, :focus-within)) .svc-mark[data-mark="renovatie"] text,
.svcsheet:has([data-svc-key="beplanting"]:is(:hover, :focus-within)) .svc-mark[data-mark="beplanting"] text,
.svcsheet:has([data-svc-key="houtwerk"]:is(:hover, :focus-within)) .svc-mark[data-mark="houtwerk"] text,
.svcsheet:has([data-svc-key="onderhoud"]:is(:hover, :focus-within)) .svc-mark[data-mark="onderhoud"] text { fill: var(--linnen-licht); }
@media (prefers-reduced-motion: reduce) { .svcsheet [data-svc], .svc-mark circle { transition: none; } }

@media (max-width: 599px) {
  .svcsheet { margin-inline: calc(-1 * var(--pad)); border-inline: 0; }
  /* Op de telefoon wordt de tekening klein: nummers en namen groter, zodat ze leesbaar blijven */
  .svc-mark circle { r: 19px; }
  .svc-mark text { font-size: 19px; transform: translateY(2.5px); transform-box: fill-box; }
  .svcsheet .plan-label { font-size: 16px; }
  .svcsheet .plan-code { font-size: 17px; letter-spacing: 0; }   /* plantcodes en de noordpijl */
  .svcsheet .plan-note { font-size: 17px; letter-spacing: .02em; }
  .svcsheet text.plan-size { font-size: 17px; }
  .svcsheet circle.plan-fill { r: 14px; }
  .svcsheet circle.plan-fill + .plan-code { transform: translateY(2.5px); }
  .svcsheet:has(.svc-legend li:is(:hover, :focus-within)) .svc-mark circle { r: 19px; }
}
@media (min-width: 600px) { .svcsheet .plan-code { font-size: 10.5px; letter-spacing: 0; } }
/* Tussen de breekpunten (600–699 en 960–1039px) staat de tekening het kleinst: codes en notities iets groter (≥ 9px) */
@media (min-width: 600px) and (max-width: 699px) { .svcsheet .plan-code, .svcsheet .plan-note { font-size: 11px; } }
@media (min-width: 960px) and (max-width: 1039px) { .svcsheet .plan-note { font-size: 11px; } }
@media (min-width: 700px) and (max-width: 959px) {
  .svc-legend { display: grid; grid-template-columns: 1fr 1fr; }
  .svc-legend li:nth-child(odd) { border-right: 1px solid var(--steen-lijn); }
}
@media (min-width: 960px) {
  .svcsheet { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .svcsheet__plan { grid-column: 1; grid-row: 1 / span 2; border-bottom: 0; border-right: 1px solid var(--steen-lijn); grid-template-rows: 1fr auto; }
  .svcsheet__title { grid-column: 2; grid-row: 1; }
  .svcsheet__block { grid-column: 2; grid-row: 2; }
  .svcsheet__plan svg { align-self: start; position: sticky; top: calc(var(--header-h) + 1rem); padding: 1.5rem 0; }
  .svcsheet__title { padding: 2rem 1.75rem 1.9rem; }
  .svc-legend a { padding: .85rem 1.75rem; }
  .svcsheet__all { margin: 1.4rem 1.75rem 1.75rem; }
}
/* Tablet liggend en kleine laptop: de kop als titelstrook over de volle breedte, daaronder tekening en legenda
   naast elkaar. Zo volgt de hoogte van het blad de tekening en blijft er geen leeg vlak onder het plan. */
@media (min-width: 960px) and (max-width: 1299px) {
  .svcsheet { grid-template-rows: auto auto; }
  .svcsheet__title { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); align-items: end; column-gap: 1.75rem; }
  .svcsheet__plan { grid-row: 2; grid-template-rows: 1fr auto; }
  .svcsheet__plan svg { position: static; align-self: center; }
  .svcsheet__title > .label { grid-column: 1; grid-row: 1; }
  .svcsheet__title h2 { grid-column: 1; grid-row: 2; max-width: none; }
  .svcsheet__intro { grid-column: 2; grid-row: 2; padding-bottom: .35rem; }
  .svcsheet__block { grid-row: 2; align-content: center; }
}
.services__foot { margin-top: var(--space-l); }

/* 4. Projecten (donker) */
.feature { display: grid; gap: 0; }
.feature__media { display: block; }
.feature__card { background: var(--bos); padding: 1.6rem 1.4rem 1.8rem; display: grid; gap: 1rem; justify-items: start; }
.feature__title { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem); font-weight: 320; line-height: 1.08; }
.feature__title a { text-decoration: none; }
.feature__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.feature__text { color: var(--mist); max-width: 46ch; }
.feature__plants { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: 1.05rem; color: var(--tekst-licht); }
.feature__plants li { display: inline-flex; align-items: center; gap: .6rem; }
.feature__plants li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--mos-licht); background: radial-gradient(circle, var(--mos-licht) 0 1.2px, transparent 1.6px); }
@media (min-width: 960px) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .feature__media { grid-column: 1 / span 8; grid-row: 1; }
  .feature__card { grid-column: 8 / -1; grid-row: 1; margin-bottom: -3.5rem; padding: 2.75rem 2.75rem 3rem; position: relative; z-index: 1; }
}

.work__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 380px); gap: 1.25rem;
  margin: var(--space-xl) calc(-1 * var(--pad)) 0; padding: 0 var(--pad) .75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: thin; scrollbar-color: var(--lijn-donker) transparent;
}
.work__item { scroll-snap-align: start; }
.work__foot { margin-top: var(--space-l); }
@media (min-width: 960px) {
  .work__row {
    grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap);
    margin: calc(var(--space-2xl) + 3.5rem) 0 0; padding: 0; overflow: visible; align-items: start;
  }
  .work__item--a { grid-column: 1 / span 4; }
  .work__item--b { grid-column: 5 / span 4; margin-top: 7rem; }
  .work__item--c { grid-column: 9 / span 4; margin-top: 2.5rem; }
  .work__foot { margin-top: var(--space-xl); }
}

/* 5. Tuinontwerp: foto van de tekentafel tot de linkerrand, de kop schuift over de fotorand */
.design__grid { display: grid; gap: var(--space-l) var(--gap); }
.design__photo { margin: 0 calc(-1 * var(--pad)); }
.design__photo .media { aspect-ratio: 3 / 2; }
.design__photo .caption { padding-inline: var(--pad); }
.design__text { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.design__title { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.75rem); font-weight: 300; line-height: 1.04; letter-spacing: -.024em; max-width: 14ch; }
.design__lead { max-width: 46ch; }
.design__steps { width: 100%; margin-top: .5rem; }
.design__steps > li { padding: 1rem 0; }
.design__steps .steps__title { font-size: 1.25rem; }
@media (min-width: 960px) {
  .design__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .design__photo {
    grid-column: 1 / span 8; grid-row: 1; position: sticky; top: calc(var(--header-h) + 2rem);
    margin: 0 0 0 calc(-1 * max(var(--pad), (100vw - var(--maxw)) / 2));
  }
  .design__photo .media { aspect-ratio: 4 / 3; }
  .design__photo .caption { padding-inline: 0; margin-left: auto; max-width: 28rem; }
  .design__text { grid-column: 9 / -1; grid-row: 1; padding-top: 3rem; }
  .design__title {
    position: relative; z-index: 1; max-width: none;
    margin-left: calc(-1 * (var(--gap) + 100% / 4 * 1.25));
    background: var(--linnen); padding: 1.3rem 0 1.4rem 1.7rem;
  }
}

/* 6. Het tuinjaar */
.year__grid { display: grid; gap: var(--space-l) var(--gap); }
.year__photo .media { aspect-ratio: 3 / 2; }
.year__photo img { object-position: 78% 50%; }
.year__foot { display: grid; gap: .75rem; justify-items: start; margin-top: var(--space-m); }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-small); }
.cal th, .cal td { padding: 0; }
.cal thead th {
  height: 2.25rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--kiezel); text-align: center;
  border-bottom: 1px solid var(--lijn-sterk);
}
.cal thead .cal__task-head { text-align: left; width: 42%; letter-spacing: .16em; text-transform: uppercase; font-stretch: 85%; }
.cal tbody th { text-align: left; font-weight: 600; padding: .8rem .75rem .8rem 0; line-height: 1.3; vertical-align: middle; }
.cal__when { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--kiezel); margin-top: .15rem; }
.cal tbody tr { border-bottom: 1px solid var(--steen-lijn); }
.cal tbody td { position: relative; border-left: 1px dotted var(--steen-lijn); }
/* Een gevulde boomstip per maand: het plansymbool, geen balk */
.cal td.on::before, .cal__dot {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%);
  border: 1px solid var(--mos); border-radius: 50%;
  background: radial-gradient(circle, var(--mos) 0 3px, transparent 3.5px);
}
.cal__dot { position: relative; display: inline-block; left: auto; top: auto; transform: translateY(2px); margin-right: .2rem; }
@media (min-width: 640px) { .cal thead .cal__task-head { width: 36%; } }
@media (min-width: 960px) {
  .year__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .year__photo { grid-column: 1 / span 4; }
  .year__photo .media { aspect-ratio: 4 / 5; }
  .year__table-wrap { grid-column: 6 / -1; }
  .cal { font-size: 1rem; }
  .cal tbody th { padding-block: 1rem; }
  .cal td.on::before { width: 15px; height: 15px; background: radial-gradient(circle, var(--mos) 0 3.5px, transparent 4px); }
  .year__foot { grid-template-columns: 1fr auto; align-items: center; }
}

/* 5. Het eerste jaar: beeld met paneel. Onder 960px: foto, dan paneel, dan citaat (nooit naast elkaar geknepen). */
.promise { position: relative; padding-bottom: var(--section); }
.promise__media { aspect-ratio: 4 / 3; }
.promise__media img { object-position: 50% 62%; }
.promise__wrap { position: relative; margin-top: -3rem; display: grid; }
.promise__panel { background: var(--linnen); padding: 1.6rem 1.4rem 1.75rem; display: grid; gap: 1.1rem; justify-items: start; border-top: 1px solid var(--steen-lijn); }
.months-list { width: 100%; margin: .2rem 0 .1rem; border-top: 1px solid var(--steen-lijn); }
.months-list li { display: grid; gap: .15rem; padding: .8rem 0; border-bottom: 1px solid var(--steen-lijn); }
.months-list__m { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
.months-list__t { font-size: var(--fs-small); line-height: 1.5; }
@media (min-width: 480px) { .months-list li { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; } }
.promise__note { margin-top: var(--space-xl); max-width: 34ch; }
@media (min-width: 700px) and (max-width: 959px) {
  .promise__media { aspect-ratio: 16 / 9; }
  .promise__wrap { margin-top: -8rem; }
  .promise__panel { width: min(100%, 36rem); margin-left: auto; padding: 2.25rem 2.5rem 2.5rem; border-top: 0; }
  .promise__note { margin-left: auto; width: min(100%, 36rem); }
}
@media (min-width: 960px) {
  .promise__media { aspect-ratio: 16 / 9; max-height: 820px; width: 100%; }
  .promise__wrap { margin-top: -14rem; grid-template-columns: minmax(0, 1fr) min(100%, 36rem); align-items: start; column-gap: var(--gap); }
  .promise__panel { grid-column: 2; grid-row: 1; width: 100%; padding: 2.75rem 3rem 3rem; border-top: 0; }
  .promise__note { grid-column: 1; grid-row: 1; margin-top: calc(14rem + var(--space-xl)); }
}
@media (min-width: 1200px) { .promise__media { aspect-ratio: 21 / 9; } }

/* 8. Welke grond heb jij? Drie kleine bodemprofielen, met de plaatsen eronder */
.soilstrip { padding-top: var(--section); }
.soilstrip__grid { display: grid; gap: var(--space-xl) var(--gap); }
.soilstrip__text { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.soilstrip__text p { max-width: 42ch; }
.soilstrip__list { display: grid; border-top: 1px solid var(--inkt); }
.soilcol { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.4rem 0; border-bottom: 1px solid var(--steen-lijn); }
.soilcol__core { position: relative; display: flex; flex-direction: column; height: 10.5rem; border: 1px solid var(--bos); }
.soilcol__core > span { flex: 0 0 calc(var(--h) / 80 * 100%); border-top: 1px solid rgba(31, 58, 43, .5); }
.soilcol__core > span:first-child { border-top: 0; }
.soilcol__water { position: absolute; left: -6px; right: -6px; top: calc(var(--at) / 80 * 100%); border-top: 1.5px dashed var(--water); }
.soilcol__water::after { content: ""; position: absolute; right: 6px; top: -9px; border-inline: 4px solid transparent; border-top: 7px solid var(--water); }
.soilcol__text { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.soilcol__name { font-size: clamp(1.6rem, 1.35rem + .9vw, 2.2rem); font-weight: 320; line-height: 1.05; }
.soilcol__desc { color: var(--kiezel); font-size: var(--fs-small); }
.soilcol__towns { margin-top: .35rem; font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; color: var(--mos); }
.soilcol__plant { margin-top: .2rem; font-size: var(--fs-small); color: var(--kiezel); }
.soilcol__plant .latin { color: var(--inkt); font-size: 1.05rem; }
@media (min-width: 760px) {
  .soilstrip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 0; }
  .soilcol { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0; border-bottom: 0; }
  .soilcol__core { height: 15rem; }
  .soilcol__text { padding-top: .4rem; border-top: 1px solid var(--inkt); }
}
@media (min-width: 960px) {
  .soilstrip__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .soilstrip__text { grid-column: 1 / span 4; }
  .soilstrip__list { grid-column: 6 / -1; }
}
@media (forced-colors: active) { .soilcol__core, .soilcol__core > span { forced-color-adjust: none; } }