/* Tour Ceylon +94 — Shared Styles
   Global resets WordPress does not ship, plus the partials every section
   reuses (container, eyebrow, buttons, icons, utilities).
   Every value references a theme.json token. */

/* --------------------------------------------------------------------------
   1. Box-sizing — scoped to the tc94 prefix, never a global * reset
   -------------------------------------------------------------------------- */
[class*="tc94-"],
[class*="tc94-"]::before,
[class*="tc94-"]::after,
[class*="tc94-"] *,
[class*="tc94-"] *::before,
[class*="tc94-"] *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Document
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--60));
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: `overflow-x: hidden` on body makes body a scroll container
     and silently kills `position: sticky` on the header. `clip` crops without
     creating one. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   3. Element primitives the ported components assume
   -------------------------------------------------------------------------- */
[class*="tc94-"] h1,
[class*="tc94-"] h2,
[class*="tc94-"] h3,
[class*="tc94-"] h4,
[class*="tc94-"] h5,
[class*="tc94-"] h6,
[class*="tc94-"] p,
[class*="tc94-"] figure,
[class*="tc94-"] blockquote,
[class*="tc94-"] dl,
[class*="tc94-"] dd,
[class*="tc94-"] ol,
[class*="tc94-"] ul {
  margin: 0;
}

[class*="tc94-"] ul[class],
[class*="tc94-"] ol[class] {
  padding: 0;
  list-style: none;
}

[class*="tc94-"] img,
[class*="tc94-"] svg,
[class*="tc94-"] video {
  display: block;
  max-width: 100%;
}

[class*="tc94-"] img { height: auto; }

/* <picture> only wraps the <source> negotiation; it carries no design of its
   own. Left as a box it has auto height, so height:100% on the <img> inside
   resolves against nothing and the photograph renders at its natural ratio —
   leaving a gap inside every frame that sets its own aspect ratio. Taking the
   box away makes the <img> a direct child of the frame again, so the
   cover-crop rules used throughout the site work as written. */
[class*="tc94-"] picture { display: contents; }

/* The static design resets these with bare element selectors, so every
   component rule outranks them. Scoping the reset to the prefix raised it to
   (0,1,1), which then silently beat every single-class component rule: the
   carousel dots and arrows lost their backgrounds and border, and the
   experiences tabs lost both their background and their accent left-border.
   :where() contributes no specificity, so the prefix still restricts what the
   reset matches while the reset itself sits at (0,0,1), exactly where the
   static design has it - above the UA defaults it exists to clear, below the
   components it exists to make way for. */
:where([class*="tc94-"]) button,
:where([class*="tc94-"]) input,
:where([class*="tc94-"]) select,
:where([class*="tc94-"]) textarea {
  font: inherit;
  color: inherit;
}

:where([class*="tc94-"]) button {
  background: none;
  border: 0;
}

[class*="tc94-"] address { font-style: normal; }

[class*="tc94-"] p { text-wrap: pretty; }
[class*="tc94-"] strong,
[class*="tc94-"] b { font-weight: var(--wp--custom--weight--semibold); }
[class*="tc94-"] em { font-style: italic; }

/* theme.json carries the link colour, the hover colour and the underline
   itself through styles.elements.link. These two refinements it has no key
   for, and without them every underlined link on the site sits a shade
   heavier and tighter to the baseline than the design draws it. Colour is
   deliberately not repeated here, so Global Styles keeps control of it. */
[class*="tc94-"] a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

[class*="tc94-"] h1,
[class*="tc94-"] h2,
[class*="tc94-"] h3,
[class*="tc94-"] h4,
[class*="tc94-"] h5,
[class*="tc94-"] h6 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   4. Focus — keyboard only, on brand tokens
   -------------------------------------------------------------------------- */
:focus:not(:focus-visible) { outline: none; }

:focus-visible {
  outline: 2px solid var(--wp--custom--color--focus-ring);
  outline-offset: 3px;
  border-radius: var(--wp--custom--radius--xs);
}

.tc94-header :focus-visible,
.tc94-hero :focus-visible,
.tc94-cta :focus-visible,
.tc94-footer :focus-visible,
.tc94-section--dark :focus-visible {
  outline-color: var(--wp--custom--color--focus-ring-on-dark);
}

