/*
 * Emeraude shared block styles.
 *
 * Only what WordPress cannot load conditionally for us:
 *
 *   - core Gutenberg block layout, which every page uses
 *   - the block styles an editor can apply to a core block on any page
 *     (is-style-em-card, is-style-em-cta, is-style-em-ruled)
 *   - the hero treatment, which is a class typed onto a core Group
 *   - the awaiting-content marker, printed by page.php on every empty page
 *
 * Everything belonging to one of the theme's own blocks lives in its own
 * block-*.css and is loaded only on a page that actually renders that block.
 * See functions.php and MAINTAINER.md section 2.
 */

/* =====================================================================
   1. Core blocks and shared treatments
   ===================================================================== */

.wp-block-group.alignfull { max-width: none; }

.wp-block-group__inner-container,
.em-content > .wp-block-group > :where(:not(.alignfull)) {
  width: var(--em-max);
  max-width: 100% !important;
  margin-inline: auto;
}



/* A section is a full-width group carrying its own background. The class is
   applied explicitly rather than to every alignfull group, so a section that
   sets its own padding (the hero) is never fought by this rule. */
.em-section-block {
  padding: 100px var(--em-gutter) 100px;
}

/* Anything an anchor can land on clears the fixed furniture. --em-bar is
   measured by nav.js: the header, plus the section strip where one is fixed,
   plus the mockup's 18px of clearance. It was a flat 105px here, which is the
   header alone, so on a page carrying a strip an anchored section landed
   behind it, and a feature card with an anchor of its own had no rule at all
   and landed behind both. */
.em-section-block,
.em-section-block [id] {
  scroll-margin-top: var(--em-bar);
}

/* The four modifiers below each drew their own measured padding: 60/160,
   110/110, 60/140 and 24/130. That is no longer wanted. Every section on
   every page now sits on the same 100px band top and bottom, so each
   modifier restates it rather than being deleted outright: the classes still
   carry the typography, margin and mobile differences below that are genuinely
   per variant. */

.em-section-block--tight { padding-block: 100px; }

/* The interior pages draw a smaller heading than the home page. The padding
   is the shared 100px; only the type scale is still per variant. */
.em-section-block--page { padding-block: 100px; }
.em-section-block--cta { padding-block: 100px; }

/* The role pages open straight into their feature cards. They used to lean on
   the hero above for that space and open on 24px; they now open on the same
   100px as everything else. */
.em-section-block--cards { padding-block: 100px; }

.em-section-block--page > p { margin-bottom: 20px; }

.em-section-block--page > h2 {
  font-size: var(--em-size-page-heading);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin-bottom: 26px;
}

@media (max-width: 920px) {
  /* The phone band. Each modifier drew its own measurement here, the same
     way they did on a desktop: 56/64, 40/56, 52/52, 36/70 and 8/52. They are
     all the one 60px now, the phone's counterpart to the desktop 100px. */
  .em-section-block { padding-block: 60px; }
  .em-section-block--tight { padding-block: 60px; }
  .em-section-block--page { padding-block: 60px; }
  .em-section-block--cta { padding-block: 60px; }
  .em-section-block--cards { padding-block: 60px; }

  /* The interior pages centre their headings on a desktop and range them
     left on a phone, the hero included. Reproduced rather than corrected:
     it is what both breakpoints of the mockup draw. */
  .em-section-block--page > h2 {
    line-height: 1.12;
    letter-spacing: -.015em;
    margin-bottom: 20px;
  }

  .em-section-block--page > .has-text-align-center { text-align: left; }

  .em-section-block--page > p { margin-bottom: 14px; }

  /* The home page does the same, with its own scale. The call to action band
     is the one section the mockup keeps centred on a phone, so it is left
     out. Measured from the mockup's mobile home. */
  .em-is-home .em-section-block:not(.em-section-block--tight) > .has-text-align-center {
    text-align: left;
  }

  .em-is-home .em-section-block:not(.em-section-block--tight) > h2 {
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin-bottom: 18px;
  }

  .em-is-home .em-section-block:not(.em-section-block--tight) > p {
    line-height: 1.6;
    margin-bottom: 16px;
  }

  /* After the paragraph rule above, which would otherwise win on the margin:
     the eyebrow is a paragraph too. */
  .em-is-home .em-section-block:not(.em-section-block--tight) > .has-eyebrow-font-size {
    font-size: var(--em-size-eyebrow-sm) !important;
    letter-spacing: .28em;
    margin-bottom: 14px;
  }
}

