/* ============================================================
   DB Tiles & Bathrooms — editorial story flow (blog v2)
   Loads ONLY on posts whose HMG layout uses designed sections.
   Legacy single-`prose` posts keep single.php and never see this.

   Brand truth: tokens.css (slate blue #406E8C, Cinzel display,
   Petrona body, Sora UI, Carsons editorial serif).
   Everything animated must be legible with JS off — the reveal
   states below only engage under html.dbt-js.
   ============================================================ */

#dbt-story {
  --st-rail: 3px;
  --st-measure: 40rem;          /* ~68ch of Petrona — the editorial fix */
  --st-pad: clamp(20px, 4vw, 56px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--dbt-white);
  color: var(--dbt-ink);
  overflow-x: clip;
}
#dbt-story * { box-sizing: border-box; }

/* ── Read-progress rail ───────────────────────────────────── */
.st-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--st-rail);
  z-index: calc(var(--dbt-z-nav) + 2);
  background: transparent;
  pointer-events: none;
}
.st-progress__fill {
  height: 100%;
  width: 0;
  background: var(--dbt-accent);
  transform-origin: 0 50%;
  transition: width .12s linear;
}

/* ── Sticky mini-masthead (reveals once the hero is passed) ── */
.st-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--dbt-z-nav) + 1);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--dbt-line);
  transform: translateY(-101%);
  transition: transform var(--dbt-dur) var(--dbt-ease);
}
html.dbt-js .st-bar.is-on { transform: translateY(0); }
html:not(.dbt-js) .st-bar { display: none; }

.st-bar__title {
  font-family: var(--dbt-font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--dbt-ink);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-bar__cta {
  flex: 0 0 auto;
  font-family: var(--dbt-font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dbt-accent);
  border-radius: 3px;
  padding: .6rem 1.1rem;
  transition: background var(--dbt-dur) var(--dbt-ease),
              transform var(--dbt-dur) var(--dbt-ease);
}
.st-bar__cta:hover { background: var(--dbt-ink); color: #fff; transform: translateY(-1px); }
@media (max-width: 700px) { .st-bar__cta { display: none; } }

/* ── Hero placement ──────────────────────────────────────────
   The package pins hero copy to the bottom edge, which on a 92vh
   story hero drops the headline almost off the fold and reads as
   a caption on the photograph rather than the opening of an
   article. Story heroes sit the copy on the lower third instead,
   and lose some height so the first paragraph is reachable. */
#dbt-story .dbt-s-hero--tall { min-height: min(78vh, 720px); }
#dbt-story .dbt-s-hero { align-items: center; }
/* The package scrim tops out around .38 black, which is not enough over a
   showroom photograph full of lit mirrors and brass — the subline landed on
   a bright reflection and disappeared. Story heroes carry their own. */
#dbt-story .dbt-s-hero--shade-strong .dbt-s-hero__scrim {
  background: linear-gradient(180deg, rgba(16, 16, 15, .34) 0%, rgba(16, 16, 15, .52) 50%, rgba(16, 16, 15, .68) 100%);
  opacity: 1;
}
#dbt-story .dbt-s-hero__inner { padding-bottom: 0; padding-top: clamp(2rem, 8vh, 5rem); }
#dbt-story .dbt-s-hero__title { max-width: 18ch; }
#dbt-story .dbt-s-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: .02em;
  max-width: 46ch;
}

/* ── Chapter rail — REMOVED ──────────────────────────────────
   A fixed rail in the left margin cannot coexist with full-bleed
   sections: the gallery, the tile panels and the image bands all
   run to 100vw, so it printed itself over them and over body copy
   at narrower desktops. Anchoring it to the content edge fixed
   the boxed sections and not the full-bleed ones, which is most
   of this template. The sticky masthead already carries wayfinding
   and never overlaps, so the rail is gone rather than patched.
   H2 ids are still emitted, so in-page anchors keep working. */
.st-rail { display: none !important; }

