/*
 Theme Name:   Air Plants
 Theme URI:    https://www.airplants.co.uk/
 Author:       Studio Seventeen
 Author URI:   https://www.studioseventeen.co.uk/
 Template:     bricks
 Version:      1.1
*/

/* =========================================================
   SMOOTH SCROLLING
   Anchor links (e.g. the FAQs jump menu) glide to their target.
   Turned off for visitors who ask their device to reduce motion.
   ========================================================= */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =========================================================
   BUTTONS
   ========================================================= */
/*
.s17btn {
  --btn-hover-bg: var(--s17light);
  --btn-hover-color: var(--s17midnight);
  --btn-angle: 14px;
  z-index: 1;
  clip-path: polygon(var(--btn-angle) 0,
      100% 0,
      calc(100% - var(--btn-angle)) 100%,
      0 100%);
}*/


/* Animated background 
.s17btn::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(100% + var(--btn-angle));
  height: 100%;
  background: var(--btn-hover-bg);
  z-index: -1;
  clip-path: polygon(var(--btn-angle) 0,
      100% 0,
      calc(100% - var(--btn-angle)) 100%,
      0 100%);
  transform: translateX(-105%);
  transition: transform 0.3s ease-in-out;
}*/

/* Hover 
.s17btn:hover {
  color: var(--btn-hover-color);
}

.s17btn:hover::after {
  transform: translateX(-5%);
}*/

/* -------------------------------------------
   Main navigation
------------------------------------------- */

.main-nav .brx-nav-nested-items>li> :is(a, .brx-submenu-toggle) {
  position: relative;
  isolation: isolate;
  border-radius: var(--s17radius-full);
}


/* Background + persistent glass gradient border */
.main-nav .brx-nav-nested-items>li> :is(a, .brx-submenu-toggle)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  border: 1px solid transparent;
  border-radius: inherit;

  background:
    linear-gradient(90deg,
      var(--s17sky-blue-d-2),
      var(--s17sky-blue-d-1)) padding-box,

    linear-gradient(120deg,
      rgb(255 255 255 / 30%) 0%,
      rgb(255 255 255 / 8%) 25%,
      rgb(255 255 255 / 18%) 50%,
      rgb(255 255 255 / 5%) 75%,
      rgb(255 255 255 / 25%) 100%) border-box;

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 0 -1px 0 rgb(0 0 0 / 4%);

  opacity: 0;
  transition: opacity 0.3s ease;
}


/* Horizontal reflection — border only */
.main-nav .brx-nav-nested-items>li> :is(a, .brx-submenu-toggle)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  padding: 1px;
  border-radius: inherit;

  background: linear-gradient(90deg,
      transparent 0%,
      transparent 35%,
      rgb(255 255 255 / 20%) 50%,
      transparent 65%,
      transparent 100%);

  background-size: 250% 100%;
  background-position: 150% 0;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  opacity: 0;
  pointer-events: none;
}


/* Fade background + glass border in */
.main-nav .brx-nav-nested-items>li:is( :hover,
  :has(> [aria-current="page"]))> :is(a, .brx-submenu-toggle)::before {
  opacity: 1;
}


/* Sweep reflection horizontally across border */
.main-nav .brx-nav-nested-items>li:hover> :is(a, .brx-submenu-toggle)::after {
  opacity: 1;
  animation: nav-border-sweep 0.8s ease-out forwards;
}


@keyframes nav-border-sweep {
  from {
    background-position: 150% 0;
  }

  to {
    background-position: -50% 0;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .main-nav .brx-nav-nested-items>li:hover> :is(a, .brx-submenu-toggle)::after {
    animation: none;
  }
}


/* -------------------------------------------
   Buttons (.s17btn, .s17btn.light)
   Pill with an always-on gradient, glass border and the main
   nav's reflection sweep on hover. Colours are set with the
   --btn-* custom properties, so a modifier only changes those.
   The doubled class beats Core Framework's base .s17btn (which
   loads later) but still lets .small / .large change the size.
------------------------------------------- */

.s17btn.s17btn {
  --btn-bg-from: var(--s17midnight);
  --btn-bg-to: var(--s17sky-blue-d-1);
  --btn-color: var(--s17white);
  --btn-shine: var(--s17light-30);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--s17space-2xs) var(--s17space-s);
  border-radius: var(--s17radius-full);
  background: transparent;
  color: var(--btn-color);
  font-family: "Overpass", sans-serif;
  font-size: var(--s17text-s);
  font-weight: 500;
  box-shadow: none;
}

