/*
 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 */
  color: #595a5c !important;
}

html {
  scroll-behavior: smooth;
}
@media (max-width: 544px) {
  .ast-separate-container #content .ast-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
#ast-scroll-top {
  border-radius: 500px;
}
:root {
  --anchor-offset: 80px;
}

@media (max-width: 921px) {
  :root {
    --anchor-offset: 80px;
  }
}

#colophon,
#services,
#portfolio {
  scroll-margin-top: 80px !important;
}

.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns {
  padding-left: 20px;
  padding-right: 20px;
}

.entry-content :where(h2),
.site-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.02em;
}

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

.section-heading {
  padding-top: 0;
  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: #ffffff;
  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;
}
.ast-primary-header-bar {
  border: none;
}
.ast-header-break-point .ast-primary-header-bar {
  border-bottom-style: none;
}

/* 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;
  }
}
/* 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 */
.site-above-footer-wrap {
  background-color: #422e4d !important;
}
.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: 0 auto 108px auto;
}
.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;
  min-height: 300px;
  padding: 0 !important;
  background: #422e4d;
}

/* 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 */
  min-height: 300px;
}

/* 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) 48%,
    rgba(68, 46, 79, 0.45) 65%,
    rgba(66, 46, 77, 1) 88%,
    rgba(66, 46, 77, 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;
  min-height: 300px;
}

/* 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;
}

/* Frame defines the crop window */
.slider-wrap .cb-carousel-block .swiper-slide,
.slider-wrap .cb-carousel-block figure {
  position: relative;
  min-height: 300px; /* keep your original approach */
  overflow: hidden;
}

/* Make the image fill the frame and crop */
.slider-wrap .cb-carousel-block img {
  position: absolute;
  inset: 0; /* top/right/bottom/left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Desktop/default: images behave normally */
.slider-wrap .cb-carousel-block figure,
.slider-wrap .cb-carousel-block .swiper-slide {
  min-height: 0; /* don’t force 300px on desktop */
}

.slider-wrap .cb-carousel-block img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
}
@media (max-width: 768px) {
  .slider-wrap .cb-carousel-block .swiper-slide,
  .slider-wrap .cb-carousel-block figure {
    position: relative;
    min-height: 300px; /* or your var(--hero-min) */
    overflow: hidden;
  }

  .slider-wrap .cb-carousel-block img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

@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.5em;
    text-align: center;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
  }
  /* .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,
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  padding-top: 27px;
  padding-bottom: 30px;
  position: relative;
  overflow: visible;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-image: url("/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;
}

@media (max-width: 921px) {
  .site-above-footer-wrap,
  .site-above-footer-wrap[data-section="section-above-footer-builder"] {
    width: 100%;
    margin-left: 0;
    margin-right: 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;
  box-sizing: border-box;
  max-width: 100%;
}

.site-footer .ast-builder-grid-row > * {
  min-width: 0;
}

.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.9);
}
.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: 0 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;
}
.ast-builder-footer-grid-columns {
  position: relative;
}

/* .footer-copyright, */
.copyright-dbe-wrap {
  /* text-align: left; */
  font-size: 0.9em;
  font-family: "neue-frutiger-world", sans-serif;
  font-style: normal;
  font-weight: 100;
}

.copyright-dbe-wrap {
  color: #ffffff;
  /* text-align: left;
  position: absolute;
  bottom: 69px; */
}
.copyright-dbe-wrap a {
  color: #b29fb5;
  text-decoration: none;
}

.copyright-dbe-wrap > * {
  line-height: 1.8 !important;
}

.dbe-statement {
  font-size: 0.8em;
  /* margin-top: 6px; */
}
/* .copyright-dbe-wrap {
  max-width: 390px;
} */

.site-below-footer-wrap {
  background-color: rgba(35, 31, 32, 0.33) !important;
  text-align: center;
  padding-top: 18px;
  padding-bottom: 21px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
  border-top-width: 0 !important;
}

.sitemap a {
  text-decoration: none !important;
}
h1.header-sitemap {
  font-weight: 1000;
  color: #452d4f;
}
.header-sitemap {
  margin-bottom: 0;
}

