/* ============================================================
   SWAY — Component styles (moved out of inline <head>/<footer>)
   Cached by the browser/CDN instead of re-sent on every page.
   Visual output is identical to the previous inline CSS.
============================================================ */

html, body { overflow-x: clip; }
:root {
  --text-color-primary: #F0EADE;
  --text-color-light: #FDFDFD;
}

/* ---------- Arrow swap (buttons) ---------- */
.arrow-swap-global .elementor-button-icon {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
}
.arrow-swap-global .elementor-button-icon svg,
.arrow-swap-global .elementor-button-icon img {
  transition: transform 0.45s cubic-bezier(0.6, 0.01, 0, 1);
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.arrow-swap-global .elementor-button-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--btn-svg);
          mask-image: var(--btn-svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transform: translate(-105%, 105%);
  transition: transform 0.45s cubic-bezier(0.6, 0.01, 0, 1);
}
.arrow-swap-global:hover .elementor-button-icon svg,
.arrow-swap-global:hover .elementor-button-icon img,
.arrow-swap-global:focus-visible .elementor-button-icon svg,
.arrow-swap-global:focus-visible .elementor-button-icon img { transform: translate(105%, -105%); }
.arrow-swap-global:hover .elementor-button-icon::after,
.arrow-swap-global:focus-visible .elementor-button-icon::after { transform: translate(0, 0); }

/* ---------- Vaxel card swap ---------- */
.vaxel-card-swap .elementor-icon,
.vaxel-card-swap .elementor-button-icon {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
}
.vaxel-card-swap .elementor-icon svg,
.vaxel-card-swap .elementor-button-icon svg {
  transition: transform 0.5s cubic-bezier(0.6, 0.01, 0, 1) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
}
.vaxel-card-swap .vaxel-original { transform: translate(0, 0); }
.vaxel-card-swap .vaxel-clone {
  position: absolute !important;
  top: 0;
  left: 0;
  transform: translate(-120%, 120%);
}
.vaxel-card-swap:hover .vaxel-original,
.vaxel-card-swap:focus-within .vaxel-original { transform: translate(120%, -120%) !important; }
.vaxel-card-swap:hover .vaxel-clone,
.vaxel-card-swap:focus-within .vaxel-clone { transform: translate(0, 0) !important; }
.vaxel-card-swap { cursor: pointer !important; }