.wp-block-heading { text-wrap: balance; }

.wp-block-paragraph { text-wrap: pretty; }

.wp-block-paragraph a{
  color: var(--em-link) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}


.has-text-align-center { text-align: center; }

/* Eyebrow: a paragraph carrying the eyebrow font size preset. */
.wp-block-paragraph.has-eyebrow-font-size {
  font-weight: 600;
  letter-spacing: var(--em-track-eyebrow);
  text-transform: uppercase;
  color: var(--em-link);
  margin-bottom: 30px;
  line-height:1;
}

.wp-block-paragraph.has-muted-color { color: var(--em-muted); }

.wp-block-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.wp-block-button__link { text-decoration: none; }

/* Hero buttons are a fixed 290px in the mockup. */
.em-hero .wp-block-button__link {
  width: 290px;
  padding-inline: 0;
}

.wp-block-columns { gap: 22px; }

/* Core stacks its columns below 782px. This theme has one breakpoint, at
   920px, and it is the only one the mockup draws, so the columns follow that
   instead: between 783 and 920 core would otherwise still show two cards
   side by side where the design shows one. */
@media (max-width: 920px) {
  .em-content .wp-block-columns { flex-wrap: wrap; }
  .em-content .wp-block-column { flex-basis: 100%; }
}

/* The two panels that close the about page: a white one and a tinted one,
   side by side, each growing to the taller of the two. Measured from the
   about page in the mockup bundle. */

.em-panels {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
  margin-top: 20px;
}

