/* Quiet Luxury editorial motion for the cooperation, benefits and process sections. */
:root {
  --ql-gold-deep: #8e7138;
  --ql-gold: #b89a5f;
  --ql-gold-light: #ead6a8;
  --ql-ivory: #fffdf8;
}

.intro,
.benefits,
.process {
  isolation: isolate;
}

.intro::after,
.benefits::after,
.process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.intro-statement,
.benefit-card,
.process-step {
  --ql-rx: 0deg;
  --ql-ry: 0deg;
  --ql-x: 50%;
  --ql-y: 50%;
  --ql-shadow-x: 0px;
  --ql-shadow-y: 20px;
  --ql-base-y: 0px;
  contain: paint;
  transform: perspective(1050px) rotateX(var(--ql-rx)) rotateY(var(--ql-ry));
  translate: 0 var(--ql-base-y);
  transform-style: preserve-3d;
  will-change: transform, translate, box-shadow;
  transition:
    transform 440ms cubic-bezier(.2,.78,.2,1),
    translate 440ms cubic-bezier(.2,.78,.2,1),
    scale 440ms cubic-bezier(.2,.78,.2,1),
    border-color 360ms ease,
    box-shadow 440ms cubic-bezier(.2,.78,.2,1),
    background-color 360ms ease;
}

.intro-statement:nth-child(2) { --ql-base-y: .35rem; }
.intro-statement:nth-child(3) { --ql-base-y: .7rem; }

.intro-statement::after,
.benefit-card .quiet-frame-glint,
.process-step .quiet-frame-glint {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 20%, rgba(255,250,230,.72) 45%, var(--ql-gold-light) 50%, transparent 56%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transform: translateX(-55%);
  transition: opacity 240ms ease, transform 760ms cubic-bezier(.18,.78,.2,1);
}

.quiet-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--ql-x) var(--ql-y), rgba(255,244,211,.36) 0, rgba(218,186,119,.12) 18%, transparent 44%);
  transition: opacity 320ms ease;
}

.intro-statement > :not(.quiet-light),
.benefit-card > :not(.quiet-light):not(.quiet-frame-glint),
.process-step > :not(.quiet-light):not(.quiet-frame-glint) {
  position: relative;
  z-index: 2;
  transform: translateZ(18px);
  transition: transform 440ms cubic-bezier(.2,.78,.2,1);
}

.intro-statement .intro-number,
.process-step > span {
  transform: translateZ(42px);
}

.benefit-card .benefit-icon,
.process-step .step-icon {
  transform: translateZ(34px);
  color: #a68448;
  filter: drop-shadow(0 4px 9px rgba(126,96,43,.2));
}

