/* ==========================================================================
   CLOSE-BAND "THE SEAL" v2 - every page (footer template 116) - 2026-09-23
   Founder: "this section looks all jacked up and not aligned at all ... get
   everything aligned in order then make it look really bad ass", and
   "you need to change that in all pages" (one shared footer = all pages).
   MEASURED at 1600 before: claim text centred at x283-1301 while every board
   above it is left-aligned x96-1488; a hairline seam showed where the claim
   widget (250px) met the CTA widget (113px); claim 79.2px.
   Fix: both widgets keep the canvas ground, the content now snaps to the
   board's own left edge with an orange rail, an eyebrow and corner ticks, and
   the seam is closed with a 1px overlap.
   Inks: claim --navy, punch --green #2E7D5B (4.4:1 on canvas, passes the 3:1
   large-text bar), rule hairline --hairline.
   Rollback: oig_backup_closeband_pre_seal_20260923.
   ========================================================================== */

/* ---- the ground: one continuous canvas band, seam closed ---- */
html body .elementor-element-close-claim,
html body .elementor-element-close-cta {
  position: relative;
  z-index: 1;
  background-color: var(--canvas, #FBF8F3);
  box-shadow: 0 0 0 100vmax var(--canvas, #FBF8F3);
  clip-path: inset(0 -100vmax);
}
html body .elementor-element-close-claim { margin-bottom: -1px; padding-bottom: 1px; }

/* ---- the claim: left-aligned to the board, on a rail ---- */
html body .close .close__claim {
  margin-left: 0;
  margin-right: 0;
  margin-top: clamp(56px, 6vw, 92px);
  width: 100%;
  max-width: clamp(520px, 66vw, 1040px);
  padding-left: clamp(18px, 1.6vw, 26px);
  border-left: 3px solid var(--orange, #E07A2F);
  text-align: left;
  color: var(--navy, #14233F);
  text-shadow: none;
}
html body .close .close__claim em,
html body .close .close__claim .em {
  color: var(--green, #2E7D5B);
  text-shadow: none;
  background-image: linear-gradient(var(--green, #2E7D5B), var(--green, #2E7D5B));
}
/* eyebrow above the claim, in the site's label voice */
html body .elementor-element-close-claim > .close__claim::before {
  content: "The standard";
  display: block;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  padding-left: 44px;
  font: 600 13px/1 var(--font-body, "Space Grotesk", system-ui, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy, #14233F);
  background: linear-gradient(var(--orange, #E07A2F), var(--orange, #E07A2F)) left 50% / 30px 2px no-repeat;
}

/* ---- the CTA: same left edge as the claim, with a hairline above ---- */
html body .close .close__cta {
  margin-top: clamp(26px, 2.6vw, 38px);
  padding-top: clamp(22px, 2.2vw, 32px);
  border-top: 1px solid var(--hairline, #D6D2CA);
  text-align: left;
  color: var(--body, #3A4760);
}

html body .close .close__cta > a,
html body .close .close__cta .btn,
html body .close .close__cta .elementor-button {
  margin-left: 0;
  margin-right: auto;
}

/* ---- corner ticks marking the board edges ---- */
html body .elementor-element-close-cta::before,
html body .elementor-element-close-cta::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: .5;
}
html body .elementor-element-close-cta::before {
  left: 0;
  border-left: 2px solid var(--orange, #E07A2F);
  border-bottom: 2px solid var(--orange, #E07A2F);
}
html body .elementor-element-close-cta::after {
  right: 0;
  border-right: 2px solid var(--orange, #E07A2F);
  border-bottom: 2px solid var(--orange, #E07A2F);
}

/* the decorative field is drawn for a dark ground - keep it off the light band */
html body .elementor-element-close-claim .close__field,
html body .elementor-element-close-cta .close__field { display: none; }

@media (max-width: 900px) {
  html body .close .close__claim { max-width: none; }
  html body .elementor-element-close-cta::before,
  html body .elementor-element-close-cta::after { display: none; }
}

/* ---- 2026-09-23: founder - the CTA is centred and the band gets macro
   white space under it before the navy footer starts.
   MEASURED before at 1600: button bottom y5492, navy nav began y5525 = 33px
   of cream under the button; button was left-aligned at x96. ---- */
html body .close .close__cta { text-align: center; }
html body .close .close__cta > a,
html body .close .close__cta .btn,
html body .close .close__cta .elementor-button { margin-left: auto; margin-right: auto; }
html body .elementor-element-close-cta { padding-bottom: clamp(96px, 10vw, 180px); }

/* ==========================================================================
   CLOSE-BAND v3 "ONE AXIS" - every page (footer 116) - 2026-09-23
   Founder, after the centred CTA shipped: "still not aligned ... get
   everything aligned in order". MEASURED at 1600: eyebrow + headline sat left
   (x96-113) while the button was centred at x808 - two competing axes in one
   band. v3 puts the whole band on ONE centred axis.
   Rail -> a centred accent bar above the eyebrow; headline centred and
   width-capped so it breaks in two even lines; hairline, button and macro
   space already centred. Corner ticks keep the board edges readable.
   ========================================================================== */
html body .close .close__claim {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  border-left: 0;
  text-align: center;
  max-width: clamp(520px, 62vw, 980px);
}
html body .elementor-element-close-claim > .close__claim::before {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 44px;
  padding-right: 44px;
  background:
    linear-gradient(var(--orange, #E07A2F), var(--orange, #E07A2F)) left 50% / 30px 2px no-repeat,
    linear-gradient(var(--orange, #E07A2F), var(--orange, #E07A2F)) right 50% / 30px 2px no-repeat;
}
html body .close .close__cta { text-align: center; }
/* the hairline reads as a centred rule, not a full-width divider */
html body .close .close__cta {
  border-top: 0;
  position: relative;
}
html body .close .close__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline, #D6D2CA) 22%, var(--hairline, #D6D2CA) 78%, transparent);
}