/* Bray Movement School — page-specific section styles. Header, footer,
   buttons, fonts, the generic .section/.page-wrap primitives, the
   .wave/.divider divider primitives and the default transparent header
   overlay all live in public/css/site.css / dividers.css (shared, loaded
   before this file) — not repeated here. Form field/input/button styling
   shared with every other form page lives in public/css/forms.css
   (loaded before this file too). Loaded on bray-movement-school.html
   only.

   FLUID-ENGINE GRID (tablet-fidelity rebuild, 17.09.26)
   ------------------------------------------------------
   Replaces the previous build, which used 1440-fixed font sizes, a fixed
   max-width hero and huge hand-tuned bottom-padding numbers (e.g.
   "40px 28.8px 612.734375px") picked to hit this page's own measured
   TOTAL section height at exactly 375x812 and 1440x900 and nothing else
   — the page matched at those two points only and was +3144px too long
   at 820 / +1365px at 1024 (Phase 7 tablet scan). Live is a Squarespace
   "fluid engine" grid on every one of this page's 5 sections: a fixed
   row count, 11px row/column gaps, two flexible gutter columns and an
   explicit grid-area per block, at two breakpoints (<768px: 8 columns,
   rows minmax(24px, auto); >=768px: 24 columns, rows minmax(container-
   width * 0.0215, auto)). Every grid-area below is copied verbatim from
   live's own raw inline fluid-engine CSS (claude-workspace/working-
   files/website-netlify-migration/wayfinder/raw/bray-movement-
   school.html) — the same 26-line-number column scheme home.css /
   bray-new-student-offer.css already use, so no conversion was needed.
   Section geometry (padding, min-height, vertical centering) was
   confirmed against a fresh live Playwright pull at 11 viewport
   width/height combinations (375x812 up to 1920x1080), not guessed:

     section.page-section  -> section.bms-section  (this page's own
       section class, e.g. .bms-hero, stays alongside it)
       padding-top: 0, except the hero (padding-top = the shared header-
         height formula, live's own section padding-top exactly, no
         extra allowance)
       padding-bottom: 6vw when the section carries a divider (hero,
         nutshell, layers — live's own divider config height, confirmed
         6vw resolves to live's measured padding-bottom to the pixel at
         every width tested), 0 otherwise (logistics, form)
       min-height: 33vh (live's section-height--small: hero, layers) or
         66vh (section-height--medium: nutshell, logistics, form) —
         real runtime floors (see README's "Two findings from sibling
         agents", finding 1); confirmed live-side via getComputedStyle,
         not visible in the static HTML
       display:flex; align-items:center — reproduces live's own runtime
         behaviour of vertically centering the content-wrapper inside
         the section when the floor exceeds the wrapper's own content
         height (confirmed live at 1024x1366 on the form section: a
         28.8px gap appears above AND below the content-wrapper, exactly
         half of minHeight(901.55px) - contentWrapperHeight(843.91px))
     .content-wrapper      -> .bms-fe-wrap
       padding: 3.3vmax 0 (small-preset sections: hero, layers) or
         6.6vmax 0 (medium-preset: nutshell, logistics, form) — `vmax`
         is a real CSS unit and resolves to exactly what live's own
         computed padding measured at every width/height combination
         tested (3.3/6.6 * max(vw,vh)/100)
       display:flex; justify-content:center — centres the .fe grid
         vertically within the wrapper's own padded box when the grid is
         shorter than the wrapper allows (mirrors live's own
         content-wrapper, confirmed getComputedStyle display:flex,
         justify-content:center on every section on this page)
     .fluid-engine          -> .fe .fe-<section>      the grid itself
     .fe-block > .sqs-block  -> .fe-block              grid item + flex
                                 column, top-aligned within its own cell
                                 (matches live's own .sqs-block-alignment-
                                 wrapper { align-items: flex-start; }
                                 on every block on this page)

   Type: live's own Squarespace 7.1 formulas (verified against this
   page's OWN pre-existing hard-coded 375/1440 values, which matched
   the X=2.8/2.2/1.6/1.4/1.5 formula outputs to 4 decimal places before
   this rebuild — same formula bray-new-student-offer.css/home.css
   already proved site-wide, just written here as calc() instead of two
   fixed numbers so it tracks every width in between):
     phone (portrait, <768px): (X-1) * 0.012 * min(100vh, 900px) + 1rem
     desktop/landscape: min((X-1) * 1.2vw + 1rem,
                            max((X-1) * 0.012 * 1400px + 1rem, X * 1rem))
   X = 2.8 (h2: hero heading, Layers heading, Logistics heading), 2.2
   (h3: Nutshell heading, Body/Mind/Spirit sub-headings, each Logistics
   sub-heading), 1.6 (h4: hero sub-line only), 1.4 (body/large text,
   every paragraph on this page), 1.5 (marquee, same X home.css uses).
   Heading line-height = 1.2 * (1 + (1-X)/25); body/large text 1.5;
   marquee 1.4.

   Colours unchanged from the previous build (live getComputedStyle,
   17.09.26): .accent/heading spans #F9AD7D (pale orange, NOT the
   --orange button token), Layers h2's non-accent spans --text-navy,
   Body/Mind/Spirit h3 true black.

   Accepted approximation, carried forward (see checkpoint 05's own
   note and this page's brief): the Body/Mind/Spirit video+text column
   split. Live's own raw grid-areas for each pair OVERLAP by 2-3
   columns (e.g. Body's text block is cols 3-14, its video cols 12-26 —
   a genuine 3-column overlap in live's own markup). Live gets away with
   this because its video block is Squarespace's own Plyr player,
   letterboxed narrower than its grid cell (confirmed by the previous
   build's own comment: a 994x1080 source fills only ~430px of an 830px
   live box) — ours has no such letterboxing, so giving the video its
   full live cell literally painted text over the video pixels
   (screenshot-confirmed at 1440). Text/heading is kept at live's own
   exact grid-area (it drives this section's row-growth height and
   needs to track live's real paragraph wrapping); the VIDEO is trimmed
   instead, at the column where it meets the text — non-overlapping,
   fluid, close to live's real proportions, cosmetic-only. Flagged, not
   chased further — the row COUNTS that actually drive this page's total
   height are live's own exact values regardless of this column-split
   approximation. */