.st-rail-legacy {
  position: fixed;
  /* Anchored to the CONTENT edge, not the viewport: at 1440 a viewport-pinned
     rail sat from 32px to 222px while the 1140px container starts at 150px,
     so it printed itself over the first card. This keeps it in the margin at
     every width, and it only appears once that margin can actually hold it. */
  left: max(20px, calc((100vw - var(--dbt-max)) / 2 - 190px));
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--dbt-z-nav) - 1);
  display: none;
  flex-direction: column;
  gap: 14px;
  max-width: 170px;
}
@media (min-width: 1560px) { html.dbt-js .st-rail { display: flex; } }

.st-rail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dbt-body);
  font-family: var(--dbt-font-menu);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: .5;
  transition: opacity var(--dbt-dur) var(--dbt-ease),
              color var(--dbt-dur) var(--dbt-ease);
}
.st-rail__item::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width var(--dbt-dur) var(--dbt-ease);
}
.st-rail__item:hover { opacity: .9; color: var(--dbt-ink); }
.st-rail__item.is-here { opacity: 1; color: var(--dbt-accent); }
.st-rail__item.is-here::before { width: 34px; }
.st-rail__label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Byline, injected under the hero section ──────────────── */
.st-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  max-width: var(--dbt-max);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) var(--st-pad);
  border-bottom: 1px solid var(--dbt-line);
  font-family: var(--dbt-font-menu);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--dbt-body);
}
.st-byline__avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.st-byline__name { font-weight: 600; color: var(--dbt-ink); letter-spacing: .04em; }
.st-byline__dot { opacity: .45; }
.st-byline__cat {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dbt-accent);
}
@media (max-width: 620px) { .st-byline__cat { margin-left: 0; flex-basis: 100%; } }

/* ── Prose measure: the single highest-value editorial fix ──
   The package ships .dbt-wrap--narrow at 820px (~100ch). Long-form
   reading wants 60-75ch, so story posts tighten it and lift the
   body a touch. Scoped to #dbt-story: pages are untouched. */
/* One left spine for the whole article. The wrap keeps the container width so
   prose starts on the same line as every kicker and heading; the measure is
   held by capping the text elements instead of centring a narrow wrap, which
   left body copy indented against its own headings. */
#dbt-story .dbt-s-prose .dbt-wrap--narrow,
#dbt-story .dbt-s-prose .dbt-wrap {
  max-width: var(--dbt-max);
}
#dbt-story .dbt-s-prose p,
#dbt-story .dbt-s-prose li,
#dbt-story .dbt-s-prose h3,
#dbt-story .dbt-s-prose blockquote {
  max-width: var(--st-measure);
}
#dbt-story .dbt-s-prose p,
#dbt-story .dbt-s-prose li {
  font-size: 1.075rem;
  line-height: 1.78;
  color: #4a4a48;
}
#dbt-story .dbt-s-prose p { margin: 0 0 1.35em; }

/* Separate ideas with space, not rules — scannable without boxes. */
#dbt-story .dbt-s-prose h2 {
  margin-top: clamp(2.6rem, 6vw, 4.4rem);
  margin-bottom: .7em;
}
#dbt-story .dbt-s-prose h3 {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: .55em;
}
#dbt-story .dbt-s-prose h2 + h3 { margin-top: 1.2rem; }

/* Two prose sections in a row stack section-pad-bottom + section-pad-top and
   THEN the H2's own margin, which left roughly 300px of dead space mid-article.
   Between blocks the section padding already does the separating, so the join
   drops one pad and the first child gives up its margin. */
#dbt-story .hmg-section--dbtiles-prose + .hmg-section--dbtiles-prose .dbt-s-prose {
  padding-top: 0;
}
#dbt-story .dbt-s-prose .dbt-wrap > :first-child { margin-top: 0; }

/* First paragraph of the opening prose block reads as a standfirst. */
#dbt-story .st-lead .dbt-s-prose p:first-of-type,
#dbt-story .dbt-s-prose.st-lead p:first-of-type {
  font-family: var(--dbt-font-serif);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.55;
  color: var(--dbt-ink);
}

