/* dbVantage Minimal (2026-11-13). Monochrome, typography first. Built by minimal.py.
   Colors, sizes and spacing come only from the tokens below. Spacing is on an 8px grid. */
:root{
  --bg:#FFFFFF; --bg-2:#FAFAF9;
  --ink:#171717; --body:#525252; --tone:#929292; --mute:#737373; --line:#E5E5E5; --line-2:#D4D4D4;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* type scale, desktop */
  --t-hero:clamp(44px,5.6vw,72px);
  --t-big:clamp(32px,3.8vw,48px);
  --t-h2:clamp(30px,3.4vw,44px);
  --t-h3:24px;
  --t-intro:19px;
  --t-proj:22px;
  --t-nav:15px;
  --t-body:17px;
  --t-small:14px;
  --t-label:13px;

  --wrap:1200px; --gut:32px; --text:700px;
  --sec:clamp(80px,8.4vw,120px);
  --r:8px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--font);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--bg);color:var(--ink);padding:10px 14px;border:1px solid var(--line);border-radius:var(--r)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--sec) 0}
.tint{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------------- type */
h1,h2,h3{color:var(--ink);font-weight:500;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.045em}
h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.035em}
h2.big{font-size:var(--t-big);line-height:1.06;letter-spacing:-.04em}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.02em}
h1 span,h2 span{display:block}
.tone{color:var(--tone)}
.label{font-size:var(--t-label);font-weight:500;letter-spacing:.01em;color:var(--mute);margin-bottom:24px}
.intro{font-size:var(--t-intro);line-height:1.55;color:var(--body);max-width:var(--text);letter-spacing:-.005em}
.ink{color:var(--ink)}

/* ---------------------------------------------------------------- buttons and links */
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:var(--r);
  background:var(--ink);color:#fff;font-size:16px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
  border:1px solid var(--ink);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:#2E2E2E;border-color:#2E2E2E}
