/*
Theme Name: Venue Transform
Theme URI: https://venuetransform.com
Author: Venue Transform
Author URI: https://venuetransform.com
Description: Editorial design-and-build studio theme for Venue Transform — transforming venue, ballroom, hotel and resort interiors. Pure white, navy and gold, with Fraunces + Jost, a stacked video hero, marquee, image carousel, autoplay video showcase, a 10-step process and a styled WPForms contact section. Multi-page: Home, Products, Process, About.
Version: 4.12.9
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venue-transform
*/

/* ---- TOKENS ---- */
:root {
  --ink:       #0E1C2B;
  --ink-2:     #15293D;
  --ink-3:     #0A1622;
  --gold:      #C2A04A;
  --gold-light:#E0C47A;
  --gold-deep: #9C7E34;
  --blue:      #1D4E9E;   /* the ONE blue used for the hero points */
  --paper:     #FFFFFF;   /* totally white — no cream anywhere */
  --paper-2:   #F6F7F9;
  --surface:   #FFFFFF;
  --line:      #E6E8EE;
  --line-dk:   rgba(224,196,122,.16);
  --text:      #243140;
  --muted:     #5C6672;
  --on-dark:   #E9E3D5;
  --on-dark-m: #9FAAB6;
  --white:     #ffffff;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Jost", system-ui, "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(38px, 4.6vw, 68px); /* v4.8: media-first, less air */
  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --header-h: 76px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }

/* WP admin bar safety */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }

/* ---- LAYOUT ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- TYPE ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.06; color: var(--ink); letter-spacing: -.01em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep);
}
.eyebrow--light { color: var(--gold-light); }
.eyebrow__tick { width: 26px; height: 1px; background: currentColor; display: inline-block; opacity: .85; }

/* ---- BUTTONS ---- */
.btn {
  --bx: 30px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: .92rem; letter-spacing: .02em;
  padding: 15px var(--bx); border-radius: 100px; cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: 0 10px 28px rgba(160,128,52,.26); }
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(160,128,52,.34); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(14,28,43,.22); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--block { display: flex; width: 100%; }
.section--dark .btn--ghost { color: var(--on-dark); border-color: rgba(233,227,213,.24); }
.section--dark .btn--ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }

/* progress bar */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 200; transition: width .1s linear;
}

/* marquee */
.marquee {
  background: var(--ink-3); color: var(--on-dark-m);
  overflow: hidden; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.05);
}
.marquee__track { display: inline-flex; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: inline-flex; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 30px;
}
.marquee__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- HEADER ---- */
.header {
  position: sticky; top: 0; z-index: 150;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.header.is-scrolled {
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 34px rgba(14,28,43,.08);
  border-bottom-color: var(--line);
}
.header__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: min-height .35s var(--ease);
}
.header.is-scrolled .header__inner { min-height: 64px; }
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 50px; width: auto; transition: height .35s var(--ease); }
.header.is-scrolled .brand__logo { height: 42px; }
.brand__text { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); letter-spacing: .02em; }

.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; font-size: .9rem; font-weight: 400; color: var(--ink);
  padding: 8px 16px; border-radius: 100px; transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover, .nav__link.is-current { color: var(--gold-deep); }
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__cta-m { display: none; }
.header__cta { padding: 11px 24px; font-size: .86rem; }
.nav__close, .nav__toggle { display: none; }
.nav__toggle { width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }

/* current menu item from WP */
.nav__list .current-menu-item > a { color: var(--gold-deep); }
.nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* ---- HERO ---- */
.hero {
  position: relative; overflow: hidden; background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(16px, 2.4vw, 34px) 0 clamp(22px, 3vw, 42px);
}

.hero__glow {
  position: absolute; top: -12%; right: -8%; width: 62%; height: 84%; z-index: 0;
  background: radial-gradient(circle, rgba(194,160,74,.16), transparent 62%);
  pointer-events: none;
}
/* v4.5 — stacked hero: heading -> 4 blue points -> video -> buttons */
.hero__stack {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0;
}
.hero__eyebrow { margin-bottom: 20px; justify-content: center; }
.hero__title {
  font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.2rem); font-weight: 500; line-height: .98;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 24px;
}
/* ==== the 4 points — v4.11: heading-grade, animated pills ====
   Bigger, bolder, gold-kissed borders, a staggered pop-in entrance,
   a drawn-on check mark, a slow shimmer sweep and a gentle idle float. */
.hero__points {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 20px; margin-bottom: clamp(26px, 3.4vw, 42px);
}
.hero__point {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 100px;
  background:
    linear-gradient(135deg, var(--blue), #163e80) padding-box,
    linear-gradient(120deg, var(--gold), var(--gold-light), var(--gold)) border-box;
  border: 2px solid transparent;
  color: #fff; font-weight: 700; letter-spacing: .012em;
  font-size: clamp(1.06rem, .95rem + .6vw, 1.32rem);
  box-shadow: 0 12px 28px rgba(29, 78, 158, .32), 0 2px 6px rgba(14,28,43,.10);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.hero__point-t { position: relative; z-index: 2; }
/* the check sits in its own gold-ringed coin */
.hero__point-ic {
  position: relative; z-index: 2; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue); background: linear-gradient(135deg, #ffffff, #e9f0ff);
  box-shadow: 0 4px 12px rgba(10,24,46,.35), inset 0 0 0 1.5px rgba(29,78,158,.18);
}
.hero__point-ic svg, .hero__point > svg { stroke: currentColor; fill: none; stroke-width: 2.6; }
/* shimmer sweep layer */
.hero__point::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.85) 47%, rgba(224,196,122,.45) 53%, transparent 68%);
  transform: translateX(-130%);
}
/* hover: fills gold, text flips ink, coin flips navy */
.hero__point::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  opacity: 0; transition: opacity .3s var(--ease);
}
.hero__point:hover { transform: translateY(-4px) scale(1.03); color: var(--ink); box-shadow: 0 18px 40px rgba(160, 128, 52, .38); }
.hero__point:hover::before { opacity: 1; }
.hero__point:hover .hero__point-ic { background: linear-gradient(135deg, var(--blue), #2f66c2); color: #fff; box-shadow: 0 4px 12px rgba(29,78,158,.4), inset 0 0 0 1.5px rgba(255,255,255,.25); }

@media (prefers-reduced-motion: no-preference) {
  /* staggered pop-in entrance — "backwards" fill so hover transitions
     regain control of transform once the entrance finishes */
  .hero__point {
    animation:
      pillPop .8s cubic-bezier(.18,.9,.24,1.12) calc(.55s + var(--pt-i, 0) * .14s) backwards,
      pillFloat 5.2s ease-in-out calc(2.2s + var(--pt-i, 0) * .5s) infinite;
  }
  .hero__point:hover { animation-play-state: paused; } /* float yields to the hover lift */
  .hero__point::after { animation: pillShine 5.4s var(--ease) calc(1.6s + var(--pt-i, 0) * .5s) infinite; }
  /* check draws itself on */
  .hero__point-ic svg path {
    stroke-dasharray: 24; stroke-dashoffset: 24;
    animation: pillCheck .55s var(--ease) calc(.95s + var(--pt-i, 0) * .14s) forwards;
  }
  /* soft radar ping behind the coin */
  .hero__point-ic::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(224,196,122,.7);
    animation: pillPing 3.4s ease-out calc(1.4s + var(--pt-i, 0) * .5s) infinite;
  }
}
@keyframes pillPop   { 0% { opacity: 0; transform: translateY(26px) scale(.6); filter: blur(4px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pillFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes pillShine { 0%, 55% { transform: translateX(-130%); } 75%, 100% { transform: translateX(130%); } }
@keyframes pillCheck { to { stroke-dashoffset: 0; } }
@keyframes pillPing  { 0% { transform: scale(.9); opacity: .8; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.hero__sub { font-size: 1.02rem; font-weight: 300; color: var(--muted); max-width: 58ch; margin: 26px auto 0; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(24px, 3vw, 34px); }
.hero__addr {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .86rem; letter-spacing: .04em; color: var(--ink);
  margin-top: 16px;
}
.hero__addr svg { color: var(--gold-deep); flex: 0 0 auto; }

/* full 16:9 video (no crop) + offset gold frame + floating chip */
.hero__media { width: 100%; max-width: 1000px; margin-inline: auto; }
/* v4.8 — the hero film is the hero: FULL-BLEED, cinema height */
.hero__media.hero__media--bleed { width: 100%; max-width: none; margin: clamp(14px, 2vw, 24px) 0; }
.hero__stack--after { margin-top: 0; }
.hero__media--bleed .hero__stagewrap { padding: 0; max-width: none; }
.hero__media--bleed .hero__stage {
  border-radius: 0; border: 0;
  aspect-ratio: 16 / 9; width: 100%; max-width: none;
  max-height: min(86vh, 740px); min-height: 320px;
}
.hero__media--bleed .hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__media--bleed .hero__frame { display: none; }
@media (max-width: 640px) {
  .hero__media--bleed .hero__stage { aspect-ratio: auto; height: 62vw; min-height: 240px; }
}
.hero__stagewrap { position: relative; }
.hero__frame {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transform: translate(18px, 18px);
  border: 1.5px solid var(--gold); border-radius: clamp(14px, 1.5vw, 20px);
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.98rem, .85rem + .45vw, 1.2rem); color: var(--gold-deep);
}
.hero__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .5; flex: 0 0 auto; }
.hero__stage {
  position: relative; z-index: 2; aspect-ratio: 16 / 9; width: 100%;
  border-radius: clamp(14px, 1.5vw, 20px); overflow: hidden; background: var(--ink-3);
  box-shadow: 0 44px 110px rgba(14,28,43,.30), 0 14px 40px rgba(14,28,43,.16), 0 0 60px rgba(194,160,74,.20);
}
.hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(224,196,122,.5);
}
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); will-change: transform; }

/* soft vignette — draws the eye to the centre */
.hero__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 78% 78% at 50% 46%, transparent 52%, rgba(10,22,34,.34) 100%);
  opacity: .68; transition: opacity .35s var(--ease);
}

/* lighter, slimmer badge */
.hero__chip {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(10,22,34,.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92); font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.hero__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); flex: 0 0 auto;
  animation: heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(224,196,122,.32); } 50% { box-shadow: 0 0 0 6px rgba(224,196,122,0); } }

/* thin playback progress bar (silent autoplay indicator) */
.hero__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: rgba(255,255,255,.14); }
.hero__progress-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .2s linear; }

/* hover (scale + parallax added via JS) */
.hero__stagewrap:hover .hero__frame { border-color: var(--gold-light); transform: translate(14px, 14px); }
.hero__stagewrap:hover .hero__vignette { opacity: 1; }

/* entrance (pure CSS — runs with or without JS, never hides content forever) */
.hero__eyebrow, .hero__title, .hero__points, .hero__sub, .hero__actions, .hero__addr {
  animation: heroUp .9s var(--ease) both;
}
.hero__title    { animation-delay: .06s; }
.hero__points   { animation-delay: .14s; }
.hero__actions  { animation-delay: .30s; }
.hero__sub      { animation-delay: .36s; }
.hero__addr     { animation-delay: .42s; }
.hero__media    { animation: heroUp 1s var(--ease) .2s both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* hero responsive */
@media (max-width: 640px) {
  .hero__points { gap: 10px 12px; }
  .hero__point { font-size: 1rem; padding: 11px 18px; gap: 9px; }
  .hero__point-ic { width: 25px; height: 25px; }
  .hero__frame { transform: translate(10px, 10px); }
}

/* ---- SECTION HELPERS ---- */
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--white); }

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); }
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head__sub { font-size: 1.08rem; font-weight: 300; color: var(--muted); max-width: 52ch; margin-top: 14px; }
.sec-head--center .sec-head__sub { margin-inline: auto; }