/* ---------- Colour helpers (live getComputedStyle, 17.09.26) ---------- */
.accent { color: #F9AD7D; }
.text-black { color: #000; }
.text-navy { color: var(--text-navy); }

/* ---------- Section anatomy (shared across this page's 5 sections) ---------- */
.bms-section {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  /* site.css's shared `.section` class (every section on this page also
     carries it) sets a default `padding: 40px 22.5px` / `86px 28.8px`
     (site.css:526) -- the vertical half is replaced per-section below
     (min-height/padding-bottom rules), but the HORIZONTAL half was left
     unset by those longhand overrides, silently shrinking every one of
     this page's .fe grids by 45px/57.6px (confirmed via Playwright: the
     Layers grid measured 330px wide at 375 instead of the full 375,
     which wrapped every paragraph far more than live and inflated this
     page's row-growth height by 900px+). The .fe grid owns its own
     left/right gutter via its gutter columns (same convention as
     bray-new-student-offer.css's `.fe-section`/home.css's own section
     rules) -- zeroed here so it isn't applied twice. Same bug, same
     fix, for the TOP padding: `.section`'s default also sets
     `padding-top: 40px`/`86px`, which leaked through on every non-hero
     section (each only had its own padding-BOTTOM overridden below) and
     added a stray 86px to Nutshell's measured height at 1440 (confirmed
     via Playwright: `.bms-nutshell` computed `padding-top: 86px` when
     live's own section padding-top there is 0). `.bms-hero` still wins
     with its own explicit padding-top (same specificity, later in this
     file's own cascade). */
  /* Same leak, bottom side: Logistics and Form carry no divider (live's
     own section-id 6516ca31340e086f3633404d / ...f10 lack the
     `has-section-divider` class), so neither sets its own padding-
     bottom below -- without this, both inherited `.section`'s shared
     86px/40px default too (confirmed the same way as padding-top,
     Playwright showed `.bms-logistics` computed `padding-bottom: 86px`
     against live's real 0). */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.bms-fe-wrap {
  width: 100%;
  padding: 3.3vmax 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bms-fe-wrap--medium { padding: 6.6vmax 0; }

/* ---------- The grid (live's fluid-engine column scheme) ---------- */
.fe {
  --grid-gutter: calc(6vw - 11px);
  --cell-max-width: calc((1400px - 11px * 7) / 8);
  display: grid;
  position: relative;
  width: 100%;
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11px;
  column-gap: 11px;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(2vw - 11px);
    --cell-max-width: calc((1400px - 11px * 23) / 24);
    --container-width: min(1400px, calc(100vw - 2vw * 2));
    --row: calc(var(--container-width) * 0.0215);
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}
.fe-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.fe-block > * { margin: 0; }
/* Live zeroes the last child's own margin-bottom inside every text
   block (its own `.sqs-html-content` reset, matching the
   `.fe-content > :last-child` convention bray-new-student-offer.css
   already uses) -- found missing on this page's Body/Mind/Spirit
   "-text" blocks specifically (only their paired "-full" blocks had an
   explicit `:last-child` rule below): confirmed via Playwright at
   1920x1080, where the extra 16px margin on 3 separate text blocks
   compounded with row-growth to leave this section 264px taller than
   live. General rule below covers every block on the page instead of
   listing each one. */
.fe-block p:last-child { margin-bottom: 0; }
/* Video blocks fill their grid cell exactly (object-fit: cover) rather
   than sizing to their own intrinsic aspect-ratio. Live measurement
   (Body's phone video, 375px full-bleed): live's own rendered height is
   269px at 375px wide (aspect ~1.39), NOT the source's real 994x1080
   (~0.92) aspect ratio -- Squarespace's video block crops to whatever
   height the grid row-growth (driven by the TEXT blocks around it)
   gives it, it never drives that height itself. Plain `height:100%`
   alone doesn't achieve this: CSS Grid's auto-row-sizing measurement
   phase can't resolve a percentage height before the row itself is
   sized, so it falls back to the `<video>` tag's own `width`/`height`
   HTML attributes as an intrinsic aspect ratio -- confirmed by
   Playwright (the video's rendered height didn't change at all between
   an `aspect-ratio` rule and a plain `height:100%` rule). Taking the
   video fully out of flow (`position: absolute; inset: 0`) removes it
   from that measurement step entirely, so it just fills whatever height
   the row-growth (driven by the OTHER blocks in its row range) settles
   on -- the video block itself needs `.fe-video-block` for
   `position: relative` + `overflow: hidden` (the base `.fe-block`'s own
   `position: relative` is reused, but `overflow: hidden` is video-only,
   text blocks must stay visible for descenders etc). */
.fe-block video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}
.b-nut-video, .b-lay-body-video, .b-lay-mind-video, .b-lay-spirit-video { overflow: hidden; }

/* ---------- Type (X values in the file header comment) ---------- */
.b-hero h2,
.b-lay-heading h2,
.b-log-h2 h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.1136;
  font-size: calc(1.8 * 0.012 * min(100vh, 900px) + 1rem);
  margin: 0;
}
.b-nut-text h3,
.b-lay-body-h3 h3, .b-lay-mind-h3 h3, .b-lay-spirit-h3 h3,
.bms-logistics-block h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.1424;
  font-size: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem);
  margin: 0 0 16px;
}
.b-hero h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.1712;
  font-size: calc(0.6 * 0.012 * min(100vh, 900px) + 1rem);
  margin: 0;
}
.b-nut-text p,
.b-lay-body-text p, .b-lay-body-full p,
.b-lay-mind-text p, .b-lay-mind-full p,
.b-lay-spirit-text p, .b-lay-spirit-full p,
.bms-logistics-block p,
.b-form-cta p {
  line-height: 1.5;
  font-size: calc(0.4 * 0.012 * min(100vh, 900px) + 1rem);
  margin: 0 0 16px;
}
.b-nut-text p:last-child,
.b-lay-body-full p:last-child, .b-lay-mind-full p:last-child, .b-lay-spirit-full p:last-child,
.bms-logistics-block p:last-child,
.b-form-cta p:last-child { margin-bottom: 0; }
.bms-marquee {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  font-size: calc(0.5 * 0.012 * min(100vh, 900px) + 1rem);
  white-space: nowrap;
  margin: 0;
}
@media (min-width: 768px), (orientation: landscape) {
  .b-hero h2,
  .b-lay-heading h2,
  .b-log-h2 h2 {
    font-size: min(calc(1.8 * 1.2vw + 1rem), max(calc(1.8 * 0.012 * 1400px + 1rem), 2.8rem));
  }
  .b-nut-text h3,
  .b-lay-body-h3 h3, .b-lay-mind-h3 h3, .b-lay-spirit-h3 h3,
  .bms-logistics-block h3 {
    font-size: min(calc(1.2 * 1.2vw + 1rem), max(calc(1.2 * 0.012 * 1400px + 1rem), 2.2rem));
  }
  .b-hero h4 {
    font-size: min(calc(0.6 * 1.2vw + 1rem), max(calc(0.6 * 0.012 * 1400px + 1rem), 1.6rem));
  }
  .b-nut-text p,
  .b-lay-body-text p, .b-lay-body-full p,
  .b-lay-mind-text p, .b-lay-mind-full p,
  .b-lay-spirit-text p, .b-lay-spirit-full p,
  .bms-logistics-block p,
  .b-form-cta p {
    font-size: min(calc(0.4 * 1.2vw + 1rem), max(calc(0.4 * 0.012 * 1400px + 1rem), 1.4rem));
  }
  .bms-marquee {
    font-size: min(calc(0.5 * 1.2vw + 1rem), max(calc(0.5 * 0.012 * 1400px + 1rem), 1.5rem));
  }
}

