/*
 * Sheer homepage redesign.
 * Only enqueued on the new homepage, page 35676 (see sheer_is_redesign_page() in functions.php).
 * Every rule is scoped to body.sheer-v2. Header/footer styles live in sheer-chrome.css (site-wide).
 *
 * Spacing uses the 8-point scale from sheer-tokens.css:
 *   --space-1 8px  | --space-2 16px | --space-3 32px | --space-4 64px | --space-5 128px
 * Rhythm inside a section:
 *   heading -> text 16, paragraph -> paragraph 16, text -> button 32,
 *   section heading -> content 32, block -> next block 64, section padding 128 (64 on phones).
 */

/* =========================================================
   Shared section spacing
   ========================================================= */

.sheer-v2 .avia-section[class*="sheer-"] > .container > .content,
.sheer-v2 .avia-section[class*="sheer-"] > .container > main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Generic rhythm rules use :where() so the section-specific rules below can override them */

/* Headings: no Avia border, 16px to whatever follows */
#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .av-special-heading {
  margin: 0 0 var(--space-2);
  padding-bottom: 0;
}

#top.sheer-v2 .avia-section[class*="sheer-"] .av-special-heading .special-heading-border { display: none; }

/* Enfold floats the heading tag, which collapses the wrapper to 0px tall and breaks every gap after it */
#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .av-special-heading .av-special-heading-tag {
  float: none;
  width: 100%;
  margin: 0;
}

/* Enfold gives paragraphs a 0.85em top AND bottom margin; use bottom-only 16px */
#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .avia_textblock p {
  margin: 0 0 var(--space-2);
}

#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .avia_textblock p:last-child { margin-bottom: 0; }

/* Text -> button */
#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .avia-button-wrap { margin-top: var(--space-3); }
#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .avia-button-wrap .avia-button { margin: 0; }

/* Avia puts a 50px top margin on every new column row; spacing comes from the elements instead */
#top.sheer-v2 :where(.avia-section[class*="sheer-"]) .flex_column { margin-top: 0; }

/* Check-mark list used in Benefits and Multimodal */
#top.sheer-v2 .sheer-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

#top.sheer-v2 .sheer-checklist li {
  position: relative;
  margin: 0;
  padding: var(--space-1) 0 var(--space-1) 40px;  /* 24px icon + 16px gap */
  list-style: none;
}

#top.sheer-v2 .sheer-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c320' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M10.5 7.5l4.5 4.5-4.5 4.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Thin rule above and below a list */
.sheer-v2 .sheer-list-box {
  border-top: 1px solid var(--sheer-cool-grey);
  border-bottom: 1px solid var(--sheer-cool-grey);
  padding: var(--space-2) 0;
}

/* =========================================================
   1. Hero
   ========================================================= */

.sheer-v2 .avia-section.sheer-hero {
  background-color: var(--sheer-white);
  background-size: 100% auto !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
}

.sheer-v2 .avia-section.sheer-hero > .container > .content,
.sheer-v2 .avia-section.sheer-hero > .container > main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Text and image centered on each other vertically */
#top.sheer-v2 .sheer-hero .entry-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#top.sheer-v2 .sheer-hero .entry-content-wrapper::before,
#top.sheer-v2 .sheer-hero .entry-content-wrapper::after { display: none; }

/* Background video. The section keeps its content height (even padding keeps the
   content centered), and the video is sized from that height instead of the page width:
   the wave only spans 13%-94% of the frame, so the video is 123.5% of the section tall
   (100 / 81) and shifted down 7.4%, which fits exactly the wave and crops the empty white.
   On screens wider than the video, its edges fade into the white section.
   Overrides the sizes Enfold's script sets inline. */
#top.sheer-v2 .sheer-hero .av-section-video-bg {
  position: absolute;
  inset: 0;
  height: auto;
  overflow: hidden;
  background: transparent;
}

#top.sheer-v2 .sheer-hero .av-section-video-bg :is(.avia-slideshow-inner, .avia-slideshow-slide, .avia-slide-wrap, .mejs-container, .mejs-inner, .mejs-mediaelement) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  background: transparent !important;
}

#top.sheer-v2 .sheer-hero .av-section-video-bg video {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: -7.4% !important;
  left: 50% !important;
  width: auto !important;
  max-width: none !important;
  height: 123.5% !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.sheer-v2 .sheer-hero .av-special-heading { max-width: 520px; }

.sheer-v2 .sheer-hero .sheer-hero-image .avia-image-container-inner,
.sheer-v2 .sheer-hero .sheer-hero-image img { width: 100%; max-width: 620px; }

/* =========================================================
   2. Services
   ========================================================= */

.sheer-v2 .sheer-services .sheer-intro {
  max-width: 760px;
  margin-bottom: var(--space-4);
}

.sheer-v2 .sheer-services .sheer-card { margin-bottom: var(--space-4); }

/* Last row: section padding already provides the gap */
.sheer-v2 .avia-section.sheer-services > .container > .content,
.sheer-v2 .avia-section.sheer-services > .container > main { padding-bottom: var(--space-4); }

