/* HOW Design Studio — ad landing pages (/3d-product-animation/).
   Loaded after tokens.css and site.css, which supply the palette, type, buttons, the brief form, the FAQ
   and the logo carousel. This is where ad clicks land, so it is built to scroll without a hitch: nothing
   animates while the page scrolls — no backdrop blur over video, no grain layer, no parallax, no filter
   transitions — and the few animations there are use transform or opacity only. */

.lp {
  --lp-max: 1320px;
  /* lines swipe rows and bleed sections up with the page's content edge */
  --lp-edge: max(var(--gutter), calc((100% - var(--lp-max)) / 2 + var(--gutter)));
  --lp-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --lp-radius: 20px;
  --lp-section: clamp(3.75rem, 2.5rem + 5vw, 7.5rem);
}
.lp-wrap { width: 100%; max-width: var(--lp-max); margin-inline: auto; padding-inline: var(--gutter); }
.lp main > section { padding-block: var(--lp-section); }

.lp-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--text-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 1rem;
}
.lp-title { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.25rem); max-width: 16ch; color: var(--color-ink); }
.lp-title em, .lp-hero h1 em { font-style: normal; color: var(--color-accent); }
.lp-lead { color: var(--color-ink-muted); font-size: var(--text-lead); max-width: 34ch; margin: 1rem 0 0; }
.lp-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem 2rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* ---------- header: solid, not blurred ---------- */
.lp-bar { position: sticky; top: 0; z-index: 100; background: rgba(0, 0, 0, 0.94); border-bottom: 1px solid var(--color-line-soft); }
.lp-bar .lp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.lp-bar .brand img { height: 36px; width: auto; }
.lp-bar-actions { display: flex; align-items: center; gap: 0.5rem; }
.lp-icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); color: var(--color-ink);
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.lp-icon-btn svg { width: 20px; height: 20px; }
.lp-icon-btn:hover { transform: translateY(-2px); }
.lp-wa { color: #25D366; border-color: rgba(37, 211, 102, 0.45); }
.lp-wa:hover { border-color: #25D366; }

/* ---------- hero ---------- */
.lp main > .lp-hero { padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.lp-hero-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .lp-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.lp-hero h1 { font-size: clamp(3rem, 1.5rem + 5.6vw, 6.25rem); max-width: 10ch; margin: 0; }
.lp-hero-sub { color: var(--color-ink-muted); font-size: var(--text-lead); max-width: 28ch; margin: 1.25rem 0 2rem; }
.lp-proof {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); list-style: none;
  margin: 2.25rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--color-line);
}
.lp-proof li { display: grid; gap: 0.35rem; }
.lp-proof strong {
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1; letter-spacing: -0.03em;
}
.lp-proof li > span, .lp-stats li > span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted);
}
.lp-hero-media { position: relative; }
/* the glow is a static gradient, not a blur filter */
.lp-hero-media::before {
  content: ""; position: absolute; inset: 6% 2% -4%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.42), transparent 72%);
}
.lp-hero-media picture { position: relative; z-index: 1; display: block; }
.lp-hero-media img { width: 100%; height: auto; border-radius: var(--lp-radius); }

/* a single, load-time entrance for the hero copy */
@keyframes lp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lp-rise { animation: lp-rise 0.55s var(--ease-out-expo) both; }
  .lp-rise:nth-child(2) { animation-delay: 0.05s; }
  .lp-rise:nth-child(3) { animation-delay: 0.1s; }
  .lp-rise:nth-child(4) { animation-delay: 0.15s; }
  .lp-rise:nth-child(5) { animation-delay: 0.2s; }
}

/* ---------- client logos ---------- */
.lp main > .lp-logos { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); overflow: hidden; border-block: 1px solid var(--color-line-soft); }
.lp-logos .lp-kicker { text-align: center; margin-bottom: 1.5rem; }

/* ---------- rows that swipe on phones ----------
   Native scrolling with snap points: no carousel script, nothing to stutter. The inline padding lines
   the first card up with the page's content edge while the row itself runs edge to edge. */
