/* The 3D site sales page. One live 3D world sits fixed behind the whole page; every section is a scene in it.
   This page is night only: the world is dark, so the colors here are fixed and don't follow the day theme. */
.sp {
  --bg: #050509; --bg-2: #0f1218; --text: #f0f0f0; --text-2: #c4c4c8; --gray: #888a90; --cyan: #05d1e1; --cyan-2: #39ffcf;
  --sp-gold: #e6c170; --sp-glass: rgba(12, 14, 20, .74); --sp-line: rgba(240, 240, 240, .09);
  --sp-gut: clamp(1.25rem, 5vw, 4.5rem);
  --sp-d1: clamp(2.6rem, 7.4vw, 9.5rem);
  --sp-d2: clamp(1.9rem, 4.4vw, 5.6rem);
  background: #050509; color: #c4c4c8;
}
.sp .nav-theme, .sp .logo-day { display: none !important; }

.sp-world { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; background: #050509; }
.sp-still, .sp-still img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-still img { object-fit: cover; transition: opacity .9s cubic-bezier(.22,1,.36,1); }
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s cubic-bezier(.22,1,.36,1); }
.sp-on .sp-canvas { opacity: 1; transition-duration: .4s; }
.sp-on .sp-still img { opacity: 0; }
.sp-load { position: absolute; left: var(--sp-gut); bottom: calc(1.4rem + env(safe-area-inset-bottom)); margin: 0;
  font: 600 .8rem/1 "Space Grotesk", sans-serif; letter-spacing: .08em; color: #888a90; opacity: 0; transition: opacity .6s ease; }
.sp-loading .sp-load { opacity: 1; }
.sp-load b { display: inline-block; min-width: 3ch; text-align: right; color: #f0f0f0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-on .sp-load, .sp-static .sp-load, .sp-loading.sp-on .sp-load { opacity: 0; }
.sp-count { position: fixed; z-index: 3; right: var(--sp-gut); bottom: 1.6rem; margin: 0; font: 600 .8rem/1 "Space Grotesk", sans-serif;
  letter-spacing: .08em; color: #888a90; pointer-events: none; }
.sp-count b { display: inline-block; min-width: 2ch; color: #f0f0f0; font-weight: 600; font-variant-numeric: tabular-nums; }

.sp-main { position: relative; z-index: 2; }
.sp-scene { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 7rem var(--sp-gut) 5rem; }
.sp-long { min-height: 130vh; min-height: 130svh; }
.sp-txt { width: 100%; max-width: min(50vw, 980px); container-type: inline-size; }
.sp-txt.sp-wide { max-width: min(58vw, 1180px); }

.sp-d1, .sp-d2 { font-family: Montserrat, "Montserrat Fallback", sans-serif; font-weight: 800; color: #f0f0f0; line-height: .92; letter-spacing: -.025em; margin: 0; }
.sp-d1 { font-size: var(--sp-d1); }
.sp-d2 { font-size: var(--sp-d2); }
.sp-d1 > span, .sp-d2 > span { display: block; }
/* Headlines made of phrases keep one phrase per line, so they shrink to fit the longest phrase. */
.sp-ph > span { white-space: nowrap; width: max-content; }
.sp-hero .sp-d1, .sp-end .sp-d1 { font-size: min(var(--sp-d1), 100cqi / 8.8); }
#price-h { font-size: min(var(--sp-d2), 100cqi / 12.3); }
.sp-cy { color: #05d1e1; }
.sp-gold { color: var(--sp-gold); font-style: italic; padding-right: .1em; }
.sp-kick { font: 600 clamp(.8rem, .3vw + .72rem, 1rem)/1.35 "Space Grotesk", sans-serif; letter-spacing: .06em; color: #888a90; margin: 0 0 1.3rem; }
.sp-lead { text-wrap: pretty; max-width: 36ch; margin: 1.7rem 0 0; font-size: clamp(1.02rem, .4vw + .9rem, 1.3rem); line-height: 1.55; color: #c4c4c8; }
.sp-price-line { margin: 1.4rem 0 0; font: 500 clamp(1.1rem, .6vw + .95rem, 1.5rem)/1.25 Onest, "Onest Fallback", sans-serif; color: #f0f0f0; }
.sp-small { margin: 1.4rem 0 0; font-size: .92rem; line-height: 1.55; color: #888a90; max-width: 60ch; }
.sp-sub { margin: 1.4rem 0 0; max-width: 60ch; }
.sp-main a:not(.sp-btn) { color: #05d1e1; }
.sp-main p a, .sp-main li a, .sp-check a { text-decoration: underline; text-underline-offset: .18em; }

.sp-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85em 1.35em; border-radius: 999px;
  font: 700 clamp(.92rem, .2vw + .86rem, 1.05rem)/1.15 Montserrat, "Montserrat Fallback", sans-serif; text-align: center;
  color: #f0f0f0 !important; background: rgba(240, 240, 240, .09); text-decoration: none; border: 0; cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .3s cubic-bezier(.22,1,.36,1); }
.sp-btn:hover { transform: translateY(-2px); background: rgba(240, 240, 240, .15); }
.sp-btn.sp-pri { background: #05d1e1; color: #050509 !important; }
.sp-btn.sp-pri:hover { background: #39ffcf; }
.sp-btn:focus-visible, .sp input:focus-visible, .sp textarea:focus-visible { outline: 2px solid #39ffcf; outline-offset: 3px; }

.sp-glass { margin: 2rem 0 0; padding: clamp(1.3rem, 2.2vw, 2.3rem); border-radius: 22px; background: var(--sp-glass);
  box-shadow: inset 0 0 0 1px var(--sp-line); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
.sp-glass > p { margin: 0 0 1rem; max-width: 62ch; text-wrap: pretty; }
.sp-glass > p:last-child { margin-bottom: 0; }
.sp-pricebox { max-width: 32rem; }
.sp-num { font: 600 clamp(3rem, 6vw, 5.6rem)/1 "Space Grotesk", sans-serif !important; color: #f0f0f0; font-variant-numeric: tabular-nums; margin: 0 0 .8rem !important; }
.sp-pricebox .sp-btn { margin-top: .6rem; }

.sp-list { list-style: none; display: grid; gap: 1.3rem 2.4rem; }
.sp-list li { line-height: 1.5; }
.sp-list strong { display: block; color: #f0f0f0; font: 700 1.02rem/1.3 Montserrat, "Montserrat Fallback", sans-serif; margin-bottom: .3rem; }
.sp-steps { counter-reset: st; }
.sp-steps li { counter-increment: st; padding-left: 2.6rem; position: relative; }
.sp-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: .05rem; font: 600 .95rem/1.3 "Space Grotesk", sans-serif; color: #05d1e1; }
.sp-extra { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .55rem 1.6rem; }
.sp-extra li { padding-left: 1.1rem; position: relative; color: #f0f0f0; }
.sp-extra li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #05d1e1; }

.sp-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.sp-work a { display: block; border-radius: 18px; overflow: hidden; background: var(--sp-glass); box-shadow: inset 0 0 0 1px var(--sp-line); text-decoration: none; color: #f0f0f0 !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1); }
.sp-work a:hover { transform: translateY(-3px); }
.sp-work img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sp-work span { display: block; padding: .85rem 1rem; font: 700 .98rem/1.3 Montserrat, "Montserrat Fallback", sans-serif; }

.sp-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .6rem; }
.sp-voices figure { margin: 1rem 0 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.sp-voices blockquote { margin: 0; color: #f0f0f0; line-height: 1.55; }
.sp-voices figcaption { font-size: .9rem; color: #888a90; }
.sp-stars { color: #e6c170; letter-spacing: .1em; margin-right: .3rem; }

.sp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; margin-top: 1.4rem; }
.sp-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .92rem; color: #c4c4c8; }
.sp-form .sp-full { grid-column: 1 / -1; }
.sp-form input[type=text], .sp-form input[type=email], .sp-form input[type=tel], .sp-form textarea {
  font: 400 16px/1.4 Onest, "Onest Fallback", sans-serif; color: #f0f0f0; background: rgba(5, 5, 9, .7); border: 1px solid rgba(240, 240, 240, .16);
  border-radius: 12px; padding: .8rem .9rem; width: 100%; }
.sp-form textarea { min-height: 6.5rem; resize: vertical; }
.sp-check { flex-direction: row !important; align-items: flex-start; gap: .7rem !important; line-height: 1.45; }
.sp-check input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: .1rem; accent-color: #05d1e1; }
.sp .op-err { color: #ffb4a8; margin: 0; }

.sp .footer { position: relative; z-index: 2; background: #050509; }
.sp .op-bar { display: none; }
.sp-slot { display: none; }

.sp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1099px) {
  .sp-cols, .sp-voices, .sp-work { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .sp-txt, .sp-txt.sp-wide { max-width: none; }
  .sp-scene { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 6.2rem var(--sp-gut) 1rem; }
  .sp-long { min-height: 0; }
  .sp-slot { display: block; flex: 0 0 auto; height: 52vh; height: 52svh; margin: 1.2rem 0 .2rem; }
  .sp-static .sp-slot { background: center / contain no-repeat; }
  .sp-static .sp-slot, .sp-hero .sp-slot { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .sp-on .sp-hero .sp-slot { -webkit-mask-image: none; mask-image: none; }
  .sp-static .sp-canvas { display: none; }
  .sp-still { display: none; }
  .sp-hero .sp-slot { height: 30vh; height: 30svh; margin: .5rem 0 -.2rem; background: url(/one-page-3d/media/sp-hero-slot.webp?v=3) center / contain no-repeat; transition: opacity .9s cubic-bezier(.22,1,.36,1); }
  .sp-on .sp-hero .sp-slot { background-image: none; }
  .sp-hero, .sp-end { min-height: 0; }
  .sp-count { display: none; }
  .sp-form { grid-template-columns: 1fr; }
  .sp-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 12, 18, .84); }
  .sp-d1, .sp-d2, .sp-kick, .sp-lead, .sp-price-line, .sp-small, .sp-sub { text-shadow: 0 1px 14px rgba(5, 5, 9, .95), 0 0 2px rgba(5, 5, 9, .8); }
  .sp .op-bar { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(5, 5, 9, .97); box-shadow: 0 -1px 0 rgba(240, 240, 240, .08); }
  .sp .op-bar .sp-btn { flex: 1; font-size: 16px; }
  .sp .footer { padding-bottom: 5.5rem; }
  .sp-load { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-btn, .sp-work a, .sp-canvas, .sp-still img { transition: none; }
}
.sp-nohud .sp-main, .sp-nohud .nav, .sp-nohud .sp-count, .sp-nohud .op-bar, .sp-nohud .footer, .sp-nohud .sp-load, .sp-nohud .nav-mobile { visibility: hidden; }
.sp-share .nav, .sp-share .sp-cta, .sp-share .sp-small, .sp-share .sp-count, .sp-share .sp-lead { display: none; }
.sp-share .sp-hero { align-items: center; padding-top: 3rem; }
.sp-static .sp-canvas { display: none; }