* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Compact account rail and full-screen account sections */
body.has-account-sidebar { padding-right: 0; }

.account-listings-view { max-width: 1120px; }
.account-delivered-listing { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 112px; padding: 18px 22px; border: 1px solid #ded0b9; background: #fffdf8; box-shadow: 0 8px 22px rgba(75,54,24,.05); }
.account-delivered-listing h3 { margin: 5px 0 7px; font: 400 23px Georgia, serif; }
.account-delivered-listing small { color: #786e61; }
.account-video-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.account-video-actions .invoice-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; }
.account-video-download { background: #b78d47; color: #fff !important; border-color: #b78d47; font-weight: 700; }
.account-delivered-thumbs { display: none !important; }
.client-media-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(35, 28, 20, .62); }
.client-media-dialog { position: relative; width: min(980px, 100%); max-height: min(86vh, 820px); overflow: auto; padding: 34px; background: #fffdf8; box-shadow: 0 25px 70px rgba(0,0,0,.22); }
.client-media-close { position: absolute; top: 13px; right: 16px; width: 38px; height: 38px; border: 1px solid #d9c8a8; background: #fffdf8; color: #4a4035; font-size: 28px; line-height: 1; cursor: pointer; }
.client-media-dialog h2 { margin: 6px 0 24px; font: 400 30px Georgia, serif; }
.client-video-dialog { width: min(980px, 92vw); }
.client-full-video { display: block; width: 100%; max-height: 68vh; object-fit: contain; background: #17130f; }
.client-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.client-media-grid img, .client-media-grid video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #ddcfb7; background: #eee8dc; }
@media (max-width: 680px) { .account-delivered-listing { align-items: flex-start; flex-direction: column; gap: 14px; } .account-video-actions { justify-content: flex-start; } }
body.has-account-sidebar .floating-cta,
body.account-full-view-open .floating-cta { display: none !important; }
/* Free-offer CTA in pricing section: hidden by default, shown only with promo */
.free-offer-cta { display: none !important; }
body.has-promo-validated:not(.has-free-request):not(.has-paid-purchase) .free-offer-cta { display: inline-flex !important; }
body.has-account-sidebar .account-link { display: none !important; }
body.has-account-sidebar .account-menu-toggle { display: inline-flex !important; }
.account-side-panel[hidden] { display: none !important; }
.account-side-panel {
  top: 15vh; bottom: 15vh; width: min(300px, 30vw); min-width: 230px;
  padding: 24px 20px; border-radius: 2px 0 0 2px; box-shadow: -14px 12px 35px rgba(44,31,17,.12);
}
.account-side-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(75,58,35,.16); }
.account-side-caption { color: #81796e; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.account-side-close { border: 0; background: transparent; color: #6d6255; cursor: pointer; font-size: 18px; letter-spacing: 2px; padding: 5px; }
.account-side-nav { padding: 18px 0 0; }
.account-side-item { padding: 13px 12px; }
.account-full-view[hidden] { display: none !important; }
.account-full-view { position: fixed; inset: 0; z-index: 70; overflow: auto; background: #f8f5ef; color: #191816; }
.account-full-inner { min-height: 100%; width: min(980px, 100%); margin: 0 auto; padding: 34px 7vw 80px; }
.account-full-back { border: 0; background: transparent; color: #6e655a; cursor: pointer; font: inherit; padding: 0; }
.account-full-back:hover { color: #a47b2e; }
.account-full-brand { margin: 72px auto 40px; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(173,133,51,.7); color: #b08b3f; font: 42px Georgia,serif; }
.account-full-content { width: min(680px, 100%); margin: 0 auto; }
.account-full-view-copy { padding: 42px 0; }
.account-full-view-copy h2 { margin: 10px 0 34px; font: 400 clamp(44px, 7vw, 78px)/1.02 Georgia,serif; }
.account-full-view-copy .account-details { border-top: 1px solid rgba(75,58,35,.16); }
.account-full-view-copy .account-details div { display: grid; grid-template-columns: 34% 1fr; gap: 20px; padding: 19px 0; }
.account-full-view-copy .account-side-number { font-size: 62px; }
.account-full-view-copy p { max-width: 420px; color: #81796e; font-size: 16px; line-height: 1.7; }
body.free-request-open .account-side-panel { display: none !important; visibility: hidden !important; pointer-events: none !important; }
@media (max-width: 900px) {
  .account-side-panel { top: 12vh; bottom: auto; height: auto; width: min(300px, 78vw); min-width: 0; }
  .account-full-inner { padding: 24px 26px 60px; }
  .account-full-brand { margin-top: 58px; }
}

/* FINAL ACCOUNT MODAL OVERRIDES */
body.has-account-sidebar .account-tools .account-link { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
body.has-account-sidebar .account-tools .account-icon,
body.has-account-sidebar .account-tools .account-link-copy { display: inline-flex !important; }
.account-side-panel { top: 18vh !important; bottom: auto !important; width: min(270px, 25vw) !important; min-width: 220px !important; padding: 18px 20px 20px !important; background: #fff !important; border: 1px solid rgba(75,58,35,.12) !important; border-radius: 0 !important; box-shadow: 0 20px 48px rgba(45,36,21,.12) !important; }
.account-side-head { padding-bottom: 14px !important; border-bottom: 1px solid rgba(75,58,35,.12) !important; }
.account-side-brand { display: flex !important; align-items: center; gap: 9px; color: #1b1917; font: 400 18px Georgia, serif; }
.account-side-brand img { width: 28px; height: 28px; object-fit: contain; }
.account-side-brand span { display: inline !important; width: auto !important; height: auto !important; border: 0 !important; color: inherit !important; font-size: inherit !important; }
.account-side-user { padding: 14px 2px 4px !important; }
.account-side-nav { padding-top: 12px !important; }
.account-side-item { padding: 11px 10px !important; border-radius: 0 !important; background: transparent !important; color: #6f665c !important; font-size: 11px !important; letter-spacing: .09em !important; }
.account-side-item:hover, .account-side-item.is-active { background: #f5f2ed !important; color: #201d19 !important; }
.account-side-pending, .account-side-listings { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; box-sizing: border-box; padding-right: 30px !important; }
.account-pending-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #c62828; color: #fff; font: 700 11px/1 Arial, sans-serif; letter-spacing: 0; flex-shrink: 0; margin-left: auto; }
.account-pending-badge[hidden] { display: none !important; }
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button { display: none !important; }
.account-pack-buy { border: 1px solid var(--gold, #b08b3f) !important; background: var(--gold, #b08b3f) !important; color: #fff !important; padding: 10px 20px !important; font: 600 12px/1.2 var(--sans, Arial, sans-serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 0; transition: background .25s, border-color .25s; }
.account-pack-buy:hover { background: #967430!important; border-color: #967430!important; color: #fff !important; }
.admin-upload-split { border: 1px solid #d5cfc6; padding: 14px 16px 10px; margin: 8px 0; } .admin-upload-split legend { font: 600 11px/1.2 var(--sans, Arial, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #61584e; padding: 0 6px; }
#account-media-gallery { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: 90px minmax(280px,1fr) 90px; align-items: center; padding: 5vh 4vw; background: #090909; animation: galleryFadeIn .35s ease-out; }
@keyframes galleryFadeIn { from { opacity: 0; } to { opacity: 1; } }
.account-gallery-card { position: relative; display: grid; grid-template-columns: 44px minmax(280px,800px) 44px; grid-template-rows: minmax(300px,70vh) auto; align-items: center; gap: 12px; width: min(920px,96vw); padding: 28px; background: #f8f5ef; box-shadow: 0 24px 80px #0008; }
.account-gallery-stage { grid-column: 2; display: grid; place-items: center; height: 90vh; }
.account-gallery-stage img, .account-gallery-stage video { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; }
.account-gallery-prev, .account-gallery-next { border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.32); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 25px; cursor: pointer; justify-self: center; }
.account-gallery-prev { grid-column: 1; } .account-gallery-next { grid-column: 3; }
.account-gallery-caption { grid-column: 2; grid-row: 2; text-align: center; margin: 0; color: #61584e; }
.account-gallery-close { position: fixed; top: 24px; right: 28px; z-index: 2; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; width: 44px; height: 44px; background: rgba(0,0,0,.3); color: #fff; font-size: 26px; cursor: pointer; }
.account-full-view { position: fixed !important; inset: 0 !important; z-index: 85 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: auto !important; background: rgba(0,0,0,.68) !important; backdrop-filter: blur(2px) !important; opacity: 0; visibility: hidden; transition: opacity 360ms ease, visibility 360ms ease; }
.account-full-view:not([hidden]) { opacity: 1; visibility: visible; }
.account-full-inner { position: relative !important; width: min(1100px, calc(100vw - 48px)) !important; height: min(640px, 82vh) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: auto !important; background: #f8f5ef !important; color: var(--text) !important; border: 1px solid var(--line) !important; box-shadow: 0 50px 150px rgba(0,0,0,.8) !important; }
.account-full-back.modal-close { top: 14px !important; right: 14px !important; color: var(--text) !important; background: transparent !important; font-size: 44px !important; }
.account-full-brand-row { position: absolute; top: 34px; left: 56px; z-index: 2; margin: 0 !important; }
.account-full-brand-row img { width: 30px !important; height: 30px !important; }
.account-full-brand-row span { color: var(--text) !important; }
.account-full-content { width: 100% !important; margin: 0 !important; }
.account-full-view-copy { padding: 145px 70px 60px !important; }
.account-full-view-copy h2 { margin: 8px 0 34px !important; font-size: clamp(38px, 5vw, 64px) !important; }
.account-full-view-copy .account-details { max-width: 760px; }
.account-full-view-copy .account-details div { padding: 16px 0 !important; }
.account-side-coming-soon p { max-width: 520px !important; }
@media (max-width: 720px) { .account-side-panel { top: 12vh !important; width: min(270px, 78vw) !important; min-width: 0 !important; } .account-full-inner { width: 100% !important; height: 100vh !important; } .account-full-brand-row { left: 28px; top: 28px; } .account-full-view-copy { padding: 120px 28px 48px !important; } }

/* Final account layout: quiet white rail and the same frame as the process modal. */
body.has-account-sidebar .account-tools .account-link { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
body.has-account-sidebar .account-tools .account-icon,
body.has-account-sidebar .account-tools .account-link-copy { display: inline-flex !important; }
.account-side-panel {
  top: 18vh !important; bottom: auto !important; width: min(270px, 25vw) !important; min-width: 220px !important;
  padding: 18px 20px 20px !important; background: #fff !important; border: 1px solid rgba(75,58,35,.12) !important;
  border-radius: 0 !important; box-shadow: 0 20px 48px rgba(45,36,21,.12) !important;
}
.account-side-head { padding-bottom: 14px !important; border-bottom: 1px solid rgba(75,58,35,.12) !important; }
.account-side-brand { display: flex !important; align-items: center; gap: 9px; color: #1b1917; font: 400 18px Georgia, serif; }
.account-side-brand img { width: 28px; height: 28px; object-fit: contain; }
.account-side-brand span { display: inline !important; width: auto !important; height: auto !important; border: 0 !important; color: inherit !important; font-size: inherit !important; }
.account-side-user { padding: 14px 2px 4px !important; }
.account-side-nav { padding-top: 12px !important; }
.account-side-item { padding: 11px 10px !important; border-radius: 0 !important; background: transparent !important; color: #6f665c !important; font-size: 11px !important; letter-spacing: .09em !important; }
.account-side-item:hover, .account-side-item.is-active { background: #f5f2ed !important; color: #201d19 !important; }
.account-full-view {
  position: fixed !important; inset: 0 !important; z-index: 85 !important; display: flex !important; align-items: center !important;
  justify-content: center !important; overflow: auto !important; background: rgba(0,0,0,.68) !important;
  backdrop-filter: blur(2px) !important; opacity: 0; visibility: hidden; transition: opacity 360ms ease, visibility 360ms ease;
}
.account-full-view:not([hidden]) { opacity: 1; visibility: visible; }
.account-full-inner {
  position: relative !important; width: min(1100px, calc(100vw - 48px)) !important; height: min(640px, 82vh) !important;
  min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: auto !important; background: #f8f5ef !important;
  color: var(--text) !important; border: 1px solid var(--line) !important; box-shadow: 0 50px 150px rgba(0,0,0,.8) !important;
}
.account-full-back.modal-close { top: 14px !important; right: 14px !important; color: var(--text) !important; background: transparent !important; font-size: 44px !important; }
.account-full-brand-row { position: absolute; top: 34px; left: 56px; z-index: 2; margin: 0 !important; }
.account-full-brand-row img { width: 30px !important; height: 30px !important; }
.account-full-brand-row span { color: var(--text) !important; }
.account-full-content { width: 100% !important; margin: 0 !important; }
.account-full-view-copy { padding: 145px 70px 60px !important; }
.account-full-view-copy h2 { margin: 8px 0 34px !important; font-size: clamp(38px, 5vw, 64px) !important; }
.account-full-view-copy .account-details { max-width: 760px; }
.account-full-view-copy .account-details div { padding: 16px 0 !important; }
.account-side-coming-soon p { max-width: 520px !important; }
@media (max-width: 720px) {
  .account-side-panel { top: 12vh !important; width: min(270px, 78vw) !important; min-width: 0 !important; }
  .account-full-inner { width: 100% !important; height: 100vh !important; }
  .account-full-brand-row { left: 28px; top: 28px; }
  .account-full-view-copy { padding: 120px 28px 48px !important; }
}

/* Keep the identity visible in the fixed header while the rail is open. */
body.has-account-sidebar .account-tools .account-link {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.has-account-sidebar .account-tools .account-icon,
body.has-account-sidebar .account-tools .account-link-copy {
  display: inline-flex !important;
}
body.has-account-sidebar .account-tools .account-link-copy {
  flex-direction: column;
}

/* Account rail: return to the original white, quiet navigation treatment. */
.account-side-panel {
  top: 18vh !important;
  bottom: auto !important;
  width: min(270px, 25vw) !important;
  min-width: 220px !important;
  padding: 18px 20px 20px !important;
  background: #fff !important;
  border: 1px solid rgba(75,58,35,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 48px rgba(45,36,21,.12) !important;
}
.account-side-head { padding-bottom: 14px !important; border-bottom: 1px solid rgba(75,58,35,.12) !important; }
.account-side-brand { display: flex !important; align-items: center; gap: 9px; color: #1b1917; font: 400 18px Georgia, serif; }
.account-side-brand img { width: 28px; height: 28px; object-fit: contain; }
.account-side-brand span { display: inline !important; width: auto !important; height: auto !important; border: 0 !important; color: inherit !important; font-size: inherit !important; }
.account-side-user { padding: 14px 2px 4px !important; }
.account-side-nav { padding-top: 12px !important; }
.account-side-item { padding: 11px 10px !important; border-radius: 0 !important; background: transparent !important; color: #6f665c !important; font-size: 11px !important; letter-spacing: .09em !important; }
.account-side-item:hover, .account-side-item.is-active { background: #f5f2ed !important; color: #201d19 !important; }

/* Account pages use the same centered modal frame as “Mira cómo funciona”. */
.account-full-view {
  position: fixed !important;
  inset: 0 !important;
  z-index: 85 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  background: rgba(0,0,0,.68) !important;
  backdrop-filter: blur(2px) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 360ms ease;
}
.account-full-view:not([hidden]) { opacity: 1; visibility: visible; }
.account-full-inner {
  position: relative !important;
  width: min(1100px, calc(100vw - 48px)) !important;
  height: min(640px, 82vh) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  background: #f8f5ef !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 50px 150px rgba(0,0,0,.8) !important;
}
.account-full-back.modal-close {
  top: 14px !important;
  right: 14px !important;
  color: var(--text) !important;
  background: transparent !important;
  font-size: 44px !important;
}
.account-full-brand-row {
  position: absolute;
  top: 34px;
  left: 56px;
  z-index: 2;
  margin: 0 !important;
}
.account-full-brand-row img { width: 30px !important; height: 30px !important; }
.account-full-brand-row span { color: var(--text) !important; }
.account-full-content { width: 100% !important; margin: 0 !important; }
.account-full-view-copy { padding: 145px 70px 60px !important; }
.account-full-view-copy h2 { margin: 8px 0 34px !important; font-size: clamp(38px, 5vw, 64px) !important; }
.account-full-view-copy .account-details { max-width: 760px; }
.account-full-view-copy .account-details div { padding: 16px 0 !important; }
.account-side-coming-soon p { max-width: 520px !important; }
@media (max-width: 720px) {
  .account-side-panel { top: 12vh !important; width: min(270px, 78vw) !important; min-width: 0 !important; }
  .account-full-inner { width: 100% !important; height: 100vh !important; }
  .account-full-brand-row { left: 28px; top: 28px; }
  .account-full-view-copy { padding: 120px 28px 48px !important; }
}

/* Stable header, compact account rail and floating account window. */
body.has-account-sidebar { padding-right: 0 !important; }
body.has-account-sidebar .account-link { display: inline-flex !important; }
body.has-account-sidebar .account-menu-toggle { display: inline-flex !important; }
body.has-account-sidebar .floating-cta { display: inline-flex !important; }
.account-side-panel { top: 18vh !important; bottom: auto !important; width: min(270px, 25vw) !important; min-width: 220px !important; padding: 20px !important; }
.account-side-head { padding-bottom: 14px !important; }
.account-side-brand { display: flex; align-items: center; gap: 10px; color: #1b1917; font: 400 19px Georgia, serif; }
.account-side-brand span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(173,133,51,.7); color: #b08b3f; font-size: 22px; }
.account-side-user { padding: 16px 2px 6px; }
.account-side-user strong { display: block; font: 400 18px Georgia,serif; overflow-wrap: anywhere; }
.account-side-user small { display: block; margin-top: 4px; color: #81796e; font-size: 11px; overflow-wrap: anywhere; }
.account-side-nav { padding-top: 12px !important; }
.account-side-item { padding: 11px 10px !important; font-size: 12px; }
.account-full-view { background: rgba(22,18,12,.18) !important; }
.account-full-inner { position: absolute; top: 12vh; left: 12.5%; width: 75%; height: 76%; min-height: 0; overflow: auto; box-sizing: border-box; background: #f8f5ef; box-shadow: 0 24px 80px rgba(38,29,16,.22); padding: 28px 6vw 52px !important; }
.account-full-brand { display: none !important; }
.account-full-view-copy { padding: 34px 0 !important; }
.account-full-view-copy h2 { margin-bottom: 28px !important; }
.account-phone-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-phone-form input { width: min(250px, 100%); padding: 10px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.5); color: var(--text); font: inherit; }
.account-phone-save { padding: 10px 14px; border: 1px solid #b08b3f; background: #b08b3f; color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.account-phone-status { width: 100%; color: #9a5b50; font-size: 12px; }
.account-phone-status.is-ok { color: #46704c; }
@media (max-width: 900px) {
  .account-side-panel { top: 12vh !important; width: min(270px, 78vw) !important; }
  .account-full-inner { top: 10vh; left: 5%; width: 90%; height: 80%; padding: 24px 26px 42px !important; }
}

/* Keep these account-window rules last so the original responsive rules cannot move the header. */
body.has-account-sidebar { padding-right: 0 !important; }
body.has-account-sidebar .account-link { display: inline-flex !important; }
body.has-account-sidebar .account-menu-toggle { display: inline-flex !important; }
body.has-account-sidebar .floating-cta { display: inline-flex !important; }
.account-side-panel { top: 18vh !important; bottom: auto !important; width: min(270px, 25vw) !important; min-width: 220px !important; padding: 20px !important; }
.account-side-brand { display: flex; align-items: center; gap: 10px; color: #1b1917; font: 400 19px Georgia, serif; }
.account-side-user { padding: 16px 2px 6px; }
.account-side-user strong { display: block; font: 400 18px Georgia,serif; overflow-wrap: anywhere; }
.account-side-user small { display: block; margin-top: 4px; color: #81796e; font-size: 11px; overflow-wrap: anywhere; }
.account-full-view { background: rgba(22,18,12,.18) !important; }
.account-full-inner { position: absolute; top: 12vh; left: 12.5%; width: 75%; height: 76%; min-height: 0; overflow: auto; box-sizing: border-box; background: #f8f5ef; box-shadow: 0 24px 80px rgba(38,29,16,.22); padding: 28px 6vw 52px !important; }
.account-full-brand { display: none !important; }
.account-phone-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-phone-form input { width: min(250px, 100%); padding: 10px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.5); color: var(--text); font: inherit; }
.account-phone-save { padding: 10px 14px; border: 1px solid #b08b3f; background: #b08b3f; color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.account-phone-status { width: 100%; color: #9a5b50; font-size: 12px; }
.account-phone-status.is-ok { color: #46704c; }
@media (max-width: 900px) {
  .account-side-panel { top: 12vh !important; width: min(270px, 78vw) !important; }
  .account-full-inner { top: 10vh; left: 5%; width: 90%; height: 80%; padding: 24px 26px 42px !important; }
}

/* Logged-in account area */
 .account-side-panel[hidden] { display: none !important; }
body.has-account-sidebar { padding-right: min(360px, 30vw); }
body.has-account-sidebar .floating-cta,
body.has-account-sidebar .account-link,
body.has-account-sidebar .account-menu-toggle { display: none !important; }
.account-side-panel {
  position: fixed; z-index: 80; top: 0; right: 0; bottom: 18vh;
  width: min(360px, 30vw); min-width: 300px; box-sizing: border-box;
  padding: 30px 28px 24px; display: flex; flex-direction: column;
  background: #f3ede2; color: #171615; border-left: 1px solid rgba(75, 58, 35, .16);
  box-shadow: -18px 0 42px rgba(44, 31, 17, .08);
}
.account-side-mark {
  width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 28px;
  border: 1px solid rgba(173, 133, 51, .65); color: #b08b3f; font-family: Georgia, serif; font-size: 28px;
}
.account-side-identity { padding-bottom: 24px; border-bottom: 1px solid rgba(75, 58, 35, .16); }
.account-side-identity .upper-label { display: block; margin-bottom: 8px; }
.account-side-identity strong { display: block; font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.account-side-identity small { display: block; margin-top: 6px; color: #81796e; font-size: 12px; overflow-wrap: anywhere; }
.account-side-nav { display: grid; gap: 3px; padding: 22px 0; }
.account-side-item {
  appearance: none; border: 0; border-left: 2px solid transparent; background: transparent; color: #71685e;
  cursor: pointer; font: inherit; text-align: left; padding: 12px 14px; transition: background .2s, color .2s, border-color .2s;
}
.account-side-item:hover, .account-side-item.is-active { color: #1b1917; background: rgba(255,255,255,.52); border-left-color: #b08b3f; }
.account-side-content { flex: 1; overflow: auto; min-height: 0; }
.account-side-view { padding-top: 10px; }
.account-side-view h2 { margin: 9px 0 22px; font-family: Georgia, serif; font-size: 32px; font-weight: 400; line-height: 1.05; }
.account-details { margin: 0; }
.account-details div { padding: 13px 0; border-top: 1px solid rgba(75, 58, 35, .14); }
.account-details dt { color: #81796e; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.account-details dd { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.account-side-coming-soon { padding-top: 26px; }
.account-side-number { color: #b08b3f; font: 42px Georgia, serif; }
.account-side-coming-soon p { color: #81796e; line-height: 1.6; font-size: 14px; }
.account-side-back { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(75, 58, 35, .16); color: #3b3022; font-size: 13px; text-decoration: none; }
.account-side-back:hover { color: #a47b2e; }
@media (max-width: 900px) {
  body.has-account-sidebar { padding-right: 0; }
  .account-side-panel { top: auto; bottom: 0; width: 100%; min-width: 0; height: min(78vh, 620px); }
}

:root {
  --cream: #f9f6ee;
  --cream-soft: #f5eee1;
  --paper: #fbf8ee;
  --sage: #a99d84;
  --sage-dark: #716b5d;
  --sage-light: #d7d0c0;
  --sand: #c7b797;
  --text: #141414;
  --text-soft: #514d45;
  --muted: #6d6a63;
  --line: #ded2bd;
  --clay: #877c66;
  --gold: #b69346;
  --gold-soft: #f6e7cb;
  --gold-deep: #8c6a24;
  --black: #111111;
  --black-soft: #171717;
  --white: #fffefb;
  --cream-dark: #e7ddcb;
  --serif: "Iowan Old Style", "Bodoni 72", "Baskerville", "Times New Roman", serif;
  --sans: "Avenir Next", "Helvetica Neue", "Futura", "Montserrat", "Arial", sans-serif;
}

html {
  scroll-behavior: smooth;
}
html, body { overflow-x: clip; }

body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

body.menu-open {
  overflow-x: hidden;
}

body:not(.is-loaded) {
  overflow: hidden;
}

/* Brand splash shown until the first hero video can actually play, so
   visitors never see a stuttering half-loaded hero. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  opacity: 1;
  transition: opacity 600ms ease;
}

.page-loader.hidden {
  opacity: 0;
  pointer-events: none;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  letter-spacing: .04em;
}

.page-loader-logo {
  width: 56px;
  height: auto;
  opacity: 0.92;
  animation: pageLoaderPulse 1400ms ease-in-out infinite;
}

@keyframes pageLoaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-logo {
    animation: none;
  }
}

/* Elevate your presence: one controlled presentation video replaces the
   former pair of animated photos. */
.story-image-stack { position: relative; min-height: 0; width: 100%; max-width: 100%; justify-self: end; aspect-ratio: 16 / 9; box-sizing: border-box; }
.story-video-card {
  position: absolute; inset: 0; width: 100%; max-width: 100%; overflow: hidden; background: #1d1812;
  box-shadow: 0 28px 70px rgba(40, 29, 16, .24);
}
.story-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(13px) saturate(.82); transform: scale(1.08);
  transition: filter .8s ease, transform 1.1s ease;
}
.story-video-card.is-playing .story-video { filter: blur(0) saturate(1); transform: scale(1.02); }
.story-video-shade { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(16,12,7,.38), rgba(16,12,7,.08) 52%, rgba(16,12,7,.42)); pointer-events: none; }
.story-video-watermark { position: absolute; top: 18px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); border-radius: 4px; pointer-events: none; }
.story-video-watermark img { width: 22px; height: 22px; object-fit: contain; }
.story-video-watermark span { font-family: var(--serif); font-size: 14px; color: var(--white); }
.story-video-launch { position: absolute; z-index: 3; top: 50%; left: 50%; min-width: 176px; min-height: 176px; transform: translate(-50%, -50%) scale(1); border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(183,141,71,.9); color: #fff; padding: 24px; cursor: pointer; font: 500 15px/1.25 var(--sans, Arial, sans-serif); letter-spacing: .04em; box-shadow: 0 14px 36px rgba(0,0,0,.24), 0 0 0 0 rgba(183,141,71,.35); animation: storyVideoPulse 2.5s ease-in-out infinite; }
.story-video-launch:hover { background: #c49c59; transform: translate(-50%, -50%) scale(1.04); }
.story-video-launch[hidden] { display: none; }
@keyframes storyVideoPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 14px 36px rgba(0,0,0,.24), 0 0 0 0 rgba(183,141,71,.34); } 50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 16px 42px rgba(0,0,0,.28), 0 0 0 11px rgba(183,141,71,0); } }
@media (max-width: 600px) { .story-video-launch { min-width: 144px; min-height: 144px; font-size: 14px; } .story-video-watermark { top: 16px; left: 16px; } }

img,
video {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.site-frame {
  background: var(--paper);
  color: var(--text);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: 82px;
  padding: 0 70px;
  background: rgba(249, 246, 238, 0.84);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
}
.account-tools{position:relative;display:flex;align-items:center;gap:8px;margin-left:16px}.account-link{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.account-icon{font-size:25px;line-height:1;display:inline-block}.account-link-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.account-link-email{display:block;max-width:180px;margin-top:3px;color:var(--muted);font-size:9px;letter-spacing:.02em;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-link:hover,.account-menu a:hover,.account-menu button:hover{color:#b48a45}.account-menu-toggle{border:0;background:transparent;color:inherit;cursor:pointer;font-size:18px;letter-spacing:2px;line-height:1;padding:8px 2px}.account-menu{position:absolute;right:0;top:calc(100% + 14px);z-index:30;display:grid;min-width:205px;padding:8px;background:#fffaf3;border:1px solid var(--line);box-shadow:0 15px 40px #2d241522}.account-menu a,.account-menu button{display:block;width:100%;padding:11px 13px;border:0;background:transparent;color:#3d352d;text-align:left;text-decoration:none;font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer}.account-menu[hidden],.account-menu-toggle[hidden],.verification-box[hidden]{display:none}.portal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.portal-head h1{margin-top:5px}.portal-item{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ddd3c5;padding:16px 0}.portal-item a{color:#8b6935}.portal-item .button{color:#fff}.portal-shell{max-width:900px}.portal-shell h2{font:400 24px Georgia,serif;margin:28px 0 10px}

.brand {
  color: var(--text);
  text-decoration: none;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: auto;
  max-height: 44px;
  object-fit: contain;
  display: block;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.brand-wordmark {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
  font-size: clamp(30px, 2vw, 42px);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-link {
  position: relative;
  color: var(--text);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link .es {
  display: none;
}

.language-switcher {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
}

.language-button {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 0;
  transition: color 280ms ease, background 280ms ease;
}

.language-button.active {
  color: var(--text);
  background: var(--cream-dark);
}

.language-button:hover {
  color: var(--clay);
}

.language-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  border: 1px solid var(--line);
  padding: 10px 14px;
}

.language-selected {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-flag {
  display: inline-flex;
  line-height: 1;
}

.language-flag svg {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.language-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  padding: 8px 0;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  list-style: none;
  display: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  z-index: 80;
}

.language-menu.open {
  display: block;
}

.language-menu li {
  display: block;
}

.language-menu .language-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.language-menu .language-option:hover,
.language-menu .language-option.active {
  background: var(--cream-soft);
}

/* Hover dropdowns for Examples / How it works / Packs in the main nav. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 300px;
  padding: 10px;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(0,0,0,0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  z-index: 90;
  text-transform: none;
  letter-spacing: normal;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
}

/* Small invisible bridge so the mouse can travel from the link down to the
   panel without the gap between them closing the dropdown. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--text);
  transition: background 200ms ease;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: var(--cream-soft);
}

.nav-dropdown-thumb {
  flex: none;
  width: 56px;
  height: 42px;
  overflow: hidden;
  border-radius: 2px;
}

.nav-dropdown-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-dropdown-index {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}

.nav-dropdown-caption {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
}

.nav-dropdown-step-number {
  flex: none;
  width: 28px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold);
}

.nav-dropdown-sub {
  font-size: 11px;
  color: var(--clay);
}

.hero {
  position: relative;
  min-height: 100vh;
  color: var(--white);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 5s ease;
}

.hero-video.active {
  opacity: 1;
  transform: scale(1.03);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(900px, calc(100vw - 120px));
  text-align: center;
}

.hero-title-wrap {
  border-top: 1px solid rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.72);
  padding: 30px 0;
}

.hero-kicker {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-title-wrap.revealed .hero-kicker {
  opacity: 1;
  transform: translateY(0);
}

.hero-letter-word {
  display: inline-block;
  overflow: visible;
  vertical-align: bottom;
  padding: 0 0.04em;
  padding-bottom: 0.12em;
  margin: 0 -0.04em;
}

.hero-letter {
  display: inline-block;
  transform: translateY(1.3em);
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-title-wrap.revealed .hero-letter {
  transform: translateY(0);
}

.hero-content h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(96px, 12vw, 174px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  letter-spacing: -0.025em;
}

/* Keep the descender of the final "y" inside the hero frame. */
.hero-content { transform: translateY(-3vh); }

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 56px);
  cursor: pointer;
  padding: 0;
  transition: color 260ms ease;
}

.hero-arrow:hover {
  color: var(--gold);
  background: transparent;
}

.hero-arrow-left {
  left: 40px;
}

.hero-arrow-right {
  right: 40px;
}

.hero-video {
  z-index: 0;
}

.hero-video.active {
  z-index: 1;
}

/* Scroll cue: the classic "mouse with a traveling dot" indicator, plus a
   double chevron underneath that bounces like a dropped ball — an
   unmistakable, well-known pattern for "there is more below", not a subtle
   page wiggle. Fades out for good the moment the visitor scrolls or
   otherwise moves on from the hero. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
  color: var(--white);
  opacity: 0.9;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.scroll-cue.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scroll-cue-mouse {
  position: relative;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.scroll-cue-dot {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: var(--gold);
  border-radius: 999px;
  animation: scrollCueDot 1900ms cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes scrollCueDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}

.scroll-cue-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.scroll-cue-chevron {
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(45deg);
  animation: scrollCueBounce 1500ms ease-in-out infinite;
}

.scroll-cue-chevron:nth-child(2) {
  animation-delay: 180ms;
}

/* A real bounce: fast drop, quick compress, slower settle — not a smooth
   sine wave — echoing the classic "bouncing ball" easing used on most
   scroll-indicator patterns. */
@keyframes scrollCueBounce {
  0% { transform: rotate(45deg) translate(0, 0); opacity: 0.35; }
  35% { transform: rotate(45deg) translate(6px, 6px); opacity: 1; }
  55% { transform: rotate(45deg) translate(3px, 3px); opacity: 0.75; }
  75% { transform: rotate(45deg) translate(6px, 6px); opacity: 1; }
  100% { transform: rotate(45deg) translate(0, 0); opacity: 0.35; }
}

.intro-section {
  position: relative;
  padding: 100px 70px;
  background: var(--paper);
}

.section-inner {
  width: min(1280px, calc(100vw - 140px));
  margin: 0 auto;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(440px, 0.95fr) minmax(440px, 1.05fr);
  align-items: center;
  gap: 60px;
}

.section-copy {
  max-width: 620px;
}

.section-copy h2,
.section-heading h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 4vw, 82px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 24px 0 20px;
}

.story-copy h2 {
  max-width: 700px;
  font-size: clamp(34px, 2.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.founders-copy h2 {
  max-width: 560px;
  font-size: clamp(44px, 3.35vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.section-copy .lead-paragraph {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 16px;
}

.story-text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 36px;
}

.upper-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--sage-dark);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 16px 34px;
  border: 1px solid var(--text);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transition: color 360ms ease, background 360ms ease, border-color 360ms ease;
}

.button-dark {
  background: var(--text);
  color: var(--white);
}

.button-dark:hover {
  background: transparent;
  color: var(--text);
}

#story-cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  min-width: 260px;
  padding: 19px 38px;
  font-size: 12px;
  letter-spacing: 0.22em;
  box-shadow: 0 14px 34px rgba(182, 147, 70, 0.38);
  animation: heroCtaPulse 2600ms ease-in-out infinite;
  transition: color 360ms ease, background 360ms ease, border-color 360ms ease, transform 200ms ease;
}

#story-cta:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
  transform: translateY(-2px);
}

@keyframes heroCtaPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(182, 147, 70, 0.38); }
  50% { box-shadow: 0 14px 42px rgba(182, 147, 70, 0.62); }
}

@media (prefers-reduced-motion: reduce) {
  #story-cta {
    animation: none;
  }
}

.button-outline {
  background: transparent;
  color: var(--text);
}

.button-outline:hover {
  background: var(--text);
  color: var(--white);
}

.button-light {
  background: var(--white);
  color: var(--text);
}

.button-light:hover {
  background: var(--black);
  color: var(--white);
}

.story-image-stack {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-photo {
  position: absolute;
  width: min(560px, 52vw);
  margin: 0;
  box-shadow: 0 30px 90px rgba(0,0,0,0.18);
  background: var(--white);
  padding: 8px;
  border: 1px solid rgba(100,88,50,0.12);
}

.story-photo-one {
  left: 0;
  top: 20px;
  transform: translateY(0) scale(1.06);
}

.story-photo-two {
  right: 0;
  bottom: 20px;
  transform: translateY(18px) scale(1.06);
}

.story-photo img {
  width: 100%;
  height: min(540px, 46vw);
  object-fit: cover;
}

.story-photo-one {
  animation: photoFloatOne 4.5s ease-in-out infinite alternate;
}

.story-photo-two {
  animation: photoFloatTwo 4.5s ease-in-out infinite alternate;
}

@keyframes photoFloatOne {
  0% { transform: translateY(6px) scale(1.02); }
  100% { transform: translateY(-64px) scale(1.14); }
}

@keyframes photoFloatTwo {
  0% { transform: translateY(18px) scale(1.04); }
  100% { transform: translateY(58px) scale(1.08); }
}

/* La imagen es decorativa: evita el menú flotante del navegador y el icono de búsqueda visual. */
.story-photo img { pointer-events: none; user-select: none; -webkit-user-drag: none; }

.legal-form-note {
  margin: 4px 0 18px;
  color: #756e63;
  font: 400 11px/1.55 var(--sans, Arial, sans-serif);
}

.legal-form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 780ms ease, transform 780ms cubic-bezier(.22,1,.36,1);
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

.story-photo-one {
  width: min(560px, 52vw);
  transform: translateY(50px) translateX(-20px) scale(1.05);
}

.story-photo-two {
  width: min(560px, 52vw);
  transform: translateY(18px) translateX(20px) scale(1.06);
}

.story-photo-one {
  animation: storyOne 900ms cubic-bezier(.22,1,.36,1) forwards, photoFloatOne 4.5s ease-in-out infinite alternate;
}

.story-photo-two {
  animation: storyTwo 1100ms cubic-bezier(.22,1,.36,1) forwards, photoFloatTwo 4.5s ease-in-out infinite alternate;
}

@keyframes storyOne {
  0% { opacity: 0; transform: translateY(130px) translateX(-110px) scale(0.86) rotate(-4deg); }
  100% { opacity: 1; transform: translateY(35px) translateX(0) scale(1.04) rotate(0deg); }
}

@keyframes storyTwo {
  0% { opacity: 0; transform: translateY(190px) translateX(110px) scale(0.86) rotate(4deg); }
  100% { opacity: 1; transform: translateY(20px) translateX(0) scale(1.08) rotate(0deg); }
}

.transformation-section {
  background: var(--cream-soft);
  padding: 110px 70px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-heading.centered {
  text-align: center;
  margin-inline: auto;
}

.section-heading.lph {
  text-align: left;
}

.section-heading h2 {
  font-size: clamp(54px, 4vw, 76px);
}

.transformation-gallery {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 2px 26px;
  scroll-snap-type: x proximity;
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDQ0IDQ0Ij48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIyMCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC45NCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMTgiLz48cGF0aCBkPSJNMTcgMTUgTDExIDIyIEwxNyAyOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yNyAxNSBMMzMgMjIgTDI3IDI5IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+') 22 22, grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.transformation-gallery.dragging {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDQ0IDQ0Ij48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIyMCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC45NCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMTgiLz48cGF0aCBkPSJNMTcgMTUgTDExIDIyIEwxNyAyOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yNyAxNSBMMzMgMjIgTDI3IDI5IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+') 22 22, grabbing;
  user-select: none;
  /* Disable snap while actively dragging: with scroll-snap-type on, each direct
     scrollLeft assignment made by the drag handler gets treated as a scroll end
     and the browser yanks it back to the nearest card, making the drag feel
     broken/jerky. Snap still applies normally for wheel/trackpad/touch scroll. */
  scroll-snap-type: none;
}

.transformation-gallery::-webkit-scrollbar {
  display: none;
}

.transformation-gallery-card {
  flex: 0 0 min(280px, 86vw);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  scroll-snap-align: start;
}

.transformation-gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.14);
  border-color: var(--gold);
}

.transformation-gallery-item {
  margin: 0;
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--cream-soft, #f5f0e8);
}

/* Full-color, crisp thumbnails — no desaturation. Cards with real footage
   reveal a looping video preview on hover (see .transformation-gallery-video
   below); the rest just get a slight zoom. */
.transformation-gallery-item img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.04);
  transition: transform 700ms ease, filter 700ms ease, opacity 420ms ease;
}

.transformation-gallery-card:hover .transformation-gallery-item img {
  transform: scale(1.08);
}

.transformation-gallery-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.transformation-gallery-item.show-video .transformation-gallery-video {
  opacity: 1;
}

.transformation-gallery-item.show-video img {
  opacity: 0;
}

.transformation-gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.84), transparent);
  color: var(--white);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.example-index {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage-light);
}

.example-caption {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.3;
  color: var(--white);
  margin-top: -6px;
}

.gallery-transform-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 12px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(182, 147, 70, 0.45);
  transition: color 260ms ease, border-color 260ms ease, background 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.gallery-transform-link::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.gallery-transform-link:hover {
  color: var(--white);
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(182, 147, 70, 0.6);
}

.micro-label {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  color: var(--sage-dark);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* How-it-works modal: the process steps used to live inline in the page,
   pinned via position:sticky while the visitor scrolled through them. They
   now live inside a modal instead, stepped through by the two big arrows,
   so .process-stage just fills the modal panel at a fixed size. */
.how-it-works-modal-backdrop {
  z-index: 85;
}

.how-it-works-modal {
  position: relative;
  width: min(1100px, calc(100vw - 48px));
  box-shadow: 0 50px 150px rgba(0,0,0,0.8);
}

.how-it-works-modal .modal-close {
  top: 14px;
  right: 14px;
  z-index: 6;
  color: var(--white);
}

.process-stage {
  height: min(640px, 82vh);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}

.process-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.35);
  color: var(--white);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
  animation: processArrowInvite 2200ms ease-in-out infinite;
}

.process-arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.process-arrow-left {
  left: 22px;
}

.process-arrow-right {
  right: 22px;
}

@keyframes processArrowInvite {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .process-arrow {
    animation: none;
  }
}

@media (max-width: 720px) {
  .how-it-works-modal {
    width: 100vw;
    height: 100vh;
    max-height: none;
  }

  .process-stage {
    height: 100vh;
  }
}

.process-stage-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1000ms ease, transform 1400ms ease;
}

.process-stage-photo-1 {
  background-image: url('assets/images/image-1-house-exterior.png');
}

.process-stage-photo-2 {
  background-image: url('assets/images/image-2-lounge.png');
}

.process-stage-photo-3 {
  background-image: url('assets/images/image-4-pool.png');
}

.process-stage-photo.active {
  opacity: 1;
  transform: scale(1.03);
}

.process-stage-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.44));
  z-index: 1;
}

.process-copy-wrap {
  position: relative;
  z-index: 2;
  min-height: 560px;
  padding: 0;
}

.process-heading {
  position: absolute;
  top: 34px;
  left: 56px;
  max-width: 230px;
  margin-bottom: 0;
}

.process-heading h2 {
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 6px 0 0;
}

.process-heading .upper-label {
  color: var(--sage-light);
  font-size: 10px;
}

.process-steps {
  position: absolute;
  inset: 0;
  padding: 0 70px;
}

.process-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(50px) scale(0.92);
  filter: blur(4px);
  transition: opacity 950ms cubic-bezier(.22,1,.36,1), transform 950ms cubic-bezier(.22,1,.36,1), filter 950ms ease;
  pointer-events: none;
}

.process-step.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.process-step .process-number {
  display: block;
  font-family: var(--serif);
  font-size: clamp(90px, 7vw, 132px);
  color: var(--gold);
  opacity: 0.95;
  line-height: 1;
  margin-bottom: 8px;
}

.process-step h3 {
  font-family: var(--serif);
  font-size: clamp(58px, 5.4vw, 92px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 16px;
}

.process-step p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
  max-width: 600px;
  margin: 0 auto;
}

.founders-section {
  background: var(--white);
  padding: 110px 70px;
}

.founders-layout {
  grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.1fr);
}

.founders-photo-wrap {
  margin: 0;
  box-shadow: 0 30px 90px rgba(0,0,0,0.18);
  background: var(--white);
  padding: 8px;
  border: 1px solid rgba(100,88,50,0.12);
  overflow: hidden;
}

.founders-photo-col {
  display: flex;
  flex-direction: column;
}

/* Entrance: the photo scales up gently from slightly small + blurred,
   revealing with a cinematic feel. */
.founders-photo-wrap {
  transform: scale(0.92);
  filter: blur(6px);
  transition: opacity 1200ms ease, transform 1200ms cubic-bezier(.22, 1, .36, 1), filter 1200ms ease;
}

.founders-photo-wrap.in-view {
  transform: scale(1);
  filter: blur(0px);
}

/* The copy column fades up smoothly. */
.founders-copy[data-animate] {
  transform: translateY(40px);
  transition: opacity 1000ms ease, transform 1000ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: 300ms;
}

.founders-copy[data-animate].in-view {
  transform: translateY(0);
}

.founders-photo {
  width: 100%;
  aspect-ratio: 985 / 1486;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 120ms ease-out;
  will-change: transform;
}

.founders-highlight {
  margin: 22px 0 0;
  padding: 18px 24px;
  border-left: 3px solid var(--gold);
  background: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.4;
  color: var(--text);
}

.founders-copy h2,
.founders-copy .lead-paragraph,
.founders-copy .story-text {
  text-align: left;
}

.clients-section {
  background: var(--cream-soft);
  padding: 90px 70px 110px;
}

.clients-gallery {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 2px 10px;
  scroll-snap-type: x proximity;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.clients-gallery.dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}

.clients-gallery::-webkit-scrollbar {
  display: none;
}

.clients-gallery-card {
  flex: 0 0 min(200px, 60vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  scroll-snap-align: start;
}

.clients-gallery-logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  transition: border-color 260ms ease, transform 260ms ease;
}

.clients-gallery-card:hover .clients-gallery-logo {
  border-color: var(--gold);
  transform: translateY(-6px);
}

.clients-gallery-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.clients-gallery-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.pricing-section {
  background: var(--cream-soft);
  padding: 110px 70px;
}

.pricing-cta {
  padding: 34px 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-offer-banner {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 36px;
  padding: 13px 22px;
  background: var(--black);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(860px, 80vw);
  min-height: 82px;
  padding: 20px 70px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--black);
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  text-align: center;
  box-shadow: 0 18px 50px rgba(182,147,70,0.35);
  transition: background 300ms ease, color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.cta-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 24px;
}

.cta-link:hover {
  background: var(--black);
  color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(182,147,70,0.52);
}

.cta-link:hover .cta-link-icon {
  background: var(--gold);
  color: var(--black);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 30px;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px 28px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* background/color are intentionally NOT transitioned so they swap the
     instant the mouse enters, with no perceptible delay. */
  transition: transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease, border-color 220ms ease;
  transform: translateY(0);
}

.price-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  transition: width 420ms ease;
}

.price-card:hover {
  transform: translateY(-14px) scale(1.04);
  border-color: var(--gold);
  background: var(--black);
  color: var(--white);
  box-shadow: 0 26px 60px rgba(0,0,0,0.24);
  transition: transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease, border-color 220ms ease;
}

.price-card:hover::before {
  width: 100%;
}

.price-card:hover .price-card-label,
.price-card:hover .price-card-title,
.price-card:hover .price-amount,
.price-card:hover .price-unit,
.price-card:hover .price-features,
.price-card:hover .price-card-label {
  color: var(--white);
}

.price-card:hover .price-card-label {
  color: var(--sage-light);
}

.price-card:hover .select-pack-button {
  background: var(--white);
  color: var(--black);
}

.price-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--gold);
  color: var(--black);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 14px;
  z-index: 2;
}

.price-card-top {
  width: 100%;
  display: grid;
  grid-template-rows: 16px 82px 112px;
  gap: 12px;
}

.price-card-label {
  font-family: var(--sans);
  color: var(--sage-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.price-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 2.55vw, 52px);
  line-height: 1.02;
  color: var(--text);
}

.price-card-title-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  min-height: 82px;
  padding-right: 84px;
}

.price-discount {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 6px 9px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}

.price-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'old unit'
    'amount unit'
    'tax tax';
  align-items: baseline;
  column-gap: 10px;
  row-gap: 5px;
  min-height: 112px;
  margin: 0;
}

.price-card-top { min-width: 0; }
.price-card-title-row { min-width: 0; }
.price-card-title { min-width: 0; overflow-wrap: anywhere; }
.price-row { align-items: center; }
.price-old, .price-amount { white-space: nowrap; }
.price-old { grid-area: old; }
.price-amount { grid-area: amount; }
.price-unit { grid-area: unit; align-self: end; padding-bottom: 7px; }
.price-tax { grid-area: tax; color: var(--muted); font-family: var(--sans); font-size: 12px; letter-spacing: .05em; }
.price-total { display: none !important; }

.modal-field select[data-phone-country] {
  width: 100%;
  min-height: 46px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: rgba(244,239,230,.72);
  color: var(--text);
  font: inherit;
}

.modal-field select[data-phone-country]:focus { border-color: var(--gold); outline: none; }

.phone-country-picker { position: relative; width: 100%; margin-bottom: 8px; }
.phone-country-picker > select[data-phone-country] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.phone-country-trigger { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.phone-country-trigger:hover, .phone-country-picker.is-open .phone-country-trigger { border-color: var(--gold); }
.phone-country-flag { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; }
.phone-country-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-country-dial { color: var(--muted); white-space: nowrap; }
.phone-country-chevron { color: var(--muted); font-size: 1.1rem; line-height: 1; }
.phone-country-menu { display: none; position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; padding: 8px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.phone-country-picker.is-open .phone-country-menu { display: block; }
.phone-country-search { display: block; width: 100%; min-height: 40px; margin-bottom: 7px; padding: 0 10px; border: 1px solid var(--line); background: var(--white); color: var(--text); font: inherit; }
.phone-country-search:focus { border-color: var(--gold); outline: none; }
.phone-country-options { max-height: 230px; overflow: auto; }
.phone-country-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 9px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.phone-country-option:hover, .phone-country-option:focus { background: var(--cream); outline: none; }
.phone-country-option span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-country-option strong { color: var(--muted); font-weight: 500; }
.phone-country-empty { display: block; padding: 12px 8px; color: var(--muted); font-size: 13px; }

.price-old {
  color: #98938b;
  font-family: var(--serif);
  font-size: clamp(28px, 2.45vw, 40px);
  line-height: 1;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.price-amount {
  display: inline-block !important;
  visibility: visible !important;
  font-family: var(--serif);
  font-size: clamp(50px, 4.15vw, 70px);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

@media (max-width: 1000px) {
  .price-card-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .price-card-title-row,
  .price-row {
    min-height: 0;
  }

  .price-card-title-row {
    padding-right: 0;
  }

  .price-discount {
    position: static;
    transform: none;
  }

  .price-row {
    margin: 20px 0 24px;
  }
}

@media (max-width: 520px) {
  .price-row { grid-template-columns: 1fr; grid-template-areas: 'old' 'amount' 'unit' 'tax'; min-height: 0; }
  .price-unit { align-self: start; padding-bottom: 0; }
}

.price-card:hover .price-old { color: #aaa49b; }

.price-unit {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 30px 0 30px;
  min-height: 66px;
}

.price-card .select-pack-button {
  width: 100%;
  margin-top: auto;
  background: transparent;
  color: var(--black);
  border-color: var(--black);
  transition: background 320ms ease, color 320ms ease, transform 320ms ease, border-color 320ms ease;
  cursor: pointer;
}

.price-card .select-pack-button:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.contact-section {
  background: var(--black);
  color: var(--white);
  padding: 110px 70px;
}

.contact-cta {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.contact-cta h2 {
  color: var(--white);
  font-size: clamp(54px, 4vw, 74px);
  margin: 0;
}

.contact-cta p {
  font-family: var(--sans);
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  line-height: 1.8;
  max-width: 480px;
  margin: 0;
}

.light-label {
  color: var(--sage-light);
}

.contact-big-button {
  margin-top: 14px;
  min-width: 300px;
  padding: 22px 46px;
  font-size: 13px;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  box-shadow: 0 14px 34px rgba(182, 147, 70, 0.38);
  cursor: pointer;
}

.contact-big-button:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.form-field input {
  height: 56px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
}

.form-field input::placeholder {
  color: rgba(255,255,255,0.7);
}

.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 54px 70px 80px;
}

.footer-inner {
  width: min(1180px, calc(100vw - 140px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(260px, 1fr) minmax(280px, 1fr) minmax(160px, 0.6fr);
  gap: 20px;
  align-items: center;
}

.footer-brand .footer-logo {
  font-family: var(--serif);
  font-size: clamp(50px, 3vw, 78px);
  color: var(--white);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-logo-img {
  display: block;
  max-height: 68px;
  width: auto;
  object-fit: contain;
}

.footer-wordmark {
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.01em;
}

.footer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact-label {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--sage-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-email {
  color: var(--white);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}

.footer-nav a {
  color: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-nav .es {
  display: none;
}

.footer-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-footer .language-button {
  color: var(--white);
}

.site-footer .language-button.active {
  background: var(--white);
  color: var(--black);
}

.site-footer .language-button:hover {
  color: var(--sage-light);
}

.legal-links {
  grid-column: 2 / span 3;
  display: flex;
  align-items: center;
  gap: 26px;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 24px;
}

.legal-links a {
  color: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 360ms ease;
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.pack-modal {
  position: relative;
  width: min(620px, calc(100vw - 48px));
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 40px 36px;
  box-shadow: 0 50px 150px rgba(0,0,0,0.8);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 10;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
}

.transformation-modal .modal-close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 10;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 200ms ease, color 200ms ease;
}

.transformation-modal .modal-close:hover {
  background: rgba(255,255,255,0.2);
  color: var(--white);
}

/* Small brand mark (logo + wordmark) shown inside every modal, so LuxTOURy
   stays visible no matter which panel is open. Default is dark-on-light for
   modals on the cream/paper background; .modal-brand-light flips it for
   modals on a dark background (how-it-works, the transformation cinema
   frame). */
.modal-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.modal-brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.modal-brand span {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--text);
}

.modal-brand-light span {
  color: var(--white);
}

/* The lead modal is the main pitch card visitors see most, so its brand
   mark runs a size up from every other modal's. */
.lead-modal-pitch .modal-brand img {
  width: 36px;
  height: 36px;
}

.lead-modal-pitch .modal-brand span {
  font-size: 22px;
}

/* Sits in normal flow as its own row above the two-column grid, not inside
   either column — so it never competes for space with the pitch column's
   title, and both columns (pitch + form) start flush at the same height. */
.lead-modal-brand-row {
  margin-bottom: 28px;
}

.modal-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.modal-head h3 {
  font-family: var(--serif);
  font-size: clamp(44px, 3vw, 58px);
  font-weight: 400;
  color: var(--text);
  margin: 12px 0 0;
}

.modal-form {
  margin-top: 20px;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 20px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-field span {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--sage-dark);
  text-transform: uppercase;
}

.modal-field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  height: 50px;
  color: var(--text);
  font-family: var(--sans);
  outline: none;
}

.modal-submit {
  width: auto;
  min-width: 210px;
  margin-top: 30px;
}

.lead-modal-backdrop {
  z-index: 80;
}

.lead-modal {
  position: relative;
  width: min(760px, calc(100vw - 48px));
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 44px;
  box-shadow: 0 50px 150px rgba(0,0,0,0.8);
}

/* Wide two-column layout — pitch on the left, form on the right — so the
   modal reads as a horizontal card instead of a long vertical strip that
   can run past the viewport height. */
.lead-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.lead-modal-pitch {
  display: flex;
  flex-direction: column;
}

#lead-modal-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.2;
  color: var(--text);
  margin: 14px 0 0;
}

/* The brand mark now lives above the grid (.lead-modal-brand-row), not
   inside this column, so the title is the pitch column's first element and
   starts flush with the top of the form column. */
.lead-modal-pitch #lead-modal-title {
  margin-top: 0;
}

.lead-modal-badge {
  display: inline-flex;
  margin-top: 12px;
  padding: 7px 14px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lead-modal-text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 16px 0 0;
}

.lead-modal-form,
.lead-account-step {
  margin-top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lead-account-step[hidden] {
  display: none !important;
}

.lead-modal-form[hidden] {
  display: none !important;
}

.lead-account-step h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  margin: 0 0 12px;
}

.lead-account-step .account-form-note {
  margin-bottom: 20px;
}

.lead-account-step {
  border: 0;
  padding: 0;
}

.lead-modal.step-verify .lead-modal-text {
  margin-bottom: 28px;
}

.lead-modal.step-verify .modal-field {
  margin-top: 10px;
}

.lead-modal.step-verify .resend-code,
.lead-modal.step-verify .resend-countdown {
  margin-left: auto;
  margin-right: auto;
}

.lead-modal.step-verify .resend-code {
  margin-top: 18px;
}

.lead-modal.step-verify .resend-countdown {
  margin-top: 10px !important;
  min-height: 18px;
}

.lead-modal-back {
  position: absolute;
  top: 50%;
  left: -32px;
  transform: translateY(-50%);
  display: none;
  width: 54px;
  height: 54px;
  color: var(--text);
  border-color: var(--line);
  background: var(--paper);
  animation: none;
  z-index: 5;
}

.lead-modal-back:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.lead-modal.has-back .lead-modal-back {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .lead-modal-back {
    left: 8px;
    top: 8px;
    transform: none;
    width: 42px;
    height: 42px;
  }
}

.lead-modal-form .modal-submit {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.lead-modal-success {
  display: none;
}

.lead-modal-success p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 16px 0 28px;
}

.lead-modal.success .lead-modal-request {
  display: none;
}

.lead-modal.success .lead-modal-success {
  display: block;
}

.lead-modal-perks {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--cream, #f4efe6);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lead-modal-perks li {
  position: relative;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.lead-modal-perks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold, #b08d4f);
  font-weight: 700;
}

.lead-modal-form .modal-field,
.lead-account-step .modal-field {
  margin-bottom: 16px;
}

.field-error {
  display: none;
  font-family: var(--sans);
  font-size: 12px;
  color: #b3261e;
  margin-top: 6px;
}

.field-error.visible {
  display: block;
}

.password-input{display:flex;align-items:center;position:relative}.password-input input{flex:1;padding:0 46px 0 14px;background:rgba(244,239,230,.72);border:1px solid var(--line);border-radius:2px}.password-input input::placeholder{color:transparent}.password-input input:focus{border-color:var(--gold)}.password-toggle{position:absolute;right:8px;border:0;background:transparent;color:var(--text-soft);cursor:pointer;padding:7px;font-size:15px}.password-toggle::before{content:none}.password-toggle.is-visible{color:var(--gold,#b08d4f)}.password-rules.password-valid{color:#46704c}.verification-box[hidden],.pack-modal-verification[hidden]{display:none!important}.lead-verification-screen{padding:16px 0}.lead-verification-screen h3{font-family:var(--serif);font-size:clamp(32px,3.6vw,44px);font-weight:400;margin:0 0 12px}

/* Each account step becomes a focused single-panel card. */
.lead-modal.step-account .lead-modal-brand-row,
.lead-modal.step-account .lead-modal-pitch,
.lead-modal.step-verify .lead-modal-brand-row,
.lead-modal.step-verify .lead-modal-pitch{display:none}
.lead-modal.step-account .lead-modal-grid,
.lead-modal.step-verify .lead-modal-grid{display:block;max-width:430px;margin:0 auto}
.lead-modal.step-account .lead-account-step,
.lead-modal.step-verify .lead-verification-screen{width:100%;text-align:center}
.lead-modal.step-account .modal-field,
.lead-modal.step-verify .modal-field{text-align:left}
.lead-modal.step-account .lead-account-step h3,
.lead-modal.step-verify .lead-verification-screen h3{font-size:clamp(30px,3.2vw,42px);line-height:1.15;text-align:center}
.lead-modal.step-account .account-form-note,
.lead-modal.step-verify .lead-modal-text,
.lead-modal.step-verify .account-form-note{text-align:center}
.lead-modal.step-account #lead-account-submit,
.lead-modal.step-verify #free-verify-code{display:block;margin:10px auto 0}

.pack-modal{text-align:center}.pack-modal .modal-head{text-align:center}.pack-modal .modal-brand,.pack-modal-verification .modal-brand{justify-content:center}.pack-modal .modal-form{text-align:left}.pack-modal .modal-submit{display:block;margin-left:auto;margin-right:auto}.pack-modal-verification{text-align:center;max-width:400px;margin:0 auto}.pack-modal-verification .modal-field{text-align:left}.pack-modal-verification #pack-verify-code{display:block;margin:14px auto 0}
.pack-modal.step-verify .pack-modal-request{display:none}.pack-modal.step-verify .pack-modal-verification{display:block}

.insufficient-pack-modal { z-index: 120 !important; display: grid; place-items: center; padding: 24px; background: rgba(35,28,20,.68); }
.insufficient-pack-dialog { position: relative; width: min(760px, 100%); padding: 38px 42px 42px; background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 32px 90px rgba(0,0,0,.28); text-align: center; }
.insufficient-pack-dialog .modal-brand { justify-content: center; margin-bottom: 24px; }
.insufficient-pack-dialog h3 { margin: 10px 0 12px; font: 400 clamp(32px,4vw,48px)/1.08 Georgia,serif; }
.insufficient-pack-dialog p { margin: 0 auto 28px; color: var(--text-soft); }
.insufficient-pack-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; text-align: left; }
.insufficient-pack-grid button { display: grid; gap: 9px; min-height: 150px; padding: 20px; border: 1px solid var(--line); background: #f8f4ec; color: var(--text); cursor: pointer; text-align: left; }
.insufficient-pack-grid button:hover { border-color: var(--gold); box-shadow: 0 10px 24px rgba(93,64,25,.12); transform: translateY(-2px); }
.insufficient-pack-grid strong { font: 400 21px Georgia,serif; }
.insufficient-pack-grid span { color: var(--text-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.insufficient-pack-grid b { color: var(--gold); font-size: 15px; }
@media (max-width: 720px) { .insufficient-pack-dialog { padding: 32px 22px; } .insufficient-pack-grid { grid-template-columns: 1fr; } .insufficient-pack-grid button { min-height: 0; } }

.modal-field input.field-invalid {
  border-bottom-color: #b3261e;
}

.lead-modal-success,
.pack-modal-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 4px;
}

.lead-modal.success .lead-modal-success,
.pack-modal.success .pack-modal-success {
  display: flex;
}

.pack-modal.success .pack-modal-request {
  display: none;
}

.lead-modal-success-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.lead-modal-success-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.lead-modal-success-wordmark {
  font-family: var(--serif);
  font-size: 33px;
  letter-spacing: 0.02em;
  color: var(--text);
}

.lead-modal-success h3,
.pack-modal-success h3 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.lead-modal-success-text,
.pack-modal-success .lead-modal-success-text {
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 20px auto 30px;
  max-width: 440px;
}

.lead-modal-success-text strong {
  color: var(--text);
  font-weight: 700;
}

.lead-modal-success .button,
.pack-modal-success .button {
  min-width: 180px;
}

/* Floating "get your free video" button, fixed bottom-right across the
   whole site. Gold from the first frame (not just on hover) and animated
   with a slow pulse so it keeps pulling the eye during the whole visit. */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  background: var(--gold);
  color: var(--black);
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 26px;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(182, 147, 70, 0.45);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
  animation: floatingCtaPulse 2600ms ease-in-out infinite;
}

.floating-cta:hover {
  background: var(--gold-deep);
  color: var(--white);
  transform: translateY(-2px);
}
.contact-floating-cta { right: auto; left: 24px; background: #fff; color: #161616; border: 1px solid #161616; box-shadow: 0 10px 26px rgba(0,0,0,.24); animation: none; }
.contact-floating-cta:hover { background: #161616; color: #fff; }

@keyframes floatingCtaPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(182, 147, 70, 0.45); }
  50% { box-shadow: 0 14px 44px rgba(182, 147, 70, 0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta {
    animation: none;
  }
}

@media (max-width: 640px) {
  .floating-cta {
    right: 14px;
    bottom: 14px;
    max-width: 42vw;
    padding: 11px 10px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .contact-floating-cta { left: 14px; right: auto; }
}

/* Keep the editorial image pair inside the story section while preserving
   the subtle vertical movement. The previous animation could move the lower
   card beyond the section edge and crop it on shorter viewports. */
.intro-section { overflow: hidden; }
.story-image-stack { min-height: 700px; overflow: visible; padding: 24px 0 72px; box-sizing: border-box; }
.story-photo { max-height: 570px; }
.story-photo img { height: min(500px, 42vw); }
.story-photo-one { top: 26px; }
.story-photo-two { right: 0; bottom: 42px; }

@media (max-width: 1000px) {
  .story-image-stack { min-height: 620px; padding-bottom: 54px; }
  .story-photo img { height: min(430px, 72vw); }
}

@media (max-width: 640px) {
  .story-image-stack { min-height: 520px; padding: 12px 0 40px; }
  .story-photo { width: min(82vw, 420px); }
  .story-photo img { height: min(360px, 68vw); }
  .story-photo-one { left: 0; top: 8px; }
  .story-photo-two { right: 0; bottom: 24px; }
}

/* The presentation video keeps its current width and uses the requested
   16:9 frame. This override comes after the legacy photo-stack rules above. */
.story-image-stack {
  min-height: 0;
  height: auto;
  padding: 0;
  aspect-ratio: 16 / 9;
}

/* Contact info modal */
.contact-info-modal-backdrop {
  z-index: 80;
}

.contact-info-modal {
  position: relative;
  width: min(480px, calc(100vw - 48px));
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 44px 36px;
  box-shadow: 0 50px 150px rgba(0,0,0,0.8);
  text-align: center;
}

.contact-info-modal .modal-brand {
  justify-content: center;
}

.contact-info-modal .modal-head {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-info-modal .modal-head h3 {
  font-size: clamp(32px, 3vw, 42px);
}

.contact-info-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contact-info-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.contact-info-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-info-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

.contact-info-value {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
}

a.contact-info-value:hover {
  color: var(--gold-deep);
}

.transformation-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 360ms ease;
}

.transformation-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.transformation-modal {
  position: relative;
  width: min(1080px, calc(100vw - 48px));
  background: transparent;
  color: var(--white);
  border: none;
  padding: 20px 0;
  box-shadow: none;
}

/* Screen-reader only — hidden visually but kept for JS */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.transformation-stepper-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.transformation-stepper-compare {
  width: 100%;
}

/* The curtain: a single frame with the "before" photo as the base layer and
   the "after" video laid on top, clipped to --divider so only the left
   portion of the video shows — the rest of the frame stays the photo. A
   draggable handle sits on the reveal line so visitors can slide it either
   way to compare the two. Much bigger than the old side-by-side panes. */
.transformation-curtain {
  --divider: 50%;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.transformation-curtain-before,
.transformation-curtain-after {
  position: absolute;
  inset: 0;
}

.transformation-full-watermark {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  pointer-events: none;
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .06em;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.transformation-full-watermark img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(1.3) drop-shadow(0 0 4px rgba(183,141,71,.5));
}

.transformation-curtain-before img,
.transformation-curtain-after video,
.transformation-curtain-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.transformation-curtain-after {
  /* Visible region runs from the divider to the right edge, so the "after"
     video shows on the right (matching the After tag) and the "before"
     photo underneath shows through on the left (matching the Before tag). */
  clip-path: inset(0 0 0 var(--divider));
}

.transformation-curtain-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--divider);
  width: 0;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
}

.transformation-curtain-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: var(--gold);
  box-shadow: 0 0 16px rgba(182,147,70,0.5);
}

.transformation-curtain-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 5px rgba(255,255,255,0.12);
  pointer-events: none;
  cursor: col-resize;
}

/* CSS-drawn chevrons instead of text glyphs: a text character's own font
   metrics rarely center inside its line box the way a flex `align-items:
   center` promises, which was leaving these visibly low in the circle.
   A bordered square rotated 45deg centers exactly on its box every time. */
.transformation-curtain-arrow {
  display: block;
  width: 7px;
  height: 7px;
  border-style: solid;
  border-color: var(--black);
  border-width: 0 2px 2px 0;
}

.transformation-curtain-arrow-left {
  transform: rotate(135deg);
}

.transformation-curtain-arrow-right {
  transform: rotate(-45deg);
}

.transformation-compare-tag {
  position: absolute;
  top: 14px;
  z-index: 4;
  padding: 8px 18px;
  background: rgba(0,0,0,0.6);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.transformation-curtain-tag-before {
  left: 14px;
}

.transformation-curtain-tag-after {
  right: 14px;
}

.transformation-compare-tag-gold {
  background: var(--gold);
  color: var(--black);
}

.transformation-stepper-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 7px 16px;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.transformation-stepper-hint.is-hidden {
  opacity: 0;
}

.transformation-stepper .process-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  flex: none;
  animation: none;
  background: transparent;
  backdrop-filter: none;
  color: rgba(255,255,255,0.85);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 0;
  font-size: 34px;
  transition: color 200ms ease;
}

.transformation-stepper .process-arrow-left {
  left: -22px;
}

.transformation-stepper .process-arrow-right {
  right: -22px;
}

.transformation-stepper .process-arrow:hover {
  background: transparent;
  color: var(--gold);
  border-color: transparent;
}

.transformation-stepper-full {
  display: block;
  margin: -46px auto 0;
  position: relative;
  z-index: 6;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  box-shadow: 0 14px 30px rgba(182, 147, 70, 0.35);
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 14px 36px;
}

.transformation-stepper-full:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
}

.transformation-stepper-full-wrap {
  display: none;
  position: relative;
  width: 100%;
}

.transformation-stepper.full-video .transformation-stepper-compare,
.transformation-stepper.full-video .transformation-stepper-body > .process-arrow,
.transformation-stepper.full-video .transformation-stepper-full {
  display: none;
}

.transformation-stepper.full-video .transformation-stepper-full-wrap {
  display: block;
}

.transformation-stepper-full-video {
  width: 100%;
  height: 100%;
  max-height: 78vh;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0 auto;
  background: transparent;
  pointer-events: none;
  /* cover (not contain): the frame is always fully filled by the video, so
     no letterbox/pillarbox background can ever show, whatever the source
     clip's native aspect ratio is. */
  object-fit: cover;
}

.transformation-full-video-frame {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
  background: #1a1a1a;
  overflow: hidden;
}

@media (max-width: 760px) {
  .transformation-modal {
    padding: 16px 8px;
  }

  .transformation-curtain {
    aspect-ratio: 16 / 9;
  }

  .transformation-stepper-body {
    gap: 0;
  }

  .transformation-stepper .process-arrow-left {
    left: 8px;
  }

  .transformation-stepper .process-arrow-right {
    right: 8px;
  }
}

[data-animate].pricing-animate {
  transition-delay: var(--delay, 0ms);
}

@media (max-width: 1000px) {
  .site-header {
    flex-wrap: wrap;
    padding: 14px 40px;
    min-height: auto;
  }

  .main-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding-top: 14px;
  }

  .hero {
    min-height: 720px;
  }

  .split-layout,
  .lead-modal-grid,
  .modal-form-grid {
    grid-template-columns: 1fr;
  }

  .lead-modal {
    padding: 32px 24px;
  }

  .lead-modal-grid {
    gap: 24px;
  }

  .pricing-grid,
  .process-timeline,
  .transformation-gallery {
    grid-template-columns: 1fr;
  }

  .process-column:nth-child(3) {
    transform: none;
  }

  .process-rail {
    display: none;
  }

  .process-column {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .legal-links {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 14px 20px;
  }

  .intro-section,
  .transformation-section,
  .founders-section,
  .clients-section,
  .pricing-section,
  .contact-section,
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-inner {
    width: 100%;
  }

  .hero-content {
    width: 100%;
  }

  .hero-title-wrap h1 {
    font-size: 70px;
  }

  .transform-button {
    left: 50%;
  }

  .story-photo {
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }

  .story-image-stack {
    display: grid;
    gap: 20px;
    min-height: auto;
  }

  .process-stage-photo {
    opacity: 0.28;
  }

  .process-stage-photo.active {
    opacity: 0.28;
    transform: scale(1.03);
  }

  .process-heading {
    max-width: 70%;
    padding: 20px 20px 0;
  }

  .process-steps {
    padding: 0 58px;
  }

  .process-step .process-number {
    font-size: clamp(56px, 14vw, 90px);
  }

  .process-step h3 {
    font-size: clamp(32px, 9vw, 58px);
  }

  .process-step p {
    font-size: 13px;
  }

  .process-arrow {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .process-arrow-left {
    left: 8px;
  }

  .process-arrow-right {
    right: 8px;
  }

  .founders-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .clients-gallery-card {
    flex: 0 0 min(180px, 60vw);
  }
}

/* Last account layout overrides. */
body.has-account-sidebar { padding-right: 0 !important; }
body.has-account-sidebar .account-link { display: inline-flex !important; }
body.has-account-sidebar .account-menu-toggle { display: inline-flex !important; }
body.has-account-sidebar .floating-cta { display: inline-flex !important; }
.account-side-panel { top: 18vh !important; bottom: auto !important; width: min(270px, 25vw) !important; min-width: 220px !important; padding: 20px !important; }
.account-side-brand { display: flex; align-items: center; gap: 10px; color: #1b1917; font: 400 19px Georgia, serif; }
.account-side-user { padding: 16px 2px 6px; }
.account-side-user strong { display: block; font: 400 18px Georgia,serif; overflow-wrap: anywhere; }
.account-side-user small { display: block; margin-top: 4px; color: #81796e; font-size: 11px; overflow-wrap: anywhere; }
.account-full-view { background: rgba(22,18,12,.18) !important; }
.account-full-inner { position: absolute; top: 12vh; left: 12.5%; width: 75%; height: 76%; min-height: 0; overflow: auto; box-sizing: border-box; background: #f8f5ef; box-shadow: 0 24px 80px rgba(38,29,16,.22); padding: 28px 6vw 52px !important; }
.account-full-brand { display: none !important; }
.account-phone-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-phone-form input { width: min(250px, 100%); padding: 10px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.5); color: var(--text); font: inherit; }
.account-phone-save { padding: 10px 14px; border: 1px solid #b08b3f; background: #b08b3f; color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.account-phone-status { width: 100%; color: #9a5b50; font-size: 12px; }
.account-phone-status.is-ok { color: #46704c; }
@media (max-width: 900px) {
  .account-side-panel { top: 12vh !important; width: min(270px, 78vw) !important; }
  .account-full-inner { top: 10vh; left: 5%; width: 90%; height: 80%; padding: 24px 26px 42px !important; }
}

/* Final overrides for the compact logged-in rail. */
body.has-account-sidebar { padding-right: 0; }
body.has-account-sidebar .floating-cta,
body.account-full-view-open .floating-cta { display: none !important; }
body.has-account-sidebar .account-link { display: none !important; }
body.has-account-sidebar .account-menu-toggle { display: inline-flex !important; }
.account-side-panel { top: 15vh; bottom: 15vh; width: min(300px, 30vw); min-width: 230px; padding: 24px 20px; border-radius: 2px 0 0 2px; }
.account-side-panel[hidden] { display: none !important; }
.account-side-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(75,58,35,.16); }
.account-side-caption { color: #81796e; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.account-side-close { border: 0; background: transparent; color: #6d6255; cursor: pointer; font-size: 18px; letter-spacing: 2px; padding: 5px; }
.account-side-nav { padding: 18px 0 0; }
.account-side-item { padding: 13px 12px; }
.account-full-view[hidden] { display: none !important; }
.account-full-view { position: fixed; inset: 0; z-index: 70; overflow: auto; background: #f8f5ef; color: #191816; }
.account-full-inner { min-height: 100%; width: min(980px, 100%); margin: 0 auto; padding: 34px 7vw 80px; }
.account-full-back { border: 0; background: transparent; color: #6e655a; cursor: pointer; font: inherit; padding: 0; }
.account-full-back:hover { color: #a47b2e; }
.account-full-brand { margin: 72px auto 40px; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(173,133,51,.7); color: #b08b3f; font: 42px Georgia,serif; }
.account-full-content { width: min(680px, 100%); margin: 0 auto; }
.account-full-view-copy { padding: 42px 0; }
.account-full-view-copy h2 { margin: 10px 0 34px; font: 400 clamp(44px, 7vw, 78px)/1.02 Georgia,serif; }
.account-full-view-copy .account-details { border-top: 1px solid rgba(75,58,35,.16); }
.account-full-view-copy .account-details div { display: grid; grid-template-columns: 34% 1fr; gap: 20px; padding: 19px 0; }
.account-full-view-copy .account-side-number { font-size: 62px; }
.account-full-view-copy p { max-width: 420px; color: #81796e; font-size: 16px; line-height: 1.7; }
body.free-request-open .account-side-panel { display: none !important; }
@media (max-width: 900px) {
  .account-side-panel { top: 12vh; bottom: auto; height: auto; width: min(300px, 78vw); min-width: 0; }
  .account-full-inner { padding: 24px 26px 60px; }
  .account-full-brand { margin-top: 58px; }
}
.price-card-amount{display:block;margin-top:1rem;color:#a87820;font-size:1.1rem;letter-spacing:.04em}

/* Registration phone control and compact account request layout. */
.phone-input-group { display: flex; align-items: stretch; gap: 0; }
.phone-input-group .phone-country-picker { flex: 0 0 116px; width: 116px; margin: 0; }
.phone-input-group .phone-country-trigger { min-height: 46px; padding: 0 9px; gap: 6px; border-right: 0; }
.phone-input-group .phone-country-code { font-size: 11px; letter-spacing: .08em; }
.phone-input-group .phone-country-dial { font-size: 12px; }
.phone-input-group > input { min-width: 0; width: auto !important; flex: 1; }
.phone-input-group .phone-country-menu { width: 280px; right: auto; }
.price-old { font-size: clamp(22px, 1.96vw, 32px); }
.price-amount { font-size: clamp(40px, 3.32vw, 56px); }
.account-request-view { padding-top: 18px !important; }
.account-request-view h2 { margin-bottom: 18px !important; }
.account-request-intro { margin-bottom: 18px !important; }
.insufficient-pack-grid .price-card { min-height: 300px; padding: 24px 20px; display: flex; align-items: flex-start; text-align: left; }
.insufficient-pack-grid .price-card-title { font-size: 30px; margin: 8px 0 18px; }
.insufficient-pack-grid .price-old { margin-top: auto; }
.insufficient-pack-grid .price-amount { font-size: 42px; }
.insufficient-pack-grid .price-unit { margin-left: 8px; color: var(--muted); }
.insufficient-pack-grid .price-tax { margin-top: 6px; }
.insufficient-pack-grid .select-pack-button { margin-top: 18px; width: 100%; padding: 12px; text-align: center; background: var(--black); color: var(--white); }
.free-request-guide { max-width: 520px; }
/* Promo code hint (registration forms) */
.promo-code-hint { display: block; margin-top: 6px; color: #9b8e7e; font-size: 12px; line-height: 1.35; }
/* Promo code view */
.promo-code-view { max-width: 520px; }
.promo-code-view h2 { margin-bottom: 10px; }
.promo-code-intro { color: #786e61; margin-bottom: 28px; line-height: 1.5; }
.promo-code-field { display: flex; gap: 10px; align-items: stretch; }
.promo-code-input { flex: 1; padding: 13px 16px; border: 1px solid #c9bba4; background: #fffdf8; font: inherit; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; outline: none; transition: border-color .2s; }
.promo-code-input:focus { border-color: #b08b3f; }
.promo-code-input::placeholder { text-transform: none; letter-spacing: 0; color: #b5a998; }
.promo-validate-btn { padding: 0 26px; border: 1px solid #d4c6ad; background: #e8e0d3; color: #b0a596; font: 500 14px/1 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: default; transition: background .25s, color .25s, border-color .25s; white-space: nowrap; }
.promo-validate-btn.is-active { background: #191816; color: #fff; border-color: #191816; cursor: pointer; }
.promo-validate-btn.is-active:hover { background: #2e2b26; }
.promo-code-error { margin-top: 12px; color: #c0392b; font-size: 14px; line-height: 1.4; display: none; }
.promo-code-error.is-visible { display: block; }
.promo-code-success { margin-top: 20px; padding: 18px 22px; background: #f0ebe3; border: 1px solid #c9bba4; text-align: center; }
.promo-code-success h3 { font: 400 20px Georgia, serif; margin-bottom: 8px; color: #191816; }
.promo-code-success p { color: #786e61; font-size: 14px; line-height: 1.5; }
.promo-already-validated { margin-top: 12px; padding: 18px 22px; background: #f0ebe3; border: 1px solid #c9bba4; text-align: center; }
.promo-already-validated p { color: #786e61; font-size: 14px; line-height: 1.5; }
/* .has-free-request visibility now handled by the promo-validated rule above */
.free-request-view { max-width: 760px; }
.free-request-view .listing-request-row { max-width: 760px; }
.free-request-guide .button { margin-top: 20px; }
.price-card-top { grid-template-rows: 16px 108px 112px; }
.price-features { margin-top: 30px; margin-bottom: 10px; }
.story-photo-one { animation: storyPhotoOneMotion 4.5s ease-in-out infinite alternate !important; }
.story-photo-two { animation: storyPhotoTwoMotion 4.5s ease-in-out infinite alternate !important; }
.promo-validate-row { display: flex; gap: 8px; align-items: stretch; }
.promo-validate-row input { flex: 1; min-width: 0; }
.promo-validate-btn { flex: 0 0 auto; padding: 0 16px; min-height: 46px; border: 1px solid var(--gold, #b69346); background: transparent; color: var(--gold, #b69346); font-family: var(--sans, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background 200ms, color 200ms; white-space: nowrap; }
.promo-validate-btn:hover { background: var(--gold, #b69346); color: var(--black, #18130d); }
.promo-validate-btn:disabled { opacity: .45; pointer-events: none; }
.promo-feedback { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.promo-feedback.ok { color: #2d7a3a; }
.promo-feedback.fail { color: #b42318; }
.promo-feedback:empty { display: none; }
@keyframes storyPhotoOneMotion {
  0% { transform: translateY(26px) translateX(0) scale(1.04); }
  100% { transform: translateY(-58px) translateX(-42px) scale(1.08); }
}
@keyframes storyPhotoTwoMotion {
  0% { transform: translateY(20px) translateX(0) scale(1.06); }
  100% { transform: translateY(72px) translateX(42px) scale(1.1); }
}
.unified-auth-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(24,19,13,.58); }
.unified-auth-backdrop[hidden] { display: none !important; }
.unified-auth-window { position: relative; width: min(512px, 94vw); height: min(760px, 94vh); overflow: hidden; background: var(--paper); box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.unified-auth-window iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.unified-auth-close { position: absolute; z-index: 2; top: 12px; right: 16px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width: 720px) { .unified-auth-backdrop { padding: 0; } .unified-auth-window { width: 100vw; height: 100vh; } }
@media (max-width: 720px) {
  .phone-input-group .phone-country-picker { flex-basis: 104px; width: 104px; }
  .insufficient-pack-grid .price-card { min-height: 0; }
}