/* ============================================================
   BEAVER BUILDER → THEME LAYER (Serenity Outdoors design system)
   Site-wide defaults so any Beaver Builder content matches the site
   out of the box. Scoped to .fl-builder-content; NO !important, loaded
   late, so per-module Builder settings still win. Tokens mirror
   css/global.css.

   USAGE — apply these via a module/row/column "Advanced → CSS Class":
     Section backgrounds (on a Row):  so-cream | so-cream-2 | so-green | so-dark
     Primitives (in an HTML module):  .eyebrow / .eyebrow--tan / .eyebrow--gold
                                      .btn .btn--light | .btn .btn--ghost (+ .btn--lg)
                                      .link-arrow (+ .link-arrow--light)
   ============================================================ */

.fl-builder-content {
  --cream:    #F5F3EF;
  --cream-2:  #ECE8E2;
  --ink:      #1D1D1B;
  --ink-soft: #3a3b36;
  --gray:     #5a5b54;
  --dark:     #16170f;
  --dark-2:   #1A1B15;
  --green:    #2C3A2E;
  --bronze:   #A8865D;
  --tan:      #E3D2B8;
  --gold:     #C9A877;
  --line:     #E2DCD3;
  --line-2:   #E0DBD3;
  /* legacy aliases (earlier rules referenced these) */
  --brand: var(--bronze);
  --muted: var(--gray);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Headings (sizing left to the Builder, look standardized) ---------- */
.fl-builder-content .fl-heading,
.fl-builder-content .fl-heading .fl-heading-text {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* ---------- Body copy ---------- */
.fl-builder-content .fl-rich-text,
.fl-builder-content .fl-rich-text p,
.fl-builder-content .fl-rich-text li {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
}
.fl-builder-content .fl-rich-text a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  transition: color .3s;
}
.fl-builder-content .fl-rich-text a:hover { color: var(--bronze); text-decoration: underline; }
/* Explicit rhythm so spacing survives global.css's `* { margin:0 }` reset
   when the shared chrome loads it on plain Beaver Builder pages. */
.fl-builder-content .fl-rich-text p { margin: 0 0 1.2em; }
.fl-builder-content .fl-rich-text p:last-child { margin-bottom: 0; }
.fl-builder-content .fl-rich-text ul,
.fl-builder-content .fl-rich-text ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.fl-builder-content .fl-rich-text li { margin-bottom: 8px; }
.fl-builder-content .fl-rich-text blockquote {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--green);
  line-height: 1.4;
  border-left: 2px solid var(--bronze);
  padding-left: 22px;
  margin: 8px 0;
}

/* ---------- Beaver Builder Button module (default = primary) ---------- */
.fl-builder-content .fl-button-wrap a.fl-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--dark);
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 16px 30px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.fl-builder-content .fl-button-wrap a.fl-button:hover { background: var(--bronze); }
.fl-builder-content a.fl-button .fl-button-text,
.fl-builder-content a.fl-button .fl-button-icon { color: #fff; }

/* ---------- Button utilities for HTML modules (mirror global.css .btn) ---------- */
.fl-builder-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 2px;
  white-space: nowrap;
}
.fl-builder-content .btn--lg { font-size: 13px; padding: 18px 32px; transition: background .3s, color .3s, transform .3s; }
.fl-builder-content .btn--light { background: var(--cream); color: var(--dark); transition: background .3s, color .3s; }
.fl-builder-content .btn--light:hover { background: var(--bronze); color: #fff; }
.fl-builder-content .btn--light.btn--lg:hover { transform: translateY(-2px); }
.fl-builder-content .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background .3s, border-color .3s;
}
.fl-builder-content .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* ---------- Eyebrow ---------- */
.fl-builder-content .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
}
.fl-builder-content .eyebrow--tan  { color: var(--tan); }
.fl-builder-content .eyebrow--gold { color: var(--gold); }

/* ---------- Arrow link ---------- */
.fl-builder-content .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--green);
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.fl-builder-content .link-arrow:hover { color: var(--bronze); border-color: var(--bronze); }
.fl-builder-content .link-arrow--light { color: var(--cream); border-color: rgba(245, 243, 239, 0.5); }
.fl-builder-content .link-arrow--light:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Separators ---------- */
.fl-builder-content .fl-separator { border-top-color: var(--line); }

