/* ================================================================ Veyra homepage, 3 Nov 2026
   "One frame, start to finish." A camera viewfinder hero, then one client's job told in six
   scroll-scrubbed chapters built from live HTML, not screenshots. Every surface colour is a
   site token or a mix of one, so the light theme flips it without a second rule set. Photos and
   the glass that sits on photos stay dark in both themes on purpose. */

@font-face{font-family:'Instrument Sans V';font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;
  src:url("/assets/fonts/instrument-sans-var-latin.woff2") format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.home-v4{
  --sans4:'Instrument Sans V','Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --l1:color-mix(in srgb,var(--ivory) 10%,transparent);
  --l2:color-mix(in srgb,var(--ivory) 20%,transparent);
  --pane:color-mix(in srgb,var(--ivory) 4%,transparent);
  --pane2:color-mix(in srgb,var(--ivory) 8%,transparent);
  --card:color-mix(in srgb,var(--ink2) 94%,var(--ivory));
  --goldsoft:color-mix(in srgb,var(--gold) 16%,transparent);
  --ease:cubic-bezier(.2,.75,.15,1);
  font-family:var(--sans4);
  background:var(--ink);
}
.home-v4 main{overflow-x:clip}
/* the nav floats 14px down, so whatever scrolls past would show in the gap above it */
.home-v4::before{content:"";position:fixed;inset:0 0 auto;z-index:49;height:calc(52px + env(safe-area-inset-top,0px));pointer-events:none;background:linear-gradient(var(--ink) 38%,color-mix(in srgb,var(--ink) 70%,transparent) 62%,transparent)}
.home-v4 em{font-style:italic;color:var(--gold)}
.home-v4 .btn{font-family:var(--sans4);font-weight:600}
.v4-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v4-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* -------------------------------------------------------------- shared type */
.v4-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tx3);text-transform:uppercase}
.v4-h2{margin:0;font-family:var(--ed);font-weight:400;font-size:clamp(40px,5.4vw,82px);line-height:.96;letter-spacing:-.03em;text-wrap:balance}
.v4-sub{margin:0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;color:var(--tx2);max-width:56ch}
.v4-sub a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--l2);text-underline-offset:3px}
.v4-sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:60rem}
.v4-sec-head.center{align-items:center;text-align:center;margin-inline:auto}
.v4-more{display:inline-flex;align-items:center;gap:8px;width:max-content;font-size:14.5px;font-weight:600;color:var(--ivory);padding-bottom:3px;border-bottom:1px solid var(--l2);transition:gap .25s var(--ease),border-color .25s}
.v4-more span{color:var(--gold)}
.v4-more:hover{gap:13px;border-color:var(--gold)}
.v4-more-row{display:flex;flex-wrap:wrap;gap:12px 24px}
.v4-cta{display:flex;flex-wrap:wrap;gap:12px}
.v4-fine{margin:0;font-size:13px;line-height:1.6;color:var(--tx3)}
.v4-fine a{color:var(--tx2);text-decoration:underline}

/* glass that sits on photographs: dark in both themes */
.v4-toast,.v4-chip,.v4-dev-note,.v4-ping{color:#F7F3EC;background:rgba(16,13,11,.58);border:1px solid rgba(255,252,247,.2);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 44px -18px rgba(0,0,0,.6)}

/* -------------------------------------------------------------- HERO */
.v4-hero{position:relative;padding:86px 12px 0}
.v4-hero-frame{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);min-height:min(calc(100svh - 104px),900px);border:1px solid var(--l1);border-radius:34px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 0% 100%,color-mix(in srgb,var(--clay) 20%,transparent),transparent 60%),radial-gradient(ellipse 60% 50% at 40% 0%,var(--goldsoft),transparent 65%),var(--ink2)}
.v4-hero-copy{display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(36px,5vw,76px) clamp(24px,4.4vw,72px)}
.v4-tag{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:8px 14px;border:1px solid var(--l2);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tx2)}
.v4-tag b{font-weight:400;color:var(--gold)}
.v4-dot{width:7px;height:7px;border-radius:50%;background:#7FD69A;box-shadow:0 0 0 0 rgba(127,214,154,.6);animation:v4-ping 2.4s infinite}
@keyframes v4-ping{0%{box-shadow:0 0 0 0 rgba(127,214,154,.55)}70%{box-shadow:0 0 0 9px rgba(127,214,154,0)}100%{box-shadow:0 0 0 0 rgba(127,214,154,0)}}
.v4-h1{margin:26px 0 0;font-family:var(--ed);font-weight:400;font-size:clamp(54px,7.3vw,124px);line-height:.88;letter-spacing:-.04em}
.v4-line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.14em}
.v4-line>*,.v4-line{animation:v4-up 1.1s var(--ease) both}
.v4-line:nth-child(2){animation-delay:.08s}.v4-line:nth-child(3){animation-delay:.16s}
@keyframes v4-up{from{transform:translateY(42%);opacity:0;filter:blur(8px)}to{transform:none;opacity:1;filter:none}}
.v4-lede{margin:26px 0 0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.62;color:var(--tx2);max-width:48ch;animation:v4-up 1.1s .26s var(--ease) both}
.v4-pill{display:flex;align-items:center;gap:6px;width:min(100%,470px);margin-top:30px;padding:6px 6px 6px 22px;border:1px solid var(--l2);border-radius:999px;background:var(--pane2);animation:v4-up 1.1s .34s var(--ease) both;transition:border-color .25s,box-shadow .25s}
.v4-pill:focus-within{border-color:var(--gold);box-shadow:0 0 0 5px var(--goldsoft)}
.v4-pill input{flex:1;min-width:0;height:46px;border:0;background:transparent;color:var(--ivory);font:500 15.5px var(--sans4);outline:none}
.v4-pill input::placeholder{color:var(--tx3)}
.v4-pill button{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 22px;border:0;border-radius:999px;background:var(--ivory);color:var(--ink);font:600 15px var(--sans4);cursor:pointer;white-space:nowrap}
.v4-pill button span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ivory);transition:transform .3s var(--ease)}
.v4-pill button:hover span{transform:rotate(-45deg)}
.v4-pill button:disabled{opacity:.6}
.v4-hero-msg{min-height:1.4em;margin:10px 0 0 22px;font-size:13px;color:var(--tx3)}
.v4-hero-msg.is-bad{color:var(--clay)}
.v4-hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--l1);font-size:13.5px;color:var(--tx3);animation:v4-up 1.1s .42s var(--ease) both}
.v4-hero-facts b{margin-right:6px;font-family:var(--ed);font-weight:400;font-size:26px;line-height:1;color:var(--ivory);vertical-align:-3px}

