/*
Theme Name: DG Agency Theme
Theme URI: https://designerguru.co.ke
Author: Designerguru Software Solutions
Description: Six-page, single-screen, 3D animated agency theme (Home, About, Services, Pricing, Portfolio, Blog, Contact). Everything is editable in the Customizer.
Version: 2.0.0
License: GPLv2 or later
Text Domain: dg-agency-theme
*/
:root{--p:1100}
:root{--bg:#050714;--card:#0b0f2a;--line:#1c2140;--line2:#2a3170;--text:#eef0ff;--muted:#8f95c8;--accent:#ecb035;--accent2:#c48a14;--accent-text:#150f05;--purple:#4a2cdc;--violet:#7d63ff;--purple-text:#fff;--radius:16px;--btn-r:99px;--glow1:rgba(74,44,220,.5);--glow2:rgba(236,176,53,.1);--line-soft:rgba(143,149,200,.18);--hf:"Bricolage Grotesque";--bf:"Figtree"}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--bf),"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden}
body{background-image:radial-gradient(55% 65% at 76% 48%,var(--glow1),transparent 70%),radial-gradient(35% 35% at 6% 100%,var(--glow2),transparent 70%);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:64px 64px;opacity:.3;mask-image:radial-gradient(70% 80% at 70% 50%,#000,transparent)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%}
.wrap{position:relative;z-index:1;max-width:var(--w,1280px);margin:0 auto;padding:0 24px;min-height:100vh;display:flex;flex-direction:column}
.top{width:var(--hdr-w,100%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.logo{flex:none;font:800 17px var(--hf),sans-serif;letter-spacing:.02em}
.logo small{display:block;font:500 11px var(--bf);letter-spacing:.06em;color:var(--muted);margin-top:2px}
.logo-link{display:flex;align-items:center;gap:12px}
.mark{width:46px;height:46px;background:var(--logo) center/contain no-repeat;flex:none}
.logo .custom-logo-link{display:block}
.logo img,.logo .custom-logo{width:var(--logo-w,150px)!important;max-width:none!important;height:auto!important;display:block}
.nav-wrap{display:flex;align-items:center;gap:8px}
.nav{display:flex;gap:6px;align-items:center;list-style:none}
.nav a{display:block;padding:8px 14px;border-radius:99px;color:var(--muted);font-weight:500;transition:.2s}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--text);background:rgba(125,99,255,.18)}
.nav-cta{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-text);font-weight:700;padding:10px 20px;margin-left:10px;border-radius:var(--btn-r);box-shadow:0 8px 30px -10px var(--accent);transition:.25s}
.nav-cta:hover{transform:translateY(-2px)}
.main{flex:1;min-height:0;display:grid;grid-template-columns:var(--cols,40fr 60fr);gap:30px;padding:30px 0 20px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--line2);border-radius:99px;font-size:13px;color:var(--muted);background:rgba(11,15,42,.6)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(236,176,53,.6)}70%{box-shadow:0 0 0 9px rgba(236,176,53,0)}100%{box-shadow:0 0 0 0 rgba(236,176,53,0)}}
h1{font:800 min(var(--h1,56px),7.6vh)/.98 var(--hf),sans-serif;letter-spacing:-.035em;margin:20px 0 14px}
h1 em{font-style:normal;background:linear-gradient(95deg,#ffe3a1,var(--accent) 45%,var(--violet));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s ease-in-out infinite alternate}
h1 em.w{display:block;width:fit-content}
@keyframes shine{to{background-position:100% 0}}
.w{display:inline-block;opacity:0;transform:translateY(26px) rotateX(-40deg);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.09s + .1s)}
@keyframes rise{to{opacity:1;transform:none}}
.lead{color:var(--muted);font-size:15px;line-height:1.55;max-width:var(--lead-w,420px)}
.lead b{color:var(--text);font-weight:600}
.btns{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:700;padding:12px 22px;border:1px solid var(--line2);border-radius:var(--btn-r);color:var(--text);background:rgba(11,15,42,.55);backdrop-filter:blur(6px);cursor:pointer;transition:.25s}
.btn:hover{border-color:var(--violet);background:rgba(125,99,255,.16);transform:translateY(-3px)}
.btn.y{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:var(--accent-text);box-shadow:0 8px 30px -10px var(--accent)}
.btn.y:hover{box-shadow:0 14px 34px -8px var(--accent)}
.stats{display:flex;gap:40px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);max-width:var(--lead-w,420px)}
.stat b{display:block;font:800 24px/1.1 var(--hf),sans-serif;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--muted)}
.label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.label.sub{margin-top:18px}
/* 3D stage */
.stage{position:relative;perspective:calc(var(--p)*1px);min-width:0}
.scene{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.scene.no-tilt{transform:none;transition:none}
.stack{position:relative;transform-style:preserve-3d}
.deco{position:absolute;inset:-8% -6%;pointer-events:none;transform-style:preserve-3d}
.floor{position:absolute;left:-12%;right:-12%;bottom:-6%;height:46%;transform:rotateX(74deg) translateZ(-60px);transform-origin:50% 100%;background-image:linear-gradient(rgba(125,99,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(125,99,255,.5) 1px,transparent 1px);background-size:46px 46px;animation:floor 3s linear infinite;mask-image:linear-gradient(transparent,#000 75%)}
@keyframes floor{to{background-position:0 46px}}
.rings{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:1;translate:-50% -50%;transform:translateZ(-30px);opacity:.55}
.rings svg{width:100%;height:100%;overflow:visible}
.spin{transform-origin:center;animation:rot 60s linear infinite}.spin.r{animation-duration:90s;animation-direction:reverse}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fl{50%{translate:0 -10px}}
.home-stage{height:100%;max-height:78vh;align-self:center}
.home-stage .scene{position:absolute;inset:0}
.home-stage .deco{inset:0}
.home-stage .rings{opacity:1}
.core{position:absolute;left:50%;top:50%;width:clamp(104px,14%,144px);aspect-ratio:1;translate:-50% -50%;transform:translateZ(calc(var(--z,40)*1px)) scale(calc(1 - var(--z,40)/var(--p)));border-radius:50%;background:radial-gradient(circle,rgba(5,7,20,.92) 55%,transparent 72%);box-shadow:0 0 90px 16px var(--glow1)}
.core i{position:absolute;inset:-4%;background:center/contain no-repeat}
.core .sw{background-image:var(--sw);animation:rot 22s linear infinite;filter:drop-shadow(0 0 14px rgba(125,99,255,.6))}
.core .lf{background-image:var(--lf);transform-origin:49% 41%;animation:br 5s ease-in-out infinite}
.core .inf{background-image:var(--inf);transform-origin:49% 68%;animation:gl 3.2s ease-in-out infinite}
.core.custom{background-size:cover;background-position:center}.core.custom i{display:none}
@keyframes br{50%{transform:scale(1.035)}}
@keyframes gl{50%{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(236,176,53,.95)) brightness(1.35)}}
.hcards{position:absolute;inset:0;display:grid;grid-template-columns:1fr clamp(120px,18%,170px) 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,3vh,32px) 0;transform-style:preserve-3d}
.hcard{position:relative;align-self:center;background:linear-gradient(160deg,var(--card),rgba(5,7,20,.92));border:1px solid var(--line2);border-radius:var(--radius);padding:14px;box-shadow:0 30px 50px -20px #000;transform:translateZ(calc(var(--z,60)*1px)) scale(calc(1 - var(--z,60)/var(--p)));animation:fl 7s ease-in-out infinite;transition:border-color .3s}
.hcard:hover{border-color:var(--accent)}
.hcard h4{margin:0 0 10px;font:700 13px var(--hf),sans-serif;display:flex;align-items:center;gap:8px}
.hcard h4::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--accent)}
.h1c{grid-area:1/1;--z:90;animation-delay:-1s}.h2c{grid-area:1/3;--z:50;animation-delay:-3s;border-top:2px solid var(--violet)}.h3c{grid-area:2/1;--z:70;animation-delay:-5s}.h4c{grid-area:2/3;--z:100;animation-delay:-2s}
.dots{display:flex;gap:5px;margin-bottom:10px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.ln{height:7px;border-radius:4px;background:var(--line2);margin:7px 0}.ln.a{background:var(--text);width:70%;height:9px}.ln.b{background:var(--accent);width:42%;height:9px}
.hcard pre{margin:0;font:500 11.5px/1.65 ui-monospace,Consolas,monospace;color:#9aa1dd;white-space:pre}
.k{color:var(--violet)}.s{color:var(--accent)}
.sws{display:flex;gap:8px;align-items:center}.sws i{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.14)}.sws b{margin-left:auto;font:800 26px var(--hf),sans-serif}
.bars{display:flex;align-items:flex-end;gap:7px;height:60px}
.bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(var(--violet),var(--purple));transform-origin:bottom;animation:grow 1.4s .5s cubic-bezier(.2,.8,.2,1) backwards}
.bars i:last-child{background:linear-gradient(var(--accent),var(--accent2))}
@keyframes grow{from{transform:scaleY(.05)}}
.up{margin-top:8px;font-size:12.5px;color:var(--muted)}.up b{color:var(--accent);font:800 17px var(--hf),sans-serif}
.toast{display:inline-block;margin-top:10px;background:var(--accent);color:var(--accent-text);font-weight:600;font-size:12px;padding:6px 12px;border-radius:99px}
/* content cards, tiles, 3D depth */
.card{width:var(--feat-w,100%);background:linear-gradient(160deg,var(--card),rgba(5,7,20,.92));border:1px solid var(--line2);border-top:3px solid var(--accent);border-radius:var(--radius);padding:16px 18px;box-shadow:0 30px 50px -22px #000;transform:translateZ(calc(var(--z,60)*1px)) scale(calc(1 - var(--z,60)/var(--p)));animation:fl 7s ease-in-out infinite}
.card .k{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent)}
.card h2{font:800 24px/1.12 var(--hf),sans-serif;margin:8px 0}
.card p{color:var(--muted);font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips span,.pill{font-size:12px;padding:5px 12px;border:1px solid var(--line2);border-radius:99px;color:var(--text);background:rgba(11,15,42,.5)}
.tiles,.projects,.rows,.steps{transform-style:preserve-3d}
.tiles{width:var(--serv-w,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:28px}
.tile{background:var(--card);border:1px solid var(--line2);border-radius:calc(var(--radius)*.75);padding:10px 12px;display:flex;gap:10px;align-items:flex-start;transform:translateZ(calc(var(--z,30)*1px)) scale(calc(1 - var(--z,30)/var(--p)));animation:fl 7s ease-in-out infinite;transition:border-color .3s}
.tile:nth-child(2n){--z:48;animation-delay:-2s}.tile:nth-child(3n){--z:22;animation-delay:-4s}.tile:nth-child(5n){animation-delay:-5s}
.tile:hover,.proj:hover{border-color:var(--accent)}
.tile.hl{border-top:3px solid var(--accent)}
.num{flex:none;width:24px;height:24px;background:var(--purple);color:var(--purple-text);font-size:11px;font-weight:500;border-radius:7px;display:flex;align-items:center;justify-content:center}
.tile b{display:block;font-size:13px}
.tile .d{display:block;font-size:12px;color:var(--muted)}
.steps{display:flex;gap:10px}
.step{flex:1;border-left:3px solid var(--accent);padding-left:10px;transform:translateZ(calc(var(--z,30)*1px)) scale(calc(1 - var(--z,30)/var(--p)))}
.step b{display:block;font-size:13px}
.step span{font-size:12px;color:var(--muted)}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:flex;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:9px 12px;font-size:13px;transform:translateZ(calc(var(--z,30)*1px)) scale(calc(1 - var(--z,30)/var(--p)))}
.row:nth-child(2n){--z:44}
.row span{color:var(--muted)}.row b{font-weight:600}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{font:inherit;font-size:12px;padding:5px 12px;border:1px solid var(--line2);border-radius:99px;background:transparent;color:var(--text);cursor:pointer;transition:.2s}
.filters button.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-text);border-color:transparent;font-weight:600}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.proj{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;display:block;cursor:pointer;transform:translateZ(calc(var(--z,30)*1px)) scale(calc(1 - var(--z,30)/var(--p)));animation:fl 7s ease-in-out infinite;transition:border-color .3s}
.proj:nth-child(2n){--z:48;animation-delay:-2s}.proj:nth-child(3n){--z:22;animation-delay:-4s}
.proj.hl{border-top:3px solid var(--accent)}
.thumb{min-height:66px;height:66px;background:var(--bg);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.ph{display:flex;gap:6px;padding:10px;align-items:flex-end}
.thumb.ph i{flex:1;background:var(--line2);height:85%;border-radius:4px}
.thumb.ph i:first-child{background:var(--purple);height:55%}
.proj .cap{padding:7px 10px 9px;border-top:1px solid var(--line2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px}
.proj b{display:block;font-size:13px}
.proj .c{font-size:11px;color:var(--muted)}
.proj-btn{flex:none;background:linear-gradient(135deg,var(--pcb-bg,var(--accent)),var(--accent2));color:var(--pcb-tx,var(--accent-text));font-size:11px;font-weight:700;padding:6px 12px;border-radius:99px}
.proj:hover .proj-btn{filter:brightness(1.12)}
.field{margin-bottom:9px}
.field label,.field .fl{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:var(--text);padding:8px 10px;font:inherit;font-size:13px}
.field textarea{resize:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-block;font-size:12px;padding:5px 12px;border:1px solid var(--line2);border-radius:99px;cursor:pointer}
.opt input:checked+span{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-text);border-color:transparent;font-weight:600}
.formfoot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.formfoot small{font-size:11px;color:var(--muted)}
.formfoot button{font:inherit;cursor:pointer}
.hp{position:absolute;left:-9999px}
.msg{background:var(--purple);color:var(--purple-text);font-size:12px;padding:8px 10px;border-radius:10px;margin-bottom:10px}
.strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding:14px 0}
.strip .label{margin:0 6px 0 0}
.strip .pill{transition:.2s}.strip .pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.strip .more{margin-left:auto;font-size:13px;color:var(--accent)}
.foot{width:var(--ftr-w,100%);margin:0 auto;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0;font-size:13px;color:var(--muted)}
.page-body{grid-template-columns:1fr;align-items:start}
.page-body .entry{max-width:760px;font-size:15px;color:var(--muted)}
/* portfolio popup */
.pm{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.pm[hidden]{display:none}
.pm-backdrop{position:absolute;inset:0;background:var(--pm-ov,rgba(0,0,0,.75))}
.pm-box{position:relative;display:flex;width:min(var(--pm-w,900px),100%);height:min(var(--pm-h,500px),100%);background:var(--pm-bg,var(--card));border:var(--pm-bw,1px) solid var(--pm-bd,var(--line2));border-top:3px solid var(--pm-top,var(--accent));border-radius:var(--pm-r,16px);overflow:hidden;animation:pmIn .25s ease}
@keyframes pmIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.pm-left{flex:0 0 var(--pm-lw,58%);display:flex;flex-direction:column;background:var(--pm-stage,var(--bg));min-width:0}
.pm-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.pm-stage img{width:100%;height:100%;object-fit:contain;display:block}
.pm-stage.empty img{display:none}
.pm-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.pm-prev{left:10px}.pm-next{right:10px}
.pm-thumbs{display:flex;gap:8px;padding:10px;overflow-x:auto}
.pm-thumbs button{flex:none;height:var(--pm-th,44px);padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:var(--bg);cursor:pointer;opacity:.7}
.pm-thumbs button.on{border-color:var(--accent);opacity:1}
.pm-thumbs img{height:100%;width:auto;display:block}
.pm-right{flex:1;min-width:0;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:auto}
.pm-cat{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pm-box h3{font:800 26px/1.15 var(--hf),sans-serif;margin-bottom:12px}
.pm-desc{color:var(--muted);font-size:15px;margin-bottom:20px;white-space:pre-line}
.pm-x{position:absolute;top:8px;right:10px;z-index:3;width:32px;height:32px;border:0;background:transparent;color:var(--pm-xc,#fff);font-size:26px;line-height:1;cursor:pointer}
body.pm-open{overflow:hidden}
@media(min-width:981px){html,body{overflow:hidden;height:100%}body{height:100vh;height:100dvh}.wrap{height:100vh;height:100dvh;min-height:0}.main{min-height:0}.main>section{min-height:0}.page-body{overflow-y:auto}}
@media(max-width:980px){.main{grid-template-columns:1fr}.home-stage{height:520px;max-height:none;margin-top:20px}.top{flex-direction:column;align-items:flex-start;gap:12px}.nav-wrap{flex-wrap:wrap}.nav{flex-wrap:wrap}.foot{flex-direction:column;gap:4px}.steps{flex-direction:column}.logo img,.logo .custom-logo{max-width:100%!important}.pm-box{flex-direction:column}.pm-left{flex:0 0 45%}.scene{transform:none!important}}
@media(max-width:520px){.tiles,.projects,.two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.w{opacity:1;transform:none}}
.dg-static *{animation:none!important}.dg-static .w{opacity:1;transform:none}


/* Blog page and article layouts */
.blog-main{grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);align-items:start;gap:42px}
.blog-intro{position:sticky;top:24px;padding-top:18px}.blog-intro h1{font-size:min(var(--h1,56px),7.6vh);line-height:1.02}.blog-intro h1 em{display:block}
.blog-note{display:flex;align-items:center;gap:10px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.blog-note-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.blog-content{min-width:0;max-height:calc(100vh - 150px);overflow:auto;padding:8px 5px 24px 0;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.blog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.blog-heading .label{margin:0}.blog-count{font-size:11px;color:var(--muted)}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.blog-card{min-width:0;overflow:hidden;background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);transition:transform .25s,border-color .25s}.blog-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.blog-thumb{height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,rgba(74,44,220,.28),rgba(236,176,53,.12)),var(--bg);border-bottom:1px solid var(--line)}.blog-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s}.blog-card:hover .blog-thumb img{transform:scale(1.04)}
.blog-thumb-mark{font:800 42px var(--hf),sans-serif;letter-spacing:-.08em;color:var(--text);opacity:.8}.blog-thumb-mark span{color:var(--accent)}.blog-card-body{padding:14px}
.blog-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:10px}.blog-category{padding:3px 8px;border:1px solid var(--line2);border-radius:99px;color:var(--accent)}
.blog-card h2{font:700 18px/1.2 var(--hf),sans-serif;margin:10px 0 7px}.blog-card h2 a:hover{color:var(--accent)}.blog-card p{font-size:12px;line-height:1.55;color:var(--muted);margin-bottom:13px}.blog-read{font-size:11px;font-weight:700;color:var(--accent)}.blog-read span{margin-left:5px}
.blog-pagination{display:flex;justify-content:center;gap:8px;padding:22px 0}.blog-pagination .page-numbers{padding:7px 12px;border:1px solid var(--line2);border-radius:99px;font-size:12px}.blog-pagination .current{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.blog-empty{padding:35px 28px;background:var(--card);border:1px solid var(--line2);border-top:3px solid var(--accent);border-radius:var(--radius)}.blog-empty h2{font:800 25px/1.1 var(--hf),sans-serif;margin:12px 0}.blog-empty p{font-size:13px;color:var(--muted);margin-bottom:18px}
.single-main{display:block;overflow:auto}.single-article{max-width:850px;margin:0 auto;padding:12px 0 50px}.blog-back{display:inline-block;color:var(--accent);font-size:12px;font-weight:600;margin-bottom:22px}.single-meta{margin-bottom:12px}.single-article h1{font-size:clamp(24px,3.6vw,38px);line-height:1.15;letter-spacing:-.02em;margin:0 0 22px}
.single-featured{max-height:440px;overflow:hidden;border:1px solid var(--line2);border-radius:var(--radius);margin-bottom:28px}.single-featured img{width:100%;height:100%;max-height:440px;object-fit:cover;display:block}.single-content{color:var(--muted);font-size:16px;line-height:1.8}.single-content h2,.single-content h3{font-family:var(--hf);color:var(--text);line-height:1.25;margin:26px 0 10px}.single-content h2{font-size:clamp(20px,2.6vw,26px)}.single-content h3{font-size:clamp(17px,2.2vw,21px)}.single-content p,.single-content ul,.single-content ol{margin-bottom:18px}.single-content a{color:var(--accent);text-decoration:underline}.single-content img{height:auto;border-radius:12px}
.single-end{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:36px;padding:18px;border:1px solid var(--line2);border-radius:12px;color:var(--muted);font-size:13px}.single-end a{color:var(--accent);font-weight:700}
@media(max-width:980px){.blog-main{grid-template-columns:1fr;gap:20px}.blog-intro{position:static}.blog-content{max-height:none;overflow:visible}.blog-note{margin-top:20px}.single-main{display:block}}
@media(max-width:520px){.blog-grid{grid-template-columns:1fr}.blog-thumb{height:180px}.blog-card h2{font-size:20px}}


/* ===== Responsive pass ===== */
.nav-toggle{display:none}
.single-content{overflow-wrap:anywhere}.single-content iframe,.single-content video,.single-content table{max-width:100%}.single-content table{display:block;overflow-x:auto}.single-content pre{overflow-x:auto;max-width:100%}.single-content figure,.single-content .wp-block-image{max-width:100%}
@media(max-width:1100px){.nav a{padding:8px 10px;font-size:14px}.nav-cta{padding:9px 16px;margin-left:4px;font-size:14px}.nav{gap:2px}}
@media(max-width:980px){
  body{background-attachment:scroll}
  .wrap{padding:0 18px}
  .top{position:relative;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
  .logo img,.logo .custom-logo{width:min(var(--logo-w,150px),130px)!important}
  .mark{width:38px;height:38px}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:1px solid var(--line2);border-radius:12px;background:rgba(11,15,42,.7);cursor:pointer;flex:none;z-index:60}
  .nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:.25s}
  .top.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .top.open .nav-toggle span:nth-child(2){opacity:0}
  .top.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-wrap{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;padding:12px;background:rgba(8,11,32,.97);border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto}
  .top.open .nav-wrap{display:flex}
  .nav{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px}
  .nav a{padding:13px 14px;font-size:16px;border-radius:12px}
  .nav-cta{margin:6px 0 0;text-align:center;padding:14px 20px;font-size:16px}
  .main{gap:22px;padding:18px 0 28px;align-items:start}
  h1{font-size:min(var(--h1,56px),max(30px,9vw));line-height:1.05;margin:16px 0 12px}
  .blog-intro h1{font-size:min(var(--h1,56px),max(30px,9vw))}
  .lead{font-size:16px;max-width:none}
  .home-stage{height:440px;margin-top:8px}
  .stats{gap:28px;flex-wrap:wrap;max-width:none}
  .card h2{font-size:21px}.card p{font-size:15px}
  .label,.card .k,.pm-cat{font-size:12px}
  .tile b,.step b,.proj b{font-size:14px}.tile .d,.step span,.proj .c{font-size:13px}
  .chips span,.pill,.filters button,.opt span{font-size:13px}
  .btn{font-size:15px;padding:13px 22px}
  .field label,.field .fl{font-size:13px}
  .field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{font-size:16px;padding:11px 12px}
  .formfoot small,.blog-count,.blog-note{font-size:13px}
  .blog-meta{font-size:12px}
  .blog-card h2{font-size:20px}.blog-card p{font-size:14px}.blog-read{font-size:13px}
  .blog-pagination{flex-wrap:wrap}
  .foot{font-size:13px;text-align:center;align-items:center}
  .page-body .entry{font-size:16px}
  .single-main{overflow:visible}
  .single-article{padding:6px 0 36px}
  .single-featured{max-height:300px}.single-featured img{max-height:300px}
  .single-content{font-size:16px;line-height:1.75}
  .single-end{font-size:14px}
  .pm-box{max-height:92vh;max-height:92dvh;overflow-y:auto}
}
@media(max-width:640px){
  .home-stage{height:400px}
  .hcards{grid-template-columns:1fr 90px 1fr}
  .single-featured{max-height:220px;border-radius:12px}.single-featured img{max-height:220px}
  .single-article h1{font-size:clamp(22px,6.2vw,28px)}
  .single-content{font-size:15.5px}
  .single-end{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .wrap{padding:0 14px}
  .stats{gap:20px}.stat b{font-size:26px}
  .btns .btn{flex:1 1 100%}
  .blog-thumb{height:170px}
}
@media(max-width:360px){
  .home-stage{height:360px}
  .nav-toggle{width:40px;height:40px}
  .logo{font-size:15px}
}
@media(min-width:1600px){html{font-size:106%}}

/* ===== Blog list: 3 columns, no excerpt, slimmer intro column ===== */
.blog-main{grid-template-columns:minmax(210px,.46fr) minmax(0,1.54fr);gap:32px}
.blog-intro h1{font-size:min(40px,6.4vh);line-height:1.05;margin:16px 0 12px}
.blog-intro .lead{font-size:14px;max-width:none}
.blog-note{margin-top:22px}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.blog-thumb{height:120px}
.blog-card-body{padding:12px}
.blog-card h2{font-size:16px;margin:8px 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.blog-main{grid-template-columns:1fr}.blog-intro h1{font-size:min(40px,max(30px,9vw))}.blog-intro .lead{font-size:16px}.blog-thumb{height:150px}.blog-card h2{font-size:18px}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-thumb{height:180px}.blog-card h2{font-size:19px}}

/* ===== Mobile/tablet: flatten the home stage so cards never clip or overlap the logo ===== */
@media(max-width:980px){
  .home-stage,.home-stage[class]{height:auto!important;max-height:none!important;margin-top:8px}
  .home-stage .scene{position:relative;inset:auto;transform:none!important;display:flex;flex-direction:column;align-items:center;gap:20px}
  .home-stage .deco{display:none}
  .home-stage .core{position:relative;left:auto;top:auto;translate:none;transform:none;width:120px;flex:none;margin:4px auto 0}
  .hcards{position:relative;inset:auto;width:100%;transform:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px}
  .hcard{transform:none;animation:none;min-width:0;overflow:hidden;align-self:stretch;padding:14px}
  .h1c,.h2c,.h3c,.h4c{grid-area:auto}
  .hcard h4{font-size:14px}
  .hcard pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11.5px}
  .toast{font-size:13px}
  .card{transform:none;animation:none}
}
@media(max-width:520px){.hcards{grid-template-columns:1fr}.home-stage .core{width:104px}}

/* ===== Hero slideshow ===== */
.slides{position:relative;--dir:1;--k:0;--ms:6000ms}
.sl-glow{position:absolute;left:-90px;top:-50px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 66%);filter:blur(24px);opacity:.75;pointer-events:none;z-index:-1;transform:translate(calc(var(--k)*34px),calc(var(--k)*-12px)) scale(calc(1 + var(--k)*.1));transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.sl-track{display:grid;touch-action:pan-y}
.slide{grid-area:1/1;position:relative;visibility:hidden;transition:visibility 0s .95s;min-width:0}
.slide.is-active,.slide.is-leaving{visibility:visible;transition-delay:0s}
.slide:not(.is-active){pointer-events:none;user-select:none}
.slide>*{position:relative;z-index:1}
.slide .badge{clip-path:inset(-12px 100% -12px -12px);transition:clip-path .7s cubic-bezier(.2,.8,.2,1)}
.slide.is-active .badge{clip-path:inset(-12px -12px -12px -12px);transition-delay:.15s}
.slide.is-leaving .badge{clip-path:inset(-12px -12px -12px 100%);transition-duration:.4s;transition-delay:0s}
.slide h1{perspective:700px}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .05em .16em;margin:-.1em -.05em -.16em}
.sw>span{display:inline-block;opacity:0;transform:translateY(calc(112%*var(--dir))) rotate(calc(5deg*var(--dir)));transform-origin:0 100%;transition:transform .95s cubic-bezier(.2,.8,.2,1),opacity .5s;transition-delay:calc(var(--i)*70ms + .22s)}
.slide.is-active .sw>span{opacity:1;transform:none}
.slide.is-leaving .sw>span{opacity:0;transform:translateY(calc(-112%*var(--dir))) rotate(calc(-4deg*var(--dir)));transition-duration:.5s,.35s;transition-delay:calc(var(--i)*28ms)}
.sw.acc>span{background:linear-gradient(95deg,#ffe3a1,var(--accent) 45%,var(--violet));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s ease-in-out infinite alternate}
.slide .lead{opacity:0;filter:blur(6px);transform:translateY(calc(16px*var(--dir)));transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1),filter .7s}
.slide.is-active .lead{opacity:1;filter:none;transform:none;transition-delay:.55s}
.slide.is-leaving .lead{opacity:0;transition-duration:.3s;transition-delay:0s}
.sl-ctrl{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}
.slides.single .sl-ctrl{display:none}
.sl-nav{display:flex;align-items:center;gap:8px;flex:none}
.sl-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;background:rgba(11,15,42,.6);color:var(--text);cursor:pointer;transition:.25s;padding:0}
.sl-btn:hover{border-color:var(--violet);background:rgba(125,99,255,.2);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.slide *,.slide{transition-duration:.01s!important;transition-delay:0s!important}.sl-glow{transition:none}}
.dg-static .slide *,.dg-static .slide{transition-duration:.01s!important;transition-delay:0s!important}