.s17btn.s17btn.light {
  --btn-bg-from: var(--s17sky-blue-l-2);
  --btn-bg-to: var(--s17mist-l-3);
  --btn-color: var(--s17midnight-d-2);
  --btn-shine: var(--s17sky-blue-30);
}

/* Gradient background + glass border (always on) */
.s17btn.s17btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  border: 1px solid transparent;
  border-radius: inherit;

  background:
    linear-gradient(90deg,
      var(--btn-bg-from),
      var(--btn-bg-to),
      var(--btn-bg-from)) padding-box,

    linear-gradient(120deg,
      rgb(255 255 255 / 30%) 0%,
      rgb(255 255 255 / 8%) 25%,
      rgb(255 255 255 / 18%) 50%,
      rgb(255 255 255 / 5%) 75%,
      rgb(255 255 255 / 25%) 100%) border-box;

  background-size: 200% 100%, 100% 100%;
  background-position: 0 0, 0 0;

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 0 -1px 0 rgb(0 0 0 / 4%);

  transition: background-position 0.5s ease;
}

/* Hover: slide the gradient so it runs the other way */
.s17btn.s17btn:is(:hover, :focus-visible)::before {
  background-position: 100% 0, 0 0;
}

/* Horizontal reflection, border only */
.s17btn.s17btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  padding: 1px;
  border-radius: inherit;

  background: linear-gradient(90deg,
      transparent 0%,
      transparent 35%,
      var(--btn-shine) 50%,
      transparent 65%,
      transparent 100%);

  background-size: 250% 100%;
  background-position: 150% 0;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  opacity: 0;
  pointer-events: none;
}

/* Sweep the reflection across the border on hover / keyboard focus */
.s17btn.s17btn:is(:hover, :focus-visible)::after {
  opacity: 1;
  animation: nav-border-sweep 0.8s ease-out forwards;
}

.s17btn.s17btn:focus-visible {
  outline: 2px solid var(--s17sky-blue-l-1);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .s17btn.s17btn:is(:hover, :focus-visible)::after {
    animation: none;
  }

  .s17btn.s17btn::before {
    transition: none;
  }
}


/* -------------------------------------------
   Industry hub cards: image zoom on hover
   Same effect as the CTA banner. The wrapper (.industry-card__image)
   carries the curve clip and hides the overflow; only the image
   inside it scales.
------------------------------------------- */

.industry-card__image {
  position: relative;
  overflow: hidden;
  /* Without this the full-height card squashes the wrapper and crops the image */
  flex-shrink: 0;
}

.industry-card__image img {
  display: block;
  width: 100%;
  transition: transform 0.6s ease;
}

.industry-card:is(:hover, :focus-visible) .industry-card__image img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .industry-card__image img {
    transition: none;
  }

  .industry-card:is(:hover, :focus-visible) .industry-card__image img {
    transform: none;
  }
}


/* -------------------------------------------
   Background overlay image (.has-bg-overlay + .bg-overlay)
   Like Elementor's background overlay. Add .has-bg-overlay to the
   block, then add an Image element inside it with .bg-overlay.
   Pick the image in the builder (or use an ACF tag) and change its
   strength with the image's Style > Opacity. Give it empty alt text.
------------------------------------------- */

.has-bg-overlay {
  position: relative;
  isolation: isolate;
}

.bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.5;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}


/* Terms and conditions list */
.terms h2 {
  font-size: inherit;
}

.terms ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

.terms ol ol {
  padding-left: 2em;
}

.terms ol>li {
  display: block;
  margin-bottom: 0.3em;
}

.terms ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-family: "Archivo Black", sans-serif;
}

