/**
 * C-owned content-band and service-card grid CSS.
 *
 * This sheet is intentionally usable in both the frontend and editor. Every
 * rule is rooted in an editor/content canvas; theme shell selectors do not
 * participate in the component contract.
 *
 * LAYOUT SPECIFICITY CONVENTION (shared across the reference stylesheets)
 * -----------------------------------------------------------------
 * WordPress prints
 *     body .is-layout-flex{display:flex}
 *     body .is-layout-grid{display:grid}
 * into `core-block-supports-inline-css`, at specificity (0,1,1) and AFTER
 * every theme stylesheet. Any Core Group/Columns block carries `is-layout-*`,
 * so a theme layout rule authored at (0,1,0) or below is silently inert on it:
 * the `grid-template-columns` still computes and still REPORTS correctly while
 * the box is laid out as flex. `:where()` contributes zero specificity, so a
 * `:where()`-wrapped layout rule loses to Core AND to its own base rule.
 *
 * Therefore: every rule declaring a layout property (display, grid-template-*,
 * grid-auto-flow, flex-direction, flex-wrap) must reach (0,2,0).
 *   - canvas-scoped sheets carry `:is(.entry-content, .editor-styles-wrapper)`
 *     and put the subject outside any `:where()`;
 *   - the shell sheet, whose bands render outside both canvases on the classic
 *     templates, doubles the subject class (`.r-nav.r-nav`) instead.
 * Fixing one value for all layout rules also means the responsive ladder is
 * decided by source order alone, which is what it was written to assume.
 *
 * `:where()` stays correct for non-layout defaults, where zero specificity is
 * the intent. `tests/literal-shared/g/layout-specificity-contract.php` enforces
 * this and fails on any layout rule below (0,2,0) or any dead override.
 */

