/* Pixelgeometry - studio.css (generated)
 * Built from: app.css + mobile.css + _studio-components.css
 * Do not edit directly - run: php tools/build-studio-css.php
 */

/* ===== app.css ===== */
: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%;}
}

/* ===== mobile.css ===== */
/* Phone mockup match — loaded after app.css, wins at max-width 52rem.
   Target: reproduce mui.png (852px comp) at a 390px viewport. The comp is a
   2-column composition, so every column below is proportionally scaled down;
   see the notes on .hero-grid and .reviews for the tight spots. */
@media (max-width: 52rem) {
  :root { --nav-h: 3.45rem; }
  body { padding-bottom: 5.1rem; font-size: 16px; }
  .wrap { width: calc(100% - 1.55rem); }

  /* Header: official logo only, no icon buttons */
  .site-header { background: #fff; }
  .nav { min-height: 3.45rem; gap: .4rem; flex-wrap: nowrap; }
  .brand-m { display: none !important; }
  .brand-desk { display: flex !important; min-width: 0; max-width: none; flex: 0 1 auto; }
  .brand-logo { height: 2.15rem; max-width: 12.6rem; }
  .nav-links,
  .nav-mail,
  .nav-search-btn,
  .nav-end .btn-primary,
  .site-header .nav-mail-btn { display: none !important; }
  /* Keep the hamburger — it is the only icon button on phones. */
  .nav-end {
    display: flex !important;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .site-header .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .65rem;
    border: 1px solid #e7e3fb;
    background: #fff;
    color: #6b54f0;
    box-shadow: 0 .1rem .3rem rgba(15,23,42,.05);
  }
  .site-header .nav-toggle .icon { width: 1.05rem; height: 1.05rem; }

  /* Theme switch is icon-only on phones — the "Theme" word does not fit the
     2.25rem button and used to render clipped as "Them". */
  .theme-toggle-label { display: none; }
  .site-header .theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    min-width: 0;
    height: 2.25rem;
    padding: 0;
    gap: 0;
    border-radius: .65rem;
    border: 1px solid #e7e3fb;
    background: #fff;
    color: #6b54f0;
    box-shadow: 0 .1rem .3rem rgba(15,23,42,.05);
  }
  .site-header .theme-toggle .icon { width: 1.05rem; height: 1.05rem; font-size: 1.05rem; }

  .hero {
    background: #fff !important;
    background-image: none !important;
    padding: .85rem 0 1.15rem;
    overflow: hidden;
    position: relative;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
    align-items: start;
    min-height: 0;
    background: none !important;
  }
  .hero-copy {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    min-width: 0;
  }
  .hero-side {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    padding-top: 0;
  }
  .m-collage {
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 10;
    background: url("../images/hero/mobile-float.webp") no-repeat center / contain;
    pointer-events: none;
    /* The render carries its own flat backdrop, which showed as a panel edge
       against the page. Feathering the rim dissolves it into either theme. */
    -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 42%, transparent 96%);
    mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 42%, transparent 96%);
  }
  .hero-float,
  .hero-art,
  .hero-mobile { display: none !important; }
  .easy-start { display: none !important; }

  .eyebrow {
    display: inline-flex;
    background: #fff;
    border: 1px solid #e7e3fb;
    border-radius: var(--r-pill);
    padding: .28rem .6rem;
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: #6b54f0;
    margin-bottom: .55rem;
    font-weight: 800;
    gap: .3rem;
  }
  .eyebrow .icon { width: .75rem; height: .75rem; color: #6b54f0; }

  .hero h1 {
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: -.035em;
    max-width: none;
    padding-right: 0;
    font-weight: 800;
  }
  .grad-text {
    background: none;
    color: #6b4dff;
    -webkit-text-fill-color: #6b4dff;
  }
  .hero-lead {
    font-size: var(--fs-body);
    line-height: 1.5;
    margin: .55rem 0 0;
    max-width: none !important;
    padding-right: 0 !important;
    color: var(--text-3);
  }
  .hero-caption { font-size: var(--fs-sm); margin-top: .7rem; }

  .trust-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .65rem;
    width: calc(100% - 1.55rem);
    margin: 1rem auto 0;
    max-width: none;
  }
  .trust-row li {
    font-size: var(--fs-body);
    color: var(--text-2);
    font-weight: 600;
    align-items: flex-start;
    gap: .35rem;
    line-height: 1.3;
    min-width: 0;
  }
  .dot-check {
    background: #e8e4ff !important;
    color: #5b45e8 !important;
    width: 1.28rem;
    height: 1.28rem;
    flex: 0 0 auto;
    margin-top: .06rem;
  }
  .dot-check svg { width: .78rem; height: .78rem; stroke-width: 2.55; }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    gap: .55rem;
    margin-top: 1.15rem;
  }
  .hero-cta .btn,
  .hero-cta .btn-text {
    width: 100%;
    height: 2.85rem;
    border-radius: var(--r);
    font-size: var(--fs-md);
    font-weight: 700;
    gap: .4rem;
    padding: 0 .85rem;
    justify-content: center;
  }
  .hero-cta .btn .icon { width: 1rem; height: 1rem; }

  .reviews-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: .7rem .8rem;
  }
  .reviews-bar .review {
    display: block;
    min-width: 0;
    padding: .4rem .55rem .55rem;
    border: 0;
    background: none;
  }
  .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: .7rem; }
  .review-logo { display: block; width: 100%; margin: 0; line-height: 0; text-align: left; max-width: 100%; }
  .review .brand-svg {
    display: block !important;
    width: auto;
    height: .9rem;
    max-width: 100%;
  }
  .review.is-upwork .brand-svg { height: .86rem; }
  .review.is-fiverr .brand-svg { height: .84rem; }
  .review.is-trustpilot .brand-svg { height: .7rem; }
  .review-score { display: flex; align-items: center; gap: .3rem; margin: .35rem 0 .25rem; line-height: 1; }
  .review-score b { font-size: var(--fs-sm); }
  .review-stars { color: var(--gold); font-size: var(--fs-xs); letter-spacing: 0; white-space: nowrap; }
  .reviews-bar .review small { display: block; color: var(--text-2); font-size: .55rem; line-height: 1.2; white-space: nowrap; }
  .trustpilot-stars { display: inline-flex; gap: .08rem; color: #fff; font-size: .42rem; }
  .trustpilot-stars i { display: grid; place-items: center; width: .7rem; height: .7rem; background: #00b67a; font-style: normal; }

  /* ── Stats: 3 columns split by dividers, one flat row ─────────────────── */
  .stats { padding: .1rem 0 1rem; }
  .stats .wrap { overflow: visible; }
  .stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: .5rem 0 !important;
    border: 0 !important;
    border-top: 1px solid #eef0f5 !important;
    border-bottom: 1px solid #eef0f5 !important;
    background: none !important;
    width: 100%;
  }
  .proof-layout .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-layout .stat:nth-child(odd) { border-right: 1px solid #eef0f5; }
  .proof-layout .stat:nth-child(n+3) { border-top: 1px solid #eef0f5; padding-top: .5rem; }
  .stat {
    background: none;
    border: 0;
    border-radius: 0;
    padding: .1rem .25rem;
    text-align: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
  }
  .stat + .stat { border-left: 1px solid #eef0f5; }
  .stat-ico {
    display: inline-grid !important;
    place-items: center;
    margin: 0;
    color: #7c6aff;
  }
  .stat-ico .icon { width: 1.05rem; height: 1.05rem; }
  .stat b {
    display: block;
    font-size: var(--fs-md);
    color: #5b45e8;
    font-weight: 800;
    line-height: 1.1;
  }
  .stat span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-4);
    margin-top: 0;
    line-height: 1.2;
  }

  .dark-mod {
    border-radius: var(--r-md);
    padding: 1rem .75rem 1.05rem;
    background: linear-gradient(180deg, #0c0c15, #07070e);
    overflow: visible;
  }
  .dark-mod:before { display: none; }
  .offer-head { margin-bottom: .75rem; align-items: center; }
  .offer-head p { display: none; }
  .offer-head .pill {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    gap: .35rem;
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
  }
  .offer-head .pill .icon { width: 1rem; height: 1rem; color: #f97316; }
  .offer-head a, .offer-head .link-more { display: inline-block; color: var(--text-lavender); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

  .offer-stage, .svc-stage {
    display: grid !important;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: .35rem;
    position: relative;
    padding: 0 !important;
  }
  .offer-nav {
    position: static;
    transform: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: var(--r-pill);
    background: #0b0b12;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.45);
    z-index: 5;
  }
  .offer-nav.prev, .offer-nav.next { left: auto; right: auto; }
  .offer-nav .icon { width: 1.15rem; height: 1.15rem; }
  .offer-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .offer-viewport::-webkit-scrollbar { display: none; }
  .offer-track {
    animation: none !important;
    transform: none !important;
    width: max-content !important;
    gap: .65rem;
    flex-wrap: nowrap;
  }
  .offer {
    --ac: #a855f7;
    --ac-soft: rgba(168,85,247,.30);
    --ac-line: rgba(168,85,247,.40);
    flex: 0 0 calc(100% - .25rem);
    width: calc(100% - .25rem);
    min-width: calc(100% - .25rem);
    min-height: 11rem;
    padding: 1rem .95rem .9rem;
    border-radius: var(--r-md);
    align-items: flex-start;
    border: 1px solid var(--ac-line);
    background:
      radial-gradient(circle at 24% 16%, var(--ac-soft), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
  }
  .offer.accent-green { --ac: #22c55e; --ac-soft: rgba(34,197,94,.26); --ac-line: rgba(34,197,94,.38); }
  .offer.accent-amber { --ac: #f97316; --ac-soft: rgba(249,115,22,.28); --ac-line: rgba(249,115,22,.45); }
  .offer.accent-blue  { --ac: #38bdf8; --ac-soft: rgba(56,189,248,.26); --ac-line: rgba(56,189,248,.38); }
  .offer-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .55rem;
    padding-right: 2.4rem;
    margin-bottom: .5rem;
  }
  .offer-top h3 { flex: 1 1 auto; min-width: 0; }
  .offer-ico,
  .offer.accent-purple .offer-ico,
  .offer.accent-green .offer-ico,
  .offer.accent-amber .offer-ico,
  .offer.accent-blue .offer-ico {
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ac-soft), transparent 74%);
    border: 1.5px solid var(--ac-line);
    box-shadow: 0 0 .85rem var(--ac-soft), inset 0 0 .5rem var(--ac-soft);
    color: var(--ac);
    padding: 0;
    overflow: visible;
  }
  .offer-ico .icon { width: 1.32rem; height: 1.32rem; }
  .offer h3 { font-size: var(--fs-md); line-height: 1.25; color: #fff; }
  .offer p {
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--text-on-dark);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .offer-foot {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: .4rem;
    margin-top: auto;
    align-self: stretch;
    width: 100%;
  }
  .offer-foot > :first-child { min-width: 0; }
  .offer-foot .go { font-size: var(--fs-sm); color: var(--text-lavender); }
  .offer-foot b { font-size: var(--fs-lg); line-height: 1.1; color: var(--ac); }
  .offer-foot small {
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    margin-left: 0;
    display: block;
    color: var(--ac);
    text-transform: none;
  }
  .offer.accent-purple .offer-foot b, .offer.accent-purple .offer-foot small { color: #a855f7; }
  .badge-hot, .badge-new {
    top: .7rem;
    right: .7rem;
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    padding: .18rem .4rem;
    border-radius: var(--r-xs);
    text-transform: none;
  }
  .badge-new { background: var(--ac); }
  .offer.accent-purple .badge-new { background: #a855f7; }
  .offer-dots { display: none; }

  /* ── "What Do You Need?": heading + View All, then 3 cards ────────────── */
  #services { padding: .85rem 0 1rem; }
  #services .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
  }
  #services .section-head h2 { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.15; }
  #services .section-head p { display: none; }
  #services .section-head .link-more {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #6b54f0;
    white-space: nowrap;
  }
  #services .svc-stage .offer-nav {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  html[data-theme="dark"] #services .svc-stage .offer-nav { background: var(--bg-soft); }
  #services .svc-viewport { overflow: visible; }
  #services .svc-track { width: 100% !important; }
  /* Services: full-width cards. Icon tile and title share the first row, then
     the description, then the Explore link — matching the reference card. */
  .svc-viewport { overflow: hidden; }
  .svc-track {
    animation: none !important;
    display: grid;
    grid-template-columns: 1fr;
    width: 100% !important;
    gap: .8rem;
    transform: none !important;
  }
  .svc-track .svc {
    width: auto;
    flex: none;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "ico  title"
      "desc desc"
      "go   go";
    align-items: center;
    column-gap: .9rem;
    padding: 1.15rem 1.2rem 1.15rem;
    border-radius: 1.15rem;
    border: 1px solid #e9ebf2;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  }
  /* Indigo used by the reference card — a touch bluer than the site purple. */
  .svc { --svc-ac: #4318ff; }
  .svc .ico-box {
    grid-area: ico;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0;
    border-radius: .95rem;
    background: #e9e2ff;
    color: var(--svc-ac);
  }
  .svc .ico-box .icon,
  .svc .ico-box .svc-ico-svg {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
  }
  .svc h3 {
    grid-area: title;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.28;
    font-weight: 800;
    letter-spacing: -.014em;
    color: #101828;
  }
  .svc p {
    grid-area: desc;
    margin: .95rem 0 0;
    font-size: .92rem;
    line-height: 1.55;
    color: #454e63;
    display: block;
    overflow: visible;
  }
  .svc .go {
    grid-area: go;
    justify-self: start;
    margin-top: .95rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--svc-ac);
  }

  /* Package */
  .pkg { grid-template-columns: 1fr; }
  .pkg > * { padding-top: 1.6rem; }
  .pkg-price { font-size: var(--fs-3xl); }
  .pkg-pay { display: grid; grid-template-columns: 1fr; gap: .65rem; }
  .pkg-pay .btn { width: 100%; min-height: 2.85rem; height: auto; border-radius: var(--r); font-size: var(--fs-md); padding: .7rem .85rem; white-space: normal; line-height: 1.2; text-align: center; }
  .got, .compare { margin-top: 1.75rem; }
  .got-cols { grid-template-columns: 1fr; gap: 1rem; }
  .compare { padding: 1.1rem; }
  .compare h3 { margin-bottom: 1rem; }
  .cmp-total { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); }
  .work-card span { color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
  .work-card.is-logo figure { background: #162033; }
  .offerings-section, .package-section { padding-bottom: 1.25rem; }
  .loc-seo { padding-top: 1.75rem; }
  .loc-map { order: -1; }
  .loc-copy h2 { font-size: var(--fs-xl); }
  .loc-line summary { min-height: 3rem; padding: .8rem .9rem; }
  .loc-line h3 { font-size: var(--fs-body); }
  .loc-track { gap: .45rem; }
  .loc-track a { font-size: var(--fs-sm); padding: .4rem .7rem; }
  .field-cta .btn { margin-top: 0; height: auto; min-height: 2.85rem; }

  /* Fixed bottom floating tab bar */
  .mnav {
    display: grid !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.15rem;
    border-radius: 1.2rem 1.2rem 0 0;
    padding: 0 .2rem .28rem;
    background: #0b1220;
    box-shadow: 0 -.35rem 1.4rem rgba(7,11,22,.22);
    /* minmax(0,·) — plain 1fr floors at min-content, so the SERVICES
       label pushed the 5 tracks past 390px and scrolled the page. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
  }
  .mnav a {
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #8b93a7;
    padding-top: .45rem;
    gap: .16rem;
    min-width: 0;
    overflow: hidden;
  }
  .mnav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mnav a .icon { width: 1.22rem; height: 1.22rem; flex: none; }
  .mnav a.on { color: #7c6aff; }
  .mnav .start {
    width: 3.85rem;
    height: 3.85rem;
    margin: -1.55rem auto 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #8b7cff, #5b45e8);
    color: #fff;
    font-size: .46rem;
    letter-spacing: .08em;
    box-shadow: 0 .45rem 1.15rem rgba(91,69,232,.45);
    gap: .08rem;
  }
  .mnav .start .icon { width: 1.28rem; height: 1.28rem; }
  .mnav .start span { display: block; }

  .consent { display: none !important; }
  .live-note { bottom: 4.7rem; left: .6rem; right: .6rem; max-width: none; padding: .65rem .7rem; gap: .55rem; font-size: .78rem; }
  .live-note .ico-box { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; }
  .live-body { min-width: 0; flex: 1 1 auto; }
  .live-body .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .live-pause { width: 1.9rem; height: 1.9rem; padding: 0; font-size: .72rem; }
  .live-note > button:last-child { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; }
  .live-note > button:last-child .icon { width: .9rem; height: .9rem; }
  /* Let tracks shrink below their content width. Without this, a long control
     can expand a one-column form (notably on /contact) past a 320px viewport. */
  .grid-2 > *,
  .grid-3 > *,
  .work-grid > *,
  .faq-split > *,
  .loc-split > *,
  .page-hero-grid > *,
  .extras-grid > *,
  .final-grid > *,
  .careers-layout > * { min-width: 0; max-width: 100%; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-split, .loc-split, .page-hero-grid, .extras-grid, .final-grid { grid-template-columns: 1fr; }
  .mob-menu {
    display: none;
    position: fixed;
    inset: 0 0 4.15rem;
    background: #f8f9fc;
    z-index: 52;
    padding: .9rem 1.1rem .8rem;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .mob-menu.on { display: block; }
  .mob-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
  .mob-menu-head strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }
  .mob-menu-kicker, .mob-menu-label { display: block; color: var(--purple); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .mob-menu-kicker { margin-bottom: .28rem; }
  .mob-menu-close { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink-2); box-shadow: var(--shadow); }
  .mob-menu-close .icon { width: 1.15rem; height: 1.15rem; }
  .mob-search { margin-bottom: .8rem; }
  .mob-search input { width: 100%; height: 2.9rem; border: 1px solid #dfe3ee; border-radius: var(--r-md); padding: 0 .9rem; background: #fff; color: var(--ink); font-size: .95rem; box-shadow: 0 .25rem .8rem rgba(15,23,42,.04); }
  .mob-search input:focus { outline: .14rem solid rgba(91,69,232,.22); outline-offset: .12rem; border-color: var(--purple); }
  .mob-menu-label { margin: 0 .15rem .25rem; color: var(--muted); }
  .mob-menu-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; border-top: 1px solid var(--line); }
  .mob-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.85rem; padding: .45rem .15rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .98rem; font-weight: 700; }
  .mob-menu-link .icon { width: 1rem; height: 1rem; color: var(--muted-2); }
  .mob-menu-contact { display: grid; gap: .1rem; margin: .7rem 0 .65rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
  .mob-menu-contact span { color: var(--muted); font-size: .78rem; }
  .mob-menu-contact a { color: var(--ink); font-size: .96rem; font-weight: 700; overflow-wrap: anywhere; }
  .mob-menu-cta { width: 100%; min-height: 2.85rem; height: auto; margin: 0; padding: .6rem 1rem; color: #fff !important; font-size: .98rem; }

  /* "How it works" — desktop keeps repeat(4,1fr); on a 390px viewport the
     4 tracks measured 1065px and dragged the page sideways. Stack them. */
  .steps {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .step { min-width: 0; }

  /* Footer was 1.3fr + repeat(4,1fr) = 654px at 390. Two columns, with the
     brand blurb spanning the full width above the link lists. */
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.1rem;
  }
  .foot-grid > *:first-child { grid-column: 1 / -1; }
  .foot-grid > * { min-width: 0; }
}

@media (max-width: 35rem) {
  .pkg-price { font-size: 2.35rem; }
}

@media (max-width: 23rem) {
  .hero h1 { font-size: 1.5rem; }
}

/* Match Font Awesome glyph scale to the mobile SVG dimensions. */
.site-header .nav-toggle .icon{font-size:1.05rem}.eyebrow .icon{font-size:.75rem}.hero-cta .btn .icon{font-size:1rem}.stat-ico .icon{font-size:1.05rem}.offer-head .pill .icon{font-size:1rem}.offer-nav .icon{font-size:1.15rem}.offer-ico .icon{font-size:1.32rem}.svc .ico-box .icon,.svc .ico-box .svc-ico-svg{font-size:1.3rem}.mnav a .icon{font-size:1.22rem}.mnav .start .icon{font-size:1.28rem}.live-note > button:last-child .icon{font-size:.9rem}.mob-menu-close .icon{font-size:1.15rem}.mob-menu-link .icon{font-size:1rem}

/* Final phone layout rules. Kept after the visual reference refinements above
   so the rails cannot fall back to the older stacked-card prototype. */
@media (max-width: 52rem) {
  .offer-nav {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }
  .offer-nav .icon { width: 1.05rem; height: 1.05rem; }

  #services .svc-viewport,
  .svc-page-stage .svc-viewport { overflow-x: auto !important; overflow-y: hidden !important; }
  .offer-track,
  #services .svc-track,
  .svc-page-stage .svc-track {
    display: flex !important;
    width: 100% !important;
    gap: .8rem;
    animation: none !important;
    transform: none !important;
  }
  .svc-page-stage .offer-nav { display: grid !important; }
  .svc-track .svc {
    display: grid !important;
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "ico title"
      "desc desc"
      "go go";
    align-items: center;
    column-gap: .9rem;
    padding: 1.15rem 1.2rem;
  }
  .svc-track .svc:nth-child(n+4) { display: grid !important; }
  .offer-track .offer {
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .steps { grid-template-columns: 1fr; gap: .7rem; }
  .steps:before { display: none; }
  .step {
    display: grid;
    min-width: 0;
    grid-template-columns: 3.7rem minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon title"
      "icon desc";
    column-gap: .85rem;
    row-gap: .15rem;
    align-items: center;
    padding: .35rem 0;
    text-align: left;
  }
  .step-ico { grid-area: icon; margin: 0; }
  .step small { grid-area: label; margin: 0; }
  .step h3 { grid-area: title; margin: 0; }
  .step p { grid-area: desc; margin: 0; }

  .trust-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .trust-points {
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-top: .9rem;
  }
  .trust-points li {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--bg);
  }
  .trust-points li:nth-child(n+4) { display: none; }
  .trust-points .ico-box { width: 2.45rem; height: 2.45rem; }
  .trust-points strong { font-size: .9rem; line-height: 1.28; }
  .trust-points span { font-size: .78rem; line-height: 1.3; }
  .trust-grid .t-viewport { width: 100%; }
  .trust-grid .t-track { animation-duration: 64s; }

  html[data-theme="dark"] .site-header,
  html[data-theme="dark"] .hero { background: var(--bg) !important; }
  html[data-theme="dark"] .hero-copy { background: none !important; }
  html[data-theme="dark"] .m-collage {
    background-image: url("../images/hero/mobile-float-dark.png");
  }
  html[data-theme="dark"] .eyebrow,
  html[data-theme="dark"] .site-header .nav-toggle,
  html[data-theme="dark"] .theme-toggle,
  html[data-theme="dark"] .mob-menu-close,
  html[data-theme="dark"] .mob-search input { background: var(--bg); border-color: var(--line); color: var(--ink); }
  html[data-theme="dark"] .mob-menu { background: var(--bg); }
  html[data-theme="dark"] .svc-track .svc { background: var(--bg); border-color: var(--line); }
  html[data-theme="dark"] .svc h3 { color: var(--ink); }
  html[data-theme="dark"] .svc p { color: var(--muted); }
  html[data-theme="dark"] .proof-layout .metrics-row {
    background: #151c2b !important;
    border-color: #2b3650 !important;
  }
  html[data-theme="dark"] .proof-layout .stat,
  html[data-theme="dark"] .proof-layout .stat + .stat {
    border-color: #2b3650 !important;
  }
  html[data-theme="dark"] .proof-layout .stat-ico,
  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;
  }

  .reviews-bar .review {
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: .48rem;
  }
  .review-logo {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
  }
  .review-logo-image { display: block; width: 100%; height: 100%; object-fit: contain; }
  .review-copy { min-width: 0; }
  .review-score { margin: 0 0 .14rem; }
  .reviews-bar .review small { white-space: normal; }

  /* Services index: one full card at a time. The navigation controls sit over
     the card edges, keeping the card itself wide enough to read comfortably. */
  .services-catalogue .svc-page-stage {
    display: block !important;
    position: relative;
    padding: 0 !important;
  }
  .services-catalogue .svc-page-stage .svc-viewport {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }
  .services-catalogue .svc-page-stage .svc-track {
    display: flex !important;
    width: max-content !important;
    gap: .75rem;
  }
  .services-catalogue .svc-page-stage .svc-track .svc {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    min-height: 14.25rem;
    scroll-snap-align: start;
  }
  .services-catalogue .svc-page-stage .offer-nav {
    display: grid !important;
    position: absolute !important;
    top: 50%;
    z-index: 4;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    transform: translateY(-50%);
    background: var(--bg);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
  .services-catalogue .svc-page-stage .offer-nav.prev { left: -.85rem; }
  .services-catalogue .svc-page-stage .offer-nav.next { right: -.85rem; }
}

/* Keep the Cal.com launcher clear of the fixed mobile navigation and live
   activity message, while retaining the readable "Quick Call" label. */
@media (max-width:52rem) {
  .cal-float {
    right: auto;
    left: .75rem;
    bottom: 4.95rem;
    min-height: 3rem;
    padding: .5rem .9rem;
    font-size: .78rem;
  }
  .cal-float .icon { width: 1.05rem; height: 1.05rem; font-size: 1.05rem; }
  .live-note { bottom: 9.05rem; }
  /* The consent notice is intentionally hidden on phones, so it must not
     leave the call button unnecessarily high above the bottom navigation. */
  body:has(.services-catalogue) .cal-float {
    right: .75rem;
    left: auto;
  }

  .proof-layout .metrics-row .stat {
    display: grid !important;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .35rem;
    align-items: center;
    padding: .6rem .38rem;
    text-align: left;
  }
  .proof-layout .stat-ico {
    grid-row: 1 / span 2;
    align-self: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 !important;
  }
  .proof-layout .stat-ico .icon { width: 1.65rem; height: 1.65rem; font-size: 1.6rem; }
  .proof-layout .metrics-row .stat b { grid-column: 2; align-self: end; font-size: 1.2rem; white-space: nowrap; }
  .proof-layout .metrics-row .stat span:last-child {
    grid-column: 2;
    align-self: start;
    margin: 0;
    font-size: .62rem;
    line-height: 1.2;
  }

  /* Services catalogue: a deliberate, padded single-card carousel. The
     description occupies the middle of the card and the link stays anchored
     at its bottom, so every service has the same calm, boxed treatment. */
  .services-catalogue { padding: 2.75rem 0 3.25rem; }
  .services-catalogue > .wrap { width: 92%; }
  .services-catalogue-head { margin-bottom: 1.45rem; }
  .services-catalogue-head > p { margin-top: .65rem; }
  .services-catalogue .svc-page-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  .services-catalogue .svc-page-stage .svc-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    border-radius: 1.35rem;
    scrollbar-width: none;
  }
  .services-catalogue .svc-page-stage .svc-viewport::-webkit-scrollbar { display: none; }
  .services-catalogue .svc-page-stage .svc-track {
    width: 100% !important;
    min-width: 100%;
    gap: .75rem;
  }
  .services-catalogue .svc-page-stage .svc-track .svc {
    min-height: 17rem;
    padding: 2.15rem 1.8rem 1.75rem;
    grid-template-rows: auto auto auto;
    border-radius: 1.35rem;
    box-shadow: 0 .7rem 1.8rem rgba(15, 23, 42, .06);
  }
  .services-catalogue .svc-page-stage .svc .ico-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1.15rem;
  }
  .services-catalogue .svc-page-stage .svc .ico-box .icon {
    width: 2rem;
    height: 2rem;
    font-size: 1.9rem;
  }
  .services-catalogue .svc-page-stage .svc h3 {
    min-width: 0;
    font-size: 1.18rem;
    overflow-wrap: break-word;
  }
  .services-catalogue .svc-page-stage .svc p {
    align-self: auto;
    margin: 1.25rem 0 0;
    font-size: .95rem;
    line-height: 1.55;
  }
  .services-catalogue .svc-page-stage .svc .go {
    align-self: auto;
    margin: 1.35rem 0 0;
    font-size: 1rem;
  }
  .services-catalogue .svc-page-stage .offer-nav {
    top: 50%;
    width: 3.55rem;
    height: 3.55rem;
    min-width: 3.55rem;
    min-height: 3.55rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
  }
  .services-catalogue .svc-page-stage .offer-nav.prev { left: -1.4rem; }
  .services-catalogue .svc-page-stage .offer-nav.next { right: -1.4rem; }
}

/* ===== _studio-components.css ===== */

/* ==========================================================================
   Studio redesign components
   --------------------------------------------------------------------------
   Rules for the markup introduced by the studio header and page hero:
   .studio-topline, .us-flag, .nav-dropdown, .nav-dropdown-panel,
   .nav-dropdown-small, .nav-all, .nav-cta, .icon-button, .mob-contact,
   .page-art, .page-lead.
   Everything above this banner is the existing design system; these rules
   only add what the new markup needs, using the same tokens.
   ========================================================================== */

/* --- Top line above the header ------------------------------------------ */
.studio-topline{
  background:var(--navy);
  color:rgba(255,255,255,.74);
  font-size:var(--fs-xs);
  letter-spacing:.01em;
}
.studio-topline .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:2.25rem;
  padding-block:.35rem;
}
.studio-topline span{display:inline-flex;align-items:center;gap:.45rem}
.studio-topline a{
  color:rgba(255,255,255,.74);
  text-decoration:none;
  font-weight:500;
  white-space:nowrap;
}
.studio-topline a:hover,.studio-topline a:focus-visible{color:#fff;text-decoration:underline}

/* Stars-and-stripes swatch, drawn rather than loaded as an image. */
.us-flag{
  width:1.1rem;
  height:.75rem;
  border-radius:.125rem;
  flex:none;
  background:
    linear-gradient(#fff 0 100%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(#b22234 0 .107rem,#fff .107rem .214rem);
  background-blend-mode:normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  position:relative;
  overflow:hidden;
}
.us-flag::before{
  content:"";
  position:absolute;
  inset:0 auto 46% 0;
  width:44%;
  background:#3c3b6e;
}

/* --- Nav dropdowns (<details>/<summary>) -------------------------------- */
.nav-dropdown{position:relative}
/* Padding, size and weight deliberately mirror .nav-links>a so the dropdown
   summaries sit on the same rhythm as the plain links beside them. */
.nav-dropdown>summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.55rem .7rem;
  border-radius:.5rem;
  font-size:.92rem;
  font-weight:500;
  color:var(--ink-2);
  white-space:nowrap;
  user-select:none;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary::marker{content:""}
.nav-dropdown>summary:hover,
.nav-dropdown>summary:focus-visible,
.nav-dropdown[open]>summary{
  background:#111827;
  color:#fff;
  box-shadow:0 .45rem .9rem rgba(15,23,42,.16);
}
.nav-dropdown>summary .icon{
  width:.85rem;height:.85rem;
  transition:transform .18s ease;
}
.nav-dropdown[open]>summary .icon{transform:rotate(180deg)}

.nav-dropdown-panel{
  position:absolute;
  top:calc(100% + .65rem);
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  width:min(40rem,92vw);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.15rem;
  padding:1rem;
  border-radius:1rem;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.nav-dropdown-panel .eyebrow{
  grid-column:1/-1;
  margin:0 0 .35rem .5rem;
  color:var(--muted-2);
}
.nav-dropdown-panel>a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .65rem;
  border-radius:.65rem;
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--ink-2);
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.nav-dropdown-panel>a:hover,
.nav-dropdown-panel>a:focus-visible{background:var(--bg-soft);color:var(--purple)}
.nav-dropdown-panel>a .icon{width:1.05rem;height:1.05rem;flex:none;color:var(--purple)}

.nav-dropdown-small{grid-template-columns:minmax(0,1fr);width:min(20rem,92vw)}

.nav-all{
  grid-column:1/-1;
  margin-top:.4rem;
  padding-top:.75rem;
  border-top:1px solid var(--line);
  color:var(--purple)!important;
  font-weight:700;
}

/* --- Nav call to action -------------------------------------------------- */
.nav-cta{white-space:nowrap}
.nav-cta .icon{width:.95rem;height:.95rem}

/* --- Square icon buttons ------------------------------------------------- */
/* No `display` on the base class on purpose. .nav-toggle also carries
   .icon-button, and app.css keeps it display:none until the mobile
   breakpoint - setting display here would override that (same specificity,
   later in the file) and leave the hamburger visible on desktop. */
.icon-button{
  align-items:center;
  justify-content:center;
  width:2.6rem;
  height:2.6rem;
  flex:none;
  padding:0;
  border-radius:.8rem;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--purple);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.icon-button:hover,.icon-button:focus-visible{background:var(--bg-soft);border-color:var(--purple)}
.icon-button .icon{width:1.2rem;height:1.2rem}
/* Buttons that are always on screen opt in explicitly. */
.theme-toggle.icon-button,.mob-menu-head .icon-button{display:inline-flex}

/* --- Mobile menu contact block ------------------------------------------ */
.mob-contact{
  display:grid;
  gap:.35rem;
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:var(--fs-md);
}
.mob-contact a{
  padding:0!important;
  border:0!important;
  color:var(--purple)!important;
  font-weight:700;
}
.mob-contact span{color:var(--muted)}

/* --- Page hero ----------------------------------------------------------- */
.page-lead{
  color:var(--muted);
  max-width:38rem;
  margin-top:.85rem;
  font-size:var(--fs-lg);
  line-height:1.6;
}
.page-art{display:flex;align-items:center;justify-content:center}
.page-art img{
  width:100%;
  height:auto;
  max-width:34rem;
  object-fit:contain;
}

/* --- Dark theme ---------------------------------------------------------- */
html[data-theme="dark"] .nav-dropdown-panel{
  background:var(--navy-2);
  border-color:var(--navy-line);
}
html[data-theme="dark"] .nav-dropdown-panel>a{color:rgba(255,255,255,.82)}
html[data-theme="dark"] .nav-dropdown-panel>a:hover,
html[data-theme="dark"] .nav-dropdown-panel>a:focus-visible{background:var(--navy-3);color:#fff}
html[data-theme="dark"] .nav-all{border-top-color:var(--navy-line)}
html[data-theme="dark"] .icon-button{
  background:var(--navy-2);
  border-color:var(--navy-line);
  color:#cdbcff;
}
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .icon-button:focus-visible{background:var(--navy-3);border-color:#cdbcff}
html[data-theme="dark"] .studio-topline{background:#04060d}
html[data-theme="dark"] .mob-contact{border-top-color:var(--navy-line)}

/* --- Narrow screens ------------------------------------------------------
   56rem matches the breakpoint app.css uses to swap the desktop nav for the
   mobile menu. Keep them identical: an in-between width would hide the
   dropdowns while the desktop nav was still on screen. */
@media (max-width:56rem){
  .studio-topline .wrap{justify-content:center;text-align:center}
  .studio-topline a{display:none}
  /* The dropdowns live in the mobile menu at this width, not the header. */
  .nav-dropdown{display:none}
  .nav-cta{display:none}
  .page-art{order:-1}
  .page-art img{max-width:22rem}
}
@media (max-width:34rem){
  .studio-topline{font-size:.6875rem}
  .studio-topline .wrap{min-height:2rem;padding-block:.3rem}
  /* Long on one line at phone widths - let it wrap instead of forcing the
     page wider than the viewport. */
  .studio-topline span{
    display:block;
    text-wrap:balance;
    line-height:1.35;
  }
  .us-flag{display:inline-block;vertical-align:-.1em;margin-right:.35rem}
}

/* Checkout */
.checkout{padding:3rem 0 4rem;background:var(--bg)}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:3rem;align-items:start}
.checkout h1{font-size:clamp(2rem,4vw,2.9rem);max-width:14em}
.checkout-lead{color:var(--muted);font-size:1.05rem;margin-top:.8rem;max-width:34rem}
.checkout-steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.checkout-steps li{display:flex;gap:.9rem;align-items:flex-start}
.checkout-steps b{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font-size:.85rem}
.checkout-steps li.on b{background:var(--purple);border-color:var(--purple);color:#fff}
.checkout-steps strong{display:block;color:var(--ink)}
.checkout-steps span{color:var(--muted);font-size:.92rem}
.checkout-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow);padding:1.5rem;position:sticky;top:6rem}
.checkout-line{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;color:var(--ink-2)}
.checkout-line.muted{color:var(--muted);font-size:.92rem}
.checkout-line.total{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.9rem;font-weight:700;font-size:1.25rem;color:var(--ink)}
.checkout-line.total small{font-size:.75rem;color:var(--muted);font-weight:600}
.paypal-buttons{margin-top:1.2rem;min-height:7.5rem}
/* PayPal renders its buttons in a light-scheme iframe. When the page is dark the
   browser paints an opaque white backdrop behind a mismatched iframe; matching
   the scheme here keeps it transparent. */
.paypal-buttons,.paypal-buttons iframe{color-scheme:light}
.checkout-loading,.checkout-processing{display:flex;align-items:center;gap:.6rem;justify-content:center;color:var(--muted);padding:1.5rem 0;font-size:.95rem}
.checkout-processing{margin-top:1.2rem;border:1px dashed var(--line);border-radius:var(--r-md)}
.checkout-processing[hidden]{display:none}
.spin{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--purple);animation:pg-spin .8s linear infinite;display:inline-block}
@keyframes pg-spin{to{transform:rotate(360deg)}}
.checkout-alert{margin-top:1rem;padding:.8rem 1rem;border-radius:var(--r-sm);font-size:.92rem;line-height:1.45;border:1px solid transparent}
.checkout-alert[hidden]{display:none}
.checkout-alert.error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#b91c1c}
.checkout-alert.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:#92400e}
.checkout-alert.info{background:var(--bg-soft);border-color:var(--line);color:var(--ink-2)}
html[data-theme="dark"] .checkout-alert.error{color:#fca5a5}
html[data-theme="dark"] .checkout-alert.warn{color:#fcd34d}
.checkout-fallback{display:grid;gap:.6rem;margin-top:1rem}
.checkout-fallback[hidden]{display:none}
.checkout-mail{text-align:center;font-size:.9rem;color:var(--muted)}
.checkout-trust{color:var(--muted);margin-top:1.2rem}
.checkout-fine{color:var(--muted);font-size:.82rem;margin-top:.8rem}
.checkout-fine a,.checkout-lead a{color:var(--purple);text-decoration:underline}
.checkout-result{max-width:40rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.checkout-result .eyebrow{margin-top:1rem}
.checkout-result .hero-cta{justify-content:center;margin-top:1.6rem}
.result-ico{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center}
.result-ico svg{width:1.8rem;height:1.8rem}
.result-ico.ok{background:rgba(34,197,94,.14);color:var(--green)}
.result-ico.bad{background:rgba(239,68,68,.12);color:#ef4444}
.result-ico.wait{background:var(--bg-soft)}
.result-ico.wait .spin{width:1.8rem;height:1.8rem}
.result-ref{margin-top:1.2rem;padding:.5rem .9rem;border-radius:999px;background:var(--bg-soft);color:var(--muted);font-size:.9rem}
.result-ref b{color:var(--ink);font-family:ui-monospace,monospace;letter-spacing:.04em}
.result-next{margin-top:2rem;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);width:100%}
.result-next h2{font-size:1.35rem}
.result-next p{color:var(--muted);margin:.4rem 0 1.1rem}
@media (max-width:860px){
  .checkout{padding:2rem 0 3rem}
  .checkout-grid{grid-template-columns:1fr;gap:2rem}
  .checkout-card{position:static}
}

/* Start page: the brief form is the page; the intro is a supporting sidebar */
.brief-section{padding:2.5rem 0 4rem;background:var(--bg)}
.brief-layout{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:3rem;align-items:start}
.brief-intro{position:sticky;top:6.5rem}
.brief-intro h1{font-size:clamp(1.8rem,3vw,2.4rem);margin-top:.2rem}
.brief-intro>p{color:var(--muted);margin-top:.8rem;line-height:1.55}
.benefit-list{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.6rem}
.benefit-list li{display:flex;gap:.6rem;align-items:center;color:var(--ink-2);font-size:.95rem}
.benefit-list svg{width:1rem;height:1rem;color:var(--purple);flex:none}
.brief-intro .text-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.3rem;color:var(--purple);font-weight:600;font-size:.95rem}
.brief-intro .text-link svg{width:1rem;height:1rem}
.brief-intro img{display:block;width:100%;height:10rem;object-fit:cover;border-radius:var(--r-md);margin-top:1.6rem;border:1px solid var(--line)}
.brief-form-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow-lg);padding:2rem 2.2rem}
.brief-form-card .wiz-close{display:none}
.brief-form-card .wiz h2{font-size:1.7rem}
.brief-form-card .wiz-opt{min-height:3.2rem}
@media (max-width:900px){
  .brief-section{padding:1.2rem 0 3rem}
  .brief-layout{grid-template-columns:1fr;gap:1.5rem}
  .brief-form-card{order:-1;padding:1.3rem}
  .brief-intro{position:static}
  .brief-intro h1,.brief-intro img,.brief-intro .eyebrow{display:none}
}
.brief-form-card .wiz-opt{align-items:center;font-size:.95rem;padding:.85rem 1rem}
.brief-form-card .wiz-opt input{margin-top:0}

/* Paid kickoff brief: a premium frame so a paying customer knows this is their project */
.brief-form-card.is-paid{
  position:relative;border:2px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,#7c5cff 0%,#5b45e8 40%,#f5b400 100%) border-box;
  box-shadow:0 0 0 .4rem rgba(91,69,232,.08),0 1.5rem 3.5rem rgba(63,45,196,.22);
  padding-top:1.4rem;
}
.paid-ribbon{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin:0 0 1.2rem;padding:.6rem .7rem .6rem .6rem;border-radius:var(--r-md);background:linear-gradient(90deg,rgba(34,197,94,.1),rgba(91,69,232,.08))}
.paid-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--green);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em}
.paid-badge svg{width:.85rem;height:.85rem}
.paid-ref{font-size:.85rem;color:var(--muted)}
.paid-ref b{color:var(--ink);font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.wiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.wiz-grid .field.full{grid-column:1/-1}
.wiz .field small,.wiz-optional{font-weight:500;color:var(--muted-2);font-size:.75rem}
.wiz-optional{margin-left:.4rem;padding:.1rem .5rem;border:1px solid var(--line);border-radius:var(--r-pill);vertical-align:middle}
.wiz-sub{margin:1.2rem 0 .6rem;font-weight:600;color:var(--ink);font-size:.95rem}
.wiz-step-msg{margin-top:.8rem;color:#dc2626;font-size:.88rem;font-weight:500}
html[data-theme="dark"] .wiz-step-msg{color:#fca5a5}
.wiz-summary .sum-row{display:flex;gap:1rem;padding:.55rem 0;border-top:1px solid var(--line)}
.wiz-summary .sum-row:first-child{border-top:0}
.wiz-summary .sum-row span{flex:0 0 9rem;color:var(--muted)}
.wiz-summary .sum-row b{font-weight:600;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.wiz-paid [type=submit]{margin-top:1.1rem}
.wiz-done{text-align:center;padding:1.5rem .5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.wiz-done[hidden]{display:none}
.wiz-done:focus{outline:none}
.wiz-done h2{font-size:1.6rem;margin-top:.6rem}
.wiz-done p{color:var(--muted);max-width:30rem;line-height:1.55}
.wiz-done .btn{margin-top:1rem}
.journey{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.2rem;position:relative}
.journey li{display:flex;gap:.8rem;align-items:flex-start;padding:.45rem 0}
.journey b{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;border:1px solid var(--line);color:var(--muted);background:var(--bg)}
.journey b svg{width:.9rem;height:.9rem}
.journey li.done b{background:var(--green);border-color:var(--green);color:#fff}
.journey li.now b{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 0 0 .3rem rgba(91,69,232,.18)}
.journey strong{display:block;color:var(--ink);font-size:.95rem}
.journey span{color:var(--muted);font-size:.85rem}
.journey li.now strong{color:var(--purple)}
.brief-help{margin-top:1.4rem;font-size:.88rem;color:var(--muted)}
.brief-help a{color:var(--purple);font-weight:600}
@media (max-width:900px){
  .wiz-grid{grid-template-columns:1fr}
  .wiz-summary .sum-row{flex-direction:column;gap:.1rem}
  .wiz-summary .sum-row span{flex:none}
}

/* Mega-menu navigation (same as the live site) inside the studio header:
   never wrap a label; tighten as the viewport narrows until the hamburger takes over at 56rem. */
.nav-links>a,.nav-item>button{white-space:nowrap}
@media (max-width:80rem){
  .nav-links{gap:0;margin-left:.2rem}
  .nav-links>a,.nav-item>button{padding-left:.55rem;padding-right:.55rem;font-size:.9rem}
  .nav-end .nav-cta{padding-left:1rem;padding-right:1rem}
}
@media (max-width:70rem){
  .nav-links>a,.nav-item>button{padding-left:.4rem;padding-right:.4rem;font-size:.85rem}
  .nav-item>button .icon{display:none}
  .brand-logo{max-width:10.5rem}
}
@media (max-width:62rem){
  .nav-links a[href="/careers"],.nav-links a[href="/how-it-works"]{display:none}
}

/* Homepage proof bar: verifiable proof links in place of third-party rating badges */
.proof-bar .proof-card{color:inherit;text-decoration:none;gap:.7rem;border-radius:var(--r-md);transition:background .15s}
.proof-bar .proof-card:hover,.proof-bar .proof-card:focus-visible{background:var(--bg-soft)}
.proof-ico{flex:none;width:2.6rem;height:2.6rem;border-radius:.8rem;display:grid;place-items:center;background:var(--purple-soft);color:var(--purple)}
.proof-ico svg,.proof-ico i{width:1.2rem;height:1.2rem;font-size:1.1rem}
.proof-bar .review-score b{font-size:1rem;font-weight:700;color:var(--ink);white-space:nowrap}
.proof-bar .review-copy small{color:var(--muted);font-size:.82rem}