/* ==========================================================================
   components.css — buttons, cards, form, accordion, carousels, overlays
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--stillwater);
  --btn-fg: var(--mineral);
  --btn-border: var(--stillwater);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  overflow: hidden;
  transition: background-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease),
    transform var(--t-micro) var(--ease);
}

.btn .icon {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--t-micro) var(--ease);
}

.btn:hover {
  --btn-bg: var(--stillwater-soft);
  --btn-border: var(--stillwater-soft);
}

.btn:hover .icon {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn--accent {
  --btn-bg: var(--sandalwood);
  --btn-border: var(--sandalwood);
  --btn-fg: var(--stillwater);
}

.btn--accent:hover {
  --btn-bg: #a97c33;
  --btn-border: #a97c33;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--stillwater);
  --btn-border: var(--rule-strong);
}

.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-border: var(--sandalwood);
  --btn-fg: var(--stillwater);
}

.on-dark .btn--ghost {
  --btn-fg: var(--mineral);
  --btn-border: rgb(var(--mineral-rgb) / 0.4);
}

.on-dark .btn--ghost:hover {
  --btn-border: var(--sandalwood);
  --btn-fg: var(--sandalwood);
}

.btn--block {
  width: 100%;
}

/* Text link with an animated rule beneath. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--stillwater);
}

.link__label {
  position: relative;
  padding-block-end: 2px;
}

.link__label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sandalwood);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--t-micro) var(--ease);
}

.link:hover .link__label::after,
.link:focus-visible .link__label::after {
  transform: scaleX(0);
}

.link .icon {
  width: 1rem;
  height: 1rem;
  color: var(--sandalwood);
  transition: transform var(--t-micro) var(--ease);
}

.link:hover .icon {
  transform: translate(3px, -3px);
}

.on-dark .link {
  color: var(--mineral);
}

/* --------------------------------------------------------------------------
   Badges and chips
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: #8a6526;
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--muted);
  font-weight: 500;
}

.on-dark .badge--outline {
  color: rgb(var(--mineral-rgb) / 0.8);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgb(var(--stillwater-rgb) / 0.08);
  color: var(--stillwater);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Card base
   -------------------------------------------------------------------------- */

/* `contain: layout` tells the browser a card's internals can never affect
   layout outside it, so scrolling past forty of them does not re-run layout for
   the whole page. Safe here — .card is already position: relative, so it stays
   the containing block for the article overlay link. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  contain: layout;
  transition: transform var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease),
    box-shadow var(--t-micro) var(--ease);
}

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  aspect-ratio: 16 / 10;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}

.card__text {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Practice card — icon draws its stroke on hover and on focus
   -------------------------------------------------------------------------- */

.practice {
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
}

.practice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
  transition: border-color var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease);
}

.practice__icon .icon {
  width: 26px;
  height: 26px;
}

.practice:hover,
.practice:focus-within {
  border-color: rgb(var(--sandalwood-rgb) / 0.5);
}

.practice:hover .practice__icon,
.practice:focus-within .practice__icon {
  border-color: var(--sandalwood);
  background: rgb(var(--sandalwood-rgb) / 0.24);
  color: var(--accent-ink);
}

.practice__title {
  font-size: var(--fs-card);
}

.practice__index {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--ink-rgb) / 0.45);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Offering card
   -------------------------------------------------------------------------- */

.offering {
  overflow: hidden;
  height: 100%;
}

.offering__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.offering__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-std) var(--ease);
}

.offering:hover .offering__media img {
  transform: scale(1.04);
}

.offering__meta {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* No backdrop-filter: at 96% opacity the blur is invisible, but it would cost
   a compositing pass per badge on every scrolled frame. Twelve of these are on
   screen at once. */
.offering__meta .badge {
  background: rgb(var(--paper-rgb) / 0.96);
  color: var(--stillwater);
}

.offering__meta .badge--format {
  background: rgb(var(--stillwater-rgb) / 0.86);
  color: var(--mineral);
}

.offering__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}

.offering__title {
  font-size: var(--fs-card);
}

