/* ==========================================================================
   HOMEPAGE SECTIONS — Fletcher Estate Planning
   Every value here was measured against .claude/shots/design/*.png at 1440px.

   Two Spectra behaviours dictate the !importants below (known-overrides.md):
     1. Direct children of a uagb container are forced to position:relative,
        which silently kills absolutely-positioned scrims and background layers.
     2. Every non-container child of a uagb container is forced to width:100%
        at ~(0,12,1) specificity, so anything that must size to its content has
        to opt out explicitly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Astra page-builder template strips max-width from section children.
   `site-content-layout = page-builder` on this page brings in
     .ast-page-builder-template .entry-content[data-ast-blocks-layout]
       > .inherit-container-width > * { max-width: none }
   at specificity (0,4,0) — located with CDP CSS.getMatchedStylesForNode. Spectra
   puts `inherit-container-width` on the container, so EVERY direct child of a
   section is hit: the Why card, the closing card, the hero inner, the services
   head. Measured: the Why card computed max-width:none and rendered 1160px wide
   instead of the design's 900px offset-left card.
   Every max-width below that has to survive therefore carries !important.
   -------------------------------------------------------------------------- */

/* ============================== 1. HERO ================================== */

.fep-section.fep-hero {
  min-height: 733px !important;          /* measured */
  padding-block: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden;
  isolation: isolate;
}

.fep-hero .fep-hero__bg,
.fep-hero .fep-hero__scrim {
  position: absolute !important;          /* Spectra forces relative on children */
  inset: 0 !important;
  width: auto !important;
  z-index: 0;
}
.fep-hero .fep-hero__bg {
  /* root-relative path so a Local -> Flywheel migration cannot bake in a host */
  background-image: url("/wp-content/uploads/2026/09/hero-grandfather-granddaughter-bike.jpg");
  background-size: cover;
  background-position: 62% center;
}
.fep-hero .fep-hero__scrim {
  background: linear-gradient(96deg, rgba(35,74,96,.94) 0%, rgba(38,82,104,.86) 32%, rgba(44,96,120,.42) 58%, rgba(44,96,120,.05) 78%, rgba(44,96,120,0) 100%);
}

.fep-hero .fep-hero__inner {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  max-width: 620px !important;
  padding-block: 74px 0;
  /* WordPress's constrained-layout rule sets
       :where(body .is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { margin-left: auto !important; margin-right: auto !important }
     Those auto margins are !important in CORE, so any block child we give a
     max-width gets silently centred. Measured before this fix: margin-left and
     margin-right both computed to 270px — exactly (1160 - 620) / 2 — putting the
     H1 at x=410 instead of the design's x=140. Needs !important to win. */
  margin-inline: 0 !important;
}

.fep-hero .fep-hero__title {
  color: #fff;
  font-size: 64px;
  line-height: 1.14;
  font-weight: 500;
  margin: 0 0 34px;
  /* Measured max-width in the design is 619px, which is what makes the headline
     break to two lines and keeps it clear of the photo. The real H1 is shorter
     than the lorem placeholder, so without this cap it runs one long line
     straight across the image. */
  max-width: 619px !important;
}
.fep-hero .fep-hero__cta { margin-bottom: 42px; }

.fep-hero .fep-hero__review { max-width: 560px; }
.fep-hero .fep-hero__quote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;                              /* STYLE.md: testimonials are unadorned */
}
.fep-hero .fep-hero__quote p {
  color: rgba(255,255,255,.94);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}
.fep-hero .fep-hero__attr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin: 0;
}
.fep-hero .fep-hero__attr span { opacity: .55; padding-inline: 6px; }

/* five-star row — accent green per STYLE.md */
.fep-stars { display: flex; gap: 6px; margin-bottom: 20px; }
.fep-star {
  width: 15px;
  height: 15px;
  background-color: var(--fep-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.6 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.6 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  flex: 0 0 auto;
}
/* Sampled from the design at the star strip: rgb(198,233,214) = #C6E9D6, which is
   the system's --accent-light. STYLE.md says star ratings use the accent colour,
   but on the dark hero the design uses the LIGHT variant for contrast. */
.fep-hero .fep-stars .fep-star { background-color: var(--fep-accent-light); }

/* Trust badges — SIX cards in a rail along the hero's lower edge.
   Measured: 272x96 each, 24px gap, running x=140 to x=1620, so the strip
   intentionally overflows a 1440 viewport. Two Spectra/scroll-rail rules apply
   here (known-overrides.md): containers default to justify-content:center, which
   on an overflowing rail centres the overflow and gives the first card a negative
   x while scrollLeft is still 0 (the rail looks pre-scrolled) — so flex-start is
   forced; and scroll-snap plus a leading padding snaps that padding out of view,
   so there is no snap. */
.fep-hero .fep-badges {
  position: relative !important;
  z-index: 2;
  display: flex !important;
  justify-content: flex-start !important;
  gap: var(--fep-grid-gap);
  width: 100% !important;
  margin-top: auto;
  padding-block: 0 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.fep-hero .fep-badges::-webkit-scrollbar { display: none; }
.fep-hero .fep-badge {
  background: #fff;
  border-radius: var(--fep-radius-sm);
  width: 272px !important;      /* Spectra forces width:100% on container children */
  flex: 0 0 272px !important;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
}
.fep-hero .fep-badge__img {
  max-height: 58px;
  width: auto !important;                 /* Spectra width:100% trap */
  max-width: 100%;
  object-fit: contain;
}

/* ====================== 2/6. TWO-COLUMN TEXT BLOCKS ====================== */
/* Sections 3, 7 and 12 of the design are the same block; only the background
   and type colour differ. .fep-on-dark supplies the teal gradient. */

.fep-section.fep-textblock .fep-twocol { align-items: flex-start; }
.fep-section.fep-textblock .fep-twocol__aside h2 { margin: 0; }

/* ============================ 3. SERVICES =============================== */

.fep-section.fep-services { text-align: left; }
.fep-services .fep-services__head {
  text-align: center;
  max-width: 860px !important;
  margin: 0 auto 44px;
}
.fep-services .fep-services__head h2 { margin: 0; text-align: center; }
.fep-services .fep-services__intro { margin-top: 28px; }
.fep-services .fep-services__intro p { text-align: center; }

.fep-services .fep-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fep-grid-gap);
  width: 100% !important;
}