.em-panels > .is-style-em-card {
  flex: 1 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Sits on the card style, so it names both to clear it. */
.is-style-em-card.em-panels__panel--tinted { background: var(--em-panel); }

.em-panels__actions {
  justify-content: center;
  margin-top: 26px;
}

.em-panels__actions .wp-block-button__link { padding: 17px 32px; }

@media (max-width: 920px) {
  .em-panels {
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
  }

  /* The 320px floor is what keeps the two side by side on a desktop. Stacked,
     it would only force the panel wider than the screen. */
  .em-panels > .is-style-em-card { min-width: 0; }

  .em-panels__actions {
    margin-top: 20px;
    align-self: stretch;
  }

  .em-panels__actions .wp-block-button,
  .em-panels__actions .wp-block-button__link {
    display: block;
    width: 100%;
  }

  .em-panels__actions .wp-block-button__link { padding: 15px 0; }
}

/* A row of equal cards that is not a core Columns block: the team, and the
   three principles. Both are grids in the mockup, and both stack on a phone.
   Measured from the about page. */

.em-grid {
  display: grid;
  gap: 24px;
  margin: 0;
}

.em-grid--team { grid-template-columns: repeat(4, 1fr); }

.em-grid--principles {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 34px 0 28px;
}

@media (max-width: 920px) {
  .em-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .em-grid--principles {
    gap: 12px;
    margin: 18px 0 20px;
  }
}

/* The principle card is the shared card with the mockup's own padding. */
.em-grid--principles .is-style-em-card { padding: 32px 34px 34px; }

.em-grid--principles .is-style-em-card p:not(.is-style-em-number) {
  font-size: 16.5px;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 920px) {
  .em-grid--principles .is-style-em-card { padding: 20px 22px; }
}

/* The role pages' feature cards. One grid of pairs, so the rows are spaced
   by the same 22px that separates the two cards in a row, and the full width
   card at the end sits on the same rhythm. Measured from the adviser page. */
.em-section-block--cards .wp-block-columns,
.em-section-block--cards > .is-style-em-card { margin-bottom: 22px; }

.em-section-block--cards > :last-child,
.em-section-block--cards > .is-style-em-card:last-child { margin-bottom: 0; }

@media (max-width: 920px) {
  .em-section-block--cards .wp-block-columns { gap: 14px; }

  .em-section-block--cards .wp-block-columns,
  .em-section-block--cards > .is-style-em-card { margin-bottom: 14px; }

  .em-section-block--cards > :last-child,
  .em-section-block--cards > .is-style-em-card:last-child { margin-bottom: 0; }
}

/* Card treatment, applied to a column or group via a block style. */
.is-style-em-card {
  background: var(--em-white);
  border: 1px solid var(--em-rule);
  border-radius: var(--em-radius-panel);
  padding: 34px 36px;
}

/* A card's heading takes its level from the page around it: h3 where the
   section already has an h2, h2 where the cards are the page's own sections,
   as they are on the role pages. Both look the same. */
.is-style-em-card h2,
.is-style-em-card h3 {
  font-size: var(--em-size-card-lead);
  font-weight: 600;
  line-height: var(--em-lh-heading);
  letter-spacing: -.018em;
  color: var(--em-ink);
  margin-bottom: 10px;
}

.is-style-em-card h3{
    line-height: 1.6;
}

.is-style-em-card p {
  font-size: var(--em-size-body);
  line-height: 1.65;
  color: var(--em-muted);
  margin-bottom: 14px;
}

.is-style-em-card p:last-child { margin-bottom: 0; }

/* ---- 2a1. Brand mark -------------------------------------------------
   Was the brand mark block's own stylesheet, loaded only where that block
   rendered. The call to action band in the footer now draws the mark on
   every page, so conditional loading bought nothing and the rules live
   here instead. The block still renders the same markup. */

/* The five bar mark taken from the Emeraude logo. */
.em-barmark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 38px;
  margin-bottom: 38px;
}
.em-barmark span {
  width: 7px;
  background: var(--em-accent);
  transform: skewY(-8deg);
}
.em-barmark span:nth-child(1) { height: 19px; }
.em-barmark span:nth-child(2) { height: 29px; }
.em-barmark span:nth-child(3) { height: 38px; }
.em-barmark span:nth-child(4) { height: 23px; opacity: .55; }
.em-barmark span:nth-child(5) { height: 31px; opacity: .75; }

/* The band is printed by footer.php now, outside the block layout that used to
   give it its width, so the panel states its own. The same value core's
   constrained layout was applying, so a panel still sitting in page content is
   unaffected. See inc/cta.php. */
.em-section-block > .is-style-em-cta {
  max-width: var(--em-max);
  margin-inline: auto;
}

/* Call to action panel, applied to a group via a block style. */
.is-style-em-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(95, 142, 46, .28);
  border-radius: var(--em-radius-cta);
  background: var(--em-cta-ground);
  padding: 132px var(--em-gutter) 136px;
  text-align: center;
}

.is-style-em-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -40%;
  transform: translateX(-50%);
  width: 70%;
  height: 180%;
  background: radial-gradient(45% 40% at 50% 50%, rgba(95, 142, 46, .13), rgba(95, 142, 46, 0) 70%);
  pointer-events: none;
}

.is-style-em-cta > * { position: relative; }

.is-style-em-cta h2 {
  font-size: var(--em-size-display);
  line-height: .98;
  letter-spacing: -.028em;
  margin: 0 auto 26px;
  max-width: 860px;
}

/* The eyebrow and the ruled strapline are paragraphs too, and each carries its
   own size and margin. Both are excluded here rather than restated, because a
   descendant selector like this one otherwise outranks their own rules. */