/* Main section headings */
.terms>ol>li>h2 {
  display: inline-block;
  font-size: inherit;
}

/* Remove bottom margin from final item */
.terms ol>li:last-child {
  margin-bottom: 0;
}


/* Lazy load images fade in */
img[data-lazyloaded] {
  opacity: 0;
}

img.litespeed-loaded {
  transition: opacity .5s linear 0.2s;
  opacity: 1;
}


/* ==========================================================
   Responsive table (.responsive-table)
   Add the class to any <table>: normal table on desktop, stacked
   cards below 768px. Give each <td> a data-label attribute with its
   column name; the first cell in each row becomes the card heading.
   ========================================================== */

.responsive-table {
  width: 100%;
  border: 1px solid var(--s17grey-l-2);
  border-collapse: collapse;
}

/* Bricks blocks shrink their children to fit their content
   (align-items: flex-start), so a text element holding a table
   would only be as wide as its longest cell. Let it fill the column. */
:where(.brxe-text, .brxe-text-basic, .brxe-post-content):has(> .responsive-table) {
  width: 100%;
}


/* ---------- Cells ---------- */

.responsive-table th,
.responsive-table td {
  padding: var(--s17space-s);
  text-align: left;
  vertical-align: top;
}


/* ---------- Header ---------- */

.responsive-table thead {
  background: var(--s17sky-blue-d-1);
  color: var(--s17light);
}

.responsive-table th {
  font-weight: 500;
}


/* ---------- Rows ---------- */

.responsive-table tbody tr:nth-child(odd) {
  background: var(--s17light);
}

.responsive-table tbody tr:nth-child(even) {
  background: var(--s17grey-l-3);
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  /* Visually hide headings but retain them for accessibility */
  .responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Each row becomes a card */
  .responsive-table tbody tr {
    margin-bottom: var(--s17space-s);
  }

  /* Mobile field label */
  .responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s17space-2xs);
    font-weight: 500;
  }

  /* Dust type acts as the card heading */
  .responsive-table td:first-child {
    background: var(--s17sky-blue-d-1);
    color: var(--s17light);
    font-weight: 500;
  }

  /* The first cell is the card heading, so its label is hidden */
  .responsive-table td:first-child::before {
    display: none;
  }

  /* Modifier: keep the label in front of the heading, for tables whose
     first column is a value rather than a name (e.g. "Fan speed: 90%") */
  .responsive-table.responsive-table--label-heading td:first-child::before {
    content: attr(data-label) ": ";
    display: inline;
    margin: 0;
  }
}


.curve-divider {
  display: block;
  width: 100%;
  height: clamp(120px, 15vw, 214px);
}

/* Dark upper ribbon */
.curve-divider__dark {
  fill: var(--s17sky-blue-d-3);
  animation: curve-dark 10s ease-in-out infinite alternate;
}

/* Brighter middle ribbon */
.curve-divider__mid {
  fill: var(--s17aqua);
  animation: curve-mid 8s ease-in-out infinite alternate;
}

/* White lower area */
.curve-divider__bottom {
  fill: var(--s17white);
}


/* DARK RIBBON */

@keyframes curve-dark {
  0% {
    fill: var(--s17midnight);
  }

  50% {
    fill: var(--s17sky-blue-d-1);
  }

  100% {
    fill: var(--s17midnight);
  }
}


/* BLUE RIBBON */

@keyframes curve-mid {
  0% {
    fill: var(--s17aqua);
  }

  50% {
    fill: var(--s17aqua-l-1);
  }

  100% {
    fill: var(--s17aqua);
  }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  .curve-divider__dark,
  .curve-divider__mid {
    animation: none;
  }
}



#brx-content>*:first-child {
  padding-top: 144px;
}

@media (max-width: 991px) {
  #brx-content>*:first-child {
    padding-top: 130px;
  }
}

@media (max-width: 767px) {
  #brx-content>*:first-child {
    padding-top: 112px;
  }
}