.fep-tile {
  position: relative;
  display: block;
  min-height: 317px;                       /* measured */
  border-radius: var(--fep-radius-md);     /* 16px measured, not tokens' 10px */
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.fep-tile .fep-tile__img,
.fep-tile .fep-tile__scrim {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  display: block;
}
.fep-tile .fep-tile__img {
  background-size: cover;
  background-position: center;
  transition: transform var(--fep-ease-reveal);
}
.fep-tile .fep-tile__scrim {
  background: linear-gradient(to top, rgba(16,32,40,.86) 0%, rgba(16,32,40,.52) 34%, rgba(16,32,40,.16) 62%, rgba(16,32,40,.06) 100%);
}
.fep-tile .fep-tile__title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 22px 24px;
  color: #fff;
  font-family: var(--fep-font-heading);
  font-size: 24px;
  line-height: 1.24;
  font-weight: 500;
  /* headline sits at the bottom-left of the tile */
  display: flex;
  align-items: flex-end;
  min-height: 317px;
}
/* STYLE.md: hover is EITHER a shadow lift OR a translate, never both, and the
   tile box never resizes — so the image scales inside a fixed frame. */
.fep-tile:hover .fep-tile__img { transform: scale(1.04); }

/* ========================= 4/8. BLEED IMAGE BLOCKS ====================== */
/* The image runs off ONE viewport edge with only its inner corners rounded.
   Measured in the design at 1440:
     bleed-left  : image 0..594   gap 72   text 666..1300   (right gutter 140)
     bleed-right : text 140..760  gap 72   image 832..1440  (left gutter 140)

   Implemented by zeroing the section's inline padding and putting the gutter on
   the CONTENT side only, so the media column starts at the true viewport edge.

   The previous approach — a negative margin on the media — silently did nothing,
   which is worth recording: `calc((100% - 1240px) / 2 + 40px)` inside a grid ITEM
   resolves `100%` against the grid TRACK (560px), not the section, so the
   expression went negative, `max()` clamped it to the 40px floor, and the
   declaration computed to 0px. The image never left the container edge.

   `gap` needs !important: the base reset in style.css sets `gap: 0 !important` on
   `.fep-section.wp-block-uagb-container`, which is this very element, so an
   unflagged `gap` here loses to our own reset — measured as a 0px gutter between
   image and text. */

.fep-section.fep-bleed {
  display: grid !important;
  align-items: center;
  gap: 72px !important;
  padding-inline: 0 !important;
}

.fep-section.fep-bleed--left {
  grid-template-columns: 594fr 634fr;
  padding-right: max(var(--fep-pad-inline), calc((100% - var(--fep-container)) / 2 + var(--fep-pad-inline))) !important;
}
.fep-section.fep-bleed--right {
  grid-template-columns: 620fr 608fr;
  padding-left: max(var(--fep-pad-inline), calc((100% - var(--fep-container)) / 2 + var(--fep-pad-inline))) !important;
}

.fep-bleed .fep-bleed__media {
  width: auto !important;
  align-self: center;
  display: block;
}
.fep-bleed .fep-bleed__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Aspect ratios from the design's own image boxes, so height tracks the column
   width rather than a pinned pixel value. The design does NOT stretch these to
   the section height — they sit centred, with air above and below when the text
   column runs longer. The radius sits on the image here; in the design it is on a
   wrapper with overflow:hidden, which is equivalent. */
.fep-bleed--left .fep-bleed__img {
  aspect-ratio: 594 / 490;
  border-radius: 0 var(--fep-radius-md) var(--fep-radius-md) 0;
}
.fep-bleed--right .fep-bleed__img {
  aspect-ratio: 608 / 461;
  border-radius: var(--fep-radius-md) 0 0 var(--fep-radius-md);
}