.is-style-em-cta .wp-block-paragraph:not(.has-eyebrow-font-size):not(.is-style-em-ruled) {
  font-size: var(--em-size-lead);
  line-height: 1.5;
  color: var(--em-muted);
  margin: 0 auto 48px;
  max-width: 520px;
}

/* The call to action button is taller than the base button everywhere the
   mockup draws it, on the home page and on the interior pages alike. The base
   rule in base.css is tuned for the hero, so the panel states its own. */
.is-style-em-cta .wp-block-button__link { padding: 21px 44px; }

/* The interior pages draw the same panel one step smaller, and without the
   ruled strapline. Measured from the contact page in the mockup bundle. */

.em-cta--compact { padding: 110px var(--em-gutter) 116px; }

.em-cta--compact .em-barmark {
  gap: 4px;
  margin-bottom: 30px;
}

.em-cta--compact .em-barmark span { width: 6px; }

.em-cta--compact h2 {
  font-size: var(--em-size-cta-compact);
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: 24px;
}

.em-cta--compact .wp-block-paragraph:not(.has-eyebrow-font-size):not(.is-style-em-ruled) { margin-bottom: 44px; }

.em-cta--compact .wp-block-buttons { margin-bottom: 0; }

@media (max-width: 920px) {
  .em-cta--compact {
    padding: 52px var(--em-gutter) 54px;
    border-radius: 12px;
  }

  .em-cta--compact .em-barmark {
    height: 26px;
    margin-bottom: 21px;
  }

  .em-cta--compact .em-barmark span:nth-child(1) { height: 13px; }
  .em-cta--compact .em-barmark span:nth-child(2) { height: 20px; }
  .em-cta--compact .em-barmark span:nth-child(3) { height: 26px; }
  .em-cta--compact .em-barmark span:nth-child(4) { height: 16px; }
  .em-cta--compact .em-barmark span:nth-child(5) { height: 21px; }

  .em-cta--compact .wp-block-paragraph.has-eyebrow-font-size {
    font-size: var(--em-size-eyebrow-sm) !important;
    letter-spacing: .28em;
    margin-bottom: 16px;
  }

  .em-cta--compact h2 {
    line-height: 1.06;
    letter-spacing: -.018em;
    margin-bottom: 14px;
  }

  .em-cta--compact .wp-block-paragraph:not(.has-eyebrow-font-size):not(.is-style-em-ruled) {
    font-size: 15px;
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 26px;
  }

  /* The mockup stretches the button to the panel on a phone. */
  .em-cta--compact .wp-block-button,
  .em-cta--compact .wp-block-button__link {
    display: block;
    width: 100%;
  }

  .em-cta--compact .wp-block-button__link {
    padding: 16px 0;
    font-size: 12.5px;
  }
}

/* The home page's call to action is the full panel, which had no mobile
   treatment at all and carried its 132px desktop padding down to 375, where
   the mockup draws a plain full width band: no card, no mark, no eyebrow and
   no ruled strapline, just the heading, the sentence and the button. */

@media (max-width: 920px) {
  .em-section-block--tight { padding-block: 60px; padding-inline: 0; }

  .is-style-em-cta:not(.em-cta--compact) {
    border: none;
    border-radius: 0;
    background: var(--em-panel);
    padding: 60px var(--em-gutter);
  }

  .is-style-em-cta:not(.em-cta--compact)::before { content: none; }

  .is-style-em-cta:not(.em-cta--compact) .em-barmark,
  .is-style-em-cta:not(.em-cta--compact) .has-eyebrow-font-size,
  .is-style-em-cta:not(.em-cta--compact) .is-style-em-ruled { display: none; }

  .is-style-em-cta:not(.em-cta--compact) h2 {
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin-bottom: 14px;
  }

  .is-style-em-cta:not(.em-cta--compact) .wp-block-paragraph:not(.has-eyebrow-font-size):not(.is-style-em-ruled) {
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 24px;
  }

  .is-style-em-cta:not(.em-cta--compact) .wp-block-button,
  .is-style-em-cta:not(.em-cta--compact) .wp-block-button__link {
    display: block;
    width: 100%;
  }

  .is-style-em-cta:not(.em-cta--compact) .wp-block-button__link {
    padding: 16px 0;
    font-size: 12.5px;
  }
}

