/*
 Theme Name: Astra Child
 Theme URI: https://ilium.com/      
 Description: Child theme for Astra
 Author: Matt K.
 Template: astra
 Version: 1.0.0
 Text Domain: astra-child
*/

/* custom CSS below this line */
/* Primary menu – desktop */

/* Normal state */

html,
body {
  background: #442e4f !important; /* camouflage 1px gap on Safari overscroll */
  overflow-x: hidden !important; /* use hidden first for Safari */
}

.entry-content :where(h2) {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 16px !important;
  font-family: "Inter-Variable", inter-variable, sans-serif;
  font-weight: 600;
  line-height: 1.5em;
  color: #a5a48d;
  letter-spacing: 0.06em;
}

.entry-content :where(h3) {
  margin-top: 0 !important;
  font-size: 32px !important;
  font-size: 2.1rem;
  font-weight: 700;
  font-family: "Inter-Variable", inter-variable, sans-serif;
  line-height: 2.4rem;
  color: #442e4f;
}

.section-heading {
  padding-top: 33px;
  padding-bottom: 33px;
}

/* buttons */
.ast-single-post .entry-content .wp-block-button .wp-block-button__link,
.ast-single-post .entry-content .wp-block-search .wp-block-search__button,
body .entry-content .wp-block-file .wp-block-file__button {
  border-radius: 500px;
  border: 1px solid #a3a28b;
  background-color: transparent;
  color: #a3a28b;
  transition: all 0.3s ease;
}

.ast-single-post .entry-content .wp-block-button .wp-block-button__link:hover,
.ast-single-post .entry-content .wp-block-search .wp-block-search__button:hover,
body .entry-content .wp-block-file .wp-block-file__button:hover {
  background-color: #a3a28b;
  color: #ffffff;
}

.ast-desktop
  .ast-primary-header-bar
  .main-header-menu
  > .menu-item
  > .menu-link {
  color: #442e4f; /* replace with whatever you want for normal menu text */
}

/* Hover + current page state */
.ast-desktop
  .ast-primary-header-bar
  .main-header-menu
  > .menu-item:hover
  > .menu-link,
.ast-desktop
  .ast-primary-header-bar
  .main-header-menu
  > .menu-item:focus
  > .menu-link,
.ast-desktop
  .ast-primary-header-bar
  .main-header-menu
  > .current-menu-item
  > .menu-link {
  color: #8e7592; /* replace with your desired hover/active color */
}
article header {
  display: none;
}
#primary.content-area.primary {
  margin-top: 0;
}

/* Sticky plugin fix: keep header full-bleed while sticky */
.site-header.element-is-sticky {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important; /* prefer 100% to avoid 100vw scrollbar issues */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* HEADER BAR – DESKTOP ONLY */
@media (min-width: 922px) {
  /* Use the whole header as a positioning context and make it full-bleed */
  .site-header {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-right: 0; /* don't push the bar in from the edge */
  }

  /* Flush-right color bar on the header */
  .site-header::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10 !important;

    /* Stripe size at typical desktop widths — tweak to match comp */
    width: 420px;
    height: 18px;

    background: linear-gradient(
      to right,
      #c4c5b4 0 18%,
      #b39abb 18% 32%,
      #4b2e61 32% 100%
    );

    pointer-events: none;
    z-index: 1; /* behind nav text */
  }

  /* Push the nav left so it's just before the bar */
  #ast-desktop-header .site-header-primary-section-right {
    position: relative;
    z-index: 2; /* nav above the stripe if they ever overlap */
    padding-right: calc(
      300px - 6vw
    ); /* padding grows as viewport shrinks; stays between 80px and 220px */
    box-sizing: border-box;
  }
  .site-header-primary-section-right {
    white-space: nowrap;
  }
  .ast-primary-header-bar {
    border: none;
  }
}
/* move nav away from stripe on smaller screens */
@media (max-width: 1649px) {
  #ast-desktop-header .site-header-primary-section-right {
    padding-right: calc(315px - 3vw);
  }
}

/* move nav away from stripe on smaller screens */
@media (max-width: 1568px) {
  #ast-desktop-header .site-header-primary-section-right {
    padding-right: calc(333px - 1vw);
  }
}
/* move nav away from stripe on smaller screens */
@media (max-width: 1438px) {
  #ast-desktop-header .site-header-primary-section-right {
    padding-right: calc(360px - 0.7vw);
  }
}
/* move nav away from stripe on smaller screens */
@media (max-width: 1360px) {
  #ast-desktop-header .site-header-primary-section-right {
    padding-right: calc(405px - 0.5vw);
  }
  .site-header::after {
    width: 360px;
  }
}
@media (min-width: 922px) and (max-width: 928px) {
  .main-navigation {
    font-size: 98% !important; /* fixes nav line breaking at this width range */
  }
}

