/* Site & Stack — site system (homepage + shared chrome).
   Structure after sunbeam.framer.media; identity, copy and assets are Site & Stack's own. */

@font-face{font-family:"Urbanist";src:url(/assets/urbanist-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Urbanist";src:url(/assets/urbanist-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jost";src:url(/assets/jost-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(/assets/jost-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* Metric-matched fallbacks so the font swap does not shift the first paint */
@font-face{font-family:"Urbanist Fallback";src:local("Arial");size-adjust:98.25%;ascent-override:95.93%;descent-override:25.24%;line-gap-override:0%}
@font-face{font-family:"Jost Fallback";src:local("Arial");size-adjust:94.25%;ascent-override:111.45%;descent-override:39.06%;line-gap-override:0%}

:root{
  --bg:#FAFAF9; --paper:#F6F3EE; --ink:#1C1A17; --ink-2:#2A2724; --muted:#57534E; --faint:#8A847C;
  --soft:#F0EDE8; --soft-2:#E9E5DE; --line:#E6E1D9; --white:#FFFFFF;
  --brand:#E8671A; --brand-hi:#F39A5E; --brand-deep:#B4501A;
  --peach:#F4C6A8; --butter:#F2DDB0; --rose:#EEC1B6; --lilac:#E4D8FA; --sky:#D5E6FA; --mint:#CFEBDD;
  --display:"Urbanist","Urbanist Fallback",sans-serif; --body:"Jost","Jost Fallback",sans-serif;
  --ease:cubic-bezier(.44,0,.56,1); --ease-out:cubic-bezier(.12,.23,.5,1); --ease-soft:cubic-bezier(.22,1,.36,1);
  --wrap:1240px; --gutter:20px; --radius-card:24px; --radius-ui:12px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:#CFC8BE var(--bg)}
/* Keyboard focus never lands under the fixed header or the page-edge blur */
:where(a,button,summary,input,select,textarea,[tabindex]){scroll-margin-block:96px 88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Lenis (site.js): its stylesheet, lenis.css 1.3.11. Lenis moves the page with behavior:"instant", so the smooth
   scroll-behavior above still serves in-page anchors, keys and focus. */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);caret-color:var(--brand);text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
::selection{background:#F7D3BB;color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#D6CFC5;border-radius:8px;border:3px solid var(--bg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;text-decoration:none}
.skip-link:focus{left:16px}
.ss-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

.ss-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Header ---------- */
.ss-header{position:fixed;inset:0 0 auto;z-index:50;height:80px;background:rgb(250 250 249/.8);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.ss-header-inner{height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.ss-brand{display:inline-flex;align-items:center;gap:10px;justify-self:start;text-decoration:none;font:700 22px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.ss-brand svg{width:30px;height:30px}
.ss-nav{display:flex;gap:28px}
.ss-nav a{font:500 16px/1.4 var(--body);text-decoration:none;color:var(--ink);transition:color .15s ease}
@media (hover:hover){.ss-nav a:hover{color:var(--muted)}}
/* Current page in the header (Home on the homepage, set in index.html; renderPage marks the rest) */
.ss-nav a[aria-current="page"],.ss-mobile-panel a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:.45em}
.ss-header-cta{justify-self:end}
.ss-menu-toggle{display:none;justify-self:end;width:44px;height:44px;border:0;border-radius:12px;background:transparent;cursor:pointer;position:relative}
.ss-menu-toggle i{position:absolute;left:12px;width:20px;height:2px;border-radius:10px;background:var(--ink);transition:transform .4s var(--ease-soft),top .4s var(--ease-soft)}
.ss-menu-toggle i:first-child{top:17px}.ss-menu-toggle i:last-child{top:25px}
.ss-menu-toggle[aria-expanded="true"] i:first-child{top:21px;transform:rotate(45deg)}
.ss-menu-toggle[aria-expanded="true"] i:last-child{top:21px;transform:rotate(-45deg)}
.ss-mobile-panel{display:none}
@media (max-width:1199.98px){
  .ss-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none} /* a filter would make the header the fixed panel's containing block */
  .ss-header-inner{grid-template-columns:1fr auto}
  .ss-nav,.ss-header .ss-header-cta{display:none}
  .ss-menu-toggle{display:block}
  .ss-mobile-panel{display:block;position:fixed;inset:80px 0 0;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:8px var(--gutter) max(28px,env(safe-area-inset-bottom));
    opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft),visibility 0s .3s}
  .ss-mobile-panel.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft)}
  .ss-mobile-panel nav{display:grid}
  .ss-mobile-panel nav a{padding:14px 0;border-bottom:1px solid var(--line);font:500 20px/1.3 var(--display);text-decoration:none}
  .ss-mobile-panel .ss-cta{margin-top:22px}
  html:has(.ss-mobile-panel.is-open){overflow:hidden}
}

/* ---------- Buttons ---------- */
/* Primary: expanding icon block (pattern from Uiverse "cssbuttons-io-button" by adamgiebl), in brand colors */
.ss-cta{position:relative;display:inline-flex;align-items:center;height:2.8em;padding:.35em 3.3em .35em 1.2em;border-radius:.9em;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);font:500 17px/1 var(--body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;overflow:hidden;
  box-shadow:inset 0 0 1.6em -.6em #000}
.ss-cta-icon{position:absolute;right:.3em;top:.3em;display:flex;align-items:center;justify-content:center;height:2.2em;width:2.2em;border-radius:.7em;
  background:var(--brand);color:var(--ink);box-shadow:.1em .1em .6em .2em rgb(232 103 26/.26);transition:width .3s var(--ease),transform .15s ease}
.ss-cta-icon .ss-icon{width:1.1em;height:1.1em;stroke-width:2;transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .ss-cta:hover .ss-cta-icon{width:calc(100% - .6em)}
  .ss-cta:hover .ss-cta-icon .ss-icon{transform:translateX(.1em)}
}
.ss-cta:active .ss-cta-icon{transform:scale(.95)}
.ss-header .ss-cta{font-size:15px}
.ss-ghost{display:inline-flex;align-items:center;gap:8px;height:2.8em;padding:0 1.2em;border-radius:.9em;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);font:500 17px/1 var(--body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.ss-ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}}
.ss-ghost:active{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- Photo row (AvatarCircles layout, Magic UI) ---------- */
.ss-proof{display:inline-flex;align-items:center;gap:12px;margin:0;font:400 16px/1.4 var(--body);color:var(--muted)}
.ss-proof>span:last-child{text-wrap:balance}
.ss-proof-line{font-weight:500;color:var(--ink);white-space:nowrap}
/* The count closes the face row (owner's layout, 2026-09-27); the line beside it says who they are */
.ss-faces-more{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--bg);background:var(--ink);color:#fff;
  font:600 12.5px/1 var(--body);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ss-faces{display:flex}
.ss-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);background:var(--soft)}
.ss-faces>*+*{margin-left:-12px}

/* ---------- Hero ---------- */
main{padding-top:80px}
.ss-hero-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(8px,calc(100svh - 680px),40px) 0 40px;overflow-x:clip}
.ss-hero{position:relative;width:100%;max-width:var(--wrap);min-height:600px;min-height:min(600px,calc(100svh - 260px));padding:32px 0;display:flex;flex-direction:column;justify-content:center}
.ss-hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:40px;padding:0 var(--gutter);text-align:center}
.ss-hero-text{display:flex;flex-direction:column;align-items:center;gap:20px}
.ss-h1{margin:0;max-width:780px;font:500 64px/1.2 var(--display);letter-spacing:0;color:var(--ink);text-wrap:balance}
.ss-lead{margin:0;max-width:540px;font:400 21px/1.4 var(--body);color:var(--muted);text-wrap:balance}
.ss-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px}

/* Text Animate (Magic UI "blurInUp" by word) — CSS only, so the headline is in the HTML at first paint */
.ss-animate .w{display:inline-block;animation:ss-blur-in-up .55s var(--ease-soft) both;animation-delay:calc(var(--i) * 60ms + 60ms)}
@keyframes ss-blur-in-up{from{opacity:0;filter:blur(10px);transform:translateY(18px)}}

/* Decoration layer: center-anchored by % of the hero box (Sunbeam's slot grid) */
.ss-decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.ss-deco{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;translate:-50% -50%;animation:ss-deco-in .7s var(--ease-out) var(--d) both}
@keyframes ss-deco-in{from{opacity:0;transform:translateY(16px) scale(.92)}}
.ss-deco-mascot{--x:15%;--y:20%;--w:140px;--d:80ms;aspect-ratio:1}
.ss-deco-arch{--x:86.25%;--y:34%;--w:169px;--d:180ms}
.ss-deco-disc{--x:79.25%;--y:87.5%;--w:178px;--d:260ms}
.ss-deco-dot{--x:55.4%;--y:4.7%;--w:56px;--d:320ms}
.ss-deco-step{--x:28.25%;--y:84.2%;--w:73px;--d:380ms}
.ss-mascot{width:100%;height:100%;position:relative}
.ss-mascot img,.ss-mascot svg{position:absolute;inset:0;width:100%;height:100%}
.ss-mascot.is-live img{visibility:hidden}
@media (min-width:1200px) and (max-height:800px){.ss-deco-dot{display:none}}

/* ---------- Showcase (tabs + tinted panel) ---------- */
.ss-showcase{width:100%;max-width:var(--wrap);padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:20px;
  animation:ss-rise .4s var(--ease-out) .1s both}
@keyframes ss-rise{from{opacity:0;transform:translateY(32px)}}
.ss-tabs{display:flex;gap:8px;height:44px}
.ss-tab{display:inline-flex;align-items:center;gap:8px;height:44px;padding:4px 20px 4px 14px;border:0;border-radius:100px;background:transparent;cursor:pointer;
  font:400 15px/1 var(--body);color:var(--ink);transition:background-color .2s ease}
