/*
 * FMG compatibility layer.
 *
 * Every imported page is still FMG markup and leans on FMG's building-block
 * classes: .o-container for width, .o-grid__collapse and .c-box__count--N for
 * box rows, .ScaleToFit for section background photos, and the .dev-ds*
 * helpers. That CSS lived in FMG's external stylesheets, which this site does
 * not load, so the pages rendered unstyled: sections ran the full window
 * width, box rows stacked one per row, and hero photos lost their crop.
 *
 * These are the layout primitives those pages need, transcribed from the
 * archived FMG stylesheets in site-snapshot/assets/. Values were verified
 * against the rendered old site, not just read off the source.
 */

/* FMG palette. The page-level custom CSS refers to these by name and they were
   defined in FMG's template chrome, so they did not come across with the
   content. */
:root {
  --paletteColor1: #1e2f4b;
  --paletteColor2: #c5a572;
  --paletteColor3: #334e75;
  --bodyFontColor: #000;
  --lineColor: var(--paletteColor3);

  /* Button tokens, copied from the old site's own :root block. Deliberately no
     --btnBackgroundColor: the old site did not set one at :root either, so
     buttons fell through to the paletteColor3 fallback in the .c-btn rule and
     rendered #334e75. Defining it here would turn every button navy. */
  --btnTextColor: #fff;
  --btnTextHoverColor: #000;
  --btnBorderRadius: 5px;
  --btnTextTransform: none;
  --offWhiteColor: #f8f9fa;
  --btnBackgroundHoverColor: var(--offWhiteColor);
}

/* Bootstrap-style container widths every FMG section is laid out against.
   Without these the hero copy ran edge to edge instead of sitting in a
   centred 750/950/1170px column. */
.o-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;
}

@media (min-width: 768px)  { .o-container { width: 750px; } }
@media (min-width: 992px)  { .o-container { width: 950px; } }
@media (min-width: 1200px) { .o-container { width: 1170px; } }

/* Sections that carry their photo as a background image. Missing this, the
   hero fell back to background-size:auto at 0% 0%, which zoomed the photo into
   its top-left corner. */