.fep-bleed .fep-bleed__body { width: auto !important; }
.fep-bleed .fep-bleed__body h2 { margin-top: 0; }

/* ============================= 5. REVIEWS =============================== */

.fep-section.fep-reviews .fep-reviews__head { margin-bottom: 36px; }
.fep-section.fep-reviews .fep-reviews__head h2 { margin: 0; }
.fep-section.fep-reviews .fep-reviews__widget { width: 100% !important; }
.fep-section.fep-reviews .fep-reviews__cta {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}

/* ============================== 7. TEAM ================================= */

.fep-section.fep-team { text-align: center; }
.fep-section.fep-team > .fep-heading { margin: 0 auto 46px; }

.fep-team .fep-lead {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  text-align: left;
  width: 100% !important;
  margin-bottom: 48px;
}
.fep-team .fep-lead__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fep-radius-md);
}
.fep-team .fep-lead__name { margin: 0 0 8px; font-size: 34px; line-height: 1.2; }
.fep-team .fep-lead__role,
.fep-team .fep-member__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-body);
  margin: 0 0 22px;
}
.fep-team .fep-lead__body .fep-prose { margin-bottom: 22px; }

.fep-team .fep-members {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fep-grid-gap);
  width: 100% !important;
  text-align: left;
}
.fep-member {
  background: var(--fep-headings);
  border-radius: var(--fep-radius-md);
  padding: 22px;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}
.fep-member .fep-member__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fep-radius-sm);
}
.fep-member .fep-member__name { color: #fff; margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.fep-member .fep-member__role { color: rgba(255,255,255,.72); margin-bottom: 16px; }
.fep-member .fep-arrow { color: #fff; }
.fep-member .fep-arrow:hover { color: var(--fep-accent-light); }

/* The "About Us" button now lives inside the lead card under Jim's bio rather than in a
   centred row beneath the member cards. No rule is needed for it: .fep-lead__body .fep-prose
   already supplies the 22px gap above, the shared `.fep-section .fep-btn { width:auto }`
   reset stops it stretching, and it is inline-flex so the card's own text-align places it —
   left on desktop, centred under the 921px rule that centres the stacked lead card. */

/* ============================== 9. EBOOK ================================ */

.fep-section.fep-ebook {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 72px !important;   /* !important — beats our own gap:0 reset on .fep-section */
  align-items: center;
}
.fep-ebook .fep-ebook__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fep-radius-md);
  box-shadow: var(--fep-shadow-lg);
}
.fep-ebook .fep-ebook__body { width: auto !important; }
.fep-ebook .fep-ebook__body h2 { margin: 0; }
.fep-ebook .fep-ebook__body .fep-prose { margin: 28px 0 32px; }

/* ============================ 10. WHY CHOOSE US ========================= */

.fep-section.fep-why {
  padding-block: 84px !important;
  overflow: hidden;
  isolation: isolate;
  background-image: var(--fep-dark-grad);
}
.fep-why .fep-why__bg {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  z-index: 0;
  background-image: url("/wp-content/uploads/2026/09/why-choose-us-courthouse-bg.jpg");
  background-size: cover;
  background-position: right center;
  opacity: .22;
  mix-blend-mode: luminosity;
}
.fep-why .fep-why__card {
  position: relative !important;
  z-index: 2;
  background: #fff;
  border-radius: var(--fep-radius-md);
  box-shadow: var(--fep-shadow-sm);
  padding: 52px 56px;
  max-width: 900px !important;             /* measured: card is offset left */
  width: 100% !important;
  /* The same page-builder template also auto-centres section children, which put
     the card at x=270 instead of the design's x=140. Pin it to the left edge and
     let the courthouse photo show on the right, as designed. */
  margin-left: 0 !important;
  margin-right: auto !important;
}
.fep-why .fep-why__card > h2 { margin: 0 0 26px; }
.fep-why .fep-why__intro { margin-bottom: 30px; }

.fep-why .fep-why__slides { min-height: 268px; }
.fep-why .fep-why__slide[hidden] { display: none; }
.fep-why .fep-why__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 18px;
  background-color: var(--fep-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 1 0 0 12A6 6 0 0 0 12 2Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-3.2 11.2-1.3 6.3 4.5-2.4 4.5 2.4-1.3-6.3a8 8 0 0 1-6.4 0Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 1 0 0 12A6 6 0 0 0 12 2Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-3.2 11.2-1.3 6.3 4.5-2.4 4.5 2.4-1.3-6.3a8 8 0 0 1-6.4 0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.fep-why .fep-why__title { margin: 0 0 14px; font-size: 28px; line-height: 1.2; }

.fep-why .fep-why__nav { display: flex; gap: 14px; margin-top: 26px; }
.fep-why .fep-why__arrow {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--fep-rule);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  width: 54px !important;                  /* Spectra width:100% trap */
  position: relative;
  transition: background-color var(--fep-ease), border-color var(--fep-ease);
}
.fep-why .fep-why__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 19px;
  height: 19px;
  background-color: var(--fep-headings);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7v-5H3v-4h11V5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7v-5H3v-4h11V5Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.fep-why .fep-why__arrow[data-fep-prev]::after { transform: scaleX(-1); }