.ss-tab[aria-selected="true"]{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-weight:500}
@media (hover:hover){.ss-tab[aria-selected="false"]:hover{background:#F2EFEA}}
.ss-panel{position:relative;width:100%;aspect-ratio:1200/668;border-radius:var(--radius-card);overflow:hidden;isolation:isolate}
.ss-panel{background:linear-gradient(160deg,var(--t1) 0%,var(--t2) 100%)}
.ss-panel[data-tab="crm"]{--tint:var(--peach);--t1:#F8D6BF;--t2:#F2A273}
.ss-panel[data-tab="accounting"]{--tint:var(--butter);--t1:#F6E4BD;--t2:#EFC064}
.ss-panel[data-tab="invoicing"]{--tint:var(--rose);--t1:#F4D2C9;--t2:#EC9C8A}
.ss-panel::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 8% 6%,rgb(255 255 255/.34) 0 150px,transparent 151px),radial-gradient(circle at 21% -4%,rgb(255 255 255/.34) 0 130px,transparent 131px),
    radial-gradient(circle at 88% 4%,rgb(255 255 255/.30) 0 170px,transparent 171px),radial-gradient(circle at 99% 22%,rgb(255 255 255/.30) 0 110px,transparent 111px),
    radial-gradient(circle at 3% 96%,rgb(255 255 255/.22) 0 160px,transparent 161px)}
.ss-panel::after{content:"";position:absolute;inset:0;z-index:0;background:url(/assets/textures/grain.png);opacity:.7;mix-blend-mode:multiply;pointer-events:none}
.ss-badge{position:absolute;z-index:3;left:20px;top:20px;padding:7px 11px;border-radius:999px;background:rgb(255 255 255/.88);color:var(--ink);font:500 12px/1 var(--body)}
.ss-screen-card{position:absolute;z-index:1;left:5%;right:5%;top:12%;bottom:-40px;border-radius:14px;overflow:hidden;background:#FBFAF8;
  box-shadow:0 1px 2px rgb(28 26 23/.06),0 18px 40px -8px rgb(28 26 23/.18)}
.ss-screen{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .22s ease}
.ss-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.ss-panel[data-tab="crm"] .ss-screen[data-screen="crm"],.ss-panel[data-tab="accounting"] .ss-screen[data-screen="accounting"],.ss-panel[data-tab="invoicing"] .ss-screen[data-screen="invoicing"]{opacity:1;filter:none}

/* Progressive Blur (Magic UI) — stacked backdrop-filter layers, each masked to a band */
.ss-pblur{position:absolute;inset:auto 5% 0;z-index:2;height:var(--pb-h,30%);pointer-events:none}
.ss-pblur>i{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b));
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--s),#000 calc(var(--s) + 12.5%),#000 calc(var(--s) + 25%),transparent calc(var(--s) + 37.5%));
  mask-image:linear-gradient(to bottom,transparent var(--s),#000 calc(var(--s) + 12.5%),#000 calc(var(--s) + 25%),transparent calc(var(--s) + 37.5%))}
.ss-pblur>i:last-child{-webkit-mask-image:linear-gradient(to bottom,transparent 87.5%,#000 100%);mask-image:linear-gradient(to bottom,transparent 87.5%,#000 100%)}

@media (max-width:1199.98px){
  .ss-h1{font-size:55px}
  /* max/min keep the mascot and the blue L 8px inside the edge (at 1024 they ran 4px and 24px off screen) */
  .ss-deco-mascot{--x:max(5%,63px);--y:75.2%;--w:110px}
  .ss-deco-arch{--x:22%;--y:5%;--w:110px}
  .ss-deco-disc{--x:min(95%,calc(100% - 83px));--y:86%;--w:150px}
  .ss-deco-step{--x:23.3%;--y:92%}
  .ss-deco-dot{--x:62%}
}
@media (max-width:809.98px){
  body{font-size:16px}
  .ss-hero-wrap{padding-top:0}
  .ss-hero{min-height:0;padding:72px 0 32px}
  .ss-h1{font-size:40px;width:100%}
  .ss-lead{font-size:19px}
  .ss-proof{flex-direction:column;gap:8px}
  .ss-deco-arch{--x:95%;--y:18%;--w:88px}
  .ss-actions{flex-direction:column;align-items:stretch;width:min(100%,248px)}
  .ss-actions .ss-cta,.ss-actions .ss-ghost{justify-content:center}
  .ss-deco-mascot{--x:4%;--y:83%;--w:72px}
  .ss-deco-disc,.ss-deco-dot,.ss-deco-step{display:none}
  .ss-tabs{align-self:stretch;justify-content:center}
  .ss-tab{padding:4px 14px 4px 10px;font-size:14px}
  .ss-panel{aspect-ratio:1200/668;height:auto}

}
@media (max-height:500px) and (orientation:landscape){
  .ss-header{height:56px} main{padding-top:56px}
  .ss-mobile-panel{inset:56px 0 0}
  .ss-hero-wrap{padding-top:0}
  .ss-hero{min-height:0;padding:16px 0}
  .ss-hero-content{gap:20px}
  .ss-hero-text{gap:12px}
  .ss-h1{font-size:34px}
  .ss-lead{font-size:17px}
  .ss-decor{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ss-animate .w,.ss-deco,.ss-showcase{animation:none}
  .ss-cta-icon,.ss-cta-icon .ss-icon,.ss-ghost,.ss-tab,.ss-screen{transition:none}
}

/* ---------- Footer: closing CTA (characters + Meteors) and link card ---------- */
.ss-footer{position:relative;overflow:hidden;padding-bottom:40px}
.ss-closer{position:relative;max-width:var(--wrap);margin:0 auto;padding:150px var(--gutter) 96px;text-align:center;isolation:isolate}
.ss-closer-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px}
.ss-closer-title{margin:0;max-width:760px;font:500 64px/1.2 var(--display);text-wrap:balance}
.ss-closer-lead{margin:0 0 20px;max-width:520px;font:400 21px/1.4 var(--body);color:var(--muted);text-wrap:balance}
/* Contact row under the closing CTA: a way in besides the form (email) and when we reply */
.ss-closer-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:4px 0 0;font:400 16px/1.4 var(--body);color:var(--muted)}
.ss-closer-contact :is(a,span){display:inline-flex;align-items:center;gap:8px}
.ss-closer-contact a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgb(28 26 23/.3);
  transition:text-decoration-color .25s var(--ease-soft)}
@media (hover:hover){.ss-closer-contact a:hover{text-decoration-color:var(--brand)}}
.ss-closer-contact .ss-icon{flex:none;width:17px;height:17px;color:var(--brand)}
.ss-closer-decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.ss-closer-art{position:absolute;height:auto;translate:-50% -50%}
.ss-closer-mascot{left:50%;top:13%;width:96px;aspect-ratio:1}
.ss-closer-arch{left:12%;top:74%;width:110px;rotate:-8deg}
.ss-closer-disc{left:88%;top:66%;width:104px}
/* Meteors (Magic UI): 2px head, 50px tail, rotate 215deg, travel 500px, fade out */
.ss-meteors{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000 0 18%,transparent 30% 70%,#000 82%);mask-image:linear-gradient(90deg,#000 0 18%,transparent 30% 70%,#000 82%);z-index:0;overflow:hidden;pointer-events:none}
.ss-meteor{position:absolute;top:-5%;width:2px;height:2px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 1px rgb(255 255 255/.06);
  --angle:215deg;transform:rotate(var(--angle));animation:ss-meteor 5s linear infinite}
.ss-meteor::before{content:"";position:absolute;top:50%;width:80px;height:1px;transform:translateY(-50%);background:linear-gradient(to right,rgb(232 103 26/.7),transparent)}
@keyframes ss-meteor{0%{transform:rotate(var(--angle)) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(var(--angle)) translateX(-500px);opacity:0}}
.ss-footer-card-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.ss-footer-card{display:grid;grid-template-columns:1.2fr 2fr;gap:40px 60px;padding:48px 56px 28px;background:var(--white);border-radius:var(--radius-card);box-shadow:0 1px 2px rgb(28 26 23/.04),0 24px 48px -24px rgb(28 26 23/.12)}
.ss-footer-brand p{margin:16px 0 0;color:var(--muted);font-size:16px;line-height:1.5;text-wrap:balance}
.ss-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ss-footer-cols h2{margin:0 0 14px;font:500 14px/1.4 var(--body);color:var(--muted)}
.ss-footer-cols a{display:block;padding:5px 0;font:500 16px/1.4 var(--body);text-decoration:none;color:var(--ink)}
@media (hover:hover){.ss-footer-cols a:hover{color:var(--muted)}}
.ss-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.ss-footer-bottom a{text-decoration:none;color:var(--ink)}
/* Back to top gets the orange arrow every other action link has (arrow-right turned up; the sprite has no arrow-up) */
.ss-top-link{display:inline-flex;align-items:center;gap:6px}
.ss-top-link .ss-icon{flex:none;width:15px;height:15px;color:var(--brand);rotate:-90deg;transition:translate .3s var(--ease-soft)}
@media (hover:hover){.ss-top-link:hover .ss-icon{translate:0 -2px}}
@media (prefers-reduced-motion:reduce){.ss-top-link .ss-icon{transition:none}}
@media (max-width:1199.98px){.ss-closer-title{font-size:55px}}
/* iPad portrait (810-849px): beside the logo the link columns are too narrow for "Custom software", so the logo goes on top */
@media (min-width:810px) and (max-width:899.98px){.ss-footer-card{grid-template-columns:1fr}}
@media (max-width:809.98px){
  .ss-closer{padding:120px var(--gutter) 72px}
  .ss-closer-title{font-size:min(40px,8.8vw)}
  .ss-closer-lead{font-size:19px}
  /* Phones: the arch and the blue L sit in the bottom corners, under the contact line and clear of the footer (72px gap) */
  .ss-closer-arch{left:7%;top:calc(100% - 42px);width:52px}.ss-closer-disc{left:93%;top:calc(100% - 38px);width:50px}.ss-closer-mascot{top:9%;width:76px}
  .ss-footer-card{grid-template-columns:1fr;padding:32px 24px 20px}
  .ss-footer-cols{grid-template-columns:1fr 1fr}
  .ss-footer-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.ss-meteors{display:none}}

/* ---------- Subpage bridge: legacy page content adopts the new tokens until each template is migrated ---------- */
body.subpage{--paper:var(--bg);--ink:#1C1A17;--accent:#E8671A;--orange:#E8671A;--muted:#57534E;--line:#E6E1D9;--sage:#CFEBDD;--yellow:#F2DDB0;background:var(--bg);font-family:var(--body)}
body.subpage main{padding-top:80px}
body.subpage :is(h1,h2,h3){font-family:var(--display);font-weight:500;letter-spacing:-.01em}

/* ---------- Section system ---------- */
.ss-section{padding:64px 0;scroll-margin-top:80px}
.ss-head{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:56px;text-align:center}
.ss-head-left{align-items:flex-start;text-align:left}
.ss-head-split{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left}
.ss-h2{margin:0;max-width:720px;font:500 54px/1.18 var(--display);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.ss-dim{color:#75706A} /* 4.7:1 on --bg (WCAG AA); was #86817B at 3.7 */
.ss-sub{margin:0;max-width:28.5em;font:400 19px/1.5 var(--body);color:var(--muted);text-wrap:pretty}
.ss-note-line{max-width:28.5em;margin:22px auto 0;text-wrap:balance;font:400 14px/1.45 var(--body);color:var(--muted);text-align:center}
.ss-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--soft);font:500 13px/1 var(--body);color:var(--ink);white-space:nowrap}
.ss-pill-sky{background:#DCEBFB}.ss-pill-butter{background:#F5E6C4}.ss-pill-mint{background:#D6F0E2}.ss-pill-rose{background:#F8D9D2}
/* Text link with an orange arrow (same language as the Work cards' "Explore project"); the ink arrow-dot survives only in
   the /services link cards */
.ss-arrow-link{display:inline-flex;align-items:center;gap:8px;font:500 17px/1.3 var(--body);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .25s var(--ease-soft)}
.ss-arrow-link .ss-icon{flex:none;width:18px;height:18px;color:var(--brand);transition:translate .3s var(--ease-soft)}
@media (hover:hover){.ss-arrow-link:hover{text-decoration-color:var(--brand)}.ss-arrow-link:hover .ss-icon{translate:3px 0}}
.ss-arrow-link:focus-visible .ss-icon{translate:3px 0}
@media (max-width:809.98px){.ss-arrow-link{font-size:16px}}
@media (prefers-reduced-motion:reduce){.ss-arrow-link,.ss-arrow-link .ss-icon{transition:none}}
/* Tap targets: an invisible ::after grows each small link or button to at least 40x40 around its centre, so nothing moves.
   Footer links sit 32px apart, where a hit area would overlap the next link, so they get real padding on touch screens only. */
:is(.ss-brand,.ss-nav a,.ss-arrow-link,.ss-closer-contact a,.ss-footer-bottom a,.ss-note-btn,.ss-book button){position:relative}
:is(.ss-brand,.ss-nav a,.ss-arrow-link,.ss-closer-contact a,.ss-footer-bottom a,.ss-note-btn,.ss-book button)::after{content:"";position:absolute;inset:min(0px,calc(50% - 20px))}
@media (pointer:coarse){.ss-footer-cols a{padding:9px 0}}
.ss-arrow-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);transition:background-color .3s var(--ease),color .3s var(--ease)}
.ss-arrow-dot .ss-icon{width:16px;height:16px;stroke-width:2}

/* ---------- Benefits tray (Sunbeam "2 cards": one open, others closed; open follows hover/focus) ---------- */
/* Tray sits 52px under the showcase panel at every width, as on Sunbeam: the hero wrap's 40px bottom padding + 12px */
.ss-section.ss-benefits-section{padding-top:12px}
.ss-benefits{display:grid;grid-template-columns:var(--c1,2.6fr) var(--c2,1fr) var(--c3,1fr);gap:8px;padding:8px;background:var(--soft);border-radius:28px;min-height:360px;
  transition:grid-template-columns .5s var(--ease-soft)}
.ss-benefits[data-open="1"]{--c1:1fr;--c2:2.6fr;--c3:1fr}
.ss-benefits[data-open="2"]{--c1:1fr;--c2:1fr;--c3:2.6fr}
.ss-benefit{position:relative;display:flex;gap:8px;min-width:0;padding:24px;background:#fff;border-radius:20px;overflow:hidden;outline-offset:-3px;transition:background-color .3s var(--ease-soft)}
@media (min-width:1200px){.ss-benefits{min-height:436px}.ss-benefit:not(.is-open){background:#F8F6F4}}
.ss-benefit-text{display:flex;flex-direction:column;justify-content:space-between;gap:24px;flex:0 0 auto;width:min(100%,220px)}
.ss-sticker{width:56px;height:56px;object-fit:contain}
.ss-benefit h3{margin:0 0 8px;font:500 24px/1.25 var(--display);text-wrap:balance}
.ss-benefit p{margin:0;font:400 16px/1.5 var(--body);color:var(--muted);text-wrap:pretty}
/* Closed cards hide their media from pointer and keyboard (it holds buttons); visibility flips after the fade. */
.ss-benefit-media{flex:1;min-width:0;opacity:0;visibility:hidden;transform:translateX(12px);pointer-events:none;
  transition:opacity .35s var(--ease-soft),transform .45s var(--ease-soft),visibility 0s .45s}
.ss-benefit.is-open .ss-benefit-media{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.ss-benefit-shot{position:relative;height:100%;min-height:300px;border-radius:14px;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,var(--t1) 0%,var(--t2) 100%)}
.ss-benefit:nth-child(1) .ss-benefit-shot{--t1:#F8D6BF;--t2:#F2A273}
.ss-benefit:nth-child(2) .ss-benefit-shot{--t1:#F6E4BD;--t2:#EFC064}
.ss-benefit:nth-child(3) .ss-benefit-shot{--t1:#F4D2C9;--t2:#EC9C8A}
.ss-benefit-shot::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 10% 0,rgb(255 255 255/.34) 0 110px,transparent 111px),radial-gradient(circle at 100% 18%,rgb(255 255 255/.3) 0 130px,transparent 131px)}
.ss-benefit-shot::after{content:"";position:absolute;inset:0;z-index:0;background:url(/assets/textures/grain.png);opacity:.6;mix-blend-mode:multiply;pointer-events:none}
.ss-benefit-shot>*{z-index:2}
.ss-chain{position:absolute;inset:0}
/* Booking widget and invoice list: product fragments, same card material as the notes */
.ss-book,.ss-inv{position:absolute;margin:0;background:#fff;border-radius:14px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.25);font:400 13px/1.3 var(--body)}
.ss-book{left:6%;top:8%;width:min(80%,300px);padding:14px}
.ss-book-title{margin:0 0 10px;font:500 14px/1.3 var(--body);color:var(--ink)}
.ss-book-days,.ss-book-times{display:flex;gap:6px}
.ss-book button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}
.ss-book-days button{display:flex;flex:1;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border-radius:10px;background:var(--soft);color:var(--muted);font-size:12px}
.ss-book-days b{font:500 16px/1.1 var(--display);color:var(--ink)}
.ss-book-days [aria-pressed="true"]{background:var(--ink);color:rgb(255 255 255/.75)}.ss-book-days [aria-pressed="true"] b{color:#fff}
.ss-book-times{margin-top:8px}
.ss-book-times button{flex:1;padding:7px 0;border-radius:999px;text-align:center;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;white-space:nowrap}
.ss-book-times [aria-pressed="true"]{background:var(--ink);box-shadow:none;color:#fff;font-weight:500}
@media (hover:hover){.ss-book-days [aria-pressed="false"]:hover{background:#E8E4DE}.ss-book-times [aria-pressed="false"]:hover{box-shadow:inset 0 0 0 1px var(--muted)}}
.ss-note time{white-space:nowrap}
.ss-note-btn{align-self:flex-start;height:30px;margin-top:3px;padding:0 13px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 12.5px/1 var(--body);cursor:pointer}
.ss-note-btn:disabled{background:#D6F0E2;color:var(--ink);cursor:default}
.ss-inv{left:6%;right:6%;top:6%;padding:6px 6px 8px;list-style:none}
.ss-inv li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:9px 10px;border-radius:10px}
.ss-inv li+li{box-shadow:0 -1px 0 var(--line)}
.ss-inv .is-late{background:#FDF0EC;box-shadow:none}
.ss-inv-no{color:var(--muted);font-size:12px}
.ss-inv-who{grid-row:2;font-weight:500;color:var(--ink);min-width:0}
.ss-inv b{justify-self:end;font-weight:500;color:var(--ink)}
.ss-inv .ss-pill{grid-row:2;grid-column:2;justify-self:end;height:20px;font-size:11.5px}
.ss-note{position:absolute;display:flex;flex-direction:column;gap:5px;width:min(62%,228px);padding:12px 14px;background:#fff;border-radius:12px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.25);font:400 13px/1.35 var(--body)}
.ss-note strong{font:500 14px/1.3 var(--body);color:var(--ink)}
.ss-note small{color:var(--muted);font-size:12.5px}
.ss-note .ss-pill{align-self:flex-start;height:22px;font-size:12px}
/* Request -> job -> paid: a cascade read top-left to bottom-right */
.ss-note-a1{left:5%;top:7%;rotate:-2deg}
.ss-note-a2{left:50%;top:36%;translate:-50% 0;rotate:1deg}
.ss-note-a3{right:5%;top:66%;rotate:-1deg}
.ss-note-b1{right:6%;bottom:8%;rotate:2deg}
.ss-note-c1{right:6%;bottom:5%;rotate:-2deg}


/* ---------- Services: three big cards (Sunbeam "Card with tags") ---------- */
.ss-services{display:grid;gap:20px}
.ss-service{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;min-height:440px;padding:32px 32px 32px 40px;background:var(--soft);border-radius:var(--radius-card)}
.ss-service-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:8px}
.ss-service h3{margin:0;font:500 42px/1.15 var(--display);letter-spacing:-.005em;text-wrap:balance}
.ss-service p{margin:0;max-width:430px;font:400 16px/1.55 var(--body);color:var(--muted)}
.ss-chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:4px 0 auto;padding:0;list-style:none}
.ss-chips li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;background:var(--white);border-radius:999px;font:500 14px/1 var(--body);box-shadow:0 1px 2px rgb(28 26 23/.05)}
.ss-chips .ss-icon{width:16px;height:16px}
.ss-service .ss-arrow-link{margin-top:24px}
.ss-service-panel{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--tint) 0%,var(--tint-2,var(--tint)) 100%);isolation:isolate;min-height:376px}
/* Each tint fades to its own deeper partner, whatever the card's position */
.ss-service-panel[data-tint="peach"]{--tint-2:#F3A57A}.ss-service-panel[data-tint="lilac"]{--tint-2:#BBA6F4}.ss-service-panel[data-tint="mint"]{--tint-2:#9ED9BC}
.ss-service-panel[data-tint="sky"]{--tint-2:#A9CCF3}.ss-service-panel[data-tint="butter"]{--tint-2:#EFC064}.ss-service-panel[data-tint="rose"]{--tint-2:#EC9C8A}
.ss-service-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 0,rgb(255 255 255/.34) 0 120px,transparent 121px),radial-gradient(circle at 96% 10%,rgb(255 255 255/.3) 0 150px,transparent 151px)}
.ss-service-panel::after{content:"";position:absolute;inset:0;background:url(/assets/textures/grain.png);opacity:.6;mix-blend-mode:multiply;pointer-events:none}
.ss-service-panel .ss-badge{left:16px;top:16px}
.ss-service-screen{position:absolute;z-index:1;left:9%;top:64px;width:120%;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(28 26 23/.06),0 18px 40px -10px rgb(28 26 23/.22)}
.ss-service-screen img{width:100%;height:auto}
/* Screen windows. Each crop is a framed window onto its screenshot in IMAGE coordinates (--ix/--iy = top-left,
   --iw/--ih = size, fractions of the image; --war = window aspect = iw x image aspect / ih). Every edge sits on a measured
   blank line or gutter (element positions from design/ sources and the live studio-project pages), and the window is
   sized from the panel's own height with a container query, so it always fits inside the tint with nothing cut. It sits
   centred between the badge band and the panel's bottom edge. */
.ss-service-panel{container-type:size}
/* Same fix as .pg-card: when the text is shorter than the panel's min-height, size containment resolved the window's
   cqh to 0, so the panel fills a definite grid row instead */
@media (min-width:1200px){.ss-service{grid-auto-rows:minmax(376px,auto)}.ss-service .ss-service-panel{min-height:0;height:100%}}
.ss-crop-full,.ss-crop-site,.ss-crop-workspace,.ss-crop-care,.ss-crop-dispatch,.ss-crop-crm,.ss-crop-schedule,.ss-crop-web,.ss-crop-support{--band:56px;left:50%;top:var(--band);bottom:16px;margin-block:auto;translate:-50% 0;aspect-ratio:var(--war);
  width:min(92%, calc((100cqh - var(--band) - 24px) * var(--war)))}
.ss-crop-full picture,.ss-crop-site picture,.ss-crop-workspace picture,.ss-crop-care picture,.ss-crop-dispatch picture,.ss-crop-crm picture,.ss-crop-schedule picture,.ss-crop-web picture,.ss-crop-support picture{display:block}
.ss-crop-full img,.ss-crop-site img,.ss-crop-workspace img,.ss-crop-care img,.ss-crop-dispatch img,.ss-crop-crm img,.ss-crop-schedule img,.ss-crop-web img,.ss-crop-support img{width:calc(100% / var(--iw));max-width:none;translate:calc(var(--ix) * -100%) calc(var(--iy) * -100%)}
/* Whole 1536x1024 screen (the /work cards since the owner's ChatGPT screens, 2026-09-26) */
.ss-crop-full{--ix:0;--iy:0;--iw:1;--ih:1;--war:1.5}
/* Alder website: below the studio-project bar (y 3.2%) to the blank line under the care card (y 73%), full width */
.ss-crop-site{--ix:0;--iy:.032;--iw:1;--ih:.698;--war:2.1926}
/* Alder Workspace: the Requests card, sidebar hidden (x 15.5-69.5%), from the gap above it (y 33.5%) to the row 2/3 rule (y 71.8%) */
.ss-crop-workspace{--ix:.155;--iy:.335;--iw:.54;--ih:.381;--war:2.1690}
/* Alder Home care plan (1536x1024): content x 52-1102, y 63-565; window x 10-1146, y 30-598 (blank lines ~40px clear of it) */
.ss-crop-care{--ix:.0065;--iy:.0293;--iw:.7396;--ih:.5547;--war:2}
/* Homepage service cards (1536x1024 owner screens). Schedule: the week calendar card, x 30-1054 (gutter before Today),
   y 372 (card top) - 836. Website: full width, top edge to the blank line above the service tiles (y 833).
   Support: inside the Requests card, x 40-983, y 500 (card top) - 910 (one row height below the last row; the card's
   own blank bottom, ~70px, was left out 2026-09-27). */
.ss-crop-schedule{--ix:.0195;--iy:.3633;--iw:.6667;--ih:.4531;--war:2.2069}
.ss-crop-web{--ix:0;--iy:0;--iw:1;--ih:.8135;--war:1.8439}
.ss-crop-support{--ix:.026;--iy:.4883;--iw:.6139;--ih:.4004;--war:2.2998}
/* No name tag on these panels, so no band is kept for it: the window centres in the tint at every width. */
.ss-service-screen.ss-crop-schedule,.ss-service-screen.ss-crop-web,.ss-service-screen.ss-crop-support{--band:16px}
/* Dispatch: title and crews A-B, to the row rule at y 43.2%; x 6.2-72.9% ends in the gutter before the detail panel */
.ss-crop-dispatch{--ix:.062;--iy:.02;--iw:.667;--ih:.412;--war:2.4284}
/* Birchline CRM (work index): title, stage bar and Details card (x 5.8-70%, the gutters beside the column), y 4.5-49.3% (the gap above Activity) */
.ss-crop-crm{--ix:.058;--iy:.045;--iw:.642;--ih:.448;--war:2.149}

/* ---------- How a project runs (promises grouped by stage; not a testimonial grid) ---------- */
.ss-mark{background:none;color:inherit;padding:0 .1em;white-space:nowrap}
#process .ss-sub{text-wrap:balance}
.ss-promise{padding:24px 0;border-top:1px solid var(--line)}
.ss-promise h4{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:500 20px/1.3 var(--display)}
.ss-promise h4 .ss-icon{width:22px;height:22px;color:var(--brand-deep)}
.ss-promise p{margin:0;font:400 16px/1.55 var(--body);color:var(--muted)}

/* ---------- Remote + Globe (replaces the integrations arcs) ---------- */
.ss-remote{padding-bottom:40px}
.ss-remote .ss-head .ss-cta{margin-top:8px}
.ss-orbit{position:relative;height:540px;margin-top:10px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
.ss-ring{position:absolute;left:50%;bottom:0;translate:-50% 50%;border-radius:50%}
/* The globe sits on the page itself: rings are hairlines, no filled discs behind it */
.ss-ring-1{width:920px;height:920px;box-shadow:inset 0 0 0 1px rgb(28 26 23/.07)}
.ss-ring-2{width:720px;height:720px;box-shadow:inset 0 0 0 1px rgb(28 26 23/.09)}
.ss-ring-3{display:none}
.ss-globe{position:absolute;left:50%;bottom:-230px;width:460px;height:460px;translate:-50% 0}
.ss-globe-poster,.ss-globe canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s ease}
.ss-globe canvas{opacity:0;cursor:grab;touch-action:pan-y}
.ss-globe.is-live canvas{opacity:1}
.ss-globe.is-live .ss-globe-poster{opacity:0}
/* Orbit rings (Sunbeam integrations): two rings turn slowly (64s / 48s); chips counter-rotate to stay upright */
.ss-tool-ring{position:absolute;left:50%;bottom:0;width:calc(var(--r) * 2);height:calc(var(--r) * 2);translate:-50% 50%;border-radius:50%;
  animation:ss-orbit var(--t) linear infinite}
.ss-tool-ring-1{--r:360px;--t:64s}
.ss-tool-ring-2{--r:450px;--t:48s;animation-direction:reverse}
.ss-tool{position:absolute;left:calc(50% + var(--r) * cos(var(--a)));top:calc(50% + var(--r) * sin(var(--a)));display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--white);box-shadow:0 4px 16px rgb(0 0 0/.05),0 1px 2px rgb(28 26 23/.06);translate:-50% -50%;animation:ss-orbit var(--t) linear infinite reverse}
.ss-tool-ring-2 .ss-tool{animation-direction:normal}
.ss-tool-ring-1,.ss-tool-ring-1 .ss-tool{animation:none}
.ss-tool-ring-1 .ss-tool{--a:calc(210deg + var(--k) * 30deg)}
.ss-flow-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ss-flow-path path{fill:none;stroke:var(--brand);stroke-opacity:.5;stroke-width:1.5;vector-effect:non-scaling-stroke}
.ss-flow-path circle{fill:var(--brand)}
.ss-flow-m{display:none}
.ss-tool-label{position:absolute;top:calc(100% + 7px);left:50%;translate:-50% 0;font:500 13px/1 var(--body);color:var(--ink);white-space:nowrap}
.ss-tool .ss-icon{width:22px;height:22px}
@keyframes ss-orbit{to{rotate:360deg}}

/* ---------- Concept projects (replaces case studies) ---------- */
/* Projects stand apart: three cards with real gutters, no shared tray */

/* ---------- FAQ ---------- */
.ss-faq{display:grid;grid-template-columns:1fr 1.35fr;gap:60px;align-items:start}
.ss-faq-head{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.ss-faq-list{display:grid;gap:10px}
.ss-qa{background:var(--white);border-radius:16px;box-shadow:0 1px 2px rgb(28 26 23/.05)}
.ss-qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font:500 18px/1.35 var(--display);text-wrap:balance}
.ss-qa summary::-webkit-details-marker{display:none}
.ss-qa-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft);transition:transform .3s var(--ease-soft),background-color .3s ease}
.ss-qa-icon .ss-icon{width:16px;height:16px}
.ss-qa[open] .ss-qa-icon{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.ss-qa p{margin:0;padding:0 22px 22px;max-width:calc(28.5em + 44px);text-wrap:pretty;font:400 16px/1.6 var(--body);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .ss-faq-list{interpolate-size:allow-keywords}
  .ss-qa::details-content{height:0;overflow:clip;transition:height .35s var(--ease-soft),content-visibility .35s allow-discrete}
  .ss-qa[open]::details-content{height:auto}
}

@media (max-width:1199.98px){
  .ss-h2{font-size:46px}
  .ss-service{grid-template-columns:1fr;padding:28px}
  .ss-service-panel{min-height:0;aspect-ratio:2.4}
  .ss-benefits{grid-template-columns:1fr;--c1:1fr;--c2:1fr;--c3:1fr}
  .ss-benefit{flex-direction:column}
  .ss-benefit-text{width:100%}
  .ss-benefit-media{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .ss-benefit-shot{min-height:240px}
  .ss-remote{overflow-x:clip}
  .ss-orbit{margin-inline:calc(50% - 50vw);-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
}
@media (min-width:810px) and (max-width:1199.98px){
  .ss-benefits{grid-template-columns:1fr 1fr}
  .ss-benefit:last-child{grid-column:1/-1;flex-direction:row}
  .ss-benefit:last-child .ss-benefit-text{width:220px}
  .ss-benefit-shot{min-height:300px}
  .ss-benefit:last-child .ss-benefit-shot{min-height:362px}
}
@media (max-width:809.98px){
  .ss-section{padding:40px 0}
  .ss-h2{font-size:38px;line-height:1.15}
  .ss-head{margin-bottom:36px}
  .ss-head-split{flex-direction:column;align-items:flex-start}
  .ss-sub{font-size:17px}
  .ss-service{padding:24px;gap:18px}
  .ss-service h3{font-size:26px;line-height:1.2}
  .ss-service-panel{aspect-ratio:1.37}
  .ss-crop-full,.ss-crop-site,.ss-crop-workspace,.ss-crop-care,.ss-crop-dispatch,.ss-crop-crm,.ss-crop-schedule,.ss-crop-web,.ss-crop-support{--band:48px}
  .ss-chips{flex-direction:row;flex-wrap:wrap}
  .ss-orbit{height:360px}
  .ss-globe{width:320px;height:320px;bottom:-160px}
  .ss-tool{width:44px;height:44px}.ss-tool .ss-icon{width:20px;height:20px}
  .ss-tool-ring-1{--r:220px}.ss-tool-ring-2{--r:320px}
  .ss-tool-ring-1 .ss-tool{--a:calc(230deg + var(--k) * 20deg)}
  .ss-flow-d{display:none}.ss-flow-m{display:inline}
  .ss-tool-label{font-size:12px;top:calc(100% + 5px)}
  .ss-ring-1{width:640px;height:640px}.ss-ring-2{width:440px;height:440px}.ss-ring-3{width:320px;height:320px}
  .ss-faq{grid-template-columns:minmax(0,1fr);gap:32px}
  .ss-faq-head{position:static}
  .ss-note{width:200px}
  .ss-benefit-shot{min-height:340px}
  .ss-benefit:nth-child(3) .ss-benefit-shot{min-height:432px}
}
/* Under 360px the end nodes (Website, Money) and their labels ran off screen: 18° steps from 234° keep them inside */
@media (max-width:359.98px){.ss-tool-ring-1 .ss-tool{--a:calc(234deg + var(--k) * 18deg)}}

@media (min-width:600px) and (max-width:809.98px){.ss-service-panel{aspect-ratio:1.7}}
@media (prefers-reduced-motion:reduce){
  .ss-benefits,.ss-benefit,.ss-benefit-media,.ss-concept,.ss-qa-icon,.ss-globe{transition:none}
}

/* Services stack like Sunbeam's feature cards: sticky, earlier cards shrink as the next slides over (scroll-driven, CSS only) */
.ss-services{timeline-scope:--svc2,--svc3}
.ss-service{position:sticky;top:96px;transform-origin:50% 0}
.ss-service:focus-within{z-index:2}
.ss-service:nth-child(2){top:111px;view-timeline-name:--svc2}
.ss-service:nth-child(3){top:126px;view-timeline-name:--svc3}
@media (max-width:809.98px){.ss-service{top:88px}.ss-service:nth-child(2){top:100px}.ss-service:nth-child(3){top:112px}}
@supports (animation-timeline:view()){
  .ss-service:nth-child(1){animation:ss-shrink-a linear both,ss-shrink-b linear both;animation-timeline:--svc2,--svc3;animation-range:cover 30% cover 55%,cover 30% cover 55%}
  .ss-service:nth-child(2){animation:ss-shrink-b linear both;animation-timeline:--svc3;animation-range:cover 30% cover 55%}
}
@keyframes ss-shrink-a{to{scale:.95}}
@keyframes ss-shrink-b{to{transform:scale(.947)}}
/* Entrance: fade up 32px as a block enters (Sunbeam: 400ms, 32px). Scroll-driven, so content is visible without JS */
.js-reveal .ss-reveal:not(.is-in){opacity:0;transform:translateY(32px)}
.ss-reveal.is-in{transition:opacity .5s var(--ease-soft),transform .6s var(--ease-soft)}
.ss-benefits.ss-reveal.is-in{transition:grid-template-columns .45s var(--ease-soft),opacity .5s var(--ease-soft),transform .6s var(--ease-soft)}
.ss-reviews-row.ss-reveal.is-in{transition:grid-template-columns var(--move),opacity .5s var(--ease-soft),transform .6s var(--ease-soft)}
@media (prefers-reduced-motion:reduce){
  .ss-tool-ring,.ss-tool,.ss-reveal,.ss-service{animation:none!important}
}

/* One request, five stops: a ring travels Website -> CRM -> Scheduling -> Invoicing -> Accounting */
.ss-flow::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:ss-flow 5s linear infinite;animation-delay:calc(var(--k) * 1s)}
@keyframes ss-flow{0%{opacity:0;scale:.9}4%{opacity:1;scale:1}16%{opacity:1}22%{opacity:0}100%{opacity:0}}
/* Phone headline: 34px at 390, 28px at 320; balance keeps the one sentence evenly wrapped */
@media (max-width:809.98px){.ss-h1{font-size:min(40px,8.8vw)}}
/* Benefit text keeps one width in open and closed states so it never re-wraps mid-animation */
@media (min-width:1200px){.ss-benefit-text{flex:0 0 200px;width:200px}}
@media (prefers-reduced-motion:reduce){.ss-flow::after{animation:none}}

/* Characters idle: a slow bob, staggered; entrance animations keep their own transform */
@keyframes ss-bob{50%{translate:0 -5px;rotate:-3deg}}
@keyframes ss-bob-c{50%{translate:-50% calc(-50% - 6px)}}
@media (prefers-reduced-motion:no-preference){
  .ss-sticker{animation:ss-bob 6s ease-in-out infinite}
  .ss-benefit:nth-child(2) .ss-sticker{animation-delay:-2s}.ss-benefit:nth-child(3) .ss-sticker{animation-delay:-4s}
  .ss-closer-arch,.ss-closer-disc{animation:ss-bob-c 7s ease-in-out infinite}.ss-closer-disc{animation-delay:-3.5s}
  .ss-deco-arch,.ss-deco-disc{animation:ss-deco-in .7s var(--ease-out) var(--d) both,ss-bob-c 7s ease-in-out calc(var(--d) + .7s) infinite}
}
@media (prefers-reduced-motion:reduce){.ss-flow-path circle{display:none}}

/* Measure: running text stays at or under ~72 characters (Jost ≈ 0.42em per character) */
.ss-promise p{max-width:28.5em;text-wrap:pretty}

/* Stacking cards need the whole card on screen while it is stuck; on short viewports the cards simply scroll */
@media (max-width:599.98px) and (max-height:780px),(min-width:600px) and (max-width:809.98px) and (max-height:1020px),(min-width:810px) and (max-width:1199.98px) and (max-height:1040px),(min-width:1200px) and (max-height:600px){
  .ss-services .ss-service{position:relative;top:auto;animation:none}
}
.ss-service-text p{text-wrap:pretty}

/* Page-edge Progressive Blur: content softens as it scrolls under the bottom of the viewport; it fades out at the end
   of the page so the footer's last line stays sharp. It hangs 24px below the viewport so edge sampling never shows a
   crisp ghost line. Nothing on the container may create a Backdrop Root (opacity, filter, mask, view-transition-name),
   or the layers blur nothing: the fade runs on the layers. */
.ss-pblur.ss-page-blur{position:fixed;inset:auto 0 -24px;height:96px;z-index:40}
.ss-page-blur>i{transition:opacity .35s var(--ease-soft)}
.ss-page-blur.is-end>i{opacity:0}
@media (max-width:809.98px),(max-height:500px){.ss-pblur.ss-page-blur{height:80px}}
@media print{.ss-page-blur{display:none}}

/* Phone and small-tablet showcase (<810px): each tab gets its own window, and the card takes that window's shape (its height glides on
   tab change), centred in a panel sized for the tallest window, so no tab shows empty card or a cut tile. Edges sit on
   measured gutters: CRM x 6-70% (gutter before Contacts), y 4.5-79.5% (blank below); Accounting the cash-flow chart and
   transactions, x 6-65.8% (gutter before Bank accounts; table pills end at 64.2%), y 23.2-76.8%; Invoicing the list, x 6.5-49%, y 10.4-62.6%
   (just past the fourth row rule). --war = iw x 1.5 / ih. */
@media (max-width:809.98px){
  .ss-showcase{container-type:inline-size}
  .ss-panel{--card-w:calc(100cqw - 32px);--tallest:1.2337;aspect-ratio:auto;height:calc(var(--card-w) / var(--tallest) + 80px)}
  .ss-screen-card{left:16px;right:16px;bottom:auto;height:calc(var(--card-w) / var(--war));
    top:calc(64px + (var(--card-w) / var(--tallest) - var(--card-w) / var(--war)) / 2);background:#FCFAF8;
    transition:height .35s var(--ease-soft),top .35s var(--ease-soft)}
  /* Windows in image coordinates (customers / money / invoices-1536); every edge sits on a measured blank gutter. */
  .ss-panel[data-tab="crm"] .ss-screen-card{--war:1.2337}
  .ss-panel[data-tab="accounting"] .ss-screen-card{--war:1.2457}
  .ss-panel[data-tab="invoicing"] .ss-screen-card{--war:1.2472}
  .ss-screen img{width:calc(100% / var(--iw));height:auto;max-width:none;object-fit:fill;translate:calc(var(--ix) * -100%) calc(var(--iy) * -100%)}
  /* Same grid on all three screens; the right edge crosses only the faded rear insight card (decorative). */
  .ss-screen[data-screen="crm"],.ss-screen[data-screen="accounting"],.ss-screen[data-screen="invoicing"]{--ix:.0169;--iy:.0977;--iw:.6634}
}
@media (max-width:809.98px) and (prefers-reduced-motion:reduce){.ss-screen-card{transition:none}}
@media (max-width:359.98px){.ss-tabs{gap:4px}.ss-tab{gap:6px;padding:4px 10px 4px 8px}
  /* 320px: the mascot moves top-left (mirroring the arch) so it clears the stacked buttons; the booking card widens so
     "12:30 PM" no longer touches its pill */
  .ss-deco-mascot{--x:7%;--y:17%}
  .ss-book{width:88%;padding:12px 10px}.ss-book-days,.ss-book-times{gap:4px}.ss-book-times button{font-size:11px}}

/* Avatar row: "Avatar group hover" from transitions.dev, values as published. Hovering a face lifts it and scales it
   1.05; every other face lifts by lift x falloff^distance. site.js writes --shift/--scale-active and switches the
   timing function (ease-in on the way up, overshoot spring on the way back). No z-index swaps, so faces never jump layers.
   The last item in the row is the owner-confirmed count bubble (99+), which lifts with the faces. */
:root{--avatar-lift:-4px;--avatar-dur:320ms;--avatar-scale:1.05;--avatar-falloff:.45;
  --avatar-ease-in:cubic-bezier(.22,1,.36,1);--avatar-ease-out:cubic-bezier(.34,3.85,.64,1)}
.ss-faces>*{position:relative;transform-origin:center;transform:translateY(var(--shift,0px)) scale(var(--scale-active,1));
  transition:transform var(--avatar-dur) var(--avatar-ease-in);will-change:transform}
@media (prefers-reduced-motion:reduce){.ss-faces>*{transition:none!important;transform:none!important}}

/* ===== "Who we build for" (v2, 2026-09-25) ===== */
.ss-eyebrow{margin:0;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)} /* #B4501A: 4.9:1 on the page */
@keyframes ss-draw{from{stroke-dashoffset:100}}
@keyframes ss-redraw{from{stroke-dashoffset:0}to{stroke-dashoffset:-200}}
.ss-who-inner{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);column-gap:clamp(56px,7vw,104px);align-items:center}
.ss-who-side{grid-row:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.ss-who-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ss-who-head .ss-h2{line-height:1.1;text-wrap:balance}
.ss-who-head .ss-sub{max-width:20em;text-wrap:balance}
.ss-who-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin:0;padding:0;list-style:none}
.ss-who-grid li{display:flex;align-items:center;gap:24px;min-height:104px;padding:24px 0;border-bottom:1px solid var(--line);font:500 21px/1.3 var(--display);color:var(--ink)}
.ss-who-grid .ss-icon{flex:none;width:40px;height:40px;stroke-width:1.25;stroke-dasharray:100 100}
.ss-who-foot{display:flex;align-items:flex-start;gap:12px;margin:28px 0 0;max-width:calc(28.5em + 20px);font:400 15px/1.45 var(--body);color:var(--muted);text-wrap:pretty}
.ss-who-foot::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--brand)}
/* Stacked: the side wrapper dissolves so the link can follow the list and its note (same gap below the note as above it) */
@media (max-width:1199.98px){.ss-who-inner{grid-template-columns:1fr;row-gap:48px}.ss-who-side{display:contents}.ss-who-foot,.ss-who-cta{margin-top:-24px}
  .ss-who-cta{order:1;justify-self:start}}
@media (max-width:809.98px){
  .ss-who-inner{row-gap:32px}.ss-who-grid{column-gap:32px}
  .ss-who-grid li{gap:16px;min-height:0;padding:20px 0;font-size:18px}
  .ss-who-grid .ss-icon{width:32px;height:32px;stroke-width:1.5}.ss-who-foot,.ss-who-cta{margin-top:-12px}
}
/* Phones: icons sit above the labels so both columns keep a readable label width */
@media (max-width:599.98px){
  .ss-who-grid{column-gap:20px}
  .ss-who-grid li{flex-direction:column;align-items:flex-start;gap:12px;font-size:17px;text-wrap:balance}
  .ss-who-grid .ss-icon{width:30px;height:30px}
}
@media (prefers-reduced-motion:no-preference){
  .js-reveal .ss-who-grid.ss-reveal:not(.is-in){opacity:1;transform:none}
  .js-reveal .ss-who-grid:not(.is-in)>li{opacity:0;translate:0 12px;filter:blur(3px)}
  .ss-who-grid.is-in>li{transition:opacity .5s var(--ease-soft),translate .5s var(--ease-soft),filter .5s var(--ease-soft);transition-delay:calc(var(--i)*50ms)}
  .js-reveal .ss-who-grid:not(.is-in) .ss-icon{stroke-dashoffset:100}
  .ss-who-grid.is-in .ss-icon{animation:ss-draw .9s var(--ease-soft) calc(var(--i)*50ms + 120ms) backwards}
  @media (hover:hover){.ss-who-grid li:hover .ss-icon use{animation:ss-redraw 1.15s ease-in-out}}
}

/* ===== "How we work" (v2, 2026-09-25) ===== */
@keyframes ss-pop{from{opacity:0;scale:.8;translate:0 6px}}
@keyframes ss-arrive{from{opacity:1;scale:.85}to{opacity:0;scale:1.25}}
.ss-how .ss-head{gap:16px}
.ss-how-steps{--gap:24px;--n:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.ss-how-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.ss-how-step:nth-child(1){--t1:#FAE0CE;--t2:#F5BE9B}.ss-how-step:nth-child(2){--t1:#EFE8FD;--t2:#D6C8F6}.ss-how-step:nth-child(3){--t1:#E0F2E8;--t2:#BCE3CE}
.ss-how-num{position:relative;z-index:1;display:grid;place-items:center;width:var(--n);height:var(--n);border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px #CFC8BE;
  font:500 17px/1 var(--body);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ss-how-num::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--brand);opacity:0;pointer-events:none}
.ss-how-step:not(:last-child)::after,.ss-how-step:not(:last-child)::before{content:"";position:absolute;top:calc(var(--n) / 2);left:calc(50% + var(--n) / 2 + 10px);right:calc(-50% - var(--gap) + var(--n) / 2 + 10px);height:1px;background:#D6CFC5;transform-origin:0 50%}
/* The orange line draws along the grey one, 01 → 02 → 03, and each number lights as it arrives: site.js adds .is-lit to a step
   (ring + mockup) and .is-drawn to the step whose line leads on to the next number */
.ss-how-step:not(:last-child)::before{z-index:1;height:2px;margin-top:-.5px;border-radius:2px;background:var(--brand);scale:var(--from,0 1)}
.ss-how-step.is-drawn::before{scale:1}.ss-how-step.is-lit .ss-how-num{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand-deep)}
.ss-how-text h3{margin:22px 0 10px;font:500 30px/1.2 var(--display)}
.ss-how-text p{margin:0 auto;max-width:21em;min-height:3em;font:400 17px/1.5 var(--body);color:var(--muted);text-wrap:balance}
/* clip, not hidden: a clipped box is not a scroll container, so aspect-ratio lets it grow to fit the mockup instead of cutting it (810px);
   minmax(0,1fr) keeps the mockup's nowrap rows from widening the track past the panel (320px) */
.ss-how-panel{position:relative;isolation:isolate;overflow:clip;width:100%;aspect-ratio:4/3;margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;
  border-radius:var(--radius-card);background:linear-gradient(160deg,var(--t1),var(--t2));font-size:clamp(11px,3.4vw,13px);text-align:left}
.ss-how-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 10% 0,rgb(255 255 255/.34) 0 120px,transparent 121px),radial-gradient(circle at 100% 100%,rgb(255 255 255/.28) 0 150px,transparent 151px)}
.ss-how-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/textures/grain.png);opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.ss-how-cap{margin:16px 0 0;font:400 15px/1.4 var(--body);color:var(--muted)}
@media (max-width:1199.98px){
  .ss-how-steps{grid-template-columns:1fr;row-gap:56px}
  .ss-how-step{--from:1 0;display:grid;grid-template-columns:var(--n) minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;grid-template-areas:"num text panel" ". cap panel" ". . panel";column-gap:28px;align-items:start;text-align:left}
  .ss-how-num{grid-area:num}.ss-how-text{grid-area:text}.ss-how-text h3{margin:10px 0 8px;font-size:26px}.ss-how-text p{margin:0;min-height:0}
  .ss-how-panel{grid-area:panel;margin:0}.ss-how-cap{grid-area:cap;margin-top:12px}
  .ss-how-step:not(:last-child)::after,.ss-how-step:not(:last-child)::before{top:calc(var(--n) + 10px);bottom:-46px;left:calc(var(--n) / 2);right:auto;width:1px;height:auto;transform-origin:50% 0}
  .ss-how-step:not(:last-child)::before{width:2px;margin:0 0 0 -.5px}
}
@media (max-width:809.98px){
  .ss-how-steps{--n:40px;row-gap:44px}
  .ss-how-step{grid-template-columns:var(--n) minmax(0,1fr);grid-template-areas:"num text" ". panel" ". cap";column-gap:16px}
  .ss-how-num{font-size:14px}.ss-how-text h3{margin:4px 0 6px;font-size:24px}.ss-how-text p{font-size:16px}
  .ss-how-step{grid-template-rows:none}.ss-how-panel{aspect-ratio:auto;min-height:0}
  .ss-mock-comment{right:-.4em}
  .ss-how-panel{margin-top:20px;padding:24px 14px}.ss-how-step:not(:last-child)::after,.ss-how-step:not(:last-child)::before{bottom:-34px}
}
/* Mockups: every size in em, so they scale with the panel's font size */
.ss-mock{width:min(100%,22em);background:#fff;border-radius:14px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 18px 40px -8px rgb(28 26 23/.18);font:400 1em/1.3 var(--body);color:var(--ink)}
.ss-mock ul{margin:0;padding:0 1.2em .4em;list-style:none}
.ss-mock li{display:flex;align-items:center;gap:.8em;height:3.4em;border-top:1px solid var(--line);white-space:nowrap}
.ss-mock li .ss-icon{width:1.3em;height:1.3em;color:var(--brand-deep)}
.ss-mock li i{margin-left:auto;width:5.2em;height:1em;background:linear-gradient(#ECE7E0 0 0) 0 0/100% .38em no-repeat,linear-gradient(#ECE7E0 0 0) 0 100%/70% .38em no-repeat}
.ss-mock-head{display:flex;align-items:center;gap:.7em;padding:1.1em 1.2em}.ss-mock-head svg{width:1.8em;height:1.8em;flex:none}
.ss-mock-head strong{min-width:0;font:500 1.15em/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-mock-chip{margin-left:auto;display:inline-flex;align-items:center;gap:.35em;height:2em;padding:0 .7em;border-radius:999px;background:#D6F0E2;font:500 .88em/1 var(--body)}
.ss-mock-chip .ss-icon,.ss-mock-tick .ss-icon{width:1em;height:1em;stroke-width:2.5;color:var(--ink);stroke-dasharray:100 100}
/* The comment bubble hangs off the browser's top-right corner at every width */
.ss-mock-build{position:relative;width:min(100%,22em);margin-top:1.8em}
.ss-mock-browser{width:100%;overflow:hidden}
.ss-mock-bar{display:flex;gap:.4em;padding:.7em .9em;border-bottom:1px solid var(--line)}
.ss-mock-bar b{width:.55em;height:.55em;border-radius:50%;background:#EE8B7A}.ss-mock-bar b:nth-child(2){background:#F2C25B}.ss-mock-bar b:nth-child(3){background:#7FC79F}
.ss-mock-comment{position:absolute;top:-2.3em;right:-1.2em;display:flex;align-items:center;gap:.6em;margin:0;padding:.6em .85em .6em .6em;background:#fff;border-radius:12px;
  box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.25);font:500 .92em/1.25 var(--body);transform-origin:20% 100%}
.ss-mock-comment small{display:block;font:400 .85em/1.2 var(--body);color:var(--muted)}
.ss-mock-avatar{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--lilac)}.ss-mock-avatar .ss-icon{width:1.1em;height:1.1em}
.ss-mock-pill{margin-left:auto;padding:.35em .7em;border-radius:999px;background:var(--c);font:500 .8em/1 var(--body)}
.ss-mock-title{display:block;padding:1em 1.1em .7em;font:500 1.3em/1.2 var(--display)}
.ss-mock-tick{display:grid;place-items:center;flex:none;width:1.7em;height:1.7em;border-radius:50%;background:#D6F0E2}
@media (prefers-reduced-motion:no-preference){
  /* site.js sets the order and the gaps (ring, 150ms, line .6s, next ring); these play once per step. A step or line that
     lights out of sight gets .is-lit-now / .is-drawn-now: no motion, straight to its end state. */
  .ss-how-step.is-drawn::before{transition:scale .6s cubic-bezier(.65,0,.35,1)}
  .ss-how-step.is-lit .ss-how-num{transition:box-shadow .3s var(--ease-soft),color .3s var(--ease-soft)}
  .ss-how-step.is-lit .ss-how-num::after{animation:ss-arrive .7s var(--ease-soft)}
  .js-reveal .ss-how-step:not(.is-lit) :is(.ss-mock-chip,.ss-mock-comment){opacity:0;scale:.8}
  .ss-how-step.is-lit :is(.ss-mock-chip,.ss-mock-comment){animation:ss-pop .45s cubic-bezier(.34,1.56,.64,1) 300ms backwards}
  .js-reveal .ss-how-step:not(.is-lit) :is(.ss-mock-chip,.ss-mock-tick) .ss-icon{stroke-dashoffset:100}
  .ss-how-step.is-lit .ss-mock-chip .ss-icon{animation:ss-draw .35s ease-out 550ms backwards}
  .js-reveal .ss-how-step:not(.is-lit) .ss-mock-tick{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
  .ss-how-step.is-lit .ss-mock-tick{transition:background-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft);transition-delay:calc(300ms + var(--k)*180ms)}
  .ss-how-step.is-lit .ss-mock-tick .ss-icon{animation:ss-draw .3s ease-out calc(400ms + var(--k)*180ms) backwards}
  .ss-how-step.is-lit-now :is(.ss-how-num,.ss-mock-chip,.ss-mock-comment,.ss-mock-tick,.ss-icon),.ss-how-step.is-lit-now .ss-how-num::after{transition:none!important;animation:none!important}
  .ss-how-step.is-drawn-now::before{transition:none!important}
}

/* ===== Reviews (owner concept after ordina.framer.website, 2026-09-25) =====
   Dynamic at every width, as on Ordina. From 810px: one open ink card (portrait inset 12px, quote beside it, name at the
   foot) beside closed portrait cards dimmed to .7, the middle one first; on tablets the closed cards are narrower and drop
   the business name (Ordina's tablet state). Under 810px the cards stack in one place and crossfade. The open card moves on
   every 5s and follows click and focus (site.js). Portrait = the reviewer's own photo, or initials on the Work tints.
   Motion follows Ordina's published source (geHywu1kQ.mjs): cards switch in .6s on cubic-bezier(.215,.61,.355,1); the
   heading's words clear a 3px blur and rise 5px (.8s, 20ms apart); an opening quote's words rise 6px and fade in (.4s,
   30ms apart), both on cubic-bezier(.6,0,.4,1). */
.ss-reviews{--ease-card:cubic-bezier(.215,.61,.355,1);--ease-text:cubic-bezier(.6,0,.4,1)}
.ss-reviews-row{--move:.6s var(--ease-card) .1s}
.ss-review{position:relative;min-width:0;margin:0;border-radius:20px;background:var(--ink);color:#fff}
.ss-review:focus-visible{border-radius:20px}
.ss-review-face{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(160deg,var(--w1),var(--w2))}
.ss-review-face img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.ss-review-initials{font:500 64px/1 var(--display);letter-spacing:-.02em;color:rgb(28 26 23/.7)}
/* Keep business names readable over the supplied portraits. */
.ss-review-brand{position:absolute;left:16px;right:16px;bottom:14px;font:500 15px/1.25 var(--display);color:var(--ink);text-wrap:balance}
.ss-review-face:has(img){background:var(--ink)}
.ss-review-face:has(img)::before{z-index:0;background:linear-gradient(transparent 50%,rgb(0 0 0/.72));pointer-events:none}
.ss-review-face:has(img)::after{display:none}
.ss-review-face:has(img) .ss-review-brand{color:#fff}
.ss-review blockquote{margin:0}
.ss-review blockquote p{margin:0;font:500 22px/1.3 var(--display);letter-spacing:-.01em;text-wrap:pretty}
.ss-review figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:400 15px/1.4 var(--body);color:rgb(255 255 255/.66)}
.ss-review figcaption strong{font-weight:500;color:#fff}
.ss-review-service{margin-top:12px;padding:5px 11px;border-radius:999px;background:rgb(255 255 255/.1);font-size:13px;line-height:1.2;color:rgb(255 255 255/.82)}
/* Word effects. Words are inline-blocks so they can rise; hidden only when JS runs the reveals (not under reduced motion). */
.ss-reveal-words .w,.ss-review blockquote .w{display:inline-block}
.js-reveal .ss-reveal-words:not(.is-in){opacity:1;transform:none}
.js-reveal .ss-reveal-words:not(.is-in) .w{opacity:0;filter:blur(3px);translate:0 5px}
.ss-reveal-words.is-in .w{transition:opacity .8s var(--ease-text),filter .8s var(--ease-text),translate .8s var(--ease-text);
  transition-delay:calc(.1s + var(--i) * 20ms)}
/* Quote words wait for the row to come into view and for their card to open; a closing card's words go in .15s */
.js-reveal .ss-review .w{opacity:0;translate:0 6px;transition:opacity .15s var(--ease-text),translate 0s .15s}
.js-reveal .ss-reviews-row.is-in .ss-review.is-open .w{opacity:1;translate:none;transition:opacity .4s var(--ease-text),translate .4s var(--ease-text);
  transition-delay:calc(.35s + var(--i) * 30ms)}
/* Phones: the cards share one grid cell, so the row takes the tallest; the open one fades in over the others (a tap moves on) */
@media (max-width:809.98px){
  .ss-reviews-row{display:grid}
  .ss-review{grid-area:1/1;display:flex;flex-direction:column;padding:12px;opacity:0;pointer-events:none;transition:opacity var(--move)}
  .ss-review.is-open{opacity:1;pointer-events:auto}
  .ss-review-face{height:300px}
  .ss-review-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:22px 10px 8px}
}
/* Under 375px a 300px portrait made a card taller than the space under the header */
@media (max-width:374.98px){.ss-review-face{height:240px}}
@media (min-width:810px){
  /* Open card = (row - two 16px gaps) x k/(k+2): k=6 on tablets (closed cards ~92-116px, as on Ordina), 3.8 from 1000px
     (768px of 1200 at 1440). Columns stay in fr so the width change animates. A switch runs in beats: the closing text goes
     (.15s); after .1s the columns, portrait and label move (--move); the opening quote writes itself in from .35s, then the
     name. No text shows at a moving card edge. */
  .ss-reviews-row{--k:6;--open:6fr;display:grid;grid-template-columns:var(--c1,var(--open)) var(--c2,1fr) var(--c3,1fr);gap:16px;
    height:450px;container-type:inline-size;transition:grid-template-columns var(--move)}
  .ss-reviews-row[data-open="1"]{--c1:1fr;--c2:var(--open);--c3:1fr}
  .ss-reviews-row[data-open="2"]{--c1:1fr;--c2:1fr;--c3:var(--open)}
  .ss-review{overflow:hidden;cursor:pointer;opacity:.7;transition:opacity var(--move),background-color var(--move)}
  /* A closed card drops its ink: under the pale portrait it showed as a dark ring in the rounded corners */
  .ss-review:not(.is-open){background-color:transparent}
  .ss-review.is-open{opacity:1;cursor:auto}
  /* Closed portrait = one 1fr column. At 100% it followed the card mid-switch and swelled before settling. */
  .ss-review-face{position:absolute;top:0;bottom:0;left:0;width:calc((100cqw - 32px) / (var(--k) + 2));border-radius:20px;
    transition:top var(--move),bottom var(--move),left var(--move),width var(--move),border-radius var(--move)}
  .ss-review.is-open .ss-review-face{top:12px;bottom:12px;left:12px;width:176px;border-radius:12px}
  /* The business label keeps its place on the card (28px in) and its width, open or closed */
  .ss-review-brand{left:28px;right:auto;bottom:26px;width:144px;transition:left var(--move),bottom var(--move),opacity var(--move)}
  .ss-review.is-open .ss-review-brand{left:16px;bottom:14px}
  /* The text keeps the open card's width while hidden, so nothing re-wraps as a card opens */
  .ss-review-body{position:absolute;top:0;bottom:0;left:216px;width:calc((100cqw - 32px) * var(--k) / (var(--k) + 2) - 248px);
    display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:32px 0 28px;opacity:0;transition:opacity .15s var(--ease-text)}
  .ss-review.is-open .ss-review-body{opacity:1}
  .ss-review figcaption{opacity:0;transition:opacity .15s var(--ease-text)}
  .ss-review.is-open figcaption{opacity:1;transition:opacity .5s var(--ease-text) .5s}
}
/* Tablets: closed cards are ~100px, too narrow for the business name (Ordina hides the logo there too) */
@media (min-width:810px) and (max-width:999.98px){
  .ss-review-initials{font-size:48px}
  .ss-review:not(.is-open) .ss-review-brand{opacity:0}
}
@media (min-width:1000px){
  .ss-reviews-row{--k:3.8;--open:3.8fr}
  .ss-review blockquote p{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .ss-reviews-row,.ss-review,.ss-review-face,.ss-review-brand,.ss-review-body,.ss-review figcaption,.ss-reviews .w{transition:none}
}

/* ===== Page-to-page View Transitions (transitions.dev #8 values; CSS only, progressive) =====
   Pages cross-fade with a short blur-lift; the header stays put. Off under reduced motion. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.ss-header{view-transition-name:ss-header}
::view-transition-old(root){animation:ss-vt-out .15s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:ss-vt-in .25s cubic-bezier(.22,1,.36,1) both}
@keyframes ss-vt-out{to{opacity:0}}
@keyframes ss-vt-in{from{opacity:0;transform:translateY(8px);filter:blur(3px)}}
::view-transition-group(ss-header),::view-transition-new(ss-header){animation:none}
::view-transition-old(ss-header){display:none}

/* ===== Motion accents (v2, 2026-09-25) ===== */
/* Tabs: the selection pill glides and resizes between tabs; screens cross-fade with a 2px blur (transitions.dev #16) */
.ss-tabs{position:relative}
.ss-tab{position:relative;z-index:1}
.ss-tabs-pill{position:absolute;top:0;left:0;height:44px;width:0;border-radius:100px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;
  transition:transform .25s var(--ease-soft),width .25s var(--ease-soft)}
.ss-tabs.has-pill .ss-tab[aria-selected="true"]{background:transparent;box-shadow:none}
.ss-screen{filter:blur(2px);transition:opacity .25s var(--ease-soft),filter .25s var(--ease-soft)}
/* Arrow links: the arrow nudges forward on hover (transitions.dev #24) */
.ss-arrow-dot .ss-icon{transition:transform .35s var(--ease-soft)}
@media (hover:hover){.pg-link-card:hover .ss-arrow-dot .ss-icon{transform:translateX(2px)}}
/* Project cards: the screen eases in a touch on hover, confirming the card is a link */
@media (prefers-reduced-motion:reduce){.ss-tabs-pill,.ss-screen,.ss-arrow-dot .ss-icon{transition:none}}

/* ===== Work (owner design concept, 2026-09-25) =====
   Eyebrow, a large two-line heading, then three cards: a tinted panel framing one whole 1.2:1 screen, the name, the type,
   one line and "Explore project". Links line up because each card stretches and its line takes the spare height. */
.ss-work-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:48px}
.ss-work-head .ss-h2{max-width:none;font-size:64px;line-height:1.08;letter-spacing:-.01em;text-align:left}
.ss-work-head .ss-dim{display:block;margin-top:12px;font-size:.56em;line-height:1.2}
.ss-concepts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ss-concept{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit;border-radius:24px}
.ss-work-panel{position:relative;isolation:isolate;overflow:hidden;align-self:stretch;padding:28px 18px 22px;border-radius:24px;
  background:linear-gradient(160deg,var(--w1),var(--w2))}
:is(.ss-work-panel,.ss-review)[data-tint="peach"]{--w1:#FBE6D6;--w2:#F7C6A5}
:is(.ss-work-panel,.ss-review)[data-tint="lilac"]{--w1:#F1EBFD;--w2:#DACDF8}
:is(.ss-work-panel,.ss-review)[data-tint="mint"]{--w1:#E4F4EB;--w2:#C3E7D3}
:is(.ss-work-panel,.ss-review-face)::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 8% 0,rgb(255 255 255/.34) 0 120px,transparent 121px),
  radial-gradient(circle at 100% 100%,rgb(255 255 255/.26) 0 150px,transparent 151px)}
:is(.ss-work-panel,.ss-review-face)::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/textures/grain.png);opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.ss-work-screen{position:relative;aspect-ratio:21/16;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgb(28 26 23/.06),0 18px 40px -8px rgb(28 26 23/.18);transition:translate .45s var(--ease-soft),box-shadow .45s var(--ease-soft)}
.ss-work-screen picture{display:block;height:100%}
.ss-work-screen img{display:block;width:100%;height:100%;object-fit:cover}
.ss-work-name{margin:22px 0 0;font:500 28px/1.2 var(--display);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.ss-work-type{margin:6px 0 0;font:400 17px/1.4 var(--body);color:var(--muted)}
.ss-work-line{flex:1;margin:10px 0 0;max-width:28.5em;font:400 17px/1.5 var(--body);color:var(--muted);text-wrap:pretty}
.ss-work-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:500 17px/1.3 var(--body);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ss-work-link .ss-icon{width:18px;height:18px;color:var(--brand);transition:translate .3s var(--ease-soft)}
@media (hover:hover){
  .ss-concept:hover .ss-work-screen{translate:0 -4px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 26px 48px -10px rgb(28 26 23/.24)}
  .ss-concept:hover .ss-work-link .ss-icon{translate:2px -2px}
}
.ss-concept:focus-visible .ss-work-screen{translate:0 -4px}
.ss-concept:focus-visible .ss-work-link .ss-icon{translate:2px -2px}
@media (max-width:1199.98px){.ss-work-head .ss-h2{font-size:55px}}
@media (min-width:810px) and (max-width:999.98px){
  .ss-concepts{gap:16px}
  .ss-work-panel{padding:20px 12px 16px;border-radius:20px}
  .ss-work-name{margin-top:18px;font-size:22px}
  .ss-work-type,.ss-work-line,.ss-work-link{font-size:15px}
}
@media (max-width:809.98px){
  .ss-work-head{margin-bottom:32px}
  .ss-work-head .ss-h2{font-size:40px;line-height:1.12}
  .ss-work-head .ss-dim span{display:block}
  .ss-concepts{grid-template-columns:minmax(0,560px);gap:44px}
  .ss-work-panel{padding:22px 14px 18px}
  .ss-work-name{font-size:26px}
  .ss-work-type,.ss-work-line,.ss-work-link{font-size:16px}
}
@media (min-width:600px) and (max-width:809.98px){.ss-concepts{grid-template-columns:minmax(0,1fr)}} /* tablets: full width like every other section (2026-10-02 QA) */
@media (prefers-reduced-motion:reduce){.ss-work-screen,.ss-work-link .ss-icon{transition:none}}

/* Site-wide guard (2026-10-02): nothing may scroll the page sideways on any width. clip (not hidden) keeps the window as the
   only scroller, so Lenis and sticky elements keep working. Root causes are still fixed where found. */
html,body{overflow-x:clip}

/* Cookie notice (owner 2026-10-03: option C card, moved to the bottom left, no mascot). A notice, not a consent prompt: the
   site sets no cookies of its own (see /cookies). site.js slides it in once and remembers "Got it". */
.ss-cookie{position:fixed;z-index:45;left:24px;bottom:max(24px,env(safe-area-inset-bottom));width:min(380px,calc(100% - 32px));display:grid;gap:14px;padding:20px 22px;background:var(--white);border-radius:var(--radius-card);box-shadow:0 1px 2px rgb(28 26 23/.06),0 20px 40px -16px rgb(28 26 23/.32);font:400 15px/1.45 var(--body);color:var(--ink);opacity:0;translate:0 18px;transition:opacity .32s var(--ease-out),translate .32s var(--ease-out)}
.ss-cookie.is-in{opacity:1;translate:0 0}
.ss-cookie[hidden]{display:none}
.ss-cookie p{margin:0;text-wrap:pretty}
.ss-cookie a{color:inherit;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:1.5px;text-underline-offset:.2em}
.ss-cookie-ok{justify-self:start;border:0;border-radius:999px;padding:11px 18px;font:500 14.5px/1 var(--body);background:var(--ink);color:var(--white);cursor:pointer;transition:scale .16s var(--ease-out)}
.ss-cookie-ok:active{scale:.97}
.ss-cookie-ok:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:640px){.ss-cookie{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto}}
@media (prefers-reduced-motion:reduce){.ss-cookie{transition:none;translate:none}}