/* ==========================================================================
   EM Alliance — Warm theme — shared stylesheet
   Upload as a child-theme stylesheet, or paste into
   Appearance → Customize → Additional CSS (Gutenberg/Full Site Editing).
   ========================================================================== */

/* ---- Self-hosted fonts -------------------------------------------------
   1. Download the font files from https://fonts.google.com/specimen/Newsreader
      and https://fonts.google.com/specimen/Public+Sans (get the .woff2 files —
      "google-webfonts-helper" at gwfh.mranftl.com makes this a one-click export).
   2. Upload the .woff2 files to your Media Library, or via FTP to
      /wp-content/uploads/fonts/
   3. Replace the src URLs below with the real uploaded paths.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/newsreader-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/newsreader-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/public-sans-latin.woff2') format('woff2');
}

/* ---- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }
body.ema-warm {
  margin: 0;
  background: #fbf9f5;
  font-family: 'Public Sans', system-ui, sans-serif;
  color: #1c2b38;
}
.ema-warm a { color: #001F3F; }
.ema-warm a:hover { color: #628395; }
.ema-warm img { max-width: 100%; display: block; }

/* ---- Nav ------------------------------------------------------------- */
/* Full-bleed override: escapes the theme's content-width container so the
   header/footer reach the true edges of the browser, with no gap above/below. */
.ema-header, .ema-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* Pinned header. `position: sticky` only works if every ancestor of the header
   is tall enough and none of them clip overflow — in WordPress the header
   template part usually fails both tests, so we pin it with `fixed` instead and
   reserve its height on the body. Header height = 5px accent + 68px bar + 1px. */
.ema-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  z-index: 9999;
}
body { padding-top: 74px !important; }
/* Logged-in users see the WP admin bar above the header. */
body.admin-bar .ema-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .ema-header { top: 46px; }
}
/* Ancestors must not clip the fixed/full-bleed header. */
html, body { overflow-x: clip; }
.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-template-part,
.entry-content,
.site-content { overflow: visible !important; }

/* The block theme wraps the pasted header in its own group, which carries a
   background colour and vertical padding from the theme's global styles. That
   is what shows as a coloured bar under the header. Strip it: our own markup
   supplies the background. Same for the footer's wrapper. */