.lp-swipe {
  padding-inline: var(--lp-edge); scroll-padding-inline: var(--lp-edge);
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.lp-swipe::-webkit-scrollbar { display: none; }
.lp-reel-track, .lp-make-grid, .lp-steps { display: grid; gap: var(--lp-gap); margin: 0; list-style: none; }
.lp-film, .lp-card, .lp-step { scroll-snap-align: start; }
.lp-reel-track { grid-auto-flow: column; grid-auto-columns: clamp(210px, 62vw, 280px); overflow-x: auto; }
@media (max-width: 699px) {
  .lp-make-grid, .lp-steps { grid-auto-flow: column; overflow-x: auto; }
  .lp-make-grid { grid-auto-columns: 78%; }
  .lp-steps { grid-auto-columns: 70%; }
}
@media (min-width: 700px) {
  .lp-make-grid, .lp-steps { scroll-snap-type: none; }
  .lp-make-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- reel: real client films ---------- */
.lp-reel-nav { display: none; gap: 0.5rem; }
@media (min-width: 760px) { .lp-reel-nav { display: flex; } }
.lp-reel-nav button {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--color-ink); border: 1px solid rgba(255, 255, 255, 0.24);
  transition: border-color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.lp-reel-nav button svg { width: 20px; height: 20px; }
.lp-reel-nav button:hover:not(:disabled) { border-color: var(--color-accent); }
.lp-reel-nav button:disabled { opacity: 0.3; cursor: default; }
.lp-film {
  position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 16px; background: var(--color-surface-2);
}
.lp-film img, .lp-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the poster image shows until the film actually plays, so a video never flashes black */
.lp-film video { opacity: 0; transition: opacity 0.3s ease; }
.lp-film video.is-playing { opacity: 1; }
.lp-film::after {
  content: ""; position: absolute; inset: 60% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
.lp-film figcaption {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; z-index: 2;
  font-weight: 600; font-size: 0.9375rem; line-height: 1.3;
}
.lp-more { margin-top: 1.25rem; }
.lp-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-muted); font-size: var(--text-sm); text-decoration: none; }
.lp-more a:hover { color: var(--color-accent); }

/* ---------- what we make ---------- */
.lp-card { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--lp-radius); background: var(--color-surface); }
.lp-card picture, .lp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-card img { transition: transform 0.7s var(--ease-out-expo); }
.lp-card:hover img { transform: scale(1.03); }
.lp-card figcaption {
  position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 0.3rem;
  padding: 3.5rem 1.25rem 1.25rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 55%);
}
.lp-card h3 { font-size: var(--text-h3); }
.lp-card p { margin: 0; color: var(--color-ink-muted); font-size: 0.9375rem; }
.lp-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: 0.35rem 0.65rem; border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- process ---------- */
.lp-step { display: grid; gap: 0.6rem; align-content: start; }
.lp-step-media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: var(--color-surface); margin-bottom: 0.4rem; }
.lp-step-media picture, .lp-step-media > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-step-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--color-accent); }
.lp-step h3 { font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem); }
.lp-step p { margin: 0; color: var(--color-ink-muted); font-size: 0.9375rem; }
/* "Deliver": the lit render cut into the three ratios */
.lp-ratios { display: flex; align-items: center; justify-content: center; gap: 5%; padding: 10%; }
.lp-ratios .r { position: relative; flex: none; overflow: hidden; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.28); }
.lp-ratios .r916 { height: 80%; aspect-ratio: 9 / 16; }
.lp-ratios .r11 { height: 44%; aspect-ratio: 1; }
.lp-ratios .r169 { width: 34%; aspect-ratio: 16 / 9; }
.lp-ratios picture, .lp-ratios img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- the studio ---------- */
.lp-studio-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
@media (min-width: 960px) { .lp-studio-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lp-studio .social { margin-top: 1.5rem; }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-gap); list-style: none; margin: 0; padding: 0; }
.lp-stats li {
  display: grid; gap: 0.5rem; padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line-soft);
}
.lp-stats strong {
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -0.04em;
}
.lp-why { display: grid; gap: var(--lp-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); list-style: none; margin: clamp(2rem, 3vw, 3rem) 0 0; padding: 0; }
.lp-why li { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--color-line); font-weight: 600; }
.lp-why svg { width: 22px; height: 22px; flex: none; color: var(--color-accent); }