.tc94-skip-link {
  position: absolute;
  top: var(--wp--preset--spacing--20);
  left: var(--wp--preset--spacing--20);
  z-index: var(--wp--custom--zindex--skip);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ocean-deep);
  font-weight: var(--wp--custom--weight--semibold);
  font-size: var(--wp--preset--font-size--sm);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--lg);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--wp--preset--spacing--60)));
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease--out);
}

.tc94-skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.tc94-container {
  width: 100%;
  max-width: calc(var(--wp--custom--layout--container-max) + var(--wp--custom--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

.tc94-container--wide {
  max-width: calc(var(--wp--custom--layout--container-wide) + var(--wp--custom--gutter) * 2);
}

.tc94-container--prose {
  max-width: calc(var(--wp--custom--layout--container-prose) + var(--wp--custom--gutter) * 2);
}

/* Sections carry their own vertical rhythm, so the core blockGap margin must
   not add a stripe of page background between them. Two-class specificity
   beats the core rule, which prints after snippet CSS. */
.wp-site-blocks > [class*="tc94-"],
.entry-content > [class*="tc94-"],
.wp-block-post-content > [class*="tc94-"] {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   6. Eyebrow
   -------------------------------------------------------------------------- */
.tc94-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--caps);
  text-transform: uppercase;
  color: var(--wp--preset--color--ocean-deep);
  margin: 0;
}

.tc94-eyebrow::before {
  content: "";
  width: var(--wp--preset--spacing--60);
  height: 2px;
  background-color: var(--wp--custom--color--rule-accent);
  border-radius: var(--wp--custom--radius--pill);
  flex: none;
}

.tc94-eyebrow--on-dark { color: var(--wp--preset--color--highlight); }

.tc94-eyebrow--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.tc94-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--control--height);
  padding: 0 var(--wp--custom--control--padding-x);
  border-radius: var(--wp--custom--radius--sm);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--normal);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              border-color var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              color var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              transform var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
              box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease--out);
}

.tc94-btn:active { transform: translateY(1px); }

.tc94-btn--sm {
  min-height: var(--wp--custom--control--height-sm);
  padding: 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xs);
}

.tc94-btn--lg {
  min-height: var(--wp--custom--control--height-lg);
  padding: 0 var(--wp--preset--spacing--70);
  font-size: var(--wp--preset--font-size--base);
}

.tc94-btn--block { width: 100%; }

/* The longest label on the site wants 341px on one unbreakable line, wider
   than a 320px screen was ever going to give it. Below 30rem a label may wrap
   instead, which needs the vertical padding the single-line version did
   without. */
@media (max-width: 29.999rem) {
  .tc94-btn {
    white-space: normal;
    padding-block: var(--wp--preset--spacing--30);
    line-height: var(--wp--custom--leading--snug);
  }
}

/* Primary call to action — the single accent */
.tc94-btn--accent {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--custom--color--on-accent);
  box-shadow: var(--wp--custom--shadow--sm);
}

.tc94-btn--accent:hover {
  background-color: var(--wp--preset--color--accent-deep);
  color: var(--wp--custom--color--on-accent);
  box-shadow: var(--wp--custom--shadow--md);
}

/* Secondary — ocean blue solid */
.tc94-btn--primary {
  background-color: var(--wp--preset--color--ocean-deep);
  color: var(--wp--custom--color--on-dark);
}

.tc94-btn--primary:hover {
  background-color: var(--wp--preset--color--ocean-dark);
  color: var(--wp--custom--color--on-dark);
}

/* Outline on dark backgrounds */
.tc94-btn--outline-light {
  border-color: var(--wp--custom--alpha--white-20);
  color: var(--wp--custom--color--on-dark);
  background-color: var(--wp--custom--alpha--white-08);
}

.tc94-btn--outline-light:hover {
  border-color: var(--wp--custom--alpha--white-70);
  background-color: var(--wp--custom--alpha--white-12);
  color: var(--wp--custom--color--on-dark);
}