.offering__link {
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Guide card — socials are always visible on touch, revealed on hover only
   where hover genuinely exists
   -------------------------------------------------------------------------- */

.guide {
  height: 100%;
  border: 0;
  background: transparent;
}

.guide__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-arch);
  aspect-ratio: 4 / 5;
  background: rgb(var(--stillwater-rgb) / 0.08);
}

.guide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide__socials {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: rgb(var(--paper-rgb) / 0.96);
}

.guide__body {
  padding: var(--sp-3) 0 0;
}

.guide__name {
  font-size: var(--fs-card);
}

.guide__role {
  font-size: 0.9375rem;
  color: var(--accent);
  font-weight: 500;
}

.guide__bio {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Social icon buttons
   -------------------------------------------------------------------------- */

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: currentColor;
  transition: background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.social .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* The footer carries the accounts rather than merely repeating them, so its
   glyphs are drawn larger inside the same 44px button. */
.footer .social .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.social:hover {
  background: var(--sandalwood);
  border-color: var(--sandalwood);
  color: var(--stillwater);
}

.social--bare {
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.testimonial__mark {
  width: 2rem;
  height: 2rem;
  color: rgb(var(--sandalwood-rgb) / 0.55);
}

.testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--stillwater);
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--rule);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.testimonial__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.testimonial__descriptor {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Journal card
   -------------------------------------------------------------------------- */

.article {
  overflow: hidden;
  height: 100%;
}

.article__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-std) var(--ease);
}

.article:hover .article__media img {
  transform: scale(1.04);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  color: var(--muted);
}

.article__title {
  font-size: var(--fs-card);
}

.article__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   Percentage bars
   -------------------------------------------------------------------------- */

.bars {
  display: grid;
  gap: var(--sp-4);
}

.bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: 0.6rem;
}

.bar__label {
  font-weight: 500;
  font-size: 0.9375rem;
}

.bar__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent);
}

/* A native <progress> carries the value, so the bar is correct with no CSS
   trickery, no inline styles and no JavaScript — and screen readers get a real
   value instead of a decorative div. GSAP animates the element's value. */
.bar__track {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgb(var(--ink-rgb) / 0.1);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

.bar__track::-webkit-progress-bar {
  background: rgb(var(--ink-rgb) / 0.1);
  border-radius: var(--r-pill);
}

.bar__track::-webkit-progress-value {
  background: linear-gradient(90deg, var(--stillwater), var(--sandalwood));
  border-radius: var(--r-pill);
}

.bar__track::-moz-progress-bar {
  background: linear-gradient(90deg, var(--stillwater), var(--sandalwood));
  border-radius: var(--r-pill);
}

.bar__note {
  margin-block-start: 0.45rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */

.counter {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-block: var(--sp-3);
}

.counter__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mineral);
}

.counter__label {
  font-size: var(--fs-small);
  color: rgb(var(--mineral-rgb) / 0.68);
}

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */

.checklist {
  display: grid;
  gap: var(--sp-2);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-small);
}

.checklist .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.3rem;
  color: var(--sandalwood);
  flex: none;
}

/* --------------------------------------------------------------------------
   Decorative shapes — organic forms sitting behind content
   -------------------------------------------------------------------------- */

.shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.shape svg {
  width: 100%;
  height: 100%;
}

.shape--blob {
  color: rgb(var(--stillwater-rgb) / 0.05);
}

.shape--leaf {
  color: rgb(var(--sandalwood-rgb) / 0.16);
}

.shape--ring {
  color: rgb(var(--dusk-rgb) / 0.16);
}

/* Torn-edge divider between two bands of colour. */
.divider {
  display: block;
  width: 100%;
  height: clamp(28px, 5vw, 64px);
  color: inherit;
}

.divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   Marquee — CSS animation is the baseline; GSAP takes over when it loads
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-4);
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-slide 34s linear infinite;
}

.marquee.is-driven .marquee__track {
  animation: none;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__word {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--stillwater);
  white-space: nowrap;
}

.marquee__word::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sandalwood);
  flex: none;
}