/* ---------- Form fields ---------- */
.fl-builder-content input[type="text"],
.fl-builder-content input[type="email"],
.fl-builder-content input[type="tel"],
.fl-builder-content input[type="url"],
.fl-builder-content input[type="number"],
.fl-builder-content textarea,
.fl-builder-content select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.fl-builder-content input:focus,
.fl-builder-content textarea:focus,
.fl-builder-content select:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 4px rgba(168, 134, 93, .18);
}

/* ============================================================
   SECTION BACKGROUND HELPERS — add to a Row's "Advanced → CSS Class".
   Each flips text/heading/link colors for contrast on that background.
   ============================================================ */
.fl-builder-content .fl-row.so-cream,
.fl-builder-content .fl-row.so-cream > .fl-row-content-wrap { background-color: var(--cream); }
.fl-builder-content .fl-row.so-cream-2,
.fl-builder-content .fl-row.so-cream-2 > .fl-row-content-wrap { background-color: var(--cream-2); }

.fl-builder-content .fl-row.so-white,
.fl-builder-content .fl-row.so-white > .fl-row-content-wrap { background-color: #fff; }

.fl-builder-content .fl-row.so-green,
.fl-builder-content .fl-row.so-green > .fl-row-content-wrap { background-color: var(--green); }
.fl-builder-content .fl-row.so-green .link-arrow { color: var(--gold); border-color: rgba(201, 168, 119, 0.5); }
.fl-builder-content .fl-row.so-green .link-arrow:hover { color: var(--tan); border-color: var(--tan); }

/* Leaf watermark (matches the homepage "Proudly Serving" section) — add
   so-leaf to a row (pairs best with so-green/so-dark). */
.fl-builder-content .fl-row.so-leaf { position: relative; overflow: hidden; }
.fl-builder-content .fl-row.so-leaf::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -70px;
  width: clamp(220px, 26vw, 400px);
  aspect-ratio: 400 / 372;
  background: url("../assets/img/leaf-watermark.png") no-repeat center / contain;
  opacity: 0.12;
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 1;
}
/* The band color must come from the row itself here: the content-wrap layer
   sits above the ::after leaf, so any background on it would hide the leaf. */
.fl-builder-content .fl-row.so-leaf > .fl-row-content-wrap {
  position: relative;
  z-index: 2;
  background-color: transparent;
}
.fl-builder-content .fl-row.so-dark,
.fl-builder-content .fl-row.so-dark > .fl-row-content-wrap { background-color: var(--dark); }

/* Light text on dark/green rows */
.fl-builder-content .fl-row.so-green .fl-heading .fl-heading-text,
.fl-builder-content .fl-row.so-dark .fl-heading .fl-heading-text { color: var(--cream); }
.fl-builder-content .fl-row.so-green .fl-rich-text,
.fl-builder-content .fl-row.so-green .fl-rich-text p,
.fl-builder-content .fl-row.so-green .fl-rich-text li,
.fl-builder-content .fl-row.so-dark .fl-rich-text,
.fl-builder-content .fl-row.so-dark .fl-rich-text p,
.fl-builder-content .fl-row.so-dark .fl-rich-text li { color: rgba(245, 243, 239, 0.78); }
.fl-builder-content .fl-row.so-green .fl-rich-text a,
.fl-builder-content .fl-row.so-dark .fl-rich-text a { color: var(--gold); }
.fl-builder-content .fl-row.so-green .eyebrow { color: var(--gold); }
.fl-builder-content .fl-row.so-dark .eyebrow { color: var(--tan); }

/* ============================================================
   FORM CARD — matches the homepage CTA form. Add the class "so-form-card"
   to a Form/HTML module's "Advanced → CSS Class". Cream card designed to
   sit on a dark/green row (pair with so-dark or so-green for the same pop).
   ============================================================ */