/* ---- STATEMENT ---- */
.statement { padding-block: var(--section-y); background: var(--paper); }
.statement__grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.statement__grid > .eyebrow { padding-top: 14px; }
.statement__lead {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); font-weight: 400; line-height: 1.14;
  color: var(--ink); margin-bottom: 28px; max-width: 18ch;
}
.statement__p { font-size: 1.12rem; font-weight: 300; color: var(--muted); max-width: 56ch; margin-bottom: 48px; }
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.assure__item { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.assure__no { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--gold-deep); }
.assure__txt { font-size: .96rem; color: var(--muted); }
.assure__txt strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; font-size: 1.02rem; }

/* ---- WHAT WE TRANSFORM ---- */
.transform { padding-block: var(--section-y); }
.tlist { border-bottom: 1px solid var(--line-dk); }
.tlist__row {
  display: grid; grid-template-columns: 64px 1.1fr 1.4fr; gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) 12px; border-top: 1px solid var(--line-dk);
  transition: background .35s var(--ease), padding-left .35s var(--ease);
}
.tlist__row:hover { background: rgba(224,196,122,.05); padding-left: 22px; }
.tlist__no { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold); opacity: .8; }
.tlist__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); color: var(--white); transition: color .3s var(--ease); }
.tlist__row:hover .tlist__name { color: var(--gold-light); }
.tlist__note { font-size: .96rem; font-weight: 300; color: var(--on-dark-m); }

/* ---- PROCESS (homepage 4-step) ---- */
.process { padding-block: var(--section-y); background: var(--surface); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.step { padding-top: 26px; border-top: 2px solid var(--ink); }
.step__no { display: block; font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--gold-deep); margin-bottom: 16px; }
.step__title { font-size: 1.45rem; font-weight: 500; margin-bottom: 10px; }
.step__txt { font-size: .96rem; font-weight: 300; color: var(--muted); }
.process__cta { text-align: center; margin-top: clamp(40px, 5vw, 60px); }

/* ---- FOUNDER ---- */
.founder { padding-block: var(--section-y); }
.founder__grid { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.founder__media { position: relative; }
.founder__media img { width: 100%; border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.founder__rule { position: absolute; left: -18px; top: -18px; right: 36px; bottom: 36px; border: 1px solid var(--gold); border-radius: var(--radius); z-index: -1; }
.founder__body .eyebrow { margin-bottom: 22px; }
.founder__quote {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.28; color: var(--white); margin-bottom: 28px;
}
.founder__name { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); }
.founder__role { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-m); margin-bottom: 28px; }
.founder__points { display: grid; gap: 14px; margin-bottom: 34px; }
.founder__points li { position: relative; padding-left: 26px; font-size: 1rem; font-weight: 300; color: var(--on-dark); }
.founder__points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--gold); }

/* ---- CONTACT ---- */
.contact { padding-block: var(--section-y); background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.contact__info .eyebrow { margin-bottom: 20px; }
.contact__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-bottom: 18px; }
.contact__lead { font-size: 1.08rem; font-weight: 300; color: var(--muted); max-width: 42ch; margin-bottom: 34px; }
.contact__list { display: grid; gap: 16px; margin-bottom: 30px; }
.contact__list li { display: flex; align-items: center; gap: 14px; font-size: 1rem; }
.contact__list a { color: var(--ink); transition: color .25s var(--ease); }
.contact__list a:hover { color: var(--gold-deep); }
.contact__ic {
  width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--gold-deep); background: var(--surface);
}
.contact__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep);
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface);
}
.contact__form-wrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 44px); box-shadow: 0 24px 60px rgba(14,28,43,.10);
}

/* ---- WPForms theming ---- */
.vt-form .wpforms-form { margin: 0; }
.vt-form .wpforms-field { padding: 0 0 16px; }
.vt-form .wpforms-field-label,
.vt-form .wpforms-field label {
  font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .02em;
  color: var(--ink); margin-bottom: 8px; display: block;
}
.vt-form .wpforms-field-row { margin: 0; }
.vt-form input[type="text"],
.vt-form input[type="email"],
.vt-form input[type="tel"],
.vt-form input[type="url"],
.vt-form input[type="number"],
.vt-form input[type="password"],
.vt-form select,
.vt-form textarea {
  width: 100%; font-family: var(--sans); font-size: .98rem; font-weight: 300; color: var(--text);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; box-shadow: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.vt-form select {
  cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7E34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.vt-form textarea { resize: vertical; min-height: 120px; }
.vt-form input::placeholder, .vt-form textarea::placeholder { color: #9aa3ad; }
.vt-form input:focus, .vt-form select:focus, .vt-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(194,160,74,.16);
}
.vt-form .wpforms-field-description { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.vt-form .wpforms-required-label { color: #c0563f; }
.vt-form .wpforms-error,
.vt-form label.wpforms-error { color: #c0563f; font-size: .78rem; margin-top: 6px; }
.vt-form .wpforms-field input.wpforms-error,
.vt-form .wpforms-field textarea.wpforms-error,
.vt-form .wpforms-field select.wpforms-error { border-color: #c0563f; box-shadow: 0 0 0 4px rgba(192,86,63,.12); }
.vt-form .wpforms-submit-container { margin-top: 6px; }
.vt-form button[type="submit"],
.vt-form .wpforms-submit {
  width: 100%; font-family: var(--sans); font-weight: 500; font-size: .92rem; letter-spacing: .02em;
  background: var(--gold); color: var(--ink); border: none; border-radius: 100px;
  padding: 15px 30px; cursor: pointer; box-shadow: 0 10px 28px rgba(160,128,52,.26);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vt-form button[type="submit"]:hover,
.vt-form .wpforms-submit:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(160,128,52,.34); }
.vt-form .wpforms-confirmation-container-full,
.vt-form .wpforms-confirmation-container {
  background: rgba(194,160,74,.13); border: 1px solid rgba(194,160,74,.4);
  border-radius: var(--radius-sm); padding: 16px 18px; color: var(--ink); margin: 0;
}
.vt-form__fallback { display: grid; gap: 16px; }

/* ---- FOOTER ---- */
.footer { background: var(--ink-3); color: var(--on-dark-m); padding-top: clamp(56px, 7vw, 96px); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer__logo-chip { display: inline-flex; padding: 10px 14px; background: var(--surface); border-radius: 8px; margin-bottom: 20px; }
.footer__logo-chip img { height: 34px; width: auto; }
.footer__about { font-size: .92rem; font-weight: 300; max-width: 34ch; line-height: 1.7; }
.footer__h { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 20px; }
.footer__col a { display: block; font-size: .92rem; color: var(--on-dark-m); padding: 6px 0; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--gold-light); }
.footer__contact p { font-size: .92rem; line-height: 1.7; margin-bottom: 10px; }
.footer__cta { margin-top: 20px; padding: 11px 22px; font-size: .84rem; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px; font-size: .82rem; flex-wrap: wrap; }
.footer__legal { display: inline-flex; gap: 12px; align-items: center; }
.footer__legal span { opacity: .5; }
.footer__legal a:hover { color: var(--gold-light); }

/* ---- BACK TO TOP ---- */
.totop {
  position: fixed; right: clamp(18px, 3vw, 36px); bottom: clamp(18px, 3vw, 36px); z-index: 140;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(160,128,52,.34);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s var(--ease), visibility .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--gold-light); transform: translateY(-3px); }

/* ---- REVEAL v4.5 (impossible to white-screen) ----
   Content is fully visible by default — nothing waits for JavaScript.
   When JS is alive it adds .is-visible as an element scrolls into view,
   which only ADDS a soft rise-in animation. If JS fails, is blocked or
   is delayed by a cache plugin, the page simply shows everything. */
.reveal { backface-visibility: hidden; }
.reveal.is-visible { animation: vtRise .85s var(--ease) both; }
@keyframes vtRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   NEW COMPONENTS — page hero, breadcrumb, products, 10-step process,
   video showcase, work carousel, values, focus styles.
   (Built on the same tokens / aesthetic.)
   ===================================================================== */

/* breadcrumb */
.crumbs { font-family: var(--sans); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--gold-deep); }
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .5; }

/* page hero */
.pagehero { position: relative; padding-block: clamp(40px, 5.5vw, 72px) clamp(40px, 6vw, 72px); background: var(--paper); border-bottom: 1px solid var(--line); }
.pagehero__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.pagehero .crumbs { justify-content: center; }
.pagehero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); margin-bottom: 20px; }
.pagehero__sub { font-size: 1.12rem; font-weight: 300; color: var(--muted); max-width: 56ch; margin-inline: auto; }

/* generic WP page content */
.page-content { max-width: 760px; margin-inline: auto; padding: clamp(56px,7vw,90px) var(--gutter); }
.page-content h2 { font-size: clamp(1.7rem,1.2rem+1.6vw,2.4rem); margin: 1.4em 0 .5em; }
.page-content h3 { font-size: 1.4rem; margin: 1.3em 0 .4em; }
.page-content p { margin-bottom: 1.1em; font-weight: 300; }
.page-content img { border-radius: var(--radius); margin: 1.4em 0; }
.page-content a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.page-content ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1.1em; }
.page-content li { margin-bottom: .4em; }

/* products */
.products { padding-block: var(--section-y); background: var(--paper); }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); }
.product:first-child { border-top: none; }
.product:nth-child(even) .product__media { order: 2; }
.product__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(14,28,43,.14); aspect-ratio: 4 / 3; background: var(--paper-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.product:hover .product__media img { transform: scale(1.05); }
.product__tag { position: absolute; top: 18px; left: 18px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.94); padding: 8px 14px; border-radius: 100px; backdrop-filter: blur(4px); }
.product__no { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-deep); margin-bottom: 14px; display: block; }
.product__title { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); margin-bottom: 10px; }
.product__lead { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--gold-deep); margin-bottom: 16px; }
.product__txt { font-size: 1.02rem; font-weight: 300; color: var(--muted); margin-bottom: 22px; }
.product__feats { display: grid; gap: 12px; margin-bottom: 28px; }
.product__feats li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--text); }
.product__feats svg { flex: 0 0 auto; margin-top: 3px; color: var(--gold-deep); }

/* 10-step process timeline */
.ptimeline { padding-block: var(--section-y); background: var(--surface); }
.psteps { max-width: 860px; margin-inline: auto; position: relative; }
.psteps::before { content: ""; position: absolute; left: 28px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(var(--gold), var(--line)); }
.pstep { position: relative; padding: 0 0 clamp(26px, 4vw, 42px) 84px; }
.pstep:last-child { padding-bottom: 0; }
.pstep__no { position: absolute; left: 0; top: -2px; width: 57px; height: 57px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); background: var(--gold); box-shadow: 0 0 0 6px var(--surface); }
.pstep__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.pstep__card:hover { transform: translateX(6px); border-color: var(--gold); }
.pstep__title { font-size: 1.4rem; margin-bottom: 8px; }
.pstep__txt { font-size: 1rem; font-weight: 300; color: var(--muted); margin: 0; }

