kicker did */
.hero h1>.h1k{margin-bottom:1.25rem;max-width:none}
.hero h1:has(>.h1k){margin-top:0}
.hero .lede,.lede{font-size:var(--fs-lede);line-height:1.6}
.head h2,.cta-grid h2,.cta h2,.h2{font-size:var(--fs-h2);line-height:1.08}
.case h3,.prod h3,.panel h3{font-size:clamp(1.5rem,2.4vw,2.125rem)}
.svc h3{font-size:1.1875rem}
.head p{font-size:var(--fs-lede)}
.proof strong{font-size:clamp(2.25rem,4vw,3.5rem)}
/* Hero trust row */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1.125rem;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.trust span{font:500 0.875rem var(--display);color:var(--muted)}
/* Why IT Brain */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.why > div{background:var(--ink);padding:1.75rem;display:grid;gap:0.875rem;align-content:start;min-width:0}
.why svg{width:2.25rem;height:2.25rem;color:var(--accent)}
.why h3{font-size:var(--fs-h3);font-weight:500;line-height:1.2}
.why p{color:var(--muted);font-size:0.9375rem}
@media (max-width:1000px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why{grid-template-columns:1fr}}
/* Insights */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.posts a{border:1px solid var(--line);padding:1.625rem;display:flex;flex-direction:column;gap:0.875rem;min-height:16.25rem;min-width:0;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.posts a:hover{--text:var(--inv-fg);--muted:var(--inv-muted);--accent:var(--inv-accent);background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.posts h3{font-size:var(--fs-h3);font-weight:500;line-height:1.25}
.posts .go{margin-top:auto;font:500 0.8125rem var(--mono);color:var(--accent)}
@media (max-width:900px){.posts{grid-template-columns:1fr}.posts a{min-height:auto}}
/* Featured services (6) + compact "more" list */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.feat > a{background:var(--ink);padding:clamp(1.25rem,2vw,1.625rem);display:flex;flex-direction:column;gap:0.5625rem;min-width:0;position:relative;transition:background var(--fast),color var(--fast)}
.feat > a:hover{--text:var(--inv-fg);--muted:var(--inv-muted);--accent:var(--inv-accent);--line-strong:#4a535a;background:var(--inv-bg);color:var(--inv-fg)}
.feat svg{width:2.125rem;height:2.125rem;color:var(--accent)}
.feat h3{font-size:var(--fs-h3);font-weight:500;line-height:1.2}
.feat p{color:var(--muted);font-size:0.9375rem}
.feat .proofline{font:500 0.75rem var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.feat .subs{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:auto;padding-top:0.5rem}
.feat .subs span{font:500 0.75rem var(--mono);color:var(--muted);border:1px solid var(--line-strong);padding:0.25rem 0.5rem}
.feat .tag{position:absolute;top:1.375rem;right:1.375rem;font:500 0.625rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0.25rem 0.4375rem;background:var(--accent);color:var(--on-accent)}
@media (max-width:1000px){.feat{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.feat{grid-template-columns:1fr}}
.more{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem;margin-top:1.25rem}
.more .label{margin-right:0.5rem}
.more a{font:500 0.75rem var(--mono);border:1px solid var(--line-strong);display:inline-flex;align-items:center;padding:0.375rem 0.625rem;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.more a:hover{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
#services .head{margin-bottom:clamp(1.25rem,3.5vh,2.5rem)}
/* ================= v10: every band fits one viewport ================= */
/* Spacing and type scale with viewport HEIGHT as well as width */
:root{--fs-display:clamp(2rem,min(4.2vw,6.6vh),3.75rem);--fs-h2:clamp(1.625rem,min(3vw,4.6vh),2.75rem);--fs-h3:clamp(1.125rem,min(1.6vw,2.6vh),1.4375rem)}
.screen{padding-block:calc(var(--nav) + clamp(0.875rem,3.5vh,3rem)) clamp(1.25rem,4.5vh,3.5rem)}
.head{margin-bottom:clamp(1rem,3.2vh,2.5rem);gap:clamp(0.5rem,1.4vh,1rem)}
.head p{font-size:clamp(0.9375rem,min(1.2vw,2vh),1.125rem)}
.head.split{align-items:end}
/* Services */
.feat > a{padding:clamp(0.875rem,2.3vh,1.625rem) clamp(1rem,1.8vw,1.625rem);gap:clamp(0.3125rem,.9vh,0.5625rem)}
.feat svg{width:clamp(1.5rem,3.2vh,2rem);height:clamp(1.5rem,3.2vh,2rem)}
.feat p{font-size:0.875rem;line-height:1.5}
.feat .subs{padding-top:0.25rem}
.more{margin-top:clamp(0.625rem,2vh,1.25rem)}
/* Featured work */
.case{gap:clamp(1.5rem,4vw,4rem)}
.devices .desk .vp{aspect-ratio:auto;height:clamp(13.75rem,40vh,26.25rem)}
.case h3{margin-block:0.5rem}
.facts{margin-block:clamp(0.75rem,2.4vh,1.5rem)}
.facts div{padding:clamp(0.5rem,1.3vh,0.875rem) 0}
.wcards{margin-top:clamp(0.875rem,3vh,2rem)}
.wcards a{padding:clamp(0.75rem,2vh,1.25rem) 1.25rem}
/* Products */
.prod .txt{padding:clamp(1rem,2.4vh,1.875rem) clamp(1.125rem,2vw,1.875rem);gap:clamp(0.375rem,1vh,0.75rem)}
.prod .ui{padding:clamp(0.75rem,2vh,1.5rem)}
.pos .it{padding:clamp(0.375rem,1vh,0.625rem) 0.5rem}.pos .it .sw{height:clamp(0.875rem,2.2vh,1.5rem)}
/* Why */
.why > div{padding:clamp(1rem,2.6vh,1.75rem);gap:clamp(0.5rem,1.4vh,0.875rem)}
.why svg{width:clamp(1.625rem,3.4vh,2.125rem);height:clamp(1.625rem,3.4vh,2.125rem)}
.quote{padding:clamp(1rem,2.6vh,2rem) clamp(1.125rem,2.4vw,2.25rem)}
.quote p{font-size:clamp(1.0625rem,min(1.8vw,2.8vh),1.5rem)}
/* Flow */
.flow{margin-block:0 clamp(1rem,3.4vh,2.25rem)}
.tiles > *{padding:clamp(0.875rem,2.2vh,1.375rem)}
/* Phone: grids become swipe rows so each band stays one screen tall */
@media (max-width:760px){
.feat,.why,.wcards,.prods,.tiles,.posts,.pillars,.gallery,.names{
display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;
overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:0.625rem!important;background:none!important;border:0!important;
margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
.feat::-webkit-scrollbar,.why::-webkit-scrollbar,.wcards::-webkit-scrollbar,.prods::-webkit-scrollbar,.tiles::-webkit-scrollbar,.posts::-webkit-scrollbar,.pillars::-webkit-scrollbar,.gallery::-webkit-scrollbar,.names::-webkit-scrollbar{display:none}
.feat > *,.why > *,.wcards > *,.prods > *,.tiles > *,.posts > *,.pillars > *,.gallery > *,.names > *{scroll-snap-align:start;border:1px solid var(--line)}
.names{grid-auto-columns:44%}
.names > *{border-color:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.pillars > div:last-child{grid-column:auto}
.swipe-hint{display:flex}
/* Hero: visual becomes a compact strip */
.hero .stack{aspect-ratio:auto;height:34vh}
.hero .w-pos{display:none}
.hero h1{max-width:none}
.hero .trust{margin-top:1.125rem}
.ind a{padding:0.875rem 0}
.ind span{display:none}
.two{gap:1.25rem}
.proof div{padding-block:0.875rem}
.faq summary{padding:1rem 0}
.devices .phone{display:none}
.devices{padding-right:0}
.devices .desk .vp{height:30vh}
.case .facts{display:none}
.steps{gap:1rem}.step p{font-size:0.875rem}
}
.swipe-hint{display:none;align-items:center;gap:0.5rem;margin-top:0.625rem;font:500 0.6875rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
/* v10b: body 0.9375rem; short laptop screens; phone fit */
body{font-size:0.9375rem}
.lede,.hero .lede{font-size:clamp(0.9375rem,min(1.15vw,2vh),1.125rem)}
@media (min-width:761px) and (max-height:820px){
.feat .subs{display:none}
.feat p{font-size:0.8438rem}
.devices .desk .vp{height:34vh}
.case .muted{font-size:0.875rem}
.wcards span{display:none}
}
@media (max-width:760px){
.hero .kicker .chip:not(.on){display:none}
.hero .stack{height:24vh}
.hero .w-feed{display:none}
.hero .w-site{inset:0}
.hero h1{margin-block:0.875rem}
.hero .lede{margin-bottom:1.25rem}
.flow .node small{display:none}
.flow .node{padding-bottom:0.875rem}
.work-lede,.case .muted{display:none}
.devices .desk .vp{height:24vh}
.step p{display:none}
.step h3{margin-top:0}
.faq details[open]:not(:first-child) p{display:block}
.faq summary{font-size:1rem;padding:0.8125rem 0}
.faq details p{font-size:0.875rem}
#faq .muted{display:none}
.cta-grid h2{margin-block:0.625rem 0.75rem}
.cta-grid > div > p,.cta-grid .contact-list{display:none}
.cta-grid .ctas{margin-top:0.75rem!important}
.form{gap:0.75rem;padding:1.125rem}
.form label:has(#q-co),.form label:has(#q-msg),.form label:has(#s-url),.form label:has(#k-co){display:none}
.why > div{padding:1rem}
.prod .txt p{font-size:0.875rem}
}
@media (max-width:760px){
.hero .stack{height:20vh}
.hero .trust .label{display:none}
.hero .trust{gap:0.375rem 0.875rem;padding-top:0.875rem}
.flow .node .was{display:none}
.flow .node{padding-bottom:0.625rem}
#work .head{margin-bottom:0.75rem}
}
@media (max-width:760px){
.swipe-hint{display:flex}
.screen{padding-bottom:1rem}
.hero .lede{margin-bottom:1rem}
.flow .node{padding-bottom:0.5rem}
}
/* ================= v11: equal cards + consistent vertical rhythm ================= */
/* Cards share row tracks (subgrid): icon, proof, title, text, tags line up across a row */
.feat{grid-auto-rows:auto}
.feat > a{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:clamp(0.375rem,1vh,0.625rem);align-content:start}
.feat .top{display:flex;justify-content:space-between;align-items:center}
.feat .tag{position:static}
.feat .proofline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat .subs{margin-top:0;padding-top:0.25rem;align-self:end;flex-wrap:nowrap}
.why > div,.posts a,.wcards a{align-content:start}
/* Vertical rhythm: content bands start at the same offset under the nav; spare space falls below.
Single-message bands (hero, proof, quote) stay centred. */
.screen{justify-content:flex-start}
.screen.hero,.screen.blue{justify-content:center}
.screen > .wrap.two{align-items:start}
/* Body block fills the band: equal top AND bottom margins on every content band */
.screen:not(.hero):not(.blue) > .wrap:not(.two):not(.cta-grid){flex:1;display:flex;flex-direction:column}
.fill{flex:1 1 auto;min-height:0}
.feat.fill{grid-template-rows:repeat(2,auto auto auto 1fr auto)}
@media (max-width:1000px){.feat.fill{grid-template-rows:repeat(3,auto auto auto 1fr auto)}}
.why.fill,.posts.fill,.tiles.fill,.prods.fill{align-items:stretch}
.posts.fill a,.why.fill > div{height:100%}
.ind.fill{display:flex;flex-direction:column}
.ind.fill a{flex:1}
.steps.fill{align-content:center}
.case.fill{align-items:center}
.screen > .wrap.two{flex:1;align-content:start}
/* Equal visible margins: gap under the nav == gap above the band's bottom edge */
:root{--band-gap:clamp(0.875rem,3.5vh,3rem)}
.screen{padding-block:calc(var(--nav) + var(--band-gap)) var(--band-gap)}
/* FAQ: questions spread over the full band height */
#faq .wrap.two{grid-template-rows:1fr}
#faq .faq{display:grid;grid-template-rows:repeat(5,minmax(min-content,1fr));align-content:stretch}
#faq .faq details{display:block}
/* Phones: cards leave the shared subgrid (swipe row) */
@media (max-width:760px){
.feat.fill{grid-template-rows:none}
.feat > a{display:flex;flex-direction:column;grid-row:auto}
.feat .subs{flex-wrap:wrap;margin-top:auto}
#faq .faq{grid-template-rows:none}
}
#faq .faq{display:flex;flex-direction:column;justify-content:space-between;grid-template-rows:none;height:100%}
@media (max-width:760px){#faq .wrap.two{grid-template-rows:none}#faq .faq{height:auto;justify-content:flex-start}}
@media (min-width:761px){#faq .faq{height:auto;align-self:stretch}#faq .wrap.two{align-items:stretch;min-height:0}}
/* ================= v12: undo stretching; centre the body block under a pinned heading ================= */
.fill{flex:none}
.feat.fill{grid-template-rows:repeat(2,auto auto auto auto auto)}
@media (max-width:1000px){.feat.fill{grid-template-rows:repeat(3,auto auto auto auto auto)}}
.posts.fill a,.why.fill > div{height:auto}
.posts a{min-height:clamp(9rem,24vh,13rem)}
.ind.fill a{flex:none}
.steps.fill{align-content:start}
#faq .faq{justify-content:flex-start;height:auto}
#faq .wrap.two{align-items:start;grid-template-rows:none}
/* Industries: same column positions on every row */
.ind a{grid-template-columns:minmax(0,34%) minmax(0,1fr) 12rem}
.ind em{text-align:right}
@media (max-width:760px){.ind a{grid-template-columns:1fr auto}}
.prods.fill{align-items:start}.prod{grid-template-rows:auto auto}.prod .ui{align-content:start}
/* Phone overrides must stay LAST in this file (later desktop rules were overriding them) */
@media (max-width:760px){
.feat.fill{grid-template-rows:none}
.quote p{font-size:1.0625rem}
.quote{grid-template-columns:1fr}
}
/* Tablet / half-screen (761–1000px): keep desktop structure, tighter */
@media (min-width:761px) and (max-width:1000px){
.hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem}
.hero .stack{aspect-ratio:auto;height:min(52vh,26rem)}
.hero .w-pos{display:none}
.hero .w-feed{width:62%}
.feat,.feat.fill{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto auto auto auto auto)}
.feat .subs{display:none}
.feat p{font-size:0.8125rem}
.why{grid-template-columns:repeat(4,minmax(0,1fr))}
.why p{font-size:0.8125rem}
.case{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.prods{grid-template-columns:1fr 1fr}
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.steps .rail{left:0;right:0;top:15px;bottom:auto;width:auto;height:2px}
.steps .rail i{transform-origin:left}
.step{padding:0 1rem 0 0}.step .n{position:relative}
.flow{grid-template-columns:repeat(5,minmax(0,1fr))}
.flow .node{grid-template-columns:none;padding:1rem 1rem 1rem 0}
.flow .line{left:1.6rem;right:0;top:2.75rem;bottom:auto;width:auto;height:2px}
.wcards{grid-template-columns:repeat(3,minmax(0,1fr))}
.cta-grid{grid-template-columns:1fr 1fr}
.fgrid{grid-template-columns:1.4fr repeat(3,1fr)}
}
/* ================= v13: elastic visuals. Head pinned, body fills, constant top/bottom gaps ================= */
.fill{flex:1 1 0;min-height:0}
/* Services + flow tiles: text top, tags/links pinned bottom */
.feat.fill{grid-template-rows:repeat(2,auto auto auto 1fr auto)}
.tiles.fill{grid-auto-rows:1fr}
.tiles.fill > a{display:flex;flex-direction:column}
.tiles.fill .link{margin-top:auto}
/* Work: screenshot frame is elastic */
.case.fill{align-items:stretch}
.case.fill > .rv:last-child{align-self:center}
.case.fill .devices{display:flex;flex-direction:column;min-height:0}
.case.fill .desk{flex:1;display:flex;flex-direction:column;min-height:0}
.case.fill .desk .vp{flex:1;height:auto;min-height:0}
/* Products: mock-up screen is elastic */
.prods.fill{align-items:stretch}
.prods.fill .prod{grid-template-rows:auto 1fr;min-height:0}
.prods.fill .prod .ui{overflow:hidden;align-content:start}
/* Industries: rows spread evenly */
.ind.fill{display:flex;flex-direction:column}
.ind.fill a{flex:1}
/* Why: testimonials elastic, author pinned bottom */
.tquotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.8fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(0.75rem,2vh,1.25rem)}
.tquotes figure{margin:0;background:var(--plane);padding:clamp(1rem,2.4vh,1.75rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.tquotes blockquote{margin:0;font:400 clamp(0.95rem,min(1.1vw,1.9vh),1.15rem)/1.5 var(--display);color:var(--text)}
.tquotes blockquote::before{content:"“";display:block;font:600 2.5rem/0.6 var(--display);color:var(--accent);margin-bottom:0.5rem}
.tquotes figcaption{margin-top:auto;display:grid;gap:0.125rem;font-size:0.8125rem;color:var(--muted)}
.tquotes figcaption b{font:500 0.9375rem var(--body);color:var(--text)}
.tquotes .rating{background:var(--accent);color:var(--on-accent);padding:clamp(1rem,2.4vh,1.75rem);display:flex;flex-direction:column;justify-content:flex-end;gap:0.375rem}
.tquotes .rating strong{font:600 clamp(2.5rem,5vw,4rem)/1 var(--display)}
.tquotes .rating .stars{letter-spacing:0.2em}
.tquotes .rating span:last-child{font-size:0.875rem}
/* Process: Gantt chart is elastic */
.gantt{border:1px solid var(--line);background:var(--plane);margin-block:clamp(1rem,2.6vh,1.75rem);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.g-head{display:grid;grid-template-columns:11rem 1fr;align-items:center;padding:0.75rem 1rem;border-bottom:1px solid var(--line)}
.g-weeks{display:grid;grid-template-columns:repeat(10,1fr);font:500 0.6875rem var(--mono);color:var(--muted)}
.g-rows{flex:1;display:flex;flex-direction:column;min-height:0}
.g-row{flex:1;display:grid;grid-template-columns:11rem 1fr;align-items:center;padding:0 1rem;min-height:1.5rem;position:relative}
.g-row span{font:500 0.8125rem var(--mono);color:var(--muted)}
.g-row b{display:block;height:clamp(0.5rem,1.4vh,0.875rem);background:var(--accent-2);margin-left:calc(var(--s) * 10%);width:calc((var(--e) - var(--s)) * 10%)}
.g-row b.hl{background:var(--accent)}
.g-row b.soft{background:transparent;border:1px dashed var(--accent)}
@media (prefers-reduced-motion:no-preference){.gantt .g-row b{transform-origin:left;transition:transform 600ms var(--ease)}.gantt:not(.in) .g-row b{transform:scaleX(.15)}}
#faq .wrap.two{align-items:stretch}
#faq .wrap.two > div:first-child{display:flex;flex-direction:column;min-height:0}
/* Insights: coded cover art is elastic */
.posts.fill{align-items:stretch;grid-auto-rows:1fr}
.posts.fill a{min-height:0;height:auto;padding:0;gap:0;overflow:hidden}
.posts .cover{flex:1;min-height:4rem;display:grid;place-items:center;border-bottom:1px solid var(--line);color:var(--accent);
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:2rem 2rem;transition:background-color var(--fast)}
.posts .cover svg{width:clamp(2.5rem,8vh,5rem);height:clamp(2.5rem,8vh,5rem)}
.posts.fill a > .label,.posts.fill a > h3,.posts.fill a > .go{padding-inline:1.5rem}
.posts.fill a > .label{padding-top:1.25rem}
.posts.fill a > h3{padding-top:0.5rem}
.posts.fill a > .go{padding-block:1rem 1.25rem;margin-top:0}
.posts a:hover .cover{background-color:color-mix(in srgb,var(--accent) 12%,transparent)}
@media (max-width:1000px){.tquotes{grid-template-columns:1fr 1fr}.g-head,.g-row{grid-template-columns:8rem 1fr}}
#faq .wrap.two{align-content:stretch;grid-template-rows:minmax(0,1fr)}
.prods.fill .pos{align-items:start}.prods.fill .pos .cart{position:sticky;top:0}
@media (min-width:761px) and (max-width:1000px){#faq .wrap.two{grid-template-columns:1fr 1fr}}
@media (min-width:761px) and (max-height:820px){#why .head p{display:none}#why .why > div{padding:0.875rem 1rem;gap:0.5rem}#why .why p{font-size:0.8125rem}.tquotes figure,.tquotes .rating{padding:0.875rem 1rem}.tquotes blockquote{font-size:0.875rem}.tquotes blockquote::before{font-size:1.75rem}}
/* Products: compact Shopify apps row */
.apps{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(0.75rem,2vh,1.25rem);align-items:stretch}
.apps .label{background:var(--ink);display:flex;align-items:center;padding:0 1.25rem;color:var(--accent)}
.apps a{background:var(--ink);padding:clamp(0.75rem,1.8vh,1.125rem) 1.25rem;display:grid;gap:0.25rem;min-width:0;transition:background var(--fast),color var(--fast)}
.apps a b{font:500 1rem var(--display)}
.apps a span{color:var(--muted);font-size:0.8125rem;line-height:1.4}
.apps a:hover{--text:var(--inv-fg);--muted:var(--inv-muted);background:var(--inv-bg);color:var(--inv-fg)}
@media (min-width:761px) and (max-width:1000px){.apps{grid-template-columns:repeat(3,minmax(0,1fr))}.apps .label{grid-column:1/-1;padding:0.5rem 1rem}}
/* ================= v14: HYBRID LAYOUT =================
Full-viewport only for the hero and the final quote band (single-message moments).
Every other band: natural height, identical padding top and bottom (--section-pad). */
:root{--section-pad:clamp(4rem,9vh,7.5rem)}
html{scroll-padding-top:var(--nav)}
.screen{min-height:0;height:auto;justify-content:flex-start;padding-block:var(--section-pad)}
.screen.hero{min-height:100svh;justify-content:center;padding-block:calc(var(--nav) + var(--band-gap)) var(--band-gap)}
/* quote form follows normal section spacing (2026-10-06) */
#quote{min-height:0;justify-content:flex-start;padding-block:var(--section-pad)}
.screen:not(.hero):not(.blue) > .wrap:not(.two):not(.cta-grid){flex:none;display:block}
.fill{flex:none}
.screen > .wrap.two{flex:none}
.screen > .wrap > .head + *{margin-top:0}
/* Elastic visuals become fixed, comfortable sizes */
.case.fill .desk .vp{flex:none;height:clamp(18rem,44vh,28rem)}
.case.fill .devices,.case.fill .desk{display:block}
.prods.fill .prod .ui{max-height:14rem}
.ind.fill a{flex:none}
.gantt{margin-block:clamp(1.5rem,4vh,2.5rem)}
.g-rows{flex:none}
.g-row{flex:none;height:2.25rem}
#faq .wrap.two{grid-template-rows:none;align-items:start}
.posts.fill{grid-auto-rows:auto}
.posts .cover{flex:none;height:clamp(9rem,20vh,12rem)}
.tiles.fill{grid-auto-rows:auto}
.tquotes{margin-top:1rem}
.feat.fill{grid-template-rows:repeat(2,auto auto auto auto auto)}
@media (max-width:1000px){.feat.fill{grid-template-rows:repeat(3,auto auto auto auto auto)}}
/* Short-screen hacks no longer needed */
@media (min-width:761px) and (max-height:820px){#why .head p{display:block}#why .why > div{padding:clamp(16px,2.6vh,28px)}#why .why p{font-size:0.9375rem}.tquotes figure,.tquotes .rating{padding:clamp(1rem,2.4vh,1.75rem)}.tquotes blockquote{font-size:clamp(0.95rem,min(1.1vw,1.9vh),1.15rem)}.feat .subs{display:flex}.feat p{font-size:0.875rem}.wcards span{display:inline}.case .muted{font-size:inherit}}
/* ================= v15: proof band = bento + trusted strip ================= */
#clients .head{margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:0.75rem}
.bento > *{min-width:0}
.b-big{grid-row:span 2;background:var(--on-accent);color:#fff;padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;gap:0.75rem;position:relative;overflow:hidden}
.b-big .label{color:var(--accent)!important;opacity:1}
.b-big strong{font:600 clamp(4rem,9vw,8rem)/0.9 var(--display);letter-spacing:-0.04em;color:#fff}
.b-big p{color:#b9c6d1;max-width:28ch;font-size:0.9375rem}
.b-bars{margin-top:auto;display:flex;align-items:flex-end;gap:0.375rem;height:clamp(5rem,14vh,9rem)}
.b-bars i{flex:1;height:var(--v);background:color-mix(in srgb,var(--accent) 35%,transparent);transform-origin:bottom;transition:transform 700ms var(--ease)}
.b-bars i:nth-last-child(-n+3){background:var(--accent)}
.rv:not(.in) .b-bars i{transform:scaleY(.15)}
.b-card{background:color-mix(in srgb,var(--on-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--on-accent) 22%,transparent);padding:clamp(1.1rem,2vw,1.6rem);display:flex;flex-direction:column;gap:0.375rem;transition:background var(--fast),color var(--fast)}
.b-card strong{font:600 clamp(2.4rem,4vw,3.5rem)/1 var(--display);letter-spacing:-0.03em;display:flex;align-items:baseline;gap:0.75rem}
.b-card strong em{font:400 1rem var(--body);font-style:normal;letter-spacing:0.15em}
.b-card > span{font-size:0.9375rem}
.b-chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:auto;padding-top:0.875rem}
.b-chips i{font:500 0.75rem var(--mono);font-style:normal;padding:0.25rem 0.5rem;border:1px solid color-mix(in srgb,var(--on-accent) 30%,transparent)}
.b-white{background:#fff;border-color:#fff;color:#0e1316}
.b-white strong em{color:var(--accent-2)}
.b-white .b-chips i{border-color:#cfd8de;color:#56616a}
.bento .b-card:nth-child(4){grid-column:2}
@media (min-width:1001px){.bento{grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:auto auto}.bento .b-card:nth-child(4){grid-column:auto}}
.bento{grid-template-columns:1.2fr repeat(2,minmax(0,1fr))}
.bento .b-big{grid-row:1 / span 2}
.trusted{display:flex;align-items:stretch;margin-top:0.75rem;background:var(--on-accent);color:#fff}
.trusted .label{display:flex;align-items:center;padding:0 clamp(1rem,2vw,1.75rem);color:var(--accent)!important;opacity:1;border-right:1px solid rgba(255,255,255,.12);white-space:nowrap}
.trusted a{flex:1;display:grid;gap:0.125rem;padding:clamp(1rem,2.4vh,1.4rem) clamp(0.75rem,1.4vw,1.25rem);border-right:1px solid rgba(255,255,255,.12);transition:background var(--fast),color var(--fast);min-width:0}
.trusted a:last-child{border-right:0}
.trusted a b{font:600 clamp(1rem,1.5vw,1.35rem) var(--display);white-space:nowrap}
.trusted a small{font:500 0.6875rem var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:#8fa3b3}
.trusted a:hover{background:#fff;color:#0e1316}
.trusted a:hover small{color:#56616a}
.tquotes{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:761px) and (max-width:1000px){.trusted{flex-wrap:wrap}.trusted .label{width:100%;padding:0.75rem 1rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.trusted a{flex:1 1 30%}}
/* ================= v16: featured work, why, FAQ upgrades ================= */
/* Featured work: devices sit on a contained blue stage */
.case.fill{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.stage{display:block;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--plane-2)),var(--plane-2));padding:clamp(1.25rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem);border:1px solid var(--line);position:relative;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:2rem 2rem}
.stage .devices{position:relative;padding-right:18%}
.stage .desk .vp{height:clamp(16rem,38vh,24rem)}
.stage .phone{right:0;bottom:-1rem;width:26%;border-width:5px}
.case-txt h3{margin-block:0.5rem 0.75rem}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin-block:1.25rem}
.kpis div{padding:1rem 1rem 1rem 0;display:grid;gap:0.25rem;align-content:start}
.kpis div + div{padding-left:1rem;border-left:1px solid var(--line)}
.kpis strong{font:600 clamp(1.6rem,2.4vw,2.2rem)/1 var(--display);color:var(--accent)}
.kpis span{font-size:0.8125rem;color:var(--muted);line-height:1.4}
.did{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem;margin-bottom:1.5rem}
.did .label{margin-right:0.5rem}
.did a{font:500 0.75rem var(--mono);border:1px solid var(--line-strong);padding:0.375rem 0.625rem;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.did a:hover{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.more-work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem;margin-top:clamp(1.5rem,4vh,2.5rem)}
.more-work a{border:1px solid var(--line);padding:1.1rem 1.25rem;display:grid;grid-template-columns:1fr auto;gap:0.25rem 1rem;align-items:start;transition:background var(--fast),color var(--fast),border-color var(--fast);min-width:0}
.more-work a > *{grid-column:1}
.more-work a i{grid-column:2;grid-row:1 / span 3;align-self:center;font-style:normal;font-size:1.25rem;color:var(--accent);transition:transform var(--fast) var(--ease)}
.more-work .mw-tag{font:500 0.6875rem var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--accent)}
.more-work b{font:500 1.125rem var(--display)}
.more-work span:not(.mw-tag){font-size:0.8125rem;color:var(--muted)}
.more-work a:hover{--muted:var(--inv-muted);--accent:var(--inv-accent);background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.more-work a:hover i{transform:translateX(4px)}
.more-work .mw-all{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.more-work .mw-all span,.more-work .mw-all i{color:var(--on-accent)!important}
/* Why: chips + dark testimonials for contrast */
.why > div{display:flex;flex-direction:column}
.w-chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:auto;padding-top:1rem}
.w-chips i{font:500 0.6875rem var(--mono);font-style:normal;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:0.25rem 0.5rem}
.tquotes{background:none;border:0;gap:0.75rem}
.tquotes figure{background:#0f1112;color:#eef2f4;border:0}
.tquotes blockquote{color:#eef2f4}
.tquotes blockquote::before{color:#3d8bd0}
.tquotes figcaption{display:flex;align-items:center;gap:0.75rem;color:#8f989f}
.tquotes figcaption .av{width:2.5rem;height:2.5rem;flex:none;display:grid;place-items:center;background:#3d8bd0;color:#071521;font:600 0.875rem var(--display)}
.tquotes figcaption b{color:#eef2f4}
.tquotes figcaption > span:last-child{display:grid;gap:0.125rem;font-size:0.75rem}
/* FAQ: compact numbered list, balanced columns */
#faq .faq{counter-reset:q}
#faq .faq summary{font-size:clamp(1rem,1.2vw,1.125rem);padding:1.05rem 0;justify-content:flex-start;gap:1rem}
#faq .faq summary::before{counter-increment:q;content:counter(q,decimal-leading-zero);font:500 0.75rem var(--mono);color:var(--accent);min-width:1.5rem;padding-top:0.3rem}
#faq .faq summary::after{margin-left:auto}
#faq .faq details p{padding-left:2.5rem;font-size:0.9375rem;padding-bottom:1.1rem}
@media (min-width:761px) and (max-width:1000px){.case.fill{grid-template-columns:1fr 1fr}.more-work{grid-template-columns:1fr 1fr}.kpis span{font-size:0.75rem}}
/* Why: shared rows so icon, title, text, chips align across cards; consistent gaps */
.why{grid-template-rows:auto auto 1fr auto}
.why > div{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0.875rem}
.why .w-chips{margin-top:0;padding-top:0.25rem;align-self:end;flex-wrap:nowrap}
.tquotes{margin-top:0.75rem}
#why .head.split{grid-template-columns:minmax(0,1fr) auto}
/* Why: one card language. Separate blocks, one gap, 4 aligned columns in both rows */
.why{gap:0.75rem;background:none;border:0}
.why > div{border:1px solid var(--line);background:var(--ink)}
#why .tquotes{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem;margin-top:0.75rem}
.tquotes figure{padding:1.5rem}
.tquotes blockquote{font-size:0.9375rem;line-height:1.55}
.tquotes .st{font-style:normal;color:#3d8bd0;letter-spacing:0.1em;margin-left:0.25rem}
.t-cta{background:var(--accent);color:var(--on-accent);padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem;transition:background var(--fast),color var(--fast)}
.t-cta .label{color:var(--on-accent)!important}
.t-cta b{font:600 clamp(1.25rem,1.8vw,1.6rem)/1.15 var(--display)}
.t-cta .go{margin-top:auto;font:500 0.8125rem var(--mono)}
.t-cta:hover{background:#0e1316;color:#fff}
.t-cta:hover .label{color:#3d8bd0!important}
@media (min-width:761px) and (max-width:1000px){#why .tquotes{grid-template-columns:1fr 1fr}}
/* Products: one 4-col grid shared by POS cards (span 2) and the apps row; text and mock-up rows aligned; no inversion on mock-up cards */
.prods,.prods.fill{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:0.75rem;align-items:stretch}
.prods .prod{grid-column:span 2;grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0;border:1px solid var(--line)}
.prods .prod .txt{align-content:start}
.prods .prod .ui{max-height:none;height:clamp(11rem,26vh,14rem);overflow:hidden;align-content:start}
.prods .prod:hover{border-color:var(--accent)}
.prods .prod:hover .link .arr{transform:translateX(4px)}
.apps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem;background:none;border:0}
.apps > *{border:1px solid var(--line)}
.apps .apps-head{background:var(--plane-2);padding:clamp(0.75rem,1.8vh,1.125rem) 1.25rem;display:grid;gap:0.25rem;align-content:center}
.apps .apps-head .label{background:none;padding:0;border:0;color:var(--accent)}
.apps .apps-head b{font:500 1rem var(--display)}
.apps a:hover{border-color:var(--inv-bg)}
@media (min-width:761px) and (max-width:1000px){.apps{grid-template-columns:repeat(2,minmax(0,1fr))}.apps .apps-head{grid-column:auto}}
/* v17: site-wide card consistency + review fixes */
.feat{gap:0.75rem;background:none;border:0}
.feat > a{border:1px solid var(--line)}
.feat > a:hover{border-color:var(--inv-bg)}
.tiles{gap:0.75rem;background:none;border:0}
.tiles > *{border:1px solid var(--line)}
.tiles > a:hover{border-color:var(--inv-bg)}
.posts{gap:0.75rem}
.flow .node .was{text-decoration:none;color:var(--muted);opacity:.85}
.flow .node .was::before{content:"Before: "}
/* Gantt: week labels and grid lines come from the same 10-column track */
.g-weeks i{font-style:normal;border-left:1px solid var(--line);padding-left:0.375rem}
.g-row{display:grid;grid-template-columns:11rem 1fr}
.g-rows{position:relative}
.g-rows::before{content:"";position:absolute;top:0;bottom:0;left:calc(1rem + 11rem);right:1rem;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:10% 100%;pointer-events:none}
@media (max-width:1000px){.g-rows::before{left:calc(1rem + 8rem)}}
.g-row span{grid-column:1;grid-row:1}
.g-row b{grid-column:2;grid-row:1;position:relative}
.gantt{margin-top:clamp(1.5rem,4vh,2.5rem)}
.hero .corner{display:none}
.fbase a:hover{color:var(--accent)}
@media (max-width:1000px){.g-row{grid-template-columns:8rem 1fr}}
/* v18: shared hero vocabulary. Badge eyebrows, window bars, live status */
/* Section eyebrows = hero badge (outline chip with accent square) */
.screen .head .label:first-child,#faq .wrap.two > div:first-child > .label:first-child,.cta-grid > div > .label:first-child{
display:inline-flex;align-items:center;gap:0.625rem;width:max-content;padding:0.45rem 0.75rem;border:1px solid var(--line-strong);
font:500 0.75rem/1 var(--mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text)}
.screen .head .label:first-child::before,#faq .wrap.two > div:first-child > .label:first-child::before,.cta-grid > div > .label:first-child::before{content:"";width:0.5rem;height:0.5rem;background:var(--accent);flex:none}
.screen.blue .head .label:first-child,.screen.blue .cta-grid > div > .label:first-child{border-color:var(--on-accent);color:var(--on-accent)}
.screen.blue .head .label:first-child::before,.screen.blue .cta-grid > div > .label:first-child::before{background:var(--on-accent)}
/* Window bar: same as hero windows, for every mock-up */
/* Card header (user 2026-10-19): no browser look on any card. No three dots, no grey address strip, no web addresses in the title;
just the card's title (and its note or control on the right) over a hairline, on the card's own surface. Same height as before. */
.wbar{display:flex;gap:0.375rem;align-items:center;padding:0.5625rem 0.875rem;border-bottom:1px solid var(--line);font:400 0.6875rem var(--mono);color:var(--muted);background:transparent}
.wbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prods .prod .ui{padding:0;display:flex;flex-direction:column}
.prods .prod .ui > .sync,.prods .prod .ui > .pos{padding:clamp(12px,2vh,20px)}
.gantt .wbar{border-bottom:1px solid var(--line)}
/* Live status chip (hero dot) */
.status{display:inline-flex;align-items:center;gap:0.4rem;font:500 0.6875rem var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);padding:0.25rem 0.5rem;vertical-align:middle}
.status .dot{width:0.375rem;height:0.375rem}
.status.sm{padding:0.125rem 0.375rem;font-size:0.625rem;margin-left:0.375rem}
.txt-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
/* Phone mock-up: seated inside the stage, status bar like the desktop window bar, image never cropped sideways */
.stage{padding-bottom:clamp(1.5rem,3.5vw,2.75rem)}
.stage .phone{bottom:0;right:0;width:24%;aspect-ratio:auto;border:6px solid #1e2225;outline:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.stage .phone::before{content:"";display:block;height:0.875rem;background:#1e2225;flex:none}
.stage .phone img{width:100%;height:auto;aspect-ratio:390/700;object-fit:cover;object-position:top center}
/* Hero: "your business, connected" hub diagram (replaces client screenshot) */
.hero .stack{aspect-ratio:1/1}
.w-hub{inset:0 0 30% 0;display:flex;flex-direction:column;background:var(--plane)}
.hub{position:relative;flex:1;min-height:0} /* no grid of its own: the hero already has one (user 2026-10-12) */
.hub-lines{position:absolute;inset:0;width:100%;height:100%}
.hub-lines line{stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
.hub-lines line.pulse{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 200;stroke-dashoffset:0;animation:hubpulse 2.7s linear infinite;animation-delay:var(--d)}
@keyframes hubpulse{from{stroke-dashoffset:0}to{stroke-dashoffset:-206}}
@media (prefers-reduced-motion:reduce){.hub-lines line.pulse{animation:none;stroke-dasharray:none;opacity:.35}}
.hnode,.hcore{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:0.5rem;background:var(--ink);border:1px solid var(--line-strong);padding:0.5rem 0.625rem;white-space:nowrap;z-index:1}
.hnode svg{width:1.25rem;height:1.25rem;color:var(--accent);flex:none}
.hnode span{display:grid;line-height:1.2}
.hnode b{font:500 0.75rem var(--body);color:var(--text)}
.hnode small{font:400 0.625rem var(--mono);color:var(--muted)}
.hcore{flex-direction:column;gap:0.25rem;padding:0.875rem 1rem;background:var(--accent);border-color:var(--accent);color:var(--on-accent);text-align:center}
.hcore i{width:0.5rem;height:0.5rem;background:var(--on-accent);animation:pulse 1.6s infinite}
.hcore b{font:600 0.9375rem var(--display)}
.hcore small{font:500 0.625rem var(--mono);text-transform:uppercase;letter-spacing:0.1em}
.hero .w-feed{right:0;bottom:0;top:auto;width:62%}
.hero .w-feed .feed{min-height:0}
.hero .w-pos{display:none}
@media (min-width:761px) and (max-width:1000px){.hnode small{display:none}}
/* Hero v2: circuit connectors + event-driven pulses + node highlight */
.hub-lines path{fill:none;stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.hub-lines path.pulse{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:0 100;opacity:0}
.hub-lines path.pulse.go{animation:hubgo 650ms var(--ease) forwards}
@keyframes hubgo{0%{stroke-dasharray:0 100;stroke-dashoffset:0;opacity:1}60%{stroke-dasharray:100 0;opacity:1}100%{stroke-dasharray:100 0;opacity:0}}
.hnode{transition:border-color 200ms var(--ease),background 200ms var(--ease)}
.hnode::after{content:"✓ synced";position:absolute;right:0.375rem;top:-0.6rem;font:500 0.5625rem var(--mono);letter-spacing:0.08em;background:var(--ok);color:#071521;padding:0.0625rem 0.3125rem;opacity:0;transform:translateY(4px);transition:opacity 200ms,transform 200ms var(--ease)}
.hnode.hit{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--ink))}
.hnode.hit::after{opacity:1;transform:none}
.hc-count{font:500 0.5625rem var(--mono);font-style:normal;letter-spacing:0.08em;text-transform:uppercase;opacity:0.85;margin-top:0.125rem;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.hub-lines path.pulse.go{animation:none}}
/* Hero v3: centre is a live "Your business · Today" dashboard */
.hcore{flex-direction:column;align-items:stretch;gap:0.375rem;width:clamp(10.5rem,31%,13.5rem);padding:0;background:var(--ink);border:1px solid var(--accent);color:var(--text);text-align:left;white-space:normal;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.hc-top{display:flex;align-items:center;gap:0.4rem;background:var(--accent);color:var(--on-accent);padding:0.375rem 0.625rem;font:600 0.625rem var(--mono);letter-spacing:0.08em;text-transform:uppercase}
.hc-top i{width:0.4rem;height:0.4rem;background:var(--on-accent);animation:pulse 1.6s infinite}
.hc-lbl{padding:0.25rem 0.75rem 0;font:500 0.5625rem var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.hc-sales{padding:0 0.75rem;font:600 clamp(1.05rem,1.6vw,1.45rem)/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.hc-rows{display:grid;margin-top:0.25rem;border-top:1px solid var(--line)}
.hc-rows div{display:flex;justify-content:space-between;gap:0.5rem;padding:0.3rem 0.75rem;font:400 0.625rem var(--mono);color:var(--muted);border-bottom:1px solid var(--line)}
.hc-rows div:last-child{border-bottom:0}
.hc-rows b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.hc-rows b.ok{color:var(--ok)}
.bump{animation:bump 500ms var(--ease)}
@keyframes bump{0%{color:var(--text);background:color-mix(in srgb,var(--accent) 35%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.bump{animation:none}}
/* Hero v3b: diagram uses the whole frame; feed folds into the dashboard */
.w-hub{inset:0!important}
.hero .w-feed{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.hnode{white-space:normal;max-width:9.75rem}
.hnode b{font-size:0.75rem;line-height:1.2}
.hnode small{font-size:0.5625rem;line-height:1.3}
.hc-latest{display:grid;gap:0.125rem;padding:0.375rem 0.75rem 0.5rem;border-top:1px solid var(--line);background:var(--plane-2)}
.hc-latest span{font:500 0.5rem var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.hc-latest b{font:500 0.625rem var(--mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .stack{aspect-ratio:1/0.92}
.hnode{width:29%;max-width:none;box-sizing:border-box}
.hcore{width:31%}
@media (min-width:761px) and (max-width:1100px){.hnode svg{display:none}.hnode small{display:block}}
/* Hero v4: compact "one team" core; operations feed tab visible again (no "one system" claim) */
.hero .stack{aspect-ratio:auto;height:auto;display:flex;flex-direction:column}
.hero .w-hub{position:relative;inset:auto!important;aspect-ratio:1/0.9}
.hero .w-feed{position:relative!important;inset:auto;align-self:flex-end;width:58%!important;height:auto!important;margin-top:-3rem;z-index:2;overflow:visible!important;clip:auto;opacity:1;pointer-events:auto}
.hnode{width:30%}
/* One tag size site-wide: card tags match the clickable chips (.did, .more) */
.feat .subs span,.b-chips i,.w-chips i{font:500 0.75rem var(--mono);padding:0.375rem 0.625rem;line-height:normal;white-space:nowrap}
.w-chips i{color:var(--muted);border-color:var(--line-strong)}
@media (min-width:761px) and (max-width:1100px){.why .w-chips{flex-wrap:wrap}}
/* Product Configurator card: coded suit-builder mock-up */
.txt-top .first{font:500 0.6875rem var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:0.25rem 0.5rem;white-space:nowrap}
.cfg{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.1fr;gap:0.75rem;padding:clamp(0.375rem,1.2vh,1.1rem) clamp(0.75rem,1.6vw,1.1rem);--fab:#1e2a3d}
.cfg-view{background:var(--plane);display:flex;flex-direction:column;align-items:center;gap:0.375rem;padding:0.375rem;min-height:0}
.cfg-view{background:#f5f5f5}
.cfg-view img{flex:1;height:0;min-height:0;width:100%;object-fit:contain}
.cfg-ang b,.cfg-ang span{background:#fff}.cfg-ang span{color:#56616a;border-color:#cfd8de}
.cfg-ang{display:flex;gap:0.25rem;font:500 0.625rem var(--mono)}
.cfg-ang b,.cfg-ang span{padding:0.125rem 0.375rem;border:1px solid var(--line-strong);color:var(--muted);font-weight:500}
.cfg-ang b{border-color:var(--accent);color:var(--accent)}
.cfg-opts{display:grid;align-content:start;gap:0.3rem;font:400 0.6875rem var(--mono);color:var(--muted)}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;background:var(--plane);padding:0.25rem 0.5rem}
.cfg-sw{display:flex;gap:0.25rem}
.cfg-sw i{width:0.875rem;height:0.875rem;background:var(--c);outline:1px solid var(--line-strong)}
.cfg-sw i:first-child{outline:2px solid var(--accent);outline-offset:1px}
.cfg-ch{display:flex;gap:0.25rem}
.cfg-ch em{font-style:normal;padding:0.125rem 0.375rem;border:1px solid var(--line-strong)}
.cfg-ch em.on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cfg-buy{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;margin-top:0.125rem}
.cfg-buy span{font:600 0.9375rem var(--display);color:var(--text)}
.cfg-buy b{background:var(--accent);color:var(--on-accent);padding:0.375rem 0.625rem;font-weight:500}
.prods.fill .prod .ui{height:clamp(13rem,32vh,17rem);max-height:none}
#services .feat > a{background:transparent}
#services .feat > a:hover{background:var(--inv-bg)}
/* Featured work on white: dark showcase stage for contrast, label on its own line */
#work .stage{background:linear-gradient(135deg,#123048,#0d1114 70%);border-color:#0d1114}
#work .stage::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
#work .did .label{width:100%;margin:0 0 0.25rem}
/* Featured work: engagement timeline beside the heading */
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,34rem);align-self:end}
.journey > div{position:relative;display:grid;gap:0.25rem;padding:1.375rem 1rem 0 0;border-top:1px solid var(--line-strong)}
.journey i{position:absolute;top:-0.3125rem;left:0;width:0.625rem;height:0.625rem;background:var(--accent)}
.journey .now{border-top-style:dashed}
.journey .now i{background:var(--ok);animation:pulse 1.6s infinite}
.journey b{font:600 1.125rem/1.1 var(--display);color:var(--text)}
.journey span{font-size:0.8125rem;line-height:1.4;color:var(--muted)}
/* Theme toggle in the nav */
.theme-tg{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-left:0.75rem;border:1px solid var(--line-strong);background:none;color:var(--text);cursor:pointer;flex:none;transition:background var(--fast),color var(--fast)}
.theme-tg:hover{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.theme-tg .i-moon{display:none}
:root[data-theme="light"] .theme-tg .i-sun{display:none}
:root[data-theme="light"] .theme-tg .i-moon{display:block}
/* Testimonials follow the theme (light cards in light mode) */
:root[data-theme="light"] .tquotes figure{background:#fff;color:#14181b;border:1px solid #d5dce1}
:root[data-theme="light"] .tquotes blockquote{color:#14181b}
:root[data-theme="light"] .tquotes figcaption{color:#56616a}
:root[data-theme="light"] .tquotes figcaption b{color:#14181b}
:root[data-theme="light"] .tquotes blockquote::before{color:#1a5f9e}
:root[data-theme="light"] .tquotes figcaption .av{background:#1a5f9e;color:#fff}
/* Light mode fixes: navy proof cards stay navy; stars readable on white */
.b-big,.trusted{background:#0b1620}
.b-big .label,.trusted .label{color:#3d8bd0!important}
:root[data-theme="light"] .tquotes .st{color:#1a5f9e}
/* Phone overrides stay last (phone design pending) */
@media (max-width:760px){
.fill{flex:none}
.tquotes{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;background:none;border:0;gap:10px}
.tquotes > *{scroll-snap-align:start;border:1px solid var(--line)}
.gantt{display:none}
.apps{grid-template-columns:1fr}
.posts .cover{height:7rem;flex:none}
.case.fill .desk .vp{flex:none;height:24vh}
}
@media (max-width:760px){
:root{--section-pad:3.5rem}
.screen.hero{min-height:100svh}
.case.fill .desk .vp{height:24vh}
}
@media (max-width:760px){
.bento{grid-template-columns:1fr 1fr}
.bento .b-big{grid-column:1 / -1;grid-row:auto}
.bento .b-card:nth-child(4){grid-column:auto}
.trusted{flex-wrap:wrap}.trusted .label{width:100%;padding:0.75rem 1rem;border-right:0}.trusted a{flex:1 1 45%;border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:760px){.case.fill{grid-template-columns:1fr}.more-work{grid-template-columns:1fr}.stage .devices{padding-right:0}.stage .phone{display:none}.kpis{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.why > div{display:flex;grid-row:auto}.why .w-chips{flex-wrap:wrap}}
@media (max-width:760px){.prods .prod{grid-column:auto;grid-row:auto;display:grid;grid-template-rows:auto auto}.apps{grid-template-columns:1fr}}
@media (max-width:760px){.hero .stack{height:auto;aspect-ratio:1/0.9}.w-hub{inset:0}.hnode small{display:none}.hnode{padding:0.375rem 0.5rem}}
@media (max-width:980px){.theme-tg{margin-left:auto}.burger{margin-left:0.5rem}}
/* Outline = clickable. Info tags are a flat tint with no border; section eyebrows are text + accent square, no box (2026-10-06) */
.feat .subs span,.b-chips i,.w-chips i,.hero .kicker .chip:not(.on){border:0;background:color-mix(in srgb,currentColor 9%,transparent);color:var(--muted)}
.b-chips i,.b-white .b-chips i{border:0;color:inherit;opacity:.9}
.screen .head .label:first-child,#faq .wrap.two > div:first-child > .label:first-child,.cta-grid > div > .label:first-child{border:0;padding:0;background:none}
/* ================= SOFT CORNERS (approved 2026-10-06): radius tokens only. --r-lg large panels, --r cards, --r-sm controls, --r-xs chips ================= */
:root{--r-lg:12px;--r:8px;--r-sm:6px;--r-xs:4px}
/* cards & panels */
.prod,.prods .prod,.sh-case,.feat > a,.tiles > *,.why > div,.posts a,.more-work a,.apps > *,.b-card,.bento .b-big,.tquotes figure,.tquotes .rating,
.gantt,.mega,.desk,.win,.shot,.stage,.v2-links,.wcards,.pillars,.names,.sh-stagebox,.sh-dash,.sh-card,.flow .node .bx,.hnode,.hcore,.faq details,.form,.trusted,.sh-stage{border-radius:var(--r)}
.prod,.sh-case,.feat > a,.tiles > *,.posts a,.b-card,.bento .b-big,.gantt,.mega,.desk,.win,.shot,.v2-links,.wcards,.pillars,.names,.sh-stagebox,.sh-dash,.tquotes figure,.trusted{overflow:hidden}
.sh-mock,.bh-svc{border-radius:var(--r-sm)}
/* large panels: hero window, problem tabs, Gantt, product cards, quote form, menu */
.sh-stage,.sh-stagebox,.gantt,.prod,.prods .prod,.form,.mega{border-radius:var(--r-lg)}
/* controls */
.btn,.theme-tg,.burger,.form input,.form select,.form textarea,.form .chips label,.sh-try button,.sh-g .g-foot button,.more a,.did a,.jump a,.v2-ind a,.thumbs a{border-radius:var(--r-sm)}
/* small chips & tags */
.chip,.w-chips i,.b-chips i,.feat .subs span,.feat .tag,.status,.rel i,.cfg-ch em,.sz i,.b1,.b2,.pimg,.cfg-view{border-radius:var(--r-xs)}
/* ================= LIVE PRODUCT CARDS (2026-10-07, shared by home + Shopify) =================
iSmartSync live stock table (.mk-stock, in the mk-* block) and the Product Configurator cloth picker (.cfg-jk/.cfg-pick). Behaviour in site.js. */
div.prod{cursor:default}
.cfg-jk{position:relative;flex:1;min-height:0;width:100%}
.cfg-jk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cfg-jk i{position:absolute;inset:0;background:var(--cloth);mix-blend-mode:multiply;-webkit-mask:url(img/configurator/jacket-base.webp) center/contain no-repeat;mask:url(img/configurator/jacket-base.webp) center/contain no-repeat;transition:background-color var(--med) var(--ease)}
.cfg-name{font:500 .6875rem var(--mono);color:#56616a;text-transform:uppercase;letter-spacing:.08em}
.cfg-pick{display:flex;gap:.375rem}
.cfg-pick button{all:unset;cursor:pointer;position:relative;width:1.375rem;height:1.375rem;background:var(--c);border-radius:var(--r-xs);outline:1px solid var(--line-strong);outline-offset:0}
.cfg-pick button::after{content:"";position:absolute;inset:-.5rem -.1875rem}
.cfg-pick button[aria-checked="true"]{outline:2px solid var(--accent);outline-offset:2px}
.cfg-pick button:hover{outline-color:var(--text)}
.cfg-pick button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
/* ================= BUTTONS v3 (2026-10-07) =================
Full-size buttons must never look like a chip or a card (both use thin grey outlines).
Primary (.btn.solid, every quote CTA) = filled accent. Secondary (.btn) = accent border + accent text on a faint accent tint.
Hover still inverts. Chips/cards keep 1px grey outlines. */
.btn{border:1.5px solid var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);font-weight:500}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.blue .btn{border-color:var(--on-accent);color:var(--on-accent);background:color-mix(in srgb,var(--on-accent) 8%,transparent)}
.blue .btn.solid{background:var(--on-accent);border-color:var(--on-accent);color:#fff}
.btn:hover,.btn.solid:hover{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg)}
.blue .btn:hover,.blue .btn.solid:hover,.form .btn.solid:hover{background:#ffffff;border-color:#ffffff;color:#071521}
/* Form submit is the primary action inside the form card: always filled accent (the card is dark in dark mode, so the blue-band navy fill would vanish) */
.blue .form .btn.solid,.form .btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.blue .form .btn.solid:hover,.form .btn.solid:hover{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg)}
/* ================= COLOUR PASS v4 (2026-10-08) =================
1. Service signal colours: dots, icons, thin rules and step markers only. Never band backgrounds, never buttons.
2. Blue = action. Eyebrows, numbers and tags go neutral, so filled blue buttons stand out.
3. Mono only for real data (order numbers, prices, timestamps). UI labels use the body font.
4. Navy band (.screen.navy) gives dark mode a second surface between black and blue. */
:root{
--c-shop:#95bf47; --c-web:#3cc8e0; --c-apps:#a68cff; --c-pos:#f2a93b; --c-seo:#ff7d5c; --c-ux:#f27bb5;
--c-ai:#d38cff; --c-erp:#8794ff; --c-chain:#e8c547; --c-sapps:#3fcf9a; --star:#f5b83d;
}
:root[data-theme="light"]{
--c-shop:#456b18; --c-web:#0a6f86; --c-apps:#6a4fd6; --c-pos:#975b00; --c-seo:#b8401f; --c-ux:#b83b7d;
--c-ai:#8a44cc; --c-erp:#4a55c9; --c-chain:#7a6200; --c-sapps:#127a55; --star:#a36f00}
/* Navy band: deep blue surface with one soft glow (dark); pale blue tint (light) */
.screen.navy{--ink:#0c1722;--plane:#112130;--plane-2:#172a3c;--line:#20374b;--line-strong:#3d566b;
background:radial-gradient(56rem 28rem at 88% -4%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(40rem 24rem at 0% 104%,color-mix(in srgb,var(--c-apps) 8%,transparent),transparent 70%),var(--ink)}
:root[data-theme="light"] .screen.navy{--ink:#eef5fb;--plane:#e2eef8;--plane-2:#d5e6f4;--line:#c8dbea;--line-strong:#8aa6bd}
/* Page colour: what every band fades into (the navy and panel bands below never cut against it) */
:root{--page:#0f1112}
:root[data-theme="light"]{--page:#f6f8f9}
/* FLOW v4b (home first): continuous canvas. Navy chapters fade in/out over 10rem; glows sit inside the band, never cut by its edge */
.screen.navy{background:linear-gradient(var(--page),transparent 10rem,transparent calc(100% - 10rem),var(--page)),
radial-gradient(48rem 26rem at 84% 34%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%),
radial-gradient(38rem 24rem at 6% 72%,color-mix(in srgb,var(--c-apps) 8%,transparent),transparent 70%),var(--ink)}
/* Blue panel: the loud moments (proof, quote) as one contained card on the page, not a full-bleed stripe */
.screen.blue.panel{background:transparent;padding-block:clamp(1rem,3vh,2rem)}
.screen.blue.panel .pnl{border-radius:var(--r-lg);padding:clamp(1.75rem,4.5vw,4.5rem);position:relative;overflow:hidden;
background:radial-gradient(42rem 22rem at 100% 0%,rgba(255,255,255,.2),transparent 62%),linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#0b3a66));
box-shadow:0 18px 36px -22px rgba(0,0,0,.6)}
:root[data-theme="light"] .screen.blue.panel .pnl{box-shadow:0 18px 36px -22px rgba(15,40,60,.4)}
body .screen:not(.blue) + .screen:not(.blue),body .screen{border-top:0}
/* One spacing step on the continuous canvas: 72px top + bottom (144px between sections) at desktop, never the old 2×120px */
body .screen:not(.hero){padding-block:clamp(3rem,7vh,4.5rem)}
/* Hero = exactly the first screen (user: the full band gives emphasis). Content fills it: text + brain in the middle (brain grows to the free height),
Trusted-by strip pinned to the bottom edge, so scrolling goes straight into the next section with no dead band. Phones keep their own hero rules. */
@media (min-width:761px){
body[data-page="home"] .screen.hero{min-height:100svh;justify-content:flex-start;padding-block:calc(var(--nav) + clamp(1rem,3vh,2.25rem)) clamp(1rem,2.5vh,1.75rem)}
body[data-page="home"] .bh-hero > .wrap:not(.bh-foot){flex:1;align-items:center}
body[data-page="home"] .bh-foot{display:block}
body[data-page="home"] .bh-foot .trust{margin-top:clamp(1rem,3vh,2rem)}
}
/* Panels: same spacing as every section; shadow allowed to fall outside the section (it was being clipped flat) */
body .screen.blue.panel{overflow:visible}
/* Grid backgrounds fade into the page colour: heroes at the bottom, mid-page bands at both edges */
.hero.gridbg{background-image:linear-gradient(transparent 55%,var(--page)),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:100% 100%,4rem 4rem,4rem 4rem}
.screen.gridbg:not(.hero){background-image:linear-gradient(var(--page),transparent 8rem,transparent calc(100% - 8rem),var(--page)),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:100% 100%,4rem 4rem,4rem 4rem}
/* Body font for UI text that was in mono */
.label,.link,.menu > a,.menu > .dd > button,.chip,.feat .proofline,.feat .tag,.feat .subs span,.more a,.did a,.v2-ind a,.status,.form label,.fgrid h4,
.jump a,.crumbs,.posts .go,.t-cta .go,.w-chips i,.b-chips i,.txt-top .first,.swipe-hint,.soon-tag,.wbar,.win .bar,.desk .bar,.mw-tag,.wcards em,.gallery figcaption,.ptabs button,.textlink,
.screen .head .label:first-child,#faq .wrap.two > div:first-child > .label:first-child,.cta-grid > div > .label:first-child{font-family:var(--body)}
.label,.screen .head .label:first-child,#faq .wrap.two > div:first-child > .label:first-child,.cta-grid > div > .label:first-child{font-weight:600;letter-spacing:.09em}
.link{font-size:.875rem;font-weight:600}
.menu > a,.menu > .dd > button{font-size:.875rem}
.feat .subs span,.more a,.did a,.v2-ind a{letter-spacing:0;font-size:.8125rem}
/* Eyebrows: neutral text, the square carries the colour */
.label.acc{color:var(--text)}
.screen .head .label:first-child,#faq .wrap.two > div:first-child > .label:first-child,.cta-grid > div > .label:first-child{color:var(--muted)}
.screen.blue .head .label:first-child,.screen.blue .cta-grid > div > .label:first-child{color:var(--on-accent)}
/* Hero location chip: a flat tint, not a filled blue box that reads like a button */
.hero .kicker .chip.on{background:color-mix(in srgb,currentColor 9%,transparent);border-color:transparent;color:var(--text)}
.hero .kicker .chip.on::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.5rem;background:var(--accent);border-radius:1px;vertical-align:.05em}
.status{font-weight:600}
.tquotes .st{color:var(--star)}
/* iSmartSync live stock card in iSmartSync's own green + cyan (home + Shopify) */
/* ================= MOCK-UPS (mk-*, 2026-10-09) =================
One real-world object = one base component (DESIGN-PRINCIPLES §13). Pages supply data and choose parts; they never restyle.
Plan: assets-original/audit/illustrations/PROPOSAL.md · shared demo data: design/mock-data.js (window.ITB_MOCK).
Real objects (paper, phones, tool windows) keep their real colours in both themes; windows that are ours follow the theme.
Floating real objects keep one soft shadow (the single exception to "flat", §3). Keep this block BEFORE the PHONE PASS block.
Built so far: window, paper, receipt + QR, stock, flag, phone, chat, notification, speed race. */
:root{--mk-paper:#fdfdfb;--mk-ink:#17191c;--mk-mut:#5f656c;--mk-line:#e3e5e8;--mk-sep:#9a9a96;--mk-ok:#137333;--mk-bezel:#0e1113;
--mk-sh:0 22px 44px -16px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.28);--mk-sh-sm:0 16px 30px -18px rgba(0,0,0,.6);
--mk-drop:drop-shadow(0 18px 22px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.25))}
:root[data-theme="light"]{--mk-sh:0 22px 44px -18px rgba(15,40,60,.32),0 2px 6px rgba(15,40,60,.1);--mk-sh-sm:0 16px 30px -18px rgba(15,40,60,.35);--mk-drop:drop-shadow(0 14px 20px rgba(15,40,60,.22))}
/* Window: our own frame (follows the theme). Used by product cards, stock, race. Title bar = the shared .wbar */
.mk-win{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--mk-win-bg,var(--ink));min-width:0}
.mk-win > .wbar{border-bottom:1px solid var(--line)}
.mk-win > .wbar em{margin-left:auto;font-style:normal}
/* Paper: a printed note or document on white, same in both themes (receipts use the thermal variant below) */
.mk-paper{width:min(100%,var(--mk-w,17rem));justify-self:center;background:var(--mk-paper);color:var(--mk-ink);border-radius:var(--r);box-shadow:var(--mk-sh);padding:1rem 1rem 1.25rem;font:400 .8125rem/1.4 var(--body);text-align:left;position:relative}
.mk-paper-h{display:block;text-align:center;font:600 .9375rem var(--body);letter-spacing:.04em}
.mk-paper-sep{border-top:1px dashed var(--mk-sep);margin:.5rem 0}
.mk-paper-r{display:flex;justify-content:space-between;gap:.75rem}
.mk-paper-foot{margin-top:.5rem;padding:.375rem .5rem;border-radius:var(--r-xs);background:#e6f4ea;color:var(--mk-ok);font:600 .6875rem var(--body)}
/* Receipt: a replica of the real iSmartSync thermal receipt (80mm roll): logo, store, dashed rules, meta grid, five-column item table, totals, PAYMENTS,
FBR invoice + QR, Terms. Serif as printed, black on the paper tone, torn bottom edge, soft float shadow. One structure for every product:
only the logo (iSmartSync / iServe) and the data change (itbReceipt in site.js, data in mock-data.js). Options: .mk-float.lg (POS hero size) · data-print (lines appear one by one) */
.mk-float{justify-self:center;width:min(100%,var(--mk-rcpt-w,20rem));filter:var(--mk-drop)}
.mk-float.lg{--mk-rcpt-w:23rem}
.mk-rcpt{width:100%;background:var(--mk-paper);color:#111;border-radius:2px 2px 0 0;padding:1.5em 1.5em 2.25em;font:400 .75rem/1.35 "Times New Roman",Times,"Liberation Serif",Georgia,serif;font-variant-numeric:tabular-nums;display:grid;align-content:start;text-align:left;
-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 7px repeat-x;
mask:linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 7px repeat-x}
.mk-float.lg .mk-rcpt{font-size:.8125rem}
.mk-rcpt-logo{display:block;width:var(--mk-logo-w,90%);max-width:100%;height:auto;margin:0 auto .4em;filter:grayscale(1);mix-blend-mode:multiply}
/* a real receipt is long: in a fixed-height window it scrolls inside (hidden scrollbar, soft fade at the cut edges); .mk-scroll keeps the window size constant */
.mk-scroll{justify-self:center;width:min(100%,calc(var(--mk-rcpt-w,20rem) + 3rem));max-height:var(--mk-h,24rem);overflow-y:auto;scrollbar-width:none;padding:var(--ft,0px) 1.5rem 2rem;margin-bottom:-1rem;
-webkit-mask:linear-gradient(transparent,#000 var(--ft,0px),#000 calc(100% - 1.75rem),transparent);mask:linear-gradient(transparent,#000 var(--ft,0px),#000 calc(100% - 1.75rem),transparent)}
.mk-scroll::-webkit-scrollbar{display:none}
.mk-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mk-rcpt-store{font-weight:700;font-size:1.0833em;text-align:center}
.mk-rcpt-c{text-align:center}
.mk-rcpt-c.sm{font-size:.9em;margin-top:.15em}
.mk-rcpt-sep{border-top:1px dashed #111;margin:.5em 0}
.mk-rcpt-meta{display:grid;grid-template-columns:1fr 1fr;column-gap:.6em;line-height:1.65}
.mk-rcpt-meta{grid-template-columns:auto 1fr auto 1fr}
.mk-rcpt-meta span:nth-child(2n){text-align:right}
.mk-rcpt-meta span:nth-child(3){padding-left:.4em}
.mk-rcpt-t{display:grid;grid-template-columns:1.15fr .55fr 1.2fr 1fr 1fr;column-gap:.4em}
.mk-rcpt-t.th{font-size:.9em}
.mk-rcpt-name{font-weight:700;margin-bottom:.35em}
.mk-rcpt-name span{font-weight:700;margin-left:.9em}
.mk-rcpt-r{display:flex;justify-content:space-between;gap:.75rem}
.mk-rcpt-r.tight{line-height:1.3}
.mk-rcpt-r.b{font-weight:700;line-height:1.4}
.mk-rcpt-hd{font-weight:700;letter-spacing:.02em}
.mk-rcpt-hd.c{text-align:center;font-size:.95em}
.mk-rcpt .mk-qr{margin:.5em auto .25em}
.mk-rcpt[data-print] > *{opacity:0;transform:translateY(-.25rem);transition:opacity 120ms,transform 120ms}
.mk-rcpt[data-print] > .on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mk-rcpt[data-print] > *{transition:none}}
.mk-qr{display:block;width:4rem;height:4rem}
.mk-qr svg{display:block;width:100%;height:100%;fill:#111}
/* Stock: the iSmartSync live count. Base = the product-card table. Layouts: rows (item × locations) · sku (one product by location, was → now) · sizes (location × size).
Skin: inside a .mk-win (follows the theme); iSmartSync green + cyan are the product's own signal colours */
.mk-stock{--is-g:#88c75b;--is-gf:#88c75b;--is-c:#2aaade;padding:clamp(.75rem,1.8vh,1.25rem);display:grid;gap:.75rem;font-size:.8125rem}
:root[data-theme="light"] .mk-stock{--is-g:#3f6b1f;--is-c:#0f6a91}
.mk-stock-ev{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.5rem .75rem;background:var(--plane);border-radius:var(--r-sm);box-shadow:inset 3px 0 0 var(--is-g)}
.mk-stock-ev b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-stock-ev em{font:400 .6875rem var(--mono);font-style:normal;color:var(--is-g);white-space:nowrap}
.mk-stock-t > div{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.mk-stock-t span{padding:.4375rem .5rem;font-variant-numeric:tabular-nums;transition:background var(--med),color var(--med)}
.mk-stock-t span:not(:first-child){text-align:right}
.mk-stock-t .h span{font:600 .6875rem var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mk-stock-t span.hit{background:color-mix(in srgb,var(--is-g) 22%,transparent);color:var(--text)}
.mk-stock-t span.src{background:var(--is-c);color:#fff}
/* narrow windows (tablet two-up cards, phones): four columns, tighter cells; the last location drops out (it still takes part in the animation) */
.mk-stock{container-type:inline-size}
@container (max-width:26rem){.mk-stock-t > div{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}.mk-stock-t span:last-child{display:none}.mk-stock-t span{padding-inline:.375rem}.mk-stock-t .h span{letter-spacing:0}}
/* sku: one product, every location */
.mk-stock[data-layout="sku"]{gap:.5rem;padding:.75rem}
.mk-stock-prod{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.625rem;align-items:center}
.mk-stock-prod i{width:2.25rem;height:2.25rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--plane);padding:.25rem}
.mk-stock-prod svg{display:block;width:100%;height:100%;fill:var(--p)}
.mk-stock-prod b{font-weight:600;font-size:.9375rem}
.mk-stock-prod small{display:block;color:var(--muted);font-size:.75rem}
.mk-stock-rows > div{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.4375rem .5rem;border-bottom:1px solid var(--line)}
.mk-stock-rows span small{display:block;color:var(--is-g);font-size:.75rem}
.mk-stock-rows b{font:600 .9375rem var(--body);font-variant-numeric:tabular-nums}
.mk-stock-rows s{color:var(--muted);font-weight:400;margin-right:.375rem}
.mk-stock-rows .hot{background:color-mix(in srgb,var(--is-g) 12%,transparent);box-shadow:inset 3px 0 0 var(--is-g)}
.mk-stock-sum{display:flex;justify-content:space-between;align-items:baseline;padding:0 .5rem;font-size:.75rem;color:var(--muted)}
.mk-stock-sum b{color:var(--text);font-size:.9375rem;font-variant-numeric:tabular-nums}
/* sizes: location × size, with the website's total on top */
.mk-stock[data-layout="sizes"]{padding:0}
.mk-stock-grid{width:100%;border-collapse:collapse;font-size:.8125rem}
.mk-stock-grid th{font:600 .6875rem var(--body);color:var(--muted);text-align:center;padding:0 0 .375rem;border-bottom:1px solid var(--line)}
.mk-stock-grid th:first-child,.mk-stock-grid td:first-child{text-align:left}
.mk-stock-grid td{padding:.375rem 0;border-bottom:1px solid var(--line);text-align:center;font:500 .8125rem var(--mono);transition:background .3s,color .3s}
.mk-stock-grid td:first-child{font:400 .8125rem var(--body);color:var(--muted);white-space:nowrap;padding-right:.5rem}
.mk-stock-grid tr.web td{font-weight:600;color:var(--text);border-bottom:2px solid var(--line-strong)}
.mk-stock-grid tr.web td:first-child{color:var(--is-c);font-weight:600}
.mk-stock-grid td.sel{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mk-stock-grid td.hit{background:color-mix(in srgb,var(--is-gf) 30%,transparent);color:var(--text)}
.mk-stock-grid td.zero{color:#e5484d}
/* Match / Off by flags (shared with the iSmartSync ledger, which keeps its own timeline view) */
.mk-flag{font:600 .5625rem var(--body);letter-spacing:.06em;text-transform:uppercase;padding:.15rem .35rem;border-radius:var(--r-xs);white-space:nowrap}
.mk-flag.off{background:color-mix(in srgb,var(--c-seo) 16%,transparent);color:var(--c-seo);outline:1px dashed color-mix(in srgb,var(--c-seo) 55%,transparent)}
.mk-flag.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
/* Phone: one bezel (6px, #0e1113, r 1.5rem, 9:18.5). Base = the Shopify race phone, sized by height (or --mk-ph-w).
Parts: .mk-phone-sb status bar (omit with .nosb) · .mk-phone-screen slot (coded UI, one screenshot, or the race states) · data-st 0–3 = race state.
Options: .scroll (scrollable screenshot) · .island (notch pill) · .fade (SMS crop: top corners only, bottom fades out) · .lock (lock screen, no bezel) */
.mk-phone{position:relative;flex:none;justify-self:center;width:var(--mk-ph-w,auto);height:var(--mk-ph-h,clamp(20rem,46vh,26rem));aspect-ratio:9/18.5;border:var(--mk-bz,6px) solid var(--mk-bezel);border-radius:1.5rem;background:#fff;overflow:hidden;color:#111;font:400 .5625rem/1.3 var(--body);text-align:left;box-shadow:var(--mk-sh-sm);container-type:inline-size}
.mk-phone-sb{height:1rem;display:flex;justify-content:space-between;align-items:center;padding:0 .75rem;font:600 .5rem var(--body)}
.mk-phone-sb i{width:.85rem;height:.4rem;border:1px solid #111;border-radius:2px}
.mk-phone-screen{position:absolute;inset:1rem 0 0;overflow:hidden}
.mk-phone.nosb .mk-phone-sb{display:none}
.mk-phone.nosb .mk-phone-screen{inset:0}
.mk-phone.scroll .mk-phone-screen{overflow-y:auto;scrollbar-width:none}
.mk-phone.scroll .mk-phone-screen::-webkit-scrollbar{display:none}
.mk-phone-screen img{display:block;width:100%;height:auto}
.mk-phone.island::before{content:"";position:absolute;top:.5rem;left:50%;translate:-50% 0;width:5.5rem;height:1.25rem;border-radius:999px;background:var(--mk-bezel);z-index:1}
.mk-phone.fade{--mk-bz:7px;--mk-ph-h:auto;aspect-ratio:auto;width:var(--mk-ph-w,min(100%,19rem));border-bottom:0;border-radius:2.25rem 2.25rem 0 0;padding:.5rem .625rem 1.25rem;box-shadow:none;container-type:normal;
-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.mk-phone.lock{font:400 .8125rem/1.4 var(--body);--mk-ph-h:auto;aspect-ratio:auto;width:var(--mk-ph-w,min(100%,20rem));border:0;border-radius:1.5rem;padding:1rem .75rem;display:grid;gap:.5rem;overflow:hidden;box-shadow:var(--mk-sh);container-type:normal;
background:radial-gradient(18rem 12rem at 85% 6%,rgba(120,170,230,.35),transparent 70%),linear-gradient(165deg,#1a2a44,#24365a 55%,#2f3f66)}
.mk-lock-time{display:grid;justify-items:center;color:#fff;padding:.25rem 0 .5rem;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.mk-lock-time small{color:rgba(255,255,255,.85);font-size:.75rem;font-weight:500}
.mk-lock-time b{font:500 2.75rem/1 var(--display);letter-spacing:-.02em}
/* race states (data-st): 0 blank · 1 loading · 2 skeleton · 3 page */
.mk-ld,.mk-sk,.mk-pg{position:absolute;inset:0;transition:opacity .25s}
.mk-ld{display:grid;place-items:center}
.mk-ld i{width:1.25rem;height:1.25rem;border:2px solid #d5dadd;border-top-color:#6b757c;border-radius:50%;animation:mk-spin .8s linear infinite}
.mk-sk{padding:.5rem;display:grid;gap:.4rem;align-content:start}
.mk-sk i{height:.5rem;background:#e8eaec}.mk-sk i.b{height:9rem}.mk-sk i.s{width:55%}
.mk-pg{display:flex;flex-direction:column;background:#fff}
.mk-phone[data-st="0"] .mk-ld,.mk-phone[data-st="0"] .mk-sk,.mk-phone[data-st="0"] .mk-pg,.mk-phone[data-st="1"] .mk-sk,.mk-phone[data-st="1"] .mk-pg,.mk-phone[data-st="2"] .mk-ld,.mk-phone[data-st="2"] .mk-pg,.mk-phone[data-st="3"] .mk-ld,.mk-phone[data-st="3"] .mk-sk{opacity:0}
@keyframes mk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mk-ld i{animation:none}}
/* Chat: header + messages (+ optional composer). data-app: sms (iOS: grey in, green out) · whatsapp (wallpaper, tails, ticks). Sits in a .mk-phone or a plain window.
WhatsApp only as the client's own "before" pain (never as something we automate, DESIGN-PRINCIPLES §2). */
.mk-chat{display:grid;align-content:start;font:400 .8125rem/1.4 var(--body);color:#111;text-align:left}
.mk-chat-hd{display:grid;justify-items:center;gap:.125rem;padding:1.25rem 0 .625rem;border-bottom:1px solid #eceef0}
.mk-chat-hd .av{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#a2a8b1,#868c95);color:#fff;font-weight:600;font-size:.8125rem;margin-top:.5rem}
.mk-chat-hd b{font-size:.75rem;font-weight:600}
.mk-chat-hd small{display:block;font-size:.625rem;color:var(--mk-mut)}
.mk-chat-msgs{display:grid;gap:.375rem;padding-top:.625rem}
.mk-chat-msgs p{margin:0;max-width:80%;padding:.4375rem .6875rem;border-radius:1.125rem;font-size:.75rem;line-height:1.35}
.mk-chat-msgs .in{background:#e9e9eb;color:#000;justify-self:start;border-bottom-left-radius:.375rem}
.mk-chat-msgs .out{background:#34c759;color:#fff;justify-self:end;border-bottom-right-radius:.375rem;min-width:2rem;text-align:center}
.mk-chat[data-app="whatsapp"]{flex:1;gap:.35rem;background:#efeae2;padding-bottom:.75rem}
.mk-chat[data-app="whatsapp"] .mk-chat-hd{display:flex;align-items:center;justify-items:unset;gap:.5rem;padding:.5rem .75rem;border:0;background:#1f2c33;color:#fff;font-size:.6875rem}
.mk-chat[data-app="whatsapp"] .mk-chat-hd .av{width:1.25rem;height:1.25rem;margin:0;background:#7c8590}
.mk-chat[data-app="whatsapp"] .mk-chat-hd b{font-size:.6875rem}
.mk-chat[data-app="whatsapp"] .mk-chat-msgs{gap:.35rem;padding:0}
.mk-chat[data-app="whatsapp"] .mk-chat-msgs p{margin:0 .75rem;max-width:78%;padding:.35rem .5rem;font-size:.6875rem;border-radius:0 .5rem .5rem .5rem;background:#fff;color:#111;text-align:left;min-width:0;justify-self:start}
.mk-chat[data-app="whatsapp"] .mk-chat-msgs p.out{background:#d9fdd3;border-radius:.5rem 0 .5rem .5rem;justify-self:end}
.mk-chat[data-app="whatsapp"] .mk-chat-msgs p.out::after{content:" ✓✓";color:#53bdeb;font-size:.5625rem}
/* Notifications: a stack of OS notifications (lock screen). Generic names only, never a real courier or bank */
.mk-notif{display:grid;gap:.5rem}
.mk-n{display:grid;grid-template-columns:2rem 1fr;gap:.625rem;align-items:start;padding:.625rem .75rem;border-radius:1rem;background:rgba(246,246,248,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#111}
.mk-n > span{display:grid;grid-template-columns:1fr auto;column-gap:.5rem}
.mk-n b{font-size:.75rem;font-weight:600}
.mk-n em{font-style:normal;font-size:.6875rem;color:#6b7178}
.mk-n small{display:block;grid-column:1/-1;color:#2a2d31;font-size:.75rem;line-height:1.35}
.mk-n-ic{width:2rem;height:2rem;border-radius:.5rem;display:grid;place-items:center;font:600 .75rem var(--body);font-style:normal;color:#fff}
.mk-n-ic svg{width:1.125rem;height:1.125rem;fill:none}
.mk-n-ic.c{background:#111}.mk-n-ic.b{background:#1f9d55}.mk-n-ic.s{background:#1a5f9e}
/* Speed race: two phones on the same page, ours vs a typical theme; one timer each; JS: itbRace(root, opts) in site.js.
Shopify #problems (tab 01) and Website #problem share it. Times are an illustration (say so on the page) */
.mk-race{display:grid;grid-template-columns:1fr 1fr;min-width:0}
.mk-lane{display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:0;padding:0 clamp(1rem,2vw,1.75rem)}
.mk-lane + .mk-lane{border-left:1px solid var(--line)}
.mk-lane:first-child{padding-left:0}.mk-lane:last-child{padding-right:0}
.mk-lane > header{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font:600 .6875rem var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.mk-lane.ours > header{color:var(--accent)}
.mk-tm{font:600 1.125rem var(--display);font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:0;text-transform:none}
.mk-lane.ours .mk-tm{color:var(--accent)}
.mk-res{font:500 .75rem var(--body);color:var(--muted);min-height:1.25rem;text-align:center}
.mk-lane.ours .mk-res{color:var(--ok)}
.mk-cap{align-self:stretch;margin-top:auto;font-size:.875rem;color:var(--muted);line-height:1.5}
.mk-lane.ours .mk-cap{color:var(--text)}
.mk-go{all:unset;cursor:pointer;color:var(--accent);font-weight:500;margin-left:.25rem;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mk-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){
/* phones: the two lanes stay side by side (smaller phones, header wraps); [data-stack] = one under the other, for races with long captions */
.mk-race .mk-lane{padding-inline:.75rem}
.mk-race .mk-lane:first-child{padding-left:0}.mk-race .mk-lane:last-child{padding-right:0}
.mk-race .mk-phone{--mk-ph-h:16rem}
.mk-race:not([data-stack]) .mk-lane > header{flex-direction:column;align-items:flex-start;gap:.125rem}
.mk-race[data-stack]{grid-template-columns:1fr}
.mk-race[data-stack] .mk-lane{padding-inline:0;padding-bottom:1.25rem}
.mk-race[data-stack] .mk-lane + .mk-lane{border-left:0;border-top:1px solid var(--line);padding-top:1.25rem}
.mk-race[data-stack] .mk-lane:last-child{padding-bottom:0}
.mk-race[data-stack] .mk-phone{--mk-ph-h:clamp(20rem,46vh,26rem)}
}
/* ================= INTERACTION CUES v2 (2026-10-10). The window itself says "you can interact here": one blue light lap around its border when it
first comes into view, and a soft edge light that follows the pointer along the border (touch: where the finger presses). No pills, no per-control pulse.
Engine: itbCues() in site.js · markup: data-cue="Verb" + id on the piece's container. The light lives in .cue-layer (one page-level layer, under the nav)
so the container's overflow never clips it. Same 1px masked edge light as the .gl cards. Keep this block BEFORE the PHONE PASS block. ================= */
[data-cue-slot]{display:none!important}
.cue-layer{position:absolute;left:0;top:0;z-index:30;width:100%;height:0;overflow-x:clip;overflow-y:visible;pointer-events:none}
.cue-o{--cue-w:1.5px;position:absolute;left:0;top:0;display:none;box-sizing:border-box;padding:var(--cue-w);pointer-events:none} /* ring = clip-path set by site.js (a mask hid the lights in iOS Safari) */
.cue-o.awake{display:block}
.cue-lapg{position:absolute;inset:0;opacity:0}
.cue-o i{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform}
/* lap: a short comet (head + three fading tail lights) */
.cue-lap{width:calc(var(--cr) * 2);height:calc(var(--cr) * 2);margin:calc(var(--cr) * -1) 0 0 calc(var(--cr) * -1);
background:radial-gradient(closest-side,color-mix(in srgb,var(--cue-c) 50%,#fff),var(--cue-c) 30%,color-mix(in srgb,var(--cue-c) 60%,transparent) 58%,transparent)}
.cue-lapg .cue-lap + .cue-lap{background:radial-gradient(closest-side,var(--cue-c),color-mix(in srgb,var(--cue-c) 45%,transparent) 55%,transparent)}
/* hover: the .gl edge light, moved by transform instead of repainting a gradient */
.cue-hv{--cr:12rem;width:calc(var(--cr) * 2);height:calc(var(--cr) * 2);margin:calc(var(--cr) * -1) 0 0 calc(var(--cr) * -1);opacity:0;
background:radial-gradient(closest-side,color-mix(in srgb,var(--cue-c) 70%,#fff),var(--cue-c) 18%,color-mix(in srgb,var(--cue-c) 45%,transparent) 50%,transparent);transition:opacity var(--med) var(--ease)}
.cue-o.hov .cue-hv{opacity:1}
.cue-o.tap .cue-hv{transition-duration:var(--fast)}
@media (prefers-reduced-motion:reduce){.cue-hv{transition:none}}
/* ----- CUE HOVERS: controls inside a cued piece get a hover that matches their own shape (no generic box). Cursor: hand; grab for drags. ----- */
/* zero specificity on purpose: a page that sets its own cursor on a control (e.g. ew-resize on a slider handle) keeps it */
:where([data-cue]) :where(button,[role="tab"],[role="radio"],[data-cue-ctl]):where(:not(:disabled)){cursor:pointer}
:where([data-cue]) :where([role="slider"],input[type="range"]){cursor:grab}
:where([data-cue]) :where([role="slider"],input[type="range"]):active{cursor:grabbing}
[data-cue][id] input[type="range"]{cursor:grab}
[data-cue][id] input[type="range"]:active{cursor:grabbing}
/* Where the light goes when the piece is not one box */
.hm-flow[data-cue]{--cue-frame:.hm-win}
.cs-hub[data-cue]{--cue-frame:on;--cue-inset:12%;--cue-radius:50%;--cue-under:svg.ln}
@media (max-width:760px){.cs-hub[data-cue]{--cue-frame:ghost;--cue-under:none}}
/* Round nodes (TEVTA hub): a soft halo on the circle itself */
[data-cue] .cs-node .ic{transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
[data-cue] .cs-node:hover .ic{box-shadow:0 0 0 .3125rem color-mix(in srgb,var(--sc) 16%,transparent)}
/* Shopify order flow: a ring hugging the step's box */
.flow[data-cue] .node .bx{transition:background var(--fast),color var(--fast),border-color var(--fast),box-shadow var(--fast)}
.flow[data-cue] .node:hover .bx{border-color:var(--sc,var(--accent));box-shadow:0 0 0 .25rem color-mix(in srgb,var(--sc,var(--accent)) 16%,transparent)}
/* Drag handles and sliders: the thumb lights, nothing else */
[data-cue] .ba-h button{transition:box-shadow var(--fast)}
[data-cue] .ba-h button:hover{box-shadow:0 0 0 .3125rem color-mix(in srgb,var(--accent) 24%,transparent)}
[data-cue] input[type="range"]:hover{accent-color:color-mix(in srgb,var(--accent) 78%,#fff)}
/* Small controls that had no hover of their own: their own shape, their own colours */
[data-cue] .ss-sizes button:not([aria-pressed="true"]):hover{border-color:var(--line-strong);background:color-mix(in srgb,var(--text) 6%,transparent)}
[data-cue] .bc-wal .no:hover{background:#f1f3f5}
[data-cue] .bc-wal .yes:hover{background:#174f84}
[data-cue] .bc-again:hover{text-decoration:underline;text-underline-offset:3px}
[data-cue] .mk-go:hover{text-decoration-thickness:2px}
/* ================= PHONE PASS (2026-10-06). Keep LAST: earlier desktop rules (e.g. .feat.fill rows) override phone blocks above ================= */
@media (max-width:760px){
/* Carousels: one row only (desktop grid-template-rows was stacking cards into a tall column) */
.feat,.feat.fill,.why,.why.fill,.prods,.prods.fill,.posts,.posts.fill,.tiles,.wcards,.pillars,.gallery{grid-template-rows:none!important;grid-auto-rows:auto}
/* Hero: live visual first, then message */
.hero .wrap{display:flex;flex-direction:column;gap:1.25rem}
.hero .stack{order:-1;height:auto!important;aspect-ratio:auto;width:100%}
.hero .w-hub{position:relative;inset:auto!important;aspect-ratio:auto}
.hero .hub-lines,.hero .trust,.hero .lede-more{display:none}
.hero .hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem;padding:0.5rem}
.hero .hcore{grid-column:1/-1;order:-1;position:relative;translate:none;left:auto!important;top:auto!important;width:auto!important;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0;padding:0}
.hero .hcore .hc-top,.hero .hcore .hc-rows{grid-column:1/-1}
.hero .hc-lbl{padding:0.5rem 0.75rem}
.hero .hc-sales{padding:0.5rem 0.75rem;font-size:1.25rem}
.hero .hc-rows{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.hero .hc-rows div{border-bottom:0;border-right:1px solid var(--line);flex-direction:column;gap:0.125rem;padding:0.375rem 0.75rem}
.hero .hc-rows div:last-child{border-right:0}
.hero .hnode{position:relative;translate:none;left:auto!important;top:auto!important;white-space:normal;padding:0.4375rem;gap:0.375rem;min-width:0}
.hero .hnode{width:auto!important;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.hero .hnode span{display:block;width:100%}
.hero .hnode small{display:none}
.hero .hnode b{font-size:0.6875rem}
.hero .hnode svg{width:1rem;height:1rem}
.hero h1{margin-block:0.5rem}
.hero h1>.h1k{margin-bottom:.5rem}
.screen.hero{min-height:auto;justify-content:flex-start;padding-top:calc(var(--nav) + 1rem);padding-bottom:2.5rem}
}
@media (max-width:760px){
/* Proof: compact 2x2 numbers under one wide revenue card */
.bento{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important;gap:0.5rem}
.bento .b-big{grid-column:1/-1;grid-row:auto!important;min-height:0!important;padding:1rem}
.bento .b-big strong{font-size:2.5rem}
.bento .b-big p{margin:0.25rem 0 0;font-size:0.875rem}
.b-bars,.b-chips{display:none!important}
.bento .b-card{grid-column:auto!important;grid-row:auto!important;min-height:0!important;padding:0.875rem}
.bento .b-card strong{font-size:1.75rem}
.bento .b-card span{font-size:0.8125rem}
.bento .b-card em{font-size:0.75rem}
}
@media (max-width:760px){
.trusted{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
.trusted .label{grid-column:1/-1;padding:0.625rem 0.75rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
.trusted a{padding:0.625rem 0.75rem;border-bottom:1px solid rgba(255,255,255,.12)}
.trusted a:nth-of-type(3n){border-right:0}
.trusted a b{font-size:0.9375rem}
.trusted a small{display:none}
}
@media (max-width:760px){
/* Shared phone carousel for rows added after the first pass */
.more-work,.apps,.v2-links{display:grid!important;grid-template-columns:none!important;grid-template-rows:none!important;grid-auto-flow:column;grid-auto-columns:78%;
overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:0.625rem!important;scrollbar-width:none;
margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);border:0!important}
.more-work::-webkit-scrollbar,.apps::-webkit-scrollbar,.v2-links::-webkit-scrollbar{display:none}
.more-work > *,.apps > a,.v2-links > *{scroll-snap-align:start;border:1px solid var(--line)!important}
.case .did{display:none}
.case .kpis span{font-size:0.8125rem}
}
@media (max-width:760px){
#products .head p{display:none}
.prod .sync .rows .row:nth-child(n+4){display:none}
.prod .cfg-opts .cfg-row:nth-child(n+3){display:none}
.prod .cfg-view img{max-height:11rem;width:auto;margin-inline:auto}
}
@media (max-width:760px){
.head.split{display:grid!important;grid-template-columns:1fr!important;gap:1rem}
.head.split > .btn{justify-self:start;width:auto}
#why .head p{display:none}
.v2-lead{grid-template-columns:1fr!important;gap:1.25rem}
.v2-quote blockquote{font-size:1.0625rem}
}
@media (max-width:760px){
.v2-people{grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem}
.v2-people li{flex-direction:column;align-items:flex-start;gap:0.5rem}
.v2-people img{width:100%;height:auto;aspect-ratio:1}
.v2-people b{font-size:0.875rem}
.v2-people span{font-size:0.75rem}
}
@media (max-width:760px){
.screen:not(.hero),.v2-short{padding-block:3.25rem!important}
.step p{display:block;font-size:0.8125rem;color:var(--muted);margin-top:0.25rem}
.steps{gap:1.125rem!important}
}
@media (max-width:760px){#faq .wrap.two > div:first-child .ctas{display:none}#faq h2{margin-bottom:0.5rem!important}}
/* Trusted by: track wrapper; desktop shows one set, phone auto-scrolls a doubled set */
.trusted .t-track{display:contents}
.trusted .t-dup{display:none}
@media (max-width:760px){
.trusted{display:flex!important;flex-direction:column;overflow:hidden}
.trusted .label{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.12);padding:0.625rem 0.875rem!important}
.trusted .t-track{display:flex;width:max-content;animation:trust-marquee 22s linear infinite}
.trusted .t-dup{display:grid}
.trusted a,.trusted a:nth-of-type(3n){flex:none;border-bottom:0;border-right:1px solid rgba(255,255,255,.12);padding:0.875rem 1.125rem}
.trusted:hover .t-track,.trusted:focus-within .t-track{animation-play-state:paused}
}
@keyframes trust-marquee{to{transform:translateX(-50%)}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.trusted .t-track{animation:none;overflow-x:auto}.trusted .t-dup{display:none}}
@media (max-width:760px){
/* Hero motion on phones: live feed line under the hub, synced badge inside each node */
.hero .w-feed{display:block!important;position:relative!important;inset:auto!important;width:100%!important;margin:-1px 0 0!important}
.hero .feed .ev b{display:inline;margin-right:0.5rem}
.hero .w-feed .bar{display:none}
.hero .feed{min-height:0;padding:0.375rem;display:block;overflow:hidden;height:3.25rem}
.hero .feed .ev:nth-child(n+2){display:none}
.hero .feed .ev{animation:ev-in 420ms var(--ease)}
.hero .hnode::after{top:0.25rem;right:0.25rem;font-size:0.5rem}
.hero .hnode.hit{box-shadow:inset 0 0 0 1px var(--accent)}
/* Card tags start on the left like the text above them (flex column was pushing them right) */
.feat .subs,.why .w-chips{align-self:flex-start;justify-content:flex-start}
/* Case study: lead with the store, then numbers as rows */
#work .journey{display:none}
.case .kpis{grid-template-columns:1fr!important;margin-block:0.75rem}
.case .kpis div,.case .kpis div + div{display:grid;grid-template-columns:4.75rem 1fr;align-items:center;gap:0.75rem;padding:0.625rem 0;border-left:0}
.case .kpis div + div{border-top:1px solid var(--line)}
.case .kpis strong{font-size:1.5rem}
.case-txt h3{margin-bottom:0}
.case .stage{margin-bottom:0.25rem}
/* Products "Also live": a short list, not a carousel (its heading tile was taking the first snap) */
.apps{display:grid!important;grid-auto-flow:row!important;grid-template-columns:1fr!important;overflow:visible;margin-inline:0!important;padding-inline:0!important;gap:1px!important;background:var(--line);border:1px solid var(--line)!important}
.apps > a{border:0!important}
.apps .apps-head{padding:0.75rem 1rem;background:var(--ink)}
.apps a{padding:0.75rem 1rem}
}
@keyframes ev-in{from{opacity:0;transform:translateY(0.5rem)}to{opacity:1;transform:none}}
/* Not-yet-built pages in menu and footer: listed, not clickable */
a.soon{cursor:default;opacity:.6}
.mega a.soon:hover{background:none}
.soon-tag{font:400 .625rem var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:.5rem;white-space:nowrap}
/* FLOW v4b on phones: panels sit close to their neighbours, less inner padding */
@media (max-width:760px){.screen.blue.panel{padding-block:.5rem!important}.screen.blue.panel .pnl{padding:1.5rem 1.125rem}body .screen:not(.hero){padding-block:2.5rem!important}}
/* ================= UI/UX AUDIT FIXES (2026-10-08, ui-ux-pro-max checklist) ================= */
/* Accessibility: one visible keyboard focus ring everywhere (white on blue panels) */
:where(a,button,summary,input,textarea,select,[role=tab],[role=radio],[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.blue :where(a,button):focus-visible{outline-color:var(--on-accent)}
.blue .form :where(a,button,input,textarea):focus-visible{outline-color:var(--accent)}
/* Skip link (first tab stop) */
.skip{position:fixed;left:1rem;top:-4rem;z-index:1000;padding:.75rem 1rem;background:var(--accent);color:var(--on-accent);font:600 .875rem var(--body);border-radius:var(--r-sm);transition:top var(--fast)}
.skip:focus{top:1rem}
/* Typography: real interface labels never below 12px (mock-ups inside illustrations keep their own sizes) */
.feat .tag,.status,.status.sm,.hm-ex,.hm-cap p b,.hm-next b,.bh-cap,.wbar,.win .bar,.desk .bar,.mk-stock-t .h span,.mk-stock-ev em,.soon-tag,.fgrid h3{font-size:max(12px,.75rem)}
/* Touch: text links get a 44px-tall hit area without changing their look */
.link{position:relative}
.link::after{content:"";position:absolute;inset:-14px -4px}
.cfg-pick button::after{inset:-12px -4px}
@media (max-width:760px){
.form input,.form textarea,.form select{font-size:16px}
.theme-tg,.burger{min-width:44px;min-height:44px}
.more a,.did a,.v2-ind a,.form .chips label{min-height:44px}
#hmQ .hm-q-nav button{width:44px;height:44px}
.nav .logo{min-height:44px;display:flex;align-items:center}
.nav .menu a,.nav .menu button,.nav .btn{min-height:44px}
body .wrap p:not(.ob p):not(.ph-msgs p){font-size:max(15px,1em)}
body .hero .wrap h1>.h1k:not(.kicker){font-size:max(15px,.75rem)} /* same phone floor the kicker had as a
*/
}
.screen[tabindex="-1"]:focus{outline:none}
body .bh-cap,body .hm-ex,body .hm-cap p b,body .hm-next b{font-size:max(12px,.75rem)}
/* ================= HOME TYPE v3 (2026-10-08): Kanit + IBM Plex Sans (user compared Inter / Geist / Jakarta on a real laptop and chose Kanit), calmer scale =================
Scale at 1440×900: h1 ~55 · h2 42 · card h3 21 · intro 17 (never under 16px) · body 16 · card text 15 · small 13–14 · labels 12 · buttons 15. Capped by viewport height. */
body{--fs-display:clamp(2.25rem,min(3.9vw,6.3vh),3.75rem);--fs-h2:clamp(1.75rem,min(2.9vw,5vh),2.75rem);--fs-h3:clamp(1.125rem,min(1.45vw,2.4vh),1.375rem);--fs-lede:clamp(max(1rem,16px),min(1.2vw,2vh),1.1875rem)}
body h1,body h2{letter-spacing:-.02em;font-weight:600}
body h3,body .feat h3,body .hm-cap h3{letter-spacing:-.01em;font-weight:500}
body .hero h1{line-height:1.04}
body .head h2,body .cta-grid h2,body .h2{line-height:1.1}
body .lede,body .hero .lede,body .head p{font-size:var(--fs-lede);line-height:1.6}
body .label,body .screen .head .label:first-child,body .cta-grid > div > .label:first-child,body #faq .wrap.two > div:first-child > .label:first-child{font-size:.75rem;letter-spacing:.08em}
body .btn{font-size:.9375rem}
body .menu > a,body .menu > .dd > button{font-size:.9375rem}
body .feat p,body .prod p,body .hm-txt p,body .hm-why li,body .apps a span{font-size:max(15px,.9375rem);line-height:1.55}
body .faq details p,body .hm-nums span{font-size:1rem}
body .feat .subs span,body .more a,body .did a,body .v2-ind a{font-size:.8125rem}
body .link{font-size:.875rem}
body #faq .faq summary{font-size:clamp(1.0625rem,1.4vw,1.1875rem)}
body .trust span{font-size:.9375rem}
/* ================= HOME COLOUR, CALMER (2026-10-08, user: "too colourful") =================
Service colour lives only in small markers: icons, dots, the hero label squares. Text, lines, tags, glows and progress stay neutral / brand blue. */
.screen.navy{background:linear-gradient(var(--page),transparent 10rem,transparent calc(100% - 10rem),var(--page)),
radial-gradient(48rem 26rem at 84% 34%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),var(--ink)}
body #faq .faq summary::before{color:var(--muted);font-family:var(--body);font-size:.8125rem}
/* Hero headline: three fixed lines; the text column is a little wider so "Software that scales." always fits one line */
body[data-page="home"] .hero h1{max-width:none}
@media (min-width:981px){body[data-page="home"] .hero .wrap:not(.bh-foot){grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
/* Product Configurator card (home + Shopify): only the cloth swatches are interactive. Lapel / closure / waistcoat show the chosen value as plain text,
no selected-chip border, so nothing looks clickable that is not (user, 2026-10-08) */
.cfg-ch em:not(.on){display:none}
.cfg-ch em.on{border:0;background:none;padding:0;color:var(--text);font-weight:500}
/* "Add to cart" in the configurator card is not a real button: plain text, no fill (user, 2026-10-08) */
.cfg-buy b{background:none;color:var(--muted);padding:0;font-weight:500}
/* ================= QUOTE PANEL v2 (2026-10-08, user: the footer form was "way too big and large", make it sleeker) =================
Same content, a third less height: compact fields (40px desktop, 44px phone), sentence-case labels, smaller chips,
form column capped at 28rem, tighter left column. Panel fits in one 900px-high screen with room around it. */
@media (min-width:901px){.cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,28rem);gap:clamp(1.75rem,5vw,5rem);align-items:start}}
.cta-grid h2{margin-block:.75rem 1rem}
.cta-grid > div > p{margin:0}
.cta-grid .ctas{margin-top:1.5rem!important}
.contact-list{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;margin-top:1.25rem;font:500 .875rem var(--body)}
.v2-founder{margin-top:1.25rem;gap:.875rem}
.v2-founder img{width:3.5rem;height:3.5rem;border-radius:var(--r-sm)}
.v2-founder span{font-size:.875rem}
.hm-next{margin-top:1.25rem;gap:.625rem 1.5rem}
.hm-next li{font-size:.875rem;padding-top:.4375rem}
.form{padding:clamp(1.25rem,2.2vw,1.75rem);gap:.875rem;box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
.form .row2{gap:.625rem}
.form label,.form .label{font:500 .8125rem var(--body);text-transform:none;letter-spacing:0;color:var(--muted);gap:.3125rem}
.blue .form .label{color:var(--muted)}
.form input,.form select,.form textarea{font-size:.9375rem;padding:.5625rem .75rem;background:var(--plane)}
.form textarea{min-height:4.5rem;resize:vertical}
.form .chips{gap:.375rem}
.form .chips label{font-size:.8125rem;min-height:2.125rem;padding:0 .75rem;color:var(--text)}
.form .btn{min-height:2.75rem;margin-top:.25rem}
@media (max-width:760px){
.form input,.form select,.form textarea{font-size:16px;min-height:44px}
.form .chips label{min-height:44px}
.cta-grid{gap:1.5rem}
}
/* Left column: WhatsApp button and the founder sit on one row; quote panels get a little less inner padding than the proof panel */
.cta-grid > div:first-child{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.5rem}
.cta-grid > div:first-child > *{flex:1 1 100%}
.cta-grid > div:first-child > .label{flex:0 0 100%}
.cta-grid > div:first-child > .ctas,.cta-grid > div:first-child > .v2-founder{flex:0 1 auto}
.cta-grid > div:first-child > .v2-founder{max-width:24rem;margin-top:1.5rem}
.screen.blue.panel .pnl.cta-grid{padding:clamp(1.5rem,3.6vw,3.5rem)}
/* ================= ALL PAGES v4 (2026-10-08): home rules rolled out =================
Every page: continuous canvas (paper bands removed, alt bands -> .screen.navy, blue bands -> .screen.blue.panel), Kanit type scale v3,
one section gap, sleeker quote form. UI labels below move from mono to the body font; mono stays for data (receipts, URLs, order numbers, timestamps). */
.step .n,.step .when,.flow .node .was,.ind em,.wcards em,.pillars .n,.names small,.quote cite,.thumbs span,.shot .stamp,.svc .go,.svc .tag,
.g-weeks,.g-row span,.b-chips i,.trusted a small,.more-work .mw-tag,.t-cta .go,.swipe-hint,.textlink,.crumbs,.form .done,
.cfg-name,.mk-stock-t .h span,.posts .go,#faq .faq summary::before{font-family:var(--body)}
.g-row span{font-weight:500}
#faq .faq summary::before{color:var(--muted);font-size:.8125rem}
/* Prototype only: cards whose page is not built yet stay visible as plain cards (no link, no hover) so grids keep their full count */
.nolink{pointer-events:none}
.fgrid h3,.fbase{font-family:var(--body)}
.fgrid h3{font-weight:600;letter-spacing:.09em}
/* Service-page heroes = exactly the first screen, like home: text + visual centred in the free height, the stats row pinned to the bottom edge
as a full-width strip, so the next section starts right at the fold (no dead band under the hero) */
.screen.hero > .wrap.hero-foot{display:block;flex:none;min-height:0}
.screen.hero > .wrap.hero-foot > [class*="-stats"]{display:grid;margin-top:clamp(1.25rem,3vh,2rem);padding:0;max-width:none}
@media (min-width:761px){
.screen.hero:has(> .hero-foot){min-height:100svh;justify-content:flex-start;padding-block:calc(var(--nav) + clamp(1rem,3vh,2.25rem)) clamp(1rem,2.5vh,1.75rem)}
.screen.hero:has(> .hero-foot) > .wrap:not(.hero-foot){flex:1;align-items:center}
}
.screen.hero > .wrap.hero-foot > [class*="-stats"] span{font-size:max(12px,.75rem)}
/* HERO SIZE (2026-10-09, user: SEO and Social hero visuals have the right height; Website, Custom, UI/UX, Branding and Shopify were too small).
Those pages give their visual this height on desktop; SEO, Social, iSmartSync and POS keep their own natural size. */
:root{--hero-vis:min(calc(40svh + 17rem),39rem)}
/* COLOUR PASS, ALL PAGES (2026-10-08): a card's service icon sits on a faint tint of its colour; text stays neutral */
.ti{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r-sm);background:color-mix(in srgb,var(--sc,var(--accent)) 13%,transparent);color:var(--sc,var(--accent));margin-bottom:.375rem}
.ti svg{width:1.25rem;height:1.25rem}
.tiles > a:hover .ti,.tiles > div:hover .ti{background:color-mix(in srgb,var(--sc,var(--accent)) 22%,transparent)}
/* Eyebrow labels outside a .head (e.g. two-column sections) get the same muted text + accent square as every other section label */
.wrap.two > div > .label.acc:first-child{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.75rem;letter-spacing:.08em}
.wrap.two > div > .label.acc:first-child::before{content:"";width:.5rem;height:.5rem;background:var(--accent);flex:none}
.screen:not(.hero) .label.acc:first-child{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.75rem;letter-spacing:.08em}
.screen:not(.hero) .label.acc:first-child::before{content:"";width:.5rem;height:.5rem;background:var(--accent);flex:none}
/* Case study departments: one colour per department on the number and the top edge */
.pillars > div[style*="--sc"]{box-shadow:inset 0 2px 0 var(--sc)}
.pillars > div[style*="--sc"] .n{color:var(--sc);display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.pillars > div[style*="--sc"] .n::before{content:"";width:.45rem;height:.45rem;border-radius:1px;background:var(--sc)}
/* STAT CARDS (2026-10-09, from the TEVTA case study; user: real numbers must stand out, not read as generic data).
Use ONLY for real, confirmed results (proof panels, project results, case studies). Not for hero credential strips or numbers inside illustrations.
Markup:
927what it means
…
Variants: .lg (proof panels) · .sm (inside narrow columns) · div.ref (a benchmark that isn't ours: outlined, quieter) · on .blue panels the rule turns white */
.statcards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:.75rem}
.statcards>div{display:grid;gap:.375rem;align-content:start;min-width:0;padding:1.125rem 1.125rem 1.25rem;border:1px solid var(--line);border-top:2px solid var(--sc,var(--accent));border-radius:var(--r);background:var(--plane)}
.statcards strong{font:600 clamp(1.875rem,2.9vw,2.875rem)/1 var(--display);letter-spacing:-.02em;color:var(--text)}
.statcards strong small{font-size:.5em;font-weight:500;letter-spacing:0;color:var(--muted)}
.statcards strong em{font-style:normal;font-size:.62em;vertical-align:.38em;margin-left:.06em;color:var(--star)}
.statcards span{font-size:.875rem;line-height:1.4;color:var(--muted)}
.statcards.lg strong{font-size:clamp(2.25rem,4vw,3.5rem)}
.statcards.lg>div{padding:1.375rem 1.375rem 1.5rem}
.statcards.sm{gap:.5rem}
.statcards.sm>div{padding:.875rem .875rem 1rem}
.statcards.sm strong{font-size:clamp(1.5rem,2.1vw,2rem)}
.statcards.sm span{font-size:.8125rem}
.statcards>div.ref{background:transparent;border-style:dashed;border-top:1px dashed var(--line-strong)}
.statcards>div.ref strong{color:var(--muted);font-weight:500}
/* on blue panels the cards are always white glass (dark mode's blue is light with dark text; borrowing that dark ink made the cards dull, user 2026-10-09) */
.blue .statcards>div{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.1));border-color:rgba(255,255,255,.38);border-top:2px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.blue .statcards strong,.blue .statcards strong small{color:inherit}
.blue .statcards>div.ref strong{font-weight:500}
.blue .statcards span{color:inherit;opacity:.86}
.blue .statcards>div.ref{background:transparent;border:1px dashed rgba(255,255,255,.6);box-shadow:none}
.blue .statcards strong em{color:#f7c04a}
.blue .statcards>div.ref strong{color:inherit;opacity:.88}
@media (max-width:980px){.statcards:not(.sm){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.statcards{gap:.5rem}.statcards>div,.statcards.lg>div{padding:.875rem .75rem 1rem}.statcards strong,.statcards.lg strong{font-size:1.75rem}.statcards.sm strong{font-size:1.25rem}.statcards span{font-size:.8125rem}}
/* ================= v5 SITE RULES (2026-10-09): the home critique pass, rolled out to every page (design/DESIGN-PLAN-v5.md) =================
Boxes only where they mean something; offer grids = tonal glow tiles; related links = quiet list; deep-blue panels in both themes;
proof = centred glass; solid buttons only in nav, hero and the quote form. Keep this block after the PHONE PASS (it carries its own phone rules). */
/* Blue panels: one deep blue in both themes, white text (dark mode's light-blue panel with dark ink glared on the black page) */
.screen.blue.panel .pnl{--on-accent:#fff;color:#fff;
background:radial-gradient(44rem 24rem at 88% -12%,rgba(120,190,255,.3),transparent 64%),radial-gradient(34rem 22rem at -4% 112%,rgba(6,22,46,.55),transparent 70%),linear-gradient(135deg,#1c64a8,#0f3b69)}
.screen.blue.panel .head p,.screen.blue.panel .cta-grid > div > p{color:rgba(255,255,255,.82)}
/* Form on a panel: navy in dark mode (was a black slab), white in light mode */
.screen.blue.panel .form{--on-accent:#071521;--ink:#0c1a29;--plane:#11233a;--plane-2:#172d47;--line:#24405d;--line-strong:#3c5c7c;--muted:#9fb1c2;--text:#eef2f4;
background:var(--ink);box-shadow:0 28px 56px -28px rgba(0,0,0,.6)}
:root[data-theme="light"] .screen.blue.panel .form{--on-accent:#fff;--ink:#fff;--plane:#f2f5f8;--plane-2:#e6edf2;--line:#d3dbe1;--line-strong:#97a3ac;--muted:#56616a;--text:#0e1316;box-shadow:0 28px 56px -28px rgba(4,20,40,.55)}
/* Proof glass on blue: frosted fill, one bright top edge (inset highlight), faint outline, no coloured rule */
.blue .statcards>div{border:1px solid rgba(255,255,255,.16);background:linear-gradient(165deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 28px -18px rgba(0,10,30,.5);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.blue .statcards>div.ref{background:transparent;border:1px dashed rgba(255,255,255,.55);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Centred proof panel (one centred moment per page):
*/
.pnl.center{text-align:center}
.pnl.center .head{justify-items:center;margin-inline:auto;max-width:44rem;grid-template-columns:none}
.pnl.center .head h2{max-width:20ch}
.pnl.center .head p{max-width:none}
.pnl.center .statcards{max-width:62rem;margin:clamp(.5rem,2vh,1rem) auto 0}
.pnl.center .statcards>div{justify-items:center;padding:1.75rem 1.25rem 1.875rem}
.pnl.center .statcards span{max-width:24ch}
.pnl.center .pf-date,.pnl.center .pf-note{margin:.875rem auto 0;font-size:.8125rem;opacity:.72;max-width:60ch}
@media (max-width:760px){
.pnl.center,.pnl.center .head{text-align:left;justify-items:start}
.pnl.center .statcards{grid-template-columns:1fr;margin-inline:0;max-width:none;width:100%}
.pnl.center .statcards>div{grid-template-columns:5.25rem 1fr;align-items:center;justify-items:start;padding:1rem 1rem 1.0625rem}
.pnl.center .pf-date,.pnl.center .pf-note{margin-inline:0}
}
/* Link chips are text links, not outlined boxes */
.more a,.did a{border:0;background:none;color:var(--text);padding-inline:0 .875rem}
.more a:hover,.did a:hover{background:none;color:var(--accent)}
.more .label{margin-right:.25rem}
/* Glow tile (.gl): tonal fill, no outline, faint resting glow in the service colour (--sc) that follows the pointer on hover (site.js),
plus a 1px edge light near the pointer. Transform-only movement, no blur filters. Touch: lights where the finger presses (site.js); off under reduced motion. */
.gl{--glc:var(--accent);position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:var(--r-lg);background:var(--plane);transition:background var(--fast)}
.gl > *{position:relative;z-index:1}
.gl:hover{background:var(--gl-hover,var(--plane-2))}
.gl::after{content:"";position:absolute;z-index:0;left:var(--rx,2.75rem);top:var(--ry,2.75rem);width:24rem;height:24rem;margin:-12rem 0 0 -12rem;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,color-mix(in srgb,var(--glc) var(--gi,22%),transparent),transparent);opacity:.5;
transform:translate3d(var(--dx,0px),var(--dy,0px),0);transition:transform .35s var(--ease),opacity var(--med) var(--ease);will-change:transform}
.gl.gl-on::after{opacity:1}
/* touch press: the glow appears at the finger (no slide from its resting spot) */
.gl.tap::after{transition:opacity var(--fast) var(--ease)}
.gl::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity var(--med) var(--ease);
background:radial-gradient(14rem circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--glc) 65%,transparent),transparent 70%);
-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,linear-gradient(#000 0 0);mask-composite:exclude}
.gl.gl-on::before{opacity:1}
:root[data-theme="light"] .gl{--gi:10%;--gl-hover:#fff;--muted:#47515a}
/* light mode: the edge light carries the colour, the fill stays clean so text keeps full contrast */
:root[data-theme="light"] .gl.gl-on{box-shadow:0 14px 30px -20px rgba(15,40,60,.35)}
/* Offer grids (.tiles outside the FAQ) become glow tiles: bigger tinted icon, no repeated eyebrow label */
.screen:not(#faq) .tiles{gap:clamp(.625rem,1vw,.875rem);background:none;border:0}
.screen:not(#faq) .tiles > *{border:0;border-radius:var(--r-lg);padding:clamp(1.25rem,2vw,1.75rem);gap:.5rem;align-content:start}
/* never the old inverted (white-on-dark) card hover: glow tiles keep their own colours */
.screen:not(#faq) .tiles > .gl:hover{background:var(--gl-hover,var(--plane-2));border-color:transparent}
.screen:not(#faq) .tiles > * > .label{display:none}
.screen:not(#faq) .tiles .ti{width:2.75rem;height:2.75rem;border-radius:var(--r);background:color-mix(in srgb,var(--sc,var(--accent)) 15%,transparent);margin-bottom:.75rem}
.screen:not(#faq) .tiles .ti svg{width:1.375rem;height:1.375rem}
.screen:not(#faq) .tiles h3{font-size:var(--fs-h3);line-height:1.2}
.screen:not(#faq) .tiles .link{margin-top:auto;padding-top:.25rem}
/* "Pairs well with" in FAQs: four small glow cards in a 2×2 grid (shared .gl, IT Brain blue), same card look as the other offer tiles */
#faq .tiles{grid-template-columns:1fr 1fr;gap:clamp(.5rem,.8vw,.75rem);background:none;border:0}
#faq .tiles > *{border:0;border-radius:var(--r-lg);padding:1rem 1.125rem 1.0625rem;gap:.1875rem;align-content:start}
#faq .tiles > .gl:hover{background:var(--gl-hover,var(--plane-2));border-color:transparent}
#faq .tiles > .gl::after{width:16rem;height:16rem;margin:-8rem 0 0 -8rem}
#faq .tiles h3{font-size:1rem;font-weight:500}
#faq .tiles p{font-size:.875rem}
@media (max-width:760px){
/* offer tiles stack (icon left) instead of swiping; related links stay a two-column list */
.screen:not(#faq) .tiles,#faq .tiles{display:grid!important;grid-auto-flow:row!important;overflow:visible!important;margin-inline:0!important;padding-inline:0!important}
.screen:not(#faq) .tiles{grid-template-columns:1fr!important;gap:.5rem!important}
.screen:not(#faq) .tiles > *{border:0!important;display:grid;grid-template-columns:2.5rem 1fr;column-gap:.875rem;row-gap:.25rem;padding:1.125rem}
.screen:not(#faq) .tiles .ti{grid-row:span 3;width:2.5rem;height:2.5rem;margin:0}
#faq .tiles{grid-template-columns:1fr 1fr!important;gap:.5rem!important}
#faq .tiles > *{border:0!important;padding:.875rem!important}
}
/* Small app rows under the product cards (home, Shopify): a quiet list, not boxes; "live" said once in the row label */
.apps{gap:0 clamp(1.25rem,2.5vw,2.5rem);background:none;border:0}
.apps>*{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:1rem 0 0}
.apps .apps-head{background:none;align-content:start;padding:1.125rem 0 0}
.apps a:hover{--text:inherit;--muted:inherit;background:none;color:inherit;border-top-color:var(--text)}
@media (max-width:760px){
.apps{background:none!important;border:0!important;gap:0!important}
.apps>*,.apps>a{border:0!important;border-top:1px solid var(--line)!important;padding:.875rem 0!important}
}
/* Products sections (home + Shopify, #products): glow cards (shared .gl). On home the second and last glow moment after services.
Product cards: the glow lives in the text area only; the live windows (.ui, opaque, above the glow) stay real objects. */
#products .prod.gl{border:0;background:var(--plane)}
#products .prod.gl:hover{background:var(--gl-hover,var(--plane-2))}
#products .prod.gl::after{width:32rem;height:32rem;margin:-16rem 0 0 -16rem}
#products .prod.gl::before{z-index:0}
#products .prod.gl .ui{background:var(--ink)}
/* "Also in daily use": three small glow tiles, icon left; the row label sits beside them without a box or rule */
#products .apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.625rem,1vw,.875rem);align-items:stretch}
/* the row label is a small heading above the three tiles (full width), not a lone left column */
#products .apps .apps-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.125rem .75rem;border:0;padding:0}
/* four apps (Shapewiz added 2026-11-08): one row of four on desktop, two by two on tablets */
#products .apps:has(> a:nth-of-type(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:761px) and (max-width:1000px){#products .apps:has(> a:nth-of-type(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Product cards: the live window sits INSIDE the card (card padding all round, own radius + thin frame), so the card fill and the glow wrap it */
#products .prod .ui.mk-win{margin:0 clamp(1.125rem,2vw,1.875rem) clamp(1.125rem,2vw,1.875rem);border:1px solid var(--line);border-radius:var(--r);background:var(--ink)}
/* tablet, two cards side by side: the window grows with its content instead of clipping */
@media (max-width:1000px){#products .prod .ui.mk-win{height:auto;min-height:13rem}}
/* configurator + stock labels are UI text: body font (mono = data only) */
.cfg-opts,.cfg-ang,.cfg-buy b{font-family:var(--body)}
#products .apps > a.gl{border:0;border-radius:var(--r-lg);background:var(--plane);padding:1.125rem 1.25rem;display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:.875rem;row-gap:.25rem;align-content:start}
#products .apps > a.gl:hover{background:var(--gl-hover,var(--plane-2));color:inherit}
#products .apps > a.gl::after{left:var(--rx,2.25rem);top:var(--ry,2.25rem);width:18rem;height:18rem;margin:-9rem 0 0 -9rem}
#products .apps .ai{grid-row:span 2;width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:var(--r);background:color-mix(in srgb,var(--sc) 15%,transparent);color:var(--sc)}
#products .apps .ai svg{width:1.125rem;height:1.125rem}
@media (max-width:760px){
#products .apps{grid-template-columns:1fr;gap:.5rem!important}
#products .apps .apps-head{border:0!important;padding:0 0 .25rem!important}
#products .apps > a.gl{border:0!important;padding:1rem!important}
}
@media (max-width:1100px){#why .hm-q{padding-left:0;margin-top:1rem}}
/* Work cards (Shopify, Custom, UI/UX, Website) + POS choice cards (.wk, 2026-10-09): tonal fill, no outline. Resting glow + pointer glow in IT Brain blue, under the text so the screenshot stays clean. A card that doesn't link (div) glows only on hover. */
.wk.wk{border:0;background:var(--plane)}
.wk{--sc:var(--accent)}
.wk.gl::before{z-index:0}
/* numbered offer tiles (Branding, Photo, Blockchain): the number sits quietly above the title */
.screen:not(#faq) .tiles .n{font:600 .75rem var(--body);color:var(--muted);letter-spacing:.04em}
/* mono only for data: hero diagram node captions use the body font */
.hnode small{font-family:var(--body)}
/* a status badge in a product card's top row must not push the title below its neighbour's */
.txt-top .status{margin-block:-.375rem}
/* ================= HEADER & FOOTER v6 (2026-10-10) =================
One control height (--hf-ctl, 40–44px) for the quote button, theme toggle and burger (square, same radius as the button); one logo box
(--hf-logo) in header and footer; nav links and footer links share one type set (--hf-link: body 500, soft ink at rest, blue on hover,
full text colour for the current page). Footer headings use the label style. The header slides away on scroll down and comes back on
scroll up (site.js HEADER v7); transform only, no slide under reduced motion. (The phone action bar .mcta was removed 2026-10-12.) */
:root{--hf-ctl:clamp(40px,2.625rem,44px);--hf-logo:clamp(32px,2.25rem,36px);--hf-link:500 .9375rem/1.5 var(--body);
--hf-ink:color-mix(in srgb,var(--text) 80%,var(--ink))}
/* Surface: clear over the hero at the top, blurred page colour once scrolled, solid while the phone menu is open */
.nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid transparent;
transition:transform var(--med) var(--ease),background-color var(--fast),border-color var(--fast)}
.nav.scrolled{background:color-mix(in srgb,var(--ink) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav.open{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
.nav.hf-hide:not(.open){transform:translateY(-100%)}
html.hf-lock,html.hf-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
/* Logo: same box in header and footer. The wordmark sits in the top half of the lock-up (tagline below), so the image drops 4% of its
height to put the wordmark nearer the nav text line while the round mark stays visually centred */
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{height:var(--hf-logo);width:auto}
.nav .wrap{gap:0}
.nav .logo{height:var(--hf-ctl);margin-right:auto}
.nav .logo img{translate:0 calc(var(--hf-logo) * .04)}
/* Controls: one height, one radius, one outline */
.nav .menu .btn{height:var(--hf-ctl);min-height:0;padding-inline:1.125rem;font:var(--hf-link);border-radius:var(--r-sm)}
.nav .theme-tg,.nav .burger{width:var(--hf-ctl);height:var(--hf-ctl);min-width:0;min-height:0;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-sm);
background:none;color:var(--text);transition:background var(--fast),color var(--fast),border-color var(--fast)}
.nav .burger:hover{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.nav .theme-tg{margin-left:.5rem}
.chev{width:.75rem;height:.75rem;flex:none;transition:transform var(--fast) var(--ease)}
.dd > button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav .burger path{transform-origin:10px 10px;transition:transform var(--fast) var(--ease)}
.nav.open .burger .b1{transform:rotate(45deg) translateY(4px)}
.nav.open .burger .b2{transform:rotate(-45deg) translateY(-4px)}
/* Pages not built yet: plain muted text, same font as the rest of the menu */
.nav a.soon{opacity:1;color:var(--muted)}
.nav a.soon svg{color:var(--muted);opacity:.7}
.nav .soon-tag{font:400 .8125rem var(--body);text-transform:none;letter-spacing:0;color:var(--muted);margin-left:.375rem}
/* Desktop: links and button on one centre line, even gaps */
@media (min-width:981px){
.nav .menu{gap:.125rem;margin-left:0}
.nav .menu > a:not(.btn),.nav .menu > .dd > button{height:var(--hf-ctl);min-height:0;padding:0 .875rem;gap:.375rem;font:var(--hf-link);letter-spacing:0;color:var(--hf-ink);border-radius:var(--r-sm)}
.nav .menu > a:not(.btn):hover,.nav .menu > .dd > button:hover{color:var(--accent)}
.nav .menu > .dd > button[aria-expanded="true"],.nav .menu > a[aria-current]:not(.btn){color:var(--text)}
.nav .menu .btn{margin-left:.875rem}
.hf-mfoot{display:contents}
.hf-theme{display:none}
.mega b{font:var(--hf-link)}
}
/* Phone + tablet menu (≤980px): logo + menu button in the header; the panel fills the screen under it. Groups are accordion rows
(Services, Products, Work; each opens in place, the others stay as they are), 44px link rows in the desktop link type, Appearance row and the full-width quote
button pinned to the bottom. Visibility switches instantly (never waits on a transition); the 0.5rem drop is decoration only. */
@media (max-width:980px){
:root{--hf-ctl:44px;--hf-logo:clamp(30px,2rem,32px)}
.nav .wrap > .theme-tg{display:none}
.nav .burger{margin-left:0}
.nav .menu{position:fixed;inset:calc(var(--nav) + env(safe-area-inset-top,0px)) 0 auto;
height:calc(100vh - var(--nav) - env(safe-area-inset-top,0px));height:calc(100dvh - var(--nav) - env(safe-area-inset-top,0px));
display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.25rem var(--gutter) 0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:9rem;
background:var(--ink);visibility:hidden;transform:translateY(-.5rem);transition:transform var(--fast) var(--ease)}
.nav.open .menu{visibility:visible;transform:none}
.nav .menu > *{flex:none}
.nav .menu > .dd + .dd{border-top:1px solid var(--line)}
.nav .menu > .dd > button{width:100%;min-height:3.5rem;padding:0;justify-content:space-between;border:0;
font:var(--hf-link);font-size:1.0625rem;letter-spacing:0;color:var(--text);cursor:pointer}
.nav .menu > .dd > button .chev{width:1rem;height:1rem;color:var(--muted)}
.nav .menu > .dd:not(.open) > .mega{display:none}
.nav .mega,.nav .mega.mega-sm{position:static;translate:none;transform:none;width:auto;visibility:visible;opacity:1;grid-template-columns:1fr;gap:0;
padding:0 0 .75rem;border:0;border-radius:0;background:none;transition:none}
.nav .mega .grp{padding:.75rem 0 .25rem}
.nav .mega a{min-height:44px;padding:.5rem 0;grid-template-columns:1.25rem 1fr;align-items:center;gap:0 .875rem;border-radius:0}
.nav .mega a:not(.soon):hover{background:none;color:var(--accent)}
.nav .mega svg{grid-row:auto;width:1.25rem;height:1.25rem}
.nav .mega b{font:var(--hf-link);color:inherit}
.nav .mega small{display:none}
.hf-mfoot{position:sticky;bottom:0;margin-top:auto;padding:.5rem 0 calc(1rem + env(safe-area-inset-bottom,0px));background:var(--ink);border-top:1px solid var(--line)}
.hf-theme{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem;font:var(--hf-link);color:var(--text)}
.hf-seg{display:inline-flex;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.hf-seg button{min-width:4.75rem;min-height:44px;padding:0 1rem;border:0;border-radius:var(--r-xs);background:none;color:var(--muted);font:var(--hf-link);cursor:pointer;
transition:background var(--fast),color var(--fast)}
.hf-seg button:hover{color:var(--text)}
.hf-seg button[aria-pressed="true"]{background:var(--plane-2);color:var(--text)}
.hf-mfoot .btn{width:100%;height:48px;margin:.5rem 0 0;justify-content:center}
}
@media (min-width:600px) and (max-width:980px){.nav .dd.open > .mega{grid-template-columns:1fr 1fr;column-gap:2rem}.nav .mega .grp{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.nav .menu,.nav .burger path{transition:none}}
/* Footer: same .wrap edges as the header, label headings, nav link type */
footer{padding-block:clamp(3.5rem,9vh,5rem) 0}
footer .fgrid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2.5rem clamp(1.5rem,3vw,2.5rem)}
footer .fgrid h3{margin:0 0 1rem;font:600 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
footer .fgrid ul + h3{margin-top:2.25rem}
footer .fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:inherit}
footer .fgrid li > a,footer .fgrid li > span{font:var(--hf-link);color:var(--hf-ink);transition:color var(--fast)}
footer .fgrid li > a:hover{color:var(--accent)}
footer .fgrid li > a[aria-current]{color:var(--text)}
footer .about p{max-width:38ch;margin:1.25rem 0 1.5rem;font-size:.9375rem;line-height:1.6;color:var(--muted)}
footer .about .contact li > span{color:var(--muted);font-weight:400}
footer .fbase{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;margin-top:clamp(2.5rem,6vh,3.5rem);
padding-block:1.5rem;border-top:1px solid var(--line);font:400 .8125rem/1.5 var(--body);color:var(--muted)}
footer .social{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0}
footer .social a{color:var(--muted);transition:color var(--fast)}
footer .social a:hover{color:var(--accent)}
@media (max-width:1180px){footer .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}footer .fgrid .about{grid-column:1/-1}footer .about p{max-width:56ch}}
/* Tablet: the about row uses the same three columns (text under the logo across two, contact lines in the third) so no half-empty row */
@media (min-width:761px) and (max-width:1180px){
footer .fgrid .about{display:grid;grid-template-columns:subgrid;align-items:start}
footer .about .logo{grid-column:1}
footer .about p{grid-column:1/3;grid-row:2;margin-bottom:0}
footer .about .contact{grid-column:3;grid-row:2;margin-top:1.25rem}
}
@media (max-width:760px){
footer .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
footer .fgrid ul{gap:0}
footer .fgrid li > a,footer .fgrid li > span{display:inline-flex;align-items:center;min-height:44px}
footer .fgrid h3{margin-bottom:.25rem}
footer .fgrid ul + h3{margin-top:1.75rem}
footer .fbase{flex-direction:column;align-items:flex-start;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
footer .social{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:1.75rem}
footer .social a{display:inline-flex;align-items:center;min-height:44px}
}
/* ================= WINDOW TABS (.wtabs, 2026-10-09): every navigation that switches between views = tabs on top of ONE window =================
Look taken from the SEO hero (.se-g / .se-tb): the tabs are the window's top edge, the views sit inside it. Markup:
Quiet hairline list (the home "What clients say" look), no cards. Word-for-word quotes, trimmed only with "…". Stars only on Google reviews (Google's own rating).
No Review / AggregateRating schema about IT Brain. */
.revs{grid-column:1/-1;margin-top:clamp(1.75rem,4.5vh,3rem)}
.revs-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;padding-bottom:.875rem}
.revs-g{position:relative;font:500 .8125rem var(--body);color:var(--text);text-decoration:none}
.revs-g::after{content:"";position:absolute;inset:-12px -4px}
.revs-g:hover{color:var(--accent)}
.revs-g em,.revs .st{font-style:normal;color:var(--star);letter-spacing:.08em}
.revs-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0 clamp(1.25rem,3vw,2.5rem)}
.revs figure{margin:0;padding-block:1rem;border-top:1px solid var(--line);display:grid;grid-template-rows:1fr auto;gap:.75rem}
.revs blockquote{margin:0;font:400 clamp(1rem,1.15vw,1.0625rem)/1.55 var(--display);color:var(--text)}
.revs figcaption{display:grid;gap:.125rem;font-size:.8125rem;color:var(--muted)}
.revs figcaption b{font-weight:500;color:var(--text)}
.revs .st{display:inline;margin-right:.25rem}
.revs figcaption > span{display:block}
/* ================= BUILT WITH (2026-10-10, SEO-PLAN §5): one quiet row of tech names with Simple Icons (js/tech.js), never in a hero =================
Built with
React
…
. One colour, follows the theme; the name is the content. */
.tech-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:clamp(1.5rem,4vh,2.5rem);padding-top:1.125rem;border-top:1px solid var(--line)}
.tech{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.625rem 1.25rem}
.tech li{display:flex;align-items:center;gap:.4375rem;font:500 .875rem var(--body);color:var(--muted)}
.tech svg{width:1rem;height:1rem;fill:currentColor;flex:none}
/* MARQUEE (2026-10-11, site.js): Trusted by + Built with = one full-width sliding line; edges fade; pauses on hover/off screen */
[data-mq].mq-on{flex-wrap:nowrap}
/* before the script turns it into a marquee, the row is already one clipped line (no layout shift on load) */
[data-mq]:not(.mq-on){flex-wrap:nowrap!important;overflow:hidden;white-space:nowrap}[data-mq]:not(.mq-on) > *,[data-mq]:not(.mq-on) .tech{flex:none;flex-wrap:nowrap}
.mq{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mq-t{display:flex;width:max-content;align-items:center;gap:inherit;margin:0;padding:0;list-style:none;animation:mq var(--mq-t,40s) linear infinite}
.trust .mq-t{gap:0 2.25rem}.tech-row .mq-t{gap:0 2rem}
.mq-t > *{flex:none;white-space:nowrap}
[data-mq]:hover .mq-t,[data-mq]:focus-within .mq-t,.mq-off .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(var(--mq-d,-50%))}}
/* ================= HERO STRIP (2026-10-12, user: "this gives every page a proper structure that every page follows") =================
The one component for every hero's highlights, numbers or features: a glass strip of equal cells split by hairlines; each cell = an icon on a tint
+ a bold value + one plain sentence-case line (no uppercase labels, no stat numerals). 4 (or 3/5) across on desktop, 2 per row up to 980px;
an odd last cell spans its row.
COLOUR (user 2026-10-12: "not green on every page; a meaningful colour behind each icon", like the Charcoal case study's result cards): every cell
its own colour, set on the li, chosen by what the cell is about; no two cells in one strip share a colour:
Shopify / stores --c-shop (the only green) · orders, counters, branches, retail --c-pos · apps, products we built --c-apps · Shopify apps --c-sapps ·
websites, live / online, sync --c-web · search, reach, growth --c-seo · design, people, clients, years --c-ux · AI, reports, forecasts --c-ai ·
accounts, FBR, invoices, back office --c-erp · blockchain, and what stays the client's (NDA, own code and domain, own ad accounts, kit they keep) --c-chain.
--c-apps, --c-erp and --c-ai are three purples: --c-apps never shares a strip with --c-erp or --c-ai (side by side they read as one colour).