/* Go.vindu website — styles and motion. Colours and type follow the Go.vindu design system. */
:root{
  --ink:#121212; --muted:#63615f; --paper:#f7f2ea; --surface:#ebe6df; --line:#e1dcd5; --border:#d0ccc5;
  --red:#d7383e; --red-600:#c1363a; --red-100:#f7e4dc; --white:#fff;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}  /* keeps the thank-you panel hidden until the form is sent */
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:999px}
::selection{background:var(--red-100)}

/* ---------- Header ---------- */
.site-header{transition:box-shadow .3s ease,background-color .3s ease}
.site-header.scrolled{box-shadow:0 6px 24px rgba(18,18,18,.08);background:rgba(247,242,234,.97)!important}
.site-nav a{position:relative;padding:6px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.site-nav a:hover::after,.site-nav a.active::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;border:none;border-radius:999px;background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}

/* ---------- Buttons ---------- */
a[style*="border-radius: 999px"][style*="height: 54px"],a[style*="border-radius: 999px"][style*="height: 44px"]{transition:transform .25s var(--ease-out),box-shadow .25s ease,filter .2s}
a[style*="border-radius: 999px"][style*="height: 54px"]:hover,a[style*="border-radius: 999px"][style*="height: 44px"]:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,18,18,.16)}
a[style*="border-radius: 999px"] svg{transition:transform .25s var(--ease-out)}
a[style*="border-radius: 999px"]:hover svg{transform:translateX(3px)}
a[style*="border-radius: 14px"][style*="height: 52px"]{transition:transform .25s var(--ease-out)}
a[style*="border-radius: 14px"][style*="height: 52px"]:hover{transform:translateY(-2px)}

/* ---------- Hero entrance ---------- */
.hero-copy>*{opacity:0;transform:translateY(22px);animation:rise .9s var(--ease-out) forwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}.hero-copy>*:nth-child(2){animation-delay:.15s}.hero-copy>*:nth-child(3){animation-delay:.28s}
.hero-copy>*:nth-child(4){animation-delay:.4s}.hero-copy>*:nth-child(5){animation-delay:.5s}.hero-copy>*:nth-child(6){animation-delay:.6s}
.dot{display:inline-block;color:var(--red);animation:dotDrop 1.1s cubic-bezier(.3,1.4,.5,1) .7s both}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fadeScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
@keyframes dotDrop{0%{opacity:0;transform:translateY(-1.4em)}60%{opacity:1;transform:translateY(.06em)}80%{transform:translateY(-.08em)}100%{opacity:1;transform:none}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- Cards ---------- */
.lift{transition:transform .35s var(--ease-out),box-shadow .35s ease,opacity .8s var(--ease-out)}
.lift.in:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(18,18,18,.10)}
.lift .ph img{transition:transform .8s var(--ease-out)}
.lift:hover .ph img{transform:scale(1.06)}
figure.lift>img+figcaption{transition:transform .35s var(--ease-out)}

/* ---------- Phones ---------- */
.phone .phone-body{animation:float 6s ease-in-out infinite;transition:transform .5s var(--ease-out)}
.phone:nth-child(2) .phone-body{animation-delay:-2s}.phone:nth-child(3) .phone-body{animation-delay:-4s}
.phone:hover .phone-body{animation-play-state:paused;transform:translateY(-10px) rotate(-1.5deg)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Logo marquees ---------- */
.marquee{overflow:hidden;border-radius:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee-track img{display:block;height:110px;width:auto;max-width:none}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- CTA ---------- */
.cta-orb{animation:orb 9s ease-in-out infinite}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,24px) scale(1.12)}}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav-cta{display:none}
  .site-nav{order:10;width:100%;flex-direction:column;gap:0!important;max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
  .site-nav a{padding:14px 2px;border-top:1px solid var(--line);font-size:18px}
  .site-nav a::after{display:none}
  .site-header.open .site-nav{max-height:420px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero-copy>*,.dot,.hero-art *{opacity:1!important;transform:none!important;clip-path:none!important}
  .rot>span{opacity:0!important}.rot>span:first-child{opacity:1!important}
  .marquee{overflow-x:auto}
}

/* ---------- Enquiry form ---------- */
#enquiry-form input:not([type=radio]):not([type=checkbox]),#enquiry-form select,#enquiry-form textarea{transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
#enquiry-form input:not([type=radio]):not([type=checkbox]):focus,#enquiry-form select:focus,#enquiry-form textarea:focus{border-color:var(--ink)!important;background:var(--white)!important;box-shadow:0 0 0 4px rgba(215,56,62,.12)}
#enquiry-form .invalid input,#enquiry-form .invalid textarea{border-color:var(--red-600)!important;background:#fff6f4!important}
#enquiry-form .err:empty{display:none}
.need{position:relative;cursor:pointer}
.need input{position:absolute;opacity:0;width:1px;height:1px}
.need span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1.5px solid var(--border);border-radius:999px;font-size:15px;font-weight:600;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease-out)}
.need:hover span{border-color:var(--ink)}
.need input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--white);font-weight:700}
.need input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.need input:checked+span{animation:pop .35s var(--ease-out)}
@keyframes pop{0%{transform:scale(.94)}100%{transform:scale(1)}}
.submit{transition:transform .25s var(--ease-out),box-shadow .25s ease,opacity .2s}
.submit:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,18,18,.18)}
.submit:hover svg{transform:translateX(3px)}
.submit svg{transition:transform .25s var(--ease-out)}
.submit[disabled]{opacity:.7;cursor:progress}
.submit.loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#enquiry-done:not([hidden]){animation:rise .7s var(--ease-out) both}
#enquiry-done:not([hidden]) .done-icon{animation:dotDrop .9s cubic-bezier(.3,1.4,.5,1) .1s both}
#enquiry.flash>div>div:last-child{animation:flash 1.2s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(215,56,62,.45)}100%{box-shadow:0 0 0 18px rgba(215,56,62,0)}}