.fl-builder-content .so-form-card {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  background: rgba(245, 243, 239, 0.97);
  border: 1px solid rgba(245, 243, 239, 0.6);
  border-radius: 6px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.fl-builder-content .so-form-card .frm_forms,
.fl-builder-content .so-form-card form { margin: 0; }
.fl-builder-content .so-form-card .frm_form_field,
.fl-builder-content .so-form-card p { margin: 0 0 18px; }
.fl-builder-content .so-form-card .frm_form_field:last-of-type,
.fl-builder-content .so-form-card .frm_submit { margin-bottom: 0; }
.fl-builder-content .so-form-card label,
.fl-builder-content .so-form-card .frm_primary_label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 8px;
}
.fl-builder-content .so-form-card .frm_required { color: var(--bronze); }
.fl-builder-content .so-form-card input[type=text],
.fl-builder-content .so-form-card input[type=email],
.fl-builder-content .so-form-card input[type=tel],
.fl-builder-content .so-form-card input[type=url],
.fl-builder-content .so-form-card input[type=number],
.fl-builder-content .so-form-card input[type=date],
.fl-builder-content .so-form-card select,
.fl-builder-content .so-form-card textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 13px 15px;
  transition: border-color .25s, box-shadow .25s;
  -webkit-appearance: none;
  appearance: none;
}
.fl-builder-content .so-form-card textarea { min-height: 120px; resize: vertical; }
.fl-builder-content .so-form-card input::placeholder,
.fl-builder-content .so-form-card textarea::placeholder { color: var(--gray); opacity: .7; }
.fl-builder-content .so-form-card input:focus,
.fl-builder-content .so-form-card select:focus,
.fl-builder-content .so-form-card textarea:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(168, 134, 93, 0.18);
}
.fl-builder-content .so-form-card .frm_description,
.fl-builder-content .so-form-card .frm_error { font-size: 13px; margin-top: 6px; }
.fl-builder-content .so-form-card .frm_error { color: #b0413e; }
.fl-builder-content .so-form-card .frm_submit { margin-top: 26px; text-align: left; }
.fl-builder-content .so-form-card .frm_submit button,
.fl-builder-content .so-form-card input[type=submit],
.fl-builder-content .so-form-card button[type=submit] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  padding: 17px 34px;
  transition: background .3s, transform .3s;
}
.fl-builder-content .so-form-card .frm_submit button:hover,
.fl-builder-content .so-form-card input[type=submit]:hover,
.fl-builder-content .so-form-card button[type=submit]:hover { background: var(--bronze); transform: translateY(-2px); }

/* ============================================================
   FULL-BLEED MODULE SPACING — on the Beaver Builder full-width page
   template (body.acb-bb-page) our section modules emit their own
   <section> with their own padding, so zero Beaver Builder's default
   node spacing (row-content-wrap padding + module-content margin).
   Per-node Builder padding/margin still wins (higher specificity via
   the .fl-node-<id> selector in BB's per-layout cache).
   ============================================================ */
.acb-bb-page .fl-builder-content .fl-row-content-wrap { padding: 0; }
.acb-bb-page .fl-builder-content .fl-module-content { margin: 0; }
.acb-bb-page .fl-builder-content .fl-row-content { max-width: none; }
/* BB also caps the row element itself (.fl-row-fixed-width, 1300px) — lift it
   so row backgrounds and full-bleed modules truly span edge to edge. */
.acb-bb-page .fl-builder-content .fl-row { max-width: none; }

/* ============================================================
   BLOG — single post (Themer "Single Post" layout) + post-grid cards.
   Row classes (Advanced → CSS Class): so-article (article body row),
   so-related (related-posts row; pair with so-cream-2).
   ============================================================ */

/* ---------- Hero inner: align text with the site container (matches content below).
   Mirrors modules/so-hero/css/frontend.css; lives here too so theme version
   bumps deliver it even when BB's bundled module CSS is browser-cached. ---------- */
.fl-builder-content .so-hero__inner { max-width: var(--maxw, 1240px); }
.fl-builder-content .so-hero__title { max-width: 18ch; }

/* ---------- Hero row (Themer single post): full-bleed like bb-page heroes ---------- */
/* Lift BB's row-level cap (.fl-row-fixed-width = 1300px) on our blog rows so
   row backgrounds span edge to edge; content width is set per-row below. */