/* ---------- Hero (section_id 6515abbab001261ecead3f07) ----------
   Plain cream text hero, no media at y=0, no scrim — header stays
   site.css's shared transparent default. padding-top = the shared
   header-height formula (live's own section padding-top exactly).
   section-height--small (min-height 33vh), divider (wavy, 6vw) ->
   padding-bottom 6vw. */
.bms-hero {
  min-height: 33vh;
  padding-top: calc(37px + 12vw);
  padding-bottom: 6vw;
  text-align: center;
}
@media (min-width: 800px) {
  .bms-hero { padding-top: calc(48.96875px + 2.20052vw); }
}
@media (min-width: 800px) and (max-width: 875.98px) {
  .bms-hero { padding-top: calc(54.34375px + 2.20052vw); }
}
.fe-hero { grid-template-rows: repeat(7, minmax(24px, auto)); }
.b-hero { grid-area: 1/2/8/10; align-items: center; text-align: center; }
@media (min-width: 768px) {
  .fe-hero { grid-template-rows: repeat(8, minmax(var(--row), auto)); }
  .b-hero { grid-area: 1/4/9/24; }
}
.b-hero h2 { color: #F9AD7D; margin-bottom: 22px; }
.b-hero h4 { color: #000; }

.bms-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  z-index: 2;
}
@media (min-width: 800px) {
  .bms-hero-wave { bottom: -45px; }
}

/* ---------- Nutshell (section_id 6515abbab001261ecead3f0a) ----------
   DOM order matches live: text block first, video second — desktop
   grid-area puts the video first visually (live's own grid, no flex
   `order` hack needed). section-height--medium (66vh), divider
   (scalloped, drawn at the TOP of the Layers section below, 6vw) ->
   this section's own padding-bottom 6vw. */
.bms-nutshell {
  min-height: 66vh;
  padding-bottom: 6vw;
}
.fe-nutshell { grid-template-rows: repeat(32, minmax(24px, auto)); }
.b-nut-text { grid-area: 1/2/25/10; }
.b-nut-video { grid-area: 26/2/33/10; }
@media (min-width: 768px) {
  .fe-nutshell { grid-template-rows: repeat(41, minmax(var(--row), auto)); }
  .b-nut-text { grid-area: 20/5/42/23; }
  .b-nut-video { grid-area: 1/3/21/25; }
}
.b-nut-text h3 { color: #F9AD7D; }

/* ---------- The 3 Fundamental Layers (section_id ...f0d) ----------
   Own background colour (live-sampled, unchanged from the previous
   build). section-height--small (33vh), divider (pointed, drawn at
   this section's own bottom, 6vw) -> padding-bottom 6vw. Bracketed by
   two dividers: this page's own pre-existing scalloped-top/pointed-
   bottom straddle offsets (bms-layers-wave-top/-bottom, -20px) are
   unchanged — dividers.css's own shared classes already set height:6vw
   (fluid), only the straddle amount is page-local and untouched by
   this rebuild. */
.bms-layers {
  background: var(--hero-cream);
  min-height: 33vh;
  padding-bottom: 6vw;
}
.bms-layers-wave-top { top: -20px; }
.bms-layers-wave-bottom { bottom: -20px; }

.fe-layers { grid-template-rows: repeat(153, minmax(24px, auto)); }
.b-lay-heading      { grid-area: 1/2/11/10; }
.b-lay-body-video   { grid-area: 12/1/20/11; }
.b-lay-body-h3      { grid-area: 20/2/22/10; }
.b-lay-body-text    { grid-area: 22/2/39/10; }
.b-lay-body-full    { grid-area: 39/2/80/10; }
.b-lay-mind-video   { grid-area: 81/1/89/11; }
.b-lay-mind-h3      { grid-area: 89/2/91/10; }
.b-lay-mind-text    { grid-area: 91/2/106/10; }
.b-lay-mind-full    { grid-area: 106/2/120/10; }
.b-lay-spirit-video { grid-area: 121/1/129/11; }
.b-lay-spirit-h3    { grid-area: 129/2/131/10; }
.b-lay-spirit-text  { grid-area: 131/2/147/10; }
.b-lay-spirit-full  { grid-area: 147/2/154/10; }
@media (min-width: 768px) {
  .fe-layers { grid-template-rows: repeat(92, minmax(var(--row), auto)); }
  .b-lay-heading      { grid-area: 1/3/7/25; }
  /* Body/Mind/Spirit: text/heading kept at live's own exact grid-area
     (this drives row-growth height and needs to match live's real
     paragraph wrapping closely -- an earlier draft over-trimmed the
     text column to remove a column overlap with the video, which
     wrapped paragraphs far more than live and inflated this section's
     row-growth height by 900-1500px against the reference). The VIDEO
     is trimmed instead, at the edge where it meets the text: live's
     own raw grid-areas overlap the video under the text by 2-3 columns
     (e.g. Body's video starts col 12, its text runs to col 14/15), but
     a live screenshot check found this does NOT collide on live itself
     -- live's video block is Squarespace's own Plyr player, letterboxed
     narrower than its grid cell (confirmed by the previous build's own
     comment: a 994x1080 source fills only ~430px of an 830px live box).
     Our build has no such letterboxing (the video fills its own cell
     at its real aspect-ratio), so giving it live's full, overlapping
     cell literally painted text over the video pixels (screenshot-
     confirmed, 1440). Trimmed to stop exactly at the text's own edge
     instead -- a small, cosmetic narrowing of the video only. */
  .b-lay-body-video   { grid-area: 12/15/25/27; }
  .b-lay-body-h3      { grid-area: 8/3/10/14; }
  /* Text/full row boundary: live's own raw values (text ends row 25,
     full starts row 25) share one row on desktop -- a second instance
     of the same off-by-one the video fix above corrects for columns.
     Confirmed by screenshot at 820: the text block's last line ("...
     Fields of movement to explore") rendered under the full block's
     first line ("these qualities..."). Text's own end trimmed back one
     row (26 -> 25) so it stops exactly where full begins; phone's
     values (already 22/39 vs 39/..., correctly adjacent) are untouched. */
  .b-lay-body-text    { grid-area: 10/3/25/15; }
  .b-lay-body-full    { grid-area: 25/3/45/25; }
  .b-lay-mind-video   { grid-area: 49/1/62/14; }
  .b-lay-mind-h3      { grid-area: 46/14/48/25; }
  .b-lay-mind-text    { grid-area: 48/14/62/25; }
  .b-lay-mind-full    { grid-area: 62/3/70/25; }
  .b-lay-spirit-video { grid-area: 74/14/88/27; }
  .b-lay-spirit-h3    { grid-area: 71/3/73/14; }
  .b-lay-spirit-text  { grid-area: 73/3/88/14; }
  .b-lay-spirit-full  { grid-area: 88/3/93/25; }
}
.b-lay-heading h2 { margin-bottom: 24px; }
.b-lay-body-h3 h3, .b-lay-mind-h3 h3, .b-lay-spirit-h3 h3 { color: #000; }

/* ---------- Logistics (section_id 6516ca31340e086f3633404d) ----------
   DOM order matches live and this page's own mobile visual order:
   heading, Location, Amount and Duration, Summer Class Times,
   Conditions, Free Trial, Pricing. Desktop visually swaps Summer Class
   Times ahead of Amount and Duration — live's own grid-area values
   already encode that swap (Summer's rows sit before Amount's), so no
   flex `order` hack is needed, unlike the previous build. section-
   height--medium (66vh), no divider on this section. */
.bms-logistics { min-height: 66vh; }
.fe-logistics { grid-template-rows: repeat(74, minmax(24px, auto)); }
.b-log-h2         { grid-area: 1/2/5/10; }
.b-log-location   { grid-area: 5/2/19/10; }
.b-log-amount     { grid-area: 19/2/32/10; }
.b-log-summer     { grid-area: 32/2/40/10; }
.b-log-conditions { grid-area: 40/2/57/10; }
.b-log-trial      { grid-area: 57/2/66/10; }
.b-log-pricing    { grid-area: 66/2/75/10; }
@media (min-width: 768px) {
  .fe-logistics { grid-template-rows: repeat(66, minmax(var(--row), auto)); }
  .b-log-h2         { grid-area: 1/2/5/16; }
  .b-log-location   { grid-area: 6/2/20/21; }
  .b-log-summer     { grid-area: 20/2/26/21; }
  .b-log-amount     { grid-area: 26/2/35/21; }
  .b-log-conditions { grid-area: 35/2/47/21; }
  .b-log-trial      { grid-area: 47/2/54/21; }
  .b-log-pricing    { grid-area: 55/2/67/21; }
}
.b-log-h2 h2 { margin-bottom: 0; }

/* ---------- "Leave your details below" CTA + form (section_id
   6515abbab001261ecead3f10, heading null) ----------
   DOM order matches live: marquee, CTA text, form. Static
   non-animated repeat-text marquee (site-wide technique, same as every
   other page's own marquee). section-height--medium (66vh), no
   divider. The form's own real height isn't part of live's own grid
   budget (Squarespace renders it via its own embed with different box
   sizing) — matched visually per the existing site-wide convention,
   not pixel-asserted for the form's own internal height. */
.bms-form-section {
  min-height: 66vh;
  text-align: center;
}
.fe-form { grid-template-rows: repeat(21, minmax(24px, auto)); }
.b-form-marquee { grid-area: 1/2/3/10; overflow: hidden; }
.b-form-cta     { grid-area: 3/2/6/10; }
.b-form-embed   { grid-area: 6/2/22/10; text-align: left; }
@media (min-width: 768px) {
  .fe-form { grid-template-rows: repeat(21, minmax(var(--row), auto)); }
  .b-form-marquee { grid-area: 1/1/3/27; }
  .b-form-cta     { grid-area: 3/7/11/21; }
  .b-form-embed   { grid-area: 11/9/22/19; }
}
.b-form-cta { align-items: center; }
.b-form-cta p { text-align: center; }
.bms-form { margin-top: 32px; }