:root {
  --sig-gold: #b58b4b;
  --sig-ink: #0c0d0c;
  --sig-paper: #f3f2ee;
  --sig-ease: cubic-bezier(.18, .78, .22, 1);
}

body.sooye-signature-v5 {
  --sig-focus-x: 74%;
  --sig-focus-y: 72%;
  --sig-hero-progress: 0;
}

.sooye-signature-v5 .syv3-hero {
  isolation: isolate;
}

.sooye-signature-v5 .syv3-hero picture {
  overflow: hidden;
}

.sooye-signature-v5 .syv3-hero-media {
  backface-visibility: hidden;
  translate: 0 var(--sig-scroll-y, 0);
  transform-origin: var(--sig-focus-x) var(--sig-focus-y);
}

.sooye-signature-v5 .syv3-signature-focus {
  background:
    radial-gradient(ellipse 24% 19% at var(--sig-focus-x) var(--sig-focus-y), rgba(255, 255, 255, .1), rgba(181, 139, 75, .035) 38%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(105deg, rgba(5, 6, 5, .05), rgba(5, 6, 5, 0) 54%);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 920ms var(--sig-ease);
  z-index: 2;
}

.sooye-signature-v5.is-sig-hero-focused .syv3-signature-focus {
  opacity: 1;
}

.sooye-signature-v5.sooye-sig-js .syv3-hero-media {
  filter: grayscale(.08) contrast(1.04) brightness(.82) blur(2px);
  transition: filter 1120ms var(--sig-ease);
}

.sooye-signature-v5.sooye-sig-js.is-sig-hero-focused .syv3-hero-media {
  filter: grayscale(.025) contrast(1.12) brightness(1.015) blur(0);
}

.sooye-signature-v5 .syv3-hero-shade {
  transition: background 980ms var(--sig-ease), opacity 680ms ease;
}

.sooye-signature-v5.is-sig-hero-focused .syv3-hero-shade {
  background: linear-gradient(90deg, rgba(7, 8, 7, .7) 0%, rgba(7, 8, 7, .54) 38%, rgba(7, 8, 7, .2) 58%, rgba(7, 8, 7, .03) 78%, rgba(7, 8, 7, .08) 100%);
}

.sooye-signature-v5 .syv3-hero h1 > span {
  display: block;
}

.sooye-signature-v5.sooye-sig-js .syv3-hero-inner > .syv3-eyebrow,
.sooye-signature-v5.sooye-sig-js .syv3-hero-inner > h1 > span,
.sooye-signature-v5.sooye-sig-js .syv3-hero-inner > .syv3-hero-copy,
.sooye-signature-v5.sooye-sig-js .syv3-hero-inner > .syv3-actions,
.sooye-signature-v5.sooye-sig-js .syv3-hero-inner > .syv3-hero-facts {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  translate: 0 24px;
}

.sooye-signature-v5.sooye-sig-js.is-sig-copy-ready .syv3-hero-inner > .syv3-eyebrow,
.sooye-signature-v5.sooye-sig-js.is-sig-copy-ready .syv3-hero-inner > h1 > span,
.sooye-signature-v5.sooye-sig-js.is-sig-copy-ready .syv3-hero-inner > .syv3-hero-copy,
.sooye-signature-v5.sooye-sig-js.is-sig-copy-ready .syv3-hero-inner > .syv3-actions,
.sooye-signature-v5.sooye-sig-js.is-sig-copy-ready .syv3-hero-inner > .syv3-hero-facts {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  translate: 0 0;
  transition: clip-path 760ms var(--sig-ease) var(--sig-delay, 0ms), opacity 440ms ease var(--sig-delay, 0ms), translate 760ms var(--sig-ease) var(--sig-delay, 0ms);
}

.sooye-signature-v5 .syv3-hero-inner > .syv3-eyebrow { --sig-delay: 80ms; }
.sooye-signature-v5 .syv3-hero-inner > h1 > span:first-child { --sig-delay: 150ms; }
.sooye-signature-v5 .syv3-hero-inner > h1 > span:last-child { --sig-delay: 240ms; }
.sooye-signature-v5 .syv3-hero-inner > .syv3-hero-copy { --sig-delay: 340ms; }
.sooye-signature-v5 .syv3-hero-inner > .syv3-actions { --sig-delay: 430ms; }
.sooye-signature-v5 .syv3-hero-inner > .syv3-hero-facts { --sig-delay: 520ms; }

.sooye-signature-v5 .sooye-sig-chapter {
  isolation: isolate;
  position: relative;
}

.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter > .syv3-wrap > .syv3-heading-row,
.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter .syv3-visual-intro,
.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter .syv3-trust-intro,
.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter .syv3-faq-layout > div:first-child {
  clip-path: inset(0 0 28% 0);
  opacity: .3;
  translate: 0 44px;
  transition: clip-path 920ms var(--sig-ease), opacity 620ms ease, translate 920ms var(--sig-ease);
}

.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter.is-sig-current > .syv3-wrap > .syv3-heading-row,
.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter.is-sig-current .syv3-visual-intro,
.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter.is-sig-current .syv3-trust-intro,
.sooye-signature-v5.sooye-sig-js .sooye-sig-chapter.is-sig-current .syv3-faq-layout > div:first-child {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  translate: 0 0;
}

.sooye-signature-v5 .syv3-family-grid {
  perspective: 1400px;
}

.sooye-signature-v5 .syv3-family-card {
  --sig-card-delay: 0ms;
  overflow: hidden;
  scale: .965;
  translate: 0 54px;
  transition: scale 540ms var(--sig-ease), translate 760ms var(--sig-ease) var(--sig-card-delay), opacity 520ms ease var(--sig-card-delay), filter 260ms ease, background-color 260ms ease;
}

.sooye-signature-v5.sooye-sig-js .syv3-family-card {
  opacity: 0;
}

.sooye-signature-v5 .syv3-family-card::after {
  background: linear-gradient(112deg, transparent 20%, rgba(181, 139, 75, .16) 49%, transparent 72%);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  translate: -80% 0;
  transition: opacity 260ms ease, translate 680ms var(--sig-ease);
  z-index: 0;
}

.sooye-signature-v5 .is-sig-current .syv3-family-card {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

.sooye-signature-v5 .syv3-family-card.is-sig-active {
  background: #fbfaf6;
  scale: 1.022;
  z-index: 3;
}

.sooye-signature-v5 .syv3-family-card.is-sig-active::after {
  opacity: 1;
  translate: 80% 0;
}

.sooye-signature-v5 .syv3-family-grid.is-sig-engaged .syv3-family-card:not(.is-sig-active) {
  filter: saturate(.72);
  opacity: .48;
  scale: .985;
}

.sooye-signature-v5 .syv3-visual-grid figure {
  clip-path: inset(8% 8% 8% 8%);
  transition: clip-path 980ms var(--sig-ease), filter 680ms ease;
}

.sooye-signature-v5 .syv3-visual.is-sig-current .syv3-visual-grid figure {
  clip-path: inset(0 0 0 0);
}

.sooye-signature-v5 .syv3-visual-grid figure:nth-child(2) { transition-delay: 110ms; }
.sooye-signature-v5 .syv3-visual-grid figure:nth-child(3) { transition-delay: 200ms; }

.sooye-signature-v5 .syv3-bridge > img {
  scale: 1.035;
  transition: scale 1200ms var(--sig-ease), filter 720ms ease;
}

.sooye-signature-v5 .syv3-bridge.is-sig-current > img {
  scale: 1;
}

.sooye-signature-v5 .syv3-trust-steps li {
  transition: background-color 260ms ease, padding-left 520ms var(--sig-ease), opacity 260ms ease;
}

.sooye-signature-v5 .syv3-trust-steps li:hover,
.sooye-signature-v5 .syv3-trust-steps li:focus-within {
  background: rgba(255, 255, 255, .035);
  padding-left: 18px;
}

.sooye-signature-v5 .syv3-rfq {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  transition: background-color 520ms ease, box-shadow 760ms var(--sig-ease), translate 760ms var(--sig-ease);
}

.sooye-signature-v5 .syv3-rfq::before {
  background: linear-gradient(120deg, rgba(181, 139, 75, 0), rgba(181, 139, 75, .16), rgba(181, 139, 75, 0));
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  translate: -100% 0;
  transition: opacity 320ms ease, translate 1100ms var(--sig-ease);
}

.sooye-signature-v5 .sooye-sig-rfq-ready .syv3-rfq {
  box-shadow: 0 28px 80px rgba(10, 12, 10, .12);
  translate: 0 -12px;
}

.sooye-signature-v5 .sooye-sig-rfq-ready .syv3-rfq::before {
  opacity: 1;
  translate: 100% 0;
}

.sooye-signature-v5 .sooye-sig-rfq-ready .syv3-rfq > * {
  position: relative;
  z-index: 1;
}

.sooye-signature-v5.sooye-m4-quick-open .syv3 > section,
.sooye-signature-v5.sooye-m4-quick-open .syv3 > footer {
  filter: saturate(.78) brightness(.82);
  transition: filter 360ms ease;
}

.sooye-sig-status {
  align-items: center;
  color: rgba(255, 255, 255, .68);
  display: grid;
  font: 700 9px/1 Arial, Helvetica, sans-serif;
  gap: 9px;
  grid-template-columns: auto 46px auto;
  pointer-events: none;
  position: fixed;
  right: 84px;
  text-transform: uppercase;
  top: 50%;
  translate: 0 -50%;
  z-index: 85;
}

.sooye-sig-status > i {
  background: rgba(255, 255, 255, .24);
  display: block;
  height: 1px;
  overflow: hidden;
  position: relative;
}

.sooye-sig-status > i > b {
  background: var(--sig-gold);
  inset: 0 auto 0 0;
  position: absolute;
  scale: var(--sig-progress, .16) 1;
  transform-origin: left center;
  transition: scale 520ms var(--sig-ease);
  width: 100%;
}

.sooye-sig-status > strong {
  color: rgba(255, 255, 255, .78);
  font: inherit;
  grid-column: 1 / -1;
  justify-self: end;
}

body.sooye-signature-v5:not(.sooye-sig-dark-chapter) .sooye-sig-status {
  color: rgba(12, 13, 12, .56);
}

body.sooye-signature-v5:not(.sooye-sig-dark-chapter) .sooye-sig-status > i {
  background: rgba(12, 13, 12, .16);
}

body.sooye-signature-v5:not(.sooye-sig-dark-chapter) .sooye-sig-status > strong {
  color: rgba(12, 13, 12, .7);
}

.sooye-signature-v5 .syv3 a:focus-visible,
.sooye-signature-v5 .syv3 button:focus-visible {
  outline: 2px solid var(--sig-gold);
  outline-offset: 4px;
}

@supports (animation-timeline: view()) {
  .sooye-signature-v5:not(.sooye-sig-reduced) .syv3-visual-grid figure {
    animation: sooyeSigImageReveal both linear;
    animation-range: entry 4% cover 38%;
    animation-timeline: view();
  }

  .sooye-signature-v5:not(.sooye-sig-reduced) .syv3-bridge > img {
    animation: sooyeSigBridgeSettle both linear;
    animation-range: entry 0% cover 42%;
    animation-timeline: view();
  }
}

@keyframes sooyeSigImageReveal {
  from { clip-path: inset(12% 10% 12% 10%); filter: brightness(.76) saturate(.72); }
  to { clip-path: inset(0 0 0 0); filter: brightness(1) saturate(1); }
}

@keyframes sooyeSigBridgeSettle {
  from { scale: 1.055; filter: brightness(.78); }
  to { scale: 1; filter: brightness(1); }
}

@media (max-width: 1180px) {
  .sooye-sig-status { display: none; }
}

@media (max-width: 680px) {
  body.sooye-signature-v5 {
    --sig-focus-x: 56%;
    --sig-focus-y: 50%;
  }

  .sooye-signature-v5 .syv3-hero {
    display: block;
    min-height: 0;
  }

  .sooye-signature-v5 .syv3-hero picture {
    bottom: auto;
    display: block;
    height: 58svh;
    max-height: 570px;
    min-height: 460px;
    position: relative;
    top: 0;
  }

  .sooye-signature-v5 .syv3-hero-media {
    height: 145%;
    position: absolute;
    top: -45%;
  }

  .sooye-signature-v5 .syv3-hero-shade,
  .sooye-signature-v5 .syv3-signature-focus {
    bottom: auto;
    height: 58svh;
    max-height: 570px;
    min-height: 460px;
  }

  .sooye-signature-v5 .syv3-signature-focus {
    background: radial-gradient(ellipse 58% 18% at var(--sig-focus-x) var(--sig-focus-y), rgba(255, 255, 255, .1), rgba(181, 139, 75, .03) 38%, rgba(0, 0, 0, 0) 74%);
  }

  .sooye-signature-v5.is-sig-hero-focused .syv3-hero-shade {
    background: linear-gradient(180deg, rgba(7, 8, 7, .36) 0%, rgba(7, 8, 7, .3) 30%, rgba(7, 8, 7, .68) 62%, rgba(7, 8, 7, .93) 100%);
  }

  .sooye-signature-v5 .syv3-hero-inner {
    background: #0b0c0b;
    padding-bottom: 30px;
    padding-top: 34px;
  }

  .sooye-signature-v5 .syv3-hero h1 {
    font-size: 34px;
    line-height: 1.04;
  }

  .sooye-signature-v5 .syv3-family-card,
  .sooye-signature-v5 .syv3-family-card.is-sig-active,
  .sooye-signature-v5 .syv3-family-grid.is-sig-engaged .syv3-family-card:not(.is-sig-active) {
    filter: none;
    opacity: 1;
    scale: 1;
  }

  .sooye-signature-v5 .syv3-family-card:active {
    background: #f7f4ec;
    scale: .985;
  }

  .sooye-signature-v5 .syv3-rfq,
  .sooye-signature-v5 .sooye-sig-rfq-ready .syv3-rfq {
    box-shadow: none;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sooye-signature-v5 *,
  .sooye-signature-v5 *::before,
  .sooye-signature-v5 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .sooye-signature-v5 .syv3-hero-media {
    filter: grayscale(.025) contrast(1.1) brightness(1.01) !important;
  }

  .sooye-signature-v5 .syv3-hero-inner > *,
  .sooye-signature-v5 .syv3-hero-inner > h1 > span,
  .sooye-signature-v5 .sooye-sig-chapter *,
  .sooye-signature-v5 .syv3-family-card {
    clip-path: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
  }
}