.fep-why .fep-why__arrow:hover { border-color: var(--fep-accent-deep); background: rgba(47,110,80,.06); }

/* ============================== 11. BLOG ================================ */

.fep-section.fep-blog .fep-blog__head {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  width: 100% !important;
}
.fep-section.fep-blog .fep-blog__head h2 { margin: 0; }

.fep-blog .fep-posts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fep-grid-gap);
  width: 100% !important;
}
.fep-post {
  background: #fff;
  border-radius: var(--fep-radius-md);
  box-shadow: var(--fep-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--fep-ease);
}
.fep-post:hover { box-shadow: 0 14px 34px rgba(20,32,38,.18); }
.fep-post .fep-post__img img {
  display: block;
  width: 100%;
  height: 248px;
  object-fit: cover;
}
.fep-post .fep-post__body { padding: 26px 28px 30px; }
.fep-post .fep-post__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-body);
  margin: 0 0 14px;
}
.fep-post .fep-post__title { margin: 0 0 14px; font-size: 24px; line-height: 1.24; }
.fep-post .fep-post__excerpt { font-size: 16px; line-height: 1.6; margin: 0; color: var(--fep-body); }

/* ============================= 12. CLOSING ============================== */
/* Skyline band with a white card overlapping upward into it. */

.fep-section.fep-closing {
  padding-block: 0 !important;
  padding-inline: 0 !important;
  background: transparent;
}
.fep-closing .fep-closing__photo {
  position: relative !important;
  width: 100% !important;
  height: 430px;                           /* measured */
  background-size: cover;
  background-position: center 38%;
}
.fep-closing .fep-closing__card {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  max-width: 840px !important;
  margin: -78px auto 0;                    /* the overlap */
  background: #fff;
  border-radius: var(--fep-radius-md) var(--fep-radius-md) 0 0;
  padding: 52px 64px 60px;
  text-align: center;
}
.fep-closing .fep-closing__card h2 { margin: 0 auto 26px; }
.fep-closing .fep-closing__card .fep-prose p { text-align: center; }

/* =============================== 13. FAQ ================================ */
/* Native <details>/<summary>. Rows separated by a 1px top rule, never boxed.
   Indicator is two thin bars; the vertical one fades out on open. */

.fep-faq .fep-faq__list { border-top: 1px solid var(--fep-rule); }
.fep-faq .fep-faq__item { border-bottom: 1px solid var(--fep-rule); }

.fep-faq .fep-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-block: 26px;                     /* generous tap target per STYLE.md */
  cursor: pointer;
  list-style: none;
}
.fep-faq .fep-faq__q::-webkit-details-marker { display: none; }
.fep-faq .fep-faq__q h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.36;
  font-weight: 500;
  color: var(--fep-headings);
}

.fep-faq .fep-faq__glyph {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 6px;
}
.fep-faq .fep-faq__glyph::before,
.fep-faq .fep-faq__glyph::after {
  content: "";
  position: absolute;
  background: var(--fep-headings);
  transition: opacity var(--fep-ease);
}
.fep-faq .fep-faq__glyph::before { inset: 8px 0 auto 0; height: 1.5px; }   /* horizontal */
.fep-faq .fep-faq__glyph::after  { inset: 0 auto 0 8px; width: 1.5px; }    /* vertical  */
.fep-faq .fep-faq__item[open] .fep-faq__glyph::after { opacity: 0; }

.fep-faq .fep-faq__a { padding: 0 46px 30px 0; }
.fep-faq .fep-faq__a p { margin: 0; }

/* =========================== 14. GET STARTED =========================== */
/* Dark band. Inputs are underline-only here — the boxed variant in style.css
   is for light backgrounds (the inner-page sidebar). */

.fep-section.fep-getstarted .fep-twocol__aside h2 { margin: 0; }

.fep-form--dark .gform_wrapper .gfield_label,
.fep-form--dark .gform_wrapper legend.gfield_label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 10px;
}
.fep-form--dark .gform_wrapper .gfield_required { color: var(--fep-accent-light); }

.fep-form--dark .gform_wrapper input[type="text"],
.fep-form--dark .gform_wrapper input[type="email"],
.fep-form--dark .gform_wrapper input[type="tel"],
.fep-form--dark .gform_wrapper textarea {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  color: #fff !important;
  font-family: var(--fep-font-body);
  font-size: 17px;
  transition: border-color var(--fep-ease);
}
.fep-form--dark .gform_wrapper input::placeholder,
.fep-form--dark .gform_wrapper textarea::placeholder { color: rgba(255,255,255,.55); }
.fep-form--dark .gform_wrapper input:focus,
.fep-form--dark .gform_wrapper textarea:focus {
  outline: none;
  border-bottom-color: var(--fep-accent) !important;
  box-shadow: 0 1px 0 0 var(--fep-accent);
}
.fep-form--dark .gform_wrapper textarea { min-height: 118px; resize: vertical; }