@keyframes marquee-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Sliding headline strip — oversized outlined display text
   -------------------------------------------------------------------------- */

.strip {
  overflow: hidden;
  padding-block: clamp(var(--sp-5), 6vw, var(--sp-8));
}

.strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-slide 40s linear infinite;
}

.strip.is-driven .strip__track {
  animation: none;
}

.strip__group {
  display: flex;
  flex: none;
}

.strip__word {
  padding-inline: clamp(1rem, 3vw, 3rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-strip);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--mineral-rgb) / 0.5);
}

.strip__word--solid {
  color: var(--mineral);
  -webkit-text-stroke: 0;
}

/* --------------------------------------------------------------------------
   Play button and lightbox
   -------------------------------------------------------------------------- */

.play {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  color: var(--fg);
  text-align: left;
}

.play__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  transition: border-color var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease);
}

.play__ring .icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  margin-inline-start: 2px;
}

.play__ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.45);
  opacity: 0;
  transition: opacity var(--t-micro) var(--ease),
    transform var(--t-micro) var(--ease);
  transform: scale(0.9);
}

.play:hover .play__ring {
  border-color: var(--sandalwood);
  background: var(--sandalwood);
  color: var(--stillwater);
}

.play:hover .play__ring::after {
  opacity: 1;
  transform: scale(1);
}

.play__label {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.play__label b {
  font-weight: 600;
  font-size: 0.9375rem;
}

.play__label span {
  font-size: 0.9375rem;
  color: var(--muted);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgb(var(--ink-rgb) / 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-micro) var(--ease),
    visibility var(--t-micro) var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__frame {
  position: relative;
  width: min(100%, 1000px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}

.lightbox__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__close {
  position: absolute;
  top: calc(var(--gutter) / 2);
  right: calc(var(--gutter) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(var(--mineral-rgb) / 0.14);
  color: var(--mineral);
}

.lightbox__close .icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* --------------------------------------------------------------------------
   Facade — a styled frame that loads a third-party embed only on request
   -------------------------------------------------------------------------- */

.facade {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  min-height: 280px;
  padding: var(--sp-5);
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: linear-gradient(
      180deg,
      rgb(var(--stillwater-rgb) / 0.05),
      rgb(var(--sandalwood-rgb) / 0.07)
    ),
    var(--paper);
  overflow: hidden;
}

.facade__note {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 40ch;
}

.facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.field__label .req {
  color: var(--sandalwood);
}

.field__control {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  /* 16px minimum, so iOS does not zoom the viewport on focus. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--mineral);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: border-color var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease);
  appearance: none;
}

.field__control:hover {
  border-color: var(--rule-strong);
}

.field__control:focus {
  border-color: var(--sandalwood);
  background: var(--paper);
}

textarea.field__control {
  min-height: 150px;
  resize: vertical;
}

select.field__control {
  background-image: linear-gradient(45deg, transparent 50%, var(--stillwater) 50%),
    linear-gradient(135deg, var(--stillwater) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - 1rem) 1.35rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.75rem;
}

.field--error .field__control {
  border-color: #a4462f;
  background: rgb(164 70 47 / 0.05);
}

.field__error {
  font-size: 0.9375rem;
  color: #a4462f;
}

.field__hint {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Honeypot: off-screen, never focusable, never announced. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form__consent {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-small);
}

.alert .icon {
  margin-block-start: 0.15rem;
  flex: none;
}

.alert--success {
  background: rgb(var(--stillwater-rgb) / 0.06);
  border-color: rgb(var(--stillwater-rgb) / 0.25);
  color: var(--stillwater);
}

.alert--error {
  background: rgb(164 70 47 / 0.07);
  border-color: rgb(164 70 47 / 0.3);
  color: #8c3b28;
}

/* --------------------------------------------------------------------------
   Accordion — <details>/<summary>, height animated by GSAP when available
   -------------------------------------------------------------------------- */

.accordion {
  display: grid;
  gap: var(--sp-2);
}

.faq {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}

.faq[open] {
  border-color: rgb(var(--sandalwood-rgb) / 0.45);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 500;
  font-size: 1.0625rem;
  list-style: none;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary:hover {
  color: var(--stillwater);
}

.faq__sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: var(--sandalwood);
  transition: transform var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease);
}

.faq__sign .icon {
  width: 1rem;
  height: 1rem;
}

.faq[open] .faq__sign {
  transform: rotate(45deg);
  border-color: var(--sandalwood);
  background: rgb(var(--sandalwood-rgb) / 0.12);
}

.faq__panel {
  overflow: hidden;
}

.faq__inner {
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-small);
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Scroll-snap carousel — the mobile pattern for offerings
   -------------------------------------------------------------------------- */

.snap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block-end: var(--sp-3);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}

.snap::-webkit-scrollbar {
  display: none;
}

.snap > * {
  scroll-snap-align: start;
}

.snap-progress {
  height: 3px;
  border-radius: var(--r-pill);
  background: rgb(var(--ink-rgb) / 0.12);
  overflow: hidden;
  margin-block-start: var(--sp-3);
}

/* Full width, then scaled down to the visible fraction and translated across.
   Sized entirely by transform so the browser only ever composites it. */
.snap-progress__bar {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--sandalwood);
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 0.15s linear;
}

/* --------------------------------------------------------------------------
   Swiper

   Baseline first: the same markup is a native scroll-snap carousel with no
   JavaScript and no Swiper CSS at all, so a blocked CDN degrades to something
   that still works with a thumb. When Swiper initialises it adds .is-swiper,
   which hands control over.
   -------------------------------------------------------------------------- */

.swiper {
  width: 100%;
}

/* --- Baseline: native scroll-snap, no library required -------------------- */

.swiper-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--sp-3);
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block-end: var(--sp-2);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}

.swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-slide {
  height: auto;
  scroll-snap-align: start;
}

/* Dots and arrows drive nothing until Swiper is actually running. */
.swiper-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-5);
}

.swiper-clip {
  overflow: visible;
}

/* --- Enhanced: carousels.js adds .is-swiper to the [data-carousel] root --- */

[data-carousel].is-swiper .swiper {
  overflow: visible;
}

[data-carousel].is-swiper .swiper-wrapper {
  display: flex;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}

[data-carousel].is-swiper .swiper-slide {
  scroll-snap-align: none;
}

[data-carousel].is-swiper .swiper-clip {
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

[data-carousel].is-swiper .swiper-controls {
  display: flex;
}

.swiper-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.swiper-dots .swiper-pagination-bullet {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  background: none;
  opacity: 1;
  border-radius: 50%;
  cursor: pointer;
}

.swiper-dots .swiper-pagination-bullet::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.25);
  transition: background-color var(--t-micro) var(--ease),
    transform var(--t-micro) var(--ease);
}

.swiper-dots .swiper-pagination-bullet-active::before {
  background: var(--sandalwood);
  transform: scale(1.5);
}

.on-dark .swiper-dots .swiper-pagination-bullet::before {
  background: rgb(var(--mineral-rgb) / 0.3);
}

.swiper-nav {
  display: none;
  align-items: center;
  gap: var(--sp-2);
}

.swiper-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: var(--stillwater);
  transition: background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
    opacity var(--t-micro) var(--ease);
}

.swiper-nav__btn:hover {
  background: var(--stillwater);
  border-color: var(--stillwater);
  color: var(--mineral);
}

.swiper-nav__btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.swiper-nav__btn--prev .icon {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Custom cursor — created by JS only where a fine pointer exists
   -------------------------------------------------------------------------- */

/* No mix-blend-mode here on purpose: `difference` forces the whole page into
   one compositing layer and re-blends it on every pointer move, which showed
   up as scroll and hover stutter. Sandalwood reads clearly on both the light
   page and the dark bands, so the blend was not buying anything. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--sandalwood);
  box-shadow: 0 0 0 1px rgb(var(--paper-rgb) / 0.5);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Page transition veil
   -------------------------------------------------------------------------- */

.veil {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 5);
  background: var(--stillwater);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}