/* ==========================================================================
   SECTION — "Speak directly with your broker"   (#speak)
   --------------------------------------------------------------------------
   One centred column inside a full-width white card. Every number below was
   read off the signed-off reference with Playwright and then expressed in the
   shared tokens — nothing here is eyeballed.

   Reference values @1440 (section spans y 7917 → 8576, height 659.17):

     section            padding 0, margin 0; ALL the outer air is the card's
     card               white, radius 37.538  (= 4u/3   = --br-radius-xl)
                        outer air   112.615   (= 4u)
                        padding-y    75.077   (= 8u/3)
                        padding-x    56.308   (= 2u     = --br-flow-lg)
     measure column     741.219 wide, 8 of 12 cols with a 2-column offset
     heading            Archivo 800  89.143 / 75.771 (0.85) / normal  #0e0f0c
                        text-wrap: balance — load-bearing, see below
     heading → lead      18.769   (= 2u/3   = --br-flow-xs)
     lead               Inter 600  20 / 28 / +0.005em  #454745
     lead → actions      37.538   (= 4u/3   = --br-flow-md)
     actions gap         14.077   (= u/2    = --br-flow-2xs)
     call CTA           gold pill 200 x 48, 11/24 padding  (.br-btn--primary)
     email CTA          underlined ink label, 252.563 x 48 (.br-btn--ghost)

   Type, colour, the buttons and the container are all shared already, so this
   file only carries the layout and the three places the section departs from
   a base default.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section rhythm.

   The reference puts the outer air on the CARD as margin, and then stops it
   escaping by making the card's wrapper a new block-formatting context — so
   the section measures 659.17 tall INCLUDING that air, and neighbouring
   sections butt straight up against it rather than collapsing into it.

   Stated here as section padding instead. Same geometry to the pixel, one
   fewer moving part, and it cannot collapse into whatever ends up above or
   below this section on assembly.
   -------------------------------------------------------------------------- */
.br-speak {
  /* 4u. Not on the --br-flow-* scale (which tops out at 3u before jumping to
     16u/3), so it is written as the scale writes itself: a multiple of 2u. */
  padding-block: calc(var(--br-flow-lg) * 2);
}

/* The reference narrows this to 8u/3 for the whole tablet+laptop range and
   only returns to 4u at 1440. Measured at 767 → 102.262 (4u) and 768 →
   68.185 (8u/3); at 1439 → 75.067 (8u/3) and 1440 → 112.615 (4u). */
@media (min-width: 768px) {
  .br-speak { padding-block: calc(var(--br-flow-md) * 2); }
}
@media (min-width: 1440px) {
  .br-speak { padding-block: calc(var(--br-flow-lg) * 2); }
}

/* --------------------------------------------------------------------------
   The card.

   White on white at this point in the page, so the only thing it contributes
   visually today is the corner radius — which is why it is not "simplified
   away". Keep it: the section either side of it is tinted in the assembled
   page, and a square corner there would be immediately wrong.
   -------------------------------------------------------------------------- */
.br-speak__card {
  background: var(--br-bg-surface);
  border-radius: var(--br-radius-xl);
  /* 8u/3, flat at every width — the padding does not ramp, only the gutter
     under it does. */
  padding-block: calc(var(--br-flow-md) * 2);
  padding-inline: var(--br-flow-2xs);
}

/* The card's horizontal padding steps on its own breakpoints (480 / 768 /
   1440), which are NOT the container's gutter steps (576 / 768 / 992 / 1200).
   Measured: 12.058 @390, 24.462 @480, 34.092 @768, 56.308 @1440. */
@media (min-width: 480px)  { .br-speak__card { padding-inline: var(--br-flow-sm); } }
@media (min-width: 768px)  { .br-speak__card { padding-inline: var(--br-flow-md); } }
@media (min-width: 1440px) { .br-speak__card { padding-inline: var(--br-flow-lg); } }