/* video showcase (autoplay, full-play, original form) */
.vshow { padding-block: var(--section-y); background: var(--ink); color: var(--on-dark); }
.vshow .sec-head__title { color: var(--white); }
.vcar { position: relative; }
.vcar__track { display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: none; }
.vcar__track::-webkit-scrollbar { display: none; }
.vcar__item { position: relative; flex: 0 0 auto; scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.vcar__item video { display: block; height: min(620px, 72vh); width: auto; max-width: 88vw; }
.vcar__sound { position: absolute; bottom: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(10,22,34,.6); border: 1px solid rgba(224,196,122,.4); color: var(--gold-light); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background .25s var(--ease), color .25s var(--ease); z-index: 2; }
.vcar__sound:hover { background: var(--gold); color: var(--ink); }
.vcar__nav { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.vcar__btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(224,196,122,.32); background: transparent; color: var(--on-dark); display: flex; align-items: center; justify-content: center; transition: .25s var(--ease); }
.vcar__btn:hover { background: var(--gold); border-color: transparent; color: var(--ink); }

/* work carousel (homepage — images only) */
.work { padding-block: var(--section-y); background: var(--paper); }
.wcar { position: relative; }
.wcar__track { display: flex; gap: clamp(12px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: none; }
.wcar__track::-webkit-scrollbar { display: none; }
.wcar__slide { flex: 0 0 min(82vw, 660px); scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); box-shadow: 0 14px 40px rgba(14,28,43,.12); }
.wcar__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.wcar__slide:hover img { transform: scale(1.05); }
.wcar__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.wcar__btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: .25s var(--ease); }
.wcar__btn:hover { background: var(--gold); border-color: transparent; color: var(--ink); }

/* values (about) */
.values { padding-block: var(--section-y); background: var(--paper); }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 38px); transition: transform .35s var(--ease), border-color .35s var(--ease); }
.value:hover { transform: translateY(-4px); border-color: var(--gold); }
.value__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--gold-deep); margin-bottom: 20px; }
.value__title { font-size: 1.35rem; margin-bottom: 10px; }
.value__txt { font-size: .98rem; font-weight: 300; color: var(--muted); margin: 0; }

/* focus + skip link */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--ink); padding: 12px 20px; z-index: 300; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* pagination + WP utility */
.vt-pagination { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
.vt-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.vt-pagination .page-numbers.current { background: var(--gold); border-color: transparent; }
.alignnone { margin: 1em 0; }
.aligncenter { display: block; margin: 1.4em auto; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--muted); text-align: center; margin-top: 8px; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .statement__grid { grid-template-columns: 1fr; gap: 26px; }
  .statement__grid > .eyebrow { padding-top: 0; }
  .founder__grid { grid-template-columns: 1fr; gap: 36px; }
  .founder__rule { right: 24px; bottom: 24px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__info { max-width: 560px; }
  .product { grid-template-columns: 1fr; gap: 26px; }
  .product:nth-child(even) .product__media { order: 0; }
  .values__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 160;
    background: var(--paper); padding: 88px 32px 32px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -30px 0 60px rgba(14,28,43,.18);
  }
  body.nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  /* v4.5 fix: the overlay used to sit ABOVE the drawer (the header's
     z-index traps everything inside its stacking context), which made the
     open menu completely untappable on mobile. Overlay now sits below the
     header, and the header is lifted while the menu is open. */
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10,22,34,.5); z-index: 140; }
  body.nav-open .header { z-index: 170; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { padding: 14px 8px; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link::after { display: none; }
  .nav__close { display: inline-flex; position: absolute; top: 26px; right: 26px; color: var(--ink); }
  .nav__cta-m { display: block; margin-top: 18px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .assure { grid-template-columns: 1fr; gap: 18px; }
  .values__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .header__inner { padding-inline: 22px; }
  .brand__logo { height: 42px; }
  .steps { grid-template-columns: 1fr; }
  .tlist__row { grid-template-columns: 40px 1fr; row-gap: 6px; }
  .tlist__note { grid-column: 2; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .pstep { padding-left: 66px; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* =====================================================================
   v2.1 — RICHER CONTENT + BIGGER MOTION + PREMIUM TEXTURES
   ===================================================================== */

/* v4.5: paper-grain overlay removed — the page background stays pure white */

/* ==========================================================================
   v4.9 — BRAND PRELOADER (fail-open)
   Visible only until JS lifts it (2.2–4s) — and even with NO JavaScript a
   pure-CSS animation removes it at ~4.4s, so it can never trap the page.
   ========================================================================== */
/* base + escape hatch live INLINE in header.php so they work even if this
   stylesheet is delayed; only the decorative glow is layered here */
.vtloader {
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(194,160,74,.12), transparent 70%),
    var(--ink);
}

.vtloader__inner { text-align: center; padding: 0 24px; }
.vtloader__kicker {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-light); margin: 0 0 18px;
  opacity: 0; animation: vtLdFade .8s var(--ease) .15s forwards;
}
.vtloader__word {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 .45em; color: #fff;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 1.3rem + 5vw, 4.6rem);
  line-height: 1.05; letter-spacing: .04em;
}
.vtloader__w { display: inline-flex; overflow: hidden; }
.vtloader__w i {
  font-style: normal; display: inline-block;
  transform: translateY(110%); opacity: 0;
  animation: vtLdLetter .7s cubic-bezier(.22,.9,.24,1) forwards;
}
.vtloader__w:last-child i { color: var(--gold-light); }
.vtloader__bar {
  display: block; width: min(300px, 56vw); height: 2px;
  margin: 26px auto 0; background: rgba(255,255,255,.14);
  border-radius: 2px; overflow: hidden;
  opacity: 0; animation: vtLdFade .6s var(--ease) .5s forwards;
}
.vtloader__bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  transform: translateX(-101%);
  animation: vtLdBar 1.8s cubic-bezier(.3,.6,.3,1) .25s forwards;
}
@keyframes vtLdLetter { to { transform: translateY(0); opacity: 1; } }
@keyframes vtLdFade   { to { opacity: 1; } }
@keyframes vtLdBar    { 0% { transform: translateX(-101%); } 70% { transform: translateX(-18%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .vtloader { animation-delay: .9s; }
  .vtloader__w i { animation-duration: .01s; animation-delay: 0s !important; }
  .vtloader__bar { display: none; }
}

/* dark sections get the navy mesh */
.section--dark { background-color: var(--ink); background-image: url("assets/img/navy-mesh.jpg"); background-size: cover; background-position: center; }
.vshow { background-color: var(--ink); background-image: url("assets/img/navy-mesh.jpg"); background-size: cover; background-position: center; }
.footer { background-color: var(--ink-3); background-image: url("assets/img/navy-mesh.jpg"); background-size: cover; background-position: bottom; }

/* gold foil divider */
.divider { height: 3px; border: 0; margin: 0; background-image: url("assets/img/gold-foil.jpg"); background-size: cover; background-position: center; opacity: .9; }
.divider--soft { opacity: .5; }

/* ---- BIGGER REVEAL MOTION (still additive-only) ---- */
.reveal--lg.is-visible    { animation-name: vtRiseLg; animation-duration: 1s; }
.reveal--left.is-visible  { animation-name: vtLeft; }
.reveal--right.is-visible { animation-name: vtRight; }
.reveal--zoom.is-visible  { animation-name: vtZoom; }
@keyframes vtRiseLg { from { opacity: 0; transform: translateY(64px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vtLeft   { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes vtRight  { from { opacity: 0; transform: translateX(48px); }  to { opacity: 1; transform: none; } }
@keyframes vtZoom   { from { opacity: 0; transform: scale(.9); }         to { opacity: 1; transform: none; } }
/* generic stagger for grids — children rise one after another once visible */
[data-stagger].is-visible > * { animation: vtRise .75s var(--ease) both; }
[data-stagger].is-visible > *:nth-child(2) { animation-delay: .08s; }
[data-stagger].is-visible > *:nth-child(3) { animation-delay: .16s; }
[data-stagger].is-visible > *:nth-child(4) { animation-delay: .24s; }
[data-stagger].is-visible > *:nth-child(5) { animation-delay: .32s; }
[data-stagger].is-visible > *:nth-child(6) { animation-delay: .40s; }
[data-stagger].is-visible > *:nth-child(n+7) { animation-delay: .46s; }

/* parallax media wrapper */
.parallax { overflow: hidden; }
.parallax img, .parallax video { will-change: transform; }

/* ---- STATS BAND (count-up) ---- */
.stats { padding-block: clamp(56px, 7vw, 96px); }
.stats--dark { background-color: var(--ink); background-image: url("assets/img/navy-mesh.jpg"); background-size: cover; color: var(--on-dark); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.stat { text-align: center; padding: 18px 10px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(224,196,122,.22); }
.stat__num { font-family: var(--serif); font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: 1; color: var(--gold-light); letter-spacing: -.02em; }
.stats:not(.stats--dark) .stat__num { color: var(--gold-deep); }
.stat__suffix { color: var(--gold); }
.stat__label { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-m); margin-top: 12px; }
.stats:not(.stats--dark) .stat__label { color: var(--muted); }

/* ---- FEATURE BANDS (generic alternating image + text) ---- */
.feature { padding-block: clamp(48px, 6vw, 88px); }
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.feature--flip .feature__media { order: 2; }
.feature__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 30px 70px rgba(14,28,43,.16); background: var(--paper-2); }
.feature__media img, .feature__media video { width: 100%; height: 100%; object-fit: cover; }
.feature__media .product__tag { position: absolute; }
.feature__eyebrow { margin-bottom: 18px; }
.feature__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); margin-bottom: 16px; }
.feature__txt { font-size: 1.06rem; font-weight: 300; color: var(--muted); margin-bottom: 22px; }
.section--dark .feature__txt { color: var(--on-dark-m); }
.feature__list { display: grid; gap: 12px; margin-bottom: 28px; }
.feature__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: var(--text); }
.section--dark .feature__list li { color: var(--on-dark); }
.feature__list svg { flex: 0 0 auto; margin-top: 3px; color: var(--gold-deep); }
.section--dark .feature__list svg { color: var(--gold-light); }

/* ---- MATERIALS / FINISHES ---- */
.materials { padding-block: var(--section-y); background: var(--surface); }
.mat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.mat { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.5vw, 32px); background: var(--white); transition: transform .35s var(--ease), border-color .35s var(--ease); }
.mat:hover { transform: translateY(-5px); border-color: var(--gold); }
.mat__sw { width: 100%; height: 84px; border-radius: 10px; margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.mat__name { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 6px; }
.mat__txt { font-size: .9rem; font-weight: 300; color: var(--muted); margin: 0; }

/* ---- TESTIMONIALS ---- */
.testimonials { padding-block: var(--section-y); background: var(--paper); }
.tcar { position: relative; }
.tcar__track { display: flex; gap: clamp(16px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: none; }
.tcar__track::-webkit-scrollbar { display: none; }
.tcard { flex: 0 0 min(88vw, 440px); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); box-shadow: 0 18px 50px rgba(14,28,43,.08); display: flex; flex-direction: column; }
.tcard__stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; font-size: 1rem; }
.tcard__quote { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--ink); margin-bottom: 22px; flex: 1; }
.tcard__who { display: flex; align-items: center; gap: 14px; }
.tcard__av { width: 46px; height: 46px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--serif); color: var(--gold-deep); font-size: 1.2rem; }
.tcard__name { font-weight: 500; color: var(--ink); font-size: .98rem; }
.tcard__role { font-size: .8rem; color: var(--muted); }

/* ---- FAQ ACCORDION ---- */
.faq { padding-block: var(--section-y); background: var(--surface); }
.faq__wrap { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; font-family: var(--serif); font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem); color: var(--ink); cursor: pointer; }
.faq__q .faq__ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.faq__item.is-open .faq__ic { transform: rotate(45deg); background: var(--gold); color: var(--ink); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a-inner { padding: 0 4px 24px; color: var(--muted); font-weight: 300; max-width: 64ch; }

/* ---- CTA BAND ---- */
.ctaband { padding-block: clamp(64px, 8vw, 120px); background-color: var(--ink); background-image: url("assets/img/navy-mesh.jpg"); background-size: cover; background-position: center; text-align: center; }
.ctaband__inner { max-width: 760px; margin-inline: auto; }
.ctaband h2 { color: var(--white); font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); margin-bottom: 18px; }
.ctaband p { color: var(--on-dark-m); font-size: 1.12rem; font-weight: 300; margin-bottom: 32px; max-width: 52ch; margin-inline: auto; }
.ctaband__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- VIDEO SHOWCASE — featured layout + captions ---- */
.vshow__intro { max-width: 60ch; margin: 0 auto clamp(40px,5vw,60px); text-align: center; color: var(--on-dark-m); font-weight: 300; font-size: 1.08rem; }
.vfeature { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(16px, 2vw, 26px); margin-bottom: clamp(16px, 2vw, 26px); }
.vfeature__main, .vfeature__side { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.vfeature__main { aspect-ratio: 16 / 10; }
.vfeature__side { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2vw, 26px); background: transparent; box-shadow: none; }
.vfeature__side .vtile { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.vshow video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 20px 16px; background: linear-gradient(0deg, rgba(8,16,26,.86), rgba(8,16,26,0)); }
.vcap__t { font-family: var(--serif); font-size: 1.1rem; color: var(--white); display: block; }
.vcap__s { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); }
.vsound { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(10,22,34,.6); border: 1px solid rgba(224,196,122,.4); color: var(--gold-light); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background .25s var(--ease), color .25s var(--ease); z-index: 3; }
.vsound:hover { background: var(--gold); color: var(--ink); }
.vshow__cta { text-align: center; margin-top: clamp(34px, 4vw, 52px); }