.v4-finder{position:relative;margin:12px;border-radius:26px;overflow:hidden;isolation:isolate;background:#0d0b0a;--fx:50%;--fy:40%}
.v4-finder-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;transform:scale(1.04);transition:transform .6s var(--ease);animation:v4-develop 2.2s .2s var(--ease) both}
@keyframes v4-develop{from{filter:grayscale(1) brightness(.55) contrast(1.2);transform:scale(1.14)}to{filter:none;transform:scale(1.04)}}
.v4-finder::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--fx) var(--fy),transparent 0 22%,rgba(0,0,0,.28) 70%),linear-gradient(to top,rgba(10,8,7,.55),transparent 40%)}
.v4-finder-hud{position:absolute;inset:0;z-index:2;pointer-events:none;color:rgba(255,252,247,.92);font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.v4-finder-hud .c,.v4-raw .c{position:absolute;width:28px;height:28px;border-color:rgba(255,252,247,.85);border-style:solid;border-width:0}
.c.tl{top:18px;left:18px;border-top-width:1.5px;border-left-width:1.5px}
.c.tr{top:18px;right:18px;border-top-width:1.5px;border-right-width:1.5px}
.c.bl{bottom:18px;left:18px;border-bottom-width:1.5px;border-left-width:1.5px}
.c.br{bottom:18px;right:18px;border-bottom-width:1.5px;border-right-width:1.5px}
.v4-rec{position:absolute;top:24px;left:56px;display:flex;align-items:center;gap:7px}
.v4-rec i{width:8px;height:8px;border-radius:50%;background:#E5484D;animation:v4-blink 1.2s steps(2) infinite}
@keyframes v4-blink{50%{opacity:.15}}
.v4-batt{position:absolute;top:24px;right:56px}
.v4-batt b{font-weight:400;letter-spacing:0;margin-left:6px}
.v4-af{position:absolute;left:62%;top:30%;width:74px;height:74px;margin:-37px 0 0 -37px;border:1.5px solid rgba(255,252,247,.9);border-radius:4px;animation:v4-af 3.6s var(--ease) infinite}
.v4-af::before,.v4-af::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.v4-af::before{width:10px;height:1px;margin-left:-5px}
.v4-af::after{width:1px;height:10px;margin-top:-5px}
@keyframes v4-af{0%{transform:scale(1.5);opacity:0}12%{transform:scale(1.5);opacity:.7}30%{transform:scale(1);border-color:rgba(255,252,247,.9)}36%,70%{transform:scale(1);border-color:#7FD69A;opacity:1}100%{transform:scale(1);opacity:0}}
.v4-read{position:absolute;left:50%;bottom:22px;display:flex;gap:18px;transform:translateX(-50%);white-space:nowrap}
.v4-read b{font-weight:400}
.v4-toasts{position:absolute;inset:0;z-index:3;pointer-events:none}
.v4-toast{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;font-size:13px;line-height:1.3;opacity:0;animation:v4-toast 12s var(--ease) infinite}
.v4-toast b{display:block;font-weight:600;font-size:13.5px}
.v4-toast small{display:block;margin-top:2px;font-size:12px;color:rgba(247,243,236,.72)}
.v4-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:rgba(255,252,247,.14);font-size:15px}
.v4-ico.gold{background:#C9A84C;color:#1A1408;font-weight:700}
.v4-toast.t1{left:7%;top:15%;animation-delay:.9s}
.v4-toast.t2{right:7%;top:46%;animation-delay:4.9s}
.v4-toast.t3{left:9%;bottom:13%;animation-delay:8.9s}
@keyframes v4-toast{0%{opacity:0;transform:translateY(16px) scale(.96)}5%{opacity:1;transform:none}30%{opacity:1;transform:none}36%{opacity:0;transform:translateY(-10px) scale(.98)}100%{opacity:0}}
.v4-scroll{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.v4-scroll i{font-style:normal;animation:v4-bob 1.8s ease-in-out infinite}
@keyframes v4-bob{50%{transform:translateY(5px)}}

/* -------------------------------------------------------------- MARQUEE */
.v4-marquee{overflow:hidden;padding:clamp(28px,4vw,52px) 0;border-block:1px solid var(--l1);margin-top:clamp(24px,3vw,40px)}
.v4-marquee-track{display:flex;align-items:center;gap:clamp(22px,3vw,44px);width:max-content;animation:v4-marq 42s linear infinite}
.v4-marquee span{font-family:var(--ed);font-style:italic;font-size:clamp(48px,8vw,128px);line-height:1;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ivory) 45%,transparent)}
.v4-marquee span:nth-of-type(even){color:var(--ivory);-webkit-text-stroke:0}
.v4-marquee i{font-style:normal;font-size:clamp(20px,2.4vw,34px);color:var(--gold)}
@keyframes v4-marq{to{transform:translateX(-50%)}}

/* -------------------------------------------------------------- STORY */
.v4-story{position:relative;padding:clamp(70px,8vw,120px) 0}
.v4-story-pin{width:var(--hold);margin:0 auto;padding-inline:var(--gut)}
.v4-story-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:52rem}
.v4-rail,.v4-stage{display:none}
.v4-chapters{display:grid;gap:44px}
.v4-ch{display:flex;flex-direction:column;gap:16px;max-width:46ch}
.v4-ch-n{font-family:var(--ed);font-size:72px;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--gold)}
.v4-ch h3{margin:0;font-family:var(--ed);font-weight:400;font-size:clamp(30px,3vw,46px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.v4-ch p{margin:0;font-size:16.5px;line-height:1.65;color:var(--tx2)}

/* the scrubbed version, only once the script has taken over */
.v4-story.is-live{height:720vh;padding:0}
.v4-story.is-live .v4-story-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:132px minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(20px,3vw,48px);padding-top:clamp(92px,11vh,120px);padding-bottom:clamp(24px,4vh,48px)}
.v4-story.is-live .v4-story-head{grid-column:2 / 4;margin-bottom:clamp(16px,3vh,32px)}
.v4-story.is-live .v4-story-head .v4-h2{font-size:clamp(34px,3.8vw,58px)}
.v4-story.is-live .v4-rail{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;justify-content:center;gap:4px;margin:0;padding:0;list-style:none;position:relative}
.v4-rail::before{content:"";position:absolute;left:15px;top:calc(50% - 150px);height:300px;width:1px;background:var(--l2)}
.v4-rail::after{content:"";position:absolute;left:15px;top:calc(50% - 150px);height:calc(300px * var(--sp,0));width:1px;background:var(--gold)}
.v4-rail button{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border:0;background:none;color:var(--tx3);font:500 13px var(--sans4);text-align:left;cursor:pointer;transition:color .3s}
.v4-rail button i{display:grid;place-items:center;flex:none;width:31px;height:31px;border:1px solid var(--l2);border-radius:50%;background:var(--ink);font:400 10px var(--mono);font-style:normal;transition:all .35s var(--ease)}
.v4-rail button.is-past i{border-color:var(--gold);color:var(--gold)}
.v4-rail button[aria-current="step"]{color:var(--ivory)}
.v4-rail button[aria-current="step"] i{background:var(--gold);border-color:var(--gold);color:#1A1408;box-shadow:0 0 0 6px var(--goldsoft)}
.v4-rail button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.v4-story.is-live .v4-chapters{grid-column:2;grid-row:2;position:relative;display:block}
.v4-story.is-live .v4-ch{position:absolute;inset:0;justify-content:center;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .55s}
.v4-story.is-live .v4-ch.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s .1s var(--ease),transform .8s .1s var(--ease),visibility 0s}
.v4-story.is-live .v4-ch-n{font-size:clamp(90px,10vw,170px)}
.v4-story.is-live .v4-stage{grid-column:3;grid-row:2;position:relative;display:block;min-height:0;border:1px solid var(--l1);border-radius:30px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 60% 55% at 70% 20%,var(--goldsoft),transparent 70%),radial-gradient(ellipse 60% 60% at 10% 100%,color-mix(in srgb,var(--slate) 22%,transparent),transparent 70%),var(--pane)}
.v4-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--l1) 1px,transparent 1px),linear-gradient(90deg,var(--l1) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);opacity:.6}
.v4-stage-meta{position:absolute;top:18px;left:22px;right:22px;z-index:5;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--tx3)}
.v4-stage-meta span:last-child{color:var(--gold)}
.v4-layer{position:absolute;inset:44px 22px 22px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:scale(.94) translateY(16px);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s}
.v4-story[data-stage="1"] .l1,.v4-story[data-stage="2"] .l2,.v4-story[data-stage="3"] .l3,.v4-story[data-stage="4"] .l4,.v4-story[data-stage="5"] .l5,.v4-story[data-stage="6"] .l6{opacity:1;visibility:visible;transform:none;transition:opacity .6s .12s var(--ease),transform .8s .12s var(--ease),visibility 0s}

.v4-ui{position:relative;color:var(--ivory);background:var(--card);border:1px solid var(--l2);border-radius:20px;box-shadow:var(--shadow);font-size:13px}
.v4-ui-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--l1)}
.v4-ui-top b{font-family:var(--ed);font-weight:400;font-size:22px}
.v4-ui-top small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--tx3)}
.v4-chip{position:absolute;z-index:3;padding:10px 14px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0}
.v4-chip.c1{right:6%;top:16%}
.v4-chip.c2{left:6%;bottom:9%}