/* move nav away from stripe on smaller screens */
@media (max-width: 1300px) {
  #ast-desktop-header .site-header-primary-section-right {
    padding-right: calc(405px - 0.5vw);
  }
}

/* MOBILE header color band */
#ast-mobile-header .ast-primary-header-bar.ast-primary-header.main-header-bar {
  background-image: linear-gradient(
    to right,
    #c4c5b4 0 18%,
    #b39abb 18% 32%,
    #4b2e61 32% 100%
  );
  background-repeat: no-repeat;

  /* bottom-right on mobile */
  background-position: right bottom;
  background-size: 220px 14px; /* slightly smaller on mobile, tweak as needed */
}

/* contact form styles */
.jotform-form .form-all {
  box-shadow: none;
  border: none;
  background-color: transparent;
  max-width: 100%;
}
.jotform-form .header-text {
  display: none;
}
.jotform-form .form-all {
  margin-top: 0;
}
.header-large {
  display: none;
}
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  background-color: transparent;
  min-height: 60px;
  color: #ffffff;
  font-family: "neue-frutiger-world", sans-serif;
}
.site-above-footer-wrap label {
  color: #ffffff;
}

/* content always behind sticky header */
#content {
  z-index: 0;
}
/* =========================
   HERO / CAROUSEL OVERLAY
   ========================= */

/* Remove default group padding just for this section */
.entry-content > .wp-block-group.slider-wrap {
  padding: 0 !important;
}

/* Full-bleed wrapper (escapes Astra container) + section background */
.wp-block-group.slider-wrap {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  background: #c7c7b9;
}

/* Center the carousel frame */
.slider-wrap .cb-carousel-block {
  position: relative; /* gradient anchor */
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 1;
  overflow: hidden; /* keeps overlay/gradient tidy */
}

/* Keep pagination aligned to the same 1200px frame */
.wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal {
  top: 9px;
}
.slider-wrap .swiper-pagination {
  max-width: 1200px;
  margin: 0 auto;
}

/* Gradient overlay (ON TOP of image, UNDER text) */
.slider-wrap .cb-carousel-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(68, 46, 79, 0) 0%,
    rgba(68, 46, 79, 0.5) 42%,
    rgba(68, 46, 79, 1) 84%,
    rgba(68, 46, 79, 1) 100%
  );
}

/* Make sure slides/images sit BELOW the gradient */
.slider-wrap .cb-carousel-block .swiper,
.slider-wrap .cb-carousel-block .swiper-wrapper,
.slider-wrap .cb-carousel-block .swiper-slide,
.slider-wrap .cb-carousel-block figure,
.slider-wrap .cb-carousel-block img {
  position: relative;
  z-index: 1;
}

/* Overlay layer: centered to SAME 1200 frame as carousel */
.slider-wrap > .ilium-hero-wrap {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;

  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(1200px, 100%) !important; /* key: match carousel frame */
  z-index: 3 !important;
  pointer-events: none !important;

  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important; /* neutralize Gutenberg constraints */
}