.fep-form--dark .gform_wrapper .gform_footer { margin-top: 34px; }
.fep-form--dark .gform_wrapper .gform_footer input[type="submit"] {
  font-family: var(--fep-font-body) !important;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--fep-cta-bg);
  border: 0;
  border-radius: var(--fep-radius-pill) !important;
  padding: 14px 30px;
  width: auto !important;
  cursor: pointer;
  transition: background-color var(--fep-ease);
}
.fep-form--dark .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--fep-cta-hover); }
.fep-form--dark .gform_wrapper .gform_validation_errors,
.fep-form--dark .gform_wrapper .gfield_validation_message {
  background: rgba(155,59,59,.18);
  border: 0;
  color: #fff;
  border-radius: var(--fep-radius-sm);
}

/* ============================== RESPONSIVE ============================== */

@media (max-width: 1008px) {
  .fep-services .fep-tiles { grid-template-columns: repeat(2, 1fr); }
  .fep-blog .fep-posts { grid-template-columns: repeat(2, 1fr); }
  .fep-section.fep-bleed { gap: 44px !important; }
  .fep-why .fep-why__card { padding: 42px 40px; max-width: none !important; }
  .fep-section.fep-ebook { grid-template-columns: 250px minmax(0, 1fr); gap: 46px; }
  .fep-team .fep-lead { grid-template-columns: 240px minmax(0, 1fr); gap: 34px; }
  /* rail already scrolls; nothing to change at this breakpoint */
}

@media (max-width: 921px) {
  /* Mobile overrides MUST carry the .fep-section prefix and !important or they
     lose to the base resets in style.css (esp. min-height:0 !important). */
  .fep-section.fep-hero { min-height: 0 !important; padding-block: 0 !important; }
  .fep-section.fep-hero .fep-hero__inner { max-width: none; padding-block: 56px 44px; }
  .fep-section.fep-hero .fep-hero__title { font-size: 40px; }
  .fep-section.fep-hero .fep-hero__scrim {
    background: linear-gradient(180deg, rgba(35,74,96,.92) 0%, rgba(38,82,104,.88) 55%, rgba(38,82,104,.92) 100%);
  }

  /* Stacked: the image keeps a full-viewport-width bleed and drops the rounding
     entirely — a half-rounded full-width band reads as a mistake. */
  .fep-section.fep-bleed {
    display: block !important;
    padding-inline: 0 !important;
  }
  .fep-section.fep-bleed .fep-bleed__media { margin-bottom: 30px; }
  .fep-section.fep-bleed .fep-bleed__img {
    aspect-ratio: 16 / 10 !important;
    border-radius: 0 !important;
  }
  .fep-section.fep-bleed .fep-bleed__body { padding-inline: var(--fep-pad-inline); }

  .fep-section.fep-team .fep-lead { display: block !important; }
  .fep-section.fep-team .fep-lead__photo { max-width: 260px; margin-bottom: 26px; }
  .fep-section.fep-team .fep-members { grid-template-columns: 1fr !important; }

  .fep-section.fep-ebook { display: block !important; }
  .fep-section.fep-ebook .fep-ebook__cover { max-width: 240px; margin-bottom: 32px; }

  .fep-section.fep-blog .fep-blog__head { display: block !important; }
  .fep-section.fep-blog .fep-blog__head .fep-btn { margin-top: 22px; }

  .fep-section.fep-closing .fep-closing__photo { height: 260px; }
  .fep-section.fep-closing .fep-closing__card {
    margin-top: -48px;
    padding: 36px 26px 42px;
    border-radius: var(--fep-radius-md) var(--fep-radius-md) 0 0;
  }
}

@media (max-width: 600px) {
  .fep-section.fep-services .fep-tiles { grid-template-columns: 1fr !important; }
  .fep-section.fep-blog .fep-posts { grid-template-columns: 1fr !important; }
  .fep-section.fep-hero .fep-badges { gap: 12px; }
  .fep-section.fep-hero .fep-badge {
    width: 228px !important;
    flex: 0 0 228px !important;
    min-height: 80px;
  }
  .fep-tile { min-height: 262px; }
  .fep-tile .fep-tile__title { min-height: 262px; font-size: 21px; padding: 18px 20px; }
  .fep-section.fep-why { padding-block: 52px !important; }
  .fep-section.fep-why .fep-why__card { padding: 32px 24px; }
  .fep-member { grid-template-columns: 1fr; }
  .fep-member .fep-member__photo { max-width: 152px; }
}

/* ==========================================================================
   MOBILE RAILS — practice areas + latest insights
   One shared mechanism. Above the mobile breakpoint the track stays a CSS grid
   and the arrows are hidden; at 1008px and below it becomes a scroll-snapping
   horizontal rail showing exactly ONE card per view.

   Three scroll-rail rules from known-overrides.md apply here:
     - Spectra containers default to justify-content:center, which on an
       overflowing rail centres the overflow and gives the first card a negative
       x while scrollLeft is still 0 — the rail looks pre-scrolled. Forced to
       flex-start.
     - Non-container children are forced to width:100% at high specificity, so
       the flex-basis needs !important to hold.
     - scroll-snap-type combined with a leading padding snaps that padding out
       of view, so the track carries no inline padding of its own.
   ========================================================================== */