section.ScaleToFit:not(.parallax),
header.ScaleToFit:not(.parallax) {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

section.ScaleToFit.parallax,
header.ScaleToFit.parallax {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

/* Section backgrounds must fill the band edge to edge. FMG's OriginalSize class
   name is misleading on wide viewports: without cover, the photo sits at natural
   width and dev-colorBackground navy shows on the sides (homepage Partner band). */
section.OriginalSize:not(.parallax),
header.OriginalSize:not(.parallax) {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Sections flagged as colour-backed sit on paletteColor1 with white headings.
   The background shorthand only supplies the colour here; the section's own
   inline background-image is more specific, so the photo still shows through
   and the colour fills whatever the photo does not cover. */
#content.o-content__container section.section.dev-colorBackground,
.dev-colorBackground {
  background: var(--themeColorBackground, var(--paletteColor1));
}

.dev-colorBackground { --headingColor: var(--themeColorBackgroundText, #fff); }

.dev-colorBackground .c-sxs--description,
.dev-colorBackground .box-copy,
.dev-colorBackground form {
  color: var(--themeColorBackgroundText, #fff);
}

/* Box rows only. Every other grid row on the old site stayed a block with
   floated children, so this must not be widened to .o-grid__collapse: doing
   that turns single-child rows into shrink-to-fit flex items, and any child
   positioned with left:50% then resolves against the wrong width. That is what
   pushed the "Planning, capital, and legacy" band 245px off the left edge. */
.c-grid__collapse--Boxes { display: flex; flex-wrap: wrap; }

/* The floated rows need FMG's clearfix so they still contain their children. */
.o-grid__collapse::after { content: ""; display: block; clear: both; }

/* Text and rich-text blocks are floated 20px in from the container edge. Also
   what gives full-bleed children a parent that is centred in the viewport,
   which their left:50% / margin-left:-50vw pairing depends on. */
.c-text__section,
.c-rich-text__section {
  width: calc(100% - 40px);
  float: left;
  margin-left: 20px;
}

.c-rich-text__section { line-height: 1.5; }

.u-text-align--Left   { text-align: left; }
.u-text-align--Center { text-align: center; }
.u-text-align--Right  { text-align: right; }

.c-text__section.u-text-align--Left .box-copy   { align-items: flex-start; }
.c-text__section.u-text-align--Center .box-copy { align-items: center; }
.c-text__section.u-text-align--Right .box-copy  { align-items: flex-end; }

/* Base vertical rhythm for every imported section. Page-level custom CSS came
   across with the content and overrides this where a section needs more room
   (the homepage hero asks for 200px), so this only sets the floor. */
.c-customsection__container {
  padding: 50px 0;
  position: relative;
}

/* Full-bleed bands break out with left:50% / margin-left:-50vw, which only
   lands on centre if their containing block is itself centred in the viewport.
   The page CSS pins this container's margin to 0, so once .o-container gained a
   fixed width above it sat hard against the left edge and dragged the band with
   it. Letting the container span the full-width overlay restores the centre.
   Deliberately more specific than the page rule so it wins despite both being
   !important. */
section.section_Html:has(.cx-imgbreak) > .overlay > .o-container.c-customsection__container {
  width: 100% !important;
  max-width: 100% !important;
}
section.section_Html:has(.cx-imgbreak) .c-rich-text__section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

.section_Boxes .c-grid__item { width: calc(100% - 40px); margin-left: 20px; }

@media (min-width: 768px) {
  .section_Boxes.c-box__count--2 .c-grid__item { width: calc(50% - 33px); margin-left: 22px; }
  .c-box__count--2 .c-grid__collapse--Boxes { margin-left: -22px; margin-right: -22px; width: calc(100% + 44px); }

  .section_Boxes.c-box__count--3 .c-grid__item { width: calc(33.3333333333% - 1.3333333333%); margin-left: 1%; }
  .c-box__count--3 .c-grid__collapse--Boxes { margin-left: -1%; margin-right: -1%; width: calc(100% + 2%); }

  .section_Boxes.c-box__count--4 .c-grid__item { width: calc(50% - 4.5%); margin-left: 3%; }
  .c-box__count--4 .c-grid__collapse--Boxes { margin-left: -3%; margin-right: -3%; width: calc(100% + 6%); }
}

@media (min-width: 992px) {
  .section_Boxes.c-box__count--2 .c-grid__item { width: calc(50% - 52.5px); margin-left: 35px; }
  .c-box__count--2 .c-grid__collapse--Boxes { margin-left: -35px; margin-right: -35px; width: calc(100% + 70px); }

  .section_Boxes.c-box__count--4 .c-grid__item { width: calc(25% - 1.25%); margin-left: 1%; }
  .c-box__count--4 .c-grid__collapse--Boxes { margin-left: -1%; margin-right: -1%; width: calc(100% + 2%); }
}

/* FMG's sections.css cancels those negative row margins for box sections, so
   the row stays flush with the container instead of bleeding outside it. It
   must stay after the rules above, which is how FMG's load order resolved it.
   Without this the cards measured 434px against the old site's 410px. */
.section_Boxes .c-grid__collapse--Boxes,
.section_SimpleText .c-grid__collapse--SimpleText,
.section_Form .c-grid__collapse--Form {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* FMG's global heading scale, from the h1-h6 block in sections.css. Without it
   imported headings fell through to the browser default, which is 1.5em BOLD
   for an h2: 27px/700 against the old site's 36px/400. Bold Playfair at a
   smaller size is what read as "less clean" than the old site.

   The site never overrode FMG's --heading*FontSize / --headingFontWeight
   variables, so these are FMG's own defaults with the fallbacks inlined.
   Against an 18px body that puts h2 at 2em = 36px, weight normal, which is
   what the old site computes today.

   Wrapped in :where() so the whole block carries the specificity of a bare
   element selector. That is deliberate: the per-page <style> block that ships
   inside each imported page must keep winning, and so must the hand-written
   .cx-* rules on the rewritten pages. This only catches headings that would
   otherwise have no author styling at all. */
/* line-height:normal is FMG's `initial`, not an oversight. Headings must not
   inherit the 1.5 that .c-rich-text__section sets for body copy, or a two-line
   36px heading opens up to 54px leading and stops reading as one unit. The
   1.2 that FMG defines for --headingLineHeight is scoped to .dev-ds h1 only,
   and the .dev-ds block further down still applies it. */
:where(.c-customsection__container) h1 {
  font-size: 3em;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 15px;
  padding: 30px 0 0;
}

:where(.c-customsection__container) h2 {
  font-size: 2em;
  font-weight: normal;
  line-height: normal;
  margin: 30px 0 10px;
}

:where(.c-customsection__container) h3 {
  font-size: 1.5em;
  font-weight: normal;
  line-height: normal;
  margin: 5px 0 1em;
}

:where(.c-customsection__container) h4 {
  font-size: 1.25em;
  font-weight: normal;
  line-height: normal;
  margin: 1.33em 0;
}

:where(.c-customsection__container) :is(h5, h6) { font-weight: normal; }

/* Side-by-side sections, from the .c-sxs__* block in the FMG template CSS.
   These pages pair a text column with an image column, and FMG floated the two
   at 50% each from 992px up. Without the rules both columns fell back to full
   width and stacked, which is why Business Advisory rendered as image first and
   text underneath instead of text left / image right.

   The 60px gutter and the u-push / u-pull offsets are FMG's, not invented: the
   markup puts the image first in source order on every "Right" section and then
   swaps the two visually, so the text still reads first for screen readers and
   on mobile. Six pages ship those classes. */
.c-sxs__image,
.c-sxs__text {
  width: calc(100% - 40px);
  float: left;
  margin-left: 20px;
}

@media (min-width: 768px) {
  .c-sxs__image,
  .c-sxs__text { width: calc(50% - 22.5px); margin-left: 15px; }
}

@media (min-width: 992px) {
  .c-sxs__image,
  .c-sxs__text { width: calc(50% - 90px); margin-left: 60px; }

  /* The visual swap. Only from 992px up, so narrow screens keep source order
     and the columns stack text-then-image. */
  .c-sxs__image.u-push { position: relative; left: calc(50% - 90px + 60px); }
  .c-sxs__text.u-pull  { position: relative; left: calc(-50% - 30px + 60px); }

  .c-sxs__image { text-align: center; }
  .c-sxs__text  { text-align: left; }
}

.section_SideBySide .sidebyside-wrapper .c-sxs__image { text-align: center; }
.section_SideBySide .sidebyside-wrapper.Left .c-sxs__text { text-align: left; }
.c-sxs__image.c-image--right { text-align: right; }

/* Stacked columns need the gap under the image; side-by-side ones do not. */
.section_SideBySide .c-sxs__image .wrap { margin-bottom: 25px; }
@media (min-width: 992px) { .section_SideBySide .c-sxs__image .wrap { margin-bottom: 0; } }

.c-sxs__text > h2,
.c-sxs__text > h2 > p { margin-top: 0; }
.c-sxs__text .c-sxs--description { margin-bottom: 15px; }
.c-sxs__text .c-sxs--description img { max-width: 100%; }

/* Box cards. FMG made every card a full-height flex column with centred text;
   none of that came across, so the cards lost their centring and their icons,
   and rows of unequal copy no longer lined up. */
.section_Boxes .c-section-boxes__inner-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 25px;
  text-align: center;
}

.c-section-boxes__inner-box .c-box__title { margin-top: 10px; margin-bottom: 10px; }
.c-section-boxes__inner-box .c-box__title > p,
.c-section-boxes__inner-box h2 > p { margin: 0; line-height: normal; }
.c-section-boxes__inner-box .c-box__paragraph { margin-bottom: 10px; line-height: 1.5; }
.c-section-boxes__inner-box .c-box__paragraph > p { margin: 0; }

/* Buttons drop to the bottom so they align across a row of uneven cards. */
.c-section-boxes__inner-box .c-box__btn { margin-top: auto; }

.c-grid__item.c-box-text__align--Left  :is(.c-box__title, .c-box__paragraph) { text-align: left; }
.c-grid__item.c-box-text__align--Right :is(.c-box__title, .c-box__paragraph) { text-align: right; }
.c-grid__item.c-box-text__align--Center :is(.c-box__title, .c-box__paragraph) { text-align: center; }
.c-grid__item.c-box-text__align--Left .c-box__btn  { align-self: flex-start; }
.c-grid__item.c-box-text__align--Right .c-box__btn { align-self: flex-end; }
.c-grid__item.c-box-text__align--Center .c-box__btn,
.c-grid__item.c-box-text__align--None .c-box__btn { align-self: center; }

/* Every exported card title is wrapped in a stray <sup>, e.g.
   <h2 class="c-box__title"><sup>Insurance Architecture...</sup></h2>. FMG's
   editor script stripped those before paint, so they are not in the old site's
   live DOM at all and the titles render at full size on their own baseline.
   Nothing strips them here, so the browser applied its <sup> default of
   font-size:smaller plus vertical-align:super. That is the shrunken, raised
   card text on Family Stewardship. Neutralising the element is equivalent to
   FMG's removal and needs no re-import of the page content. */
.c-box__title sup,
.c-box__paragraph sup {
  font-size: inherit;
  vertical-align: baseline;
  top: 0;
}

/* FMG's markup wraps each icon in <a href="#"> and relied on its own script to
   strip the href. Left alone the icon is a link that jumps to the top of the
   page, so make it inert instead. */
.c-box-icon--link { pointer-events: none; cursor: default; text-decoration: none; }

/* FMG design-section helpers, from other__global-asset-styles.css. The
   :where() wrappers keep these at low specificity exactly as FMG shipped them,
   so page-level custom CSS still wins. .dev-ds_text-white is what makes the
   hero headline white against the photo. */
.dev-ds :where(h1, h2, h3, h2 a, h3 a) {
  color: var(--headingColor, #000);
  font-weight: var(--headingFontWeight, bold);
  text-transform: var(--headingTextTransform, none);
  letter-spacing: var(--headingFontLetterSpacing, normal);
}

.dev-ds :where(p, li) { color: var(--bodyFontColor, #666); }
.dev-ds :where(h1) { font-size: var(--heading1FontSize, 3em); line-height: var(--heading1LineHeight, 1.2); }
.dev-ds :where(h2) { font-size: var(--heading2FontSize, 2em); }
.dev-ds img { display: block; }

.dev-ds_text-center { text-align: center; }
.dev-ds_text-white :where(h1, h2, h3, p) { color: #fff; }
.dev-ds_text-white :where(.horizontalLine) { --lineColor: #fff; }
.dev-ds_text :where(h1, h2, h3) { text-wrap: balance; }
.dev-ds_text :where(p) { text-wrap: pretty; }
.dev-ds_hero .ds_subheading :where(p) { font-size: 1.25rem; font-weight: 500; }

@media (min-width: 992px) {
  .dev-ds_text :where(p.ds_text-narrow) { max-width: 65ch; }
  .dev-ds_text :where(p.ds_text-center) { margin-inline: auto; }
}

/* Buttons are styled site-wide, not only inside .dev-ds sections. The
   "Partner With Us" button is a plain .c-btn, so scoping this to .dev-ds left
   it rendering as an underlined navy text link. */
.c-btn,
.submit,
.c-popup__submit {
  display: inline-block;
  color: var(--btnTextColor, #fff);
  background: var(--btnBackgroundColor, var(--paletteColor3, inherit));
  border: var(--btnBorderWidth, 0px) solid var(--btnBorderColor, transparent);
  border-radius: var(--btnBorderRadius, 0px);
  font-size: var(--btnFontSize, inherit);
  text-transform: var(--btnTextTransform, uppercase);
  font-weight: var(--btnFontWeight, bold);
  padding: var(--btnPadding, 15px 20px);
  text-decoration: none;
  transition: ease-in 0.2s all;
}

.c-btn:hover,
.c-btn:active,
.c-btn:focus,
.submit:hover,
.c-popup__submit:hover {
  color: var(--btnTextHoverColor, #fff);
  background: var(--btnBackgroundHoverColor, var(--paletteColor2, inherit));
  border-color: var(--btnBorderHoverColor, transparent);
  text-decoration: none;
}

.dev-EnableHorizontalLine .horizontalLine {
  background: var(--lineColor, var(--paletteColor3));
  width: var(--ds-horizontal-line-width, 100px);
  height: var(--ds-horizontal-line-height, 3px);
  margin: 20px 0;
}

/* Founder Note: hide the leftover job title and phone. The letter headline
   lives in .cx-founder-letter-head so it is not caught by this. */
#agentContent > h2,
#agentContent > h2 + p {
  display: none !important;
}

.cx-founder-letter-head {
  display: flex;
  align-items: center;
  gap: 40px 48px;
  max-width: 920px;
  padding: 48px 0 12px;
}

.cx-founder-letter-head .img-agentContent {
  display: block;
  flex: 0 0 300px;
  width: 300px;
  height: 300px;
  max-width: 100%;
  margin: 0;
  object-fit: cover;
}

.cx-founder-letter-titles {
  flex: 1;
  min-width: 0;
}

.cx-founder-letter-kicker {
  margin: 0 0 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #334e75;
}

.cx-founder-letter-head h1 {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.15;
  color: #1a2744;
}

.cx-founder-letter-head h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: #c4a962;
  margin-top: 18px;
}

@media (max-width: 767px) {
  .cx-founder-letter-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 0 8px;
  }
  .cx-founder-letter-titles { order: -1; }
  .cx-founder-letter-head .img-agentContent {
    flex-basis: auto;
    width: 220px;
    height: 220px;
  }
  .cx-founder-letter-head h1 { font-size: 2rem; }
}

#agentContent {
  padding: 12px 0 72px;
  max-width: 720px;
}

#agentContent .img-agentContent {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 0 0 28px;
}

#agentContent p {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 15px;
}

#agentContent p strong {
  font-weight: 600;
}