.fl-builder-content .fl-row.so-hero-row,
.fl-builder-content .fl-row.so-article,
.fl-builder-content .fl-row.so-related,
.fl-builder-content .fl-row.so-bloghub { max-width: none; }
.fl-builder-content .fl-row.so-hero-row .fl-row-content { max-width: none; }
.fl-builder-content .fl-row.so-hero-row .fl-row-content-wrap { padding: 0; }
.fl-builder-content .fl-row.so-hero-row .fl-module-content { margin: 0; }

/* ---------- Article row: readable measure + rhythm ---------- */
/* White band (full-bleed) behind the article so the text pops on the cream body. */
.fl-builder-content .fl-row.so-article,
.fl-builder-content .fl-row.so-article > .fl-row-content-wrap { background-color: #fff; }
.fl-builder-content .fl-row.so-article .fl-row-content { max-width: 980px; }
.fl-builder-content .fl-row.so-article .fl-row-content-wrap {
  padding: clamp(56px, 8vw, 110px) var(--pad-x) clamp(48px, 6vw, 88px);
}
.fl-builder-content .so-article h1.fl-heading {
  font-size: clamp(38px, 5vw, 64px);
  margin-bottom: 20px;
  text-wrap: balance;
}

/* Post info (date · author) */
.fl-builder-content .so-article .fl-post-info {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  padding-bottom: 22px;
  margin-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.fl-builder-content .so-article .fl-post-info a { color: var(--green); text-decoration: none; }
.fl-builder-content .so-article .fl-post-info a:hover { color: var(--bronze); }

/* Post content (WordPress editor output inside fl-post-content) */
.fl-builder-content .so-article .fl-module-fl-post-content p {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 1.35em;
}
.fl-builder-content .so-article .fl-module-fl-post-content h2,
.fl-builder-content .so-article .fl-module-fl-post-content h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 1.6em 0 0.6em;
}
.fl-builder-content .so-article .fl-module-fl-post-content h2 { font-size: clamp(28px, 3.4vw, 42px); }
.fl-builder-content .so-article .fl-module-fl-post-content h3 { font-size: clamp(23px, 2.6vw, 30px); }
.fl-builder-content .so-article .fl-module-fl-post-content a { color: var(--green); font-weight: 600; text-decoration: none; }
.fl-builder-content .so-article .fl-module-fl-post-content a:hover { color: var(--bronze); text-decoration: underline; }
.fl-builder-content .so-article .fl-module-fl-post-content ul,
.fl-builder-content .so-article .fl-module-fl-post-content ol {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 1.35em;
  padding-left: 1.2em;
}
.fl-builder-content .so-article .fl-module-fl-post-content blockquote {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--green);
  line-height: 1.4;
  border-left: 2px solid var(--bronze);
  padding-left: 22px;
  margin: 1.4em 0;
}
.fl-builder-content .so-article .fl-module-fl-post-content figure {
  margin: clamp(28px, 4vw, 44px) 0;
}
.fl-builder-content .so-article .fl-module-fl-post-content figure img,
.fl-builder-content .so-article .fl-module-fl-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.fl-builder-content .so-article .fl-module-fl-post-content figcaption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--gray);
  margin-top: 10px;
  text-align: center;
}

/* ---------- Related row ---------- */
.fl-builder-content .fl-row.so-related .fl-row-content { max-width: var(--maxw); }
.fl-builder-content .fl-row.so-related .fl-row-content-wrap {
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
  border-top: 1px solid var(--line-2);
}
.fl-builder-content .so-related h2.fl-heading {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: clamp(28px, 3.5vw, 40px);
}

/* ---------- Blog index grid section (full-width bb-page template) ---------- */
.fl-builder-content .fl-row.so-bloghub .fl-row-content { max-width: var(--maxw); margin: 0 auto; }
.fl-builder-content .fl-row.so-bloghub .fl-row-content-wrap {
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
}

/* ---------- Generic padded content section (full-width canvas rows) ----------
   For plain heading/rich-text rows on acb-bb-page layouts, which zero all row
   padding. Add so-cream-2 for an alternate band. */