/* process intro stats inline */
.lead-block { max-width: 760px; margin: 0 auto clamp(40px,5vw,64px); text-align: center; }
.lead-block p { font-size: 1.12rem; font-weight: 300; color: var(--muted); }

/* responsive for v2.1 */
@media (max-width: 980px) {
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .stat:nth-child(3)::before, .stat:nth-child(1)::before { display: none; }
  .feature__grid { grid-template-columns: 1fr; gap: 28px; }
  .feature--flip .feature__media { order: 0; }
  .mat__grid { grid-template-columns: 1fr 1fr; }
  .vfeature { grid-template-columns: 1fr; }
  .vfeature__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat::before { display: none !important; }
  .mat__grid { grid-template-columns: 1fr; }
  .vfeature__side { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax img, .parallax video { transform: none !important; }
  [data-stagger].is-visible > * { animation: none !important; opacity: 1; transform: none; }
}

/* =====================================================================
   PRODUCT CARDS + SINGLE PRODUCT PAGE
   ===================================================================== */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.pcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.pcard:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 26px 60px rgba(14,28,43,.14); }
.pcard__media { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; padding: clamp(10px, 1.4vw, 18px); }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__body { padding: clamp(22px, 2.4vw, 30px); }
.pcard__title { font-size: 1.5rem; margin-bottom: 8px; }
.pcard__txt { font-size: .96rem; font-weight: 300; color: var(--muted); margin-bottom: 16px; }
.pcard__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9rem; color: var(--gold-deep); }
.pcard:hover .pcard__link { color: var(--gold); }

.psingle { padding-block: clamp(10px, 1.6vw, 22px) var(--section-y); background: #fff; }
.psingle__grid { display: grid; grid-template-columns: 63fr 37fr; gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.psingle__title { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem); margin: 6px 0 18px; }
.psingle__actions { margin-top: 28px; }
/* v4.6: the breadcrumb sits right under the header — the huge empty band is gone */
.pagehero--slim { padding-block: clamp(18px, 2.6vw, 30px) clamp(10px, 1.4vw, 16px); border-bottom: 0; min-height: 0; }
.pagehero--slim .crumbs { margin: 0; }

/* ---- PRODUCT MEDIA (v4.6, per approved reference) ----
   The product's video plays FIRST, then EVERY photo of the product is laid
   out big in a two-up grid. Tap any photo for the full-screen viewer. */
.pmedia__video { margin-bottom: 14px; }
.pmedia__video .ytembed { max-width: none; box-shadow: 0 18px 46px rgba(14,28,43,.16); }
.pmedia__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pmedia__grid--one { grid-template-columns: 1fr; }
.pmedia__item {
  position: relative; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; padding: clamp(8px, 1vw, 14px); cursor: zoom-in;
  min-height: 220px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.pmedia__item:hover { transform: translateY(-3px); border-color: var(--gold-light); box-shadow: 0 20px 46px rgba(14,28,43,.14); }
.pmedia__item img { width: 100%; height: auto; max-height: clamp(260px, 34vw, 460px); object-fit: contain; display: block; }
.pmedia__grid--one .pmedia__item img { max-height: clamp(320px, 52vw, 620px); }
.pmedia__zoom {
  position: absolute; right: 10px; top: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(14,28,43,.66); color: #fff;
  display: grid; place-items: center; opacity: 0;
  transition: opacity .25s var(--ease), background .25s var(--ease);
}
.pmedia__item:hover .pmedia__zoom { opacity: 1; }
.pmedia__zoom:hover { background: var(--gold); color: var(--ink); }
@media (hover: none) { .pmedia__zoom { opacity: .85; } }

/* product description — ONLY the name + item code */
.pdesc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: clamp(18px, 2.4vw, 26px); margin-top: 8px; }
.pdesc__h { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pdesc__name { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); color: var(--ink); margin: 0 0 8px; }
.pdesc__code { font-size: .95rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.pdesc__code strong { color: var(--blue); font-weight: 600; letter-spacing: .04em; }

/* full-screen image viewer */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 14, 22, .94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 48px);
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; background: #fff; padding: 8px; }
.lightbox__close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; transition: background .25s var(--ease);
}
.lightbox__close:hover { background: var(--gold); color: var(--ink); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; transition: background .25s var(--ease);
}
.lightbox__nav:hover { background: var(--gold); color: var(--ink); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__nav svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}

@media (max-width: 980px) {
  .pcards { grid-template-columns: repeat(2, 1fr); }
  .psingle__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* phones: one big photo per row so every image stays large and clear */
  .pmedia__grid { grid-template-columns: 1fr; gap: 12px; }
  .pmedia__item img { max-height: 78vw; }
}
@media (max-width: 560px) {
  .pcards { grid-template-columns: 1fr; }
}

/* =====================================================================
   FOOTER BUTTON FIX — footer column links style was washing out the CTA.
   Restore full button look so "Start your project" is clearly visible.
   ===================================================================== */
.footer .btn { display: inline-flex; width: auto; padding: 14px 28px; font-size: .9rem; }
.footer .btn--gold { background: var(--gold); color: var(--ink); box-shadow: 0 12px 30px rgba(160,128,52,.34); }
.footer .btn--gold:hover { background: var(--gold-light); color: var(--ink); transform: translateY(-2px); }
.footer__cta { margin-top: 22px; }

/* =====================================================================
   v2.2 — mobile overflow fix, footer button recolour, language switch,
   video grid, spec table, coming-soon, soon badge
   ===================================================================== */

/* ---- KILL HORIZONTAL OVERFLOW (mobile white strip) ---- */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 860px) {
  .parallax img, .parallax video, [data-parallax] { transform: none !important; }
}

/* ---- FOOTER BUTTON — recoloured (cream, not gold) ---- */
.footer .btn--gold { background: var(--surface); color: var(--ink); box-shadow: 0 14px 32px rgba(0,0,0,.30); }
.footer .btn--gold:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }

/* ---- HEADER RIGHT + LANGUAGE SWITCHER ---- */
.header__right { display: flex; align-items: center; gap: 16px; }
.langsw { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 100px; padding: 4px 6px 4px 4px; background: rgba(255,255,255,.75); }
.langsw__label { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-right: 1px solid var(--line); font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.langsw__label svg { color: var(--gold-deep); flex: 0 0 auto; }
.langsw__btn { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); padding: 5px 12px; border-radius: 100px; transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.langsw__btn:hover { color: var(--ink); }
.langsw__btn.is-active { color: var(--ink); background: var(--gold-light); box-shadow: 0 2px 10px rgba(160,128,52,.28); }
.langsw__sep { display: none; }
@media (max-width: 560px) {
  .langsw { padding: 3px 4px; gap: 2px; }
  .langsw__label { display: none; }
  .langsw__btn { padding: 5px 9px; font-size: .72rem; }
  .header__right { gap: 8px; }
}

/* ---- VIDEO GRID (new clean style, original aspect, autoplay) ---- */
.vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.vg { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); box-shadow: 0 18px 50px rgba(0,0,0,.42); border: 1px solid rgba(224,196,122,.18); }
.vg video { width: 100%; height: auto; display: block; }
.vg::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background-image: url("assets/img/gold-foil.jpg"); background-size: cover; opacity: .8; }
@media (max-width: 760px) { .vgrid { grid-template-columns: 1fr; } }

/* ---- v4.10: SHOWCASE FILMS — each video gets its own cinematic moment ---- */
.vshow { padding-block: var(--section-y); }
.vfilms { display: grid; gap: clamp(34px, 5vw, 72px); }
.vfilm { position: relative; }
.vfilm__stage {
  position: relative; overflow: hidden; background: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
.vfilm__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vfilm__stage .vsound { position: absolute; right: 14px; top: 14px; z-index: 3; }

/* the big ghost number — the "chapter" mark of each film */
.vfilm__no {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: var(--serif); font-weight: 500; line-height: .8;
  font-size: clamp(4rem, 3rem + 9vw, 11rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(224, 196, 122, .5);
  letter-spacing: .02em;
}

/* 01 & 04 — full-bleed cinema */
.vfilm--full .vfilm__stage {
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw);
  border-radius: 0; aspect-ratio: 16 / 9; max-height: 74vh; min-height: 300px;
}
.vfilm--full .vfilm__no { left: clamp(14px, 4vw, 60px); top: -0.45em; }

/* 02 — pulled right, gold frame ghosting behind, number breathing on the left */
.vfilm--right, .vfilm--left {
  /* grid items with auto margins shrink to fit-content — so instead we keep
     full width and fake the container via computed side padding */
  width: 100%;
  padding-inline: max(clamp(18px, 4vw, 40px), calc((100% - 1240px) / 2 + clamp(18px, 4vw, 40px)));
}
.vfilm--right .vfilm__stage, .vfilm--left .vfilm__stage { width: min(74%, 880px); aspect-ratio: 16 / 9; }
.vfilm--right .vfilm__stage { margin-left: auto; }
.vfilm--right .vfilm__frame, .vfilm--left .vfilm__frame {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1px solid rgba(224, 196, 122, .4); border-radius: var(--radius);
}
.vfilm--right .vfilm__frame { transform: translate(18px, 18px); }
.vfilm--left  .vfilm__frame { transform: translate(-18px, 18px); }
.vfilm--right .vfilm__no { left: clamp(10px, 3vw, 44px); bottom: -0.12em; }
.vfilm--left  .vfilm__no { right: clamp(10px, 3vw, 44px); bottom: -0.12em; }

@media (max-width: 820px) {
  .vfilms { gap: clamp(40px, 9vw, 56px); }
  .vfilm--right .vfilm__stage, .vfilm--left .vfilm__stage { width: 100%; }
  .vfilm--right .vfilm__frame, .vfilm--left .vfilm__frame { display: none; }
  .vfilm__no { font-size: clamp(3rem, 14vw, 4.6rem); }
  .vfilm--right .vfilm__no, .vfilm--left .vfilm__no { right: auto; left: 10px; top: -0.5em; bottom: auto; }
  .vfilm--full .vfilm__stage { aspect-ratio: auto; height: 58vw; min-height: 230px; }
}


/* v4.9.1 — while a stage's video hasn't painted its first frame yet, show a
   quiet gold loading ring (feedback, not a thumbnail). Vanishes on play. */
.hero__stage::after, .vfilm__stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16);
  border-top-color: var(--gold-light);
  animation: vtSpin 1s linear infinite;
  opacity: .9; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.hero__stage.is-playing::after, .vfilm__stage.is-playing::after { opacity: 0; animation-play-state: paused; }