.intro-statement {
  border-color: rgba(158,126,61,.42);
  background-color: rgba(255,253,248,.68);
  background-image: linear-gradient(135deg, rgba(255,255,255,.68), rgba(236,224,200,.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 32px rgba(255,255,255,.32),
    0 22px 54px rgba(60,44,18,.09);
  backdrop-filter: blur(12px) saturate(1.08);
}

.intro-statement h3,
.intro-statement-featured h3 {
  position: absolute !important;
  right: clamp(1.2rem, 2vw, 1.85rem);
  bottom: clamp(1.35rem, 2vw, 1.8rem);
  left: clamp(1.2rem, 2vw, 1.85rem);
  min-height: 0;
}

.benefit-card,
.process-step {
  border-color: rgba(160,128,65,.38);
  background-color: rgba(255,253,248,.7);
  background-image: linear-gradient(142deg, rgba(255,255,255,.62), rgba(229,214,185,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 28px rgba(255,255,255,.28),
    0 18px 48px rgba(67,49,20,.07);
  backdrop-filter: blur(14px) saturate(1.08);
}

.intro-statement.is-quiet-active,
.benefit-card.is-quiet-active,
.process-step.is-quiet-active {
  translate: 0 calc(var(--ql-base-y) - 8px);
  scale: 1.018;
  border-color: rgba(190,151,76,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 0 34px rgba(255,255,255,.38),
    var(--ql-shadow-x) var(--ql-shadow-y) 58px rgba(68,48,15,.16);
}

.is-quiet-active .quiet-light { opacity: 1; }
.intro-statement.is-quiet-active::after,
.is-quiet-active > .quiet-frame-glint {
  opacity: .9;
  transform: translateX(52%);
}

.intro-statement.is-quiet-active .intro-number,
.process-step.is-quiet-active > span {
  transform: translateZ(54px) translate3d(calc((var(--ql-x) - 50%) * .035), calc((var(--ql-y) - 50%) * .035), 0);
}

.benefit-card.is-quiet-active .benefit-icon,
.process-step.is-quiet-active .step-icon {
  filter: drop-shadow(0 7px 12px rgba(126,96,43,.3));
}

.intro-statement.quiet-enter,
.benefit-card.quiet-enter,
.process-step.quiet-enter {
  opacity: 0;
  translate: 0 calc(var(--ql-base-y) + 24px);
  scale: .975;
}

.intro-statement.quiet-enter.quiet-visible,
.benefit-card.quiet-enter.quiet-visible,
.process-step.quiet-enter.quiet-visible {
  opacity: 1;
  translate: 0 var(--ql-base-y);
  scale: 1;
}

.benefit-card.quiet-visible,
.process-step.quiet-visible,
.intro-statement.quiet-visible {
  transition-delay: var(--ql-delay, 0ms);
}

.process-path {
  --process-progress: 0;
}

.process-step::before {
  border-color: rgba(151,116,50,.72);
  transition: background-color 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
}

.process-step::after {
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--ql-gold-deep), var(--ql-gold-light));
  transition: transform 720ms cubic-bezier(.2,.75,.2,1);
}

.process-step.process-active::before {
  border-color: var(--ql-gold-light);
  background: var(--ql-gold);
  box-shadow: 0 0 0 .42rem rgba(255,253,248,.78), 0 0 20px rgba(188,151,77,.5);
}

.process-step.process-active::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .intro-statement:hover,
  .benefit-card:hover,
  .process-step:hover {
    translate: 0 calc(var(--ql-base-y) - 8px);
    scale: 1.018;
  }
}

@media (max-width: 720px) {
  .intro,
  .benefits,
  .process {
    padding-top: 2.6rem;
    padding-bottom: 2.8rem;
  }

  .intro-message h2,
  .benefits .section-heading h2,
  .process-top h2 {
    font-size: clamp(1.9rem, 8.6vw, 2.55rem);
    line-height: 1.02;
    text-wrap: balance;
  }

  .intro-inner { gap: 1.3rem; }
  .intro-statements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .intro-statement-featured {
    grid-column: 1 / -1;
  }

  .intro-statement,
  .intro-statement-featured {
    --ql-base-y: 0px;
    min-height: 7.6rem;
    padding: .85rem .78rem;
    border-radius: .45rem;
  }

  .intro-statement h3,
  .intro-statement-featured h3 {
    right: .78rem;
    bottom: .82rem;
    left: .78rem;
    max-width: 14ch;
    min-height: 0;
    font-size: clamp(1.03rem, 4.6vw, 1.28rem);
    line-height: 1.08;
  }

  .intro-statement-featured {
    min-height: 6.6rem;
  }

  .intro-statement-featured h3 {
    max-width: none;
    padding-right: 3rem;
  }

  .intro-statement h3 span {
    margin-bottom: .35rem;
    font-size: clamp(.65rem, 2.7vw, .72rem);
  }

  .intro-number {
    right: .45rem;
    bottom: .05rem;
    font-size: clamp(3rem, 14vw, 4rem);
  }

  .intro-service-line {
    margin-top: .25rem;
    font-size: .9rem;
    line-height: 1.48;
  }

  .benefit-grid,
  .steps {
    gap: .55rem;
  }

  .benefit-card,
  .steps li {
    padding: .82rem .72rem .88rem;
    border-radius: .4rem;
    backdrop-filter: blur(8px);
  }

  .benefit-icon,
  .step-icon {
    width: 1.55rem;
    height: 1.55rem;
    margin-bottom: .48rem;
  }

  .benefit-card strong {
    margin-bottom: .4rem;
    font-size: clamp(.98rem, 4.3vw, 1.16rem);
  }

  .benefit-card h3,
  .process-step h3 {
    margin-bottom: .35rem;
    font-size: clamp(.79rem, 3.4vw, .9rem);
    line-height: 1.18;
  }

  .benefit-card p,
  .process-step p {
    font-size: clamp(.76rem, 3.18vw, .84rem);
    line-height: 1.38;
  }

  .benefit-closing { margin-top: 1.25rem; padding-top: 1rem; }
  .benefit-main { font-size: clamp(1.35rem, 6.7vw, 1.8rem); }

  .process-top { margin-bottom: .85rem; }
  .process-top p { margin-top: .55rem; font-size: .88rem; line-height: 1.42; }
  .process-note { margin-bottom: 1rem; padding-top: .65rem; }
  .process-note p { font-size: clamp(1.12rem, 5.4vw, 1.42rem); }
  .process-path { padding-left: 0; }
  .process-path::before { display: none; }

  .steps li {
    min-height: 10.8rem;
  }

  .steps li::before {
    display: block;
    top: .78rem;
    right: .68rem;
    left: auto;
    width: .5rem;
    height: .5rem;
    box-shadow: 0 0 0 .22rem rgba(255,253,248,.72);
  }

  .process-step::after {
    top: 1.03rem;
    left: calc(100% - .2rem);
    width: .55rem;
  }

  .process-step:nth-child(n)::before { display: block; }
  .process-step:nth-child(odd)::after { display: block; }
  .process-step:nth-child(even)::after { display: none; }

  .steps span {
    margin-bottom: .3rem;
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .process-summary { margin-top: 1.2rem; padding: .9rem 0; }
  .process-summary p { font-size: clamp(1.2rem, 6vw, 1.65rem); }

  .intro-statement.is-quiet-active,
  .benefit-card.is-quiet-active,
  .process-step.is-quiet-active {
    translate: 0 -3px;
    scale: 1.012;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-statement,
  .benefit-card,
  .process-step,
  .intro-statement > *,
  .benefit-card > *,
  .process-step > *,
  .quiet-frame-glint,
  .quiet-light {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
  }

  .intro-statement,
  .benefit-card,
  .process-step { opacity: 1 !important; }
  .process-step::after { transform: scaleX(1); }
}