/* 1 enquiry: the form fills itself in */
.v4-form{width:min(400px,86%);padding:20px}
.v4-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;padding:10px 12px;border:1px solid var(--l1);border-radius:12px;background:var(--pane)}
.v4-field small{font-size:10.5px;color:var(--tx3);letter-spacing:.06em;text-transform:uppercase}
.v4-field.tall{min-height:62px}
.v4-type{display:inline-block;max-width:100%;width:0;overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:12.5px;border-right:1.5px solid transparent;vertical-align:bottom}
.v4-send{margin-top:6px;padding:12px;border-radius:12px;background:var(--ivory);color:var(--ink);text-align:center;font-weight:600}
.v4-story[data-stage="1"] .v4-type{animation:v4-type 1s steps(var(--n)) .3s forwards,v4-caret .6s steps(2) .3s 3}
.v4-story[data-stage="1"] .v4-type.d2{animation-delay:1.3s,1.3s}
.v4-type.d3{width:auto;white-space:normal;max-height:0;line-height:1.5;border:0}
.v4-story[data-stage="1"] .v4-type.d3{animation:v4-lines 1.2s 2.2s steps(3) forwards}
@keyframes v4-type{to{width:calc(var(--n) * 1ch + 2px)}}
@keyframes v4-caret{50%{border-right-color:var(--gold)}}
@keyframes v4-lines{to{max-height:4.5em}}
.v4-story[data-stage="1"] .v4-send{animation:v4-press .4s 3.4s both}
@keyframes v4-press{50%{transform:scale(.96);background:var(--gold)}}
.v4-story[data-stage="1"] .l1 .v4-chip.c1{animation:v4-pop .6s 3.8s var(--ease) forwards}
.v4-story[data-stage="1"] .l1 .v4-chip.c2{animation:v4-pop .6s 4.2s var(--ease) forwards}
@keyframes v4-pop{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

/* 2 booking */
.v4-cal{position:absolute;left:6%;top:8%;width:min(360px,70%);padding:18px}
.v4-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.v4-cal-grid i{font-style:normal;font-size:10px;color:var(--tx3);padding-bottom:4px}
.v4-cal-grid span{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;font-size:12px;color:var(--tx2)}
.v4-cal-grid span.busy{background:var(--pane2)}
.v4-cal-grid span.pick{position:relative;color:var(--ivory);font-weight:700}
.v4-story[data-stage="2"] .v4-cal-grid span.pick{animation:v4-pick .5s .7s var(--ease) forwards}
@keyframes v4-pick{to{background:var(--gold);color:#1A1408;box-shadow:0 0 0 6px var(--goldsoft)}}
.v4-booked{position:absolute;right:6%;bottom:9%;display:flex;flex-direction:column;gap:6px;width:min(300px,64%);padding:18px 20px;opacity:0}
.v4-booked small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold)}
.v4-booked b{font-family:var(--ed);font-weight:400;font-size:26px;line-height:1.05}
.v4-booked>span{color:var(--tx2)}
.v4-paid{display:flex;align-items:center;gap:8px;margin-top:6px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,#7FB08C 18%,transparent);color:var(--ivory);font-size:12px}
.v4-paid i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#7FB08C;color:#0E0C0B;font-style:normal;font-size:11px;font-weight:700}
.v4-story[data-stage="2"] .v4-booked{animation:v4-pop .7s 1.2s var(--ease) forwards}

/* 3 shoot: flat RAW frame and an upload that survives a dropped connection */
.v4-raw{position:relative;width:min(440px,74%);aspect-ratio:4/5;border-radius:16px;overflow:hidden;color:rgba(255,252,247,.92);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em}
.v4-raw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.18) contrast(.82) brightness(1.06)}
.v4-raw .c{width:22px;height:22px}
.v4-raw .v4-af{left:52%;top:30%;width:60px;height:60px;margin:-30px 0 0 -30px}
.v4-raw .v4-read{bottom:16px;gap:14px}
.v4-upload{position:absolute;right:4%;bottom:7%;width:min(320px,66%);padding:16px 18px}
.v4-up-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.v4-up-row small{font-family:var(--mono);color:var(--gold)}
.v4-bar{height:6px;border-radius:6px;background:var(--pane2);overflow:hidden}
.v4-bar span{display:block;height:100%;width:var(--up,0%);border-radius:inherit;background:linear-gradient(90deg,var(--clay),var(--gold));transition:width .12s linear}
.v4-upload .v4-bar span{width:0}
.v4-story[data-stage="3"] .v4-upload .v4-bar span{animation:v4-upfill 3.2s .5s var(--ease) forwards}
@keyframes v4-upfill{0%{width:0}45%{width:63%}62%{width:63%}100%{width:100%}}
.v4-up-note{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--tx3)}
.v4-up-note i{width:7px;height:7px;border-radius:50%;background:var(--clay);animation:v4-blink 1s steps(2) infinite}

/* 4 deliver: the gallery the client opens */
.v4-gal{width:min(470px,92%);padding:10px;overflow:hidden}
.v4-gal-cover{position:relative;height:150px;border-radius:13px;overflow:hidden;color:#F7F3EC}
.v4-gal-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.v4-gal-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,7,.7),transparent 70%)}
.v4-gal-cover b{position:absolute;z-index:1;left:16px;bottom:26px;font-family:var(--ed);font-weight:400;font-size:28px}
.v4-gal-cover small{position:absolute;z-index:1;left:16px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;opacity:.8}
.v4-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.v4-gal-grid span{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--pane2);opacity:0;transform:scale(.85)}
.v4-gal-grid img{width:100%;height:100%;object-fit:cover}
.v4-gal-grid i{position:absolute;right:7px;top:5px;font-style:normal;font-size:15px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);opacity:0;transform:scale(0)}
.v4-story[data-stage="4"] .v4-gal-grid span{animation:v4-tile .55s var(--ease) forwards}
.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(2){animation-delay:.08s}.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(3){animation-delay:.16s}
.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(4){animation-delay:.24s}.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(5){animation-delay:.32s}
.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(6){animation-delay:.4s}
@keyframes v4-tile{to{opacity:1;transform:none}}
.v4-story[data-stage="4"] .v4-gal-grid i{animation:v4-heart .6s 1.1s var(--ease) forwards;color:#E5484D}
.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(3) i{animation-delay:1.5s}
.v4-story[data-stage="4"] .v4-gal-grid span:nth-child(5) i{animation-delay:1.9s}
@keyframes v4-heart{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.4)}100%{opacity:1;transform:scale(1)}}
.v4-story[data-stage="4"] .l4 .v4-chip.c1{animation:v4-pop .6s 2.2s var(--ease) forwards}
.v4-story[data-stage="4"] .l4 .v4-chip.c2{animation:v4-pop .6s 2.6s var(--ease) forwards}

/* 5 paid */
.v4-inv{position:absolute;left:6%;top:9%;width:min(360px,72%);padding:20px}
.v4-inv-line,.v4-inv-total{display:flex;justify-content:space-between;gap:12px;padding:9px 0;color:var(--tx2);border-bottom:1px dashed var(--l1)}
.v4-inv-line b{font-weight:500;color:var(--ivory);font-variant-numeric:tabular-nums}
.v4-inv-total{border:0;padding-top:14px;color:var(--ivory);font-weight:600}
.v4-inv-total b{font-family:var(--ed);font-weight:400;font-size:30px;line-height:1}
.v4-stamp{position:absolute;right:-14px;top:-30px;z-index:3;padding:6px 14px;border:2px solid #7FB08C;border-radius:8px;color:#7FB08C;font:700 20px var(--mono);letter-spacing:.2em;opacity:0;transform:rotate(-14deg) scale(2.2)}
.v4-story[data-stage="5"] .v4-stamp{animation:v4-stamp .45s .9s cubic-bezier(.3,1.6,.4,1) forwards}
@keyframes v4-stamp{to{opacity:1;transform:rotate(-14deg) scale(1)}}
.v4-margin{position:absolute;right:6%;bottom:8%;width:min(250px,52%);padding:16px 18px;opacity:0}
.v4-margin small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--tx3)}
.v4-bars{display:flex;align-items:flex-end;gap:6px;height:76px;margin:12px 0}
.v4-bars i,.v4-chart i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--pane2);transform-origin:bottom;transform:scaleY(0)}
.v4-bars i.g,.v4-chart i.g{background:linear-gradient(to top,var(--clay),var(--gold))}
.v4-margin>b{font-family:var(--ed);font-weight:400;font-size:30px}
.v4-margin>b span{font-family:var(--sans4);font-size:12.5px;color:var(--tx3)}
.v4-story[data-stage="5"] .v4-margin{animation:v4-pop .6s 1.3s var(--ease) forwards}
.v4-story[data-stage="5"] .v4-bars i{animation:v4-grow .7s 1.5s var(--ease) forwards}
@keyframes v4-grow{to{transform:scaleY(1)}}

