/* Studio home v6 (Combined, Manrope), installed 2026-10-27 by tools/studio_v6_install.py from studio_variants/shared: common.css + v6_sections.css + v6.css */
/* Shared by the five studio versions (2026-10-27). Each version file sets its own fonts, palette and motion. */
@font-face{font-family:"Geist Mono";src:url("../../fonts/geist-mono-normal-400-600.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Manrope";src:url("../../fonts/manrope-normal-200-800.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"VArchivo";src:url("../../fonts/archivo-normal-100-900.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* buttons and labels: no more wide all-caps tracking (Nabil: "bold... so spaced out wide") */
.pill{letter-spacing:.01em;text-transform:none;font-weight:600}
.label{letter-spacing:.04em}

/* ---------- hero shell ---------- */
.vh{position:relative;overflow:hidden;background:var(--vh-bg,var(--bg));color:var(--vh-ink,var(--text));padding:calc(var(--hdr) + clamp(12px,2vw,28px)) 0 clamp(28px,4vw,56px)}
.vh-in{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:min(calc(100svh - var(--hdr) - 80px),720px)}
.vh-copy{position:relative;z-index:3}
.vh-kick{margin:0 0 16px;font-size:15px;color:var(--vh-muted,var(--muted))}
.vh-h{margin:0;font-size:clamp(38px,4.6vw,68px);line-height:1.02;text-wrap:balance;color:var(--vh-ink,var(--text))}
.vh-h em{font-style:normal}
.vh-lead{margin:18px 0 0;max-width:34em;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--vh-muted,var(--muted))}
.vh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.vh-b1{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--vh-btn,var(--accent));color:var(--vh-btn-ink,#06130F);font-weight:650;font-size:16px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.vh-b1:hover,.vh-b1:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.vh-b2{display:inline-flex;align-items:center;min-height:44px;color:var(--vh-ink,var(--text));font-weight:550;font-size:16px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.vh-b1:focus-visible,.vh-b2:focus-visible,.vh-replay:focus-visible{outline:3px solid var(--vh-btn,var(--accent));outline-offset:3px}
.vh-stage{position:relative;z-index:2;aspect-ratio:16/11;width:100%}
.vh-replay{position:absolute;right:10px;bottom:10px;z-index:9;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:var(--vh-muted,var(--muted));cursor:pointer;opacity:.6}
.vh-replay:hover{opacity:1}
@media (max-width:899px){
  .vh-in{grid-template-columns:1fr;min-height:0;gap:22px}
  .vh-stage{aspect-ratio:4/3.4}
  .vh-h{font-size:clamp(34px,9vw,46px)}
}

/* ---------- the same form, as a band right under the hero ---------- */
.vh-formsec{background:var(--bg);padding:clamp(20px,3vw,36px) 0 clamp(28px,4vw,48px);position:relative;z-index:3}
.vh-formin{width:var(--wrap);margin-inline:auto}
.vh-formsec .s18-contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"h f" "p f" "x f";column-gap:clamp(24px,4vw,56px);align-items:start;border-radius:var(--r);padding:clamp(20px,2.4vw,32px)}
.vh-formsec .s18-contact>h2{grid-area:h;margin:0}
.vh-formsec .s18-contact>p:first-of-type{grid-area:p}
.vh-formsec .s18-contact>p:last-of-type{grid-area:x;margin:0}
.vh-formsec .s18-contact>.lw{grid-area:f}
.vh-formsec .s18-contact .lead-form{margin-top:0;grid-template-columns:1fr 1fr}
.vh-formsec .s18-contact .lead-form label.full,.vh-formsec .s18-contact .lead-form .row,.vh-formsec .s18-contact .lead-form .lf-err{grid-column:1/-1}
.vh-formsec .s18-contact .lead-form .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.vh-formsec .s18-contact .lead-form .notes{margin:0}
.vh-formsec .s18-contact .lead-form label{letter-spacing:.02em;text-transform:none}
@media (max-width:767px){
  .vh-formsec .s18-contact{grid-template-columns:1fr;grid-template-areas:"h" "p" "f" "x"}
  .vh-formsec .s18-contact .lead-form{grid-template-columns:1fr}
}
/* r21: the glass form on this band. The panel behind it goes, so the glow reads on the page; these re-assert the glass sizes over the older hero card rules. */
.vh-formsec .s18-contact{background:transparent;border:0;padding-inline:0;grid-template-areas:"h f" "p f" "x f" "q f";grid-template-rows:auto auto auto 1fr}
.vh-formsec .s18-contact>p:first-of-type{font-size:15px;line-height:1.5;margin:12px 0 0;max-width:34ch}
.vh-formsec .s18-contact>p:last-of-type{align-self:start;margin-top:14px;font-size:14px}
.vh-formsec .s18-contact>h2{font-family:var(--vfont),ui-sans-serif,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}
.vh-formsec .s18-contact>.cfaq{grid-area:q;margin-top:clamp(22px,2.6vw,36px);max-width:30em}
.vh-formsec .s18-contact .cfaq h3{margin:0 0 6px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.vh-formsec .s18-contact .cfaq .qa summary{min-height:52px;padding:10px 0;font-size:16px}
.vh-formsec .s18-contact .cfaq .qa .ans{padding:0 0 14px;font-size:15px;line-height:1.5}
.vh-formsec .s18-contact .lead-form.gl{grid-template-columns:1fr 1fr;gap:18px}
.vh-formsec .s18-contact .lead-form.gl label{font-size:13px}
.vh-formsec .s18-contact .lead-form.gl label.full{display:grid}
.vh-formsec .s18-contact .lead-form.gl input:not([type=radio]){min-height:0;height:50px}
.vh-formsec .s18-contact .lead-form.gl textarea{height:auto;min-height:92px}
.vh-formsec .s18-contact .lead-form.gl .row{display:flex}
.vh-formsec .s18-contact .lead-form.gl .pill{min-height:50px}
.vh-formsec .s18-contact .lead-form.gl .notes{max-width:none}
.vh-formsec .s18-contact .lead-form.gl .note{font-size:13px}
@media (max-width:767px){.vh-formsec .s18-contact{grid-template-areas:"h" "p" "f" "x" "q";grid-template-rows:none}.vh-formsec .s18-contact>.lw{margin-top:16px}.vh-formsec .s18-contact .lead-form.gl{grid-template-columns:1fr;gap:12px}.vh-formsec .s18-contact .lead-form.gl input:not([type=radio]){height:46px}.vh-formsec .s18-contact .lead-form.gl textarea{min-height:72px}}


@media (prefers-reduced-motion:reduce){.vh *,.vh *::before,.vh *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important}}

/* generated by tools/studio_v6_sections_css.py from v2.css, v3.css, v4.css: stage and motion rules only */
.v2-stage{border-radius:24px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;container-type:inline-size}
.v2-pill{position:absolute;left:50%;top:8%;translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:700 max(9px,1.6cqw)/1 "Manrope",sans-serif;letter-spacing:.14em;color:#F5F7FA;white-space:nowrap}
.v2-pill i{width:7px;height:7px;border-radius:50%;background:#2EE6C5;box-shadow:0 0 10px #2EE6C5}
.v2-pre{position:absolute;left:0;right:0;top:17%;margin:0;text-align:center;font:300 4.4cqw/1.1 "Manrope",sans-serif;color:#E9EDF2;letter-spacing:-.02em}
.v2-mark{position:absolute;left:50%;top:27%;translate:-50% 0;display:flex;align-items:center;gap:2.2cqw;white-space:nowrap}
.v2-ribbon{width:10.5cqw;height:10.5cqw;overflow:visible}
.v2-ribbon path{fill:none;stroke:url(#v2g);stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.v2-ribbon path.k{stroke-width:9}
.v2-name{font:800 8.6cqw/1 "Manrope",sans-serif;letter-spacing:-.045em;color:#fff}
.v2-cards{position:absolute;left:0;right:0;bottom:-5%;height:52%}
.v2-card{position:absolute;bottom:0;margin:0;width:44%;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px rgba(0,0,0,.6)}
.v2-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.v2-card figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:600 max(9px,1.45cqw)/1.2 "Manrope",sans-serif}
.v2-card.c0{left:3%;transform:rotate(-7deg) translateY(10%)}
.v2-card.c1{left:28%;width:46%;z-index:2;transform:translateY(-6%)}
.v2-card.c2{left:53%;transform:rotate(7deg) translateY(10%)}
@keyframes v2pill{from{opacity:0;scale:.6}}
@keyframes v2blur{from{opacity:0;filter:blur(10px);letter-spacing:.2em}}
@keyframes v2draw{from{stroke-dashoffset:100}}
@keyframes v2rise{from{clip-path:inset(0 0 100% 0);transform:translateY(40%)}to{clip-path:inset(0 0 -10% 0)}}
@keyframes v2c0{from{opacity:0;transform:rotate(0) translateY(90%)}}
@keyframes v2c1{from{opacity:0;transform:translateY(90%)}}
@keyframes v2c2{from{opacity:0;transform:rotate(0) translateY(90%)}}
@keyframes v2glow{0%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 1px rgba(46,230,197,.7),0 0 60px rgba(46,230,197,.45)}100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px rgba(0,0,0,.6)}}
@keyframes v2up{from{opacity:0;transform:translateY(16px)}}
@keyframes v2bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.vh-go .v2-pill{animation:v2pill .45s cubic-bezier(.2,.9,.25,1.3) .05s both}
.vh-go .v2-pre{animation:v2blur .6s cubic-bezier(.2,.8,.2,1) .3s both}
.vh-go .v2-ribbon path{animation:v2draw .85s cubic-bezier(.6,0,.2,1) .6s both}
.vh-go .v2-ribbon path.k{animation:v2draw .25s ease 1.35s both}
.vh-go .v2-name{animation:v2rise .75s cubic-bezier(.2,.8,.2,1) .85s both}
.vh-go .v2-card.c0{animation:v2c0 .8s cubic-bezier(.2,.8,.2,1) 1.6s both}
.vh-go .v2-card.c1{animation:v2c1 .8s cubic-bezier(.2,.8,.2,1) 1.45s both,v2glow 1s ease 2.2s both}
.vh-go .v2-card.c2{animation:v2c2 .8s cubic-bezier(.2,.8,.2,1) 1.75s both}
.vh-go .v2-cards{animation:v2bob 6s ease-in-out 3.2s infinite}
.v3-stage{border-radius:22px;background:var(--paper);color:var(--ink3);overflow:hidden;container-type:inline-size;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.v3-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);pointer-events:none}
.v3-lab{position:absolute;z-index:2;font:500 max(10px,1.75cqw)/1 var(--mono);color:#6B6A64;letter-spacing:.02em;white-space:nowrap}
.v3-lab b{font-weight:500;color:#121212}
.v3-lab.tl{left:4.5%;top:6%}
.v3-lab.tr{right:4.5%;top:6%}
.v3-lab.bl{left:4.5%;bottom:6%}
.v3-lab.br{right:12%;bottom:6%}
.v3-words{position:absolute;left:0;right:0;top:44%;translate:0 -50%;height:24cqw;text-align:center}
.v3-w{position:absolute;left:0;right:0;font:800 21cqw/1 "VArchivo","Archivo",sans-serif;letter-spacing:-.055em;color:#121212;opacity:0;transform-origin:50% 80%}
.v3-rule{position:absolute;left:8%;right:8%;top:72%;height:1px;background:#121212;transform-origin:0 50%}
.v3-def{position:absolute;left:8%;right:8%;top:75%;margin:0;font:400 max(12px,2.1cqw)/1.3 var(--mono);color:#3A3935}
.v3-def i{font-style:italic;color:#121212;margin-right:.6em}
@keyframes v3word{0%{opacity:0;transform:translateY(.32em) scaleY(1.35)}16%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-.25em) scaleY(.8)}}
@keyframes v3land{0%{opacity:0;transform:translateY(.32em) scaleY(1.35)}55%{opacity:1;transform:translateY(-.03em) scaleY(.97)}100%{opacity:1;transform:none}}
@keyframes v3draw{from{transform:scaleX(0)}}
@keyframes v3fade{from{opacity:0}}
@keyframes v3up{from{opacity:0;transform:translateY(16px)}}
@keyframes v3breath{0%,100%{letter-spacing:-.055em}50%{letter-spacing:-.045em}}
.vh-go .v3-lab{animation:v3fade .4s ease .05s both}
.vh-go .v3-rule{animation:v3draw .5s cubic-bezier(.6,0,.2,1) 2.3s both}
.vh-go .v3-def{animation:v3fade .5s ease 2.5s both}
.v4-stage{container-type:inline-size}
.v4-laptop{position:absolute;left:1%;top:4%;width:82%}
.v4-screen{position:relative;aspect-ratio:16/10;border-radius:14px;border:10px solid #070B13;background:#0E1626;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px rgba(0,0,0,.5)}
.v4-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.v4-wire{position:absolute;inset:0;z-index:0;opacity:0;background:
  linear-gradient(#22324F,#22324F) 6% 6%/88% 6% no-repeat,
  linear-gradient(#2A3D5F,#2A3D5F) 6% 30%/46% 8% no-repeat,
  linear-gradient(#2A3D5F,#2A3D5F) 6% 42%/38% 8% no-repeat,
  linear-gradient(#1C2A44,#1C2A44) 6% 56%/40% 4% no-repeat,
  linear-gradient(#2EE6C5,#2EE6C5) 6% 68%/16% 7% no-repeat,
  linear-gradient(#1C2A44,#1C2A44) 6% 92%/88% 14% no-repeat}
.v4-scan{position:absolute;top:0;bottom:0;left:100%;width:2px;background:#2EE6C5;box-shadow:0 0 18px 4px rgba(46,230,197,.6);opacity:0;z-index:3}
.v4-base{display:block;width:112%;margin-left:-6%;height:2.2cqw;border-radius:0 0 14px 14px;background:linear-gradient(#1A2335,#0B1019);box-shadow:0 18px 30px rgba(0,0,0,.45)}
.v4-phone{position:absolute;right:1%;top:26%;width:21%;aspect-ratio:600/1298;border-radius:3.6cqw;border:7px solid #070B13;overflow:hidden;background:#0E1626;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.55)}
.v4-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v4-chips{position:absolute;left:4%;bottom:2%;display:flex;gap:1.4cqw}
.v4-chip{display:inline-flex;align-items:center;gap:8px;padding:.9cqw 1.6cqw;border-radius:999px;background:rgba(10,18,34,.88);border:1px solid rgba(255,255,255,.14);color:#EEF2F7;font:600 max(10px,1.7cqw)/1 "Space Grotesk",sans-serif}
.v4-chip i{width:8px;height:8px;border-radius:50%;background:#2EE6C5;box-shadow:0 0 0 0 rgba(46,230,197,.6)}
@keyframes v4fade{from{opacity:0}}
@keyframes v4wire{0%{opacity:0}25%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes v4wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes v4scan{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
@keyframes v4text{from{opacity:0;transform:translateY(-1.5%);filter:blur(4px)}}
@keyframes v4lap{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes v4phone{from{opacity:0;transform:translateY(40%) rotate(6deg)}}
@keyframes v4chip{0%{opacity:0;transform:translateY(10px) scale(.8)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes v4ping{0%{box-shadow:0 0 0 0 rgba(46,230,197,.7)}100%{box-shadow:0 0 0 10px rgba(46,230,197,0)}}
@keyframes v4up{from{opacity:0;transform:translateY(16px)}}
@keyframes v4bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.vh-go .v4-laptop{animation:v4lap .5s cubic-bezier(.2,.8,.2,1) 0s both}
.vh-go .v4-wire{animation:v4wire 1.3s ease .1s both}
.vh-go .v4-bg{animation:v4wipe .8s cubic-bezier(.6,0,.2,1) .45s both}
.vh-go .v4-scan{animation:v4scan .8s cubic-bezier(.6,0,.2,1) .45s both}
.vh-go .v4-full{animation:v4text .5s cubic-bezier(.2,.8,.2,1) 1.15s both}
.vh-go .v4-phone{animation:v4phone .7s cubic-bezier(.2,.8,.2,1) 1.4s both}
.vh-go .v4-pfull{animation:v4fade .4s ease 1.95s both}
.vh-go .v4-chip.c0{animation:v4chip .4s cubic-bezier(.2,.8,.2,1) 2.1s both}
.vh-go .v4-chip.c1{animation:v4chip .4s cubic-bezier(.2,.8,.2,1) 2.3s both}
.vh-go .v4-chip.c2{animation:v4chip .4s cubic-bezier(.2,.8,.2,1) 2.5s both}
.vh-go .v4-chip.c0 i{animation:v4ping .8s ease-out 2.3s 2}
.vh-go .v4-chip.c1 i{animation:v4ping .8s ease-out 2.5s 2}
.vh-go .v4-chip.c2 i{animation:v4ping .8s ease-out 2.7s 2}
/* r25: the template section's phone ends on a booking tap and its confirmation (same moment as the hero) */
.v4-tap{position:absolute;left:50%;top:74%;width:36%;aspect-ratio:1;margin-left:-18%;translate:0 -50%;border-radius:50%;background:rgba(127,203,140,.6);opacity:0;z-index:2}
.v4-toast{position:absolute;right:11%;top:13%;z-index:4;display:flex;align-items:center;gap:1.1cqw;padding:1.1cqw 1.7cqw 1.1cqw 1.1cqw;background:#fff;border-radius:12px;box-shadow:0 18px 34px rgba(0,0,0,.3);color:#0D1412;white-space:nowrap}
.v4-toast svg{width:3cqw;height:3cqw;flex:none}.v4-toast circle{fill:#0E5A52}.v4-toast path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.v4-toast b{display:block;font:700 max(11px,1.7cqw)/1.2 var(--vfont),sans-serif}.v4-toast small{display:block;font:500 max(10px,1.35cqw)/1.3 var(--vfont),sans-serif;color:#4E5A55}
.vh-go .v4-tap{animation:v6ripple .45s ease-out 3s both}
.vh-go .v4-toast{animation:v6toast .45s cubic-bezier(.2,.9,.25,1.15) 3.3s both}

/* v6 Combined (Nabil 2026-10-27): V1's showreel hero, upright and bigger, with a search-to-booking sequence; V4 Assemble in the template section,
   the trilingual Kinetic word in place of the language ticker, V2 Launch as the closing sign-off. One font token drives the hero and display type. */
:root{--vfont:"Manrope";--vweight:800;--vtrack:-.045em;--dw:800;--dtrack:-.035em;--sec:clamp(52px,6.5vw,96px);--mono:"Geist Mono",ui-monospace,monospace}
.disp,.menu nav a,.marq-row span,.pmeta h3,.svc h3,.svc-main h3,.svc-side h3,.wlead .lname h3,.kw{font-family:var(--vfont),ui-sans-serif,system-ui,sans-serif}

/* ---------- hero: light grid, copy left, a bigger stage right ---------- */
/* r23 (Nabil 2026-10-27): "instead of that white paper grade, let's do like blue, like a light sky blue" */
.vh-v6{--vh-bg:#D9EEFC;--vh-ink:#0A1A2B;--vh-muted:#3D5468;--vh-btn:#0A1A2B;--vh-btn-ink:#EAF6FF;--teal:#0F6D63;background:linear-gradient(180deg,#C6E5FA 0%,#DDF0FD 55%,#EAF6FE 100%)}
.vh-v6::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,86,150,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(20,86,150,.11) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px;pointer-events:none}
.vh-v6 .vh-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px)}
.vh-v6 .vh-kick{font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vh-v6 .vh-h{font-family:var(--vfont),sans-serif;font-weight:var(--vweight);letter-spacing:var(--vtrack);line-height:1;font-size:clamp(34px,3.9vw,58px)}
.vh-v6 .vh-h em{font-style:normal}
.vh-v6 .vh-b2{color:var(--vh-ink)}

.v6-stage{container-type:inline-size;aspect-ratio:16/11.5;color:var(--vh-ink)}
.v6-stage .v1-hud{position:absolute;z-index:6;font:500 max(9px,1.45cqw)/1 var(--mono);letter-spacing:.08em;color:#24405A;white-space:nowrap}
.v6-stage .v1-hud.tl{left:4%;top:3.5%}.v6-stage .v1-hud.tr{right:4%;top:3.5%;display:flex;align-items:center;gap:7px}.v6-stage .v1-hud.bl{left:4%;bottom:3.5%}.v6-stage .v1-hud.br{right:11%;bottom:3.5%}
.v6-stage .v1-hud.tr i{width:6px;height:6px;border-radius:50%;background:#E5484D}
.v6-stage .v1-crn{position:absolute;z-index:6;width:18px;height:18px;border-color:#0A1A2B;border-style:solid;border-width:0}
.v6-stage .v1-crn.c1{left:1%;top:1%;border-left-width:1.5px;border-top-width:1.5px}.v6-stage .v1-crn.c2{right:1%;top:1%;border-right-width:1.5px;border-top-width:1.5px}
.v6-stage .v1-crn.c3{left:1%;bottom:1%;border-left-width:1.5px;border-bottom-width:1.5px}.v6-stage .v1-crn.c4{right:1%;bottom:1%;border-right-width:1.5px;border-bottom-width:1.5px}

/* search, then the result (hidden in the finished frame: they belong to the first second) */
.v6-search{position:absolute;left:50%;top:46%;width:72%;z-index:7;translate:-50% -50%;opacity:0;visibility:hidden}
.v6-bar{display:flex;align-items:center;gap:1.6cqw;height:7.4cqw;padding:0 2.4cqw;border-radius:999px;background:#fff;box-shadow:0 18px 40px rgba(13,20,18,.16),0 0 0 1px rgba(13,20,18,.08);font:500 2.5cqw/1 "Geist",sans-serif;color:#0D1412}
.v6-bar svg{width:2.8cqw;height:2.8cqw;flex:none;fill:none;stroke:#4E5A55;stroke-width:2.2;stroke-linecap:round}
.v6-q{display:inline-block;max-width:30em;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.v6-caret{display:inline-block;width:2px;height:3.2cqw;background:#0F6D63;margin-left:-1.2cqw}
.v6-res{position:relative;display:flex;gap:1.8cqw;align-items:center;margin-top:1.6cqw;padding:2cqw 2.4cqw;border-radius:2cqw;background:#fff;box-shadow:0 18px 40px rgba(13,20,18,.14),0 0 0 1px rgba(13,20,18,.06)}
.v6-fav{width:6.4cqw;height:6.4cqw;flex:none;border-radius:1.4cqw;background:url("../../media/ry10_desk_bg.webp") 38% 58%/420% auto no-repeat}
.v6-rt{display:grid;gap:.5cqw;min-width:0}
.v6-rt b{font:700 2.5cqw/1.1 "Geist",sans-serif;color:#1A0DAB}
.v6-rt small{font:400 1.8cqw/1 "Geist",sans-serif;color:#0F6D63}
.v6-rt em{display:flex;align-items:center;gap:.8cqw;font:400 1.8cqw/1 "Geist",sans-serif;font-style:normal;color:#4E5A55}
.v6-st{display:inline-flex;gap:.2cqw}.v6-st svg{width:1.8cqw;height:1.8cqw;fill:#FBBC04}
.v6-tap{position:absolute;right:12%;top:50%;width:6cqw;height:6cqw;margin:-3cqw 0 0 -3cqw;border-radius:50%;background:rgba(15,109,99,.35);opacity:0}

/* the site: tilted only enough to read as an object, so the whole screen stays visible */
.v6-scene{position:absolute;inset:0;perspective:1500px;transform-style:preserve-3d;transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.v6-rig{position:absolute;left:47%;top:53%;width:84%;aspect-ratio:16/9;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(14deg) rotateY(-22deg) rotateZ(2deg)}
.v6-rig>*{position:absolute;transform-style:preserve-3d}
.v6-shadow{inset:0;border:1.5px dashed rgba(13,20,18,.35);border-radius:12px;transform:translate3d(18px,18px,-40px)}
.v6-card{inset:0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 40px 80px rgba(13,20,18,.3),0 0 0 6px #fff}
.v6-card img{width:100%;height:100%;object-fit:cover;display:block}
.v6-card picture{display:block;width:100%;height:100%}   /* r30: the laptop shot sits in a <picture> (phones get the 800 px copy) */
/* r27: the layers lift the r10 header, headline and buttons; boxes measured by diffing the r10 frame with and without its copy
   (builds/hero_options_2026-10-27/README.md): headline 24.2-76.0% x 65.0-81.0%, buttons 33.8-65.9% x 86.3-95.5% */
.v6-lay{background-image:url("../../media/ry10_desk_full.webp");background-repeat:no-repeat;border-radius:6px;box-shadow:0 18px 30px rgba(13,20,18,.3);transform:translateZ(var(--z))}
.v6-lay.l1{left:0;top:0;width:100%;height:10.6%;background-size:100% auto;background-position:0 0;--z:40px}
.v6-lay.l2{left:23.6%;top:64.4%;width:53.0%;height:17.2%;background-size:188.68% auto;background-position:50.21% 77.78%;--z:96px}
.v6-lay.l3{left:33.2%;top:85.7%;width:33.3%;height:10.4%;background-size:300.30% auto;background-position:49.78% 95.65%;--z:70px}
.v6-tag{font:600 max(9px,1.5cqw)/1 var(--mono);color:#E9FFFA;background:#0E5A52;padding:.7cqw 1cqw;border-radius:4px;white-space:nowrap;transform:translateZ(var(--z));box-shadow:0 6px 14px rgba(13,20,18,.25)}
.v6-tag.t0{left:-2%;top:-7%;--z:60px}.v6-tag.t1{left:66%;top:34%;--z:110px}.v6-tag.t2{left:16.2%;top:86.7%;--z:90px}.v6-tag.t3{left:83%;top:19%;--z:140px}
.v6-phone{left:79%;top:27%;width:18%;aspect-ratio:600/1298;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 4px #111,0 30px 50px rgba(13,20,18,.35);--z:120px;transform:translateZ(var(--z))}
.v6-phone img{width:100%;height:100%;object-fit:cover;display:block}
.v6-tap2{position:absolute;left:50%;top:82%;width:40%;aspect-ratio:1;margin-left:-20%;translate:0 -50%;border-radius:50%;background:rgba(127,203,140,.6);opacity:0}
.v6-toast{left:50%;top:-17%;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 2cqw 1.4cqw 1.4cqw;background:#fff;border-radius:12px;box-shadow:0 18px 34px rgba(13,20,18,.22);color:#0D1412;--z:170px;transform:translateZ(var(--z));white-space:nowrap}
.v6-toast svg{width:4cqw;height:4cqw;flex:none}
.v6-toast circle{fill:#0E5A52}.v6-toast path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:0}
.v6-toast b{display:block;font:700 max(12px,2.2cqw)/1.2 "Geist",sans-serif}.v6-toast small{display:block;font:500 max(10px,1.6cqw)/1.3 "Geist",sans-serif;color:#4E5A55}

/* hero motion: search 0.1 to 1.6 s, the site 1.4 to 2.4 s, layers and phone to 3.0 s, the booking lands by 3.5 s */
@keyframes v6fade{from{opacity:0}}
@keyframes v6up{from{opacity:0;transform:translateY(18px)}}
@keyframes v6crn{from{opacity:0;scale:1.6}}
@keyframes v6sin{from{opacity:0;visibility:visible;scale:.92}to{opacity:1;visibility:visible;scale:1}}
@keyframes v6sout{from{opacity:1;visibility:visible;scale:1}to{opacity:0;visibility:hidden;scale:.86;translate:-50% -62%}}
@keyframes v6type{from{max-width:0}}
@keyframes v6blink{50%{opacity:0}}
@keyframes v6drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes v6ripple{0%{opacity:.6;scale:.2}100%{opacity:0;scale:2.4}}
@keyframes v6rig{0%{opacity:0;transform:translate(-50%,-34%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.4)}18%{opacity:1}100%{transform:translate(-50%,-50%) rotateX(14deg) rotateY(-22deg) rotateZ(2deg)}}
@keyframes v6lift{from{transform:translateZ(0);box-shadow:none}}
@keyframes v6pop{0%{opacity:0;transform:translateZ(var(--z)) scale(.2)}70%{transform:translateZ(var(--z)) scale(1.08)}100%{transform:translateZ(var(--z))}}
@keyframes v6slide{from{opacity:0;transform:translate3d(70%,0,0) translateZ(var(--z))}}
@keyframes v6toast{from{opacity:0;transform:translateZ(calc(var(--z) + 140px))}}
@keyframes v6check{from{stroke-dashoffset:16}}
@keyframes v6float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.vh-go.vh-v6::before{animation:v6fade .5s ease both}
.vh-go .v6-stage .v1-hud,.vh-go .v6-stage .v1-crn{animation:v6crn .45s cubic-bezier(.2,.8,.2,1) .1s both}
.vh-go.vh-v6 .vh-kick{animation:v6up .6s cubic-bezier(.2,.8,.2,1) .05s both}
.vh-go.vh-v6 .vh-h{animation:v6up .8s cubic-bezier(.2,.8,.2,1) .15s both}
.vh-go.vh-v6 .vh-lead{animation:v6up .7s cubic-bezier(.2,.8,.2,1) .45s both}
.vh-go.vh-v6 .vh-cta{animation:v6up .7s cubic-bezier(.2,.8,.2,1) .65s both}
.vh-go .v6-search{animation:v6sin .3s cubic-bezier(.2,.8,.2,1) .1s forwards,v6sout .35s cubic-bezier(.6,0,.4,1) 1.5s forwards}
.vh-go .v6-q{animation:v6type .7s steps(27,end) .35s both}
.vh-go .v6-caret{animation:v6blink .5s steps(1) .1s 3}
.vh-go .v6-res{animation:v6drop .3s cubic-bezier(.2,.8,.2,1) 1.02s both}
.vh-go .v6-tap{animation:v6ripple .45s ease-out 1.28s both}
.vh-go .v6-rig{animation:v6rig .95s cubic-bezier(.2,.75,.15,1) 1.45s both}
.vh-go .v6-shadow{animation:v6fade .5s ease 2s both}
.vh-go .v6-lay.l1{animation:v6lift .6s cubic-bezier(.2,.8,.2,1) 2.05s both}
.vh-go .v6-lay.l2{animation:v6lift .65s cubic-bezier(.2,.8,.2,1) 2.15s both}
.vh-go .v6-lay.l3{animation:v6lift .6s cubic-bezier(.2,.8,.2,1) 2.25s both}
.vh-go .v6-tag.t0{animation:v6pop .35s cubic-bezier(.2,.8,.2,1) 2.25s both}
.vh-go .v6-tag.t1{animation:v6pop .35s cubic-bezier(.2,.8,.2,1) 2.35s both}
.vh-go .v6-tag.t2{animation:v6pop .35s cubic-bezier(.2,.8,.2,1) 2.45s both}
.vh-go .v6-tag.t3{animation:v6pop .35s cubic-bezier(.2,.8,.2,1) 2.6s both}
.vh-go .v6-phone{animation:v6slide .6s cubic-bezier(.2,.8,.2,1) 2.35s both}
.vh-go .v6-tap2{animation:v6ripple .45s ease-out 2.9s both}
.vh-go .v6-toast{animation:v6toast .45s cubic-bezier(.2,.9,.25,1.15) 3.05s both}
.vh-go .v6-toast path{animation:v6check .3s ease 3.3s both}
/* r22: no endless float after the build; it had no job and nothing could pause it */
@media (max-width:899px){
  .vh-v6 .vh-in{grid-template-columns:1fr}
  .v6-stage{aspect-ratio:4/3.6}
  .v6-rig{width:88%;left:46%}
  .v6-stage .v1-hud.br{right:4%;bottom:auto;top:8%}
  .v6-search{width:90%}
  .v6-bar{height:max(40px,7.4cqw);font-size:max(13px,2.5cqw);gap:8px;padding:0 14px}
  .v6-bar svg{width:16px;height:16px}.v6-caret{height:16px;margin-left:-6px}
  .v6-res{padding:10px 12px;gap:10px;border-radius:12px;margin-top:8px}
  .v6-fav{width:34px;height:34px;border-radius:8px}
  .v6-rt b{font-size:13px}.v6-rt small,.v6-rt em{font-size:11px}.v6-st svg{width:10px;height:10px}
  /* r30 (page audit, weight): phones show the laptop at about 300 px wide, so its layers and the result icon read the 800 px copies */
  .v6-lay{background-image:url("../../media/ry10_desk_full-r20-480.webp")}
  .v6-fav{background-image:url("../../media/ry10_desk_bg-r20-480.webp")}
}

/* ---------- sections: each stage waits at its first frame until it is on screen ---------- */
.v6-anim.vh-go.v6-hold *,.v6-anim.vh-go.v6-hold *::before,.v6-anim.vh-go.v6-hold *::after{animation-play-state:paused!important}
.v6-asm{margin-top:clamp(18px,2.4vw,30px)}
.v6-asm .v6-sstage{max-width:1040px;margin-inline:auto;aspect-ratio:16/10.6}
/* ---------- r22 shared section head (films and closing) ---------- */
.v6-shead{max-width:720px;margin:0 auto clamp(24px,3vw,40px);text-align:center}
.v6-eyebrow{margin:0 0 10px;font:700 12px/1 var(--vfont),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.v6-sh{margin:0;font:800 clamp(30px,3.4vw,46px)/1.05 var(--vfont),sans-serif;letter-spacing:-.035em;color:var(--text);text-wrap:balance}
.v6-slead{margin:14px auto 0;max-width:56ch;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--muted)}
/* ---------- r22 short films: what a client buys, playing only while on screen ---------- */
.v6-films{background:radial-gradient(55% 45% at 18% 35%,rgba(46,230,197,.10),transparent 70%),radial-gradient(50% 50% at 86% 62%,rgba(91,140,255,.13),transparent 70%),var(--bg);padding-block:clamp(48px,6vw,96px)}
/* r25: one even row of three portrait tiles (booking film, roof take-apart, pho take-apart) */
.v6-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);align-items:start;max-width:1120px;margin-inline:auto}
.v6-film{margin:0;min-width:0}
.v6-fframe{position:relative;border-radius:18px;overflow:hidden;background:#05080D;box-shadow:0 0 0 1px var(--line-2),0 30px 60px rgba(0,0,0,.45)}
.v6-film.f-tile .v6-fframe{aspect-ratio:3/4;transition:transform .12s ease-out}
.v6-film.f-tile:hover .v6-fframe,.v6-film.f-tile:focus-within .v6-fframe{transform:translateY(-4px) scale(1.015)}
.v6-fframe video{display:block;width:100%;height:100%;object-fit:cover}
.v6-fbtn{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(5,8,13,.66);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v6-fbtn svg{width:18px;height:18px;fill:currentColor}
.v6-fbtn .pa,.v6-fbtn[aria-pressed="true"] .pl{display:none}
.v6-fbtn[aria-pressed="true"] .pa{display:block}
.v6-fbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.v6-film figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted)}
.v6-film figcaption b{color:var(--text);font-weight:700;margin-right:4px}
@media (max-width:767px){.v6-fgrid{grid-template-columns:minmax(0,1fr);gap:28px;max-width:340px}}
/* ---------- r22 closing: three cards that are the links, popping up as they reach the screen ---------- */
.v6-close{background:radial-gradient(50% 42% at 50% 45%,rgba(192,139,255,.11),transparent 72%),var(--bg);padding-block:clamp(48px,6vw,96px)}
.v6-wcards{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.v6-wc a{display:flex;flex-direction:column;gap:6px;height:100%;padding:10px 10px 16px;border-radius:16px;background:color-mix(in srgb,var(--text) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.v6-wc.c0{--wc:#E0B04A}.v6-wc.c1{--wc:#4CC27E}.v6-wc.c2{--wc:#3B8EF0}   /* r24 (Nabil 2026-10-27: "I don't want any of this Claude color anywhere"): Marlin in its own blue, no orange */
.v6-wc a{border-top:3px solid var(--wc)}
.v6-wc a:hover,.v6-wc a:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--wc),0 22px 50px color-mix(in srgb,var(--wc) 28%,transparent)}
.v6-wc a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.v6-wimg{display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:#05080D;margin-bottom:8px}
.v6-wimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* r26: Pimentel's and Marlin's headlines sit on the left of their shots; a centered crop cut them mid-word ("d. Delayed", "ur roof") */
.v6-wc.c0 .v6-wimg img,.v6-wc.c2 .v6-wimg img{object-position:left top}
.v6-wname{padding-inline:4px;font:750 18px/1.25 var(--vfont),sans-serif;letter-spacing:-.01em}
.v6-wname span{color:var(--wc)}
.v6-wnote{padding-inline:4px;font-size:14px;line-height:1.45;color:var(--muted)}
.v6-ccta{justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:899px){.v6-wcards{grid-template-columns:minmax(0,1fr);max-width:520px}}
@media (min-width:900px) and (hover:hover){
  .v6-wcards{display:flex}
  .v6-wc{flex:1 1 0;min-width:0;transition:flex-grow .55s cubic-bezier(.2,.8,.2,1)}
  .v6-wcards:hover .v6-wc,.v6-wcards:focus-within .v6-wc{flex-grow:.72}
  .v6-wcards .v6-wc:hover,.v6-wcards .v6-wc:focus-within{flex-grow:1.75}
  .v6-wimg{aspect-ratio:auto;height:clamp(220px,21vw,300px)}
}
.js .v6-wcards.pop .v6-wc{opacity:0;transform:translateY(28px)}
.js .v6-wcards.pop .v6-wc.in{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),flex-grow .55s cubic-bezier(.2,.8,.2,1)}
/* ---------- r22 hero chips and template labels in plain words, not code and not button-shaped ---------- */
.v6-tag{font:700 max(10px,1.45cqw)/1 var(--vfont),sans-serif;letter-spacing:0;padding:.75cqw 1.2cqw;border-radius:6px}
.v6-tag.t3{left:auto;right:-4%;top:12%}
@media (max-width:599px){.v6-tag.t1,.v6-tag.t2{display:none}}   /* r23: on phones the two middle chips ran off the stage edge; the two that fit say the most for a phone visitor */
.v6-sstage .v4-chip{padding:0;background:none;border:0;border-radius:0;font:600 max(11px,1.5cqw)/1 var(--vfont),sans-serif;color:#EEF2F7;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ================= dead-space round (2026-10-28, Nina Cole, brief TEAM/BRIEF_studio_dead_space_2026-10-28.md): the home's spacing on the same
   steps as the inner pages' blocks, so every gap between two sections stays under about 110 px (dead_space.cjs flags over 120).
   Spacing only. The hero (#top), the price box and "Why I started" keep their own boxes; only the gaps around them change. */
html.v10 .vh-formsec{padding-bottom:0}
html.v10 .cts{padding-top:clamp(20px,2.4vw,36px)}
html.v10 .csvc.svcr{padding-bottom:clamp(8px,1vw,16px)}
html.v10 .v6-films{padding-block:clamp(24px,3vw,44px)}
html.v10 .cprice{margin-bottom:clamp(24px,3vw,44px)}
html.v10 .v6-close{padding-block:clamp(16px,2vw,32px) clamp(24px,3vw,44px)}

/* r20: a complete still is visible before scripts, with no hidden assembly frames. */
#template .v6-asm .v6-sstage *{animation:none!important}
#template .v4-wire,#template .v4-scan,#template .v4-tap{display:none}
#template .v4-laptop,#template .v4-phone,#template .v4-full,#template .v4-pfull{opacity:1;transform:none;filter:none;clip-path:none}
#template .v4-toast{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  #template .v6-asm.vh-go .v4-toast{animation:v6toast .15s ease-out both!important}
}
/* The still remains underneath the video during loading, stalls and errors. */
.v6-fposter{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.v6-fframe video{position:absolute;inset:0;opacity:0;transition:opacity .12s linear}
.v6-fframe.is-playing video{opacity:1}
@media (prefers-reduced-motion:reduce){
  .v6-film.f-tile .v6-fframe,.v6-fframe video{transition:none}
  .v6-film.f-tile:hover .v6-fframe,.v6-film.f-tile:focus-within .v6-fframe{transform:none}
}