/**
 * EME Rooming Houses - migration stylesheet.
 *
 * The page's own styling is inlined in <head> exactly as the builder emitted
 * it, so this file stays deliberately small. It only covers the pieces the
 * GoHighLevel runtime used to own: the native <select> elements that replaced
 * the JS dropdown widgets, and form validation feedback.
 */

/* ---------------------------------------------------------------------------
   Base font.

   GoHighLevel set a font-family inline on every text element it emitted and
   never set one on <body>, so this document has nothing to inherit from.
   Anything we add that does not state its own font gets the browser default,
   which is how the submit button's "Sending..." came out in Times next to an
   Inter page, and why `font-family: inherit` further down means "no font at
   all" rather than "the page font".

   Inline styles beat this rule, so every element the builder styled is
   untouched. It only reaches the elements that currently have no font, which
   are exactly the ones that render wrong.
   --------------------------------------------------------------------------- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
   The companion to the width/height attributes the build now emits.

   enhanceImages stamps every local image with its intrinsic width and height
   so the browser can reserve space before the bytes arrive. That is what took
   the homepage's layout shift from 0.65 to 0.009.

   On its own it is also a bug. HTML width/height are presentational hints, so
   with `max-width:100%` narrowing the width and nothing governing the height,
   the browser uses the literal height attribute: the 2179x460 logo was laid
   out in a 346x460 box and squashed from 4.74:1 to 0.75:1. Lighthouse caught
   it as "Displays images with incorrect aspect ratio".

   `height:auto` restores the ratio while keeping the reserved space, because
   modern browsers derive an aspect-ratio from the two attributes.

   Deliberately the bare element selector and nothing stronger. It carries the
   lowest possible specificity, so every builder rule that sets a height on
   purpose still wins, and `auto` is the initial value anyway: this changes
   nothing except where a presentational attribute would otherwise have taken
   over. An earlier draft used `img[width][height]`, which outranks the
   builder's own class rules and would have overridden heights that were meant.
   --------------------------------------------------------------------------- */
img {
  height: auto;
}

/* ---------------------------------------------------------------------------
   Form layout.

   GoHighLevel's form markup leans on utility classes - .flex, .relative,
   .flex-col - that lived in the bundle stylesheet rather than the page's
   inlined CSS. Stripping the runtime took them with it, and two things broke
   quietly:

     1. Every field fell back to an <input>'s intrinsic width (~260px) inside a
        460px panel, so the text fields and the dropdowns no longer lined up.
     2. The email icon is an inline SVG with a viewBox and no width/height. Un-
        sized and un-positioned it rendered at the 300x150 default for a
        replaced element, shoving the email input into the remaining space.

   These rules restore the layout the builder intended. Field colours, borders
   and padding still come from the page's own inlined CSS, so the form keeps
   whatever skin was configured in GoHighLevel.
   --------------------------------------------------------------------------- */
#_builder-form .flex-col {
  display: flex;
  flex-direction: column;
}

/* Wrappers for the two fields that carry an icon or an add-on. */
#_builder-form .email-input,
#_builder-form .phone-input {
  position: relative;
  display: flex;
  width: 100%;
}

/* One edge down the whole column. */
#_builder-form .form-control {
  width: 100%;
  box-sizing: border-box;
}

/* The icon overlays the field. The builder already sets an inline
   padding-left on the input, which reserves the space it sits in. */
#_builder-form .email-input .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Native select.

   GoHighLevel styled its text inputs and its own Vue dropdown widget, but
   never a native <select> - it had no reason to. So unlike the inputs, these
   inherit nothing and have to carry the full field skin themselves. The values
   below are copied from the page's inlined rules for input[type=text] and
   input[type=email] so the two kinds of field are indistinguishable.
   --------------------------------------------------------------------------- */
select.eme-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;

  background-color: #f8f1f1;
  color: #000;
  border: 1px solid #274a66;
  border-radius: 5px;
  padding: 10px 20px;
  font-family: 'roboto', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;

  /* Leave room for the arrow so long option text never sits underneath it. */
  padding-right: 40px !important;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23626464' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* Unchosen placeholder reads as placeholder text, matching the inputs'. */
select.eme-select:invalid,
select.eme-select option[value=""] {
  color: #626464;
}
select.eme-select option {
  color: #000;
  background: #f8f1f1;
}

/* Native dropdowns render their own list, so the widget's leftovers must go. */
.multiselect__content-wrapper,
.multiselect__spinner {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   "We filled this in from last time" notice.

   Quiet, but it has to be readable and the clear control has to be obviously
   pressable — it is the only way someone on a shared machine can remove their
   details from that browser.
   --------------------------------------------------------------------------- */
.eme-remembered {
  color: #cfcfcf;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 16px;
  text-align: center;
}

.eme-remembered__clear {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: #dbab4b;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.eme-remembered__clear:hover,
.eme-remembered__clear:focus-visible {
  color: #f0c66a;
}

/* ---------------------------------------------------------------------------
   Validation feedback
   --------------------------------------------------------------------------- */
.eme-invalid {
  border-color: #e93d3d !important;
  box-shadow: 0 0 0 1px rgba(233, 61, 61, 0.35) !important;
}

.eme-field-error {
  color: #ff8a8a;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  margin: 6px 2px 0;
  text-align: left;
}

.eme-form-status {
  display: none;
  border-radius: 8px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 14px;
  padding: 12px 14px;
  text-align: center;
}

.eme-form-status.eme-error {
  background: rgba(233, 61, 61, 0.12);
  border: 1px solid rgba(233, 61, 61, 0.5);
  color: #ffb4b4;
}

.eme-form-status.eme-success {
  background: rgba(55, 202, 55, 0.12);
  border: 1px solid rgba(55, 202, 55, 0.5);
  color: #bdf3bd;
}

/* ---------------------------------------------------------------------------
   "You already have a call booked" - replaces the form in place.

   Sits inside the builder's form panel, which is dark, so this follows the
   form status colours rather than the booking panel's light ones. The wording
   is HQ's and can be a long sentence, so it is sized as body copy and left to
   wrap.
   --------------------------------------------------------------------------- */
.eme-booked {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding: 24px 20px;
  position: relative;
  text-align: center;

  /* A card, not a paragraph. This replaces a form, so it has to read as the
     thing that happened rather than as text where the fields used to be: the
     first version was missed entirely by the person it was written for. */
  background: rgba(219, 171, 75, 0.06);
  border: 1px solid rgba(219, 171, 75, 0.38);
  border-radius: 12px;
  overflow: hidden;

  /* The glow breathes rather than sitting still, because a static panel is
     exactly what went unnoticed. Slow enough to read as attention, not as an
     alarm. */
  animation: eme-booked-glow 3s ease-in-out infinite;
}

/* The shimmer. A highlight crosses the card, then waits: it sweeps in the
   first third of the cycle and idles off the right edge for the rest, so the
   eye is caught again every few seconds without the panel ever looking busy.
   Pointer events off, so it can never swallow a tap on the support link. */
.eme-booked::after {
  animation: eme-booked-shimmer 5s ease-in-out infinite;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.13) 45%,
    rgba(219, 171, 75, 0.1) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  content: '';
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-130%);
  width: 55%;
}

