/* Kingsgrove Systems and Marketing Solutions — brand: Kingsgrove plum + green (same family as Kingsgrove Accounting) */
:root{
  --ink:#25102c;--ink2:#321a3a;--ink3:#43244d;
  --plum:#59315f;
  --coral:#9bd05b;--coral-d:#4b7a1c;--coral-soft:#e9f4d8;
  --cream:#fbf4ee;--paper:#ffffff;--line:#eadfd6;--line-d:rgba(255,255,255,.12);
  --text:#2b1d30;--muted:#6f6277;--muted-d:#b9aac1;
  --lime:#b7e36a;
  --r:20px;--r-s:12px;
  --shadow:0 24px 60px -24px rgba(37,16,44,.35);
  --disp:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;font-size:17px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.sec{padding:104px 0}
.sec.tight{padding:72px 0}
.cream{background:var(--cream)}.ink{background:var(--ink);color:#fff}.ink2{background:var(--ink2);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-d)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--coral)}
.ink .eyebrow,.ink2 .eyebrow{color:var(--coral)}
h2.t{font-size:clamp(2rem,4.2vw,3.3rem);margin:14px 0 18px}
.lead{font-size:1.15rem;color:var(--muted);max-width:640px}
.ink .lead,.ink2 .lead{color:var(--muted-d)}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.acc{color:var(--coral)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:1rem;transition:transform .2s,box-shadow .2s,background .2s,color .2s;white-space:nowrap}
.btn.p{background:var(--coral);color:var(--ink);box-shadow:0 10px 26px -10px rgba(155,208,91,.55)}
.btn.p:hover{transform:translateY(-2px);background:#aedc73;box-shadow:0 16px 30px -10px rgba(155,208,91,.7)}
.btn.g{border:2px solid rgba(255,255,255,.28);color:#fff}
.btn.g:hover{border-color:var(--coral);color:var(--coral)}
.btn.d{border:2px solid var(--ink);color:var(--ink)}
.btn.d:hover{background:var(--ink);color:#fff}
.btn svg{width:18px;height:18px;transition:transform .2s}.btn:hover svg{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;color:var(--coral-d)}
.link svg{width:18px;height:18px;transition:transform .2s}.link:hover svg{transform:translateX(3px)}.link:hover{gap:12px}.ink .link,.ink2 .link{color:var(--coral)}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hdr.s{border-color:var(--line-d);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{width:44px;height:44px;flex:none}
.logo b{display:block;font-family:var(--disp);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;line-height:1.05}
.logo small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-top:2px}
.nav{display:flex;align-items:center;gap:6px}
.nav a.l{padding:10px 16px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:.97rem;color:#e9dff0;transition:background .2s,color .2s}
.nav a.l:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.l.on{color:var(--coral)}
.nav .btn{padding:11px 22px;margin-left:8px;font-size:.95rem}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-d);align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.mnav{display:none}

/* hero */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:72px 0 96px}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.4px);background-size:28px 28px;mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-d);background:rgba(255,255,255,.05);padding:8px 16px;border-radius:999px;font-size:.88rem;color:#e9dff0}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(183,227,106,.2)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.7rem);margin:22px 0 22px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero p.lead{font-size:1.2rem}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:38px;color:var(--muted-d);font-size:.93rem}
.hero .meta span{display:flex;align-items:center;gap:9px}
.hero .meta svg{width:18px;height:18px;color:var(--coral)}
.stage{position:relative;height:520px}
.stage .disc{position:absolute;right:-4%;top:6%;width:430px;height:430px;border-radius:50%;background:var(--plum)}
.laptop{position:absolute;right:0;top:56px;width:min(560px,96%);transform:rotate(-2deg);transition:transform .25s ease-out}
.lap-s{background:#0d0712;border:10px solid #0d0712;border-radius:16px 16px 4px 4px;box-shadow:var(--shadow)}
.lap-s img{border-radius:6px;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.lap-b{height:14px;margin:0 -7%;background:linear-gradient(#cfc4d6,#9a8ba4);border-radius:0 0 18px 18px}
.phone{position:absolute;left:3%;bottom:-6px;width:186px;transform:rotate(4deg);transition:transform .25s ease-out;z-index:3}
.ph-s{border:8px solid #0d0712;border-radius:34px;background:#0d0712;overflow:hidden;box-shadow:var(--shadow);position:relative}
.ph-s::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:54px;height:15px;background:#0d0712;border-radius:10px;z-index:2}
.ph-s img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top}
.chip{position:absolute;z-index:4;background:#fff;color:var(--ink);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);font-size:.85rem;animation:bob 6s ease-in-out infinite}
.chip b{display:block;font-family:var(--disp);font-size:1.25rem;line-height:1.1}
.chip small{color:var(--muted);font-size:.74rem;letter-spacing:.04em}
.chip.c1{right:-1%;top:0;animation-delay:-2s}
.chip.c2{left:26%;bottom:34px;animation-delay:-4s}
.chip .up{color:#2a8a3b;font-weight:700}
@keyframes bob{50%{transform:translateY(-10px)}}

/* partner strip */
.strip{background:var(--coral);color:var(--ink);overflow:hidden;padding:15px 0;white-space:nowrap}
.strip .mq{display:inline-flex;gap:44px;animation:mq 38s linear infinite;font-family:var(--disp);font-weight:800;font-size:1.05rem}
.strip .mq span{display:inline-flex;align-items:center;gap:44px}
.strip .mq span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.pc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pc .ic{width:58px;height:58px;border-radius:16px;background:var(--coral-soft);color:var(--coral-d);display:grid;place-items:center;margin-bottom:24px}
.pc .ic svg{width:28px;height:28px}
.pc h3{font-size:1.55rem;margin-bottom:12px}
.pc p{color:var(--muted);flex:1}
.pc ul{list-style:none;margin:20px 0 26px;display:grid;gap:9px;font-size:.96rem}
.pc li{display:flex;gap:10px;align-items:flex-start}
.pc li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325102c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.pc.big{background:var(--ink);color:#fff;border-color:var(--ink)}
.pc.big .ic{background:var(--coral);color:var(--ink)}
.pc.big p{color:var(--muted-d)}
.pc .tag{align-self:flex-start;background:var(--coral);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:18px}

/* browser frame + software viewer */
.bf{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.1)}
.bf-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#efe7f2}
.bf-bar i{width:11px;height:11px;border-radius:50%;background:#d6c9db}
.bf-bar i:nth-child(1){background:#ff7a66}.bf-bar i:nth-child(2){background:#ffc65a}.bf-bar i:nth-child(3){background:#6fcf7c}
.bf-bar span{margin-left:12px;flex:1;background:#fff;border-radius:99px;padding:3px 14px;font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:opacity .35s}
.sw{display:grid;grid-template-columns:.9fr 1.25fr;gap:60px;align-items:center}
.sw ul.ck{list-style:none;margin:26px 0 34px;display:grid;gap:14px}
.ck li{display:flex;gap:14px;align-items:flex-start}
.ck li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325102c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:2px}
.ck li b{color:#fff}.cream .ck li b,.paper .ck li b{color:var(--ink)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tabs button{padding:10px 18px;border-radius:999px;border:1px solid var(--line-d);color:#e9dff0;font-family:var(--disp);font-weight:700;font-size:.9rem;transition:.2s}
.tabs button:hover{border-color:var(--coral)}
.tabs button[aria-selected=true]{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.cap{margin-top:16px;color:var(--muted-d);font-size:.9rem;min-height:3em}
.fine{font-size:.8rem;color:var(--muted-d);margin-top:10px}

/* own it band */
.own{background:var(--coral);color:var(--ink);padding:88px 0}
.own h2{font-size:clamp(2.2rem,5.4vw,4.4rem);max-width:900px}
.own .row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.own .it{border-top:3px solid var(--ink);padding-top:18px}
.own .it b{font-family:var(--disp);font-size:1.3rem;display:block;margin-bottom:6px}
.own .it p{font-size:1rem;opacity:.85}

/* dashboard */
.dash{background:var(--ink);border-radius:24px;padding:22px;color:#fff;box-shadow:var(--shadow);border:1px solid var(--line-d)}
.dash-top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:20px}
.seg{display:inline-flex;background:rgba(255,255,255,.07);border-radius:999px;padding:4px}
.seg button{padding:9px 18px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:.9rem;color:#d9cce1;transition:.2s}
.seg button[aria-selected=true]{background:var(--coral);color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:rgba(255,255,255,.06);border-radius:16px;padding:16px 18px}
.kpi small{display:block;color:var(--muted-d);font-size:.78rem;letter-spacing:.04em}
.kpi b{display:block;font-family:var(--disp);font-size:1.7rem;margin:4px 0 2px;letter-spacing:-.02em}
.kpi em{font-style:normal;font-size:.8rem;font-weight:700}
.kpi em.u{color:var(--lime)}.kpi em.dn{color:#ff9d8a}
.chart{margin-top:14px;background:rgba(255,255,255,.04);border-radius:16px;padding:16px 16px 8px}
.chart-h{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted-d);margin-bottom:6px}
.chart-h span i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart svg{width:100%;height:190px;display:block}
.camps{margin-top:14px;display:grid;gap:8px}
.camp{display:grid;grid-template-columns:1.4fr 1fr .8fr .8fr;gap:12px;align-items:center;background:rgba(255,255,255,.04);border-radius:12px;padding:12px 16px;font-size:.9rem}
.camp.hd{background:none;color:var(--muted-d);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 16px}
.camp .bar{height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.camp .bar i{display:block;height:100%;background:var(--coral);border-radius:8px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.dash .note{margin-top:14px;font-size:.78rem;color:var(--muted-d);display:flex;gap:8px;align-items:center}
.dash .note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}

/* web cards */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:56px}
.wk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.wk:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.wk .shot{position:relative;background:var(--cream);padding:22px 22px 0;overflow:hidden}
.wk .shot .d{border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 12px 30px -14px rgba(37,16,44,.5);border:1px solid var(--line);border-bottom:0}
.wk .shot .d img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform 1.4s ease}
.wk:hover .shot .d img{transform:scale(1.04)}
.wk .shot .m{position:absolute;right:30px;bottom:-34px;width:84px;border:5px solid #0d0712;border-radius:18px;overflow:hidden;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:transform .4s}
.wk:hover .shot .m{transform:translateY(-12px)}
.wk .shot .m img{aspect-ratio:390/844;object-fit:cover;object-position:top;width:100%}
.wk .bd{padding:24px 26px 28px}
.wk .tg{font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--coral-d)}
.wk h3{font-size:1.4rem;margin:6px 0 8px}
.wk p{color:var(--muted);font-size:.96rem;margin-bottom:16px;flex:1}
.wk .link{font-size:.95rem}
.soon{display:inline-block;background:var(--coral-soft);color:var(--coral-d);font-family:var(--disp);font-weight:700;font-size:.78rem;padding:4px 12px;border-radius:99px}

/* big portfolio rows */
.prow{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0}
.prow.rev .vis{order:2}
.vis{position:relative;padding-bottom:30px}
.vis .bf{border-color:var(--line);box-shadow:var(--shadow)}
.vis .bf-bar{background:#f1e9f4}
.vis .mm{position:absolute;right:-14px;bottom:0;width:130px;border:7px solid #0d0712;border-radius:26px;overflow:hidden;box-shadow:0 20px 40px -12px rgba(37,16,44,.5)}
.prow.rev .vis .mm{right:auto;left:-14px}
.vis .mm img{aspect-ratio:390/844;object-fit:cover;object-position:top;width:100%}
.prow h3{font-size:2rem;margin:8px 0 14px}
.prow p{color:var(--muted);margin-bottom:14px}
.prow ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.prow li{background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:.86rem;font-weight:500}

/* feature grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px}
.fc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.ink .fc,.ink2 .fc{background:rgba(255,255,255,.05);border-color:var(--line-d)}
.fc .ic{width:50px;height:50px;border-radius:14px;background:var(--coral-soft);color:var(--coral-d);display:grid;place-items:center;margin-bottom:18px}
.ink .fc .ic,.ink2 .fc .ic{background:rgba(155,208,91,.16);color:var(--coral)}
.fc .ic svg{width:25px;height:25px}
.fc h3{font-size:1.25rem;margin-bottom:8px}
.fc p{color:var(--muted);font-size:.97rem}
.ink .fc p,.ink2 .fc p{color:var(--muted-d)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;counter-reset:s}
.st{position:relative;padding-top:30px;border-top:3px solid var(--ink)}
.st::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-1px;left:0;transform:translateY(-100%);font-family:var(--disp);font-weight:800;font-size:.95rem;color:var(--coral-d);padding-bottom:10px}
.st h3{font-size:1.35rem;margin-bottom:8px}
.st p{color:var(--muted);font-size:.97rem}
.ink .st,.ink2 .st{border-color:var(--coral)}.ink .st p,.ink2 .st p{color:var(--muted-d)}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:56px}
.tm{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.tm .ph{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--coral)}
.tm .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.tm .ph.mono{display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:5.5rem;color:var(--ink)}
.tm h3{font-size:1.6rem}
.tm .role{color:var(--coral-d);font-family:var(--disp);font-weight:700;margin:4px 0 12px}
.tm p{color:var(--muted);font-size:.97rem}

/* faq */
.faq{display:grid;gap:12px;margin-top:44px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 24px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;padding:20px 0;font-family:var(--disp);font-weight:700;font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--coral-soft);color:var(--coral-d);display:grid;place-items:center;font-size:1.3rem;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--muted)}

/* cta + form */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.form{background:#fff;color:var(--text);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.form h3{font-size:1.5rem;margin-bottom:6px}
.form .sub{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.fld{margin-bottom:14px}
.fld label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);font:inherit;background:var(--cream);color:var(--text);transition:border-color .2s,background .2s}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--coral);background:#fff}
.fld.bad input,.fld.bad select{border-color:#d93a3a}
.err{display:none;color:#c22;font-size:.82rem;margin-top:5px}.fld.bad .err{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .tiny{font-size:.8rem;color:var(--muted);margin-top:12px;text-align:center}
.contact-list{list-style:none;display:grid;gap:16px;margin-top:30px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list .ic{flex:none;width:46px;height:46px;border-radius:14px;background:rgba(155,208,91,.16);color:var(--coral);display:grid;place-items:center}
.contact-list .ic svg{width:22px;height:22px}
.contact-list b{display:block;color:#fff}.contact-list span{color:var(--muted-d);font-size:.95rem}

/* page hero (inner) */
.ph-hero{background:var(--ink);color:#fff;padding:84px 0 88px;position:relative;overflow:hidden}
.ph-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.4px);background-size:28px 28px;mask-image:linear-gradient(#000 30%,transparent);-webkit-mask-image:linear-gradient(#000 30%,transparent)}
.ph-hero .wrap{position:relative}
.ph-hero h1{font-size:clamp(2.4rem,5.4vw,4.3rem);margin:18px 0 20px;max-width:900px}
.ph-hero h1 em{font-style:normal;color:var(--coral)}
.ph-hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* footer */
.ftr{background:var(--ink);color:#d9cce1;padding:76px 0 30px;border-top:1px solid var(--line-d)}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
.ftr h4{font-family:var(--disp);color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:0}
.ftr ul{list-style:none;display:grid;gap:10px;font-size:.95rem}
.ftr a:hover{color:var(--coral)}
.ftr .about{max-width:340px;font-size:.95rem;margin-top:18px;color:var(--muted-d)}
.ftr .partner{display:inline-flex;align-items:center;gap:10px;margin-top:20px;border:1px solid var(--line-d);border-radius:999px;padding:8px 16px;font-size:.84rem}
.ftr .partner b{color:#fff}
.ftr .bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--muted-d)}

/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}

/* thank-you */
.ty{min-height:70vh;display:grid;place-items:center;text-align:center}
.ty .ok{width:84px;height:84px;border-radius:50%;background:var(--coral);display:grid;place-items:center;margin:0 auto 26px}
.ty .ok svg{width:40px;height:40px;color:var(--ink)}

/* legal */
.legal h2{font-size:1.5rem;margin:34px 0 10px}
.legal p,.legal li{color:var(--muted);margin-bottom:10px}
.legal ul{padding-left:22px}

/* responsive */
.sw>*,.cta>*,.prow>*,.hero .wrap>*,.team>*,.tm>*{min-width:0}
@media(max-width:1040px){
  .hero .wrap,.sw,.cta,.prow{grid-template-columns:1fr!important;gap:44px}
  .prow.rev .vis{order:0}
  .stage{height:480px;max-width:560px;margin:0 auto;width:100%}
  .pillars,.grid3,.work{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .team{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav{display:none}.burger{display:flex}
  .mnav{display:block;position:fixed;inset:78px 0 0 0;background:var(--ink);padding:26px 24px 40px;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s;z-index:59}
  .mnav.open{opacity:1;visibility:visible;transform:none}
  .mnav a.l{display:block;color:#fff;padding:18px 4px;border-bottom:1px solid var(--line-d);font-family:var(--disp);font-weight:700;font-size:1.35rem}
  .mnav .btn{margin-top:26px;width:100%;justify-content:center}
  body.lock{overflow:hidden}
}
@media(max-width:700px){
  body{font-size:16px}
  .sec{padding:72px 0}.hero{padding:48px 0 70px}
  .pillars,.grid3,.grid2,.work,.own .row,.steps,.frow{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .camp{grid-template-columns:1.3fr 1fr .7fr;}.camp>:nth-child(4){display:none}
  .tm{grid-template-columns:1fr}.tm .ph{max-width:220px}
  .stage{height:410px}
  .stage .disc{width:300px;height:300px;right:-10%}
  .phone{width:128px}.chip{font-size:.74rem;padding:9px 12px}.chip b{font-size:1rem}.chip.c2{left:36%;bottom:20px}
  .ftr .cols{grid-template-columns:1fr}
  .vis .mm{width:96px;right:-6px}.prow.rev .vis .mm{left:-6px}
  .dash{padding:14px;border-radius:18px}
  .form{padding:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* google seo illustration */
.serp{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.serp-q{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;padding:12px 20px;font-size:1rem;margin-bottom:18px;box-shadow:0 2px 8px -4px rgba(37,16,44,.25)}
.serp-q::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid var(--muted);flex:none}
.serp-map{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#f1ece6;border-radius:14px;padding:14px;margin-bottom:14px;position:relative}
.pin{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;font-size:.84rem;line-height:1.25;border:2px solid transparent}
.pin b{flex:none;width:26px;height:26px;border-radius:50%;background:#d9cfe0;color:var(--ink);display:grid;place-items:center;font-family:var(--disp)}
.pin small{display:block;color:var(--muted);font-size:.72rem}
.pin.you{border-color:var(--coral)}.pin.you b{background:var(--coral);color:var(--ink)}
.serp-r{padding:14px 6px;border-top:1px solid var(--line)}
.serp-r small{color:var(--muted);font-size:.78rem}
.serp-r b{display:block;font-family:var(--body);font-size:1.12rem;color:#1a4fb5;font-weight:500;margin:2px 0 4px;line-height:1.3}
.serp-r p{color:var(--muted);font-size:.9rem}
.serp-r.hi{background:var(--coral-soft);border-radius:12px;border:1px solid var(--coral);margin:0 0 4px;padding:14px 16px}
.note2{font-size:.78rem;color:var(--muted);margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:700px){.serp-map{grid-template-columns:1fr}.serp{padding:16px}}

/* ===== v2: richer heroes, ad mockups, imagery ===== */
.hero.inner{padding:64px 0 88px}
.hero.inner h1{font-size:clamp(2.3rem,4.8vw,4rem)}
.stage.auto{height:auto;padding:10px 0 60px}
.stage .fl{position:absolute;transition:transform .3s ease-out}
.stage .bf{border:1px solid rgba(255,255,255,.14)}
.stage .bf img{aspect-ratio:16/10}
.stage.sites .f1{right:0;top:10px;width:78%;transform:rotate(1.5deg);z-index:1}
.stage.sites .f2{left:0;top:215px;width:60%;transform:rotate(-2deg);z-index:2}
.stage.sites .phone{left:auto;right:3%;bottom:-6px;width:150px}
.stage.sites .disc{top:14%;right:-6%;width:380px;height:380px}
.stage.soft .f1{right:0;top:18px;width:86%;z-index:1;transform:rotate(1deg)}
.stage.soft .f2{left:0;top:230px;width:58%;z-index:2;transform:rotate(-2deg)}
.stage.soft .f3{right:2%;bottom:6px;width:42%;z-index:3;transform:rotate(2deg)}
.stage.soft .disc{top:20%;right:-8%;width:380px;height:380px}
.stage.soft .chip.c1{left:2%;right:auto;top:0}
.stage.abt .disc{top:4%;right:2%;width:400px;height:400px}
.pcard{position:absolute;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--ink2);border:6px solid #fff}
.pcard img{width:100%;height:100%;object-fit:cover;object-position:top}
.pcard.p1{right:14%;top:10px;width:280px;height:370px;z-index:1;transform:rotate(2deg)}
.pcard.p2{left:4%;bottom:10px;width:210px;height:280px;z-index:2;transform:rotate(-3deg)}
.pcard.p2.mono{display:grid;place-items:center;background:var(--coral);font-family:var(--disp);font-weight:800;font-size:6rem;color:var(--ink)}
.stage.abt .chip.c1{right:2%;top:60px}.stage.abt .chip.c2{left:36%;bottom:-8px}
.tag-over{position:absolute;left:14px;bottom:14px;background:rgba(37,16,44,.88);color:#fff;border-radius:99px;padding:6px 14px;font-family:var(--disp);font-weight:700;font-size:.82rem}
.mk{position:relative;padding:6px 0 70px}
.mk .dash{padding:18px}
.mk .dash .camps{display:none}.mk .dash .chart svg{height:150px}.mk .dash .note{display:none}
.mk .phone{left:-4%;bottom:-6px;width:196px;transform:rotate(-4deg)}
.mk .chip.c1{right:-2%;top:-18px}
.mk .chip.c2{right:6%;left:auto;bottom:6px}
/* ad mockups */
.adm{background:#fff;color:#262626;font-family:var(--body);font-size:11px;line-height:1.35;text-align:left}
.adm-h{display:flex;gap:8px;align-items:center;padding:9px 10px}
.adm-h i{width:26px;height:26px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;font-style:normal;font-family:var(--disp);font-weight:800;font-size:13px;flex:none}
.adm-h b{display:block;font-size:11.5px}.adm-h small{color:#7a7a7a;font-size:10px}
.adm p{padding:0 10px 8px}
.adm img{width:100%;aspect-ratio:1/1;object-fit:cover}
.adm-f{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f0f2f5;padding:9px 10px}
.adm-f small{display:block;color:#7a7a7a;font-size:9.5px;text-transform:uppercase}
.adm-f b{font-size:11.5px}
.adm-f u{text-decoration:none;background:#e2e5ea;border-radius:6px;padding:6px 10px;font-weight:700;font-size:10.5px;white-space:nowrap}
.ph-s .adm{padding-top:18px}
.adrow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:start}
.adrow .adcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);font-size:13px}
.adrow .adcard .adm{font-size:13px}.adrow .adm-h i{width:34px;height:34px;font-size:16px}.adrow .adm-h b{font-size:14px}.adrow .adm-h small{font-size:12px}
.adrow .adm-f b{font-size:14px}.adrow .adm-f u{font-size:12.5px;padding:8px 14px}.adrow .adm-f small{font-size:11px}
.adrow .adcard:nth-child(2){margin-top:34px}
.adcap{text-align:center;margin-top:22px;color:var(--muted);font-size:.9rem}
.adlab{display:inline-block;margin:0 0 14px;background:var(--coral-soft);color:var(--coral-d);font-family:var(--disp);font-weight:700;font-size:.78rem;border-radius:99px;padding:4px 12px}
/* google ads mock */
.gads{margin:56px auto 0;max-width:820px}
.serp-r .sp{display:inline-block;font-weight:700;font-size:.78rem;border:1px solid #1a1a1a;border-radius:4px;padding:0 5px;margin-right:8px;color:#1a1a1a}
/* card images */
.pimg{margin:-34px -34px 26px;height:190px;overflow:hidden;border-radius:20px 20px 0 0;position:relative;background:var(--ink2)}
.pimg img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s ease}
.pc:hover .pimg img{transform:scale(1.05)}
.pimg .tag-over{left:16px;bottom:14px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.gallery figure .bf{border:1px solid var(--line);box-shadow:var(--shadow)}
.gallery figcaption{margin-top:14px}
.gallery figcaption b{font-family:var(--disp);font-size:1.1rem;display:block}
.gallery figcaption span{color:var(--muted);font-size:.93rem}
.tm .ph.photo{background:var(--ink2)}
@media(max-width:1040px){
  .stage.sites .f1{width:72%}.stage.sites .f2{top:200px}
  .adrow{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}.adrow .adcard:nth-child(2){margin-top:0}
  .gallery{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .mk{max-width:560px;margin:0 auto;width:100%}
}
@media(max-width:700px){
  .pimg{margin:-34px -34px 22px;height:170px}
  .pcard.p1{width:220px;height:300px;right:10%}.pcard.p2{width:150px;height:200px}.pcard.p2.mono{font-size:4rem}
  .stage.sites .phone{width:110px}.stage.sites .f2{top:170px;width:64%}.stage.sites .f1{width:80%}
  .stage.soft .f2{top:190px}.stage.soft .f3{width:46%}
  .mk .phone{width:150px;left:-2%}.mk .chip.c2{display:none}
}

/* ad inside the phone: fit the screen */
.ph-s{background:#f0f2f5;overflow:hidden}
.ph-s .adm{padding-top:22px;font-size:10px}
.ph-s .adm-h{padding:7px 9px}.ph-s .adm-h i{width:22px;height:22px;font-size:11px}.ph-s .adm-h b{font-size:10.5px}.ph-s .adm-h small{font-size:9px}
.ph-s .adm p{padding:0 9px 6px;font-size:10px}
.ph-s .adm img{aspect-ratio:4/3}
.ph-s .adm-f{padding:7px 9px;gap:6px}.ph-s .adm-f small{display:none}.ph-s .adm-f b{font-size:10px;line-height:1.2}
.ph-s .adm-f u{padding:5px 8px;font-size:9px}
.adm-sk{padding:12px 10px;background:#fff;margin-top:6px;display:grid;gap:7px}
.adm-sk i{display:block;height:8px;border-radius:6px;background:#e3e6ea}
.adm-sk i:nth-child(1){width:55%}.adm-sk i:nth-child(2){width:90%}.adm-sk i:nth-child(3){width:70%;height:46px;border-radius:8px}

/* process steps v2: cards with icons and big numbers */
.steps{gap:22px;margin-top:56px}
.st{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 26px 30px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.st:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.st::before{counter-increment:s;content:"0" counter(s);position:absolute;top:8px;right:18px;left:auto;transform:none;padding:0;font-family:var(--disp);font-weight:800;font-size:4.6rem;line-height:1;color:var(--coral-soft);letter-spacing:-.04em}
.st::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--coral)}
.st .sic{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;margin-bottom:22px}
.st .sic svg{width:27px;height:27px}
.st h3{position:relative;z-index:1;font-size:1.45rem;margin-bottom:8px}
.st p{position:relative;z-index:1}
.steps .st:not(:last-child) .sic::after{content:"";position:absolute;left:68px;top:50%;width:calc(100% + 60px);height:0;border-top:2px dashed var(--line);z-index:-1}
@media(max-width:1040px){.steps .st .sic::after{display:none!important}}
.steps .st .sic::after{display:none!important}

/* marketing hero phone: smaller, fixed shape, never covers the figures */
.mk .phone{width:168px;left:-6%;bottom:-34px;transform:rotate(-3deg)}
.mk .ph-s{aspect-ratio:9/16.5;display:flex;flex-direction:column;border-width:7px;border-radius:30px}
.mk .ph-s .adm{padding-top:20px;flex:none}
.mk .ph-s .adm img{aspect-ratio:16/10}
.mk .ph-s .adm p{font-size:9.5px;padding-bottom:5px}
.mk .adm-sk{flex:1;margin-top:5px;padding:10px 9px}
.mk .adm-sk i:nth-child(3){height:auto;flex:1}
.mk{padding-bottom:90px}
@media(max-width:700px){.mk .phone{width:138px;left:-3%;bottom:-24px}}

/* compact two-column sections so each fits one screen */
.sec{padding:84px 0}
.sec.fit{padding:72px 0}
.fit .sw{align-items:center;gap:56px}
.fit h2.t{font-size:clamp(1.9rem,3.5vw,2.9rem);margin:12px 0 14px}
.mini{display:grid;gap:18px;margin-top:26px}
.mini>div{display:flex;gap:16px;align-items:flex-start}
.mini .ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--coral-soft);color:var(--coral-d);display:grid;place-items:center}
.mini .ic svg{width:23px;height:23px}
.mini b{display:block;font-family:var(--disp);font-size:1.12rem;margin-bottom:2px}
.mini p{color:var(--muted);font-size:.95rem;line-height:1.5}
.adrow.cp{margin-top:0;grid-template-columns:repeat(3,1fr);gap:14px}
.adrow.cp .adcard:nth-child(2){margin-top:26px}
.adrow.cp .adcard,.adrow.cp .adcard .adm{font-size:10.5px}
.adrow.cp .adm-h i{width:24px;height:24px;font-size:12px}.adrow.cp .adm-h b{font-size:11px}.adrow.cp .adm-h small{font-size:9.5px}
.adrow.cp .adm p{font-size:10.5px}
.adrow.cp .adm-f b{font-size:10.5px}.adrow.cp .adm-f u{font-size:9.5px;padding:5px 8px}.adrow.cp .adm-f small{font-size:8.5px}
.adrow.cp .adlab{font-size:.7rem;padding:3px 9px;margin-bottom:10px}
.fit .adcap{margin-top:18px;text-align:left;font-size:.82rem}
@media(max-width:1040px){.adrow.cp{max-width:none;grid-template-columns:repeat(3,1fr)}.adrow.cp .adcard:nth-child(2){margin-top:0}}
@media(max-width:700px){.adrow.cp{grid-template-columns:1fr;max-width:380px;margin:0 auto}}

/* interactive ad mockups */
.adm{position:relative}
.adcard,.ph-s{cursor:default}
.adrow .adcard{transition:transform .25s,box-shadow .25s}
.adrow .adcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -22px rgba(37,16,44,.45)}
.adm-img{position:relative;overflow:hidden;background:#e6e8ec}
.adm-img img{display:block;transition:opacity .3s}
.adm-like{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;font-size:16px;line-height:1;color:#555;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s,color .15s;z-index:3}
.adm-like:hover{transform:scale(1.12)}
.adm-like.on{color:#e0245e}
.adm-like span{font-size:9px;font-weight:700;margin-left:2px;display:none}
.adm-arr{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);color:#222;display:grid;place-items:center;font-size:14px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:3;opacity:0;transition:opacity .2s}
.adm-img:hover .adm-arr,.adm-arr:focus-visible{opacity:1}
.adm-arr.l{left:7px}.adm-arr.r{right:7px}
.adm-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none}
.adm-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
.adm-dots i.on{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.adm-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:56px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.4);pointer-events:none;z-index:4;transition:transform .25s}
.adm-pop.go{animation:pop .7s ease}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(0)}30%{transform:translate(-50%,-50%) scale(1.15)}60%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(0)}}
.adm-f u{cursor:pointer;transition:background .2s,color .2s}
.adm-f u:hover,.adm-f u:focus-visible{background:var(--coral);color:var(--ink);outline:none}
.adm-lf{position:absolute;inset:0;background:#fff;z-index:6;display:flex;flex-direction:column;gap:7px;padding:14px;animation:fin .25s ease}
@keyframes fin{from{opacity:0;transform:translateY(8px)}}
.adm-lf[hidden]{display:none}
.adm-lf b{font-family:var(--disp);font-size:1.25em;line-height:1.15}
.adm-lf small{color:#777;font-size:.9em}
.adm-lf input{border:1.5px solid #d9dde3;border-radius:8px;padding:8px 10px;font:inherit;font-size:1em;width:100%}
.adm-lf input:focus{outline:none;border-color:var(--coral-d)}
.adm-lf .go{background:var(--coral);color:var(--ink);border-radius:8px;padding:9px;font-weight:700;font-family:var(--disp);margin-top:2px}
.adm-lf .x{position:absolute;right:8px;top:6px;font-size:20px;color:#888;line-height:1;width:26px;height:26px}
.adm-lf .ok{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--coral);color:var(--ink);font-size:20px;margin:6px 0 2px}
.adm-lf a{color:var(--coral-d);font-weight:700;font-size:1em}
.ph-s .adm-lf{padding-top:26px}
/* interactive search mockup */
.serp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.serp-chips button{border:1.5px solid var(--line);border-radius:99px;padding:6px 14px;font-size:.84rem;font-weight:700;font-family:var(--disp);color:var(--muted);transition:.2s}
.serp-chips button:hover{border-color:var(--coral-d);color:var(--ink)}
.serp-chips button[aria-pressed=true]{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.serp-q span::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.serp-r{transition:background .2s,transform .2s;border-radius:10px;cursor:pointer}
.serp-r:hover{background:#f6f2fa}
.serp-r.hi:hover{background:#dff0c7}
.serp-r.flash{animation:flash .6s ease}
@keyframes flash{from{background:#fff3c4}}
.pin{cursor:pointer;transition:transform .2s,border-color .2s}
.pin:hover{transform:translateY(-2px)}
.pin.sel{border-color:var(--coral-d)}

/* enquiry form: same design as the DJ Paving form (white card, small caps labels, grey fields, full-width button) */
.form{background:#fff;border-radius:18px;padding:40px 38px;box-shadow:0 26px 60px rgba(0,0,0,.35)}
.form h3{font-size:1.6rem}
.form .fld label{font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.form .fld input,.form .fld select,.form .fld textarea{background:#f6f7f9;border:1.5px solid #dde1e7;border-radius:6px;padding:15px 16px;font-size:1rem;color:var(--ink)}
.form .fld input::placeholder,.form .fld textarea::placeholder{color:#8a929d}
.form .fld textarea{min-height:118px}
.form .fld input:focus,.form .fld select:focus,.form .fld textarea:focus{outline:none;border-color:var(--coral);background:#fff;box-shadow:0 0 0 4px rgba(155,208,91,.28)}
.form .fld{margin-bottom:18px}
.form .btn.p{border-radius:6px;padding:18px;font-size:1.1rem;justify-content:center;box-shadow:0 8px 20px rgba(155,208,91,.35)}
.form .tiny{color:#5b6472;font-size:.82rem}
.form .fld.bad input,.form .fld.bad select{border-color:#ff8a78;box-shadow:0 0 0 2px rgba(255,138,120,.25)}
@media(max-width:640px){.form{padding:26px 20px}}
/* five sites: first three across, last two wider */
.work{grid-template-columns:repeat(6,1fr)}
.work .wk{grid-column:span 2}
@media(max-width:1040px){.work{grid-template-columns:repeat(2,1fr)}.work .wk{grid-column:auto}}
@media(max-width:700px){.work{grid-template-columns:1fr}}

/* ================= v3: dark, modern, tech-heavy ================= */
:root{--ink:#12071a;--ink2:#1a0d26;--glass:rgba(255,255,255,.045);--gline:rgba(155,208,91,.18);--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
body{background:#12071a;color:#e6dcee;background-image:radial-gradient(rgba(255,255,255,.055) 1.2px,transparent 1.2px);background-size:30px 30px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(620px 420px at 88% 6%,rgba(155,208,91,.10),transparent 70%),radial-gradient(700px 520px at 6% 70%,rgba(89,49,95,.35),transparent 70%)}
main,.ftr,.hdr,.strip,.own{position:relative;z-index:1}
h1,h2,h3,h4{color:#fff}
.sec{background:transparent}.sec.cream{background:rgba(255,255,255,.028)}
.sec.ink,.sec.ink2{background:rgba(255,255,255,.02)}
.lead,.center .lead,.ink .lead,.ink2 .lead{color:var(--muted-d)!important}
.eyebrow,.ink .eyebrow{font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.16em;color:var(--coral)}
.eyebrow::before{background:var(--coral);box-shadow:0 0 12px var(--coral)}
.acc{color:var(--coral)}
.link,.ink .link{color:var(--coral)}
.btn.d{border-color:rgba(255,255,255,.28);color:#fff}.btn.d:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn.p{box-shadow:0 0 0 1px rgba(155,208,91,.4),0 10px 32px -8px rgba(155,208,91,.65)}
.ck{color:#e6dcee!important}.ck li b,.cream .ck li b{color:#fff}
/* glass cards with a cursor spotlight */
.pc,.fc,.st,.wk,.tm,.faq details,.gallery figure .bf{background-color:var(--glass);border:1px solid var(--gline);color:#e6dcee;transition:transform .25s,box-shadow .25s,border-color .25s,background-color .25s;backdrop-filter:blur(6px)}
.pc:hover,.fc:hover,.st:hover,.wk:hover,.tm:hover{background-image:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(155,208,91,.16),transparent 62%);border-color:rgba(155,208,91,.55);box-shadow:0 0 0 1px rgba(155,208,91,.25),0 24px 60px -24px rgba(155,208,91,.35)}
.pc.big{background-color:rgba(155,208,91,.07);border-color:rgba(155,208,91,.45)}
.pc p,.fc p,.st p,.wk p,.tm p,.mini p,.faq details p,.gallery figcaption span{color:var(--muted-d)}
.pc h3,.fc h3,.st h3,.wk h3,.tm h3,.mini b,.gallery figcaption b{color:#fff}
.pc .ic,.fc .ic,.mini .ic,.contact-list .ic{background:rgba(155,208,91,.1);color:var(--coral);border:1px solid var(--gline);box-shadow:0 0 26px rgba(155,208,91,.28),inset 0 0 14px rgba(155,208,91,.12)}
.pc.big .ic{background:var(--coral);color:var(--ink)}
.pc li::before{box-shadow:0 0 10px rgba(155,208,91,.6)}
.st::before{color:rgba(155,208,91,.09)}
.st .sic{box-shadow:0 0 28px rgba(155,208,91,.55)}
.st::after{box-shadow:0 0 14px var(--coral)}
.wk .shot{background:#0d0515}.wk .tg{color:var(--coral);font-family:var(--mono);letter-spacing:.1em}
.wk .shot .d{border-color:rgba(255,255,255,.12)}
.soon{background:rgba(155,208,91,.12);color:var(--coral);border:1px solid var(--gline);font-family:var(--mono);font-size:.72rem}
.prow{border-color:rgba(255,255,255,.08)}
.prow p{color:var(--muted-d)}
.prow li{background:var(--glass);border-color:var(--gline);color:#e6dcee;font-family:var(--mono);font-size:.76rem}
.vis .bf{border-color:var(--gline);box-shadow:0 0 0 1px rgba(155,208,91,.2),0 30px 70px -20px rgba(0,0,0,.7),0 0 60px -10px rgba(155,208,91,.25)}
.faq summary{color:#fff}.faq summary::after{background:rgba(155,208,91,.12);color:var(--coral)}
.tm .role{color:var(--coral);font-family:var(--mono);font-size:.82rem}
.tm .ph{background:var(--ink2)}
.legal p,.legal li{color:var(--muted-d)}
.form,.serp,.adcard{color:var(--text)}.form h3{color:var(--ink)}
.dash{background:rgba(255,255,255,.04);border:1px solid var(--gline);backdrop-filter:blur(8px);box-shadow:0 0 60px -20px rgba(155,208,91,.3),var(--shadow)}
.own h2,.own .it b{color:var(--ink)}
.stage .disc{display:none}
.hero::before,.ph-hero::before{background-image:linear-gradient(rgba(155,208,91,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.06) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}
.hero,.ph-hero{background:transparent}
.hdr{background:rgba(18,7,26,.82);backdrop-filter:blur(14px)}
.hero h1 em{text-shadow:0 0 40px rgba(155,208,91,.45)}
.strip{box-shadow:0 0 50px rgba(155,208,91,.35)}
.pill{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em}
.mnav{background:var(--ink)}
/* ---- command centre (home hero) ---- */
.cc{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--gline);border-radius:22px;padding:18px;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px rgba(0,0,0,.8),0 0 80px -20px rgba(155,208,91,.3);backdrop-filter:blur(10px);font-family:var(--mono);color:#e6dcee;overflow:hidden}
.cc::before{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(transparent,rgba(155,208,91,.1),transparent);animation:scan 5s linear infinite;pointer-events:none}
@keyframes scan{to{top:120%}}
.cc-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.7rem;color:var(--muted-d);padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.cc-bar .live{display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-weight:700}
.cc-bar .live i{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(155,208,91,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(155,208,91,0)}100%{box-shadow:0 0 0 0 rgba(155,208,91,0)}}
.cc-k{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cc-k>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:12px 12px 8px}
.cc-k small{display:block;font-size:.6rem;letter-spacing:.1em;color:var(--muted-d)}
.cc-k b{display:block;font-family:var(--disp);font-size:1.55rem;color:#fff;margin:2px 0 4px;letter-spacing:-.02em}
.cc-k svg{width:100%;height:30px;display:block}
.cc-k path{fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(155,208,91,.8));stroke-dasharray:300;stroke-dashoffset:300;animation:draw 2.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.cc-main{display:grid;grid-template-columns:150px 1fr;gap:16px;margin-top:14px;align-items:center}
.cc-ring{position:relative;width:150px;height:150px}
.cc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cc-ring circle{fill:none;stroke-width:10}
.cc-ring .bg{stroke:rgba(255,255,255,.08)}
.cc-ring .fg{stroke:var(--coral);stroke-linecap:round;stroke-dasharray:408;stroke-dashoffset:408;filter:drop-shadow(0 0 8px rgba(155,208,91,.8));transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.cc-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.cc-ring b{font-family:var(--disp);font-size:2rem;color:#fff;line-height:1}
.cc-ring small{font-size:.6rem;letter-spacing:.1em;color:var(--muted-d);margin-top:4px}
.cc-feed{list-style:none;display:grid;gap:7px;min-height:176px;align-content:start}
.cc-feed li{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;font-size:.7rem;animation:slidein .5s ease both}
.cc-feed li:first-child{border-color:rgba(155,208,91,.45);background:rgba(155,208,91,.08)}
@keyframes slidein{from{opacity:0;transform:translateY(-12px)}}
.cc-feed li i{flex:none;width:8px;height:8px;border-radius:50%}
.cc-feed li span{flex:1;color:#fff}.cc-feed li em{font-style:normal;color:var(--muted-d);font-size:.62rem}
.cc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cc-tags span{font-size:.62rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:4px 10px;color:var(--muted-d);transition:.3s}
.cc-tags span.on{border-color:var(--coral);color:var(--ink);background:var(--coral);box-shadow:0 0 16px rgba(155,208,91,.6)}
.cc-note{margin-top:10px;font-size:.6rem;color:var(--muted-d);opacity:.8}
/* ---- build terminal (software hero) ---- */
.term{background:#0b0412;border:1px solid var(--gline);border-radius:18px;font-family:var(--mono);box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 80px -20px rgba(155,208,91,.3);overflow:hidden}
.term-h{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07);font-size:.72rem;color:var(--muted-d)}
.term-h i{width:11px;height:11px;border-radius:50%;background:#ff7a66}.term-h i:nth-child(2){background:#ffc65a}.term-h i:nth-child(3){background:#6fcf7c}
.term-h span{margin-left:10px}
.term-b{padding:18px 20px 8px;font-size:.8rem;line-height:1.85;color:#cfc3d8;min-height:190px}
.term-b .l{display:block;white-space:nowrap;overflow:hidden}
.term-b .p{color:var(--coral)}.term-b .ok{color:var(--coral)}.term-b .dim{color:#7d6d89}
.term-b .cur{display:inline-block;width:8px;height:1em;background:var(--coral);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.term-prog{margin:4px 20px 14px;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.term-prog i{display:block;height:100%;width:0;background:var(--coral);box-shadow:0 0 14px var(--coral);transition:width .5s}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}
.mods span{display:flex;align-items:center;gap:8px;font-size:.68rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 10px;color:var(--muted-d);transition:.4s}
.mods span::before{content:"";width:7px;height:7px;border-radius:50%;background:#4b3a58;flex:none}
.mods span.on{color:#fff;border-color:rgba(155,208,91,.5);background:rgba(155,208,91,.08)}
.mods span.on::before{background:var(--coral);box-shadow:0 0 10px var(--coral)}
.owned{display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:10px 12px;border:1px dashed rgba(155,208,91,.5);border-radius:10px;color:var(--coral);font-size:.74rem;opacity:.35;transition:.5s}
.owned.on{opacity:1;background:rgba(155,208,91,.08)}
.owned svg{width:18px;height:18px}
/* ---- site scan (websites hero) ---- */
.scanbf{position:relative}
.scanbf .bf{box-shadow:0 0 0 1px rgba(155,208,91,.25),0 40px 90px -30px #000,0 0 80px -10px rgba(155,208,91,.3)}
.scanbf .bf img{aspect-ratio:16/10}
.scanbf .ln{position:absolute;left:0;right:0;top:34px;height:2px;background:var(--coral);box-shadow:0 0 22px 6px rgba(155,208,91,.7);animation:sc 4.2s ease-in-out infinite;z-index:2}
@keyframes sc{0%{top:34px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 4px);opacity:0}}
.scanbf .wire{position:absolute;inset:34px 0 0 0;background-image:linear-gradient(rgba(155,208,91,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.18) 1px,transparent 1px);background-size:40px 40px;animation:wf 4.2s ease-in-out infinite;pointer-events:none;border-radius:0 0 14px 14px}
@keyframes wf{0%,100%{opacity:.9}50%{opacity:.15}}
.scanbf .tags{position:absolute;left:-14px;bottom:-18px;display:flex;flex-wrap:wrap;gap:8px;z-index:3}
.scanbf .tags span{background:#0d0515;border:1px solid var(--gline);color:var(--coral);font-family:var(--mono);font-size:.68rem;border-radius:99px;padding:6px 12px;box-shadow:0 0 18px rgba(155,208,91,.25)}
.scanbf .ph2{position:absolute;right:-18px;bottom:-30px;width:120px;border:6px solid #0d0515;border-radius:24px;overflow:hidden;box-shadow:0 20px 50px -10px #000,0 0 30px rgba(155,208,91,.3);z-index:3}
.scanbf .ph2 img{aspect-ratio:390/844;object-fit:cover;object-position:top}
/* ---- systems map ---- */
.sysmap{position:relative;aspect-ratio:900/440;max-width:1000px;margin:56px auto 0}
.sysmap>svg{position:absolute;inset:0;width:100%;height:100%}
.sysmap .ln{fill:none;stroke:rgba(155,208,91,.35);stroke-width:2;stroke-dasharray:4 7;animation:dash 1.4s linear infinite;vector-effect:non-scaling-stroke}
@keyframes dash{to{stroke-dashoffset:-22}}
.sysmap .dot{fill:var(--coral);filter:drop-shadow(0 0 6px var(--coral))}
.sn{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-family:var(--disp);font-weight:700;font-size:.92rem;color:#fff;cursor:pointer;z-index:2}
.sn .c{width:64px;height:64px;border-radius:50%;background:rgba(155,208,91,.1);border:1px solid var(--gline);display:grid;place-items:center;color:var(--coral);box-shadow:0 0 28px rgba(155,208,91,.25),inset 0 0 16px rgba(155,208,91,.12);transition:.25s}
.sn .c svg{width:28px;height:28px}
.sn:hover .c,.sn.on .c{background:var(--coral);color:var(--ink);box-shadow:0 0 40px rgba(155,208,91,.8);transform:scale(1.1)}
.sn.core .c{width:104px;height:104px;background:var(--coral);color:var(--ink);box-shadow:0 0 70px rgba(155,208,91,.7);animation:pulse 2.8s ease-in-out infinite}
.sn.core .c svg{width:44px;height:44px}
@keyframes pulse{50%{box-shadow:0 0 100px rgba(155,208,91,.95);transform:scale(1.05)}}
.sn small{display:block;font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--muted-d);letter-spacing:.04em;margin-top:-4px}
.syscap{max-width:720px;margin:34px auto 0;text-align:center;min-height:5.2em;font-size:1.08rem;color:#e6dcee}
.syscap b{display:block;font-family:var(--disp);font-size:1.4rem;color:var(--coral);margin-bottom:4px}
@media(max-width:760px){
  .sysmap{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
  .sysmap>svg{display:none}.sn{position:static;transform:none;flex-direction:row;text-align:left;gap:12px;background:var(--glass);border:1px solid var(--gline);border-radius:14px;padding:10px 12px}
  .sn .c{width:44px;height:44px}.sn .c svg{width:20px;height:20px}.sn.core{grid-column:1/-1;order:-1}.sn.core .c{width:60px;height:60px}.sn small{display:none}
  .cc-main{grid-template-columns:1fr}.cc-ring{margin:0 auto}
  .cc-k b{font-size:1.2rem}
  .mods{grid-template-columns:repeat(2,1fr)}
}

/* ---- friendly "your system is being built" card (software hero) ---- */
.build{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--gline);border-radius:22px;padding:24px;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 80px -20px rgba(155,208,91,.3);backdrop-filter:blur(10px)}
.build-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.build-h small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--coral)}
.build-h b{display:block;font-family:var(--disp);font-size:1.35rem;color:#fff;line-height:1.15;margin-top:4px}
.pillst{flex:none;display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:6px 14px;font-family:var(--disp);font-weight:700;font-size:.82rem;background:rgba(255,200,90,.14);color:#ffd166;border:1px solid rgba(255,200,90,.4)}
.pillst::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:ping 1.6s infinite}
.pillst.done{background:rgba(155,208,91,.14);color:var(--coral);border-color:rgba(155,208,91,.5)}
.bsteps{list-style:none;display:grid;gap:4px;margin:14px 0 6px}
.bsteps li{display:flex;gap:14px;align-items:center;padding:10px 10px;border-radius:14px;transition:background .3s}
.bsteps .n{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;color:var(--muted-d);transition:.3s}
.bsteps .n b{font-family:var(--disp);font-size:1rem}
.bsteps .n svg{position:absolute;width:20px;height:20px;opacity:0;transform:scale(.5);transition:.3s}
.bsteps .t b{display:block;font-family:var(--disp);font-size:1.02rem;color:#c9bdd3;transition:color .3s}
.bsteps .t small{display:block;font-size:.84rem;color:var(--muted-d);margin-top:1px}
.bsteps li.act{background:rgba(255,255,255,.06)}
.bsteps li.act .n{border-color:var(--coral);color:var(--coral);box-shadow:0 0 0 0 rgba(155,208,91,.6);animation:ping 1.6s infinite}
.bsteps li.act .t b{color:#fff}
.bsteps li.ok .n{background:var(--coral);border-color:var(--coral);color:var(--ink);box-shadow:0 0 18px rgba(155,208,91,.5)}
.bsteps li.ok .n b{opacity:0}.bsteps li.ok .n svg{opacity:1;transform:none}
.bsteps li.ok .t b{color:#fff}
.bprog{display:flex;align-items:center;gap:14px;margin:12px 0 4px}
.bbar{flex:1;height:10px;border-radius:10px;background:rgba(255,255,255,.1);overflow:hidden}
.bbar i{display:block;height:100%;width:0;background:var(--coral);border-radius:10px;box-shadow:0 0 14px var(--coral);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bpct{font-family:var(--disp);font-weight:700;color:#fff;font-size:.95rem;min-width:7.2em;text-align:right}
.bmods{margin-top:16px}
.bmods small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--muted-d);margin-bottom:10px}
.mods2{display:flex;flex-wrap:wrap;gap:8px}
.mods2 span{font-size:.9rem;border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:7px 15px;color:var(--muted-d);transition:.4s}
.mods2 span.on{color:var(--ink);background:var(--coral);border-color:var(--coral);box-shadow:0 0 18px rgba(155,208,91,.5);font-weight:700}
.bown{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:14px;border:1px dashed rgba(155,208,91,.45);color:var(--muted-d);opacity:.45;transition:.5s;font-size:.95rem}
.bown svg{flex:none;width:22px;height:22px;color:var(--coral)}
.bown b{color:#fff;margin-right:6px}
.bown.on{opacity:1;background:rgba(155,208,91,.1);border-style:solid}
@media(max-width:700px){.build{padding:18px}.build-h b{font-size:1.15rem}.bsteps .t small{font-size:.8rem}}

/* ================= v4: balance — dark tech heroes + light cream/white sections ================= */
body{background:#fff;background-image:none;color:var(--text)}
body::before{display:none}
.sec{background:#fff}.sec.cream{background:var(--cream)}
.sec.ink{background:var(--ink)}.sec.ink2{background:var(--ink2)}
.sec.ink+.sec.ink,.sec.ink+.sec.ink2{border-top:1px solid var(--line-d)}
.dash{background:var(--ink)}
.ph-hero,.hero{background:var(--ink)}
/* light sections */
.sec:not(.ink):not(.ink2) :is(h2,h3,h4){color:var(--ink)}
.sec:not(.ink):not(.ink2) .lead{color:var(--muted)!important}
.sec:not(.ink):not(.ink2) .eyebrow{color:var(--coral-d)}
.sec:not(.ink):not(.ink2) .eyebrow::before{background:var(--coral);box-shadow:none}
.sec:not(.ink):not(.ink2) .ck{color:var(--text)!important}
.sec:not(.ink):not(.ink2) .ck li b{color:var(--ink)}
.sec:not(.ink):not(.ink2) .link{color:var(--coral-d)}
.sec:not(.ink):not(.ink2) .btn.d{border-color:var(--ink);color:var(--ink)}
.sec:not(.ink):not(.ink2) .btn.d:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sec:not(.ink):not(.ink2) .pc,.sec:not(.ink):not(.ink2) .fc,.sec:not(.ink):not(.ink2) .st,.sec:not(.ink):not(.ink2) .wk,.sec:not(.ink):not(.ink2) .tm,.sec:not(.ink):not(.ink2) .faq details{background-color:#fff;border-color:var(--line);color:var(--text);backdrop-filter:none}
.sec:not(.ink):not(.ink2) .pc:hover,.sec:not(.ink):not(.ink2) .fc:hover,.sec:not(.ink):not(.ink2) .st:hover,.sec:not(.ink):not(.ink2) .wk:hover,.sec:not(.ink):not(.ink2) .tm:hover{border-color:rgba(155,208,91,.9);box-shadow:var(--shadow)}
.sec:not(.ink):not(.ink2) .pc p,.sec:not(.ink):not(.ink2) .fc p,.sec:not(.ink):not(.ink2) .st p,.sec:not(.ink):not(.ink2) .wk p,.sec:not(.ink):not(.ink2) .tm p,.sec:not(.ink):not(.ink2) .mini p,.sec:not(.ink):not(.ink2) .faq details p{color:var(--muted)}
.sec:not(.ink):not(.ink2) .mini b{color:var(--ink)}
.sec:not(.ink):not(.ink2) .pc .ic,.sec:not(.ink):not(.ink2) .fc .ic,.sec:not(.ink):not(.ink2) .mini .ic{background:var(--coral-soft);color:var(--coral-d);border:0;box-shadow:none}
.sec:not(.ink):not(.ink2) .pc li::before{box-shadow:none}
.sec:not(.ink):not(.ink2) .pc.big{background-color:var(--ink);border-color:var(--ink);color:#fff}
.sec:not(.ink):not(.ink2) .pc.big :is(h3){color:#fff}
.sec:not(.ink):not(.ink2) .pc.big p{color:var(--muted-d)}
.sec:not(.ink):not(.ink2) .pc.big .ic{background:var(--coral);color:var(--ink)}
.sec:not(.ink):not(.ink2) .pc.big .link{color:var(--coral)}
.sec:not(.ink):not(.ink2) .st::before{color:var(--coral-soft)}
.sec:not(.ink):not(.ink2) .st .sic{box-shadow:none}
.sec:not(.ink):not(.ink2) .st::after{box-shadow:none}
.sec:not(.ink):not(.ink2) .wk .shot{background:var(--cream)}
.sec:not(.ink):not(.ink2) .wk .tg{color:var(--coral-d)}
.sec:not(.ink):not(.ink2) .wk .shot .d{border-color:var(--line)}
.sec:not(.ink):not(.ink2) .soon{background:var(--coral-soft);color:var(--coral-d);border:0}
.sec:not(.ink):not(.ink2) .prow{border-color:var(--line)}
.sec:not(.ink):not(.ink2) .prow p{color:var(--muted)}
.sec:not(.ink):not(.ink2) .prow li{background:var(--cream);border-color:var(--line);color:var(--text)}
.sec:not(.ink):not(.ink2) .vis .bf{border-color:var(--line);box-shadow:var(--shadow)}
.sec:not(.ink):not(.ink2) .faq summary{color:var(--ink)}
.sec:not(.ink):not(.ink2) .faq summary::after{background:var(--coral-soft);color:var(--coral-d)}
.sec:not(.ink):not(.ink2) .tm .role{color:var(--coral-d)}
.sec:not(.ink):not(.ink2) .tm .ph{background:var(--coral)}
.sec.legal p,.sec.legal li{color:var(--muted)}
.hdr{background:rgba(37,16,44,.94)}

/* ================= v5: one dark colour + soft overlapping section edges ================= */
:root{--ink:#25102c;--ink2:#2f1738}
.hdr{background:var(--ink)}
.hdr.s{box-shadow:0 12px 30px -18px rgba(0,0,0,.6)}
.hero,.ph-hero,.ftr,.sec.ink{background:var(--ink)}
.sec.ink2{background:var(--ink2)}
.mnav{background:var(--ink)}
/* dark and light sections overlap with a rounded edge so they flow into each other */
:is(.hero,.ph-hero,.sec.ink,.sec.ink2)+.sec:not(.ink):not(.ink2),
.sec:not(.ink):not(.ink2)+:is(.sec.ink,.sec.ink2){margin-top:-40px;border-radius:40px 40px 0 0;position:relative;z-index:2;padding-top:calc(84px + 40px)!important}
.sec.fit:is(.cream,:not(.ink)){padding-top:calc(72px + 40px)!important}
:is(.hero,.ph-hero,.sec.ink,.sec.ink2){position:relative;z-index:1}
.hero,.ph-hero{padding-bottom:calc(88px + 40px)}
:is(.hero,.ph-hero)+.strip,.strip+.sec{border-radius:0!important;margin-top:0!important}
.strip{position:relative;z-index:3}
.strip+.sec{padding-top:84px!important}
@media(max-width:700px){
  :is(.hero,.ph-hero,.sec.ink,.sec.ink2)+.sec:not(.ink):not(.ink2),
  .sec:not(.ink):not(.ink2)+:is(.sec.ink,.sec.ink2){margin-top:-28px;border-radius:28px 28px 0 0;padding-top:calc(72px + 28px)!important}
}

/* v6: straight, clean edges between dark and light sections (rounded overlap removed) */
:is(.hero,.ph-hero,.sec.ink,.sec.ink2)+.sec:not(.ink):not(.ink2),
.sec:not(.ink):not(.ink2)+:is(.sec.ink,.sec.ink2){margin-top:0!important;border-radius:0!important;padding-top:84px!important;z-index:auto}
.sec.fit:is(.cream,:not(.ink)){padding-top:72px!important}
.hero,.ph-hero{padding-bottom:88px}
.hero.inner{padding-bottom:88px}
@media(max-width:700px){
  :is(.hero,.ph-hero,.sec.ink,.sec.ink2)+.sec:not(.ink):not(.ink2),
  .sec:not(.ink):not(.ink2)+:is(.sec.ink,.sec.ink2){padding-top:72px!important}
  .sec.fit:is(.cream,:not(.ink)){padding-top:64px!important}
}

/* marketing hero dashboard: smaller and tighter */
.mk{max-width:500px;margin-left:auto;padding-bottom:70px}
.mk .dash{padding:14px;border-radius:20px}
.mk .dash-top{margin-bottom:10px;gap:8px}
.mk .seg{padding:3px}
.mk .seg button{padding:6px 13px;font-size:.8rem}
.mk .kpis{gap:8px}
.mk .kpi{padding:10px 11px;border-radius:12px}
.mk .kpi small{font-size:.68rem}
.mk .kpi b{font-size:1.2rem;margin:3px 0 1px}
.mk .kpi em{font-size:.68rem}
.mk .chart{margin-top:10px;padding:10px 12px 4px;border-radius:12px}
.mk .chart-h{font-size:.72rem}
.mk .chart svg{height:92px}
.mk .phone{width:150px;left:-7%;bottom:-20px}
.mk .chip.c1{top:-26px;right:-3%}
@media(max-width:1040px){.mk{margin:0 auto}}
@media(max-width:700px){.mk .phone{width:128px;left:-3%}.mk .kpi b{font-size:1.05rem}}
.mk .chip.c1{top:auto;bottom:4px;right:2%}
@media(max-width:700px){.mk .chip.c1{display:none}}

/* larger ad examples */
.adrow.cp{gap:20px}
.adrow.cp .adcard,.adrow.cp .adcard .adm{font-size:13.5px}
.adrow.cp .adm-h{padding:12px 14px;gap:10px}
.adrow.cp .adm-h i{width:34px;height:34px;font-size:16px}
.adrow.cp .adm-h b{font-size:14.5px}.adrow.cp .adm-h small{font-size:12px}
.adrow.cp .adm p{font-size:13.5px;padding:0 14px 10px;line-height:1.45}
.adrow.cp .adm-f{padding:12px 14px}
.adrow.cp .adm-f b{font-size:14px}.adrow.cp .adm-f small{font-size:10.5px}
.adrow.cp .adm-f u{font-size:12.5px;padding:8px 14px}
.adrow.cp .adlab{font-size:.78rem;padding:4px 12px}
.adrow.cp .adm-like{width:34px;height:34px;font-size:18px}
.fit .adcap{font-size:.9rem}
@media(max-width:1040px){.adrow.cp{grid-template-columns:repeat(3,1fr);gap:14px}.adrow.cp .adcard,.adrow.cp .adcard .adm{font-size:11.5px}.adrow.cp .adm p{font-size:11.5px}}
@media(max-width:700px){.adrow.cp{grid-template-columns:1fr;max-width:420px}.adrow.cp .adcard,.adrow.cp .adcard .adm,.adrow.cp .adm p{font-size:13.5px}}

/* Meta ads section: dark glass stage so the ads stand out */
.adstage{position:relative;background:rgba(255,255,255,.045);border:1px solid var(--gline);border-radius:28px;padding:34px 28px 24px;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 90px -20px rgba(155,208,91,.35)}
.adstage::before{content:"";position:absolute;inset:0;border-radius:28px;background-image:linear-gradient(rgba(155,208,91,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.07) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%);pointer-events:none}
.adstage .adrow{position:relative}
.adstage .adrow.cp .adcard{box-shadow:0 26px 50px -18px #000;transition:transform .3s,box-shadow .3s}
.adstage .adrow.cp>div:nth-child(1) .adcard{transform:rotate(-2deg)}
.adstage .adrow.cp>div:nth-child(3) .adcard{transform:rotate(2deg)}
.adstage .adrow.cp .adcard:hover{transform:translateY(-8px) rotate(0);box-shadow:0 34px 60px -16px #000,0 0 40px rgba(155,208,91,.4)}
.adstage .adcap{color:var(--muted-d);position:relative}
.adstage .chip{position:absolute;right:-14px;top:-20px;z-index:5;display:flex;align-items:center;gap:10px}
.adstage .chip i{width:9px;height:9px;border-radius:50%;background:#2a8a3b;box-shadow:0 0 0 0 rgba(42,138,59,.6);animation:ping 1.8s infinite}
.sec.fit.ink .mini .ic{box-shadow:0 0 26px rgba(155,208,91,.28)}
@media(max-width:1040px){.adstage .adrow.cp>div .adcard{transform:none}.adstage{padding:22px 16px}.adstage .chip{right:6px}}

/* trust bar along the bottom of inner heroes */
.hero.inner .hbar{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.12);padding-top:26px}
.hbar>div{display:flex;gap:14px;align-items:center;padding:0 18px;border-left:1px solid rgba(255,255,255,.1)}
.hbar>div:first-child{padding-left:0;border-left:0}
.hbar .ic{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(155,208,91,.1);border:1px solid var(--gline);color:var(--coral);display:grid;place-items:center;box-shadow:0 0 24px rgba(155,208,91,.3),inset 0 0 12px rgba(155,208,91,.12)}
.hbar .ic svg{width:22px;height:22px}
.hbar b{display:block;font-family:var(--disp);font-size:1rem;color:#fff;line-height:1.2}
.hbar small{display:block;color:var(--muted-d);font-size:.84rem;margin-top:2px}
@media(max-width:1040px){.hero.inner .hbar{grid-template-columns:repeat(2,1fr);row-gap:18px}.hbar>div:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:700px){.hero.inner .hbar{grid-template-columns:1fr}.hbar>div{padding:0;border-left:0}}

/* hero phone ad only: no round buttons (arrows and heart) */
.mk .ph-s .adm-arr,.mk .ph-s .adm-like{display:none!important}

/* sections that stand out: pill labels, tinted green section, bold panels */
.eyebrow{padding:7px 16px 7px 14px;border-radius:99px;background:rgba(155,208,91,.14);border:1px solid rgba(155,208,91,.4);gap:10px}
.eyebrow::before{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px var(--coral)}
.sec:not(.ink):not(.ink2) .eyebrow{background:var(--coral-soft);border-color:rgba(75,122,28,.28)}
.sec:not(.ink):not(.ink2) .eyebrow::before{box-shadow:none;background:var(--coral-d)}
.center .eyebrow{display:inline-flex}
.sec.tint{background:#e9f4d8}
.sec.tint .eyebrow{background:#fff}
.lstage{background:#fff;border:2px solid var(--coral);border-radius:28px;padding:26px;box-shadow:0 0 0 10px rgba(155,208,91,.28),0 40px 80px -28px rgba(37,16,44,.45)}
.lstage .serp{box-shadow:none;border:0;padding:0}
.sec.tint .mini .ic{background:#fff}
@media(max-width:700px){.lstage{padding:16px;box-shadow:0 0 0 6px rgba(155,208,91,.28),0 30px 60px -24px rgba(37,16,44,.45)}}

/* enquiry form: a bit more compact so it fits one screen */
.form{padding:28px 28px 22px;border-radius:16px}
.form h3{font-size:1.35rem;margin-bottom:4px}
.form .sub{font-size:.9rem;margin-bottom:16px;line-height:1.45}
.form .fld{margin-bottom:12px}
.form .fld label{font-size:.74rem;margin-bottom:5px}
.form .fld input,.form .fld select,.form .fld textarea{padding:11px 13px;font-size:.95rem}
.form .fld textarea{min-height:78px}
.form .frow{gap:12px}
.form .btn.p{padding:14px;font-size:1rem;margin-top:2px}
.form .tiny{font-size:.76rem;margin-top:10px}
@media(max-width:640px){.form{padding:22px 18px}}

/* website hero: launch checks run ONCE, tick off, then stop */
.scanbf .ln{opacity:0;animation:none}
.scanbf.go .ln{animation:sc1 3.4s ease-in-out forwards}
@keyframes sc1{0%{top:34px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 4px);opacity:0}}
.scanbf .wire{opacity:0;animation:none}
.scanbf.go .wire{animation:wf1 3.4s ease forwards}
@keyframes wf1{0%{opacity:0}15%{opacity:.9}85%{opacity:.5}100%{opacity:0}}
.scanbf .tags span{opacity:.55;transition:.4s;display:inline-flex;align-items:center;gap:7px}
.scanbf .tags span::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(155,208,91,.5);flex:none;transition:.3s}
.scanbf .tags span.on{opacity:1;box-shadow:0 0 22px rgba(155,208,91,.55);border-color:var(--coral)}
.scanbf .tags span.on::before{background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325102c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat;border-color:var(--coral)}
.scst{position:absolute;right:14px;top:48px;z-index:4;display:inline-flex;align-items:center;gap:9px;background:#0d0515;border:1px solid var(--gline);border-radius:99px;padding:7px 14px;font-family:var(--mono);font-size:.7rem;color:#e6dcee;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.scst i{width:8px;height:8px;border-radius:50%;background:#ffd166}
.scanbf.go .scst i{animation:ping 1.2s infinite}
.scanbf.done .scst{color:var(--coral);border-color:rgba(155,208,91,.6);box-shadow:0 0 22px rgba(155,208,91,.4)}
.scanbf.done .scst i{background:var(--coral);animation:none}
@media(max-width:700px){.scst{font-size:.62rem;right:8px;top:42px}}

/* process steps: dark glowing cards with a connector and CTA panel (like the PC Repairs process section) */
.steps-sec{background:radial-gradient(800px 420px at 50% 28%,rgba(155,208,91,.13),transparent 70%),var(--ink)}
.steps-sec .center .lead{max-width:560px;margin:0 auto}
.steps-sec .steps{margin-top:52px;gap:24px}
.steps-sec .st{overflow:visible;padding:30px 26px 30px;border-radius:24px;background-color:rgba(255,255,255,.05);border:1px solid rgba(155,208,91,.22)}
.steps-sec .st::before{top:14px;right:20px;color:rgba(155,208,91,.14);font-size:4.4rem}
.steps-sec .st::after{left:auto;right:-25px;top:56px;bottom:auto;width:26px;height:2px;background:var(--coral);box-shadow:0 0 10px var(--coral);opacity:.55;border-radius:2px;display:block}
.steps-sec .st:last-child::after{display:none}
.steps-sec .st:hover{transform:translateY(-8px)}
.steps-sec .st .sic{width:60px;height:60px;box-shadow:0 0 34px rgba(155,208,91,.6)}
.steps-sec .st h3{color:#fff}
.steps-sec .st p{color:var(--muted-d)}
.stepcta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:34px;padding:26px 30px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(155,208,91,.22);box-shadow:0 0 60px -26px rgba(155,208,91,.4)}
.stepcta b{display:block;font-family:var(--disp);font-size:1.35rem;color:#fff}
.stepcta p{color:var(--muted-d);margin-top:4px;max-width:520px}
.stepcta .acts{display:flex;flex-wrap:wrap;gap:12px}
.stepcta .btn{padding:13px 24px}
@media(max-width:1040px){.steps-sec .st::after{display:none}}
@media(max-width:700px){.stepcta{padding:22px 20px}.stepcta .acts{width:100%}.stepcta .btn{flex:1;justify-content:center}}

/* services grid (home) */
.svfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.svfilter button{padding:10px 22px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--muted);transition:.2s}
.svfilter button:hover{border-color:var(--coral-d);color:var(--ink)}
.svfilter button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(37,16,44,.6)}
.svgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.sv{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;transition:transform .25s,box-shadow .25s,border-color .25s,opacity .3s}
.sv:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(155,208,91,.9);background-image:radial-gradient(300px circle at var(--mx,50%) var(--my,0),rgba(155,208,91,.16),transparent 62%)}
.sv[hidden]{display:none}
.svtag{position:absolute;right:18px;top:20px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-d);background:var(--coral-soft);border-radius:99px;padding:4px 10px}
.sv .ic{width:56px;height:56px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 0 26px rgba(155,208,91,.5)}
.sv .ic svg{width:26px;height:26px}
.sv h3{font-size:1.28rem;margin-bottom:8px;color:var(--ink)}
.sv p{color:var(--muted);font-size:.95rem;line-height:1.5}
.sv ul{list-style:none;display:grid;gap:7px;margin:16px 0 18px;font-size:.9rem;flex:1}
.sv li{display:flex;gap:9px;align-items:flex-start;color:var(--text)}
.sv li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:7px}
.sv .link{font-size:.92rem}
.sv.sw2{background:var(--ink);border-color:var(--ink)}
.sv.sw2 h3{color:#fff}.sv.sw2 p{color:var(--muted-d)}.sv.sw2 li{color:#e6dcee}.sv.sw2 .link{color:var(--coral)}.sv.sw2 .svtag{background:rgba(155,208,91,.16);color:var(--coral)}
.sv.sw2:hover{border-color:var(--coral)}
@media(max-width:1180px){.svgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.svgrid{grid-template-columns:1fr}.svtag{top:18px}}
.sec:not(.ink):not(.ink2) .sv.sw2 h3{color:#fff}
.sec:not(.ink):not(.ink2) .sv.sw2 .link{color:var(--coral)}
.cream .prow li{background:#fff}
.hero.inner+.strip{border-radius:0}

/* ===== service cards v2 (illustrated, fully clickable) ===== */
.svgrid{gap:22px}
.sv{padding:0;overflow:hidden;cursor:pointer}
.sv-vis{position:relative;height:150px;background:var(--ink);background-image:linear-gradient(rgba(155,208,91,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.07) 1px,transparent 1px);background-size:28px 28px;display:grid;place-items:center;overflow:hidden}
.sv-vis svg{width:88%;height:auto;max-height:132px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sv:hover .sv-vis svg{transform:scale(1.07)}
.sv-vis .svtag{position:absolute;left:14px;top:12px;right:auto}
.sv-b{display:flex;flex-direction:column;padding:22px 24px 24px;flex:1}
.sv .ic{display:none}
.sv h3{font-size:1.3rem}
.sv .link::after{content:"";position:absolute;inset:0;z-index:2}
.sv .link{position:static}
.sv:hover .link{gap:12px}
.sv.sw2 .sv-vis{background-color:#3a1c47}
/* service page hero visual + helpers */
.svv{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--gline);border-radius:26px;padding:26px;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 80px -20px rgba(155,208,91,.3);background-image:linear-gradient(rgba(155,208,91,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.06) 1px,transparent 1px);background-size:34px 34px}
.svv svg{width:100%;height:auto;display:block}
.svv .chip{position:absolute;right:-12px;top:-18px;left:auto}
.xl{list-style:none;display:grid;gap:12px;margin:18px 0 0}
.xl li{display:flex;gap:12px;align-items:flex-start;color:var(--text)}
.xl li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#f3d9d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3392a' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:2px}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.rel{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.rel:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(155,208,91,.9)}
.rel .ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 22px rgba(155,208,91,.45)}
.rel .ic svg{width:24px;height:24px}
.rel b{display:block;font-family:var(--disp);font-size:1.12rem;color:var(--ink)}
.rel small{display:block;color:var(--muted);font-size:.88rem;line-height:1.4;margin-top:2px}
.rel .go{margin-left:auto;flex:none;color:var(--coral-d)}
.rel .go svg{width:20px;height:20px}
@media(max-width:1040px){.relgrid{grid-template-columns:1fr}.svv{max-width:560px;margin:0 auto;width:100%}.svv .chip{right:6px}}

/* ===== example system (software hero): a mini working app ===== */
.sapp{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--gline);border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 80px -20px rgba(155,208,91,.3);backdrop-filter:blur(10px)}
.sapp-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--mono);font-size:.7rem;color:var(--muted-d)}
.sapp-bar i{width:10px;height:10px;border-radius:50%;background:#ff7a66}.sapp-bar i:nth-child(2){background:#ffc65a}.sapp-bar i:nth-child(3){background:#6fcf7c}
.sapp-bar span{margin-left:8px;flex:1}.sapp-bar em{font-style:normal;color:var(--coral);border:1px solid var(--gline);border-radius:99px;padding:2px 10px;font-size:.62rem}
.sapp-body{display:grid;grid-template-columns:150px 1fr;min-height:340px}
.sapp-nav{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border-right:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.sn-b{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted-d);font-family:var(--disp);font-weight:700;font-size:.9rem;text-align:left;transition:.2s}
.sn-b svg{width:18px;height:18px;flex:none}
.sn-b:hover{background:rgba(255,255,255,.07);color:#fff}
.sn-b.on{background:var(--coral);color:var(--ink);box-shadow:0 0 22px rgba(155,208,91,.45)}
.sapp-main{position:relative;padding:18px 20px 20px;color:#e6dcee}
.pn{display:none;animation:pnin .45s ease}
.pn.on{display:block}
@keyframes pnin{from{opacity:0;transform:translateY(10px)}}
.pn h4{font-size:1.15rem;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.pn h4 em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--coral);border:1px solid var(--gline);border-radius:99px;padding:2px 9px}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kp>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 12px}
.kp small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--muted-d)}
.kp b{display:block;font-family:var(--disp);font-size:1.4rem;color:#fff;margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:9px;height:110px;margin-top:16px;padding:0 4px}
.bars i{flex:1;background:var(--coral);border-radius:6px 6px 0 0;box-shadow:0 0 14px rgba(155,208,91,.4);transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
.bars i:nth-child(2){animation-delay:.06s}.bars i:nth-child(3){animation-delay:.12s}.bars i:nth-child(4){animation-delay:.18s}.bars i:nth-child(5){animation-delay:.24s}.bars i:nth-child(6){animation-delay:.3s}.bars i:nth-child(7){animation-delay:.36s}
@keyframes grow{from{transform:scaleY(0)}}
.bc{font-size:.76rem;color:var(--muted-d);margin-top:10px}
.tb{display:grid;gap:8px}
.tb>div{display:grid;grid-template-columns:1.5fr auto .8fr;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px}
.tb b{color:#fff;font-size:.9rem}.tb b small{color:var(--muted-d);font-weight:400}
.tb small{color:var(--muted-d);font-size:.76rem;text-align:right}
.chp{font-family:var(--mono);font-size:.62rem;border-radius:99px;padding:3px 10px;border:1px solid rgba(255,255,255,.18);color:#e6dcee}
.chp.active,.chp.paid{background:rgba(155,208,91,.16);border-color:rgba(155,208,91,.5);color:var(--coral)}
.chp.onboarding,.chp.due,.chp.draft{background:rgba(255,200,90,.12);border-color:rgba(255,200,90,.45);color:#ffd166}
.chp.overdue{background:rgba(255,122,102,.14);border-color:rgba(255,122,102,.5);color:#ff9d8a}
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kc{background:rgba(255,255,255,.04);border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start}
.kc>small{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted-d)}
.k{background:rgba(255,255,255,.09);border-radius:9px;padding:9px 10px}
.k.g{background:rgba(155,208,91,.16);box-shadow:inset 0 0 0 1px rgba(155,208,91,.5)}
.k b{display:block;font-size:.8rem;color:#fff;line-height:1.25}.k small{display:block;font-size:.68rem;color:var(--muted-d);margin-top:2px}
.cfc{display:flex;align-items:flex-end;gap:12px;height:150px;padding:6px 4px 0}
.cfc>div{flex:1;height:100%;display:flex;align-items:flex-end;gap:4px;position:relative}
.cfc i{flex:1;border-radius:5px 5px 0 0;transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
.cfc i.in{background:var(--coral)}.cfc i.out{background:#d7b4e6}
.cfc small{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:.64rem;color:var(--muted-d)}
.lg{display:inline-block;width:9px;height:9px;border-radius:3px;margin:0 6px 0 12px}.lg.in{background:var(--coral)}.lg.out{background:#d7b4e6}
.sapp .bc{margin-top:26px}
.sapp-foot{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid rgba(255,255,255,.08);background:rgba(155,208,91,.08);font-size:.82rem;color:#e6dcee}
.sapp-foot .d{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px var(--coral)}
@media(max-width:700px){
  .sapp-body{grid-template-columns:1fr}
  .sapp-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:10px}
  .sn-b{white-space:nowrap;padding:8px 12px}.sn-b svg{display:none}
  .kb{grid-template-columns:1fr}.kp b{font-size:1.1rem}.tb>div{grid-template-columns:1fr auto}.tb>div>small{display:none}
}

/* partner company page */
.pair{position:relative;display:grid;gap:14px;padding:26px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--gline);border-radius:26px;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 80px -20px rgba(155,208,91,.3)}
.pair>div{border-radius:18px;padding:18px 20px}
.pair small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--muted-d)}
.pair b{display:block;font-family:var(--disp);font-size:1.4rem;color:#fff;margin:4px 0 2px}
.pair span{color:var(--muted-d);font-size:.92rem}
.pc1{background:#59315f;border:1px solid rgba(255,255,255,.14)}
.pc2{background:rgba(155,208,91,.1);border:1px solid rgba(155,208,91,.5);box-shadow:0 0 34px rgba(155,208,91,.25)}
.pc3{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22)}
.pc3 b{font-size:1.15rem}
.plink{display:grid;place-items:center;height:30px;margin:-4px 0}
.plink span{width:46px;height:46px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 30px rgba(155,208,91,.7);animation:pulse 2.8s ease-in-out infinite}
.plink svg{width:22px;height:22px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.creds span{font-family:var(--mono);font-size:.7rem;border:1px solid var(--gline);color:var(--coral);background:rgba(155,208,91,.08);border-radius:99px;padding:6px 13px}
@media(max-width:1040px){.pair{max-width:560px;margin:0 auto;width:100%}}

/* nine services: three across; command centre sits a touch higher */
.svgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1040px){.svgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.svgrid{grid-template-columns:1fr}}
.hero .cc{position:relative;top:-26px}
@media(max-width:1040px){.hero .cc{top:0}}

/* moving strip: Kingsgrove plum instead of green */
.strip{background:#59315f;color:#fff;box-shadow:none;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.strip .mq span::after{background:var(--coral);box-shadow:0 0 10px rgba(155,208,91,.8)}

/* section label pills removed everywhere */
.eyebrow{display:none!important}
.hero.inner h1,.ph-hero h1{margin-top:0!important}
.center>h2.t:first-child,.rv>h2.t:first-child{margin-top:0}

/* services section sits a little higher on the home page */
.strip+#services.sec{padding-top:44px!important}
#services .center h2.t{margin-top:0}
@media(max-width:700px){.strip+#services.sec{padding-top:40px!important}}
.strip+#services.sec{padding-top:64px!important}
@media(max-width:700px){.strip+#services.sec{padding-top:52px!important}}

/* partner companies: wide featured card */
.sv.wide{grid-column:1/-1;flex-direction:row}
.sv.wide .sv-vis{flex:0 0 42%;height:auto;min-height:250px}
.sv.wide .sv-vis svg{width:80%;max-height:200px}
.sv.wide .sv-b{justify-content:center;padding:30px 34px}
.sv.wide h3{font-size:1.7rem}
.sv.wide p{font-size:1.02rem;max-width:560px}
.sv.partner{background:#59315f;border-color:#59315f}
.sv.partner .sv-vis{background-color:#3a1c47}
.sec:not(.ink):not(.ink2) .sv.partner h3{color:#fff}
.sv.partner p{color:#e6dcee}.sv.partner li{color:#fff}
.sec:not(.ink):not(.ink2) .sv.partner .link{color:var(--coral)}
.sv.partner .svtag{background:rgba(155,208,91,.18);color:var(--coral)}
.sv.partner:hover{border-color:var(--coral)}
@media(max-width:1040px){.sv.wide{flex-direction:column}.sv.wide .sv-vis{flex:none;min-height:170px}.sv.wide .sv-b{padding:22px 24px 24px}}

/* B2B vs B2C comparison */
.bbt{margin-top:46px;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.bbh,.bbr{display:grid;grid-template-columns:170px 1fr 1fr}
.bbh>div{padding:24px 28px}
.bbh small{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;opacity:.8}
.bbh b{display:block;font-family:var(--disp);font-size:2rem;line-height:1.1;margin-top:4px}
.hb2b{background:#25102c;color:#fff}.hb2b small{color:var(--coral)}
.hb2c{background:var(--coral);color:var(--ink)}
.bbr{border-top:1px solid var(--line);transition:background .2s}
.bbr:hover{background:#f6faee}
.bbr>b{padding:22px 20px 22px 26px;font-family:var(--disp);color:var(--ink);font-size:1rem;align-self:center}
.bbr>p{padding:22px 28px;color:var(--muted);font-size:.97rem;line-height:1.55;border-left:1px solid var(--line)}
.bbr>p i{display:none;font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--coral-d);margin-bottom:6px}
.bboth{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;padding:26px 30px;border-radius:22px;background:var(--cream);border:1px solid var(--line)}
.bboth b{display:block;font-family:var(--disp);font-size:1.3rem;color:var(--ink)}
.bboth p{color:var(--muted);margin-top:4px;max-width:640px}
@media(max-width:860px){
  .bbh,.bbr{grid-template-columns:1fr 1fr}
  .bbh>span{display:none}
  .bbr>b{grid-column:1/-1;padding:18px 22px 0}
  .bbr>p{border-left:0;padding:12px 22px 18px}.bbr>p+p{border-left:1px solid var(--line)}
}
@media(max-width:560px){
  .bbh,.bbr{grid-template-columns:1fr}
  .bbr>p+p{border-left:0;padding-top:0}
  .bbr>p i{display:block}
  .bbh>div{padding:16px 22px}
}
.sec:not(.ink):not(.ink2) h2 .acc{color:var(--coral-d)}

/* partner hero v2: two company cards joined, Xcentrix underneath */
.pair2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:26px 24px 24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--gline);border-radius:28px;box-shadow:0 0 0 1px rgba(155,208,91,.1),0 40px 90px -30px #000,0 0 90px -20px rgba(155,208,91,.3);background-image:linear-gradient(rgba(155,208,91,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.06) 1px,transparent 1px);background-size:34px 34px}
.co{position:relative;border-radius:20px;padding:22px 20px 20px;display:flex;flex-direction:column;min-height:272px}
.co small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:rgba(255,255,255,.65);margin-top:16px}
.co b{font-family:var(--disp);font-size:1.28rem;line-height:1.15;color:#fff;margin:4px 0 6px}
.co p{color:#e6dcee;font-size:.9rem;line-height:1.4}
.co ul{list-style:none;display:grid;gap:7px;margin-top:auto;padding-top:16px;font-size:.84rem;color:#fff}
.co li{display:flex;gap:9px;align-items:center}
.co li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.co .mk{width:58px;height:58px;display:grid;place-items:center;font-size:2.4rem;line-height:1}
.co-a{background:#59315f;border:1px solid rgba(255,255,255,.18)}
.co-a .mk{font-family:Georgia,'Times New Roman',serif;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.co-b{background:rgba(155,208,91,.1);border:1px solid rgba(155,208,91,.55);box-shadow:0 0 40px rgba(155,208,91,.22)}
.co-b .mk{font-family:var(--disp);font-weight:800;color:var(--ink);background:var(--coral);border-radius:14px;box-shadow:0 0 24px rgba(155,208,91,.6)}
.co::after{content:"";position:absolute;left:50%;bottom:-21px;width:2px;height:21px;background:repeating-linear-gradient(var(--coral) 0 4px,transparent 4px 8px);opacity:.7}
.jn{position:absolute;left:50%;top:128px;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;z-index:3;box-shadow:0 0 0 6px rgba(37,16,44,.9),0 0 34px rgba(155,208,91,.8);animation:pulse 2.8s ease-in-out infinite}
.jn svg{width:22px;height:22px}
.base{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px 20px;margin-top:6px;border-radius:16px;border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:var(--muted-d);font-size:.86rem}
.base b{font-family:var(--disp);font-size:1.25rem;color:#fff}
@media(max-width:1040px){.pair2{max-width:560px;margin:0 auto;width:100%}}
@media(max-width:560px){.pair2{grid-template-columns:1fr;padding:18px}.co{min-height:0}.co::after{display:none}.jn{top:auto;left:50%;transform:translate(-50%,-50%);position:relative;margin:-4px auto;top:0}}

/* outline buttons turn white on hover */
.btn.g:hover,.btn.g:focus-visible{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 10px 28px -10px rgba(255,255,255,.55)}

/* real logos on the partner card and partner hero */
.sv-vis.plogos{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px}
.plogos .ka{width:min(300px,82%);height:auto;display:block}
.plogos .pj{width:38px;height:38px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 26px rgba(155,208,91,.7);flex:none;animation:pulse 2.8s ease-in-out infinite}
.plogos .pj svg{width:19px;height:19px}
.logo.ours{display:flex;align-items:center;gap:12px;color:#fff}
.plogos .ours svg{height:44px;width:auto}
.sv.partner:hover .sv-vis svg{transform:none}
.co .kalogo{width:min(250px,100%);height:auto;display:block;align-self:flex-start;margin-bottom:2px}
.co .ours{align-self:flex-start;margin-bottom:4px}
.co .ours svg{height:46px;width:auto}
.co .ours b{font-family:var(--disp);font-size:1.12rem;margin:0;color:#fff}
.co .ours small{margin:2px 0 0;color:var(--coral);letter-spacing:.2em;font-size:.62rem}
.co-a .kalogo+small,.co-b .ours+small{margin-top:14px}
@media(min-width:1041px){.sv.wide .sv-vis.plogos{flex:0 0 44%}}
.sn .c{position:relative}
.sn .c svg{position:static;width:28px;height:28px;display:block}
.sn.core .c svg{width:44px;height:44px}
@media(max-width:760px){.sn .c svg{width:20px;height:20px}.sn.core .c svg{width:30px;height:30px}}

/* v7: tighter vertical spacing so pages are shorter */
.sec{padding:64px 0}
.sec.fit{padding:56px 0}
:is(.hero,.ph-hero,.sec.ink,.sec.ink2)+.sec:not(.ink):not(.ink2),
.sec:not(.ink):not(.ink2)+:is(.sec.ink,.sec.ink2),.strip+.sec{padding-top:64px!important}
.sec.fit:is(.cream,:not(.ink)){padding-top:56px!important}
.strip+#services.sec{padding-top:56px!important}
.hero{padding:56px 0 56px}
.hero.inner{padding-bottom:56px}
.own{padding:64px 0}
.ftr{padding-top:56px}
.sysmap{margin-top:28px;aspect-ratio:900/380}
.syscap{margin-top:16px;min-height:4.2em;font-size:1.02rem}
.syscap b{font-size:1.25rem}
.grid3,.grid2{margin-top:40px}
.steps-sec .steps{margin-top:40px}
.work{margin-top:40px}
.svgrid{margin-top:28px}
.svfilter{margin-top:26px}
.bbt{margin-top:34px}
@media(max-width:700px){
  .sec{padding:52px 0}.sec.fit{padding:46px 0}
  :is(.hero,.ph-hero,.sec.ink,.sec.ink2)+.sec:not(.ink):not(.ink2),
  .sec:not(.ink):not(.ink2)+:is(.sec.ink,.sec.ink2),.strip+.sec{padding-top:52px!important}
  .sysmap{aspect-ratio:auto}
}


/* systems map caption: its own strip */
.syscap{display:flex;align-items:center;gap:22px;text-align:left;max-width:900px;margin:30px auto 0;padding:22px 28px;border-radius:22px;background:rgba(155,208,91,.1);border:1px solid rgba(155,208,91,.5);box-shadow:0 0 50px -14px rgba(155,208,91,.55),inset 0 0 40px rgba(155,208,91,.05);min-height:0;font-size:1rem;color:#e6dcee}
.syscap .ci{flex:none;width:60px;height:60px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 28px rgba(155,208,91,.7)}
.syscap .ci svg{width:28px;height:28px;display:block}
.syscap .ct b{display:block;font-family:var(--disp);font-size:1.4rem;color:#fff;margin:0 0 4px}
.syscap .ct span{color:#e6dcee;font-size:1.02rem;line-height:1.5}
@media(max-width:700px){.syscap{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}}

/* bold statement under the portal viewer */
.bigline{font-family:var(--disp);font-weight:800;color:#fff;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.12;letter-spacing:-.02em;margin-top:30px;max-width:620px}
[data-viewer] .bf-bar::after{content:"Sample data";margin-left:auto;flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:#5b6472;background:#fff;border-radius:99px;padding:3px 10px}

/* ad dashboards in page sections: compact so the whole card fits one screen */
#ads .dash,#dashboards .dash{padding:16px;border-radius:20px}
#ads .dash-top,#dashboards .dash-top{margin-bottom:12px;gap:8px}
#ads .seg button,#dashboards .seg button{padding:7px 15px;font-size:.84rem}
#ads .kpis,#dashboards .kpis{gap:8px}
#ads .kpi,#dashboards .kpi{padding:10px 12px;border-radius:12px}
#ads .kpi small,#dashboards .kpi small{font-size:.7rem}
#ads .kpi b,#dashboards .kpi b{font-size:1.3rem;margin:2px 0 1px}
#ads .kpi em,#dashboards .kpi em{font-size:.7rem}
#ads .chart,#dashboards .chart{margin-top:10px;padding:10px 12px 4px;border-radius:12px}
#ads .chart-h,#dashboards .chart-h{font-size:.74rem}
#ads .chart svg,#dashboards .chart svg{height:112px}
#ads .camps,#dashboards .camps{margin-top:10px;gap:6px}
#ads .camp,#dashboards .camp{padding:8px 12px;font-size:.84rem;border-radius:10px;gap:10px}
#ads .camp.hd,#dashboards .camp.hd{padding:0 12px;font-size:.66rem}
#ads .camp .bar,#dashboards .camp .bar{height:6px}
#ads .dash .note,#dashboards .dash .note{margin-top:10px;font-size:.7rem}
#ads.sec{padding-top:48px;padding-bottom:48px}

/* hero phone: the ad fills the whole phone screen */
.mk .ph-s .adm{display:flex;flex-direction:column;height:100%;padding-top:20px}
.mk .ph-s .adm-img{flex:1;min-height:0;display:block}
.mk .ph-s .adm-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.mk .adm-sk{display:none}
.mk .ph-s .adm-f{flex:none}
@media(max-width:700px){
  .mk .phone{width:150px}
  .mk .ph-s .adm-f{padding:6px 7px;gap:4px}
  .mk .ph-s .adm-f b{font-size:8.5px}
  .mk .ph-s .adm-f u{font-size:8px;padding:4px 6px}
  .mk .ph-s .adm-h b{font-size:9.5px}
  .mk .ph-s .adm p{font-size:9px}
}

/* inner heroes: less empty space under the trust bar */
.hero.inner{padding:48px 0 22px}
.hero.inner .wrap{row-gap:26px}
.hero.inner .hbar{margin-top:0;padding-top:22px;padding-bottom:0}
.mk{padding-bottom:70px}
@media(max-width:1040px){.hero.inner{padding:40px 0 24px}}

/* "new lead" chip sits higher and further right, clear of the Lead form label */
.adstage .chip{right:-34px;top:-44px}
@media(max-width:1180px){.adstage .chip{right:-10px;top:-40px}}
@media(max-width:1040px){.adstage .chip{right:6px;top:-40px}}

/* Google Ads section v2: browser window with numbered pins */
.gads2{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.gcol .t{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:0 0 14px}
.gl{list-style:none;display:grid;gap:12px;margin-top:26px}
.gl li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:default}
.gl li:hover,.gl li.on{transform:translateX(6px);border-color:var(--coral-d);box-shadow:0 14px 30px -16px rgba(37,16,44,.4)}
.gl .n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--coral);display:grid;place-items:center;font-family:var(--disp);font-weight:800}
.gl li:hover .n,.gl li.on .n{background:var(--coral);color:var(--ink);box-shadow:0 0 18px rgba(155,208,91,.7)}
.gl b{display:block;font-family:var(--disp);font-size:1.1rem;color:var(--ink)}
.gl p{color:var(--muted);font-size:.94rem;line-height:1.45;margin-top:2px}
.gwin .bf{background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(37,16,44,.55),0 0 0 8px rgba(155,208,91,.18)}
.gwin .bf-bar{background:var(--ink)}
.gwin .bf-bar i{opacity:.9}
.gwin .bf-bar span{background:rgba(255,255,255,.12);color:#e6dcee}
.gbody{padding:20px 22px 8px;background:#fff}
.gbody .serp{box-shadow:none;border:0;padding:0}
.serp-r.hi{position:relative}
.gpin{position:absolute;left:-14px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--coral);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:.78rem;font-style:normal;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(37,16,44,.4);transition:.2s;z-index:2}
.gext{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gx{position:relative;display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;border:1px solid rgba(37,16,44,.25);border-radius:99px;padding:6px 14px 6px 22px;background:#fff;color:var(--ink);transition:.2s}
.gx.call{background:var(--ink);color:#fff;border-color:var(--ink)}
.gx .gpin{left:-10px;top:50%;transform:translateY(-50%);width:22px;height:22px;font-size:.68rem}
.gwin.hl1 .gpin[data-g="1"],.gwin.hl2 .gpin[data-g="2"],.gwin.hl3 .gpin[data-g="3"]{background:var(--coral);color:var(--ink);transform:scale(1.25) translateY(0);box-shadow:0 0 0 3px #fff,0 0 22px rgba(155,208,91,.9)}
.gwin.hl2 .gx[data-g="2"]{border-color:var(--coral-d);box-shadow:0 0 18px rgba(155,208,91,.6)}
.gwin.hl3 .gx[data-g="3"]{box-shadow:0 0 18px rgba(155,208,91,.8)}
.gwin.hl1 .serp-r.hi b{text-decoration:underline;text-decoration-color:var(--coral-d);text-underline-offset:4px;text-decoration-thickness:3px}
.gx .gpin[data-g="2"],.gx .gpin[data-g="3"]{transform:translateY(-50%)}
.gwin.hl2 .gx .gpin[data-g="2"],.gwin.hl3 .gx .gpin[data-g="3"]{transform:translateY(-50%) scale(1.25)}
@media(max-width:1040px){.gads2{grid-template-columns:1fr;gap:34px}.gpin{left:-8px}}
@media(max-width:560px){.gbody{padding:16px 16px 4px}.gpin{left:-6px}}

/* Google Ads section v3: white, roomy, clean colours */
#google.sec{background:#fff;padding:84px 0!important}
.gads2{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.gcol{padding-top:8px}
.gcol .t{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-bottom:18px}
.gcol .lead{font-size:1.12rem!important;line-height:1.6}
.gl{gap:16px;margin-top:34px}
.gl li{background:#fbf4ee;border:1px solid #efe4da;border-radius:18px;padding:22px 24px;gap:18px}
.gl .n{width:42px;height:42px;font-size:1.05rem}
.gl b{font-size:1.2rem}
.gl p{font-size:1rem;line-height:1.55;margin-top:4px}
.gl li:hover,.gl li.on{background:#fff;border-color:var(--coral-d)}
.gwin .bf{border:1px solid #e3d9ec;box-shadow:0 36px 80px -30px rgba(37,16,44,.5)}
.gwin .bf-bar{padding:14px 18px}
.gbody{padding:34px 38px 20px}
.gbody .serp-chips{gap:10px;margin-bottom:22px}
.gbody .serp-chips button{padding:9px 18px;font-size:.92rem}
.gbody .serp-q{padding:16px 24px;font-size:1.08rem;margin-bottom:26px}
.gbody .serp-r{padding:22px 24px}
.gbody .serp-r small{font-size:.86rem}
.gbody .serp-r b{font-size:1.4rem;margin:6px 0 8px;line-height:1.28}
.gbody .serp-r p{font-size:1.02rem;line-height:1.55}
.gbody .serp-r.hi{background:#f7f2fb;border:1px solid #e7dcf2;border-left:5px solid var(--coral);border-radius:14px;margin-bottom:12px;padding-left:30px}
.gbody .serp-r.hi:hover{background:#f2eafa}
.gbody .serp-r:not(.hi){border-top:0}
.gext{gap:12px;margin-top:18px}
.gx{font-size:.9rem;padding:9px 18px 9px 28px}
.gx .gpin{width:26px;height:26px;left:-12px;font-size:.78rem}
.gpin{left:-20px;top:22px}
.gbody .note2{margin-top:22px;padding-top:16px;font-size:.84rem}
@media(max-width:1180px){.gads2{gap:44px}}
@media(max-width:1040px){.gads2{grid-template-columns:1fr}#google.sec{padding:64px 0!important}.gbody{padding:26px 24px 14px}}
@media(max-width:560px){.gbody{padding:20px 16px 10px}.gbody .serp-r{padding:18px 16px 18px 24px}.gbody .serp-r b{font-size:1.18rem}.gl li{padding:18px}.gpin{left:-14px}}

/* websites hero v3: clean stack of real sites, checklist underneath */
.wstack{position:relative;aspect-ratio:1.12;max-width:620px;margin-left:auto;width:100%}
.wstack .bf{border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -26px rgba(0,0,0,.8)}
.wstack .bf img{filter:none}
.ws-back{position:absolute;left:0;top:2%;width:62%;opacity:.92;z-index:1}
.ws-main{position:absolute;right:0;top:15%;width:80%;z-index:2}
.ws-phone{position:absolute;right:-2%;bottom:12%;width:24%;z-index:3;transform:rotate(3deg)}
.ws-phone .ph-s{border-radius:26px;border-width:6px}
.ws-phone .ph-s img{aspect-ratio:390/844;object-fit:cover;object-position:top}
.wstack .tags{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:10px}
.wstack .tags span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;color:var(--muted-d);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:8px 14px;transition:.4s}
.wstack .tags span::before{content:"";width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex:none;transition:.3s}
.wstack .tags span.on{color:#fff;border-color:var(--coral);background:rgba(155,208,91,.12);box-shadow:0 0 18px rgba(155,208,91,.4)}
.wstack .tags span.on::before{background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325102c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat;border-color:var(--coral)}
@media(max-width:1040px){.wstack{margin:0 auto;max-width:560px}}
@media(max-width:560px){.wstack{aspect-ratio:1}.wstack .tags span{font-size:.64rem;padding:6px 10px}}

/* websites: logo band under the hero */
.lband{background:#fff}
.lbh{font-family:var(--disp);font-weight:700;color:var(--muted);text-align:center;margin:0 0 20px;font-size:.98rem;letter-spacing:.01em}
.lw{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.lt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 12px 14px;border:1px solid var(--line);border-radius:18px;background:#fff;min-height:134px;transition:transform .25s,box-shadow .25s,border-color .25s}
.lt img{height:56px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.lt small{font-size:.78rem;color:var(--muted);text-align:center}
.lt:hover{transform:translateY(-5px);border-color:rgba(155,208,91,.9);box-shadow:var(--shadow)}
.lt:hover img{filter:none;opacity:1}
.lt-w{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:1.3rem;color:#2f7f86;filter:grayscale(1);opacity:.72;transition:.3s}
.lt-w i{width:26px;height:26px;border-radius:50%;background:#2f7f86;flex:none}
.lt:hover .lt-w{filter:none;opacity:1}
@media(max-width:1040px){.lw{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.lw{grid-template-columns:repeat(2,1fr)}.lt{min-height:120px}}

/* logo band: full colour always, smaller tiles, sits a little lower */
.lband{padding:52px 0 40px!important}
.lbh{font-size:.9rem;margin-bottom:16px}
.lw{gap:12px;max-width:980px;margin:0 auto}
.lt{min-height:92px;padding:12px 10px 10px;gap:7px;border-radius:14px}
.lt img{height:38px;filter:none;opacity:1}
.lt small{font-size:.7rem}
.lt-w{filter:none;opacity:1;font-size:1.08rem}
.lt-w i{width:20px;height:20px}
.lt:hover{transform:translateY(-3px)}
@media(max-width:560px){.lt{min-height:84px}.lt img{height:34px}}

/* logo tiles back to a comfortable size; hero much shorter */
.lband{padding:30px 0 34px!important}
.lw{max-width:1100px;gap:14px}
.lt{min-height:118px;padding:16px 12px 12px;gap:9px;border-radius:16px}
.lt img{height:50px}
.lt small{font-size:.76rem}
.lt-w{font-size:1.25rem}.lt-w i{width:24px;height:24px}
.lt:hover{transform:translateY(-4px)}
.hero.inner{padding:30px 0 14px}
.hero.inner .wrap{row-gap:18px}
.hero.inner h1{font-size:clamp(2.1rem,4vw,3.4rem)}
.hero.inner .lead{font-size:1.08rem!important}
.wstack{aspect-ratio:1.45;max-width:540px}
.ws-back{top:0;width:58%}
.ws-main{top:9%;width:80%}
.ws-phone{width:21%;bottom:15%}
@media(max-width:1040px){.hero.inner{padding:30px 0 18px}.wstack{aspect-ratio:1.2}}
@media(max-width:560px){.wstack{aspect-ratio:1.05}.lt{min-height:100px}.lt img{height:42px}}

/* websites hero stack: fixed height, checklist always clear of the screenshots */
.wstack{aspect-ratio:auto;height:336px;max-width:540px}
.ws-back{top:0;width:52%}
.ws-main{top:6%;width:72%}
.ws-phone{width:20%;bottom:17%;right:0}
@media(max-width:1040px){.wstack{aspect-ratio:auto;height:340px}}
@media(max-width:560px){.wstack{aspect-ratio:auto;height:290px}.ws-main{width:76%}}
.wstack{height:356px}
.ws-main{top:3%;width:70%}
.ws-back{width:50%}
@media(max-width:1040px){.wstack{height:360px}}
@media(max-width:560px){.wstack{height:300px}}

/* logo strip sits at the bottom of the Websites page */
.lband{padding:28px 0 30px!important;border-top:1px solid var(--line)}
.lbh{margin-bottom:14px}
.lt{min-height:104px}

/* software page: one story, each section fits a screen */
.f4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.f4i{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px 24px;box-shadow:0 18px 40px -26px rgba(37,16,44,.35)}
.f4i .n{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:#8a7894}
.f4i .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(155,208,91,.2);color:var(--coral-d);margin-bottom:16px}
.f4i .ic svg{width:24px;height:24px}
.f4i h3{font-size:1.18rem;color:var(--ink);margin:0 0 8px}
.f4i p{color:#5a4a63;font-size:.96rem;line-height:1.55;margin:0}
.f4i[data-last]{background:var(--ink);border-color:var(--ink)}
.f4i[data-last] h3{color:#fff}.f4i[data-last] p{color:#d8cce0}.f4i[data-last] .n{color:#b9a9c4}
.f4i[data-last] .ic{background:var(--coral);color:var(--ink);box-shadow:0 0 24px rgba(155,208,91,.5)}
.f4s h2.t{max-width:900px;margin-inline:auto}
@media(max-width:1040px){.f4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.f4{grid-template-columns:1fr}}
.aip{background:rgba(255,255,255,.06);border:1px solid var(--gline);border-radius:22px;padding:26px 28px;box-shadow:0 30px 70px -30px #000}
.aip>small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--coral);margin-bottom:14px}
.aip .ck li{margin:0 0 12px}
.aif{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:#fff;font-weight:600;font-size:.94rem}
.aif .d{width:10px;height:10px;border-radius:50%;background:#ffd166;box-shadow:0 0 12px #ffd166}
.aiimp .acts{margin-top:22px}
/* fit rules */
.sysfit{padding:52px 0!important}
.sysfit .lead{max-width:760px;margin-inline:auto}
.sysfit .sysmap{aspect-ratio:900/320;margin-top:14px}
.sysfit .syscap{margin-top:14px;padding:16px 24px;min-height:0}
.sysfit .syscap .ci{width:50px;height:50px}
#proof.fit{padding:48px 0!important}
#proof .lead{font-size:1.02rem}
#proof .ck li{margin-bottom:10px}
#proof .bf img{aspect-ratio:16/8.6}
#proof .tabs{gap:6px;margin-top:14px}
#proof .tabs button{padding:7px 13px;font-size:.82rem}
#proof .cap{margin-top:10px;min-height:0;font-size:.88rem}
#proof .bigline{margin-top:16px;font-size:clamp(1.4rem,2.3vw,1.95rem)}

/* three-person team */
.team{grid-template-columns:repeat(3,1fr)}
.team .tm{grid-template-columns:1fr;gap:18px;align-items:start;align-content:start}
.team .tm .ph{aspect-ratio:4/4.3;max-width:none}
.team .tm .ph img{object-position:center 25%}
@media(max-width:1040px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.team{grid-template-columns:1fr}.team .tm .ph{max-width:none}}
.f4i[data-last] h3{color:#fff!important}
.f4i[data-last] p{color:#d8cce0!important}
.f4i[data-last] .n{color:#b9a9c4!important}

/* hero example: problem > system > solution > yours */
.sapp-body{grid-template-columns:170px 1fr}
.sn-b{white-space:nowrap}
.obs.bad li{color:#e9dff0}
.obs.bad li::before{border-color:#ff8a7a;background:rgba(255,138,122,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a7a' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mods>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:rgba(255,255,255,.06);border:1px solid var(--gline);border-radius:14px;padding:14px}
.mods .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(155,208,91,.14);color:var(--coral)}
.mods .ic svg{width:18px;height:18px}
.mods b{font-family:var(--disp);font-size:.92rem;color:#fff}

/* find/build/own strip: white and compact */
.sec.f4s,.sec.cream.f4s{background:#fff!important;padding:38px 0 40px!important}
.f4s .eyebrow{display:none}
.f4s h2.t{font-size:clamp(1.5rem,2.4vw,2rem)!important;max-width:none!important;margin:0!important;white-space:nowrap}
.f4s .f4{margin-top:22px;gap:14px}
.f4s .f4i{padding:18px 18px 16px;background:#faf6f3;box-shadow:none;border-radius:16px;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
.f4s .f4i .ic{width:40px;height:40px;margin:0;grid-row:1/3}
.f4s .f4i .ic svg{width:20px;height:20px}
.f4s .f4i h3{font-size:1.05rem;margin:0 0 4px}
.f4s .f4i p{font-size:.88rem;line-height:1.45}
.f4s .f4i .n{top:12px;right:14px}
.f4s .f4i[data-last]{background:var(--ink)}
@media(max-width:1040px){.f4s h2.t{white-space:normal}}
.f4s .f4i h3{padding-right:26px}

/* hero example lists (cards) */
.obs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.obs li{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:15px 16px;color:#e9dff0;font-size:.98rem;line-height:1.3}
.obs li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.28)}
.obs li.ok{color:#fff}
.obs li.ok::before{background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325102c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--coral)}
.obs.bad li{border-color:rgba(255,138,122,.28);background:rgba(255,138,122,.07)}
.pn .bc.sf{margin-top:16px;color:var(--coral);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.f4s .f4i{align-content:start;grid-template-rows:auto 1fr}
.f4s .f4i h3{padding-right:30px}

/* system panel tiles (clean, equal) */
.sapp .mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.sapp .mods>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:96px;padding:16px 8px;background:rgba(255,255,255,.06);border:1px solid var(--gline);border-radius:16px}
.sapp .mods .mi{position:static;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(155,208,91,.16);color:var(--coral);box-shadow:0 0 18px rgba(155,208,91,.25)}
.sapp .mods .mi svg{position:static;width:22px;height:22px;display:block}
.sapp .mods b{font-family:var(--disp);font-size:.95rem;line-height:1.1;color:#fff;white-space:nowrap}
.sapp .pn .bc{margin-top:14px;font-size:.88rem}

/* hero visual: before > after */
.b2a{width:100%;max-width:560px;margin-left:auto;display:grid;gap:14px}
.b2a small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#b9a9c4;margin-bottom:10px}
.b2a-before{background:rgba(255,138,122,.07);border:1px solid rgba(255,138,122,.28);border-radius:20px;padding:16px 18px 18px}
.b2a-before small{color:#ff9d8f}
.b2a .chips{display:flex;flex-wrap:wrap;gap:9px 10px}
.b2a .chips span{display:inline-block;transform:rotate(var(--r));background:rgba(255,255,255,.08);border:1px dashed rgba(255,138,122,.55);color:#f1e6f5;border-radius:10px;padding:8px 12px;font-size:.86rem;animation:wob 4.2s ease-in-out var(--d) infinite}
@keyframes wob{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(calc(var(--r) * -.6)) translateY(-3px)}}
.b2a-mid{display:flex;align-items:center;gap:12px}
.b2a-mid i{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--coral) 0 6px,transparent 6px 12px);opacity:.6;animation:dash 1.4s linear infinite}
.b2a-mid span{flex:none;background:var(--coral);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:.86rem;padding:8px 16px;border-radius:99px;box-shadow:0 0 26px rgba(155,208,91,.5)}
.b2a-after{position:relative;background:rgba(155,208,91,.07);border:1px solid var(--gline);border-radius:20px;padding:16px 18px 20px;box-shadow:0 0 60px -10px rgba(155,208,91,.25)}
.b2a-after small{color:var(--coral)}
.b2a-after .bf img{aspect-ratio:16/6.6;width:100%;object-fit:cover;object-position:top}
.ftag{position:absolute;display:flex;align-items:center;gap:8px;background:var(--ink);border:1px solid var(--gline);color:#fff;font-family:var(--disp);font-weight:700;font-size:.82rem;padding:7px 12px 7px 9px;border-radius:99px;box-shadow:0 14px 30px -10px #000,0 0 18px rgba(155,208,91,.3);animation:flt 5s ease-in-out infinite}
.ftag svg{width:16px;height:16px;color:var(--coral)}
.ftag.t1{top:44px;right:-10px}.ftag.t2{top:118px;left:-12px;animation-delay:-1.6s}.ftag.t3{bottom:58px;right:-10px;animation-delay:-3.1s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.own-b{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:var(--coral);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:.9rem;padding:9px 18px;border-radius:99px;box-shadow:0 0 30px rgba(155,208,91,.6);white-space:nowrap}
.own-b svg{width:17px;height:17px}
@media(max-width:1040px){.b2a{margin:10px auto 0;max-width:520px}.ftag.t1,.ftag.t3{right:6px}.ftag.t2{left:6px}}
@media(max-width:520px){.b2a .chips span{font-size:.8rem;padding:7px 10px}.ftag{font-size:.74rem}}
.b2a{margin-bottom:22px}
.hero.inner:has(.b2a){padding-bottom:56px}
.sv.partner .plogos .ka,.plogos .ka{width:min(300px,82%)}

/* hero: problem -> solution pairs */
.b2a2{width:100%;max-width:560px;margin-left:auto;margin-bottom:22px;background:rgba(255,255,255,.04);border:1px solid var(--gline);border-radius:22px;padding:18px 18px 16px;box-shadow:0 0 70px -14px rgba(155,208,91,.28)}
.b2h{display:grid;grid-template-columns:1fr 26px 1fr;gap:10px;margin-bottom:12px}
.b2h small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;grid-column:1}
.b2h small.good{grid-column:3;color:var(--coral)}.b2h small.bad{color:#ff9d8f}
.b2r{display:grid;grid-template-columns:1fr 26px 1fr;gap:10px;align-items:center;margin-bottom:9px}
.b2r .pb{display:flex;align-items:center;min-height:46px;transform:rotate(var(--r));background:rgba(255,138,122,.1);border:1px dashed rgba(255,138,122,.55);color:#f6e6ee;border-radius:11px;padding:8px 12px;font-size:.88rem;line-height:1.25;animation:wob 4.2s ease-in-out var(--d) infinite}
.b2r .ar{display:grid;place-items:center;color:var(--coral)}
.b2r .ar svg{width:20px;height:20px;animation:nudge 1.6s ease-in-out infinite}
.b2r .sb{display:flex;align-items:center;gap:9px;min-height:46px;background:var(--coral);color:var(--ink);border-radius:11px;padding:8px 12px;font-family:var(--disp);font-weight:800;font-size:.9rem;line-height:1.2;box-shadow:0 8px 22px -10px rgba(155,208,91,.7)}
.b2r .sb svg{flex:none;width:18px;height:18px}
.b2f{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--gline)}
.b2f .step{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:.82rem;color:#fff;line-height:1.2}
.b2f .step b{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(155,208,91,.2);color:var(--coral);display:grid;place-items:center;font-size:.78rem}
.b2f .step b svg{width:13px;height:13px}
.b2f .step.own{color:var(--ink);background:var(--coral);border-radius:99px;padding:6px 10px}
.b2f .step.own b{background:var(--ink);color:var(--coral)}
@keyframes nudge{50%{transform:translateX(3px)}}
@media(max-width:520px){.b2a2{padding:14px 12px}.b2h,.b2r{grid-template-columns:1fr 20px 1fr;gap:6px}.b2r .pb,.b2r .sb{font-size:.78rem;padding:7px 8px;min-height:50px}.b2r .sb svg{display:none}.b2f{grid-template-columns:1fr}.b2f .step.own{justify-self:start}}

/* hero v3: any problem, any software */
.b2a2 .b2h{display:block;margin-bottom:10px}
.b2a2 .b2h small{display:block}
.pcl,.scl{display:flex;flex-wrap:wrap;gap:8px 9px}
.pcl .pb{display:inline-flex;min-height:0;padding:7px 11px;font-size:.84rem;transform:rotate(var(--r))}
.pcl .pb.open{border-style:solid;background:rgba(255,138,122,.2);font-weight:700}
.scl .sb{display:inline-flex;min-height:0;padding:7px 11px 7px 9px;font-size:.84rem;gap:7px;border-radius:99px}
.scl .sb svg{width:15px;height:15px}
.scl .sb.open{background:#fff;box-shadow:0 0 0 2px var(--coral),0 8px 22px -8px rgba(155,208,91,.8)}
.b2m{display:flex;align-items:center;gap:10px;margin:16px 0 14px}
.b2m i{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--coral) 0 6px,transparent 6px 12px);opacity:.6;animation:dash 1.4s linear infinite}
.b2m span{flex:none;background:var(--ink);border:1px solid var(--coral);color:#fff;font-family:var(--disp);font-weight:800;font-size:.86rem;padding:8px 16px;border-radius:99px;box-shadow:0 0 24px rgba(155,208,91,.35)}
@media(max-width:520px){.pcl .pb,.scl .sb{font-size:.78rem}.b2m span{font-size:.78rem;padding:7px 12px}}
.b2a2 .pb{background:rgba(255,138,122,.1);border:1px dashed rgba(255,138,122,.55);color:#f6e6ee;border-radius:10px;line-height:1.25;animation:wob 4.2s ease-in-out var(--d) infinite}
.b2a2 .sb{align-items:center;background:var(--coral);color:var(--ink);font-family:var(--disp);font-weight:800;line-height:1.2;box-shadow:0 8px 22px -10px rgba(155,208,91,.7)}
.b2a2 .sb svg{flex:none}
.b2a2 .scl .sb.open{background:#fff;color:var(--ink)}
.b2a2 .b2h small.bad{color:#ff9d8f}.b2a2 .b2h small.good{color:var(--coral)}
.b2a2 .pcl .pb,.b2a2 .scl .sb{padding-top:8px;padding-bottom:8px}

/* hero v4: compact, side by side (matches the other service heroes' height) */
.b2a2{max-width:640px;display:grid;grid-template-columns:1fr 62px 1fr;gap:0 8px;padding:16px 16px 18px;align-items:start;margin-bottom:0}
.b2a2 .b2col small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;margin-bottom:10px}
.b2a2 .b2col small.bad{color:#ff9d8f}.b2a2 .b2col small.good{color:var(--coral)}
.b2a2 .pcl,.b2a2 .scl{gap:7px 7px}
.b2a2 .pcl .pb,.b2a2 .scl .sb{font-size:.78rem;padding:6px 9px}
.b2a2 .scl .sb{padding:6px 9px 6px 7px;gap:5px}.b2a2 .scl .sb svg{width:13px;height:13px}
.b2mid{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.b2mid i{flex:1;width:2px;background:repeating-linear-gradient(180deg,var(--coral) 0 6px,transparent 6px 12px);opacity:.6;animation:dashv 1.4s linear infinite}
.b2mid span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--coral);color:var(--ink);box-shadow:0 0 22px rgba(155,208,91,.6)}
.b2mid span svg{width:17px;height:17px}
.b2mid b{font-family:var(--disp);font-size:.7rem;line-height:1.15;color:#fff}
@keyframes dashv{to{background-position:0 12px}}
.hero.inner:has(.b2a2){padding-bottom:14px}
@media(max-width:1040px){.b2a2{margin:10px auto 0}}
@media(max-width:560px){.b2a2{grid-template-columns:1fr;gap:12px}.b2mid{flex-direction:row;justify-content:center}.b2mid i{width:auto;height:2px;flex:1;background:repeating-linear-gradient(90deg,var(--coral) 0 6px,transparent 6px 12px)}.b2mid span{transform:rotate(90deg)}.b2mid b br{display:none}}

/* marketing hero: same height as the Websites hero; trust bar sits below it */
.hbsec{background:#fff;border-bottom:1px solid #eadff0;padding:20px 0}
.hbsec .hbar{display:grid;grid-template-columns:repeat(4,1fr)}
.hbsec .hbar>div{border-left:1px solid #eadff0}.hbsec .hbar>div:first-child{border-left:0}
.hbsec .hbar b{color:var(--ink)}.hbsec .hbar small{color:#6d5a77}
.hbsec .hbar .ic{background:rgba(75,122,28,.1);border-color:rgba(75,122,28,.3);color:var(--coral-d);box-shadow:none}
@media(max-width:1040px){.hbsec .hbar{grid-template-columns:repeat(2,1fr);row-gap:16px}.hbsec .hbar>div:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:700px){.hbsec .hbar{grid-template-columns:1fr}.hbsec .hbar>div{padding:0;border-left:0}}
.hero.inner:has(.mk){padding-bottom:14px}
.mk{padding-bottom:20px}
.mk .dash{padding:12px}
.mk .kpi em{white-space:nowrap}
.mk .chart svg{height:70px}
.mk .phone{width:112px;left:-8%;bottom:-34px}
.mk .chip.c1{bottom:-26px}
.hero.inner:has(.b2a2){padding-bottom:33px}
.mk .dash{padding:10px 12px}
.mk .dash-top{margin-bottom:8px}
.mk .kpi{padding:7px 10px}.mk .kpi b{font-size:1.1rem;margin:1px 0}
.mk .chart{margin-top:8px;padding:8px 12px 2px}
.mk .chart svg{height:54px}
.mk .phone{width:96px;left:-9%;bottom:-8px;border-radius:20px}
.mk{padding-bottom:10px}
.mk .chip.c1{bottom:-4px;padding:8px 12px}
.mk .dash .chart svg{height:56px}
.mk .kpi small{white-space:nowrap;font-size:.64rem}
.mk .dash .chart svg{height:86px}
.mk .phone{left:-17%;bottom:-6px}
.mk .chip.c1{right:-2%;bottom:-10px}
.hero.inner:has(.mk){padding-bottom:26px}
@media(max-width:1040px){.mk .phone{left:-4%}}
.hero.inner:has(.mk){padding-bottom:52px}
@media(max-width:700px){.mk .phone{display:none}}

/* partner pills are links */
a.partner,a.pill-link{text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s}
a.partner:hover,a.pill-link:hover{border-color:var(--coral);background:rgba(155,208,91,.1);transform:translateY(-2px)}
.parr{width:16px;height:16px;flex:none;color:var(--coral);transition:transform .2s}
a.partner:hover .parr,a.pill-link:hover .parr{transform:translateX(4px)}

/* team hero: three portraits side by side, nothing overlapping */
.team3-wrap{width:100%;max-width:580px;margin-left:auto}
.team3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.tm3{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:var(--ink2);border:1px solid var(--gline);box-shadow:0 24px 50px -22px #000,0 0 40px -14px rgba(155,208,91,.35);transition:transform .3s}
.tm3.b{transform:translateY(-22px)}
.tm3:hover{transform:translateY(-8px)}.tm3.b:hover{transform:translateY(-30px)}
.tm3 img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.tm3::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(20,8,26,.92))}
.tm3 figcaption{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:#fff;line-height:1.2}
.tm3 b{display:block;font-family:var(--disp);font-size:1.15rem}
.tm3 small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral);margin-top:3px}
.team3-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.team3-pills a,.team3-pills span{display:inline-flex;gap:6px;border:1px solid var(--line-d);background:rgba(255,255,255,.05);padding:8px 16px;border-radius:99px;font-size:.84rem;color:#e9dff0;text-decoration:none}
.team3-pills b{color:#fff}
.team3-pills a:hover{border-color:var(--coral);background:rgba(155,208,91,.1)}
.hero.inner:has(.team3){padding-bottom:26px}
@media(max-width:1040px){.team3-wrap{margin:10px auto 0}}
@media(max-width:560px){.team3{gap:8px}.tm3{border-radius:16px}.tm3 b{font-size:.95rem}.tm3 small{font-size:.54rem}.tm3.b{transform:translateY(-12px)}}
.hero.inner:has(.team3){padding-bottom:68px}

/* marketing hero phone: keep its real proportions, scale the whole phone instead of squeezing it */
.mk .phone{width:168px;left:-12%;bottom:-4px;transform:rotate(-3deg) scale(.68);transform-origin:left bottom;border-radius:30px}
@media(max-width:1040px){.mk .phone{left:-2%}}
.mk .phone{left:-25%}
@media(max-width:1180px){.mk .phone{left:-4%}}

/* ad mock-ups use the real logos of sites we built */
.adm-h i.lg{background:#fff;border:1px solid #e6e6e6;padding:3px;overflow:hidden}
.adm-h i.lg img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto}

/* websites: hero showcase that cycles through every site */
.wshow{width:100%;max-width:560px;margin-left:auto}
.wshow-main{position:relative;padding-bottom:26px}
.wshow-main .bf{border-radius:16px;box-shadow:0 30px 70px -26px #000,0 0 60px -20px rgba(155,208,91,.35)}
.wshow-slides{position:relative;aspect-ratio:16/9.4;background:#fff;overflow:hidden}
.wshow-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.03);transition:opacity .6s,transform 6s ease-out}
.wshow-slides img.on{opacity:1;transform:scale(1)}
.wshow-phone{position:absolute;right:-18px;bottom:0;width:112px;z-index:3;transform:rotate(3deg);filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.wshow-phone .ph-s{border-width:5px;border-radius:20px;overflow:hidden;background:#000;aspect-ratio:9/18.5}
.wshow-pslides{position:relative;width:100%;height:100%}
.wshow-pslides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s}
.wshow-pslides img.on{opacity:1}
.wshow-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.wshow-tabs button{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--line-d);background:rgba(255,255,255,.05);color:#d8cce2;font:600 .78rem var(--body);cursor:pointer;transition:all .2s}
.wshow-tabs button img,.wshow-tabs button i{width:26px;height:26px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;display:grid;place-items:center;font-style:normal;font-family:var(--disp);font-weight:800;color:var(--ink);font-size:.8rem}
.wshow-tabs button:hover{border-color:var(--coral);color:#fff}
.wshow-tabs button.on{background:rgba(155,208,91,.16);border-color:var(--coral);color:#fff;box-shadow:0 0 22px -6px rgba(155,208,91,.6)}
.hero.inner:has(.wshow){padding-bottom:36px}
@media(max-width:1040px){.wshow{margin:10px auto 0}}
@media(max-width:560px){.wshow-phone{width:84px;right:-6px}.wshow-tabs button span{display:none}.wshow-tabs button{padding:4px}}

/* websites: card grid */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.wc:hover{transform:translateY(-6px);border-color:var(--coral-d);box-shadow:0 30px 60px -30px rgba(37,16,44,.45)}
.wc-shot{position:relative;background:linear-gradient(160deg,#2a1534,#25102c);padding:22px 22px 0;overflow:hidden}
.wc-shot .bf{border-radius:12px 12px 0 0;box-shadow:0 -6px 40px -10px rgba(155,208,91,.25)}
.wc-shot .bf img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;display:block;transition:object-position 2.6s ease-in-out}
.wc:hover .wc-shot .bf img{object-position:bottom}
.wc-mm{position:absolute;right:14px;bottom:-26px;width:74px;border:4px solid #14081a;border-radius:16px;overflow:hidden;background:#000;transform:rotate(4deg);box-shadow:0 14px 30px -8px #000;transition:transform .3s}
.wc:hover .wc-mm{transform:rotate(0) translateY(-10px)}
.wc-mm img{width:100%;aspect-ratio:9/17;object-fit:cover;object-position:top;display:block}
.wc-b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.wc-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.wc-lg{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden;padding:5px}
.wc-lg img{width:100%;height:100%;object-fit:contain}
.wc-lg i{font-style:normal;font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--ink)}
.wc-h b{display:block;font-family:var(--disp);font-size:1.12rem;line-height:1.2}
.wc-h small{display:block;color:var(--muted);font-size:.82rem}
.wc-b p{color:var(--muted);font-size:.94rem;margin:0 0 14px;flex:1}
.wc-b ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0}
.wc-b li{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;background:#f3f6ea;color:var(--coral-d);border:1px solid #dde8c4;padding:4px 10px;border-radius:99px}
.wc-b .soon{align-self:flex-start;font-family:var(--mono);font-size:.74rem;background:rgba(37,16,44,.07);padding:6px 14px;border-radius:99px;color:var(--ink)}
.wc-b .link{align-self:flex-start}
@media(max-width:1040px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.wgrid{grid-template-columns:1fr}}

/* software four-step strip: compact, so the next section starts higher */
.sec.f4s,.sec.cream.f4s{padding:22px 0 24px!important}
.f4s h2.t{font-size:clamp(1.25rem,2vw,1.6rem)!important}
.f4s .f4{margin-top:14px;gap:12px}
.f4s .f4i{padding:12px 14px;grid-template-columns:36px 1fr;align-items:center;column-gap:12px;border-radius:14px;min-height:0}
.f4s .f4i .ic{width:36px;height:36px;grid-row:auto}
.f4s .f4i .ic svg{width:18px;height:18px}
.f4s .f4i h3{margin:0;font-size:1rem;padding-right:24px}
.f4s .f4i p{display:none}
.f4s .f4i .n{top:8px;right:12px}
.f4s .f4i[data-last] h3{padding-right:24px}
@media(max-width:600px){.f4s .f4{gap:8px}.f4s .f4i{padding:10px 12px}}

/* websites hero: keep to the same height as the other heroes */
.wshow{max-width:520px}
.wshow-main{padding-bottom:0}
.wshow-slides{aspect-ratio:16/8.2}
.wshow-phone{width:92px;right:-14px;bottom:-14px}
.wshow-tabs{flex-wrap:nowrap;gap:6px;margin-top:22px}
.wshow-tabs button span{display:none}
.wshow-tabs button{padding:4px}
.wshow-tabs button.on{padding:4px 12px 4px 4px}
.wshow-tabs button.on span{display:inline}
.hero.inner:has(.wshow){padding-bottom:14px}

/* hero partner pill: the feature version */
.pill-feat{position:relative;gap:14px;padding:10px 12px 10px 20px;border:1.5px solid var(--coral);background:linear-gradient(110deg,rgba(155,208,91,.18),rgba(155,208,91,.05));box-shadow:0 0 0 4px rgba(155,208,91,.1),0 0 34px -4px rgba(155,208,91,.55);overflow:hidden;font-size:.9rem}
.pill-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:pfshine 4.5s ease-in-out infinite}
@keyframes pfshine{55%,100%{transform:translateX(120%)}}
.pill-feat .pf-t{color:#fff;font-weight:600;letter-spacing:.02em}
.pill-feat .pf-logo{height:26px;width:auto;display:block}
.pill-feat .pf-go{width:32px;height:32px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;flex:none;position:relative;z-index:1}
.pill-feat .parr{color:var(--ink);width:17px;height:17px}
.pill-feat:hover .parr{transform:translateX(3px)}
.pill-feat:hover{box-shadow:0 0 0 5px rgba(155,208,91,.16),0 0 46px -2px rgba(155,208,91,.8);transform:translateY(-2px)}
@media(max-width:560px){.pill-feat{flex-wrap:wrap;gap:8px 12px;padding:10px 12px 10px 16px;border-radius:22px}.pill-feat .pf-logo{height:22px}}
@media(prefers-reduced-motion:reduce){.pill-feat::after{animation:none}}

/* command-centre tags are links */
.cc-tags a{font-size:.62rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:4px 10px;color:var(--muted-d);transition:.3s;text-decoration:none;cursor:pointer}
.cc-tags a.on{border-color:var(--coral);color:var(--ink);background:var(--coral);box-shadow:0 0 16px rgba(155,208,91,.6)}
.cc-tags a:hover,.cc-tags a:focus-visible{border-color:var(--coral);color:var(--ink);background:var(--coral);box-shadow:0 0 18px rgba(155,208,91,.7);transform:translateY(-2px)}
.cc-tags a::after{content:" \2192";opacity:0;margin-left:-6px;transition:.2s}
.cc-tags a:hover::after{opacity:1;margin-left:0}

/* promise section: little terminal panels */
.own .tc{margin-top:18px;background:var(--ink);color:#d8cce0;border-radius:14px;padding:0 0 12px;font-family:var(--mono);font-size:.78rem;line-height:1.9;box-shadow:0 18px 36px -18px rgba(37,16,44,.7),0 0 0 1px rgba(255,255,255,.04);overflow:hidden}
.own .tc-bar{display:flex;gap:6px;padding:9px 12px;background:rgba(255,255,255,.06);margin-bottom:8px}
.own .tc-bar i{width:9px;height:9px;border-radius:50%;background:#ff6b5e}.own .tc-bar i:nth-child(2){background:#f5bd41}.own .tc-bar i:nth-child(3){background:var(--coral)}
.own .tc span{display:flex;align-items:center;gap:10px;padding:0 14px;opacity:0;transform:translateX(-6px);animation:tcin .5s ease forwards;animation-delay:calc(var(--n)*.35s + .3s)}
.own .tc em{font-style:normal;color:var(--coral);min-width:92px}
.own .tc u{text-decoration:none;color:#8a7894}
.own .tc b{font-family:var(--mono);font-size:inherit;color:#fff;display:inline;margin:0}
.own .tc s{width:7px;height:14px;background:var(--coral);margin-left:2px;animation:tccur 1s steps(2) infinite}
@keyframes tcin{to{opacity:1;transform:none}}
@keyframes tccur{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.own .tc span{animation:none;opacity:1;transform:none}.own .tc s{animation:none}}

/* partner hero visual v2: clear gap for the plus, flowing connectors, Xcentrix logo */
.pair2{gap:20px 60px;padding:30px 28px 26px}
.co{transition:transform .3s,box-shadow .3s}
.co:hover{transform:translateY(-5px)}
.co-a:hover{box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.co-b:hover{box-shadow:0 0 56px rgba(155,208,91,.4)}
.co small{display:flex;align-items:center;gap:8px}
.co small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(155,208,91,.18)}
.co-a small::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.jn{top:50%;z-index:4}
.jn::before,.jn::after{content:"";position:absolute;top:50%;width:26px;height:2px;background:repeating-linear-gradient(90deg,var(--coral) 0 4px,transparent 4px 8px);animation:flowx 1s linear infinite}
.jn::before{right:100%;margin-right:6px;transform:translateY(-50%)}
.jn::after{left:100%;margin-left:6px;transform:translateY(-50%)}
@keyframes flowx{to{background-position:8px 0}}
.co::after{height:26px;bottom:-26px;background:repeating-linear-gradient(var(--coral) 0 4px,transparent 4px 8px);animation:flowy 1s linear infinite;opacity:.85}
@keyframes flowy{to{background-position:0 8px}}
.co::before{content:"";position:absolute;left:calc(50% - 3px);bottom:-26px;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 14px var(--coral);animation:drop 2.2s ease-in infinite;z-index:2}
.co-b::before{animation-delay:-1.1s}
@keyframes drop{0%{transform:translateY(-26px);opacity:0}25%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.base{padding:14px 20px;margin-top:26px;border-color:rgba(155,208,91,.4);background:linear-gradient(90deg,rgba(155,208,91,.06),rgba(255,255,255,.04),rgba(155,208,91,.06))}
.base .xc{display:inline-grid;place-items:center;background:#fff;border-radius:12px;padding:5px 12px;box-shadow:0 0 24px rgba(255,255,255,.18)}
.base .xc img{height:30px;width:auto;display:block}
@media(max-width:560px){.pair2{gap:24px}.co::before{display:none}.jn::before,.jn::after{display:none}}
@media(prefers-reduced-motion:reduce){.co::before,.co::after,.jn::before,.jn::after{animation:none}}

/* company logo tiles on the family cards */
.fc .ft{display:flex;align-items:center;height:68px;padding:12px 18px;margin-bottom:18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px -16px rgba(37,16,44,.4);width:fit-content;max-width:100%}
.fc .ft img{height:100%;width:auto;max-width:230px;object-fit:contain;display:block}
.fc .ft.dk{background:var(--ink);border-color:var(--ink)}
.or-kms{display:inline-flex;align-items:center;gap:10px;color:#fff}
.or-kms svg{height:38px;width:auto;flex:none}
.or-kms b{display:block;font-family:var(--disp);font-size:1.05rem;line-height:1.05;color:#fff}
.or-kms small{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-top:3px}
.fc.us{border-color:var(--coral-d);box-shadow:0 0 0 1px var(--coral-d),0 24px 50px -28px rgba(75,122,28,.6)}
.fc .here{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-d);background:#eef5de;padding:5px 12px;border-radius:99px}
.fam{position:relative}
@media(min-width:1041px){.fam::before{content:"";position:absolute;left:16%;right:16%;top:34px;height:2px;background:repeating-linear-gradient(90deg,var(--coral-d) 0 6px,transparent 6px 14px);opacity:.5;z-index:0}.fam .fc{position:relative;z-index:1}}

/* promise band v2: dark glass cards instead of flat green */
.own{position:relative;overflow:hidden;padding:84px 0 88px;background:radial-gradient(800px 380px at 85% 0%,rgba(155,208,91,.22),transparent 65%),radial-gradient(600px 300px at 0% 100%,rgba(155,208,91,.1),transparent 60%),#1b0c22;color:#fff;border-block:1px solid var(--gline)}
.own::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(155,208,91,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 20%,#000,transparent 75%)}
.own .wrap{position:relative}
.own .eyebrow{color:var(--coral)!important;font-family:var(--mono)}
.own h2{color:#fff!important;font-size:clamp(2rem,4.4vw,3.4rem);max-width:820px;line-height:1.05}
.own h2::after{content:"";display:block;width:84px;height:5px;border-radius:5px;margin-top:20px;background:var(--coral);box-shadow:0 0 22px rgba(155,208,91,.8)}
.own .row{counter-reset:o;gap:18px;margin-top:44px}
.own .it{counter-increment:o;position:relative;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--gline);border-top:3px solid var(--coral);border-radius:20px;padding:26px 24px 24px;backdrop-filter:blur(8px);transition:transform .25s,box-shadow .25s}
.own .it:hover{transform:translateY(-5px);box-shadow:0 0 40px -10px rgba(155,208,91,.5)}
.own .it::before{content:"0" counter(o);position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--coral);opacity:.8}
.own .it b{color:#fff!important;font-size:1.35rem;margin-bottom:8px;padding-right:34px}
.own .it p{color:#d3c6dc;opacity:1;font-size:.98rem;line-height:1.6}
.own .tc{background:#12071a;box-shadow:inset 0 0 0 1px rgba(155,208,91,.18),0 18px 36px -20px #000}

.slogan{margin:22px 0 0;font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.15;color:#fff;letter-spacing:-.01em}
.slogan em{font-style:normal;color:var(--coral)}

/* partner hero: plus sits in the gap beside the logos; no dashes cutting into the lists */
.jn{top:132px}
.jn::before,.jn::after{display:none}

/* partner hero v3: one card per company */
.cc3{width:100%;max-width:580px;margin-left:auto;display:flex;flex-direction:column}
.cc3-c{display:grid;grid-template-columns:168px 1fr;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 24px 50px -28px #000;transition:transform .25s,box-shadow .25s,border-color .25s}
.cc3-c:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:0 0 44px -12px rgba(155,208,91,.55)}
.cc3-c.a{background:linear-gradient(160deg,#6a3a72,#4d2a56)}
.cc3-c.b{border-color:var(--coral);box-shadow:0 0 0 1px rgba(155,208,91,.35),0 0 50px -14px rgba(155,208,91,.5);background:linear-gradient(160deg,rgba(155,208,91,.14),rgba(255,255,255,.04))}
.cc3-shot{position:relative;background:#14081a;overflow:hidden;min-height:150px}
.cc3-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s}
.cc3-c:hover .cc3-shot img{transform:scale(1.06)}
.cc3-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(20,8,26,.55))}
.cc3-shot.kms{display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#2e1a38,#14081a)}
.cc3-shot.kms::after{display:none}
.cc3-shot.kms .or-kms{flex-direction:column;align-items:flex-start;gap:8px}
.cc3-shot.kms .or-kms svg{height:54px}
.cc3-b{padding:16px 18px 16px;display:flex;flex-direction:column;gap:0}
.cc3-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cc3-logo{display:inline-flex;align-items:center;height:30px;padding:4px 9px;border-radius:9px;background:#fff;flex:none}
.cc3-logo.dk{background:var(--ink)}
.cc3-logo img{height:100%;width:auto;display:block}
.cc3-top small{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cc3-b>b{font-family:var(--disp);font-size:1.15rem;color:#fff;line-height:1.15}
.cc3-b p{margin:3px 0 10px;color:#e1d6e9;font-size:.84rem;line-height:1.4}
.cc3-b ul{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;padding:0}
.cc3-b li{font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff}
.cc3-c.b li{background:rgba(155,208,91,.14);border-color:rgba(155,208,91,.4)}
.cc3-go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:.86rem;color:var(--coral);text-decoration:none}
.cc3-go svg{width:15px;height:15px;transition:transform .2s}
.cc3-go:hover svg{transform:translateX(4px)}
.cc3-go.here{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--coral);padding:4px 12px;border-radius:99px;margin-top:auto;align-self:flex-start}
.cc3-j{display:flex;align-items:center;justify-content:center;gap:0;height:34px;position:relative}
.cc3-j i{width:2px;height:100%;background:repeating-linear-gradient(var(--coral) 0 4px,transparent 4px 8px);animation:flowy 1s linear infinite;opacity:.9;position:absolute;left:50%}
.cc3-j i:first-child{top:0;height:50%}.cc3-j i:last-child{bottom:0;height:50%}
.cc3-j span{position:relative;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(37,16,44,.9),0 0 24px rgba(155,208,91,.7)}
.cc3-j span svg{width:15px;height:15px}
.cc3-j span.pw{width:auto;height:auto;border-radius:99px;padding:3px 12px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.hero.inner:has(.cc3){padding-bottom:40px}
@media(max-width:1040px){.cc3{margin:10px auto 0}}
@media(max-width:560px){.cc3-c{grid-template-columns:1fr}.cc3-shot{min-height:110px}.cc3-shot::after{background:linear-gradient(180deg,transparent 60%,rgba(20,8,26,.55))}}

/* partner hero: the two-card layout again, each with a picture */
.pair2.pic .co{padding:0;min-height:0;overflow:hidden}
.pair2.pic .cpic{position:relative;height:118px;overflow:hidden;background:#14081a;border-bottom:1px solid rgba(255,255,255,.12)}
.pair2.pic .cpic img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s}
.pair2.pic .co:hover .cpic img{transform:scale(1.07)}
.pair2.pic .cpic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,8,26,.55))}
.pair2.pic .co>*:not(.cpic){margin-left:18px;margin-right:18px}
.pair2.pic .kalogo{margin-top:16px;width:min(210px,calc(100% - 36px))}
.pair2.pic .co ul{margin-bottom:18px}
.pair2.pic .co::before,.pair2.pic .co::after{display:none}
.pair2.pic .jn{top:236px}
.pair2.pic .base{margin-top:6px}
.hero.inner:has(.pair2){padding-bottom:36px}
@media(max-width:560px){.pair2.pic .jn{position:relative;top:0}}
.pair2.pic .cpic{height:160px}
.pair2.pic .cpic img{object-position:top center}
.pair2.pic .jn{top:260px}

/* team page hero: split like Kingsgrove Accounting (light text panel, plum photo-card panel). Only .tsplit uses this */
.hero.inner.tsplit{padding:0;background:var(--cream);color:var(--text);display:grid;grid-template-columns:1fr 1fr;min-height:clamp(520px,calc(100svh - 150px),680px);overflow:hidden}
.hero.inner.tsplit::before,.hero.inner.tsplit::after{display:none}
.tsp-l{display:flex;align-items:center;padding:56px 48px 56px max(24px,calc((100vw - 1200px)/2 + 24px))}
.tsp-in{max-width:540px}
.tsplit .eyebrow{color:var(--coral-d);font-family:var(--disp)}
.tsplit h1{font-size:clamp(2.4rem,4.4vw,3.9rem);color:var(--ink);margin:18px 0 20px}
.tsplit h1 em{font-style:normal;color:var(--coral-d);text-shadow:none}
.hero.inner.tsplit .lead{color:#5a4a62!important;font-size:1.15rem;max-width:520px}
.tsplit .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.tsplit .btn.p{background:var(--coral);color:var(--ink);box-shadow:0 10px 26px -12px rgba(75,122,28,.6)}
.tsplit .btn.g{background:#fff;border:2px solid rgba(37,16,44,.14);color:var(--ink)}
.tsplit .btn.g:hover,.tsplit .btn.g:focus-visible{background:#fff;border-color:var(--coral-d);color:var(--coral-d);box-shadow:0 10px 26px -12px rgba(37,16,44,.35)}
.tsp-r{background:radial-gradient(640px 380px at 85% 0%,rgba(155,208,91,.18),transparent 65%),linear-gradient(160deg,var(--ink3),var(--ink));display:flex;align-items:center;padding:44px max(24px,calc((100vw - 1200px)/2 + 24px)) 44px 48px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 16px;width:100%;max-width:560px;align-items:start}
.tc{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--ink2);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -22px rgba(0,0,0,.65)}
.tc:nth-child(3n+2){transform:translateY(24px)}
.tc>img{width:100%;height:100%;object-fit:cover;object-position:top}
.tc::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(25,8,31,.88));pointer-events:none}
.tl2{position:absolute;left:0;right:0;bottom:12px;z-index:1;text-align:center;color:#fff;line-height:1.2}
.tl2 b{display:block;font-family:var(--disp);font-size:.95rem;letter-spacing:.01em}
.tl2 small{display:block;margin-top:3px;font-family:var(--mono,var(--body));font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.tc.cc{aspect-ratio:auto;min-height:150px;background:linear-gradient(160deg,var(--plum),var(--ink2))}
.tc.cc.us{background:linear-gradient(160deg,var(--ink2),#190820)}
.tc.cc.lt{background:#fff}
.tc.cc.lt::after{background:linear-gradient(180deg,transparent,rgba(37,16,44,.14))}
.tc.cc.lt .tl2{color:var(--ink)}.tc.cc.lt .tl2 small{color:var(--muted)}
.tc.cc .cl{position:absolute;inset:0 0 44px 0;display:grid;place-items:center;padding:0 14px}
.tc.cc .cl>img{width:100%;max-width:118px;height:auto}
.tc.cc .or-kms{flex-direction:column;gap:6px;text-align:center}
.tc.cc .or-kms svg{height:34px}
.tc.cc .or-kms b{font-size:.86rem}
.tc.cc .or-kms small{margin-top:0;font-family:var(--body);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media(max-width:900px){
  .hero.inner.tsplit{grid-template-columns:1fr;min-height:0}
  .tsp-l{padding:44px 24px 36px}
  .tsp-r{padding:30px 24px 52px}
  .tcards{max-width:520px;margin:0 auto;gap:12px}
}
@media(max-width:480px){.tc:nth-child(3n+2){transform:none}.tl2 b{font-size:.8rem}.tl2 small{font-size:.5rem}.tc.cc{min-height:128px}}

/* site chips: Lantern profile, and the Wantage PC logo fills its circle */
.wshow-tabs button img[src$="lantern.svg"]{padding:0}
.wshow-tabs button img[src$="pcrepairs.png"]{padding:0;object-fit:cover;background:#0b1020}

/* partner hero: "one roof" - roof over two companies, Xcentrix as the foundation */
.roof{width:100%;max-width:600px;margin-left:auto;display:flex;flex-direction:column;align-items:stretch}
.rf-top{display:block;width:100%;height:78px;filter:drop-shadow(0 0 14px rgba(155,208,91,.55))}
.rf-tag{align-self:center;margin-top:-34px;position:relative;z-index:1;padding:6px 16px;border-radius:99px;background:var(--coral);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:.8rem;letter-spacing:.04em;box-shadow:0 8px 22px -8px rgba(155,208,91,.8)}
.rf-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:14px;padding:0 6px;position:relative}
.rf-c{background:rgba(255,255,255,.05);border:1px solid var(--gline);border-radius:0 0 16px 16px;padding:18px 18px 18px;display:flex;flex-direction:column;gap:6px}
.rf-c.a{background:linear-gradient(170deg,rgba(89,49,95,.85),rgba(58,29,64,.7))}
.rf-c.b{border-color:rgba(155,208,91,.45);background:linear-gradient(170deg,rgba(155,208,91,.14),rgba(255,255,255,.04))}
.rf-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral)}
.rf-logo{height:30px;width:auto;max-width:100%;object-fit:contain;object-position:left;margin:4px 0 2px}
.rf-c b{font-family:var(--disp);font-size:1.12rem;line-height:1.15;color:#fff}
.rf-c p{color:#d8cce2;font-size:.9rem;line-height:1.4;margin-bottom:6px}
.rf-c ul{list-style:none;display:grid;gap:5px;font-size:.86rem;color:#efe6f4}
.rf-c li{display:flex;gap:8px;align-items:center}
.rf-c li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.rf-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:var(--ink);box-shadow:0 0 0 5px var(--ink),0 0 26px rgba(155,208,91,.6);z-index:2}
.rf-plus svg{width:17px;height:17px}
.rf-base{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px dashed rgba(155,208,91,.4);color:#d8cce2;font-size:.9rem}
.rf-xc{display:inline-flex;background:#fff;border-radius:10px;padding:6px 12px}
.rf-xc img{height:24px;width:auto}
.hero.inner:has(.roof){padding-bottom:30px}
@media(max-width:1040px){.roof{margin:14px auto 0}}
@media(max-width:560px){.rf-cols{grid-template-columns:1fr;gap:14px}.rf-plus{display:none}.rf-c{border-radius:16px}}

/* team page: the companies live in the bar under the hero */
.tsplit .tcards{max-width:600px;gap:16px}
.famb{background:var(--ink);border-top:1px solid var(--gline);padding:26px 0}
.famb .wrap{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.fb-t{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);max-width:110px;line-height:1.5}
.fb-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fb-i{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--gline)}
.fb-i.us{border-color:rgba(155,208,91,.55);background:rgba(155,208,91,.1)}
.fb-logo{flex:none;width:120px;display:grid;place-items:center}
.fb-logo>img{width:100%;height:auto;max-height:40px;object-fit:contain}
.fb-logo.lt{background:#fff;border-radius:10px;padding:7px 10px}
.fb-logo .or-kms{gap:8px}.fb-logo .or-kms svg{height:30px}.fb-logo .or-kms b{font-size:.78rem}.fb-logo .or-kms small{font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;display:block;color:rgba(255,255,255,.7)}
.fb-x b{display:block;font-family:var(--disp);font-size:.98rem;color:#fff;line-height:1.15}
.fb-x small{display:block;margin-top:3px;color:var(--muted-d);font-size:.8rem;line-height:1.3}
@media(max-width:1000px){.famb .wrap{grid-template-columns:1fr}.fb-t{max-width:none}.fb-g{grid-template-columns:1fr}}
.hero.inner.tsplit .tsp-r{padding-right:56px;padding-left:56px}
.tsplit .tcards{max-width:640px;margin:0 auto}


/* moving strip: richer ticker (dark plum, green glow lines, faded edges, pauses on hover) */
.strip{position:relative;background:linear-gradient(90deg,#2b1233,#59315f 50%,#2b1233);padding:20px 0;border-top:1px solid rgba(155,208,91,.45)!important;border-bottom:1px solid rgba(155,208,91,.45)!important;box-shadow:0 0 44px -10px rgba(155,208,91,.35)!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.strip .mq{font-size:1.02rem;letter-spacing:.01em;gap:36px}
.strip .mq span{gap:36px;color:#f4ecf8}
.strip .mq span::after{content:"";width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:var(--coral)!important;box-shadow:0 0 12px rgba(155,208,91,.9)!important}
.strip:hover .mq{animation-play-state:paused}

/* home: one partner (white section) */
.onep{background:#fff;color:var(--text);padding:96px 0}
.onep .eyebrow{color:var(--coral-d);font-family:var(--disp)}
.onep h2.t{color:var(--ink);max-width:820px;margin-left:auto;margin-right:auto}
.onep .lead{color:var(--muted)}
.op-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.op-c{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px 26px;box-shadow:0 18px 44px -26px rgba(37,16,44,.35);transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column}
.op-c:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:0 26px 56px -26px rgba(75,122,28,.45)}
.op-c::before{content:"";position:absolute;left:28px;right:28px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--coral)}
.op-i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--coral-soft);color:var(--coral-d)}
.op-i svg{width:26px;height:26px}
.op-c small{display:block;margin-top:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-d)}
.op-c h3{margin:6px 0 14px;font-size:1.5rem;color:var(--ink)}
.op-c ul{list-style:none;display:grid;gap:9px;margin-bottom:22px;color:var(--text);font-size:.98rem}
.op-c li{display:flex;gap:10px;align-items:center}
.op-c li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none}
.op-c .link{margin-top:auto;color:var(--coral-d);font-family:var(--disp);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.op-c .link svg{width:18px;height:18px}
.op-f{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;padding:20px 26px;border-radius:16px;background:var(--cream);border:1px solid var(--line);color:var(--ink);font-size:1.05rem}
.op-f b{font-family:var(--disp);color:var(--coral-d)}
.op-f .btn.p svg{width:18px;height:18px}
@media(max-width:900px){.op-g{grid-template-columns:1fr}.onep{padding:64px 0}.op-f{flex-direction:column;align-items:flex-start}}
.onep .eyebrow{color:var(--coral-d)!important}
.onep .lead{color:#5a4a62!important}
.onep .op-c small{color:var(--coral-d)!important}
.onep .eyebrow{display:inline-flex!important}

/* software hero: circuit lines from your problem, through our system, to your solution */
.stl{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--coral);text-transform:uppercase}
.stl i{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 12px var(--coral);animation:cxblink 2s ease-in-out infinite}
@keyframes cxblink{50%{opacity:.35}}
.swt{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:#cdbfd8}
.swt li{display:flex;align-items:center;gap:8px}
.swt li::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--coral)}
.cx{width:100%;max-width:640px;margin-left:auto}
.cx svg{display:block;width:100%;height:auto;overflow:visible}
.cx .cx-f{stroke-width:2;opacity:.28}
.cx .cx-m{stroke-width:3;opacity:.45}
.cx .cx-d{stroke-width:3;stroke:#fff;stroke-dasharray:3 20;animation:cxflow 1.6s linear infinite}
@keyframes cxflow{to{stroke-dashoffset:-23}}
.cx .cx-p{transform-origin:310px 230px;animation:cxpulse 2.6s ease-out infinite}
@keyframes cxpulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.cx text{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:#cdbfd8}
.cx text.l1{font-size:13px;font-weight:700;letter-spacing:.16em}
.cx text.bad{fill:#ff9d8f}.cx text.good{fill:#9bd05b}.cx text.white{fill:#fff}
.hero.inner:has(.cx){padding-bottom:30px}
@media(max-width:1040px){.cx{margin:18px auto 0}}
@media(max-width:560px){.cx text{font-size:14px}.cx text.l1{font-size:16px}}
@media(prefers-reduced-motion:reduce){.cx .cx-d,.cx .cx-p,.stl i{animation:none}}

/* software hero v2: circuit fills the whole hero, text sits on top */
.hero.inner.swh{min-height:clamp(560px,calc(100svh - 150px),720px);display:flex;align-items:center;padding-top:40px;padding-bottom:40px}
.swh .wrap{display:block;position:relative;z-index:2;width:100%}
.swh .wrap>div{max-width:560px}
.swh h1{font-size:clamp(2.6rem,4.8vw,4.4rem)}
.swh .cx{position:absolute;right:0;top:0;bottom:0;width:min(66vw,1000px);max-width:none;margin:0;z-index:1;opacity:.95}
.swh .cx svg{position:absolute;inset:0;width:100%;height:100%}
.cx text{font-size:16px}.cx text.l1{font-size:20px}
.swh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--ink) 0%,rgba(18,7,26,.85) 32%,transparent 58%)}
.swh .wrap{z-index:3}
@media(max-width:1040px){.hero.inner.swh{display:block;min-height:0;padding-bottom:0}.swh .cx{position:relative;width:100%;height:340px;margin-top:20px}.swh::after{display:none}.cx text{font-size:20px}.cx text.l1{font-size:26px}}
.swh .cx{width:min(62vw,960px)}

/* partner page: circuit hero, plain columns, plain list (no cards) */
.cx text.big{font-family:var(--disp);font-weight:800;font-size:54px;letter-spacing:0;fill:#25102c}
.fam3,.wlist{background:#fff;color:var(--text);padding:92px 0}
.fam3 .eyebrow,.wlist .eyebrow{color:var(--coral-d)!important;display:inline-flex!important;font-family:var(--disp)}
.fam3 h2.t,.wlist h2.t{color:var(--ink)}
.fam3 .lead,.wlist .lead{color:#5a4a62!important}
.f3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px;border-top:3px solid var(--coral)}
.f3>div{padding:30px 32px 6px;border-left:1px solid var(--line)}
.f3>div:first-child{border-left:0;padding-left:0}
.f3 small{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-d)}
.f3 h3{margin:10px 0 12px;font-size:1.55rem;color:var(--ink)}
.f3 p{color:#4d3f55;font-size:1rem;margin-bottom:16px}
.f3 .link{color:var(--coral-d);font-family:var(--disp);font-weight:700;display:inline-flex;gap:8px;align-items:center}
.f3 .link svg{width:18px;height:18px}
.wl{margin-top:44px;border-top:1px solid var(--line)}
.wl-r{display:grid;grid-template-columns:90px 1fr 1.3fr;gap:12px 28px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.wl-r i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--coral-d)}
.wl-r h3{font-size:1.4rem;color:var(--ink)}
.wl-r p{color:#4d3f55}
@media(max-width:900px){.f3{grid-template-columns:1fr}.f3>div{border-left:0;padding:26px 0 6px;border-top:1px solid var(--line)}.f3>div:first-child{border-top:0}.wl-r{grid-template-columns:50px 1fr}.wl-r p{grid-column:2}.fam3,.wlist{padding:60px 0}}

/* websites showcase phone: straight, small notch so it never covers a site's header */
.wshow-phone{transform:none}
.wshow-phone .ph-s{border-width:5px;border-radius:22px}
.wshow-phone .ph-s::before{top:3px;width:26px;height:6px;border-radius:6px}
.wshow-pslides img{object-position:top center}

/* circuit hero v3: site-style pills, rounded lines, brand K node */
.cx .cx-f{stroke-width:2;opacity:.22}
.cx .cx-m{stroke-width:3;opacity:.4}
.cx .cx-d{stroke-width:3;stroke:#fff;stroke-dasharray:2 22;animation:cxflow 1.6s linear infinite}
.cx .cx-p{transform-box:fill-box;transform-origin:center;animation:cxpulse2 2.8s ease-out infinite}
@keyframes cxpulse2{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.cx text.t1{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.01em}
.cx text.t1.g{fill:#9bd05b}
.cx text.t2{font-family:var(--mono);font-size:13px;letter-spacing:.06em;fill:#cdbfd8}
.cx text.big{font-family:var(--disp);font-weight:800;font-size:64px;fill:#25102c;letter-spacing:0}
@media(max-width:1040px){.cx text.t1{font-size:26px}.cx text.t2{font-size:15px}}
.cx text.t1{font-size:27px}
.cx text.t2{font-size:15px}
.cx text.big{font-size:72px}

/* software page: the four steps become a thin strip at the foot of the first screen */
.hero.inner.swh{min-height:clamp(500px,calc(100svh - 232px),680px)}
.sec.cream.f4s,.sec.f4s{padding:14px 0!important;border-top:1px solid var(--line)}
.f4s .wrap{display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:center}
.f4s .center{text-align:left}
.f4s h2.t{white-space:normal!important;font-size:1.02rem!important;line-height:1.25!important;margin:0!important}
.f4s .f4{margin-top:0;gap:10px}
.f4s .f4i{padding:9px 12px;border-radius:12px;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;min-height:0}
.f4s .f4i .ic{width:34px;height:34px;grid-row:auto}
.f4s .f4i .ic svg{width:17px;height:17px}
.f4s .f4i h3{font-size:.92rem;margin:0;line-height:1.15}
.f4s .f4i p,.f4s .f4i .n{display:none}
@media(max-width:1100px){.f4s .wrap{grid-template-columns:1fr;gap:12px}.f4s .f4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.f4s .f4{grid-template-columns:1fr}}

/* steps strip v2: thinner white, bigger info */
.sec.cream.f4s,.sec.f4s{padding:7px 0!important}
.f4s .wrap{grid-template-columns:330px 1fr;gap:24px}
.f4s h2.t{font-size:1.3rem!important;line-height:1.2!important}
.f4s .f4{gap:10px}
.f4s .f4i{padding:9px 14px;grid-template-columns:44px 1fr;column-gap:12px;border-radius:14px}
.f4s .f4i .ic{width:44px;height:44px}
.f4s .f4i .ic svg{width:22px;height:22px}
.f4s .f4i h3{font-size:1.12rem;line-height:1.15}
@media(max-width:1100px){.f4s .wrap{grid-template-columns:1fr}}
section.sec.cream.f4s.fit{padding:8px 0!important}
section.sec.cream.f4s.fit .wrap{grid-template-columns:270px 1fr;gap:18px}
section.sec.cream.f4s.fit h2.t{font-size:1.18rem!important}
section.sec.cream.f4s.fit .f4{gap:8px}
section.sec.cream.f4s.fit .f4i{padding:8px 10px;grid-template-columns:40px 1fr;column-gap:10px}
section.sec.cream.f4s.fit .f4i .ic{width:40px;height:40px}
section.sec.cream.f4s.fit .f4i h3{font-size:1.06rem}

/* software hero: winner, option A (stacked boxes with arrows) */
.hero.inner.swa{padding:40px 0;min-height:clamp(480px,calc(100svh - 232px),680px);display:flex;align-items:center}
.swa .oc{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.swa .ot h1{font-size:clamp(2.4rem,4.4vw,4rem);margin:18px 0}
.swa .ot .lead{color:#cdbfd8;font-size:1.12rem;max-width:520px}
.swa .ot .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.swa .bx{border-radius:20px;padding:18px 22px;display:flex;align-items:center;gap:16px}
.swa .bx .bi{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none}
.swa .bx .bi svg{width:26px;height:26px}
.swa .bx b{display:block;font:800 1.35rem var(--disp);line-height:1.1}
.swa .bx small{display:block;margin-top:4px;font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.swa .bx.bad{background:rgba(255,138,122,.1);border:2px dashed rgba(255,138,122,.6);color:#ffe3de}
.swa .bx.bad .bi{background:rgba(255,138,122,.2);color:#ff9d8f}
.swa .bx.sys{background:linear-gradient(135deg,#9bd05b,#80b941);color:#25102c;box-shadow:0 0 60px -10px rgba(155,208,91,.7)}
.swa .bx.sys .bi{background:transparent}.swa .bx.sys .bi svg{width:50px;height:50px}
.swa .bx.ok{background:#fff;color:#25102c;border:3px solid #9bd05b}.swa .bx.ok .bi{background:#9bd05b}
.swa .ar{display:grid;place-items:center;color:#9bd05b}.swa .ar svg{width:30px;height:30px}
.swa .va{display:flex;flex-direction:column;max-width:440px;width:100%;margin-left:auto}
.swa .va .ar{height:46px}.swa .va .ar svg{animation:nud 1.6s ease-in-out infinite}
@keyframes nud{50%{transform:translateY(5px)}}
@media(max-width:1000px){.hero.inner.swa{display:block;min-height:0}.swa .oc{grid-template-columns:1fr;gap:34px}.swa .va{margin:0 auto}}
body main section.sec.cream.f4s.fit{padding-top:8px!important;padding-bottom:8px!important}
body main section.sec.cream.f4s.fit.f4s.fit.f4s.cream{padding-top:8px!important;padding-bottom:8px!important}

/* software page: steps strip carries a line of info; big row (option B) + facts strip */
section.sec.cream.f4s.fit .f4i{grid-template-columns:40px 1fr;align-items:center}
section.sec.cream.f4s.fit .f4i .ic{grid-row:1/3}
section.sec.cream.f4s.fit .f4i p{display:block;grid-column:2;margin:1px 0 0;font-size:.8rem;line-height:1.25;color:#6f6277}
section.sec.cream.f4s.fit .f4i[data-last] p{color:#cdbfd8}
body main section.sec.cream.f4s.fit.f4s.fit.f4s.cream{padding-top:10px!important;padding-bottom:10px!important}
.swb{background:linear-gradient(180deg,#190820,#25102c);padding:56px 0 60px}
.swa .ob{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:stretch}
.swa .bx.big{align-items:flex-start;padding:28px}.swa .bx.big b{font-size:1.7rem}
.swa .bx p{margin-top:10px;font-size:1rem;line-height:1.45;opacity:.92}
.swa .ob .ar svg{width:38px;height:38px;animation:nud2 1.6s ease-in-out infinite}
@keyframes nud2{50%{transform:translateX(5px)}}
.sw2s{background:#fff;border-top:3px solid var(--coral);padding:14px 0}
.sw2s .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sw2s .wrap>div{display:flex;align-items:center;gap:12px}
.sw2s .si{width:46px;height:46px;border-radius:14px;background:var(--coral-soft);color:var(--coral-d);display:grid;place-items:center;flex:none}
.sw2s .si svg{width:23px;height:23px}
.sw2s b{display:block;font:800 1.08rem var(--disp);color:var(--ink);line-height:1.15}
.sw2s small{display:block;margin-top:2px;font-size:.84rem;color:#6f6277;line-height:1.3}
@media(max-width:1000px){.swa .ob{grid-template-columns:1fr}.swa .ob .ar{height:44px}.swa .ob .ar svg{transform:rotate(90deg);animation:none}.sw2s .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sw2s .wrap{grid-template-columns:1fr}}

/* team page hero: same family as the software hero, no staff cards */
.swa .bx.pl{background:rgba(255,255,255,.07);border:2px solid rgba(155,208,91,.45);color:#fff}
.swa .bx.pl .bi{background:rgba(155,208,91,.18);color:#9bd05b}
.swa .bx.sys .bi.dk{background:#25102c;color:#9bd05b}
.swa .bx.ok .bi{color:#25102c}
.swa .va .bx p{margin-top:8px;font-size:.92rem;line-height:1.4}
.swa .bx.sys p{opacity:1}
.swa .va .bx.ok small{color:#6f6277;opacity:1}

/* team page: the family as boxes with arrows */
.fams .center{margin-bottom:34px}.fams .eyebrow{display:inline-flex!important}
.swa .bx.big.col{flex-direction:column;align-items:flex-start;gap:16px}
.swa .bx.pl.big{background:rgba(255,255,255,.06)}
.fl{display:flex;align-items:center;min-height:48px}
.fl>img{height:40px;width:auto;max-width:220px}
.fl .xc{display:inline-flex;background:#fff;border-radius:10px;padding:7px 12px}.fl .xc img{height:30px;width:auto}
.fl.kk{gap:10px}.fl.kk svg{height:44px;width:44px}
.fl .kt{display:block}.fl .kt b{display:block!important;font:800 1.15rem var(--disp)!important;line-height:1}
.fl .kt i{display:block;font:600 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;margin-top:3px}
.swa .bx.big.col b{font-size:1.5rem}

/* team page: hero fills the first screen, family section is light so it stands out */
.hero.inner.swa.tfull{min-height:calc(100svh - var(--hdr,106px));max-height:none}
body main section.swb.fams{background:#fbf4ee;padding:72px 0 68px}
.fams h2.t{color:var(--ink)}
.fams .eyebrow{background:rgba(155,208,91,.22)!important;color:var(--coral-d)!important;border:0!important}
.fams .eyebrow::before{background:var(--coral-d)}
.fams .bx.pl{background:#fff;border:2px solid var(--line);color:var(--ink);box-shadow:0 22px 46px -28px rgba(37,16,44,.4)}
.fams .bx.pl small{color:var(--coral-d);opacity:1}
.fams .bx.pl p{color:#4d3f55;opacity:1}
.fams .bx.sys{box-shadow:0 22px 50px -22px rgba(75,122,28,.6)}
.fams .ar{color:var(--coral-d)}
.fl.dkl{background:#25102c;border-radius:12px;padding:8px 14px}
.fl.dkl>img{height:34px}
.fams .bx.big.col{height:100%}
.fams .bx.big.col>span:nth-child(2){flex:1}
.fams .lk{display:inline-flex;align-items:center;gap:8px;font:800 1rem var(--disp);color:var(--coral-d)}
.fams .lk svg{width:18px;height:18px}
.fams .bx.sys .lk{color:#25102c}
.fams .ob{align-items:stretch}
/* team page: the facts strip goes back to dark */
.fams+.sw2s{background:#190820;border-top:3px solid var(--coral)}
.fams+.sw2s b{color:#fff}
.fams+.sw2s small{color:#cdbfd8}
.fams+.sw2s .si{background:rgba(155,208,91,.16);color:var(--coral)}
.fams+.sw2s .wrap>div{align-items:center}
/* team page: family section white, cards softly tinted so they still read */
body main section.swb.fams{background:#fff}
.fams .bx.pl{background:#fbf4ee;border-color:#eadfd6}
/* team page: less white above the family heading */
body main section.swb.fams{padding:30px 0 52px}
.fams .center{margin-bottom:26px}
.fams h2.t{margin:10px 0 0}
.fams+.sw2s{border-top:0}

/* family cards: a small splash of each company's brand colour */
.fams .bx.big{position:relative;overflow:hidden}
.fams .bx.big::before{content:"";position:absolute;left:26px;top:0;width:64px;height:5px;border-radius:0 0 5px 5px}
.fams .bx.big::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;opacity:.12;pointer-events:none}
/* Kingsgrove Accounting: plum with a lime tip */
.fams .bx.cba::before{background:linear-gradient(90deg,#492d5e 0 70%,#9bd05b 70%)}
.fams .bx.cba::after{background:#492d5e}
.fams .bx.cba small,.fams .bx.cba .lk{color:#492d5e}
/* Xcentrix: purple */
.fams .bx.cbx::before{background:#6d3bd1}
.fams .bx.cbx::after{background:#6d3bd1}
.fams .bx.cbx small,.fams .bx.cbx .lk{color:#6d3bd1}
/* Kingsgrove Systems and Marketing Solutions: our deep plum on the green */
.fams .bx.cbk::before{background:#25102c}
.fams .bx.cbk::after{background:#25102c;opacity:.1}
.fams .bx.cbk small{color:#25102c;opacity:.75}
.fams .bx.big::after{right:-46px;top:-58px;width:118px;height:118px;opacity:.09}
.fams .bx.big::before{height:6px;width:72px}
/* family cards: all three logos sit in the same 46px slot */
.fams .fl{height:46px;min-height:46px;display:flex;align-items:center}
.fams .fl>img{height:46px;width:auto;max-width:none}
.fams .fl.kk svg{height:46px;width:46px}
.fams .fl .kt b{font-size:1.2rem!important}

/* team cards: same shape as the Kingsgrove Accounting "Our Story" page */
body main section.sec.cream.pcs{background:#fbf4ee;padding:64px 0 72px}
.pcs-h{margin-bottom:34px}
.pcs-h h2.t{color:var(--ink);margin:12px 0 10px}
.pcs-h .lead{color:#5a4a62!important;max-width:620px}
.pcs .eyebrow{color:var(--coral-d)!important;display:inline-flex!important}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pgrid .tpc:last-child:nth-child(odd){grid-column:1/-1}
.tpc{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start;background:#fff;border:1px solid var(--line);border-top:5px solid var(--coral);border-radius:22px;padding:26px;box-shadow:0 22px 48px -30px rgba(37,16,44,.4)}
.tpc>img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:16px;background:var(--ink2)}
.tpc .pr{font:700 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--coral-d)}
.tpc h3{font-size:1.8rem;color:var(--ink);margin:6px 0 10px}
.tpc p{color:#4d3f55;font-size:.98rem;line-height:1.6}
.tpc .sk{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tpc .sk span{background:#efe7f2;color:#492d5e;font:700 .78rem var(--body);padding:6px 12px;border-radius:99px}
@media(max-width:1000px){.pgrid{grid-template-columns:1fr}}
@media(max-width:560px){.tpc{grid-template-columns:1fr}.tpc>img{max-width:220px}}

/* partner page: three companies, one goal */
.gl .ob{grid-template-columns:repeat(3,1fr);gap:22px}
.gl .bx.big.col{height:100%}
.gl .dn{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;height:50px}
.gl .dn .ar{color:var(--coral-d)}
.gl .dn .ar svg{width:34px;height:34px}
.gl .goal{display:flex;align-items:center;justify-content:center;gap:20px;text-align:left;padding:26px 30px;border-radius:24px;background:linear-gradient(135deg,#9bd05b,#80b941);color:#25102c;box-shadow:0 26px 56px -26px rgba(75,122,28,.7)}
.gl .goal .gi{width:62px;height:62px;border-radius:18px;background:#25102c;color:#9bd05b;display:grid;place-items:center;flex:none}
.gl .goal .gi svg{width:32px;height:32px}
.gl .goal b{display:block;font:800 clamp(1.7rem,3.2vw,2.5rem) var(--disp);line-height:1.05}
.gl .goal small{display:block;margin-top:6px;font:600 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
@media(max-width:1000px){.gl .ob{grid-template-columns:1fr}.gl .dn{display:none}.gl .goal{margin-top:22px;flex-direction:column;text-align:center}}
.gl .bx.sys p{color:#25102c!important;opacity:.92}.gl .bx.sys small{color:#25102c}

/* our story page: the origin timeline */
.story{background:#fbf4ee;padding:76px 0 80px;color:var(--text)}
.story .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.story .eyebrow{color:var(--coral-d)!important;display:inline-flex!important}
.story h2.t{color:var(--ink);margin:12px 0 16px}
.story .lead{color:#5a4a62!important;max-width:520px}
.story-f{display:grid;gap:12px;margin-top:28px;max-width:440px}
.story-f span{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:12px}
.story-f small{font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--coral-d)}
.story-f b{font:800 1rem var(--disp);color:var(--ink);text-align:right}
.story-t{list-style:none;position:relative;display:grid;gap:30px;padding-left:0}
.story-t::before{content:"";position:absolute;left:25px;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--coral),rgba(155,208,91,.25))}
.story-t li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:22px;align-items:start}
.story-t i{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--coral);font:800 .95rem var(--mono);font-style:normal;color:var(--coral-d)}
.story-t b{display:block;font:800 1.55rem var(--disp);color:var(--ink);line-height:1.1;margin-top:6px}
.story-t p{margin-top:8px;color:#4d3f55;font-size:1.02rem;line-height:1.6;max-width:520px}
.story-t li.now i{background:var(--coral);color:var(--ink)}
@media(max-width:900px){.story .wrap{grid-template-columns:1fr;gap:38px}.story{padding:56px 0}}

/* who we work with */
.wwh .oc{align-items:center}
.wwf{display:grid;gap:14px;max-width:440px;margin-left:auto;width:100%}
.wwf div{border-left:4px solid var(--coral);background:rgba(255,255,255,.06);border-radius:0 18px 18px 0;padding:18px 22px}
.wwf b{display:block;font:800 1.5rem var(--disp);color:#fff;line-height:1.1}
.wwf span{display:block;margin-top:4px;color:#cdbfd8;font-size:.98rem}
.ww-s{background:#fff;padding:76px 0 72px;color:var(--text)}
.ww-s .eyebrow,.ww-m .eyebrow{color:var(--coral-d)!important;display:inline-flex!important}
.ww-s h2.t,.ww-m h2.t{color:var(--ink)}
.ww-s .lead,.ww-m .lead{color:#5a4a62!important}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;border-top:3px solid var(--coral)}
.wc{padding:30px 30px 34px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.wc:nth-child(3n+1){border-left:0;padding-left:0}
.wc:nth-child(n+4){border-bottom:0}
.wi{width:50px;height:50px;border-radius:14px;background:var(--coral-soft);color:var(--coral-d);display:grid;place-items:center}
.wi svg{width:25px;height:25px}
.wc h3{font-size:1.45rem;color:var(--ink);margin:16px 0 8px}
.wc p{color:#4d3f55;font-size:1rem;line-height:1.55}
.wc small{display:block;margin-top:14px;font:600 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--coral-d);line-height:1.5}
.ww-m{background:#fbf4ee;padding:76px 0 80px;color:var(--text)}
.ww-m .area-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;margin-top:44px;align-items:start}
.area-panel label{display:block;font:800 1.05rem var(--disp);color:var(--ink);margin-bottom:10px}
.area-field{display:flex;gap:10px}
.area-field input{flex:1;min-width:0;padding:15px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font:500 1rem var(--body);color:var(--ink)}
.area-field input:focus{outline:0;border-color:var(--coral-d)}
.area-result{margin-top:18px;padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);color:#4d3f55;line-height:1.5}
.area-result strong{color:var(--ink)}
.area-result.yes{background:#eef8df;border-color:#bfe08c}
.area-result.maybe{background:#fff7e6;border-color:#f3d28a}
.area-result .dist{display:block;font:800 2.6rem var(--disp);letter-spacing:-.03em;color:var(--coral-d);line-height:1.1;margin:6px 0 4px}
.area-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.area-cta .btn{padding:11px 18px;font-size:.95rem}
.area-cta .btn.g{border-color:rgba(37,16,44,.2);color:var(--ink);background:#fff}
.area-key{list-style:none;display:grid;gap:10px;margin:22px 0 4px;font-weight:600;color:#4d3f55}
.area-key li{display:flex;align-items:center;gap:12px}
.k{width:16px;height:16px;border-radius:50%;display:inline-block;flex:0 0 16px}
.k-home{background:var(--coral-d);box-shadow:0 0 0 5px rgba(75,122,28,.25)}
.k-you{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.25)}
.k-ring{background:rgba(155,208,91,.25);border:2px dashed var(--coral-d)}
.area-fine{margin-top:16px;font-size:.92rem;color:#6f6277}
.area-map-wrap{position:sticky;top:104px}
#area-map{height:520px;border-radius:24px;border:1px solid var(--line);box-shadow:0 24px 56px -30px rgba(37,16,44,.45);overflow:hidden;z-index:0}
.area-map-note{font-size:.8rem;color:#6f6277;margin-top:8px}
.area-map-note a{color:var(--coral-d)}
.kms-pin{background:none;border:0}
.kms-pin span{display:block;width:22px;height:22px;border-radius:50%;background:var(--coral-d);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.kms-pin.home span{background:#25102c;animation:kmsGlow 2s ease-out infinite}
.kms-pin.you span{background:#f59e0b}
@keyframes kmsGlow{0%{box-shadow:0 0 0 0 rgba(75,122,28,.6),0 4px 12px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 30px rgba(75,122,28,0),0 4px 12px rgba(0,0,0,.3)}}
.kms-dist{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:800;color:var(--ink);white-space:nowrap;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.towns{margin-top:54px;text-align:center}
.towns h3{font-size:1.3rem;color:var(--ink);margin-bottom:16px}
.tchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.tchips span{background:#fff;border:1px solid var(--line);color:var(--ink);font:700 .9rem var(--body);padding:8px 16px;border-radius:99px}
@media(max-width:1000px){.wgrid{grid-template-columns:1fr 1fr}.wc:nth-child(3n+1){border-left:1px solid var(--line);padding-left:30px}.wc:nth-child(odd){border-left:0;padding-left:0}.wc:nth-child(n+4){border-bottom:1px solid var(--line)}.ww-m .area-grid{grid-template-columns:1fr}.area-map-wrap{position:static}#area-map{height:400px}.wwf{margin:20px auto 0}}
@media(max-width:600px){.wgrid{grid-template-columns:1fr}.wc,.wc:nth-child(odd){border-left:0;padding-left:0}}
@media(prefers-reduced-motion:reduce){.kms-pin.home span{animation:none}}
/* who we work with: heading sits right under the hero, like the Our story page */
body main section.ww-s{padding:30px 0 72px}
.ww-s .center{margin-bottom:0}
/* first screen: hero stops short so the next heading peeks in at the bottom */
.hero.inner.swa.tfull{min-height:calc(100svh - var(--hdr,106px) - 150px)}
/* menu: six links plus the button, all on one line */
.nav{gap:2px}
.nav a.l{padding:10px 11px;font-size:.92rem;white-space:nowrap}
.nav .btn{margin-left:6px;padding:11px 20px;white-space:nowrap}
.hdr .logo{flex:none}
/* our story: one partner, one solution */
body main section.sec.ow{background:#fff;padding:72px 0 76px}
.ow .eyebrow{color:var(--coral-d)!important;display:inline-flex!important}
.ow h2.t{color:var(--ink);max-width:820px;margin-left:auto;margin-right:auto}
.ow .lead{color:#5a4a62!important;max-width:660px}

/* team page: hero a touch taller so only the next heading shows, not the card tops */
.hero.inner.swa.tfull{min-height:calc(100svh - var(--hdr,106px) - 118px)}

/* who we work with: its own hero, the map up top */
.hero.inner.wwm{padding:34px 0;min-height:calc(100svh - var(--hdr,106px) - 118px);display:flex;align-items:center}
.wm-in{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1.08fr;gap:44px;align-items:center}
.wm-l h1{font-size:clamp(2.2rem,3.9vw,3.5rem);margin:16px 0 14px}
.wm-l .lead{color:#cdbfd8;font-size:1.05rem;max-width:520px}
.wwm .area-panel{margin-top:22px;max-width:520px}
.wwm .area-panel label{color:#fff;font-size:1rem}
.wwm .area-field input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.wwm .area-field input::placeholder{color:#a995b6}
.wwm .area-field input:focus{border-color:var(--coral)}
.wwm .area-result{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#e6dcee;margin-top:14px;padding:14px 18px}
.wwm .area-result strong{color:#fff}
.wwm .area-result.yes{background:rgba(155,208,91,.14);border-color:rgba(155,208,91,.5)}
.wwm .area-result.maybe{background:rgba(244,185,66,.12);border-color:rgba(244,185,66,.45)}
.wwm .area-result .dist{color:var(--coral);font-size:2.1rem}
.wwm .area-cta .btn.g{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.wwm .area-key{margin:16px 0 0;font-size:.9rem;color:#cdbfd8;grid-template-columns:1fr 1fr;gap:8px 16px}
.wwm .area-key li:last-child{grid-column:1/-1}
.wwm .area-fine{display:none}
.wwm .k-home{background:#25102c;box-shadow:0 0 0 2px #9bd05b}
.wwm .area-map-wrap{position:relative;top:auto}
.wwm #area-map{height:min(560px,calc(100svh - var(--hdr,106px) - 190px));min-height:420px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);border-color:rgba(155,208,91,.35)}
.wwm .area-map-note{color:#a995b6}.wwm .area-map-note a{color:var(--coral)}
.ww-t{background:#fbf4ee;padding:50px 0 56px}
.ww-t .towns{margin-top:0}
@media(max-width:1000px){.hero.inner.wwm{display:block;min-height:0;padding:40px 0}.wm-in{grid-template-columns:1fr;gap:30px}.wwm #area-map{height:380px}}

/* who we work with v3: centred hero with the client logos, map back in its own section */
.hero.inner.wlh{padding:40px 0 34px;min-height:calc(100svh - var(--hdr,106px) - 118px);display:flex;align-items:center}
.wl-in{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;text-align:center}
.wlh .stl{justify-content:center}
.wlh h1{font-size:clamp(2.4rem,5vw,4.4rem);max-width:900px;margin:16px auto 16px}
.wlh .lead{color:#cdbfd8;font-size:1.1rem;max-width:700px;margin:0 auto}
.wlh .acts{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px}
.wl-logos{margin-top:40px}
.wl-logos>b{display:block;font:600 .74rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:16px}
.wl-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.wl-t{display:flex;flex-direction:column;gap:9px}
.wl-t>span{height:84px;background:#fff;border-radius:18px;display:grid;place-items:center;padding:14px;box-shadow:0 20px 40px -26px rgba(0,0,0,.7)}
.wl-t img{max-height:50px;max-width:100%;width:auto;object-fit:contain}
.wl-t small{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#cdbfd8}
@media(max-width:1000px){.wl-row{grid-template-columns:repeat(3,1fr)}.hero.inner.wlh{display:block;min-height:0;padding:44px 0}}
@media(max-width:520px){.wl-row{grid-template-columns:repeat(2,1fr)}}

/* Partner company section: Kingsgrove Accounting (cards + big site shot + white contact card) */
.kpart .kp-head{max-width:760px}
.kpart .kp-g{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;margin-top:40px;align-items:center}
.kp-list{display:grid;gap:16px}
.kp-c{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:var(--r);background:var(--ink2);border:1px solid var(--line-d)}
.kp-i{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:var(--ink)}
.kp-i svg{width:24px;height:24px}
.kp-c h3{font-size:1.25rem;color:#fff;margin-bottom:6px}
.kp-c p{color:var(--muted-d);font-size:.98rem}
.kp-c.on{background:var(--coral);border-color:var(--coral)}
.kp-c.on h3,.kp-c.on p{color:var(--ink)}
.kp-c.on .kp-i{background:var(--ink);color:var(--coral)}
.kp-shot{display:block;border-radius:16px;overflow:hidden;border:2px solid var(--coral);box-shadow:0 0 0 1px rgba(155,208,91,.25),0 0 48px -6px rgba(155,208,91,.45);transition:transform .25s}
.kp-shot:hover{transform:translateY(-3px)}
.kp-shot img{width:100%;height:auto}
.kp-card{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;background:#fff;color:var(--ink);border:2px solid var(--coral);border-radius:var(--r);padding:22px 26px}
.kp-who img{height:32px;width:auto;margin-bottom:10px}
.kp-who b{display:block;font-family:var(--disp);font-size:1.15rem}
.kp-who small{color:var(--muted);font-size:.9rem}
.kp-links{display:grid;gap:8px;min-width:0}
.kp-links a{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.kp-links a span{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--coral);display:grid;place-items:center;flex:none}
.kp-links a span svg{width:15px;height:15px}
.kp-links a:hover{color:var(--coral-d)}
.kp-cred{background:var(--ink);color:#fff;border-radius:14px;padding:16px 20px;max-width:340px}
.kp-cred small{display:block;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;color:var(--coral);margin-bottom:6px}
.kp-cred p{font-size:.95rem;line-height:1.5}
@media (max-width:900px){.kpart .kp-g{grid-template-columns:1fr}.kp-card{grid-template-columns:1fr;gap:18px}.kp-cred{max-width:none}}

/* Partner card: white, with the full-colour Kingsgrove Accounting logo (Bradley, 3 Nov 2026) */
.sv.partner .sv-vis.plogos{background-color:#fff;background-image:none}
.sv.partner .sv-vis.plogos .svtag{background:rgba(155,208,91,.22);color:#3d6a14}

/* Partner company pill: white, with the full-colour logo, like every other partner spot (Bradley, 3 Nov 2026) */
.pill-feat{background:#fff;color:var(--ink);border-color:var(--coral)}
.pill-feat::after{background:linear-gradient(100deg,transparent 35%,rgba(155,208,91,.28) 50%,transparent 65%)}
.pill-feat .pf-t{color:var(--ink)}
.kp-who img{height:34px}

/* Kingsgrove Accounting cards: the one nearest the middle of the screen as you scroll (or hovered / tapped) goes green, glows and opens its detail (Bradley, 3 Nov 2026) */
.kp-c{cursor:pointer;transition:background .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s ease}
.kp-c h3,.kp-c p,.kp-i{transition:color .45s ease,background .45s ease}
.kp-c.on{box-shadow:0 0 0 4px rgba(155,208,91,.14),0 0 46px -4px rgba(155,208,91,.6);transform:translateX(6px)}
.kp-c:not(.on):hover{border-color:rgba(155,208,91,.55)}
.kp-c:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.kp-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.kp-more>ul{overflow:hidden;min-height:0;list-style:none;margin:0;padding:0}
.kp-c.on .kp-more{grid-template-rows:1fr}
.kp-more li{position:relative;padding:5px 0 0 20px;font-weight:700;font-size:.95rem;color:var(--ink);opacity:0;transform:translateY(-6px);transition:opacity .4s ease .12s,transform .4s ease .12s}
.kp-more li::before{content:"";position:absolute;left:2px;top:.85em;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.kp-c.on .kp-more li{opacity:1;transform:none}
.kp-more ul{padding-top:10px}
@media(max-width:900px){.kp-c.on{transform:none}}
@media(prefers-reduced-motion:reduce){.kp-c,.kp-c h3,.kp-c p,.kp-i,.kp-more,.kp-more li{transition:none}}

/* Dana card in the partner card's style: white half with the big coloured logo, plum half with the details (Bradley, 3 Nov 2026) */
.kp-card{position:relative;grid-template-columns:1fr 1.3fr;gap:0;padding:0;overflow:hidden;background:#fff;border:1.5px solid var(--coral);box-shadow:0 26px 50px -30px rgba(0,0,0,.55)}
.kp-card .svtag{right:auto;left:22px;top:18px;background:rgba(155,208,91,.22);color:#3d6a14;z-index:1}
.kp-who{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 32px 40px}
.kp-who img{height:auto;width:min(320px,86%);margin-bottom:22px}
.kp-who b{font-size:1.3rem}
.kp-side{background:#59315f;padding:34px 40px;display:flex;flex-direction:column;justify-content:center;gap:22px;min-width:0}
.kp-links{gap:14px}
.kp-links a{color:#fff;font-size:1.05rem}
.kp-links a:hover{color:var(--coral)}
.kp-links a span{background:var(--coral);color:var(--ink);width:34px;height:34px}
.kp-cred{background:none;border-radius:0;border-top:1px solid rgba(255,255,255,.2);padding:18px 0 0;max-width:none}
.kp-cred p{color:#e6dcee}
@media(max-width:900px){.kp-card{grid-template-columns:1fr}.kp-who{padding:56px 24px 28px}.kp-side{padding:28px 24px}}
/* collapsed cards were 10px tall because of padding; put the gap on the list items instead */
.kp-more ul{padding-top:0}
.kp-more li:first-child{margin-top:10px}

/* Team cards on the homepage are links to each profile, and read as specialists (Bradley, 3 Nov 2026) */
a.tm{color:inherit;text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s}
a.tm:hover{transform:translateY(-4px)}
a.tm:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.tm .sk{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tm .sk span{background:rgba(155,208,91,.14);color:#dff0c3;font:700 .74rem var(--body);padding:5px 11px;border-radius:99px}
.sec:not(.ink):not(.ink2) .tm .sk span{background:#efe7f2;color:#492d5e}
.tm .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;color:var(--coral)}
.tm .go svg{width:16px;height:16px;transition:transform .2s}
a.tm:hover .go svg{transform:translateX(4px)}
.tpc{scroll-margin-top:110px}
.tpc:target{box-shadow:0 0 0 3px var(--coral),0 22px 48px -30px rgba(37,16,44,.4)}

/* Less green (Bradley, 3 Nov 2026): the card in focus stays dark with a thin green edge and a soft light; only its icon is solid green */
.kp-c.on{background:#3a1c47;border-color:rgba(155,208,91,.7);box-shadow:0 18px 44px -26px rgba(155,208,91,.45);transform:translateX(6px)}
.kp-c.on h3{color:#fff}
.kp-c.on p{color:#e6dcee}
.kp-c .kp-i{background:rgba(155,208,91,.12);color:var(--coral)}
.kp-c.on .kp-i{background:var(--coral);color:var(--ink)}
.kp-c.on .kp-more li{color:#fff}
.kp-c.on .kp-more li::before{background:var(--coral)}
.kp-shot{border:1px solid rgba(155,208,91,.4);box-shadow:0 28px 60px -34px rgba(0,0,0,.7)}
@media(max-width:900px){.kp-c.on{transform:none}}

/* Footer "Partner company of" link: the same white pill with the coloured logo as everywhere else (Bradley, 3 Nov 2026) */
a.partner.partner-w{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 12px 10px 18px;border-radius:999px;background:#fff;border:1.5px solid var(--coral);color:var(--ink);box-shadow:0 0 0 4px rgba(155,208,91,.1)}
a.partner.partner-w:hover{background:#fff;border-color:var(--coral);box-shadow:0 0 0 5px rgba(155,208,91,.18);transform:translateY(-2px)}
.partner-w .pf-t{color:var(--ink);font-weight:600;font-size:.88rem}
.partner-w .pf-logo{height:24px;width:auto;display:block}
.partner-w .pf-go{width:30px;height:30px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;flex:none}
.partner-w .parr{color:var(--ink);width:16px;height:16px}

/* Kingsgrove Accounting section: the website is the star (bigger, stays in view while the cards step), and less green (Bradley, 3 Nov 2026) */
.kpart>.wrap{max-width:1320px}
.kpart .kp-g{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:36px;align-items:start}
.kpart .kp-shot{position:sticky;top:96px}
.kp-c{padding:20px 22px}
.kp-c .kp-i{background:transparent;border:1px solid rgba(155,208,91,.45);color:var(--coral)}
.kp-c.on .kp-i{background:rgba(155,208,91,.16);border-color:var(--coral);color:var(--coral)}
.kp-c.on{border-color:rgba(155,208,91,.45);box-shadow:0 18px 44px -28px rgba(0,0,0,.7)}
.kp-c.on .kp-more li::before{background:#cfc2d8}
.kp-shot{border:1px solid rgba(255,255,255,.14)}
@media(max-width:900px){.kpart .kp-g{grid-template-columns:1fr}.kpart .kp-shot{position:static}}

a.partner.partner-w{flex-wrap:nowrap;gap:10px;padding:8px 10px 8px 16px;max-width:100%}
.partner-w .pf-t{white-space:nowrap;font-size:.8rem}
.partner-w .pf-logo{height:22px;flex:0 1 auto;min-width:0}
.partner-w .pf-go{width:28px;height:28px}

/* Software page: headline, boxes and the white strip all sit on the first screen, even on a shorter laptop (Bradley, 3 Nov 2026) */
.hero.inner.swa{padding:28px 0;min-height:0}
.swa .ot h1{font-size:clamp(2.3rem,4vw,3.6rem);margin:14px 0}
.swa .ot .acts{margin-top:22px}

/* The top bar travels with you as you scroll (an earlier rule had reset it to a normal position) (Bradley, 3 Nov 2026) */
.hdr{position:sticky;top:0;z-index:60}

/* Software page: less space above "From scattered tools to one system you own" (Bradley, 3 Nov 2026) */
.sec.sysfit{padding-top:34px!important}
@media(max-width:700px){.sec.sysfit{padding-top:28px!important}}

/* a stronger selector, because the "section after a section" rule above also sets this padding with !important */
section.sec.ink.fit.sysfit.sysfit{padding-top:34px!important}
@media(max-width:700px){section.sec.ink.fit.sysfit.sysfit{padding-top:28px!important}}

/* "Partner company" pill: the white and plum split from the Dana card, in the hero and every footer (Bradley, 3 Nov 2026) */
a.pill-feat,a.partner.partner-w{display:inline-flex;align-items:stretch;flex-wrap:nowrap;gap:0;padding:0;overflow:hidden;background:#59315f;border:1.5px solid var(--coral);border-radius:999px;color:#fff;box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}
a.pill-feat:hover,a.partner.partner-w:hover{background:#59315f;border-color:var(--coral);box-shadow:0 18px 40px -22px rgba(155,208,91,.45);transform:translateY(-2px)}
a.pill-feat::after{display:none}
a.pill-feat>i{display:none}
.pill-feat .pf-logo,.partner-w .pf-logo{order:0;box-sizing:content-box;height:26px;width:auto;padding:11px 24px 11px 24px;background:#fff;flex:none}
.pill-feat .pf-t,.partner-w .pf-t{order:1;display:flex;align-items:center;padding:0 6px 0 22px;color:#fff;font-weight:600;font-size:.92rem;white-space:nowrap}
.pill-feat .pf-go,.partner-w .pf-go{order:2;align-self:center;margin:0 10px 0 8px;width:30px;height:30px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;flex:none}
.pill-feat .parr,.partner-w .parr{color:var(--ink);width:16px;height:16px}
.partner-w .pf-logo{height:20px;padding:9px 16px}
.partner-w .pf-t{padding:0 4px 0 14px;font-size:.8rem}
.partner-w .pf-go{width:26px;height:26px;margin:0 8px 0 6px}
@media(max-width:560px){.pill-feat .pf-logo{height:22px;padding:9px 16px}.pill-feat .pf-t{padding-left:14px;font-size:.84rem}}

/* no glow on the partner pill (Bradley, 3 Nov 2026) */
a.pill-feat,a.partner.partner-w,a.pill-feat:hover,a.partner.partner-w:hover{box-shadow:none!important;animation:none}
a.pill-feat:hover,a.partner.partner-w:hover{transform:none;border-color:var(--coral)}

/* Software page sits as signed off: hero starts 12px higher and the top bar always carries its thin line (Bradley, 3 Nov 2026) */
.hero.inner.swa{padding-top:19px}
.hdr{border-bottom-color:var(--line-d)}

/* System map: a touch more room between the nodes so a label never sits under the next circle (Bradley, 3 Nov 2026) */
@media(min-width:761px){
  .sysfit .sysmap{aspect-ratio:900/350}
  .sysmap .sn>span:last-child{white-space:nowrap}
}

@media(min-width:761px) and (max-width:1100px){.sysfit .sysmap{aspect-ratio:900/440}}

/* Software page: the Xcentrix product film in the browser frame instead of the screenshot carousel (Bradley, 3 Nov 2026) */
.bf video{display:block;width:100%;height:auto;background:#12071a}

/* the two buttons in the AI section need room between them (Bradley, 3 Nov 2026) */
.aiimp .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* Partner pill: no green edge, a smaller arrow, and it sits properly in the hero (Bradley, 3 Nov 2026) */
a.pill-feat,a.partner.partner-w,a.pill-feat:hover,a.partner.partner-w:hover{border:0!important}
.pill-feat .pf-go,.partner-w .pf-go{width:24px;height:24px;margin:0 12px 0 6px}
.pill-feat .parr,.partner-w .parr{width:12px;height:12px;color:#000}
.partner-w .pf-go{width:22px;height:22px;margin:0 10px 0 4px}
.partner-w .parr{width:11px;height:11px}
.pill-feat .pf-logo{padding:10px 22px}
.pill-feat .pf-t{padding:0 8px 0 20px;font-size:.9rem}
.hero .wrap>div>a.pill-feat{margin:2px 0 26px}

/* "Websites we have built": the white band around the logos is shorter; logos and tiles stay as they were (Bradley, 3 Nov 2026) */
section.lband{padding:14px 0 16px!important}
.lband .lbh{margin-bottom:10px}

section.sec.lband.lband.lband.lband.lband{padding-top:14px!important;padding-bottom:16px!important}

/* Partner pill, final shape: a rounded rectangle like the partner cards. Plum label first, then the white logo with a thick black arrow on it, so the arrow can be black and still be seen (Bradley, 3 Nov 2026) */
a.pill-feat,a.partner.partner-w{border-radius:14px;align-items:stretch}
.pill-feat .pf-t,.partner-w .pf-t{order:0;padding:0 24px 0 22px;font-size:.95rem}
.pill-feat .pf-logo,.partner-w .pf-logo{order:1;padding:11px 8px 11px 24px}
.pill-feat .pf-go,.partner-w .pf-go{order:2;align-self:stretch;display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin:0;padding:0 22px 0 10px;border-radius:0;background:#fff;color:#000}
.pill-feat .parr,.partner-w .parr{width:20px;height:20px;color:#000}
.pill-feat .parr path,.partner-w .parr path{stroke-width:3.4;stroke:#000}
.partner-w .pf-t{padding:0 16px 0 16px;font-size:.8rem}
.partner-w .pf-logo{padding:9px 6px 9px 16px}
.partner-w .pf-go{padding:0 14px 0 6px}
.partner-w .parr{width:15px;height:15px}

/* ===== The businesses we support: a dark, animated board of sectors (Bradley, 3 Nov 2026) ===== */
section.ww-s.sup{position:relative;overflow:hidden;background:linear-gradient(180deg,#2a1433 0%,#321a3a 100%);color:#fff;padding:64px 0 76px!important}
section.ww-s.sup::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(155,208,91,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.06) 1px,transparent 1px);background-size:44px 44px;animation:sup-drift 24s linear infinite;mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}
@keyframes sup-drift{to{background-position:44px 44px}}
.sup-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5}
.sup-orb.o1{width:340px;height:340px;left:-80px;top:40px;background:rgba(155,208,91,.22);animation:sup-float 14s ease-in-out infinite}
.sup-orb.o2{width:380px;height:380px;right:-100px;bottom:-60px;background:rgba(120,70,150,.5);animation:sup-float 17s ease-in-out infinite reverse}
@keyframes sup-float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-34px)}}
.ww-s.sup .wrap{position:relative;z-index:1}
.ww-s.sup h2.t{color:#fff}
.ww-s.sup .lead{color:#cdbfd8!important}
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.sc{--mx:50%;--my:0%;position:relative;display:block;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none;background:#3a1c47;box-shadow:0 22px 50px -30px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.sc::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 72%,rgba(155,208,91,.95) 88%,transparent 100%);animation:sup-spin 5s linear infinite;opacity:0;transition:opacity .35s}
.sc::after{content:"";position:absolute;inset:1.5px;border-radius:20.5px;background:linear-gradient(160deg,#3d1f4a,#33193d)}
@keyframes sup-spin{to{transform:rotate(360deg)}}
.sc-glow{position:absolute;inset:1.5px;z-index:1;border-radius:20px;background:radial-gradient(280px circle at var(--mx) var(--my),rgba(155,208,91,.2),transparent 62%);opacity:0;transition:opacity .3s;pointer-events:none}
.sc-in{position:relative;z-index:2;display:block;padding:28px 28px 26px;height:100%}
.sc:hover,.sc:focus-visible{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(0,0,0,.85),0 0 0 1px rgba(155,208,91,.25)}
.sc:hover::before,.sc:focus-visible::before{opacity:1}
.sc:hover .sc-glow,.sc:focus-visible .sc-glow{opacity:1}
.sc:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.sc-n{position:absolute;right:24px;top:22px;font:700 .8rem var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.28);transition:color .3s}
.sc:hover .sc-n{color:var(--coral)}
.sc-ico{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:rgba(155,208,91,.1);color:var(--coral);margin-bottom:22px;transition:background .3s,color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.sc-ico svg{width:26px;height:26px;position:relative;z-index:1;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sc-ring{position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed rgba(155,208,91,.55);animation:sup-spin 14s linear infinite}
.sc-ring.r2{inset:-14px;border:1px solid rgba(155,208,91,.16);animation:sup-pulse 3.2s ease-in-out infinite}
@keyframes sup-pulse{0%,100%{transform:scale(.94);opacity:.4}50%{transform:scale(1.06);opacity:1}}
.sc:hover .sc-ico{background:var(--coral);color:var(--ink);transform:scale(1.06)}
.sc:hover .sc-ico svg{transform:rotate(-8deg) scale(1.08)}
.sc:hover .sc-ring{animation-duration:4s;border-color:var(--coral)}
.sc h3{font-size:1.4rem;color:#fff;margin-bottom:10px;padding-right:34px}
.sc p{color:#d6c9de;font-size:1rem;line-height:1.55}
.sc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.sc-tags li{font:700 .76rem var(--body);padding:6px 12px;border-radius:99px;color:#e6dcee;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background .3s,color .3s,border-color .3s,transform .3s}
.sc:hover .sc-tags li{background:rgba(155,208,91,.16);border-color:rgba(155,208,91,.55);color:#fff}
.sc:hover .sc-tags li:nth-child(2){transition-delay:.05s}.sc:hover .sc-tags li:nth-child(3){transition-delay:.1s}.sc:hover .sc-tags li:nth-child(4){transition-delay:.15s}
.sc-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:.92rem;color:var(--coral);opacity:.65;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.sc-go svg{width:16px;height:16px;transition:transform .3s}
.sc:hover .sc-go{opacity:1;transform:none}
.sc:hover .sc-go svg{transform:translateX(5px)}
@media(max-width:1000px){.sup-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sup-grid{grid-template-columns:1fr}.sc-in{padding:24px 22px}.sc-go{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){section.ww-s.sup::before,.sup-orb,.sc::before,.sc-ring{animation:none}.sc,.sc-ico,.sc-ico svg,.sc-go{transition:none}}

/* Who we work with: the page opens as signed off, the hero a little shorter and the next heading starting just under it (Bradley, 3 Nov 2026) */
.hero.inner.wlh{min-height:calc(100svh - var(--hdr,106px) - 140px)}
section.ww-s.sup{padding-top:36px!important}

/* ===== Team page: Bradley's big section, his team, his story, and what each of us is best at (Bradley, 3 Nov 2026) ===== */
.pr{font:700 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
/* 1. Bradley */
section.sec.ink.bg{padding:72px 0 80px!important;position:relative;overflow:hidden}
section.sec.ink.bg::before{content:"";position:absolute;right:-120px;top:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(155,208,91,.16),transparent 65%);animation:bg-pulse 7s ease-in-out infinite}
@keyframes bg-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
.bg-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:56px;align-items:center;scroll-margin-top:100px}
.bg-photo{position:relative}
.bg-frame{position:relative;border-radius:26px;padding:10px;background:linear-gradient(145deg,rgba(155,208,91,.55),rgba(255,255,255,.08) 45%,rgba(120,70,150,.5));box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.bg-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;border-radius:18px;display:block;background:var(--ink2)}
.bg-tag{position:absolute;left:-14px;bottom:34px;background:#fff;color:var(--ink);font:800 .85rem var(--disp);padding:10px 18px;border-radius:12px;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.bg-copy h2.t{font-size:clamp(2.6rem,5vw,4.2rem);color:#fff;margin:10px 0 18px}
.bg-lead{font-size:1.25rem;line-height:1.55;color:#fff;max-width:600px}
.bg-p{margin-top:14px;color:#cdbfd8;font-size:1.05rem;max-width:600px}
.bg-do{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 22px}
.bg-d{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:transform .3s,border-color .3s}
.bg-d:hover{transform:translateY(-4px);border-color:rgba(155,208,91,.6)}
.bg-d svg{width:24px;height:24px;color:var(--coral);margin-bottom:8px;display:block}
.bg-d b{display:block;font:800 1rem var(--disp);color:#fff}
.bg-d small{display:block;color:#b9aac1;font-size:.82rem;margin-top:3px;line-height:1.35}
.bg .sk{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.bg .sk span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#efe6f4;font:700 .8rem var(--body);padding:7px 14px;border-radius:99px}
.bg .acts{display:flex;flex-wrap:wrap;gap:14px}
/* 2. His team */
section.sec.cream.bt{padding:70px 0 76px!important}
.bt-h{margin-bottom:34px}
.bt-h h2.t{color:var(--ink);margin:0 0 10px}
.bt-h .lead{color:#5a4a62!important;max-width:620px}
.bt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bt-c{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 26px 50px -34px rgba(37,16,44,.45);scroll-margin-top:110px;transition:transform .3s,box-shadow .3s}
.bt-c:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(37,16,44,.5)}
.bt-c:target{box-shadow:0 0 0 3px var(--coral),0 26px 50px -34px rgba(37,16,44,.45)}
.bt-ph{border-radius:18px;overflow:hidden;background:var(--ink2);min-height:280px}
.bt-ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;transition:transform .6s}
.bt-c:hover .bt-ph img{transform:scale(1.05)}
.bt-b{display:flex;flex-direction:column;justify-content:center}
.bt-b .pr{color:var(--coral-d)}
.bt-b h3{font-size:2rem;color:var(--ink);margin:6px 0 10px}
.bt-b p{color:#4d3f55;font-size:1rem;line-height:1.6}
.bt .sk{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bt .sk span{background:#efe7f2;color:#492d5e;font:700 .78rem var(--body);padding:6px 12px;border-radius:99px}
/* 3. Story */
section.sec.ink2.bs{padding:72px 0 76px!important}
.bs-h{margin-bottom:40px}
.bs-h h2.t{color:#fff;margin:0 0 10px}
.bs-h .lead{color:#cdbfd8!important}
.bs-tl{position:relative;max-width:860px;display:grid;gap:34px;padding-left:12px}
.bs-line{position:absolute;left:36px;top:18px;bottom:18px;width:2px;background:rgba(255,255,255,.12);overflow:hidden}
.bs-line::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--coral),rgba(155,208,91,.2));transform:scaleY(0);transform-origin:top;transition:transform 2.2s cubic-bezier(.3,.7,.2,1) .2s}
.js .bs-tl.in .bs-line::after{transform:scaleY(1)}
.bs-s{position:relative;display:grid;grid-template-columns:50px 1fr;gap:26px;align-items:start}
.bs-n{position:relative;z-index:1;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#321a3a;border:2px solid var(--coral);color:var(--coral);font:800 .95rem var(--mono);box-shadow:0 0 0 6px #2b1534}
.bs-s h3{color:#fff;font-size:1.45rem;margin:4px 0 8px}
.bs-s p{color:#d6c9de;font-size:1.05rem;line-height:1.6;max-width:640px}
.bs-end{margin-top:46px;font:800 clamp(1.5rem,3vw,2.2rem) var(--disp);color:#fff;letter-spacing:-.02em}
.bs-end em{font-style:normal;color:var(--coral)}
/* 4. Skills */
section.sec.bsk{background:#fff;padding:70px 0 80px!important}
.bsk-h{margin-bottom:38px}
.bsk-h h2.t{color:var(--ink)}
.bsk-h .lead{color:#5a4a62!important;margin-inline:auto}
.bsk-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.bsk-c{background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:26px}
.bsk-hd{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.bsk-hd img{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:center 20%;border:3px solid #fff;box-shadow:0 8px 20px -10px rgba(37,16,44,.5)}
.bsk-hd h3{font-size:1.5rem;color:var(--ink)}
.bsk-hd span{display:block;font:700 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-d);margin-top:3px}
.bsk-c ul{list-style:none;margin:0;padding:0}
.bsk-c li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px dashed var(--line)}
.bsk-c li:last-child{border-bottom:0}
.bsk-i{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#4b7a1c;border:1px solid var(--line);transition:background .3s,color .3s,transform .3s}
.bsk-i svg{width:20px;height:20px}
.bsk-c li:hover .bsk-i{background:var(--ink);color:var(--coral);transform:rotate(-6deg) scale(1.06)}
.bsk-c b{display:block;font:800 1.02rem var(--disp);color:var(--ink)}
.bsk-c small{display:block;color:#5a4a62;font-size:.9rem;line-height:1.45;margin-top:2px}
@media(max-width:1000px){.bg-grid{grid-template-columns:1fr;gap:34px}.bg-photo{max-width:420px}.bt-grid{grid-template-columns:1fr}.bsk-g{grid-template-columns:1fr}}
@media(max-width:640px){.bg-do{grid-template-columns:1fr}.bt-c{grid-template-columns:1fr}.bt-ph{min-height:0;aspect-ratio:4/4.2}.bs-s{grid-template-columns:44px 1fr;gap:18px}.bs-n{width:44px;height:44px}.bs-line{left:34px}.bg-tag{left:10px}}
@media(prefers-reduced-motion:reduce){section.sec.ink.bg::before{animation:none}.bs-line::after{transition:none}.bt-c,.bt-ph img,.bg-d,.bsk-i{transition:none}}

/* The businesses we support, light version (Bradley, 3 Nov 2026: "make it light, it's too dark") */
section.ww-s.sup{background:linear-gradient(180deg,#fbf4ee 0%,#ffffff 100%);color:var(--text)}
section.ww-s.sup::before{background-image:linear-gradient(rgba(75,122,28,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(75,122,28,.07) 1px,transparent 1px)}
.sup-orb{opacity:.55}
.sup-orb.o1{background:rgba(155,208,91,.3)}
.sup-orb.o2{background:rgba(150,100,190,.16)}
.ww-s.sup h2.t{color:var(--ink)}
.ww-s.sup .lead{color:#5a4a62!important}
.sc{background:#e9dfd3;color:var(--ink);box-shadow:0 22px 44px -30px rgba(37,16,44,.35)}
.sc::after{background:linear-gradient(160deg,#ffffff,#fcf9f5)}
.sc-glow{background:radial-gradient(280px circle at var(--mx) var(--my),rgba(155,208,91,.26),transparent 62%)}
.sc:hover,.sc:focus-visible{box-shadow:0 30px 56px -28px rgba(37,16,44,.45),0 0 0 1px rgba(155,208,91,.4)}
.sc-n{color:rgba(37,16,44,.25)}
.sc:hover .sc-n{color:#4b7a1c}
.sc-ico{background:#eef6e0;color:#4b7a1c}
.sc-ring{border-color:rgba(75,122,28,.5)}
.sc-ring.r2{border-color:rgba(75,122,28,.2)}
.sc:hover .sc-ico{background:var(--coral);color:var(--ink)}
.sc:hover .sc-ring{border-color:#4b7a1c}
.sc h3{color:var(--ink)}
.sc p{color:#4d3f55}
.sc-tags li{color:#492d5e;background:#f3edf6;border-color:#e6dcec}
.sc:hover .sc-tags li{background:#e9f4d8;border-color:rgba(75,122,28,.45);color:var(--ink)}
.sc-go{color:#4b7a1c;opacity:.8}

/* Scrolling strip, premium version: quiet dark band, fine type, hairline dividers, no green diamonds or glow, edges fade into the band itself (Bradley, 3 Nov 2026) */
div.strip{position:relative;background:#1d0c26!important;padding:20px 0!important;border-top:1px solid rgba(255,255,255,.08)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important;-webkit-mask-image:none!important;mask-image:none!important;overflow:hidden}
div.strip::before,div.strip::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
div.strip::before{left:0;background:linear-gradient(90deg,#1d0c26,rgba(29,12,38,0))}
div.strip::after{right:0;background:linear-gradient(270deg,#1d0c26,rgba(29,12,38,0))}
div.strip .mq{gap:56px;font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;animation-duration:60s}
div.strip .mq span{gap:56px;color:rgba(255,255,255,.7);transition:color .3s}
div.strip .mq span:hover{color:#fff}
div.strip .mq span::after{content:"";width:1px;height:14px;border-radius:0;transform:none;background:rgba(255,255,255,.22)!important;box-shadow:none!important}
@media(max-width:700px){div.strip{padding:16px 0!important}div.strip::before,div.strip::after{width:60px}div.strip .mq{gap:40px;font-size:.72rem}div.strip .mq span{gap:40px}}
@media(prefers-reduced-motion:reduce){div.strip .mq{animation:none}}

/* Bradley's photo frame: a plain white border instead of the green-to-plum gradient (Bradley, 3 Nov 2026) */
.bg-frame{background:#fff;padding:8px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.bg-frame img{border-radius:19px}

/* ===== Bradley's story: exactly one screen, the team photo with an AI-style treatment, and a timeline that moves (Bradley, 3 Nov 2026) ===== */
section.sec.ink2.bs{height:calc(100svh - 79px);min-height:700px;padding:30px 0 0!important;display:flex;overflow:hidden}
.bs-wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr auto;column-gap:56px}
.bs-h{grid-column:1;grid-row:1;margin-bottom:14px}
.bs-h h2.t{font-size:clamp(2.2rem,4vw,3.2rem);margin:0 0 6px}
.bs-h .lead{font-size:1.05rem}
.bs-tl{grid-column:1;grid-row:2;display:grid;gap:14px;align-content:start;max-width:none;padding-left:0;position:relative}
.bs-s{opacity:.42;transition:opacity .5s,transform .5s;cursor:pointer;grid-template-columns:50px 1fr;gap:22px;outline:none}
.bs-s.on{opacity:1;transform:translateX(6px)}
.bs-s h3{font-size:1.25rem;margin:2px 0 4px}
.bs-s p{font-size:.98rem;line-height:1.5;max-width:560px}
.bs-s .bs-n{transition:background .4s,color .4s,box-shadow .4s}
.bs-s.on .bs-n{background:var(--coral);color:var(--ink);box-shadow:0 0 0 6px #2b1534,0 0 28px rgba(155,208,91,.55);animation:bs-ping 2s ease-out infinite}
@keyframes bs-ping{0%{box-shadow:0 0 0 6px #2b1534,0 0 0 6px rgba(155,208,91,.5)}100%{box-shadow:0 0 0 6px #2b1534,0 0 0 20px rgba(155,208,91,0)}}
.bs-line{left:24px;top:24px;bottom:24px}
.bs-line::after{transform:scaleY(var(--p,0));transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.js .bs-tl.in .bs-line::after{transform:scaleY(var(--p,0))}
.bs-photo{grid-column:2;grid-row:1/3;position:relative;margin:0 0 18px;border-radius:22px;overflow:hidden;background:#12071a;box-shadow:0 40px 80px -40px rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.14);transform-style:preserve-3d;transition:transform .2s ease-out;min-height:0}
.bs-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;filter:saturate(.85) contrast(1.05);animation:bs-kb 22s ease-in-out infinite alternate}
@keyframes bs-kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.bs-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,16,44,.1),rgba(37,16,44,.55)),linear-gradient(120deg,rgba(120,70,150,.28),transparent 60%);pointer-events:none}
.bs-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(155,208,91,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.14) 1px,transparent 1px);background-size:38px 38px;mix-blend-mode:screen;opacity:.55;mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,transparent 85%)}
.bs-scan{position:absolute;left:0;right:0;top:-20%;height:22%;z-index:3;background:linear-gradient(180deg,transparent,rgba(155,208,91,.28),transparent);border-bottom:1px solid rgba(155,208,91,.7);animation:bs-scan 5.5s ease-in-out infinite;pointer-events:none}
@keyframes bs-scan{0%{top:-24%}100%{top:104%}}
.bs-c{position:absolute;z-index:4;width:26px;height:26px;border:2px solid var(--coral);opacity:.9;animation:bs-corner 3s ease-in-out infinite}
.bs-c.c1{left:16px;top:16px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.bs-c.c2{right:16px;top:16px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.bs-c.c3{left:16px;bottom:16px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.bs-c.c4{right:16px;bottom:16px;border-left:0;border-top:0;border-bottom-right-radius:8px}
@keyframes bs-corner{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
.bs-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:rgba(18,7,26,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;font:700 .72rem var(--mono);letter-spacing:.14em}
.bs-chip.a{left:22px;bottom:26px}
.bs-chip.a i{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:sup-pulse 2s ease-in-out infinite}
.bs-chip.b{right:22px;top:28px;color:var(--coral)}
.bs-net{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.bs-net path{fill:none;stroke:rgba(155,208,91,.55);stroke-width:.6;stroke-dasharray:3 4;animation:dash 1.6s linear infinite;vector-effect:non-scaling-stroke}
.bs-net circle{fill:var(--coral);animation:sup-pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bs-net .n2{animation-delay:.8s}.bs-net .n3{animation-delay:1.6s}
.bs-end{grid-column:1/-1;grid-row:3;margin:0!important;padding:18px 0 24px;border-top:1px solid rgba(255,255,255,.12);font:800 clamp(1.4rem,2.6vw,2rem) var(--disp);color:#fff;letter-spacing:-.02em}
.bs-end em{font-style:normal;color:var(--coral)}
@media(max-width:1000px){section.sec.ink2.bs{height:auto;min-height:0;padding:44px 0 0!important}.bs-wrap{grid-template-columns:1fr;grid-template-rows:auto}.bs-h,.bs-tl,.bs-photo,.bs-end{grid-column:1;grid-row:auto}.bs-photo{aspect-ratio:4/3;margin:26px 0}.bs-s{opacity:1}.bs-s.on{transform:none}}
@media(prefers-reduced-motion:reduce){.bs-photo img,.bs-scan,.bs-c,.bs-net path,.bs-net circle,.bs-s.on .bs-n,.bs-chip.a i{animation:none}.bs-s{opacity:1;transform:none!important;transition:none}}

/* Skills section: one team, one vision, with Kingsgrove Accounting as the partner (Bradley, 3 Nov 2026) */
.bsk-h h2.t em{font-style:normal;color:#4b7a1c}
.bsk-p{display:grid;grid-template-columns:1fr 1.4fr;margin-top:26px;border-radius:24px;overflow:hidden;background:#59315f;box-shadow:0 26px 50px -34px rgba(37,16,44,.55)}
.bsk-pl{position:relative;background:#fff;display:grid;place-items:center;padding:56px 36px;border:1px solid var(--line);border-right:0;border-radius:24px 0 0 24px}
.bsk-pl img{width:min(320px,82%);height:auto}
.bsk-ptag{position:absolute;left:20px;top:18px;background:rgba(155,208,91,.22);color:#3d6a14;font:700 .68rem var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:99px}
.bsk-pr{padding:38px 42px;display:flex;flex-direction:column;justify-content:center}
.bsk-pr h3{color:#fff;font-size:1.9rem;margin-bottom:10px}
.bsk-pr p{color:#e6dcee;font-size:1.02rem;line-height:1.6;max-width:560px}
.bsk-pr .sk{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.bsk-pr .sk span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font:700 .78rem var(--body);padding:6px 12px;border-radius:99px}
.bsk-pr .acts{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:900px){.bsk-p{grid-template-columns:1fr}.bsk-pl{border-right:1px solid var(--line);border-radius:24px 24px 0 0;padding:52px 24px 36px}.bsk-pr{padding:28px 24px}}

/* Story photo: a plain, static picture of the team at work (Bradley, 3 Nov 2026) */
.bs-photo{transform:none!important;transition:none;border:0;background:none;box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.bs-photo::after{display:none}
.bs-photo img{animation:none;transform:none;filter:none;object-position:center 40%;border-radius:22px}

/* ===== One team, one vision: Bradley covers it all, then feeds the two specialists (Bradley, 3 Nov 2026) ===== */
.bsk-tree{display:grid;gap:0;max-width:1060px;margin:0 auto}
.bsk-c.top{background:linear-gradient(160deg,#2a1433,#3a1c47);border:0;color:#fff;padding:30px 34px 22px;box-shadow:0 34px 70px -40px rgba(37,16,44,.8)}
.bsk-c.top .bsk-hd{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:16px;margin-bottom:0}
.bsk-c.top .bsk-hd img{width:84px;height:84px;border-color:rgba(255,255,255,.9)}
.bsk-c.top .bsk-hd h3{color:#fff;font-size:1.9rem}
.bsk-c.top .bsk-hd span{color:var(--coral)}
.bsk-lp{color:#d6c9de;font-size:1.02rem;line-height:1.55;margin:16px 0 4px;max-width:720px}
.bsk-c.top ul{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.bsk-c.top li{display:block;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.05);transition:transform .3s,border-color .3s,background .3s}
.bsk-c.top li:last-child{border:1px solid rgba(255,255,255,.12)}
.bsk-c.top li:hover{transform:translateY(-4px);border-color:rgba(155,208,91,.6);background:rgba(255,255,255,.09)}
.bsk-c.top .bsk-i{background:rgba(155,208,91,.14);border:0;color:var(--coral);margin-bottom:10px}
.bsk-c.top li:hover .bsk-i{background:var(--coral);color:var(--ink)}
.bsk-c.top b{color:#fff;font-size:1rem}
.bsk-c.top small{color:#c9bbd2;font-size:.85rem}
/* the connector */
.bsk-conn{position:relative;height:104px}
.bsk-conn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bsk-conn path{fill:none;stroke:#4b7a1c;stroke-width:2.5;stroke-dasharray:7 9;animation:dash 1.1s linear infinite;vector-effect:non-scaling-stroke;opacity:.85}
.bsk-conn circle{fill:#4b7a1c;transform-box:fill-box;transform-origin:center;animation:sup-pulse 2.4s ease-in-out infinite}
.bsk-conn .nd{fill:var(--ink)}
.bsk-conn .e2{animation-delay:.8s}
.bsk-cl{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:1;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 16px;font:700 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#4b7a1c;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(37,16,44,.4)}
.bsk-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.bsk-row .bsk-c{background:#fff;box-shadow:0 26px 50px -36px rgba(37,16,44,.5);transition:transform .3s,box-shadow .3s}
.bsk-row .bsk-c:hover{transform:translateY(-6px);box-shadow:0 34px 60px -32px rgba(37,16,44,.55)}
.bsk-from{display:block;margin:14px 0 2px;font:700 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4b7a1c}
@media(max-width:1000px){.bsk-c.top ul{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.bsk-row{grid-template-columns:1fr}.bsk-conn{height:64px}.bsk-conn svg{display:none}.bsk-conn::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed #4b7a1c;animation:none}.bsk-cl{top:50%;transform:translate(-50%,-50%);white-space:normal;text-align:center;max-width:90%}.bsk-c.top{padding:24px 20px}.bsk-c.top ul{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bsk-conn path,.bsk-conn circle{animation:none}.bsk-c.top li,.bsk-row .bsk-c{transition:none}}

.bsk-tree{grid-template-columns:minmax(0,1fr)}
.bsk-tree>.bsk-c.top,.bsk-tree>.bsk-conn,.bsk-tree>.bsk-row{width:100%;min-width:0}

/* Sector cards: the green accents become the dark plum from the swatch, glow and animation kept (Bradley, 3 Nov 2026) */
.sc{--pl:#27122f}
section.ww-s.sup::before{background-image:linear-gradient(rgba(39,18,47,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(39,18,47,.06) 1px,transparent 1px)}
.sup-orb.o1{background:rgba(39,18,47,.16)}
.sup-orb.o2{background:rgba(120,70,150,.16)}
.sc::before{background:conic-gradient(from 0deg,transparent 0 72%,rgba(39,18,47,.95) 88%,transparent 100%)}
.sc-glow{background:radial-gradient(280px circle at var(--mx) var(--my),rgba(39,18,47,.16),transparent 62%)}
.sc:hover,.sc:focus-visible{box-shadow:0 30px 56px -28px rgba(39,18,47,.5),0 0 0 1px rgba(39,18,47,.25)}
.sc:focus-visible{outline-color:var(--pl)}
.sc-n{color:rgba(39,18,47,.28)}
.sc:hover .sc-n{color:var(--pl)}
.sc-ico{background:#efe7f2;color:var(--pl)}
.sc-ring{border-color:rgba(39,18,47,.55)}
.sc-ring.r2{border-color:rgba(39,18,47,.2)}
.sc:hover .sc-ico{background:var(--pl);color:#fff;box-shadow:0 0 30px rgba(39,18,47,.4)}
.sc:hover .sc-ring{border-color:var(--pl)}
.sc-tags li{background:#f3edf6;border-color:#e6dcec;color:#492d5e}
.sc:hover .sc-tags li{background:#ece4f1;border-color:rgba(39,18,47,.4);color:var(--pl)}
.sc-go{color:var(--pl);opacity:.75}

/* ===== One team, one vision: a single left-to-right flow that fits the screen (Bradley, 3 Nov 2026) ===== */
section.sec.bsk{padding:34px 0 40px!important}
.bsk-h{margin-bottom:22px}
.bsk-h h2.t{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:6px}
.bsk-h .lead{font-size:1.02rem;max-width:760px;margin-inline:auto}
.bsk-tree{max-width:1180px;grid-template-columns:minmax(0,1fr) 120px minmax(0,1.4fr);align-items:center;gap:0}
.bsk-tree>.bsk-c.top{padding:24px 26px 20px;align-self:center}
.bsk-c.top .bsk-hd{padding-bottom:12px}
.bsk-c.top .bsk-hd img{width:68px;height:68px}
.bsk-c.top .bsk-hd h3{font-size:1.6rem}
.bsk-c.top .bsk-lp{font-size:.95rem;margin:12px 0 2px}
.bsk-c.top ul{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bsk-c.top li{padding:12px 13px}
.bsk-c.top .bsk-i{width:34px;height:34px;margin-bottom:8px}
.bsk-c.top .bsk-i svg{width:17px;height:17px}
.bsk-c.top b{font-size:.92rem}
.bsk-c.top small{font-size:.78rem;line-height:1.35}
/* connector: Bradley on the left, feeding the two specialists on the right */
.bsk-conn{height:100%;min-height:300px;position:relative}
.bsk-cl{left:34%;top:50%;transform:translate(-50%,-50%);padding:5px 12px;font-size:.66rem}
/* the two specialists, stacked */
.bsk-row{grid-template-columns:1fr;gap:14px}
.bsk-row .bsk-c{padding:16px 20px 12px}
.bsk-row .bsk-hd{padding-bottom:10px;gap:14px}
.bsk-row .bsk-hd img{width:50px;height:50px}
.bsk-row .bsk-hd h3{font-size:1.3rem}
.bsk-row .bsk-hd span{font-size:.66rem}
.bsk-row .bsk-from{display:none}
.bsk-row ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.bsk-row li{padding:9px 0;gap:11px;border-bottom:1px dashed var(--line)}
.bsk-row li:nth-last-child(-n+2){border-bottom:0}
.bsk-row .bsk-i{width:34px;height:34px;border-radius:10px}
.bsk-row .bsk-i svg{width:17px;height:17px}
.bsk-row b{font-size:.92rem}
.bsk-row small{font-size:.8rem;line-height:1.35}
/* the partner as a slim strip beneath */
.bsk-p{max-width:1180px;margin:22px auto 0;grid-template-columns:230px 1fr;border-radius:20px}
.bsk-pl{padding:16px 22px;border-radius:20px 0 0 20px}
.bsk-pl img{width:min(170px,100%)}
.bsk-ptag{left:12px;top:10px;font-size:.58rem;padding:4px 9px}
.bsk-pr{padding:16px 26px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t a" "p a" "k a";column-gap:22px;align-items:center}
.bsk-pr h3{grid-area:t;font-size:1.25rem;margin:0 0 2px}
.bsk-pr p{grid-area:p;font-size:.88rem;line-height:1.45;margin:0;max-width:640px}
.bsk-pr .sk{grid-area:k;margin:8px 0 0}
.bsk-pr .sk span{font-size:.7rem;padding:4px 10px}
.bsk-pr .acts{grid-area:a;flex-direction:column;align-items:stretch;gap:8px}
.bsk-pr .acts .btn{padding:10px 18px;font-size:.88rem;justify-content:center}
@media(max-width:1000px){
  .bsk-tree{grid-template-columns:1fr}
  .bsk-conn{min-height:70px;height:70px}
  .bsk-conn svg{display:none}
  .bsk-conn::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed #4b7a1c}
  .bsk-cl{left:50%}
  .bsk-row ul{grid-template-columns:1fr}
  .bsk-row li:nth-last-child(2){border-bottom:1px dashed var(--line)}
  .bsk-p{grid-template-columns:1fr}
  .bsk-pl{border-radius:20px 20px 0 0;padding:30px 20px 16px}
  .bsk-pr{grid-template-columns:1fr;grid-template-areas:"t" "p" "k" "a";row-gap:8px;padding:18px 20px}
  .bsk-pr .acts{flex-direction:row;flex-wrap:wrap}
}

/* tighter, so the whole flow and the partner strip fit one screen */
section.sec.bsk{padding:22px 0 26px!important}
.bsk-h{margin-bottom:14px}
.bsk-h h2.t{font-size:clamp(1.9rem,3.2vw,2.5rem);margin-bottom:2px}
.bsk-h .lead{font-size:.95rem}
.bsk-tree>.bsk-c.top{padding:18px 22px 14px}
.bsk-c.top .bsk-hd{padding-bottom:10px}
.bsk-c.top .bsk-hd img{width:58px;height:58px}
.bsk-c.top .bsk-hd h3{font-size:1.45rem}
.bsk-c.top .bsk-lp{font-size:.9rem;margin:8px 0 0;line-height:1.45}
.bsk-c.top ul{gap:8px;margin-top:10px}
.bsk-c.top li{padding:10px 11px}
.bsk-c.top .bsk-i{width:30px;height:30px;margin-bottom:6px}
.bsk-conn{min-height:260px}
.bsk-row{gap:12px}
.bsk-row .bsk-c{padding:12px 18px 6px}
.bsk-row .bsk-hd{padding-bottom:8px;margin-bottom:2px}
.bsk-row .bsk-hd img{width:44px;height:44px}
.bsk-row .bsk-hd h3{font-size:1.2rem}
.bsk-row li{padding:7px 0}
.bsk-p{margin-top:16px}
.bsk-pl{padding:10px 18px}
.bsk-pl img{width:min(150px,100%)}
.bsk-pr{padding:10px 22px}
.bsk-pr p{font-size:.84rem;max-width:900px}
.bsk-pr .sk{margin-top:6px}
.bsk-pr .acts{flex-direction:row}
@media(max-width:1000px){section.sec.bsk{padding:44px 0 40px!important}.bsk-pr .acts{flex-direction:row}}

/* One team. One vision.: a bigger line under it, and the green glows (Bradley, 3 Nov 2026) */
.bsk-h .lead{font-size:clamp(1.25rem,2vw,1.6rem)!important;font-weight:600;color:#3a2a44!important;max-width:none}
.bsk-h h2.t em{color:#5b9a1f;text-shadow:0 0 18px rgba(155,208,91,.9),0 0 42px rgba(155,208,91,.6),0 0 80px rgba(155,208,91,.35);animation:bsk-glow 3.4s ease-in-out infinite}
@keyframes bsk-glow{0%,100%{text-shadow:0 0 14px rgba(155,208,91,.7),0 0 34px rgba(155,208,91,.45),0 0 64px rgba(155,208,91,.25)}50%{text-shadow:0 0 22px rgba(155,208,91,1),0 0 52px rgba(155,208,91,.7),0 0 96px rgba(155,208,91,.45)}}
@media(prefers-reduced-motion:reduce){.bsk-h h2.t em{animation:none}}

section.sec.bsk{padding:12px 0 16px!important}
.bsk-h{margin-bottom:10px}
.bsk-pr .sk{gap:6px;flex-wrap:nowrap}
.bsk-pr .sk span{font-size:.66rem;padding:3px 8px;white-space:nowrap}
.bsk-pr p{max-width:640px}
.bsk-p{margin-top:12px}

/* Every cream section gets the faint grid of boxes, like "The businesses we support" (Bradley, 3 Nov 2026) */
body main .sec.cream,body main section.swb.fams,body main .story,body main .ww-m,body main .ww-t,body main .hero.inner.tsplit{
  background-image:linear-gradient(rgba(39,18,47,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(39,18,47,.06) 1px,transparent 1px)!important;
  background-size:44px 44px!important;background-position:center top!important}

/* two labelled rows under the map: the areas, then the kinds of business (Bradley, 3 Nov 2026) */
.towns .towns-h2{margin-top:30px}

.towns .towns-note{margin:14px auto 0;font-weight:600;color:#4b7a1c;font-size:.98rem}

/* 2026-11-03 new logo lockup (K + KINGSGROVE / SOLUTIONS) */
.logo img{display:block;height:44px;width:auto;max-width:100%}
.ftr .logo img{height:50px}
@media(max-width:560px){.hdr .logo img{height:36px}}

.fl .kl{height:50px;width:auto;max-width:100%}
.swa .bx.sys .bi img{width:50px;height:50px;border-radius:14px;display:block}

.fl .kl{height:56px}

/* home hero: slightly shorter so the services strip shows on the first screen */
body main>section.hero:not(.inner){padding-top:36px;padding-bottom:36px}
.xfilm{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#14081a;object-fit:cover}

/* home page: animated story, work around your software vs software built around you */
.anim{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#14081a;font-family:'DM Sans',sans-serif}
.anim .ag{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 44%,rgba(155,208,91,.13),transparent 70%),linear-gradient(rgba(155,208,91,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(155,208,91,.1) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
.anim .fl{position:absolute;inset:0;width:100%;height:100%}
.flp{fill:none;stroke:#9bd05b;stroke-width:.7;stroke-linecap:round;opacity:0}
.fg,.fr{position:absolute;left:0;top:0;padding:.65em 1.1em;border-radius:14px;font:700 clamp(11px,1.55vw,17px) 'DM Sans',sans-serif;white-space:nowrap;opacity:0}
.fg{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);color:#c9bcd3}
.fr{background:#9bd05b;color:#25102c;font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;box-shadow:0 10px 30px -12px rgba(155,208,91,.8)}
.fb{position:absolute;width:22%;aspect-ratio:1.5;border-radius:18px;border:2px solid rgba(255,138,122,.5);display:grid;place-items:center;opacity:0}
.fbt{position:absolute;color:#fff;font:800 clamp(12px,1.9vw,21px) 'Bricolage Grotesque',sans-serif;text-align:center}
.fbk{position:absolute;height:84%;width:auto;opacity:0}
.fcap{position:absolute;left:0;right:0;bottom:6%;text-align:center;color:#fff;font:800 clamp(14px,2.3vw,26px) 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;opacity:0}
.ffin{position:absolute;left:50%;bottom:6%;white-space:nowrap;color:#9bd05b;font:800 clamp(14px,2.3vw,26px) 'Bricolage Grotesque',sans-serif;opacity:0}
.fsm{position:absolute;right:3%;bottom:3%;font:600 clamp(9px,1.1vw,12px) 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#cdbfd8;opacity:0}

.fk{position:absolute;left:50%;top:44%;width:17%;aspect-ratio:1;opacity:0;filter:drop-shadow(0 0 24px rgba(155,208,91,.6))}
.fk svg{width:100%;height:100%;display:block}
.fx{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,#fff 0,rgba(155,208,91,.9) 35%,transparent 75%);opacity:0;pointer-events:none}
.fw{position:absolute;left:50%;top:44%;width:12%;aspect-ratio:1;border-radius:50%;border:4px solid #9bd05b;opacity:0;pointer-events:none}
.fb .fbk{display:none}
.fg{box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}

.fz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;pointer-events:none;color:#fff;font:800 clamp(24px,5.2vw,60px)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;text-align:center}
.fz span{opacity:0}
.tchips span.tuk{background:#9bd05b;border-color:#9bd05b;color:#25102c}

/* software page: how-it-works film in the browser frame (Bradley, 4 Nov 2026) */
.bf iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0f0b1e}

/* family cards: "That is us" in the site's dark purple instead of lime (Bradley, 4 Nov 2026) */
.fams .bx.sys,.fams .bx.cbk{background:linear-gradient(150deg,#3b1b49 0%,#25102c 100%);border:2px solid rgba(155,208,91,.4);color:#fff;box-shadow:0 22px 50px -24px rgba(37,16,44,.7)}
.fams .bx.sys b,.fams .bx.cbk b{color:#fff}
.fams .bx.cbk small{color:#9bd05b;opacity:1}
body main section.fams .bx.sys p,body main section.fams .bx.cbk p{color:#e4d7ec!important;opacity:1!important}
body main section.fams .bx.sys b,body main section.fams .bx.cbk b{color:#fff!important}
.fams .bx.sys .lk,.fams .bx.cbk .lk{color:#9bd05b}
.fams .bx.cbk::before{background:#9bd05b}
.fams .bx.cbk::after{background:#9bd05b;opacity:.1}

/* team page: Kingsgrove Accounting partner panel text in white (Bradley, 4 Nov 2026) */
body main .bsk-pr h3{color:#fff!important}
body main .bsk-pr>p{color:#eadff1!important;opacity:1!important}

/* footer: Book a free call as a proper button (Bradley, 4 Nov 2026) */
.ftr .ftr-cta{display:inline-flex;margin-top:8px;padding:11px 20px;color:#25102c!important}

/* footer Facebook link (4 Nov) */
.ftr .ftr-soc{margin:4px 0 6px}
.ftr .ftr-fb{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:#fff}
.ftr .ftr-fb svg{width:34px;height:34px;padding:7px;border-radius:50%;background:#1877f2;color:#fff;box-shadow:0 6px 16px rgba(24,119,242,.35);transition:transform .2s}
.ftr .ftr-fb:hover svg{transform:translateY(-2px)}
.ftr .ftr-fb:hover span{color:#9bd05b}