/* Outline on light backgrounds */
.tc94-btn--outline {
  border-color: var(--wp--preset--color--line-strong);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
}

.tc94-btn--outline:hover {
  border-color: var(--wp--preset--color--ocean-deep);
  color: var(--wp--preset--color--ocean-deep);
}

/* Quiet text button on dark */
.tc94-btn--quiet-light {
  color: var(--wp--custom--color--on-dark);
  padding: 0 var(--wp--preset--spacing--30);
}

.tc94-btn--quiet-light:hover { color: var(--wp--preset--color--highlight); }

.tc94-btn .tc94-icon {
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
}

.tc94-btn--sm .tc94-icon {
  width: var(--wp--custom--icon--size-sm);
  height: var(--wp--custom--icon--size-sm);
}

/* --------------------------------------------------------------------------
   8. Icons and utilities
   -------------------------------------------------------------------------- */
.tc94-sprite { display: none; }

.tc94-icon {
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
  flex: none;
  fill: none;
}

.tc94-icon--sm { width: var(--wp--custom--icon--size-sm); height: var(--wp--custom--icon--size-sm); }
.tc94-icon--lg { width: var(--wp--custom--icon--size-lg); height: var(--wp--custom--icon--size-lg); }
.tc94-icon--xl { width: var(--wp--custom--icon--size-xl); height: var(--wp--custom--icon--size-xl); }

.tc94-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tc94-lede {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--muted);
  max-width: var(--wp--custom--measure--lede);
}

.tc94-text-highlight { color: var(--wp--custom--color--highlight-ink); }

.tc94-hero .tc94-text-highlight,
.tc94-page-hero .tc94-text-highlight,
.tc94-cta .tc94-text-highlight,
.tc94-section--dark .tc94-text-highlight {
  color: var(--wp--preset--color--highlight);
}

.tc94-hero .tc94-lede,
.tc94-cta .tc94-lede,
.tc94-section--dark .tc94-lede {
  color: var(--wp--custom--color--on-dark-muted);
}

.tc94-flow > * + * { margin-top: var(--wp--preset--spacing--50); }

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [class*="tc94-"],
  [class*="tc94-"]::before,
  [class*="tc94-"]::after,
  [class*="tc94-"] *,
  [class*="tc94-"] *::before,
  [class*="tc94-"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */
@media print {
  .tc94-header,
  .tc94-footer,
  .tc94-nav-toggle { display: none !important; }

  body { color: #000; background: #fff; }
}

/* --------------------------------------------------------------------------
   11. Transition shorthand
   The static design kept this in its token file. theme.json has the two
   halves but no shorthand for the pair, so it is declared once here.
   -------------------------------------------------------------------------- */
:root {
  --tc94-transition-base: var(--wp--custom--duration--normal) var(--wp--custom--ease--out);
}

/* --------------------------------------------------------------------------
   12. Editor placeholder
   What a section block shows in the editor before anything is filled in.
   Never reaches the front end.
   -------------------------------------------------------------------------- */
.tc94-block-placeholder {
  padding: var(--wp--preset--spacing--60);
  border: 1px dashed var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--surface-subtle);
  text-align: center;
}

.tc94-block-placeholder strong {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--contrast);
}