.sl-tabs{display:flex;gap:8px;flex:1;min-width:0}
.sl-tab{flex:1 1 0;min-width:0;padding:10px 0 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--muted);font:500 11px/1.2 var(--bf),sans-serif;position:relative}
.sl-tab::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--line)}
.sl-tab i{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sl-tab.done i{transform:none}
.sl-tab.is-on i{animation:slfill var(--ms) linear forwards}
.sl-tab span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.55;transition:opacity .3s,color .3s}
.sl-tab:hover span,.sl-tab.is-on span{opacity:1}
.sl-tab.is-on span{color:var(--text)}
.sl-tab:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
@keyframes slfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slides.paused .sl-tab.is-on i{animation-play-state:paused}
.slides.manual .sl-tab.is-on i{animation:none;transform:none}
.slides.many .sl-tab span{display:none}
.slides.many .sl-tab{padding-top:14px}
.sl-count{font:500 12px/1 var(--bf),sans-serif;color:var(--muted);min-width:46px;text-align:center;letter-spacing:.04em}
.sl-count b{color:var(--text);font-weight:700}
@media(max-width:520px){.sl-tab span{display:none}.sl-tab{padding-top:14px}.sl-ctrl{gap:12px}}

/* Keep section labels in front of the floating 3D cards (cards sit at translateZ 22-60px and bob up 10px) */
.stack>.label{position:relative;transform:translateZ(calc(var(--z,75)*1px)) scale(calc(1 - var(--z,75)/var(--p)));margin-bottom:20px;pointer-events:none}
@media(max-width:980px){.stack>.label{transform:none;margin-bottom:10px}}

