/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 27 2026 | 12:34:02 */
/* ================================
   Arco · Accordion
   github.com/emanuelbento/arco-components
   ================================ */

:root {
  --arco-stage: #08070a;
  --arco-ink: #0d0d0d;
  --arco-ink-invert: #f2f0ed;
  --arco-ink-muted: rgb(242 240 237 / 0.45);

  --arco-ochre: #d6a64f;
  --arco-lilac: #b9b0e3;
  --arco-aqua: #8fc7bd;
  --arco-coral: #ec8f73;

  --arco-font: "Inter Tight", "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --arco-max-width: 64rem;
  --arco-max-height: 38rem;
  --arco-gap: 0.5rem;
  --arco-pill: 4rem;
  --arco-pill-height: 80%;
  --arco-bar: 3.5rem;
  --arco-radius: 1.125rem;
  --arco-media-radius: 0.625rem;

  --arco-stage-pad: 1.25rem;
  --arco-bar-height: 3.5rem;
}

@media (max-width: 991px) {
  :root {
    --arco-pill: 3.5rem;
    --arco-radius: 1rem;
  }
}

@media (max-width: 767px) {
  :root {
    --arco-gap: 0.375rem;
    --arco-radius: 0.875rem;
    --arco-media-radius: 0.5rem;
    --arco-stage-pad: 0.75rem;
    --arco-bar-height: 3rem;
  }
}

/* Demo page only. Everything else is scoped to the section, so pasting the
   component into a site never restyles the rest of the page. */
body {
  margin: 0;
}

.section_arco-accordion,
.section_arco-accordion *,
.section_arco-accordion *::before,
.section_arco-accordion *::after {
  box-sizing: border-box;
}

.section_arco-accordion {
  color: var(--arco-ink-invert);
  font-family: var(--arco-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

/* Stage */

.section_arco-accordion {
  display: grid;
  grid-template-rows: var(--arco-bar-height) minmax(0, 1fr) var(--arco-bar-height);
  height: 100vh;
  height: 100dvh;
  padding-inline: var(--arco-stage-pad);
  overflow: clip;
  background-color: var(--arco-stage);
}

.arco-accordion_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.arco-accordion_logo {
  display: flex;
  color: var(--arco-ink-invert);
}

.arco-accordion_logo svg {
  display: block;
  width: 4.25rem;
  height: auto;
}

.arco-accordion_bar-muted {
  color: var(--arco-ink-muted);
}

.arco-accordion_wrapper {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-block: clamp(1rem, 4vh, 3rem);
}

/* Webflow CMS: let the Collection List Wrapper pass the layout through */
.arco-accordion_wrapper > .w-dyn-list {
  display: contents;
}

/* Component
   The open panel takes whatever the closed ones leave. JS sets --arco-count. */

.arco-accordion_component {
  --arco-count: 4;
  --arco-open: calc(100cqw - (var(--arco-count) - 1) * (var(--arco-pill) + var(--arco-gap)));

  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--arco-gap);
  width: min(100%, var(--arco-max-width));
  height: min(100%, var(--arco-max-height));
  margin: 0;
  padding: 0;
  list-style: none;
}

.arco-accordion_item {
  position: relative;
  flex: none;
  width: var(--arco-pill);
  height: var(--arco-pill-height);
  border-radius: calc(var(--arco-pill) / 2);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--arco-panel, var(--arco-lilac));
  color: var(--arco-ink);
}

.arco-accordion_item.is-active {
  width: var(--arco-open);
  height: 100%;
  border-radius: var(--arco-radius);
}

.arco-accordion_item[data-panel="ochre"] { --arco-panel: var(--arco-ochre); }
.arco-accordion_item[data-panel="lilac"] { --arco-panel: var(--arco-lilac); }
.arco-accordion_item[data-panel="aqua"] { --arco-panel: var(--arco-aqua); }
.arco-accordion_item[data-panel="coral"] { --arco-panel: var(--arco-coral); }

.arco-accordion_item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .arco-accordion_item:not(.is-active):hover::after {
    opacity: 0.12;
  }
}

.arco-accordion_trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.arco-accordion_trigger:focus-visible {
  outline: 2px solid var(--arco-ink-invert);
  outline-offset: 3px;
}

.arco-accordion_item.is-active .arco-accordion_trigger {
  pointer-events: none;
}

.arco-accordion_label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
}

/* Content stays at the open size, the panel clips it while it resizes */

.arco-accordion_content {
  container-type: size;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: var(--arco-open);
  height: 100cqh;
  padding: clamp(1rem, 2vw, 2rem);
}

.arco-accordion_item:not(.is-active) .arco-accordion_content {
  visibility: hidden;
}

.arco-accordion_heading {
  margin: 0;
  font-size: min(12.5cqi, 21cqh);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
}

/* SplitText masks: extra room so descenders are not clipped */
.arco-accordion_line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.arco-accordion_bottom {
  grid-row: 3;
  display: grid;
  grid-template-columns: min(38cqi, 52cqh) minmax(0, 1fr);
  column-gap: min(5cqi, 3.5rem);
  align-items: end;
}

.arco-accordion_media {
  aspect-ratio: 3 / 2;
  border-radius: var(--arco-media-radius);
  overflow: hidden;
  background-color: rgb(13 13 13 / 0.07);
}

.arco-accordion_visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arco-accordion_text {
  max-width: 32ch;
  margin: 0;
  font-size: clamp(0.8125rem, 1.6cqi, 1.0625rem);
  font-weight: 450;
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* Stacked layout for phones and portrait tablets.
   Keep the query in sync with STACKED in accordion.js. */

@media (max-width: 767px), (max-width: 991px) and (orientation: portrait) {
  .arco-accordion_component {
    --arco-open: calc(100cqh - (var(--arco-count) - 1) * (var(--arco-bar) + var(--arco-gap)));

    flex-direction: column;
    height: 100%;
  }

  .arco-accordion_item {
    width: 100%;
    height: var(--arco-bar);
    border-radius: calc(var(--arco-bar) / 2);
  }

  .arco-accordion_item.is-active {
    width: 100%;
    height: var(--arco-open);
  }

  .arco-accordion_label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.875rem;
  }

  .arco-accordion_content {
    row-gap: clamp(1rem, 4cqh, 2rem);
    width: 100cqw;
    height: var(--arco-open);
  }

  .arco-accordion_heading {
    font-size: min(16cqi, 12cqh);
  }

  .arco-accordion_bottom {
    display: contents;
  }

  .arco-accordion_media {
    grid-row: 2;
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }

  .arco-accordion_text {
    grid-row: 3;
    max-width: 40ch;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arco-accordion_item::after {
    transition: none;
  }
}