.fl-builder-content .fl-row.so-section { max-width: none; }
.fl-builder-content .fl-row.so-section .fl-row-content { max-width: var(--maxw); margin: 0 auto; }
.fl-builder-content .fl-row.so-section .fl-row-content-wrap { padding: clamp(56px, 7vw, 96px) var(--pad-x); }
.fl-builder-content .so-section h2.fl-heading { font-size: clamp(30px, 3.8vw, 48px); margin-bottom: clamp(18px, 2.5vw, 28px); }
/* Breathing room between a section heading and the body/text module that
   follows it (the eyebrow → heading gap is unaffected). */
.fl-builder-content .fl-row.so-section .fl-module-heading + .fl-module {
  margin-top: clamp(16px, 1.8vw, 26px);
}
.fl-builder-content .so-section .fl-rich-text { max-width: 72ch; }
.fl-builder-content .so-section .fl-rich-text blockquote + blockquote { margin-top: 22px; }

/* ---------- Two-column so-section rows: gutter + imagery treatment ----------
   BB columns sit flush on the zero-padded canvas; give the second column a
   gutter, and give section photos the homepage image treatment. */
.fl-builder-content .fl-row.so-section .fl-col + .fl-col > .fl-col-content {
  padding-left: clamp(32px, 4.5vw, 64px);
}
@media (max-width: 768px) {
  .fl-builder-content .fl-row.so-section .fl-col + .fl-col > .fl-col-content {
    padding-left: 0;
    padding-top: 28px;
  }
}
.fl-builder-content .fl-row.so-section .fl-photo img {
  border-radius: 4px;
  box-shadow: 0 24px 50px -30px rgba(28, 28, 27, 0.45);
}
/* Eyebrow + heading rhythm (homepage pattern) */
.fl-builder-content .so-section .eyebrow { display: block; margin-bottom: 14px; }

/* ---------- Split rows: so-* section modules inside a column ----------
   Inside a .so-split row the surrounding row provides the band (padding +
   background), so strip the module's own full-bleed section chrome. */
.fl-builder-content .fl-row.so-split .so-points {
  padding: 0;
  background: transparent;
}
.fl-builder-content .fl-row.so-split .so-form-card { margin: 0 0 0 auto; }
/* so-points directly on a dark/green band (non-split): the row provides the
   color, so drop the module's own cream background. */
.fl-builder-content .fl-row.so-dark .so-points,
.fl-builder-content .fl-row.so-green .so-points { background: transparent; }

/* so-points on a dark/green split band: flip its text light */
.fl-builder-content .fl-row.so-dark .so-points__title,
.fl-builder-content .fl-row.so-green .so-points__title { color: var(--cream); }
.fl-builder-content .fl-row.so-dark .so-points__intro,
.fl-builder-content .fl-row.so-green .so-points__intro,
.fl-builder-content .fl-row.so-dark .so-points__item-blurb,
.fl-builder-content .fl-row.so-green .so-points__item-blurb {
  color: rgba(245, 243, 239, 0.78);
}
.fl-builder-content .fl-row.so-dark .so-points__item-title,
.fl-builder-content .fl-row.so-green .so-points__item-title { color: var(--tan); }
.fl-builder-content .fl-row.so-dark .so-points__num,
.fl-builder-content .fl-row.so-green .so-points__num { color: var(--gold); }
.fl-builder-content .fl-row.so-dark .so-points__step,
.fl-builder-content .fl-row.so-green .so-points__step {
  border-bottom-color: rgba(245, 243, 239, 0.14);
}
@media (max-width: 980px) {
  .fl-builder-content .fl-row.so-split .so-form-card { margin: 28px auto 0; }
}

/* ---------- "Why us" strong variant (homepage why-item treatment) ----------
   Add so-why-strong (pair with so-white) to a row holding a so-points grid:
   numbered editorial items with bronze rules instead of plain cards. */
.fl-builder-content .fl-row.so-why-strong .so-points { background: transparent; }
.fl-builder-content .fl-row.so-why-strong .so-points__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 5vw, 64px) clamp(32px, 4.5vw, 60px);
  counter-reset: so-why;
}
.fl-builder-content .fl-row.so-why-strong .so-points__card {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--bronze);
  border-radius: 0;
  padding: 24px 0 0;
  counter-increment: so-why;
}
.fl-builder-content .fl-row.so-why-strong .so-points__card::before {
  content: counter(so-why, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  color: var(--bronze);
  line-height: 1;
  margin-bottom: 14px;
}
.fl-builder-content .fl-row.so-why-strong .so-points__item-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.fl-builder-content .fl-row.so-why-strong .so-points__item-blurb {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--gray);
}
@media (max-width: 760px) {
  .fl-builder-content .fl-row.so-why-strong .so-points__grid { grid-template-columns: 1fr; }
}