.fep-rail { position: relative; width: 100% !important; }

/* arrows are mobile-only */
.fep-rail .fep-rail__nav { display: none; }

@media (max-width: 1008px) {
  .fep-section .fep-rail__track {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    gap: var(--fep-grid-gap) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* no inline padding — it would be snapped out of view */
    padding-inline: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .fep-section .fep-rail__track::-webkit-scrollbar { display: none; }

  /* exactly one card per view */
  .fep-section .fep-rail__track > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
  }

  .fep-rail .fep-rail__nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
  }
  .fep-rail .fep-rail__arrow {
    width: 52px !important;
    height: 52px;
    flex: 0 0 auto !important;
    border-radius: 50%;
    border: 1px solid var(--fep-rule);
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: background-color var(--fep-ease), border-color var(--fep-ease), opacity var(--fep-ease);
  }
  .fep-rail .fep-rail__arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    background-color: var(--fep-headings);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7v-5H3v-4h11V5Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7v-5H3v-4h11V5Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .fep-rail .fep-rail__arrow[data-fep-rail-prev]::after { transform: scaleX(-1); }
  .fep-rail .fep-rail__arrow:hover { border-color: var(--fep-accent-deep); background: rgba(47,110,80,.06); }
  /* at either end the arrow dims and stops responding */
  .fep-rail .fep-rail__arrow[disabled] { opacity: .35; cursor: not-allowed; }
  .fep-rail .fep-rail__arrow[disabled]:hover { border-color: var(--fep-rule); background: transparent; }

  /* On a rail the tiles need a fixed height — they can no longer inherit one
     from the tallest cell in a grid row. */
  .fep-section.fep-services .fep-rail__track .fep-tile,
  .fep-section.fep-services .fep-rail__track .fep-tile .fep-tile__title { min-height: 320px; }

  /* On dark sections the arrows invert */
  .fep-on-dark .fep-rail .fep-rail__arrow { border-color: rgba(255,255,255,.5); }
  .fep-on-dark .fep-rail .fep-rail__arrow::after { background-color: #fff; }
}

/* Real post cards: the title and image are now links, so keep them inheriting
   the card's type treatment rather than the global link colour. */
.fep-post .fep-post__title a { color: var(--fep-headings); }
.fep-post:hover .fep-post__title a { color: var(--fep-accent-deep); }
.fep-post .fep-post__img { display: block; }
.fep-post .fep-post__img img { transition: transform var(--fep-ease-reveal); }
.fep-post:hover .fep-post__img img { transform: scale(1.03); }
.fep-post .fep-post__img { overflow: hidden; }

/* ==========================================================================
   BLOG ARCHIVE — identical cards to the homepage's Latest Insights.
   The .fep-post card styling above is shared; this only supplies the grid,
   since .fep-blog .fep-posts is scoped to the homepage section.
   No rail here: an archive is a paginated list, so it stacks on mobile.
   ========================================================================== */

.fep-posts--archive {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fep-grid-gap);
  width: 100%;
  /* NOT align-items:start — the homepage grid leaves items to stretch, so cards
     in a row share a height. Setting `start` here made the archive rows ragged,
     which was the only visual difference left between the two. */
  align-items: stretch;
  row-gap: 40px;
}
/* Stretching the card means the body must fill the leftover space so the
   "Read More" link sits on the baseline of the tallest card in the row. */
.fep-posts--archive .fep-post { display: flex; flex-direction: column; }
.fep-posts--archive .fep-post__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.fep-posts--archive .fep-post__body .fep-arrow { margin-top: auto; align-self: flex-start; }

/* Astra's own blog CSS still ships selectors for .ast-article-post etc.; our
   articles no longer carry those classes, but the row wrapper can still add
   negative margins on some layouts — neutralise it inside the archive. */
.fep-posts--archive > .fep-post { margin: 0; float: none; width: auto; }

/* Titles are <h2> here (correct for an archive) but must read exactly like the
   homepage's <h3>. Class-based styling already handles size/colour; this only
   stops Astra's h2 rules winning on line-height. */
.fep-posts--archive .fep-post__title {
  font-size: 24px;
  line-height: 1.24;
  margin: 0 0 14px;
}

