/* Scroll scenes: About doors + Contact handshake (smoothstep scrub, cubic-bezier easing) */
.scene { position: relative; height: 240vh; background: #050403; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(242,183,5,.2) 1px, transparent 1.4px) 0 0/24px 24px; opacity: .6; }
/* doors */
.door-stage { perspective: 1800px; }
.reveal-box { position: relative; z-index: 1; max-width: 760px; padding: 0 6%; text-align: center; opacity: calc((var(--p, 0) - .35) * 2.2); transform: scale(calc(.9 + var(--p, 0) * .1)); }
.reveal-box .lbl { color: var(--gold); letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; font-weight: 600; }
.reveal-box h2 { color: var(--white); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.15; margin: 14px 0 16px; }
.reveal-box p { color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips span { border: 1px solid rgba(242,183,5,.5); color: var(--gold-soft); padding: 8px 16px; border-radius: 40px; font-size: .88rem; }
.glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 40% 70% at 50% 50%, rgba(242,183,5,.55), transparent 70%); opacity: var(--p, 0); }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; will-change: transform; background: linear-gradient(90deg, #4a3811, #2a2008 60%, #1d1606); box-shadow: inset 0 0 0 12px #14100a, inset 0 0 0 14px var(--gold), inset 0 0 90px rgba(0,0,0,.5); display: grid; place-items: center; }
.leaf.l { left: 0; transform-origin: left center; transform: rotateY(calc(var(--p, 0) * 104deg)); }
.leaf.r { right: 0; transform-origin: right center; transform: rotateY(calc(var(--p, 0) * -104deg)); }
.leaf::before { content: ""; position: absolute; inset: 9% 12%; border: 2px solid rgba(242,183,5,.7); border-radius: 6px; background: linear-gradient(rgba(242,183,5,.12), transparent); }
.leaf::after { content: ""; position: absolute; top: 50%; width: 12px; height: 70px; border-radius: 8px; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.leaf.l::after { right: 6%; } .leaf.r::after { left: 6%; }
.door-hint { position: absolute; z-index: 3; bottom: 7%; left: 50%; transform: translateX(-50%); color: var(--gold); letter-spacing: .25em; font-size: .8rem; text-transform: uppercase; opacity: calc(1 - var(--p, 0) * 5); }
@media (max-width: 700px) { .scene { height: 200vh; } }

.door-title { position: absolute; z-index: 3; top: 42%; left: 0; right: 0; text-align: center; font: 700 clamp(2.4rem, 7vw, 5.5rem) 'Playfair Display', serif; color: var(--gold); text-shadow: 0 4px 30px rgba(0,0,0,.8); opacity: calc(1 - var(--p, 0) * 6); pointer-events: none; }
.door-title em { color: #fff; font-style: normal; }
.door-hint { color: #fff; }
/* Handshake motion: the two contact forms slide in from opposite sides and clasp */
.forms { position: relative; }
.forms .fpanel { will-change: transform; }
.forms::before { content: ""; position: absolute; left: 50%; top: 6%; bottom: 6%; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--gold), transparent); transform: scaleY(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1); pointer-events: none; z-index: 2; }
.forms::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--gold-soft, #FFD24A); box-shadow: 0 0 22px var(--gold); transform: scale(0); pointer-events: none; z-index: 3; }
.forms.met::before { transform: scaleY(1); }
.forms.met::after { animation: clasp 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }
.forms.met .fpanel { animation: grip .8s cubic-bezier(.22, 1, .36, 1); }
@keyframes clasp { 0% { transform: scale(0); box-shadow: 0 0 0 0 rgba(242,183,5,.8); } 45% { transform: scale(1.6); } 100% { transform: scale(1); box-shadow: 0 0 0 46px rgba(242,183,5,0); } }
@keyframes grip { 40% { scale: .985; } 100% { scale: 1; } }
@media (max-width: 900px) { .forms::before, .forms::after { display: none; } }

/* ===== v21: softer doors, shadow behind text ===== */
.leaf { background: linear-gradient(90deg, #2b2109, #17110a 60%, #0f0b05); box-shadow: inset 0 0 0 12px #0c0904, inset 0 0 0 14px rgba(242,183,5,.55), inset 0 0 110px rgba(0,0,0,.65); }
.leaf::before { border-color: rgba(242,183,5,.4); background: linear-gradient(rgba(242,183,5,.05), transparent); }
.leaf::after { opacity: .85; box-shadow: 0 0 10px rgba(242,183,5,.6); }
.glow { opacity: calc(var(--p, 0) * .45); }
.reveal-box::before { content: ""; position: absolute; inset: -22% -34%; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 45%, transparent 72%); pointer-events: none; }
.reveal-box h2, .reveal-box p { text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.door-title { color: #d9a806; }

/* ===== horizontal "Two halves" ===== */
.hstage { display: flex; align-items: center; place-items: unset; }
.htrack { display: flex; align-items: center; gap: 4vw; padding: 0 8vw; will-change: transform; position: relative; z-index: 1; }
.htrack::after { content: ""; flex: 0 0 6vw; }
.hp { flex: 0 0 min(520px, 84vw); }
.hp .half { width: 100%; margin: 0; }
.hintro { flex-basis: min(480px, 84vw); }
.hintro .lbl { color: var(--gold); letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; font-weight: 600; }
.hintro h2 { color: var(--white); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1; margin: 14px 0 16px; }
.hintro p { color: var(--muted); line-height: 1.7; font-size: 1.1rem; }
.hhint { display: inline-block; margin-top: 26px; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; animation: nudge 1.8s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes nudge { 50% { transform: translateX(10px); } }
.hjoint { flex-basis: 150px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hjoint i { width: 2px; height: 22vh; background: repeating-linear-gradient(var(--gold) 0 3px, transparent 3px 10px); }
.hjoint span { writing-mode: vertical-rl; color: var(--gold); font: 700 2.4rem 'Playfair Display', serif; letter-spacing: .12em; text-shadow: 0 0 24px rgba(242,183,5,.6); }

/* ===== interactive process ===== */
.proc { max-width: 1000px; margin: 0 auto; }
.proc-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: 8px; }
.proc-line { position: absolute; left: 12.5%; width: 75%; top: 26px; height: 2px; background: radial-gradient(circle, rgba(242,183,5,.45) 1px, transparent 1.6px) 0 0/9px 2px repeat-x; }
.proc-line b { position: absolute; left: 0; top: -1px; height: 4px; width: 0; background: var(--gold); box-shadow: 0 0 12px var(--gold); transition: width .9s cubic-bezier(.22,1,.36,1); }
.proc-plane { position: absolute; top: 12px; left: 12.5%; width: 28px; height: 28px; margin-left: -14px; color: var(--gold); transform: rotate(0deg); transition: left .9s cubic-bezier(.22,1,.36,1); z-index: 2; filter: drop-shadow(0 0 8px var(--gold)); }
.pn { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); padding: 0; font: inherit; transition: color .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.pn i { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(242,183,5,.4); background: #0a0805; display: grid; place-items: center; font: 600 1rem 'Inter'; font-style: normal; color: var(--gold); transition: all .5s cubic-bezier(.22,1,.36,1); position: relative; z-index: 1; }
.pn:hover { transform: translateY(-4px); color: var(--white); }
.pn.done i { border-color: var(--gold); }
.pn.on { color: var(--gold); } .pn.on i { background: var(--gold); color: #111; box-shadow: 0 0 0 8px rgba(242,183,5,.15), 0 0 28px var(--gold); transform: scale(1.12); }
.proc-body { position: relative; margin-top: 44px; min-height: 230px; }
.pp { position: absolute; inset: 0; padding: 34px 40px; border: 1px solid rgba(242,183,5,.3); border-radius: 22px; background: rgba(255,255,255,.04); backdrop-filter: blur(12px); opacity: 0; transform: translateX(40px) scale(.98); pointer-events: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); overflow: hidden; }
.pp.on { opacity: 1; transform: none; pointer-events: auto; }
.pp em { position: absolute; right: 24px; top: -14px; font: 700 8rem 'Playfair Display', serif; font-style: normal; color: rgba(242,183,5,.08); }
.pp h3 { color: var(--gold); font-size: 1.8rem; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; }
.pp p { color: var(--muted); line-height: 1.75; font-size: 1.08rem; max-width: 640px; position: relative; }
@media (max-width: 700px) { .pn span { font-size: .78rem; } .pn i { width: 40px; height: 40px; } .proc-line { top: 20px; } .proc-plane { top: 6px; } .pp { padding: 26px 22px; } .proc-body { min-height: 300px; } }

/* ===== numbers: gauge rings ===== */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; max-width: 1150px; margin: 0 auto; perspective: 900px; }
.gauge { text-align: center; padding: 34px 18px 28px; border-radius: 26px; border: 1px solid rgba(242,183,5,.25); background: linear-gradient(160deg, rgba(242,183,5,.09), rgba(255,255,255,.02)); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .5s; }
.gauge:hover { border-color: var(--gold); box-shadow: 0 20px 60px rgba(242,183,5,.22); }
.gauge span { display: block; margin-top: 16px; color: var(--muted); font-size: .95rem; }
.ring-box { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.ring-box svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-box b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.9rem 'Playfair Display', serif; color: var(--white); }
.g-track { fill: none; stroke: rgba(242,183,5,.35); stroke-width: 2; stroke-dasharray: .1 7; stroke-linecap: round; }
.g-fill { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; filter: drop-shadow(0 0 6px var(--gold)); transition: stroke-dashoffset 2s cubic-bezier(.22,1,.36,1); }
.g-orbit { animation: spin 9s linear infinite; transform-origin: 60px 60px; } .gauge:hover .g-orbit { animation-duration: 2.2s; }
.g-orbit circle { fill: #fff; filter: drop-shadow(0 0 6px var(--gold)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== testimonials carousel ===== */
.car-wrap { max-width: 1250px; margin: 0 auto; }
#voices .tq { display: flex; grid-template-columns: none; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 8vw 30px; scrollbar-width: none; max-width: none; }
#voices .tq::-webkit-scrollbar { display: none; }
#voices .tq figure { flex: 0 0 min(440px, 82vw); scroll-snap-align: center; position: relative; margin: 0; padding: 52px 32px 30px; border-radius: 24px; border: 1px solid rgba(242,183,5,.25); background: #0d0b05; opacity: .45; transform: scale(.93); transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1), border-color .6s; opacity: .45; }
#voices .tq figure::before { content: "“"; position: absolute; top: 6px; left: 26px; font: 700 6rem/1 'Playfair Display', serif; color: var(--gold); }
#voices .tq figure.act { opacity: 1; transform: none; border-color: rgba(242,183,5,.6); }
#voices .tq figure:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(242,183,5,.25); opacity: 1; border-color: var(--gold); }
#voices .tq blockquote { margin: 20px 0 26px; line-height: 1.7; font-size: 1.1rem; color: var(--white); }
.car-ctl { display: flex; align-items: center; justify-content: center; gap: 22px; }
.car-ctl button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold); background: none; color: var(--gold); cursor: pointer; font-size: 1.1rem; transition: all .4s cubic-bezier(.22,1,.36,1); }
.car-ctl button:hover { background: var(--gold); color: #111; transform: scale(1.08); }
.car-dots { display: flex; gap: 10px; } .car-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,183,5,.3); transition: all .5s cubic-bezier(.22,1,.36,1); cursor: pointer; } .car-dots i.on { width: 28px; border-radius: 6px; background: var(--gold); }

/* ===== v22: Two halves lives inside the door scene ===== */
.door-stage { display: flex; align-items: center; }
.door-stage .htrack { flex: 0 0 auto; padding: 0 8vw 0 0; }
.hfirst { flex: 0 0 100vw; display: grid; place-items: center; }
.leaf, .glow, .door-title, .door-hint { pointer-events: none; }
/* depth on "Who are we?" - extruded layers, drifts toward the viewer as the doors open */
.door-title { color: #f2b705; transform: translateZ(calc(var(--p, 0) * 520px)) rotateX(calc(var(--p, 0) * -10deg));
  text-shadow: 1px 1px 0 #b98a04, 2px 2px 0 #a67b03, 3px 3px 0 #926c03, 4px 4px 0 #7f5d02, 5px 5px 0 #6b4e02, 6px 6px 0 #583f02, 7px 7px 0 #453102, 8px 8px 0 #322301, 12px 20px 34px rgba(0,0,0,.85), 0 0 40px rgba(242,183,5,.25); }
.door-title em { color: #fff; text-shadow: 1px 1px 0 #cfcfcf, 2px 2px 0 #b3b3b3, 3px 3px 0 #999, 4px 4px 0 #808080, 5px 5px 0 #666, 6px 6px 0 #4d4d4d, 7px 7px 0 #333, 8px 8px 0 #1f1f1f, 12px 20px 34px rgba(0,0,0,.85); }

/* ===== v23: cleaner depth for "Who are we?" - layered slabs + pointer parallax ===== */
.door-title { transform-style: preserve-3d; transform: translateZ(calc(var(--p, 0) * 520px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  background: linear-gradient(180deg, #ffe08a 0%, #f2b705 45%, #a97c03 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.7)); }
.door-title em { -webkit-text-fill-color: #fff; background: linear-gradient(180deg, #fff, #cfcfcf); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.door-title::before, .door-title::after { content: attr(data-t); position: absolute; inset: 0; -webkit-text-fill-color: currentColor; background: none; pointer-events: none; z-index: -1; }
.door-title::before { transform: translateZ(-28px); color: rgba(168,122,4,.55); filter: blur(1.5px); }
.door-title::after { transform: translateZ(-64px); color: rgba(60,42,2,.7); filter: blur(5px); }

/* ===== contact hero: jigsaw words that snap together ===== */
.pz-h1 { display: flex; flex-wrap: wrap; align-items: center; row-gap: .12em; }
.pz { position: relative; display: inline-block; margin-right: -1.5px; padding: .08em .34em .12em; border: 1.5px solid rgba(242,183,5,.45); border-radius: .22em; background: linear-gradient(160deg, #1d1707, #0f0c05); color: var(--white); cursor: grab; touch-action: pan-y; user-select: none;
  opacity: var(--o, 0); transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dr, 0deg));
  transition: transform 1.1s cubic-bezier(.34, 1.56, .64, 1) var(--dl, 0s), opacity .6s cubic-bezier(.22, 1, .36, 1) var(--dl, 0s), box-shadow .5s cubic-bezier(.22, 1, .36, 1), border-color .5s cubic-bezier(.22, 1, .36, 1); }
.pz.em { color: var(--gold); font-style: italic; }
.pz::before, .pz::after { content: ""; position: absolute; top: 50%; width: .4em; height: .4em; margin-top: -.2em; border-radius: 50%; border: 1.5px solid rgba(242,183,5,.45); }
.pz::before { left: -.2em; background: #070503; z-index: 1; }                /* socket */
.pz::after { right: -.2em; background: #1a1406; z-index: 2; border-color: rgba(242,183,5,.7); } /* knob */
.pz:first-child::before, .pz:last-child::after { display: none; }
.pz:hover { box-shadow: 0 10px 34px rgba(242,183,5,.28); border-color: var(--gold); }
.pz.drag { transition: none; cursor: grabbing; box-shadow: 0 24px 50px rgba(0,0,0,.7), 0 0 30px rgba(242,183,5,.4); border-color: var(--gold); }
.pz-h1.solved .pz { animation: solved .9s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * .08s); }
@keyframes solved { 40% { border-color: var(--gold); box-shadow: 0 0 36px rgba(242,183,5,.7); } 100% { border-color: rgba(242,183,5,.6); } }
.pz-hint { display: block; margin: -6px 0 22px; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; opacity: .8; }
.pz.ls::before, .pz.le::after { display: none; }