.tc94-block-placeholder p {
  margin: 0.5rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   13. Section shells — shared by every home section
   -------------------------------------------------------------------------- */
.tc94-section {
  padding-block: var(--wp--custom--section-y);
  position: relative;
}

.tc94-section--tight { padding-block: var(--wp--custom--section-y-tight); }

.tc94-section--subtle { background-color: var(--wp--preset--color--surface-subtle); }

.tc94-section--dark {
  background-color: var(--wp--preset--color--surface-dark);
  color: var(--wp--custom--color--on-dark-muted);
}

.tc94-section--dark h1,
.tc94-section--dark h2,
.tc94-section--dark h3,
.tc94-section--dark h4 { color: var(--wp--custom--color--heading-on-dark); }

.tc94-section--dark a { color: var(--wp--preset--color--highlight); }

.tc94-section-head { margin-bottom: var(--wp--preset--spacing--90); }

.tc94-section-head__title { margin-top: var(--wp--preset--spacing--30); }

.tc94-section-head__lede {
  margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
  max-width: var(--wp--custom--measure--lede);
}

.tc94-section--dark .tc94-section-head__lede { color: var(--wp--custom--color--on-dark-muted); }

.tc94-section-head--split {
  display: grid;
  gap: var(--wp--preset--spacing--60);
  align-items: end;
}

@media (min-width: 62rem) {
  .tc94-section-head--split {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: var(--wp--preset--spacing--100);
    }

  .tc94-section-head--split .tc94-section-head__aside { padding-bottom: var(--wp--preset--spacing--20); }
}

.tc94-section-head__aside {
  color: var(--wp--custom--color--text-muted);
  font-size: var(--wp--preset--font-size--base);
  max-width: var(--wp--custom--measure--lede);
}

/* --------------------------------------------------------------------------
   14. Small pieces used across sections
   Badges, chips, arrow links, star rows, tick lists, stat figures, notes,
   cards. Each is used by two or more section blocks, which is why they live
   here rather than travelling with one section.
   -------------------------------------------------------------------------- */
.tc94-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-decoration: none;
  color: var(--wp--preset--color--ocean-deep);
}

.tc94-link-arrow .tc94-icon {
  width: var(--wp--custom--icon--size-sm);
  height: var(--wp--custom--icon--size-sm);
  transition: transform var(--tc94-transition-base);
}

.tc94-link-arrow:hover .tc94-icon { transform: translateX(3px); }

.tc94-section--dark .tc94-link-arrow,
.tc94-link-arrow--on-dark { color: var(--wp--preset--color--highlight); }

.tc94-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

.tc94-chips li {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--custom--color--text-muted);
  background-color: var(--wp--preset--color--surface-subtle);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--pill);
  padding: 5px var(--wp--preset--spacing--30);
  white-space: nowrap;
}

/* A chip that is a link should be tappable across the whole pill, not only
   across its label. The pill's padding stays on the li, so plain-text chips
   are untouched; the link grows back out over that padding, which is
   invisible at rest and turns a 16px-tall target into the full 32px pill.
   border-radius: inherit also makes the keyboard focus ring follow the pill. */
.tc94-chips li > a {
  display: block;
  margin: -5px calc(var(--wp--preset--spacing--30) * -1);
  padding: 5px var(--wp--preset--spacing--30);
  border-radius: inherit;
}

.tc94-section--dark .tc94-chips li {
  color: var(--wp--custom--color--on-dark-muted);
  background-color: var(--wp--custom--alpha--white-08);
  border-color: var(--wp--custom--color--border-on-dark);
}

.tc94-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--custom--color--on-accent);
  background-color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--sm);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  box-shadow: var(--wp--custom--shadow--sm);
}

.tc94-badge--dark {
  color: var(--wp--custom--color--on-dark);
  background-color: var(--wp--custom--alpha--dark-80);
  backdrop-filter: blur(4px);
}

.tc94-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--wp--preset--color--accent-deep);
}

.tc94-stars .tc94-icon {
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
  fill: currentColor;
}

.tc94-stars--on-dark { color: var(--wp--preset--color--highlight); }

.tc94-tick-list {
  display: grid;
  gap: var(--wp--preset--spacing--30);
}

.tc94-tick-list li {
  display: grid;
  grid-template-columns: var(--wp--custom--icon--size) 1fr;
  gap: var(--wp--preset--spacing--30);
  align-items: start;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
}

.tc94-tick-list .tc94-icon {
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
  margin-top: 2px;
  color: var(--wp--preset--color--accent);
}

.tc94-section--dark .tc94-tick-list .tc94-icon { color: var(--wp--preset--color--highlight); }

.tc94-stat { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }

.tc94-stat__value {
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: var(--wp--custom--weight--extrabold);
  letter-spacing: var(--wp--custom--tracking--tight);
  line-height: 1;
  color: var(--wp--custom--color--text);
  font-variant-numeric: tabular-nums;
}