.sheer-v2 .sheer-card-image,
.sheer-v2 .sheer-card-image .avia-image-container-inner,
.sheer-v2 .sheer-card-image .avia-image-overlay-wrap,
.sheer-v2 .sheer-card-image a { display: block; width: 100%; }

#top.sheer-v2 .sheer-card-image { margin: 0; }

.sheer-v2 .sheer-card-image .avia-image-container-inner {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px -16px rgba(0, 21, 88, 0.45);
}

.sheer-v2 .sheer-card-image img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.sheer-v2 .sheer-card-image a:hover img { transform: scale(1.04); }

#top #wrap_all .sheer-card-title .av-special-heading-tag { text-align: center; }

#top #wrap_all .sheer-card-title {
  text-align: center;
  margin: var(--space-2) 0 0;
}

/* =========================================================
   3. Vision & Mission
   ========================================================= */

.sheer-v2 .avia-section.sheer-vision {
  position: relative;
  background-color: var(--sheer-navy);
  background-size: cover !important;
}

#top.sheer-v2 .sheer-vision .sheer-mission-heading { margin-top: var(--space-4); }

/* =========================================================
   4. Benefits
   ========================================================= */

#top.sheer-v2 .sheer-benefits .av-special-heading { margin-bottom: var(--space-4); }

/* Image and checklist centered on each other vertically */
#top.sheer-v2 .sheer-benefits .entry-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#top.sheer-v2 .sheer-benefits .entry-content-wrapper::before,
#top.sheer-v2 .sheer-benefits .entry-content-wrapper::after { display: none; }
.sheer-v2 .sheer-benefits .sheer-benefits-image img { width: 100%; max-width: 560px; }

/* =========================================================
   5. Testimonials
   ========================================================= */

.sheer-v2 .avia-section.sheer-testimonials { background-color: var(--sheer-cool-grey); }

.sheer-v2 .avia-section.sheer-testimonials > .container > .content,
.sheer-v2 .avia-section.sheer-testimonials > .container > main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

#top #wrap_all .sheer-eyebrow .av-special-heading-tag {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Arrows sit on the far left/right, the quote mark icon stays put while slides change.
   The icon is drawn as a mask so its color comes from the tokens. */
#top #wrap_all .sheer-quote-slider {
  position: relative;
  margin-top: var(--space-4);
  padding: 0 var(--space-4) 0 320px;
  min-height: 140px;
}

#top #wrap_all .sheer-quote-slider::before {
  content: '';
  position: absolute;
  left: 96px;
  top: 0;
  width: 160px;
  height: 138px;
  background-color: var(--sheer-indigo);
  -webkit-mask: url('../img/quote-mark.svg') no-repeat center / contain;
  mask: url('../img/quote-mark.svg') no-repeat center / contain;
  pointer-events: none;
}

#top #wrap_all .sheer-quote-slider .avia-smallarrow-slider-heading {
  position: static;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#top #wrap_all .sheer-quote-slider .avia-smallarrow-slider-heading .new-special-heading { display: none; }

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows {
  position: static;
  width: auto;
  height: 0;
}

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a {
  position: absolute;
  top: 50%;
  width: 32px !important;
  height: 32px;
  margin: -16px 0 0;
  border-radius: 50%;
  border: 2px solid var(--sheer-navy);
  opacity: 1;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a:hover { opacity: 0.7; }

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a.prev-slide {
  left: 0;
  right: auto;
  background-color: transparent;
}

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a.next-slide {
  right: 0;
  left: auto;
  background-color: var(--sheer-navy);
}

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a svg {
  height: 12px;
  width: auto;
  margin: 0;
}

#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a.prev-slide svg path { fill: var(--sheer-navy); }
#top #wrap_all .sheer-quote-slider .avia-slideshow-arrows a.next-slide svg path { fill: var(--sheer-white); }

#top #wrap_all .sheer-quote-slider .sheer-quote {
  font-family: var(--font-heading);
  font-size: var(--h3-font-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sheer-navy);
  margin: 0 0 var(--space-3);
  max-width: 760px;
}

#top #wrap_all .sheer-quote-slider .sheer-quote-by {
  font-size: var(--small-font-size);
  line-height: var(--small-line-height);
  color: var(--sheer-navy);
  margin: 0;
}

/* On phones Enfold turns sliders into a swipe row with 2 items per screen; quotes need the full width */
.responsive #top #wrap_all .sheer-quote-slider.av-phone-track .avia-content-slider-inner { --av-track-cols: 1; }

/* Tablets and phones: smaller icon above the quote */
@media only screen and (max-width: 989px) {
  #top #wrap_all .sheer-quote-slider { margin-top: var(--space-3); padding: 112px 48px 0; }
  #top #wrap_all .sheer-quote-slider::before { left: 48px; width: 93px; height: 80px; }
}

/* =========================================================
   6. Gartner
   ========================================================= */