header.wp-block-template-part > .wp-block-group,
footer.wp-block-template-part > .wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: none !important;
  background-color: transparent !important;
}
.ema-header__accent { height: 5px; background: linear-gradient(90deg,#C2A14E,#001F3F 60%); }
.ema-header__bar { background: #fbf9f5; border-bottom: 1px solid #efe9dd; box-shadow: 0 4px 18px rgba(0,31,63,.06); }
.ema-header__row { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px,5vw,46px); }
/* flex: none — without it the logo link is squeezed by the nav and the theme's
   img { max-width: 100% } clips the wordmark to its middle letters. */
.ema-header__logo { display: block; flex: 0 0 auto; transition: transform .2s ease; }
.ema-header__logo:hover { transform: scale(1.04); }
.ema-header__logo img {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  object-fit: contain !important;
}
.ema-nav { display: flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 600; color: #2c3e4d; }
.ema-nav a { text-decoration: none !important; color: #2c3e4d !important; padding: 9px 14px; border-radius: 30px; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.ema-nav a:hover { background: #eaf1f7; color: #2c3e4d !important; }
.ema-nav a.is-active { background: #001F3F; color: #fff !important; font-weight: 700; }
.ema-nav a.is-active:hover { color: #fff !important; }
.ema-nav a.ema-nav__cta { background: #C2A14E; color: #001F3F !important; padding: 12px 26px; font-weight: 700; margin-left: 16px; box-shadow: 0 4px 14px rgba(194,161,78,.35); }
.ema-nav a.ema-nav__cta:hover { background: #001F3F; color: #fff !important; }

.ema-hamburger { display: none; border: none; background: transparent; padding: 8px; cursor: pointer; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; }
.ema-hamburger span { width: 22px; height: 2px; background: #001F3F; border-radius: 2px; display: block; }

.ema-mobile-menu { display: none; background: #fbf9f5; border-top: 1px solid #efe9dd; padding: 6px clamp(20px,5vw,46px) 20px; flex-direction: column; gap: 2px; }
.ema-mobile-menu a { text-decoration: none; color: #2c3e4d; padding: 12px 8px; font-weight: 600; }
.ema-mobile-menu a.ema-nav__cta { background: #628395; color: #fff; padding: 13px 20px; border-radius: 12px; text-align: center; margin-top: 8px; display: block; }

@media (max-width: 1039px) {
  .ema-nav { display: none; }
  .ema-hamburger { display: flex; }
  .ema-mobile-menu.is-open { display: flex; }
}

/* ---- Footer ------------------------------------------------------------- */
.ema-footer { background: #001F3F; color: rgba(255,255,255,.72); border-radius: 34px 34px 0 0; }
.ema-footer__inner { max-width: 1280px; margin: 0 auto; padding: 50px clamp(20px,5vw,46px) 34px; }
.ema-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 36px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 30px; }
.ema-footer__brand { max-width: 320px; }
.ema-footer__brand img { height: 50px; width: auto; margin-bottom: 16px; }
.ema-footer__cols { display: flex; gap: 56px; font-size: 14px; flex-wrap: wrap; }
.ema-footer__col { display: flex; flex-direction: column; gap: 9px; }
.ema-footer__col-title { color: #C2A14E; font-weight: 600; margin-bottom: 4px; }
.ema-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.ema-footer a:hover { color: #fff; }
.ema-footer__bottom { padding-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ema-footer__copyright { font-size: 12.5px; color: rgba(255,255,255,.45); }
.ema-footer__social { display: flex; gap: 11px; align-items: center; }
.ema-footer__social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #C2A14E; }
.ema-footer__social a:hover { background: #C2A14E; color: #001F3F; border-color: #C2A14E; }

/* ---- Homepage ------------------------------------------------------------- */
.ema-hero { position: relative; background: linear-gradient(160deg,#fbf9f5 40%,#f5ecd9 100%); overflow: hidden; }
.ema-hero__glow { position: absolute; top: -120px; right: -100px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle,rgba(194,161,78,.22),rgba(194,161,78,0) 70%); pointer-events: none; }
.ema-hero__inner { max-width: 1280px; margin: 0 auto; padding: 44px clamp(20px,5vw,46px) 30px; position: relative; }
.ema-hero__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(380px,1fr)); gap: 44px; align-items: center; }
.ema-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #eaf1f7; color: #3a6a86; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 8px 16px; border-radius: 30px; margin-bottom: 26px; }
.ema-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: #C2A14E; display: inline-block; }
.ema-hero h1 { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(32px,6.2vw,60px); line-height: 1.04; letter-spacing: -.01em; color: #001F3F; margin: 0 0 22px; }
.ema-hero h1 em { font-style: italic; color: #C2A14E; }
.ema-hero p { font-size: 18px; line-height: 1.65; color: #46586a; margin: 0 0 32px; max-width: 480px; }
.ema-btn-row { display: flex; gap: 14px; align-items: center; }
.ema-btn { text-decoration: none; font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 30px; display: inline-block; }
.ema-btn--gold { background: #C2A14E; color: #001F3F; box-shadow: 0 8px 20px rgba(194,161,78,.3); }
.ema-btn--gold:hover { background: #d6b665; color: #001F3F; }
.ema-btn--navy { background: #001F3F; color: #fff; }
.ema-btn--navy:hover { background: #C2A14E; color: #001F3F; }
.ema-link-arrow { text-decoration: none; color: #001F3F; font-weight: 700; font-size: 15px; padding: 15px 8px; }

.ema-hero__photo { position: relative; }
.ema-hero__photo-bg { position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px; border-radius: 28px; background: #C2A14E; opacity: .9; }
.ema-hero__photo-frame { position: relative; height: clamp(240px,42vw,400px); border-radius: 28px; overflow: hidden; background: #e3ecf2; border: 6px solid #fbf9f5; }
.ema-hero__photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ema-stats { max-width: 1280px; margin: 0 auto; padding: 34px clamp(20px,5vw,46px); }
.ema-stats__row { background: #001F3F; border-radius: 20px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; overflow: hidden; }
.ema-stats__divider { width: 2px; height: 46px; background: #C2A14E; }
.ema-stats__item { padding: 34px 20px; text-align: center; min-width: 0; }
.ema-stats__num { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(28px,6vw,44px); color: #C2A14E; line-height: 1; }
.ema-stats__label { color: rgba(255,255,255,.75); font-size: 14.5px; margin-top: 6px; }

.ema-section { max-width: 1280px; margin: 0 auto; padding: 56px clamp(20px,5vw,46px) 60px; }
.ema-section__head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.ema-kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #628395; font-weight: 600; margin-bottom: 12px; }
.ema-section__head h2 { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(24px,4.6vw,38px); line-height: 1.12; color: #001F3F; margin: 0; }

.ema-cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ema-card { transition: transform .18s ease, box-shadow .18s ease; }
.ema-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,31,63,.12); }
.ema-hiring__card, .ema-news__card { transition: transform .18s ease, box-shadow .18s ease; }
.ema-hiring__card:hover, .ema-news__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,31,63,.12); }
@media (max-width: 900px) {
  .ema-cards-3 { grid-template-columns: 1fr; }
  .ema-stats__row { grid-template-columns: 1fr; }
  .ema-stats__divider { width: 36px; height: 2px; margin: 0 auto; }
}
.ema-card { background: #fff; border-radius: 18px; padding: 30px 26px; box-shadow: 0 6px 20px rgba(0,31,63,.05); }
.ema-card__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(194,161,78,.12); color: #C2A14E; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ema-card__title { font-family: 'Newsreader', serif; font-weight: 600; font-size: 20px; color: #001F3F; margin-bottom: 8px; }
.ema-card__body { font-size: 14.5px; line-height: 1.6; color: #57687a; }

.ema-split { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,46px) 60px; }
.ema-split__panel { background: #eaf1f7; border-radius: 24px; padding: clamp(28px,6vw,56px); display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 44px; align-items: center; }
.ema-split__photo { position: relative; height: clamp(220px,34vw,300px); border-radius: 20px; overflow: hidden; background: #dbe6ee; }
.ema-split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ema-hiring { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,46px) 60px; }
.ema-hiring__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; margin-bottom: 52px; }
.ema-hiring__card { background: #fff; border-radius: 18px; padding: 28px; display: flex; align-items: center; gap: 20px; box-shadow: 0 6px 20px rgba(0,31,63,.05); }
.ema-hiring__badge { width: 60px; height: 60px; flex: none; background: #faf3e2; color: #a8842f; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-weight: 600; font-size: 19px; }
.ema-hiring__badge--alt { background: #eaf1f7; color: #3a6a86; }
.ema-hiring__name { font-family: 'Newsreader', serif; font-weight: 600; font-size: 20px; color: #001F3F; }
.ema-hiring__meta { color: #628395; font-size: 14px; }
.ema-hiring__link { text-decoration: none; color: #001F3F; font-weight: 700; font-size: 14px; }

.ema-news__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; }
.ema-news__head h2 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 32px; color: #001F3F; margin: 0; }
.ema-news__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 22px; }
.ema-news__card { text-decoration: none; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,31,63,.05); display: block; }
.ema-news__img { position: relative; height: 150px; overflow: hidden; background: #e3ecf2; }
.ema-news__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ema-news__body { padding: 22px; }
.ema-news__tag { color: #628395; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 8px; }
.ema-news__title { font-family: 'Newsreader', serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: #001F3F; }




/* EM ALLIANCE - page layout helpers.
   Paste this into Additional CSS below style.css. Handles mobile stacking,
   card hover, full-width header/footer, and sideways-scroll clipping. */

/* Jetpack appends a "post flair" block after post content — sharing buttons,
   Likes, related posts. It is injected into the_content by PHP, so it does not
   appear as a block in the Single Posts template and cannot be deleted there. */
#jp-post-flair,
.sharedaddy,
.sd-sharing-enabled,
.jp-relatedposts { display: none !important; }

/* Jetpack Boost's Image Guide injects a <div class="jetpack-boost-guide"> into
   the page. Inside a grid it becomes a grid cell and shifts every real child
   one position, which breaks the bio and card layouts. Take it out of flow. */
.jetpack-boost-guide { display: none !important; }

/* --- card hover lift --- */
.ema-lift { transition: transform .18s ease, box-shadow .18s ease; }
.ema-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,31,63,.12); }

/* --- stats banner: three equal, centered columns ------------------------
   The gold dividers are mobile-only, so on desktop the three stats share the
   width evenly and center inside their column. */
.ema-statdiv { display: none; }
.ema-stats3 {
  display: flex !important;
  align-items: center;
}
.ema-stats3 > div {
  flex: 1 1 0;
  text-align: center;
}

/* --- header & footer run edge to edge inside any theme container --- */
.ema-header, .ema-footer, .ema-footer-panel {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wp-block-template-part, .wp-block-template-part > .wp-block-group,
.wp-block-template-part .wp-block-html {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- no sideways scrolling (the hero's gold frame and glow sit just
       outside their box on purpose; this clips them like the design does) --- */
/* overflow-x: clip (not hidden) - "hidden" silently breaks position:sticky
   in every descendant, which stopped the bio photo from following the scroll. */
html, body { overflow-x: clip; }
.wp-block-html img { max-width: 100%; }

/* --- mobile --- */
@media (max-width: 900px) {
  .ema-g3 { grid-template-columns: 1fr !important; }
  .ema-g5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  .ema-stats3 { display: flex !important; flex-direction: column !important; }
  .ema-stats3 > div { width: 100%; }
  .ema-statdiv { display: block !important; }
  .ema-bio-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* Post hero graphics are wide banners with text baked in. A fixed-height box
     with object-fit: cover crops their sides on a narrow screen and slices the
     name. Let the box take the image's own proportions instead.
     The [style*=] selectors match the pasted heroes directly, so posts already
     live in WordPress need no re-pasting; .ema-post-hero covers newer exports. */
  .ema-post-hero,
  div[style*="height:360px"],
  div[style*="height:420px"] {
    height: auto !important;
    min-height: 0 !important;
  }
  .ema-post-hero img,
  div[style*="height:360px"] > img,
  div[style*="height:420px"] > img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Bio photo on mobile: let the image flow at its own proportions instead of
     filling a fixed-ratio frame. The frame + absolutely positioned image is a
     desktop-only device; on mobile it either cropped the head (16/10 frame,
     object-fit: cover) or collapsed to zero height when the frame lost its
     aspect ratio, which hid the photo completely. */
  .ema-bio-grid > div:first-child {
    position: relative !important;
    top: auto !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 300px;
    margin: 0 auto !important;
  }
  .ema-bio-grid > div:first-child img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
@media (max-width: 700px) {
  .ema-g5 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- close the gap between header and page content -----------------------
   Block themes add block-gap / padding around the post content wrapper and
   around each Custom HTML block. This removes it so the hero band sits
   flush under the header, and matches the body background to the design's
   cream so any leftover gap doesn't show as gray. */
html, body, .wp-site-blocks, main, .wp-block-post-content, .entry-content,
.wp-site-blocks > .wp-block-group, .wp-block-template-part {
  background-color: #fbf9f5 !important;
}
.wp-block-post-content, .entry-content, main .wp-block-group.is-layout-constrained {
  margin: 0 !important;
  padding: 0 !important;
}
.wp-block-post-content > *, .entry-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-block-html { margin: 0 !important; }

/* --- let pasted pages use the full window ------------------------------
   Block themes constrain a Custom HTML block to the theme's content width
   (~800px), which squeezes the 5-across team grid. The page files set their
   own max-width (1280px) and center themselves, so the theme's constraint
   just needs to get out of the way. */
.wp-block-post-content > .wp-block-html,
.entry-content > .wp-block-html,
main .wp-block-html {
  max-width: none !important;
  width: 100% !important;
}
.wp-block-post-content.is-layout-constrained > *,
.entry-content.is-layout-constrained > * {
  max-width: none !important;
}

/* --- hero photo + gold frame: treat as one group and center on mobile ----
   The gold panel sits 22px right and below the photo, so on narrow screens
   the group needs 22px of breathing room on the right and is then centered
   as a unit. */
@media (max-width: 900px) {
  .ema-hero-photo {
    margin: 0 auto !important;
    width: calc(100% - 26px) !important;
    max-width: 460px !important;
  }
}

/* --- hero photo + gold frame, class-independent -------------------------
   Targets the gold panel by its own inline offset, then pulls its parent in
   so the group has even margin on both sides. Works whether or not the
   .ema-hero-photo class survived the paste. */
@media (max-width: 900px) {
  div:has(> div[style*="right:-22px"]) {
    margin-right: 26px !important;
    margin-left: 0 !important;
  }
  div[style*="right:-22px"] {
    top: 14px !important;
    left: 14px !important;
    right: -14px !important;
    bottom: -14px !important;
  }
}

/* --- bio photo follows the scroll --------------------------------------
   Re-asserts the sticky in case a theme wrapper overrides it. */
@media (min-width: 901px) {
  .ema-bio-grid > div:first-child {
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
  }
  .ema-bio-grid { align-items: start !important; }
}

/* --- clear overflow on theme wrappers so sticky can work ----------------
   position:sticky is disabled by ANY ancestor with overflow other than
   visible. These are the wrappers block themes wrap page content in. */
.wp-site-blocks,
.wp-site-blocks > main,
.wp-block-group,
.wp-block-post-content,
.entry-content,
main,
article {
  overflow: visible !important;
}

/* --- sticky bio photo: final override -----------------------------------
   The theme sets overflow-x:hidden on html and body, and the bio HTML's own
   wrapper div inherits a hidden overflow. Any one of those disables
   position:sticky, so all three are forced back with !important.
   clip prevents sideways scrolling the same way hidden does, but without
   creating a scroll container - so sticky keeps working. */
html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.ema-bio-grid,
.ema-bio-grid > div,
.ema-bio-grid ~ div,
body:has(.ema-bio-grid) .wp-block-html > div,
body:has(.ema-bio-grid) .wp-block-html {
  overflow: visible !important;
}

/* --- bio photo frame: rounder corners ---------------------------------- */
.ema-bio-grid > div:first-child {
  border-radius: 28px !important;
  overflow: hidden !important;
}
.ema-bio-grid > div:first-child img {
  border-radius: 28px !important;
}


/* About — values slider */
.ema-arrow { transition: background .15s ease, color .15s ease; }
.ema-arrow:hover { background: #001F3F !important; color: #fff !important; }
[data-values-track] { scrollbar-width: none; }
[data-values-track]::-webkit-scrollbar { display: none; }


/* State billing cards — gold portal button */
.ema-gold-btn { transition: background .15s ease; }
.ema-gold-btn:hover { background: #b39243 !important; }





/* EM ALLIANCE - WPForms styling
   Paste into Additional CSS below style.css and pages.css.
   Makes WPForms fields match the site's design: cream inputs, soft borders,
   small uppercase labels, navy submit button. */

.wpforms-container,
.wpforms-container-full {
  margin: 0 !important;
  max-width: none !important;
}

/* --- field rows: even vertical rhythm --- */
.wpforms-container .wpforms-field {
  padding: 0 0 18px !important;
}

/* --- labels: small, uppercase, muted blue --- */
.wpforms-container .wpforms-field-label {
  font-family: 'Public Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #628395 !important;
  margin: 0 0 7px !important;
}
.wpforms-container .wpforms-required-label {
  color: #C2A14E !important;
}

/* --- sublabels (First / Last): quieter --- */
.wpforms-container .wpforms-field-sublabel {
  font-family: 'Public Sans', sans-serif !important;
  font-size: 11.5px !important;
  color: #8fa3b3 !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

/* --- inputs --- */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
  font-family: 'Public Sans', sans-serif !important;
  font-size: 14.5px !important;
  color: #1c2b38 !important;
  background: #fbf9f5 !important;
  border: 1px solid #e2dccd !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpforms-container textarea {
  min-height: 130px !important;
  resize: vertical !important;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: #C2A14E !important;
  box-shadow: 0 0 0 3px rgba(194,161,78,.15) !important;
  outline: none !important;
}
.wpforms-container ::placeholder { color: #a3b2be !important; }

/* --- name field: First and Last side by side, full width like the others --- */
.wpforms-container .wpforms-field-name .wpforms-field-row {
  display: flex !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
}
.wpforms-container .wpforms-field-name .wpforms-field-row-block {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.wpforms-container .wpforms-field-name .wpforms-field-row-block input {
  width: 100% !important;
}

/* --- phone field: keep the country flag out of the typed number --- */
.wpforms-container .wpforms-smart-phone-field,
.wpforms-container .iti { width: 100% !important; }
.wpforms-container .iti--separate-dial-code input,
.wpforms-container .iti input[type=tel] {
  padding-left: 58px !important;
}
.wpforms-container .iti__flag-container { z-index: 2 !important; }
.wpforms-container .iti__selected-flag {
  padding: 0 8px 0 14px !important;
  background: transparent !important;
  border-radius: 12px 0 0 12px !important;
}

/* --- submit button --- */
.wpforms-container .wpforms-submit-container {
  padding: 8px 0 0 !important;
  text-align: right !important;
}
.wpforms-container button[type=submit] {
  font-family: 'Public Sans', sans-serif !important;
  background: #001F3F !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 15px 34px !important;
  cursor: pointer !important;
  transition: background .18s ease, transform .18s ease;
}
.wpforms-container button[type=submit]:hover {
  background: #C2A14E !important;
  transform: translateY(-1px);
}

/* --- validation + confirmation messages --- */
.wpforms-container label.wpforms-error {
  font-size: 12.5px !important;
  color: #b4453c !important;
}
.wpforms-container .wpforms-confirmation-container-full {
  background: #eaf1f7 !important;
  border: none !important;
  border-radius: 14px !important;
  color: #001F3F !important;
  font-family: 'Public Sans', sans-serif !important;
  padding: 18px 20px !important;
}

/* --- optional card wrapper for a form placed in its own Group block --- */
.ema-form-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0,31,63,.05);
  padding: clamp(24px, 5vw, 44px);
}

@media (max-width: 600px) {
  .wpforms-container .wpforms-field-name .wpforms-field-row { flex-direction: column !important; }
  .wpforms-container .wpforms-submit-container { text-align: left !important; }
}

/* --- name field: left-aligned, not centered ----------------------------- */
.wpforms-container .wpforms-field-name,
.wpforms-container .wpforms-field-name .wpforms-field-row,
.wpforms-container .wpforms-field-name .wpforms-field-row-block {
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wpforms-container .wpforms-field-name .wpforms-field-sublabel {
  text-align: left !important;
}

/* --- section headers (HTML / Content fields used as dividers) ------------
   Makes "Personal Information", "Company Information", "Request Details"
   read as part of the form instead of raw theme headings. */
.wpforms-container .wpforms-field-html h1,
.wpforms-container .wpforms-field-html h2,
.wpforms-container .wpforms-field-html h3,
.wpforms-container .wpforms-field-html h4,
.wpforms-container .wpforms-field-content h1,
.wpforms-container .wpforms-field-content h2,
.wpforms-container .wpforms-field-content h3,
.wpforms-container .wpforms-field-content h4,
.wpforms-container .wpforms-field-divider .wpforms-field-label {
  font-family: 'Newsreader', serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #001F3F !important;
  margin: 12px 0 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #ece5d6 !important;
}
.wpforms-container .wpforms-field-html,
.wpforms-container .wpforms-field-content,
.wpforms-container .wpforms-field-divider {
  padding-top: 14px !important;
  padding-bottom: 10px !important;
  border: none !important;
}
.wpforms-container .wpforms-field-html p,
.wpforms-container .wpforms-field-content p {
  font-family: 'Public Sans', sans-serif !important;
  font-size: 14px !important;
  color: #57687a !important;
  line-height: 1.6 !important;
  margin: 8px 0 0 !important;
}
.wpforms-container .wpforms-field-divider {
  border-top: none !important;
}

/* --- section headers, broader match -------------------------------------
   Catches any heading inside the form regardless of which WPForms field
   type produced it (HTML, Content, Section Divider, or a Layout heading). */
.wpforms-form h1,
.wpforms-form h2,
.wpforms-form h3,
.wpforms-form h4,
.wpforms-form h5,
.wpforms-form strong:only-child,
div[id^="wpforms-"] h1,
div[id^="wpforms-"] h2,
div[id^="wpforms-"] h3,
div[id^="wpforms-"] h4 {
  font-family: 'Newsreader', serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #001F3F !important;
  margin: 18px 0 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #ece5d6 !important;
}

/* --- Full Name: two boxes flush left, same width as the other fields --- */
.wpforms-form .wpforms-field-name > .wpforms-field-row,
div[id^="wpforms-"] .wpforms-field-name > .wpforms-field-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
.wpforms-form .wpforms-field-name .wpforms-field-row-block,
div[id^="wpforms-"] .wpforms-field-name .wpforms-field-row-block {
  flex: 1 1 50% !important;
  width: 50% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}
.wpforms-form .wpforms-field-name input,
div[id^="wpforms-"] .wpforms-field-name input {
  width: 100% !important;
  margin: 0 !important;
}

/* --- Full Name: force First + Last onto one row, flush left -------------
   WPForms renders these blocks as floated/inline-block children with their
   own inline widths and padding, which is why they stack and sit indented.
   These rules override the inline sizing on the field's own row. */
.wpforms-field-name .wpforms-field-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wpforms-field-name .wpforms-field-row > div,
.wpforms-field-name .wpforms-field-row-block {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
}
.wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.wpforms-field-name .wpforms-field-row-block.wpforms-first {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wpforms-field-name .wpforms-field-row input {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* --- kill the leftover indent on the name row ---------------------------
   WPForms adds horizontal padding to the row wrapper and a left margin to
   the first block, which pushes the Name box right of Email and Message. */
.wpforms-field-name,
.wpforms-field-name > .wpforms-field-row,
.wpforms-field-name > .wpforms-field-row > *,
.wpforms-field-name .wpforms-field-row-block,
.wpforms-field-name .wpforms-field-sublabel {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
.wpforms-field-name > .wpforms-field-row {
  padding-right: 0 !important;
  margin-right: 0 !important;
}