@keyframes vtSpin { to { transform: rotate(360deg); } }
/* v4.9.2 — while waiting, the stage is a branded moment, never an empty box:
   a soft diagonal gold sheen sweeps the ink until the first frame lands */
.hero__stage::before, .vfilm__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(194,160,74,.14) 46%, rgba(224,196,122,.20) 50%, rgba(194,160,74,.14) 54%, transparent 70%);
  background-size: 260% 100%;
  animation: vtSheen 2.1s var(--ease) infinite;
  transition: opacity .45s var(--ease);
}
.hero__stage.is-playing::before, .vfilm__stage.is-playing::before { opacity: 0; animation-play-state: paused; }
@keyframes vtSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .hero__stage::before, .vfilm__stage::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero__stage::after, .vfilm__stage::after { animation: none; } }
.vslide {
  position: relative; flex: 0 0 100%; scroll-snap-align: center;
  aspect-ratio: 16 / 9; max-height: min(86vh, 760px); background: var(--ink);
}
.vslide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vslide .vsound { position: absolute; right: 16px; top: 16px; z-index: 3; }
.vslider__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.vslider__btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-50%) scale(1.06); }
.vslider__btn--prev { left: clamp(10px, 2vw, 26px); }
.vslider__btn--next { right: clamp(10px, 2vw, 26px); }
.vslider__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: flex; justify-content: center; gap: 8px; }
.vslider__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .25s var(--ease), transform .25s var(--ease); }
.vslider__dot.is-active { background: var(--gold); transform: scale(1.25); }
@media (max-width: 640px) {
  .vslide { aspect-ratio: auto; height: 60vw; min-height: 230px; }
  .vslider__btn { width: 40px; height: 40px; }
}

/* ---- YOUTUBE EMBED (single product "in motion": responsive 16:9, muted autoplay, loop) ---- */
.ytembed { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 18px 50px rgba(0,0,0,.42); border: 1px solid rgba(224,196,122,.18); }
.ytembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ytembed::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background-image: url("assets/img/gold-foil.jpg"); background-size: cover; opacity: .8; pointer-events: none; z-index: 2; }
/* older browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) { .ytembed { height: 0; padding-bottom: 56.25%; } }

/* ---- SPEC TABLE (item detail) ---- */
.spectable { border-top: 1px solid var(--line); margin-top: 6px; }
.spectable__row { display: flex; justify-content: space-between; gap: 18px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.spectable__k { color: var(--muted); font-size: .92rem; }
.spectable__v { color: var(--ink); font-weight: 500; font-size: .96rem; text-align: right; }

/* ---- COMING SOON ---- */
.coming { position: relative; min-height: 76vh; display: flex; align-items: center; overflow: hidden; background: var(--ink); }
.coming__bg { position: absolute; inset: 0; }
.coming__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.2); transform: scale(1.05); }
.coming::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,34,.74), rgba(10,22,34,.93)); }
.coming .container { position: relative; z-index: 2; }
.coming__inner { max-width: 760px; margin-inline: auto; text-align: center; padding-block: clamp(96px, 14vw, 150px); }
.coming__badge { display: inline-block; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 8px 18px; border-radius: 100px; margin-bottom: 22px; }
.coming__title { color: #fff; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); margin-bottom: 18px; }
.coming__sub { color: var(--on-dark-m); font-size: 1.12rem; font-weight: 300; max-width: 56ch; margin: 0 auto 32px; }
.coming__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.coming__meta { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; color: var(--on-dark-m); font-size: .9rem; }
.coming__meta span { display: inline-flex; align-items: center; gap: 8px; }
.coming__meta svg { color: var(--gold-light); }

/* ---- SOON BADGE ON PRODUCT CARD ---- */
.pcard__media { position: relative; }
.pcard__soon { position: absolute; top: 14px; left: 14px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 7px 14px; border-radius: 100px; z-index: 2; }
.pcard--soon .pcard__media img { filter: grayscale(.35) brightness(.92); }

/* =====================================================================
   ANIMATED 10-STEP PROCESS TIMELINE (icon rail + drawing line)
   ===================================================================== */
.psteps { position: relative; margin-top: 46px; }
.psteps__line { position: absolute; left: 34px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-deep)); transform-origin: top; border-radius: 2px; }
.psteps.is-in .psteps__line { animation: vtGrowLine 1.4s var(--ease) .15s both; }
@keyframes vtGrowLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.pstep { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 26px; position: relative; }
.pstep:last-of-type { padding-bottom: 0; }

.pstep__icon { flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--gold-deep); position: relative; z-index: 2; box-shadow: 0 12px 28px rgba(14,28,43,.10); transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.pstep__badge { position: absolute; top: -7px; right: -7px; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 100px; background: var(--gold); color: var(--ink); font-family: var(--sans); font-size: .72rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(160,128,52,.35); }
.pstep.is-visible .pstep__icon { animation: vtPopIcon .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes vtPopIcon { from { opacity: 0; transform: scale(.45) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.pstep:hover .pstep__icon { color: #fff; background: var(--gold); border-color: var(--gold); }

.pstep__card { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; box-shadow: 0 8px 26px rgba(14,28,43,.06); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.pstep__card:hover { transform: translateY(-3px); border-color: rgba(194,160,74,.55); box-shadow: 0 16px 40px rgba(14,28,43,.12); }
.pstep__title { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin-bottom: 7px; }
.pstep__txt { color: var(--muted); font-size: .98rem; line-height: 1.62; }

/* staggered entrance (additive — icons visible by default) */
.psteps .pstep:nth-child(2).is-visible .pstep__icon { animation-delay: .04s; }
.psteps .pstep:nth-child(3).is-visible .pstep__icon { animation-delay: .09s; }
.psteps .pstep:nth-child(4).is-visible .pstep__icon { animation-delay: .14s; }
.psteps .pstep:nth-child(5).is-visible .pstep__icon { animation-delay: .19s; }
.psteps .pstep:nth-child(6).is-visible .pstep__icon { animation-delay: .24s; }
.psteps .pstep:nth-child(7).is-visible .pstep__icon { animation-delay: .29s; }
.psteps .pstep:nth-child(8).is-visible .pstep__icon { animation-delay: .34s; }
.psteps .pstep:nth-child(9).is-visible .pstep__icon { animation-delay: .39s; }
.psteps .pstep:nth-child(10).is-visible .pstep__icon { animation-delay: .44s; }
.psteps .pstep:nth-child(11).is-visible .pstep__icon { animation-delay: .49s; }

@media (max-width: 620px) {
  .pstep { gap: 15px; padding-bottom: 22px; }
  .pstep__icon { flex-basis: 56px; width: 56px; height: 56px; }
  .psteps__line { left: 27px; }
  .pstep__card { padding: 17px 18px; }
  .pstep__title { font-size: 1.08rem; }
}

/* =====================================================================
   v2.3 — neutral bands (no claims), nav spacing + mobile drawer fix
   ===================================================================== */

/* ---- NEUTRAL POSITIONING BAND (replaces number stats) ---- */
.stat--feat { text-align: center; }
.stat__ico { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--gold-deep); }
.stat__name { font-family: var(--serif); font-size: 1.32rem; color: var(--ink); margin-bottom: 5px; }

/* v4.5 helpers */
body.lb-open { overflow: hidden; }
.stats:not(.stats--dark) { background: #fff; border-block: 1px solid var(--line); }
.pcard__media { padding: clamp(6px, 1vw, 12px); }
.pcard__media img { background: #fff; }
.stat__sub { color: var(--muted); font-size: .92rem; line-height: 1.5; max-width: 26ch; margin-inline: auto; }
.stats--dark .stat__ico { background: rgba(255,255,255,.05); border-color: rgba(224,196,122,.28); color: var(--gold-light); }
.stats--dark .stat__name { color: #fff; }
.stats--dark .stat__sub { color: var(--on-dark-m); }

/* ---- WHAT YOU CAN EXPECT (neutral, replaces testimonials) ---- */
.xpect__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: 46px; }
.xpect__card { background: rgba(255,255,255,.04); border: 1px solid rgba(224,196,122,.16); border-radius: var(--radius); padding: 28px 24px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.xpect__card:hover { transform: translateY(-4px); border-color: rgba(224,196,122,.42); }
.xpect__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(224,196,122,.12); color: var(--gold-light); margin-bottom: 18px; }
.xpect__title { font-family: var(--display); font-size: 1.18rem; color: #fff; margin-bottom: 8px; }
.xpect__txt { color: var(--on-dark-m); font-size: .96rem; line-height: 1.6; }
@media (max-width: 900px) { .xpect__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .xpect__grid { grid-template-columns: 1fr; } }

/* ---- DESKTOP NAV — give the links breathing room ---- */
.nav__list { gap: 14px; }
.nav__link { padding: 9px 18px; font-size: .92rem; letter-spacing: .006em; }
.nav__link::after { left: 18px; right: 18px; }

/* ---- MOBILE NAV DRAWER — full-screen solid NAVY panel ---- */
@media (max-width: 860px) {
  .nav {
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
    padding: 100px 32px 40px;
    background: #0E1C2B !important;
    background: linear-gradient(180deg, #15293D 0%, #0E1C2B 55%, #0A1622 100%) !important;
    border-left: 0;
    box-shadow: none;
  }
  .nav::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background-image: url("assets/img/gold-foil.jpg"); background-size: cover; z-index: 1; }
  .nav__list { gap: 0; max-width: 460px; margin-inline: auto; }
  .nav__list a, .nav__link {
    display: block;
    color: var(--on-dark) !important;
    font-weight: 500;
    font-size: 1.25rem;
    padding: 18px 4px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    border-radius: 0;
  }
  .nav__list a::after, .nav__link::after { display: none; }
  .nav__list a:hover, .nav__list .current-menu-item > a, .nav__link:hover, .nav__link.is-current { color: var(--gold-light) !important; }
  .nav__cta-m { margin-top: 26px; border-bottom: 0 !important; }
  .nav__cta-m a { color: var(--ink) !important; font-size: 1rem; padding: 16px 24px; }
  .nav__close { color: var(--on-dark); top: 30px; right: 28px; }
  .nav__toggle span { background: var(--ink); }
}




/* =====================================================================
   LOOKBOOK — neutral photo montage (replaces finishes claim section)
   ===================================================================== */
.lookbook { padding: clamp(64px, 9vw, 120px) 0; }
.lookbook__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 14px;
  margin-top: 46px;
  grid-template-areas: "a b c" "a d e";
}
.lb { position: relative; overflow: hidden; border-radius: var(--radius); margin: 0; box-shadow: 0 12px 34px rgba(14,28,43,.10); }
.lb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.lb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(226,217,198,.5); border-radius: var(--radius); pointer-events: none; }
.lb:hover img { transform: scale(1.06); }
.lb--0 { grid-area: a; } .lb--1 { grid-area: b; } .lb--2 { grid-area: c; } .lb--3 { grid-area: d; } .lb--4 { grid-area: e; }
@media (max-width: 760px) {
  .lookbook__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 150px; grid-template-areas: "a a" "b c" "d e"; }
}

/* =====================================================================
   v2.5 — auto-loop image marquee + process step images
   ===================================================================== */

/* ---- CONTINUOUS AUTO-LOOP IMAGE STRIP ("what we build") ---- */
.imgmarq { overflow: hidden; margin-top: 46px; } /* v4.8.1: side fade removed per client */
.imgmarq__track { display: flex; width: max-content; animation: imgmarq-scroll 42s linear infinite; will-change: transform; }
.imgmarq__slide { flex: 0 0 auto; width: min(80vw, 440px); aspect-ratio: 16 / 10; margin-right: 18px; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: 0 14px 38px rgba(14,28,43,.12); }
.imgmarq__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.imgmarq__slide:hover img { transform: scale(1.05); }
@keyframes imgmarq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .imgmarq__track { animation: none; } }

/* ---- PROCESS STEP IMAGES (card becomes image + text) ---- */
.pstep__card { display: flex; gap: 0; align-items: stretch; padding: 0; overflow: hidden; }
.pstep__media { flex: 0 0 38%; max-width: 240px; min-width: 150px; position: relative; overflow: hidden; background: var(--paper-2); }
.pstep__media img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.pstep__card:hover .pstep__media img { transform: scale(1.06); }
.pstep__body { flex: 1; padding: 22px 26px; align-self: center; }
@media (max-width: 620px) {
  .pstep__card { flex-direction: column; }
  .pstep__media { flex-basis: auto; max-width: none; }
  .pstep__media img { min-height: 0; height: 190px; }
  .pstep__body { padding: 16px 18px; }
}

/* =====================================================================
   PRODUCTS DROPDOWN (header submenu)
   ===================================================================== */
.nav__list .menu-item-has-children { position: relative; }

/* caret on the parent (desktop) */
.nav__list .menu-item-has-children > a {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239C7E34' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
}

/* the dropdown panel */
.nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  list-style: none;
  margin: 12px 0 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 48px rgba(14,28,43,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 200;
}
.nav__list .menu-item-has-children:hover > .sub-menu,
.nav__list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__list .sub-menu::before { /* hover bridge so it doesn't close in the gap */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px; height: 12px;
}
.nav__list .sub-menu li { display: block; }
.nav__list .sub-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text) !important;
  white-space: nowrap;
  background-image: none !important;
}
.nav__list .sub-menu a::after { display: none; }
.nav__list .sub-menu a:hover { background: var(--paper-2); color: var(--gold-deep) !important; }

/* ---- mobile: submenu shown inline + indented in the navy drawer ---- */
@media (max-width: 860px) {
  .nav__list .menu-item-has-children > a { background-image: none; padding-right: 4px; }
  .nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 6px;
    padding: 0 0 0 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav__list .sub-menu::before { display: none; }
  .nav__list .sub-menu a {
    color: var(--on-dark-m) !important;
    font-size: 1.05rem;
    padding: 12px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav__list .sub-menu a:hover { background: transparent; color: var(--gold-light) !important; }
}

/* v4.6: the old pgal video strip was replaced by .pmedia__video at the top */
.motion { padding: clamp(64px, 9vw, 120px) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.pcard__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--gold-light); border: 1px solid rgba(224,196,122,.5); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(14,28,43,.35); transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); z-index: 2; }
.pcard:hover .pcard__play { transform: translate(-50%, -50%) scale(1.1); background: var(--gold); color: var(--ink); }
.pcard__play svg { margin-left: 3px; }