/* --------------------------------------------------------------------------
   The measure.

   The reference runs this on a 12-column grid: the content spans 8 columns
   with a 2-column offset, so its width is a function of the column gap rather
   than a flat percentage. Reproduced as the same arithmetic so the line breaks
   land where the reference breaks them — and they are TIGHT. At 1440 the lead
   sets one line 735.58 wide inside a 741.22 column: 5.6px of slack. A
   percentage that is a point or two off re-breaks that line into two and the
   whole section grows 28px.

   The trailing -1px is measured, not decoration: the reference's column comes
   out exactly 1px under the grid arithmetic at every width tested
   (768 / 992 / 1024 / 1440 / 1600 / 1920).

   The offset is stated as a leading margin rather than `margin-inline: auto`
   for the same reason. Centring puts the column half a pixel right of where
   the reference puts it, and half a pixel is not nothing here: at 2x it moves
   every glyph edge in the section onto different subpixels, which is visible
   in a diff as fringing on all three text blocks. Offsetting by the grid's own
   two-column arithmetic lands within 0.02px of the reference at every width.
   -------------------------------------------------------------------------- */
.br-speak__measure {
  width: calc(100% - 1px);
}

@media (min-width: 768px) {
  .br-speak__measure {
    /* 2u/3 across 768–991, 1u from 992 — measured on the row's column-gap. */
    --br-speak-col-gap: var(--br-flow-xs);
    width: calc((100% + var(--br-speak-col-gap)) * 2 / 3 - var(--br-speak-col-gap) - 1px);
    margin-inline-start: calc((100% + var(--br-speak-col-gap)) / 6);
  }
}

@media (min-width: 992px) {
  .br-speak__measure { --br-speak-col-gap: var(--br-flow-sm); }
}

/* --------------------------------------------------------------------------
   Heading.

   .br-display-lg resets text-wrap to initial, because most display headings on
   this page are art-directed with an explicit break. This one is not — the
   reference balances it, and balancing changes the result. At 390 the natural
   break is "Speak directly / with your broker"; the reference reads
   "Speak / directly with / your broker". Setting balance is what reproduces
   that, and it also holds the two-line 636 / 715.97 split at 1440.
   -------------------------------------------------------------------------- */
.br-speak__heading {
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Lead.

   Two departures from base, both measured:
     · weight 600, not the 400 .br-lead assumes — this line is set bold in the
       reference so it reads as a claim rather than as body copy.
     · text-wrap normal. base.css gives every <p> `text-wrap: pretty`, which
       pulls a word down to avoid a short last line. The reference does not:
       at 390 it genuinely ends on "Coast." alone, and at 1024 on a 171px
       last line. Matching means opting out.
   -------------------------------------------------------------------------- */
.br-speak__lead {
  margin-top: var(--br-flow-xs);
  font-weight: var(--br-weight-semibold);
  text-align: center;
  text-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Actions.

   Side by side while they fit, full-width stacked when they do not — and the
   switch is driven by the width of the BUTTON ROW, not the viewport. That
   distinction is the whole behaviour: at 768 the row is only 406px wide (the
   measure is 2/3 of a card that has just gained a fat gutter) so the buttons
   stack, then un-stack again at 900 where the row reaches 494px. A viewport
   media query cannot express that; a container query can, and the threshold
   is measured at 445px.
   -------------------------------------------------------------------------- */
.br-speak__actions {
  container-type: inline-size;
  container-name: br-speak-actions;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--br-flow-2xs);
  margin-top: var(--br-flow-md);
}

@container br-speak-actions (max-width: 445px) {
  .br-speak__cta { width: 100%; }
}

/* Fallback for engines without container queries. Only ever evaluated where
   @container is unsupported, so it cannot fight the rule above. 539px is the
   narrowest viewport at which the reference still shows the two side by side,
   which makes this the closest a viewport query can get: right everywhere
   except 768–899, where it leaves them inline and the reference stacks them.
   Acceptable in a fallback — nothing here overflows or overlaps. */
@supports not (container-type: inline-size) {
  @media (max-width: 539px) {
    .br-speak__cta { width: 100%; }
  }
}

/* --------------------------------------------------------------------------
   The two CTAs.

   The gold pill only takes its 200px floor from 992 up. Below that the
   reference lets it shrink to its label (181.3px at 576–991), and
   .br-btn--primary's default floor would hold it 19px too wide.
   -------------------------------------------------------------------------- */
.br-speak__cta { min-width: 0; }

@media (min-width: 992px) {
  .br-speak__cta--call { min-width: min(var(--br-btn-min-w), 100%); }
}

/* The address is the one label on the page long enough to need a break
   opportunity on a 320px screen. It has none — no spaces — so this only
   guarantees it can never force the card wider than the viewport. */
.br-speak__cta--email {
  white-space: normal;
  overflow-wrap: anywhere;
}