/* ---------- client reviews: review cards on a slow, endless slide ----------
   A CSS animation of a track holding four copies of the reviews: it runs on the compositor, pauses on hover
   or touch, and moves by exactly two copies so the loop is seamless on any screen width. */
.lp-reviews-viewport { position: relative; overflow: hidden; }
.lp-reviews-viewport::before, .lp-reviews-viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: min(10vw, 120px); pointer-events: none;
}
.lp-reviews-viewport::before { left: 0; background: linear-gradient(90deg, #000, transparent); }
.lp-reviews-viewport::after { right: 0; background: linear-gradient(270deg, #000, transparent); }
.lp-reviews-track { display: flex; gap: var(--lp-gap); width: max-content; padding: 0.5rem 0 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .lp-reviews-track { animation: lp-reviews 48s linear infinite; }
  .lp-reviews-viewport:hover .lp-reviews-track,
  .lp-reviews-viewport:focus-within .lp-reviews-track,
  .lp-reviews-viewport.is-paused .lp-reviews-track { animation-play-state: paused; }
}
@keyframes lp-reviews { to { transform: translateX(calc(-50% - var(--lp-gap) / 2)); } }
@media (prefers-reduced-motion: reduce) { .lp-reviews-viewport { overflow-x: auto; } }
.lp-review {
  flex: none; width: min(82vw, 360px); display: grid; gap: 0.7rem; align-content: start;
  padding: 1.2rem 1.3rem 1.35rem; border-radius: 14px; background: #FFFFFF; color: #0A0A0C;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
}
.lp-review-head { display: flex; align-items: center; gap: 0.75rem; }
.lp-review-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--av, #7C3AED); color: #FFFFFF; font-weight: 600; font-size: 1rem;
}
.lp-review-name { display: grid; line-height: 1.25; }
.lp-review-name strong { font-size: 0.95rem; font-weight: 600; color: #0A0A0C; }
.lp-review-name span { font-size: 0.8rem; color: rgba(10, 10, 12, 0.58); }
.lp-stars { display: flex; gap: 2px; color: #F5B301; }
.lp-stars svg { width: 17px; height: 17px; }
.lp-review p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(10, 10, 12, 0.78); }

/* ---------- FAQ and quote ---------- */
.lp-faq-grid, .lp-quote-grid { display: grid; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 900px) { .lp-faq-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (min-width: 980px) {
  .lp-quote-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; }
  .lp-quote-grid .form-panel { grid-row: span 2; }   /* the contact rows sit under the heading, beside the form */
  .lp-quote-direct { grid-column: 1; }
}
.lp-quote .contact-direct { margin-top: 0; }
.lp-project {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem;
  margin: 0 0 1.75rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(10, 10, 12, 0.14);
  font-weight: 600; color: #0A0A0C;
}
.lp-project span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--text-mono);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: rgba(10, 10, 12, 0.62);
}

/* ---------- phones: a quote bar that stays in reach ---------- */
.lp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: flex; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.94); border-top: 1px solid var(--color-line);
  transition: transform 0.3s var(--ease-out-expo);
}
.lp-sticky .btn { flex: 1; }
.lp-sticky.is-away { transform: translateY(110%); }
@media (min-width: 760px) { .lp-sticky { display: none; } }
@media (max-width: 759px) {
  .lp { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .lp-bar-actions .lp-wa { display: none; }   /* the bottom bar carries WhatsApp on phones */
}
.lp-sticky .btn svg { width: 18px; height: 18px; }
.lp-wa-solid { background: #25D366; border-color: #25D366; color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .lp-card img, .lp-film video, .lp-sticky { transition: none; }
}

/* ---------- the number in the header (wide screens) ---------- */
.lp-bar-call { display: none; }
@media (min-width: 900px) {
  .lp-bar-call {
    display: inline-flex; align-items: center; gap: 0.45rem; margin-right: 0.5rem;
    font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); text-decoration: none;
  }
  .lp-bar-call svg { width: 17px; height: 17px; color: var(--color-accent); }
  .lp-bar-call:hover { color: var(--color-accent); }
}