/* -------------------------------------------------
   Autoplaying Tabs — Content Transition
   -------------------------------------------------
   Adds a subtle fade + upward movement whenever
   a new Bricks tab becomes active.
-------------------------------------------------- */

.autoplaying-tabs .tab-pane.brx-open>* {
  animation: autoplay-tab-in 0.45s ease both;
}

@keyframes autoplay-tab-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .autoplaying-tabs .tab-pane.brx-open>* {
    animation: none;
  }
}


/* ========================================
   Hero — Clean Air Effect
   ========================================
   NOTE: .particle-bg used to be defined here too, duplicating (and
   conflicting with — different z-index/pointer-events) the definition
   in the "Particles / Dust effect" section below. Consolidated to a
   single definition down there to avoid two rules fighting over the
   same class. .clouds-layer is left active since it's unclear whether
   it's used elsewhere — confirm before removing.
======================================== */

.clouds-layer {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;
  pointer-events: none;
}

/* ----------------------------------------
   Reduced motion
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .clouds-layer {
    animation: none !important;
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent);
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.8),
      transparent,
      rgba(255, 255, 255, 0.3));
}

/* ========================================
   Product card / CTA interactions
======================================== */

/* Product cards clip to their outer bounds */
.product-card {
  overflow: hidden;
}

/*
 * CTA needs visible overflow so the arrow can
 * extend beyond its original grid area.
 */
.cta-banner {
  overflow: visible;
}


/* Images */

.product-card__image,
.cta-banner__image {
  position: relative;
  overflow: hidden;
}

.product-card__image img,
.cta-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.6s ease;
}


/* Image overlays */

.product-card__overlay,
.cta-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.4s ease;
}


/* Hover interactions */

.product-card:hover .product-card__overlay,
.cta-banner:hover .cta-banner__overlay {
  opacity: 1;
}

.product-card:hover .product-card__image img,
.cta-banner:hover .cta-banner__image img {
  transform: scale(1.04);
}

/* CTA arrow */

.arrow-mask {
  --arrow-width: clamp(80px, 8vw, 120px);
  --arrow-extension: 0px;

  position: relative;
  isolation: isolate;

  /* Background moves to ::before */
  background: transparent !important;
}

/* Complete arrow shape */
.arrow-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  width: calc(100% + var(--arrow-extension));

  background: var(--s17midnight);

  -webkit-clip-path: polygon(0 0,
      calc(100% - var(--arrow-width)) 0,
      100% 50%,
      calc(100% - var(--arrow-width)) 100%,
      0 100%);

  clip-path: polygon(0 0,
      calc(100% - var(--arrow-width)) 0,
      100% 50%,
      calc(100% - var(--arrow-width)) 100%,
      0 100%);

  transition: width 0.4s ease;
}

.cta-banner:hover .arrow-mask::before {
  --arrow-extension: 40px;
}

/* Reduced motion  */

@media (prefers-reduced-motion: reduce) {

  .product-card__image img,
  .cta-banner__image img,
  .product-card__overlay,
  .cta-banner__overlay,
  .arrow-mask {
    transition: none;
  }

  .product-card:hover .product-card__image img,
  .cta-banner:hover .cta-banner__image img {
    transform: none;
  }

  .cta-banner:hover .arrow-mask {
    --arrow-extension: 0px;
  }
}

/* Triangle card */
/* Coloured corner chip */
.triangle-card {
  position: relative;
}

.triangle-card::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  right: -0.4rem;
  bottom: -0.4rem;
  background: var(--s17sky-blue);
  clip-path: polygon(100% 0,
      100% 100%,
      0 100%);
  pointer-events: none;
}


/* ========================================
   Services circuit
======================================== */

.services-circuit {
  --circuit-line-width: 3px;
  --circuit-speed: 0.7s;
}


/* ========================================
   Connector cells
======================================== */

.circuit-line {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}


/* Actual line */
.circuit-line::before {
  content: "";
  position: absolute;
  background: var(--s17sky-blue);
  will-change: transform;
}


/* ========================================
   Top
   Design → Installation
======================================== */
.circuit-line__top::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--circuit-line-width);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  animation:
    circuit-top var(--circuit-speed) ease-out forwards;
}