.privacy-copy h4 {
  font-weight: 700;
}

.privacy-copy h4 + p {
  margin-block-start: 6px !important;
}

@media screen and (max-width: 1140px) {
  .copyright-dbe-wrap {
    bottom: 0px;
    width: 100%;
    text-align: center;
    max-width: none;
  }
}
@media screen and (max-width: 768px) {
  .copyright-dbe-wrap {
    position: relative;
  }
}
@media screen and (max-width: 412px) {
  /* .copyright-dbe-wrap {
    bottom: -18px;
  } */
  li.form-line .form-buttons-wrapper {
    padding-top: 0;
  }
}
.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 .form-submit-button.submit-button {
  width: auto !important;
  min-width: 240px !important;
}

footer [data-type="control_button"] .form-input-wide .form-buttons-wrapper {
  padding: 0;
  padding-top: 15px;
}

@media screen and (max-width: 412px) {
  footer [data-type="control_button"] .form-input-wide .form-buttons-wrapper {
    padding-top: 0 !important;
  }
}

.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,
    #c4c2b4 0 84px,
    #7d6684 84px 132px,
    rgba(89, 59, 97, 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;
}

.site-footer .site-footer-above-section-2,
.site-footer .site-footer-above-section-2 .footer-widget-area,
.site-footer .site-footer-above-section-2 .footer-widget-area-inner,
.site-footer .site-footer-above-section-2 .widget,
.site-footer .site-footer-above-section-2 .widget * {
  min-width: 0;
  max-width: 100%;
}

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%;
  padding: 0;
}
.site-footer
  .jotform-form
  .form-textbox.form-textbox:not(#productSearch-input):hover,
.site-footer .jotform-form .form-textarea.form-textarea:hover,
footer
  form.jotform-form
  .form-textbox.form-textbox:not(#productSearch-input):hover,
footer form.jotform-form .form-textarea.form-textarea:hover,
form.jotform-form .form-textbox.form-textbox:not(#productSearch-input):active,
footer form.jotform-form .form-textarea.form-textarea:active,
form.jotform-form .form-textbox.form-textbox:not(#productSearch-input):focus,
footer form.jotform-form .form-textarea.form-textarea:focus,
form.jotform-form
  .form-textbox.form-textbox:not(#productSearch-input):focus-within,
footer form.jotform-form .form-textarea.form-textarea:focus-within,
form.jotform-form
  .form-textbox.form-textbox:not(#productSearch-input):focus-visible,
footer form.jotform-form .form-textarea.form-textarea:focus-visible {
  border-width: 1px !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}

.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;
  padding: 0 !important;
}

.form-textarea,
.form-textbox {
  color: #c9cbc6 !important;
}

.site-footer .form-input-wide,
.site-footer .form-textbox,
.site-footer .form-textarea,
.site-footer .form-dropdown,
.site-footer .form-all .form-section,
.site-footer .form-all .page-section,
.site-footer .form-all .form-line {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* put captcha and submit in same row */
/* Make the form section a grid */
.form-all .form-section {
  display: grid !important;
  grid-template-columns: minmax(0, 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;
}
/* Jotform “classic” embed hard-codes ~650px via .form-all */
form.jotform-form .form-all {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

form.jotform-form,
form.jotform-form .form-section,
form.jotform-form .page-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Optional: prevent any child from forcing width */
form.jotform-form * {
  box-sizing: border-box;
}
/* If the form sits in a flex/grid column, allow it to shrink */
.your-form-column-selector {
  min-width: 0;
}

/* Kill Chrome/Safari native input theming so our colors actually stick */
.jotform-form input#first_3,
.jotform-form input#last_3,
.jotform-form input[name="q3_name[first]"],
.jotform-form input[name="q3_name[last]"] {
  -webkit-appearance: none !important;
  appearance: none !important;

  background-color: transparent !important; /* or your desired field bg */
  color: #c9cbc6 !important;

  /* also neutralize any UA “fill” done via shadows */
  box-shadow: none !important;
  -webkit-text-fill-color: #c9cbc6 !important;
}

/* Keep it consistent even on focus */
.jotform-form input#first_3:focus,
.jotform-form input#last_3:focus,
.jotform-form input[name="q3_name[first]"]:focus,
.jotform-form input[name="q3_name[last]"]:focus {
  background-color: transparent !important;
  color: #c9cbc6 !important;
  box-shadow: none !important;
  outline: none; /* optional if you’re handling focus styling elsewhere */
  border-width: 1px !important;
}
/* Chrome autofill can override bg/text */
.jotform-form input:-webkit-autofill,
.jotform-form input:-webkit-autofill:hover,
.jotform-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #c9cbc6 !important;
  box-shadow: 0 0 0 1000px transparent inset !important; /* or your bg */
  transition: background-color 999999s ease-out 0s;
}

/* 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;
}

/* Jotform top error bar -> toast */
.error-navigation-container {
  position: fixed !important;
  top: 96px !important;
  left: 0 !important;
  right: auto !important;
  max-width: 390px !important;
  width: min(450px, calc(100vw - 24px)) !important;
  border-radius: 0 999px 999px 0 !important; /* pill */
  background-color: darkred !important;
  padding: 10px 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  z-index: 2147483647 !important;
  isolation: isolate;
  transform: translateZ(0);

  /* Don’t hijack layout */
  margin: 0 !important;
}

.error-navigation-message strong {
  padding: 2px 8px !important;
}

/* Keep contents tidy */
.error-navigation-inner {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.form-error-message {
  background-color: darkred !important;
}

/* Clamp message so it doesn't explode on mobile */
.error-navigation-message {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important; /* 2 lines max */
  /* overflow: hidden !important; */
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  max-width: 270px !important;
  display: block !important;
  line-height: 1.5; /* Slightly reduce line height so it feels intentional */
}

/* Buttons: smaller, less shouty */
.error-navigation-next-button,
.error-navigation-done-button {
  white-space: nowrap !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* Mobile: move it to bottom so it never covers nav */
@media (max-width: 768px) {
  .error-navigation-container {
    top: auto !important;
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    border-radius: 16px !important; /* pill looks too chunky at full width */
    max-width: none !important;
  }
  .error-navigation-message {
    max-width: none !important;
    line-height: 1.8;
  }
}

.error-navigation-container.is-success {
  color: #ffffff !important;
  background-color: rgba(201, 251, 203, 0.95);
}

/* =========================
   FULL-BLEED SECTION STYLES
   ========================= */

/* 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;
}

/* Services thumbnails: keep two-up grid + full width down to 613px */
.section-services .services-colgroup-inner,
.section-services .services-colgroup-inner > .wp-block-group__inner-container {
  width: 100%;
  max-width: none;
}

.section-services .services-colgroup-inner .is-layout-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Keep the text + image columns side-by-side until 613px */
@media (min-width: 614px) {
  .services-cols-outer.wp-block-columns {
    flex-wrap: nowrap;
  }
}

/* Stack columns below the text under 613px */
@media (max-width: 613px) {
  .services-cols-outer.wp-block-columns {
    flex-wrap: wrap;
  }
}

/* Switch to single-column thumbnails under 415px */
@media (max-width: 414px) {
  .section-services .services-colgroup-inner .is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* 1) The crop box */

/* .svc-thumb {
  outline: 3px solid red;
}
.svc-thumb img {
  outline: 3px solid lime;
} */
.home-services-img-cols {
  display: none;
}
.svc-thumb {
  /* aspect-ratio: 16 / 9; */
  /* border-radius: 0.5em; */
  /* overflow: hidden;
  aspect-ratio: 16 / 9; 
  width: 100%;
  background: #d9d6c8; 
  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;
}
.port-header-row {
  width: 100%;
  justify-content: space-between; /* left item + right item */
  align-items: center;
}
.btn-wrap-port {
  justify-items: center;
  margin-left: auto;
  margin-top: -33px;
}
@media (max-width: 768px) {
  .port-header-row.is-layout-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .port-header-row .btn-wrap-port,
  .port-header-row .wp-block-buttons {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 24px;
  }
  .is-layout-flex > :is(*, div).btn-wrap-port {
    margin-top: 0;
  }
}

.section-portfolio .portfolio-images {
  padding-left: 0;
  padding-right: 0;
}

/* FOOTPRINT section only */
.section-footprint {
  background-color: #ecece7;
}
.entry-content > .wp-block-group.section-footprint {
  padding-top: 42px;
}

/* 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);
  }
}

/* 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 {
  animation-delay: calc(var(--i) * 1s);
} */

/* force dot color */
.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;
}

/* SPINNING ODOMETERINSTEAD OF COUNTING */
/* The visible "window": exactly one digit tall */
.footprint-counters .counter__value.is-odometer {
  display: inline-flex !important;
  align-items: flex-end !important;

  /* math stays pure */
  height: 1em !important;
  line-height: 1em !important;

  font-variant-numeric: tabular-nums;
}

/* Each digit gets a slightly forgiving clip area */
.footprint-counters .counter__value.is-odometer .odigit {
  position: relative !important;
  display: inline-block !important;

  width: 0.66em !important; /* your magic number */
  height: 1em !important;
  overflow: hidden !important;

  /* baseline breathing room that DOESN'T change the row math */
  padding-bottom: 0.08em !important;
  margin-bottom: -0.08em !important;
  box-sizing: content-box !important;
}

/* Tighten the first inter-digit gap (helps leading "1" look less loose) */
.footprint-counters .counter__value.is-odometer .odigit:first-child {
  margin-right: -0.12em !important;
}

/* Moving stack */
.footprint-counters .counter__value.is-odometer .odigit__stack {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  will-change: transform;
}

/* Each row in the stack is exactly 1em tall */
.footprint-counters .counter__value.is-odometer .odigit__num {
  height: 1em !important;
  line-height: 1em !important;
  text-align: center !important;
}

/* Non-spinning prefix/suffix */
.footprint-counters .counter__value.is-odometer .odigit--lit {
  position: static !important;
  width: auto !important;
  height: 1em !important;
  line-height: 1em !important;
  overflow: hidden !important;
}
/* Optical centering correction */
.footprint-counters .counter__value.is-odometer {
  position: relative;
  left: -1px; /* rebalanced after first-digit kerning tweak */
}

/* CLIENTS section only */
.entry-content > .wp-block-group.section-clients {
  background-color: #ffffff;
  padding-top: 42px;
}
/* .section-clients .section-heading {
  padding-top: 0;
  padding-bottom: 0;
} */

.section-clients .is-layout-grid {
  gap: 66px; /* or whatever you want */
}

.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;
}

/* Force 2–3 logo columns on phones only */
@media (max-width: 480px) {
  body .logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* PROJECT SHOWCASE */
.project-showcase {
  /* max-width: 1200px !important; */
  padding-left: 50px !important;
  padding-right: 50px !important;
}

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

.vp-portfolio__item {
  border-radius: 0.5em;
}

/* PORTFOLIO PAGE */
.portfolio-page-outer {
  background-color: #ffffff;
}

.project-intro {
  column-count: 2;
  column-gap: clamp(1rem, 3vw, 3rem);
  column-width: 22rem; /* helps it drop to 1 col when it gets narrow */
}

.project-intro p {
  break-inside: avoid;
}

/* ADJUST MULTIPLE VP INSTANCES ON LAXP */
.laxp-port2 {
  margin-block-start: 15px !important;
}

.client-vp-full {
  margin-block-start: 48px !important;
  margin-block-end: 48px !important;
}

/* REVERSE IMAGES ON POS */
.port-pos .vp-portfolio__items-wrap {
  direction: rtl;
}

.port-pos .vp-portfolio__item {
  direction: ltr;
}

/* UNSTITCH LAXP DOUBLE-VP AT INTERMEDIATE VWs */
/* Default: do NOT stitch (prevents the mid-VW gap) */
/* baseline: no stitch */
.port-laxp.port-laxp--bottom {
  margin-top: 0 !important;
  position: relative;
  z-index: 2; /* so it can sit over the gap area if needed */
}

/* LAXP portfolio - swap out instances at mid widths */
/* default: your normal desktop/mobile setup */
.port-laxp--mid {
  display: none !important;
}

/* awkward range: use the mid layout only */
@media (min-width: 577px) and (max-width: 768px) {
  .port-laxp--top {
    display: none !important;
  }

  .port-laxp--mid {
    display: block !important;
  }
}

.laxp-port2 {
  margin-top: 15px !important;
}

/* Let VP escape the constrained parent */
.portfolio-page-outer.is-layout-constrained > .client-vp-full {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 1) If Astra makes the container flex, force the main content wrapper to grow full-width */
.ast-container > .portfolio-single-wrapper {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0; /* prevents weird overflow sizing in flex */
}

/* 2) If Gutenberg constrained layout is clamping the *inner container*, uncap it */
.portfolio-page-outer.is-layout-constrained > .wp-block-group__inner-container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Now re-apply your readable text constraint only where you want it */
.portfolio-page-outer .client-page-inner {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-single-wrapper h4.wp-block-heading {
  color: #452d4f;
  font-size: 1em;
  font-weight: 700;
}

.h-light {
  font-weight: 200;
}

/* Clean, aligned lists ONLY in main content */
.site-content ul,
.site-content ol {
  /* margin: 0; */
  padding: 0;
  list-style: none;
}

.site-content li {
  position: relative;
  padding-left: 1.4em; /* marker gutter */
}

/* Bullets */
.site-content ul > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0; /* adjust if needed */
}

/* Numbers */
.site-content ol {
  counter-reset: item;
}
.site-content ol > li {
  counter-increment: item;
}
.site-content ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
}

/* === Visual Portfolio (VPv2 Pro / Fade): touch + iPad landscape single-tap + labels-under-image === */

/* iPadOS can report pointer:fine even when using touch, so rely on the has-touch class (set via JS) */

/* 1) Remove Fade skin’s hover “title” pseudo-label (prevents double-tap + duplicate labels) */
html.has-touch .vp-portfolio__item a::before,
html.has-touch .vp-portfolio__item a::after {
  content: none !important;
}

/* 2) Make the real VP overlay behave like static content under the image on touch */
html.has-touch .vp-portfolio__item .vp-portfolio__item-overlay {
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important; /* taps go to the item/link */
}

/* 3) Ensure overlay contents are actually visible (no hover/focus reveal states) */
html.has-touch .vp-portfolio__item .vp-portfolio__item-overlay,
html.has-touch .vp-portfolio__item .vp-portfolio__item-overlay * {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  max-height: none !important;
  height: auto !important;
}

/* 4) Force readable overlay text on the purple background (adjust if desired) */
html.has-touch .vp-portfolio__item .vp-portfolio__item-overlay,
html.has-touch .vp-portfolio__item .vp-portfolio__item-overlay * {
  color: #fff !important;
}
/* .vp-portfolio__items .vp-portfolio__item[style*="display: none"] {
  display: unset !important;
} */
/* VP: disable responsive item limiting that applies inline display:none */
@media (max-width: 9999px) {
  .vp-portfolio__items .vp-portfolio__item[style*="display: none"] {
    display: block !important;
  }
}

/*** PORTFOLIO CAPTIONS MOBILE STACKING ***/

html.has-touch .vp-portfolio__items-style-fade .vp-portfolio__item-meta {
  padding: 6px 33px 9px 33px !important;
}
html.has-touch
  .vp-portfolio__items-style-fade
  .vp-portfolio__item-meta
  :where(h2) {
  letter-spacing: 0.02em !important;
}

html.has-touch
  .vp-portfolio__items-style-fade
  .vp-portfolio__item-meta
  > :last-child {
  margin-bottom: 0 !important;
}

/* Column text Parent group */

.portfolio-single-wrapper {
  background-color: #ffffff;
}

body.page-template-default {
  background-color: #ffffff !important;
}

/* .body-text-2column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
}

.body-text-2column .col1,
.body-text-2column .col2 {
  max-width: 70ch;
}
@media (max-width: 900px) {
  .body-text-2column {
    grid-template-columns: 1fr;
  }

  .body-text-2column .col1,
  .body-text-2column .col2 {
    max-width: none;
  }
} */

/* FANCYBOX OVERRIDE: */
/*kill description box */
.vp-portfolio__item-popup-description {
  display: none;
}

/* ilium purple BG override */
.fancybox-is-open .fancybox-bg {
  opacity: 0.9 !important;
}
.fancybox-bg {
  background: #442e4f !important;
}

.fancybox-caption {
  padding: 75px max(44px, env(safe-area-inset-right))
    max(50px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
}

/* Force the Gutenberg Columns block to behave like a grid */
.body-text-2column.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
}

/* Important: neutralize the inline flex-basis widths Gutenberg sets */
.body-text-2column.wp-block-columns > .wp-block-column {
  width: auto !important;
  flex: initial !important;
}

/* Readability */
.body-text-2column .wp-block-column {
  max-width: 70ch;
}

@media (max-width: 900px) {
  .body-text-2column.wp-block-columns {
    grid-template-columns: 1fr;
  }
  .body-text-2column .wp-block-column {
    max-width: none;
  }
}
/* column text desktop only */

@media (min-width: 1024px) {
  .body-text-2column {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .body-text-2column {
    grid-template-columns: 1fr;
  }
}

/* PORTFOLIO SINGLE PAGE */
body.portfolio_item-template-default {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.portfolio-single-wrapper {
  padding-left: 0;
  padding-right: 0;
  padding-top: 42px;
  padding-bottom: 66px;
}

.ilium-portfolio-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0 0;
}
.ilium-nav-btn {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  text-decoration: none;
}
/* Portfolio Prev / Next buttons */
.ilium-nav-btn {
  display: inline-block;
  padding: 14px 36px;
  border: 2px solid #a7a48b; /* olive outline */
  border-radius: 999px;
  background: transparent;
  color: #a7a48b;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Hover / focus */
.ilium-nav-btn:hover,
.ilium-nav-btn:focus {
  background: #a7a48b; /* olive fill */
  color: #ffffff;
  border-color: #a7a48b;
  text-decoration: none;
}

/* ABOUT/SERVICES PAGE */

.about-page-outer h4 {
  font-weight: 700;
}

h4.wp-block-heading {
  color: #58595b;
}

.about-page-outer h4 + p {
  margin-top: 6px;
}
.entry-content > .wp-block-group.services-page-outer,
.entry-content > .wp-block-group.about-page-outer {
  padding-top: 42px;
  padding-bottom: 66px;
}

/* constrain inner text for readability */
.services-page-inner,
.about-page-inner,
.client-page-inner,
.entry-content > .wp-block-group.client-page-inner {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}

/* HIDE COLUMNS IN CASE WE WANT EM BACK */
.body-text-columns {
  display: none;
}

/* ACCORDION OVERRIDES FOR SERVICES PAGE */

#iliumServicesAcc {
  --bg: #e8e6de;
  --ink: #442e4f;
  --r: 0.7em;
  --padx: 33px;
  --headerh: 72px;
  --caretRoom: 42px;
  --gapUnderHeader: 0px; /* >= lip */
  --bodyBot: 21px;
  --lip: 14px;
}

/* Card */
#iliumServicesAcc .accordion-item {
  background: var(--bg);
  border: 0;
  border-radius: var(--r);
  margin: 0 0 1em;
  padding: 0 var(--padx);
  position: relative;
  overflow: hidden;
}

/* Put the lip BEHIND content */
#iliumServicesAcc .accordion-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--headerh) - var(--lip));
  height: var(--lip);
  background: var(--bg);
  z-index: 0;
  pointer-events: none;
}

/* Ensure content paints above the lip */
#iliumServicesAcc .accordion-button,
#iliumServicesAcc .accordion-collapse {
  position: relative;
  z-index: 1;
}

#iliumServicesAcc h2.accordion-header {
  margin: 0 !important;
}

#iliumServicesAcc .accordion-button {
  width: 100%;
  display: flex;
  /* align-items: center; */
  align-items: flex-start;
  /* min-height: var(--headerh); */
  min-height: 0 !important;
  /* padding: 0 var(--caretRoom) 0 0; */
  padding: 18px var(--caretRoom) 18px 0 !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  outline: none !important;

  line-height: 1.2;
}
#iliumServicesAcc .accordion-button::after {
  display: none !important;
}

#iliumServicesAcc .accordion-button::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 200ms ease;
}
#iliumServicesAcc .accordion-button[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(-135deg);
}