/* v4.6: thumbnail strip removed — every photo now shows big in .pmedia__grid */

/* =====================================================================
   v4.11 — RESULTS AUTO SLIDESHOW (.rshow)
   Crossfade + gentle Ken Burns, timed progress dots, NO manual buttons.
   Used on the Process page and the ad landing page.
   ===================================================================== */
.rshow {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--radius); background: var(--ink-3);
  aspect-ratio: 16 / 9; max-height: min(78vh, 700px);
  box-shadow: 0 34px 90px rgba(14,28,43,.22), 0 10px 30px rgba(14,28,43,.12);
}
.rshow::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(224,196,122,.45);
}
.rshow__slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 1;
  transition: opacity 1.15s var(--ease);
}
.rshow__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.08);
}
.rshow__slide.is-active { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .rshow__slide.is-active img { animation: rshowKen 7s var(--ease) forwards; }
}
@keyframes rshowKen { from { transform: scale(1.12) translateY(6px); } to { transform: scale(1.02) translateY(0); } }
/* soft gold sheen drifting over the frame */
.rshow__sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5;
  background: linear-gradient(112deg, transparent 40%, rgba(224,196,122,.14) 50%, transparent 60%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .rshow__sheen { animation: rshowSheen 8.4s ease-in-out 1.4s infinite; }
}
@keyframes rshowSheen { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
/* vignette for dot legibility */
.rshow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(10,22,34,.5), transparent);
}
/* timed dots — indicators only (never buttons) */
.rshow__dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; justify-content: center; gap: 8px; pointer-events: none;
}
.rshow__dot {
  width: 34px; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.32);
}
.rshow__dot i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.rshow__dot.is-active i { width: 100%; transition: width var(--rshow-t, 4200ms) linear; }
.rshow__dot.is-done i { width: 100%; transition: none; }
@media (max-width: 640px) {
  .rshow { aspect-ratio: 4 / 3; }
  .rshow__dot { width: 24px; }
}

/* =====================================================================
   v4.11 — META-ADS LANDING PAGE  (body.vt-landing · /transform-your-venue/)
   The site chrome disappears; the page runs its own slim bar, four
   enquiry forms, instant-play films, and a sticky mobile CTA.
   ===================================================================== */
body.vt-landing .marquee,
body.vt-landing .header,
body.vt-landing .footer { display: none; }
body.vt-landing { --lp-max: 1200px; }

/* --- slim sticky bar --- */
.landbar {
  position: sticky; top: 0; z-index: 160;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.landbar.is-scrolled { box-shadow: 0 10px 34px rgba(14,28,43,.08); border-bottom-color: var(--line); }
.landbar__inner {
  max-width: var(--lp-max); margin-inline: auto; padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.landbar__brand img { height: 46px; width: auto; display: block; }
.landbar__right { display: flex; align-items: center; gap: 18px; }
.landbar__mail { font-size: .88rem; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.landbar__mail svg { color: var(--gold-deep); }
.landbar__mail:hover { color: var(--gold-deep); }
@media (max-width: 720px) { .landbar__mail span { display: none; } .landbar .btn { padding: 11px 18px; font-size: .8rem; } }

/* --- landing hero: copy left, form right, navy stage --- */
.lhero {
  position: relative; overflow: hidden; background: var(--ink);
  color: var(--on-dark); padding: clamp(40px, 6vw, 84px) 0 clamp(34px, 5vw, 64px);
}
.lhero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(29,78,158,.4), transparent 60%),
    radial-gradient(50% 60% at 96% 100%, rgba(194,160,74,.16), transparent 62%);
}
.lhero__grid {
  position: relative; max-width: var(--lp-max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 64px); align-items: center;
}
.lhero__title {
  color: #fff; font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.02em; margin: 16px 0 20px;
}
.lhero__title em { font-style: italic; color: var(--gold-light); }
.lhero__sub { color: var(--on-dark-m); font-weight: 300; font-size: 1.06rem; max-width: 52ch; margin-bottom: 24px; }
.lhero .hero__points { justify-content: flex-start; margin-bottom: 22px; }
.lhero .hero__point { box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.lhero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.lhero__trust li { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--on-dark-m); }
.lhero__trust svg { color: var(--gold-light); flex: 0 0 auto; }
.lhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* the form card — used 4x down the page */
.lform {
  position: relative; background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: clamp(24px, 2.6vw, 40px);
  box-shadow: 0 34px 90px rgba(0,0,0,.34), 0 0 0 1.5px rgba(224,196,122,.55);
}
.lform__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 10px;
}
.lform__kicker::before { content: ""; width: 22px; height: 1.5px; background: var(--gold); }
.lform__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--ink); margin-bottom: 6px; }
.lform__sub { font-size: .92rem; color: var(--muted); font-weight: 300; margin-bottom: 18px; }
.lform__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .78rem; color: var(--muted); }
.lform__note svg { color: var(--gold-deep); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .lhero .lform { animation: heroUp 1s var(--ease) .25s both; }
}

/* full-bleed hero film under the hero */
.lfilm { position: relative; background: var(--ink-3); }
.lfilm__stage { position: relative; width: 100%; max-height: min(84vh, 700px); overflow: hidden; }
.lfilm__stage video { width: 100%; height: 100%; max-height: inherit; object-fit: cover; display: block; }
.lfilm__chip {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 100px;
  background: rgba(10,22,34,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

/* generic landing section shells */
.lsec { padding: clamp(56px, 7vw, 100px) 0; }
.lsec--tight { padding: clamp(40px, 5vw, 70px) 0; }
.lsec--dark { background: var(--ink); color: var(--on-dark); }
.lsec--dark h2, .lsec--dark h3 { color: #fff; }
.lsec--soft { background: var(--paper-2); }
.lsec__inner { max-width: var(--lp-max); margin-inline: auto; padding-inline: var(--gutter); }

/* product blocks */
.lprod { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 3.6vw, 60px); align-items: center; }
.lprod + .lprod { margin-top: clamp(48px, 6vw, 84px); }
.lprod--flip .lprod__media { order: 2; }
.lprod__media { position: relative; }
.lprod__main {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: 0 28px 70px rgba(14,28,43,.18);
}
.lprod__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.lprod__thumbs img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px rgba(14,28,43,.12); transition: transform .35s var(--ease);
}
.lprod__thumbs img:hover { transform: translateY(-4px) scale(1.03); }
.lprod__no {
  font-family: var(--serif); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); display: inline-flex; align-items: center; gap: 10px;
}
.lprod__no::before { content: ""; width: 26px; height: 1.5px; background: var(--gold); }
.lprod__title { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem); margin: 12px 0 12px; }
.lprod__txt { color: var(--muted); font-weight: 300; margin-bottom: 18px; max-width: 50ch; }
.lprod__points { display: grid; gap: 10px; margin-bottom: 22px; }
.lprod__points li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.lprod__points svg { color: var(--gold-deep); flex: 0 0 auto; margin-top: 3px; }
.lprod__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* films grid (the 4 showcase mp4s) */
.lfilms { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); }
.lfilms__item {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-3);
  aspect-ratio: 16 / 9; box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.lfilms__item::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(224,196,122,.35);
}
.lfilms__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lfilms__item .vsound { z-index: 3; }
.lfilms__no {
  position: absolute; top: 10px; left: 14px; z-index: 3;
  font-family: var(--serif); font-size: 1rem; color: rgba(224,196,122,.9); letter-spacing: .12em;
}

/* conversion bands (forms 2–4 live here) */
.lband { position: relative; overflow: hidden; }
.lband--navy { background: linear-gradient(135deg, var(--ink) 0%, #12253a 60%, var(--ink-3) 100%); color: var(--on-dark); }
.lband--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 70% at 88% 8%, rgba(194,160,74,.18), transparent 62%);
}
.lband__grid {
  position: relative; max-width: var(--lp-max); margin-inline: auto; padding: clamp(52px, 7vw, 96px) var(--gutter);
  display: grid; grid-template-columns: 1fr .92fr; gap: clamp(28px, 4vw, 64px); align-items: center;
}
.lband__title { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); margin: 12px 0 14px; }
.lband__txt { color: var(--on-dark-m); font-weight: 300; max-width: 50ch; }
.lband__list { display: grid; gap: 12px; margin-top: 20px; }
.lband__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--on-dark); }
.lband__list svg { color: var(--gold-light); flex: 0 0 auto; margin-top: 3px; }

/* benefit cards */
.lwhy { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.lwhy__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 32px); box-shadow: 0 14px 38px rgba(14,28,43,.07);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.lwhy__card:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(14,28,43,.12); border-color: rgba(194,160,74,.5); }
.lwhy__ico {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-deep); background: rgba(194,160,74,.12); margin-bottom: 14px;
}
.lwhy__title { font-size: 1.14rem; margin-bottom: 8px; }
.lwhy__txt { font-size: .92rem; color: var(--muted); font-weight: 300; }

