/*
 * Reference shared component contracts.
 *
 * The same file is loaded by the public theme and the block editor.  Keep
 * selectors scoped to those two canvas roots so shell and route CSS remain
 * owned by their packages.
 */

:root {
  --seq-band-ink: var(--wp--preset--color--ink, #17160f);
  --seq-band-body: var(--wp--preset--color--body, #3f3d34);
  --seq-band-sage: var(--wp--preset--color--sage, #82b479);
  --seq-band-white: var(--wp--preset--color--white, #fff);
  --seq-band-line: var(--wp--preset--color--line, #e3dfd3);
  --seq-band-faint: var(--wp--preset--color--faint, #cfccc2);
  --seq-band-wide: 1180px;
  --seq-band-gutter: 48px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.sequoia-process-rail, .faq, .related-links, .dark-cta) {
  box-sizing: border-box;
  max-width: min(var(--seq-band-wide), calc(100vw - (2 * var(--seq-band-gutter))));
  width: 100%;
}

/*
 * Load-bearing for LAYOUT, not for container queries.  `container-type:
 * inline-size` implies layout containment, which establishes a block
 * formatting context and stops a 16px top margin collapsing out of the rail.
 * Removing this line leaves every column count, width and gap untouched but
 * shifts the rail's contents up by exactly 16px and shortens the rail by 16px
 * at 1440/900/822/390 on both canvases.  Package D queries no container; if
 * this is ever revisited, replace it with an explicit BFC rather than simply
 * deleting it.
 */
:is(.entry-content, .editor-styles-wrapper)
  :is(.sequoia-process-rail, .h-proc, .lt-proc) {
  container-type: inline-size;
}

/* Process rail: numbers are authored content, never a CSS counter. */
:is(.entry-content, .editor-styles-wrapper)
  :is(.h-proc, .lt-proc, .process-grid):has(> .wp-block-column) {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Home `Sequoia Home.dc.html:121` and Service `ServiceTemplate.dc.html:134`
   * place the authored process grid after a heading block with
   * `margin-bottom:40px`. The shared Core pattern keeps that heading and grid
   * as siblings, so carry the same source gap on the grid itself. Without an
   * explicit value Core's late flow-gap rule reports 24px instead. */
  margin-top: 40px;
  width: 100%;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.h-proc, .lt-proc, .process-grid):has(> .wp-block-column)
  > :is(.wp-block-column, .sequoia-process-card, div) {
  border-top: 2px solid var(--seq-band-sage);
  box-sizing: border-box;
  min-width: 0;
  padding-top: 16px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.h-proc, .lt-proc, .process-grid):has(> .wp-block-column)
  :is(.sequoia-process-number, .process-number) {
  color: var(--seq-band-sage);
  font-family: var(--wp--preset--font-family--eyebrow, "IBM Plex Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  margin: 0 0 8px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.h-proc, .lt-proc, .process-grid):has(> .wp-block-column)
  h3 {
  color: var(--seq-band-ink);
  font-family: var(--wp--preset--font-family--primary, "Montserrat", sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.h-proc, .lt-proc, .process-grid):has(> .wp-block-column)
  h3 + p {
  color: var(--seq-band-body);
  font-family: var(--wp--preset--font-family--secondary, "Nunito Sans", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
}

/* Standard FAQ and the four-group index use native Details semantics. */
:is(.entry-content, .editor-styles-wrapper)
  :is(.faq, .faq-index-card) {
  color: var(--seq-band-body);
}

/* FAQ band, source node shape restored.
 * `ServiceTemplate.dc.html:146-152` (Location `:124-`, CityHub `:132-` are the
 * same shape):
 *   :146  <section padding:96px 48px; background:#fff; border-top:1px solid>
 *   :147    <div max-width:1180px; margin:0 auto>        <-- band wrapper
 *   :148      <div max-width:680px; margin-bottom:36px>  <-- intro
 *   :152      <div display:flex; flex-direction:column; gap:2px; max-width:900px>
 *
 * NOTE, because it has already caused one wrong instruction: the band wrapper
 * is 1180, NOT 900. The 900 in this band belongs to the LIST at `:152`, which
 * is deliberately narrower than its wrapper. Sizing the wrapper at 900 would
 * make the band 280px too narrow on three archetypes.
 *
 * Background is the one per-archetype divergence: Service `:146` and CityHub
 * `:132` author #fff, Location `:124` authors #f6f4ee. The majority value is
 * taken here and Location's divergence is recorded rather than guessed at --
 * the band is composed per route and has no route-side hook yet, the same
 * situation as `.dark-cta`'s 92/96px. */
:is(.entry-content, .editor-styles-wrapper) .faq {
  background: var(--seq-band-white);
  border-top: 1px solid var(--seq-band-line);
  box-sizing: border-box;
  display: block;
  max-width: none;
  padding: 96px var(--seq-band-gutter);
}

:is(.entry-content, .editor-styles-wrapper) .faq-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--seq-band-wide);
  width: 100%;
}

:is(.entry-content, .editor-styles-wrapper) .faq-intro {
  margin-bottom: 36px;
  max-width: 680px;
}

/* `gap: 2px` is authored (`:152`) and was previously supplied by Core's block
 * gap instead -- the Amendment 5.9 tell. `max-width: 900px` is authored on the
 * same line and had not been reported at all; without it the list is 280px too
 * wide even once the gap is right. */
:is(.entry-content, .editor-styles-wrapper) .faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 900px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-list, .faq-index-card) {
  background: var(--seq-band-white);
  border: 1px solid var(--seq-band-line);
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq) {
  border-bottom: 1px solid var(--seq-band-line);
  margin: 0;
}

/* Owner review 2026-08-25: "the FAQs render separately, the handoff has them
 * touching". The authored spec gives an item ONE divider (border-bottom) and a
 * 2px gap. But components.css:27 carries `.faq-item{border-top:1px}` from the
 * older `.faq-inner` disclosure system, and that rule is not scoped to it. So
 * every seam rendered as two hairlines with the list's white background showing
 * between them -- reading as separate cards rather than one list.
 *
 * Scoped to `.faq-list` on purpose: the `.faq-inner` / `fq-section` system on
 * /faqs/ still wants its own border-top, and this must not reach it. */
:is(.entry-content, .editor-styles-wrapper) .faq-list :is(.faq-item, .is-style-sequoia-faq) {
  border-top: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq):last-child {
  border-bottom: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  > summary {
  align-items: center;
  color: var(--seq-band-ink);
  cursor: pointer;
  display: flex;
  font-family: var(--wp--preset--font-family--primary, "Montserrat", sans-serif);
  font-size: 17px;
  font-weight: 700;
  gap: 20px;
  justify-content: space-between;
  line-height: 1.35;
  list-style: none;
  min-height: 44px;
  padding: 20px 24px;
}

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

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  > summary::marker {
  content: "";
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  .faq-plus {
  flex: none;
  height: 16px;
  position: relative;
  transition: transform .2s;
  width: 16px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  .faq-plus::before,
:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  .faq-plus::after {
  background: var(--seq-band-sage);
  content: "";
  left: 0;
  position: absolute;
  top: 7px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  .faq-plus::before {
  height: 2px;
  width: 16px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  .faq-plus::after {
  height: 16px;
  left: 7px;
  top: 0;
  width: 2px;
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)[open]
  .faq-plus {
  transform: rotate(45deg);
}

:is(.entry-content, .editor-styles-wrapper)
  :is(.faq-item, .is-style-sequoia-faq)
  > :where(p, .wp-block-paragraph, div:not(.faq-plus)) {
  color: var(--seq-band-body);
  font-family: var(--wp--preset--font-family--secondary, "Nunito Sans", sans-serif);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
  padding: 0 24px 22px;
}

/* Trust FAQ: 230px sticky rail, four anchors, four groups, 13 Details. */
:is(.entry-content, .editor-styles-wrapper)
  .fq-2col {
  align-items: start;
  display: grid;
  gap: 44px;
  grid-template-columns: 230px minmax(0, 1fr);
  margin-inline: auto;
  max-width: var(--seq-band-wide);
  width: 100%;
}

:is(.entry-content, .editor-styles-wrapper)
  .fq-2col > .wp-block-column {
  margin: 0;
  min-width: 0;
  width: auto;
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-rail {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 120px;
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-rail .wp-block-buttons {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-anchor .wp-block-button__link {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e6dfcf;
  border-radius: 0;
  color: var(--seq-band-body);
  display: block;
  font-family: var(--wp--preset--font-family--secondary, "Nunito Sans", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 8px 0;
  text-align: left;
  width: 100%;
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-anchor .wp-block-button__link:hover {
  color: var(--seq-band-ink);
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-group {
  scroll-margin-top: 120px;
}

:is(.entry-content, .editor-styles-wrapper)
  .faq-index-group > h2 {
  color: var(--seq-band-ink);
  font-family: var(--wp--preset--font-family--primary, "Montserrat", sans-serif);
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 14px;
}

/* Related links are chips, not an unordered nav with browser bullets. */
:is(.entry-content, .editor-styles-wrapper)
  .related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  .related-chips li {
  margin: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  .related-chips a {
  background: var(--seq-band-white);
  border: 1px solid var(--seq-band-line);
  color: var(--seq-band-ink);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--secondary, "Nunito Sans", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 17px;
  text-decoration: none;
}

:is(.entry-content, .editor-styles-wrapper)
  .related-chips a:hover {
  background: var(--seq-band-sage);
  color: var(--seq-band-ink);
}

/* 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. */
/* Closing CTA and its two source action variants. */
:is(.entry-content, .editor-styles-wrapper)
  .dark-cta {
  background: #17160f;
  box-sizing: border-box;
  color: var(--seq-band-white);
  margin-block: 0;
  max-width: none;
  padding: 92px var(--seq-band-gutter);
}

:is(.entry-content, .editor-styles-wrapper)
  .dark-cta > .r-innerpad {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 900px;
  padding: 0;
  text-align: center;
  width: 100%;
}

:is(.entry-content, .editor-styles-wrapper)
  .dark-cta :is(h1, h2, h3, h4, h5, h6) {
  color: var(--seq-band-white);
  font-family: var(--wp--preset--font-family--primary, "Montserrat", sans-serif);
  font-size: 42px;
  line-height: 1.08;
  margin: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  .dark-cta > .r-innerpad > p {
  color: var(--seq-band-faint);
  font-family: var(--wp--preset--font-family--secondary, "Nunito Sans", sans-serif);
  font-size: 18px;
  line-height: 1.55;
  margin: 18px auto 0;
  max-width: 560px;
}

:is(.entry-content, .editor-styles-wrapper)
  .r-cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 30px auto 0;
}

:is(.entry-content, .editor-styles-wrapper)
  .r-cta > .wp-block-button {
  min-width: 0;
}

:is(.entry-content, .editor-styles-wrapper)
  .r-cta
  .wp-block-button__link {
  border-radius: 0;
  font-family: var(--wp--preset--font-family--primary, "Montserrat", sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  min-height: 48px;
  padding: 17px 28px;
}

/* CTA colour is owned by `assets/css/components/cta-authority.css`; the
   `:is()`-scoped declarations that used to live here carried too little
   specificity to beat the vendored legacy `style.css` at (0,6,0). Geometry
   (padding, border-width, type) stays here. */

:is(.entry-content, .editor-styles-wrapper)
  .r-cta-filled
  .wp-block-button__link,
:is(.entry-content, .editor-styles-wrapper)
  .r-cta-outline
  .wp-block-button__link {
  border-style: solid;
  border-width: 1px;
}

:is(.entry-content, .editor-styles-wrapper)
  .r-cta-outline
  .wp-block-button__link {
  padding-inline: 26px;
}

/*
 * RELATED BAND -- the source's related-service chip row.
 *
 * AUTHORITY: the source corpus, `reference-output/pages/svc-*.html` inside
 * `sequoia-source-handover.zip` (SHA-256 5b26a745...e952d83). The row is
 * `display:flex; flex-wrap:wrap; gap:10px` and each chip is
 * `600 13.5px/1 "Nunito Sans"; color var(--sq-ink); background #fff;
 * border 1px solid var(--sq-line); padding 12px 17px`.
 *
 * These are peer navigation chips, NOT a primary/secondary CTA pair, so they
 * must not inherit `.r-cta`'s centred row, 48px minimum or filled first
 * button. Composing them as `.r-cta` printed the first related service as a
 * solid black call to action the source does not have.
 */
:is(.entry-content, .editor-styles-wrapper) .r-related-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .r-related-links .wp-block-button__link {
  background: var(--sq-white, #fff);
  border: 1px solid var(--sq-line);
  border-radius: 0;
  color: var(--sq-ink);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 0;
  padding: 12px 17px;
}

:is(.entry-content, .editor-styles-wrapper) .r-related-links .wp-block-button__link:hover {
  background: var(--sq-ink);
  color: var(--sq-white, #fff);
}

/*
 * The reference's source breakpoint is a viewport contract: gutenberg-mapping.md:79
 * freezes PRIM-PROCESS-RAIL as four columns, then two at <=820.  It is
 * deliberately not a container query -- the rail's own inline size is
 * 726px at an 822px viewport and 804px at 900px, so a container condition
 * would collapse the rail to two columns above the frozen threshold.
 */
@media (max-width: 820px) {
  :is(.entry-content, .editor-styles-wrapper)
    :is(.h-proc, .lt-proc, .process-grid):has(> .wp-block-column) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :is(.entry-content, .editor-styles-wrapper)
    .fq-2col {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-content, .editor-styles-wrapper)
    .faq-index-rail {
    position: static;
  }
}


/* ---------------------------------------------------------------------------
 * Service-card price is a mono text chip in the reference, not a button. It is
 * authored as a Button block, so it inherits the whole `.r-cta-outline`
 * treatment (border from :463, padding from :470, ink colour from
 * cta-authority.css:83 !important, and `font: inherit` from
 * design-components.css:340 which kills components.css:23's mono stack).
 * `!important` here is answering cta-authority's `!important`, not
 * out-specifying an ordinary author rule.
 * ------------------------------------------------------------------------ */
.h-serv-card > .wp-block-button > .wp-block-button__link {
  background: transparent !important;
  border: 0 !important;
  color: var(--sq-green) !important;
  font: 600 12px/1 "IBM Plex Mono", monospace !important;
  justify-content: flex-start;
  letter-spacing: .06em;
  padding: 8px 0 !important;
  width: auto;
}

/* The reference chip reads "From $30/sq ft →" -- the arrow is a static suffix
   beside the interpolated price, not part of the value. The composed Button
   block carries only the value, so the glyph is restored here. Decorative
   suffix on an already-labelled link. */
/* components.css:24 gives `.h-serv-card p` 16px; the reference card body is
   `400 15px/1.55` (line-height 23.25px, not 24.8px). Stated here rather than
   edited there because the recovered presentation layer holds authority. */
.h-serv-card > p {
  font-size: 15px;
  line-height: 1.55;
}

.h-serv-card > .wp-block-button > .wp-block-button__link::after {
  content: "\2192";
  /* An explicit margin, not a leading space in `content`: the chip is mono with
     `letter-spacing: .06em`, and a content-string space renders visibly tighter
     than the reference's inter-element space. */
  margin-left: .45em;
}

/* SEQ-FIX-ALIGN ------------------------------------------------------------
 * Map/proof columns stretch to the row height, so the map ends level with the
 * card beside it.
 *
 * This rule previously forced `align-items: start`, because the map column
 * stretched to match the taller proof panel and left ~520px of empty ground
 * under the 460px map pane. REVERSED 2026-08-25 on the site owner's explicit
 * instruction that the desktop map should match the height of the right-hand
 * card, "across the board".
 *
 * The empty ground was a symptom of a stale Leaflet size, not of the stretch:
 * map-helpers.js re-measured once at init and never again, so a cell that grew
 * afterwards was filled with background rather than tiles. keepSized() in
 * map-helpers.js now observes the container, so the stretched cell renders as
 * map. See the matching note at design-hero-proof.css `.lt-map-layout
 * .map-panel`.
 *
 * The hero keeps its own `align-items: center` and is unaffected.
 * ------------------------------------------------------------------------ */
:is(.entry-content, .editor-styles-wrapper) .h-map-layout,
:is(.entry-content, .editor-styles-wrapper) .lt-map-layout {
  align-items: stretch !important; /* answers columns/style.min.css `align-items:normal!important` */
}

/* CTA rows inside copy bands align with the copy above them, not centred.
 * The rule at :426 centres every `.r-cta` site-wide; that is right for the
 * dark CTA band and wrong wherever the button sits under a left-aligned
 * column. Scoped so the dark CTA and reviews row keep their behaviour. */
:is(.entry-content, .editor-styles-wrapper) :is(.h-hero, .h-serv, .h-gtee, .project-proof) .r-cta {
  justify-content: flex-start;
  margin-inline: 0;
}

/* SEQ-FIX-HEROALIGN --------------------------------------------------------
 * design-hero-proof.css:46 already asks for `align-items: center` on the hero
 * grid, but WordPress's columns/style.min.css sets
 * `.wp-block-columns{align-items:normal!important}` and wins, so the media
 * column stretched to the copy column's height and left dead space under the
 * 5:4 image frame. `!important` here is answering that `!important`.
 * ------------------------------------------------------------------------ */
:is(.entry-content, .editor-styles-wrapper) .h-hero-layout {
  align-items: center !important;
}


/* ---------------------------------------------------------------------------
 * INVESTMENT-CARD FOOTER BAR
 *
 * The shipping bundle marks this button `r-cta-outline`, and cta-authority.css
 * honours that correctly and with `!important` -- so the fill is not "losing" a
 * cascade fight, it is being told not to paint. The reference (home.html:258)
 * renders the same control as the card's full-bleed SOLID INK footer bar:
 * `display:inline-block; text-align:center; font:700 13px/1 Montserrat;
 * color:#fff; background:var(--sq-ink); padding:15px 20px`, stretched to the
 * card width by the flex column it sits in.
 *
 * The honest fix is the variant class in the content bundle; that bundle is
 * owned elsewhere and is off limits to this change. Band authority overriding a
 * generic variant is the established pattern in this sheet (see the service-card
 * chip above, which overrides the same variant for the same reason). The
 * `!important` answers cta-authority's `!important`, and this file loads after
 * it. If the bundle is ever re-composed with `r-cta-filled`, this block becomes
 * redundant rather than wrong.
 * ------------------------------------------------------------------------ */
:is(.entry-content, .editor-styles-wrapper) .project-proof > .wp-block-buttons > .wp-block-button {
  width: 100%;
}

:is(.entry-content, .editor-styles-wrapper) .project-proof > .wp-block-buttons .wp-block-button__link {
  background-color: var(--sq-ink) !important;
  border: 0 !important;
  color: #fff !important;
  font: 700 13px/1 Montserrat, Arial, sans-serif;
  justify-content: center;
  letter-spacing: .01em;
  padding: 15px 20px !important;
  text-align: center;
  width: 100%;
}

/* Matches the filled hover in cta-authority.css so the two variants behave the
   same way under the pointer. */
:is(.entry-content, .editor-styles-wrapper) .project-proof > .wp-block-buttons .wp-block-button__link:hover,
:is(.entry-content, .editor-styles-wrapper) .project-proof > .wp-block-buttons .wp-block-button__link:active,
:is(.entry-content, .editor-styles-wrapper) .project-proof > .wp-block-buttons .wp-block-button__link:focus-visible {
  background-color: var(--sq-sage) !important;
  color: var(--sq-ink) !important;
}


/* ---------------------------------------------------------------------------
 * MOBILE CTA SIZING
 *
 * responsive.css:34 stretches every `.r-cta-filled`/`.r-cta-outline` and its
 * button to 100% at <=520, and :53 centres the label. That is right for the
 * fixed `.mob-cta` action bar and for form submits, and wrong inside the
 * reference-composed copy bands, where the reference keeps its actions
 * intrinsically sized and left-aligned (measured at 390: hero 229.1px and
 * 272.8px, guarantee 262.5px -- ours were all 342px, the full content width).
 *
 * Scoped to the copy bands by name rather than lifted globally: `.mob-cta`,
 * `.gform_wrapper` and `.r-work-heading` all depend on the stretch, and
 * `.dark-cta` is centred in the reference too. `.project-proof` is excluded --
 * its bar is full-bleed by design (see above).
 * ------------------------------------------------------------------------ */
@media (max-width: 520px) {
  :is(.entry-content, .editor-styles-wrapper)
    :is(.h-hero, .h-serv, .h-gtee)
    :is(.wp-block-buttons.r-cta, .r-cta-filled, .r-cta-outline),
  :is(.entry-content, .editor-styles-wrapper)
    :is(.h-hero, .h-serv, .h-gtee)
    :is(.r-cta-filled, .r-cta-outline) > .wp-element-button {
    max-width: 100%;
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
 * Closing-CTA phone action: the SECOND BUTTON.
 *
 * The handover's closing CTA is two sibling anchors in one flex row — filled
 * "Request a consultation", outlined "Call <number>". Our composer emitted only
 * the first as a button and left the phone beside it, which is what the owner
 * reported as design-review A1 / C1 / D5.
 *
 * `sequoia/phone-cta` now renders a `.wp-block-button`, so the work here is
 * layout: put the buttons container and the phone button on one line. Both are
 * inline-level and `.dark-cta > .r-innerpad` is already `text-align: center`,
 * so they share a centred line and wrap together on narrow viewports. This
 * needs NO content change on the 61 pages carrying the block.
 *
 * SCOPE: deliberately `.dark-cta > .r-innerpad > …`, never bare `.r-cta`. The
 * un-scoped `.r-cta` rule above matches every CTA row in `.entry-content`
 * site-wide (166 rows, only 59 inside `.dark-cta`); changing it is a site-wide
 * alignment change and is not this component's business. Hero-row alignment is
 * handled on the hero's own selector, elsewhere.
 */
:is(.entry-content, .editor-styles-wrapper)
  .dark-cta > .r-innerpad > .wp-block-buttons.r-cta {
  display: inline-flex;
  margin: 30px 0 0;
  vertical-align: middle;
}

/*
 * The 14px between the buttons is split 7px + 7px across the two wrappers (in
 * the media query below), NOT a one-sided `margin-left: 14px` here. Two
 * measured reasons:
 *
 * 1. Core wins the plain margin. WordPress's constrained-layout stylesheet
 *    sets `margin-left: auto !important` on every non-aligned child of
 *    `.is-layout-constrained` — and `.r-innerpad` IS constrained — so a plain
 *    `margin-left: 14px` here computes to 0 (auto→0 on an inline-level box)
 *    and the pair rendered flush, gap 0px. Only `!important` answers it.
 * 2. A one-sided 14px would bias the centred line by 7px: the line box would
 *    include the margin on one side only, so the pair's centre sits 7px right
 *    of `.r-innerpad`'s centre. Symmetric halves keep the pair centred.
 *
 * The split lives behind `min-width: 490px` because on narrow viewports the
 * two buttons STACK full-width and centred; a persistent side margin would
 * push the stacked phone button off-centre. 490px is above the measured
 * row-fit threshold (231px row + 14px gap + 201px phone = 446px, gutter ≥20px
 * → ≥486px viewport); between 486px and 489px the pair shares a row flush —
 * accepted, it is a 4px window.
 */
:is(.entry-content, .editor-styles-wrapper)
  .dark-cta > .r-innerpad > .seq-phone-cta {
  display: inline-flex;
  margin: 30px 0 0;
  vertical-align: middle;
}

@media (min-width: 490px) {
  :is(.entry-content, .editor-styles-wrapper)
    .dark-cta > .r-innerpad > .wp-block-buttons.r-cta {
    margin-right: 7px !important; /* answers core's margin-left/right:auto !important */
  }

  :is(.entry-content, .editor-styles-wrapper)
    .dark-cta > .r-innerpad > .seq-phone-cta {
    margin-left: 7px !important; /* answers core's margin-left/right:auto !important */
  }
}

/*
 * Mirror the CTA link metrics.
 *
 * `:is(…) .r-cta .wp-block-button__link` (above) is a DESCENDANT selector, so a
 * button that is a sibling of `.r-cta` rather than a child of it cannot match
 * it. Measured consequence before this rule existed: the pair rendered at 50px
 * vs 48px tall, 14px/700 vs 16px/400 type, `17px 28px` vs `0 26px` padding —
 * on one row but visibly not a matched pair. Duplicated deliberately; if the
 * metrics above change, change them here too.
 */
:is(.entry-content, .editor-styles-wrapper)
  .seq-phone-cta > .wp-block-button__link {
  border-radius: 0;
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--primary, "Montserrat", sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  min-height: 48px;
  padding: 17px 28px;
}

/*
 * Two call sites still carry classNames that styled this block when it rendered
 * a muted note (`.lt-cta-contact`, `.r-cta-note` in components.css: 14px muted
 * type, 18px top margin). Those would distort a button wrapper, so neutralise
 * them on the wrapper and let the link styling above carry the appearance.
 */
:is(.entry-content, .editor-styles-wrapper) .seq-phone-cta {
  color: inherit;
  font-size: inherit;
}