/* Text box inside that 1200 frame */
.slider-wrap > .ilium-hero-wrap > .ilium-hero-copy {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 6% !important;

  width: 31% !important;
  max-width: 520px !important;
  min-width: 280px !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;
  font-family: inter-variable, sans-serif;
  font-size: 2em;
  font-weight: 600;
  line-height: 1.35;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media screen and (max-width: 933px) {
  .slider-wrap > .ilium-hero-wrap > .ilium-hero-copy {
    font-size: 1.75em;

    line-height: 1.5em;
  }
  /* .slider-wrap .ilium-hero-copy {
    max-width: 33%;
  } */
}
@media screen and (max-width: 768px) {
  .slider-wrap > .ilium-hero-wrap > .ilium-hero-copy {
    font-size: 1.62em;
    line-height: 1.23em;
  }
  /* .slider-wrap .ilium-hero-copy {
    max-width: 40%;
  } */
}
@media screen and (max-width: 561px) {
  .slider-wrap > .ilium-hero-wrap > .ilium-hero-copy {
    font-size: 1.5em;
    line-height: 1.2em;
  }
  /* .slider-wrap .ilium-hero-copy {
    max-width: 45%;
  } */
}
@media screen and (max-width: 400px) {
  .slider-wrap > .ilium-hero-wrap > .ilium-hero-copy {
    font-size: 1em;
    line-height: 1.5em;
  }
  .slider-wrap .ilium-hero-copy {
    max-width: 45%;
  }
}
/* remove bottom margin on no-sidebar pages */
@media (min-width: 1200px) {
  .ast-plain-container.ast-no-sidebar #primary {
    margin-bottom: 0;
  }
}
.wp-block-cb-carousel-v2[data-cb-pagination="true"] .swiper-horizontal,
.wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal {
  margin-bottom: 0;
}
/* .site-above-footer-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("http://ilium-refactor-wp.local/wp-content/uploads/2025/12/rings-scaled.png")
    center bottom / contain no-repeat;
  z-index: 0;
  pointer-events: none;
} */
.site-above-footer-wrap,
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  padding-top: 27px;
  padding-bottom: 30px;
  position: relative;
  overflow: hidden;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-image: url("http://ilium-refactor-wp.local/wp-content/uploads/2025/12/rings-scaled.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain; /* use cover to guarantee edge-to-edge */
  z-index: 0;
}
/* keep the footer widgets above */
.site-above-footer-wrap > * {
  position: relative;
  z-index: 1;
}

/* map counter */
.columns-mapcounter,
.wp-container-core-group-is-layout-01c92588
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw;
}
.map-counter {
  background-color: #ecece7;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* footer */
.site-footer {
  margin-left: auto;
  margin-right: auto;
  /* padding-left: 20px;
  padding-right: 20px; */
  padding-left: 0;
  padding-right: 0;
}
.site-footer .ast-builder-grid-row-container-inner {
  padding-left: 20px;
  padding-right: 20px;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}
/* .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #442e4f;
  background-image: url(http://ilium-refactor-wp.local/wp-content/uploads/2025/12/rings-scaled.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  display: block; 
  z-index: 0;
  pointer-events: none;
} */

/*need to break form to next row at 640px vw*/
@media (max-width: 640px) {
  .ast-builder-grid-row-container.ast-builder-grid-row-mobile-full
    .ast-builder-grid-row {
    grid-template-columns: 1fr !important;
  }
  .site-footer-above-section-2 {
    margin-top: 18px;
  }
  footer {
    margin-left: 0;
    margin-right: 0;
  }
}
/* erase theme margins at 544*/
@media (max-width: 544px) {
  .ast-hfb-header .site-footer {
    margin-left: 0;
    margin-right: 0;
  }
}

.ilium-footer-bar {
  padding: 2.5rem 0;
  background-color: #3f2850; /* your purple, tweak as needed */
}

.ilium-footer-logo-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* center the logo; remove if you want left-aligned */
}

.site-footer .wp-block-image img {
  width: 106px;
  max-width: 106px;
}
.site-header .ast-primary-header-bar {
  background-color: rgba(243, 243, 240, 1);
}
body.scrolled .site-header .ast-primary-header-bar {
  background-color: rgba(243, 243, 240, 0.5);
}
.ast-primary-header-bar {
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease;
  will-change: background-color;
}

/* Sticky Menu (Or Anything!): prevent the sticky container from using 100vw */
.element-is-sticky {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important; /* key */
  max-width: 100% !important; /* key */
  box-sizing: border-box !important;
}

footer .form-required {
  color: #ffffff;
}