/* condensed landing steps */
.lsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); counter-reset: lstep; }
.lstep { position: relative; padding-top: 22px; border-top: 2px solid var(--ink); }
.lstep__no { font-family: var(--serif); font-size: 2rem; color: var(--gold-deep); line-height: 1; }
.lstep__title { font-size: 1.06rem; margin: 10px 0 8px; }
.lstep__txt { font-size: .9rem; color: var(--muted); font-weight: 300; }

/* final full-width form finale */
.lfinale { background: var(--paper-2); }
.lfinale__inner {
  max-width: 880px; margin-inline: auto; padding: clamp(56px, 7vw, 100px) var(--gutter);
  text-align: center;
}
.lfinale__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); margin: 12px 0 12px; }
.lfinale__txt { color: var(--muted); font-weight: 300; max-width: 56ch; margin: 0 auto 30px; }
.lfinale .lform { text-align: left; }

/* slim landing footer */
.lfoot { background: var(--ink-3); color: var(--on-dark-m); }
.lfoot__inner {
  max-width: var(--lp-max); margin-inline: auto; padding: 30px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.lfoot__brand img { height: 42px; width: auto; display: block; }
.lfoot__meta { font-size: .82rem; display: grid; gap: 4px; }
.lfoot__meta a { color: var(--on-dark); }
.lfoot__meta a:hover { color: var(--gold-light); }
.lfoot__rights { font-size: .76rem; }

/* sticky mobile CTA */
.lsticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(14,28,43,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(224,196,122,.35);
}
.lsticky .btn { width: 100%; justify-content: center; }
@media (max-width: 820px) {
  .lsticky { display: block; }
  body.vt-landing { padding-bottom: 70px; }
}

/* landing responsive */
@media (max-width: 980px) {
  .lhero__grid, .lband__grid { grid-template-columns: 1fr; }
  .lprod, .lprod--flip { grid-template-columns: 1fr; }
  .lprod--flip .lprod__media { order: 0; }
  .lwhy { grid-template-columns: repeat(2, 1fr); }
  .lsteps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lfilms { grid-template-columns: 1fr; }
  .lwhy { grid-template-columns: 1fr; }
  .lsteps { grid-template-columns: 1fr; }
  .lhero .hero__points { justify-content: center; }
}

/* landing bar mini language switch */
.langsw--mini { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
.langsw--mini .langsw__btn { font-size: .7rem; font-weight: 600; letter-spacing: .06em; padding: 6px 11px; border-radius: 100px; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: .25s var(--ease); }
.langsw--mini .langsw__btn.is-active { background: var(--ink); color: #fff; }
@media (max-width: 480px) { .langsw--mini { display: none; } }

/* keep back-to-top clear of the landing sticky CTA on phones */
@media (max-width: 820px) {
  body.vt-landing .totop { bottom: 84px; }
}

/* ============ landing v2 — rotating headline, catalog ranges, centered band ============ */

/* animated revenue promise at the start of the H1 */
.lhero__rotline { display: block; margin-bottom: 16px; min-height: 1.5em; }
.lrot { display: inline-grid; vertical-align: top; }
.lrot__w {
  grid-area: 1 / 1; white-space: nowrap;
  font-family: var(--sans); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  font-size: clamp(.92rem, 2.3vw, 1.3rem);
  color: var(--gold-light);
  opacity: 0; transform: translateY(.6em); filter: blur(5px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
.lrot__w.is-active { opacity: 1; transform: none; filter: none; }
.lrot__w.is-out { opacity: 0; transform: translateY(-.5em); }
.lrot__w::after { content: ""; display: inline-block; width: .55em; height: 3px; margin-left: .5em; vertical-align: middle; background: var(--gold); border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .lrot__w { transition: opacity .3s linear; transform: none !important; filter: none !important; } }

/* catalog ranges — the product-page grid, introduced per category */
.lrange { margin-top: clamp(44px, 6vw, 74px); }
.lrange:first-of-type { margin-top: clamp(26px, 4vw, 44px); }
.lrange__head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: clamp(20px, 3vw, 30px); flex-wrap: wrap; }
.lrange__no { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--gold-deep); line-height: 1; padding-bottom: 4px; }
.lrange__meta { flex: 1 1 320px; min-width: 240px; }
.lrange__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; color: var(--ink); margin: 0 0 6px; }
.lrange__lead { color: var(--muted); font-size: .98rem; max-width: 640px; margin: 0; }
.lrange__all { flex: 0 0 auto; }
@media (max-width: 640px) {
  .lrange__head { align-items: flex-start; flex-direction: column; gap: 10px; }
  /* in a column, flex-basis becomes HEIGHT — this was inflating a huge
     blank block under the lead text on phones */
  .lrange__meta { flex: 0 0 auto; min-width: 0; width: 100%; }
  .lrange__no { padding-bottom: 0; }
  .lrange { margin-top: 38px; }
  .lrange:first-of-type { margin-top: 22px; }
}

/* centered conversion band (no form inside — points at the forms) */
.lband--center { text-align: center; }
.lband--center .lband__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px); }
.lband--center .lband__title { margin-left: auto; margin-right: auto; }
.lband--center .lband__txt { margin-left: auto; margin-right: auto; }
.lband__list--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: 22px 0 28px; padding: 0; }
.lband__list--row li { display: inline-flex; align-items: center; gap: 9px; }
@media (max-width: 640px) { .lband__list--row { flex-direction: column; align-items: center; gap: 10px; } }


/* ============ landing v3 — video hero, headline-grade rotator, blue CTAs ============ */
.lhero { position: relative; overflow: hidden; }
.lhero__bg { position: absolute; inset: 0; z-index: 0; }
.lhero__bg video { width: 100%; height: 100%; object-fit: cover; }
.lhero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,34,.84) 0%, rgba(10,20,34,.62) 46%, rgba(10,20,34,.9) 100%); }
.lhero__grid { position: relative; z-index: 1; }