:root {
  --sq-ink: var(--wp--preset--color--ink, #17160f);
  --sq-body: var(--wp--preset--color--body, #3f3d34);
  --sq-sage: var(--wp--preset--color--sage, #82b479);
  --sq-sage2: var(--wp--preset--color--sage-2, #6fa267);
  --sq-green: var(--wp--preset--color--green, #3f6d3f);
  --sq-cream: var(--wp--preset--color--cream, #f6f4ee);
  --sq-footer: var(--wp--preset--color--footer, #efece3);
  --sq-line: var(--wp--preset--color--line, #e3dfd3);
  --sq-line2: var(--wp--preset--color--line-2, #dcd8cc);
  --sq-muted: var(--wp--preset--color--muted, #6b6860);
  --sq-white: #fff;
  --sq-wide: 1180px;
  --sq-gutter: 48px;
  --sq-focus: 0 0 0 3px var(--sq-white), 0 0 0 6px var(--sq-green);
}

:where(.entry-content, .editor-styles-wrapper) {
  color: var(--sq-body);
  font-family: "Nunito Sans", Arial, sans-serif;
  line-height: 1.55;
}

:where(.entry-content, .editor-styles-wrapper) :where(h1, h2, h3, h4) {
  color: var(--sq-ink);
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

/* This block used to substitute a box-shadow ring for the outline on content
 * links and buttons. Both halves of that substitution failed, in opposite
 * directions, which is why the result was NO indicator at all rather than a
 * weak one:
 *   - `outline: 0` sat at (0,1,0) -- the two `:where()` groups contribute
 *     nothing and only `:focus-visible` counts -- tying base.css's global
 *     outline and winning purely on load order.
 *   - the replacement `box-shadow` was then overridden by
 *     `design-components.css`'s `.r-cta-filled .wp-element-button` at (0,2,0).
 * So the rule reliably removed the indicator and unreliably restored it.
 * Removed entirely: base.css `:focus-visible` is the single owner. */

:where(.entry-content, .editor-styles-wrapper) .alignwide {
  box-sizing: border-box;
  max-width: min(var(--sq-wide), calc(100vw - (2 * var(--sq-gutter))));
}

:where(.entry-content, .editor-styles-wrapper) .alignfull {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

/* The authored eyebrow form is a rule plus label, never a text-only alias. */
:is(.entry-content, .editor-styles-wrapper) .eyebrow-wrap {
  align-items: center;
  gap: 12px;
  margin-block: 0 18px;
}

:where(.entry-content, .editor-styles-wrapper) .eyebrow-rule {
  background: var(--sq-sage);
  border: 0;
  height: 2px;
  margin: 0;
  opacity: 1;
  width: 36px;
}

:where(.entry-content, .editor-styles-wrapper) .snapshot-label {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Split out of the .snapshot-label group: the authority gives the step numeral the accent
   green and a tighter metric. Same (0,0,1)-equivalent reach, so it must sit after the group. */
:where(.entry-content, .editor-styles-wrapper) .process-number {
  color: var(--sq-green);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  margin-bottom: 8px;
  /* The reference authors no transform on the step numerals. `uppercase` is a
     no-op on digits, but it is inherited by anything the numeral ever wraps, so
     it is stated as the reference states it. */
  text-transform: none;
}


/* Filled/outline source action variants; do not inherit the theme button API. */
:where(.entry-content, .editor-styles-wrapper) .r-cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Flex items must be allowed to shrink below their button label's min-content
 * width at narrow viewports; otherwise long source CTAs widen the document. */
:where(.entry-content, .editor-styles-wrapper) .r-cta > .wp-block-button {
  min-width: 0;
}

:where(.entry-content, .editor-styles-wrapper) .r-cta .wp-block-button__link {
  border: 1px solid transparent;
  border-radius: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 16px 28px;
  text-decoration: none;
}

/* CTA colour is owned by `assets/css/components/cta-authority.css`; the
   `:where()`-scoped declarations that used to live here carried zero ancestor
   specificity and lost to the vendored legacy `style.css` at (0,6,0). */

/* Source hero/proof/card geometry. Variants stay separate. The later
   `.cs-hero` rule from `design-hero-proof.css` is source-exact
   (`CaseStudyTemplate.dc.html:29`: 28px 48px 72px); do not put it back in
   this 168px group. */
:where(.entry-content, .editor-styles-wrapper) .lt-hero {
  border-bottom: 1px solid var(--sq-line);
  padding: 168px var(--sq-gutter) 76px;
}

:where(.entry-content, .editor-styles-wrapper) .h-hero {
  border-bottom: 1px solid var(--sq-line);
  padding: 168px var(--sq-gutter) 80px;
}

:where(.entry-content, .editor-styles-wrapper) :where(.h-hero, .lt-hero, .cs-hero) > :where(.alignwide, .h-hero-inner, .lt-hero-inner, .cs-hero-inner) {
  margin-inline: auto;
}

:is(.entry-content, .editor-styles-wrapper) .h-hero-layout,
:is(.entry-content, .editor-styles-wrapper) .lt-hero-layout,
:is(.entry-content, .editor-styles-wrapper) .cs-hero-layout {
  align-items: center;
  gap: 56px;
}

:is(.entry-content, .editor-styles-wrapper) .h-hero-layout {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
}

:is(.entry-content, .editor-styles-wrapper) .lt-hero-layout {
  display: grid;
  grid-template-columns: 1.14fr .86fr;
}

:is(.entry-content, .editor-styles-wrapper) .cs-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

:where(.entry-content, .editor-styles-wrapper) :where(.h-hero-media, .lt-hero-media, .cs-hero-media) {
  border: 1px solid var(--sq-line2);
  min-height: 360px;
  overflow: hidden;
}

/* The six trust labels are authored as a flex rail, but the content bundle
   emits the band with Core's FLOW layout classes
   (`is-layout-flow wp-block-group-is-layout-flow`). Core then injects
   `:root :where(.is-layout-flow) > * { margin-block-start: 24px }`, which ties
   this rule on specificity and wins on order, staggering labels 2-6 down by
   24px. Zero it defensively on the children so the band is laid out by this
   sheet alone, whatever layout classes the bundle happens to emit.

   The rail itself is a column grid rather than a wrapping flex row: the six
   labels measure 1073px against a 1180px band, so a single row fits with only
   ~7px to spare and drops to 5 + 1 orphan on any font-metric drift. Explicit
   column counts always divide the six labels evenly - 3+3, then 2+2+2, then
   1-up - so the band reads as an intended layout at every width and never
   orphans a label. Column widths at each step stay wider than the longest
   label (208px), so no label wraps inside its cell. */
:is(.entry-content, .editor-styles-wrapper) .h-trust {
  border-top: 1px solid var(--sq-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 26px;
  margin: 44px auto 0;
  max-width: var(--sq-wide);
  padding-top: 28px;
}

:is(.entry-content, .editor-styles-wrapper) .h-trust > * {
  margin-block-start: 0;
}

@media (min-width: 620px) {
  :is(.entry-content, .editor-styles-wrapper) .h-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :is(.entry-content, .editor-styles-wrapper) .h-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Section roots keep the values authored by their own source node. Home and
   Location/City service sections have no top border (`Sequoia Home.dc.html:52`,
   `LocationTemplate.dc.html:106`, `CityHubTemplate.dc.html:100`). The Home
   process section is 100px with a rule (`Sequoia Home.dc.html:119`); Service's
   process is 96px (`ServiceTemplate.dc.html:132`); the Service related section
   is 80px (`ServiceTemplate.dc.html:163`). */
:where(.entry-content, .editor-styles-wrapper) :where(.h-serv, .lt-serv) {
  padding: 100px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) .h-proc {
  border-top: 1px solid var(--sq-line);
  padding: 100px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) .lt-proc {
  border-top: 1px solid var(--sq-line);
  padding: 96px var(--sq-gutter);
}

/* GAP, not a deviation: the Home composer emits an `.h-reviews` / `.h-reviews-inner`
   band that no package sheet ever claimed, so the band had neither gutter nor
   measure of its own. It was only ever laid out by the legacy stylesheet that
   this theme baked in, and it went full-bleed the moment that sheet was dropped
   on composed routes. Same band chrome and inner measure as its sibling
   `.h-proc`, which it sits directly beneath on Home. */
:where(.entry-content, .editor-styles-wrapper) .h-reviews {
  background: var(--sq-cream);
  border-top: 1px solid var(--sq-line);
  box-sizing: border-box;
  padding: 88px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) .h-reviews-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* Same class of GAP, across the Location/Service/City/index families: the
   composers emit these six band roots with the usual `<band>`/`<band>-inner`
   shape, but no package sheet ever claimed them, so they had no measure. The
   legacy stylesheet was inset­ting their content by 100px on every managed
   route; without it they run to the viewport edge.

   The measure is put on the inner rather than as band padding on purpose:
   these bands' vertical rhythm currently comes from Core block margins on 48
   live routes, and band padding would change that everywhere at once. Inner
   box = wide + two gutters, centred, so the text edge lands at the same place
   as every band that does carry `padding: <n>px var(--sq-gutter)`. */
:where(.entry-content, .editor-styles-wrapper) :where(
  .lt-areas-inner,
  .lt-related-inner,
  .index-intro-inner,
  .hl-map-inner,
  .hl-hubs-inner
) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(var(--sq-wide) + 2 * var(--sq-gutter));
  padding-inline: var(--sq-gutter);
}

/* Band roots for the two index routes. The -inner elements above own the
   horizontal measure; these own the vertical rhythm and background, which
   were missing entirely (both bands rendered with zero padding). */
:where(.entry-content, .editor-styles-wrapper) .index-intro {
  background: var(--sq-white);
  box-sizing: border-box;
  padding: 168px var(--sq-gutter) 64px;
}

:where(.entry-content, .editor-styles-wrapper) .hl-map {
  box-sizing: border-box;
  padding: 100px 0;
}

:where(.entry-content, .editor-styles-wrapper) .hl-hubs {
  box-sizing: border-box;
  padding: 56px 0 0;
}

:where(.entry-content, .editor-styles-wrapper) .related-band {
  border-top: 1px solid var(--sq-line);
  padding: 80px var(--sq-gutter);
}

/* Home services band: source `Sequoia Home.dc.html:52` is
   `padding:100px 48px; background:#f6f4ee` with no border. */
:where(.entry-content, .editor-styles-wrapper) .h-serv {
  background: var(--sq-cream);
  padding: 100px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) :where(.h-serv, .lt-serv, .h-proc, .lt-proc, .related-band) > .alignwide {
  margin-inline: auto;
}

:where(.entry-content, .editor-styles-wrapper) .h-serv-inner,
:where(.entry-content, .editor-styles-wrapper) .lt-serv-inner,
:where(.entry-content, .editor-styles-wrapper) .h-proc-inner,
:where(.entry-content, .editor-styles-wrapper) .lt-proc-inner {
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* `align-items: stretch` is declared rather than left to default: the source
   grids (`Sequoia Home.dc.html:58`, `LocationTemplate.dc.html:112`) specify no
   align-items, so grid's own default (stretch) is the faithful value -- but
   Core's is-layout-flex default supplies `center` where no author rule is in
   force, which renders differently-sized cards instead of equal ones. Stating
   it makes the source's default explicit and immune to that.
   This is a tracks-blind defect: the column count was correct throughout. */
:is(.entry-content, .editor-styles-wrapper) .h-serv-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(.entry-content, .editor-styles-wrapper) .lt-serv {
  background: var(--sq-white);
}

:is(.entry-content, .editor-styles-wrapper) .lt-serv-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(.entry-content, .editor-styles-wrapper) :where(.h-serv-card, .lt-serv-card, .hs-card, .snapshot-card) {
  background: var(--sq-white);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  height: 100%;
  padding: 24px;
}

:where(.entry-content, .editor-styles-wrapper) :where(.h-serv-card, .lt-serv-card, .hs-card) h3,
:where(.entry-content, .editor-styles-wrapper) .hs-card h2 {
  margin-block-start: 0;
}

/* Snapshot/list forms are structural contracts, not provider payloads. */
:where(.entry-content, .editor-styles-wrapper) .snapshot-card {
  border: 1px solid var(--sq-line2);
  padding: 28px;
}

:where(.entry-content, .editor-styles-wrapper) .snapshot-title {
  color: var(--sq-ink);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-block: 0 14px;
}

:where(.entry-content, .editor-styles-wrapper) .snapshot-row {
  border-top: 1px solid var(--sq-line);
  gap: 20px;
  padding-block: 12px;
}

:where(.entry-content, .editor-styles-wrapper) .snapshot-value {
  color: var(--sq-ink);
  font-size: 15px;
  margin-block: 0;
  text-align: right;
}

:where(.entry-content, .editor-styles-wrapper) .hs-catalogue {
  background: var(--sq-cream);
  padding: 80px var(--sq-gutter) 100px;
}

:where(.entry-content, .editor-styles-wrapper) .hs-catalogue-inner {
  margin-inline: auto;
}

:where(.entry-content, .editor-styles-wrapper) .hs-group + .hs-group {
  margin-top: 64px;
}

:where(.entry-content, .editor-styles-wrapper) .hs-group-header {
  align-items: baseline;
  border-bottom: 1px solid var(--sq-line2);
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 16px;
}

:where(.entry-content, .editor-styles-wrapper) .hs-group-tag,
:where(.entry-content, .editor-styles-wrapper) .hs-card-meta {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:is(.entry-content, .editor-styles-wrapper) .hs-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(.entry-content, .editor-styles-wrapper) .hl-cols {
  background: var(--sq-cream);
  padding: 56px var(--sq-gutter) 100px;
}

:is(.entry-content, .editor-styles-wrapper) .hl-cols-inner {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
}

:where(.entry-content, .editor-styles-wrapper) .hl-list,
:where(.entry-content, .editor-styles-wrapper) .related-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.entry-content, .editor-styles-wrapper) :where(.hl-list, .related-links-list) li + li {
  border-top: 1px solid var(--sq-line);
}

:is(.entry-content, .editor-styles-wrapper) :is(.hl-list, .related-links-list) a {
  color: var(--sq-ink);
  display: block;
  padding: 13px 0;
  text-decoration-color: var(--sq-sage);
  text-underline-offset: .18em;
}

/* Proof wrapper: providers own records; this sheet owns only the slot geometry.
   `.h-map` is deliberately NOT in this rule. Source `Sequoia Home.dc.html:70`
   is a full-bleed <section> wrapping a 1180 container (`:71`) wrapping the
   intro (`:72`) and the map+panel grid (`:77`). Making the band ROOT the grid
   turned the intro into a grid ITEM beside the map instead of a block above
   it, which crushed the map to 322.7px against a source-predicted 703.7px.
   The 1.4fr/.9fr ratio lives on `.h-map-layout` (design-hero-proof.css:378),
   which is the node the source actually gives it to. `.lt-map` keeps the
   previous behaviour: its sources are a separate route's and disagree with
   Home's, so it is not changed here. */
/* The root-as-grid rule is deleted, not re-valued. In every archetype's source
   the 1.35fr/.9fr (Home: 1.4fr/.9fr) grid is the map+panel row, which is
   `.lt-map-layout` / `.h-map-layout` in the port -- already declared correctly
   at design-hero-proof.css:378 and :382. Leaving it on the root is what made the
   intro a grid item beside the map. */

/* Source section chrome, restored onto the full-bleed root
   (`Sequoia Home.dc.html:70`: padding 100px 48px, background #fff,
   border-top 1px). The root is full-bleed by construction, so
   design-components.css's `max-width: none` on it is correct and unchanged.
   This rule also supersedes design-hero-proof.css:337's `padding: 100px 0` and
   its 32px/20px ladder (:512, :543) for `.h-map` only, by source order at
   equal specificity -- the same mechanism that already makes hero-proof's
   `.h-hero` ladder inert. Source has NO gutter ladder; `--sq-gutter`'s own
   520 step is a separate, escalated defect that will correct every band at
   once, so the token is used rather than a hardcoded 48px. */
:is(.entry-content, .editor-styles-wrapper) .h-map {
  background: var(--sq-white);
  border-top: 1px solid var(--sq-line);
  box-sizing: border-box;
  display: block;
  padding: 100px var(--sq-gutter);
  scroll-margin-top: 88px;
}

/* The inner container the port had dropped (`Sequoia Home.dc.html:71`).
   Authored rather than relying on Core's `alignwide`, so the measure holds by
   construction and cannot be re-broken by a Core layout change.
   The measure is taken from the band's OWN source line, never a house value --
   1180 happens to be right here, but sibling bands are not all 1180. */
:is(.entry-content, .editor-styles-wrapper) .h-map-inner,
:is(.entry-content, .editor-styles-wrapper) .lt-map-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Proof band, all four archetypes. Source node shape is
 * section(chrome) > div(1180) > [intro, map+panel grid] in every one; the port
 * had merged all three into a single node, which made the intro a grid ITEM
 * beside the map instead of a block above it.
 *
 * Why the root, not a specificity raise: `design-hero-proof.css` models this
 * element as the 1180 inner, `design-components.css` models it as a full-bleed
 * root, and `content-bands-grids.css` modelled it as the inner grid. No
 * specificity choice resolves a disagreement about what the element IS.
 * Splitting the node makes each sheet's model true of a different element.
 *
 * `max-width: none` is declared here across BOTH canvases on purpose.
 * design-components.css's equivalent is `.entry-content > …`, i.e. front-end
 * only, so the editor kept the 1180 cap and rendered a different box from the
 * front end. Stating it at (0,2,0) here makes both canvases describe the same
 * element, which is the point of the structural fix.
 *
 * Sources (verified against the frozen archive, per archetype):
 *   Home     `Sequoia Home.dc.html:70`      100px 48px  #fff      border-top  1180 / intro 740 / 1.4fr .9fr
 *   Service  `ServiceTemplate.dc.html:99`   100px 48px  #fff      none        1180 / intro 720 / 1.35fr .9fr
 *   Location `LocationTemplate.dc.html:59`  100px 48px  #f6f4ee   none        1180 / intro 740 / 1.35fr .9fr
 *   CityHub  `CityHubTemplate.dc.html:59`   100px 48px  #f6f4ee   none        1180 / intro 740 / 1.35fr .9fr
 * `#f6f4ee` is therefore correct for TWO archetypes; only Service differs, so
 * the shared value stays and Service is scoped out below.
 * ------------------------------------------------------------------------ */
:is(.entry-content, .editor-styles-wrapper) .lt-map {
  box-sizing: border-box;
  display: block;
  max-width: none;
  padding: 100px var(--sq-gutter);
  scroll-margin-top: 88px;
}

/* Service is the only archetype authoring #fff here
   (`ServiceTemplate.dc.html:99`); Location and CityHub both author #f6f4ee at
   their `:59`, which `design-hero-proof.css:342` already supplies correctly. */
:is(.entry-content, .editor-styles-wrapper) .lt-map.svc-proof {
  background: var(--sq-white);
}

/* Service's intro is 720 (`ServiceTemplate.dc.html:101`) where Home and
   Location author 740 (`:72` / `:61`). */
:is(.entry-content, .editor-styles-wrapper) .svc-proof .lt-map-intro {
  max-width: 720px;
}

:where(.entry-content, .editor-styles-wrapper) :where(.map-panel, .map-canvas, .wp-block-sequoia-projects-map) {
  min-height: 460px;
}

:where(.entry-content, .editor-styles-wrapper) :where(.project-proof, .map-detail) {
  border: 1px solid var(--sq-line2);
  padding: 28px;
}

/* Process and FAQ use native Core cards/details. Home's process source section
   is white (`Sequoia Home.dc.html:119`); Service's is cream
   (`ServiceTemplate.dc.html:132`). FAQ owns its complete section rule in
   `process-faq-related-cta.css` and is intentionally not grouped here. */
:where(.entry-content, .editor-styles-wrapper) .h-proc {
  background: var(--sq-white);
}

:where(.entry-content, .editor-styles-wrapper) .lt-proc {
  background: var(--sq-cream);
}

:is(.entry-content, .editor-styles-wrapper) .process-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(.entry-content, .editor-styles-wrapper) .process-card {
  border-top: 2px solid var(--sq-sage);
  padding: 22px 0 0;
}

:where(.entry-content, .editor-styles-wrapper) .process-card :where(h3, p) {
  margin-block-start: 0;
}

:where(.entry-content, .editor-styles-wrapper) .faq-item {
  border-top: 1px solid var(--sq-line2);
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .faq-item:last-child {
  border-bottom: 1px solid var(--sq-line2);
}

:where(.entry-content, .editor-styles-wrapper) .faq-item summary {
  color: var(--sq-ink);
  cursor: pointer;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  padding: 20px 24px;
}

:is(.entry-content, .editor-styles-wrapper) .faq-item summary::-webkit-details-marker {
  display: none;
}

:where(.entry-content, .editor-styles-wrapper) .faq-item > p {
  margin: 0;
  padding: 0 24px 24px;
}

/* Related-link sections are cream in both source archetypes that author this
   band (`ServiceTemplate.dc.html:163` and `CaseStudyTemplate.dc.html:82`). */
:where(.entry-content, .editor-styles-wrapper) .related-band {
  background: var(--sq-cream);
}

/* KNOWN, DELIBERATE 4px DIVERGENCE -- do NOT "fix" this by changing 92px.
   Home authors 96px (`Sequoia Home.dc.html:144`). Service (`:174`), Location
   (`:152`), CityHub (`:149`) and CaseStudy (`:93`) all author 92px, so 92 is
   correct for four of five archetypes and raising it here breaks those four.
   `.dark-cta` is a single shared pattern with no Home-side class to split on,
   and route-specific CSS / hardcoded ids / route binding are all barred, so the
   divergence is accepted and recorded rather than papered over.
   PHASE-2 REMEDY: when the Home route package exists, have it add a modifier
   class where it composes `sequoia/dark-cta` and scope 96px to that class. */
/* `.sv2-case-archive-outro` joins this scope because the case-study archive is
   a template, not `.entry-content`. Without it the closing `.dark-cta` band
   archive-case-study.php emits would match nothing and paint dark text on
   white -- the "selector targets markup that is not emitted here" failure the
   audit catalogues. Extending the existing scope keeps one owner for the
   pattern instead of forking a second copy of these declarations. */
:where(.entry-content, .editor-styles-wrapper, .sv2-case-archive-outro) .dark-cta {
  background: var(--sq-ink);
  color: var(--sq-white);
  padding: 92px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper, .sv2-case-archive-outro) .dark-cta-inner {
  margin-inline: auto;
}

:where(.entry-content, .editor-styles-wrapper, .sv2-case-archive-outro) .dark-cta :where(h2, p, .eyebrow-label) {
  color: inherit;
}

:where(.entry-content, .editor-styles-wrapper, .sv2-case-archive-outro) .dark-cta .eyebrow-label {
  color: var(--sq-sage);
}

/* CTA colour is owned by `assets/css/components/cta-authority.css`; the
   `:where()`-scoped declarations that used to live here carried zero ancestor
   specificity and lost to the vendored legacy `style.css` at (0,6,0). */

/* Provider-backed archive grids retain distinct authored variants. */
:is(.entry-content, .editor-styles-wrapper) :is(.ci-grid, .hi-grid) {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 80px var(--sq-gutter) 100px;
}

:where(.entry-content, .editor-styles-wrapper) :where(.ci-grid-inner, .hi-grid-inner) {
  margin-inline: auto;
}

:is(.entry-content, .editor-styles-wrapper) .cs-gal {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(.entry-content, .editor-styles-wrapper) .rv-plat {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(.entry-content, .editor-styles-wrapper) .wp-block-sequoia-projects,
:where(.entry-content, .editor-styles-wrapper) .wp-block-sequoia-inspirations {
  min-width: 0;
}

/* Paver authored bands. These are shared source classes, not route selectors. */

/* The paver hero is a section + inner-grid PAIR, exactly like `.h-hero` /
   `.h-hero-layout` at :149-167 and `.ab-hero` / `.ab-hero-layout` in
   `components/trust-bands.css:70`. The archive states it as
   `<section style="padding:150px 48px 0">` wrapping
   `<div class="r-hero" style="max-width:1180px;margin:0 auto;display:grid;
   grid-template-columns:1.12fr .88fr;gap:60px;align-items:center;
   min-height:560px">` whose TWO children are the copy and the media column
   (`reference-output/pages/paver-flagship.html:154-155`).

   The composer emits that pair as `.r-hero` (the full-bleed section) wrapping
   ONE `wp:columns` node, `.r-hero-layout`. Declaring the grid on `.r-hero`
   therefore put the whole hero into grid COLUMN 1 -- 719px of a 1440 viewport --
   and left column 2 (565px) empty, while the real copy/media split fell through
   to Core's untouched `wp-block-columns` flex at 50/50, i.e. two 348px columns
   at x=48 and x=420. `.r-hero-layout` had no rule in any sheet, so the 1180
   measure, the 1.12/.88 ratio and the 60px gap all landed on the wrong node.

   The grid moves to the inner node, which -- like `.r-tracker-layout`, the other
   band whose inner div IS its grid -- also carries the measure. `.r-hero` keeps
   only the section chrome, and is stated at (0,2,0) so `display: block` outranks
   Core's `body .is-layout-grid { display: grid }` at (0,1,1). */
:is(.entry-content, .editor-styles-wrapper) .r-hero {
  background: var(--sq-cream);
  display: block;
  padding: 150px var(--sq-gutter) 80px;
}

:is(.entry-content, .editor-styles-wrapper) .r-hero-layout {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: 60px;
  grid-template-columns: 1.12fr .88fr;
  margin-inline: auto;
  max-width: var(--sq-wide);
  min-height: 560px;
}

:is(.entry-content, .editor-styles-wrapper) .r-hero-layout > .wp-block-column {
  margin: 0;
  min-width: 0;
}

:where(.entry-content, .editor-styles-wrapper) .r-innerpad {
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* The three contested bands whose measure is DERIVABLE, split out of the generic
   wide conversion because 1180 is wrong for them.
   `docs/luke-port/gutenberg-mapping.md:173` gives `trust-about`'s intro as
   `Group(max 900)`; `:176` gives `trust-guarantee-terms` as a cream
   `Group(max 820)` followed by a white `Group(max 820)`. All three rendered at
   1180 until now -- 280 to 360px too wide.

   They take an explicit measure instead of `.alignwide`, which is why their
   composers do not pass `inner_align => 'wide'`. The two backgrounds are quoted
   from that same line and are the only section chrome in the entire contested
   set that is stated rather than guessed. No block padding is invented; the rest
   of the chrome stays an open defect pending the `.dc.html` archive. */
:where(.entry-content, .editor-styles-wrapper) .ab-intro-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: min(900px, calc(100vw - (2 * var(--sq-gutter))));
}

:where(.entry-content, .editor-styles-wrapper) :is(.terms-intro-inner, .terms-list-inner) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: min(820px, calc(100vw - (2 * var(--sq-gutter))));
}

:where(.entry-content, .editor-styles-wrapper) .terms-intro {
  background: var(--sq-cream);
}

:where(.entry-content, .editor-styles-wrapper) .terms-list {
  background: var(--sq-white);
}

/* Amendment 5's second node for the flagship's own inline bands, matching what
   `components/gallery-media.css:66-75` already does for the six pattern bands.
   These band roots previously carried `align:wide`, which took the 1180 measure
   from `theme.json`'s `wideSize`; converting the root to the source's full-bleed
   `align:full` section moves that measure onto the inner node, so it has to be
   declared here or the bands would measure the viewport. The pair is
   width-equivalent to the `alignwide` form it replaces at every viewport -- 1180
   centred above 1180, 100% below it -- so this restores the source's node count
   without moving any edge. `--sq-wide` is the same 1180 the six resolve to.

   No block padding or background is declared: the source's per-band section
   chrome for these nine is not derivable from anything in this repo (the
   `.dc.html` archive amendment 5 cites as the precedence authority is not
   vendored here), and inventing values would be a worse defect than the absence.
   `.r-proof` is deliberately absent -- its inner node reuses `.r-innerpad`
   above, which is already exactly this measure. */
:where(.entry-content, .editor-styles-wrapper) :is(
  .r-process-inner,
  .r-near-you-inner,
  .r-signature-inner,
  .r-guarantee-inner,
  .r-faq-inner,
  .r-area-inner,
  .r-closing-inner,
  .r-selected-work-inner
) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(var(--sq-wide) + 2 * var(--sq-gutter));
  padding-inline: var(--sq-gutter);
}

/* GAP, same class as the six band roots above: a measure alone is only half a
   measure. `max-width: var(--sq-wide)` constrains these inner nodes above
   1180px but does nothing below it, so on narrow viewports the inner box is
   100% of the band and every one of these bands put its text hard against the
   viewport edge -- nine of them on the paver flagship at 390px. The legacy
   stylesheet was insetting them until it was dropped on composed routes.

   Widening the measure by two gutters and paying it back as `padding-inline`
   is width-equivalent above 1180: the content edge lands at exactly the same
   place as before, and at exactly the same place as every sibling band that
   carries `padding: <n>px var(--sq-gutter)`. This adds no band chrome the
   source did not have -- no background, no block padding -- so the deliberate
   silence on those is preserved.

   `.r-proof` still has no `-inner` node of its own: it reuses `.r-innerpad`,
   which has the same missing gutter. It is scoped here rather than fixed on
   the generic `.r-innerpad` because that class is also used by the footer and
   by `.dark-cta`, whose own rules already own their padding. */
:where(.entry-content, .editor-styles-wrapper) .r-proof > .r-innerpad {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(var(--sq-wide) + 2 * var(--sq-gutter));
  padding-inline: var(--sq-gutter);
}

/* The generic `.r-2col` rule is deleted, not reconciled. `.r-2col` never
   appears alone: all four occurrences are co-classed
   (`r-2col r-cutaway-layout`, `r-2col r-tracker-layout`,
   `r-2col r-value-layout`, `r-2col r-diligence-lower`), and each of those bands
   sets BOTH `grid-template-columns` and `gap` in `components/gallery-media.css`
   at equal specificity in a later sheet -- so every property this rule declared
   lost on every element it could match. Its `1fr 1fr` and `gap: 34px` matched no
   band: the real ratios are 1.05/.95, .92/1.08, 1.35/.85 and 1.25/1 at gaps 44,
   52, 32 and 24px. Nothing is handed to Core by removing it. */

/* `.r-work` is deliberately not grouped here. The reference's `.r-work` is
   `repeat(3, 1fr)` at gap 20px (`Sequoia Paver Hub - Page.dc.html:223`, `:563`),
   so `repeat(4, ...)` was never its value -- it inherited it from being grouped
   with `.r-services`, and the `gap: 18px` matches neither paver band because it
   is `.h-serv`'s gap from the Home source. `components/gallery-media.css` owns
   `.r-work`. The responsive steps below DO include it and match source
   `:57`/`:63`, so they stay. */
:where(.entry-content, .editor-styles-wrapper) .r-services {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Core prints its block-supports layout container rule
   (`.wp-container-core-group-is-layout-<hash>`) in an inline <style> AFTER every
   enqueued theme sheet, at ONE-class specificity. A `layout:{"type":"grid"}`
   group that names no `columnCount` -- which is how the composers emit
   `.r-procrow`, `.r-cred` and `.r-proof-layout` -- therefore receives Core's
   `grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr))`,
   which TIES a `:where()`-scoped band rule on specificity and WINS on order.
   Measured at 1440: all three rendered as five 216.8px columns instead of the
   authored two/three-track layouts, which is why the process band wrapped every
   three or four words. Stating them at (0,2,0) is the same lever the sheet
   already uses for `.h-hero-layout`, `.cs-gal` and `.rv-plat`. */
:is(.entry-content, .editor-styles-wrapper) .r-procrow {
  display: grid;
  gap: 24px;
  grid-template-columns: 60px minmax(0, 1fr) minmax(250px, .7fr);
}

:where(.entry-content, .editor-styles-wrapper) .r-procnode {
  align-items: center;
  background: var(--sq-sage);
  border-radius: 50%;
  display: flex;
  height: 60px;
  justify-content: center;
  width: 60px;
}

:where(.entry-content, .editor-styles-wrapper) .r-3to1 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* `.r-pricebar` is deliberately absent from this sheet. The reference's definition is
   `230px 1fr` with a 230px gutter column that an empty third-row child fills so
   the axis labels align under the bars; three equal columns makes that structure
   meaningless. The duplicate here was `.r-3to1`'s value copied onto the wrong
   band, with the source's <=860 gap hoisted to desktop.
   `components/gallery-media.css:777-785` carries the real one. */

:where(.entry-content, .editor-styles-wrapper) .r-maprow {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.45fr 1fr;
}

:where(.entry-content, .editor-styles-wrapper) .r-mapwrap {
  border: 1px solid var(--sq-line2);
  min-height: 560px;
  position: relative;
}

/* Paver B16 keeps the reference's two authored locality groups as non-button spans.
   The full-width migration template does not add an `.entry-content` wrapper,
   so this narrow component rule is rooted at the Paver service-area band and
   remains reachable on both front-end and editor canvases. */
.r-area .r-area-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.r-area .r-area-chip-group:not(:last-child) {
  margin-bottom: 22px;
}

.r-area .r-area-chip {
  box-sizing: border-box;
  border: 1px solid var(--sq-line2);
  color: var(--sq-ink);
  display: inline-block;
  font: 600 12.5px/1 var(--sq-font-body, "Nunito Sans", sans-serif);
  padding: 8px 12px;
  white-space: nowrap;
}

:where(.entry-content, .editor-styles-wrapper) .r-tablewrap {
  border: 1px solid var(--sq-line2);
  overflow-x: auto;
}

:where(.entry-content, .editor-styles-wrapper) .r-tablewrap > :first-child {
  min-width: 660px;
}

:is(.entry-content, .editor-styles-wrapper) .r-cred {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* `.r-proof-layout` had no rule in any sheet, so the proof band was laid out
   entirely by Core's auto-fill default. The archive states it as
   `minmax(0,.86fr) minmax(0,1.14fr)` at gap 52 with centred items
   (`reference-output/pages/paver-flagship.html`, the white review section). */
:is(.entry-content, .editor-styles-wrapper) .r-proof-layout {
  align-items: center;
  display: grid;
  gap: 52px;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
}

/* The sticky mobile action bar. `display: none` at (0,1,0) lost to Core's
   `body .is-layout-flex { display: flex }` at (0,1,1) -- the composer emits the
   bar as a flex group -- so the bar printed in the document flow at EVERY
   width, as a black strip inside the page. Stated at (0,2,0) it hides again
   above the mobile step. */
:is(.entry-content, .editor-styles-wrapper) .mob-cta {
  display: none;
}

/* The `.ab-hero` / `.g-2col` collapse that stood here is deleted, not moved.
   `.ab-hero` was never a grid -- the columns live on `.ab-hero-layout` -- so
   that half was inert. The `.g-2col` half was wrong: `gutenberg-mapping.md:175`
   and `:212` both put every `.g-2col` variant and `.g-tiers` at `<=900`, not
   `<=940`, so between 901 and 940px the bands stacked 40px early. Both variants
   are now covered at `<=900` in `components/trust-bands.css`. */

@media (max-width: 900px) {
    /* `.h-map` removed: it is no longer a grid. Source `:24` collapses the
     map+panel grid, which is `.h-map-layout` in the port; that collapse is
     already declared at design-hero-proof.css:477 and is measured correct. */
    :is(.entry-content, .editor-styles-wrapper) :is(.h-hero-layout, .lt-hero-layout, .cs-hero-layout) {
    grid-template-columns: 1fr;
  }

  :where(.entry-content, .editor-styles-wrapper) :where(.r-maprow) {
    grid-template-columns: 1fr;
  }

  /* Was stated on `.r-hero` at (0,1,0), which could never beat the (0,2,0) base
     rule -- the hero stayed two-column at 390px. It follows the grid onto
     `.r-hero-layout` and matches the base rule's specificity. Gap 34px is the
     archive's collapsed value (`pavers-authored.css:66`). */
  :is(.entry-content, .editor-styles-wrapper) .r-hero-layout {
    gap: 34px;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  :is(.entry-content, .editor-styles-wrapper) :is(.ci-grid, .hi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* `:is()` on BOTH halves, deliberately: with `:where()` this rule is (0,0,0)
     and lost to the unmediated `.h-hero`/`.lt-hero` in design-hero-proof.css
     (0,1,0), so every mobile home/location hero computed 168px instead of the
     132px declared here (measured at 480px, 2026-08-25). `:is()` makes it
     (0,2,0), which wins on specificity rather than on load order -- the sibling
     mobile hero overrides in trust-bands.css win only because they happen to sit
     later in the file than the desktop rule they override. */
  :is(.entry-content, .editor-styles-wrapper) :is(.h-hero, .lt-hero, .cs-hero, .index-intro) {
    padding-top: 132px;
  }

  :where(.entry-content, .editor-styles-wrapper) .r-mapwrap {
    min-height: 360px;
  }
}

@media (max-width: 860px) {
  :where(.entry-content, .editor-styles-wrapper) .r-hero h1 {
    font-size: 46px;
  }

  :where(.entry-content, .editor-styles-wrapper) :where(.r-services, .r-work) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* `.r-footcols` is deliberately absent here. The shell sheet owns the footer
     ladder and states the same 860 step at (0,2,0); this sheet's copy was a
     duplicate that had never applied, and keeping it would either shadow the
     owner or need a permanent exception in the layout contract. */

  :is(.entry-content, .editor-styles-wrapper) :is(.r-procrow) {
    grid-template-columns: 1fr;
  }

  :is(.entry-content, .editor-styles-wrapper) .r-proof-layout {
    grid-template-columns: 1fr;
  }

  :where(.entry-content, .editor-styles-wrapper) :where(.r-3to1) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :is(.entry-content, .editor-styles-wrapper) :is(.h-serv-grid, .process-grid, .hs-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.entry-content, .editor-styles-wrapper) .lt-serv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.entry-content, .editor-styles-wrapper) .hl-cols-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :is(.entry-content, .editor-styles-wrapper) .r-cred {
    grid-template-columns: 1fr;
  }

  :is(.entry-content, .editor-styles-wrapper) .mob-cta {
    align-items: stretch;
    background: var(--sq-ink);
    bottom: 0;
    display: flex;
    gap: 9px;
    left: 0;
    padding: 9px 10px;
    position: fixed;
    right: 0;
    z-index: 50;
  }

  body:has(.mob-cta) .grecaptcha-badge {
    bottom: calc(66px + 8px + env(safe-area-inset-bottom)) !important;
  }

  :is(.entry-content, .editor-styles-wrapper) .mob-cta > * {
    flex: 1 1 0;
  }

  /* Archive `:1236-1238`: the bar's own compact metrics. Without them the bar
     inherited the hero CTA's 17/28px pill and broke its labels a syllable per
     line. `body` gets the archive's matching 66px reserve so the fixed bar never
     covers the last of the page. */
  :is(.entry-content, .editor-styles-wrapper) .mob-cta .wp-block-button__link {
    box-sizing: border-box;
    display: block;
    min-height: 0;
    padding: 13px 8px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
  }

  html body {
    padding-bottom: 66px;
  }
}

@media (max-width: 560px) {
  :is(.entry-content, .editor-styles-wrapper) :is(.cs-gal, .ci-grid, .hi-grid, .rv-plat) {
    grid-template-columns: 1fr;
  }

  :is(.entry-content, .editor-styles-wrapper) .r-cred {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  :where(.entry-content, .editor-styles-wrapper) {
    --sq-gutter: 24px;
  }

  /* The desktop 150px hero offset left the nearby-project link underneath the
     fixed 75px action bar at 390px. 112px retains a measured 14px clearance
     below the mobile masthead while keeping the final hero control above the
     bar at the flagship viewport. */
  :is(.entry-content, .editor-styles-wrapper) .r-hero {
    padding-top: 112px;
  }

  /* Source `Sequoia Home.dc.html:26` -- the only gap override in the Home
     source, and the class of contract a track-count gate cannot see. Stated at
     (0,2,0) to match the base `.h-trust` rule at :192 and placed after it, so
     no `!important` is needed; the source needs one only to beat its own
     earlier inline declaration.
     Supersedes design-hero-proof.css:539's `.h-trust { gap: 6px 14px }`, which
     is both the wrong value and already dead -- it is (0,1,0) in an earlier
     sheet and loses to :192 on specificity as well as order. Flagged for that
     sheet's owner to delete. */
  :is(.entry-content, .editor-styles-wrapper) .h-trust {
    gap: 10px 18px;
  }

  :is(.entry-content, .editor-styles-wrapper) :is(.h-serv-grid, .lt-serv-grid, .hs-grid, .hs-grid-inner, .hl-cols-inner) {
    grid-template-columns: 1fr;
  }

  :where(.entry-content, .editor-styles-wrapper) :where(.r-services, .r-work) {
    grid-template-columns: 1fr;
  }

  :where(.entry-content, .editor-styles-wrapper) .r-hero h1 {
    font-size: 38px;
  }

  :is(.entry-content, .editor-styles-wrapper) .snapshot-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  :where(.entry-content, .editor-styles-wrapper) .snapshot-value {
    text-align: left;
  }
}

/* At the narrowest supported canvas the 38px heading wraps to five lines and
   pushes the final hero action underneath the fixed bar. A 34px step removes
   that extra line while retaining the complete heading and the only
   render-time #near-you action. */
@media (max-width: 375px) {
  :is(.entry-content, .editor-styles-wrapper) .r-hero-copy > .wp-block-heading {
    font-size: 34px;
  }
}


/* ---------------------------------------------------------------------------
 * Process step type. Nothing previously set a font-size on these, so they fell
 * through to base.css's generic `h3 { font-size: clamp(1.2rem,2vw,1.65rem) }`
 * = 26.4px at 1440. The reference authors 16px/1.25 (the corpus step-title
 * tier). Scoped to `> h3` / `> p` so `.process-number` keeps its own treatment.
 * ------------------------------------------------------------------------ */
:is(.entry-content, .editor-styles-wrapper) .process-card > h3 {
  font-size: 16px;
  letter-spacing: normal;
  line-height: 1.25;
  margin: 0;
}

/* `:not(.process-number)` is load-bearing, not decoration. The comment above
   says this rule is "scoped to `> h3` / `> p` so `.process-number` keeps its own
   treatment" -- but the numeral IS a `> p`, so at (0,2,0) this rule outranked
   the (0,1,0) `:where(...) .process-number` block at :111 and rendered `01`-`04`
   at 14px/21px with an 8px TOP margin. The reference authors 11px/1 with an 8px
   bottom margin. Excluding the numeral restores the treatment that was always
   intended. */
:is(.entry-content, .editor-styles-wrapper) .process-card > p:not(.process-number) {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
 * Hero trust strip: one wrapping row with `/` separators, per the reference.
 * The six labels measure ~817px inside a 1180px row at 1440, so the orphan
 * risk the grid was guarding against does not materialise at desktop. The
 * <=620px single-column grid below is kept deliberately -- stacked reads
 * better than a ragged wrap on mobile.
 * ------------------------------------------------------------------------ */
@media (min-width: 620px) {
  :is(.entry-content, .editor-styles-wrapper) .h-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
  }

  :is(.entry-content, .editor-styles-wrapper) .h-trust > .h-trust-label + .h-trust-label::before {
    content: "/";
    color: #c3bdae;
    margin-right: 26px;
  }
}