/* ---------- Full-width form band: centered intro, wider form card ---------- */
.fl-builder-content .fl-row.so-form-wide .fl-col-content { text-align: center; }
/* .so-section caps rich-text at 72ch for readability but leaves the block
   left-anchored — center the block itself so centered text actually centers. */
.fl-builder-content .fl-row.so-form-wide .fl-rich-text,
.fl-builder-content .fl-row.so-form-wide .fl-heading {
  margin-left: auto;
  margin-right: auto;
}
.fl-builder-content .fl-row.so-form-wide .so-form-card { max-width: 780px; margin: clamp(32px, 4.5vw, 52px) auto 0; }

/* ---------- Crew grid (careers): portrait variant of the service cards ---------- */
/* Pair with so-white: the row provides the band, so strip the module's own bg. */
.fl-builder-content .fl-row.so-crew .so-services { background: transparent; border-top: 0; }
.fl-builder-content .fl-row.so-crew .so-services__grid { grid-template-columns: repeat(3, 1fr); }
.fl-builder-content .fl-row.so-crew .so-svc-card__media { height: 300px; }
.fl-builder-content .fl-row.so-crew .so-svc-card__media img { object-position: center 20%; }
@media (max-width: 1100px) {
  .fl-builder-content .fl-row.so-crew .so-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .fl-builder-content .fl-row.so-crew .so-services__grid { grid-template-columns: 1fr; }
}

/* ---------- Trust bar (service-area pages, under the hero) ---------- */
.fl-builder-content .so-trustbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 56px) var(--pad-x);
  text-align: center;
}
.fl-builder-content .so-trustbar .eyebrow { display: inline-block; line-height: 1.9; }

/* ---------- Service-area tiles: map-marker icon before each city name ---------- */
.fl-builder-content .so-areas-grid .fl-post-grid-title a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fl-builder-content .so-areas-grid .fl-post-grid-title a::before {
  content: "";
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  background-color: var(--bronze);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fl-builder-content .so-areas-grid .fl-post-grid-post:hover .fl-post-grid-title a::before {
  background-color: var(--green);
}
/* Make the whole tile clickable (stretched link over the card), not just the
   city name — the title's own <a> covers the full post card. */
.fl-builder-content .so-areas-grid .fl-post-grid-post { position: relative; }
.fl-builder-content .so-areas-grid .fl-post-grid-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.fl-builder-content .so-areas-grid .fl-post-grid-post { cursor: pointer; }

/* ---------- Post-grid cards (related posts + blog index) ---------- */
.fl-builder-content .fl-post-grid { margin: 0; padding: 0; }
.fl-builder-content .fl-post-grid-post {
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .35s, transform .35s, box-shadow .35s;
}
.fl-builder-content .fl-post-grid-post:hover {
  border-color: var(--bronze);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -26px rgba(28, 28, 27, 0.4);
}
.fl-builder-content .fl-post-grid-image img { width: 100%; height: auto; display: block; }
.fl-builder-content .fl-post-grid-text { padding: 26px; }
.fl-builder-content .fl-post-grid-title {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.fl-builder-content .fl-post-grid-title a { color: var(--ink); text-decoration: none; transition: color .3s; }
.fl-builder-content .fl-post-grid-title a:hover { color: var(--green); }
.fl-builder-content .fl-post-grid-meta {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 14px;
}
.fl-builder-content .fl-post-grid-meta a { color: var(--gray); text-decoration: none; }
.fl-builder-content .fl-post-grid-meta a:hover { color: var(--bronze); }
.fl-builder-content .fl-post-grid-content,
.fl-builder-content .fl-post-grid-content p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray);
  margin: 0 0 14px;
}
.fl-builder-content .fl-post-grid-more,
.fl-builder-content .fl-post-grid-content .fl-post-grid-more {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.fl-builder-content a.fl-post-grid-more:hover { color: var(--bronze); }