/* The shimmer passes behind the words, never across them: the text stays
   crisp and only the card surface catches the light. */
.eme-booked > * {
  position: relative;
}

@keyframes eme-booked-glow {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(219, 171, 75, 0.14), 0 0 14px rgba(219, 171, 75, 0.12);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(219, 171, 75, 0.42), 0 0 30px rgba(219, 171, 75, 0.34);
  }
}

@keyframes eme-booked-shimmer {
  0% {
    transform: translateX(-130%);
  }
  35%,
  100% {
    transform: translateX(290%);
  }
}

/* Reduced motion keeps the emphasis and drops the movement: the glow stays at
   its bright end rather than cycling, and the shimmer never runs. Someone who
   has asked for less motion still needs to notice this panel. */
@media (prefers-reduced-motion: reduce) {
  .eme-booked {
    animation: none;
    box-shadow: 0 0 0 1px rgba(219, 171, 75, 0.42), 0 0 30px rgba(219, 171, 75, 0.34);
  }

  .eme-booked::after {
    display: none;
  }
}

.eme-booked__when {
  color: var(--color-mdowspgv, #dbab4b);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}

.eme-booked__message {
  color: #e8e8e8;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.eme-booked__support {
  color: #cfcfcf;
  font-size: 14px;
  line-height: 1.6;
  margin: 14px 0 0;
}

.eme-booked__support a {
  color: var(--color-mdowspgv, #dbab4b);
  text-decoration: underline;
}

/* The builder gives every field wrapper `margin-bottom: 20px` inline, which is
   correct between fields and dead weight on the last one — there it stacks onto
   the panel's own 30px bottom padding, leaving 50px under the submit button
   against 30px above the heading. Dropping it makes the panel symmetrical.

   Inline styles win over stylesheets, hence !important. Written as two separate
   rules on purpose: an unsupported selector invalidates its whole rule, so
   pairing them in one list would take the fallback down with it. */
#_builder-form .form-field-wrapper:last-child {
  margin-bottom: 0 !important;
}

#_builder-form .form-field-wrapper:has(.form-builder--btn-submit) {
  margin-bottom: 0 !important;
}

/* Blog cards and the "More stories" control.
   ------------------------------------------------------------------
   Both of these were <button>/<div> elements that GoHighLevel navigated from
   its runtime. Turning them into real links is correct, but an <a> arrives
   with browser defaults a <button> never had: "More stories" came out with a
   blue underline under its white label, because the underline takes the
   anchor's own colour. Same trap as the submit overlay's font. */
a.more-actions,
a.more-actions:hover,
a.more-actions:visited {
  color: inherit;
  text-decoration: none;
}

/* The card advertises itself as clickable: GoHighLevel puts cursor:pointer on
   the image and the heading. It only ever was clickable on the small "...more"
   link at the end of the excerpt, because the title anchor had no href.

   The title now carries the link, and this stretches that one link across the
   whole card, so the entire card is the hit area. One link per card, no
   JavaScript, and no nested anchors. */
.blog-item.blog-column {
  position: relative;
}

.blog-item-heading a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The excerpt's own "...more" link has to stay above the stretched overlay, or
   it becomes unclickable. It goes to the same place, so this is only about not
   breaking a control that currently works. */
.blog-item-description {
  position: relative;
  z-index: 2;
}

.blog-item.blog-column:hover .blog-item-heading a {
  text-decoration: underline;
}

/* Funnel video, replacing GoHighLevel's self-hosted player.
   ------------------------------------------------------------------
   The builder's own wrapper held its aspect ratio with padding-bottom:56.25%
   on an empty div, so the box existed before the video loaded and the page
   never reflowed. Same trick here, for the same reason: the Stream iframe
   arrives lazily and everything below it must not jump when it does.

   Each page has two of these, one in a .desktop-only wrapper and one in
   .mobile-only.tablet-hide. Only one is ever visible. */
.eme-video {
  background: #000;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}

.eme-video iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* The submit button.
   Browsers give <button> `cursor: default`, so the form's own submit was the
   one control on the page that did not signal it was clickable — every other
   CTA is an <a>, which gets a pointer for free. The hover lift comes from the
   builder's own `buttonElevate` class, added during the build. */
#_builder-form button[type='submit'] {
  cursor: pointer;
}

/* The funnel CTAs have the same problem: the builder renders them as <button>,
   so they never showed a pointer either. site.js binds their scroll-to-form
   behaviour, which GoHighLevel's runtime used to own. */
.c-button button {
  cursor: pointer;
}

/* Submitting state.
   ------------------------------------------------------------------
   The button is disabled while the request is in flight, and a disabled
   control receives no pointer events at all - so `button[disabled] { cursor:
   progress }`, which is what used to be here, could never apply. The class
   goes on the FORM instead, and the rule is inherited down to whatever the
   pointer is actually over.

   GoHighLevel's own spinner is left hidden by site.js. Its markup survives the
   build but the keyframes that animated it did not, so it draws a motionless
   15px ring in the builder's blue: worse than nothing, because it looks
   deliberate. This replaces it. */
#_builder-form.is-submitting,
#_builder-form.is-submitting * {
  cursor: progress;
}

/* Fills the button, so the label underneath keeps the button at its own width
   and nothing on the page moves when submitting starts. */
#_builder-form button[type='submit'] {
  position: relative;
}

.eme-submitting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* The button is gold with black text, so black reads against it. */
  color: #000;
  /* Stated, not inherited. There is no font on <body> to inherit from (see the
     base rule above), so leaving this out fell back to the browser's default
     serif and the button read as Times next to an Inter page. Matches the
     label underneath: the builder styles it inline at 18px bold Inter. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.eme-spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: eme-spin 0.7s linear infinite;
}

@keyframes eme-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Slowed rather than stopped. This spinner is not decoration - it is the only
   thing telling someone their submission is still going. */
@media (prefers-reduced-motion: reduce) {
  .eme-spinner {
    animation-duration: 2.4s;
  }
}