/* Links inside the story earn an underline — commerce needs the affordance. */
#dbt-story .dbt-s-prose a {
  color: var(--dbt-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(64, 110, 140, .38);
  transition: text-decoration-color var(--dbt-dur) var(--dbt-ease),
              color var(--dbt-dur) var(--dbt-ease);
}
#dbt-story .dbt-s-prose a:hover {
  color: var(--dbt-ink);
  text-decoration-color: var(--dbt-ink);
}

/* ── Pull quote (a prose blockquote, styled up) ───────────── */
#dbt-story .dbt-s-prose blockquote {
  margin: clamp(2.2rem, 5vw, 3.4rem) 0;
  padding: 0 0 0 clamp(18px, 3vw, 30px);
  border-left: 2px solid var(--dbt-accent);
}
#dbt-story .dbt-s-prose blockquote p {
  font-family: var(--dbt-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--dbt-ink);
}
#dbt-story .dbt-s-prose blockquote p:last-child { margin-bottom: 0; }
#dbt-story .dbt-s-prose blockquote cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--dbt-font-menu);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dbt-accent);
}

/* NOTE: an earlier contrast workaround lived here —
     #dbt-story .dbt-s-steps:is(…) .dbt-s-steps__card h3 { color: var(--dbt-ink) }
   It was superseded by the two tone variants further down, but leaving it in
   place cost real time: at (1,3,1) it outranked the variant rule at (1,3,0) by
   a single element selector, so the tile panels kept rendering ink titles on a
   dark scrim while every rule I was reading said #fff. Delete superseded CSS;
   do not just write a newer rule under it. */

/* ── Parallax on full-bleed bands ─────────────────────────── */
html.dbt-js #dbt-story .st-parallax { will-change: transform; }

/* ── The exit: keep reading + close ───────────────────────── */
.st-exit { background: var(--dbt-paper); padding: clamp(48px, 8vh, 88px) 0; }
.st-exit__w { max-width: var(--dbt-max); margin: 0 auto; padding: 0 var(--st-pad); }
.st-exit__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 clamp(24px, 3.5vw, 40px);
}
.st-exit__kick {
  font-family: var(--dbt-font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dbt-accent);
  margin: 0;
  white-space: nowrap;
}
.st-exit__rule { flex: 1 1 auto; height: 1px; background: var(--dbt-line); }

.st-more {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}
@media (max-width: 900px) { .st-more { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .st-more { grid-template-columns: 1fr; } }

.st-card { display: block; color: inherit; }
.st-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--dbt-porcelain) center/cover no-repeat;
  border-radius: var(--dbt-radius);
  overflow: hidden;
  transition: transform var(--dbt-dur-slow) var(--dbt-ease);
}
.st-card:hover .st-card__img { transform: scale(1.035); }
.st-card__wrap { overflow: hidden; border-radius: var(--dbt-radius); }
.st-card__cat {
  display: block;
  margin: 14px 0 6px;
  font-family: var(--dbt-font-menu);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dbt-accent);
}
.st-card__title {
  display: block;
  font-family: var(--dbt-font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--dbt-ink);
  transition: color var(--dbt-dur) var(--dbt-ease);
}
.st-card:hover .st-card__title { color: var(--dbt-accent); }
.st-card__date {
  display: block;
  margin-top: 8px;
  font-family: var(--dbt-font-menu);
  font-size: 11px;
  color: var(--dbt-body);
}