/* OVERRIDE Bootstrap .collapse display:none */
#iliumServicesAcc .accordion-collapse.collapse {
  display: block !important;
}

/* Height-only animation */
#iliumServicesAcc .accordion-collapse {
  height: 0;
  overflow: hidden;
  transition: height 260ms ease;
}

#iliumServicesAcc .accordion-body {
  padding: var(--gapUnderHeader) 0 var(--bodyBot) 0 !important;
  margin: 0 !important;
  opacity: 0;
  transition: opacity 180ms ease;
}
#iliumServicesAcc .accordion-collapse.is-open .accordion-body {
  opacity: 1;
}

#iliumServicesAcc .accordion-body > *:first-child {
  margin-top: 0;
}
#iliumServicesAcc .accordion-body > *:last-child {
  margin-bottom: 0;
}
/* 1) Tighten the header→body gap (this is your primary knob) */
#iliumServicesAcc {
  --lip: 0px; /* decorative only */
  --gapUnderHeader: 0px; /* MUST be >= --lip to avoid overlap */
  /* Try 8/8, 10/10, 12/12 — keep them equal for consistent leading */
}

/* 2) Ensure Gutenberg doesn't sneak top spacing back in */
#iliumServicesAcc .accordion-body > :first-child,
#iliumServicesAcc .accordion-body > * > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Optional: normalize paragraph leading inside panels */
#iliumServicesAcc .accordion-body {
  line-height: 1.55;
}
/* Make --gapUnderHeader actually visible (prevents first-child margin collapsing) */
#iliumServicesAcc .accordion-body {
  display: flow-root; /* creates a new formatting context; stops margin-collapse */
  padding-top: var(--gapUnderHeader) !important;
}

