/* Linwood Studios wow2 layer (28 Oct 2026, v2c): motion + layout polish only. No copy lives here.
   Everything animated is gated on html.lx-fx (set by luxe.js only when reduced motion is off) and uses transform/opacity only. */
/* ---- hero: no chip ever sits on the concept/AI label ---- */
@media (max-width:640px){
 .hx .chip.c1{top:34px!important;left:-2%!important}
 .hx .clabel{z-index:4!important}
}
@media (min-width:861px){ .hx .clabel{z-index:4} .hx .chip.c1{top:9%!important;left:auto!important;right:-3%!important} .hx .chip.c2{top:auto!important;right:auto!important;bottom:3%!important;left:6%!important} }
/* desktop: bigger, vertically centred device stage (layout set before first paint, so no shift) */
@media (min-width:1061px){
 .hero .dev.hx{align-self:center;margin-top:0!important;scale:1.1;transform-origin:20% 50%}
}
/* hero entrance: laptop settles from a cinematic tilt, phone slides in after it (transform only; keeps LCP) */
.lx-fx .hero .dev.hx{perspective:1400px}
.lx-fx .hx .lap{animation:w2lap .55s cubic-bezier(.22,.8,.2,1) 0s backwards}
.lx-fx .hx .mob{animation:w2mob .45s cubic-bezier(.22,.8,.2,1) .12s backwards}
.lx-fx .hx .chip.c1{animation:w2chip .4s cubic-bezier(.22,.8,.2,1) .15s backwards,hxfloat 6s ease-in-out .6s infinite alternate}
.lx-fx .hx .chip.c2{animation:w2chip .4s cubic-bezier(.22,.8,.2,1) .2s backwards,hxfloat 7s ease-in-out .6s infinite alternate}
@keyframes w2lap{from{transform:perspective(1400px) rotateX(16deg) translate3d(0,46px,0) scale(.94)}to{transform:none}}
@keyframes w2mob{from{transform:translate3d(46px,60px,0) rotate(4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes w2chip{from{transform:translate3d(0,14px,0) scale(.92);opacity:0}to{transform:none;opacity:1}}
.hero .dev.hx,.hx .mob{will-change:translate}

/* ---- examples: browser frame + slow cinematic scroll through the concept ---- */
.ba-after{position:relative;box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 30px 70px -45px rgba(201,139,90,.45)}
.ba-after .w2-tall{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;opacity:0;transition:opacity 1s ease;will-change:transform;pointer-events:none}
.ba-after.w2-ready .w2-tall{opacity:1}
.ba-after.w2-ready .w2-tall{animation:w2pan 20s cubic-bezier(.45,0,.25,1) .6s infinite}
.ba-after.w2-ready .w2-tall{animation-play-state:paused}
.ba-after.w2-ready.w2-run .w2-tall{animation-play-state:running}
@media (hover:hover){.ba-after.w2-ready.w2-run:hover .w2-tall{animation-play-state:paused}}
@keyframes w2pan{0%,10%{transform:translate3d(0,0,0)}46%,56%{transform:translate3d(0,-70.4%,0)}92%,100%{transform:translate3d(0,0,0)}}
.ba-after:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.08),transparent 34%);z-index:2}
/* before/after arrive as a pair */
.lx-fx .ba-p.w2-rv>div:first-of-type{opacity:0;transform:translate3d(-34px,0,0);filter:saturate(.4);transition:opacity .45s var(--ease),transform .5s var(--ease),filter .5s ease .1s}
.lx-fx .ba-p.w2-rv .ba-arrow{opacity:0;transform:translate3d(-12px,0,0);transition:opacity .4s ease .1s,transform .45s var(--ease) .1s}
.lx-fx .ba-p.w2-rv>div:last-of-type{opacity:0;transform:translate3d(40px,0,0) scale(.96);transition:opacity .45s var(--ease) .1s,transform .5s var(--ease) .1s}
.lx-fx .ba-p.w2-rv .ba-lbl{opacity:0;transform:translate3d(0,16px,0);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.lx-fx .ba-p.w2-rv.w2-in>div:nth-of-type(n),.lx-fx .ba-p.w2-rv.w2-in .ba-arrow,.lx-fx .ba-p.w2-rv.w2-in .ba-lbl{opacity:.999;transform:none;filter:none}
.lx-fx .ba-p.w2-rv.w2-in>div:first-of-type:nth-of-type(n){filter:saturate(.75)}
@media (max-width:760px){
 .lx-fx .ba-p.w2-rv>div:first-of-type,.lx-fx .ba-p.w2-rv>div:last-of-type{transform:translate3d(0,36px,0) scale(.98)}
 .lx-fx .ba-p.w2-rv .ba-arrow{transform:rotate(90deg) translate3d(-10px,0,0)}
 .lx-fx .ba-p.w2-rv.w2-in .ba-arrow{transform:rotate(90deg)}
 /* compact "before" so the concept is the star on a phone */
 .ba-p .soc{min-height:0}.ba-p .soc .cv{height:38px}.ba-p .soc .po+.po{display:none}
 .ba-p>div:first-of-type{width:86%;justify-self:center}
}
/* ---- benefits: copper rule draws in, then the words rise ---- */
.ben li{position:relative}
.lx-fx .ben li.w2-rv{border-top-color:transparent}
.lx-fx .ben li.w2-rv:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#e7b98f,rgba(244,236,226,.14) 60%);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease) var(--d,0s)}
.lx-fx .ben li.w2-rv>*{opacity:0;transform:translate3d(0,26px,0);transition:opacity .4s var(--ease) calc(var(--d,0s) + .05s),transform .45s var(--ease) calc(var(--d,0s) + .05s)}
.lx-fx .ben li.w2-rv.w2-in:before{transform:none}
.lx-fx .ben li.w2-rv.w2-in>*{opacity:1;transform:none}
/* ---- price card: rises, copper light sweeps across once, border warms ---- */
.pcard{position:relative;overflow:hidden}
.lx-fx .pcard.w2-rv{opacity:0;transform:translate3d(0,44px,0) scale(.97);transition:opacity .45s var(--ease),transform .55s var(--ease),box-shadow .55s ease}
.lx-fx .pcard.w2-rv.w2-in{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(233,164,106,.25),0 40px 90px -50px rgba(201,139,90,.55)}
.pcard .w2-gl{position:absolute;top:-30%;bottom:-30%;left:0;width:40%;pointer-events:none;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,224,190,.16) 50%,transparent);mix-blend-mode:screen;transform:translate3d(-170%,0,0) skewX(-18deg)}
.pcard.w2-in .w2-gl{animation:w2gl .6s cubic-bezier(.65,0,.35,1) 0s both}
@keyframes w2gl{to{transform:translate3d(360%,0,0) skewX(-18deg)}}
/* ---- final call: heading glides up ---- */
.lx-fx .final.w2-rv .wrap>*{opacity:0;transform:translate3d(0,30px,0);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.lx-fx .final.w2-rv .wrap>*+*{transition-delay:.08s}
.lx-fx .final.w2-rv.w2-in .wrap>*{opacity:1;transform:none}
/*__RM__*/@media (prefers-reduced-motion:reduce){
 .hx .lap,.hx .mob,.hx .chip,.ba-after .w2-tall,.pcard .w2-gl{animation:none!important}
 .ba-after .w2-tall{display:none}
 .hero .dev.hx,.hx .mob{translate:none!important}
}

/* ===== v2c2 (28 Oct, Sales): every entrance finishes within ~0.6s; H1 and CTA never hidden or delayed ===== */
html:not(.ls-i3go) .hero h1 .lx-w>span,html:not(.ls-i3go) .hero h1 em .lx-w>span{animation:none!important;transform:none!important}
html:not(.ls-i3go) .hero h1,html:not(.ls-i3go) .hero .ctas,html:not(.ls-i3go) .hero .ctas .btn{opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important}
.hero .dev{animation-duration:.5s!important;animation-delay:0s!important}
.hx-wow .lap>.bez,.hx-wow .mob>.scr{animation-duration:.55s!important;animation-delay:0s!important}
.hx-sweep{animation-duration:.6s!important;animation-delay:0s!important}
.hx-bloom{animation-duration:.6s!important;animation-delay:0s!important}
.lx-js [data-rv]{transition:opacity .45s var(--ease),transform .5s var(--ease)!important;transition-delay:calc(var(--d,0s) * .2)!important}
.lx-swp.in .lx-gl{animation-duration:.6s!important;animation-delay:0s!important}
.lx-m>span{transition-duration:.45s!important}
/* ===== trade video (restored, compact): muted loop with poster, label always on ===== */
.tvid{background:#0b0907;padding:clamp(64px,9vw,120px) 0}
.tv-frame{position:relative;margin:28px 0 0;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#120f0d;box-shadow:0 0 0 1px rgba(244,236,226,.1),0 50px 100px -50px rgba(0,0,0,.95),0 30px 80px -50px rgba(201,139,90,.45)}
.tv-frame picture,.tv-frame img,.tv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tv-frame img{filter:brightness(1.15)}
.tv-frame video{opacity:0;transition:opacity .4s ease;filter:brightness(1.15)}
.tv-frame.tv-on video{opacity:1}
.tv-tag{position:absolute;left:14px;top:14px;z-index:2;font-size:11.5px;line-height:1.3;color:rgba(244,236,226,.92);background:rgba(8,8,8,.66);padding:5px 11px;border-radius:999px;pointer-events:none}
.tv-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.35))}
@media (max-width:640px){.tv-frame{aspect-ratio:2/3;border-radius:18px;margin-top:22px}.tv-tag{left:10px;top:10px;font-size:10.5px}}
/* ===== word band (restored, in-flow, max one screen, never pinned; photo shows through the letters) ===== */
.wband{position:relative;height:min(78vh,720px);height:min(78svh,720px);overflow:hidden;isolation:isolate;background:#0b0907;padding:0}
.wb-media{position:absolute;inset:0;background:#0b0907 url(/assets/video/band-bg.webp) 62% 45%/cover no-repeat;opacity:.55}
.wb-media:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,transparent,rgba(11,9,7,.85))}
.wb-mask{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.wb-t{display:block;font-family:var(--hf,'Fraunces',Georgia,serif);font-weight:800;font-size:min(21vw,26vh);line-height:.86;letter-spacing:-.045em;text-align:center;color:#e7b98f;
 background:linear-gradient(120deg,#f3d2ad,#c98b5a 55%,#e7b98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:.06em .04em;will-change:transform;transform:scale(.9)}
.wband.wb-on .wb-t{background:url(/assets/video/band-fill-d.webp) 62% 40%/cover no-repeat,linear-gradient(120deg,#7a4a2c,#b07a4e 55%,#8a5532);background-blend-mode:screen;-webkit-background-clip:text;background-clip:text}
@media (max-width:640px){.wband.wb-on .wb-t{background-image:url(/assets/video/band-fill-m.webp)}}
.wb-tag{position:absolute;left:16px;top:16px;z-index:2;font-size:11.5px;color:rgba(244,236,226,.88);background:rgba(8,8,8,.62);padding:4px 10px;border-radius:999px}
@media (max-width:640px){.wband{height:min(62vh,560px);height:min(62svh,560px)}}
@media (prefers-reduced-motion:reduce){.wb-t{transform:none!important}.tv-frame video{display:none}}

/* ===== v2c3 polish (28 Oct, Marc 3:10pm "WOW") ===== */
/* typography */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance;font-kerning:normal}
p,li{text-wrap:pretty}
.sh h2{letter-spacing:-.025em}
a,button{-webkit-tap-highlight-color:transparent}
/* header: glass deepens with a copper hairline once you scroll (visual only, no height change) */
header.top{transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
header.top.lx-solid{background:rgba(14,11,9,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 rgba(231,185,143,.14),0 18px 40px -28px rgba(0,0,0,.9)}
header.top .links a{position:relative}
@media (hover:hover){
 header.top .links a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:#e7b98f;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.22,.8,.2,1)}
 header.top .links a:hover:after{transform:none}
}
/* buttons: lift + warm glow on hover, press-in on touch */
@media (hover:hover){
 .btn.p{transition:transform .25s cubic-bezier(.22,.8,.2,1),box-shadow .25s ease,background .25s ease}
 .btn.p:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(201,139,90,.75),0 0 0 1px rgba(255,224,190,.35) inset}
 .btn.p:hover .i{transform:translateX(3px)}
 .btn.p .i{transition:transform .25s cubic-bezier(.22,.8,.2,1)}
 .ba-after{transition:transform .35s cubic-bezier(.22,.8,.2,1),box-shadow .35s ease}
 .ba-after:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 50px 90px -40px rgba(0,0,0,.95),0 30px 80px -40px rgba(201,139,90,.6)}
 .ben li h3{transition:color .25s ease}.ben li:hover h3{color:#f0c9a0}
 .steps li{transition:transform .3s cubic-bezier(.22,.8,.2,1)}.steps li:hover{transform:translateY(-3px)}
 .faq details summary{transition:color .2s ease}.faq details summary:hover{color:#f0c9a0}
 .tv-frame{transition:transform .4s cubic-bezier(.22,.8,.2,1)}.tv-frame:hover{transform:scale(1.008)}
}
.btn:active,.ba-after:active,.fab-btn:active{transform:scale(.97)!important;transition-duration:.1s!important}
/* price card: copper spotlight follows the pointer (desktop) */
.pcard:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(231,185,143,.16),transparent 60%)}
@media (hover:hover){.pcard:hover:before{opacity:1}}
.pcard>*:not(.w2-gl){position:relative;z-index:1}
/* hero screens: slow ambient light reflection drifting across the glass */
.lx-fx .hx .scr:after{content:"";position:absolute;inset:-20% -60%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,240,222,.10) 48%,rgba(255,240,222,.03) 52%,transparent 58%);animation:w2refl 9s cubic-bezier(.45,0,.25,1) 1s infinite;transform:translate3d(-40%,0,0)}
@keyframes w2refl{0%{transform:translate3d(-40%,0,0)}35%,100%{transform:translate3d(40%,0,0)}}
/* section seams: a soft copper hairline where dark sections meet */
#benefits,#pricing{position:relative}
#benefits:before,#pricing:before{content:"";position:absolute;left:50%;top:0;width:min(560px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(231,185,143,.35),transparent);pointer-events:none}
/* ===== entry reveal (every page load; never over the H1 or CTA; pointer-events none; 0.8s) ===== */
@media (prefers-reduced-motion:no-preference){
 html.lx-intro .hero .dev.hx:before{content:"";position:absolute;inset:-3% -2% -1% -2%;z-index:3;pointer-events:none;border-radius:20px;
  background:linear-gradient(115deg,#a96a3f 0%,#c98b5a 35%,#f3d2ad 50%,#c98b5a 65%,#8a5532 100%);box-shadow:0 0 60px rgba(231,185,143,.55);
  animation:w2cur .75s cubic-bezier(.76,0,.24,1) .05s both}
 html.lx-intro header.top:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#e7b98f 30%,#f3d2ad 50%,#c98b5a 70%,transparent);transform-origin:0 50%;animation:w2bar .8s cubic-bezier(.65,0,.35,1) both}
 html.lx-intro header.top .brand svg{animation:w2mark .7s cubic-bezier(.22,.8,.2,1) both}
}
@keyframes w2cur{0%{clip-path:inset(0 0 0 0 round 20px)}100%{clip-path:inset(0 0 0 100% round 20px)}}
@keyframes w2bar{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes w2mark{0%{filter:drop-shadow(0 0 0 rgba(231,185,143,0))}40%{filter:drop-shadow(0 0 10px rgba(231,185,143,.9))}100%{filter:drop-shadow(0 0 0 rgba(231,185,143,0))}}
header.top{position:sticky}
@media (prefers-reduced-motion:reduce){.hx .scr:after{animation:none!important;display:none!important}
 html.lx-intro .hero .dev.hx:before{content:"";position:absolute;inset:-3% -2% -1% -2%;z-index:3;pointer-events:none;border-radius:20px;background:linear-gradient(115deg,#a96a3f 0%,#c98b5a 35%,#f3d2ad 50%,#c98b5a 65%,#8a5532 100%);animation:w2fo .7s ease .05s both!important}
 html.lx-intro header.top:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#e7b98f 30%,#f3d2ad 50%,#c98b5a 70%,transparent);animation:w2fo .8s ease both!important}
 .rm-rv{opacity:0;transition:opacity .6s ease!important}.rm-rv.rm-in{opacity:1}}
@keyframes w2fo{from{opacity:1}to{opacity:0}}
/* ===== wow3 guards (28 Oct): content is only ever hidden for a reveal once working JS has added html.js-motion ===== */
html:not(.js-motion) [data-rv],html:not(.js-motion) .w2-rv,html:not(.js-motion) .w2-rv>*,html:not(.js-motion) .w2-rv .ba-arrow,html:not(.js-motion) .w2-rv .ba-lbl,html:not(.js-motion) .w2-rv .wrap>*,html:not(.js-motion) .rm-rv{opacity:1!important;transform:none!important;filter:none!important}
html:not(.js-motion) .lx-split .lx-m>span{transform:none!important}
/* trade reel without video (Low Power Mode, autoplay blocked, data saver): the still keeps moving */
.tv-frame.tv-css .tv-poster{animation:w3pan 9s ease-in-out infinite alternate;transform-origin:30% 50%;will-change:transform}
.tv-frame.tv-on .tv-poster{animation:none}
@keyframes w3pan{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-4%,-2%,0)}}
@media (prefers-reduced-motion:reduce){.tv-frame.tv-css .tv-poster{animation:none!important}}
/* ===== first phone screen moves (28 Oct, Marc saw no motion on iPhone): on a 390px screen the device mock-up sits below the fold,
   so the first screen gets its own motion. H1 and CTA stay fully visible and tappable (pseudo-elements only, pointer-events none). ===== */
.hero:after{content:"";position:absolute;z-index:-1;inset:-20% -30%;pointer-events:none;background:radial-gradient(40% 35% at 30% 40%,rgba(233,164,106,.22),transparent 70%),radial-gradient(35% 30% at 75% 70%,rgba(201,139,90,.18),transparent 70%);animation:w3glow 9s ease-in-out infinite alternate;will-change:transform}
@keyframes w3glow{0%{transform:translate3d(-6%,-3%,0) scale(1)}100%{transform:translate3d(6%,4%,0) scale(1.12)}}
.hero h1{position:relative}
html.lx-intro .hero h1:after{content:"";position:absolute;inset:-6% -4%;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,226,192,.6) 50%,transparent 65%) no-repeat;background-size:250% 100%;mix-blend-mode:overlay;animation:w3sheen .8s cubic-bezier(.65,0,.35,1) .1s both}
@keyframes w3sheen{from{background-position:120% 0}to{background-position:-20% 0}}
/* the CTA's light sweep was hover-only; it now runs on touch too: one 0.6s sweep every 6s */
html.lx-intro .hero .ctas .btn.p:before{animation:w3shine 6s cubic-bezier(.65,0,.35,1) .6s infinite}
@keyframes w3shine{0%{transform:translateX(-120%)}10%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){
 .hero:after{animation:w3glowfade 1.2s ease both!important}
 html.lx-intro .hero h1:after{background-position:50% 0;animation:w2fo .8s ease both!important}
 html.lx-intro .hero .ctas .btn.p:before{animation:none!important}}
@keyframes w3glowfade{from{opacity:0}}