:root{
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --ink:#0b1220;
  --ink-2:#1e293b;
  --muted:#64708b;
  --muted-2:#8b93a7;
  --line:#e8eaf2;
  --line-2:#f0f2f8;
  --purple:#5b45e8;
  --purple-2:#6b54f0;
  --purple-deep:#3f2dc4;
  --purple-soft:#eee8ff;
  --indigo:#4a38c8;
  --navy:#060914;
  --navy-2:#0a1020;
  --navy-3:#121a2e;
  --navy-line:rgba(255,255,255,.08);
  --green:#22c55e;
  --amber:#f59e0b;
  --hot:#ff4d6d;
  --gold:#f5b400;
  --shadow:0 .06rem .12rem rgba(15,23,42,.04),0 .6rem 1.8rem rgba(15,23,42,.05);
  --shadow-lg:0 1.25rem 3rem rgba(15,23,42,.12);
  --shadow-cta:0 .6rem 1.5rem rgba(63,45,196,.35);
  --max:94rem;
  --nav-h:4.75rem;
  --font:"Inter",system-ui,-apple-system,sans-serif;
  --display:"Plus Jakarta Sans",var(--font);
  /* Type scale — 8 sizes (plus display clamp on h1) */
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-md:.9375rem;
  --fs-body:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.5rem;
  --fs-2xl:2rem;
  --fs-3xl:2.75rem;
  /* Text colours — 10 */
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--muted);
  --text-4:var(--muted-2);
  --text-on-dark:#c7cce0;
  --text-lavender:#c4b5ff;
  --text-inverse:#fff;
  --text-brand:var(--purple);
  --text-gold:var(--gold);
  --text-ok:var(--green);
  /* Corner radii — 6 */
  --r-xs:.4rem;
  --r-sm:.65rem;
  --r:.75rem;
  --r-md:1rem;
  --r-lg:1.5rem;
  --r-pill:999px;
  --r-xl:var(--r-lg);
  --page-edge:#05070f;
  --header-bg:rgba(255,255,255,.9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--page-edge);
  line-height:1.6;
  font-size:100%;
  -webkit-font-smoothing:antialiased;
}
main{background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:none}
/* The display tracking is negative, which also narrows the space character and
   ran words together ("What do youneed?"). word-spacing adds the tracking back
   on spaces only, so words stay separated while the letter fit stays tight. */
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.035em;word-spacing:.045em;line-height:1.1;margin:0;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem .75rem;z-index:80;border-radius:.5rem}
.wrap{width:min(var(--max),92%);margin:0 auto}
.icon{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;flex:0 0 auto;vertical-align:-.18em;font-size:1.4rem;line-height:1}
.hidden{display:none!important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.85rem;padding:0 1.1rem;border-radius:var(--r);font-weight:600;font-size:var(--fs-md);
  transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:.12rem solid var(--purple);outline-offset:.18rem}