/* ── Share row ────────────────────────────────────────────── */
.st-share {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--dbt-max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--st-pad);
  border-top: 1px solid var(--dbt-line);
}
.st-share__label {
  font-family: var(--dbt-font-menu);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dbt-body);
  margin-right: 4px;
}
.st-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--dbt-line);
  border-radius: 50%;
  color: var(--dbt-ink);
  transition: background var(--dbt-dur) var(--dbt-ease),
              color var(--dbt-dur) var(--dbt-ease),
              border-color var(--dbt-dur) var(--dbt-ease);
}
.st-share__btn:hover { background: var(--dbt-accent); border-color: var(--dbt-accent); color: #fff; }

/* ── Mobile hero ──────────────────────────────────────────────
   The package H1 clamp bottoms out at 2.2rem, which is wider than a 390px
   screen for any headline of real length: "CHOOSING TILES IN PERSON" ran past
   the gutter and the hero's overflow:hidden clipped the first letter. Story
   headlines are sentences, not labels, so they get their own floor. The tall
   hero also gives back some height, since a phone does not need 92vh of it. */
@media (max-width: 700px) {
  #dbt-story .dbt-s-hero--tall { min-height: min(72vh, 620px); }
  #dbt-story .dbt-s-hero__title {
    font-size: clamp(1.45rem, 6.8vw, 2.1rem);
    letter-spacing: .04em;
    overflow-wrap: break-word;
  }
  #dbt-story .dbt-s-hero__sub { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN LANGUAGE — benchmarked against the New Look Tiles
   vanity-units guide (2026-09).

   The pattern that guide gets right, and that this reproduces in
   DB Tiles' own type and colour:
     · a kicker over every section, then an H2 that is a whole
       declarative sentence, then a lede
     · body copy never runs long without a visual device between
     · devices never repeat back to back — band, scheme, gallery,
       product band, dark section, close
   The package styles these sections for PAGES, where they are
   quieter. Everything below is scoped to #dbt-story so pages and
   the 28 legacy posts are untouched.
   ═══════════════════════════════════════════════════════════ */

/* ── Kicker ──────────────────────────────────────────────── */
#dbt-story .dbt-s-intro__accent,
#dbt-story .dbt-s-split__eyebrow,
#dbt-story .dbt-s-band__h {
  font-family: var(--dbt-font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dbt-accent);
  margin: 0 0 16px;
  line-height: 1.4;
}
#dbt-story .dbt-s-intro__accent:empty,
#dbt-story .dbt-s-split__eyebrow:empty { display: none; }

/* ── Intro = kicker + declarative H2 + lede ──────────────────
   DOM order is h2 → accent → lead, so the block becomes a flex
   column and the kicker is ordered above the heading. */
#dbt-story .dbt-s-intro { text-align: left; padding-bottom: 0; }
#dbt-story .dbt-s-intro .dbt-wrap,
#dbt-story .dbt-s-intro .dbt-wrap--narrow {
  display: flex;
  flex-direction: column;
  max-width: var(--dbt-max);
}
#dbt-story .dbt-s-intro__accent { order: 1; }
#dbt-story .dbt-s-intro__h { order: 2; }
#dbt-story .dbt-s-intro__lead { order: 3; }
#dbt-story .dbt-s-intro__h {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: .01em;
  text-transform: none;
  max-width: 20ch;
  margin: 0 0 .5em;
}
/* The package centres this block with `margin: … auto`, which floats it away
   from the left spine even once the section is left-aligned. */
#dbt-story .dbt-s-intro__lead { margin-left: 0; margin-right: 0; max-width: none; }
#dbt-story .dbt-s-intro__lead p {
  font-family: var(--dbt-font-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--dbt-ink);
  max-width: 52ch;
  margin: 0;
}

/* ── Split feature = the reference product band ──────────────
   The package makes the eyebrow H2-sized and the heading a small
   serif line. For a story that is upside down: the kicker goes
   small, the heading carries the sentence. */
#dbt-story .dbt-s-split__media { min-height: clamp(460px, 56vw, 720px); }
#dbt-story .dbt-s-split__copy {
  max-width: 640px;
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.75rem, 5vw, 5rem);
}
#dbt-story .dbt-s-split__serif {
  font-family: var(--dbt-font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: .01em;
  color: var(--dbt-ink);
  margin: 0 0 .6em;
  max-width: 18ch;
}
#dbt-story .dbt-s-split__body p {
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 46ch;
}

/* ── Feature banner = full-bleed image band ──────────────────
   Taller than the package default so it reads as a breath in the
   story rather than a decorative strip. */
