/* dist/style.css */
@font-face{font-family:Ranade;src:url('/fonts/ranade-latin-wght-normal.woff2') format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 1000;font-display:swap}:root{color-scheme:only light;--paper:#f2f4f7;--paper-2:#e3e7ed;--ink:#111;--muted:#565c66;--line:#bfc4cd;--blue:#7f9bff;--teal:#3fb8af;--orange:#f0a04b;--green:#8fcb18;--mark:#3fb8af;--g:clamp(16px,2.6vw,40px);--display:Ranade,Arial,sans-serif;--body:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:1.1;text-wrap:balance}h2{font-size:clamp(32px,4.2vw,58px)}h3{font-size:26px}p,li{text-wrap:pretty}em{font-family:inherit;font-style:normal;font-weight:inherit}a{color:inherit;text-underline-offset:4px}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{border:0}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px #11111120}::selection{color:var(--paper);background:var(--ink)}.button::selection,.button *::selection,.nav-contact::selection,.nav-contact *::selection{color:var(--ink);background:var(--paper)}[hidden]{display:none!important}svg{display:block}.wrap{max-width:1440px;width:100%;padding-inline:var(--g);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px}.skip-link:focus{top:10px}.eyebrow{font-size:12px;font-weight:650;letter-spacing:.08em;line-height:1.4}.eyebrow{display:none}.header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;width:100%;height:78px;padding:8px max(var(--g),calc((100vw - 1360px)/2));background:var(--paper);border-bottom:1.5px solid var(--ink)}.brand{position:relative;display:block;font:700 35px/.95 var(--display);letter-spacing:-.075em;text-decoration:none;white-space:nowrap}.brand-dot{color:var(--mark)}.desktop-nav{display:flex;align-items:center;gap:26px;margin-left:auto}.desktop-nav a{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:15px;font-weight:650;text-decoration:none}.desktop-nav a:before{content:'';width:9px;height:9px;background:var(--blue);border:1px solid #11111140}.desktop-nav a:nth-child(2):before{background:var(--teal)}.desktop-nav a:nth-child(3):before{background:var(--orange)}.desktop-nav a{background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange)) no-repeat left bottom 9px/0 2px;background-origin:content-box;transition:background-size .35s cubic-bezier(.3,.7,.3,1)}
.desktop-nav a:hover,.desktop-nav a:focus-visible{background-size:100% 2px}
@media(prefers-reduced-motion:reduce){.desktop-nav a{transition:none}}.marker{position:relative;display:inline-block;isolation:isolate;white-space:nowrap}.marker:after{content:'';position:absolute;z-index:-1;left:-.03em;right:-.03em;bottom:.06em;height:.13em;border-radius:.1em;background:var(--blue)}.marker-green:after{background:var(--green)}.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:46px;padding:12px 21px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;transition:background .16s,transform .16s}.button span{font-size:19px;line-height:1;font-weight:500}.button:hover{background:var(--ink)}.button:active{transform:scale(.98)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.section-heading>p{font-size:15px;line-height:1.6;color:#3f444d}.tax-control{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;padding:3px;gap:2px}.tax-control button{min-height:32px;padding:6px 14px;border-radius:999px;background:transparent;font-size:12px;font-weight:650}.tax-control button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.faq-section{display:grid;grid-template-columns:.65fr 1.35fr;gap:65px;}.faq-intro h2{font-size:clamp(34px,4vw,56px)}.faq-intro>p:not(.eyebrow){font-size:15px;color:var(--muted);margin-top:20px}.faq-list details{border-bottom:1px solid var(--line);scroll-margin-top:100px}.faq-list details:first-child summary{padding-top:0;min-height:58px}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:75px;padding-block:20px;list-style:none;cursor:pointer;font-size:16px;font-weight:650;line-height:1.5}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:26px;font-weight:400;line-height:1;transition:transform .16s}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details>div{padding:0 35px 22px 0;font-size:14px;line-height:1.8;color:#3f444d}.faq-list details>div>p+p{margin-top:12px}.faq-list details>div>ul{margin:12px 0 0;padding-left:20px}.faq-list details>div>ul li{margin-top:7px}.faq-list details>div>ul+p{margin-top:12px}.faq-list summary:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}.legal-main{max-width:900px;padding-top:55px;padding-bottom:65px}.legal-main .eyebrow{display:block;font-size:11px;color:var(--muted);letter-spacing:.05em}.legal-main h1{font-size:clamp(40px,5vw,66px);margin:20px 0 28px}.legal-main h2{font-size:27px;letter-spacing:-.035em;line-height:1.2;margin:35px 0 15px}.legal-main p,.legal-main li{font-size:16px;line-height:1.85;color:#3f444d}.legal-main p+p{margin-top:15px}.back-link{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;font-size:15px;font-weight:650}
@media(min-width:1500px){.header{padding-inline:max(var(--g),calc((100vw - 1360px)/2))}}
@media(max-width:1100px){.desktop-nav{gap:18px}.desktop-nav a{font-size:14px}.faq-section{gap:40px}}
@media(max-width:850px){.header{height:72px;gap:18px}.desktop-nav{gap:16px}.desktop-nav a{font-size:12px;gap:7px}.desktop-nav a:before{width:8px;height:8px}.brand{font-size:31px}.section-heading>p{font-size:13px}.faq-section{grid-template-columns:.6fr 1.4fr;gap:30px}.faq-list summary{font-size:14px}}
@media(max-width:620px){html{scroll-padding-top:86px}.header{height:70px;gap:12px}.brand{font-size:30px}.desktop-nav{display:none}.section-heading{display:block;margin-bottom:22px}.section-heading h2{font-size:34px;line-height:1.08}.section-heading>p{display:none}.tax-control button{font-size:11px;padding:6px 11px;min-height:31px}.tax-control{padding:2px}.faq-section{grid-template-columns:1fr;gap:22px;}.faq-intro h2{font-size:37px}.faq-intro>p:not(.eyebrow){font-size:14px;margin-top:17px}.faq-list summary{font-size:15px;gap:20px;min-height:75px}.faq-list details:first-child summary{min-height:65px;padding-top:15px}.faq-list details>div{padding-right:5px;font-size:14px;line-height:1.85}.legal-main{padding-top:35px;padding-bottom:45px}.legal-main h1{font-size:39px;letter-spacing:-.05em}.legal-main h2{font-size:25px}.legal-main p,.legal-main li{font-size:15px}.legal-main .eyebrow{font-size:12px;line-height:1.6}}
@media(max-width:360px){.tax-control button{font-size:10px;padding-inline:10px}.section-heading h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.header,body{background:white;color:black}.wrap{padding-inline:0}.hero{padding-block:15px}.faq-list details>div{display:block}.faq-section{gap:25px}.hero,.compare-section,.faq-section{padding-block:20px}}.nav-contact{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--ink);color:var(--paper);border-radius:999px;font-size:15px;font-weight:700;text-decoration:none}/* Hover: the footer credit's multicolour sweep (same gradient, same ease), drawn round the whole pill. */
.nav-contact{position:relative}
.nav-contact::after{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange));-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);clip-path:inset(0 100% 0 0);transition:clip-path .35s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.nav-contact:hover::after,.nav-contact:focus-visible::after{clip-path:inset(0 0 0 0)}
.nav-contact:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
@media(prefers-reduced-motion:reduce){.nav-contact::after{transition:none}}.nav-contact svg{width:16px;height:16px;flex:none}.footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 40px;width:100%;padding:20px max(var(--g),calc((100vw - 1360px)/2)) 24px;border-top:1.5px solid var(--ink)}.footer-brand{font-size:30px}.footer nav{justify-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-size:13px;font-weight:650}.footer nav a{text-decoration:none}.footer nav a:hover{text-decoration:underline}.footer .company-details{grid-column:1/-1;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:700px){.footer{grid-template-columns:1fr}.footer nav{justify-self:start}}
@media(max-width:850px){.nav-contact{font-size:13px;padding-inline:16px}}
@media(max-width:620px){.nav-contact{margin-left:auto}}/* Contact band and form: the same build as mediantpartners.co.uk */
:root{--err:#a1221b;--paper-3:#fafbfc;--ink-soft:#3f444d}.contact-band{background:var(--paper-2);border-top:1.5px solid var(--ink);}.grp-h h2{margin:0;font:700 clamp(28px,4vw,52px)/.95 var(--display);letter-spacing:-.045em}.contact{display:grid;gap:28px;margin-top:var(--head)}
@media(min-width:1000px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,600px);column-gap:72px;align-items:start}}.c-aside{display:grid;gap:18px;align-content:start}.c-aside .reach{margin:0;display:grid;gap:4px;overflow-wrap:anywhere}.c-aside .reach a{font:700 clamp(22px,2.6vw,32px)/1.25 var(--display);letter-spacing:-.02em;min-height:44px;display:inline-flex;align-items:center;gap:12px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}.c-aside .reach a svg{width:.8em;height:.8em;flex:none}.c-aside .reach span{font:600 .8125rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
@media(max-width:480px){.c-aside .reach a{font-size:19px;gap:10px}}.enq{display:grid;gap:18px}.enq[hidden],.sent[hidden]{display:none!important}.fld{display:grid;gap:7px;position:relative}.fld>label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:700 1rem/1.25 var(--body)}.fld input,.fld textarea{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--ink);border-radius:0;background:var(--paper-3);color:var(--ink);font:400 1.0625rem/1.4 var(--body)}.fld input::placeholder{color:#6b717c;opacity:1}.fld textarea{min-height:calc(6*1.4em + 28px);max-height:60vh;resize:vertical;field-sizing:content}.fld input:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 8px rgb(17 17 17/.14)}.fld [aria-invalid="true"]{border-color:var(--err);border-width:3px;background:#fdf3f1}.err{display:flex;gap:8px;align-items:flex-start;margin:0;color:var(--err);font:650 .9375rem/1.35 var(--body)}.err svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2}.err[hidden]{display:none}.hint{margin:0;font-size:.875rem;color:var(--ink-soft)}.hint a{display:inline-block;padding-block:3px;text-decoration:underline}.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.ts{min-height:65px;min-width:0}.send{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:700 1.0625rem/1 var(--body);cursor:pointer}.send:hover{background:var(--ink)}.send[aria-disabled="true"]{background:#4a463f;cursor:progress}.send .spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgb(242 244 247/.35);border-top-color:var(--paper);display:none}.send[aria-disabled="true"] .spin{display:block}
@media(prefers-reduced-motion:no-preference){.send[aria-busy="true"] .spin{animation:spin 900ms linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}.send:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.alert{display:grid;gap:10px;padding:16px 18px;border:2.5px solid var(--err);background:#fdf3f1;color:#5e140f}.alert[hidden]{display:none}.alert b{font:700 1.125rem/1.2 var(--display);color:var(--err)}.alert p{margin:0;font-size:1rem;line-height:1.5;color:inherit}.alert .retry{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--err);background:#fff;color:var(--err);font:700 .9375rem/1 var(--body);border-radius:999px;cursor:pointer}.alert.wait{border-color:var(--ink);background:var(--paper-2);color:var(--ink)}.alert.wait b{color:var(--ink)}.alert.check{margin-bottom:22px}.sent{display:grid;gap:14px;padding:26px 24px;border:2.5px solid var(--ink);background:var(--paper-3);overflow-wrap:anywhere}.sent .sent-h{margin:0;font:700 clamp(30px,4.4vw,52px)/.95 var(--display);letter-spacing:-.04em}.sent p{margin:0}.sent .link{justify-self:start;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;font-weight:650;text-decoration:underline;text-underline-offset:4px}.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.hp label,.hp input{display:block;width:1px;height:1px;padding:0;border:0;font-size:1px}.form-foot{margin:0;font-size:.9375rem;color:var(--ink-soft)}.form-foot a{min-height:44px;display:inline-flex;align-items:center;font-weight:650;text-decoration:underline}.check-contact{max-width:600px}

/* About: the same build as mediantpartners.co.uk */
:root{--li:#0a66c2;--wa:#1fa855}

.about .grp-h{border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.partners{list-style:none;margin:0;padding:var(--head) 0 0;display:grid;gap:32px 22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.partners{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partners li{display:flex;flex-direction:column;gap:6px}
.partners h3{margin:0;display:flex;align-items:center;gap:4px;font:700 clamp(28px,3vw,40px)/1 var(--display);letter-spacing:-.04em}
.partners .li{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:2px;color:var(--li);border-radius:8px}
.partners .li svg{width:22px;height:22px}
.partners .li:hover{background:rgb(10 102 194/.1)}
.partners .li:focus-visible{outline:3px solid var(--li);outline-offset:1px}
.partners .role{margin:0;font:650 .8125rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.partners .yrs{margin:16px 0 0;font:500 1.0625rem/1.5 var(--body);color:var(--ink-soft);max-width:30em}
.partners .yrs strong{display:block;margin-bottom:4px;font:700 clamp(20px,1.9vw,26px)/1.05 var(--display);letter-spacing:-.035em;color:var(--ink)}
.c-aside .reach a.wa svg{color:var(--wa)}

/* the headline ends on the logo point: same colour, outside the highlight band */

/* Recent work gallery */
.desktop-nav a:nth-child(2):before{background:var(--teal)}.desktop-nav a:nth-child(3):before{background:var(--orange)}.desktop-nav a:nth-child(4):before{background:var(--green)}.desktop-nav a:nth-child(5):before{background:var(--blue)}.desktop-nav a:nth-child(1):before{background:var(--blue)}.desktop-nav a:nth-child(6):before{background:var(--teal)}

.work .grp-h{border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.work-list{list-style:none;margin:var(--head) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
.scene{position:relative;background:var(--paper-2);padding:20px 20px 32px;margin-bottom:18px}
.desk{border:1.5px solid var(--ink);background:#fff;border-radius:7px;overflow:hidden}
.bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-bottom:1.5px solid var(--ink);font-size:11px;color:var(--muted)}
.bar i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.bar span{margin-left:8px}
.desk img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.phone{position:absolute;right:26px;bottom:12px;width:26%;padding:12px 3px 4px;background:#101114;border-radius:16px;box-shadow:0 0 0 1.5px #000,inset 0 0 0 1px #3b3e46,0 14px 26px -8px rgba(0,0,0,.5)}.phone img{display:block;width:100%;height:auto;aspect-ratio:400/817;object-fit:cover;object-position:top;border-radius:4px 4px 12px 12px;background:#fff}.phone:before{content:"";position:absolute;z-index:1;top:4px;left:50%;width:26%;height:4px;transform:translateX(-50%);background:#000;border-radius:4px;box-shadow:0 0 0 1px #23252b}.phone:after{content:"";position:absolute;right:-3px;top:26%;width:3px;height:12%;background:#101114;border-radius:0 2px 2px 0}
.work-item h3{margin:0;font:700 24px/1.1 var(--display);letter-spacing:-.035em}
.work-item p{margin:8px 0 0;font-size:15px;line-height:1.45}
.work-item .credit{font-size:13px;color:var(--muted)}
.work-item .credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:650}
.work-item .credit .card-status{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-weight:650;cursor:default}
@media(max-width:1000px){.work-list{grid-template-columns:1fr;max-width:640px}}
@media(max-width:620px){.scene{padding:14px 14px 26px}.phone{right:22px}}
.hero{position:relative}
/* Section rhythm: the gap after the headline is the biggest on the page; the pause button sits on the headline's last line. */

.packages .grp-h{border-bottom:1.5px solid var(--ink);padding-bottom:12px;margin-bottom:var(--head)}

@media(min-width:1001px){.work-item h3{min-height:2.2em}}
.work-item .credit{font-size:15px}
.tax-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.save-note{font-size:12px;font-weight:600;color:var(--muted)}
/* Q&A: heading above, list left-aligned beneath (same pattern as the other sections) */
.faq-section{display:block;border-top:0}
.faq-intro{border-bottom:1.5px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.faq-intro h2{margin:0;font:700 clamp(28px,4vw,52px)/.95 var(--display);letter-spacing:-.045em}
.faq-list{max-width:960px}
.billing-note{white-space:pre-line}
.billing-note{white-space:pre}
/* Billing and VAT switches: quiet labels, two equal segmented controls */
.tax-group{gap:9px}
.tax-group>span:first-child{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tax-control{display:grid;grid-template-columns:1fr 1fr;width:176px;border-width:1px;padding:3px;gap:2px}
.tax-control button{min-height:30px;padding:5px 10px;font-size:12px;text-align:center}
.tax-control button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.save-note{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.save-note:before{content:'';flex:0 0 auto;width:8px;height:8px;background:var(--green);border:1px solid #11111140}
/* Q&A rows: same rhythm for every row, full width under the heading rule */
.faq-intro{margin-bottom:0}
.faq-list{max-width:none}
.faq-list summary,.faq-list details:first-child summary{min-height:72px;padding-block:22px}
.faq-list details>div{max-width:760px}
/* Section rhythm: one gap between sections (--sec), one gap from a heading to its content (--head) */
:root{--sec:clamp(56px,8vw,112px);--head:28px}
.hero{padding-block:clamp(32px,4vw,56px) var(--sec)}
.work,.packages,.faq-section,.about{padding-block:0 var(--sec)}
.contact-band{padding-block:var(--sec)}
/* Package cards: highlights, choose button, collapsible comparison */

.hero-sub{margin-top:clamp(20px,2.4vw,32px);max-width:34em;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--ink-soft)}
.c-aside .reach{justify-items:start}

/* Cookie banner: small card, bottom right, Accept on the right edge (thumb reach). Reject and Accept look the same. */
.consent{position:fixed;z-index:60;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:min(22rem,calc(100vw - 24px));display:grid;gap:10px;padding:14px 14px 12px 16px;background:var(--paper-3);color:var(--ink);border:1.5px solid var(--ink);border-radius:20px;box-shadow:0 6px 20px rgb(17 17 17/.16);font:400 .875rem/1.4 var(--body)}
.consent[hidden]{display:none}
.consent-t{margin:0}
.consent-t a{font-weight:650;text-underline-offset:3px}
.consent-b{display:flex;justify-content:flex-end;gap:8px}
.consent button{min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper-3);color:var(--ink);font:650 .9375rem/1 var(--body);cursor:pointer}
.consent button:active{transform:scale(.97)}
@media(min-width:700px){.consent{width:26rem}}
@media(prefers-reduced-motion:reduce){.consent button:active{transform:none}}
.foot-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:650;cursor:pointer}
.footer nav .foot-btn:hover{text-decoration:underline}

/* Header nav */
.desktop-nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px}
/* Header links: keep each on one line, and switch to the phone header (brand + Contact) before they run out of room */
.desktop-nav a{white-space:nowrap}
@media(max-width:959px){.desktop-nav{display:none}.nav-contact{margin-left:auto}}

/* About: parent-company note, and its footer link */
.about-note{max-width:62ch;margin:var(--head) 0 0;font-size:17px;line-height:1.5}
.about-note a,.company-details a{color:var(--ink);font-weight:650;text-underline-offset:3px}

/* Client portal showcase */
.portal{padding-block:0 var(--sec)}
.portal .grp-h{border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.portal-lead{max-width:62ch;margin:var(--head) 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5}
.portal-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,64px)}
.portal-feature--flip .portal-copy{order:2}
.portal-tag{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.portal-copy h3{margin:0;font:700 clamp(26px,3vw,38px)/1.05 var(--display);letter-spacing:-.04em}
.portal-copy p:not(.portal-tag){margin:14px 0 0;font-size:17px;line-height:1.5}
.portal-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.portal-points li{position:relative;padding-left:26px;font-size:16px;line-height:1.4}
.portal-points li:before{content:"";position:absolute;left:3px;top:.3em;width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.portal-shot{margin:0}
.portal-shot .scene{margin-bottom:0;padding:20px}
.portal-shot .desk img{aspect-ratio:auto}.portal-shot .desk img[width="2480"][height="2872"]{aspect-ratio:2480/2872}.portal-shot .desk img[width="1836"][height="1305"]{aspect-ratio:1836/1305}.portal-shot .desk img[width="1836"][height="1269"]{aspect-ratio:1836/1269}.portal-shot .desk img[width="2480"][height="2237"]{aspect-ratio:2480/2237}.portal-shot .desk img[width="1836"][height="1249"]{aspect-ratio:1836/1249}.portal-shot .desk img[width="1836"][height="1072"]{aspect-ratio:1836/1072}
.portal-shot figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted)}
.portal-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:clamp(28px,4vw,48px)}
.portal-more-h{margin:clamp(40px,5vw,64px) 0 0;font:700 clamp(22px,2.4vw,28px)/1.1 var(--display);letter-spacing:-.035em}
.portal-more{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.portal-more li{border:1.5px solid var(--ink);border-radius:7px;padding:16px;background:var(--paper-3,#fafbfc);font-size:15px;line-height:1.45}
.portal-more strong{display:block;margin-bottom:6px;font-size:17px}
@media(max-width:900px){.portal-feature{grid-template-columns:minmax(0,1fr)}.portal-feature--flip .portal-copy{order:0}.portal-pair{grid-template-columns:minmax(0,1fr)}.portal-shot .scene{padding:14px}}
/* portal screenshots: each sits on one of the four brand colours instead of flat grey, so the white screens stand out */
.portal-shot .scene{background:color-mix(in srgb,var(--accent,var(--paper-2)) 62%,#fff);border:1.5px solid var(--ink);border-radius:10px}
.portal-shot .scene--orange{--accent:var(--orange)}.portal-shot .scene--teal{--accent:var(--teal)}.portal-shot .scene--blue{--accent:var(--blue)}.portal-shot .scene--green{--accent:var(--green)}
.portal-shot .desk{box-shadow:5px 6px 0 #11111126}

/* Gallery cards link to their case study; the live-site link stays above the stretched card link */
.work-item{position:relative}
.work-item .card-link{color:inherit;text-decoration:none}
.work-item .card-link:after{content:"";position:absolute;inset:0;z-index:1}
.work-item .card-link:focus-visible{outline:none}
.work-item .card-link:focus-visible:after{outline:3px solid var(--ink);outline-offset:3px}
.work-item .card-live,.work-item .card-status{position:relative;z-index:2}
.work-item .card-more{margin:6px 0 0;font-size:15px;font-weight:700}
.work-item:hover:not(:has(.card-live:is(:hover,:focus-visible),.card-status:hover)) .card-more{text-decoration:underline;text-underline-offset:3px}

/* Touch targets: 44px minimum on phones and small tablets (WCAG 2.5.5). Layout is kept by padding plus an equal negative margin. */
@media(max-width:768px){.tax-control button{min-height:44px}.brand{padding-block:11px;margin-block:-11px}.footer nav a,.footer nav .foot-btn{display:inline-flex;align-items:center;min-height:44px;min-width:44px}}
/* The zxn.uk wordmark replaces the plain "zxn." text in the header. */
.brand-logo{display:block;height:27px;width:auto}
@media(max-width:850px){.brand-logo{height:25px}}
/* Tablet scale (iPad portrait and landscape): the phone stack was being stretched to tablet width, so cards, artwork and screenshots blew up.
   Headline grows linearly from the 390px size to the 1181px size (continuous with the desktop clamp on both sides); the gallery keeps two columns; artwork and screenshots are capped to the size they have at desktop. */
html.no-glide{scroll-behavior:auto}
/* Picture zoom (menu.js): content pictures open large in a full-screen viewer; tap again to go closer. */
img[data-zoomable]{cursor:zoom-in}
html:has(dialog.pz[open]){overflow:hidden}
dialog.pz{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#111;color:#fff}
dialog.pz::backdrop{background:#000}
.pz-s{position:absolute;inset:0;display:flex;overflow:auto;padding:64px 12px 16px;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain}
.pz-s img{display:block;margin:auto;max-width:100%;max-height:calc(100dvh - 80px);width:auto;height:auto;cursor:zoom-in;border-radius:6px}
.pz-big .pz-s img{max-width:none;max-height:none;width:max(220%,1100px);cursor:zoom-out}
.pz-x{position:fixed;top:12px;right:12px;z-index:2;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#111;font:700 30px/1 var(--display,sans-serif);cursor:pointer}
.pz-h{position:fixed;left:0;right:0;bottom:0;z-index:2;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#111c;color:#fff;font:500 14px/1.3 var(--body,sans-serif);text-align:center;pointer-events:none}
.pz-s{padding-bottom:56px}
.pz-s img{max-height:calc(100dvh - 130px)}
.pz-x:focus-visible{outline:3px solid #f0a04b;outline-offset:2px}

@media(min-width:621px) and (max-width:1000px){.work-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.work-item h3{min-height:2.2em}.portal-feature .portal-shot{max-width:640px}}
@media(min-width:700px) and (max-width:900px){.portal-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hero{padding-bottom:calc(var(--sec) * .75)}

/* Page heading, section lead and closing band shared by the home page and /websites/ */
.page-head{padding-block:clamp(32px,4vw,56px) var(--sec)}
.page-head h1{margin:0;font:700 clamp(40px,5.6vw,80px)/1.05 var(--display);letter-spacing:-.055em}
.sec-lead{max-width:62ch;margin:var(--head) 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5}
.sec-lead a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.sec-more{margin:var(--head) 0 0}
.web-cta{padding-block:0 var(--sec)}
.web-cta .grp-h{border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.web-cta .case-actions{margin-top:var(--head)}
@media(min-width:900px){.partners{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.partners{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}.partners h3{font-size:clamp(22px,1.9vw,34px);white-space:nowrap}}

.footer-brand .brand-logo{height:24px}

/* Websites gallery: a manual carousel, three cards a page (two on tablets, one on phones). Without JS it is a plain swipeable strip. */
.carousel .work-list{display:flex;gap:28px;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;padding:4px 4px 6px;margin:calc(var(--head) - 4px) -4px 0}
.carousel .work-list::-webkit-scrollbar{display:none}
.carousel .work-item{flex:0 0 calc((100% - 56px) / 3);min-width:0;scroll-snap-align:start}
@media(max-width:1000px){.carousel .work-item{flex-basis:calc((100% - 28px) / 2)}}
@media(max-width:620px){.carousel .work-item{flex-basis:100%}}
@media(prefers-reduced-motion:no-preference){.carousel .work-list{scroll-behavior:smooth}}
/* Website cards: the name, then ruled link rows, so the links sit on the card instead of floating under it. */
.carousel .work-item{display:flex;flex-direction:column}
.carousel .work-item h3{display:flex;align-items:flex-end;margin-bottom:14px}
:is(.carousel,.app-list) .work-item .credit{margin:auto 0 0;border-top:1.5px solid var(--ink);font-size:15px}
:is(.carousel,.app-list) .work-item .credit a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:6px 0;font-weight:700;text-decoration:none;padding-right:6px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange)) no-repeat left bottom/0 2px;background-origin:border-box;transition:background-size .35s cubic-bezier(.3,.7,.3,1)}
:is(.carousel,.app-list) .work-item .credit a:hover,:is(.carousel,.app-list) .work-item .credit a:focus-visible{background-size:100% 2px}
:is(.carousel,.app-list) .work-item .credit .card-status{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:6px 6px 6px 0;font-weight:700}
:is(.carousel,.app-list) .work-item .credit a .ext{transition:transform .25s var(--ease)}
:is(.carousel,.app-list) .work-item .credit a:hover .ext,:is(.carousel,.app-list) .work-item .credit a:focus-visible .ext{transform:translate(3px,-3px)}
:is(.carousel,.app-list) .work-item .card-more{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0;padding-right:6px;border-top:1px solid #11111140;border-bottom:1px solid #11111140;font-size:15px;font-weight:700;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange)) no-repeat left bottom/0 2px;background-origin:border-box;transition:background-size .35s cubic-bezier(.3,.7,.3,1)}
:is(.carousel,.app-list) .work-item:is(:hover,:focus-within):not(:has(.card-live:is(:hover,:focus-visible),.card-status:hover)) .card-more{text-decoration:none;background-size:100% 2px}
:is(.carousel,.app-list) .work-item .card-more span+span{transition:transform .25s var(--ease)}
:is(.carousel,.app-list) .work-item:hover:not(:has(.card-live:hover,.card-status:hover)) .card-more span+span{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){:is(.carousel,.app-list) .work-item .card-more,:is(.carousel,.app-list) .work-item .credit a,:is(.carousel,.app-list) .work-item .credit a .ext{transition:none}:is(.carousel,.app-list) .work-item .credit a:hover .ext{transform:none}}
@media(prefers-reduced-motion:no-preference){.carousel .scene{transition:transform .35s var(--ease)}.carousel .work-item:hover .scene{transform:translateY(-4px)}}
.gal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:var(--head)}
.gal-btns{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:620px){.gal-btns{order:2;width:100%;display:grid}.gal-btns .case-btn{width:100%;justify-content:center}.gal-foot .car-ctl{order:1;width:100%}.gal-foot .car-count{margin:0 auto 0 0}}
.car-ctl{display:flex;align-items:center;gap:12px}
.car-ctl[hidden]{display:none}
.car-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:50%;cursor:pointer}
.car-btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.car-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.car-btn:disabled{opacity:.35;cursor:default}
.car-count{margin:0 6px 0 0;font-size:15px;font-weight:650;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* Pricing: one package. A coloured price card, what the package covers as four tiles, then optional add-ons as dashed cards. */
.offer-switches{display:flex;flex-wrap:wrap;gap:14px 24px;margin:0}
.offer-switches .tax-group>span:first-child,.offer-switches .save-note{color:var(--ink)}
.offer-switches .tax-control{border-color:var(--ink)}
.offer-card{display:grid;grid-template-columns:minmax(0,1fr);border:1.5px solid var(--ink);background:#fff;scroll-margin-top:90px;box-shadow:6px 7px 0 #11111126}
.offer-head{display:flex;flex-direction:column;min-width:0;padding:28px 24px;background:var(--blue);border-bottom:1.5px solid var(--ink)}
.offer-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.offer-card h3{margin:10px 0 0;font:700 clamp(36px,4vw,56px)/1 var(--display);letter-spacing:-.05em}
.offer-head .tagline{margin:12px 0 0;max-width:30em;font-size:17px;line-height:1.4}
.offer-head .price{margin-top:auto;padding-top:32px;line-height:1.1}
.offer-head .price strong{font:700 clamp(52px,6vw,84px)/1.05 var(--body);letter-spacing:-.04em}
.offer-head .price>span{display:block;margin-top:4px;font-size:13px}
.vat-label{margin-left:3px;font-size:12px}
.offer-head .billing-note{margin:12px 0 0;font-size:14px;line-height:1.55;min-height:calc(3 * 1.55em)}
@keyframes swap-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.offer-head .swap{animation:swap-in .22s ease-out}}
.offer-head .choose{margin-top:24px}
.offer-side{display:flex;flex-direction:column;justify-content:center;gap:22px;min-width:0;padding:28px 24px}
.offer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.offer-title{min-width:0}
.offer-side .tagline{margin:12px 0 0;max-width:28em;font-size:17px;line-height:1.4}
.offer-art{display:none;flex:0 0 auto;width:150px;height:auto;margin:0;color:var(--ink)}
.picks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px;line-height:1.4}
.picks li{position:relative;padding-left:26px}
.picks li:before{content:"\2713";position:absolute;left:0;top:0;font-weight:800}
.picks li.inc{padding-left:0;font-weight:700}
.picks li.inc:before{content:none}
.choose{align-self:stretch;justify-content:space-between;gap:8px;padding:14px 18px;font-size:15px;white-space:nowrap}
.offer-h{margin:clamp(44px,6vw,72px) 0 0;font:700 clamp(28px,3.4vw,44px)/1.05 var(--display);letter-spacing:-.045em}
.offer-sub{max-width:62ch;margin:12px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--ink-soft)}
.ic{display:block;width:100%;height:100%}
.ic-box{display:grid;place-items:center;flex:0 0 auto;width:56px;height:56px;padding:11px;border:1.5px solid var(--ink);border-radius:14px;background:var(--c,var(--blue));color:var(--ink)}
.inc--blue,.add--blue{--c:var(--blue)}.inc--teal,.add--teal{--c:var(--teal)}.inc--orange,.add--orange{--c:var(--orange)}.inc--green,.add--green{--c:var(--green)}
.inc-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.inc-tile{min-width:0;padding:24px;border:1.5px solid var(--ink);border-top:10px solid var(--c);background:#fff;box-shadow:4px 5px 0 #11111126}
.inc-top{display:flex;align-items:center;gap:16px}
.inc-top h4{margin:0;font:700 clamp(24px,2.4vw,32px)/1.05 var(--display);letter-spacing:-.04em}
.inc-lead{margin:16px 0 0;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.inc-tile ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1.5px solid var(--ink);display:grid;gap:10px}
.inc-tile li{position:relative;padding-left:28px;font-size:15px;line-height:1.4}
.inc-tile li:before{content:"";position:absolute;left:4px;top:.28em;width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.add-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.add-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1.5px dashed var(--ink);background:var(--paper-3)}
.add-card .ic-box{width:48px;height:48px;padding:9px;border-radius:12px}
.add-card h4{margin:18px 0 0;font:700 22px/1.1 var(--display);letter-spacing:-.035em}
.add-card p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.add-card .add-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:auto;padding-top:18px}
.add-card a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;font-weight:650;text-underline-offset:3px}
@media(min-width:700px){.inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.add-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:600px){.offer-art{display:block}}
@media(max-width:999px){.offer-head{order:2;border-bottom:0;border-top:1.5px solid var(--ink)}}
@media(min-width:1000px){.offer-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.offer-head{padding:40px 36px;border-bottom:0;border-right:1.5px solid var(--ink)}.offer-side{padding:40px 36px}.inc-tile{padding:28px}.add-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.offer-head,.offer-side,.inc-tile,.add-card{padding-inline:20px}}

/* Free website audit card: one white card (the .inc-tile device: ink border, 10px blue top bar, soft offset shadow) whose ink button is its only filled shape. Home page (after the Websites gallery) and /websites/ (closing "What is included"). Picked 2026-10-25, see notes/DECISIONS.md. */
.audit-w{max-width:calc(840px + 2 * var(--g));margin:0 auto var(--sec);scroll-margin-top:90px}
.offer .audit-w{max-width:none;margin:clamp(40px,5vw,64px) 0 0}
.aw-card{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 20px 28px;background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-top:10px solid var(--blue);box-shadow:6px 7px 0 #11111126}
.aw-copy{min-width:0;container-type:inline-size}
.aw-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.aw-copy h2,.aw-copy h3{margin:10px 0 0;font:700 clamp(24px,2.6vw,30px)/1.08 var(--display);letter-spacing:-.04em;color:var(--ink)}
.aw-lead{max-width:46ch;margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.aw-checks{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 28px}
.aw-checks li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.aw-checks li:before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--c)}
.aw-c1{--c:var(--blue)}.aw-c2{--c:var(--teal)}.aw-c3{--c:var(--orange)}.aw-c4{--c:var(--green)}
.aw-example{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:44px;color:var(--ink);font:700 15px/1.2 var(--body);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.aw-example:hover{text-decoration-thickness:3px}
.aw-example:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.aw-example svg{width:16px;height:16px;flex:0 0 auto}
.aw-form,.aw-done{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.aw-form[hidden],.aw-done[hidden]{display:none}
.aw-fld{display:grid;gap:6px}
.aw-fld label{font-size:14px;font-weight:650}
.aw-fld input{width:100%;min-height:46px;padding:0 14px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);font:500 16px/1.2 var(--body)}
.aw-fld input::placeholder{color:var(--muted);opacity:1}
.aw-fld input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.aw-fld input[aria-invalid=true]{border:2px solid var(--err)}
.aw-err{margin:0;font-size:14px;line-height:1.4;font-weight:600;color:var(--err)}
.aw-err[hidden],.aw-alert[hidden]{display:none}
.aw-alert{padding:12px 16px;border:2px solid var(--err);border-radius:10px;background:#fdf3f1;color:#5e140f;font-size:15px;line-height:1.45}
.aw-send{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 22px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 16px/1 var(--body);cursor:pointer}
.aw-send:hover:not(:disabled){background:var(--ink);border-color:var(--ink)}
.aw-send:disabled{background:var(--ink-soft);border-color:var(--ink-soft);cursor:progress}
.aw-send[aria-busy=true]{background:repeating-linear-gradient(135deg,var(--ink-soft) 0 12px,#555b66 12px 24px)}
.aw-send[aria-busy=true] [aria-hidden=true]{flex:0 0 auto;width:18px;height:18px;font-size:0;border:2.5px solid #f2f4f766;border-top-color:var(--paper);border-radius:50%;animation:awspin .8s linear infinite}
@keyframes awspin{to{transform:rotate(360deg)}}
.aw-send:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.aw-ts:empty{display:none}
.aw-fine{margin:0;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.aw-fine a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.aw-done{gap:10px}
.aw-done h3{margin:0;font:700 24px/1.1 var(--display);letter-spacing:-.04em}
.aw-done p{margin:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.aw-next a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-weight:650;text-decoration:underline;text-underline-offset:4px}
.aw-next a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.aw-again{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:650 16px/1 var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.aw-again:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
@media(min-width:820px){.aw-card{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;padding:36px 40px 40px}}
@media(min-width:1000px){.offer .aw-card{grid-template-columns:minmax(0,1fr) 380px;column-gap:clamp(56px,8vw,120px);padding:40px 36px 44px}}
@container (min-width:600px){.aw-checks{grid-template-columns:repeat(4,max-content)}}
@media(min-width:1000px){.offer .aw-lead{max-width:56ch}.offer .aw-copy h3{font-size:34px}}
@media(max-width:768px){.aw-fine a{display:inline-flex;align-items:center;min-height:44px}}

/* Hero buttons and price line, and the mobile menu (a <details>; dist/menu.js only closes it). */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
.hero-price{margin-top:14px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.hero-price strong{color:var(--ink)}
@media(max-width:620px){.hero-cta{display:grid}.hero-cta .case-btn{width:100%;justify-content:center}}
.menu{display:none}
.menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:999px;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary svg{width:22px;height:22px}
.menu>summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.menu[open]>summary{background:var(--ink);color:var(--paper)}
.menu-panel{position:absolute;left:0;right:0;top:100%;display:grid;padding:6px var(--g) 14px;background:var(--paper);border-bottom:1.5px solid var(--ink);box-shadow:0 16px 24px rgba(17,17,17,.12)}
.menu-panel a{display:flex;align-items:center;gap:12px;min-height:54px;border-bottom:1px solid var(--line);font:700 20px/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a:before{content:"";width:10px;height:10px;flex:none;background:var(--blue)}
.menu-panel a:nth-child(2):before{background:var(--teal)}
.menu-panel a:nth-child(3):before{background:var(--orange)}
.menu-panel a:nth-child(4):before{background:var(--green)}
.menu-panel a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:959px){.menu{display:block}}
/* Call and WhatsApp sit under the links in the mobile menu, so there is one floating button (the chat) and one header button (Contact). */
.menu-panel{max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
.menu-panel .menu-reach{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px}
.menu-panel .menu-reach a{justify-content:center;gap:10px;min-height:52px;border:1.5px solid var(--ink);border-radius:999px;font:700 16px/1 var(--body);letter-spacing:0}
.menu-panel .menu-reach a:before{content:none}
.menu-panel .menu-reach svg{width:20px;height:20px;flex:none}
@media(max-width:400px){.nav-contact{padding-inline:14px}.nav-contact svg{display:none}}

/* /contact/check/: the form stands alone, so it is not the two-column contact grid */
.contact.check-contact{display:block;max-width:600px}

/* Website chat launcher (dist/sitechat.js). The window's own styles are in /sitechat/widget.css, fetched on the first click. */
.sc{position:fixed;z-index:70;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--sc-lift,0px));font-family:var(--body)}
.sc-launch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 15px/1 var(--body);box-shadow:0 0 0 1.5px var(--paper),0 12px 32px -14px rgb(17 17 17/.5);cursor:pointer;transition:background .16s,transform .16s}
.sc-launch:hover{background:var(--ink);transform:translateY(-2px)}
.sc-launch:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px rgb(17 17 17/.14)}
.sc-badge{position:absolute;top:-8px;right:-4px;min-width:22px;height:22px;padding:0 6px;border:2px solid var(--paper);border-radius:999px;background:#ff3b2f;color:#fff;font:700 12px/18px var(--body);text-align:center}
.sc.sc-open .sc-launch{display:none}
/* the "Chat with us" label stays visible on phones too (Ed, 2026-10-25): a 52px pill, same height the footer dock reserves */
.sc.sc-under-banner .sc-launch{display:none}
@media(prefers-reduced-motion:reduce){.sc-launch{transition:none}.sc-launch:hover{transform:none}}

/* Footer. The links sit in two labelled columns, Company and Follow (.fcol, .flab): from 701px the columns and labels dissolve into the one row of links beside the logo.
   The fixed chat launcher (52px tall, 16px from the bottom) sits over the bottom-right corner, so the footer ends in a dock of empty paper under the company line: at the very bottom of any page the launcher touches no footer text (gate: layout-audit `launcher-overlap`). */
.footer nav{justify-self:start}
.footer{padding-bottom:calc(52px + 32px + env(safe-area-inset-bottom,0px) + 20px)}
@media(min-width:1101px){.footer{padding-bottom:24px}}
.footer .fcol{display:contents}
.footer .flab{display:none}
.footer nav .foot-btn{order:1}
@media(max-width:700px){
.footer{padding-top:24px;row-gap:14px}
.footer nav{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:0 16px}
.footer .fcol{display:block}
.footer .flab{display:block;margin:0 0 4px;font:700 11px/1.2 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.footer nav a,.footer nav .foot-btn{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;line-height:1.2}
.footer nav .foot-btn{order:0}
.footer .company-details{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.65}
}

/* Follow links are coloured icons (a.soc, aria-label names them). From 701px they close the row of footer links, after Cookie settings, set apart from the text links; on phones they sit in a row under the Follow label, 44px targets. */
.footer nav a.soc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-inline:-6px;border-radius:50%}
.footer nav a.soc:hover{text-decoration:none}
.footer .ic-soc{width:22px;height:22px;flex:none}
@media(min-width:701px){.footer nav a.soc{order:2}.footer nav .flab+a.soc{margin-left:10px}.footer nav a.soc:last-child{margin-right:0}}
/* The footer links sit left to right, so the Blog link (2026-11-09) pushed the social icons under the fixed chat launcher at 1280px (layout-audit launcher-overlap): tighter gaps give the width back. */
@media(min-width:1101px){.footer nav{column-gap:14px}}
@media(max-width:768px){.footer nav a.soc{width:44px;height:44px;min-height:44px}}
@media(max-width:700px){.footer nav a.soc{margin-inline:0}.footer .fcol-soc{display:flex;flex-wrap:wrap;column-gap:12px}.footer .fcol-soc .flab{flex-basis:100%}}

/* The gym offer's action button (/gyms/ and the home band) and the "Run a gym?" band under the home hero. Orange is the one action colour there. */
.gy-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:2px solid var(--ink);border-radius:999px;background:var(--orange);color:var(--ink);font:700 17px/1.2 var(--body);text-align:center;text-decoration:none;cursor:pointer;transition:background .14s,transform .14s}
.gy-btn:hover{background:#ffb35f}
.gy-btn:active{transform:scale(.98)}
.gy-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px;box-shadow:none}
.gy-btn[aria-disabled=true]{opacity:.7;cursor:progress}
.ind{margin-bottom:var(--sec)}
.ind .sec-lead{margin:0 0 clamp(20px,2.4vw,28px)}
/* Industries: a list to scan, not a gallery. One job: find your own and tap it. Rows on a phone, 2 columns from 600px, 4 from 1100px (eight cards are 4 x 2, no orphan row). The whole card is the link (h3 a:after). */
.ind-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ind-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 20px;grid-template-areas:"ic name go" "desc desc desc";column-gap:12px;row-gap:6px;align-items:center;min-height:76px;padding:12px 14px 13px;background:var(--paper-3);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px}
.ind-card:hover{background:#fff}
.ind-ic{grid-area:ic;display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--ink);border-radius:12px;background:var(--blue);color:var(--ink)}
.ind-ic svg{width:24px;height:24px}
.ind-card:nth-child(4n+2) .ind-ic{background:var(--teal)}
.ind-card:nth-child(4n+3) .ind-ic{background:var(--orange)}
.ind-card:nth-child(4n) .ind-ic{background:var(--green)}
.ind-card h3{grid-area:name;margin:0;font:700 18px/1.2 var(--display);letter-spacing:-.02em}
.ind-card p{grid-area:desc;margin:0;font-size:15px;line-height:1.4;color:var(--ink-soft)}
.ind-go{grid-area:go;display:grid;place-items:center;color:var(--ink)}
.ind-go svg{width:20px;height:20px}
.ind-link{display:flex;align-items:center;min-height:44px;padding:0;color:inherit;text-decoration:none}
.ind-link:after{content:"";position:absolute;inset:0;border-radius:14px}
.ind-card:hover .ind-link{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ind-link:focus-visible{outline:none}
.ind-link:focus-visible:after{outline:3px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.ind-card,.ind-go{transition:background .14s,transform .14s}.ind-card:hover .ind-go{transform:translateX(3px)}}
@media(min-width:600px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(min-width:1100px){
.ind-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ind-card{grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"ic go" "name name" "desc desc";align-content:start;align-items:start;row-gap:10px;padding:18px}
.ind-ic{width:48px;height:48px}
.ind-ic svg{width:26px;height:26px}
.ind-card h3{align-self:start;font-size:20px}
.ind-go{align-self:start;justify-items:end}
.ind-link{min-height:0}
}
.ind-line{display:block;margin-top:6px;font:400 15px/1.4 var(--body);letter-spacing:0;font-style:normal;color:var(--muted)}
.gym-line{margin:10px 0 0;font-size:17px;font-weight:700}
.gym-line a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:4px}
.gym-line a:hover{text-decoration-color:var(--ink)}
.legal-main pre.ua{margin:18px 0;padding:14px 18px;background:var(--paper-2);border:1.5px solid var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.legal-main pre.ua code{font:600 14px/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}
.legal-main pre.ua+p{margin-top:15px}

/* Header nav (2026-10-28): five plain links, no colour squares; Client portal is a quieter link set apart at the right edge, beside Contact. The mobile menu keeps its own list and squares. */
.desktop-nav a:before{content:none}
.desktop-nav{gap:clamp(18px,2.2vw,30px)}
.desktop-nav a.nav-portal{margin-left:clamp(4px,1vw,14px);padding-left:clamp(18px,2.2vw,30px);border-left:1.5px solid var(--line);color:var(--muted);font-weight:600}
.desktop-nav a.nav-portal:hover{color:var(--ink)}
.ext{display:inline-block;flex:none;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.04em}

.guide-links{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.guide-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:16px;font-weight:650;text-underline-offset:3px}

/* The package card has no price since 2026-11-06: the blue side invites a quote (see /quote/). */
.offer-head .price--quote strong{font:700 clamp(36px,4.2vw,60px)/1.05 var(--display);letter-spacing:-.05em;display:block}
.offer-head .price--quote>span{margin-top:8px;font-size:14px}

/* Hover ring on every black pill button (filled or outlined; never the coloured CTAs): the footer credit's multicolour sweep drawn round the border (same gradient and ease as .nav-contact).
   ONE list: a new black CTA either uses .button / .case-btn (already here) or adds .btn-ring, or its class is added to the :is() below. `npm run gate` (scripts/check-ring.mjs) fails on any black pill that lacks the ring. */
:is(.button,.send,.aw-send,.case-btn,.sc-launch,.menu-panel .menu-reach a,.yr-actions .gy-btn,.footer nav a.soc,.btn-ring){position:relative}
:is(.button,.send,.aw-send,.case-btn,.sc-launch,.menu-panel .menu-reach a,.yr-actions .gy-btn,.footer nav a.soc,.btn-ring)::after{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange));-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);clip-path:inset(0 100% 0 0);transition:clip-path .35s cubic-bezier(.3,.7,.3,1);pointer-events:none}
:is(.button,.send,.aw-send,.case-btn,.sc-launch,.menu-panel .menu-reach a,.yr-actions .gy-btn,.footer nav a.soc,.btn-ring):is(:hover:not(:disabled):not([aria-disabled=true]),:focus-visible)::after{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){:is(.button,.send,.aw-send,.case-btn,.sc-launch,.menu-panel .menu-reach a,.yr-actions .gy-btn,.footer nav a.soc,.btn-ring)::after{transition:none}}
.ex-after .case-btn:not(.case-btn--ghost)::after{display:none}

/* Hover on the coloured CTAs (orange, blue): the button lifts off the page on a hard ink shadow, as the cards do, and its arrow steps forward. Press sinks it back. */
.gy-btn,.ex-after .case-btn:not(.case-btn--ghost){--lift:var(--ink);transition:transform .18s cubic-bezier(.3,.7,.3,1),box-shadow .18s cubic-bezier(.3,.7,.3,1),background .14s}
.gy-hero .gy-btn,.gy-close .gy-btn,.gy-tier.is-featured .gy-btn{--lift:var(--paper)}
.gy-btn:hover:not([aria-disabled=true]),.ex-after .case-btn:not(.case-btn--ghost):hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--lift)}
.gy-btn:active:not([aria-disabled=true]),.ex-after .case-btn:not(.case-btn--ghost):active{transform:translate(0,0);box-shadow:0 0 0 var(--lift)}
.gy-btn svg{transition:transform .18s cubic-bezier(.3,.7,.3,1)}
.gy-btn:hover svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.gy-btn,.gy-btn svg,.ex-after .case-btn:not(.case-btn--ghost){transition:none}.gy-btn:hover,.gy-btn:active,.gy-btn:hover svg,.ex-after .case-btn:not(.case-btn--ghost):hover,.ex-after .case-btn:not(.case-btn--ghost):active{transform:none}}

/* Footer text links and Cookie settings (2026-11-07): the nav's multicolour underline sweeps in on hover and keyboard focus (same gradient and ease as .desktop-nav a); social icons get the ring above. */
.footer nav a:not(.soc),.footer nav .foot-btn{text-decoration:none;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange)) no-repeat 0 100%/0 2px;background-origin:padding-box;padding-block:4px;transition:background-size .35s cubic-bezier(.3,.7,.3,1)}
@media(max-width:768px){.footer nav a:not(.soc),.footer nav .foot-btn{padding-block:0;background-position:0 calc(50% + 13px);background-origin:content-box}}
.footer nav a:not(.soc):hover,.footer nav a:not(.soc):focus-visible,.footer nav .foot-btn:hover,.footer nav .foot-btn:focus-visible{background-size:100% 2px;text-decoration:none}
/* Cookie settings is a 44px-tall button, so its underline is placed from the text centre, not the box bottom (the text links are 20px tall on desktop). */
.footer nav .foot-btn{padding-block:0;background-position:0 calc(50% + 13px);background-origin:content-box}
@media(prefers-reduced-motion:reduce){.footer nav a:not(.soc),.footer nav .foot-btn{transition:none}}
/* Industries dropdown in the header (2026-11-09): a <details> so it works without script; dist/menu.js only closes it. scripts/sync-nav.mjs writes the markup from content/industries.json. */
.nav-drop summary{list-style:none;cursor:pointer}
.nav-drop summary::-webkit-details-marker{display:none}
.nav-drop summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nav-chev{width:12px;height:12px;flex:none;transition:transform .2s ease}
.nav-drop[open] .nav-chev{transform:rotate(180deg)}
.desktop-nav .nav-drop{position:relative}
.desktop-nav .nav-drop summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:650;white-space:nowrap;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange)) no-repeat left bottom 9px/0 2px;background-origin:content-box;transition:background-size .35s cubic-bezier(.3,.7,.3,1)}
.desktop-nav .nav-drop summary:hover,.desktop-nav .nav-drop summary:focus-visible,.desktop-nav .nav-drop[open] summary{background-size:100% 2px}
.desktop-nav .nav-drop:has(a[aria-current=page])>summary{text-decoration:underline;text-decoration-thickness:2px}
.desktop-nav .nav-drop-panel{position:absolute;top:calc(100% + 8px);left:-18px;z-index:40;display:grid;min-width:270px;padding:8px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:0 16px 24px rgba(17,17,17,.12)}
.desktop-nav .nav-drop-panel a{display:flex;min-height:44px;padding-inline:10px;font-size:15px;background:none;transition:none}
.desktop-nav .nav-drop-panel a:hover,.desktop-nav .nav-drop-panel a:focus-visible{background:var(--paper-2)}
@media(max-width:1100px){.desktop-nav .nav-drop summary{font-size:14px}}
.menu-panel .nav-drop{border-bottom:1px solid var(--line)}
.menu-panel .nav-drop summary{display:flex;align-items:center;gap:12px;min-height:54px;font:700 20px/1 var(--display);letter-spacing:-.02em}
.menu-panel .nav-drop summary:before{content:"";width:10px;height:10px;flex:none;background:var(--blue)}
.menu-panel .nav-chev{width:16px;height:16px;margin-left:auto}
.menu-panel .nav-drop-panel{display:grid;padding:0 0 8px 22px}
.menu-panel .nav-drop-panel a{min-height:46px;border-bottom:0;font:600 17px/1.15 var(--body);letter-spacing:0}
.menu-panel .nav-drop-panel a:before{content:none}
@media(prefers-reduced-motion:reduce){.nav-chev,.desktop-nav .nav-drop summary{transition:none}}

/* dist/work.css */
/* Case-study pages (/work/<slug>/). Uses the site's tokens; spacing between sections is --sec, heading to content is --head. */
.case{padding-top:clamp(24px,3.5vw,44px);padding-bottom:var(--sec)}
.crumbs{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.crumbs a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;margin-inline:-6px}
.case-head{margin-top:clamp(22px,3vw,40px);max-width:62rem}
.case-head h1{margin:14px 0 0;font:700 clamp(40px,6.4vw,92px)/.95 var(--display);letter-spacing:-.05em;overflow-wrap:anywhere}
.case-lede{margin:clamp(16px,2vw,26px) 0 0;max-width:40ch;font-size:clamp(18px,1.9vw,25px);line-height:1.35}
.case-actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(20px,2.4vw,32px) 0 0}
.case-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:999px;font-size:16px;font-weight:700;text-decoration:none}
.case-btn:hover{background:var(--ink);border-color:var(--ink)}
.case-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.case-btn--ghost{background:transparent;color:var(--ink)}
.case-btn--ghost:hover{background:transparent;color:var(--ink)}
.case .scene{background:none;border:0;border-radius:0;margin-bottom:0}
.case .scene--blue{--accent:var(--blue)}.case .scene--teal{--accent:var(--teal)}.case .scene--orange{--accent:var(--orange)}.case .scene--green{--accent:var(--green)}
.case .desk{box-shadow:5px 6px 0 #11111126}
.case.portfolio .case-head{margin-bottom:clamp(40px,5vw,72px)}
.case.portfolio .scene{margin-bottom:18px}
.case.portfolio .work-item{display:flex;flex-direction:column}
.case.portfolio .work-item h3{min-height:0;margin-bottom:8px}
.case.portfolio .work-item .credit{margin-top:auto}
.case.portfolio .work-item .card-line{margin:0 0 8px;color:var(--muted)}
.case figure{margin:0}
.case figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted)}
.case figure.case-hero{margin-top:clamp(28px,4vw,52px)}
.case-hero .scene{padding:0 0 clamp(20px,4.5vw,44px)}
.case-hero .phone{right:clamp(24px,5vw,76px);bottom:clamp(14px,2.2vw,30px);width:clamp(84px,19%,230px)}
/* A page whose own headline runs under the phone frame (Spice Fusion) gets a smaller phone, so it sits below the headline */
.case-hero--phone-sm .phone{width:clamp(64px,13%,160px)}
/* The eyebrow is hidden site-wide; on a case study it is shown only to say "Our own site" */
.case-head .eyebrow{display:block;margin:0;color:var(--muted);letter-spacing:.08em}
/* At a glance: one plain list of up to six rows. Legal details sit in .case-company at the foot of the page. Same markup on every page. */
.case-glance{margin-top:clamp(28px,4vw,52px);padding:clamp(20px,3vw,36px);background:var(--paper-3,#fafbfc);border:1.5px solid var(--ink);border-radius:10px}
.case-glance>h2{margin:0 0 clamp(14px,2vw,22px);font:700 clamp(24px,2.6vw,32px)/1.1 var(--display);letter-spacing:-.04em}
.frows dt{font:700 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.frows{margin:0;border-top:1.5px solid var(--ink)}
.frow{display:grid;grid-template-columns:11rem minmax(0,1fr);column-gap:16px;align-items:center;min-height:48px;padding:4px 0;border-bottom:1px solid var(--line)}
.frow dd{margin:0}
.frow-v{font-size:16px;line-height:1.45;font-weight:500;overflow-wrap:anywhere}
.frow-v a{color:var(--ink);text-underline-offset:3px}
@media(max-width:768px){.frow-v a{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px}}
.case-company{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line);max-width:70ch;font-size:15px;line-height:1.5;color:var(--muted)}
.case-company strong{color:var(--ink)}
.case-company a{display:inline-flex;align-items:center;min-height:44px;margin-inline:2px;color:var(--ink);font-weight:650;text-underline-offset:3px}
@media(max-width:620px){
  .frow{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "v";row-gap:3px;min-height:0;padding:12px 0}
  .frow:last-child{border-bottom:0;padding-bottom:0}
  .frow dt{grid-area:l}.frow-v{grid-area:v}
}
.case-sec{margin-top:var(--sec)}
.case-sec>h2{margin:0 0 var(--head);padding-bottom:12px;border-bottom:1.5px solid var(--ink);font:700 clamp(28px,4vw,52px)/.95 var(--display);letter-spacing:-.045em}
.case-sec>p{max-width:62ch;margin:0 0 1em;font-size:clamp(17px,1.5vw,19px);line-height:1.55}
.case-sec>p.case-note{font-size:15px;color:var(--muted);margin-top:14px}
.case-foot>p.case-note{max-width:70ch}
.built{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.built li{border:1.5px solid var(--ink);border-radius:7px;padding:20px;background:var(--paper-3,#fafbfc)}
.built h3{margin:0 0 8px;font:700 clamp(20px,2vw,24px)/1.1 var(--display);letter-spacing:-.03em}
.built p{margin:0;font-size:16px;line-height:1.5}
/* "Also in place": the basics in one small paragraph under the list (specificity beats .case-sec>p so the gap below the cards holds) */
.case-sec>p.case-also{max-width:62ch;margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.case-also strong{color:var(--ink)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px}
.shot .scene{padding:0}
.shot .desk img{aspect-ratio:auto}
.shot--phone .scene{display:flex;justify-content:center;padding:0}
.phone--solo{position:relative;right:auto;bottom:auto;width:min(220px,62%)}
.table-wrap{overflow-x:auto;max-width:100%}
.table-wrap:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.compare{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.compare th,.compare td{padding:12px 14px;border:1.5px solid var(--ink);text-align:left;vertical-align:top}
.compare thead th{background:var(--ink);color:var(--paper);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.compare tbody th{background:var(--paper-2);font-weight:700}
.case-intro{max-width:62ch}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.stats li{container-type:inline-size;border:1.5px solid var(--ink);border-radius:7px;padding:18px;background:var(--paper-3,#fafbfc)}
/* The headline is sized from its card (cqi), so the longest word ("violations") always fits; break-word is only a last resort. */
.stats strong{display:block;font:700 clamp(26px,17cqi,52px)/1 var(--display);letter-spacing:-.04em;overflow-wrap:break-word}
.stats li>span{display:block;margin-top:8px;font-size:15px;line-height:1.4}
/* Measured results: the plain line under each label says what the figure means for a visitor */
.stats li>span.means{margin-top:6px;font-size:15px;line-height:1.4;color:var(--muted)}
.compare .means{display:block;margin-top:6px;font-size:15px;line-height:1.4;font-weight:400;color:var(--muted)}
.quote blockquote{margin:0;padding:0 0 0 clamp(16px,2.4vw,30px);border-left:6px solid var(--ink)}
.quote blockquote p{margin:0;max-width:34em;font:600 clamp(22px,2.6vw,32px)/1.25 var(--display);letter-spacing:-.025em}
.quote figcaption{margin-top:16px;padding-left:calc(clamp(16px,2.4vw,30px) + 6px);font-size:16px;color:var(--ink-soft,#3f444d)}
.quote figcaption a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.quote .case-note{padding-left:calc(clamp(16px,2.4vw,30px) + 6px);max-width:62ch;margin-top:8px;font-size:15px;color:var(--muted)}
.limits{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:62ch}
.limits li{position:relative;padding-left:26px;font-size:17px;line-height:1.5}
.limits li:before{content:"";position:absolute;left:3px;top:.55em;width:10px;height:10px;border:2.5px solid var(--ink);border-radius:50%}
.next-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.next-links a{display:block;min-height:76px;padding:16px 18px;border:1.5px solid var(--ink);border-radius:7px;color:var(--ink);font:700 clamp(18px,2vw,24px)/1.15 var(--display);letter-spacing:-.025em;text-decoration:none}
.next-links a:hover{background:var(--paper-2)}
.next-links a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.next-links span{display:block;margin-bottom:6px;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case-cta{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vw,40px);padding:clamp(20px,3vw,36px);background:var(--paper-2);border:1.5px solid var(--ink);border-radius:10px}
.case-cta p{max-width:46ch;margin:0;font-size:clamp(18px,1.8vw,22px);line-height:1.4}
.case-cta .case-actions{margin:0;max-width:none}
/* Mid-page call to action: the closing box, made compact; text left, button right, stacked under 700px. No previous/next links here. */
.case-cta-mid .case-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,32px);margin-top:0;padding:clamp(18px,2.4vw,28px)}
.case-cta-mid .case-cta p{font-size:clamp(17px,1.6vw,20px)}
@media(max-width:700px){
  .next-links{grid-template-columns:1fr}
  .case-cta-mid .case-cta{grid-template-columns:minmax(0,1fr)}
  .compare thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block}
  .compare tr{margin-bottom:14px;border:1.5px solid var(--ink)}
  .compare th,.compare td{border:0;border-bottom:1.5px solid var(--ink)}
  .compare tr>*:last-child{border-bottom:0}
  .compare td:before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}
/* Phones: two figures across, so five cards no longer take more than three screens; an odd last card spans the row */
@media(max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stats li{padding:14px}.stats li:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:620px){.case-hero .scene{padding-bottom:30px}.case-btn{width:100%;justify-content:center}.case-actions{display:grid}}
.case-sec .limits+.case-actions{margin-top:clamp(20px,2.4vw,28px)}

/* dist/apps.css */
/* Apps and Services (home page sections and /apps/<slug>/ pages). Uses the site's tokens; card spacing follows the Websites gallery above it. */
.scene--blue{--accent:var(--blue)}.scene--teal{--accent:var(--teal)}.scene--orange{--accent:var(--orange)}.scene--green{--accent:var(--green)}
.work-item:not(.svc-case-item) .scene{background:none;border:0;border-radius:0;padding:0 5px 16px 0;margin-bottom:12px}
.work-item:not(.svc-case-item) .scene:not(.scene--duo) .phone{right:10px;bottom:0;width:31%}
.work-item .desk{box-shadow:5px 6px 0 #11111126}
.work-item.svc-case-item .scene{background:none;border:0;border-radius:0;padding:0 5px 16px 0;margin-bottom:12px}
.work-item.svc-case-item .svc-screen{box-shadow:5px 6px 0 #11111126}
.app-item .tag{margin:6px 0 0;font-size:15px;font-weight:650;color:var(--ink-soft)}
.app-item .tag+p{margin-top:8px}


/* An app with no desktop screen shows its phones side by side */
.scene--duo{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3cqi,22px);padding:20px 20px 22px;container-type:inline-size}
.scene--duo .phone{position:relative;right:auto;bottom:auto;flex:0 1 31%;min-width:0;width:auto}
.case-hero .scene--duo{padding:0 0 clamp(14px,3vw,30px)}
.case-hero .scene--duo .phone{right:auto;bottom:auto;flex:0 1 min(230px,36%);width:auto}
.shot--phone .scene{gap:clamp(12px,3vw,32px)}
.shot--phone .phone--solo{flex:0 1 220px;min-width:0;width:auto}
.built--also{margin-top:16px}

/* Services: one coloured card per service, each with a drawn diagram on a paper screen */
.svc-grid{list-style:none;margin:var(--head) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,32px);row-gap:0}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.svc-grid{grid-template-columns:minmax(0,1fr);max-width:640px}}
/* Each card is four rows (picture, heading, text, links) on the grid's own rows, so in every row of cards the pictures, headings, text and links line up. */
.svc{--accent:var(--blue);display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding:0 5px clamp(36px,4.4vw,56px) 0;background:none;color:var(--ink);border:0;border-radius:0}
.svc--blue{--accent:var(--blue)}.svc--teal{--accent:var(--teal)}.svc--orange{--accent:var(--orange)}.svc--green{--accent:var(--green)}
.svc-screen{padding:8px;background:var(--paper-3);border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;color:var(--ink)}
.svc .svc-screen{box-shadow:5px 6px 0 #11111126;margin-bottom:22px}
.svc-copy{display:contents}
.svc h3{align-self:end;margin:0 0 12px;font:700 clamp(26px,2.5vw,34px)/1.02 var(--display);letter-spacing:-.04em;text-wrap:balance}
.svc-copy>p{margin:0 0 20px;font-size:16px;line-height:1.5;max-width:34em;text-wrap:pretty}
.svc-links{align-self:start;border-top:1.5px solid var(--ink)}
.sv{display:block;width:100%;height:auto}
.sv text{font:650 11px var(--body);fill:var(--ink)}
.sv .t-m{fill:var(--muted);font-size:10.5px;letter-spacing:.02em}
.sv .t-b{font-weight:700;font-size:11.5px}
.sv .t-h{font:700 15px var(--display);letter-spacing:-.02em}
.sv .t-p{fill:var(--paper);font-weight:700}
.sv .t-p.big{font:700 20px var(--display)}
.sv .f-ink{fill:var(--ink)}
.sv .f-card{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.sv .f-card.sel{stroke-width:2.5}
.sv .f-soft{fill:#cfd3da}
.sv .f-acc{fill:var(--accent);fill-opacity:.55}
.sv .ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sv .ln.thin{stroke-width:2}
.sv .ln.pap{stroke:var(--paper);stroke-width:3}
.sv .ax{stroke:var(--ink);stroke-width:1.5}
.sv .dash{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 4;opacity:.5}
.svc--ink .sv .f-acc{fill:var(--green);fill-opacity:.8}
.svc--green .sv .f-acc{fill:var(--blue)}
/* Service case cards on /portfolio/ size their drawn picture from the card, so the card is the container (the app cards use their own stage container, see App cards) */
.svc-case-item{container-type:inline-size}

/* Service case studies (/services/<slug>/): a drawn diagram on a paper screen, and the client's logo on a white chip */
.scene--svc{display:grid;padding:clamp(14px,2.4cqi,24px)}
.scene--svc .svc-screen{background:var(--paper-3);padding:clamp(6px,1.6cqi,12px)}
.scene--svc-hero{container-type:inline-size;padding:0}
.scene--svc-hero .svc-screen{max-width:760px;width:100%;margin-inline:auto}
.scene--svc{gap:clamp(10px,2cqi,16px)}
.client-chip{order:-1;justify-self:start;display:flex;background:#fff;border:1.5px solid var(--ink);border-radius:8px}
.client-chip img{display:block;height:clamp(40px,12cqi,56px);width:auto}
.client-mark{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:clamp(18px,2vw,28px) 0 0;font-size:15px;color:var(--muted)}
.client-mark img{display:block;height:clamp(76px,9vw,108px);width:auto;max-width:100%;background:#fff;border:1.5px solid var(--ink);border-radius:8px}
/* Who we work with (home page): a looping row of client logos. Pauses on hover, focus and the Pause button; still and scrollable under reduced motion. */
.clients{margin-block:var(--sec) clamp(28px,3.4vw,48px)}
.clients-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.clients-h{font:700 clamp(24px,2.8vw,36px)/1 var(--display);letter-spacing:-.045em}
.clients-pause{min-height:44px;padding:0 18px;background:transparent;border:1.5px solid var(--ink);border-radius:999px;font-size:14px;font-weight:650}
.clients-pause:hover{background:var(--ink);color:var(--paper)}
.marquee{--gap:clamp(28px,4vw,56px);display:flex;position:relative;overflow:hidden;padding-block:18px;border-block:1.5px solid var(--ink)}
.marquee:before,.marquee:after{content:'';position:absolute;z-index:1;top:0;bottom:0;width:clamp(24px,6%,90px);pointer-events:none}
.marquee:before{left:0;background:linear-gradient(90deg,var(--paper),#f2f4f700)}.marquee:after{right:0;background:linear-gradient(270deg,var(--paper),#f2f4f700)}
.marquee-track{flex:none;min-width:100%;display:flex;align-items:center;justify-content:space-around;gap:var(--gap);margin:0;padding:0 calc(var(--gap) / 2);list-style:none;animation:marquee 45s linear infinite}
.marquee-track li{flex:none;display:flex;background:#fff;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}
.marquee-track img{display:block;height:clamp(48px,5.5vw,68px);width:auto}
.marquee:hover .marquee-track,.clients.is-paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto}.marquee:before,.marquee:after{display:none}.marquee-track{animation:none}.marquee-track[aria-hidden]{display:none}.clients-pause{display:none!important}}
.built .limits{margin-top:14px}
.built .limits li{padding:0 0 0 26px;background:none;border:0;border-radius:0}
.svc-case{margin:0;font-weight:700;font-size:16px}
.svc-case a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:6px 0;border-bottom:1px solid #11111140;color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green),var(--orange)) no-repeat left bottom/0 2px;background-origin:border-box;transition:background-size .35s cubic-bezier(.3,.7,.3,1)}
.svc-case a span[aria-hidden]{flex:none;transition:transform .2s var(--ease)}
.svc-case a:hover,.svc-case a:focus-visible{background-size:100% 2px}
.svc-case a:hover span[aria-hidden],.svc-case a:focus-visible span[aria-hidden]{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.svc-case a,.svc-case a span[aria-hidden]{transition:none}.svc-case a:hover span[aria-hidden]{transform:none}}
.scene--shot .desk img{aspect-ratio:auto}
.stats+.case-intro{margin-top:20px}
@media(max-width:430px){.stats--big{grid-template-columns:1fr}.stats--big li:last-child:nth-child(odd){grid-column:auto}}

/* Tom Gray case study: colour, metrics and motion (2026-11-06). Motion only under no-preference; motion.js adds .js-anim. */
.tone-yt{--tone:#e62117}.tone-ig{--tone:#d62976}.tone-tt{--tone:#0fb5c4}.tone-ink{--tone:var(--ink)}
.stats--big li{border-top:8px solid var(--tone,var(--ink));background:color-mix(in srgb,var(--tone,var(--ink)) 9%,#fff)}
.stats--big strong{font-variant-numeric:tabular-nums}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bars li{display:grid;grid-template-columns:minmax(0,34ch) minmax(0,1fr) 5ch;align-items:center;gap:6px 16px}
.bar-label{font-size:16px;line-height:1.3;font-weight:600}
.bar-track{display:block;height:22px;border:1.5px solid var(--ink);border-radius:11px;background:#fff;overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--w,0%);background:var(--tone,var(--ink));border-radius:0 10px 10px 0}
.bar-val{font:700 20px/1 var(--display);letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:700px){.bars li{grid-template-columns:minmax(0,1fr) 5ch}.bar-label{grid-column:1/-1}}
.bw-1{--w:1%}.bw-2{--w:2%}.bw-3{--w:3%}.bw-4{--w:4%}.bw-5{--w:5%}.bw-6{--w:6%}.bw-7{--w:7%}.bw-8{--w:8%}.bw-9{--w:9%}.bw-10{--w:10%}.bw-11{--w:11%}.bw-12{--w:12%}.bw-13{--w:13%}.bw-14{--w:14%}.bw-15{--w:15%}.bw-16{--w:16%}.bw-17{--w:17%}.bw-18{--w:18%}.bw-19{--w:19%}.bw-20{--w:20%}.bw-21{--w:21%}.bw-22{--w:22%}.bw-23{--w:23%}.bw-24{--w:24%}.bw-25{--w:25%}.bw-26{--w:26%}.bw-27{--w:27%}.bw-28{--w:28%}.bw-29{--w:29%}.bw-30{--w:30%}.bw-31{--w:31%}.bw-32{--w:32%}.bw-33{--w:33%}.bw-34{--w:34%}.bw-35{--w:35%}.bw-36{--w:36%}.bw-37{--w:37%}.bw-38{--w:38%}.bw-39{--w:39%}.bw-40{--w:40%}.bw-41{--w:41%}.bw-42{--w:42%}.bw-43{--w:43%}.bw-44{--w:44%}.bw-45{--w:45%}.bw-46{--w:46%}.bw-47{--w:47%}.bw-48{--w:48%}.bw-49{--w:49%}.bw-50{--w:50%}.bw-51{--w:51%}.bw-52{--w:52%}.bw-53{--w:53%}.bw-54{--w:54%}.bw-55{--w:55%}.bw-56{--w:56%}.bw-57{--w:57%}.bw-58{--w:58%}.bw-59{--w:59%}.bw-60{--w:60%}.bw-61{--w:61%}.bw-62{--w:62%}.bw-63{--w:63%}.bw-64{--w:64%}.bw-65{--w:65%}.bw-66{--w:66%}.bw-67{--w:67%}.bw-68{--w:68%}.bw-69{--w:69%}.bw-70{--w:70%}.bw-71{--w:71%}.bw-72{--w:72%}.bw-73{--w:73%}.bw-74{--w:74%}.bw-75{--w:75%}.bw-76{--w:76%}.bw-77{--w:77%}.bw-78{--w:78%}.bw-79{--w:79%}.bw-80{--w:80%}.bw-81{--w:81%}.bw-82{--w:82%}.bw-83{--w:83%}.bw-84{--w:84%}.bw-85{--w:85%}.bw-86{--w:86%}.bw-87{--w:87%}.bw-88{--w:88%}.bw-89{--w:89%}.bw-90{--w:90%}.bw-91{--w:91%}.bw-92{--w:92%}.bw-93{--w:93%}.bw-94{--w:94%}.bw-95{--w:95%}.bw-96{--w:96%}.bw-97{--w:97%}.bw-98{--w:98%}.bw-99{--w:99%}.bw-100{--w:100%}
@keyframes tg-flow{to{stroke-dashoffset:-22}}
@keyframes tg-pulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes tg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
.scene--shot .desk{animation:tg-rise .8s cubic-bezier(.2,.7,.2,1) both}
.flow{stroke-dasharray:5 6;animation:tg-flow 1s linear infinite}
.pulse{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center;animation:tg-pulse 2.4s ease-out infinite}
.js-anim [data-reveal]:not(.in) li{opacity:0;transform:translateY(14px)}
.js-anim [data-reveal] li{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.js-anim [data-reveal] li:nth-child(2){transition-delay:70ms}.js-anim [data-reveal] li:nth-child(3){transition-delay:140ms}.js-anim [data-reveal] li:nth-child(4){transition-delay:210ms}.js-anim [data-reveal] li:nth-child(5){transition-delay:280ms}.js-anim [data-reveal] li:nth-child(6){transition-delay:350ms}.js-anim [data-reveal] li:nth-child(7){transition-delay:420ms}.js-anim [data-reveal] li:nth-child(8){transition-delay:490ms}
.js-anim .bars .bar-fill{transform:scaleX(0);transform-origin:left center}
.js-anim .bars.in .bar-fill{transform:none;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js-anim .bars.in li:nth-child(2) .bar-fill{transition-delay:90ms}.js-anim .bars.in li:nth-child(3) .bar-fill{transition-delay:180ms}.js-anim .bars.in li:nth-child(4) .bar-fill{transition-delay:270ms}.js-anim .bars.in li:nth-child(5) .bar-fill{transition-delay:360ms}.js-anim .bars.in li:nth-child(6) .bar-fill{transition-delay:450ms}
}

/* Tom Gray case study: headline figure, more tones, social and marketing links (2026-11-06) */
.tone-fb{--tone:#1877f2}
.hl-big{display:grid;gap:8px;padding:clamp(22px,3.4vw,40px);border:1.5px solid var(--ink);border-radius:10px;border-top:10px solid var(--tone,var(--ink));background:color-mix(in srgb,var(--tone,var(--ink)) 9%,#fff);container-type:inline-size}
.hl-big strong{display:block;font:700 clamp(54px,24cqi,168px)/.95 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.hl-big>span{font-size:clamp(18px,2.2vw,24px);line-height:1.3;font-weight:700}
.hl-big>.means{font-size:16px;font-weight:400;color:var(--muted);max-width:60ch}
.socials{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px}
.socials li{border:1.5px solid var(--ink);border-radius:7px;border-left:8px solid var(--tone,var(--ink));background:#fff}
.socials a{display:grid;gap:2px;padding:14px 16px;min-height:48px;color:inherit;text-decoration:none;height:100%;box-sizing:border-box}
.socials a:hover .soc-name,.socials a:focus-visible .soc-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.soc-name{font:700 20px/1.2 var(--display);letter-spacing:-.02em}
.soc-handle{font-size:15px;line-height:1.35;color:var(--muted)}
.soc-fig{font-size:15px;font-weight:700;line-height:1.35}
@media(prefers-reduced-motion:no-preference){
.js-anim [data-reveal]:not(.in) .hl-big,.js-anim .hl-big[data-reveal]:not(.in){opacity:0;transform:translateY(14px)}
.js-anim .hl-big[data-reveal]{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
}
@media(min-width:900px){.stats--c3{grid-template-columns:repeat(3,minmax(0,1fr))}.stats--c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bars+.case-intro,.socials+.case-intro,.case-intro+.socials{margin-top:20px}

/* App cards (home #apps and /portfolio/#apps), redesigned 2026-11-08 (notes/DECISIONS.md): no box and no white fill; the card sits on the page's own tint.
   Each app is a stage tinted with its accent (the same strength as the site's washes) holding the browser frame and the phone; then a number chip, the name,
   the tagline and two ruled link rows (the Websites cards' rows, shared in style.css). The card is a subgrid of six rows so in every row of cards the stages,
   chips, names, taglines and link rows line up. The stage is a container: a wide card shows the whole browser frame with the phone over its corner, a narrow one
   (a phone, or three across on a small laptop) zooms into a readable slice of the frame instead of shrinking it (focus point: card.focus in apps.json). */
.app-list{row-gap:0;column-gap:clamp(24px,3vw,40px)}
.app-list>.work-item{box-sizing:border-box;background:none;border:0;border-radius:0;padding:0 0 clamp(40px,5vw,64px)}
.app-list>.app-item:not(.svc-case-item){display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;grid-template-columns:minmax(0,1fr)}
.app-body{display:contents}
.app-item--blue{--accent:var(--blue)}.app-item--teal{--accent:var(--teal)}.app-item--orange{--accent:var(--orange)}.app-item--green{--accent:var(--green)}
.app-fig{container-type:inline-size}
/* The pair is centred by construction (2026-11-08, notes/DECISIONS.md; scripts/check-apps-centre.mjs measures it). --m is the gap on BOTH sides, measured to the
   outermost drawn pixel: the browser frame's left edge on the left; on the right the phone's 1.5px ring (the frame's own shadow ends inside the phone).
   A two-phone card (Nascent) is the same rule: the left phone's -6px shadow reaches left of its box, the right phone's ring 1.5px right of its box. */
.app-stage{--m:5%;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:color-mix(in srgb,var(--accent) 17%,var(--paper))}
.app-stage .desk{position:absolute;left:var(--m);top:9%;width:80%;height:66%;display:flex;flex-direction:column;box-shadow:5px 6px 0 #11111126}
.app-stage .desk img{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;object-fit:cover;object-position:20% 0}
.app-stage.f-t .desk img{object-position:50% 0}.app-stage.f-c .desk img{object-position:50% 45%}
.app-stage .phone{right:calc(var(--m) + 1.5px);bottom:7%;width:25%;box-shadow:0 0 0 1.5px #000,inset 0 0 0 1px #3b3e46,-6px 10px 0 #11111126}
.app-stage .bar{min-width:0}.app-stage .bar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.app-stage--duo{--m:21%}
.app-stage--duo .phone{width:26%;bottom:auto;top:50%;transform:translateY(-50%)}
.app-stage--duo .phone:nth-of-type(1){right:auto;left:calc(var(--m) + 6px)}.app-stage--duo .phone:nth-of-type(2){right:calc(var(--m) + 1.5px)}
@container (max-width:399px){
  .app-stage{--m:6%;aspect-ratio:1/1.02}
  .app-stage .desk{top:6%;width:64%;height:70%}
  .app-stage .phone{width:36%;bottom:6%}
  .app-stage--duo{--m:9%}
  .app-stage--duo .phone{width:38%;bottom:auto}
}
.app-item .app-fig{margin-bottom:20px}
.app-item .app-kick{margin:0;display:flex;align-items:center;gap:8px;font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.app-kick b{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:6px;background:var(--accent);color:var(--ink);font-size:13px;letter-spacing:0}
.app-item h3{min-height:0;margin:12px 0 0;font:700 clamp(26px,2.4vw,32px)/1.02 var(--display);letter-spacing:-.04em;text-wrap:balance}
.app-item .tag{margin:8px 0 18px;font-size:16px;line-height:1.35}
.app-item:not(.svc-case-item) .credit{grid-row:5;margin:0}
.app-item:not(.svc-case-item) .card-more{grid-row:6}
.app-item:not(.svc-case-item) .tag+.card-more{border-top:1.5px solid var(--ink)}
@media(prefers-reduced-motion:no-preference){.app-item .app-stage{transition:transform .35s var(--ease)}.app-item:hover .app-stage{transform:translateY(-4px)}}

/* Service case cards on /portfolio/: unboxed too, the picture on the page tint, then the name and the Websites-style row */
.app-list>.svc-case-item{display:flex;flex-direction:column}
.app-list>.svc-case-item .scene{flex:1 0 auto;margin-bottom:0}
.app-list>.svc-case-item .scene--shot{display:flex;flex-direction:column;justify-content:center}
.app-list>.svc-case-item h3{min-height:0;margin:20px 0 0}
.app-list>.svc-case-item .tag{margin:8px 0 18px}
.app-list>.svc-case-item .card-more{margin-top:auto}

/* A browser-window capture sits on a tinted stage in the case's colour, never white on a white card (Ed, 2026-11-06) */
.work-item .scene.scene--shot,.case-hero .scene.scene--shot{background:none;border:0;border-radius:0;padding:0 0 clamp(20px,4vw,36px);margin-bottom:0}

/* Services cards: both cases share one tinted stage of equal height, content centred; the client logo sits unframed on the tint, larger (2026-11-10) */
.app-list>.work-item.svc-case-item .scene{display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3cqi,26px);box-sizing:border-box;min-height:clamp(320px,46vw,430px);background:color-mix(in srgb,var(--accent) 17%,#fff);border:1.5px solid var(--ink);border-radius:10px;padding:clamp(18px,3.6vw,32px)}
.app-list>.work-item.svc-case-item .scene--svc .svc-screen{background:#fff;padding:clamp(8px,1.6vw,14px)}
.app-list>.work-item.svc-case-item .client-chip{order:-1;align-self:flex-start;background:none;border:0;border-radius:0;box-shadow:none}
.app-list>.work-item.svc-case-item .client-chip img{height:clamp(56px,9vw,92px);width:auto;mix-blend-mode:multiply}

/* Tom Gray stats on a phone (2026-11-06, Ed: too many numbers): first four tiles in two columns, the rest under "All numbers". Wider screens show every tile. */
.stats-more{display:none}
.stats-more+.case-intro{margin-top:20px}
@media(max-width:640px){
  .stats--big{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stats--big li{padding:12px}
  .stats--big li.x-more,.stats--big li>span.means{display:none}
  .stats--big strong{font-size:clamp(18px,13cqi,30px)}
  .stats--big li>span{margin-top:4px;font-size:14px}
  .stats--big li:last-child:nth-child(odd){grid-column:auto}
  .stats-more+.case-intro{margin-top:18px}
  .stats-more{display:block;margin-top:12px;border:1.5px solid var(--ink);border-radius:10px;background:#fff}
  .stats-more summary{cursor:pointer;min-height:44px;padding:0 14px;display:flex;align-items:center;font-weight:700;font-size:16px}
  .more-rows{list-style:none;margin:0;padding:0 14px 6px}
  .more-rows li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0 10px 12px;border-top:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);border-left:5px solid var(--tone,var(--ink));font-size:15px}
  .more-rows strong{font-variant-numeric:tabular-nums;white-space:nowrap}
}

/* Animated three-step strip (From idea to short clips). Drawings are inline SVG from content/apps/svg and are complete when still (reduced motion shows them as they are). Each scene builds up, holds its finished picture, then resets together. */
.flow-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
@media(max-width:860px){.flow-grid{grid-template-columns:1fr}}
.flow-step{display:grid;gap:14px;align-content:start;box-sizing:border-box;border:1.5px solid var(--ink);border-radius:14px;background:#fff;padding:clamp(16px,2.4vw,22px)}
.flow-fig{border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--tone,var(--ink)) 12%,#fff);padding:clamp(8px,1.6vw,12px)}
.flow-svg{display:block;width:100%;height:auto}
.flow-top{display:flex;align-items:center;gap:12px}
.flow-top .n{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:16px}
.flow-step h3{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.2}
.flow-step p{margin:0;font-size:16px;line-height:1.45;color:var(--muted)}
.flow-svg *{transform-box:fill-box;transform-origin:center}
.flow-svg .tg-curl{transform-box:view-box;transform-origin:146px 102px}
.flow-svg .tg-fill,.flow-svg .tg-prog,.flow-svg .tg-steam rect{transform-origin:left center}
.flow-svg .tg-eq{transform-origin:center bottom}
@media(prefers-reduced-motion:no-preference){
.js-anim .flow-grid:not(.in) .flow-svg *{animation-play-state:paused}
/* 1 Ideas gathered: 9s, cards arrive 1.6s to 4s, star at 5s, held to 8.1s */
.tg-dot{animation:tgDot 1.5s ease-in infinite}
.tg-dot.p1{--dx:36px;--dy:60px}.tg-dot.p2{--dx:36px;--dy:20px;animation-delay:.35s}.tg-dot.p3{--dx:36px;--dy:-20px;animation-delay:.7s}.tg-dot.p4{--dx:36px;--dy:-60px;animation-delay:1.05s}
.tg-ring{animation:tgSpin 4s linear infinite}
.tg-spark{animation:tgPulse 1.5s ease-in-out infinite}
.tg-dash{animation:tgDash 1s linear infinite}
.tg-card.c1{animation:tgC1 9s ease-out infinite}.tg-card.c2{animation:tgC2 9s ease-out infinite}.tg-card.c3{animation:tgC3 9s ease-out infinite}.tg-card.c4{animation:tgC4 9s ease-out infinite}
.tg-best{animation:tgBest 9s ease-out infinite}
.tg-star{animation:tgStarIn 9s cubic-bezier(.2,.9,.3,1.4) infinite}
/* 2 He films: loops that never empty the frame */
.tg-rec{animation:tgBlink 1.2s steps(1) infinite}
.tg-focus{animation:tgFocus 2.4s ease-in-out infinite}
.tg-curl{animation:tgCurl 2.4s ease-in-out infinite}
.tg-fill{animation:tgFill 9s linear infinite}
.tg-eq{animation:tgEq .9s ease-in-out infinite alternate}
.tg-eq.q2{animation-delay:-.2s}.tg-eq.q3{animation-delay:-.45s;animation-duration:.7s}.tg-eq.q4{animation-delay:-.1s;animation-duration:1.1s}.tg-eq.q5{animation-delay:-.6s}.tg-eq.q6{animation-delay:-.3s;animation-duration:.8s}.tg-eq.q7{animation-delay:-.75s;animation-duration:1s}.tg-eq.q8{animation-delay:-.15s;animation-duration:.65s}.tg-eq.q9{animation-delay:-.5s}
.tg-steam rect{animation:tgType 4.5s ease-out infinite}
.tg-steam rect:nth-child(2){animation-delay:.9s}.tg-steam rect:nth-child(3){animation-delay:1.8s}
/* 3 Cut into short clips: 10s, playhead 0 to 6.2s, clips pop as it passes, all held to 9s */
.tg-scan{animation:tgScan 10s linear infinite}
.tg-seg.s1{animation:tgS1 10s ease-out infinite}.tg-seg.s2{animation:tgS2 10s ease-out infinite}.tg-seg.s3{animation:tgS3 10s ease-out infinite}
.tg-short.t1{animation:tgT1 10s cubic-bezier(.2,.9,.3,1.2) infinite}.tg-short.t2{animation:tgT2 10s cubic-bezier(.2,.9,.3,1.2) infinite}.tg-short.t3{animation:tgT3 10s cubic-bezier(.2,.9,.3,1.2) infinite}
.tg-prog{animation:tgFill 1.8s linear infinite}
}
@keyframes tgDot{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes tgSpin{to{transform:rotate(360deg)}}
@keyframes tgPulse{50%{transform:scale(1.25)}}
@keyframes tgDash{to{stroke-dashoffset:-8}}
@keyframes tgC1{0%,16%{opacity:0;transform:translateX(-16px)}22%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgC2{0%,25%{opacity:0;transform:translateX(-16px)}31%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgC3{0%,34%{opacity:0;transform:translateX(-16px)}40%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgC4{0%,43%{opacity:0;transform:translateX(-16px)}49%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgBest{0%,52%{opacity:0}58%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tgStarIn{0%,52%{opacity:0;transform:scale(.2) rotate(-40deg)}60%{opacity:1;transform:scale(1.4) rotate(10deg)}66%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tgBlink{0%{opacity:1}55%{opacity:.15}}
@keyframes tgFocus{0%,100%{transform:scale(1.12);opacity:.5}50%{transform:scale(1);opacity:1}}
@keyframes tgCurl{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-52deg)}}
@keyframes tgFill{0%{transform:scaleX(.02)}84%,96%{transform:scaleX(1)}100%{transform:scaleX(.02)}}
@keyframes tgEq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@keyframes tgType{0%{transform:scaleX(0)}40%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.2}}
@keyframes tgScan{0%{transform:translateX(0);opacity:1}62%{transform:translateX(284px);opacity:1}66%,100%{transform:translateX(284px);opacity:0}}
@keyframes tgS1{0%,6.5%{opacity:0}9%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tgS2{0%,28%{opacity:0}30.5%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tgS3{0%,47%{opacity:0}49.5%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tgT1{0%,12%{opacity:0;transform:translateY(22px) scale(.85)}16%{opacity:1;transform:translateY(-4px) scale(1.04)}19%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes tgT2{0%,34%{opacity:0;transform:translateY(22px) scale(.85)}38%{opacity:1;transform:translateY(-4px) scale(1.04)}41%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes tgT3{0%,53%{opacity:0;transform:translateY(22px) scale(.85)}57%{opacity:1;transform:translateY(-4px) scale(1.04)}60%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}

/* "Before and now": the Now card gets the footer credit badge's effect, a four-colour line that sweeps across on hover (and once when it scrolls in); its rings fill in turn. */
.cmp>li:last-child{position:relative;overflow:hidden;padding-bottom:calc(clamp(20px,3vw,28px) + 6px)}
.cmp>li:last-child::after{content:"";position:absolute;left:0;bottom:0;height:6px;width:100%;background:linear-gradient(90deg,#7f9bff,#3fb8af,#8fcb18,#f0a04b);transform:scaleX(.28);transform-origin:left;transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.cmp>li:last-child:hover::after,.cmp>li:last-child:focus-within::after{transform:scaleX(1)}
.cmp>li:last-child .limits li:before{transition:background .3s ease,transform .3s ease}
.cmp>li:last-child:hover .limits li:before,.cmp>li:last-child:focus-within .limits li:before{background:#3fb8af;transform:scale(1.15)}
.cmp>li:last-child:hover .limits li:nth-child(2):before{transition-delay:.12s}.cmp>li:last-child:hover .limits li:nth-child(3):before{transition-delay:.24s}.cmp>li:last-child:hover .limits li:nth-child(4):before{transition-delay:.36s}
@media(prefers-reduced-motion:no-preference){
.js-anim .cmp.in>li:last-child::after{animation:tgSweep 1.6s cubic-bezier(.3,.7,.3,1) .4s backwards}
}
@media(prefers-reduced-motion:reduce){.cmp>li:last-child::after,.cmp>li:last-child .limits li:before{transition:none}}
@keyframes tgSweep{0%{transform:scaleX(.28)}55%{transform:scaleX(1)}100%{transform:scaleX(.28)}}

/* How it works: his channel feeds the hub, which sends out ideas and short clips (9s loop, finished picture held, then resets). Still picture is complete. */
.tg-hiw *{transform-box:fill-box;transform-origin:center}
.tg-hiw .tg-ring1,.tg-hiw .tg-ring2,.tg-hiw .tg-orbit{transform-box:view-box;transform-origin:320px 140px}
.tg-hiw .t-b{font-size:14px}
.tg-hiw .tg-prog{transform-origin:left center}
@media(prefers-reduced-motion:no-preference){
.tg-hiw .tg-comet{animation:tgComet .9s linear infinite}
.tg-hiw .tg-ring1{animation:tgSpin 6s linear infinite}
.tg-hiw .tg-ring2{animation:tgSpin 9s linear infinite reverse}
.tg-hiw .tg-orbit{animation:tgSpin 7s linear infinite}
.tg-hiw .tg-spark{animation:tgPulse 1.6s ease-in-out infinite}
.tg-hiw .tg-vid.v1{animation:hV1 9s ease-out infinite}.tg-hiw .tg-vid.v2{animation:hV2 9s ease-out infinite}.tg-hiw .tg-vid.v3{animation:hV3 9s ease-out infinite}
.tg-hiw .tg-idea.i1{animation:hI1 9s ease-out infinite}.tg-hiw .tg-idea.i2{animation:hI2 9s ease-out infinite}.tg-hiw .tg-idea.i3{animation:hI3 9s ease-out infinite}
.tg-hiw .tg-best{animation:hBest 9s ease-out infinite}
.tg-hiw .tg-star{animation:hStar 9s cubic-bezier(.2,.9,.3,1.4) infinite}
.tg-hiw .tg-short.t1{animation:hT1 9s cubic-bezier(.2,.9,.3,1.2) infinite}.tg-hiw .tg-short.t2{animation:hT2 9s cubic-bezier(.2,.9,.3,1.2) infinite}.tg-hiw .tg-short.t3{animation:hT3 9s cubic-bezier(.2,.9,.3,1.2) infinite}
}
@keyframes tgComet{to{stroke-dashoffset:-16}}
@keyframes hV1{0%,2%{opacity:0;transform:translateX(-18px)}6%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hV2{0%,7.5%{opacity:0;transform:translateX(-18px)}12%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hV3{0%,13%{opacity:0;transform:translateX(-18px)}18%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hI1{0%,33%{opacity:0;transform:translateX(-16px)}38%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hI2{0%,40%{opacity:0;transform:translateX(-16px)}45%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hI3{0%,47%{opacity:0;transform:translateX(-16px)}52%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hBest{0%,54%{opacity:0}60%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes hStar{0%,54%{opacity:0;transform:scale(.2) rotate(-40deg)}62%{opacity:1;transform:scale(1.4) rotate(10deg)}68%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hT1{0%,44%{opacity:0;transform:translateY(22px) scale(.85)}49%{opacity:1;transform:translateY(-4px) scale(1.04)}52%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes hT2{0%,52%{opacity:0;transform:translateY(22px) scale(.85)}57%{opacity:1;transform:translateY(-4px) scale(1.04)}60%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes hT3{0%,60%{opacity:0;transform:translateY(22px) scale(.85)}65%{opacity:1;transform:translateY(-4px) scale(1.04)}68%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}

/* Blog links: "From the blog" on the home page and "How we built it" on app pages (build-blog.mjs, build-apps.mjs). Ruled rows, text only. */
.blog-list{list-style:none;margin:var(--head) 0 0;padding:0;max-width:880px;border-top:1.5px solid var(--ink)}
.blog-list li{border-bottom:1.5px solid var(--ink)}
.blog-list a{display:grid;gap:4px;padding:18px 0;text-decoration:none;min-height:44px}
.blog-t{font:700 clamp(19px,2vw,24px)/1.2 var(--display);letter-spacing:-.03em}
.blog-d{font-size:clamp(15px,1.4vw,17px);line-height:1.5;color:var(--ink-soft,#3f444d);max-width:62ch}
.blog-list a:hover .blog-t,.blog-list a:focus-visible .blog-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.blog-more{margin:var(--head) 0 0}
.case-sec .blog-list{margin-top:14px;border-top:0}
/* Home: the blog as three cover cards. The picture is the post's own cover (real art, copied to dist/img/blog/), the card lifts on hover like the other cards on the site. */
.blog-cards{list-style:none;margin:var(--head) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
.blog-cards li{display:flex}
.blog-cards a{display:flex;flex-direction:column;gap:10px;width:100%;text-decoration:none}
.blog-pic{display:block;border:1.5px solid var(--ink);background:var(--paper-2);aspect-ratio:1200/630;overflow:hidden;transition:transform .18s cubic-bezier(.3,.7,.3,1),box-shadow .18s cubic-bezier(.3,.7,.3,1)}
.blog-pic img{display:block;width:100%;height:100%;object-fit:cover}
.blog-cards a:is(:hover,:focus-visible) .blog-pic{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.blog-cat{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:700 12px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.blog-cat i{width:10px;height:10px;background:var(--blue);border:1px solid #11111140}
.blog-cat.blog-green i{background:var(--green)}.blog-cat.blog-teal i{background:var(--teal)}.blog-cat.blog-orange i{background:var(--orange)}
.blog-cards .blog-t{font:700 clamp(22px,2.1vw,28px)/1.12 var(--display);letter-spacing:-.035em;text-wrap:balance}
.blog-cards .blog-d{font-size:16px;line-height:1.5;color:var(--ink-soft,#3f444d)}
.blog-go{margin-top:auto;padding-top:4px;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.blog-go b{font-weight:500;transition:transform .18s cubic-bezier(.3,.7,.3,1)}
.blog-cards a:hover .blog-go b{transform:translateX(4px)}
.blog-cards a:hover .blog-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
@media(max-width:899px){.blog-cards{grid-template-columns:1fr}}
@media(min-width:560px) and (max-width:899px){
  .blog-cards a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:24px;row-gap:10px;align-items:start}
  .blog-pic{grid-row:1/-1;grid-column:1}
  .blog-cat{grid-column:2;grid-row:2;margin-top:0}
  .blog-cards .blog-t{grid-column:2;grid-row:3}
  .blog-cards .blog-d{grid-column:2;grid-row:4}
  .blog-go{grid-column:2;grid-row:5;margin-top:0}
}
@media(prefers-reduced-motion:reduce){.blog-pic,.blog-go b{transition:none}.blog-cards a:is(:hover,:focus-visible) .blog-pic{transform:none}.blog-cards a:hover .blog-go b{transform:none}}

/* Tom Gray's card: his channel avatar and handle stand in for a logo (2026-11-10) */
.app-list>.work-item.svc-case-item .client-chan{display:flex;align-items:center;gap:14px;align-self:flex-start}
.app-list>.work-item.svc-case-item .client-chan img{height:clamp(56px,9vw,92px);width:auto;aspect-ratio:1;border-radius:50%;mix-blend-mode:normal;border:1.5px solid var(--ink)}
.chan-handle{font:700 clamp(15px,2vw,19px)/1.2 var(--body);color:var(--ink)}

/* dist/seo.css */
/* Search pages and the /services/ hub (scripts/build-seo.mjs). Builds on work.css (sections, buttons, crumbs) and apps.css (the drawn diagrams).
   One accent per page, from its group: teal websites, orange rescue, blue software, green growth. */
.seo{--accent:var(--teal);padding-bottom:var(--sec)}
.seo--teal{--accent:var(--teal)}.seo--orange{--accent:var(--orange)}.seo--blue{--accent:var(--blue)}.seo--green{--accent:var(--green)}

/* Hero: copy on the left, the drawing on the right; stacked below 960px with the drawing under the buttons */
.seo-hero{display:grid;gap:clamp(28px,4vw,56px);align-items:center;padding-top:clamp(8px,1.5vw,20px)}
@media(min-width:960px){.seo-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.seo-hero-copy{min-width:0}
.seo-kicker{display:inline-flex;align-items:center;gap:10px;margin:clamp(14px,2vw,24px) 0 0;font:700 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase}
.seo-dot{width:11px;height:11px;flex:none;background:var(--accent);border:1px solid #11111140}
.seo-hero h1{margin:14px 0 0;font:700 clamp(38px,5.3vw,78px)/.97 var(--display);letter-spacing:-.05em;overflow-wrap:break-word}
.seo-lede{margin:clamp(16px,2vw,24px) 0 0;max-width:42ch;font-size:clamp(18px,1.7vw,22px);line-height:1.4}
.seo-promise{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.seo-promise:before{content:"";flex:none;width:6px;height:11px;margin:3px 6px 0 4px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.seo-hero .case-btn{min-height:52px}
.seo-arr{width:18px;height:18px;flex:none}
.seo-bi{width:20px;height:20px;flex:none}
.seo-art{margin:0;min-width:0;max-width:640px;width:100%;justify-self:center}
.seo-art .svc-screen{padding:clamp(8px,1.4vw,14px);background:var(--paper-3);box-shadow:8px 9px 0 var(--accent),8px 9px 0 1.5px var(--ink)}
.seo-hero--hub{grid-template-columns:minmax(0,1fr)}
.seo-hero--hub .seo-hero-copy{max-width:60rem}

/* The problem, in the buyer's words */
.seo-pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0 40px}
.seo-pains li{position:relative;padding:16px 0 16px 28px;border-bottom:1px solid var(--line);font-size:clamp(17px,1.5vw,19px);line-height:1.45}
.seo-pains li:before{content:"";position:absolute;left:0;top:calc(16px + .42em);width:11px;height:11px;background:var(--accent);border:1px solid #11111140}
/* A symptom checklist the visitor can tick through (no script: plain checkboxes) */
.seo-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px}
.seo-check li{position:relative}
/* The whole row is the checkbox (a 60px tap target); the box is drawn on the label */
.seo-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.seo-check label{position:relative;display:flex;align-items:center;min-height:60px;padding:12px 18px 12px 60px;background:var(--paper-3);border:1.5px solid var(--ink);border-radius:7px;font-size:17px;line-height:1.4;cursor:pointer}
.seo-check label:before{content:"";position:absolute;left:18px;top:50%;width:26px;height:26px;margin-top:-13px;background:#fff;border:2px solid var(--ink);border-radius:5px;box-sizing:border-box}
.seo-check label:after{content:"";position:absolute;left:27px;top:50%;width:7px;height:13px;margin-top:-9px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg);opacity:0}
.seo-check input:checked+label:before{background:var(--accent)}
.seo-check input:checked+label:after{opacity:1}
.seo-check input:checked+label{box-shadow:4px 5px 0 #11111126}
.seo-check input:focus-visible+label{outline:3px solid var(--ink);outline-offset:3px}

/* What you get: one icon tile per item */
.seo-get{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-get--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.seo-get--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){.seo-get{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.seo-get,.seo-get--4{grid-template-columns:minmax(0,1fr)}}
.seo-get li{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px;background:#fff;border:1.5px solid var(--ink);border-radius:7px}
.seo-get h3{margin:6px 0 0;font:700 clamp(20px,1.8vw,23px)/1.12 var(--display);letter-spacing:-.03em}
.seo-get p{margin:0;font-size:16px;line-height:1.5}
.seo-ic{display:grid;place-items:center;width:56px;height:56px;flex:none;background:var(--accent);border:1.5px solid var(--ink);border-radius:10px}
.seo-ic .ic{width:34px;height:34px}

/* How it works: numbered steps */
.seo-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:st}
.seo-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.seo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-steps--3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.seo-steps{grid-template-columns:minmax(0,1fr)}}
.seo-steps li{counter-increment:st;min-width:0;padding-top:18px;border-top:3px solid var(--ink)}
.seo-steps li:before{content:counter(st);display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;background:var(--ink);color:var(--paper);border-radius:50%;font:700 20px/1 var(--display)}
.seo-steps h3{margin:0 0 8px;font:700 clamp(20px,1.8vw,23px)/1.12 var(--display);letter-spacing:-.03em}
.seo-steps p{margin:0;font-size:16px;line-height:1.5}

/* Proof and related cards: real work only, each a link */
.seo-proof,.hub-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}
.hub-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.seo-proof a,.hub-cards a{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;min-height:44px;padding:20px 52px 20px 20px;background:#fff;border:1.5px solid var(--ink);border-radius:7px;color:var(--ink);text-decoration:none;transition:box-shadow .16s,transform .16s}
.seo-proof a:hover,.hub-cards a:hover{box-shadow:5px 6px 0 #11111126}
@media(prefers-reduced-motion:no-preference){.seo-proof a:hover,.hub-cards a:hover{transform:translate(-2px,-2px)}}
.seo-proof-k{font:700 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.seo-proof strong,.hub-cards strong{font:700 clamp(20px,1.8vw,23px)/1.12 var(--display);letter-spacing:-.03em}
.seo-proof span:not(.seo-proof-k),.hub-cards span:not(.seo-ic){font-size:15px;line-height:1.45}
.seo-proof .seo-arr,.hub-cards .seo-arr{position:absolute;right:18px;top:22px}
.hub-cards a{padding-top:18px}
.hub-cards .seo-ic{margin-bottom:8px}
.seo-ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:70ch}
.seo-ticks li{position:relative;padding-left:30px;font-size:clamp(17px,1.5vw,19px);line-height:1.5}
.seo-ticks li:before{content:"";position:absolute;left:5px;top:.3em;width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.seo-faq{max-width:900px}
.seo-faq details>div{font-size:16px;line-height:1.65}

/* Closing call to action, then related pages */
.seo-close{margin-top:var(--sec)}
.seo-close-box{padding:clamp(28px,5vw,64px);background:var(--ink);color:var(--paper);border-radius:12px;box-shadow:8px 9px 0 var(--accent)}
.seo-close-box h2{margin:0;max-width:22ch;font:700 clamp(32px,4.4vw,60px)/.98 var(--display);letter-spacing:-.045em;color:var(--paper)}
.seo-close-box>p:not(.case-actions){margin:16px 0 0;max-width:48ch;font-size:clamp(17px,1.5vw,20px);line-height:1.45}
.seo-btn-inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.seo-btn-inv:hover{background:#fff;border-color:#fff}
.seo-btn-inv-ghost{color:var(--paper);border-color:var(--paper)}
.seo-btn-inv-ghost:hover{background:var(--paper);color:var(--ink)}
.seo-close-box .case-btn:focus-visible{outline-color:var(--paper)}
.seo-rel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:28px}
.seo-rel>p{margin:0 6px 0 0;font:700 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase}
.seo-rel ul{display:contents;list-style:none}
.seo-rel li{display:contents}
.seo-rel ul a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:650;text-decoration:none}
.seo-rel ul a:hover{background:var(--ink);color:var(--paper)}
.seo-rel .seo-arr{width:16px;height:16px}
.seo-all{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:15px;font-weight:650;color:var(--ink);text-underline-offset:4px}
@media(max-width:620px){.seo-check label{font-size:16px}.seo-get li{padding:20px;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:10px;align-items:center}.seo-get h3{margin:0}.seo-get p{grid-column:1/-1}}