/* ---------- Hero (redesigned) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(18,18,18,.10) 1.5px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 75% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 75% 40%,#000 20%,transparent 75%);pointer-events:none}
.pulse{position:relative;width:10px;height:10px;border-radius:50%;background:var(--red)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.6);opacity:0}}

/* rotating word */
.rot{display:inline-grid;vertical-align:bottom;color:var(--red)}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(.35em);animation:word 10s var(--ease-out) infinite}
.rot>span:nth-child(1){animation-delay:.9s}.rot>span:nth-child(2){animation-delay:3.4s}.rot>span:nth-child(3){animation-delay:5.9s}.rot>span:nth-child(4){animation-delay:8.4s}
@keyframes word{0%{opacity:0;transform:translateY(.35em)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-.35em)}}

/* collage */
.hero-art-wrap{position:relative;height:600px;display:flex;justify-content:center}
.hero-art{position:relative;width:560px;height:600px;flex:none;transform-origin:top center}
.hero-disc{position:absolute;right:-30px;top:40px;width:440px;height:440px;border-radius:50%;background:linear-gradient(135deg,#e04a4f 0%,#c1363a 100%);animation:discIn 1.2s var(--ease-out) .15s both}
.hero-photo{position:absolute;left:0;top:44px;width:360px;height:440px;border-radius:40px;overflow:hidden;box-shadow:0 24px 60px rgba(18,18,18,.18);animation:photoIn 1.2s var(--ease-out) .3s both}
.hero-photo img{width:100%;height:100%;object-fit:cover;animation:kenburns 18s ease-in-out 1.5s infinite alternate}
.hero-phone{position:absolute;right:16px;bottom:0;margin:0;animation:phoneIn 1.1s var(--ease-out) .65s both}
.hero-phone>div{animation:float 6s ease-in-out 1.8s infinite}
.hero-float{animation:popIn .8s cubic-bezier(.3,1.4,.5,1) both}
.hero-float.f1{right:0;top:0;animation-delay:1.05s}
.hero-float.f2{left:24px;bottom:28px;animation-delay:1.25s}
.hero-float.f3{left:-28px;top:250px;animation-delay:1.45s}
.hero-float>*:first-child{flex:none}
.hero-float.f1,.hero-float.f2,.hero-float.f3{will-change:transform}
.hero-art:hover .hero-float.f1{transform:translateY(-6px)}
@keyframes discIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes photoIn{from{opacity:0;clip-path:inset(20% 20% 20% 20% round 40px);transform:translateY(20px)}to{opacity:1;clip-path:inset(0 0 0 0 round 40px);transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes barLive{0%,100%{opacity:1}50%{opacity:.45}}
.hero-proof{opacity:0;animation:rise .9s var(--ease-out) 1.2s forwards}

@media (max-width:1100px){.hero-art-wrap{height:540px}.hero-art{transform:scale(.9)}}
@media (max-width:640px){.hero-art-wrap{height:380px}.hero-art{transform:scale(.6)}.hero-float.f3{left:0}}
@media (max-width:380px){.hero-art-wrap{height:350px}.hero-art{transform:scale(.56)}}

/* ---------- Hero: the app plays itself ---------- */
.scr{transform:translateX(100%);animation:scr 9s var(--ease-out) infinite backwards}
.scr.s1{animation-delay:1.4s}.scr.s2{animation-delay:4.4s}.scr.s3{animation-delay:7.4s}
@keyframes scr{0%{transform:translateX(100%);opacity:1}5%,31%{transform:none;opacity:1}36%,100%{transform:translateX(-35%);opacity:0}}
.cyc>span{grid-area:1/1;opacity:0;animation:cyc 9s var(--ease-out) infinite backwards}
.cyc>.c1{animation-delay:1.4s}.cyc>.c2{animation-delay:4.4s}.cyc>.c3{animation-delay:7.4s}
@keyframes cyc{0%{opacity:0;transform:translateY(8px)}5%,31%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-8px)}}
.fill{transform-origin:left;transform:scaleX(.08);animation:fill 9s var(--ease-out) 1.4s infinite backwards}
@keyframes fill{0%{transform:scaleX(.08)}6%,31%{transform:scaleX(.34)}39%,64%{transform:scaleX(.67)}72%,96%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
.tap{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;opacity:0;animation:tap 9s ease-out 4.4s infinite backwards}
@keyframes tap{0%,18%{opacity:0;transform:scale(.2)}20%{opacity:.55;transform:scale(.3)}29%{opacity:0;transform:scale(3.2)}100%{opacity:0}}

/* steam rising off the food */
.steam{position:absolute;left:34%;top:4%;width:34%;height:auto;filter:blur(3px);pointer-events:none}
.steam path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:7;stroke-linecap:round;opacity:0;animation:steam 3.6s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.2s}.steam path:nth-child(3){animation-delay:2.4s}
@keyframes steam{0%{opacity:0;transform:translateY(24px) scaleY(.85)}30%{opacity:.75}100%{opacity:0;transform:translateY(-36px) scaleY(1.15)}}

/* parallax uses the separate translate property, so it never fights the animations */
[data-depth]{transition:translate .5s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  .scr{visibility:hidden}.scr.s1{visibility:visible}
  .cyc>span{visibility:hidden}.cyc>.c1{visibility:visible;opacity:1!important}
  .fill{transform:scaleX(.34)!important}
  .steam,.tap{display:none}
}