/* the rotating promise IS the headline now — big serif, moving gold sheen */
.lhero__rotline { display: block; margin: 12px 0 4px; min-height: 1.16em; }
.lrot__w {
  font-family: var(--serif); font-weight: 600; font-style: normal; text-transform: none; letter-spacing: .005em;
  font-size: clamp(2.2rem, 1.35rem + 3.6vw, 4.3rem); line-height: 1.06;
  background: linear-gradient(100deg, var(--gold) 12%, #fff3d0 36%, var(--gold-light) 52%, var(--gold) 78%);
  background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateY(.55em) rotateX(38deg); transform-origin: 50% 100%; filter: blur(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.lrot__w::after { content: none; }
.lrot__w.is-active { opacity: 1; transform: none; filter: none; animation: lrotSheen 2.6s linear infinite; }
.lrot__w.is-out { opacity: 0; transform: translateY(-.45em) rotateX(-24deg); }
@keyframes lrotSheen { from { background-position: 0% 0; } to { background-position: -230% 0; } }
.lhero__title--live .lhero__tag {
  display: block; margin-top: 12px;
  font-family: var(--sans); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(1.12rem, 1rem + .8vw, 1.55rem); line-height: 1.4; color: rgba(255,255,255,.9);
}
.lhero__title--live .lhero__tag em { font-family: var(--serif); font-style: italic; color: var(--gold-light); }
@media (max-width: 540px) {
  .lrot__w { white-space: normal; font-size: clamp(1.75rem, 8.6vw, 2.2rem); }
  .lhero__rotline { min-height: 2.3em; }
}
@media (prefers-reduced-motion: reduce) { .lrot__w.is-active { animation: none; } }

/* primary landing CTA — the site blue, white text (matches the pills) */
.btn--blue {
  background: linear-gradient(135deg, var(--blue), #163e80); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 28px rgba(29,78,158,.36);
}
.btn--blue:hover { background: linear-gradient(135deg, #2f66c2, var(--blue)); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(29,78,158,.46); }


/* ============ landing v4 — typewriter headline + hero entrance ============ */
.lrot.is-typing .lrot__w { display: none; }
.lrot.is-typing { display: inline; }
.lrot__type {
  font-family: var(--serif); font-weight: 600; letter-spacing: .005em;
  font-size: clamp(2.2rem, 1.35rem + 3.6vw, 4.3rem); line-height: 1.06;
  background: linear-gradient(100deg, var(--gold) 12%, #fff3d0 36%, var(--gold-light) 52%, var(--gold) 78%);
  background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: lrotSheen 2.6s linear infinite;
}
.lrot__caret {
  display: inline-block; width: .05em; min-width: 3px; height: .88em;
  margin-left: .1em; vertical-align: -.06em; border-radius: 2px;
  background: var(--gold-light); box-shadow: 0 0 12px rgba(224,196,122,.8);
  animation: lrotCaret 1s steps(2, start) infinite;
}
@keyframes lrotCaret { 50% { opacity: 0; } }
@media (max-width: 540px) { .lrot__type { white-space: normal; font-size: clamp(1.75rem, 8.6vw, 2.2rem); } }
@media (prefers-reduced-motion: reduce) { .lrot__type { animation: none; } .lrot__caret { animation: none; } }

/* hero content rises in, form pops after — once, on load */
@media (prefers-reduced-motion: no-preference) {
  .lhero__copy > * { animation: lheroUp .75s var(--ease) both; }
  .lhero__copy > *:nth-child(1) { animation-delay: .08s; }
  .lhero__copy > *:nth-child(2) { animation-delay: .2s; }
  .lhero__copy > *:nth-child(3) { animation-delay: .34s; }
  .lhero__copy > *:nth-child(4) { animation-delay: .46s; }
  .lhero .lform { animation: lheroForm .85s var(--ease) .4s both; }
}
@keyframes lheroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lheroForm { from { opacity: 0; transform: translateY(30px) scale(.965); } to { opacity: 1; transform: none; } }


/* ============ landing v5 — clean symmetric hero, editorial serif headline ============ */
.lhero__grid--v5 {
  display: grid; grid-template-columns: 1.04fr .96fr;
  grid-template-areas: "copy form" "extras form";
  column-gap: clamp(30px, 4.5vw, 68px); row-gap: clamp(22px, 3vw, 34px);
  align-items: start;
}
.lhero__grid--v5 .lhero__copy { grid-area: copy; }
.lhero__grid--v5 .lform { grid-area: form; align-self: center; }
.lhero__extras { grid-area: extras; }

.lhero__h { margin: 18px 0 0; font-family: var(--serif); line-height: 1.07; letter-spacing: .002em; }
.lhero__hline1 { display: block; font-weight: 600; font-style: italic; color: var(--gold-light); font-size: clamp(2.5rem, 1.55rem + 3.6vw, 4.2rem); }
.lhero__hline2 { display: block; font-weight: 550; color: #fff; margin-top: 4px; font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.15rem); }
.lhero__sub2 { margin: 18px 0 0; max-width: 560px; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.86); }
.lhero__extras .hero__points { justify-content: flex-start; margin-bottom: 20px; }
.lhero__extras .lhero__actions { margin-top: 0; }

@media (max-width: 900px) {
  .lhero__grid--v5 { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "extras"; }
  .lhero__grid--v5 .lform { align-self: stretch; }
  .lhero__extras .hero__points { justify-content: center; }
  .lhero__extras .lhero__actions { justify-content: center; }
  .lhero__copy { text-align: center; }
  .lhero__copy .eyebrow { justify-content: center; }
  .lhero__sub2 { margin-inline: auto; }
}
/* entrance: simple, quiet */
@media (prefers-reduced-motion: no-preference) {
  .lhero__extras { animation: lheroUp .75s var(--ease) .5s both; }
}


/* ============ landing v6 — FORM FIRST, editorial headline, outstanding card ============ */
.lhero { padding-block: clamp(26px, 4.5vw, 64px); }
.lhero__grid--v6 {
  display: grid; grid-template-columns: .94fr 1.06fr;
  grid-template-areas: "form copy";
  column-gap: clamp(34px, 5vw, 76px); row-gap: 26px;
  align-items: center;
}
.lhero__grid--v6 .lform { grid-area: form; margin: 0; }
.lhero__grid--v6 .lhero__copy { grid-area: copy; }

/* headline — Fraunces, heavy, quiet gold accent, perfect vertical rhythm */
.lh6__title {
  margin: 16px 0 0; font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(2.5rem, 1.6rem + 3.7vw, 4.4rem); line-height: 1.05; letter-spacing: -.012em;
}
.lh6__title em { font-style: italic; font-weight: 600; color: var(--gold-light); }
.lh6__rule { display: block; width: 68px; height: 3px; border-radius: 3px; margin: 22px 0 20px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.lh6__sub { margin: 0 0 24px; max-width: 580px; font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem); line-height: 1.68; color: rgba(255,255,255,.88); }
.lhero__grid--v6 .hero__points { justify-content: flex-start; margin-bottom: 22px; }

/* the form card — impossible to miss */
body.vt-landing .lform {
  position: relative; border-radius: 22px; border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(140deg, var(--gold), rgba(255,255,255,.9) 42%, var(--gold-light)) border-box;
  box-shadow: 0 34px 90px rgba(3, 10, 24, .5), 0 6px 20px rgba(3, 10, 24, .3);
}
.lform__badge {
  position: absolute; top: -16px; left: 26px; z-index: 3;
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 100px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--ink);
  font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(160, 128, 52, .45);
}
/* bigger, friendlier fields + a full-width blue submit on the landing only */
body.vt-landing .wpforms-form input[type="text"],
body.vt-landing .wpforms-form input[type="email"],
body.vt-landing .wpforms-form input[type="tel"],
body.vt-landing .wpforms-form input[type="number"],
body.vt-landing .wpforms-form select,
body.vt-landing .wpforms-form textarea {
  width: 100%; padding: 13px 15px; font-size: 1rem; border-radius: 12px;
  border: 1.5px solid #dbe3f0; background: #fbfcff; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
body.vt-landing .wpforms-form input:focus,
body.vt-landing .wpforms-form select:focus,
body.vt-landing .wpforms-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(194, 160, 74, .18);
}
body.vt-landing .wpforms-form button[type="submit"],
body.vt-landing .wpforms-form .wpforms-submit,
body.vt-landing .wpforms-form input[type="submit"] {
  width: 100%; padding: 16px 20px; border: 0; border-radius: 100px; cursor: pointer;
  font-family: var(--sans); font-size: 1.04rem; font-weight: 700; letter-spacing: .015em; color: #fff;
  background: linear-gradient(135deg, var(--blue), #163e80);
  box-shadow: 0 14px 32px rgba(29, 78, 158, .4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
body.vt-landing .wpforms-form button[type="submit"]:hover,
body.vt-landing .wpforms-form .wpforms-submit:hover,
body.vt-landing .wpforms-form input[type="submit"]:hover {
  transform: translateY(-2px); background: linear-gradient(135deg, #2f66c2, var(--blue));
  box-shadow: 0 18px 40px rgba(29, 78, 158, .5);
}

/* entrance: the form leads, the story follows */
@media (prefers-reduced-motion: no-preference) {
  .lhero__grid--v6 .lform { animation: lheroForm .8s var(--ease) .08s both; }
  .lhero__grid--v6 .lhero__copy > * { animation: lheroUp .7s var(--ease) both; }
  .lhero__grid--v6 .lhero__copy > *:nth-child(1) { animation-delay: .24s; }
  .lhero__grid--v6 .lhero__copy > *:nth-child(2) { animation-delay: .34s; }
  .lhero__grid--v6 .lhero__copy > *:nth-child(3) { animation-delay: .44s; }
  .lhero__grid--v6 .lhero__copy > *:nth-child(4) { animation-delay: .52s; }
  .lhero__grid--v6 .lhero__copy > *:nth-child(5) { animation-delay: .6s; }
  .lhero__grid--v6 .lhero__copy > *:nth-child(6) { animation-delay: .7s; }
}

/* mobile: the form IS the opening scene */
@media (max-width: 900px) {
  .lhero__grid--v6 { grid-template-columns: 1fr; grid-template-areas: "form" "copy"; row-gap: 34px; }
  .lhero { padding-top: 30px; }
  body.vt-landing .lform { box-shadow: 0 24px 60px rgba(3, 10, 24, .55); }
  .lform__badge { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .lhero__grid--v6 .lhero__copy { text-align: center; }
  .lhero__grid--v6 .lhero__copy .eyebrow { justify-content: center; }
  .lh6__rule { margin-inline: auto; }
  .lh6__sub { margin-inline: auto; }
  .lhero__grid--v6 .hero__points { justify-content: center; }
  .lhero__grid--v6 .lhero__actions { justify-content: center; }
}


/* ============ landing v6.1 — select fix, mobile language toggle, badge sheen ============ */

/* selects were clipping ("— Select state —"): give them real height, our own
   gold chevron, and ellipsis instead of overflow */
body.vt-landing .wpforms-form select {
  -webkit-appearance: none; appearance: none;
  min-height: 50px; padding: 12px 40px 12px 14px; font-size: .98rem; line-height: 1.35;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C2A04A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.vt-landing .wpforms-form input[type="text"],
body.vt-landing .wpforms-form input[type="email"],
body.vt-landing .wpforms-form input[type="tel"],
body.vt-landing .wpforms-form input[type="number"] { min-height: 50px; }
body.vt-landing .wpforms-form .wpforms-field { padding-bottom: 14px; }
body.vt-landing .wpforms-form .wpforms-field-label {
  font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: 7px;
}
body.vt-landing .wpforms-form .wpforms-field-sublabel {
  font-size: .78rem; color: var(--muted); margin-top: 5px; letter-spacing: .02em;
}

/* the EN / ES toggle lives on the landing bar at EVERY size now */
@media (max-width: 560px) {
  .landbar__mail { display: none; }
  .landbar__inner { gap: 10px; padding-inline: 14px; }
  .landbar__brand img { max-height: 34px; }
  .landbar .btn { padding: 10px 15px; font-size: .78rem; }
  .langsw--mini { display: inline-flex; }
  .langsw--mini .langsw__btn { padding: 5px 9px; font-size: .66rem; }
}
@media (max-width: 480px) { .langsw--mini { display: inline-flex; } } /* overrides the earlier hide */

/* the badge earns a slow sheen; the submit breathes */
.lform__badge { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lform__badge::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: badgeShine 4.6s var(--ease) 1.4s infinite;
  }
  body.vt-landing .wpforms-form button[type="submit"],
  body.vt-landing .wpforms-form .wpforms-submit,
  body.vt-landing .wpforms-form input[type="submit"] { animation: submitBreathe 3.6s ease-in-out 2s infinite; }
}
@keyframes badgeShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(135%); } }
@keyframes submitBreathe {
  0%, 100% { box-shadow: 0 14px 32px rgba(29, 78, 158, .4); }
  50% { box-shadow: 0 16px 40px rgba(29, 78, 158, .55), 0 0 0 6px rgba(29, 78, 158, .08); }
}


/* ============ v6.2 — the slideshow is now PURE CSS ============
   No JavaScript involved at all: each slide runs one infinite keyframe
   timeline (4 slides x 4.5s = 18s cycle), phase-shifted by --ri. The
   incoming slide fades in ON TOP (z-index ramps inside the keyframes),
   so there is never a white dip — just one continuous, silky crossfade
   with a slow Ken Burns drift. The dots fill in sequence like a story
   bar and reset each loop. It cannot break, and it composites on the
   GPU. */
.rshow .rshow__slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; transition: none;
  animation: rshowCycle 18s linear infinite;
  animation-delay: calc(var(--ri, 0) * 4.5s - 1.4s);
  will-change: opacity, transform;
}
.rshow .rshow__slide img { width: 100%; height: 100%; object-fit: cover; animation: none; }
@keyframes rshowCycle {
  0%      { opacity: 0; z-index: 3; transform: scale(1.02); animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  7.78%   { opacity: 1; z-index: 3; transform: scale(1.038); animation-timing-function: linear; }
  25%     { opacity: 1; z-index: 2; transform: scale(1.078); animation-timing-function: cubic-bezier(.5, 0, .6, 1); }
  32.78%  { opacity: 0; z-index: 1; transform: scale(1.095); }
  33.5%   { opacity: 0; z-index: 1; transform: scale(1.02); }
  100%    { opacity: 0; z-index: 1; transform: scale(1.02); }
}
.rshow .rshow__dot { overflow: hidden; }
.rshow .rshow__dot i {
  display: block; height: 100%; width: 0; transition: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  animation: rshowDotFill 18s linear infinite;
  animation-delay: calc(var(--ri, 0) * 4.5s - 1.4s);
}
@keyframes rshowDotFill {
  0%   { width: 0; }
  25%  { width: 100%; }
  100% { width: 100%; }
}
/* desktop nicety: hovering rests the show; lifts off, it glides on */
@media (hover: hover) and (pointer: fine) {
  .rshow:hover .rshow__slide, .rshow:hover .rshow__dot i { animation-play-state: paused; }
}
/* reduced motion: a calm still of the first space */
@media (prefers-reduced-motion: reduce) {
  .rshow .rshow__slide, .rshow .rshow__dot i { animation: none; }
  .rshow .rshow__slide.is-active { opacity: 1; }
  .rshow .rshow__dot.is-active i { width: 100%; }
}


/* ============ v4.12.4 — dropdown stacking + Choices.js (WPForms modern select) polish ============ */

/* the entrance animations create stacking contexts, and the hero copy sits
   later in the DOM — so an OPEN dropdown was painting UNDER the headline.
   The form now owns the higher layer, always. */
body.vt-landing .lform { z-index: 20; }
.lhero__grid--v6 .lhero__copy { position: relative; z-index: 1; }

/* the modern (Choices.js) select — match our other fields */
body.vt-landing .wpforms-form .choices { margin-bottom: 0; }
body.vt-landing .wpforms-form .choices__inner {
  min-height: 50px; padding: 11px 40px 11px 14px;
  border: 1.5px solid #dbe3f0; border-radius: 12px; background: #fbfcff; font-size: .98rem;
}
body.vt-landing .wpforms-form .choices.is-open .choices__inner,
body.vt-landing .wpforms-form .choices.is-focused .choices__inner {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(194, 160, 74, .18);
}
body.vt-landing .wpforms-form .choices[data-type*="select-one"]::after { border-color: var(--gold-deep) transparent transparent; right: 16px; }
body.vt-landing .wpforms-form .choices.is-open[data-type*="select-one"]::after { border-color: transparent transparent var(--gold-deep); }

/* the open list: a clean floating panel that always sits on top */
body.vt-landing .wpforms-form .choices__list--dropdown,
body.vt-landing .wpforms-form .choices__list[aria-expanded] {
  z-index: 60; margin-top: 6px; border: 1.5px solid #dbe3f0; border-radius: 14px;
  box-shadow: 0 26px 64px rgba(3, 10, 24, .28); overflow: hidden; background: #fff;
}
body.vt-landing .wpforms-form .choices__list--dropdown .choices__item {
  padding: 13px 16px; font-size: .98rem; color: var(--ink);
}
body.vt-landing .wpforms-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--blue); color: #fff;
}
body.vt-landing .wpforms-form .choices__list--dropdown .choices__item--choice.choices__placeholder { color: var(--muted); }



/* ============ v4.12.7 — Process steps: BOLD heading only, no sub-paragraph ============
   Each step card is now just its title beside the image — true Fraunces 700
   (weight added to the fonts URL), a touch larger, vertically centered by the
   existing .pstep__body align-self:center. */
.pstep__title { font-weight: 700; font-size: 1.45rem; margin-bottom: 0; }
@media (max-width: 620px) {
  .pstep__title { font-size: 1.15rem; }
}