/* Services that open in the popup */
a.tile{color:inherit;text-decoration:none;cursor:pointer}
.tile .go{margin-left:auto;align-self:center;flex:none;color:var(--accent);font-size:14px;opacity:.55;transition:opacity .25s,transform .25s}
.tile.has-pm:hover .go,.tile.has-pm:focus-visible .go{opacity:1;transform:translate(2px,-2px)}

/* ===== Pricing page: full-width packages, notes and extras ===== */
.price-main{grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.price-main>.price-content{grid-column:1/-1;width:100%;max-width:none}
.price-content{min-width:0;max-height:calc(100vh - 150px);overflow:auto;padding:26px 8px 24px 8px;margin:-18px -8px 0 -8px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.price-content>.label:first-child{margin-bottom:22px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 16px 16px;background:linear-gradient(160deg,var(--card),rgba(5,7,20,.92));border:1px solid var(--line2);border-top:3px solid var(--violet);border-radius:var(--radius);transition:transform .25s,border-color .25s,box-shadow .25s}
.plan:hover{transform:translateY(-4px);border-color:var(--violet)}
.plan.hl{border-color:var(--accent);border-top-width:3px;background:linear-gradient(160deg,rgba(236,176,53,.1),var(--card) 38%,rgba(5,7,20,.92));box-shadow:0 0 0 1px var(--accent),0 26px 60px -28px var(--accent);transform:translateY(-8px)}
.plan.hl:hover{transform:translateY(-12px);border-color:var(--accent)}
.plan-tag{position:absolute;top:-13px;left:16px;padding:4px 12px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-text);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}
.plan .who{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent)}
.plan h2{font:800 22px/1.12 var(--hf),sans-serif;margin:8px 0 4px}
.plan .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font:800 20px/1.2 var(--hf),sans-serif;letter-spacing:-.02em;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.plan .price small{font:700 11px var(--bf),sans-serif;letter-spacing:.1em;color:var(--muted)}
.plan .pdesc{font-size:12px;line-height:1.55;color:var(--muted)}
.plan .label.sub{margin:16px 0 6px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.plan li{position:relative;padding-left:20px;font-size:12px;line-height:1.4;color:var(--text)}
.plan li::before{content:"";position:absolute;left:1px;top:.22em;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;width:100%;padding:11px 16px;font-size:13px}
.price-content>.label.sub{margin-top:26px}
.price-notes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.price-notes li,.price-addsub{position:relative;padding-left:16px;font-size:12px;line-height:1.5;color:var(--muted)}
.price-notes li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.price-addsub{padding-left:0;margin:-4px 0 10px}
.price-add{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:8px}
.price-add .tile{transform:none;animation:none;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px}
.price-add .tile>div{display:flex;flex:1;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.price-add .tile .d{flex:none;text-align:right;color:var(--accent)}
@media(min-width:981px){.price-main{grid-template-rows:minmax(0,1fr);align-items:stretch}.price-content{width:100%}}
@media(max-width:1100px){.price-notes{grid-template-columns:1fr}}
@media(max-width:980px){.price-main{grid-template-columns:1fr;gap:0}.price-content{max-height:none;overflow:visible;margin:0;padding:22px 0 8px}.plan{transform:none!important}.plan h2{font-size:22px}.plan .pdesc,.plan li,.price-notes li,.price-addsub{font-size:14px}.plan .who{font-size:12px}.plan .btn{font-size:15px;padding:13px 18px}}
@media(max-width:820px){.plans{grid-template-columns:1fr;gap:22px}}
@media(max-width:520px){.price-add{grid-template-columns:1fr}.price-add .tile .d{font-size:13px}}
@media(prefers-reduced-motion:reduce){.plan,.plan:hover{transition:none}}


/* ===== Pricing layout repair: force the pricing area to use the full content width ===== */
@media (min-width: 981px) {
  .wrap > main.main.price-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .wrap > main.main.price-main > section.price-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .price-content .plans {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .wrap > main.main.price-main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .wrap > main.main.price-main > section.price-content {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Crisp text: while the scene is flat (page load, mouse idle, touch, tilt off) the cards drop their 3D depth and float animation.
   Layers with translateZ/scale/animated translate are rasterised and resampled by the browser, which makes text soft. */
.scene.is-flat{transform:none}
.scene.is-flat :is(.hcard,.card,.tile,.step,.row,.proj,.stack>.label){transform:none;animation:none}