.btn-primary{background:linear-gradient(180deg,var(--purple-2),var(--purple-deep));color:var(--text-inverse);box-shadow:var(--shadow-cta);border:1px solid transparent}
.btn-primary:hover{background:linear-gradient(180deg,#6d58f2,#3524b0)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-soft,.btn-white,.btn-consult{background:transparent;color:var(--ink);border:1px solid var(--line)}
.dark-mod .btn-ghost,.mega-promo .btn-ghost,.pkg-ghost{
  background:transparent;color:var(--text-inverse);border-color:rgba(255,255,255,.22);
}
.btn-lg{height:3.1rem;padding:0 1.35rem;font-size:var(--fs-md)}
.btn-sm{height:2.25rem;padding:0 .75rem;font-size:var(--fs-sm);border-radius:var(--r)}
.btn-block{width:100%}
.btn-text{
  display:inline-flex;align-items:center;gap:.4rem;height:3.1rem;
  color:var(--text-brand);font-weight:600;font-size:var(--fs-md);
  background:none;border:0;padding:0 .15rem;border-radius:var(--r-xs);
}
.btn-text:hover{color:var(--purple-deep)}
.btn-text:focus-visible{outline:.12rem solid var(--purple);outline-offset:.18rem}

.site-header{
  position:sticky;top:0;z-index:40;background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(1rem);
}
.site-header.scrolled{border-bottom:1px solid var(--line);box-shadow:0 .5rem 1.5rem rgba(15,23,42,.04)}
.nav{min-height:var(--nav-h);display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-m,.hero-art,.hero-float,.m-collage{display:none}
.brand-logo{height:2.4rem;width:auto;max-width:13.5rem;object-fit:contain}
.brand-logo-light{height:2.5rem;max-width:14rem}
.site-header .brand-logo-light{display:none}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:.4rem}
.nav-links>a,.nav-item>button{
  padding:.55rem .7rem;border-radius:.5rem;font-size:.92rem;color:var(--ink-2);font-weight:500;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.nav-links>a:hover,.nav-links>a:focus-visible,.nav-item:hover>button,.nav-item:focus-within>button{
  background:#111827;color:#fff;box-shadow:0 .45rem .9rem rgba(15,23,42,.16);
}
.nav-item:hover>button,.nav-item:focus-within>button{border-bottom-left-radius:0;border-bottom-right-radius:0}
.nav-item{position:relative}
.nav-item>button{display:inline-flex;align-items:center;gap:.4rem}
.nav-item>button .icon{width:.8rem;height:.8rem;font-size:.78rem;line-height:1;vertical-align:0;opacity:.58}
.nav-item:hover>button .icon,.nav-item:focus-within>button .icon{opacity:1}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:1rem}
.nav-toggle,.nav-search-btn,.nav-icon-btn{display:none;width:2.6rem;height:2.6rem;border-radius:.8rem;align-items:center;justify-content:center;border:1px solid #e4e7f0;color:var(--purple);background:#fff}
.nav-icon-btn .icon,.nav-toggle .icon{width:1.2rem;height:1.2rem}
.theme-toggle{display:inline-flex;gap:.4rem;width:auto;min-width:2.6rem;padding:0 .72rem;font-size:var(--fs-sm);font-weight:700}
.theme-toggle-label{line-height:1}
.theme-toggle .theme-dark-icon{display:none}
html[data-theme="dark"] .theme-toggle .theme-light-icon{display:none}
html[data-theme="dark"] .theme-toggle .theme-dark-icon{display:inline-flex}

/* Mega — hover bridge so the menu stays open */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-42%);
  width:48rem;padding-top:0;display:none;z-index:30;
}
.mega-sm{width:34rem;transform:translateX(-55%)}
.nav-item:hover .mega,.nav-item:focus-within .mega{display:block}
.mega-panel{
  background:#fff;border:1px solid var(--line);border-radius:1.25rem;
  box-shadow:var(--shadow-lg);padding:1.25rem;display:grid;grid-template-columns:1.45fr .9fr;gap:1.1rem;
  transition:background .18s ease,border-color .18s ease;
}
.mega-panel-sm{grid-template-columns:1fr 1fr}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mega h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .65rem;font-weight:700}
.mega a.mi{display:flex;align-items:flex-start;gap:.7rem;padding:.55rem .5rem;border-radius:.7rem;transition:background .18s ease}
.mega a.mi:hover{background:var(--bg-soft)}
.mega a.mi strong{display:block;font-size:.86rem;font-weight:650;color:var(--ink);line-height:1.25}
.mega a.mi span span{display:block;font-size:.75rem;color:var(--muted);font-weight:400;margin-top:.12rem}
.mega a.more{color:var(--purple);font-weight:600;font-size:.82rem;padding:.45rem .5rem}
.ico-box{width:2.55rem;height:2.55rem;border:1px solid rgba(91,69,232,.12);border-radius:.8rem;background:linear-gradient(145deg,#f4f0ff,#e9e3ff);color:var(--purple);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 .35rem .9rem rgba(91,69,232,.09)}
.ico-box .icon{width:1.25rem;height:1.25rem}
.mega-promo{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;border-radius:1rem;padding:1.1rem;
  display:flex;flex-direction:column;justify-content:space-between;min-height:13.5rem;
  background:
    radial-gradient(circle at 7% 7%,rgba(56,189,248,.34),transparent 39%),
    radial-gradient(circle at 100% 100%,rgba(244,114,182,.27),transparent 43%),
    linear-gradient(135deg,#163b68 0%,#30217d 57%,#4c1d6f 100%);
  border:1px solid rgba(196,181,253,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 .7rem 1.5rem rgba(5,10,30,.24);
}
.mega-promo:before,.mega-promo:after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.mega-promo:before{width:9rem;height:9rem;right:-3.25rem;top:-4.15rem;background:rgba(255,255,255,.16);filter:blur(.2rem)}
.mega-promo:after{width:7rem;height:7rem;left:-3.9rem;bottom:-4.8rem;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1.25rem rgba(255,255,255,.04),0 0 0 2.5rem rgba(255,255,255,.025)}
.mega-promo>*{position:relative;z-index:1}
.mega-promo-proof{
  background:
    radial-gradient(circle at 10% 4%,rgba(34,211,238,.28),transparent 39%),
    radial-gradient(circle at 100% 100%,rgba(167,139,250,.30),transparent 46%),
    linear-gradient(135deg,#123a63 0%,#202968 56%,#43246e 100%);
}
.mega-promo small{color:#c4b5ff;font-weight:700;font-size:.68rem;letter-spacing:.08em}
.mega-promo h3{color:#fff;font-size:1.2rem;margin:.5rem 0}
.mega-promo p{color:#c7cce0;font-size:.82rem}
.mega-promo .price{font-size:1.35rem;font-weight:800;margin:.6rem 0}

/* Keep the trigger and its open dropdown visually connected. */
.nav-item:hover .mega-panel,.nav-item:focus-within .mega-panel{background:#0d1424;border-color:#27334d}
.nav-item:hover .mega h4,.nav-item:focus-within .mega h4{color:#9eacd0}
.nav-item:hover .mega a.mi:hover,.nav-item:focus-within .mega a.mi:hover{background:rgba(255,255,255,.09)}
.nav-item:hover .mega a.mi strong,.nav-item:focus-within .mega a.mi strong{color:#fff}
.nav-item:hover .mega a.mi span span,.nav-item:focus-within .mega a.mi span span{color:#b6c0d8}
.nav-item:hover .mega a.more,.nav-item:focus-within .mega a.more{color:#c4b5fd}
.nav-item:hover .mega .ico-box,.nav-item:focus-within .mega .ico-box{background:#222e49;color:#c4b5fd}
/* Give the Resources menu a distinct, high-contrast home for free tools. */
.mega-panel-sm{align-items:stretch}
.mega-panel-sm>.mega-tools{
  position:relative;isolation:isolate;overflow:hidden;padding:1rem;border-radius:1rem;
  background:
    radial-gradient(circle at 8% 8%,rgba(56,189,248,.52),transparent 38%),
    radial-gradient(circle at 100% 100%,rgba(244,114,182,.28),transparent 42%),
    linear-gradient(135deg,#123a63 0%,#30217d 58%,#4c1d6f 100%);
  border:1px solid rgba(196,181,253,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 .7rem 1.5rem rgba(5,10,30,.22);
}
.mega-panel-sm>.mega-tools:after{
  content:"";position:absolute;z-index:-1;width:8rem;height:8rem;right:-3rem;top:-3.7rem;border-radius:50%;
  background:rgba(255,255,255,.13);filter:blur(.2rem);
}
.mega-panel-sm>.mega-tools h4{color:#dce9ff}
.mega-panel-sm>.mega-tools .mi{position:relative}
.mega-panel-sm>.mega-tools .mi:hover{background:rgba(255,255,255,.14)}
.mega-panel-sm>.mega-tools .mi strong{color:#fff}
.mega-panel-sm>.mega-tools .mi span span{color:#ddd6fe}
.mega-panel-sm>.mega-tools .mi.more{color:#fff;font-weight:750}
.nav-item:hover .mega .mega-tools .ico-box,.nav-item:focus-within .mega .mega-tools .ico-box{
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:none;
}

/* Hero */
.hero{
  padding:2.6rem 0 1.4rem;overflow:hidden;position:relative;background:#fff;
  background-image:url("../images/hero/hero-studio-dashboard.png");
  background-repeat:no-repeat;background-position:right center;background-size:contain;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,1fr);gap:2%;align-items:center;min-height:28rem}
.hero-copy{position:relative;z-index:1;background:linear-gradient(90deg,#fff 78%,rgba(255,255,255,0))}
.hero-spacer{min-height:1px}
.hero-mobile{display:none;width:min(92%,40rem);margin:1rem auto 0;background:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--purple);font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.eyebrow i{width:.4rem;height:.4rem;border-radius:50%;background:var(--purple);box-shadow:0 0 0 .25rem rgba(91,69,232,.16);display:inline-block}
.hero h1{font-size:clamp(2.15rem,4.4vw,3.55rem);font-weight:800;max-width:18em}
.grad-text{
  background:linear-gradient(100deg,#2a1a8a 0%,#5b45e8 40%,#a855f7 78%,#d946ef 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{margin:1.1rem 0 0;color:var(--text-3);font-size:var(--fs-lg);max-width:34rem;line-height:1.65}
.easy-start{display:none}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin-top:1.5rem}
.hero-caption{margin-top:.85rem;color:var(--text-3);font-size:var(--fs-sm);max-width:34rem}
.hero-caption b{color:var(--purple-deep);font-weight:700}
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem 1rem;width:min(var(--max),92%);margin:1.15rem auto 0;padding:1.15rem 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.trust-row li{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.dot-check{width:1.28rem;height:1.28rem;border-radius:50%;background:#e9fbf0;color:#16a34a;display:grid;place-items:center;box-shadow:0 0 0 .14rem rgba(34,197,94,.08)}
.dot-check svg{width:.78rem;height:.78rem;stroke-width:2.55}
.hero-visual{width:100%;background:#fff}
.hero-visual img{width:100%;height:auto;object-fit:contain;object-position:center;background:#fff;display:block}

/* Stats */
.stats{padding:.6rem 0 2.2rem}
.stats-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding:.5rem 0 1.3rem;border-bottom:1px solid var(--line-2)}
.stat-ico{display:none}
.stat b{display:block;font-family:var(--display);font-size:var(--fs-xl);letter-spacing:-.04em}
.stat span{font-size:var(--fs-sm);color:var(--text-3)}
.reviews{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.review{display:flex;align-items:center;gap:.65rem}
.review strong{display:block;font-size:var(--fs-body);font-weight:750}
.brand-svg{width:2.35rem;height:2.35rem;flex:0 0 auto}
.stars{color:var(--text-gold);font-size:var(--fs-md);letter-spacing:.04em;font-weight:700}

/* Offerings */
.dark-mod{background:linear-gradient(180deg,#0a1020,#05070f);border-radius:var(--r-xl);padding:1.5rem 1.5rem 1.3rem;color:#fff;position:relative;overflow:hidden}
.dark-mod:before{content:"";position:absolute;inset:auto auto -5rem -5rem;width:16rem;height:16rem;background:radial-gradient(circle,rgba(91,69,232,.3),transparent 65%);pointer-events:none}
.offer-head,.section-head{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.75rem 1.1rem;
  margin-bottom:1rem;position:relative;
}
.offer-head .link-more,.section-head .link-more{margin-left:0}
.pill{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:0;border:0;background:none;border-radius:0;font-family:var(--display);font-size:var(--fs-xl);letter-spacing:-.03em;font-weight:800;color:var(--text-inverse);text-transform:none}
.pill .icon{width:1.1rem;height:1.1rem;color:var(--amber)}
.offer-head p{color:var(--text-on-dark);font-size:var(--fs-sm);width:100%;margin:0}
.offer-head a,.offer-head .link-more{color:var(--text-lavender);font-size:var(--fs-sm);font-weight:600}
.offer-stage,.svc-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem}
.offer-nav{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:var(--r-pill);
  background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);z-index:2;
}
.offer-nav:hover{background:var(--bg-soft);border-color:var(--purple)}
.offer-nav .icon{width:1.05rem;height:1.05rem}
.offer-dots{display:none}
.offer-go{display:none}
.offer .go{color:var(--text-lavender);font-weight:600;font-size:var(--fs-sm)}
.badge-new{position:absolute;top:.85rem;right:.85rem;background:var(--green);color:var(--text-inverse);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;padding:.2rem .45rem;border-radius:var(--r-xs);text-transform:none}
.offer-viewport,.svc-viewport{overflow-x:auto;overflow-y:hidden;position:relative;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none}
.offer-viewport::-webkit-scrollbar,.svc-viewport::-webkit-scrollbar{display:none}
.offer-track{display:flex;gap:.9rem;width:max-content;animation:none}
.offer{
  background:rgba(255,255,255,.03);border:1px solid var(--navy-line);border-radius:var(--r-md);padding:1.1rem;
  min-height:10.8rem;width:18.5rem;flex:0 0 18.5rem;display:flex;flex-direction:column;position:relative;
  scroll-snap-align:start;
}
.offer:hover{border-color:rgba(255,255,255,.16)}
.offer.featured{background:linear-gradient(180deg,rgba(91,69,232,.24),rgba(91,69,232,.05));border-color:rgba(140,120,255,.35)}
.offer-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem;padding-right:2.2rem}
.offer-ico{width:2.65rem;height:2.65rem;border-radius:.82rem;display:grid;place-items:center;flex:0 0 auto;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.offer-ico .icon{width:1.32rem;height:1.32rem}
.offer-ico.icon-theme-light,.ico-box.icon-theme-light{color:#f8fafc!important}.offer-ico.icon-theme-dark,.ico-box.icon-theme-dark{color:#182033!important}.icon-theme-light .icon-image{filter:brightness(0) invert(1)}.icon-theme-dark .icon-image{filter:brightness(0) saturate(100%)}
.offer.accent-purple .offer-ico{background:rgba(91,69,232,.22);color:#c4b5ff}
.offer.accent-green .offer-ico{background:rgba(34,197,94,.15);color:#4ade80}
.offer.accent-amber .offer-ico{background:rgba(245,158,11,.15);color:#fbbf24}
.offer.accent-blue .offer-ico{background:rgba(56,189,248,.15);color:#7dd3fc}
.offer h3{color:var(--text-inverse);font-size:var(--fs-body);margin:0}
.offer p{color:var(--text-on-dark);font-size:var(--fs-sm);line-height:1.45;flex:1}
.offer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.85rem;gap:.5rem}
.offer-foot b{font-size:var(--fs-lg);font-family:var(--display);color:var(--text-inverse)}
.offer-foot small{color:var(--text-4);font-size:var(--fs-xs);letter-spacing:.04em;margin-left:.35rem;font-weight:700}
.badge-hot{position:absolute;top:.85rem;right:.85rem;background:var(--hot);color:var(--text-inverse);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;padding:.2rem .45rem;border-radius:var(--r-xs);text-transform:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:4.4rem 0}
.section-head{margin-bottom:1.7rem}
.section-head h2,.offer-head .pill{font-size:var(--fs-2xl)}
.section-head p{color:var(--text-3);margin-top:.35rem;width:100%}
.link-more{color:var(--text-brand);font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.dark-mod .link-more{color:var(--text-lavender)}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.85rem}
.svc-page-stage .offer-nav{display:none}
.svc-page-stage .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.svc-track{display:flex;gap:.85rem;width:max-content;animation:none}
.svc{border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1rem 1rem;background:#fff;min-height:13.2rem;display:flex;flex-direction:column;scroll-snap-align:start}
.svc-track .svc{width:16.5rem;flex:0 0 16.5rem}
.svc:hover{transform:translateY(-.2rem);box-shadow:var(--shadow);border-color:#ddd4ff}
.svc .ico-box{margin-bottom:1rem;width:2.8rem;height:2.8rem;border-radius:.85rem}
.svc .ico-box .icon{width:1.4rem;height:1.4rem}
.svc h3{font-size:.96rem;margin-bottom:.5rem}
.svc p{color:var(--muted);font-size:.82rem;line-height:1.5;flex:1}
.svc .go{margin-top:.85rem;color:var(--purple);font-weight:600;font-size:.84rem}
.svc .go .icon{width:.9rem;height:.9rem;margin-left:.12rem}
.services-catalogue{padding-top:0}
.services-catalogue-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.4rem}
.services-catalogue-head h2{font-size:clamp(1.55rem,2.5vw,2.15rem);max-width:24em}
.services-catalogue-head>p{max-width:22rem;color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.services-catalogue .svc-page-stage{margin-top:0}
.services-catalogue .svc-page-stage .svc-grid{gap:1rem}
.services-catalogue .svc-page-stage .svc{min-height:15rem;padding:1.35rem 1.2rem 1.1rem}
.services-catalogue .svc-page-stage .svc h3{font-size:1rem;line-height:1.3}
.services-catalogue .svc-page-stage .svc p{font-size:var(--fs-sm)}
@media (min-width:52.0625rem){
  .svc-page-stage{display:block}
  .svc-page-stage .svc-viewport{overflow:visible}
}

.pkg{display:grid;grid-template-columns:1.05fr 1.2fr .9fr;gap:1.1rem;position:relative;align-items:start}
.pkg > *{min-width:0;padding-top:1.85rem;position:relative}
.pkg h2,.pkg h3{color:var(--text-inverse);margin:0;font-size:var(--fs-lg);line-height:1.2;min-height:1.35em}
.best{position:absolute;top:0;left:0;display:inline-flex;background:linear-gradient(90deg,#ff4d6d,#ff7a59);color:var(--text-inverse);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;padding:.25rem .5rem;border-radius:var(--r-xs);text-transform:none}
.pkg-price{font-size:var(--fs-3xl);font-weight:800;font-family:var(--display);letter-spacing:-.04em;margin:.5rem 0 .25rem}
.pkg-price small{font-size:var(--fs-body);color:var(--text-on-dark);font-weight:600}
.pkg-list{margin:1rem 0 1.2rem;display:grid;gap:.5rem}
.pkg-list li{display:flex;gap:.5rem;align-items:flex-start;color:var(--text-on-dark);font-size:var(--fs-sm)}
.pkg-list svg{color:var(--text-lavender);width:1rem;margin-top:.15rem}
.pkg-summary{color:var(--text-4);font-size:var(--fs-sm)}
.pkg-see-all{color:var(--text-lavender)}
.fine{color:var(--text-on-dark);font-size:var(--fs-sm);text-align:center;margin-top:.6rem}
.pkg-pay{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.85rem}
.pay-trust{display:flex;align-items:center;gap:.7rem;margin-top:1rem;color:var(--text-on-dark);font-size:var(--fs-sm)}
.paypal-logo{height:1.6rem;width:auto;display:block;background:#fff;border-radius:var(--r-xs);padding:.15rem .35rem}
.got h3,.compare h3{margin-bottom:.25rem}
.got>p{color:var(--text-on-dark);font-size:var(--fs-sm);margin-bottom:1rem}
.got-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.got-cols h4{color:var(--text-lavender);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:none;margin:0 0 .4rem;font-weight:700}
.got-cols li{color:var(--text-on-dark);font-size:var(--fs-sm);display:flex;gap:.5rem;margin-bottom:.3rem}
.got-cols svg{color:var(--text-ok);width:.85rem;flex:0 0 .85rem;margin-top:.18rem}
.compare{background:rgba(255,255,255,.03);border:1px solid var(--navy-line);border-radius:var(--r-md);padding:1rem}
.compare h3{margin-bottom:.75rem}
.cmp-row{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--navy-line);font-size:var(--fs-sm);color:var(--text-on-dark)}
.cmp-row b{color:var(--text-inverse)}
.cmp-total{display:flex;justify-content:space-between;align-items:center;margin-top:.45rem;padding:.7rem .85rem;border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:var(--text-inverse);font-weight:700;font-size:var(--fs-md)}
.win{margin-top:.85rem;background:linear-gradient(180deg,rgba(91,69,232,.22),rgba(91,69,232,.06));border:1px solid rgba(140,120,255,.3);border-radius:var(--r);padding:.85rem}
.win small{color:var(--text-lavender);font-weight:700}
.win .pkg-price{font-size:var(--fs-2xl);margin:.25rem 0}
.save{color:var(--text-ok);font-weight:700}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem}
.chip{height:2.25rem;padding:0 1rem;border-radius:var(--r-pill);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2);background:#fff;line-height:1}
.chip.is-on,.chip:hover{background:var(--ink);color:var(--text-inverse);border-color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.work-card figure{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/11;background:#e8ebf3;margin:0 0 .6rem;padding:.7rem .7rem 0}
.work-card figure:before{content:"";display:block;height:.55rem;margin:0 0 .55rem .15rem;width:2.4rem;border-radius:var(--r-pill);background:radial-gradient(circle closest-side,#ff6b6b 90%,transparent 91%) 0/0.55rem 0.55rem no-repeat,radial-gradient(circle closest-side,#f5c542 90%,transparent 91%) .7rem/0.55rem 0.55rem no-repeat,radial-gradient(circle closest-side,#4ade80 90%,transparent 91%) 1.4rem/0.55rem 0.55rem no-repeat}
.work-card img{width:100%;height:calc(100% - 1.1rem);object-fit:cover;object-position:top center;border-radius:var(--r-xs) var(--r-xs) 0 0;background:#0e1428}
.work-card h3{font-size:var(--fs-md);margin-bottom:.1rem}
.work-card span{color:var(--text-2);font-size:var(--fs-sm);font-weight:600}
.work-card.is-off{display:none}
.work-card.is-logo img{object-fit:contain;padding:14%;background:#111827}

.trust-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:1.6rem;align-items:center}
.trust-points{display:grid;gap:1rem;margin-top:1.3rem}
.trust-points li{display:flex;gap:.75rem;align-items:flex-start}
.trust-points strong{display:block;font-size:.9rem}
.trust-points span{color:var(--muted);font-size:.82rem}
.t-viewport{overflow:hidden}
.t-track{display:flex;gap:.85rem;width:max-content;animation:marquee 48s linear infinite}
.t-viewport:hover .t-track{animation-play-state:paused}
.t-card{border:1px solid var(--line);border-radius:1.1rem;padding:1.2rem 1.1rem;background:#fff;min-height:15.4rem;width:17.5rem;flex:0 0 17.5rem;display:flex;flex-direction:column}
.t-card q{font-size:.9rem;line-height:1.55;color:var(--ink-2);flex:1}
.quote-mark{font-family:var(--display);font-size:2.5rem;line-height:.7;color:#ddd6ff;font-weight:800;margin-bottom:.5rem}
.stars-row{color:var(--gold);font-size:.75rem;margin:.75rem 0}
.who{display:flex;align-items:center;gap:.6rem}
.who img{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover}
.who strong{display:block;font-size:.84rem}
.who span{font-size:.75rem;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;position:relative}
.steps:before{content:"";position:absolute;top:1.7rem;left:8%;right:8%;height:1px;background:repeating-linear-gradient(90deg,#d9dce8 0 .5rem,transparent .5rem .85rem)}
.step{text-align:center;position:relative;padding:0 .5rem}
.step-ico{width:3.7rem;height:3.7rem;border-radius:50%;margin:0 auto .9rem;background:linear-gradient(145deg,#fff,#f1edff);border:1px solid #ded6ff;display:grid;place-items:center;color:var(--purple);box-shadow:0 .55rem 1.25rem rgba(91,69,232,.12);position:relative;z-index:1}
.step-ico .icon{width:1.6rem;height:1.6rem}
.step small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:.25rem}
.step h3{font-size:1rem;margin-bottom:.35rem}
.step p{color:var(--muted);font-size:.82rem}

.faq-split{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:center}
.faq-art img{width:100%;height:auto;background:transparent}
.faq-art-dark{display:none}
.faq-grid{display:grid;grid-template-columns:1fr;gap:0;max-width:52rem}
.faq{border-bottom:1px solid var(--line)}
.faq button{width:100%;text-align:left;padding:1.05rem 0;display:flex;justify-content:space-between;gap:1rem;font-weight:600;font-size:.95rem;color:var(--ink)}
.faq button .pm{width:1.35rem;height:1.35rem;border-radius:.4rem;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.faq .a{display:none;padding:0 0 1rem;color:var(--muted);font-size:.9rem;line-height:1.65}
.faq.open .a{display:block}

/* Ready to grow — match attached image */
.final{margin:.6rem 0 0}
.final-inner{
  background:linear-gradient(105deg,#2f1f9a 0%,#4a32d4 38%,#5b2bd6 72%,#3b1aa8 100%);
  padding:2.6rem 0 2.2rem;color:#fff;position:relative;overflow:hidden;
}
.final-inner:before,.final-inner:after{
  content:"";position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);
}
.final-inner:before{width:18rem;height:18rem;right:-3rem;top:-6rem}
.final-inner:after{width:12rem;height:12rem;left:6%;bottom:-5rem}
.final-grid{display:grid;grid-template-columns:1fr 1.55fr .85fr;gap:1.6rem;position:relative;align-items:center}
.final-copy{position:relative;padding-left:3.4rem}
.final-orb{
  position:absolute;width:2.8rem;height:2.8rem;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.18);
}
.final-orb .icon{width:1.32rem;height:1.32rem}
.final-orb-a{left:0;top:0}
.final-orb-b{left:0;top:3.4rem;background:linear-gradient(180deg,#7c6aff,#4c1d95)}
.final h2{color:#fff;font-size:1.9rem;margin-bottom:.55rem}
.final p{color:#ece7ff}
.perks{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem;font-size:.82rem;color:#efeaff}
.perks span{display:flex;align-items:center;gap:.4rem}
.final-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.65rem .7rem;align-items:start}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1/-1}
.field-need{grid-column:1 / span 2}
.field-cta{justify-content:flex-start}
/* The call-to-action has no label, so reserve the label line on wide forms.
   Its button then shares the exact top edge of the service selector. */
@media (min-width:68.0625rem){.field-cta{padding-top:1.55rem}}
.field-cta .btn{min-height:2.85rem;height:2.85rem}
.field label{font-size:var(--fs-xs);color:var(--text-3);font-weight:600}
.field input,.field select,.field textarea{
  height:2.85rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 .75rem;background:#fff;color:var(--ink);
}
.field textarea{height:5.5rem;padding:.65rem .75rem;resize:vertical}
.final .field label{color:#ece7ff}
.final .field input,.final .field select{border:0}
.form-msg{color:#fff;margin-top:.5rem;min-height:1.2em}
.talk{position:relative;min-height:auto}
.talk h3{color:var(--text-inverse);font-size:var(--fs-lg);margin-bottom:.3rem}
.talk p{color:var(--text-on-dark);margin-bottom:.7rem}
.talk-line{display:flex;align-items:center;gap:.45rem;color:var(--text-inverse);font-weight:600;font-size:var(--fs-md);margin:.35rem 0}
.talk-socials{display:flex;align-items:center;gap:.5rem;margin-top:.9rem}
.talk-socials a{
  width:2.5rem;height:2.5rem;border-radius:var(--r-pill);background:#fff;color:var(--purple);
  display:grid;place-items:center;
}
.talk-socials a:hover{background:var(--purple-soft)}
.talk-deco,.rocket-orb,.float-soc{display:none}

.site-footer{background:#05070f;color:#c7cce0;padding:3rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:1.7rem}
.foot-brand p{font-size:.85rem;line-height:1.6;margin:.8rem 0 1rem;max-width:17rem;color:#9aa3bb}
.site-footer h4{color:#fff;font-size:.82rem;margin-bottom:.75rem}
.site-footer a{display:block;padding:.25rem 0;font-size:.85rem;color:#9aa3bb}
.site-footer a:hover{color:#fff}
.foot-hours{display:block;margin-top:.5rem;font-size:.82rem}
.legal{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.06);margin-top:2rem;padding-top:1rem;font-size:.78rem;color:#7b8296}
.socials{display:flex;gap:.5rem;margin-top:.9rem}
.socials a{
  width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:#fff;padding:0;
}
.socials a:hover{background:rgba(255,255,255,.2);color:#fff}
.socials .icon,.talk-socials .icon{width:1.18rem;height:1.18rem}

.mnav{
  display:none;position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:45;
  background:#0b1220;color:#fff;border-radius:1.35rem;height:4rem;
  grid-template-columns:repeat(5,1fr);align-items:end;padding:0 .4rem .5rem;
  box-shadow:0 1rem 2.5rem rgba(7,11,22,.35);
}
.mnav a{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.62rem;color:#9aa3bb;padding-top:.6rem}
.mnav a.on,.mnav a:hover{color:#fff}
.mnav .start{
  width:3.6rem;height:3.6rem;border-radius:50%;background:linear-gradient(180deg,#6b54f0,#3f2dc4);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  margin-top:-1.35rem;box-shadow:var(--shadow-cta);font-size:.56rem;font-weight:800;letter-spacing:.06em;
}
.consent{position:fixed;right:1.1rem;bottom:1.4rem;z-index:28;background:#0b1220;color:#fff;border-radius:.9rem;padding:.85rem 1rem;max-width:19rem;font-size:.82rem;box-shadow:var(--shadow-lg)}
.consent div{display:flex;gap:.5rem;margin-top:.6rem}
.consent a{color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:.65rem;padding:0 .75rem;height:2.25rem;display:inline-flex;align-items:center}

.overlay{position:fixed;inset:0;background:rgba(7,11,22,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(28rem,100%);background:var(--bg);z-index:51;
  transform:translateX(104%);transition:transform .3s;overflow:auto;padding:1.6rem 1.4rem 2.4rem;color:var(--ink);
}
.drawer.show{transform:none}
.wizard{display:none}
.wizard.on{display:block}
.steps-bar{display:flex;gap:.35rem;margin:.5rem 0 1.1rem}
.steps-bar i{height:.25rem;flex:1;border-radius:99px;background:var(--line)}
.steps-bar i.on{background:var(--purple)}
.wiz{color:var(--ink)}
.wiz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.4rem}
.wiz-kicker{color:var(--purple);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem}
.wiz h2,.wiz h3{color:var(--ink)}
.wiz h2{font-size:1.45rem}
.wiz h3{font-size:1.1rem;margin-bottom:.75rem}
.wiz-lead{color:var(--muted);margin:.35rem 0 1rem;line-height:1.5}
.wiz-note{color:var(--muted);font-size:.82rem;margin-top:.75rem}
.wiz-close{width:2.2rem;height:2.2rem;border-radius:.6rem;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.wiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.wiz-opt{
  display:flex;gap:.55rem;align-items:flex-start;cursor:pointer;padding:.75rem .7rem;
  border:1px solid var(--line);border-radius:.8rem;background:var(--bg);color:var(--ink);font-size:.86rem;
}
.wiz-opt:hover,.wiz-opt:has(input:checked){border-color:#c4b5ff;background:var(--purple-soft)}
.wiz-opt input{margin-top:.15rem;accent-color:var(--purple)}
.wiz-fields .field{margin-top:.7rem}
.wiz-fields .field label,.wiz .field label{color:var(--muted)}
.wiz .field input,.wiz .field textarea{border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.wiz-summary{margin-top:.6rem;padding:1rem;border:1px solid var(--line);border-radius:.9rem;background:var(--bg-soft);color:var(--ink-2);font-size:.88rem}
.wiz-nav{display:flex;justify-content:space-between;margin-top:1.2rem}

.live-note{
  position:fixed;right:1.1rem;bottom:9.5rem;z-index:60;display:none;align-items:center;gap:.85rem;
  max-width:24rem;padding:1rem 1.05rem;border-radius:1.05rem;color:#fff;
  background:linear-gradient(135deg,#1a1238 0%,#0b1220 60%);
  border:1px solid rgba(140,120,255,.45);
  box-shadow:0 1rem 2.4rem rgba(63,45,196,.38),0 0 0 .2rem rgba(110,91,255,.16);
  font-size:.95rem;
}
.live-note.show{display:flex;animation:live-in .35s ease}
.live-pulse{
  position:absolute;left:.85rem;top:.85rem;width:.55rem;height:.55rem;border-radius:50%;
  background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:live-ping 1.4s infinite;
}
.live-note .ico-box{width:2.5rem;height:2.5rem;background:linear-gradient(180deg,#7c6aff,#3f2dc4);color:#fff}
.live-body{display:flex;flex-direction:column;gap:.15rem;padding-left:.2rem}
.live-body strong{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#c4b5ff}
.live-note .txt{color:#fff;font-weight:600;line-height:1.35}
.live-note button{color:#c7cce0}
.live-pause{display:grid;place-items:center;flex:0 0 auto;width:2rem;height:2rem;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:var(--r-xs);font-size:.78rem;line-height:1}
.live-pause:hover,.live-pause:focus-visible{color:#fff;background:rgba(255,255,255,.1);outline:0}
@keyframes live-in{from{opacity:0;transform:translateY(.7rem) scale(.96)}to{opacity:1;transform:none}}
@keyframes live-ping{0%{box-shadow:0 0 0 0 rgba(74,222,128,.65)}70%{box-shadow:0 0 0 .7rem rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes rise{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}

.page-hero{padding:3.2rem 0 1.6rem;background:var(--bg)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2rem;align-items:center}
.page-hero h1{font-size:clamp(2.1rem,4vw,3rem);max-width:18em}
.page-hero p{color:var(--muted);max-width:36rem;margin-top:.75rem;font-size:1.05rem}
.page-hero-art{width:100%;height:auto;background:transparent;display:block}
.page-hero-art-dark{display:none}
.page-seo{padding:0 0 2.4rem}
.page-seo .prose{max-width:48rem}
.search-answers{padding-top:0}
.search-answers-intro{max-width:47rem}
.search-kicker{display:block;margin-bottom:.45rem;color:var(--purple);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.search-answers h2{font-size:clamp(1.55rem,2.5vw,2.15rem);max-width:21em}
.search-answers-intro>p{margin-top:.7rem;color:var(--muted);max-width:44rem}
.search-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1.4rem}
.search-answer-card{padding:1.15rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-soft)}
.search-answer-card h3{font-size:var(--fs-md);line-height:1.3}
.search-answer-card p{margin-top:.45rem;color:var(--muted);font-size:var(--fs-sm);line-height:1.58}
.answer-links{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.15rem}
.answer-links a{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r);color:var(--purple);font-size:var(--fs-sm);font-weight:700;background:var(--bg)}
.answer-links a:hover{border-color:#c4b5fd;background:var(--purple-soft)}
.answer-links .icon{width:.9rem;height:.9rem}
.cal-modal{position:fixed;inset:0;z-index:56;display:none;place-items:center;padding:1.2rem}
.cal-modal.show{display:grid}
.cal-box{width:min(52rem,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:1.2rem;padding:1.3rem 1.3rem 1.5rem;box-shadow:var(--shadow-lg);color:var(--ink)}
.cal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.cal-box h2{color:var(--ink)}
.cal-box>p{color:var(--muted);margin-bottom:1rem}
.cal-placeholder{border:1px dashed var(--line);border-radius:.9rem;padding:2rem 1.2rem;text-align:center;color:var(--muted)}
.cal-placeholder strong{display:block;color:var(--ink);margin-bottom:.4rem}
.live-note{z-index:60}
.card{border:1px solid var(--line);border-radius:1.1rem;background:var(--bg);padding:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.prose{max-width:45rem}
.prose p{margin:0 0 .75rem;color:var(--ink-2)}
.prose h2{margin:1.7rem 0 .6rem;font-size:1.6rem}

.mob-menu{display:none}
.mob-search input{width:100%;height:2.75rem;border:1px solid var(--line);border-radius:.75rem;padding:0 .75rem;margin-bottom:.75rem}
.search-pop{position:fixed;inset:0;background:rgba(255,255,255,.97);z-index:55;display:none;padding:5rem 6%}
.search-pop.on{display:block}
.search-pop input{width:min(46rem,100%);margin:0 auto;display:block;height:3.4rem;border:1px solid var(--line);border-radius:.9rem;padding:0 1rem;font-size:1.1rem;color:var(--ink);background:#fff}
.search-close{position:absolute;top:1.2rem;right:6%}
.search-results{width:min(46rem,100%);margin:1rem auto 0;display:grid;gap:.5rem}
.search-results a{display:block;padding:.85rem 1rem;border:1px solid var(--line);border-radius:.8rem;background:#fff}
.search-results a:hover{border-color:#c4b5ff}
.search-results strong{display:block;color:var(--ink)}
.search-results span{color:var(--muted);font-size:.85rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:68rem){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .pkg{grid-template-columns:1fr}
  .final-grid{grid-template-columns:1fr}
  .final-fields{grid-template-columns:1fr 1fr}
  .field-need{grid-column:1/-1}
  .talk-deco{position:relative;height:6rem}
}
@media (max-width:68rem){
  .faq-split,.page-hero-grid{grid-template-columns:1fr}
  .loc-split{grid-template-columns:1fr}
  .hero{background-size:58%;min-height:auto}
}
@media (max-width:56rem){
  .wrap{width:calc(100% - 1.5rem);max-width:none}
  .search-answer-grid{grid-template-columns:1fr;gap:.7rem}
  .answer-links{display:grid;grid-template-columns:1fr}
  .answer-links a{justify-content:space-between}
  .services-catalogue-head{display:block;margin-bottom:1rem}
  .services-catalogue-head>p{margin-top:.55rem;max-width:36rem}
  .site-header{overflow:visible}
  .nav{min-height:3.6rem;gap:.55rem;flex-wrap:nowrap}
  .brand{min-width:0;max-width:calc(100% - 6.4rem);flex:1 1 auto}
  .brand-logo{height:2.05rem;max-width:100%}
  .nav-links,.nav-search-btn,.nav-end .btn-primary{display:none!important}
  .nav-end{display:flex!important;gap:.4rem;flex:0 0 auto;margin-left:auto}
  .site-header .nav-icon-btn,
  .site-header .nav-toggle{
    display:inline-flex!important;width:2.5rem;height:2.5rem;border:1px solid #e4e7f2;color:#6b54f0;background:#fff;box-shadow:0 .1rem .3rem rgba(15,23,42,.05);
  }
  /* Icon-only theme switch below the desktop header: the label does not fit
     the square button and rendered clipped. */
  .theme-toggle-label{display:none}
  .site-header .theme-toggle{min-width:0;padding:0;gap:0}

  .hero{background-image:none;padding:1rem 0 1.2rem;overflow:visible}
  .hero-grid{grid-template-columns:1fr;min-height:0;position:relative}
  .hero-copy{background:none!important;padding-right:0}
  .hero-mobile{display:none}
  .easy-start{display:none}
  .eyebrow{background:#f3eeff;border-radius:var(--r-pill);padding:.35rem .7rem;font-size:var(--fs-xs);margin-bottom:.85rem}
  .hero h1{font-size:var(--fs-2xl);line-height:1.15;max-width:14em}
  .hero-lead{font-size:var(--fs-md);margin:.7rem 0 0;max-width:none}
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .75rem;width:calc(100% - 1.5rem);margin:1rem auto 0;max-width:none}
  .trust-row li{font-size:var(--fs-sm)}
  .hero-cta{flex-direction:column;align-items:stretch;max-width:22rem;gap:.55rem}

  .stats{padding:.2rem 0 1rem}
  .stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;padding:0;border:0;width:100%}
  .stat{background:#f6f7fb;border:1px solid #eef0f5;border-radius:var(--r);padding:.55rem .2rem .5rem;text-align:center}
  .stat-ico{display:grid;place-items:center;margin:0 auto .2rem;color:var(--purple)}
  .stat-ico .icon{width:1rem;height:1rem}
  .stat b{font-size:var(--fs-md);color:var(--purple)}
  .stat span{font-size:var(--fs-xs);line-height:1.2;display:block}

  .dark-mod{border-radius:var(--r-md);padding:1rem .7rem 1.1rem}
  .offer-head p{display:none}
  .offer-nav{width:2.75rem;height:2.75rem}
  .offer-track{animation:none!important}
  .offer{flex:0 0 min(18.5rem, 86%);width:min(18.5rem,86%)}
  .offer h3{font-size:var(--fs-md)}
  .offer p{font-size:var(--fs-sm)}
  #services{padding:1.1rem 0 1.2rem}
  #services .section-head{display:flex}
  /* Mobile services card layout lives in mobile.css (single-column reference
     cards). The legacy 6-across strip that used to sit here was removed so the
     two files no longer fight over .svc-track. */

  .mnav{
    display:grid;left:0;right:0;bottom:0;height:4.15rem;border-radius:1.15rem 1.15rem 0 0;
    padding:0 .3rem .35rem;background:#0b1220;
  }
  .mnav a{font-size:.52rem;font-weight:700;letter-spacing:.06em;color:#8b93a7;padding-top:.55rem;gap:.2rem}
  .mnav a .icon{width:1.2rem;height:1.2rem}
  .mnav a.on{color:#7c6aff}
  .mnav .start{
    width:3.7rem;height:3.7rem;margin-top:-1.45rem;border-radius:50%;
    background:linear-gradient(180deg,#8b7cff,#5b45e8);color:#fff;font-size:.5rem;
    box-shadow:0 .5rem 1.2rem rgba(91,69,232,.45);
  }
  .mnav .start .icon{width:1.25rem;height:1.25rem}
  body{padding-bottom:4.6rem}
  .live-note,.consent{bottom:4.8rem;left:.75rem;right:.75rem;max-width:none}
  .consent{display:none}
  .section{padding:3.2rem 0}
  .work-grid{grid-template-columns:1fr 1fr}
  .mob-menu{display:none;position:fixed;inset:0 0 4.4rem;background:#fff;z-index:46;padding:1.2rem;overflow:auto}
  .mob-menu.on{display:block}
  .mob-menu a{display:block;padding:.85rem .25rem;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
  .steps:before{display:none}
  .step{display:grid;grid-template-columns:3.7rem 1fr;gap:.75rem;text-align:left;align-items:center;padding:.6rem 0}
  .step-ico{margin:0}
  .wiz-opts{grid-template-columns:1fr}
  .final-copy{padding-left:0}
  .final-orb{position:static;display:inline-grid;margin:0 .4rem .6rem 0}
}
.loc-seo{background:linear-gradient(180deg,#0b1222,#070b16);color:var(--text-on-dark);padding:2.6rem 0 2.2rem;overflow:hidden}
.loc-seo .wrap{overflow:visible}
.loc-split{display:grid;grid-template-columns:minmax(16rem,.75fr) minmax(0,1.25fr);gap:2rem;align-items:start}
.loc-copy{min-width:0;overflow:visible}
.loc-copy h2{color:var(--text-inverse);font-size:var(--fs-2xl);margin-bottom:.5rem}
.loc-copy>p{color:var(--text-on-dark);max-width:38rem;margin-bottom:1.1rem}
.loc-copy>p a{display:inline;color:var(--text-lavender);font-weight:600}
.loc-line{margin:.4rem 0;overflow:visible;border:1px solid var(--navy-line);border-radius:var(--r);background:rgba(255,255,255,.03)}
.loc-line summary{cursor:pointer;list-style:none;padding:.7rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.loc-line summary::-webkit-details-marker{display:none}
.loc-line summary:after{content:"+";color:var(--text-lavender);font-size:var(--fs-lg);line-height:1}
.loc-line[open] summary:after{content:"−"}
.loc-line h3{color:var(--text-inverse);font-size:var(--fs-sm);letter-spacing:0;text-transform:none;margin:0;font-weight:700}
.loc-track{display:flex;flex-wrap:wrap;width:100%;max-width:100%;gap:.4rem;padding:0 .9rem .9rem;animation:none}
.loc-track a{flex:0 0 auto;padding:.32rem .7rem;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text-inverse);font-size:var(--fs-xs);white-space:nowrap}
.loc-track a:hover{background:rgba(255,255,255,.14);color:var(--text-inverse)}
.loc-map{position:sticky;top:5.5rem;text-align:center;order:0}
.loc-map img{width:100%;height:auto;display:block;background:transparent}
.loc-map p{color:var(--text-lavender);font-weight:700;margin-top:.75rem}
.extras-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:2rem}
.x-sell{display:grid;gap:.35rem;margin:.8rem 0 1.2rem}
.x-sell a{color:var(--purple);font-weight:600}
.extras-cta p{color:var(--muted);margin:.5rem 0 1rem}
.job{border:1px dashed var(--line);border-radius:.8rem;padding:1rem;color:var(--muted)}
.job strong{display:block;color:var(--ink)}
.careers-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);gap:1rem;align-items:start}
.careers-intro{color:var(--muted);margin:.6rem 0 1rem}
.careers-role-list{display:grid;gap:.7rem}
.career-role{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-soft)}
.career-role h3{font-family:var(--font);font-size:1rem;letter-spacing:0;line-height:1.3}
.career-role p{margin:.2rem 0 0;color:var(--muted);font-size:var(--fs-sm)}
.careers-all-roles{margin-top:1rem}
.careers-ats-note{background:linear-gradient(155deg,#101628,#080c18);border-color:transparent;color:var(--text-on-dark);box-shadow:var(--shadow-lg)}
.careers-ats-note h2{color:#fff;margin-bottom:.8rem}
.careers-ats-note p{margin:.75rem 0;color:#c7cce0}
.careers-ats-note strong{color:#fff}
.careers-ats-note .eyebrow{color:#c4b5fd}
.careers-ats-note .eyebrow i{background:#a996ff;box-shadow:0 0 0 .25rem rgba(169,150,255,.15)}
.careers-ats-note .btn{margin-top:.7rem;background:#fff;color:var(--purple-deep);box-shadow:none}
.careers-ats-note .btn:hover{background:#eee8ff}
@media (max-width:56rem){
  .extras-grid,.loc-split,.careers-layout{grid-template-columns:1fr}
  .loc-map{position:static;max-width:22rem;margin:0 auto}
}
@media (max-width:35rem){
  .svc-grid,.work-grid,.final-fields,.grid-3,.grid-2{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .pkg-price{font-size:2.4rem}
}

/* Hero side: collage + compact social-proof bar */
.hero-side{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;min-width:0}
.reviews-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1.1rem;
  padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
}
.reviews-bar .review{display:flex;flex-direction:row;align-items:center;gap:.45rem;padding:0;border:0;background:none;min-width:0}
.reviews-bar > small{width:100%;font-size:var(--fs-xs);color:var(--text-3)}
.reviews-bar .review{text-align:left}
.review-logo{display:block;width:100%;margin:0;line-height:0;text-align:left;max-width:100%}
.review-logo .brand-svg{justify-self:start;margin:0!important}
.review .brand-svg{display:block;width:auto;height:1.05rem;max-width:100%;flex:0 0 auto}
.review.is-upwork .brand-svg{height:.95rem}
.review.is-fiverr .brand-svg{height:.92rem}
.review.is-trustpilot .brand-svg{height:.85rem}
.stars{color:var(--text-gold);font-size:var(--fs-sm);letter-spacing:.02em;font-weight:700;white-space:nowrap}
.stars i{font-style:normal}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Stats bar: 3 equal columns split by hairline dividers (desktop only) */
@media (min-width:52.0625rem){
  .stats-row{justify-content:flex-start}
  .stats-row .stat{flex:1 1 0;min-width:0;text-align:center}
  .stats-row .stat+.stat{border-left:1px solid var(--line-2)}
}

/* Desktop hero social proof card — matched to the four-cell reference. */
@media (min-width:56.0625rem){
  .hero-side{align-items:flex-end}
  .reviews-bar{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
    width:min(25.25rem,100%);padding:.95rem 1.1rem .7rem;
    border:0;border-radius:1rem;background:#fff;
    box-shadow:0 .7rem 2rem rgba(59,45,148,.11);
  }
  .reviews-bar .review{
    display:block;min-width:0;min-height:7.05rem;padding:.35rem .85rem .72rem;
    border:0;background:transparent;
  }
  .reviews-bar .review:nth-child(even){border-left:1px solid #e8eaf2}
  .reviews-bar .review:nth-child(n+3){border-top:1px solid #e8eaf2;padding-top:.95rem}
  .review-logo{display:block;height:1.82rem;line-height:0}
  .review .brand-svg{display:block;width:auto;height:1.82rem;max-width:100%}
  .review.is-google .brand-svg{width:7.45rem}
  .review.is-upwork .brand-svg{width:7.55rem}
  .review.is-fiverr .brand-svg{width:6.05rem}
  .review.is-trustpilot .brand-svg{width:8.6rem}
  .review-score{display:flex;align-items:center;gap:.5rem;margin:.56rem 0 .36rem;color:#0f172a;line-height:1}
  .review-score b{font-size:.9rem;font-weight:800}
  .review-stars{color:#f59a12;font-size:.92rem;letter-spacing:.08rem;font-weight:800;white-space:nowrap}
  .reviews-bar .review small{display:block;color:#1f2937;font-size:.68rem;font-weight:500;line-height:1.25;white-space:nowrap}
  .trustpilot-stars{display:inline-flex;gap:.14rem;letter-spacing:0;color:#fff;font-size:.55rem}
  .trustpilot-stars i{display:grid;place-items:center;width:1rem;height:1rem;background:#00b67a;font-style:normal;line-height:1}
}

/* Desktop proof area: four key results alongside the four review sources. */
@media (min-width:64.0625rem){
  .proof-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(22rem,25.25rem);gap:1.35rem;align-items:center}
  .proof-layout .metrics-row{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;
    padding:.55rem;border:1px solid var(--line);border-radius:1rem;background:#fff;box-shadow:var(--shadow);
  }
  .proof-layout .metrics-row .stat{display:flex;flex:initial;align-items:center;justify-content:center;min-width:0;padding:1rem .5rem;text-align:center}
  .proof-layout .metrics-row .stat+.stat{border-left:1px solid var(--line)}
  .proof-layout .stat-ico{display:grid;place-items:center;width:1.65rem;height:1.65rem;margin-bottom:.32rem;color:var(--purple)}
  .proof-layout .stat-ico .icon{width:1.55rem;height:1.55rem}
  .proof-layout .metrics-row .stat b{color:var(--purple-deep);font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.1}
  .proof-layout .metrics-row .stat span:last-child{margin-top:.2rem;color:var(--ink-2);font-size:.72rem;font-weight:650;line-height:1.25}
  .proof-layout .reviews-bar{width:100%}
}
@media (max-width:64rem){
  .proof-layout{display:grid;gap:1rem}
  .proof-layout .reviews-bar{width:min(25.25rem,100%);margin:0 auto}
}

/* Desktop: results first, then the four review sources in one full-width row. */
@media (min-width:56.0625rem){
  .proof-layout{display:grid;grid-template-columns:1fr;gap:1.15rem;align-items:stretch}
  .proof-layout .metrics-row{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;
    padding:.55rem;border:1px solid var(--line);border-radius:1rem;background:#fff;box-shadow:var(--shadow);
  }
  .proof-layout .metrics-row .stat{display:flex;flex:initial;align-items:center;justify-content:center;min-width:0;padding:1rem .5rem;text-align:center}
  .proof-layout .metrics-row .stat+.stat{border-left:1px solid var(--line)}
  .proof-layout .stat-ico{display:grid;place-items:center;width:1.65rem;height:1.65rem;margin-bottom:.32rem;color:var(--purple)}
  .proof-layout .stat-ico .icon{width:1.55rem;height:1.55rem}
  .proof-layout .metrics-row .stat b{color:var(--purple-deep);font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.1}
  .proof-layout .metrics-row .stat span:last-child{margin-top:.2rem;color:var(--ink-2);font-size:.72rem;font-weight:650;line-height:1.25}
  .proof-layout .reviews-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;padding:.95rem 1.1rem .8rem}
  .proof-layout .reviews-bar .review{display:block;min-width:0;min-height:8.1rem;padding:.55rem 1.15rem .75rem;border:0;background:transparent}
  .proof-layout .reviews-bar .review:nth-child(n+2){border-left:1px solid #e8eaf2}
  .proof-layout .reviews-bar .review:nth-child(n+3){border-top:0;padding-top:.55rem}
  .proof-layout .review-logo{height:2.25rem}
  .proof-layout .review .brand-svg{height:2.25rem;max-width:100%}
  .proof-layout .review.is-google .brand-svg{width:9.25rem}
  .proof-layout .review.is-upwork .brand-svg{width:9.35rem}
  .proof-layout .review.is-fiverr .brand-svg{width:7.5rem}
  .proof-layout .review.is-trustpilot .brand-svg{width:10.7rem}
  .proof-layout .review-score{margin:.7rem 0 .43rem}
  .proof-layout .review-score b{font-size:1rem}
  .proof-layout .review-stars{font-size:1rem}
  .proof-layout .reviews-bar .review small{font-size:.72rem}
}

/* Portfolio and case-study extensions */
.work-card{display:block;min-width:0;border-radius:var(--r-md);transition:transform .24s ease}
.work-card figure{box-shadow:var(--shadow);transition:box-shadow .24s ease,transform .24s ease}
.work-card:hover figure{transform:translateY(-.25rem);box-shadow:var(--shadow-lg)}
.work-card:focus-visible{outline:.14rem solid var(--purple);outline-offset:.3rem}
.work-brand{position:absolute;z-index:2;left:1rem;right:1rem;bottom:.9rem;color:#fff;text-shadow:0 .08rem .5rem rgba(0,0,0,.45)}
.work-brand:before{content:"";position:absolute;z-index:-1;inset:-1.4rem -1rem -.9rem;background:linear-gradient(180deg,transparent,rgba(3,7,18,.9))}
.work-brand strong,.work-brand span{display:block}.work-brand strong{font-family:var(--display);font-size:1rem;letter-spacing:-.025em}.work-brand span{margin-top:.1rem;color:#e5e7eb;font-size:.67rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.chip{border:1px solid var(--line);border-radius:var(--r-pill);padding:.46rem .78rem;background:#fff;color:var(--text-2);font-size:var(--fs-sm);font-weight:650;transition:color .18s,background .18s,border-color .18s}
.chip:hover,.chip.is-on{color:#fff;background:var(--purple);border-color:var(--purple)}
.chip:focus-visible{outline:.14rem solid var(--purple);outline-offset:.16rem}
.case-overview{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2rem;padding:2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2rem 0}
.case-brand{position:absolute;left:1.5rem;right:1.5rem;bottom:1.35rem;z-index:2;color:#fff;text-shadow:0 .1rem .7rem rgba(0,0,0,.6)}.case-brand:before{content:"";position:absolute;z-index:-1;inset:-3rem -1.5rem -1.35rem;background:linear-gradient(180deg,transparent,rgba(3,7,18,.92))}.case-brand strong,.case-brand span{display:block}.case-brand strong{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.7rem);letter-spacing:-.04em}.case-brand span{margin-top:.25rem;color:#e5e7eb;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.case-kicker{display:block;color:var(--purple);font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.55rem}
.case-overview h2,.case-system h2,.case-outcome h2,.case-section-head h2{font-size:clamp(1.5rem,2.4vw,2.1rem);max-width:17em}
.case-meta,.case-system dl{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-left:1px solid var(--line);padding-left:2rem}
.case-meta div,.case-system dl div{padding:.1rem 0 .9rem;border-bottom:1px solid var(--line-2)}
.case-meta dt,.case-system dt{color:var(--muted);font-size:var(--fs-xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.2rem}
.case-meta dd,.case-system dd{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.case-narrative{display:grid;gap:1rem;margin:2rem 0}
.case-narrative article{padding:1.5rem;border-radius:var(--r-md);background:var(--bg-soft);border:1px solid var(--line-2)}
.case-narrative article span{display:block;color:var(--purple);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45rem}
.case-narrative h2{font-size:1.35rem;max-width:28rem}
.case-narrative p,.case-outcome p,.case-section-head p{color:var(--muted);margin-top:.65rem;max-width:48rem}
.case-gallery{margin:3.4rem 0}
.case-section-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:1.15rem}
.case-section-head>p{max-width:28rem;font-size:var(--fs-sm)}
.case-gallery-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:1rem}
.mockup{position:relative;overflow:hidden;min-height:20rem;border-radius:var(--r-md);margin:0;background:#10162a;padding:1rem;box-shadow:var(--shadow)}
.case-shot-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}.mockup-mobile .case-shot-image{object-position:center}.mockup-panel .case-shot-image{object-position:right center}
.mockup figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;color:#fff}
.mockup figcaption strong,.mockup figcaption span{display:block}.mockup figcaption strong{font-size:var(--fs-sm);margin-bottom:.15rem}.mockup figcaption span{color:#cbd5e1;font-size:var(--fs-xs);line-height:1.4}
.mockup:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(3,7,18,.9));pointer-events:none}
.mockup-browser{display:flex;gap:.32rem;align-items:center;height:1.6rem;padding:0 .15rem}.mockup-browser i{width:.42rem;height:.42rem;border-radius:50%;background:#fca5a5}.mockup-browser i:nth-child(2){background:#fcd34d}.mockup-browser i:nth-child(3){background:#6ee7b7}.mockup-browser span{margin-left:auto;width:35%;height:.38rem;border-radius:2rem;background:rgba(255,255,255,.16)}
.mockup-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:.6rem;padding:.5rem;background:#eef2ff;border-radius:.45rem;min-height:14rem}.mockup-layout b{grid-row:span 2;border-radius:.35rem;background:linear-gradient(145deg,#111c3d,#4636bd)}.mockup-layout em{border-radius:.35rem;background:linear-gradient(135deg,#d4ccff,#fff);height:3.8rem}.mockup-layout small{height:1rem;border-radius:.25rem;background:#dbe3f6}
.mockup-phone{position:relative;width:8.7rem;height:15rem;margin:0 auto;border:.48rem solid #101522;border-radius:1.45rem;background:linear-gradient(160deg,#c9c1ff,#f4f2ff 44%,#182f3d 45%);box-shadow:.7rem .9rem 1.5rem rgba(0,0,0,.22)}.mockup-phone>i{position:absolute;left:50%;top:.35rem;transform:translateX(-50%);width:3rem;height:.55rem;border-radius:1rem;background:#101522}.mockup-phone span{position:absolute;left:.65rem;right:.65rem;top:1.7rem;height:3rem;border-radius:.7rem;background:rgba(255,255,255,.6)}.mockup-phone b{display:block;position:relative;top:5.2rem;margin:.42rem .65rem;height:1.6rem;border-radius:.5rem;background:rgba(255,255,255,.72)}.mockup-phone em{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);width:2rem;height:2rem;border-radius:50%;background:var(--purple)}
.mockup-panel-ui{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;padding:2.3rem .4rem 0}.mockup-panel-ui span{height:4rem;border-radius:.55rem;background:linear-gradient(145deg,#5eead4,#5b45e8)}.mockup-panel-ui span:nth-child(2){background:linear-gradient(145deg,#7c3aed,#38bdf8)}.mockup-panel-ui span:nth-child(3){background:linear-gradient(145deg,#d8b4fe,#818cf8)}.mockup-panel-ui i{height:.58rem;border-radius:1rem;background:rgba(255,255,255,.25)}.mockup-panel-ui b{height:2.2rem;border-radius:.4rem;background:rgba(255,255,255,.12)}
.theme-morrow .mockup{background:#29251f}.theme-cedar .mockup{background:#26332d}.theme-wellspring .mockup{background:#17343a}.theme-pocketpilot .mockup,.theme-orbitflow .mockup,.theme-relaydesk .mockup,.theme-aurora .mockup{background:#0b1330}.theme-northline .mockup{background:#10225c}
.case-system{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;margin:3rem 0;padding:2rem;border-radius:var(--r-md);background:#0b1220;color:#fff}.case-system h2{color:#fff}.case-system dl{border-color:rgba(255,255,255,.15)}.case-system dl div{border-color:rgba(255,255,255,.1)}.case-system dt{color:#c4b5fd}.case-system dd{color:#e2e8f0}
.case-outcome{margin:3rem 0;padding:2rem;border-radius:var(--r-md);background:linear-gradient(135deg,#f3efff,#fff);border:1px solid #e4dcff}.case-outcome p{font-size:1.05rem}
.case-pagination{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 1rem;padding-top:1.2rem;border-top:1px solid var(--line)}.case-pagination a{padding:1rem;border:1px solid var(--line);border-radius:var(--r);transition:border-color .18s,background .18s}.case-pagination a:last-child{text-align:right}.case-pagination a:hover{background:var(--bg-soft);border-color:#c4b5fd}.case-pagination span{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.case-pagination strong{display:block;margin-top:.2rem;color:var(--purple);font-size:var(--fs-md)}
@media(max-width:56rem){.case-overview,.case-system{grid-template-columns:1fr;gap:1rem}.case-meta,.case-system dl{padding-left:0;border-left:0}.case-gallery-grid{grid-template-columns:1fr 1fr}.mockup-wide{grid-column:1/-1}.case-section-head{display:block}.case-pagination{grid-template-columns:1fr}.case-pagination a:last-child{text-align:left}}
@media(max-width:35rem){.case-meta{grid-template-columns:1fr}.case-gallery-grid{grid-template-columns:1fr}.mockup-wide{grid-column:auto}}

/* Font Awesome glyphs follow the dimensions of the outgoing SVG icon system. */
.nav-icon-btn .icon,.nav-toggle .icon{font-size:1.2rem}.ico-box .icon{font-size:1.25rem}.pill .icon{font-size:1.1rem}.offer-nav .icon{font-size:1.1rem}.offer-ico .icon{font-size:1.32rem}.svc .ico-box .icon{font-size:1.4rem}.step-ico .icon{font-size:1.6rem}.final-orb .icon{font-size:1.32rem}.socials .icon,.talk-socials .icon{font-size:1.18rem}.stat-ico .icon{font-size:1rem}.mnav a .icon{font-size:1.2rem}.mnav .start .icon{font-size:1.25rem}.review .brand-svg{width:1em!important;height:1em!important;font-size:1.05rem;line-height:1}

/* Site theme — component colours inherit these tokens so light and dark modes
   remain readable without changing the visual identity of accent modules. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c101b;
  --bg-soft:#151c2b;
  --ink:#f5f7ff;
  --ink-2:#dbe3f3;
  --muted:#aab6ce;
  --muted-2:#8995ad;
  --line:#2a3449;
  --line-2:#202a3d;
  --purple-soft:#28234b;
  --text-on-dark:#cdd6e8;
  --page-edge:#05070f;
  --header-bg:rgba(12,16,27,.92);
  --shadow:0 .06rem .12rem rgba(0,0,0,.18),0 .6rem 1.8rem rgba(0,0,0,.22);
  --shadow-lg:0 1.25rem 3rem rgba(0,0,0,.42);
}
html[data-theme="dark"] .site-header.scrolled{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.26)}
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .nav-search-btn,
html[data-theme="dark"] .nav-icon-btn{background:var(--bg);border-color:var(--line);color:#b9afff}
html[data-theme="dark"] .mega-panel,
html[data-theme="dark"] .reviews-bar,
html[data-theme="dark"] .svc,
html[data-theme="dark"] .t-card,
html[data-theme="dark"] .career-role{background:var(--bg);border-color:var(--line)}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-mobile,
html[data-theme="dark"] .hero-visual,
html[data-theme="dark"] .hero-visual img{background-color:var(--bg)}
html[data-theme="dark"] .hero{
  background-color:#05070f;
  background-image:
    linear-gradient(90deg,#05070f 0%,#05070f 37%,rgba(5,7,15,.94) 48%,rgba(5,7,15,.54) 60%,rgba(5,7,15,0) 74%),
    url("../images/hero/hero-studio-dashboard-dark.png");
  background-position:center,right center;
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%,contain;
}
html[data-theme="dark"] .hero-copy{background:none}
html[data-theme="dark"] .faq-art-light{display:none}
html[data-theme="dark"] .faq-art-dark{display:block}
html[data-theme="dark"] .page-hero{background:var(--bg)}
/* Only swap to the dark render when the page actually supplies one. The blanket
   rule used to hide the light art on every page, so most heroes showed an empty
   column in dark mode. The partial marks heroes that ship both. */
html[data-theme="dark"] .page-hero-grid.has-dark-art .page-hero-art-light{display:none}
html[data-theme="dark"] .page-hero-art-dark{display:block}
/* Art that still carries its own light backdrop gets its edges feathered into
   the page on the dark theme, so it ends in a fade rather than a hard rectangle.
   Cut-out art (transparent PNG/WebP) and the SVG map already merge on their own,
   so the mask is scoped away from them — masking a cut-out would only clip it. */
html[data-theme="dark"] .faq-art-dark,
html[data-theme="dark"] .page-hero-art.is-plated{
  background:transparent;
  /* A wider ramp plus a corner vignette: the straight edge fade alone still let
     bright patches survive in the corners, where two fades overlap the least. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%),radial-gradient(ellipse 78% 78% at 50% 50%,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%),radial-gradient(ellipse 78% 78% at 50% 50%,#000 55%,transparent 100%);
  mask-composite:intersect;
}
/* A white-backed photo is glaring next to dark UI; take the top end down so it
   sits at the same weight as the rest of the page. */
html[data-theme="dark"] .page-hero-art.is-plated{filter:brightness(.82) contrast(1.04) saturate(.96)}
html[data-theme="dark"] .ico-box{background:linear-gradient(145deg,#282244,#201c38);border-color:rgba(185,175,255,.24);color:#b9afff;box-shadow:0 .35rem .9rem rgba(0,0,0,.2)}
html[data-theme="dark"] .dot-check{background:#173b2b;color:#73e0a0;box-shadow:0 0 0 .14rem rgba(34,197,94,.1)}
html[data-theme="dark"] .offer-nav{background:var(--bg);border-color:var(--line)}
html[data-theme="dark"] .offer-nav:hover{background:var(--bg-soft);border-color:#9d91ff}
html[data-theme="dark"] .step-ico{background:linear-gradient(145deg,#201c38,#141a29);border-color:#40386d;box-shadow:0 .55rem 1.25rem rgba(0,0,0,.22)}
html[data-theme="dark"] .case-outcome{background:linear-gradient(135deg,#1b1730,#0f1422);border-color:#40386d}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea{background:var(--bg);border-color:var(--line);color:var(--ink)}

/* Dark theme contrast repairs for the header, proof bar, service icons and
   portfolio filters. These components have bespoke light surfaces, so they
   need explicit dark counterparts instead of inheriting the page tokens. */
html[data-theme="dark"] .site-header .brand-logo-dark{display:none}
html[data-theme="dark"] .site-header .brand-logo-light{display:block}
html[data-theme="dark"] .proof-layout .metrics-row{
  background:#151c2b;
  border-color:#2b3650;
  box-shadow:0 .65rem 1.8rem rgba(0,0,0,.24);
}
html[data-theme="dark"] .proof-layout .metrics-row .stat+.stat{border-left-color:#2b3650}
html[data-theme="dark"] .proof-layout .stat-ico{color:#aa9fff}
html[data-theme="dark"] .proof-layout .metrics-row .stat b{color:#aa9fff}
html[data-theme="dark"] .proof-layout .metrics-row .stat span:last-child{color:#cbd5e1}
html[data-theme="dark"] .svc .ico-box.icon-theme-dark{
  background:linear-gradient(145deg,#342b60,#252044);
  border-color:rgba(196,181,253,.42);
  color:#c4b5fd!important;
}
html[data-theme="dark"] .chip{background:#151c2b;color:#dbe3f3;border-color:#35415a}
html[data-theme="dark"] .chip:hover,
html[data-theme="dark"] .chip.is-on{background:var(--purple);border-color:var(--purple);color:#fff}

/* Dark theme, second pass. These components hard-coded a light surface or a
   deep accent colour that only reads against white, so on the dark page they
   showed as bright plates or near-invisible text. Audited with a contrast
   sweep over every page at 390px and 1440px. */
html[data-theme="dark"] .work-card figure{background:#151c2b}
html[data-theme="dark"] .dot-check{background:#173b2b!important;color:#73e0a0!important}
html[data-theme="dark"] .offer-nav{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .hero-caption b{color:#b9afff}
html[data-theme="dark"] .svc{--svc-ac:#b9afff}
html[data-theme="dark"] .svc .go{color:#b9afff}
html[data-theme="dark"] .cal-box,
html[data-theme="dark"] .search-pop input,
html[data-theme="dark"] .search-results a,
html[data-theme="dark"] .mob-menu-contact{background:var(--bg);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .skip:focus{background:var(--bg-soft);color:var(--ink)}
html[data-theme="dark"] .careers-ats-note .btn{background:var(--bg-soft);color:#c4b5fd}

/* Review sources: use the supplied brand artwork and keep the score copy
   immediately beside its logo instead of stacking it underneath. */
.review-logo-image{display:block;width:100%;height:100%;object-fit:contain}
.review-copy{min-width:0}
@media (min-width:56.0625rem){
  .proof-layout .reviews-bar .review{
    display:grid;
    grid-template-columns:3rem minmax(0,1fr);
    align-items:center;
    gap:.85rem;
    min-height:8.1rem;
  }
  .proof-layout .review-logo{
    display:grid;
    place-items:center;
    width:3rem;
    height:3rem;
    margin:0;
  }
  .proof-layout .review-logo-image{max-width:2.8rem;max-height:2.8rem}
  .proof-layout .review-score{margin:0 0 .3rem;color:var(--ink)}
  .proof-layout .reviews-bar .review small{color:var(--text-2);white-space:normal}
}

/* Persistent Cal.com launcher: it stays below the application overlays but
   above the page and desktop navigation. */
.cal-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:49;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.15rem;padding:.55rem 1.05rem;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill);background:linear-gradient(135deg,#6d58f2,#3f2dc4);
  box-shadow:0 .8rem 1.8rem rgba(63,45,196,.34),0 0 0 .25rem rgba(91,69,232,.1);
  color:#fff;font-size:var(--fs-sm);font-weight:800;letter-spacing:.015em;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.cal-float:hover{transform:translateY(-.15rem);background:linear-gradient(135deg,#806cf7,#4631d2);box-shadow:0 1rem 2rem rgba(63,45,196,.42),0 0 0 .25rem rgba(91,69,232,.13)}
.cal-float:focus-visible{outline:.14rem solid var(--purple);outline-offset:.2rem}
.cal-float .icon{width:1.15rem;height:1.15rem;font-size:1.15rem}
@media (min-width:52.0625rem){
  /* Keep the temporary privacy notice from sitting underneath the permanent
     call button; the notice moves to the opposite corner until dismissed. */
  body:has(.consent) .consent{right:auto;left:1.4rem}
}

/* Result metrics: the icon and the two-line copy form one horizontal unit.
   This makes the icon a substantive left-side anchor instead of a small
   decoration above the numbers. */
@media (min-width:56.0625rem){
  .proof-layout .metrics-row .stat{
    display:flex;align-items:center;justify-content:center;gap:.42rem;padding:1.2rem .75rem;text-align:left;
  }
  .proof-layout .metrics-row .stat-ico{
    align-self:center;width:2.45rem;height:2.45rem;margin:0;color:var(--purple);
  }
  .proof-layout .metrics-row .stat-ico .icon{width:2.2rem;height:2.2rem;font-size:2.05rem}
  .proof-layout .metrics-row .stat b{margin:0;color:var(--purple-deep);font-size:clamp(1.6rem,2.25vw,2.35rem);line-height:1;white-space:nowrap}
  .proof-layout .metrics-row .stat span:last-child{margin:0;color:var(--ink-2);font-size:clamp(.72rem,.95vw,.95rem);font-weight:700;line-height:1.2}
}

/* Services catalogue desktop grid: cards should fill their three grid tracks
   instead of retaining the narrow rail width used by the mobile carousel. */
@media (min-width:52.0625rem){
  .services-catalogue .svc-page-stage .svc-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.35rem;
    width:100%;
  }
  .services-catalogue .svc-page-stage .svc-grid .svc{
    width:100%;
    min-width:0;
    min-height:17.5rem;
    padding:1.65rem 1.55rem 1.4rem;
  }
  .services-catalogue .svc-page-stage .svc-grid .svc .ico-box{
    width:3.25rem;
    height:3.25rem;
    margin-bottom:1.25rem;
  }
  .services-catalogue .svc-page-stage .svc-grid .svc h3{font-size:1.08rem;}
  .services-catalogue .svc-page-stage .svc-grid .svc p{
    flex:0;
    font-size:.92rem;
    line-height:1.58;
  }
  .services-catalogue .svc-page-stage .svc-grid .svc .go{margin-top:1.1rem;}
}

/* Desktop canvas: keep header and page content at a consistent 90% width.
   The hero's own visual field uses that exact same boundary, so its image
   background no longer extends beyond the content canvas. */
@media (min-width:52.0625rem){
  :root{--max:90vw;}
  .home .hero{
    width:90vw;
    margin-inline:auto;
  }
  .home .hero .wrap{width:100%;}
}