/* Primilink site styles: tokens, nav, sections, components. Ported from the approved homepage prototype (October 2026). */
:root { --ink:#0b0b0b; --text:#2b2b2b; --muted:#5f5f5f; --faint:#9a9a9a; --line:#e6e6e3; --dash:#d6d6d2; --tint:#f6f6f3; --green:#3BD43A; --green-ink:#1f9a1e; --bg:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* Lenis smooth scrolling */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }
.ripple { position:fixed; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:'General Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
.mono { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.02em; }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); vertical-align:1px; }
.btn { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:13px 22px; font-size:15px; font-weight:500; text-decoration:none; transition:transform .2s, background .2s; }
.btn--ink { background:var(--ink); color:#fff; }
.btn--ink i { font-style:normal; color:var(--green); }
.btn--line { border:1px solid var(--ink); color:var(--ink); }
.btn:hover { transform:translateY(-1px); }
.link { color:var(--ink); font-weight:500; text-decoration:none; border-bottom:1px solid var(--green); }

/* nav: a floating pill, with a scroll progress line along the top of the screen */
.nav { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:10; width:min(1180px, calc(100% - 24px)); height:48px; display:flex; align-items:center; gap:6px; padding:0 5px 0 22px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:999px; box-shadow:0 10px 30px -18px rgba(0,0,0,.25); }
.nav .brand { display:block; line-height:0; margin-right:auto; }
.nav .brand img { height:19px; width:auto; }
.nav__links { display:flex; align-items:center; gap:2px; }
.nav__links > a, .nav__trigger { display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 14px; border-radius:999px; color:var(--muted); font:inherit; font-size:14px; text-decoration:none; background:none; border:0; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s; }
.nav__links > a:hover, .nav__trigger:hover, .nav__group:focus-within .nav__trigger, .nav__group.open .nav__trigger { color:var(--ink); background:var(--tint); }
.nav__links > a[aria-current="page"] { color:var(--ink); background:var(--tint); box-shadow:inset 0 0 0 1px var(--line); }
.nav__trigger svg { width:14px; height:14px; transition:transform .2s; }
.nav__group { position:relative; }
.nav__group:hover .nav__trigger svg, .nav__group.open .nav__trigger svg { transform:rotate(180deg); }
.nav__menu { position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%, 6px); min-width:290px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px -18px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s; }
.nav__menu::before { content:""; position:absolute; inset:-12px 0 auto; height:12px; }   /* keeps the menu open while the pointer crosses the gap */
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu, .nav__group.open .nav__menu { opacity:1; visibility:visible; transform:translate(-50%, 0); }
.nav__sub { display:block; padding:10px 12px; border-radius:9px; text-decoration:none; }
.nav__sub b { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.nav__sub small { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
a.nav__sub:hover { background:var(--tint); }
.nav__sub--soon { opacity:.5; cursor:default; }
.nav__actions { display:flex; align-items:center; gap:6px; margin-left:10px; }
.nav__tel { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; transition:border-color .2s; }
.nav__tel:hover { border-color:var(--dash); }
.nav__tel svg { width:15px; height:15px; }
.nav .btn--go { height:38px; padding:0 18px; display:inline-flex; align-items:center; border-radius:999px; background:var(--green); color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap; }
.nav .btn--go:hover { background:#4fe04e; }
.nav a, .nav span { white-space:nowrap; }
@media (max-width:1100px) { .nav__tel span { display:none; } .nav__tel { width:38px; padding:0; justify-content:center; } }
@media (max-width:900px) { .nav__links { display:none; } }
.progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:11; pointer-events:none; }
.progress i { display:block; height:100%; background:var(--green); transform-origin:0 50%; transform:scaleX(0); }

/* hero: pinned ASCII scene with the chest */
.track { height:230vh; position:relative; }
.pin { position:sticky; top:0; height:100vh; overflow:hidden; }
.sky { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:64px; display:block; pointer-events:none; }   /* the strip behind the nav: the scene's speckle and vines carry on up to the top of the screen */
.stage { position:absolute; top:64px; left:50%; transform:translateX(-50%); width:100vw; height:calc(100vh - 64px); container-type:inline-size;
  --u:min(1cqw, calc((100vh - 64px) * 16 / 900)); }   /* 1% of the width, but never more than a 16:9 frame would give, so ultra-wide screens keep the copy in scale */
@media (max-width:699px) { .stage { height:calc(100svh - 64px); } }
.stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage canvas.over { z-index:2; pointer-events:none; }
.stage svg.chest { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:hidden; }
.stage svg.chest path, .stage svg.chest circle { vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.stage canvas.front { z-index:4; pointer-events:none; }
.copy { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.copy h1 { margin:0 0 calc(1.1 * var(--u)); font-weight:600; font-size:calc(3.3 * var(--u)); letter-spacing:-.03em; line-height:1.04; max-width:15ch; color:var(--ink); }
.copy p { margin:0 0 calc(1.47 * var(--u)); font-size:calc(1.32 * var(--u)); color:var(--muted); max-width:40ch; }
.copy a { background:var(--ink); color:#fff; border-radius:999px; padding:calc(.92 * var(--u)) calc(1.65 * var(--u)); font-size:calc(1.19 * var(--u)); font-weight:500; text-decoration:none; }
.copy a i { font-style:normal; color:var(--green); }
.joined { display:inline-flex; align-items:center; gap:calc(.9 * var(--u)); margin:0 0 calc(1.5 * var(--u)); padding:calc(.38 * var(--u)) calc(1.25 * var(--u)) calc(.38 * var(--u)) calc(.38 * var(--u)); border:1px solid var(--line); border-radius:999px; background:#fff; font-size:calc(1.02 * var(--u)); font-weight:500; color:var(--ink); }
.joined__faces { display:flex; }
.joined__faces svg { width:calc(2.25 * var(--u)); height:calc(2.25 * var(--u)); border-radius:50%; box-shadow:0 0 0 calc(.2 * var(--u)) #fff; display:block; }
.joined__faces svg + svg { margin-left:calc(-.7 * var(--u)); }
.copy small { margin-top:calc(.9 * var(--u)); font-family:'IBM Plex Mono', monospace; font-size:calc(.82 * var(--u)); color:var(--faint); }
/* tall screens (tablets held upright): the scene runs to the bottom of the screen, so the copy can be larger */
@media (min-width:700px) and (max-aspect-ratio:1/1) {
  .copy h1 { font-size:calc(5.6 * var(--u)); margin-bottom:calc(1.8 * var(--u)); }
  .copy p { font-size:calc(2.2 * var(--u)); margin-bottom:calc(2.4 * var(--u)); }
  .copy a { font-size:calc(2 * var(--u)); padding:calc(1.5 * var(--u)) calc(2.7 * var(--u)); }
  .copy small { font-size:calc(1.35 * var(--u)); margin-top:calc(1.5 * var(--u)); }
  .joined { font-size:calc(1.75 * var(--u)); gap:calc(1.4 * var(--u)); padding:calc(.6 * var(--u)) calc(2 * var(--u)) calc(.6 * var(--u)) calc(.6 * var(--u)); margin-bottom:calc(2.4 * var(--u)); }
  .joined__faces svg { width:calc(3.8 * var(--u)); height:calc(3.8 * var(--u)); }
  .joined__faces svg + svg { margin-left:calc(-1.2 * var(--u)); }
}
/* phones: the scene fills the screen under the nav, upright, and the copy is sized for a phone */
@media (max-width:699px) {
  .copy { padding-left:20px; padding-right:20px; }
  .copy h1 { font-size:calc(9 * var(--u)); max-width:12ch; margin-bottom:calc(2.6 * var(--u)); }
  .copy p { font-size:calc(3.9 * var(--u)); max-width:30ch; margin-bottom:calc(4.2 * var(--u)); }
  .copy a { font-size:calc(3.9 * var(--u)); padding:calc(3.2 * var(--u)) calc(5.6 * var(--u)); }
  .copy small { font-size:calc(2.9 * var(--u)); margin-top:calc(3 * var(--u)); }
  .joined { font-size:calc(3.3 * var(--u)); gap:calc(2.4 * var(--u)); padding:calc(1 * var(--u)) calc(3.4 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u)); margin-bottom:calc(4.6 * var(--u)); }
  .joined__faces svg { width:calc(7 * var(--u)); height:calc(7 * var(--u)); }
  .joined__faces svg + svg { margin-left:calc(-2.2 * var(--u)); }
}
.hint { position:absolute; right:max(24px, 4vw); bottom:18px; z-index:3; color:var(--faint); }
.chest-link { position:absolute; z-index:6; border-radius:12px; cursor:pointer; }
.chest-link:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.burst { position:absolute; inset:0; z-index:5; background:#fff; display:flex; align-items:center; justify-content:center; clip-path:circle(0 at 50% 50%); }

/* shared section scaffolding */
.wrap { width:min(1080px, calc(100% - 48px)); margin:0 auto; }
.narrow { width:min(720px, calc(100% - 48px)); margin:0 auto; }
section.s { padding:96px 0; position:relative; }
.head { text-align:center; max-width:640px; margin:0 auto 64px; }
.kicker { color:var(--faint); display:inline-flex; gap:10px; align-items:center; }
.kicker b { color:var(--ink); font-weight:600; }
.head h2, .proof h2 { font-weight:600; font-size:clamp(30px, 3.4vw, 46px); letter-spacing:-.035em; line-height:1.05; color:var(--ink); margin:16px 0 18px; }
.head p { font-size:18px; line-height:1.55; color:var(--muted); margin:0; }
.rule { border:0; border-top:1px dashed var(--dash); margin:0; }
/* registration marks: the Notion/blueprint accent on framed blocks */
.marks { position:relative; }
.marks::before, .marks::after { content:'+'; position:absolute; font:12px/1 'IBM Plex Mono', monospace; color:var(--faint); }
.marks::before { top:-7px; left:-4px; } .marks::after { bottom:-7px; right:-4px; }
.rv { opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s); }
.rv.in { opacity:1; transform:none; }

/* 01 proof (bursts out of the chest) */
.proof { width:min(1180px, calc(100% - 48px)); text-align:center; }
.proof h2 { margin:14px 0 40px; }
.board { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; text-align:left; }
.tile { position:relative; overflow:hidden; background:var(--tint); border-radius:10px; box-shadow:inset 0 0 0 1px var(--line); }
.tile--stat { display:flex; flex-direction:column; justify-content:space-between; min-height:200px; padding:26px 26px 24px; }
.tile--stat canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tile--stat > div { position:relative; }
.tile .val { font-size:clamp(40px, 4.4vw, 64px); font-weight:600; letter-spacing:-.045em; line-height:.95; color:var(--ink); height:1em; display:flex; align-items:flex-end; font-variant-numeric:tabular-nums; }
.tile .val img { height:.7em; width:auto; filter:brightness(0); }
.tile .val sup { font-size:.42em; color:var(--green-ink); align-self:flex-start; margin-left:3px; }
.tile .lbl { margin-top:28px; font-size:14px; color:var(--muted); line-height:1.4; max-width:22ch; }
.tile .gmark { display:inline-flex; align-items:center; gap:7px; margin-top:12px; font:500 14px 'General Sans', sans-serif; color:var(--ink); letter-spacing:-.01em; }
.tile .gmark svg { width:18px; height:18px; }
.tile .gmark .stars { color:#f4b400; letter-spacing:1px; font-size:13px; }
.tile--logos { grid-column:1 / -1; padding:22px 0; background:none; box-shadow:none; border-radius:0; }
.logos { overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos div { display:flex; align-items:center; gap:clamp(48px, 6vw, 88px); width:max-content; padding-left:clamp(48px, 6vw, 88px); animation:mq 34s linear infinite; }
.logos:hover div { animation-play-state:paused; }
.logos img { height:26px; width:auto; filter:brightness(0); opacity:.42; transition:opacity .3s; }
.logos img:hover { opacity:.85; }
@keyframes mq { to { transform:translateX(-50%); } }

/* 04 recent builds: on wide screens the section pins and scrolling moves the cards sideways; faded at both edges like the logos */
.wk-strip { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wk-track { display:flex; gap:20px; width:max-content; padding:0 12vw; will-change:transform; }
.wk { flex:0 0 min(600px, 78vw); --shot:clamp(300px, 46vh, 420px); }
a.wk { display:block; color:inherit; text-decoration:none; }
.wk__shot { height:var(--shot); overflow:hidden; border-radius:10px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--line); position:relative; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.wk__shot img { width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top; transition:none; }
.wk:hover .wk__shot { transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0,0,0,.25); }
.wk:hover .wk__shot img { transform:translateY(calc(var(--shot) - 100%)); transition:transform 3.5s linear; }
.wk__shot.wk__shot--zoom img { width:118%; max-width:none; margin-left:-9%; }
.wk__meta { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px 2px 0; }
.wk__meta b { display:block; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.wk__tags { display:flex; gap:6px; margin-top:8px; }
.wk__tags span { color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:2px 7px; font-size:11px; }
.wk__pill { flex:none; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--dash); border-radius:999px; padding:6px 12px; color:var(--text); font-size:11px; white-space:nowrap; }
@media (min-width:861px) {
  section.s.work { padding:0; }
  .wk-pin { position:sticky; top:64px; height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
  .work .head { margin-bottom:44px; }
}
@media (max-width:860px) { .wk { --shot:300px; } .wk-strip { overflow-x:auto; scroll-snap-type:x mandatory; } .wk-track { transform:none !important; padding:0 24px; } .wk { scroll-snap-align:start; } }

/* giant outlined section numbers behind each heading */
.head { position:relative; }
.head[data-n]::before { content:attr(data-n); position:absolute; left:50%; top:-.42em; z-index:-1; pointer-events:none;
  font-size:clamp(120px, 15vw, 210px); font-weight:500; letter-spacing:-.06em; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.13);
  transform:translate(calc(-50% + var(--hp, 0) * -40px), calc(var(--hp, 0) * 30px)); }

/* native plants in the margins */
.flora { position:absolute; top:0; left:0; width:100%; z-index:-1; pointer-events:none; overflow:hidden; }
.flora .pl { position:absolute; opacity:.8; }
.flora .pl.r { transform:scaleX(-1); }
.flora canvas { display:block; transform-origin:0% 100%; animation:sway var(--dur, 7s) ease-in-out var(--del, 0s) infinite alternate; }
@keyframes sway { from { transform:rotate(-1.3deg); } to { transform:rotate(1.3deg); } }
@media (prefers-reduced-motion: reduce) { .flora canvas { animation:none; } }

/* faint grid behind the whole page, fading to white at every edge of the screen */
html { background:var(--bg); }
body { background:transparent !important; }
.atmos { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.atmos::after { content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px; background-position:center top;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 4%, #000 24%, #000 76%, transparent 96%); -webkit-mask-composite:source-in; mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 4%, #000 24%, #000 76%, transparent 96%); mask-composite:intersect; }

/* 02 intro */
section.s.reality { padding-top:24px; }
.burst { padding-top:6vh; }
/* after the first full play, the hero unpins: a still scene with soil and roots, and the proof sits under it in the normal flow */
.track.done { height:auto; }
.track.done .pin { position:relative; height:auto; }
.track.done .stage { position:relative; top:auto; left:auto; transform:none; margin:64px auto 0; }
.track.done .burst { position:relative; inset:auto; z-index:auto; clip-path:none; padding-top:40px; align-items:flex-start; }
@media (max-width:699px) { .track.done .burst { padding-top:6vh; align-items:center; } }
.track.done .hint { display:none; }
.track { margin-bottom:-14vh; }   /* the next section starts rising into the empty space under the proof as the hero ends */
.intro .lead { font-size:clamp(22px, 2.2vw, 30px); line-height:1.4; letter-spacing:-.015em; color:var(--ink); text-align:center; max-width:860px; margin:0 auto; font-weight:500; }
.intro .lead em { font-style:normal; background:linear-gradient(transparent 62%, rgba(59,212,58,.28) 62%); }
.intro .cols { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:72px; align-items:center; }
.intro .cols > *, .row > *, .who > *, .two > * { min-width:0; }
.prose p { font-size:18px; line-height:1.65; color:var(--text); margin:0 0 20px; }
.prose strong { color:var(--ink); font-weight:600; }
.shot { position:relative; }
.browser { border-radius:10px; overflow:hidden; background:#fff; }
.browser .bar { display:flex; align-items:center; gap:6px; padding:9px 12px; border:1px solid var(--line); border-radius:10px 10px 0 0; background:var(--tint); }
.browser .bar i { width:8px; height:8px; border-radius:50%; border:1px solid var(--dash); }
.browser .bar span { margin-left:10px; color:var(--muted); }
.browser .view { height:340px; overflow:hidden; }
.browser .view img { display:block; width:100%; height:auto; transition:transform 6s ease; }
.shot:hover .browser .view img { transform:translateY(calc(-100% + 340px)); }
.tag { position:absolute; top:-12px; left:20px; background:var(--green); color:var(--ink); padding:3px 8px; border-radius:4px; font-weight:600; }
.review { position:absolute; right:-28px; bottom:-40px; width:290px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:0 18px 40px -18px rgba(0,0,0,.25); }
.review .src { display:flex; align-items:center; gap:8px; color:var(--muted); }
.review .src svg { width:16px; height:16px; }
.review .stars { color:#f2b01e; letter-spacing:2px; margin:8px 0 6px; }
.review blockquote { margin:0 0 10px; font-size:14px; line-height:1.45; color:var(--ink); }
.review figcaption { font-size:13px; color:var(--muted); }
.review figcaption b { color:var(--ink); font-weight:600; }

/* 02 the reality: where customers slip away */
.reality .cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:72px; align-items:center; }
.reality .cols > * { min-width:0; }
.serp { position:relative; background:var(--tint); border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); padding:44px 0; display:flex; justify-content:center; }
.serp .phone { width:min(300px, 84%); background:#fff; border:1px solid var(--line); border-radius:28px; padding:16px 14px 18px; box-shadow:0 24px 50px -28px rgba(0,0,0,.3); }
.serp .q { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:13px; color:var(--ink); }
.serp .q svg { width:14px; height:14px; color:var(--faint); }
.serp .map { position:relative; height:118px; margin:12px 0 4px; border-radius:12px; background:var(--tint); overflow:hidden;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:22px 22px; }
.serp .map::before { content:""; position:absolute; left:-10%; top:58%; width:120%; height:8px; background:#fff; transform:rotate(-8deg); }
.serp .pin { position:absolute; width:20px; height:20px; border-radius:50% 50% 50% 0; background:var(--ink); color:#fff; transform:rotate(-45deg); display:grid; place-items:center; font:600 10px/1 'IBM Plex Mono', monospace; }
.serp .pin b { transform:rotate(45deg); font-weight:600; }
.serp .res { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--line); }
.serp .res .bar { height:9px; border-radius:3px; background:#d9d9d5; }
.serp .res .meta { grid-column:1; display:flex; gap:8px; align-items:center; font-size:11px; color:var(--muted); }
.serp .res .meta i { font-style:normal; color:#f2b01e; letter-spacing:1px; }
.serp .res .call { grid-row:1 / span 2; grid-column:2; font-size:11px; border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--ink); }
.serp .res.you { border:1px dashed var(--dash); border-radius:10px; padding:11px 10px; margin-top:12px; opacity:.75; }
.serp .res.you b { font-size:13px; font-weight:600; color:var(--ink); }
.serp .res.you .meta { color:var(--faint); }
.serp .note { position:absolute; right:-14px; bottom:30px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 10px; color:var(--muted); box-shadow:0 12px 30px -18px rgba(0,0,0,.3); }
.serp .note b { color:#d0442c; font-weight:600; }
.pains { list-style:none; margin:0; padding:0; }
.pains li { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:24px 0; border-bottom:1px dashed var(--dash); }
.pains li:first-child { padding-top:0; }
.pains li:last-child { border-bottom:0; }
.pains .n { color:var(--green-ink); font-weight:600; padding-top:5px; }
.pains h3 { margin:0 0 8px; font-size:21px; letter-spacing:-.02em; line-height:1.2; color:var(--ink); font-weight:600; }
.pains p { margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
@media (max-width:860px) { .reality .cols { grid-template-columns:1fr; gap:48px; } .serp .note { right:8px; } }
/* the free score teaser: the search box hands the name to the score page */
.check { position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 32px; margin-top:64px; padding:22px 24px 22px 30px; border-radius:16px; background:var(--tint); }
.check__t b { display:block; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.check__t span { font-size:15px; color:var(--muted); }
.check__f { display:flex; gap:8px; flex:1 1 380px; max-width:500px; }
.check__f input { flex:1; min-width:0; height:50px; padding:0 18px; border:1px solid var(--dash); border-radius:999px; font:inherit; font-size:16px; color:var(--ink); background:#fff; outline:none; transition:border-color .2s, box-shadow .2s; }
.check__f input:focus { border-color:var(--ink); box-shadow:0 0 0 4px rgba(59,212,58,.18); }
.check .btn { border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:500; white-space:nowrap; }
@media (max-width:520px) { .check { padding:20px; } .check__f { flex-direction:column; } .check .btn { justify-content:center; } }

/* 03 checklist */
.checks { list-style:none; margin:0; padding:0; border-top:1px dashed var(--dash); }
.checks li { display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:baseline; padding:26px 4px; border-bottom:1px dashed var(--dash); }
.box { font-family:'IBM Plex Mono', monospace; font-size:16px; color:var(--ink); white-space:pre; }
.box b { color:var(--green-ink); display:inline-block; width:1ch; transform:scale(0); transition:transform .35s cubic-bezier(.3,1.6,.5,1); transition-delay:var(--d, 0s); }
.in .box b { transform:scale(1); }
.checks h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.015em; color:var(--ink); font-weight:600; }
.checks p { margin:0; color:var(--muted); font-size:16px; line-height:1.5; }
.checks .n { color:var(--faint); }

/* 04 what we build */
.micro { display:flex; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 8px; font-size:13px; color:var(--text); background:#fff; }
.avatars { display:flex; }
.avatars span { width:22px; height:22px; border-radius:50%; background:var(--a); border:2px solid #fff; margin-left:-6px; display:grid; place-items:center; font:600 10px 'General Sans'; color:var(--ink); }
.avatars span:first-child { margin-left:0; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:64px 0; border-top:1px dashed var(--dash); }
.row:nth-of-type(even) .art { order:-1; }
.row .idx { color:var(--faint); }
.row h3 { font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-.03em; line-height:1.1; color:var(--ink); margin:12px 0 16px; font-weight:600; }
.row p { font-size:17px; line-height:1.6; margin:0 0 18px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.chip { font-size:13px; padding:4px 9px; border-radius:5px; background:var(--tint); color:var(--text); }
.chip.g { background:rgba(59,212,58,.14); color:#176f16; }
.figure { display:flex; align-items:baseline; gap:12px; margin-top:26px; }
.figure b { font-size:40px; letter-spacing:-.04em; color:var(--ink); font-weight:600; }
.figure span { color:var(--muted); font-size:14px; }
.art { display:flex; justify-content:center; }
.art pre { margin:0; font:600 14px/1.25 'IBM Plex Mono', monospace; color:var(--ink); padding:28px 30px; background:var(--tint); border-radius:12px; transition:color .3s; }
.art pre .g { color:var(--green-ink); }
.art pre .m { color:#a8a8a8; font-weight:400; }
.art:hover pre { color:#1f9a1e; }

/* services: icons drawn from vertical lines that scatter and lock back on hover, a light running round the card edges, and guarantee seals that tilt toward the cursor */
.svcs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.svc { position:relative; display:flex; flex-direction:column; padding:22px 26px 26px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.svc--main { grid-column:1 / -1; flex-direction:row; align-items:center; gap:48px; padding:34px 40px; background:var(--tint); border-color:transparent; }
.svc__body { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.svc__art { display:block; width:100%; height:150px; margin:0 0 14px; }
.svc--main .svc__art { flex:1.15 1 0; min-width:0; height:270px; margin:0; }
.svc__n { color:var(--faint); }
.svc h3 { margin:8px 0 10px; font-size:24px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.svc--main h3 { font-size:clamp(28px, 2.8vw, 36px); letter-spacing:-.035em; }
.svc p { margin:0 0 24px; font-size:16px; line-height:1.55; color:var(--muted); }
.svc--main p { font-size:17px; color:var(--text); }
.svc .chips { margin:-6px 0 26px; }
.svc--main .chip { background:#fff; }
.svc__go { position:relative; isolation:isolate; overflow:hidden; align-self:flex-start; margin-top:auto; display:inline-flex; gap:8px; padding:10px 16px; border:1px solid var(--ink); border-radius:999px; font-size:14px; font-weight:500; color:var(--ink); text-decoration:none; transition:color .3s; }
.svc__go i { font-style:normal; transition:color .3s; }
.svc__go::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); clip-path:inset(0 100% 0 0); transition:clip-path .35s cubic-bezier(.2,.7,.2,1); }
.svc__go[data-from="right"]::before { clip-path:inset(0 0 0 100%); }
.svc__go[data-from="top"]::before { clip-path:inset(0 0 100% 0); }
.svc__go[data-from="bottom"]::before { clip-path:inset(100% 0 0 0); }
.svc__go.snap::before { transition:none; }
.svc__go.on { color:#fff; }
.svc__go.on i { color:var(--green); }
.svc__go.on::before { clip-path:inset(0); }
.svc--soon { align-items:flex-start; justify-content:center; gap:10px; background:none; border-style:dashed; border-color:var(--dash); }
.svc--soon .mono { color:var(--muted); background:var(--tint); padding:3px 8px; border-radius:4px; margin-bottom:4px; }
.svc--soon b { font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--faint); }
/* the running light: a conic gradient spun round the card and masked down to its 1.5px edge */
@property --beam { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.beam::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(59,212,58,.15) 290deg, var(--green) 345deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:beam 6s linear infinite; transition:opacity .5s; }
.beam--hover::after { opacity:0; animation-duration:3.2s; }
.beam--hover:hover::after { opacity:1; }
@keyframes beam { to { --beam:360deg; } }
/* guarantees */
.gts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.gt { position:relative; padding:26px 22px 24px; border-radius:16px; background:#fff; text-align:center; }
.gt.in { transform:perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s), opacity .8s var(--d, 0s); }
.gt.in.tilt { transition:transform .1s linear, opacity .8s; }
.gt::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(59,212,58,.12), transparent 60%); }
.gt.tilt::before { opacity:1; }
.seal { position:relative; width:118px; height:118px; margin:0 auto 18px; }
.seal svg { display:block; width:100%; height:100%; overflow:visible; }
.seal__o { fill:none; stroke:var(--dash); stroke-dasharray:2 4; }
.seal__i { fill:var(--green); stroke:var(--green); stroke-width:2; stroke-linejoin:round; }   /* a rosette, like an award seal */
.seal__ring { transform-origin:60px 60px; animation:spin 26s linear infinite; }
.seal__ring text { font:600 8.6px 'IBM Plex Mono', monospace; letter-spacing:.06em; fill:var(--ink); }
.seal__v { position:absolute; inset:0; display:grid; place-items:center; grid-auto-flow:column; align-content:center; justify-content:center; gap:1px; font-size:24px; font-weight:600; letter-spacing:-.04em; color:var(--ink); }
.seal .seal__ic { width:34px; height:34px; fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@keyframes spin { to { transform:rotate(360deg); } }
.gt h3 { margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--ink); }
.gt p { margin:0; font-size:15px; line-height:1.5; color:var(--muted); }
@media (max-width:860px) {
  .svcs { grid-template-columns:minmax(0, 1fr); }
  .svc--main { flex-direction:column; align-items:stretch; gap:20px; padding:24px 24px 28px; }
  .svc--main .svc__art { flex:none; width:100%; height:190px; }
  .gts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:480px) { .gt { padding:20px 14px; } .seal { width:96px; height:96px; } .gt h3 { font-size:16px; } .gt p { font-size:14px; } }
@media (prefers-reduced-motion: reduce) { .beam::after, .seal__ring { animation:none; } }

/* how it works: each step opens as it scrolls up the screen and stays open; the dashed line down the left fills green as you go.
   Without the script (or with reduced motion) every step is simply open. */
.steps { list-style:none; margin:0 auto; padding:0; max-width:1000px; }
.step { position:relative; padding-bottom:30px; }
.step:not(:last-child)::before, .step:not(:last-child)::after { content:""; position:absolute; left:23px; top:52px; bottom:6px; }
.step:not(:last-child)::before { border-left:1px dashed var(--dash); }
.step:not(:last-child)::after { left:22px; width:3px; border-radius:2px; background:var(--green); transform-origin:50% 0; transform:scaleY(var(--f, 1)); }
.steps.armed .step:not(:last-child)::after { transform:scaleY(var(--f, 0)); }
.step__head { display:grid; grid-template-columns:46px minmax(0, 1fr) auto 22px; gap:20px; align-items:center; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.step.open .step__head, .steps:not(.armed) .step__head { cursor:default; }
.step__dot { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--green); background:var(--green); color:var(--ink); font-weight:600; transition:background .4s, border-color .4s, color .4s; }
.step__name { display:flex; flex-direction:column; gap:4px; }
.step__name .mono { color:var(--faint); }
.step__name b { font-size:clamp(22px, 2.2vw, 28px); font-weight:600; letter-spacing:-.025em; line-height:1.1; color:var(--ink); transition:opacity .4s; }
.step__you { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:#fff; color:var(--text); white-space:nowrap; }
.step__icon { font-size:18px; text-align:center; color:var(--green-ink); }
.step__icon::before { content:'✓'; }
.steps.armed .step:not(.open) .step__dot { background:#fff; border:1px dashed var(--dash); color:var(--faint); }
.steps.armed .step:not(.open) .step__name b { opacity:.4; }
.steps.armed .step:not(.open) .step__head:hover b { opacity:.75; }
.steps.armed .step:not(.open) .step__icon { color:var(--faint); }
.steps.armed .step:not(.open) .step__icon::before { content:'+'; }
.step__body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .9s cubic-bezier(.2,.7,.2,1); }
.step__inner { min-height:0; overflow:hidden; }
.step__grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); gap:52px; align-items:center; padding:28px 0 26px 66px; transition:opacity .7s .15s, transform .7s .15s cubic-bezier(.2,.7,.2,1); }
.steps.armed .step:not(.open) .step__body { grid-template-rows:0fr; }
.steps.armed .step:not(.open) .step__inner { visibility:hidden; }
.steps.armed .step:not(.open) .step__grid { opacity:0; transform:translateY(14px); }
.step.instant .step__body, .step.instant .step__grid { transition:none; }
.step__copy p { margin:0; font-size:18px; line-height:1.6; color:var(--text); }
.bts { margin-top:24px; padding-top:16px; border-top:1px dashed var(--dash); }
.bts > .mono { color:var(--faint); }
.bts ul { list-style:none; margin:10px 0 0; padding:0; }
.bts li { display:flex; gap:12px; align-items:baseline; padding:5px 0; font-size:15.5px; line-height:1.45; color:var(--text); }
.bts .box { font-size:13px; }
.step.open .box b, .steps:not(.armed) .box b { transform:scale(1); }
/* the little screens beside each step */
.mock { position:relative; margin:0; background:var(--tint); border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); padding:34px 30px 40px; }
.win { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 24px 50px -30px rgba(0,0,0,.3); }
.win__bar { display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--tint); }
.win__bar i { width:8px; height:8px; border-radius:50%; border:1px solid var(--dash); }
.win__bar .mono { margin-left:10px; display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.win__bar svg { width:11px; height:11px; color:var(--green-ink); }
.win__bar .live { margin-left:auto; gap:6px; font-style:normal; color:#176f16; background:rgba(59,212,58,.14); padding:2px 8px; border-radius:999px; }
.sk { display:block; height:8px; border-radius:3px; background:#e4e4e0; margin-top:9px; }
.sk--h { height:14px; background:#cfcfca; margin-top:10px; }
.site { padding:14px 18px 20px; }
.site__nav { display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; }
.site__nav .sk { margin:0; }
.site__ph { width:52px; height:14px; border-radius:999px; border:1px solid var(--line); }
.site__ph.big { width:84px; height:20px; border:1.5px solid var(--ink); }
.site__cta { display:inline-block; margin-top:14px; padding:6px 12px; border-radius:999px; background:var(--ink); color:#fff; font-size:11px; }
.site__cta.go { background:var(--green); color:var(--ink); }
.site__cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:16px; }
.site__cols span { height:46px; border-radius:6px; background:var(--tint); }
.site__cols .photo { background:linear-gradient(160deg, #cfe9cf, #9fcf9e); }
.dash { padding:16px 18px 20px; }
.dash__top { display:flex; justify-content:space-between; align-items:center; }
.dash__top b { font-size:15px; font-weight:600; color:var(--ink); }
.dash__top .mono { font-size:11px; color:#176f16; background:rgba(59,212,58,.14); padding:3px 8px; border-radius:999px; }
.dash__track { list-style:none; margin:16px 0 14px; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); font-size:10.5px; color:var(--faint); }
.dash__track li { position:relative; padding-top:17px; }
.dash__track li::before { content:""; position:absolute; top:0; left:0; width:10px; height:10px; border-radius:50%; border:1px solid var(--dash); background:#fff; z-index:1; }
.dash__track li::after { content:""; position:absolute; top:5px; left:10px; right:0; height:1px; background:var(--line); }
.dash__track li:last-child::after { display:none; }
.dash__track li.on { color:var(--ink); }
.dash__track li.on::before { background:var(--green); border-color:var(--green); }
.dash__cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dash__cards div { border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.dash__cards .mono { font-size:10px; color:var(--faint); }
.dash__cards b { display:block; font-size:13px; font-weight:600; color:var(--ink); margin:4px 0 6px; }
.dash__cards em { font-style:normal; font-size:11px; color:#176f16; }
.dash__cards div + div em { color:var(--muted); }
.dash__cards div { display:flex; align-items:center; min-height:58px; }
.dash__cards b { display:flex; align-items:center; gap:9px; margin:0; }
.dash__cards i { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; }
.dash__cards i.ok { background:var(--green); color:var(--ink); }
.dash__cards i.wait { color:var(--faint); }
.dash__cards i.wait svg { width:18px; height:18px; }
.ask { position:absolute; left:var(--x); top:var(--y); display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 6px; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:13px; color:var(--ink); white-space:nowrap; box-shadow:0 12px 30px -16px rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px) scale(.96); transition:opacity .5s var(--d, 0s), transform .5s var(--d, 0s) cubic-bezier(.3,1.4,.5,1); }
.step.open .ask, .steps:not(.armed) .ask { opacity:1; transform:none; }
.ask i { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none; background:#f2b01e; color:var(--ink); font:600 11px/1 'IBM Plex Mono', monospace; font-style:normal; }
.ask i svg { width:11px; height:11px; }
.ask.done { color:var(--muted); }
.ask.done s { text-decoration-color:rgba(0,0,0,.35); }
.ask.done i, .ask.ok i, .ask.call i { background:var(--green); }
.ask.ok, .ask.call { font-weight:500; }
/* real design work in the page hero and the what-we-design rows (graphic design page) */
.pile { position:relative; width:min(100%, 520px); aspect-ratio:1 / 1; }
.pile--wide { aspect-ratio:5 / 4; }
.pile img { position:absolute; display:block; height:auto; border-radius:8px; background:#fff; box-shadow:0 0 0 5px #fff, 0 28px 50px -26px rgba(0,0,0,.5); transform:rotate(var(--r)); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pile:hover img { transform:rotate(calc(var(--r) * .4)) translateY(-4px); }
.logo-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; width:min(100%, 480px); }
.logo-grid span { display:grid; place-items:center; aspect-ratio:3 / 2; min-height:0; overflow:hidden; padding:0 12%; background:#fff; border-radius:12px; box-shadow:inset 0 0 0 1px var(--line); }
.logo-grid img { display:block; width:auto; height:auto; max-width:100%; max-height:clamp(44px, 7vw, 92px); object-fit:contain; }
.two p .link { font-weight:inherit; }
/* full-page design mockups side by side (web design page) */
.designs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }
.design { margin:0; }
.designs .browser .view { height:460px; }
.designs .shot:hover .browser .view img { transform:translateY(calc(-100% + 460px)); }
.design figcaption { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-top:14px; }
.design figcaption b { font-size:17px; font-weight:600; color:var(--ink); }
.design figcaption .mono { font-size:11px; color:var(--faint); }
@media (max-width:860px) { .designs { grid-template-columns:minmax(0, 1fr); } .designs .browser .view { height:320px; } .designs .shot:hover .browser .view img { transform:translateY(calc(-100% + 320px)); } }
/* graphic design gallery */
.gal__h { margin:44px 0 14px; font-size:12px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.gal__h span { text-transform:none; letter-spacing:0; }
.gal { display:grid; gap:14px; }
.gal figure { margin:0; border-radius:12px; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.gal img { display:block; width:100%; height:auto; }
.gal--logos { grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:minmax(150px, 1fr); }
.gal--logos figure { display:grid; place-items:center; padding:13%; }
.gal--logos figure.tall { grid-row:span 2; padding:12% 16%; }
.gal--logos img { width:auto; max-width:100%; max-height:100%; object-fit:contain; }
.gal--two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.gal--two img { aspect-ratio:4 / 3; }
.gal--fit img { object-fit:contain; }
.gal--fill img { object-fit:cover; }
/* justified rows: each figure is as wide as its shape needs, so a row's images share one height */
.gal__row { display:flex; gap:14px; }
.gal__row figure { flex:var(--r) 1 0; min-width:0; }
.gal--mail { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.gal--mail .view { height:440px; overflow:hidden; }
.gal--mail img { transition:transform 7s ease; }
.gal--mail figure:hover img { transform:translateY(calc(-100% + 440px)); }
@media (max-width:860px) {
  .gal--logos, .gal--mail { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gal--two { grid-template-columns:minmax(0, 1fr); }
  .gal--mail .view { height:320px; overflow-y:auto; }
  .gal--mail figure:hover img { transform:none; }
}
/* draft feedback: the client's comments in a column beside the draft, with the spots they mean ringed on the page */
.mock--notes { display:grid; grid-template-columns:minmax(0, 1fr) 172px; gap:14px; align-items:start; }
.hl { position:relative; transition:box-shadow .45s var(--d, 0s), background-color .45s var(--d, 0s); }
.hl::after { content:attr(data-n); position:absolute; top:-9px; right:-9px; width:18px; height:18px; border-radius:50%; background:#f2b01e; color:var(--ink); font:600 10px/18px 'IBM Plex Mono', monospace; text-align:center; opacity:0; transform:scale(.4); transition:opacity .35s var(--d, 0s), transform .45s var(--d, 0s) cubic-bezier(.3,1.5,.5,1); }
.hl.ok::after { background:var(--green); }
.step.open .hl, .steps:not(.armed) .hl, .mock--show .hl { box-shadow:0 0 0 2px #f2b01e; background-color:rgba(242,176,30,.16); }
.step.open .hl.ok, .steps:not(.armed) .hl.ok, .mock--show .hl.ok { box-shadow:0 0 0 2px var(--green); background-color:rgba(59,212,58,.12); }
.step.open .hl::after, .steps:not(.armed) .hl::after, .mock--show .hl::after { opacity:1; transform:none; }
.cmts { display:grid; gap:8px; }
.cmt { background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 11px 10px; font-size:12.5px; line-height:1.35; color:var(--ink); box-shadow:0 10px 24px -18px rgba(0,0,0,.35);
  opacity:0; transform:translateX(10px); transition:opacity .5s var(--d, 0s), transform .5s var(--d, 0s) cubic-bezier(.2,.7,.2,1); }
.step.open .cmt, .steps:not(.armed) .cmt, .mock--show .cmt { opacity:1; transform:none; }
.cmt header { display:flex; align-items:center; gap:6px; margin-bottom:5px; font-size:12px; }
.cmt header b { font-weight:600; }
.cmt header .mono { font-size:10.5px; color:var(--faint); }
.cmt header .n { margin-left:auto; width:18px; height:18px; border-radius:50%; background:#f2b01e; text-align:center; line-height:18px; color:var(--ink); font-size:10px; font-weight:600; }
.cmt p { margin:0; }
.cmt.done p { color:var(--muted); }
.cmt.done header .n { background:var(--green); }
.cmt footer { display:flex; align-items:center; gap:6px; margin-top:8px; padding:7px 0 0; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); }
.cmt footer b { color:var(--ink); font-weight:600; margin-right:2px; }
.av { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none; background:#f2b01e; color:var(--ink); font:600 8.5px/1 'IBM Plex Mono', monospace; }
.av--us { width:16px; height:16px; font-size:8px; background:var(--green); }
@media (max-width:600px) { .mock--notes { grid-template-columns:minmax(0, 1fr); } .cmts { grid-template-columns:1fr 1fr; } }
/* who does what: one small bar for you, a long one for us */
.split { max-width:1000px; margin:34px auto 0; padding:26px 30px; background:var(--tint); border-radius:14px; display:grid; gap:14px; }
.split__row { display:grid; grid-template-columns:84px 224px minmax(0, 1fr); gap:20px; align-items:center; }
.split__k { color:var(--faint); }
.split__bar { width:calc(var(--n) * 14px - 4px); height:12px; background:repeating-linear-gradient(90deg, var(--green) 0 10px, transparent 10px 14px); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s .2s cubic-bezier(.2,.7,.2,1); }
.split__row.us .split__bar { background:repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 14px); transition-delay:.45s; }
.split.in .split__bar { transform:none; }
.split p { margin:0; font-size:15.5px; color:var(--muted); }
@media (max-width:860px) {
  .step__head { grid-template-columns:38px minmax(0, 1fr) 18px; gap:8px 14px; }
  .step__dot { width:38px; height:38px; }
  .step__you { grid-column:2; grid-row:2; justify-self:start; }
  .step__icon { grid-column:3; grid-row:1; }
  .step:not(:last-child)::before { left:19px; top:44px; } .step:not(:last-child)::after { left:18px; top:44px; }
  .step__grid { grid-template-columns:minmax(0, 1fr); gap:28px; padding:22px 0 18px 52px; }
  .mock { padding:26px 16px 34px; }
  .ask { font-size:12px; }
  .split { padding:22px 20px; }
  .split__row { grid-template-columns:70px auto; gap:12px; }
  .split p { grid-column:1 / -1; margin-top:-4px; }
}
@media (max-width:480px) { .ask { white-space:normal; max-width:calc(96% - var(--x)); } }

/* 05 why us */
.who { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
.portrait { position:relative; }
.portrait .frame { border-radius:12px; overflow:hidden; aspect-ratio:1 / 1; background:var(--tint); }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.portrait figcaption { margin-top:18px; color:var(--muted); }
.who .loc { color:var(--faint); }
.who h2 { font-weight:600; font-size:clamp(30px, 3.4vw, 46px); letter-spacing:-.035em; color:var(--ink); margin:14px 0 22px; }
.who p { font-size:18px; line-height:1.6; margin:0 0 18px; }
.who .btn { margin-top:12px; }
.stats { display:flex; justify-content:center; text-align:left; }
.stat { flex:1; padding:6px 28px 8px; border-left:1px dashed var(--dash); }
.stat:first-child { border-left:0; }
.stat .val { font-size:clamp(34px,3.6vw,54px); font-weight:600; letter-spacing:-.04em; line-height:1; color:var(--ink); height:1em; display:flex; align-items:flex-end; }
.stat .val img { height:.72em; width:auto; filter:brightness(0); }
.stat .val sup { font-size:.4em; color:var(--green-ink); align-self:flex-start; margin-left:2px; }
.stat .lbl { margin-top:14px; font-size:14px; color:var(--muted); line-height:1.4; max-width:22ch; }
.stats--four { margin-top:96px; padding-top:40px; border-top:1px dashed var(--dash); }
.stats--four .stat:last-child .val { color:var(--green-ink); }

/* 06 where we work */
.atlas { position:relative; max-width:980px; margin:0 auto; }
.atlas canvas.map { display:block; width:100%; aspect-ratio:760 / 470; cursor:crosshair; }
canvas.strip { display:block; width:100%; height:64px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:48px; }
.two article { border-top:1.5px solid var(--ink); padding-top:20px; }
.two .when { color:var(--faint); }
.two b { display:block; font-size:22px; letter-spacing:-.02em; color:var(--ink); margin:8px 0 10px; font-weight:600; }
.two p { margin:0; font-size:16px; line-height:1.6; color:var(--muted); }
.note { text-align:center; color:var(--muted); margin-top:48px; font-size:15px; }

/* 07 pricing */
.price { text-align:center; }
.price .amt { font-size:clamp(44px, 5vw, 72px); letter-spacing:-.045em; color:var(--ink); font-weight:600; line-height:1; margin:10px 0 18px; }
.price .amt small { font-size:.32em; letter-spacing:0; color:var(--muted); font-weight:500; vertical-align:middle; margin-right:10px; }
.price .amt .per { font-size:.34em; letter-spacing:-.01em; color:var(--muted); font-weight:500; margin-left:4px; }
.price .note { color:var(--faint); margin:-8px 0 22px; }
.price .chips { justify-content:center; margin:0 0 26px; }
.price > p { max-width:640px; margin:0 auto; font-size:17px; line-height:1.6; color:var(--muted); }
.plans { display:grid; grid-template-columns:repeat(3, 1fr); margin-top:72px; border-top:1px dashed var(--dash); border-bottom:1px dashed var(--dash); }
.plan { padding:40px 32px; text-align:left; border-left:1px dashed var(--dash); display:flex; flex-direction:column; position:relative; }
.plan:first-child { border-left:0; }
.plan .nm { font-size:24px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.plan .pg { color:var(--faint); margin-top:4px; }
.plan p { color:var(--muted); line-height:1.55; margin:18px 0 28px; flex:1; font-size:16px; }
.plan .btn { align-self:flex-start; }
.plan.feat { background:var(--tint); }
.plan.feat .flag { position:absolute; top:-11px; left:32px; background:var(--green); color:var(--ink); font-weight:600; padding:3px 8px; border-radius:4px; }
.callout { display:flex; gap:24px; align-items:center; text-align:left; background:var(--tint); border-radius:12px; padding:26px 30px; margin-top:40px; }
.callout .big { font-size:52px; font-weight:600; letter-spacing:-.05em; color:var(--green-ink); line-height:1; }
.callout p { margin:0; font-size:16px; line-height:1.6; color:var(--text); }
.callout b { color:var(--ink); }

/* 08 faq */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; padding:24px 4px; font-size:19px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font:400 20px/1 'IBM Plex Mono', monospace; color:var(--faint); transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); color:var(--green-ink); }
.faq .ans p { margin:0 4px 26px; font-size:17px; line-height:1.65; color:var(--muted); max-width:62ch; }

/* 09 final cta */
.cta { text-align:center; padding:136px 0 0; }
.cta h2 { font-weight:600; font-size:clamp(40px, 5.2vw, 76px); letter-spacing:-.045em; line-height:1; color:var(--ink); margin:16px 0 20px; }
.cta p { max-width:560px; margin:0 auto 34px; font-size:18px; line-height:1.55; color:var(--muted); }
.cta .btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta .fine { margin-top:20px; color:var(--faint); }
.cta canvas.strip { height:150px; margin-top:72px; }

footer { border-top:1px solid var(--line); padding:56px 0 40px; }
footer .grid { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:40px; }
footer .brand { line-height:0; }
footer .brand img { height:22px; width:auto; }
footer .brand .dot { width:7px; height:7px; margin-left:4px; vertical-align:2px; }
footer p { color:var(--muted); font-size:14px; line-height:1.6; margin:12px 0 0; max-width:32ch; }
footer h4 { margin:0 0 14px; font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
footer ul { list-style:none; margin:0; padding:0; }
footer li { margin:0 0 10px; }
footer li a { text-decoration:none; color:var(--text); font-size:14px; }
footer li a:hover { color:var(--ink); border-bottom:1px solid var(--green); }
footer li span { color:var(--faint); font-size:14px; }
footer .base { display:flex; justify-content:space-between; margin-top:48px; padding-top:22px; border-top:1px dashed var(--dash); color:var(--faint); }

@media (max-width: 860px) {
  .intro .cols, .who, .row, .two { grid-template-columns:1fr; gap:40px; }
  .row:nth-of-type(even) .art { order:0; }
  .stats, .plans { flex-direction:column; display:flex; }
  .stat, .plan { border-left:0; border-top:1px dashed var(--dash); padding:24px 0; }
  .review { position:relative; right:auto; bottom:auto; margin:-30px 0 0 auto; }
  .nav a.l, .nav .online, .nav .tel { display:none; }
  footer .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) { .board { grid-template-columns:1fr 1fr; } .tile--stat { min-height:170px; padding:20px; } }
/* upright tablets: the proof sits mid-screen, so the next section can start rising sooner */
@media (min-width:700px) and (max-aspect-ratio:1/1) { .track { margin-bottom:-20vh; } }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } .logos div { animation:none; } }

/* ======================================================================
   Inner pages and shared parts added when the design moved into the site
   ====================================================================== */

/* phone menu: the header links fold into a panel under the pill */
.nav .btn--go .short { display:none; }
.nav__toggle { display:none; width:38px; height:38px; flex:none; border-radius:999px; border:1px solid var(--line); background:#fff; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0; }
.nav__toggle span { display:block; width:15px; height:1.5px; background:var(--ink); transition:transform .25s, opacity .2s; }
.nav.open .nav__toggle span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity:0; }
.nav.open .nav__toggle span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
.nav__panel { display:none; }
.nav__links > a[aria-current="page"], .nav__group.is-active .nav__trigger { color:var(--ink); }
.nav__sub[aria-current="page"] { background:var(--tint); }
@media (max-width:900px) {
  .nav { padding-left:18px; }
  .nav__toggle { display:inline-flex; }
  .nav__panel { display:block; position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:calc(100vh - 90px); overflow:auto; padding:10px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 50px -24px rgba(0,0,0,.3);
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; }
  .nav.open .nav__panel { opacity:1; visibility:visible; transform:none; }
  .nav__panel a { display:block; padding:12px 14px; border-radius:12px; font-size:17px; color:var(--ink); text-decoration:none; }
  .nav__panel a[aria-current="page"], .nav__panel a:active { background:var(--tint); }
  .nav__panel .nav__grp { display:block; padding:14px 14px 4px; font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .nav__panel .nav__psub { padding-left:22px; font-size:16px; color:var(--text); }
  .nav__panel .nav__pcall { display:flex; align-items:center; gap:10px; margin-top:8px; border-top:1px dashed var(--dash); border-radius:0; padding-top:16px; font-weight:500; }
  .nav__panel .nav__pcall svg { width:16px; height:16px; }
}
@media (max-width:420px) { .nav .btn--go .long { display:none; } .nav .btn--go .short { display:inline; } .nav .btn--go { padding:0 14px; } }

/* buttons that are real <button>s */
button.btn { cursor:pointer; font:inherit; font-size:15px; font-weight:500; }
button.btn:not(.btn--line) { border:0; }
button.btn--line { background:none; }

/* inner page header: where you are, the promise, the two ways to act, and proof right under them */
.ph { position:relative; padding:136px 0 72px; }
.ph__grid { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:64px; align-items:center; }
.ph--solo .ph__grid { grid-template-columns:minmax(0, 1fr); max-width:820px; }
.crumbs { color:var(--faint); }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--ink); }
.ph h1 { margin:18px 0 20px; max-width:15ch; font-weight:600; font-size:clamp(38px, 5vw, 66px); letter-spacing:-.045em; line-height:1.02; color:var(--ink); }
.ph--solo h1 { max-width:20ch; }
.ph__lead { margin:0 0 30px; max-width:54ch; font-size:19px; line-height:1.55; color:var(--muted); }
.ph__cta { display:flex; flex-wrap:wrap; gap:10px; }
.ph__proof { list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin:26px 0 0; padding:0; color:var(--muted); }
.ph__proof li::before { content:'●'; margin-right:8px; font-size:8px; vertical-align:2px; color:var(--green); }
.ph__art { display:flex; justify-content:center; }
.ph__art pre { margin:0; padding:28px 30px; border-radius:14px; background:var(--tint); font:600 13px/1.25 'IBM Plex Mono', monospace; color:var(--ink); white-space:pre; overflow:hidden; max-width:100%; }
.ph__art pre .g { color:var(--green-ink); }
.ph__art pre .m { color:#a8a8a8; font-weight:400; }
@media (max-width:860px) { .ph { padding:112px 0 40px; } .ph__grid { grid-template-columns:minmax(0, 1fr); gap:36px; } .ph__art pre { font-size:11px; padding:20px; } }

/* a plain list of what is included, in two columns, with ASCII ticks */
.incl { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 48px; margin:0; padding:0; border-top:1px dashed var(--dash); }
.incl li { display:grid; grid-template-columns:34px minmax(0, 1fr); gap:10px; padding:18px 2px; border-bottom:1px dashed var(--dash); }
.incl li > span:first-child { font-family:'IBM Plex Mono', monospace; color:var(--green-ink); font-weight:600; }
.incl b { display:block; margin-bottom:4px; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.incl p { margin:0; font-size:15.5px; line-height:1.55; color:var(--muted); }
@media (max-width:760px) { .incl { grid-template-columns:minmax(0, 1fr); } }

/* long text: guides and legal pages */
.prose-page { padding:136px 0 96px; }
.prose-page h1 { margin:18px 0 18px; font-weight:600; font-size:clamp(36px, 4.6vw, 58px); letter-spacing:-.04em; line-height:1.04; color:var(--ink); }
.prose-page .lede { font-size:19px; line-height:1.6; color:var(--muted); margin:0 0 40px; }
.prose h2 { margin:52px 0 14px; font-size:clamp(24px, 2.4vw, 30px); font-weight:600; letter-spacing:-.03em; line-height:1.15; color:var(--ink); }
.prose h3 { margin:32px 0 10px; font-size:20px; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.prose ul, .prose ol { margin:0 0 20px; padding-left:22px; }
.prose li { margin-bottom:8px; font-size:17px; line-height:1.65; color:var(--text); }
.prose a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:3px; }
.prose table { width:100%; border-collapse:collapse; margin:0 0 24px; font-size:16px; }
.prose th, .prose td { padding:12px 10px; border-bottom:1px dashed var(--dash); text-align:left; vertical-align:top; }
.prose th { font:600 12px 'IBM Plex Mono', monospace; color:var(--faint); letter-spacing:.02em; }
.prose .callout { margin:32px 0; }

/* the proposal and contact forms */
.formwrap { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:64px; align-items:start; }
.formcard { position:relative; padding:30px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 60px -40px rgba(0,0,0,.35); }
.formcard__title { margin:0 0 18px; font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.lead-form__progress { display:flex; gap:6px; margin-bottom:22px; }
.lead-form__progress i { flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .3s; }
.lead-form__progress i.on { background:var(--green); }
.lead-form.js-steps .lead-form__step:not(.is-current) { display:none; }
.field { margin-bottom:14px; }
.field label { display:block; margin-bottom:6px; font:12px 'IBM Plex Mono', monospace; color:var(--muted); }
.field label small { color:var(--faint); }
.field input, .field textarea, .field select { width:100%; height:50px; padding:0 14px; border:1px solid var(--dash); border-radius:10px; font:inherit; font-size:16px; color:var(--ink); background:#fff; outline:none; transition:border-color .2s, box-shadow .2s; }
.field textarea { height:auto; min-height:120px; padding:12px 14px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--ink); box-shadow:0 0 0 4px rgba(59,212,58,.18); }
.field.is-invalid input, .field.is-invalid textarea { border-color:#d0442c; }
.field [data-error] { display:block; margin-top:6px; font-size:13px; color:#a3281a; }
.field [data-error]:empty { display:none; }
.lead-form__actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.lead-form__note { margin:16px 0 0; font-size:13px; line-height:1.5; color:var(--faint); }
.lead-form__status { margin:10px 0 0; font-size:14px; color:#a3281a; }
.lead-form__status:empty { display:none; }
.is-sending button[type="submit"] { opacity:.55; pointer-events:none; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead-form__sent { display:flex; align-items:flex-start; gap:14px; }
.lead-form__tick { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:var(--ink); }
.lead-form__tick svg { width:20px; height:20px; }
.lead-form__sentnote { margin:0 0 14px; font-size:16px; line-height:1.55; color:var(--text); }
.after { list-style:none; margin:28px 0 0; padding:0; counter-reset:after; }
.after li { position:relative; padding:0 0 22px 46px; counter-increment:after; }
.after li::before { content:counter(after, decimal-leading-zero); position:absolute; left:0; top:1px; font:600 12px 'IBM Plex Mono', monospace; color:var(--green-ink); }
.after b { display:block; font-size:17px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.after p { margin:0; font-size:15.5px; line-height:1.55; color:var(--muted); }
@media (max-width:860px) { .formwrap { grid-template-columns:minmax(0, 1fr); gap:36px; } .formcard { padding:22px; } }

/* our work: every project as a big card with its story */
.proj { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:56px; align-items:center; padding:56px 0; border-top:1px dashed var(--dash); }
.proj:nth-of-type(even) { grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); }
.proj:nth-of-type(even) .proj__shot { order:2; }
.proj__shot .browser .view { height:360px; }
.proj__shot:hover .browser .view img { transform:translateY(calc(-100% + 360px)); }
.proj__meta { color:var(--faint); }
.proj h3 { margin:10px 0 12px; font-size:clamp(24px, 2.4vw, 32px); font-weight:600; letter-spacing:-.03em; line-height:1.1; color:var(--ink); }
.proj p { margin:0 0 16px; font-size:17px; line-height:1.6; color:var(--text); }
@media (max-width:860px) { .proj, .proj:nth-of-type(even) { grid-template-columns:minmax(0, 1fr); gap:28px; padding:40px 0; } .proj:nth-of-type(even) .proj__shot { order:0; } .proj__shot .browser .view { height:280px; } }

/* sections on inner pages sit closer together than on the homepage */
.page section.s { padding:80px 0; }
.page section.s.tight { padding-top:24px; }
.page .head { margin-bottom:48px; }

/* ---------- free website score tool ---------- */
/* the score tool */
.score { padding:132px 0 0; }
.sc-hero { text-align:center; }
.sc-hero h1 { font-weight:600; font-size:clamp(40px, 5.6vw, 76px); letter-spacing:-.045em; line-height:1; color:var(--ink); margin:18px 0; }
.sc-hero .narrow > p { font-size:19px; line-height:1.55; color:var(--muted); margin:0 auto; max-width:600px; }
.tool { position:relative; width:min(760px, calc(100% - 32px)); margin:44px auto 0; padding:30px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 60px -40px rgba(0,0,0,.35); text-align:left; }
.tool [hidden] { display:none !important; }
.tool label.mono, .sc-confirm p.mono { display:block; color:var(--faint); margin:0 0 10px; }
.btn:disabled { opacity:.5; cursor:default; }
.sc-search { position:relative; }
.sc-search svg { position:absolute; left:18px; top:30px; width:18px; height:18px; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.sc-search input, .sc-kw input, .sc-mail input { font:inherit; color:var(--ink); background:#fff; border:1px solid var(--dash); outline:none; transition:border-color .2s, box-shadow .2s; }
.sc-search input:focus, .sc-kw input:focus, .sc-mail input:focus { border-color:var(--ink); box-shadow:0 0 0 4px rgba(59,212,58,.18); }
.sc-search input { width:100%; height:60px; padding:0 18px 0 48px; border-radius:14px; font-size:18px; }
.sug { list-style:none; margin:0; padding:6px; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:5; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px -18px rgba(0,0,0,.28); }
.sug li { padding:10px 12px; border-radius:9px; cursor:pointer; }
.sug li b { display:block; font-size:15px; font-weight:600; color:var(--ink); }
.sug li span { font-size:13px; color:var(--muted); }
.sug li[aria-selected="true"], .sug li[role="option"]:hover { background:var(--tint); }
.sug .by { padding:6px 12px 4px; font-size:11px; color:var(--faint); cursor:default; }
.sc-hint { margin:14px 0 0; font-size:14px; color:var(--muted); }
.sc-picked { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:22px; border-radius:12px; background:var(--tint); }
.sc-picked .pin { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:var(--ink); }
.sc-picked .pin svg { width:16px; height:16px; }
.sc-picked div { flex:1; min-width:0; }
.sc-picked b { display:block; color:var(--ink); }
.sc-picked span { display:block; font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-change { border:0; background:none; font:inherit; font-size:14px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:3px; cursor:pointer; }
.sc-kw { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.sc-kw input { height:50px; min-width:0; padding:0 14px; border-radius:10px; font-size:16px; }
.sc-kw input[name="service"] { flex:1.4 1 200px; }
.sc-kw input[name="town"] { flex:1 1 140px; }
.sc-kw span { color:var(--muted); }
#ts:empty { display:none; }
#ts { margin-bottom:16px; }
.sc-go { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; }
.sc-go small, .sc-mail small { color:var(--faint); }
.sc-log { margin:0; min-height:200px; padding:22px 24px; border-radius:14px; background:var(--tint); color:var(--ink); font:500 14px/2 'IBM Plex Mono', monospace; white-space:pre-wrap; }
.sc-log .ok { color:var(--green-ink); font-weight:600; }
.sc-log .dim { color:var(--faint); }
.sc-err { margin:16px 0 0; padding:12px 14px; border-radius:10px; background:#fdecea; color:#a3281a; font-size:15px; }
.demo { display:inline-block; margin:0 0 18px; padding:3px 8px; border-radius:4px; background:#fff4d6; color:#7a5a00; font:600 11px 'IBM Plex Mono', monospace; }
.sc-top { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:34px; align-items:center; }
.dial { position:relative; width:200px; height:200px; }
.dial canvas { display:block; width:100%; height:100%; }
.dial b { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:60px; font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--ink); }
.dial small { display:block; margin-top:6px; font:12px 'IBM Plex Mono', monospace; letter-spacing:0; color:var(--faint); }
.sc-for > .mono { color:var(--faint); }
.sc-for h2 { margin:6px 0 2px; font-size:26px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.sc-for > p { margin:0 0 18px; font-size:14px; color:var(--muted); }
.parts { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.parts li { display:grid; grid-template-columns:minmax(0, 1fr) 166px 50px; gap:14px; align-items:center; font-size:15px; color:var(--text); }
.parts .n { font:600 13px 'IBM Plex Mono', monospace; color:var(--ink); text-align:right; }
.bar { position:relative; height:12px; background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 14px); }
.bar.lock { background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 14px); opacity:.55; }
.parts .n.lock { color:var(--faint); font-weight:400; }
.sc-fine { display:block; margin-top:8px; font-size:11px; line-height:1.4; color:var(--faint); }
.sc-fine a { color:inherit; }
.grecaptcha-badge { visibility:hidden; }   /* allowed because each protected form shows the reCAPTCHA notice */
.bar i { position:absolute; inset:0 auto 0 0; width:0; background:repeating-linear-gradient(90deg, var(--green) 0 10px, transparent 10px 14px); transition:width 1.1s .2s cubic-bezier(.2,.7,.2,1); }
.sc-result.go .bar i { width:calc(var(--p) * 100%); }
.finds { list-style:none; margin:28px 0 0; padding:0; border-top:1px dashed var(--dash); }
.finds + .finds, .locked .finds { margin-top:0; border-top:0; }
.finds li { display:grid; grid-template-columns:20px minmax(0, 1fr); gap:12px; padding:16px 2px; border-bottom:1px dashed var(--dash); }
.sev { width:11px; height:11px; margin-top:7px; border-radius:50%; }
.sev.high { background:#e5533d; } .sev.med { background:#f2b01e; } .sev.good { background:var(--green); }
.finds b { display:block; font-size:16.5px; font-weight:600; line-height:1.35; color:var(--ink); }
.finds li > div > span { display:block; margin-top:3px; font-size:15px; line-height:1.5; color:var(--muted); }
.locked { position:relative; min-height:300px; }
.ghost .sk { display:block; height:13px; width:70%; margin:4px 0 9px; border-radius:4px; background:#d9d9d5; }
.ghost .sk + .sk { width:92%; height:10px; background:var(--line); }
.ghost li { filter:blur(3px); opacity:.7; }
.gate { position:absolute; inset:0; display:grid; place-items:center; }
.sc-mail { width:min(440px, 94%); padding:24px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 50px -30px rgba(0,0,0,.35); }
.sc-mail h3 { margin:0 0 6px; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.sc-mail p { margin:0 0 16px; font-size:15px; color:var(--muted); }
.sc-mail input { display:block; width:100%; height:48px; margin:0 0 8px; padding:0 14px; border-radius:10px; font-size:16px; }
.sc-mail .btn { width:100%; justify-content:center; margin:6px 0 10px; }
.sc-mail .hp { position:absolute; left:-9999px; width:1px; height:1px; }
.sent { margin:22px 0 0; font-weight:500; color:var(--green-ink); }
.sc-next { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
/* what we check */
.chk { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px 28px; }
.chk article { border-top:1.5px solid var(--ink); padding-top:18px; }
.chk .mono { color:var(--green-ink); font-weight:600; }
.chk b { display:block; margin:8px 0 8px; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.chk p { margin:0; font-size:15px; line-height:1.55; color:var(--muted); }
@media (max-width:860px) {
  .chk { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .score { padding-top:104px; }
  .tool { padding:20px; }
  .sc-top { grid-template-columns:minmax(0, 1fr); justify-items:center; text-align:center; gap:20px; }
  .parts li { grid-template-columns:minmax(0, 1fr) 96px 44px; text-align:left; }
  .bar { background-size:auto; }
  .chk { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .bar i { transition:none; } }

/* services grid on inner pages: two equal columns, no wide first card */
.svcs--two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.svcs--two .svc { padding:24px 28px 28px; }
.svcs + .check { margin-top:24px; }
@media (max-width:860px) { .svcs--two { grid-template-columns:minmax(0, 1fr); } }

/* side-by-side comparison: the Primilink column is the one that stands out */
.vs { overflow-x:auto; border-radius:16px; border:1px solid var(--line); background:#fff; }
.vs table { width:100%; min-width:640px; border-collapse:collapse; font-size:15.5px; }
.vs th, .vs td { padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px dashed var(--dash); line-height:1.45; }
.vs tr:last-child th, .vs tr:last-child td { border-bottom:0; }
.vs thead th { font:600 12px 'IBM Plex Mono', monospace; letter-spacing:.02em; color:var(--faint); }
.vs tbody th { width:22%; font-weight:600; color:var(--ink); }
.vs td { color:var(--muted); }
.vs .us { background:rgba(59,212,58,.08); color:var(--ink); font-weight:500; }
.vs thead .us { color:var(--green-ink); }
.vs tbody .us::before { content:'✓'; margin-right:8px; color:var(--green-ink); font-weight:600; }

/* generic two-column section (words on the left, support on the right) and its heading */
.cols-2 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:72px; align-items:start; }
.h2 { margin:16px 0 20px; font-weight:600; font-size:clamp(28px, 3vw, 42px); letter-spacing:-.035em; line-height:1.08; color:var(--ink); }
.sub { margin:0; font-size:18px; line-height:1.6; color:var(--muted); }
.stats--stack { flex-direction:column; gap:0; }
.stats--stack .stat { border-left:0; border-top:1px dashed var(--dash); padding:22px 0; }
.stats--stack .stat:first-child { border-top:0; padding-top:0; }
.stats--stack .stat .lbl { max-width:36ch; }
.serp .res.you-top { border:1.5px solid var(--green); border-radius:10px; padding:11px 10px; margin-top:8px; background:rgba(59,212,58,.06); }
.serp .res.you-top b { font-size:13px; font-weight:600; color:var(--ink); }
.three { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; }
.three article { border-top:1.5px solid var(--ink); padding-top:20px; }
.three .when { color:var(--faint); }
.three b { display:block; margin:8px 0 10px; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.three p { margin:0; font-size:16px; line-height:1.6; color:var(--muted); }
.quote { margin:0; padding:28px 32px; border-radius:16px; background:var(--tint); }
.quote blockquote { margin:0 0 10px; font-size:clamp(20px, 2vw, 26px); line-height:1.35; letter-spacing:-.02em; color:var(--ink); font-weight:500; }
.quote figcaption { font:12px 'IBM Plex Mono', monospace; color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:860px) { .cols-2, .three { grid-template-columns:minmax(0, 1fr); gap:40px; } }

/* mocks shown outside the how-it-works steps keep their notes visible */
.mock--show .ask { opacity:1; transform:none; }
.site__brand { font-size:13px; font-weight:600; color:var(--ink); }
.site__badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.site__badges span { padding:3px 7px; border-radius:4px; background:var(--tint); font-size:10px; color:var(--text); }
.field { display:block; }
.field__label { display:block; margin-bottom:6px; font:12px 'IBM Plex Mono', monospace; color:var(--muted); }
.field__label b { color:var(--green-ink); font-weight:600; }
.field__opt { color:var(--faint); }
.field__hint { display:block; margin-top:6px; font-size:13px; line-height:1.45; color:var(--faint); }
.lead-form__progress i.is-optional { opacity:.5; }
.contact-list { list-style:none; margin:28px 0 0; padding:0; border-top:1px dashed var(--dash); }
.contact-list li { display:grid; grid-template-columns:110px minmax(0, 1fr); gap:16px; padding:16px 2px; border-bottom:1px dashed var(--dash); }
.contact-list li > span:first-child { font:12px 'IBM Plex Mono', monospace; color:var(--faint); padding-top:3px; }
.contact-list a, .contact-list b { font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; }
.contact-list a { border-bottom:1px solid var(--green); }
.contact-list li > a, .contact-list li > b { justify-self:start; }

/* form pages: on a phone the form comes straight after the headline, the supporting details after it */
.formwrap { grid-template-areas:"intro form" "more form"; column-gap:64px; row-gap:0; }
.formwrap__intro { grid-area:intro; }
.formwrap__more { grid-area:more; }
.formwrap > .formcard { grid-area:form; }
.formwrap__intro .ph__lead { margin-bottom:8px; }
@media (max-width:860px) { .formwrap { grid-template-areas:"intro" "form" "more"; row-gap:32px; } }