/* Footer contact email. The builder nests the mailto link inside a button and
   its global link colour otherwise overrides the button's white text. */
.c-button a[href^='mailto:'],
.c-button a[href^='mailto:']:visited,
.c-button a[href^='mailto:']:hover,
.c-button a[href^='mailto:']:focus,
.c-button a[href^='mailto:']:active {
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Build version, stamped into the footer copyright line.

   Quieter than the copyright it sits beside, but deliberately still legible -
   its whole purpose is to be read aloud over the phone when something needs
   diagnosing. Slightly dimmed rather than shrunk, so it stays readable.
   --------------------------------------------------------------------------- */
.eme-version {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Turnstile - sits directly above the submit button inside the form panel.
   Reserve the widget's height so the button does not jump when it renders.
   --------------------------------------------------------------------------- */
/* Full width, so the widget lines up with the fields above it and the submit
   button below. Plain block layout on purpose: making this a flexbox turns the
   widget into a flex item, which shrinks to its content and leaves it visibly
   narrower than everything else.

   See the note on `turnstile.size` in build/config.js for the known clipped
   right-hand border, and why narrowing this is not the fix. */
.eme-turnstile {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 14px;
  min-height: 65px;
}

.eme-turnstile:empty {
  min-height: 0;
}

.eme-turnstile > .cf-turnstile {
  width: 100%;
}

.eme-turnstile iframe {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Booking widget - our own slot picker, talking to EME HQ.

   LIGHT panel, deliberately. The section it sits in is `.gradient3`, which is
   #F5F5F5 washed with gold - so this area was always light, and the earlier
   dark styling never applied: the base `.eme-booking` rule further down this
   file sets `background:#fff` at the same specificity and simply won on order.
   The visible result was white text on cream buttons, legible only as shapes.

   Every rule here is `.eme-booking.eme-booking--hq` rather than the single
   class, so it beats that base rule on specificity and does not depend on
   where it sits in the file.

   Mobile-first: the day strip scrolls sideways and the time grid wraps.
   Nothing is in an iframe, so there is no fixed height to clip on a phone.
   --------------------------------------------------------------------------- */
.eme-booking.eme-booking--hq {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
  color: #1a1a1a;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* The builder's calendar container lost its spacing with the bundle, so the
     panel has to hold itself off the top of the section. */
  margin: 40px auto 44px;
  max-width: 720px;
  overflow: visible;
  padding: 28px 20px 30px;
  text-align: left;
  width: 100%;
}

.eme-booking--hq .eme-booking__loading {
  color: #666;
  padding: 32px 0;
  text-align: center;
}

/* This is the whole purpose of the page a qualified lead just reached, so it
   should announce itself. Gold deep enough to hold contrast on white. */
.eme-booking--hq .eme-booking__heading {
  color: #a9791a;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
  text-align: center;
}

.eme-booking--hq .eme-booking__meta {
  color: #5f5f5f;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 4px;
  text-align: center;
}

.eme-booking--hq .eme-booking__chosen {
  color: #a9791a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 18px;
}

/* A labelled step, so the two lists are not just two anonymous rows. */
.eme-booking--hq .eme-booking__step {
  color: #6b6b6b;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin: 22px 0 10px;
  text-transform: uppercase;
}

/* Days: a horizontal strip that scrolls on a phone rather than wrapping into
   an unreadable block. */
.eme-booking--hq .eme-booking__days {
  display: flex;
  gap: 10px;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.eme-booking--hq .eme-booking__day {
  background: #fff;
  border: 1.5px solid #d9d9d9;
  border-radius: 9px;
  color: #2b2b2b;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  min-height: 46px;
  padding: 11px 18px;
  transition: 0.15s ease;
  white-space: nowrap;
}

.eme-booking--hq .eme-booking__day:hover,
.eme-booking--hq .eme-booking__day:focus-visible {
  border-color: #a9791a;
  color: #000;
}

.eme-booking--hq .eme-booking__day.is-selected {
  background: #c48e1b;
  border-color: #c48e1b;
  box-shadow: 0 2px 8px rgba(196, 142, 27, 0.35);
  color: #1a1a1a;
}

/* Times: a wrapping grid, comfortably tappable.

   Dark text on white with a gold border. The previous pass had white text on a
   translucent gold fill, which over a white panel came out as white-on-cream -
   you could see that something was there but not what it said. */
.eme-booking--hq .eme-booking__times {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.eme-booking--hq .eme-booking__time {
  background: #fff;
  border: 1.5px solid #c48e1b;
  border-radius: 9px;
  color: #1a1a1a;
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  padding: 12px 8px;
  text-align: center;
  transition: 0.15s ease;
  width: 100%;
}

.eme-booking--hq .eme-booking__time:hover,
.eme-booking--hq .eme-booking__time:focus-visible {
  background: #c48e1b;
  border-color: #c48e1b;
  box-shadow: 0 3px 10px rgba(196, 142, 27, 0.35);
  color: #1a1a1a;
}

/* Taken. Still legible - it shows the shape of the day and that these are real
   working hours, which an empty grid cannot. */
.eme-booking--hq .eme-booking__time.is-taken {
  background: #f4f4f4;
  border-color: #e4e4e4;
  color: #6f6f6f;
  cursor: not-allowed;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: #c4c4c4;
}

.eme-booking--hq .eme-booking__hint {
  color: #5f5f5f;
  font-size: 13px;
  margin: 16px 0 0;
  text-align: center;
}

/* Details form */
.eme-booking--hq .eme-booking__back {
  background: none;
  border: 0;
  color: #a9791a;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 14px;
  padding: 0;
}

.eme-booking--hq .eme-booking__field {
  display: block;
  margin: 0 0 14px;
}

.eme-booking--hq .eme-booking__field > span {
  color: #4a4a4a;
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

.eme-booking--hq .eme-booking__field input,
.eme-booking--hq .eme-booking__field textarea {
  background: #fff;
  border: 1.5px solid #d4d4d4;
  border-radius: 8px;
  box-sizing: border-box;
  color: #1a1a1a;
  /* Stated: 'inherit' resolves to the browser default here, not the page font. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
}

.eme-booking--hq .eme-booking__field input:focus,
.eme-booking--hq .eme-booking__field textarea:focus {
  border-color: #c48e1b;
  outline: 2px solid rgba(196, 142, 27, 0.25);
  outline-offset: 1px;
}

.eme-booking--hq .eme-booking__captcha {
  margin: 16px 0 4px;
  min-height: 65px;
}

.eme-booking--hq .eme-booking__submit {
  background: #f8bd33;
  border: 0;
  border-radius: 9px;
  box-shadow: 0 3px 12px rgba(196, 142, 27, 0.35);
  color: #000;
  cursor: pointer;
  /* Stated: 'inherit' resolves to the browser default here, not the page font. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  min-height: 50px;
  padding: 14px 20px;
  width: 100%;
}

/* While booking: the spinner sits inline beside "Booking…", so the button
   needs to centre the two of them rather than a single text node. */
.eme-booking--hq .eme-booking__submit {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* On the panel, not the button, for the same reason as the lead form: a
   disabled button gets no pointer events, so a cursor rule on it never lands. */
.eme-booking.is-submitting,
.eme-booking.is-submitting * {
  cursor: progress;
}

.eme-booking--hq .eme-booking__submit:hover {
  background: #dbab4b;
}

.eme-booking--hq .eme-booking__submit[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.eme-booking--hq .eme-booking__status {
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 1px;
}

.eme-booking--hq .eme-booking__status--error {
  color: #b3261e;
  font-weight: 600;
}

/* Outcome panels */
.eme-booking--hq .eme-booking__message {
  padding: 16px 0;
  text-align: center;
}

.eme-booking--hq .eme-booking__message h3 {
  color: #a9791a;
  font-size: 21px;
  margin: 0 0 10px;
}

.eme-booking--hq .eme-booking__message p {
  color: #4a4a4a;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.eme-booking--hq .eme-booking__message--success h3 {
  color: #1e7a34;
}

.eme-booking--hq .eme-booking__message--error h3 {
  color: #b3261e;
}

/* Already booked. No heading of ours, so HQ's sentence is the whole panel and
   is sized to be read as a statement rather than a caption.

   Same treatment as the lead form's version, tuned for a white card: this one
   replaces the slot picker, so it has to announce itself just as plainly. */
.eme-booking--hq .eme-booking__message--booked {
  animation: eme-booked-glow-light 3s ease-in-out infinite;
  background: rgba(169, 121, 26, 0.05);
  border: 1px solid rgba(169, 121, 26, 0.32);
  border-radius: 12px;
  overflow: hidden;
  padding: 26px 22px;
  position: relative;
}

.eme-booking--hq .eme-booking__message--booked::after {
  animation: eme-booked-shimmer 5s ease-in-out infinite;
  background: linear-gradient(
    100deg,
    rgba(169, 121, 26, 0) 0%,
    rgba(169, 121, 26, 0.12) 50%,
    rgba(169, 121, 26, 0) 100%
  );
  content: '';
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-130%);
  width: 55%;
}

.eme-booking--hq .eme-booking__message--booked p {
  color: #2f2f2f;
  font-size: 17px;
  margin: 0;
  position: relative;
}

@keyframes eme-booked-glow-light {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(169, 121, 26, 0.1), 0 0 12px rgba(169, 121, 26, 0.1);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(169, 121, 26, 0.34), 0 0 26px rgba(169, 121, 26, 0.26);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eme-booking--hq .eme-booking__message--booked {
    animation: none;
    box-shadow: 0 0 0 1px rgba(169, 121, 26, 0.34), 0 0 26px rgba(169, 121, 26, 0.26);
  }

  .eme-booking--hq .eme-booking__message--booked::after {
    display: none;
  }
}

.eme-booking--hq .eme-booking__fallback a {
  color: #a9791a;
  font-weight: 600;
}

@media (min-width: 560px) {
  .eme-booking.eme-booking--hq {
    padding: 32px 30px 34px;
  }
}
/* ---------------------------------------------------------------------------
   Booking calendar - replaces the GoHighLevel scheduler widget.
   --------------------------------------------------------------------------- */
.eme-booking {
  width: 100%;
  margin: 0 auto;
  max-width: 1100px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.eme-booking--placeholder {
  background: #111;
  border: 2px dashed #c29641;
  border-radius: 12px;
  color: #e8e8e8;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding: 48px 28px;
  text-align: center;
}

.eme-booking--placeholder h3 {
  color: #dbab4b;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

.eme-booking--placeholder p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 8px;
  max-width: 560px;
}

.eme-booking__fallback a {
  color: #dbab4b;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Accessibility: the builder ships icon-only controls with no visible focus.
   --------------------------------------------------------------------------- */
.nav-menu-mobile:focus-visible,
.x-icon [role='button']:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-mdowspgv, #dbab4b);
  outline-offset: 2px;
}

/* The FAQ headings are a special case. The builder sets
   `.hl-faq-child-heading { outline: none }`, which cost nothing while they
   were unfocusable divs - but site.js now gives them role="button" and
   tabindex="0", so a keyboard user would otherwise be moving through the
   accordion with no visible focus at all. A class + pseudo-class beats the
   builder's single class, so no !important is needed.

   The ring is inset rather than offset: each item is a bordered card with a
   10px radius, and a ring drawn outside the heading collides with it. */
.hl-faq-child-heading:focus-visible {
  outline: 2px solid var(--color-mdowspgv, #dbab4b);
  outline-offset: -2px;
}

/* Elements awaiting their entrance animation must never trap a keyboard user
   in invisible content if scripting fails. */
@media (prefers-reduced-motion: reduce) {
  [data-animation-class] {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* No-JS fallback: reveal anything the runtime would have animated in. */
.no-js [data-animation-class] {
  opacity: 1 !important;
}

/* ===========================================================================
   .eme-prose: the content column on pages built from markdown.
   ===========================================================================

   The builder has no equivalent to borrow. Its text styling is per-element and
   keyed to ids that exist only on the page it generated them for, so a page
   whose body comes from a content file has nothing to inherit. build/layout.js
   reuses the real header and footer; everything between them is styled here.

   Kept deliberately small and in the site's existing vocabulary: Inter, the
   #dbab4b gold used for headings and links, the near-black background, the same
   measure as the article pages. */

.eme-page {
  /* The site has no page-level background: every builder section paints its own,
     and the content sections use var(--black). A markdown page's <main> is not
     one of those sections, so without this it renders on the browser's white and
     the light-on-dark text below is invisible. Matching var(--black) also makes
     the column continuous with the header and footer above and below it. */
  background: var(--black, #000);

  /* The chrome sits inside #preview-container, which has no padding of its own,
     so the content column provides its own gutter. 16px on a phone matches the
     rest of the site. */
  padding: 56px 16px 72px;

  /* A short page must not leave a white band between the content and the
     footer. 60vh is comfortably more than the header plus the gap. */
  min-height: 60vh;
}

.eme-prose {
  margin: 0 auto;
  max-width: 44rem;
  color: #e8e8e8;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Long words and bare URLs must not push the column wider than the phone. */
  overflow-wrap: break-word;
}

.eme-prose > :first-child { margin-top: 0; }
.eme-prose > :last-child { margin-bottom: 0; }

.eme-prose h1,
.eme-prose h2,
.eme-prose h3,
.eme-prose h4,
.eme-prose h5,
.eme-prose h6 {
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  /* Headings bind to the text below them, not the text above. */
  margin: 2.25em 0 0.6em;
  text-wrap: balance;
}

.eme-prose h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-top: 0; }
.eme-prose h2 { font-size: clamp(1.5rem, 4vw, 1.95rem); }
.eme-prose h3 { font-size: clamp(1.25rem, 3.2vw, 1.5rem); }
.eme-prose h4 { font-size: 1.15rem; }
.eme-prose h5,
.eme-prose h6 {
  color: #dbab4b;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eme-prose p { margin: 0 0 1.25em; }
.eme-prose strong { color: #fff; font-weight: 700; }
.eme-prose em { font-style: italic; }

.eme-prose a {
  color: #dbab4b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.eme-prose a:hover { color: #f0c76b; }

.eme-prose ul,
.eme-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.eme-prose li { margin: 0 0 0.5em; }
.eme-prose li > ul,
.eme-prose li > ol { margin: 0.5em 0 0; }

.eme-prose blockquote {
  border-left: 3px solid #dbab4b;
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.25em;
  color: #cfcfcf;
  font-style: italic;
}
.eme-prose blockquote > :last-child { margin-bottom: 0; }

.eme-prose hr {
  border: 0;
  border-top: 1px solid #2a2a2a;
  margin: 2.5em 0;
}

.eme-prose figure { margin: 2em 0; }

/* Paired with the width/height attributes the renderer does NOT emit for
   content images, since their dimensions are not known at build time. Without
   `height: auto` a sized image would be distorted; with it, the image scales.
   The same rule exists for the builder's images higher up this file. */
.eme-prose img {
  border-radius: 8px;
  display: block;
  height: auto;
  max-width: 100%;
}

/* A drawn figure (the guides' SVG diagrams) is authored 480px wide so that a
   phone shows it at three quarters of its size rather than under half, with
   its labels still readable. On a desktop that leaves it narrower than the
   column, so it sits centred rather than hugging the left edge the way a
   full-width photograph does. */
.eme-prose img[src$=".svg"] {
  margin-left: auto;
  margin-right: auto;
}

.eme-prose pre {
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  margin: 1.75em 0;
  overflow-x: auto;
  padding: 1em 1.1em;
}
.eme-prose pre code { font-size: 0.875rem; white-space: pre; }
.eme-prose code {
  background: #1b1b1b;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
}
.eme-prose pre code { background: none; padding: 0; }

/* A table must be able to scroll on a phone rather than widen the page. */
.eme-prose table {
  border-collapse: collapse;
  display: block;
  margin: 1.75em 0;
  max-width: 100%;
  overflow-x: auto;
  font-size: 0.9375rem;
}
.eme-prose th,
.eme-prose td {
  border-bottom: 1px solid #2a2a2a;
  padding: 0.6em 0.9em;
  text-align: left;
}
.eme-prose th { color: #dbab4b; font-weight: 600; white-space: nowrap; }

/* An inline link inside the builder's body copy.
   The builder styles its own anchors per element, and a link injected into a
   paragraph by a copy edit matches none of those rules, so it would inherit the
   paragraph's colour and be invisible as a link. */
.eme-inline-link {
  color: #dbab4b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.eme-inline-link:hover { color: #f0c76b; }

/* The logo as a link home.
   build/layout.js wraps the header logo in an anchor on pages that are not the
   homepage. `display: block` keeps it transparent to the surrounding layout:
   it replaces a plain block div in the flow, so the locked logo column and the
   menu beside it are unaffected. */
.eme-logo-link {
  display: block;
  text-decoration: none;
}
.eme-logo-link:focus-visible {
  outline: 2px solid #dbab4b;
  outline-offset: 4px;
}

/* The breadcrumb trail at the top of a content page.
   Small, quiet, and above the h1, which is where someone looks for the way
   back after following a link in from somewhere else. */
.eme-breadcrumb {
  margin: 0 auto 1.75rem;
  max-width: 44rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}
.eme-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.6em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eme-breadcrumb li {
  color: #b8b8b8;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
/* The separator belongs to the list, not the text, so a screen reader does not
   read it out as a word. */
.eme-breadcrumb li + li::before {
  color: #636363;
  content: '/';
}
.eme-breadcrumb a {
  color: #dbab4b;
  text-decoration: none;
}
.eme-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eme-breadcrumb [aria-current='page'] { color: #e8e8e8; }

/* ===========================================================================
   .eme-faq and .eme-resource-list: the generated lists on /faq and /resources.
   ===========================================================================

   Both are rendered by build/blocks.js from the data rather than written into
   the content file, so what is styled here is markup the build emits and not
   anything an author types. See that file for why.

   Same vocabulary as .eme-prose above: Inter, #dbab4b gold, near-black. These
   sit INSIDE .eme-prose, so the heading and paragraph rules there already
   apply; what is added here is only the separation between items, which prose
   rules cannot express. */

/* One question and its answer. The hairline above each is what makes a long
   list readable without a box around every item, and :first-child drops it so
   the list does not open with a rule immediately under the intro. */
.eme-faq-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.75rem;
  margin-top: 1.75rem;
}
.eme-faq-item:first-child {
  border-top: 0;
  padding-top: 0;
}
/* Tighter than a prose h2, because the answer belongs to the question directly
   beneath it rather than opening a new part of the page. */
.eme-prose .eme-faq-item h2 {
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  margin: 0 0 0.6em;
}
.eme-prose .eme-faq-item p:last-child { margin-bottom: 0; }

/* The anchor target. Every question has an id so it can be linked to directly,
   and an anchor jump that lands a heading hard against the top of the viewport
   reads as though the page is cut off. The header is not fixed, so this is the
   whole of what is needed. */
.eme-faq-item h2 { scroll-margin-top: 1.5rem; }

/* Someone arriving on a specific question needs to see which one it is. Held
   for the gold rule rather than a background tint, which at this contrast would
   have looked like a selection the visitor could not clear. */
.eme-faq-item:target {
  border-left: 3px solid #dbab4b;
  padding-left: 1.25rem;
}


/* ===========================================================================
   The header at narrow widths: there is deliberately no rule here.
   ===========================================================================

   Adding a sixth nav item on 2026-10-09 took the desktop header row from about
   1020px wide to 1103px, which put a horizontal scrollbar on every page of the
   site up to that width. The fix was a media query between 768px and 1120px
   that dropped the logo column's floor to 230px and tightened the nav gap.

   Cutting the nav to three items later the same day removed the cause, so the
   media query went with it rather than being left in. The header is now about
   880px wide and nothing overflows above 900px. Keeping the rule would have
   cost a visibly smaller logo across a 350px range of widths to solve a problem
   that no longer exists.

   WHAT STILL HAPPENS BETWEEN 768px AND ABOUT 900px IS NOT THAT PROBLEM. Both
   header variants render in that range, because the desktop header section is
   display:none only below 768px while the mobile one is hidden only above
   1024.02px, so the page is as wide as the desktop header however narrow the
   window gets. Against the original five-item site the current build measures 0
   widths worse and 26 better, so this is a pre-existing defect that got
   smaller, not a new one. Closing it means not shipping two header variants in
   one response, which is the DOM-size item in CHANGELOG "Next up".

   The method is the part to keep. The header was measured in a real browser at
   a sweep of fourteen widths, with the previous build captured first as a
   baseline, because the nav never wraps and never overflows its own parent:
   this class of defect is invisible in a maximised window and invisible in a
   diff. Measure any future header change the same way. */

/* The resource cards on /resources.
   ------------------------------------------------------------------
   Damian asked for the hub to carry the imagery the homepage does rather than
   being a list of links. Each card shows the resource's own cover: for an
   article that is the picture already used on the post and in the homepage's
   hub section, so a reader meets the same image in all three places; for the
   guide it is the guide's actual cover.

   Written here rather than by reusing the builder's own `.blog-item` cards,
   which was the alternative and was measured first. Those cards render dark
   text on a light section background, and dropping them into a near-black page
   would have made /resources two-tone and stopped it matching /faq and
   Georgia's page. Damian chose the dark treatment, 2026-10-09. The LAYOUT
   follows the builder's cards: three across, image on top, heading, a quiet
   meta line, then the excerpt.

   The grid is `auto-fit` with a `minmax` floor rather than media queries, so it
   is three across on a desktop, two on a tablet and one on a phone without this
   file knowing any breakpoints. */
.eme-resource-list {
  display: grid;
  /* auto-FILL, not auto-fit: with one guide in the list, auto-fit collapses
     the empty tracks and stretches that single card across the whole row, so
     the guide came out as a 1150px banner. auto-fill keeps the tracks, so one
     card is the same size as one of four. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 2rem 1.5rem;
  margin: 0 0 3rem;
}

/* `.eme-prose` caps its column at 44rem, which is right for prose and too
   narrow for a three-across grid. The list breaks out to the full page width,
   to the same 16px gutter the page uses, and the prose around it stays put.
   `calc` rather than a viewport unit alone: 100vw includes the scrollbar, and
   on Windows that is a guaranteed 15px of horizontal overflow. */
.eme-prose .eme-resource-list {
  width: min(72rem, 100% + 2 * ((100vw - 2rem - 100%) / 2));
  max-width: calc(100vw - 2rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* The heading above a grid breaks out with it, so "Guides" and "Articles"
   share a left edge with the cards they label. Without this the heading sits
   in the 44rem prose column while the grid runs wider, and the section reads
   as two things that do not belong together.

    is the right tool and is supported everywhere this site cares
   about. Where it is not, the selector is simply ignored and the heading stays
   in the prose column: tidier is lost, nothing breaks. */
.eme-prose h2:has(+ .eme-resource-list) {
  width: min(72rem, 100% + 2 * ((100vw - 2rem - 100%) / 2));
  max-width: calc(100vw - 2rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

.eme-resource {
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* The whole card is the hit area, stretched from the one link in the heading.
   Same approach as the blog cards above, and for the same reason: one link per
   card, no JavaScript, no nested anchors. */
.eme-resource h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.eme-resource:hover {
  border-color: rgba(219, 171, 75, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

/* A fixed 3:2 box the cover is cropped into, so a portrait guide cover and a
   landscape article cover produce cards of the same shape and the grid's rows
   line up. `object-position: top` matters for the guide: its cover is a
   document, and the top of a document is the half worth showing. */
.eme-resource-cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #111;
}
.eme-prose .eme-resource-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  margin: 0;
  transition: transform 0.4s ease;
}
.eme-resource:hover .eme-resource-cover img {
  transform: scale(1.03);
}

.eme-resource-text {
  padding: 1.25rem 1.25rem 1.4rem;
}

.eme-prose .eme-resource h3 {
  margin: 0 0 0.5em;
  font-size: 1.15rem;
  line-height: 1.35;
}
/* The whole heading is the link, so it must not also be underlined: a gold
   heading on near-black is unambiguous, and an underline across three wrapped
   lines of title is noise. It returns on hover and on keyboard focus. */
.eme-prose .eme-resource h3 a {
  color: #dbab4b;
  text-decoration: none;
}
.eme-resource:hover h3 a,
.eme-prose .eme-resource h3 a:focus-visible {
  color: #f0c76b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kind, date and length. The separator is a pseudo-element on the list so a
   screen reader does not read it out as a word, the same reason the
   breadcrumb's slash is done this way. */
.eme-prose .eme-resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.6em;
  margin: 0 0 0.7em;
  color: #b8b8b8;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eme-resource-meta span + span::before {
  content: '/';
  color: #636363;
  margin-right: 0.6em;
}

.eme-prose .eme-resource-text p:last-child {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #c9c9c9;
}

/* The footer "Explore" column.
   ------------------------------------------------------------------
   Added when the header nav came down to three items (§3.3/§3.5): the nav now
   carries only what sells plus the one page worth ranking, and this is where
   everything else stays one click from every page.

   The column itself needs almost nothing, because build/build.js clones it from
   the LEGAL column beside it and keeps the builder's classes, which is where
   all of its styling lives. The one thing the clone loses is the heading's
   margin, which the builder set on the ID rather than the class:

     .hl_page-preview--content #sub-heading-1SOS85pIkf { margin: 0 0 20px }

   The clone has to take a new id or it collides with its source, so that rule
   stops matching. This puts the same 20px back, keyed on a class of our own. */
.eme-footer-col .c-sub-heading {
  margin: 0 0 20px;
}

/* "Read more in our full FAQ", under each homepage FAQ answer.
   ------------------------------------------------------------------
   Phase 3.4. The homepage answers seven questions and /faq answers fourteen,
   each with its own anchor; this is the link between them, and it is the
   strongest kind there is: body text, in context, on the page that gets the
   traffic.

   Quieter and smaller than the answer above it, because it is a way on rather
   than part of the answer. The anchor itself is .eme-inline-link, which already
   carries the site's gold and underline, so only the spacing is set here. */
.eme-faq-more {
  margin: 1em 0 0;
  font-size: 0.9375rem;
}

/* The colour and underline go on the SPAN inside the link, not the link.
   The builder ships `#faq-<generated-id> a { color: ...!important;
   text-decoration: none!important }`, and an id selector beats any number of
   classes, so a class on the anchor lost and this rendered as grey body text.

   A rule on the span sidesteps that rather than fighting it: the builder rule
   matches the anchor, the span only inherits from it, and a rule matching the
   span directly beats inheritance whatever its specificity. No !important,
   and no style block naming an id the builder generated. */
.eme-faq-more a span {
  color: #dbab4b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.eme-faq-more a:hover span,
.eme-faq-more a:focus-visible span {
  color: #f0c76b;
}

/* The breadcrumb on a page whose content area is white.
   ------------------------------------------------------------------
   Phase 3.6 put a trail on the articles, the listings and the legal pages,
   which are GoHighLevel dumps: their content area is white with black text,
   where a page built from a content file is near-black with light text. The
   dark palette above would have put #b8b8b8 on white, which is barely a colour
   at all, so these are the same shapes in colours that work on a light page.

   Measured rather than guessed. #8a6a16 on white is 5.05:1 and #6b7280 is
   4.83:1, both clear of the 4.5:1 minimum. The brand gold #dbab4b used on the
   dark pages is about 2:1 on white and would have failed, so the link colour is
   that gold darkened rather than the gold itself: recognisably the same colour
   family, legible on the background it actually sits on.

   This is a new element, so it gets accessible colours from the start. The
   existing contrast failures on the brand colours are Damian's call and are
   left alone (CHANGELOG, "Next up"). */
.eme-breadcrumb--on-light {
  /* NO width and NO horizontal padding of its own. The base rule centres the
     trail in a 44rem column, which is right on a content page and wrong here:
     the build inserts this as a sibling of the page title, so inheriting that
     container is what makes the two line up. Imposing a 1100px column instead
     left the trail 16 to 46px right of the title it labels, differently on
     each page family. */
  margin: 0 0 0.75rem;
  padding: 1.25rem 0 0;
  max-width: none;
}
.eme-breadcrumb--on-light li {
  color: #6b7280;
}
.eme-breadcrumb--on-light li + li::before {
  color: #b0b0b0;
}
.eme-breadcrumb--on-light a {
  color: #8a6a16;
}
.eme-breadcrumb--on-light [aria-current='page'] {
  color: #374151;
}

/* The mobile menu, once it opens.
   ------------------------------------------------------------------
   Fixing the hamburger (see site.js initNav) revealed that nobody had ever
   seen this panel: it came up in GoHighLevel's default grey-blue, `var(--gray)`
   #cbd5e0, with 14px black text in 34px rows. That is the bundle-stylesheet
   problem again, and it was invisible because the menu never opened.

   `:not(.hide-popup)` is the open state and nothing else. On a desktop the
   class stays on the element and a media query un-hides the row, so these rules
   cannot reach the desktop nav.

   `!important` because the builder scopes its own rules with
   `#nav-menu-v2-<generated-id>`, and an id beats any class. Unlike the FAQ
   link, those declarations are NOT themselves important, so an important class
   rule wins outright and no id has to be named. */
.nav-menu-desktop:not(.hide-popup) {
  background: var(--black, #000) !important;
  padding-top: 0.5rem !important;
}

.nav-menu-desktop:not(.hide-popup) .menu-item-title {
  color: #fff !important;
  font-size: 1.0625rem !important;
  letter-spacing: 0.04em;
  /* 34px rows were below the 44px minimum for a touch target, on the one
     control that exists only for touch. */
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

/* A hairline between items, so a list of three reads as a list rather than
   three words floating on black. */
.nav-menu-desktop:not(.hide-popup) .menu-item + .menu-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu-desktop:not(.hide-popup) .menu-item-title:hover,
.nav-menu-desktop:not(.hide-popup) .menu-item a:focus-visible .menu-item-title {
  color: #dbab4b !important;
}

/* The close control, which was a black cross on grey. */
.nav-menu-desktop:not(.hide-popup) .x-icon svg {
  color: #dbab4b;
}

/* The footer columns, spread across the full width.
   ------------------------------------------------------------------
   Damian, 2026-10-10: the columns stopped about 80px short of the rule above
   the copyright line, leaving a gap on the right and making the group look
   left-weighted. The row was always the right width, 216 to 1224 against a
   rule at 221 to 1219; the slack sat INSIDE the last column, between its four
   social icons and its own right edge, where nothing could reach it.

   So the columns hug their content and the row spreads them instead. The logo
   lands on the left edge, the social icons on the right, and what is left over
   is shared between them.

   "flex: 0 1 auto" is what lets a column hug: the builder gives every column
   "flex: 1", so each grows to an equal share whatever it holds.

   The last column also packed its own content left, so the icons stopped about
   55px short even though the column reached the edge. Two routes were measured
   before the ones below: "align-items: flex-end", which has nothing to move
   because the builder gives ".c-column > .inner" width 100% important; and
   "text-align: right" alone, which the builder overrides on the heading and
   which the icons ignore because they sit in a flex row of their own.

   WRAPPING, AND WHY "min-width: max-content" IS THE WHOLE FIX. Damian sent a
   screenshot of the footer at about 1170px: squeezed columns, TERMS OF USE on
   two lines, ABOUT GEORGIA HARTIN on three, the social icons in a 2x2 block.
   Measured from 1440 down, the row stayed on ONE line all the way to 600px and
   simply crushed the columns: at 768px, LEGAL was 69px wide and EXPLORE 62px,
   and the footer grew from 216px tall to 380px of wrapped text.

   Below 600px the builder already stacks the columns, which is why the phone
   view looked right and everything between looked broken.

   So the columns may no longer shrink below their own content, and the row
   wraps instead. At 1440 they still fit on one line, about 977px of content in
   1008px of row, so the desktop footer is unchanged; narrower than that they
   move onto a second line at full size rather than squeezing. */
.eme-footer-row > .inner {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 1.5rem;
}
.eme-footer-row > .inner > .c-column {
  flex: 0 1 auto;
}

/* Below 1300px, wrap rather than squeeze.
   ------------------------------------------------------------------
   At their natural widths the five columns want about 1208px and the row is
   only 1008px at 1440, so wrapping cannot be unconditional: it would push
   FOLLOW US onto a line of its own at a width where the footer was fine. Above
   this breakpoint the columns give up a little width and nothing wraps badly.

   Below it they cannot. The text columns stop shrinking and the row wraps
   instead, so what was one squeezed line becomes two full-size ones.

   `:not(:first-child)` leaves the logo out: `max-content` on a column holding
   an image resolves to that image's intrinsic width rather than its displayed
   width, which would demand 247px for something happily drawn at 170px. The
   logo scales; the words do not. */
@media only screen and (max-width: 1300px) {
  .eme-footer-row > .inner {
    flex-wrap: wrap;
    gap: 1.75rem 1rem;
  }
  .eme-footer-row > .inner > .c-column:not(:first-child) {
    min-width: max-content;
  }
}

/* The last column's own contents, to the right edge: the icon row is a flex
   container the builder leaves packed left, and the heading above it carries a
   text-align from a generated class, which this outranks on specificity
   without needing !important. */
/* ONLY while the columns are on one row. Right-aligning the last column is what
   closes the gap at the right edge; once the row wraps, that same rule strands
   FOLLOW US on the far right of a line of its own with the logo's worth of
   empty space beside it. Below the breakpoint it aligns left like the rest. */
@media only screen and (min-width: 1301px) {
  .eme-footer-row > .inner > .c-column:last-child .social-icons-container {
    /* !important because the builder sets justify-content on this container
       from a rule scoped by its generated id, and an id beats any number of
       classes. Its declaration is not itself important, so this wins. */
    justify-content: flex-end !important;
  }
  .eme-footer-row > .inner > .c-column:last-child .c-sub-heading > div {
    text-align: right;
  }
}

/* ===========================================================================
   The article and guide template. Phase 4 of the SEO plan.
   ===========================================================================

   Rendered by build/article.js, inside .eme-prose, so the heading, paragraph
   and link rules above already apply. What is styled here is the shape of the
   template's own pieces: the byline, the short answer box, the contents list,
   the call to action, the sources and the disclaimer. Same vocabulary as the
   rest of this file: Inter, the #dbab4b gold, near-black, a 44rem measure.

   THE CALL TO ACTION IS THE HOMEPAGE BUTTON, COPIED. The builder's discovery
   call buttons are Inter on the gold, black text, 16px by 32px of padding, a
   5px radius, a one pixel border at #000000b3, and a hover that lifts the
   button with a soft shadow (its `elevate` keyframes). Those values are
   repeated here rather than borrowed by class, because the builder's classes
   are generated per element and only exist in the homepage's inline CSS,
   which cssprune strips from a page that does not carry those elements. */

/* The small gold label above the short answer and the contents list. A
   paragraph, not a heading, so neither block enters the heading outline. */
.eme-prose .eme-eyebrow {
  color: #dbab4b;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.6em;
}

/* Author, dates and length, under the h1. The separators are pseudo-elements
   so a screen reader does not read them out, the same way the breadcrumb and
   the resource cards do it. */
.eme-prose .eme-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  margin: -0.5rem 0 2rem;
  color: #b8b8b8;
  font-size: 0.9375rem;
}
.eme-byline span + span::before {
  content: '\00b7';
  color: #636363;
  margin-right: 0.6em;
}
.eme-byline time { white-space: nowrap; }

/* The short answer. A quiet box with the gold rule down its left, the one
   thing on the page that is deliberately set apart from the prose, because it
   is the passage meant to be lifted whole. */
.eme-answer {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(219, 171, 75, 0.35);
  border-left: 4px solid #dbab4b;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
}
.eme-prose .eme-answer p:last-child {
  margin: 0;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.65;
}

.eme-prose .eme-takeaways { margin: 0 0 2.25rem; }
.eme-prose .eme-takeaways h2 {
  font-size: 1.2rem;
  margin: 0 0 0.6em;
}
.eme-prose .eme-takeaways ul { margin: 0; }
.eme-prose .eme-takeaways li { margin: 0 0 0.6em; }

/* The contents list, for anything over the template's word threshold. */
.eme-toc {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.5rem;
}
.eme-prose .eme-toc ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.9375rem;
}
.eme-prose .eme-toc li { margin: 0 0 0.35em; }
.eme-prose .eme-toc a { text-decoration: none; }
.eme-prose .eme-toc a:hover,
.eme-prose .eme-toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* A contents link must not land its heading hard against the top edge. */
.eme-body h2,
.eme-body h3 { scroll-margin-top: 1.5rem; }

.eme-prose .eme-cover { margin: 0 0 2.5rem; }
.eme-body > :first-child { margin-top: 0; }

/* The call to action, mid-article and at the end. */
.eme-cta {
  background: rgba(219, 171, 75, 0.08);
  border: 1px solid rgba(219, 171, 75, 0.35);
  margin: 2.75rem 0;
  padding: 1.75rem 1.5rem 2rem;
  text-align: center;
}
.eme-prose .eme-cta__heading {
  color: #fff;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.eme-prose .eme-cta p:not(.eme-cta__heading) {
  color: #cfcfcf;
  font-size: 0.9375rem;
  margin: 0 auto 1.25em;
  max-width: 36rem;
}
.eme-prose .eme-cta__button {
  display: inline-block;
  background: #dbab4b;
  color: #000;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 16px 32px;
  border: 1px solid #000000b3;
  border-radius: 5px;
  box-shadow: 0 0 0 0 transparent;
  text-decoration: none;
  transition: 0.2s;
}
.eme-prose .eme-cta__button:hover,
.eme-prose .eme-cta__button:focus-visible {
  color: #000;
  box-shadow: 0 8px 5px -5px #00000040;
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .eme-prose .eme-cta__button:hover,
  .eme-prose .eme-cta__button:focus-visible { transform: none; }
}

/* Sources: a numbered list in a smaller size, since it is there to be checked
   rather than read. */
.eme-prose .eme-sources ol {
  color: #c9c9c9;
  font-size: 0.9375rem;
}
.eme-prose .eme-sources li { margin: 0 0 0.45em; }

/* Common questions reuse the /faq item styling (the hairline between items,
   the :target rule); only the heading level differs, and h3 is tightened the
   way h2 is there. */
.eme-prose .eme-faq-item h3 {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  margin: 0 0 0.5em;
}
.eme-faq-item h3 { scroll-margin-top: 1.5rem; }

.eme-prose .eme-related { margin-top: 1rem; }

/* The general information statement, last on the page. */
.eme-prose .eme-disclaimer {
  border-top: 1px solid #2a2a2a;
  color: #9a9a9a;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
}