.sheer-v2 .sheer-gartner { text-align: center; }
.sheer-v2 .sheer-gartner .sheer-gartner-logo img { max-width: 340px; width: 100%; }

#top.sheer-v2 .sheer-gartner .av-special-heading {
  max-width: 860px;
  margin: var(--space-3) auto 0;
}

/* =========================================================
   7. Image band
   ========================================================= */

.sheer-v2 .avia-section.sheer-image-band {
  background-size: cover !important;
  background-position: center center !important;
}

.sheer-v2 .avia-section.sheer-image-band > .container > .content,
.sheer-v2 .avia-section.sheer-image-band > .container > main { padding: 0; }

/* =========================================================
   8. Multimodal
   ========================================================= */

.sheer-v2 .sheer-multimodal .sheer-list-box { border-color: rgba(255, 255, 255, 0.45); }

/* =========================================================
   9. Awards
   ========================================================= */

#top.sheer-v2 .sheer-awards .av-special-heading { margin-bottom: var(--space-4); }

/* Logo slider: 5 logos per slide, crossfading. Logos centered in equal cells, no frames */
#top #wrap_all .sheer-logo-slider:not(.av-phone-track) .slide-entry-wrap {
  display: flex;
  align-items: center;
}

#top #wrap_all .sheer-logo-slider .slide-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border: 0;
  box-shadow: none;
}

/* The last slide may hold fewer logos; keep them centered */
#top #wrap_all .sheer-logo-slider:not(.av-phone-track) .slide-entry-wrap { justify-content: center; }


/* Crossfade (js/sheer-logo-fade.js): all groups share one grid cell, only the active one shows */
#top #wrap_all .sheer-logo-slider.sheer-fade-ready .avia-content-slider-inner {
  display: grid;
  height: auto !important;
}

#top #wrap_all .sheer-logo-slider.sheer-fade-ready:not(.sheer-fade-single) .slide-entry-wrap {
  grid-area: 1 / 1;
  position: static !important;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s !important;
}

#top #wrap_all .sheer-logo-slider.sheer-fade-ready:not(.sheer-fade-single) .slide-entry-wrap.sheer-fade-active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.8s ease !important;
}

/* Phones: Enfold flattens the groups into a swipe row; the script fades single logos instead */
.responsive #top #wrap_all .sheer-logo-slider.sheer-fade-single .avia-content-slider-inner {
  overflow: visible;
  scroll-snap-type: none;
}

.responsive #top #wrap_all .sheer-logo-slider.sheer-fade-single .slide-entry {
  grid-area: 1 / 1;
  justify-self: center;
  width: 60% !important;
  max-width: 224px;
  padding: 0;
  opacity: 0;
  visibility: hidden !important;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.responsive #top #wrap_all .sheer-logo-slider.sheer-fade-single .slide-entry.sheer-fade-active {
  opacity: 1;
  visibility: visible !important;
  transition: opacity 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
  #top #wrap_all .sheer-logo-slider.sheer-fade-ready .slide-entry-wrap,
  #top #wrap_all .sheer-logo-slider.sheer-fade-ready .slide-entry { transition: none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media only screen and (max-width: 767px) {
  .sheer-v2 .avia-section[class*="sheer-"] > .container > .content,
  .sheer-v2 .avia-section[class*="sheer-"] > .container > main {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .sheer-v2 .avia-section.sheer-hero > .container > .content,
  .sheer-v2 .avia-section.sheer-hero > .container > main {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  /* Phones: static wave instead of the video, centered behind the hero image
     (the image column) instead of along the bottom of the section.
     The SVG frame is 16:9 and 160% of the screen width so the curve shows around the image; translate(-50%, -53.5%) lines the
     middle of the wave (13%-94% of the frame) up with the middle of the image. */
  #top.sheer-v2 .sheer-hero .av-section-video-bg { display: none; }
  html #top.sheer-v2 .avia-section.sheer-hero {
    background-image: none !important;
    overflow: hidden;
  }
  #top.sheer-v2 .sheer-hero .flex_column:last-child {
    position: relative;
    isolation: isolate;
  }
  #top.sheer-v2 .sheer-hero .flex_column:last-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 160vw;
    height: calc(160vw * 9 / 16); /* explicit height and visibility: Enfold's clearfix ::before hides it */
    visibility: visible;
    background: url('../../../uploads/2026/10/sheer-hero-wave.svg') center / 100% 100% no-repeat;
    transform: translate(-50%, -53.5%);
    pointer-events: none;
  }

  /* Stacked columns: 32px between them */
  #top.sheer-v2 .avia-section[class*="sheer-"] .flex_column { margin-bottom: var(--space-3); }
  #top.sheer-v2 .avia-section[class*="sheer-"] .flex_column:last-child { margin-bottom: 0; }

  .sheer-v2 .sheer-services .sheer-intro { margin-bottom: var(--space-3); }


  .sheer-v2 .avia-section.sheer-image-band { min-height: 224px !important; }
}