/* ---- 2a. Hero -------------------------------------------------------- */

.em-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(85% 95% at 50% 45%, #F3F5EE 0%, #F8FAF4 55%, var(--em-white) 100%);
}

/* The two drifting washes are pseudo-elements, so the hero can be an
   ordinary core Group block with a class rather than a custom block. */

.em-hero::before,
.em-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.em-hero::before {
  width: 64%;
  height: 150%;
  right: -6%;
  top: -45%;
  background: radial-gradient(45% 40% at 55% 55%, rgba(95, 142, 46, .10), rgba(95, 142, 46, 0) 70%);
  animation: emDrift 30s ease-in-out infinite;
}

.em-hero::after {
  width: 48%;
  height: 130%;
  left: -8%;
  top: -30%;
  background: radial-gradient(45% 40% at 50% 50%, rgba(95, 142, 46, .06), rgba(95, 142, 46, 0) 72%);
  animation: emDrift 42s ease-in-out infinite reverse;
}

.em-hero > * { position: relative; z-index: 2; }

/* The section's foot. On the home page the journey strip is a sibling of
   __inner rather than a child of it, so the 100px below the section has to
   sit on .em-hero itself or it lands above the strip instead of below it. It
   used to be a 100px spacer block at the end of the page content, which has
   been removed. The interior heroes hold nothing but __inner, so they take
   the whole band on __inner and are excluded here. */
.em-hero:not(.em-hero--page) { padding-bottom: 100px; }

.em-hero__inner {
  position: relative;
  z-index: 2;
  /* The section's head. Was 118px. */
  padding: 100px var(--em-gutter) 0;
  max-width: var(--em-max);
  margin: 0 auto;
  text-align: center;
}

.em-hero h1 { margin: 0 auto 26px; max-width: 1080px; }

.em-hero__inner h1:last-child{
    margin-bottom: 0px;
}

.em-hero__standfirst {
  font-size: var(--em-size-standfirst);
  line-height: 1.45;
  color: var(--em-muted);
  margin: 0 auto 44px;
  max-width: 880px;
}

.em-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

/* The home hero on a phone. The mockup's mobile home ranges the hero left,
   exactly as the interior pages do below, stacks the two buttons full width,
   and draws a smaller headline. Every value measured from the mockup's own
   mobile home screen. Scoped to the home page because .em-hero without
   --page is the home hero and nothing else. */

@media (max-width: 920px) {
  /* The mockup's phone hero is a 600px band with its copy centred in what is
     left after the journey strip, rather than sitting straight under the
     header. */
  .em-is-home .em-hero {
    display: flex;
    flex-direction: column;
    /* min-height: 600px; */
    min-height: 0px;
  }

  .em-is-home .em-hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px var(--em-gutter) 0;
    text-align: left;
  }

  /* The spacer between the copy and the strip is a desktop measurement; the
     inner's own bottom padding is the whole gap on a phone. */
  .em-is-home .em-hero .wp-block-spacer { display: none; }

  /* The section's foot, below the journey strip, as on a desktop. The phone
     drew nothing here: the spacer that used to stand in for it was hidden by
     the rule above, and the gap above the strip was doing the work instead. */
  .em-hero:not(.em-hero--page) { padding-bottom: 60px; }

  .em-is-home .em-hero .has-text-align-center { text-align: left; }

  .em-is-home .em-hero h1 {
    font-size: 29px;
    line-height: 1.04;
    letter-spacing: -.018em;
    margin: 0 0 14px;
  }

  /* WordPress prints every font size preset with !important, so overriding
     one needs the same weight. Same reason as the interior hero below. */
  .em-is-home .em-hero .wp-block-paragraph.has-eyebrow-font-size {
    font-size: var(--em-size-eyebrow-sm) !important;
    letter-spacing: .26em;
    margin-bottom: 16px;
  }

  .em-is-home .em-hero__standfirst {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 26px;
    max-width: 310px;
  }

  /* Inside the hero only: the call to action band's buttons carry the same
     class and are not the hero's. */
  .em-is-home .em-hero .em-hero__actions {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 34px;
  }

  /* The 290px hero button is a desktop measurement: on a phone the mockup
     runs both buttons the full width of the gutter. */
  .em-is-home .em-hero .wp-block-button,
  .em-is-home .em-hero .wp-block-button__link {
    display: block;
    width: 100%;
  }

  .em-is-home .em-hero .wp-block-button__link {
    padding: 16px 0;
    font-size: 12.5px;
  }

  .em-is-home .em-hero .wp-block-button.is-style-outline .wp-block-button__link {
    padding: 15px 0;
  }
}