#dbt-story .dbt-s-band--band { min-height: clamp(440px, 62vh, 760px); }
#dbt-story .dbt-s-band__inner:empty { display: none; }

/* ── Mosaic = the four-up captioned gallery ──────────────────
   The package renders masonry as CSS columns, which gives ragged
   rows. A story wants an even wall, so it becomes a grid with
   hairline gaps and a fixed portrait ratio. Captions are lifted
   from each image's alt text by story.js. */
#dbt-story .dbt-s-mosaic--masonry {
  display: grid;
  columns: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 0;
  background: var(--dbt-porcelain);
}
#dbt-story .dbt-s-mosaic--masonry .dbt-s-mosaic__cell {
  margin: 0;
  background: var(--dbt-porcelain);
  display: flex;
  flex-direction: column;
}
#dbt-story .dbt-s-mosaic--masonry .dbt-s-mosaic__cell img {
  aspect-ratio: 4 / 5;
  height: auto;
  width: 100%;
  object-fit: cover;
}
#dbt-story .dbt-s-mosaic__cap {
  margin: 0;
  padding: 14px 18px;
  background: #fff;
  font-family: var(--dbt-font-menu);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dbt-body);
  flex: 1 1 auto;
}
@media (max-width: 1000px) {
  #dbt-story .dbt-s-mosaic--masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #dbt-story .dbt-s-mosaic--masonry { grid-template-columns: 1fr; }
}

/* ── Steps band, two variants selected by `tone` ──────────────
   One section type doing two jobs, chosen from a real editor
   control rather than a hidden flag:
     tone: porcelain  →  numbered panels clad in tile
     tone: white      →  FAQ cards
   ──────────────────────────────────────────────────────────── */
#dbt-story .dbt-s-steps { padding: 0; counter-reset: dbtstep; }
#dbt-story .dbt-s-steps .dbt-wrap { max-width: none; padding: 0; }
#dbt-story .dbt-s-steps__h {
  max-width: var(--dbt-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6rem) var(--dbt-gutter) clamp(2rem, 4vh, 3rem);
  text-align: left;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: .01em;
  text-transform: none;
}
#dbt-story .dbt-s-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
#dbt-story .dbt-s-steps__card {
  counter-increment: dbtstep;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(2rem, 3.4vw, 3.4rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Tile cladding for steps-band cards lives in theme.css, not here.
   story.css only loads on story POSTS, but the section also appears on
   pages (the homepage uses it), and the template now always emits
   <img class="dbt-s-steps__bg">. Without the [src=""] hiding rule those
   empty images would render on every page that uses the section. */

/* ── Variant B: FAQ cards ────────────────────────────────────
   Five questions as a card grid rather than a column of
   paragraphs, which is what a long Q&A run turns into. */
#dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--dbt-line);
  border-block: 1px solid var(--dbt-line);
}
#dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__card {
  background: #fff;
  color: var(--dbt-body);
  justify-content: flex-start;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
#dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__card::before { content: none; }
#dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__t {
  color: var(--dbt-ink);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  margin: 0 0 .8em;
  padding-bottom: .7em;
  border-bottom: 1px solid var(--dbt-line);
}
#dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__x {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}
/* An odd last card spans the row rather than leaving a hole. */
#dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 1000px) {
  #dbt-story .dbt-s-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .dbt-s-steps__card:has(> .dbt-s-steps__bg:not([src=""])) { min-height: 320px; }
}
@media (max-width: 620px) {
  #dbt-story .dbt-s-steps__grid,
  #dbt-story .dbt-s-steps.dbt-tone--white .dbt-s-steps__grid { grid-template-columns: 1fr; }
  .dbt-s-steps__card:has(> .dbt-s-steps__bg:not([src=""])) { min-height: 260px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .st-progress__fill,
  .st-bar,
  .st-rail__item,
  .st-rail__item::before,
  .st-card__img { transition: none !important; }
  html.dbt-js #dbt-story .st-parallax { transform: none !important; }
}