/* ---------- SECTION 1: CONFIGURATIONS (horizontal track) ---------- */
.cbs-section { position: relative; width: 100%; margin: 0; padding: 0; }
.cbs-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; }
.cbs-top-spacer { height: 45px; width: 100%; flex-shrink: 0; display: block; }
.cbs-header-block { width: min(80rem, calc(100vw - 9.25rem)); margin: 0 auto 4vh auto; padding: 0; box-sizing: border-box; pointer-events: none; font-family: 'Cormorant Garamond', serif; text-align: left; flex-shrink: 0; }
.cbs-heading { font-weight: 500; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.1; color: #2E2323; margin: 0 0 8px 0; letter-spacing: -0.01em; }
.cbs-subheading { font-family: 'Inter', sans-serif; font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: 400; color: #66605C; margin: 0; }
.cbs-track-container { width: min(80rem, calc(100vw - 9.25rem)); margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1; }
.cbs-track-wrap { position: relative; width: 100%; display: flex; align-items: flex-start; flex-grow: 1; }
.cbs-track { display: flex; gap: clamp(12px, 2.5vw, 20px); padding-left: 0; padding-right: 4vw; will-change: transform; align-items: flex-start; }
.cbs-card { flex: 0 0 auto; display: flex; flex-direction: column; width: clamp(260px, 21vw, 320px); }
.cbs-img { width: 100%; background-color: #ddd; background-size: cover; background-position: center; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.04); margin-bottom: 16px; }
.cbs-card:nth-child(1) .cbs-img, .cbs-card:nth-child(3) .cbs-img, .cbs-card:nth-child(5) .cbs-img, .cbs-card:nth-child(7) .cbs-img { aspect-ratio: 3.5 / 4.5; }
.cbs-card:nth-child(2) .cbs-img, .cbs-card:nth-child(4) .cbs-img, .cbs-card:nth-child(6) .cbs-img { aspect-ratio: 1 / 1; }
.cbs-card-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.25rem, 1.6vw, 1.55rem); font-weight: 500; color: #2E2323; margin: 0 0 6px 0; line-height: 1.2; transition: color 0.3s ease; }
.cbs-card-desc { font-family: 'Inter', sans-serif; font-size: clamp(0.8rem, 0.95vw, 0.9rem); line-height: 1.45; color: #66605C; margin: 0; padding-bottom: 35px; }
.cbs-card-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; }
.cbs-card-link:hover .cbs-card-title,
.cbs-card-link:focus-visible .cbs-card-title { color: #D4AF37; }

@media (max-width: 1024px) {
  .cbs-section { height: auto !important; padding-bottom: 30px; }
  .cbs-sticky { position: relative !important; height: auto !important; overflow: visible !important; }
  .cbs-top-spacer { height: 50px; }
  .cbs-header-block, .cbs-track-container { width: min(60rem, calc(100vw - 4rem)); }
  .cbs-header-block { margin-bottom: 24px; }
  .cbs-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: calc(-1 * (100vw - min(60rem, calc(100vw - 4rem))) / 2); padding-right: calc((100vw - min(60rem, calc(100vw - 4rem))) / 2); }
  .cbs-track-wrap::-webkit-scrollbar { display: none; }
  .cbs-track { padding-left: 0; padding-right: 40px; transform: none !important; will-change: auto; }
  .cbs-card { width: 240px; }
  .cbs-card-desc { padding-bottom: 15px; }
}
@media (max-width: 768px) {
  .cbs-top-spacer { height: 65px; }
  .cbs-header-block, .cbs-track-container { width: min(100%, calc(100vw - 3rem)); }
  .cbs-header-block { margin-bottom: 20px; }
  .cbs-track-wrap { margin-right: calc(-1 * (100vw - min(100%, calc(100vw - 3rem))) / 2); padding-right: calc((100vw - min(100%, calc(100vw - 3rem))) / 2); }
  .cbs-card { width: 210px; }
  .cbs-img { margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .cbs-header-block { margin-bottom: 16px; }
  .cbs-card { width: 185px; }
}

/* ---------- SECTION 2: CARE OVER CAPABILITY (vertical sticky track) ---------- */
.vsc-main-wrapper { position: relative; width: 100%; margin: 0; padding: 0; background-color: #0c0c0a; }
.vsc-video-container { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* Simpler + cheaper than min-width/translate centering; same visual result */
.vsc-video-element { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsc-video-overlay { position: absolute; inset: 0; background-color: #00000066; z-index: 2; }
.vsc-sticky-viewport { position: relative; z-index: 3; width: 100%; }
.vsc-content-layout { display: flex; width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; padding: 0 5vw; }
.vsc-left-col { display: flex; flex-direction: column; font-family: 'Cormorant Garamond', serif; color: var(--text-color-light); text-align: left; box-sizing: border-box; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.vsc-tagline { font-family: 'Inter', sans-serif; font-size: clamp(0.85rem, 1.2vw, 1.1rem); letter-spacing: 0.05em; color: #F0EADE; margin-bottom: 12px; opacity: 0.9; }
.vsc-main-title { font-weight: 500; font-size: clamp(2.5rem, 4.8vw, 4.4rem); line-height: 1.15; margin: 0; letter-spacing: -0.01em; color: #F0EADE; }
.vsc-right-col { position: relative; overflow: hidden; box-sizing: border-box; }
.vsc-card-track { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.custom-blur-container { background-color: rgba(218, 213, 202, 0.4) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 8px !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important; padding: 20px !important; box-sizing: border-box; }
.vsc-card-split-layout { display: flex; align-items: flex-start; gap: 20px; width: 100%; }
.vsc-icon-column { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding-top: 2px; }
.vsc-card-arrow { width: 24px !important; height: 24px !important; object-fit: contain; }
.vsc-text-column { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.vsc-card-title { font-family: 'Inter', sans-serif !important; font-size: 20px !important; font-weight: 500; color: var(--text-color-primary) !important; margin: 0; line-height: 1.3; }
.vsc-card-body { font-family: 'Inter', sans-serif !important; font-size: 14px !important; line-height: 1.55; color: var(--text-color-primary) !important; margin: 0; opacity: 0.85; }

@media (min-width: 1025px) {
  .vsc-video-container, .vsc-sticky-viewport { position: sticky; top: 0; height: 100vh; }
  .vsc-sticky-viewport { margin-top: -100vh; overflow: hidden; }
  .vsc-content-layout { height: 100vh; align-items: flex-start; }
  .vsc-left-col { width: 45%; padding-right: 5%; padding-top: 12vh; }
  .vsc-right-col { width: 55%; height: 100vh; display: flex; align-items: center; }
  .vsc-card-track { will-change: transform; transform: translate3d(0, 40vh, 0); }
}
@media (max-width: 1024px) {
  .vsc-video-container { height: 100%; }
  .vsc-sticky-viewport { padding: 60px 0; }
  .vsc-content-layout { flex-direction: column; gap: 40px; }
  .vsc-left-col, .vsc-right-col { width: 100%; }
  .vsc-left-col { padding-top: 0; }
  .vsc-card-title { font-size: 18px !important; }
  /* Live backdrop blur over a playing video is one of the most expensive paints
     on mid-range phones. A slightly more opaque fill keeps the frosted look. */
  .custom-blur-container { -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; background-color: rgba(218, 213, 202, 0.5) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .arrow-swap-global .elementor-button-icon svg,
  .arrow-swap-global .elementor-button-icon img,
  .arrow-swap-global .elementor-button-icon::after,
  .vaxel-card-swap .elementor-icon svg,
  .vaxel-card-swap .elementor-button-icon svg { transition-duration: 0.01ms !important; }
}