/* ---- 2b. Interior page hero -----------------------------------------
   The same ground and the same drifting wash, one step smaller, and with
   the contact details row beneath it. The home hero carries two washes;
   the interior pages draw only the right hand one, so the second is
   suppressed rather than redeclared. Measured from the contact page. */

.em-hero--page::after { content: none; }

.em-hero--page .em-hero__inner {
  padding: 100px var(--em-gutter);
}

.em-hero--page h1 {
  font-size: var(--em-size-page-hero);
  line-height: 1.04;
  margin: 0 auto 22px;
  max-width: 900px;
}

.em-hero--page .em-hero__standfirst {
  font-size: var(--em-size-body);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 760px;
}

.em-hero--page .em-hero__standfirst + .em-hero__standfirst { margin-top: 18px; }

.em-hero--page .wp-block-paragraph.has-eyebrow-font-size { margin-bottom: 24px; }

.em-hero--page .em-hero__actions {
  gap: 16px;
  margin: 34px 0 0;
}

/* The hero buttons are a fixed 290px on the home page only. Here they size
   to their own label, as the mockup draws them. */
.em-hero--page .wp-block-button__link {
  width: auto;
  padding: 18px 34px;
}

/* The mockup offers a second, outlined jump to the form on a phone only,
   where the form is a long way down the page. */
.em-hero__actions .wp-block-button.em-button--phone { display: none; }

@media (max-width: 920px) {
  .em-hero--page .em-hero__inner {
    padding: 60px var(--em-gutter);
    text-align: left;
  }

  .em-hero--page h1 {
    line-height: 1.06;
    letter-spacing: -.018em;
    margin-bottom: 14px;
  }

  .em-hero--page .em-hero__standfirst { line-height: 1.6; }

  /* WordPress prints every font size preset with !important, so overriding
     one needs the same weight. It is the only !important in the theme and it
     exists for that reason alone. */
  .em-hero--page .wp-block-paragraph.has-eyebrow-font-size {
    font-size: var(--em-size-eyebrow-sm) !important;
    letter-spacing: .28em;
    margin-bottom: 16px;
  }

  /* The single wash is wider and higher on a phone, so it still reads
     behind a much shorter hero. */
  .em-hero--page::before {
    width: 130%;
    height: 150%;
    right: -25%;
    top: -30%;
  }

  .em-hero--page .em-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }

  .em-hero__actions .wp-block-button.em-button--phone { display: block; }

  .em-hero--page .wp-block-button,
  .em-hero--page .wp-block-button__link {
    display: block;
    width: 100%;
  }

  .em-hero--page .wp-block-button__link {
    padding: 15px 0;
    font-size: 12.5px;
  }

  .em-hero--page .wp-block-button.is-style-outline .wp-block-button__link {
    padding: 14px 0;
  }
}

/* ---- 2e. Awaiting content marker ------------------------------------
   Used inline, where a section is built but its copy has not been
   supplied. Amber so it cannot be mistaken for finished work. */