/* Nuke top margin on first Gutenberg block (covers wrappers too) */
#iliumServicesAcc .accordion-body > :first-child,
#iliumServicesAcc .accordion-body > * > :first-child {
  margin-top: 0 !important;
}

/* DETAILS DISPLAY OPTION */

/* scope to wrapper class */
.services-details details > summary {
  list-style: none; /* helps in some browsers */
}

/* Chrome/Safari */
.services-details details > summary::-webkit-details-marker {
  display: none;
}

/* Modern marker pseudo-element (Firefox/Chromium) */
.services-details details > summary::marker {
  content: "";
}

.services-details details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.services-details details > summary::after {
  content: "";
  display: inline-block;

  width: 12px;
  height: 12px;

  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;

  transform-origin: 50% 50%;
  transform: rotate(45deg);
  transition: transform 0.3s ease;

  margin-left: auto;

  flex: 0 0 12px;
}
/* rotate on open */
/* open OR animating-open */
.services-details details.is-open > summary::after {
  transform: rotate(-135deg);
}
.wp-block-details summary {
  color: #442e4f;
  font-weight: 700;
}
.wp-block-details {
  background-color: #e8e6de;
  border-radius: 0.5em;
  padding: 24px 33px;

  overflow: hidden; /* already good */
  border-radius: 0.5em; /* already */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
  backface-visibility: hidden;
}

details summary div:where(.is-layout-flow) > *,
details summary + div {
  margin-block-start: 0px !important;
}
/* Always clip inside the card */
.services-details details.wp-block-details {
  overflow: hidden;
}

/* CLOSED: hard-hide all content after <summary> */
.services-details details.wp-block-details:not([open]) > summary ~ * {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* OPEN: restore */
.services-details details.wp-block-details[open] > summary ~ * {
  max-height: 9999px; /* safe “auto-ish” for now */
  opacity: 1;
  visibility: visible;
}
.services-details details.wp-block-details:not([open]) > summary + div {
  height: 0;
  overflow: hidden;
}
/* Invisible bigger hit area (doesn't change layout) */
.services-details details > summary {
  position: relative;
}

.services-details details > summary::before {
  content: "";
  position: absolute;
  inset: -24px -33px; /* expand click zone (tune) */
}

details {
  margin-block-start: 24px !important;
}