.btn--sm{height:38px;padding:0 16px;font-size:15px}
.btn--lg{height:52px;padding:0 26px;font-size:16px}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--quiet:hover{background:var(--bg-2);border-color:var(--ink)}
.arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr,.more:hover .arr,.proj:hover .arr{transform:translateX(4px)}
/* text links: no resting underline. On hover a hairline draws in left to right under the words and the arrow nudges over */
.more{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--ink);padding-bottom:4px}
.more::after{content:"";position:absolute;left:0;bottom:0;width:calc(100% - 21px);height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.more:hover::after,.more:focus-visible::after{transform:scaleX(1)}
.more--lg{font-size:16px;margin-top:56px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;height:64px;gap:40px}
.logo{font-size:18px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{font-size:var(--t-nav);color:var(--body);transition:color .15s}
.nav a:hover{color:var(--ink)}
.mnav{display:none}

/* ---------------------------------------------------------------- hero */
.hero{padding:clamp(80px,9.5vw,136px) 0 0}
.hero h1{max-width:1000px}
.hero .intro{margin-top:28px;max-width:700px}
.hero .ctas{margin-top:40px}
/* credibility: the two numbers, then the clients' logos drifting by with faded ends */
.cred{margin-top:clamp(64px,7vw,96px);padding-top:32px;border-top:1px solid var(--line)}
.stats{display:flex;gap:64px}
.stats li{display:flex;flex-direction:column;gap:4px}
.stats b{font-size:32px;font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.stats span{font-size:15px;color:var(--mute)}
.logos{margin-top:56px}
.logos__label{font-size:var(--t-small);color:var(--mute);margin-bottom:20px}
.logos__view{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.logos__track{display:flex;width:max-content;animation:logos 75s linear infinite}
.logos__view:hover .logos__track{animation-play-state:paused}
.logos__row{display:flex;align-items:center;gap:72px;padding-right:72px}
.logos__row li{flex:none;display:flex;align-items:center;height:64px}
.logos img{max-width:none;opacity:.5;transition:opacity .25s var(--ease)}
.logos li:hover img{opacity:.9}
@keyframes logos{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos__track{animation:none}}
/* websites strip on the Websites page: same drift as the logos, small site cards instead of logos */
.logos__track--sites{animation-duration:50s}
.sites__row{display:flex;align-items:center;gap:12px;padding-right:12px}
.site{flex:none;display:flex;align-items:center;gap:14px;padding:6px 20px 6px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.site__pic{flex:none;width:56px;height:56px;border-radius:6px;overflow:hidden;background:#0E1013}
.sites .site__pic img{width:100%;height:100%;object-fit:cover;max-width:none;opacity:1;transform:scale(1.7)}
.site b{display:block;font-size:14px;font-weight:500;line-height:1.25;color:var(--ink);white-space:nowrap}
.site small{display:block;font-size:13px;line-height:1.3;color:var(--mute);white-space:nowrap}

/* ---------------------------------------------------------------- section heads */
.shead{max-width:760px;margin-bottom:56px}

/* ---------------------------------------------------------------- services */
.svcs{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}
.svc{display:flex;flex-direction:column;padding:40px 0 48px;border-top:1px solid var(--line)}
.svc__name{font-size:var(--t-label);font-weight:500;color:var(--mute);margin-bottom:16px}
.svc h3{max-width:480px}
.svc p:not(.svc__name){margin:12px 0 24px;max-width:500px;font-size:17px;line-height:1.6}
.svc .more{margin-top:auto;align-self:flex-start}

/* ---------------------------------------------------------------- work */
/* three equal project cards: picture on top, words below, one quiet border */
.projs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{position:relative;cursor:pointer;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s var(--ease)}
.proj:hover{border-color:var(--line-2)}
.frame{overflow:hidden;background:#0E1013;aspect-ratio:7 / 6;border-bottom:1px solid var(--line)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj:hover .frame img{transform:scale(1.02)}
.proj__txt{padding:24px 24px 28px}
.proj h3{font-size:var(--t-proj);margin-bottom:8px}
.proj__txt p:last-child{font-size:16px;line-height:1.6}

/* ---------------------------------------------------------------- founder */
.me__in{display:grid;grid-template-columns:2fr 3fr;gap:clamp(48px,7vw,96px);align-items:center}
.me__pic{border-radius:var(--r);overflow:hidden;background:#0B0B0B;aspect-ratio:4 / 5}
.me__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.me__body{display:grid;gap:16px;margin-top:28px;max-width:640px;font-size:18px;line-height:1.65}
.me__body p:first-child{color:var(--ink)}
.me .more{margin-top:32px}

/* ---------------------------------------------------------------- closing call to action */
.end{text-align:center}
.end .label{margin-bottom:24px}
.end h2{max-width:900px;margin:0 auto}
.end__p{max-width:640px;margin:24px auto 0;font-size:19px;line-height:1.55}
.end .ctas{justify-content:center;margin-top:40px;gap:28px}
.tel{font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.tel:hover{border-color:var(--ink)}

/* ---------------------------------------------------------------- footer */
.ftr{padding:72px 0 40px;font-size:var(--t-small)}
.ftr__top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
.ftr__brand p{margin-top:12px;max-width:320px;color:var(--mute)}
.ftr__tel{display:inline-block;margin-top:16px;color:var(--ink);font-weight:500}
.ftr__col h2{font-size:var(--t-small);font-weight:500;color:var(--ink);letter-spacing:0;margin-bottom:16px}
.ftr__col ul{display:grid;gap:12px}
.ftr a:not(.logo){transition:color .15s}
.ftr__col a{color:var(--mute)}
.ftr a:hover{color:var(--ink)}
.ftr__base{display:flex;gap:24px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute)}

/* ---------------------------------------------------------------- quote page */
.qpage{padding:clamp(72px,9vw,120px) 0 var(--sec)}
.qpage__in{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(48px,7vw,112px);align-items:start}
.qintro h1{font-size:clamp(40px,4.8vw,60px);line-height:1.05}
.qintro .intro{margin-top:24px}
.qform{display:grid;gap:24px;padding:40px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field > span,.field legend{font-size:var(--t-small);font-weight:500;color:var(--ink);padding:0}
.field legend{margin-bottom:8px}
.field small{font-weight:400;color:var(--mute);margin-left:6px;font-size:13px}
.input{width:100%;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg);font-size:16px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;min-height:132px;padding:12px 14px;resize:vertical;line-height:1.5}
.input::placeholder{color:#A3A3A3}
.input:hover{border-color:#A3A3A3}
.input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,23,23,.08)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:15px;color:var(--body);transition:all .15s;user-select:none}
.chip:hover span{border-color:var(--ink);color:var(--ink)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.qsend{justify-self:start}
.msg:empty{display:none}
.msg.err{font-size:var(--t-small);color:#B42318}
.hp{position:absolute;left:-9999px}
.qdone h2{font-size:32px}
.qdone p{margin-top:12px}
.qdone a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.qdone:focus{outline:0}

/* ---------------------------------------------------------------- service pages
   Same parts as the home page. Hero is text only (smaller than the home hero), then simple grids on hairlines. */
.hero--svc h1{font-size:clamp(40px,5vw,64px);line-height:1.05;max-width:900px}
.inc__grid,.terms{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px}
.inc__grid li,.terms li{border-top:1px solid var(--line);padding:28px 0 40px}
.inc__grid h3,.terms h3,.steps h3,.prices h3{font-size:20px;line-height:1.3;letter-spacing:-.015em}
.inc__grid p,.terms p,.steps p{margin-top:8px;font-size:16px;line-height:1.6}

.steps{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px;list-style:none;padding:0;margin:0}
.steps li{border-top:1px solid var(--line);padding-top:28px}
.step__n{display:block;font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--tone);margin-bottom:24px;font-variant-numeric:tabular-nums}

.prices{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.prices li{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.prices b{display:block;margin-top:16px;font-size:clamp(28px,3vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.prices p{margin-top:16px;font-size:16px;line-height:1.6}
.terms{margin-top:56px}

.faq{max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;
  font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:14px;height:14px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:hover{color:#000}
.faq details p{padding:0 48px 28px 0;max-width:720px;font-size:17px;line-height:1.65}

/* project cards open a case study: the name is a button stretched over the whole card */
.proj__btn{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer}
.proj__btn::after{content:"";position:absolute;inset:0;z-index:1}
.proj__btn:focus-visible{outline:0}
.proj:has(.proj__btn:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.proj__txt{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.proj__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:14px;font-weight:500;color:var(--ink)}
/* on service pages the work should support the page, not take it over */
.work--svc .frame{aspect-ratio:16 / 10}
.work--svc .proj__txt{padding:20px 22px 22px}
.work--svc .proj h3{font-size:19px}
.work--svc .proj__txt p:not(.proj__more){font-size:15px}

/* ---------------------------------------------------------------- case study pop-up */
.case{padding:0;border:0;background:transparent;color:var(--body);width:100%;max-width:min(1040px,calc(100% - 48px));max-height:calc(100dvh - 48px);overflow:hidden}
.case::backdrop{background:rgba(10,10,10,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.case__in{position:relative;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg);border-radius:var(--r);overflow:auto;
  max-height:calc(100dvh - 48px);box-shadow:0 32px 80px rgba(0,0,0,.35)}
.case__pic{background:#0E1013;display:flex;align-items:center}
.case__pic img{width:100%;height:auto}
.case__txt{padding:56px 48px 48px}
.case__txt .label{margin-bottom:16px}
.case__txt h2{font-size:clamp(28px,3vw,36px);line-height:1.1;letter-spacing:-.03em}
.case__story{display:grid;gap:12px;margin-top:20px;font-size:17px;line-height:1.6}
.case__story p:first-child{color:var(--ink)}
.case__txt h3{margin-top:32px;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--mute)}
.case__did{margin-top:12px;border-top:1px solid var(--line)}
.case__did li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink)}
.case__x{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.case__x:hover{border-color:var(--ink);transform:rotate(90deg)}
html:has(.case[open]){overflow:hidden}
.case[open]{animation:caseIn .45s var(--ease)}
.case[open]::backdrop{animation:caseFade .45s var(--ease)}
.case.closing{animation:caseOut .22s ease-in forwards}
.case.closing::backdrop{animation:caseFadeOut .22s ease-in forwards}
@keyframes caseIn{from{opacity:0;transform:translateY(20px) scale(.98)}}
@keyframes caseOut{to{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes caseFade{from{opacity:0}}
@keyframes caseFadeOut{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.case[open],.case[open]::backdrop{animation:none}}
@media (max-width:800px){
  .case{max-width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .case__in{grid-template-columns:1fr;max-height:calc(100dvh - 24px)}
  .case__txt{padding:28px 22px 32px}
  .case__x{top:12px;right:12px}
}

/* ---------------------------------------------------------------- entrance */
.rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1000px){
  .nav{gap:20px}
  .qpage__in{grid-template-columns:1fr;row-gap:40px}
}
@media (max-width:900px){
  .nav{display:none}
  .hdr__in{gap:12px}
  .hdr__cta{margin-left:auto}
  .mnav{display:block}
  .mnav summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav summary span,.mnav summary span::before,.mnav summary span::after{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
  .mnav summary span{position:relative}
  .mnav summary span::before,.mnav summary span::after{content:"";position:absolute;left:0}
  .mnav summary span::before{top:-6px}.mnav summary span::after{top:6px}
  .mnav[open] summary span{background:transparent}
  .mnav[open] summary span::before{transform:translateY(6px) rotate(45deg)}
  .mnav[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}
  .mnav nav{position:absolute;left:0;right:0;top:64px;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 24px;display:grid}
  .mnav nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
  .mnav nav a:last-child{border-bottom:0}
  .svcs{column-gap:40px}
  .projs{grid-template-columns:1fr;max-width:560px}
  .me__in{grid-template-columns:1fr}
  .me__pic{max-width:420px;aspect-ratio:1}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:640px){
  :root{--gut:20px;--t-h3:21px;--t-proj:20px;--t-intro:18px;--t-body:16px;--sec:72px}
  h1{letter-spacing:-.04em}
  .hero{padding:72px 0 0}
  .hero .intro{margin-top:24px}
  .hero .ctas{margin-top:32px}
  .ctas .btn{flex:1 1 auto;justify-content:center}
  .cred{margin-top:64px;padding-top:24px}
  .stats{gap:40px}
  .logos{margin-top:40px}
  .logos__view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .logos__row{zoom:.8;gap:56px;padding-right:56px}
  .stats b{font-size:28px}
  .shead{margin-bottom:40px}
  .svcs{grid-template-columns:1fr}
  .svc{padding:32px 0 40px}
  .more--lg{margin-top:48px}
  .end__p{font-size:17px}
  .end .ctas{flex-direction:column;gap:20px}
  .end .ctas .btn{width:100%}
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1 / -1}
  .qform{padding:24px 20px}
  .row2{grid-template-columns:1fr}
  .qsend{justify-self:stretch;justify-content:center}
}

/* ---------------------------------------------------------------- service pages, smaller screens */
@media (max-width:1000px){
  .inc__grid,.terms,.steps{grid-template-columns:1fr 1fr}
  .steps{row-gap:40px}
}
@media (max-width:640px){
  .inc__grid,.terms,.steps,.prices{grid-template-columns:1fr}
  .inc__grid li,.terms li{padding:24px 0 28px}
  .steps{row-gap:32px}
  .step__n{font-size:26px;margin-bottom:16px}
  .prices li{padding:24px}
  .terms{margin-top:40px}
  .faq summary{font-size:17px;padding:20px 0}
  .faq details p{padding-right:0;font-size:16px}
}

/* ================================================================ software page (2026-11-13)
   The two pictures that explain software best stay: the before-and-after hero and the four working screens.
   Inside those screens the app keeps its own useful colors (red for broken cells, green for done, blue for
   charts and people). Everything around them is the same black, white, and gray as the rest of the site.
   Drawings are sized in em off a container query, so they scale with their box and never reflow the page. */
.sw-hero{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:clamp(40px,5vw,80px);align-items:center}
.hero--sw h1{font-size:clamp(40px,4.5vw,60px);line-height:1.05;letter-spacing:-.04em}
.hero--sw .intro{margin-top:24px;font-size:var(--t-intro)}
.hero--sw .ctas{margin-top:36px}
.hero--sw{padding-bottom:var(--sec)}
.stats{flex-wrap:wrap;row-gap:24px}

/* before / after control: a two-button switch, then a caption naming the picture */
.flip{container-type:inline-size;min-width:0}
.flip__bar{display:flex;align-items:center;gap:16px;margin-bottom:12px;min-height:40px}
.flip__seg{display:inline-flex;flex:none;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.flip__seg button{height:32px;padding:0 14px;border:0;border-radius:6px;background:transparent;font-size:14px;font-weight:500;color:var(--mute);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.flip__seg button:hover{color:var(--ink)}
.flip__seg [aria-pressed="true"]{background:var(--ink);color:#fff}
.flip__seg [aria-pressed="true"]:hover{color:#fff}
.flip__cap{display:grid;font-size:var(--t-small);color:var(--mute);min-width:0}
.flip__cap span{grid-area:1 / 1;transition:opacity .4s var(--ease)}
.flip__cap .a,.flip.is-after .flip__cap .b{opacity:0}
.flip.is-after .flip__cap .a{opacity:1}

.flip__stage{display:grid;font-size:clamp(8px,2.05cqi,14px);line-height:1.35;color:var(--ink);padding:2.2em 1.2em 2.8em .4em}
.flip__stage > *{grid-area:1 / 1;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.flip__before{position:relative;align-self:center}
.flip.is-after .flip__before{opacity:0;transform:scale(1.02) rotate(-.5deg);pointer-events:none}
.flip .app{opacity:0;transform:translateY(.8em) scale(.985)}
.flip.is-after .app{opacity:1;transform:none}

/* before: three spreadsheets stacked up, an inbox, and a sticky note */
.ghost{position:absolute;inset:0;background:#fff;border:1px solid var(--line-2);border-radius:.9em;box-shadow:0 1.5em 3em -2em rgba(0,0,0,.25);
  background-image:linear-gradient(#EDEDED 1px,transparent 1px);background-size:100% 2.5em;background-position:0 2.4em}
.ghost span{display:block;padding:.6em .9em;font:500 .9em/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#525252;background:#F5F5F4;
  border-bottom:1px solid var(--line);border-radius:.9em .9em 0 0}
.ghost--1{transform:translate(5%,-2em) rotate(2.5deg)}
.ghost--2{transform:translate(-2%,-1.1em) rotate(-3deg)}
.sheet{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:.9em;overflow:hidden;box-shadow:0 2em 4em -2.2em rgba(0,0,0,.3);transform:rotate(-1deg)}
.sheet__grid{display:grid;grid-template-columns:.7fr 1fr 1.2fr .9fr}
.sheet__grid span{border-right:1px solid #EDEDED;border-bottom:1px solid #EDEDED;padding:.7em .8em;font:500 1em/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#404040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet__grid .h{background:#F5F5F4;font-weight:600;color:var(--ink)}
.sheet__grid .bad{background:#FEF3F2;color:#B42318}
.sheet__tabs{display:flex;gap:.4em;padding:.7em;background:#F5F5F4;overflow:hidden}
.sheet__tabs em{font-style:normal;font-size:.85em;background:#fff;border:1px solid var(--line);border-radius:.4em;padding:.3em .7em;white-space:nowrap;color:#525252}
.tool{position:absolute;z-index:2;border-radius:.7em;box-shadow:0 1.2em 2.4em -1.2em rgba(0,0,0,.3)}
.tool--mail{right:-1.2em;bottom:-1.8em;display:grid;gap:.15em;min-width:13em;padding:.75em 1em;background:#fff;border:1px solid var(--line);transform:rotate(1.5deg)}
.tool--mail small{font-size:.8em;color:var(--mute)}
.tool--mail b{font-weight:600}
.tool--mail span{font-size:.85em;color:#525252}
.tool--mail small::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border-radius:50%;background:#D92D20;vertical-align:.05em}
.tool--note{left:-.4em;bottom:-2.2em;width:12.5em;padding:.8em .9em;background:#FEF3C7;border:1px solid #FDE68A;color:#713F12;font-weight:500;transform:rotate(-3deg)}

/* after: one app */
.app{display:grid;grid-template-columns:8.5em minmax(0,1fr);align-self:center;background:#fff;border:1px solid var(--line);border-radius:.9em;overflow:hidden;
  box-shadow:0 2.4em 4.8em -2.4em rgba(0,0,0,.3)}
.app__side{background:#111;color:#A3A3A3;padding:1.2em .8em;display:flex;flex-direction:column;gap:.3em}
.app__side span{padding:.45em .65em;border-radius:.45em}
.app__side .on{background:rgba(255,255,255,.1);color:#fff}
.mk__logo{display:flex;align-items:center;gap:.45em;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mk__logo i{width:.85em;height:.85em;border-radius:.25em;background:currentColor}
.app__side .mk__logo{color:#fff;margin:0 0 .8em .3em}
.app__main{padding:1.3em;display:grid;gap:1em;min-width:0}
.app__main strong{font-weight:600;font-size:1.5em;letter-spacing:-.02em;line-height:1.1}
.app__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.app__tiles div{border:1px solid var(--line);border-radius:.6em;padding:.65em .75em;display:grid;gap:.15em;min-width:0}
.app__tiles small,.app__low small{color:var(--mute);font-size:.82em;white-space:nowrap}
.app__tiles b{font-weight:600;font-size:1.3em;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.app__low{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.app__bars,.app__list{border:1px solid var(--line);border-radius:.6em;padding:.8em}
.app__bars > div{display:flex;align-items:flex-end;gap:.45em;height:8.5em;margin-top:.5em}
.app__bars i{flex:1;border-radius:.25em .25em 0 0;background:linear-gradient(#2563EB,#93C5FD)}
.app__list{display:grid;gap:.45em;align-content:start}
.app__list div{display:flex;justify-content:space-between;gap:.5em;font-size:.9em;white-space:nowrap}
.app__list em,.scr em{font-style:normal;font-weight:600;font-size:.85em;color:#525252;background:#F5F5F4;border-radius:99px;padding:.1em .65em}
.app__list em.ok,.scr em.ok{background:#ECFDF3;color:#067647}

/* what we build: four cards, two across, each with a small working screen */
.swcs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.swc{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.swc__art{container-type:inline-size;aspect-ratio:16 / 10;display:grid;place-items:center;padding:24px;background:#F5F5F4;border-bottom:1px solid var(--line)}
.swc__txt{padding:28px 28px 32px}
.swc h3{font-size:22px;line-height:1.25}
.swc__txt p{margin-top:8px;font-size:16px;line-height:1.6;max-width:480px}

.scr{width:100%;max-width:24em;font-size:clamp(11px,4.1cqi,18px);line-height:1.35;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:.8em;padding:.9em;
  box-shadow:0 1.2em 2.4em -1.4em rgba(0,0,0,.2);display:grid;gap:.55em}
.scr b{font-weight:600}
.scr small{color:var(--mute);font-size:.75em}
.scr--nums{grid-template-columns:1fr 1fr}
.scr--nums div{border:1px solid var(--line);border-radius:.55em;padding:.55em .7em;display:grid;gap:.1em}
.scr--nums b{font-size:1.3em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.scr--board{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45em}
.scr--board div{background:#F5F5F4;border-radius:.55em;padding:.5em;display:grid;gap:.4em;align-content:start}
.scr--board small{padding-left:.2em}
.scr--board span{background:#fff;border:1px solid var(--line);border-radius:.4em;padding:.45em .5em;font-size:.8em;font-weight:500;line-height:1.25;display:grid}
.scr--board span em{justify-self:start;margin-top:.35em;font-size:.88em;background:#EFF4FF;color:#1D4ED8}
.scr--board span.ok{color:#067647}
.scr--phone{width:auto;max-width:none;font-size:clamp(11px,3.8cqi,17px);background:#111;border:0;border-radius:1.6em;padding:.45em}
.scr--phone > div{width:11.5em;background:#fff;border-radius:1.25em;padding:1em .8em 1.1em;display:grid;gap:.5em}
.scr--phone .mk__logo{font-size:.9em;margin:0 0 .4em .2em}
.scr__btn{display:block;text-align:center;background:#0E7A55;color:#fff;border-radius:99px;padding:.5em;font-size:.78em;font-weight:600}
.scr__btn--line{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.sync__ev{display:grid;gap:.1em;padding:.55em .7em;border:1px solid var(--line);border-radius:.55em;background:#FAFAF9}
.scr--sync ul{display:grid}
.scr--sync li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6em;padding:.45em .1em;border-top:1px solid var(--line);font-size:.88em}
.scr--sync li:first-child{border-top:0}
.scr--sync li i{position:relative;width:1.15em;height:1.15em;border-radius:50%;background:#067647;border:1.5px solid #067647;
  transition:background .3s var(--ease),border-color .3s var(--ease);transition-delay:calc(var(--d,0s) + .35s)}
.scr--sync li i::after{content:"";position:absolute;left:.33em;top:.16em;width:.25em;height:.5em;border:solid #fff;border-width:0 .13em .13em 0;transform:rotate(45deg);
  transition:opacity .3s;transition-delay:calc(var(--d,0s) + .35s)}
.scr--sync li em{font-size:.85em;background:#ECFDF3;color:#067647;white-space:nowrap}

/* the one-time play is only set up by the script, so without it every screen is simply finished */
.scr--board span,.scr--sync li,.scr__btn{transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:var(--d,0s)}
.swc.wait .scr--board span,.swc.wait .scr--sync li,.swc.wait .scr__btn{opacity:0;transform:translateY(.5em)}
.swc.wait .scr--sync li i{background:#fff;border-color:var(--line-2)}
.swc.wait .scr--sync li i::after{opacity:0}

/* our software: the kind of software sits above the name */
.proj__kind{font-size:var(--t-label);font-weight:500;color:var(--mute);margin-bottom:6px}
#software .frame{background:#101010}
#software .frame img{object-fit:contain}

/* pricing: the four things that set the price, then one button */
.shead__p{margin-top:20px;font-size:var(--t-intro);line-height:1.55;max-width:var(--text)}
.shead__p + .shead__p{margin-top:12px}
.terms--top{margin-top:0}
.price__cta{margin-top:16px}

/* experience and questions share one section; a hairline separates it from the steps above */
.rule{border-top:1px solid var(--line)}
.qa__in{margin-top:var(--sec)}

/* ================================================================ automation page (2026-11-13)
   The hero is a light before and after on the Software page's switch. Everything else reuses the parts above:
   working-screen cards, project cards, terms, steps, FAQ, and the quote form in place of a closing call to action. */
@media (min-width:1001px){.hero--au .sw-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.flip--au .flip__stage{font-size:clamp(9px,2.55cqi,15px);padding:1.8em 1.4em 2.6em 1em}
.flip--au .flip__stage > *{align-self:center}
/* before: an inbox nobody has reached, a stack of invoices, missed calls, a sticky note */
.aub__inbox{position:relative;z-index:1;width:88%;background:#fff;border:1px solid var(--line-2);border-radius:.9em;overflow:hidden;
  box-shadow:0 2em 4em -2.2em rgba(0,0,0,.3);transform:rotate(-1deg)}
.aub__hd{display:flex;align-items:center;justify-content:space-between;padding:.75em 1em;background:#F5F5F4;border-bottom:1px solid var(--line)}
.aub__hd b{font-weight:600}
.aub__hd em,.aub__calls b{font-style:normal;font-weight:600;color:#B42318}
.aub__hd em{font-size:.85em;background:#FEF3F2;border-radius:99px;padding:.15em .7em}
.aub__inbox li{display:grid;grid-template-columns:6.2em minmax(0,1fr) auto;gap:.8em;align-items:baseline;padding:.65em 1em;border-top:1px solid #EFEFEF;font-size:.92em}
.aub__inbox li:first-child{border-top:0}
.aub__inbox li b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aub__inbox li span{color:#404040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aub__inbox li em{font-style:normal;font-size:.85em;color:var(--mute);white-space:nowrap}
.aub__pile{position:absolute;right:0;top:-1.6em;width:46%;height:6em;background:#fff;border:1px solid var(--line-2);border-radius:.6em;transform:rotate(4deg);
  box-shadow:.35em .35em 0 -.05em #fff,.35em .35em 0 0 var(--line-2),.7em .7em 0 -.05em #fff,.7em .7em 0 0 var(--line-2)}
.aub__pile span{display:block;padding:.55em .8em;font:500 .85em/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#525252}
.aub__calls{position:absolute;z-index:2;right:-.4em;bottom:-.6em;display:flex;align-items:center;gap:.7em;padding:.75em 1em;background:#fff;border:1px solid var(--line);
  border-radius:.8em;box-shadow:0 1.2em 2.4em -1.2em rgba(0,0,0,.35);transform:rotate(2deg)}
.aub__calls > span{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#FEF3F2;color:#D92D20}
.aub__calls div{display:grid;line-height:1.25}
.aub__calls small{font-size:.82em;color:var(--mute)}
.aub__note{left:-.2em;bottom:-2.4em;width:12em;z-index:2}
/* after: the AI assistant clears the same items, one at a time, every time it switches to After */
.aua{background:#fff;border:1px solid var(--line);border-radius:.9em;padding:1.1em;display:grid;gap:.9em;box-shadow:0 2.4em 4.8em -2.4em rgba(0,0,0,.3);
  opacity:0;transform:translateY(.8em) scale(.985)}
.flip.is-after .aua{opacity:1;transform:none}
.aua__hd{display:flex;align-items:center;gap:.7em}
.aua__hd > div{display:grid;line-height:1.2}
.aua__hd b{font-weight:600}
.aua__hd small{font-size:.82em;color:var(--mute)}
.aua__hd em{margin-left:auto;font-style:normal;font-weight:600;font-size:.82em;background:#ECFDF3;color:#067647;border-radius:99px;padding:.2em .75em;white-space:nowrap}
.aua__av{flex:none;display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#171717;color:#fff;font-size:.85em;font-weight:600;letter-spacing:.02em}
.aua__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em}
.aua__nums div{display:grid;gap:.1em;padding:.6em .75em;border:1px solid var(--line);border-radius:.6em;min-width:0}
.aua__nums small{font-size:.8em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aua__nums b{font-size:1.45em;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.aua__feed{display:grid}
.aua__feed li{display:flex;align-items:center;gap:.65em;padding:.55em .1em;border-top:1px solid var(--line);font-size:.92em;
  opacity:0;transform:translateY(.4em);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.aua__feed li:first-child{border-top:0}
.flip.is-after .aua__feed li{opacity:1;transform:none;transition-delay:calc(.45s + var(--i) * .3s)}
.aua__feed span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aua__feed i{position:relative;flex:none;width:1.25em;height:1.25em;border-radius:50%;background:#067647}
.aua__feed i::after{content:"";position:absolute;left:.44em;top:.22em;width:.3em;height:.58em;border:solid #fff;border-width:0 .14em .14em 0;transform:rotate(45deg)}
.aua__feed .hand{margin-top:.25em;padding:.55em .7em;border:0;border-radius:.6em;background:#F5F5F4}
.aua__feed .hand i{background:#171717}
.aua__feed .hand i::after{left:.37em;top:.24em;width:.5em;height:.5em;border:.13em solid #fff;border-radius:50%;transform:none}
.aua__feed em{margin-left:auto;font-style:normal;font-size:.8em;font-weight:600;color:var(--ink);white-space:nowrap}
/* what we automate: six cards like the Software page, each with a small screen that plays once.
   The screen is sized off both the width and the height of its box, so it always fits inside. */
.swc__kind{font-size:var(--t-label);font-weight:500;color:var(--mute);margin-bottom:8px}
.swc__art--au{container-type:size}
.swc__art--au .scr{font-size:clamp(9px,min(4cqi,5.9cqb),17px)}
.scr--au{gap:.5em;align-content:start}
.st{transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:var(--d,0s)}
.swc.wait .st{opacity:0;transform:translateY(.5em)}
/* chat bubbles: the AI is ink, people are gray */
.bub{justify-self:start;max-width:86%;padding:.45em .7em;border-radius:.75em;background:#F5F5F4;font-size:.8em;line-height:1.35}
.bub small{display:block;font-size:.78em;margin-bottom:.05em}
.bub--ai{justify-self:end;background:#171717;color:#fff}
.bub--ai small{color:#A3A3A3}
.done{justify-self:start;display:inline-flex;align-items:center;gap:.5em;padding:.3em .75em .3em .4em;border-radius:99px;background:#ECFDF3;color:#067647;font-size:.76em;font-weight:600;white-space:nowrap}
.done i{position:relative;flex:none;width:1.2em;height:1.2em;border-radius:50%;background:#067647}
.done i::after{content:"";position:absolute;left:.42em;top:.22em;width:.28em;height:.55em;border:solid #fff;border-width:0 .13em .13em 0;transform:rotate(45deg)}
/* calls */
.call__top{display:flex;align-items:center;gap:.6em}
.call__top > div{display:grid;line-height:1.2}
.call__ic{flex:none;display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:#171717;color:#fff;font-size:.95em}
.call__top em{margin-left:auto;white-space:nowrap}
/* leads */
.lead{display:grid;gap:.05em;padding:.5em .7em;border:1px solid var(--line);border-radius:.55em;background:#FAFAF9;line-height:1.25}
.lead span{font-size:.8em;color:#525252}
/* documents: a page is read top to bottom, and the details land on the right */
.scr--doc{grid-template-columns:minmax(0,8.5em) minmax(0,1fr);column-gap:.9em;align-items:start}
.doc{position:relative;overflow:hidden;display:grid;gap:.45em;padding:.7em;border:1px solid var(--line);border-radius:.4em;background:#fff;box-shadow:0 .6em 1.2em -.9em rgba(0,0,0,.25)}
.doc b{font-size:.72em;letter-spacing:.1em}
.doc small{margin-top:-.4em}
.doc i{height:.32em;border-radius:99px;background:#E5E5E5}
.doc i.s{width:62%}
.doc__tot{justify-self:end;font-size:.72em;font-weight:600}
.scan{position:absolute;left:0;right:0;top:-2em;height:2em;background:linear-gradient(rgba(23,23,23,0),rgba(23,23,23,.07));border-bottom:1.5px solid #171717;opacity:0;pointer-events:none}
.swc.play .scan{animation:scan 1.5s var(--ease) .1s both}
@keyframes scan{0%{top:-2em;opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.fields{display:grid}
.fields li{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;padding:.32em 0;border-bottom:1px solid var(--line);font-size:.82em;white-space:nowrap}
.fields small{font-size:.85em}
.scr--doc .done{grid-column:1 / -1;margin-top:.35em}
/* support chat */
.chat__top{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;padding-bottom:.45em;border-bottom:1px solid var(--line)}
.chat__top small{white-space:nowrap}
.cite{justify-self:end;margin-top:-.2em;font-size:.7em;color:var(--mute)}
.cite::before{content:"";display:inline-block;width:.6em;height:.75em;margin-right:.4em;border:1px solid currentColor;border-radius:.12em;vertical-align:-.08em}
.qchips{display:flex;flex-wrap:wrap;gap:.35em}
.qchips span{padding:.25em .7em;border:1px solid var(--line-2);border-radius:99px;font-size:.72em;color:#404040}
/* reporting */
.rep__top{display:grid;line-height:1.25}
.rep__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4em}
.rep__nums div{display:grid;gap:.05em;padding:.45em .55em;border:1px solid var(--line);border-radius:.5em;min-width:0}
.rep__nums small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep__nums b{font-size:1.1em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rep__bars{display:flex;align-items:flex-end;gap:.35em;height:3.4em;border-bottom:1px solid var(--line)}
.rep__bars i{flex:1;border-radius:.2em .2em 0 0;background:#D4D4D4;transform-origin:bottom;transition:transform .6s var(--ease);transition-delay:var(--d,0s)}
.rep__bars i:last-child{background:#171717}
.swc.wait .rep__bars i{transform:scaleY(0)}
.rep__note{font-size:.76em;color:#525252}
@media (prefers-reduced-motion:reduce){.scan{display:none}}
#built .frame{background:#101010}
#built .frame img{object-fit:contain}
.terms--3{grid-template-columns:repeat(3,1fr)}
.aq .qintro .big{font-size:clamp(34px,4vw,48px)}
.aq__call{margin-top:28px;font-size:16px;color:var(--mute)}
.aq__call .tel{margin-left:4px}
.qdone h3{font-size:28px;line-height:1.2}
/* automation tools used: the home page logo drift, with a name beside each logo, in the tools' own colors
   (Brennen picked color over gray, 2026-11-13) */
.tools__track{animation-duration:70s}
.tools__row{display:flex;align-items:center;gap:44px;padding-right:44px}
.tools__row li{flex:none;display:flex;align-items:center;gap:10px;height:52px;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.tools__row img{flex:none;width:26px;height:26px;max-width:none;object-fit:contain;border-radius:5px}
@media (max-width:640px){.tools__row{gap:32px;padding-right:32px}.tools__row li{font-size:15px;height:46px}.tools__row img{width:22px;height:22px}}

@media (max-width:1000px){
  .sw-hero{grid-template-columns:1fr;gap:48px}
  .sw-hero .flip{max-width:680px}
  .terms--3{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){.swcs--au{grid-template-columns:1fr;max-width:680px}}
@media (max-width:760px){
  .swcs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .flip__bar{flex-wrap:wrap;gap:10px 14px}
  .flip__stage{padding:2.4em .8em 2.8em .4em}
  .app{grid-template-columns:minmax(0,1fr)}
  .app__side{display:none}
  .app__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swc__art{padding:16px;aspect-ratio:4 / 3}
  .swc__txt{padding:24px 20px 28px}
  .swc h3{font-size:20px}
  .price__cta .btn{width:100%;justify-content:center}
  .terms--3{grid-template-columns:1fr}
  .flip--au .flip__stage{font-size:clamp(9px,2.75cqi,15px);padding:1.8em .6em 2.8em .3em}
  .aub__inbox{width:94%}
  .aub__inbox li{grid-template-columns:5em minmax(0,1fr) auto}
  .qform{min-width:0}
  .qsend{padding:0 16px;white-space:normal;text-align:center}
  .swc__art--au{aspect-ratio:5 / 4}
}

/* ================================================================ about page (2026-11-13, founder letter)
   Two-column hero with the big photo and no buttons, a thin credentials row, then the letter as the
   centerpiece: one centered reading column ending with Brennen's real signature. One plain quote request. */
.ab-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,104px);align-items:center}
.hero--about h1{font-size:clamp(44px,5.2vw,68px)}
.hero--about .intro{max-width:500px;text-wrap:pretty}
.ab-hero__pic{border-radius:var(--r);overflow:hidden;background:#0B0B0B;aspect-ratio:4 / 5}
.ab-hero__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.creds{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin-top:clamp(64px,7vw,96px)}
.creds li{border-top:1px solid var(--line);padding-top:24px;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.letter__in{max-width:680px;margin:0 auto}
.letter .label{margin-bottom:32px}
.letter__body{display:grid;gap:24px;font-size:18px;line-height:1.7;color:#404040;text-wrap:pretty}
.letter__body .ink{color:var(--ink)}
.sig{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:40px;font-size:16px}
.sig__img{width:180px;height:auto;margin:0 0 12px -6px}
.sig b{font-weight:500;color:var(--ink)}
.sig span{color:var(--mute)}
@media (max-width:900px){
  .ab-hero{grid-template-columns:1fr;gap:48px}
  .ab-hero__pic{max-width:480px}
}
@media (max-width:640px){
  .creds{grid-template-columns:1fr;margin-top:56px}
  .creds li{padding:16px 0;font-size:17px}
  .creds li:last-child{border-bottom:1px solid var(--line)}
  .letter__body{font-size:17px;gap:20px}
  .sig__img{width:160px}
  .terms--3{grid-template-columns:1fr}
}

/* ================================================================ services dropdown (2026-11-13)
   What We Do opens a panel with the four services on hover or keyboard focus. A transparent strip above the
   panel bridges the gap so the pointer can travel down without it closing. Phone menu lists them indented. */
.nav{align-items:center}
.nav a[aria-current="page"],.nav a.is-on,.nav .dd__top.is-on{color:var(--ink)}
.dd{position:relative}
.dd__top{display:inline-flex;align-items:center;gap:6px;height:64px}
.dd__chev{transition:transform .25s var(--ease);color:var(--mute)}
.dd__panel{position:absolute;top:100%;left:-24px;padding-top:4px;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s}
.dd:hover .dd__panel,.dd:focus-within .dd__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd:hover .dd__chev,.dd:focus-within .dd__chev{transform:rotate(180deg)}
.dd__in{width:560px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -8px rgba(0,0,0,.12)}
.dd__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nav .dd__item{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:8px;transition:background .15s}
.nav .dd__item:hover,.nav .dd__item:focus-visible{background:var(--bg-2)}
.dd__item b{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.dd__item span{font-size:14px;line-height:1.45;color:var(--mute)}
.nav .dd__all{display:flex;align-items:center;gap:6px;margin-top:6px;padding:14px 16px 10px;border-top:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--ink)}
.dd__all:hover .arr{transform:translateX(4px)}
@media (max-width:900px){
  .mnav nav a.sub{padding:10px 0 10px 16px;font-size:16px;color:var(--body);border-bottom:0}
  .mnav nav a.sub:last-of-type{border-bottom:1px solid var(--line);padding-bottom:16px}
  .mnav nav a[aria-current="page"]{font-weight:500;color:var(--ink)}
}

/* ================================================================ what we do page (2026-11-13)
   Hero with a four-service index, then one section per service: words and what's included on the left,
   one real project card on the right that opens its case study. Sections alternate white and tint. */
.wwd-idx{margin-top:clamp(64px,7vw,96px)}
.wwd-idx ul{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px}
.wwd-idx a{display:flex;flex-direction:column;gap:6px;height:100%;padding:24px 0 8px;border-top:1px solid var(--line);transition:border-color .2s var(--ease)}
.wwd-idx a:hover{border-top-color:var(--ink)}
.wwd-idx__n{font-size:var(--t-label);color:var(--mute);font-variant-numeric:tabular-nums;margin-bottom:6px}
.wwd-idx b{font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.wwd-idx span:not(.wwd-idx__n){font-size:15px;line-height:1.5;color:var(--mute)}
.hero--wwd{padding-bottom:var(--sec)}
.hero--wwd + .wsvc.tint{border-top:1px solid var(--line)}
.dd--shut .dd__panel{opacity:0!important;visibility:hidden!important}
.dd--shut .dd__chev{transform:none!important}
.wsvc__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,6vw,96px);align-items:center}
.wsvc .label{display:flex;gap:12px}
.wsvc__n{color:var(--tone);font-variant-numeric:tabular-nums}
.wsvc h2{max-width:520px}
.wsvc__p{margin-top:20px;font-size:var(--t-intro);line-height:1.55;max-width:520px}
.wsvc__h{margin-top:40px;font-size:var(--t-label);font-weight:500;color:var(--mute)}
.wsvc__list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:12px;border-bottom:1px solid var(--line)}
.wsvc__list li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.wsvc .ctas{margin-top:40px;gap:28px}
.wsvc__work .proj{max-width:620px;margin-left:auto}
.wsvc__work .frame{aspect-ratio:16 / 10}
@media (max-width:900px){
  .wwd-idx ul{grid-template-columns:1fr 1fr;row-gap:16px}
  .wsvc__in{grid-template-columns:1fr;gap:48px}
  .wsvc__work .proj{max-width:560px;margin-left:0}
}
@media (max-width:640px){
  .wwd-idx{margin-top:56px}
  .wwd-idx ul{grid-template-columns:1fr;row-gap:0}
  .wwd-idx a{flex-direction:row;align-items:baseline;gap:12px;padding:16px 0}
  .wwd-idx span:not(.wwd-idx__n){display:none}
  .wwd-idx b{font-size:18px}
  .wwd-idx__n{margin:0}
  .wsvc__list{grid-template-columns:1fr}
  .wsvc .ctas{flex-direction:column;align-items:stretch;gap:20px}
  .wsvc .ctas .more{align-self:center}
}

/* ================================================================ marketing page (2026-11-13, marketing.py)
   Hero picture: four steps of the story, one small working screen each, on the Software page's switch.
   Then four service groups on hairlines (the What We Do lists), a short text section, four equal project
   cards, steps, two price cards, FAQ, and the quote form. Drawing colors stay inside the drawing. */
.mkd{container-type:inline-size;min-width:0}
.mkd .flip__seg button{position:relative}
.mkd.is-auto .flip__seg [aria-pressed="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:1.5px;border-radius:2px;
  background:rgba(255,255,255,.55);transform-origin:left;animation:mkt 4.2s linear both}
@keyframes mkt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mkd__cap{display:grid;font-size:var(--t-small);color:var(--mute);min-width:0}
.mkd__cap span{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.mkd__cap span.is-on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.mkd__stage{display:grid;place-items:center;padding:2em 1.8em;font-size:clamp(11px,3.1cqi,16px);line-height:1.35;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.mkd__p{grid-area:1 / 1;width:100%;max-width:26em;opacity:0;visibility:hidden;transform:translateY(.4em);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.mkd__p.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mkd .scr{font-size:1em;max-width:none;align-content:start;gap:.6em}
.mkd em{font-style:normal}
.mkd__p .st{opacity:0;transform:translateY(.45em);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mkd__p.is-on .st{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .14s)}
.mkd__hd{display:grid;gap:.1em;line-height:1.25}
.mkd__hd b{font-size:1.06em;letter-spacing:-.01em}
.mkd .fields li{font-size:.84em}
/* brand */
.mkb__logo{display:flex;align-items:center;gap:.65em;padding:.85em .9em;border-radius:.55em;background:#1C2B3A;color:#fff}
.mkb__mark{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.45em;background:#E0662B;font-size:1.05em}
.mkb__logo b{font-size:1.2em;letter-spacing:-.02em;line-height:1.1}
.mkb__row{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.1em .1em}
.mkb__sw{display:flex;gap:.4em}
.mkb__sw i{width:1.7em;height:1.7em;border-radius:50%;border:1px solid var(--line)}
.mkb__aa{font-size:1.6em;font-weight:600;letter-spacing:-.03em;line-height:1}
/* reach */
.mks__bar{display:flex;align-items:center;gap:.55em;height:2.3em;padding:0 .9em;border:1px solid var(--line-2);border-radius:99px;font-size:.88em;color:#404040}
.mks__ad,.mks__gbp{display:grid;gap:.15em;padding:.6em .75em;border:1px solid var(--line);border-radius:.55em;line-height:1.3}
.mks__ad small{font-size:.7em;font-weight:600;color:var(--ink)}
.mks__ad b,.mks__gbp b{font-size:.9em}
.mks__ad span,.mks__gbp span{font-size:.76em;color:#525252}
.mks__gbp em{color:#D99A00;letter-spacing:.05em}
.mks__btns{display:flex;gap:.35em;margin-top:.35em}
.mks__btns i{font-style:normal;font-size:.72em;padding:.2em .75em;border:1px solid var(--line-2);border-radius:99px;color:#404040}
/* leads */
.mkl__hd{grid-template-columns:1fr auto;align-items:center}
.mkl__hd > div{display:grid}
.mkl__hd em{font-size:1.5em;font-weight:600;letter-spacing:-.02em}
.mkl li{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.5em 0;border-top:1px solid var(--line)}
.mkl li div{display:grid;line-height:1.25;min-width:0}
.mkl b{font-size:.88em}
.mkl small{font-size:.72em}
.mkl em{font-size:.7em;padding:.2em .6em;border-radius:99px;background:#F5F5F4;color:#404040;white-space:nowrap}
.mkd .done{margin-top:.2em}
/* what we do: four full-width rows on hairlines. Number, service, one sentence. Nothing else. */
.mkrows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.mkrows li{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);column-gap:32px;align-items:baseline;
  padding:36px 0;border-top:1px solid var(--line)}
.mkrow__n{font-size:var(--t-label);font-weight:500;color:var(--tone);font-variant-numeric:tabular-nums}
.mkrows h3{font-size:var(--t-h3)}
.mkrows p{font-size:17px;line-height:1.6;max-width:560px}
/* pricing: what the monthly work includes, then third-party costs kept apart */
.mkp__inc{margin-top:20px;border-top:1px solid var(--line)}
.prices .mkp__inc li{padding:10px 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:15px;line-height:1.5;color:var(--ink)}
.prices .mkp__inc li:last-child{border-bottom:0;padding-bottom:0}
.mkp__third{margin-top:24px;max-width:var(--text);font-size:15px;line-height:1.6;color:var(--mute)}
.m-marketing .price__cta{margin-top:32px}
@media (max-width:900px){
  .mkrows li{grid-template-columns:48px minmax(0,1fr);row-gap:8px}
  .mkrows p{grid-column:2}
}
@media (max-width:640px){
  .mkrows li{grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:28px 0}
  .mkrows p{font-size:16px}
  .mkd__stage{padding:1.8em 1.2em}
}

/* ================================================================ insights, the blog (2026-11-13, insights.py)
   Index and topic pages are a typographic list. Articles are one centered 720px reading column with the
   short answer on top and the contents list in the left margin on wide screens. */
.hero--ins .label a{color:var(--mute);transition:color .15s}
.hero--ins .label a:hover{color:var(--ink)}
.ins-tabs{margin-top:clamp(48px,6vw,72px);border-bottom:1px solid var(--line)}
.ins-tabs ul{display:flex;gap:32px;overflow-x:auto;scrollbar-width:none}
.ins-tabs ul::-webkit-scrollbar{display:none}
.ins-tabs a{display:inline-flex;align-items:baseline;gap:6px;padding:0 0 16px;margin-bottom:-1px;border-bottom:1.5px solid transparent;
  font-size:15px;color:var(--body);white-space:nowrap;transition:color .15s,border-color .2s}
.ins-tabs a:hover{color:var(--ink)}
.ins-tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.ins-tabs small{font-size:12px;color:var(--tone);font-variant-numeric:tabular-nums}
.ins-list{padding-top:0}
.post-row a{display:grid;grid-template-columns:180px minmax(0,1fr) 32px;gap:40px;align-items:baseline;padding:40px 0;border-bottom:1px solid var(--line)}
.post-row__meta{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--mute)}
.post-row__meta .c{color:var(--ink);font-weight:500}
.post-row h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.025em}
.post-row__txt p{margin-top:10px;max-width:660px;font-size:16px;line-height:1.6}
.post-row__go{justify-self:end;font-size:18px;color:var(--tone);transition:transform .25s var(--ease),color .2s}
.post-row a:hover .post-row__go{color:var(--ink);transform:translateX(4px)}

/* article */
.post-hero{padding:clamp(56px,7vw,96px) 0 0}
/* title and body share one grid: a 232px contents column, then the 720px reading column */
.post-hero__in,.post-grid{display:grid;grid-template-columns:232px minmax(0,720px);column-gap:72px;justify-content:center}
.post-head{grid-column:2}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;font-size:var(--t-label);font-weight:500;color:var(--mute)}
.crumbs a{transition:color .15s}
.crumbs a:hover{color:var(--ink)}
.post-hero h1{font-size:clamp(36px,4.6vw,54px);line-height:1.07;letter-spacing:-.04em}
.post-dek{margin-top:24px;font-size:20px;line-height:1.5;color:var(--body);letter-spacing:-.005em;text-wrap:pretty}
.byline{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.byline p{display:flex;flex-direction:column}
.byline a{font-weight:500;color:var(--ink)}
.byline span{color:var(--mute)}
.byline .byline__when{margin-left:auto;flex-direction:row;flex-wrap:wrap;gap:0 6px;color:var(--mute);text-align:right;justify-content:flex-end}
.byline__when span::before{content:"\00B7";margin-right:6px}
.post-main{padding-top:56px}
.post-col{grid-column:2;grid-row:1;min-width:0}
.toc{grid-column:1;grid-row:1;align-self:start;position:sticky;top:96px}
.toc summary{list-style:none;margin-bottom:16px;font-size:var(--t-label);font-weight:500;color:var(--mute);pointer-events:none}
.toc summary::-webkit-details-marker{display:none}
.toc ol{display:grid;gap:2px;border-left:1px solid var(--line);list-style:none}
.toc a{display:block;margin-left:-1px;padding:5px 0 5px 16px;border-left:1px solid transparent;font-size:14px;line-height:1.4;color:var(--mute);
  transition:color .15s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.is-on{color:var(--ink);border-left-color:var(--ink)}
.answer{margin-bottom:56px;padding:24px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.answer__label{margin-bottom:8px;font-size:var(--t-label);font-weight:500;color:var(--mute)}
.answer p:last-child{font-size:18px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.prose{font-size:18px;line-height:1.75;color:#404040;text-wrap:pretty}
.prose > * + *{margin-top:24px}
.prose h2{margin-top:72px;font-size:clamp(26px,2.6vw,32px);line-height:1.18;letter-spacing:-.03em;scroll-margin-top:96px}
.prose h3{margin-top:44px;font-size:21px;line-height:1.35;letter-spacing:-.018em;scroll-margin-top:96px}
.prose > h2:first-child{margin-top:0}
.prose h2 + *,.prose h3 + *{margin-top:16px}
.prose strong{font-weight:500;color:var(--ink)}
.prose a,.post-faq a,.author a,.answer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;
  text-underline-offset:3px;transition:text-decoration-color .2s}
.prose a:hover,.post-faq a:hover,.author a:hover,.answer a:hover{text-decoration-color:var(--ink)}
.prose ul,.prose ol,.takeaways ul{display:grid;gap:12px;list-style:none}
.prose ul li,.takeaways li{position:relative;padding-left:26px}
.prose ul li::before,.takeaways li::before{content:"";position:absolute;left:4px;top:.85em;width:8px;height:1.5px;background:var(--ink)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:40px;counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.15em;font-size:14px;font-weight:500;line-height:1.75;
  color:var(--tone);font-variant-numeric:tabular-nums}
.note{padding:4px 0 4px 24px;border-left:2px solid var(--ink)}
.note p{font-size:19px;line-height:1.6;color:var(--ink);letter-spacing:-.005em}
.prose .tbl{margin-top:32px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl table{width:100%;min-width:540px;border-collapse:collapse;font-size:15px;line-height:1.55}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--bg-2);font-size:var(--t-label);font-weight:500;color:var(--mute)}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl tbody tr:last-child > *{border-bottom:0}
.takeaways{margin-top:72px;padding:32px;border:1px solid var(--line);border-radius:var(--r)}
.takeaways h2{margin-bottom:20px;font-size:20px;line-height:1.3;letter-spacing:-.015em}
.takeaways li{font-size:17px;line-height:1.6;color:#404040}
.post-faq{margin-top:80px}
.post-faq > h2{margin-bottom:8px;font-size:clamp(26px,2.6vw,32px);line-height:1.18;letter-spacing:-.03em;scroll-margin-top:96px}
.post-faq__q{padding:28px 0;border-bottom:1px solid var(--line)}
.post-faq h3{font-size:19px;line-height:1.4;letter-spacing:-.012em}
.post-faq__q p{margin-top:10px;font-size:17px;line-height:1.7;color:#404040}
.author{display:flex;align-items:flex-start;gap:20px;margin-top:72px;padding:28px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.author img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover}
.author__name{margin-bottom:6px;font-weight:500;color:var(--ink)}
.author p:last-child{font-size:15px;line-height:1.6}
.rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rel__grid a{display:flex;flex-direction:column;height:100%;padding:28px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s var(--ease)}
.rel__grid a:hover{border-color:var(--line-2)}
.rel__cat{margin-bottom:16px;font-size:var(--t-label);font-weight:500;color:var(--mute)}
.rel__grid h3{font-size:20px;line-height:1.3;letter-spacing:-.015em}
.rel__grid p:not(.rel__cat){margin:12px 0 28px;font-size:15px;line-height:1.6}
.rel__grid .more{margin-top:auto;align-self:flex-start}
.rel__grid a:hover .more::after{transform:scaleX(1)}
.rel__grid a:hover .arr{transform:translateX(4px)}
@media (max-width:1240px){
  .post-hero__in,.post-grid{grid-template-columns:minmax(0,720px)}
  .post-head,.post-col{grid-column:1}
  .post-col{grid-row:2}
  .toc{grid-row:1;position:static;margin-bottom:40px}
  .toc__box{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
  .toc summary{display:flex;justify-content:space-between;align-items:center;margin:0;pointer-events:auto;cursor:pointer;font-size:15px;color:var(--ink)}
  .toc summary::after{content:"+";font-size:18px;font-weight:400;line-height:1;color:var(--mute)}
  .toc__box[open] summary{margin-bottom:16px}
  .toc__box[open] summary::after{content:"\2212"}
}
@media (max-width:900px){
  .post-row a{grid-template-columns:120px minmax(0,1fr) 24px;gap:24px}
  .rel__grid{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:640px){
  .post-row a{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .post-row__meta{flex-direction:row;gap:12px}
  .post-row__go{display:none}
  .post-dek{font-size:18px}
  .byline{flex-wrap:wrap}
  .byline .byline__when{width:100%;margin-left:0;justify-content:flex-start;text-align:left}
  .post-main{padding-top:40px}
  .answer{padding:20px;margin-bottom:40px}
  .answer p:last-child{font-size:17px}
  .prose{font-size:17px}
  .prose h2{margin-top:56px}
  .note p{font-size:17px}
  .takeaways{padding:24px 20px;margin-top:56px}
  .post-faq{margin-top:64px}
  .author{flex-direction:column;padding:24px 20px}
}

/* ---------------------------------------------------------------- pricing page (pricing.py)
   The Clear pricing rows in Minimal type: service, what it is, price, on hairlines under one ink rule.
   A row's add-on (website hosting, ongoing marketing) sits right under it at the same sizes, joined by a dashed line. */
.hero--price .intro{max-width:640px}
.ptable{padding-top:72px}
.prows{border-top:1px solid var(--ink)}
.prow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:32px;align-items:baseline;padding:40px 0;border-bottom:1px solid var(--line)}
.prow:has(+ .prow--sub){border-bottom-style:dashed}
.prow__name{font-size:clamp(26px,2.6vw,32px);line-height:1.15;letter-spacing:-.03em}
.prow__name a{transition:color .15s}
.prow__name a:hover{color:var(--body)}
.prow__say{font-size:var(--t-body);line-height:1.6;max-width:480px}
.prow__price{text-align:right}
.prow__price b{display:block;font-size:clamp(26px,2.6vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.prow__price span{display:block;margin-top:8px;font-size:var(--t-small);color:var(--mute)}
.steps--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){
  .prow{grid-template-columns:1fr;gap:12px;padding:32px 0}
  .prow__price{text-align:left;order:1}
  .prow__say{order:2}
  .prow__price span{margin-top:4px}
}
@media (max-width:1000px){.steps--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps--3{grid-template-columns:1fr}.ptable{padding-top:56px}}

/* ================================================================ our work page (2026-11-13, work.py)
   The portfolio: the Insights tabs as filters, then one wall of pictures at their own shape. The script deals the
   cards into the shortest of three columns; without it the wall is plain CSS columns. Each card opens the case pop-up. */
.hero--wk{padding-bottom:0}
.hero--wk h1{font-size:clamp(40px,5vw,64px);line-height:1.05}
.wk-bar{position:relative;margin-top:clamp(48px,6vw,72px)}
.wk-tabs{margin-top:0}
.wk-tabs button{display:inline-flex;align-items:baseline;gap:6px;padding:0 0 16px;margin-bottom:-1px;background:none;border:0;border-bottom:1.5px solid transparent;
  border-radius:0;font-size:15px;font-weight:500;color:var(--mute);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.wk-tabs button:hover{color:var(--ink)}
.wk-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.wk-tabs small{font-size:12px;color:var(--tone);font-variant-numeric:tabular-nums}
.wk-count{position:absolute;right:0;top:0;font-size:var(--t-small);color:var(--mute);font-variant-numeric:tabular-nums}
.wkw{padding-top:48px}

.wall{columns:3;column-gap:24px}
.wall.is-laid{display:flex;align-items:flex-start;gap:24px;columns:auto}
.wk-col{flex:1 1 0;min-width:0;display:grid;gap:40px}
.wall:not(.is-laid) .wk{break-inside:avoid;margin-bottom:40px}
.wall.is-swap .wk-col{animation:wkIn .5s var(--ease)}
@keyframes wkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wk{position:relative;cursor:pointer}
.wk__pic{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);transition:border-color .2s}
.wk__pic img{width:100%;height:auto;transition:transform .6s var(--ease)}
.wk:hover .wk__pic{border-color:var(--line-2)}
.wk:hover .wk__pic img{transform:scale(1.02)}
.wk__txt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:14px}
.wk__txt h3{font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.wk__txt p{font-size:var(--t-small);color:var(--mute);text-align:right;line-height:1.4}
.wk:has(.proj__btn:focus-visible) .wk__pic{outline:2px solid var(--ink);outline-offset:3px}

/* the pop-up: what it is under the name, then the client's story if we have one, then two ways forward */
.wk-what{margin-top:8px;font-size:17px;color:var(--mute)}
.case--wk .case__story{margin-top:24px}
.wk-go{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}

@media (max-width:1000px){.wall{columns:2}}
@media (max-width:640px){
  .wk-bar{margin-top:40px}
  .wk-count{position:static;margin-top:16px}
  .wk-col{gap:32px}
  .wkw{padding-top:32px}
}
@media (max-width:560px){.wall{columns:1}}
@media (prefers-reduced-motion:reduce){.wall.is-swap .wk-col{animation:none}.wk:hover .wk__pic img{transform:none}}
.cred--logos .logos{margin-top:0}   /* marketing hero: logo strip only, no stats row */

/* ================================================================ websites hero (2026-11-13)
   Before and after on the Software page's switch. Before, an old small-business site: dated, not secure, slow,
   tiny on a phone. After, the same business on a fast, clean site with a phone version and a lead coming in.
   Red, green, and amber live only inside the drawing, like the Software screens. */
.flip--web .flip__stage{font-size:clamp(8px,2.05cqi,14px);padding:2em 2.6em 3em 1em}
.flip--web .flip__stage > *{align-self:center}
.wb,.wa{position:relative}
.bw{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:.9em;overflow:hidden;box-shadow:0 2em 4em -2.2em rgba(0,0,0,.3)}
.bw__bar{display:flex;align-items:center;gap:.4em;padding:.6em .8em;background:#F5F5F4;border-bottom:1px solid var(--line)}
.bw__bar > i{flex:none;width:.65em;height:.65em;border-radius:50%;background:#D4D4D4}
.bw__url{flex:1;min-width:0;display:flex;align-items:center;gap:.45em;margin-left:.6em;padding:.25em .75em;background:#fff;border:1px solid var(--line);
  border-radius:99px;font-size:.82em;color:#525252;white-space:nowrap;overflow:hidden}
.bw__url em{font-style:normal;font-weight:600;color:#B42318}
.bw__url svg{color:#067647}
/* before: the old site */
.wb .bw{transform:rotate(-1deg)}
.wb__pg{padding:.9em 1em 1em;background:#F4F1E4;font-family:"Times New Roman",Times,serif;color:#222}
.wb__nav{font-size:.92em;color:#666}
.wb__nav u{color:#1A0DAB}
.wb__ban{margin-top:.55em;padding:.45em .5em;text-align:center;font-size:1.55em;font-weight:700;font-style:italic;color:#8A1C1C;
  background:linear-gradient(#FFF8C9,#EEDC7E);border:.18em ridge #C8B25A}
.wb__row{display:grid;grid-template-columns:10em minmax(0,1fr);gap:.9em;margin-top:.8em}
.wb__img{aspect-ratio:4 / 3;display:grid;place-items:center;border:1px dashed #9A9A9A;background:#E6E2D3}
.wb__img span{font:.72em/1.2 Arial,sans-serif;color:#777;text-align:center;padding:0 .5em}
.wb__img span::before{content:"";display:block;width:1.6em;height:1.3em;margin:0 auto .4em;border:.14em solid #A3A3A3;border-radius:.15em;
  background:linear-gradient(135deg,transparent 45%,#A3A3A3 45% 55%,transparent 55%)}
.wb__txt p{margin:0 0 .45em;font-size:.88em;line-height:1.3}
.wb__txt i,.wph__in > i{display:block;height:.42em;margin-top:.42em;background:#D3CEBB;border-radius:1px}
.wb__txt i:nth-of-type(2n){width:86%}
.wb__txt i:last-child{width:60%}
.wb__ft{display:flex;justify-content:space-between;gap:1em;margin-top:.8em;font-size:.72em;color:#777;white-space:nowrap}
.wb__note{left:-.2em;bottom:-2.6em;width:12.5em}
/* page speed card, red before and green after */
.wspd{position:absolute;z-index:2;right:-1.8em;top:-1.4em;display:grid;gap:.1em;min-width:8.5em;padding:.65em .85em;background:#fff;border:1px solid var(--line);
  border-radius:.7em;box-shadow:0 1.2em 2.4em -1.2em rgba(0,0,0,.35)}
.wspd small{font-size:.8em;color:var(--mute)}
.wspd b{font-size:1.45em;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.wspd span{height:.32em;margin-top:.35em;border-radius:99px;background:#EDEDED;overflow:hidden}
.wspd span i{display:block;height:100%;border-radius:inherit}
.wspd--bad{rotate:2deg}
.wspd--bad b{color:#B42318}
.wspd--bad span i{width:88%;background:#D92D20}
.wspd--ok b{color:#067647}
.wspd--ok span i{width:14%;background:#12B76A}
/* phones: the old site squeezed down, then the new one built for the screen */
.wph{position:absolute;z-index:2;right:-2.4em;bottom:-2.4em;width:7.6em;padding:.45em;background:#171717;border-radius:1.2em;box-shadow:0 1.4em 2.6em -1.2em rgba(0,0,0,.45)}
.wph__in{height:12.5em;overflow:hidden;border-radius:.8em;background:#fff;padding:.7em .6em}
.wph--old{rotate:3deg}
.wph--old .wph__in{background:#F4F1E4;font-family:"Times New Roman",Times,serif}
.wph--old .wb__ban{margin:0;font-size:.6em;padding:.3em}
.wph--old .wph__in > i{height:.22em;margin-top:.3em}
.wph--old em{position:absolute;left:50%;bottom:-1.1em;translate:-50% 0;font-style:normal;font-size:.75em;font-weight:600;white-space:nowrap;
  color:#B42318;background:#FEF3F2;border:1px solid #FECDCA;border-radius:99px;padding:.2em .7em}
.wph .mk__logo{font-size:.72em}
.wph strong{display:block;margin:.7em 0 .35em;font-size:1.05em;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.wph .wstars{font-size:.7em}
.wph__btn{display:block;margin-top:.45em;padding:.45em;border-radius:.45em;background:#171717;color:#fff;font-size:.68em;font-weight:600;text-align:center}
.wph__btn.q{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
/* after: the new site */
.wa{opacity:0;transform:translateY(.8em) scale(.985)}
.flip.is-after .wa{opacity:1;transform:none}
.wa__nav{display:flex;align-items:center;gap:1.1em;padding:.75em 1.1em;border-bottom:1px solid var(--line);font-size:.85em;color:#525252;white-space:nowrap}
.wa__nav .mk__logo{margin-right:auto;font-size:1.08em}
.wa__cta{padding:.35em .8em;border-radius:.45em;background:#171717;color:#fff;font-weight:600}
.wa__hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.2em;align-items:center;padding:1.3em 1.1em 1.1em}
.wstars{color:#F59E0B;letter-spacing:.06em}
.wa__rev{display:flex;align-items:center;gap:.45em;font-size:.8em;color:#525252;white-space:nowrap}
.wa__hero strong{display:block;margin-top:.45em;font-size:2em;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.wa__p{margin-top:.55em;font-size:.84em;line-height:1.4;color:#525252}
.wa__btns{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.95em}
.wa__btns span{padding:.5em .85em;border-radius:.5em;background:#171717;color:#fff;font-size:.8em;font-weight:600;white-space:nowrap}
.wa__btns .q{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.wa__pic{aspect-ratio:5 / 4;border-radius:.7em;overflow:hidden}
.wa__pic svg{display:block;width:100%;height:100%}
.wa__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em;padding:0 1.1em 1.1em}
.wa__tiles div{display:grid;gap:.1em;padding:.6em .75em;border:1px solid var(--line);border-radius:.55em;min-width:0}
.wa__tiles b{font-size:.88em;font-weight:600;white-space:nowrap}
.wa__tiles small{font-size:.76em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the speed card, phone, and new lead arrive one after another each time it switches to After */
.wpop{opacity:0;translate:0 .6em;scale:.96;transition:opacity .4s var(--ease),translate .45s var(--ease),scale .45s var(--ease)}
.flip.is-after .wpop{opacity:1;translate:0 0;scale:1;transition-delay:calc(.6s + var(--i) * .35s)}
.wa .wph{rotate:-2deg}
.wlead{position:absolute;z-index:3;left:-.6em;bottom:-2.4em;display:flex;align-items:center;gap:.7em;padding:.7em 1em;background:#fff;border:1px solid var(--line);
  border-radius:.8em;box-shadow:0 1.2em 2.4em -1.2em rgba(0,0,0,.35)}
.wlead div{display:grid;line-height:1.25}
.wlead small{font-size:.8em;color:var(--mute)}
.wlead b{font-weight:600;white-space:nowrap}
.wlead__dot{flex:none;position:relative;width:.7em;height:.7em;border-radius:50%;background:#12B76A;box-shadow:0 0 0 .3em #ECFDF3}
@media (max-width:640px){
  .flip--web .flip__stage{padding:2em 1.8em 3.2em .4em}
  .wph{right:-1.4em;width:6.4em}
  .wph__in{height:10.5em}
}

/* ================================================================ contact page (2026-11-13, contact.py, Brennen's mockup)
   Dead simple: words, phone and email on the left; a four-field message form on the right. */
.clines{display:grid;gap:20px;margin-top:40px}
.cline__k{font-size:var(--t-label);font-weight:500;color:var(--mute);margin-bottom:4px}
.cline__v{font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.cline__v:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cquote{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);display:grid;justify-items:start;gap:8px;font-size:var(--t-small);color:var(--body)}
.qform__h{font-size:20px;letter-spacing:-.015em}
.csend{width:100%;justify-content:center}
@media (max-width:1000px){.clines{margin-top:32px}.cquote{margin-top:32px;padding-top:24px}}