.em-awaiting {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px dashed #B8860B;
  background: rgba(216, 192, 72, .09);
  border-radius: var(--em-radius-card);
  padding: 14px 18px;
  font-size: var(--em-size-small-plus);
  line-height: 1.55;
  color: #6B5200;
  text-align: left;
  /* Narrower than the section around it, and centred in it, as the mockup
     draws every one of these. A marker inside a card is already narrower
     than this, so the cap changes nothing there. */
  max-width: 700px;
  margin-inline: auto;
}

/* The mockup sets the marker 28px clear of whatever it follows. Scoped to a
   page section, because the same class is also used inside a card, where the
   card's own padding already does that job. */
.em-section-block--page > .em-awaiting { margin-top: 28px; }

.em-awaiting::before {
  content: 'Awaiting content';
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--em-size-eyebrow-sm);
  white-space: nowrap;
  padding-top: 2px;
}

/* ---- 2e2. Numbered rule ----------------------------------------------
   A core paragraph carrying this block style becomes the number and
   hairline that open a principle card. Measured from the about page. */

.wp-block-paragraph.is-style-em-number {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  /* The mockup draws this in --em-accent, which is 3.89:1 on white. At 22px
     and weight 600 that is under WCAG AA either way it is measured, so it uses
     --em-link, the darker green the design already gives to green text that
     has to be read. Same reasoning as --em-footer-dim in tokens.css. Recorded
     in BUILD-REPORT.md as a deliberate deviation from the artefact. */
  color: var(--em-link);
  margin-bottom: 18px;
}

.wp-block-paragraph.is-style-em-number::after {
  content: '';
  flex: 1;
  height: 1px;
  /* The same alpha the call to action panel's border uses. */
  background: rgba(95, 142, 46, .28);
}

/* ---- 2e1. Small caps label -------------------------------------------
   The little uppercase label that sits over a block of details. Used by
   the contact details block, and available as a block style on any core
   paragraph. Declared here rather than in that block's own stylesheet so
   there is one copy of it. Measured from the about page. */

p.is-style-em-label,
.em-details__label {
  font-size: var(--em-size-eyebrow-sm);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--em-muted);
  margin-bottom: 16px;
}

@media (max-width: 920px) {
  p.is-style-em-label,
  .em-details__label {
    font-size: 9.5px;
    letter-spacing: .2em;
  }
}

/* ---- 2e3. Green dot bullets ------------------------------------------
   A core list carrying this block style becomes the bullets the interior
   pages use: centred under the section heading on a desktop, ranged left
   on a phone. Measured from Why Emeraude in the mockup bundle. */

.wp-block-list.is-style-em-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 6px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.wp-block-list.is-style-em-bullets > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--em-size-body);
  line-height: 1.65;
  color: var(--em-muted);
}

/* The dot. A pseudo-element rather than a list marker, so it can be sized
   and positioned to the mockup's values. */
.wp-block-list.is-style-em-bullets > li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--em-accent);
  margin-top: 9px;
}

@media (max-width: 920px) {
  .wp-block-list.is-style-em-bullets {
    gap: 13px;
    margin: 4px 0 20px;
  }

  .wp-block-list.is-style-em-bullets > li {
    gap: 13px;
    justify-content: flex-start;
    line-height: 1.6;
  }

  .wp-block-list.is-style-em-bullets > li::before {
    width: 6px;
    height: 6px;
    margin-top: 8px;
  }
}

/* ---- 2e4. Narrow note ------------------------------------------------
   A core paragraph set to a narrower measure than the section it sits in.
   Measured from the switch-back guarantee on Why Emeraude. */

.wp-block-paragraph.is-style-em-note {
  max-width: 760px;
  margin: 22px auto 8px;
  padding: 6px 0;
}

@media (max-width: 920px) {
  .wp-block-paragraph.is-style-em-note {
    max-width: none;
    margin: 18px 0 6px;
    padding: 4px 0;
  }
}