.tc94-stat__value sup {
  font-size: 0.45em;
  font-weight: var(--wp--custom--weight--bold);
  vertical-align: super;
  margin-left: 2px;
  color: var(--wp--preset--color--accent-ink);
}

.tc94-stat__label {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--custom--color--text-subtle);
}

.tc94-note {
  display: grid;
  grid-template-columns: var(--wp--custom--icon--size-lg) 1fr;
  gap: var(--wp--preset--spacing--40);
  align-items: start;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  border: 1px solid var(--wp--preset--color--line);
  border-left: 3px solid var(--wp--custom--color--rule-accent);
  border-radius: var(--wp--custom--radius--md);
  background-color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
}

.tc94-note .tc94-icon {
  width: var(--wp--custom--icon--size-lg);
  height: var(--wp--custom--icon--size-lg);
  color: var(--wp--preset--color--accent-ink);
  margin-top: -1px;
}

.tc94-note strong { color: var(--wp--custom--color--text); }

/* Every note in the static design carried an icon. The block lets the owner
   leave the icon field empty, so the grid drops to one column rather than
   indenting the text against an empty well. */
.tc94-note--plain { grid-template-columns: 1fr; }

.tc94-note--todo {
  border-left-color: var(--wp--preset--color--ocean-deep);
  background-color: var(--wp--preset--color--ocean-soft);
  border-color: var(--wp--custom--color--ocean-300);
}

.tc94-note--todo .tc94-icon { color: var(--wp--preset--color--ocean-deep); }

.tc94-card {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--sm);
  overflow: hidden;
}

.tc94-note h3 {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--custom--color--text);
  margin-bottom: var(--wp--preset--spacing--20);
}

.tc94-note .tc94-link-arrow { margin-top: var(--wp--preset--spacing--30); }

.tc94-note--dark {
  background-color: var(--wp--custom--alpha--white-08);
  border-color: var(--wp--custom--color--border-on-dark);
  border-left-color: var(--wp--preset--color--highlight);
  color: var(--wp--custom--color--on-dark-muted);
}

.tc94-note--dark h3 { color: var(--wp--custom--color--heading-on-dark); }

.tc94-note--dark .tc94-icon { color: var(--wp--preset--color--highlight); }

.tc94-note--dark strong { color: var(--wp--custom--color--on-dark); }

.tc94-section--dark .tc94-stat__value { color: var(--wp--custom--color--heading-on-dark); }

.tc94-section--dark .tc94-stat__value sup { color: var(--wp--preset--color--highlight); }

.tc94-section--dark .tc94-stat__label { color: var(--wp--custom--color--on-dark-muted); }

/* --------------------------------------------------------------------------
   19. Numbered steps — the home Tailor-Made section and the tailor-made
   page's process band. Both sit on a dark background, which is why the body
   copy is the on-dark muted ink.
   -------------------------------------------------------------------------- */
.tc94-steps {
  counter-reset: step;
  display: grid;
  gap: var(--wp--preset--spacing--60);
  padding: 0;
  list-style: none;
}

.tc94-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--wp--preset--spacing--40);
  align-items: start;
}

.tc94-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--extrabold);
  letter-spacing: var(--wp--custom--tracking--snug);
  color: var(--wp--preset--color--accent-ink);
  line-height: 1.6;
  border-top: 2px solid var(--wp--preset--color--line-strong);
  padding-top: var(--wp--preset--spacing--20);
}

/* The static design only ever put this list on a dark panel, so its gold
   number and gold rule were written for that one background. They stay
   exactly as designed there, and step down to the readable ink-on-white
   pair anywhere else, so the block is safe to reuse on a light section. */
.tc94-section--dark .tc94-steps li::before {
  color: var(--wp--preset--color--highlight);
  border-top-color: var(--wp--custom--alpha--gold-35);
}

.tc94-steps h3 {
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
  margin-bottom: var(--wp--preset--spacing--20);
}

.tc94-steps p {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
}

.tc94-section--dark .tc94-steps p { color: var(--wp--custom--color--on-dark-muted); }

/* Four across once there is room, with the number above the text rather than
   beside it. */
@media (min-width: 56rem) {
  .tc94-steps--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--80);
  }
  .tc94-steps--row li {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
}