/* 6 grow: the portfolio the work ends up on */
.v4-site{width:min(500px,92%);padding:0;overflow:hidden}
.v4-site-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--l1)}
.v4-site-bar i{width:9px;height:9px;border-radius:50%;background:var(--l2)}
.v4-site-bar span{margin-left:12px;padding:4px 12px;border-radius:999px;background:var(--pane2);font-family:var(--mono);font-size:10.5px;color:var(--tx3)}
.v4-site-hero{position:relative;height:200px;overflow:hidden;color:#F7F3EC}
.v4-site-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.15);transition:transform 2.4s var(--ease)}
.v4-story[data-stage="6"] .v4-site-hero img{transform:scale(1)}
.v4-site-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,7,.62),transparent 70%)}
.v4-site-hero b{position:absolute;z-index:1;left:20px;bottom:20px;font-family:var(--ed);font-weight:400;font-size:34px;line-height:.95}
.v4-site-hero b em{color:#E2C47E}
.v4-site-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
.v4-site-row span{aspect-ratio:4/5;border-radius:8px;overflow:hidden}
.v4-site-row img{width:100%;height:100%;object-fit:cover}
.v4-story[data-stage="6"] .l6 .v4-chip.c1{animation:v4-pop .6s 1.2s var(--ease) forwards}
.v4-story[data-stage="6"] .l6 .v4-chip.c2{animation:v4-pop .6s 1.7s var(--ease) forwards}

/* -------------------------------------------------------------- DEVICES
   Real screens from the demo studio in drawn frames. The rig is sized by its own width and
   everything in it is placed in percentages, so it scales as one picture. */
.v4-dev-sec{padding:clamp(80px,10vw,150px) 0 clamp(30px,4vw,60px)}
.v4-dev-bar{position:relative;display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto clamp(30px,4.5vw,56px);padding:5px;border:1px solid var(--l2);border-radius:999px;background:var(--pane)}
.v4-dev-bar button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 20px;border:0;border-radius:999px;background:none;color:var(--tx2);font:600 14px var(--sans4);cursor:pointer;transition:background .35s var(--ease),color .35s}
.v4-dev-bar button i{font:400 10px var(--mono);font-style:normal;letter-spacing:.08em;color:var(--gold)}
.v4-dev-bar button:hover{color:var(--ivory)}
.v4-dev-bar button[aria-pressed="true"]{background:var(--ivory);color:var(--ink)}
.v4-dev-prog{position:absolute;left:26px;right:26px;bottom:-1px;height:1px;overflow:hidden}
.v4-dev-prog span{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.v4-dev-sec.is-auto .v4-dev-prog span{animation:v4-prog 5.5s linear both}
@keyframes v4-prog{to{transform:scaleX(1)}}
.v4-rig{position:relative;max-width:1180px;margin-inline:auto;aspect-ratio:1180/690;perspective:2000px}
.v4-rig-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease)}
.v4-rig figure{position:absolute;margin:0;transition:transform 1.1s var(--ease),opacity .9s}
.v4-scr{position:relative;overflow:hidden;background:#100d0b}
.v4-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transform:scale(1.025);transition:opacity .55s,transform .9s var(--ease)}
.v4-scr img.is-on{opacity:1;transform:none}
.v4-dev-cap{position:absolute;left:0;right:0;top:calc(100% + 12px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-align:center;color:var(--tx3);white-space:nowrap}
.v4-mac{left:14.5%;top:0;width:67%}
.v4-mac-lid{position:relative;padding:1.8% 1.8% 2.4%;border-radius:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) 4px 4px;background:#0b0a09;box-shadow:inset 0 0 0 1px rgba(255,252,247,.16),0 0 0 1px #000,0 60px 90px -50px rgba(0,0,0,.75)}
.v4-mac-lid::before{content:"";position:absolute;left:50%;top:.7%;width:5px;height:5px;border-radius:50%;background:#2a2725;transform:translateX(-50%)}
.v4-mac .v4-scr{aspect-ratio:1440/1000;border-radius:3px}
.v4-mac-base{position:relative;height:clamp(9px,1.35vw,17px);margin:0 -6.5%;border-radius:2px 2px 50% 50% / 2px 2px 100% 100%;background:linear-gradient(#5b5650,#2f2c29 45%,#1a1816)}
.v4-mac-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:38%;border-radius:0 0 8px 8px;background:rgba(0,0,0,.35);transform:translateX(-50%)}
.v4-ipad{right:1%;bottom:9%;width:25%;z-index:2}
.v4-ipad-body{padding:3.4%;border-radius:clamp(12px,2.1vw,26px);background:#0b0a09;box-shadow:inset 0 0 0 1px rgba(255,252,247,.18),0 0 0 1px #000,0 46px 70px -30px rgba(0,0,0,.8)}
.v4-ipad .v4-scr{aspect-ratio:1024/1180;border-radius:clamp(5px,1vw,12px)}
.v4-iphone{left:3%;bottom:6%;width:16.5%;z-index:3}
.v4-iphone-body{padding:3.4%;border-radius:clamp(18px,3.2vw,40px);background:#0b0a09;box-shadow:inset 0 0 0 1px rgba(255,252,247,.2),0 0 0 1px #000,0 46px 70px -28px rgba(0,0,0,.85)}
.v4-iphone .v4-scr{aspect-ratio:430/932;border-radius:clamp(14px,2.7vw,34px)}
.v4-iphone .v4-scr::after{content:"";position:absolute;left:50%;top:1.3%;z-index:2;width:31%;height:3.1%;border-radius:999px;background:#000;transform:translateX(-50%)}
.v4-dev-note{position:absolute;z-index:4;padding:9px 14px;border-radius:999px;font-size:12.5px;white-space:nowrap;transition:opacity .35s,transform .45s var(--ease)}
.v4-dev-note::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:#7FB08C;vertical-align:1px;box-shadow:0 0 0 4px rgba(127,176,140,.2)}
.v4-dev-note.is-out{opacity:0;transform:translateY(6px)}
.v4-dev-note.n1{right:12%;top:5%}.v4-dev-note.n2{right:3%;top:31%}.v4-dev-note.n3{left:1%;top:24%}
/* the devices arrive from three sides, gated on the script so nothing hides without it */
.v4-js .v4-rig:not(.is-in) .v4-mac{opacity:0;transform:translateY(50px) scale(.97)}
.v4-js .v4-rig:not(.is-in) .v4-ipad{opacity:0;transform:translateX(70px) rotate(5deg)}
.v4-js .v4-rig:not(.is-in) .v4-iphone{opacity:0;transform:translateX(-70px) rotate(-5deg)}
.v4-js .v4-rig:not(.is-in) .v4-dev-note{opacity:0}
.v4-rig.is-in .v4-ipad{transition-delay:.15s}.v4-rig.is-in .v4-iphone{transition-delay:.3s}

/* -------------------------------------------------------------- BENTO */
.v4-bento-sec{padding:clamp(80px,10vw,150px) 0}
.v4-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.v4-tile{position:relative;display:flex;flex-direction:column;gap:14px;min-height:280px;padding:24px;border:1px solid var(--l1);border-radius:26px;background:var(--pane);overflow:hidden;transition:border-color .35s,transform .5s var(--ease)}
.v4-tile:hover{border-color:var(--l2);transform:translateY(-3px)}
.v4-tile h3{margin:0;font-family:var(--ed);font-weight:400;font-size:clamp(24px,2.1vw,32px);line-height:1.04;letter-spacing:-.015em;max-width:20ch}
.v4-tile p{margin:0;font-size:15px;line-height:1.6;color:var(--tx2)}
.v4-code{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--gold)}
.v4-tile .v4-more{margin-top:auto}
.t-pipe{grid-column:span 7}.t-cut{grid-column:span 5}
.t-promise,.t-up,.t-report{grid-column:span 4}
.t-net{grid-column:span 4}.t-import{grid-column:span 5}.t-client{grid-column:span 3}
.v4-js .v4-bento[data-reveal]:not(.is-in) .v4-tile{opacity:0;transform:translateY(30px)}
.v4-bento.is-in .v4-tile{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease),border-color .35s}
.v4-bento.is-in .v4-tile:nth-child(2){transition-delay:.06s}.v4-bento.is-in .v4-tile:nth-child(3){transition-delay:.12s}
.v4-bento.is-in .v4-tile:nth-child(4){transition-delay:.18s}.v4-bento.is-in .v4-tile:nth-child(5){transition-delay:.24s}
.v4-bento.is-in .v4-tile:nth-child(6){transition-delay:.3s}.v4-bento.is-in .v4-tile:nth-child(7){transition-delay:.36s}.v4-bento.is-in .v4-tile:nth-child(8){transition-delay:.42s}

.v4-pipe{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0}
.v4-pipe div{display:flex;flex-direction:column;gap:7px;min-height:118px;padding:10px;border-radius:14px;background:var(--pane)}
.v4-pipe small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--tx3);text-transform:uppercase}
.v4-pipe span{padding:8px 10px;border-radius:9px;background:var(--card);border:1px solid var(--l1);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pipe span.p1{position:relative;z-index:2;border-color:var(--gold);box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.v4-bento.is-in .v4-pipe span.p1{animation:v4-pipe 9s 1s var(--ease) infinite}
@keyframes v4-pipe{0%,12%{transform:none}25%,37%{transform:translateX(calc(100% + var(--ps,30px)))}50%,62%{transform:translateX(calc(200% + 2 * var(--ps,30px)))}75%,87%{transform:translateX(calc(300% + 3 * var(--ps,30px)))}100%{transform:translateX(calc(300% + 3 * var(--ps,30px)));opacity:0}}

.t-cut{justify-content:space-between;background:radial-gradient(ellipse 80% 70% at 100% 0%,var(--goldsoft),transparent 70%),var(--pane)}
.v4-big{font-family:var(--ed);font-size:clamp(130px,15vw,230px);line-height:.8;letter-spacing:-.05em;background:linear-gradient(160deg,var(--ivory),var(--gold) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-cut p{max-width:30ch}

.v4-promises{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:8px}
.v4-promises li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--pane);font-size:13.5px;color:var(--tx2)}
.v4-promises i{position:relative;flex:none;width:18px;height:18px;border:1.5px solid var(--l2);border-radius:6px}
.v4-bento.is-in .v4-promises li.k i{animation:v4-check .4s 1.4s forwards}
.v4-bento.is-in .v4-promises li.k{animation:v4-kept .4s 1.6s forwards}
.v4-promises li.k::after{content:"KEPT";margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#7FB08C;opacity:0}
.v4-bento.is-in .v4-promises li.k::after{animation:v4-tile .4s 1.8s forwards}
@keyframes v4-check{to{background:#7FB08C;border-color:#7FB08C;box-shadow:inset 0 0 0 3px var(--card)}}
@keyframes v4-kept{to{color:var(--tx3);text-decoration:line-through}}

.v4-up-live{margin-top:auto}
.v4-up-live .v4-bar{height:10px}
.v4-up-live small{display:flex;gap:8px;margin-top:12px;font-size:13px;color:var(--tx3)}
.v4-up-live b{font-family:var(--mono);font-weight:400;color:var(--ivory)}
.v4-up-live em{font-style:normal}
.t-up .v4-bar span{width:var(--up,0%)}
.t-up.is-drop .v4-bar span{background:var(--clay)}
.t-up.is-drop b{color:var(--clay)}

.v4-chart{display:flex;align-items:flex-end;gap:7px;height:120px;margin-top:auto}
.v4-bento.is-in .v4-chart i{animation:v4-grow .9s .5s var(--ease) forwards}
.v4-bento.is-in .v4-chart i:nth-child(2){animation-delay:0.6s}.v4-bento.is-in .v4-chart i:nth-child(3){animation-delay:0.7s}.v4-bento.is-in .v4-chart i:nth-child(4){animation-delay:0.8s}.v4-bento.is-in .v4-chart i:nth-child(5){animation-delay:0.9s}.v4-bento.is-in .v4-chart i:nth-child(6){animation-delay:1.0s}.v4-bento.is-in .v4-chart i:nth-child(7){animation-delay:1.1s}.v4-bento.is-in .v4-chart i:nth-child(8){animation-delay:1.2s}

.v4-mood{position:relative;height:150px;margin-top:auto}
.v4-mood img{position:absolute;width:42%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:3px solid var(--card);box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.v4-mood img:nth-child(1){left:2%;top:18%;transform:rotate(-8deg)}
.v4-mood img:nth-child(2){left:29%;top:0;transform:rotate(3deg);z-index:1}
.v4-mood img:nth-child(3){left:56%;top:22%;transform:rotate(9deg)}
.t-net:hover .v4-mood img:nth-child(1){transform:rotate(-14deg) translate(-8px,4px)}
.t-net:hover .v4-mood img:nth-child(3){transform:rotate(14deg) translate(8px,4px)}
.v4-follow{position:absolute;right:0;bottom:0;z-index:2;padding:8px 14px;border-radius:999px;background:var(--ivory);color:var(--ink);font-size:12px;font-weight:700}
.v4-bento.is-in .v4-follow{animation:v4-follow 4s 1.5s infinite}
@keyframes v4-follow{0%,45%{background:var(--ivory);color:var(--ink)}50%,95%{background:var(--gold);color:#1A1408}}

.v4-import{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.v4-import li{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--pane)}
.v4-import b{font-family:var(--ed);font-weight:400;font-size:clamp(32px,3vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.v4-import span{font-size:12.5px;color:var(--tx3)}

.t-client{align-items:flex-start}
.v4-phone{position:relative;align-self:center;width:118px;aspect-ratio:9/19;margin-top:auto;padding:5px;border-radius:24px;background:#0d0b0a;border:1px solid var(--l2);box-shadow:var(--shadow)}
.v4-phone img{width:100%;height:100%;object-fit:cover;border-radius:19px}
.v4-phone b{position:absolute;right:14px;bottom:16px;color:#E5484D;font-size:20px;animation:v4-beat 1.6s infinite}
@keyframes v4-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}}

/* -------------------------------------------------------------- STACK */
.v4-stack-sec{padding:clamp(60px,8vw,120px) 0}
.v4-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
.v4-stack-copy{display:flex;flex-direction:column;gap:20px}
.v4-stack-copy p{margin:0;font-size:17px;line-height:1.65;color:var(--tx2);max-width:50ch}
.v4-orbit{position:relative;width:min(100%,480px);aspect-ratio:1;margin-inline:auto}
.v4-orbit::before,.v4-orbit::after{content:"";position:absolute;inset:14%;border:1px dashed var(--l2);border-radius:50%}
.v4-orbit::after{inset:34%;border-style:solid;border-color:var(--l1)}
.v4-orbit span{position:absolute;left:50%;top:50%;padding:9px 15px;border:1px solid var(--l2);border-radius:999px;background:var(--card);font-size:13px;color:var(--tx2);white-space:nowrap;
  --a:calc(var(--i) * 60deg - 90deg);transform:translate(-50%,-50%) rotate(var(--a)) translateX(min(48vw,240px)) rotate(calc(var(--a) * -1));opacity:.25;transition:transform 1.4s var(--ease),opacity 1s,border-color .6s,color .6s}
.v4-stack-sec.is-in .v4-orbit span{transform:translate(-50%,-50%) rotate(var(--a)) translateX(min(30vw,172px)) rotate(calc(var(--a) * -1));opacity:1;border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--ivory);transition-delay:calc(var(--i) * .08s)}
.v4-orbit b{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;align-content:center;width:31%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--gold) 40%,var(--ink2)),var(--ink2));border:1px solid var(--gold);font-family:var(--ed);font-weight:400;font-size:clamp(20px,2.4vw,30px);letter-spacing:.2em;text-indent:.2em;text-align:center;color:var(--ivory);box-shadow:0 0 0 12px var(--goldsoft),0 30px 60px -20px rgba(0,0,0,.6);transition:transform 1s .7s cubic-bezier(.3,1.5,.4,1),opacity .6s .7s}
.v4-orbit b small{display:block;max-width:78%;margin-top:6px;font-family:var(--mono);font-size:9px;line-height:1.45;letter-spacing:.12em;text-indent:.12em;color:var(--tx3);text-transform:uppercase}
.v4-stack-sec.is-in .v4-orbit b{transform:translate(-50%,-50%) scale(1);opacity:1}
.v4-stack-sec.is-in .v4-orbit::before{animation:v4-spin 60s linear infinite}
@keyframes v4-spin{to{transform:rotate(360deg)}}

/* -------------------------------------------------------------- WHO */
.v4-who{padding:clamp(70px,9vw,130px) 0}
.v4-crafts{position:relative;border-top:1px solid var(--l1)}
.v4-crafts a{position:relative;z-index:1;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:baseline;gap:10px 24px;padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--l1);transition:opacity .4s,padding .4s var(--ease)}
.v4-crafts i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--gold)}
.v4-crafts b{font-family:var(--ed);font-weight:400;font-size:clamp(38px,6.4vw,96px);line-height:.95;letter-spacing:-.035em}
.v4-crafts span{font-size:14px;color:var(--tx3);text-align:right}
.v4-crafts.is-hover a{opacity:.28}
.v4-crafts.is-hover a:hover{opacity:1;padding-left:18px}
.v4-crafts a:hover b{font-style:italic;color:var(--gold)}
.v4-float{position:absolute;left:0;top:0;z-index:0;width:210px;height:270px;margin:-135px 0 0 -105px;pointer-events:none;transition:transform .45s var(--ease)}
.v4-float img{width:100%;height:100%;object-fit:cover;border-radius:18px;opacity:0;transform:rotate(var(--tilt,-6deg)) scale(.8);transition:opacity .35s,transform .5s var(--ease);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.v4-crafts.is-hover .v4-float img{opacity:1;transform:rotate(var(--tilt,-6deg)) scale(1)}
.v4-crafts.is-hover .v4-float{z-index:2}

/* -------------------------------------------------------------- PRICING on a light field */
.v4-price-sec{position:relative;padding:clamp(90px,11vw,160px) 0;overflow:hidden;isolation:isolate}
.v4-glowfield{position:absolute;inset:0;z-index:-1;pointer-events:none}
.v4-glowfield i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.v4-glowfield i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:6%;background:var(--clay);animation:v4-drift 18s ease-in-out infinite alternate}
.v4-glowfield i:nth-child(2){width:40vw;height:40vw;right:-6vw;top:20%;background:var(--gold);opacity:.35;animation:v4-drift 22s ease-in-out infinite alternate-reverse}
.v4-glowfield i:nth-child(3){width:34vw;height:34vw;left:34vw;bottom:-14vw;background:var(--slate);opacity:.4;animation:v4-drift 26s ease-in-out infinite alternate}
@keyframes v4-drift{to{transform:translate(6vw,-4vw) scale(1.12)}}
.v4-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v4-plan{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--l2);border-radius:26px;background:color-mix(in srgb,var(--ink2) 62%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);transition:transform .5s var(--ease)}
.v4-plan:hover{transform:translateY(-6px)}
.v4-plan.pick{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 40px 80px -40px color-mix(in srgb,var(--gold) 60%,transparent)}
.v4-plan-top{display:flex;align-items:center;gap:10px}
.v4-plan-top b{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.v4-plan-top span{font-family:var(--mono);font-size:11px;color:var(--gold)}
.v4-plan-top em{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--gold);color:#1A1408;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em}
.v4-fee{font-family:var(--ed);font-size:clamp(56px,5vw,76px);line-height:.9;letter-spacing:-.03em}
.v4-fee small{margin-left:6px;font-family:var(--sans4);font-size:14px;letter-spacing:0;color:var(--tx3)}
.v4-plan p{flex:1;margin:0;font-size:14.5px;line-height:1.6;color:var(--tx2)}
.v4-plan .btn{width:100%;margin-top:6px}
.v4-plans-note{margin:26px 0 0;text-align:center;font-size:13.5px;color:var(--tx3)}
.v4-plans-note a{color:var(--ivory);font-weight:600;border-bottom:1px solid var(--l2)}

/* -------------------------------------------------------------- FAQ */
.v4-faq{padding:clamp(70px,9vw,130px) 0}
.v4-faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,96px);align-items:start}
.v4-faq-grid .v4-sec-head{position:sticky;top:110px;margin:0}
.v4-qs{border-top:1px solid var(--l1);counter-reset:q}
.v4-q{border-bottom:1px solid var(--l1);counter-increment:q}
.v4-q summary{position:relative;display:grid;grid-template-columns:44px 1fr 28px;align-items:baseline;list-style:none;cursor:pointer;padding:22px 0;font-family:var(--ed);font-size:clamp(21px,1.9vw,27px);line-height:1.22}
.v4-q summary::before{content:counter(q,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--gold)}
.v4-q summary::after{content:"+";justify-self:end;font-family:var(--sans4);font-size:22px;color:var(--gold);transition:transform .3s var(--ease)}
.v4-q[open] summary::after{transform:rotate(45deg)}
.v4-q summary::-webkit-details-marker{display:none}
.v4-q summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.v4-q p{margin:0;padding:0 28px 24px 44px;font-size:16px;line-height:1.65;color:var(--tx2)}

/* -------------------------------------------------------------- END */
.v4-end{padding:0 12px clamp(60px,7vw,100px)}
.v4-end-frame{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:min(92svh,860px);border-radius:34px;overflow:hidden;isolation:isolate;background:#100d0b;color:#F7F3EC}
.v4-end-art{grid-column:2;grid-row:1;position:relative;display:grid;place-items:center;align-content:center;min-height:100%;overflow:hidden;background:radial-gradient(circle at 50% 46%,rgba(181,143,131,.32),transparent 42%),radial-gradient(circle at 62% 64%,rgba(201,168,76,.2),transparent 38%)}
.v4-end-art::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(247,243,236,.13) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask:radial-gradient(circle at 50% 48%,#000 10%,transparent 62%);mask:radial-gradient(circle at 50% 48%,#000 10%,transparent 62%)}
.v4-icon{--ix:6deg;--iy:-12deg;position:relative;z-index:2;width:clamp(170px,20vw,280px);aspect-ratio:1;border-radius:22.4%;transform:perspective(900px) rotateX(var(--ix)) rotateY(var(--iy));transition:transform .7s var(--ease);box-shadow:0 0 0 1px rgba(255,252,247,.12),0 60px 90px -36px rgba(0,0,0,.9),0 0 120px -20px rgba(201,168,76,.35);-webkit-box-reflect:below 22px linear-gradient(transparent 62%,rgba(0,0,0,.22))}
.v4-icon img{display:block;width:100%;height:100%;border-radius:inherit;animation:v4-bob 7s ease-in-out infinite}
.v4-icon span{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,252,247,.26) 50%,transparent 62%) 0 0/260% 100% no-repeat;animation:v4-sheen 6.5s 1.5s ease-in-out infinite}
.v4-icon-name{position:relative;z-index:2;margin-top:18px;font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(247,243,236,.86)}
.v4-ring{position:absolute;left:50%;top:50%;width:clamp(170px,20vw,280px);aspect-ratio:1;border:1px solid rgba(201,168,76,.5);border-radius:28%;transform:translate(-50%,-56%) scale(.9);opacity:0;animation:v4-ripple 6s cubic-bezier(.2,.6,.3,1) infinite}
.v4-ring.r2{animation-delay:2s}.v4-ring.r3{animation-delay:4s}
.v4-ping{position:absolute;z-index:3;display:grid;grid-template-columns:30px auto;column-gap:10px;align-items:center;padding:9px 14px 9px 9px;border-radius:16px;font-size:12px;line-height:1.35;color:rgba(247,243,236,.72);white-space:nowrap;opacity:0;animation:v4-ping 12s var(--ease) infinite}
.v4-ping::before{content:"";grid-row:span 2;width:30px;height:30px;border-radius:8px;background:url("/assets/img/veyra-app-icon-720.webp") center/cover}
.v4-ping b{font-weight:600;color:#F7F3EC}
.v4-ping.p1{left:7%;top:15%}.v4-ping.p2{right:6%;top:20%;animation-delay:3s}.v4-ping.p3{left:6%;bottom:23%;animation-delay:6s}.v4-ping.p4{right:8%;bottom:12%;animation-delay:9s}
@keyframes v4-bob{50%{transform:translateY(-10px)}}
@keyframes v4-sheen{0%,55%{background-position:120% 0}85%,100%{background-position:-20% 0}}
@keyframes v4-ripple{0%{opacity:0;transform:translate(-50%,-56%) scale(.9)}15%{opacity:.7}100%{opacity:0;transform:translate(-50%,-56%) scale(2.1)}}
@keyframes v4-ping{0%{opacity:0;transform:translateY(14px) scale(.96)}6%,40%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-8px)}}
.v4-end-copy{grid-column:1;grid-row:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(32px,5vw,80px)}
.v4-end-copy .v4-label{color:rgba(247,243,236,.6)}
.v4-mega{margin:0;font-family:var(--ed);font-weight:400;font-size:clamp(56px,7.6vw,128px);line-height:.88;letter-spacing:-.045em}
.v4-mega em{color:#E2C47E}
.v4-end-copy>p{margin:0;max-width:46ch;font-size:17px;line-height:1.62;color:rgba(247,243,236,.78)}
.v4-end form{display:grid;gap:9px;max-width:440px;margin-top:6px}
.v4-end label{font-size:12.5px;font-weight:600;color:rgba(247,243,236,.72)}
.v4-end input:not(.v4-hp){height:52px;padding:0 18px;border:1px solid rgba(247,243,236,.24);border-radius:14px;background:rgba(247,243,236,.07);color:#F7F3EC;font:500 16px var(--sans4);outline:none;transition:border-color .25s}
.v4-end input::placeholder{color:rgba(247,243,236,.45)}
.v4-end input:focus{border-color:#C9A84C}
.v4-end .btn-solid{margin-top:8px;background:#F7F3EC;color:#14100E}
.v4-end .msg{min-height:1.3em;margin:0;font-size:13.5px}
.v4-end .v4-fine{color:rgba(247,243,236,.55)}
.v4-end .v4-fine a{color:rgba(247,243,236,.8)}

/* -------------------------------------------------------------- tablet */
@media(max-width:1060px){
  .v4-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .t-pipe,.t-cut,.t-import{grid-column:span 6}
  .t-promise,.t-up,.t-report,.t-net,.t-client{grid-column:span 3}
  .v4-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .v4-hero-frame{grid-template-columns:minmax(0,1fr);min-height:0}
  .v4-finder{height:min(78svh,620px)}
  .v4-stack,.v4-faq-grid{grid-template-columns:minmax(0,1fr)}
  .v4-faq-grid .v4-sec-head{position:static}
  .v4-end-frame{grid-template-columns:minmax(0,1fr);min-height:0}
  .v4-end-art{grid-column:1;grid-row:1;min-height:clamp(380px,58svh,520px)}
  .v4-end-copy{grid-row:2;padding-top:0}

  /* the story on a phone: words first, then the picture running to the bottom edge, rail as a row
     of dots. iOS 26 Safari floats its toolbar over the page and counts svh only down to the top of
     it, so the frame is lvh tall: the picture carries on under the toolbar and its contents are
     lifted by the difference, while the words always sit above it. */
  .v4-story.is-live{height:640vh}
  .v4-story.is-live .v4-story-pin{height:100lvh;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);padding-top:84px;padding-bottom:8px;row-gap:12px}
  .v4-story.is-live .v4-story-head{grid-column:1;grid-row:1;margin:0;gap:8px}
  .v4-story.is-live .v4-story-head .v4-h2{font-size:clamp(28px,7.4vw,40px)}
  .v4-story.is-live .v4-rail{grid-column:1;grid-row:2;flex-direction:row;justify-content:space-between;gap:0}
  .v4-rail::before,.v4-rail::after{left:16px;right:16px;top:15px;width:auto;height:1px}
  .v4-rail::after{right:auto;width:calc((100% - 32px) * var(--sp,0))}
  .v4-rail button{flex-direction:column;gap:4px;width:auto;padding:0;font-size:10px}
  .v4-story.is-live .v4-stage{grid-column:1;grid-row:4}
  .v4-story.is-live .v4-chapters{grid-column:1;grid-row:3;display:grid}
  .v4-story.is-live .v4-ch{position:relative;inset:auto;grid-area:1 / 1;justify-content:flex-start;gap:8px}
  .v4-story.is-live .v4-ch-n{display:none}
  .v4-story.is-live .v4-ch h3{font-size:clamp(22px,5.6vw,28px)}
  .v4-story.is-live .v4-ch p{font-size:14px;line-height:1.5}
  .v4-layer{inset:40px 12px calc(12px + 100lvh - 100svh)}
  .v4-ui{font-size:12px}
  .v4-chip{font-size:11px;padding:8px 11px}
}
/* short phones (an SE with Safari's bars showing): the chapter titles carry the story, so the section
   heading steps aside while it is pinned and the picture keeps a usable height */
@media(max-width:900px) and (max-height:700px){
  .v4-story.is-live .v4-story-head{display:none}
  .v4-story.is-live .v4-story-pin{padding-top:80px;row-gap:10px}
}
@media(max-width:640px){
  .v4-hero{padding:78px 8px 0}
  .v4-hero-frame{border-radius:26px}
  .v4-hero-copy{padding:30px 20px 26px}
  .v4-pill{padding-left:16px}
  .v4-pill button{padding-left:16px}
  .v4-finder{margin:0 8px 8px;height:66svh;border-radius:20px}
  .v4-toast{padding:9px 12px 9px 9px;font-size:12px}
  .v4-toast.t1{left:5%;top:12%}.v4-toast.t2{right:5%}.v4-toast.t3{left:5%}
  .v4-read{gap:10px;font-size:9.5px}
  .v4-rec{left:48px}.v4-batt{right:48px}
  .v4-bento{grid-template-columns:minmax(0,1fr)}
  .v4-bento .v4-tile{grid-column:1 / -1;min-height:0}
  .v4-pipe{--ps:18px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .v4-pipe div{padding:6px;min-height:104px}
  .v4-pipe small{font-size:9px;letter-spacing:.04em}
  .v4-pipe span{padding:6px 5px;font-size:10.5px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
  .v4-import{grid-template-columns:minmax(0,1fr)}
  .v4-crafts a{grid-template-columns:34px minmax(0,1fr)}
  .v4-crafts span{grid-column:2;text-align:left}
  .v4-plans{grid-template-columns:minmax(0,1fr)}
  .v4-q summary{grid-template-columns:34px 1fr 24px}
  .v4-q p{padding-left:34px;padding-right:0}
  .v4-end{padding-inline:8px}
  .v4-end-frame{border-radius:26px}
  .v4-ping{font-size:11px;padding:7px 11px 7px 7px;grid-template-columns:26px auto;column-gap:8px}.v4-ping::before{width:26px;height:26px}
  .v4-ping.p1{left:4%;top:4%}.v4-ping.p2{right:4%;top:14%}.v4-ping.p3{left:4%;bottom:17%}.v4-ping.p4{right:4%;bottom:4%}
  .v4-dev-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .v4-dev-bar button{padding:10px 4px;font-size:13px}.v4-dev-bar button i{display:none}
  .v4-rig{aspect-ratio:1/1.12}
  .v4-mac{left:0;width:100%}
  .v4-ipad{right:0;bottom:7%;width:43%}
  .v4-iphone{left:3%;bottom:5%;width:29%}
  .v4-dev-cap{display:none}
  .v4-dev-note{font-size:11px;padding:7px 11px}.v4-dev-note.n1{right:3%;top:3%}
  .v4-dev-note.n2{display:none}.v4-dev-note.n3{left:34%;top:auto;bottom:1%}
  .v4-form{padding:14px}.v4-field{padding:8px 10px;margin-bottom:7px}
  .v4-cal{top:2%;width:78%;padding:12px}.v4-booked{left:3%;right:auto;width:50%;padding:12px;bottom:3%}.v4-booked b{font-size:20px}.v4-paid{font-size:11px;padding:7px 8px}
  .v4-cal .v4-ui-top{padding-bottom:8px;margin-bottom:8px}
  .v4-cal-grid{gap:2px}.v4-cal-grid span{aspect-ratio:auto;height:24px;font-size:11px}
  .v4-inv{width:80%;padding:14px}.v4-stamp{top:-24px;right:-8px;font-size:16px}
  .v4-margin{display:none}
  .v4-gal-cover{height:96px}
  .v4-site-hero{height:130px}
}

/* light theme: the parts that are not plain tokens */
html[data-site-theme="light"] .home-v4 .v4-marquee span{-webkit-text-stroke-color:color-mix(in srgb,var(--ivory) 40%,transparent)}
html[data-site-theme="light"] .home-v4 .v4-glowfield i{opacity:.28}
html[data-site-theme="light"] .home-v4 .v4-plan{background:color-mix(in srgb,#FFFCF7 72%,transparent)}
html[data-site-theme="light"] .home-v4 .v4-rail button i{background:var(--ink)}
/* light theme glass: in the dark theme the cards read as glass because light sits on dark; on the
   light page they went flat. Here they get a frosted white body, a lit rim and a soft warm shadow,
   with faint colour fields behind them so the blur has something to bend */
html[data-site-theme="light"] .home-v4{--lg-body:linear-gradient(155deg,rgba(255,255,255,.74),rgba(255,252,247,.42));--lg-rim:rgba(255,255,255,.9);--lg-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(62,42,21,.07),0 26px 54px -30px rgba(62,42,21,.34);--lg-blur:blur(22px) saturate(1.5)}
html[data-site-theme="light"] .home-v4 :is(.v4-tile,.v4-plan,.v4-dev-bar,.v4-pill){background:var(--lg-body);border-color:var(--lg-rim);box-shadow:var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
html[data-site-theme="light"] .home-v4 .v4-ui{background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(255,252,247,.7));border-color:var(--lg-rim);box-shadow:var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
html[data-site-theme="light"] .home-v4 :is(.v4-pipe div,.v4-promises li,.v4-import li,.v4-field){background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
html[data-site-theme="light"] .home-v4 .v4-story.is-live .v4-stage,html[data-site-theme="light"] .home-v4 .v4-hero-frame{border-color:var(--lg-rim);box-shadow:var(--lg-shadow);background:radial-gradient(ellipse 60% 55% at 72% 18%,rgba(201,168,76,.26),transparent 70%),radial-gradient(ellipse 60% 60% at 8% 100%,rgba(181,143,131,.32),transparent 70%),radial-gradient(ellipse 50% 50% at 100% 100%,rgba(47,95,95,.12),transparent 70%),linear-gradient(155deg,#FFFDF9,#F6EFE5)}
html[data-site-theme="light"] .home-v4 :is(.v4-bento-sec,.v4-dev-sec){position:relative;isolation:isolate}
html[data-site-theme="light"] .home-v4 :is(.v4-bento-sec,.v4-dev-sec)::before{content:"";position:absolute;inset:6% 0;z-index:-1;pointer-events:none;background:radial-gradient(38% 30% at 16% 28%,rgba(181,143,131,.34),transparent 70%),radial-gradient(34% 30% at 84% 52%,rgba(201,168,76,.26),transparent 70%),radial-gradient(30% 26% at 46% 92%,rgba(47,95,95,.14),transparent 70%)}
html[data-site-theme="light"] .home-v4 .v4-mac-base{background:linear-gradient(#e4e1db,#bdb8b0 45%,#8f8a83)}

@media(prefers-reduced-motion:reduce){
  .home-v4 *,.home-v4 *::before,.home-v4 *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .v4-marquee-track{animation:none}
  .v4-toast{opacity:1}
  .v4-toast.t2,.v4-toast.t3{display:none}
  .v4-ping{opacity:1}
  .v4-ring{display:none}
}

/* -------------------------------------------------------------- HERO TOUR, 3 Nov round 5
   The old homepage's product tour brought back into the v4 frame: six real screens from the demo
   studio sliding through a Mac, an iPad and an iPhone together. The panel stays dark in both themes
   like the viewfinder it replaced; the screens follow the site theme (no light iPad capture exists). */
.v4-tour{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;margin:12px;padding:20px 22px 18px;border-radius:26px;overflow:hidden;isolation:isolate;color:#F7F3EC;
  background:radial-gradient(circle at 34% 34%,rgba(181,143,131,.3),transparent 50%),radial-gradient(circle at 80% 80%,rgba(201,168,76,.2),transparent 46%),#0d0b0a}
.v4-tour::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(247,243,236,.1) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask:radial-gradient(circle at 50% 46%,#000 18%,transparent 72%);mask:radial-gradient(circle at 50% 46%,#000 18%,transparent 72%)}
.v4-tour-bar{display:flex;justify-content:space-between;gap:12px;font:400 10.5px var(--mono);letter-spacing:.14em;color:rgba(247,243,236,.62)}
.v4-tour-live{display:inline-flex;align-items:center;gap:8px}
.v4-tour-live i{width:7px;height:7px;border-radius:50%;background:#E5484D;animation:v4-blink 1.2s steps(2) infinite}
.v4-tour-rig{position:relative;align-self:center;width:100%;max-width:700px;margin-inline:auto;aspect-ratio:700/540;perspective:1800px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease)}
.v4-tour-rig figure{position:absolute;inset:auto;margin:0}
.v4-tour-rig .v4-tour-mac{left:0;top:4%;width:80%;z-index:1;animation:v4p-in 1.2s .1s var(--ease) both}
.v4-tour-rig .v4-tour-pad{right:0;top:22%;width:33%;z-index:2;animation:v4p-side 1.2s .3s var(--ease) both}
.v4-tour-rig .v4-tour-phone{left:7%;bottom:0;width:19%;z-index:3;animation:v4p-rise 1.2s .45s var(--ease) both}
.v4-tour-pad .v4-scr{aspect-ratio:1024/1180}
@keyframes v4p-in{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
@keyframes v4p-side{from{opacity:0;transform:translateX(60px) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes v4p-rise{from{opacity:0;transform:translate(-30px,40px) rotate(-5deg)}to{opacity:1;transform:none}}
/* a slide: the new screen comes in from the right as the old one leaves to the left */
.v4-tour .v4-scr img{opacity:0;transform:translateX(7%);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.v4-tour .v4-scr img.is-on{opacity:1;transform:none}
.v4-tour .v4-scr img.is-gone{opacity:0;transform:translateX(-7%)}
.v4-tour-rig .v4-tour-pad .v4-scr img:not(.is-on){transition-delay:.06s}
.v4-tour-rig .v4-tour-phone .v4-scr img:not(.is-on){transition-delay:.12s}
.v4-tour-cap{display:flex;align-items:baseline;gap:14px;min-height:2.6em;margin:0;padding-top:4px}
.v4-tour-cap span{flex:none;font:400 10.5px var(--mono);letter-spacing:.14em;color:#E2C47E}
.v4-tour-cap strong{font-family:var(--ed);font-weight:400;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.01em}
.v4-tour-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:4px;border:1px solid rgba(247,243,236,.16);border-radius:16px;background:rgba(247,243,236,.04)}
.v4-tour-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:9px 10px 10px;border:0;border-radius:12px;background:none;color:rgba(247,243,236,.66);font:600 12.5px var(--sans4);text-align:left;cursor:pointer;overflow:hidden;transition:background .35s var(--ease),color .3s}
.v4-tour-tabs button i{font:400 9.5px var(--mono);font-style:normal;letter-spacing:.1em;color:#E2C47E}
.v4-tour-tabs button:hover{color:#F7F3EC;background:rgba(247,243,236,.06)}
.v4-tour-tabs button[aria-pressed="true"]{background:#F7F3EC;color:#14100E}
.v4-tour-tabs button[aria-pressed="true"] i{color:#7A6210}
.v4-tour-tabs button:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
.v4-tour-prog{position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;overflow:hidden}
.v4-tour-prog::after{content:"";display:block;height:100%;background:#C9A84C;transform:scaleX(0);transform-origin:0 50%}
.v4-tour.is-auto button[aria-pressed="true"] .v4-tour-prog::after{animation:v4-prog var(--tour-ms,5000ms) linear both}
/* the tabs follow the panel's own width, which is narrow in the two-column hero below ~1200px */
.v4-tour{container-type:inline-size}
@container (max-width:600px){.v4-tour-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .v4-tour{margin:0 12px 12px}
}
@media(max-width:640px){
  .v4-tour{margin:0 8px 8px;padding:16px 12px 12px;border-radius:20px;gap:12px}
  .v4-tour-tabs button{padding:8px 9px 9px;font-size:12px}
  .v4-tour-cap{flex-direction:column;gap:6px;min-height:0}
  .v4-tour-cap strong{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .v4-tour .v4-scr img{transition:none}
}

/* tour iPhone corners follow the phone's own width, not the window: a 430pt screen has 55pt corners
   (12.8%), so the screen is 12.8% x 93.2% = 11.9cqw and the body adds the 3.4cqw bezel, concentric */
.v4-tour .v4-iphone,[data-devices] .v4-iphone{container-type:inline-size}
.v4-tour .v4-iphone-body,[data-devices] .v4-iphone-body{border-radius:15.3cqw}
.v4-tour .v4-iphone .v4-scr,[data-devices] .v4-iphone .v4-scr{border-radius:11.9cqw}
/* V/08: the phone shows the client's own gallery page, the studio's name and no Veyra, scrolling the way a client would */
.v4-cg{padding:5px}
.v4-cg-scr{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:19px;background:#F7F3EC;color:#1C1916;container-type:inline-size;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.v4-cg-bar{flex:none;position:relative;z-index:1;padding:15cqw 8cqw 5cqw;border-bottom:1px solid rgba(28,25,22,.13);background:#F7F3EC}
.v4-cg-bar b{position:static;color:inherit;animation:none;display:block;font-family:var(--ed);font-weight:500;font-size:9.6cqw;line-height:1.05;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-cg-bar small{display:block;margin-top:1.6cqw;font-size:5.4cqw;letter-spacing:.2em;text-transform:uppercase;color:#8A8178}
.v4-cg-view{position:relative;flex:1;overflow:hidden}
.v4-cg-in{position:absolute;left:0;right:0;top:0;animation:v4-cg-scroll 16s ease-in-out infinite alternate}
@keyframes v4-cg-scroll{0%,12%{top:0;transform:translateY(0)}88%,100%{top:100%;transform:translateY(-100%)}}
.v4-cg-btns{display:flex;justify-content:center;gap:3cqw;padding:5cqw 4cqw}
.v4-cg-btns span{padding:2.4cqw 4.4cqw;border:1px solid rgba(28,25,22,.13);border-radius:99px;font-size:5.6cqw;white-space:nowrap}
.v4-cg-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw;padding:0 4cqw}
.v4-cg-grid>div{display:flex;flex-direction:column;gap:2.6cqw}
.v4-cg-grid span{position:relative;display:block;overflow:hidden;border-radius:2cqw;background:#E9E3D8}
.v4-cg-grid img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.v4-cg-grid i{position:absolute;right:3cqw;top:2cqw;font-style:normal;font-size:8cqw;line-height:1;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.v4-cg-grid i.on{color:#E5484D;animation:v4-beat 1.6s infinite}
.v4-cg .v4-cg-foot{margin:0;line-height:1.2;padding:12cqw 0 14cqw;text-align:center;font-size:5.4cqw;letter-spacing:.2em;text-transform:uppercase;color:#8A8178}
@media(prefers-reduced-motion:reduce){.v4-cg-in,.v4-cg-grid i.on{animation:none}}