.ilium-name {
  font-family: neue-frutiger-world, sans-serif;
  font-style: normal;
  font-weight: 700;
}
.ilium-address {
  font-family: "linotype-sabon", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.ast-builder-html-element ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.ilium-phone {
  font-family: neue-frutiger-world, sans-serif;
  font-style: normal;
  font-weight: 100;
}
.footer-address {
  margin: 48px 0 33px 0;
}
.footer-phones {
  display: flex;
  align-items: flex-start; /* keep label at top of the stack */
  gap: 18px;
  line-height: 1;
}
/* kill the p wrapper's typography quirks */
.footer-phones > p {
  margin: 0 !important;
  line-height: 1.15 !important; /* match links */
}
.footer-phones__label {
  font-size: inherit;
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}

.footer-phones__nums {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-phones__nums a {
  display: block;
  text-decoration: none;
  color: inherit;
  line-height: 1.1;
}
.footer-phones__nums a:hover {
  text-decoration: underline;
}
/* the element that contains BOTH numbers */
.footer-phones a {
  display: block;
  line-height: 1.15;
  margin: 0;
  padding: 0;
}
.footer-copyright {
  text-align: left;
  font-family: "neue-frutiger-world", sans-serif;
  font-style: normal;
  font-weight: 100;
}

.ast-builder-footer-grid-columns {
  position: relative;
}

.ast-footer-copyright,
.ast-footer-copyright.site-footer-focus-item {
  color: #ffffff;
  text-align: left;
  position: absolute;
  bottom: 54px;
}

@media screen and (max-width: 1140px) {
  .ast-footer-copyright,
  .ast-footer-copyright.site-footer-focus-item {
    bottom: 0px;
    width: 100%;
    text-align: center;
  }
}
.footer-link {
  color: #ffffff;
  text-decoration: none;
}
/* Safari 404 fix – Give the whole form a “safe” first font so Jotform doesn't try to fetch it */
#block-11,
#block-11 * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Then apply your Adobe font only where you need it */
#block-11 label,
#block-11 .form-label,
#block-11 .formHeader,
#block-11 .formSubHeader {
  font-family: "neue-frutiger-world", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
}

li.form-line,
.page-section
  > li:nth-child(2):not(.form-line-column):not([data-type="control_head"]):not(
    [data-type="control_payment"]
  ):not([data-type="control_text"]):not([data-type="control_button"]):not(
    [data-type="control_collapse"]
  ) {
  margin-bottom: 0;
  margin-top: 0 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
li.form-line,
.page-section
  > li:nth-child(2):not(.form-line-column):not([data-type="control_head"]):not(
    [data-type="control_payment"]
  ):not([data-type="control_text"]):not([data-type="control_button"]):not(
    [data-type="control_collapse"]
  ) {
  margin-bottom: 21px;
}

li.form-line:not(.form-line-column) .form-input-wide[data-layout="half"] {
  width: 100% !important;
}

li.form-line:not(.form-line-column) .form-input-wide[data-layout="half"] {
  width: 100% !important;
}

li.form-line-active {
  background-color: transparent;
}

.form-submit-button.submit-button {
  background-color: #8e7592;
  border-radius: 500px;
  border: 1px solid #ffffff;
  font-family: inter-variable, sans-serif;
  font-weight: 400;
  transition: background-color 0.25s ease, color 0.25s ease;
  height: 74px;
}
footer .jf-form-buttons {
  font-size: 1.2em;
}
footer .submit-button {
  width: auto;
  min-width: 240px;
}

footer [data-type="control_button"] .form-input-wide .form-buttons-wrapper {
  padding: 0;
  padding-top: 15px;
}
.form-submit-button.submit-button:hover {
  background-color: #a78fab;
}
/* One-line tagline + bars, confined to the widget/column width */
.smad-header {
  display: flex;
  align-items: center;
  gap: 18px; /* space between tagline and bars */
  width: 100%;
  margin: 0 0 18px; /* tweak spacing above form */
  font-size: clamp(15px, 1.6vw, 18px);
}

/* Make the tagline itself unbreakable and align the ampersand image nicely */
/* .smad-header > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: 0.18em; 
  word-spacing: 0.3em;
  text-transform: uppercase;
} */

.smad-header span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em;
  font-size: 0.9em;
  letter-spacing: 0.12em;
  word-spacing: 0.2em;
}

.smad-header .amp {
  display: inline-block;
  height: 1.25em; /* make it bigger than the cap height */
  width: 1.47em; /* 1.25 * (100/85) = 1.25 * 1.176 */
  background: url("/wp-content/uploads/2025/12/ampersand.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* <-- THIS makes it scale with the box */
  transform: translateY(0.08em);
  flex: 0 0 auto;
}

/* The “color bars” live here */
.smad-header::after {
  content: "";
  flex: 1 1 auto; /* take remaining space in the form column */
  height: 14px;
  min-width: 120px; /* prevent bars from collapsing too early */
  background: linear-gradient(
    to right,
    #c9cbc6 0 84px,
    #9a86aa 84px 132px,
    rgba(89, 60, 99, 1) 132px 100%
  );
}

/* Ampersand image sizing */
/* .smad-header i.amp {
  height: 1.5em;
  width: auto;
  margin: 0 0.15em;
  transform: translateY(1px);
} */

/* responsive tagline and bars */
@media screen and (min-width: 848px) and (max-width: 921px) {
  .smad-header {
    gap: 6px;
    /* font-size: 0.78em; */
  }
  .smad-header i.amp {
    height: 1.2em;
    margin: 0 0.6em;
  }

  /* .smad-header::after {
    background: #9a86aa;
    background: linear-gradient(
      90deg,
      rgba(201, 203, 198, 1) 0%,
      rgba(201, 203, 198, 1) 27%,
      rgba(154, 134, 170, 1) 27%,
      rgba(154, 134, 170, 1) 48%,
      rgba(89, 60, 99, 1) 48%
    );
  } */

  /* .smad-header::after {
    min-width: 80px;
    height: 10px;
  }
  .smad-header > span {
    font-size: 0.9em;
    letter-spacing: 0.12em;
    word-spacing: 0.2em;
  } */
}
/* stack tagline (and align address left) and bars <922px */
@media screen and (max-width: 921px) {
  .smad-header {
    /* <-- replace with your actual wrapper */
    display: flex; /* keep it flex */
    flex-direction: column; /* stack */
    align-items: flex-start; /* optional */
    gap: 8px; /* optional */
  }

  .smad-header::after {
    /* optional: make bars fill width */
    width: 100%;
  }

  .smad-header span {
    /* optional: prevent weird overflow */
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .footer-widget-area[data-section="section-fb-html-1"]
    .ast-builder-html-element {
    text-align: left;
  }
  .ast-builder-grid-row-container.ast-builder-grid-row-tablet-2-equal
    .ast-builder-grid-row {
    grid-template-columns: 1fr 2fr;
  }
}
/* footer contact form */
li.form-line,
.form-buttons-wrapper {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;

  border-top: none !important;
  border-top-width: 0 !important;
  border-top-color: transparent !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

footer ul.page-section {
  padding: 0;
}

footer .form-label-top {
  margin-bottom: 3px;
}
.form-sub-label {
  margin-top: 3px !important;
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 0%;
}

.form-dropdown,
.form-textarea,
.form-textbox,
.signature-pad-passive,
.signature-wrapper {
  background-color: transparent !important;
  border-color: #ffffff !important;
  color: transparent !important;
  border-top-left-radius: 0% !important;
  border-top-right-radius: 0% !important;
  border-bottom-right-radius: 0% !important;
  border-bottom-left-radius: 0% !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* put captcha and submit in same row */
/* Make the form section a grid */
.form-all .form-section {
  display: grid !important;
  grid-template-columns: 1fr auto; /* two columns available */
  column-gap: 28px;
  row-gap: 26px; /* your normal vertical spacing */
  align-items: start;
}

/* Default: every row spans full width (so NOTHING changes visually) */
.form-all .form-section > li.form-line {
  grid-column: 1 / -1; /* full width */
  margin: 0 !important; /* let row-gap control spacing */
}

/* Exception: captcha sits in left column */
.form-all .form-section > li.form-line[data-type="control_captcha"] {
  grid-column: 1 / 2;
  align-self: center;
}

/* Exception: submit sits in right column on the same row */
.form-all .form-section > li.form-line[data-type="control_button"] {
  grid-column: 2 / 3;
  align-self: center;
  justify-self: end;
}

/* Keep the button from stretching */
.form-all
  .form-section
  > li.form-line[data-type="control_button"]
  .form-submit-button {
  white-space: nowrap;
}

/* Mobile: stack again */
@media (max-width: 900px) {
  .form-all .form-section {
    grid-template-columns: 1fr !important;
  }
  .form-all .form-section > li.form-line[data-type="control_captcha"],
  .form-all .form-section > li.form-line[data-type="control_button"] {
    grid-column: 1 / -1 !important;
    justify-self: start;
  }
}
footer .form-buttons-wrapper,
footer .form-submit-clear-wrapper {
  margin: 0;
}

/* reusable full-bleed section utility */
.section-fullbleed.alignfull {
  position: relative;
  width: 100vw !important;

  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

.section-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 20px;
}

/* SERVICES section only */
.section-services {
  background-color: #ffffff;
}
.entry-content > .wp-block-group.section-services {
  padding-bottom: 54px;
  padding-top: 42px;
}

.section-services .section-heading {
  padding-top: 33px;
  padding-bottom: 21px;
}
.services-cols-outer {
  margin-top: 0;
}
.services-cols-outer p {
  padding-right: 21px;
}
/* .services-colgroup-inner {
  margin-top: -51px !important;
}
@media screen and (max-width: 781px) {
  .services-colgroup-inner {
    margin-top: 0 !important;
  }
} */

.services-colgroup-inner p {
  margin-top: 6px;
}

/* 1) The crop box */

/* .svc-thumb {
  outline: 3px solid red;
}
.svc-thumb img {
  outline: 3px solid lime;
} */

.svc-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 0.5em;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* pick what matches your design */
  width: 100%;
  background: #d9d6c8; /* matches your TBD placeholder vibe */
  height: 100%;
}

/* 2) Make the <img> behave like background-cover */
/* Force the img to actually fill the crop box */
.section-services .svc-thumb figure.wp-block-image {
  border-radius: 0.5em;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.section-services .svc-thumb figure.wp-block-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

/* PORTFOLIO section only */
.section-portfolio {
  background: #ecece7;
}
.section-portfolio .portfolio-images {
  padding-left: 0;
  padding-right: 0;
}

/* FOOTPRINT section only */
.section-footprint {
  background-color: #ecece7;
}

/* footprint map: force svg to actually take up space */
.section-footprint svg#usMap {
  width: 100% !important;
  height: auto !important;
  display: block;
}
.section-footprint .us-footprint-map {
  width: 100%;
}
.us-map-svg {
  width: 100%;
}
.us-footprint-map svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.section-footprint .wp-block-column,
.section-footprint .wp-block-column > *,
.section-footprint .wp-block-column .wp-block-group {
  max-width: none;
}

/* 1) Stop Gutenberg's "constrained layout" from clamping children */
.section-footprint
  .section-inner.is-layout-constrained
  > :where(:not(.alignfull):not(.alignwide)) {
  max-width: none !important;
}

/* 2) Explicitly make THIS columns block stretch */
.section-footprint .wp-block-columns.columns-mapcounter {
  width: 100% !important;
  max-width: 1200px !important; /* matches your section-inner intent */
  margin-left: auto !important;
  margin-right: auto !important;
}

.map-column {
  padding: 24px 0;
}

/* this section should truly be full width, not WP constrained */
/* Full-bleed section that ignores theme gutters */
.section-footprint.alignfull {
  position: relative;
  width: 100vw !important;

  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* only if Astra is still constraining full width */
.section-footprint.fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* inner content constraint */
.section-footprint .section-inner {
  width: 100%;
  display: block;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 20px;
}

.section-footprint .wp-block-columns {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section-footprint .leaflet-container {
  width: 100% !important;
  height: 420px; /* tweak */
}

/* animated map */
/* dots start hidden */
.section-footprint #client-dots > * {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

@keyframes dotPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.55);
  }
  85% {
    opacity: 1;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  60% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* animate when activated */
.section-footprint .us-map-svg.is-active #client-dots > * {
  /* animation: dotPop 420ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards; */
  animation: dotPop 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.us-map-svg.is-active #client-dots .dot {
  /* THIS is the stagger: multiply index by time */
  animation-delay: calc(var(--i) * 1s);
}

/* optional: force dot color (if you want CSS to own it) */
.section-footprint #client-dots > * {
  fill: #7b6a86;
}

/*Counter styles */
.footprint-counters {
  text-align: center;
}
.counter {
  margin-bottom: 69px;
}
.js-counter {
  display: inline-block;
  font-family: "Inter-Variable", inter-variable, sans-serif;

  font-size: 3rem;
  font-weight: 900;
  line-height: 1.25;
  color: #8e7592;
}
.counter__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: inline-block;
  min-width: 3ch;
}
.counter__label {
  display: block;
  font-family: "Inter-Variable", inter-variable, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5em;
  color: #231f20;
  margin-top: 3px;
}

/* CLIENTS section only */
.section-clients {
  background-color: #ffffff;
}

.entry-content > .wp-block-group.section-clients {
  padding-bottom: 66px;
}

/* .section-clients .wp-block-image.size-full {
  text-align: center;
} */
/* .section-clients .wp-block-image.size-full img {
  padding: 0 24px;
} */

.section-clients .wp-block-image.size-full img {
  max-height: 100px;
  max-width: 120px;
}

.logo-grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* PROJECT SHOWCASE */
.project-showcase {
  /* max-width: 1200px !important; */
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.vp-portfolio__item {
  border-radius: 0.5em;
}
.entry-content > .wp-block-group.section-portfolio {
  padding-bottom: 66px;
}