@media (max-width: 1008px) {
  .fep-posts--archive { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fep-posts--archive { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ pagination ----
   STYLE.md: circular/pill number buttons; the active page is solid
   accent-filled; inactive pages have NO border at rest and only show an
   outline on hover.
   -------------------------------------------------------------------------- */

.ast-pagination,
.ast-pagination .nav-links { margin-top: 48px; }
.ast-pagination .page-numbers,
.ast-pagination .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  margin: 0 5px;
  border-radius: var(--fep-radius-pill);
  border: 1px solid transparent;
  font-family: var(--fep-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--fep-headings);
  text-decoration: none;
  transition: border-color var(--fep-ease), background-color var(--fep-ease), color var(--fep-ease);
}
.ast-pagination a.page-numbers:hover { border-color: var(--fep-headings); }
.ast-pagination .page-numbers.current {
  background: var(--fep-cta-bg);
  border-color: var(--fep-cta-bg);
  color: #fff;
}
.ast-pagination .page-numbers.dots { border-color: transparent; font-weight: 400; }
.ast-pagination .page-numbers.dots:hover { border-color: transparent; }

/* Align the archive to the homepage's content measure. Astra's content area runs
   the full 1240 container with no inline gutter, which made the archive cards
   397px against the homepage's 371px. Constraining to the same 1160 content
   width makes the card size — and the left edge — identical to the homepage. */
.fep-posts--archive,
.fep-archive-header {
  max-width: calc(var(--fep-container) - (var(--fep-pad-inline) * 2));
  margin-inline: auto;
}

/* ==========================================================================
   DESIGN QA — 2026-09-14
   ========================================================================== */

/* --- 2. Centre the "Our Client Success Stories" heading ------------------- */
.fep-section.fep-reviews .fep-reviews__head { text-align: center; }
.fep-section.fep-reviews .fep-reviews__head .fep-heading { margin-inline: auto; }
.fep-section.fep-reviews .fep-reviews__head .fep-heading::after { margin-inline: auto; }

/* --- 4. Why-choose-us arrows were 62x54, not round -----------------------
   Astra's button reset adds horizontal padding and the element was
   content-box, so the declared 54px width grew by the padding. Pin the box
   model and force a 1:1 ratio. */
.fep-why .fep-why__arrow {
  box-sizing: border-box !important;
  padding: 0 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1;
  flex: 0 0 54px !important;
}

/* --- 5. Ebook: centre image and copy vertically --------------------------
   `align-items: center` was being beaten by the base reset in style.css,
   which sets `align-items: normal !important` on .fep-section containers. */
.fep-section.fep-ebook { align-items: center !important; }
.fep-section.fep-ebook .fep-ebook__cover,
.fep-section.fep-ebook .fep-ebook__body { align-self: center; }

/* --- 6. Whole blog card clickable ---------------------------------------
   A stretched overlay on the title link rather than an <a> wrapping the
   <article> — that would nest anchors and give the card a single enormous
   accessible name. Everything else inside stays non-interactive. */
.fep-post--linked { position: relative; }
.fep-post--linked .fep-post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fep-post--linked:hover { box-shadow: 0 14px 34px rgba(20, 32, 38, .18); }
.fep-post--linked:hover .fep-post__title a { color: var(--fep-accent-deep); }
.fep-post--linked:hover .fep-arrow::after { transform: translateX(3px); }
.fep-post--linked .fep-post__img { display: block; overflow: hidden; }
/* keep the focus ring on the real link, not the whole card */
.fep-post--linked .fep-post__link:focus-visible {
  outline: 2px solid var(--fep-accent-deep);
  outline-offset: 3px;
}

/* --- 18. Centre the blog archive heading -------------------------------- */
.fep-archive-header { text-align: center; }
.fep-archive-header__title::after { margin-inline: auto; }

/* ==========================================================================
   MOBILE-ONLY QA — 2026-09-14
   ========================================================================== */

@media (max-width: 600px) {
  /* --- 2. Hero badges: exactly ONE award per view -----------------------
     Was a fixed 228px card in a 350px rail, so the next badge was always
     half-visible at the edge. Full-width cards + snap means a badge is never
     cut off. */
  .fep-section.fep-hero .fep-badge {
    width: 100% !important;
    flex: 0 0 100% !important;
    scroll-snap-align: start;
  }
  .fep-section.fep-hero .fep-badges {
    scroll-snap-type: x mandatory;
    gap: var(--fep-grid-gap) !important;
  }

  /* --- 3. "Our Legal Services" intro copy reads left, not centred -------
     A centred paragraph of this length is hard to scan on a phone; the
     HEADING stays centred. */
  .fep-section.fep-services .fep-services__head { text-align: center; }
  .fep-section.fep-services .fep-services__intro,
  .fep-section.fep-services .fep-services__intro p { text-align: left; }

  /* --- 4. Reviews heading stays centred on mobile too ------------------- */
  .fep-section.fep-reviews .fep-reviews__head { text-align: center; }
  .fep-section.fep-reviews .fep-reviews__head .fep-heading,
  .fep-section.fep-reviews .fep-reviews__head .fep-heading::after { margin-inline: auto; }
}

/* --- Team section: centre everything once it stacks on mobile -------------
   The section heading was already centred but every block under it stayed
   left-aligned from the desktop layout (lead photo at x=20, member photo at
   x=42, all copy left). Centred at the breakpoint where each piece actually
   stacks: the lead at 921 where its photo moves above the text, the member
   cards at 600 where their photo/text split collapses. Between those two the
   member card is still a side-by-side photo|text row, and centring that would
   look broken rather than tidy. */

@media (max-width: 921px) {
  .fep-section.fep-team .fep-lead { text-align: center; }
  .fep-section.fep-team .fep-lead__photo { margin-inline: auto; }
  .fep-section.fep-team .fep-lead__name,
  .fep-section.fep-team .fep-lead__role { text-align: center; }
  .fep-section.fep-team .fep-lead__body .fep-prose p { text-align: center; }
  /* The About Us button is inline-flex, so the centred text-align above carries it. */
}

@media (max-width: 600px) {
  .fep-section.fep-team .fep-members { text-align: center; }
  .fep-section.fep-team .fep-member { justify-items: center; }
  .fep-section.fep-team .fep-member__photo { margin-inline: auto; }
  .fep-section.fep-team .fep-member__name,
  .fep-section.fep-team .fep-member__role { text-align: center; }
  .fep-section.fep-team .fep-member .fep-arrow { justify-content: center; }
}

/* --- Blog section: CTA placement differs by breakpoint --------------------
   Desktop keeps the design's "heading left / button right" row. The section is
   a grid so the button can occupy the top-right cell while the rail spans the
   full width below it — which means on mobile the grid simply collapses and
   DOM order (heading -> rail -> button) gives the requested stacking with no
   duplicated markup and no `order` juggling. */
.fep-section.fep-blog {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: start;
}
.fep-section.fep-blog .fep-blog__head { grid-column: 1; grid-row: 1; margin-bottom: 40px; }
.fep-section.fep-blog .fep-blog__cta  { grid-column: 2; grid-row: 1; justify-self: end; }
.fep-section.fep-blog .fep-rail       { grid-column: 1 / -1; grid-row: 2; }

@media (max-width: 1008px) {
  /* Collapse to a single column: heading, then cards + arrows, then the button. */
  .fep-section.fep-blog { display: block !important; }
  .fep-section.fep-blog .fep-blog__head { margin-bottom: 28px; }

  /* Arrows left-aligned in this section (the practice-area rail stays centred). */
  .fep-section.fep-blog .fep-rail__nav { justify-content: flex-start; }

  .fep-section.fep-blog .fep-blog__cta { margin-top: 26px; }
  .fep-section.fep-blog .fep-blog__cta .fep-btn { width: auto !important; }
}

/* --- Ebook sits flush against the image above it on mobile ----------------
   A stacked `fep-bleed--right` renders text THEN image, so its image is the
   last thing in the section — it was floating 70px above the ebook block
   (30px media margin + 40px section padding). When the image is last, let it
   run to the section's edge so the next section's background meets it.
   `fep-bleed--left` is untouched: its image comes FIRST on mobile and still
   needs the gap below it before the text. */
@media (max-width: 921px) {
  .fep-section.fep-bleed--right { padding-bottom: 0 !important; }
  .fep-section.fep-bleed--right .fep-bleed__media { margin-bottom: 0 !important; }
}

/* ======================= 5b. VIDEO TESTIMONIALS ========================= */

.fep-section.fep-videos { text-align: center; }
.fep-videos .fep-videos__intro {
  max-width: 760px;
  margin: 0 auto 34px;
}
.fep-videos .fep-videos__intro p { text-align: center; }

/* Two across rather than four. Four would fit the 1240 container at ~292px a card, and
   these play inline — a 292x164 window is too small to actually watch a two-minute
   testimonial in. Two gives ~600px, and the rail still collapses to one per view on mobile
   through the shared .fep-rail rules. */
.fep-videos__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fep-grid-gap);
  width: 100%;
}
.fep-videos .fep-videos__cta { margin-top: 40px; display: flex; justify-content: center; }

