/* Serko-style UI layer: loads after site.css and restyles every page. */
html{overflow-x:clip}
:root{--sh:0 1px 2px #0000000a,0 14px 34px -14px #1b170d24}
.tag,.eyebrow{display:inline-flex;padding:.4rem .9rem;border:1px solid var(--line);border-radius:99px;background:var(--card);letter-spacing:.12em;font-size:.7rem}
.tag::before,.eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero .tag,.phead .eyebrow{color:var(--link)}
.dark .eyebrow,.final .eyebrow{background:#ffffff0d;border-color:#ffffff22}
/* header: progress bar + text-roll links */
header{position:sticky}
header::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),#ebcb7c);transform:scaleX(var(--p,0));transform-origin:left}
nav a{border:0!important}
.r{display:block;overflow:hidden;height:1.45em;line-height:1.45}
.r i{display:block;font-style:normal;transition:transform .45s var(--ease)}
@media(min-width:1041px) and (hover:hover){nav a:hover .r i,nav a:focus-visible .r i{transform:translateY(-100%)}}
.menu{min-height:44px}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.cta .btn.p::after,.head-cta::after{content:"→";transition:transform .25s var(--ease)}
.cta .btn.p:hover::after,.head-cta:hover::after{transform:translateX(4px)}
/* hero */
.hero{background:radial-gradient(55% 60% at 85% 15%,#d9b25a30,transparent),radial-gradient(40% 40% at 8% 95%,#d9b25a18,transparent),var(--bg);color:var(--text)}
.hero::before,.hero::after{display:none}
.hero h1{color:var(--head)}
.hero .btn.g{border-color:var(--line);background:var(--card);color:var(--head)}
.hero .btn.g:hover{border-color:var(--gold-d)}
.hero .wrap{min-height:min(86svh,780px)}
.hero-visual{--px:0;--py:0}
.hero-visual::before{display:none}
.hero-photo{border:0;box-shadow:0 40px 80px -30px #1b170d55}
.fl{position:absolute;z-index:3;translate:calc(var(--px)*var(--k,10)*2px) calc(var(--py)*var(--k,10)*2px);transition:translate .5s ease-out;animation:pop .8s var(--ease) var(--d,.4s) backwards,bob var(--bd,6s) ease-in-out calc(var(--d,.4s) + .8s) infinite}
.chip{padding:.5rem .95rem;border-radius:99px;background:var(--card);color:var(--head);border:1px solid var(--line);font:600 .8rem Inter,sans-serif;box-shadow:var(--sh);white-space:nowrap}
.ui{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);max-width:min(270px,80%)}
.ui b{display:block;font:700 .85rem Manrope,sans-serif;color:var(--head)}
.ui small{display:block;font-size:.74rem;line-height:1.3;color:var(--text)}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ebcb7c,#c99a3b);color:#141414;font:800 .85rem Manrope,sans-serif}
.ui .ok{font:700 .68rem Inter,sans-serif;font-style:normal;padding:.2rem .55rem;border-radius:99px;background:#e6f6ea;color:#14602c;white-space:nowrap}
[data-theme=dark] .ui .ok{background:#12301c;color:#7fe0a0}
.f1{top:7%;right:-3%;--d:.5s;--k:12}.f2{top:36%;left:-5%;--d:.7s;--bd:7s;--k:-10}.f3{top:52%;right:-5%;--d:.9s;--bd:8s;--k:16}.f4{top:14%;left:-6%;--d:1.1s;--bd:6.5s;--k:-14}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(16px)}}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes rv{from{opacity:0;transform:translateY(26px)}}
/* marquee */
.marquee{overflow:hidden;padding:1.3rem 0;border-block:1px solid var(--line);background:var(--bg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;width:max-content;list-style:none;padding:0;animation:mq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track li{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;font:700 clamp(1rem,2vw,1.3rem) Manrope,sans-serif;color:var(--head);opacity:.6;white-space:nowrap}
.track li::after{content:"✦";color:var(--gold);font-size:.75em}
@keyframes mq{to{transform:translateX(-50%)}}
/* scroll reveal with stagger (animation so hover transforms still work) */
.reveal{opacity:1;transform:none;transition:none}
.js .reveal:not(.in-view){opacity:0}
.reveal.in-view{animation:rv .8s var(--ease) var(--d,0s) backwards}
/* cards */
.svc article,.feature-card,.work a,.why div,.contact form{border-radius:24px;box-shadow:var(--sh)}
.svc article:nth-child(5){box-shadow:none}
.callout,.det{border-radius:28px}
.final{margin:0 clamp(.6rem,2vw,1.5rem) clamp(.6rem,2vw,1.5rem);border-radius:32px}
.phead{background:radial-gradient(55% 90% at 85% 0%,#d9b25a30,transparent),var(--bg-alt);color:var(--text);border-bottom:1px solid var(--line)}
.phead::after{border-color:#d9b25a40}
.phead h1{color:var(--head)}
.phead .btn.g{border-color:var(--line);background:var(--card);color:var(--head)}
/* chat demo */
.chat{display:flex;flex-direction:column;gap:.8rem;min-height:22rem;padding:clamp(1rem,3vw,1.6rem);background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh)}
.m{max-width:85%;padding:.8rem 1rem;border-radius:20px;font-size:.95rem;line-height:1.5}
.js .chat .m:not(.show){display:none}
.m.show{animation:rv .5s var(--ease) backwards}
.me{align-self:flex-end;background:linear-gradient(135deg,#ebcb7c,#c99a3b);color:#141414;border-bottom-right-radius:6px}
.bot{align-self:flex-start;background:var(--bg-alt);color:var(--head);border-bottom-left-radius:6px}
.dots i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--text);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{transform:translateY(-5px);opacity:.4}}
.sum{align-self:stretch;max-width:100%;border:1px solid var(--line);background:var(--card);border-radius:20px}
.sum strong{display:block;font:700 .75rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--link);margin-bottom:.6rem}
.sum .tags{margin:0 0 .9rem}
.stat{display:flex;align-items:center;gap:.7rem;font-weight:600;color:var(--head);font-size:.92rem}
.tick{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);transition:background .4s}
.tick svg{width:15px;height:15px;fill:none;stroke:#14602c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s .1s}
.done .tick{background:#e6f6ea}.done .tick svg{stroke-dashoffset:0}
.pend{display:none}
.js .chat:not(.done) .pend{display:inline}.js .chat:not(.done) .rdy{display:none}
/* faq */
.faq-list details p{overflow:hidden}
.faq-list summary{min-height:44px}
.faq-plus{transition:background .2s,transform .3s var(--ease)}
details[open] .faq-plus{background:var(--gold);transform:rotate(180deg)}
details[open] .faq-plus::before,details[open] .faq-plus::after{background:#141414}
footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
/* responsive */
@media(max-width:960px){.hero .wrap{min-height:0}.f1{right:2%}.f2{left:2%}.f3{right:2%}.f4{left:2%}.hero-visual{margin-inline:auto}}
@media(max-width:680px){
 .f2,.f4{display:none}.f1{top:auto;bottom:42%;left:3%;right:auto}.f3{top:24%;right:3%}.ui small{display:none}
 .m{max-width:92%}.final{border-radius:24px}.track{animation-duration:30s}
}
@media(prefers-reduced-motion:reduce){.fl{animation:none!important}.track{animation:none!important;width:auto;overflow-x:auto}.marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}.js .reveal:not(.in-view){opacity:1}}
/* fixes */
@media(max-width:1280px){header .head-cta{display:none}}

/* ===== v2: fluid sizing, tighter layout, UI polish ===== */
:root{--gut:clamp(1rem,4.5vw,3rem);--sec:clamp(3rem,7vw,6.5rem)}
.wrap{width:min(1240px,100% - 2*var(--gut))}
section{padding-block:var(--sec)}
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}
h1{font-size:clamp(2.1rem,1.1rem + 4.6vw,4.2rem)}
h2{font-size:clamp(1.65rem,1.1rem + 2.2vw,2.7rem)}
.hero h1{font-size:clamp(2.2rem,1rem + 4.6vw,4.4rem);max-width:15ch}
.phead h1{font-size:clamp(2rem,1rem + 3.6vw,3.4rem)}
.lead{font-size:clamp(1.15rem,1rem + 1vw,1.7rem)}
.hero .wrap{min-height:0;padding-block:clamp(2.2rem,6vw,5.5rem);gap:clamp(1.75rem,5vw,5rem);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero::before{display:block;width:clamp(260px,45vw,560px);aspect-ratio:1;inset:auto;right:-8%;top:-18%;border-radius:50%;background:radial-gradient(circle,#d9b25a45,transparent 65%);animation:orb 14s ease-in-out infinite alternate}
@keyframes orb{to{transform:translate(-40px,50px) scale(1.12)}}
.head h2::after{display:none}
.svc article,.feature-card,.why div{padding:clamp(1.25rem,3vw,2rem)}
.more::after{content:" →";display:inline-block;transition:transform .25s var(--ease)}
.more{border-bottom:0}.more:hover::after{transform:translateX(4px)}
.work h3::after{content:" ↗";color:var(--gold-d);font-weight:600;display:inline-block;transition:transform .25s var(--ease)}
.work a:hover h3::after{transform:translate(3px,-3px)}
.why{counter-reset:w}
.why div::before{counter-increment:w;content:"0" counter(w);display:block;font:800 .8rem Manrope,sans-serif;color:var(--link);margin-bottom:.8rem;letter-spacing:.1em}
.btn:active{transform:scale(.97)}
.cta .btn{width:auto;flex:0 1 auto}
.det,.det *,.contact a,footer li{overflow-wrap:anywhere}
/* footer wordmark */
footer>.wrap::before{content:"Vision Into Reality.";display:block;margin-bottom:clamp(1.8rem,5vw,3.5rem);font:800 clamp(2rem,8vw,5.5rem)/1 Manrope,sans-serif;letter-spacing:-.045em;background:linear-gradient(135deg,#f6dc9a,#d9b25a 55%,#b98a2f);-webkit-background-clip:text;background-clip:text;color:transparent}
/* mobile menu */
.nav-cta{display:none}
nav.open{animation:navIn .3s var(--ease)}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}}
body.nolock{overflow:hidden}
.dock{display:none}
@media(max-width:1180px) and (min-width:961px){.steps{grid-template-columns:repeat(3,1fr)}.steps li::after{display:none}}
@media(max-width:1040px){
 .nav-cta{display:block;border-bottom:0!important;padding-top:1rem}.nav-cta .btn{width:100%;font-size:1rem}
 nav a{padding:1rem 0}.r{height:auto}.r i+i{display:none}
}
@media(max-width:960px){
 .hero .wrap{grid-template-columns:minmax(0,1fr)}
 .hero h1{max-width:18ch}
 .hero-visual{width:100%;max-width:none;margin:0;aspect-ratio:16/11;max-height:none}
 .svc{gap:1rem}
}
@media(max-width:680px){
 .hero-visual{aspect-ratio:1/1}
 .cta{flex-direction:row;gap:.7rem}.cta .btn{flex:1 1 100%}
 .head{margin-bottom:1.8rem}.split{gap:1.5rem}
 .steps li{padding-left:3.2rem}
 .article-row,.row{padding-block:1.5rem}
 .dock{position:fixed;z-index:40;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));display:flex;gap:.5rem;padding:.45rem;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 40px -10px #0006;transform:translateY(140%);transition:transform .4s var(--ease)}
 .dock.show{transform:none}
 .dock .btn{flex:1;min-height:44px;padding:.6rem 1rem;font-size:.9rem;width:auto}
 .dock .btn.g{border-color:var(--line);color:var(--head)}
 body.has-dock{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.hero-visual{aspect-ratio:1/1.12}.chip{font-size:.74rem;padding:.4rem .75rem}.ui{padding:.55rem .7rem}.av{width:30px;height:30px}.m{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}nav.open{animation:none}.dock{transition:none}}
/* v2.1 */
.hero{padding-block:0}
@media(max-width:1040px){
 header nav{background:var(--bg)!important;box-shadow:0 30px 40px -20px #0004}
 header nav .nav-cta .btn{color:#141414!important}
}

/* ===== light theme palette (default): warm ivory + espresso ink + deep gold ===== */
:root:not([data-theme=dark]){
 --bg:#fffdf8;--bg-alt:#f6f1e5;--card:#ffffff;
 --head:#17130b;--text:#4b463b;--line:#e8dfca;
 --link:#8a6414;--gold-d:#8a6414;--gold-l:#f6e8c4;
 --sh:0 1px 2px #3a2c0a0d,0 16px 36px -16px #5a430f30;
}
:root:not([data-theme=dark]) body{background:var(--bg)}
:root:not([data-theme=dark]) header{background:rgba(255,253,248,.88)}
:root:not([data-theme=dark]) header nav a{color:#4b463b}
:root:not([data-theme=dark]) header nav a:hover{color:#17130b}
:root:not([data-theme=dark]) .hero{background:radial-gradient(55% 60% at 88% 10%,#e9c35c33,transparent),radial-gradient(40% 45% at 5% 100%,#e9c35c1f,transparent),var(--bg)}
:root:not([data-theme=dark]) .hero h1 em{background:linear-gradient(135deg,#c28a10,#8f600a);-webkit-background-clip:text;background-clip:text;color:transparent}
:root:not([data-theme=dark]) .phead{background:radial-gradient(55% 90% at 88% 0%,#e9c35c33,transparent),var(--bg-alt)}
:root:not([data-theme=dark]) .btn.p{background:linear-gradient(135deg,#f0d085,#cf9f3d);color:#17130b;box-shadow:0 6px 18px -8px #b98a2f99}
:root:not([data-theme=dark]) .btn.p:hover{box-shadow:0 12px 26px -8px #b98a2faa}
:root:not([data-theme=dark]) .hero .btn.g,:root:not([data-theme=dark]) .phead .btn.g{border-color:#d9cfb6;color:var(--head)}
:root:not([data-theme=dark]) .hero .btn.g:hover{border-color:var(--gold-d);background:#fff8e6}
:root:not([data-theme=dark]) .eyebrow,:root:not([data-theme=dark]) .tag{background:#fff8e6;border-color:#ecdcae;color:var(--link)}
:root:not([data-theme=dark]) .dark .eyebrow,:root:not([data-theme=dark]) .final .eyebrow{background:#ffffff0f;border-color:#ffffff24;color:var(--gold)}
:root:not([data-theme=dark]) .chip{background:#fff;border-color:#ecdcae}
:root:not([data-theme=dark]) .tags li{background:#fffaf0;border-color:#e8dcb8;color:#5a5240}
:root:not([data-theme=dark]) .svc article:nth-child(5) .tags li{background:transparent}
:root:not([data-theme=dark]) .svc svg{background:linear-gradient(135deg,#f6e3a8,#fff6dc);border-color:#e3c877;stroke:#8a6414}
:root:not([data-theme=dark]) .off,:root:not([data-theme=dark]) .faq-section{background:var(--bg-alt)}
:root:not([data-theme=dark]) .bot{background:#f6f1e5}
:root:not([data-theme=dark]) .marquee{background:#fffaf0}
:root:not([data-theme=dark]) .dark,:root:not([data-theme=dark]) .callout,:root:not([data-theme=dark]) .det,:root:not([data-theme=dark]) footer{background:#14100a}
:root:not([data-theme=dark]) .final{background:radial-gradient(ellipse at 50% 0%,#e9c35c30,transparent 60%),linear-gradient(135deg,#17120a,#2b2110)}
:root:not([data-theme=dark]) .notice,:root:not([data-theme=dark]) .form-note{background:#fff8e6;border-left-color:#c28a10}
:root:not([data-theme=dark]) ::selection{background:#f0d085;color:#17130b}
.more::after{content:"→";margin-left:.4rem}
.svc article:nth-child(5) .more,.dark .more,.det .more{color:var(--gold)}
.svc article:nth-child(5) .more:hover{color:#fff}

/* ===== interactive logo ===== */
.brand{display:flex;align-items:center;gap:.55rem;position:relative}
.logo-mark{position:relative;flex:none;width:46px;height:46px;padding:0;margin:-2px;border:0;background:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;perspective:260px;-webkit-tap-highlight-color:transparent;color:inherit}
.logo-mark::before{content:"";position:absolute;inset:1px;border-radius:50%;background:conic-gradient(from 0deg,#f3dc9a,#c99a3b,#f3dc9a);filter:blur(9px);opacity:0;transition:opacity .35s}
.mark-in{position:relative;display:grid;place-items:center;border-radius:50%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .28s var(--ease);will-change:transform}
.mark-in img{display:block}
.mark-in.flip{animation:mflip .75s var(--ease)}
@keyframes mflip{from{transform:rotateY(0) scale(.82)}60%{transform:rotateY(300deg) scale(1.12)}to{transform:rotateY(360deg) scale(1)}}
.logo-mark .ripple{position:absolute;inset:3px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;animation:rip .7s ease-out forwards}
@keyframes rip{to{transform:scale(2.3);opacity:0}}
.mode-badge{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--head);color:var(--bg);border:2px solid var(--bg);box-shadow:0 2px 6px #0003;transition:transform .5s var(--ease)}
.mode-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mode-badge .ic-sun{display:none}
[data-theme=dark] .mode-badge .ic-sun{display:block}[data-theme=dark] .mode-badge .ic-moon{display:none}
.mode-badge.spin{transform:rotate(360deg) scale(1.15)}
.logo-mark:not(.seen) .mode-badge::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);animation:hint 2s ease-out infinite}
@keyframes hint{from{transform:scale(.7);opacity:.9}to{transform:scale(1.5);opacity:0}}
.logo-tip{position:absolute;left:0;top:calc(100% + 10px);padding:.4rem .75rem;border-radius:99px;background:#17130b;color:#fff;font:600 .72rem Inter,sans-serif;white-space:nowrap;letter-spacing:.02em;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:60;box-shadow:0 10px 24px -8px #0006}
[data-theme=dark] .logo-tip{background:#f4f1ea;color:#111}
.wordmark{position:relative;text-decoration:none;color:inherit;white-space:nowrap;padding-block:.35rem}
.wordmark::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.wordmark:hover::after,.wordmark:focus-visible::after{transform:scaleX(1)}
header.is-scrolled .logo-mark{--s:.9}
html.theme-anim,html.theme-anim *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s,stroke .45s!important}
@media(hover:hover){
 .logo-mark:hover::before,.logo-mark:focus-visible::before{opacity:.6;animation:mspin 3s linear infinite}
 .logo-mark:hover{--s:1.1}
 .logo-mark:hover~.logo-tip,.logo-mark:focus-visible~.logo-tip{opacity:1;transform:none}
}
.logo-mark:active{--s:.9}
.logo-mark:focus-visible~.logo-tip{opacity:1;transform:none}
@keyframes mspin{to{transform:rotate(360deg)}}
@media(hover:none){.logo-tip{display:none}}
@media(max-width:380px){.brand{gap:.35rem}.logo-mark{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.mark-in.flip,.logo-mark::before,.logo-mark:not(.seen) .mode-badge::after,.logo-mark .ripple{animation:none!important}.mark-in{transition:none}}

/* ===== enquiry status message ===== */
#msg{position:relative;margin-top:.2rem;padding:1rem 1.15rem 1rem 3.5rem;border-radius:16px;font-size:clamp(.95rem,.9rem + .25vw,1.05rem);font-weight:500;line-height:1.55;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty}
#msg.ok,#msg.bad{animation:rv .45s var(--ease) backwards}
#msg::before{content:"";position:absolute;left:1rem;top:1rem;width:1.65rem;height:1.65rem;border-radius:50%;display:grid;place-items:center;font:700 .95rem/1 Inter,sans-serif;color:#fff}
#msg.ok::before{content:"\2713";background:#1c7a3e}
#msg.bad::before{content:"!";background:#b3261e}
#msg a{display:inline-block;margin-top:.35rem;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px}
[data-theme=dark] #msg.ok{background:#12301c;border-color:#245a37;color:#c3f3d3}
[data-theme=dark] #msg.bad{background:#3a1613;border-color:#7a2a22;color:#ffd5d0}
@media(max-width:380px){#msg{padding:.9rem .9rem .9rem 3.1rem}#msg::before{left:.8rem;top:.9rem}}