/* ---- 2e5. Arrow link -------------------------------------------------
   A core button carrying this block style becomes the mockup's uppercase
   text link with a trailing arrow, used inside a section to send a reader
   on to a related page. Measured from "See our training program" in the
   switch section of the mockup bundle.

   This is not a variant of .em-textlink, the home page's own arrow link.
   Every measurement differs: 600 against 700, .14em tracking against .18em,
   13px against 12px, and here the arrow is sized separately from the words.
   Folding the two together would make one of them compromise, the same
   reasoning as the section divider in BUILD-REPORT.md section 19.

   The arrow is a pseudo-element rather than a character in the link text, so
   an editor writes only the words and cannot delete the arrow by accident. */

.wp-block-button.is-style-em-arrow .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: var(--em-size-small-plus);
  font-weight: 600;
  letter-spacing: var(--em-track-button);
  text-transform: uppercase;
  color: var(--em-link);
  transition: color .2s;
}

.wp-block-button.is-style-em-arrow .wp-block-button__link::after {
  content: '\2192';
  font-size: var(--em-size-arrow);
  line-height: 1;
}

.wp-block-button.is-style-em-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-em-arrow .wp-block-button__link:focus {
  background: none;
  color: var(--em-link-hover);
}

@media (max-width: 920px) {
  .wp-block-button.is-style-em-arrow .wp-block-button__link {
    gap: 9px;
    margin-top: 6px;
    font-size: var(--em-size-small);
  }

  .wp-block-button.is-style-em-arrow .wp-block-button__link::after {
    font-size: var(--em-size-arrow-sm);
  }
}

/* ---- 2f. Ruled strapline --------------------------------------------
   A core paragraph carrying this block style becomes the rule-flanked
   strapline that closes the call to action panel. */

.wp-block-paragraph.is-style-em-ruled {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  font-size: var(--em-size-eyebrow);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--em-link);
  text-align: center;
}

.wp-block-paragraph.is-style-em-ruled::before,
.wp-block-paragraph.is-style-em-ruled::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--em-rule-strong);
}

@media (max-width: 920px) {
  .wp-block-paragraph.is-style-em-ruled {
    font-size: 9px;
    letter-spacing: .2em;
    gap: 10px;
  }
}


@media (max-width: 920px) {
  .is-style-em-card { padding: 22px 22px 24px; }

  /* --em-size-card-lead already drops to 17px on a phone; only the space
     under the heading changes. */
  .is-style-em-card h2,
  .is-style-em-card h3 { margin-bottom: 8px; }

  .is-style-em-card p {
    line-height: 1.6;
    margin-bottom: 12px;
  }
  .mobile-align-center { text-align: center !important; }
  .em-hero__actions{margin-bottom:0px;}
  .em-section-block--tight#book-a-call{padding-top:0px;padding-bottom:0px;}

  .tablet_button_align_left{justify-content: flex-start !important;}    
  
  .wp-block-buttons .wp-block-button__link{
    font-size:12.5px;
    padding:16px;
  }    

  .em-grid--principles .is-style-em-card p:not(.is-style-em-number){
    font-size:14.5px;
  }

}


@media(max-width:500px){
  .wp-block-button{width:100%;}    
}


.wp-block-paragraph:last-child,
.wp-block-list:last-child{
    margin-bottom: 0px;
}



.em_features_list{
    display: flex;
    flex-wrap: wrap;
    width: calc(var(--em-max) + var(--em-gutter) * 2);
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    gap:20px;
}
.em_features_list>div{
    width:calc(50% - 10px) !important;
    margin:0px !important;
}
.em_features_list>div:first-child{
    width: 100% !important;
}
@media(max-width:767px){
    .em_features_list>div{
        width:100% !important
    }
    .em-journey{
      display:none !important;
    }
    .em-is-home .em-hero .em-hero__actions{
      margin-bottom: 0px !important;
    }
    
}