/* --------------------------------------------- services: centre a short last row ----
   11 tiles in a 3-column grid leaves the bottom-right cell empty. Rather than pad the
   count with filler, the final row is centred.

   The grid becomes 6 columns with every tile spanning 2, which is the SAME tile width as
   repeat(3, 1fr): spanning 2 of 6 gives 2*(W-5G)/6 + G = (W-2G)/3, exactly the 3-column
   width. That buys half-column positions, which is what centring a short row needs.

   Both short-row cases are handled because the tile count is not fixed — the tracker has
   more practice areas queued, so this must not need revisiting when a twelfth is added:
     - two left over (11, 14 ...) -> the pair starts at column 2, filling 2-3 and 4-5
     - one left over  (10, 13 ...) -> the single tile sits in columns 3-4
   A full final row matches neither selector and is untouched.

   Scoped above the tablet breakpoint: the 2-column and 1-column layouts below it have no
   gap to close, and `span 2` inside a 2-column grid would make every tile full width.
   -------------------------------------------------------------------------------- */

@media (min-width: 1009px) {
  .fep-services .fep-tiles { grid-template-columns: repeat(6, 1fr); }
  .fep-services .fep-tiles > * { grid-column: span 2; }
  .fep-services .fep-tiles > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .fep-services .fep-tiles > :nth-child(3n+1):nth-last-child(1) { grid-column: 3 / span 2; }
}