/* ---------- "Trusted by" ---------- */
.lp-trust {
  margin: 0 0 1.75rem; padding-inline: var(--gutter); text-align: center; color: var(--color-ink);
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1;
}
.lp-trust strong { color: var(--color-accent); }
.lp-num { display: inline-block; min-width: calc(var(--digits, 1) * 1ch); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- call / WhatsApp popup, on every screen ---------- */
.lp-contact {
  position: fixed; z-index: 130; display: grid; justify-items: end; gap: 0.75rem;
  right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 759px) { .lp-contact { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 1rem; } }
.lp-contact-card {
  position: relative; width: min(330px, calc(100vw - 2rem)); padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 18px; background: #FFFFFF; color: #0A0A0C; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform-origin: bottom right;
}
.lp-contact-close {
  position: absolute; top: 0.4rem; right: 0.4rem; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: #5F6368; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lp-contact-close:hover { background: #F1F3F4; }
.lp-contact-top {
  display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.35rem; color: #5F6368;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.lp-contact-top svg { width: 15px; height: 15px; color: var(--color-accent-deep); }
.lp-contact-number {
  display: block; color: #0A0A0C; text-decoration: none; letter-spacing: -0.02em;
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; font-weight: 700; font-size: 1.65rem;
}
.lp-contact-sub { margin: 0.2rem 0 1rem; color: #5F6368; font-size: 0.875rem; }
.lp-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.lp-contact-actions .btn { padding: 0.8rem 0.9rem; }
.lp-contact-actions .btn svg { width: 17px; height: 17px; }
.lp-btn-wa { background: #25D366; color: #FFFFFF; }
.lp-btn-wa:hover { filter: brightness(1.05); }
.lp-contact-bubble {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: #25D366; color: #FFFFFF; cursor: pointer; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
}
.lp-contact-bubble svg { width: 30px; height: 30px; }
@media (max-width: 759px) { .lp-contact-bubble { display: none; } }

/* ---------- motion ----------
   Everything below moves transform or opacity only. [data-reveal] elements start hidden only when the page's
   first script has added .lp-motion (IntersectionObserver available, no reduced-motion request), and lp.js
   marks each one .is-in once as it arrives. */
.lp-motion [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.8s var(--ease-out-expo), border-color 0.3s ease;
  transition-delay: calc(var(--d, 0) * 90ms);
}
.lp-motion [data-reveal="scale"] { transform: translateY(22px) scale(0.95); }
.lp-motion [data-reveal="left"] { transform: translateX(-28px); }
.lp-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* cards: the illustration settles into place as the card arrives, the ratio tag drops in after it */
.lp-motion .lp-card img { transform: scale(1.14); transition: transform 1.5s var(--ease-out-expo); }
.lp-motion .lp-card.is-in img { transform: scale(1); }
.lp-motion .lp-card.is-in:hover img { transform: scale(1.04); transition-duration: 0.7s; }
.lp-motion .lp-card .lp-tag { opacity: 0; transform: translateY(-8px); transition: opacity 0.5s ease 0.55s, transform 0.5s var(--ease-out-expo) 0.55s; }
.lp-motion .lp-card.is-in .lp-tag { opacity: 1; transform: none; }

/* process: a line draws across the four steps */
@media (min-width: 1000px) {
  .lp-steps { position: relative; padding-top: 1.75rem; }
  .lp-steps::before {
    content: ""; position: absolute; top: 0; left: var(--lp-edge); right: var(--lp-edge); height: 2px;
    background: var(--gradient-accent); transform-origin: left center;
  }
  .lp-motion .lp-steps::before { transform: scaleX(0); transition: transform 1.8s var(--ease-out-expo) 0.2s; }
  .lp-motion .lp-steps.is-in::before { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* hero: the headline rises word by word, the product floats, its glow breathes */
  .lp-word { display: inline-block; animation: lp-word 0.9s var(--ease-out-expo) both; animation-delay: calc(0.1s + var(--w, 0) * 0.08s); }
  .lp-hero-media picture { animation: lp-float 7s ease-in-out 1s infinite; }
  .lp-hero-media::before { animation: lp-glow 6s ease-in-out infinite; }

  /* a light sweep across the main buttons every few seconds */
  .lp-shine { position: relative; overflow: hidden; isolation: isolate; }
  .lp-shine::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-160%) skewX(-18deg); animation: lp-shine 4.2s ease-in-out 1.5s infinite;
  }

  /* the popup springs up; the bubble sends out a ring */
  .lp-contact-card:not([hidden]) { animation: lp-pop 0.5s var(--ease-out-expo) both; }
  .lp-contact-bubble { animation: lp-pop 0.5s var(--ease-out-expo) 0.8s both; }
  .lp-contact-bubble::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
    animation: lp-ring 2.4s ease-out 1.5s infinite;
  }
  .faq[open] .faq-a { animation: lp-fade 0.4s ease both; }
}
@keyframes lp-word { from { opacity: 0; transform: translateY(0.5em) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lp-glow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes lp-shine { 0%, 60% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes lp-pop { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes lp-ring { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes lp-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- quick-quote popup (5 s in; back 15 s after the first close and 8 s after the second) ----------
   A centred card on wide screens, a sheet from the bottom on phones. Closes on ×, Esc and the backdrop. */
.lp-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.lp-modal[hidden] { display: none; }
.lp-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.lp-modal-card {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: 1.6rem 1.4rem 1.4rem; border-radius: 22px; background: #FFFFFF; color: #0A0A0C;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
@media (max-width: 599px) {
  .lp-modal { place-items: end center; padding: 0; }
  .lp-modal-card { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
}
.lp-modal-card .lp-kicker { color: var(--color-accent-deep); margin-bottom: 0.5rem; }
.lp-modal-card h2 { margin: 0 0 1.1rem; padding-right: 2.5rem; color: #0A0A0C; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2rem); }
.lp-modal-card:focus { outline: none; }   /* the card only holds focus for keyboards and screen readers */
.lp-modal-close {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #F1F1F4; color: #0A0A0C; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lp-quick-form { display: grid; gap: 0.85rem; }
.lp-quick-field { display: grid; gap: 0.35rem; }
.lp-quick-field > span:first-child, .lp-quick-budget legend {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(10, 10, 12, 0.6);
}
.lp-quick-form input[type="text"], .lp-quick-form input[type="tel"], .lp-quick-form select {
  width: 100%; min-width: 0; padding: 0.8rem 0.9rem; border: 1px solid #E4E4EA; border-radius: 12px;
  background: #F6F6F8; color: #0A0A0C; font: inherit; font-size: 1rem;
}
.lp-quick-form input:focus, .lp-quick-form select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }
.lp-quick-phone { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.5rem; }
.lp-quick-budget { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.lp-quick-budget legend { width: 100%; margin-bottom: 0.35rem; padding: 0; }
.lp-quick-budget label { position: relative; }
.lp-quick-budget input { position: absolute; opacity: 0; width: 0; height: 0; }
.lp-quick-budget span {
  display: inline-block; padding: 0.55rem 0.9rem; border: 1px solid #DCDCE3; border-radius: 999px;
  color: #3A3A44; font-size: 0.875rem; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.lp-quick-budget input:checked + span { background: var(--gradient-accent); border-color: transparent; color: #FFFFFF; }
.lp-quick-budget input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lp-quick-form .btn { width: 100%; }
.lp-quick-status { margin: 0; font-size: 0.9rem; }
.lp-quick-status:empty { display: none; }
.lp-quick-status[data-state="err"] { color: #9A2B18; }
.lp-quick-status[data-state="ok"] { color: #14663F; font-weight: 600; }
.lp-quick-wa { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; color: #128C4B; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.lp-quick-wa svg { width: 18px; height: 18px; }
.lp-quick-note { margin: 0; text-align: center; font-size: 0.78rem; color: rgba(10, 10, 12, 0.5); }
.lp-modal.is-sent .lp-quick-field, .lp-modal.is-sent .lp-quick-budget, .lp-modal.is-sent .lp-quick-form .btn { display: none; }
html.lp-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lp-modal:not([hidden]) .lp-modal-backdrop { animation: lp-fade 0.3s ease both; }
  .lp-modal:not([hidden]) .lp-modal-card { animation: lp-pop 0.55s var(--ease-out-expo) both; }
}

/* ---------- music control: bottom left, solid (no backdrop blur over video) ---------- */
.lp .sound-toggle {
  left: calc(1rem + env(safe-area-inset-left, 0px)); right: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 125; backdrop-filter: none; background: rgba(0, 0, 0, 0.82);
}
@media (max-width: 759px) { .lp .sound-toggle { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }

/* =====================================================================================================
   Motion layer (assets/js/lp-motion.js). The page is complete without it; html.lp-gsap turns these on.
   ===================================================================================================== */

/* opening curtain: two panels lift away; holds no text, so the hero paints underneath from the first frame */
.cur-switchtain { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; animation: cur-switchtain-off 0.01s linear 1.2s forwards; }
@keyframes cur-switchtain-off { to { visibility: hidden; } }
.cur-switchtain i { display: block; background: #000; transform-origin: top center; animation: lp-lift 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.12s forwards; }
.cur-switchtain i:nth-child(2) { background: linear-gradient(180deg, #000 72%, #2A0F4D); animation-delay: 0.22s; }
@keyframes lp-lift { to { transform: scaleY(0); } }
/* phones skip it: ad visitors on a phone see the page from the first frame */
@media (prefers-reduced-motion: reduce), (hover: none) { .cur-switchtain { display: none; } }

/* reading progress */
.lp-scrollbar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 2px; background: var(--gradient-accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
html:not(.lp-gsap) .lp-scrollbar { display: none; }

/* a purple atmosphere that rises while the film turns */
.lp-atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(55% 45% at 72% 45%, rgba(124, 58, 237, 0.3), transparent 70%),
              radial-gradient(40% 35% at 18% 72%, rgba(168, 85, 247, 0.16), transparent 70%);
}
.lp main, .lp .site-footer { position: relative; z-index: 1; }

/* ---------- "Scroll to turn it": a real client film scrubbed by scroll ---------- */
.lp-turn-grid { display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .lp-turn-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .lp-gsap .lp-turn-grid { grid-template-columns: minmax(0, 1fr) auto; }
}
.lp-turn-media {
  position: relative; width: min(100%, 420px); aspect-ratio: 9 / 16; margin-inline: auto; overflow: hidden;
  border-radius: 24px; background: #0B0B0D; box-shadow: 0 40px 120px rgba(124, 58, 237, 0.25);
}
.lp-turn-poster, .lp-turn-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-turn-canvas { opacity: 0; transition: opacity 0.4s ease; }
.lp-turn.is-ready .lp-turn-canvas { opacity: 1; }
.lp-turn-beats { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; counter-reset: beat; }
.lp-turn-beats li {
  counter-increment: beat; display: flex; align-items: baseline; gap: 0.9rem; color: #FFFFFF;
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15;
  transition: color 0.45s ease, transform 0.6s var(--ease-out-expo);
}
.lp-turn-beats li::before {
  content: "0" counter(beat); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem;
  font-weight: 400; letter-spacing: 0.12em; color: var(--color-accent);
}
.lp-gsap .lp-turn-beats li { color: rgba(255, 255, 255, 0.45); }
.lp-gsap .lp-turn-beats li.is-on { color: #FFFFFF; transform: translateX(8px); }
.lp-turn-progress { position: absolute; left: 12%; right: 12%; bottom: 14px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.lp-turn-progress i { display: block; height: 100%; background: var(--gradient-accent); transform: scaleX(0); transform-origin: left center; }
html:not(.lp-gsap) .lp-turn-progress { display: none; }
/* with the motion layer: a tall runway with the stage stuck to the screen while the frames advance */
.lp-gsap .lp-turn { height: 340svh; }
.lp-gsap .lp main > .lp-turn { padding-block: 0; }
.lp-gsap .lp-turn-stage { position: sticky; top: 0; display: flex; align-items: center; height: 100svh; }
.lp-gsap .lp-turn-media { width: auto; height: min(80svh, 780px); }
@media (max-width: 759px) {
  .lp-gsap .lp-turn { height: 220svh; }
  .lp-gsap .lp-turn-stage { align-items: flex-start; padding-top: 76px; }
  .lp-gsap .lp-turn-media { height: min(56svh, 520px); }
  .lp-gsap .lp-turn-beats { margin-top: 0.9rem; gap: 0.35rem; }
  .lp-gsap .lp-turn-beats li { font-size: 1.05rem; }
}

/* ---------- wide screens: the film rail sticks and slides sideways; the section's height is the sideways travel ---------- */
.lp main > .lp-reel.is-rail { height: calc(100svh + var(--travel, 0px)); padding-block: 0; }
.lp-reel.is-rail .lp-reel-stage {
  position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center;
  height: 100svh; padding-top: 64px; overflow: clip;
}
.lp-reel.is-rail .lp-reel-track {
  overflow: visible; scroll-snap-type: none; will-change: transform;
  grid-auto-columns: clamp(190px, calc((100svh - 340px) * 0.5625), 320px);
}
.lp-reel.is-rail .lp-reel-nav { display: none; }

/* ---------- wide screens: one stage, four steps ---------- */
.lp-stage { display: none; }
@media (min-width: 960px) {
  .lp-process.is-staged .lp-process-grid {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
    max-width: var(--lp-max); margin-inline: auto; padding-inline: var(--gutter);
  }
  .lp-process.is-staged .lp-stage {
    display: block; position: sticky; top: 12svh; height: 76svh; overflow: hidden; border-radius: 24px; background: var(--color-surface);
  }
  .lp-stage-layer { position: absolute; inset: 0; }
  .lp-stage-layer picture, .lp-stage-layer > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* the deliver stage sizes its three frames by width so they always fit side by side */
  .lp-stage .lp-ratios { gap: 3%; padding: 9%; }
  .lp-stage .lp-ratios .r916 { height: auto; width: 24%; }
  .lp-stage .lp-ratios .r11 { height: auto; width: 32%; }
  .lp-stage .lp-ratios .r169 { width: 38%; }
  .lp-process.is-staged .lp-steps { display: block; padding-inline: 0; }
  .lp-process.is-staged .lp-steps::before { display: none; }
  .lp-process.is-staged .lp-step { display: flex; flex-direction: column; justify-content: center; min-height: 62svh; opacity: 0.3; transition: opacity 0.5s ease; }
  .lp-process.is-staged .lp-step.is-active { opacity: 1; }
  .lp-process.is-staged .lp-step-media { display: none; }
  .lp-process.is-staged .lp-step h3 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.5rem); }
  .lp-process.is-staged .lp-step p { font-size: var(--text-lead); }
}

/* ---------- mouse only: trailing cursor ring ---------- */
.lp-cursor { position: fixed; left: 0; top: 0; z-index: 400; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lp-cursor.is-on { opacity: 1; }
.lp-cursor span {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85); transition: transform 0.4s var(--ease-out-expo), background-color 0.3s ease, border-color 0.3s ease;
}
.lp-cursor.is-hover span { transform: scale(2.6); background: rgba(168, 85, 247, 0.18); border-color: var(--color-accent-bright); }

/* ---------- quick-quote popup: a quiet way out, and a chat-first third showing ---------- */
.lp-quick-later {
  justify-self: center; min-height: 44px; margin-top: -0.4rem; padding: 0 1rem; border: 0; background: none;
  color: rgba(10, 10, 12, 0.55); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lp-quick-later:hover { color: #0A0A0C; }
.lp-modal.is-sent .lp-quick-later { display: none; }
.lp-modal.is-chat .lp-quick-wa { order: -1; min-height: 48px; padding: 0 1.1rem; border-radius: 999px; background: #25D366; color: #053B1C; font-size: 1rem; }

/* ---------- discovery call: name and WhatsApp first (saved as a lead), then Calendly inside the same card ---------- */
.lp-book [hidden] { display: none !important; }
.lp-book-lead { margin: -0.5rem 0 0.1rem; color: rgba(10, 10, 12, 0.66); font-size: 0.95rem; }
.lp-book:not([data-step="details"]) .lp-book-card { width: min(760px, 100%); }
.lp-book-cal, .lp-book-done { display: grid; gap: 0.7rem; }
.lp-book-loading { margin: 0; font-size: 0.9rem; color: rgba(10, 10, 12, 0.6); }
.lp-book-frame { overflow: hidden; border: 1px solid #E4E4EA; border-radius: 14px; background: #FFFFFF; }
.lp-book-frame iframe { display: block; width: 100%; height: clamp(460px, var(--cal-h, 700px), calc(100dvh - 13rem)); border: 0; }
.lp-book-help { margin: 0; font-size: 0.875rem; color: rgba(10, 10, 12, 0.62); }
.lp-book-help a, .lp-book-done a { color: #128C4B; font-weight: 600; }
.lp-book-help.is-urgent { color: #0A0A0C; font-size: 0.95rem; }
.lp-book-done p { margin: 0; color: #3A3A44; }
.lp-book-done .lp-book-done-title { font-size: 1.3rem; font-weight: 700; color: #14663F; }
@media (max-width: 599px) {
  .lp-book:not([data-step="details"]) .lp-book-card { max-height: 100dvh; }
  .lp-book-frame iframe { height: calc(100dvh - 12.5rem); min-height: 420px; }
}

/* ---------- conversion pass (2026-09-11): readability, reach and the form on phones ---------- */
.lp .form-panel .form-note { color: rgba(10, 10, 12, 0.64); }
.lp .contact-direct a { min-height: 44px; }
.lp .form-panel .field .opt { color: rgba(10, 10, 12, 0.58); }
.lp .form-status .lp-status-wa {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.6rem; padding: 0 1.1rem; border-radius: 999px;
  background: #25D366; color: #053B1C; font-weight: 700; text-decoration: none;
}
@media (max-width: 759px) {
  .lp .sound-toggle { transition: opacity 0.2s ease, visibility 0.2s ease; }
  html.lp-form-on .lp .sound-toggle { opacity: 0; visibility: hidden; }   /* it would float over the form's fields */
}
@media (max-width: 599px) {
  .lp-modal-card { padding-top: 1.25rem; }
  .lp-modal-card h2 { margin-bottom: 0.8rem; font-size: 1.5rem; }
  .lp-quick-form { gap: 0.7rem; }
  .lp-quick-budget span { padding: 0.5rem 0.8rem; }
}

/* ---------- the popup's own budget switch sits in its head row ---------- */
.lp-quick-budget { position: relative; }
.lp-quick-budget .cur-switch { position: static; }
.lp-quick-budget legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-quick-budget-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; margin-bottom: 0.5rem; }
.lp-quick-budget-head > span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(10, 10, 12, 0.6);
}