/* ========================================
   Right
   Installation → Servicing
======================================== */

.circuit-line__right::before {
  left: 50%;
  top: 0;
  width: var(--circuit-line-width);
  height: 100%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
  animation:
    circuit-right var(--circuit-speed) ease-out var(--circuit-speed) forwards;
}


/* ========================================
   Bottom
   Servicing → Testing
======================================== */

.circuit-line__bottom::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--circuit-line-width);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  animation:
    circuit-bottom var(--circuit-speed) ease-out calc(var(--circuit-speed) * 2) forwards;
}


/* ========================================
   Left
   Testing → Design
======================================== */

.circuit-line__left::before {
  left: 50%;
  top: 0;
  width: var(--circuit-line-width);
  height: 100%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center bottom;
  animation:
    circuit-left var(--circuit-speed) ease-out calc(var(--circuit-speed) * 3) forwards;
}


/* ========================================
   Animation
======================================== */

@keyframes circuit-top {
  to {
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes circuit-right {
  to {
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes circuit-bottom {
  to {
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes circuit-left {
  to {
    transform: translateX(-50%) scaleY(1);
  }
}


/* ========================================
   Reduced motion
======================================== */

@media (prefers-reduced-motion: reduce) {
  .circuit-line::before {
    animation: none;
    transform: none;
  }
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {
  .circuit-line {
    display: none;
  }

  .services-circuit__logo {
    display: none;
  }
}

/* ========================================
   Mobile circuit
======================================== */

@media (max-width: 767px) {

  /*
     * Turn the 3x3 circuit into one column.
     */

  .services-circuit {
    display: flex;
    flex-direction: column;
    gap: 0;
  }


  /* ----------------------------------------
       Mobile order

       Design
       line
       Installation
       line
       Testing
       line
       Servicing
    ---------------------------------------- */

  /* System Design */
  .services-circuit__card:nth-child(1) {
    order: 1;
  }

  /* Top line */
  .circuit-line__top {
    order: 2;
  }

  /* System Installation */
  .services-circuit__card:nth-child(3) {
    order: 3;
  }

  /* Right line */
  .circuit-line__right {
    order: 4;
  }

  /* Testing */
  .services-circuit__card:nth-child(7) {
    order: 5;
  }

  /* Bottom line */
  .circuit-line__bottom {
    order: 6;
  }

  /* Servicing */
  .services-circuit__card:nth-child(9) {
    order: 7;
  }


  /* ----------------------------------------
       Hide elements we don't need
    ---------------------------------------- */

  .services-circuit__logo,
  .circuit-line__left {
    display: none;
  }


  /* ----------------------------------------
       Cards
    ---------------------------------------- */

  .services-circuit__card {
    width: 100%;
  }


  /* ----------------------------------------
       All mobile connectors become vertical
    ---------------------------------------- */

  .circuit-line__top,
  .circuit-line__right,
  .circuit-line__bottom {
    display: block;

    position: relative;

    width: 100%;
    height: 5rem;
  }


  .circuit-line__top::before,
  .circuit-line__right::before,
  .circuit-line__bottom::before {
    left: 50%;
    top: 0;

    width: var(--circuit-line-width);
    height: 100%;

    background: var(--s17sky-blue);

    transform: translateX(-50%) scaleY(0);
    transform-origin: center top;
  }


  /* ----------------------------------------
       Sequential downward animation
    ---------------------------------------- */

  .circuit-line__top::before {
    animation:
      circuit-mobile var(--circuit-speed) ease-out forwards;
  }

  .circuit-line__right::before {
    animation:
      circuit-mobile var(--circuit-speed) ease-out var(--circuit-speed) forwards;
  }

  .circuit-line__bottom::before {
    animation:
      circuit-mobile var(--circuit-speed) ease-out calc(var(--circuit-speed) * 2) forwards;
  }


  @keyframes circuit-mobile {
    to {
      transform: translateX(-50%) scaleY(1);
    }
  }
}


/* ========================================
   Particles / Dust effect
   ========================================
   Two approaches have been built — only ONE should be active at a time,
   since both use the .particle-bg / .particles-layer class names.
   Currently ACTIVE: tsParticles (canvas-based).
   Kept below, INACTIVE, for reference: the CSS-only Dust effect.
   Uncomment that block AND comment out the tsParticles block below if
   you switch back — don't run both at once.
======================================== */

/* ----------------------------------------
   ACTIVE — tsParticles (canvas-based) version
   Requires the tsparticles-slim script enqueued in functions.php, and
   particles-init.js set to the tsParticles version (not the dust one).
---------------------------------------- */

.particle-bg {
  position: relative;
}

.particles-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  mix-blend-mode: overlay;
}



/* ----------------------------------------
   INACTIVE — CSS-only Dust effect

   To switch back to this: comment out the tsParticles block above,
   uncomment everything below, and swap particles-init.js back to the
   dust version. The tsparticles-slim enqueue in functions.php can stay
   disabled since this version doesn't use it.
---------------------------------------- */
/*
.particle-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dust-specks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate(var(--specks-shift-x, 0px), calc(var(--scroll-offset, 0px) + var(--specks-shift-y, 0px)));
  transition: transform 0.5s ease-out;
  will-change: transform;
}

.dust-speck-wrap {
  position: absolute;
  pointer-events: none;
}

.dust-speck {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--s17midnight) 100%, transparent) 0%, transparent 70%);
  filter: blur(1px);
  opacity: 0;
  animation-name: dust-twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

@keyframes dust-twinkle {
  0%   { opacity: 0; transform: translate(0, 0); }
  30%  { opacity: 0; }
  50%  { opacity: var(--peak-opacity, 0.75); }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: translate(175px, 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .dust-speck {
    animation: none !important;
  }

  .dust-specks {
    transform: none !important;
    transition: none !important;
  }
}
*/

/* These two are generic layering helpers, used by either version above —
   left active regardless of which particle system is in use. */
.particle-front {
  position: relative;
  z-index: 1;
}

.particle-behind {
  position: relative;
  z-index: -1;
}

/* ------------------------------------------------------------
 * NESTABLE TABS: MOBILE ACCORDION
 * ------------------------------------------------------------
 * Pairs with the "Nestable tabs: mobile accordion" block in
 * assets/js/script.js. Add the class "nestable-tabs" to a Bricks
 * Tabs (nestable) element to opt in. Below 768px the script moves
 * each pane under its title; these rules style that state.
 * Add "nestable-tabs__pane-heading" to a heading inside a pane to
 * hide it on mobile (the accordion title already shows it).
 */
@media (max-width: 767px) {
  .nestable-tabs>.tab-content {
    display: none;
  }

  .nestable-tabs>.tab-menu {
    flex-direction: column;
    gap: 0;
  }

  .nestable-tabs .tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s17space-s);
    margin-bottom: var(--s17space-s);
    cursor: pointer;
  }

  .nestable-tabs .tab-title::after {
    content: "";
    flex-shrink: 0;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.3s ease;
  }

  .nestable-tabs .tab-title.is-mobile-open {
    background-color: var(--s17white);
  }

  .nestable-tabs .tab-title.is-mobile-open::after {
    transform: translateY(25%) rotate(-135deg);
  }

  .nestable-tabs .tab-pane {
    background-color: var(--s17white);
    border-radius: var(--s17radius-m);
  }

  .nestable-tabs .tab-pane.is-mobile-open {
    margin-bottom: var(--s17space-s);
  }

  .nestable-tabs .tab-pane>* {
    padding: var(--s17space-m);
  }

  .nestable-tabs .nestable-tabs__pane-heading {
    display: none;
  }
}

/* Image Clipping Path */
.image-curve {
  clip-path: url(#s17-image-curve);
}

@supports (clip-path: shape(from 0 0, line to 100% 100%, close)) {
  .image-curve {
    clip-path: shape(from 0 0,
        line to 100% 0,
        line to 100% 82.44%,
        curve to 0 100% with 69.33% 93.74% / 35.5% 100%,
        close);
  }
}