/* Leadaline shared stylesheet. Tokens first, then globals, then shared components. */
/* fonts: served from our own site (SIL Open Font License, licence files in assets/fonts). Latin set only, one variable file per family. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --paper:#F5F2EC;--paper-2:#EFEBE3;--white:#fff;
  --ink:#15122B;--text:#221E3A;--muted:#5F5A78;--on-ink-muted:#C9C3E0;
  --line:#D9D3C6;--line-2:#E4DFD4;
  --violet:#481DC9;--violet-dk:#3A15A8;--lav:#ECE8FF;--lav-2:#A99BFF;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;--gutter:20px;--nav-h:64px;--nav-h-sm:56px;
  --band:104px;--band-sm:76px;
  --r-sm:8px;--r:10px;--r-lg:16px;
  /* motion: one curve, three speeds, one stagger step */
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --t-quick:180ms;--t-med:360ms;--t-slow:700ms;--stagger:60ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--violet)}
img{display:block;max-width:100%;height:auto}
h1,h2{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
h3{font-family:var(--sans);font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.25}
/* hover colour fades: quick speed, one curve. Header and footer keep their own. */
:where(main) a{transition:color var(--t-quick) var(--ease)}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
h3,h4,.statement,.signoff,.wn-a,.r-close,.c-say p{text-wrap:balance}
/* hanging quote: the opening mark sits just outside the text edge */
.hang{text-indent:-.36em}
@supports (hanging-punctuation:first){.hang{text-indent:0;hanging-punctuation:first}}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:760px){:root{--gutter:32px}}
@media (min-width:900px){:root{--nav-h:72px;--nav-h-sm:60px}}
html{scroll-padding-top:calc(var(--nav-h-sm) + 16px)}
.accent{color:var(--violet)}

/* eyebrow + kicker */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:1.5px;background:var(--ink);flex:none}
.kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r);font:600 16.5px/1 var(--sans);text-decoration:none;border:1.5px solid transparent;transition:transform var(--t-quick) var(--ease),background-color var(--t-quick) var(--ease),border-color var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:80ms}
.btn svg{flex:none;transition:transform var(--t-quick) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2A2548;color:#fff}
.btn-violet{background:var(--violet);color:#fff}
.btn-violet:hover{background:var(--violet-dk);color:#fff}
.btn-plain{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-plain:hover{background:var(--ink);color:#fff}
.btn-text{background:transparent;color:var(--ink);padding:0 6px}
.btn-text:hover{color:var(--violet);transform:none}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--lav);color:var(--ink)}

/* header: one shared header, source in assets/partials/header.html */
.skip{position:fixed;left:12px;top:12px;z-index:100;padding:12px 16px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:600;font-size:15px;text-decoration:none;transform:translateY(-200%)}
.skip:focus,.skip:hover{transform:none;color:#fff}
.site-head{--hd-fg:var(--ink);--hd-ul:var(--violet);--hd-line:rgba(21,18,43,.26);position:fixed;top:0;left:0;right:0;z-index:60;background-color:rgba(245,242,236,0);border-bottom:1px solid transparent;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.site-head.is-scrolled{background-color:rgba(245,242,236,.85);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.site-head.is-tucked:not(:focus-within){transform:translateY(-100%)}
body[data-hero="dark"] .site-head:not(.is-scrolled),.site-head.menu-open{--hd-fg:#fff;--hd-ul:var(--lav-2);--hd-line:rgba(255,255,255,.5)}
.site-head.menu-open{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
@media (prefers-reduced-transparency:reduce){.site-head.is-scrolled:not(.menu-open){background-color:#F5F2EC;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.site-head.is-scrolled:not(.menu-open){background-color:#F5F2EC;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--ink)}}
body[data-hero="dark"] .site-head:not(.is-scrolled) :focus-visible,.site-head.menu-open :focus-visible,.head-panel :focus-visible,.site-foot :focus-visible{outline-color:var(--lav-2)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);transition:height .2s ease}
.site-head.is-scrolled .head-in{height:var(--nav-h-sm)}
.head-logo{position:relative;display:block;flex:none;width:134px;height:28px}
.head-logo img{position:absolute;inset:0;width:134px;height:28px;transition:opacity .2s ease}
.head-logo .lg-w{opacity:0}
body[data-hero="dark"] .site-head:not(.is-scrolled) .lg-k,.site-head.menu-open .lg-k{opacity:0}
body[data-hero="dark"] .site-head:not(.is-scrolled) .lg-w,.site-head.menu-open .lg-w{opacity:1}
.head-nav{display:none}
.head-nav ul{list-style:none;display:flex;gap:30px}
.head-nav a{display:inline-block;padding:10px 0;font-size:15.5px;font-weight:500;line-height:20px;color:var(--hd-fg);text-decoration:none;background:linear-gradient(var(--hd-ul),var(--hd-ul)) 0 calc(100% - 4px)/0 1.5px no-repeat;transition:background-size .2s ease,color .2s ease}
.head-nav a:hover{color:var(--hd-fg);background-size:100% 1.5px}
.head-nav a[aria-current]{background-size:16px 1.5px}
.head-nav a[aria-current]:hover{background-size:100% 1.5px}
.head-cta{display:none;align-items:center;justify-self:end;min-height:44px;padding:0 18px;border:1px solid var(--hd-line);border-radius:var(--r);font-size:15px;font-weight:500;color:var(--hd-fg);text-decoration:none;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.head-cta:hover{color:var(--hd-ul);border-color:var(--hd-ul)}
.head-cta:active,.ft-cta:active{transform:scale(.97)}
.head-cta[aria-current]{visibility:hidden}
.head-menu{position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:var(--r);background:none;color:var(--hd-fg);cursor:pointer}
.head-menu span{position:absolute;left:11px;right:11px;top:50%;height:1.5px;margin-top:-.75px;border-radius:1px;background:currentColor;transition:transform .2s ease}
.head-menu span:first-child{transform:translateY(-4px)}
.head-menu span:last-child{transform:translateY(4px)}
.head-menu[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.head-menu[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
@media (min-width:900px){.head-in{display:grid;grid-template-columns:1fr auto 1fr}.head-nav{display:block}.head-cta{display:inline-flex}.head-menu{display:none}}
.head-panel{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;padding:calc(var(--nav-h) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;overflow-y:auto;overscroll-behavior:contain}
.head-panel[hidden]{display:none}
.hp-links{list-style:none;display:grid}
.hp-links a{display:block;padding:8px 0;font-family:var(--serif);font-size:clamp(36px,10vw,48px);line-height:1.1;letter-spacing:-.02em;color:#fff;text-decoration:none}
.hp-links a:hover,.hp-links a[aria-current]{color:var(--lav-2)}
.hp-faq{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-top:20px;font-size:17px;font-weight:500;color:var(--on-ink-muted);text-decoration:none}
.hp-faq:hover,.hp-faq[aria-current]{color:#fff}
.hp-foot{margin-top:auto;padding-top:40px;display:grid;gap:6px}
.hp-cta{width:100%}
.hp-cta[aria-current]{display:none}
.hp-mail{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:16px;color:var(--on-ink-muted);text-decoration:none}
.hp-mail:hover{color:#fff}
.head-panel.open .hp-in{animation:hp-in .4s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes hp-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (min-width:900px){.head-panel{display:none!important}}
html.menu-lock,html.menu-lock body{overflow:hidden}

/* sections */
section.band{padding:var(--band) 0}
@media (max-width:760px){section.band{padding:var(--band-sm) 0}}
@media (max-width:420px){:root{--band-sm:64px}}
.band h2{font-size:clamp(34px,5vw,54px);max-width:18ch}
.band p{max-width:65ch}
.hairline{border-top:1px solid var(--line)}

/* dark band: shared ink section treatment */
.band-ink{--line-ink:rgba(255,255,255,.18);background:var(--ink);color:var(--on-ink-muted)}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:var(--on-ink-muted)}
.band-ink .kicker{color:var(--on-ink-muted)}
.band-ink a:not(.btn){color:#fff}
.band-ink a:not(.btn):hover{color:var(--lav-2)}
.band-ink :focus-visible{outline-color:var(--lav-2)}
/* where next: hand-on strip above a page's closing section */
.wn{border-top:1px solid var(--line);padding:48px 0 56px}
.wn-col{margin:0 0 48px;padding:36px 0 0;border-top:0}
.wn-k{font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wn-row{display:grid;gap:22px;margin-top:18px}
.wn-a{position:relative;display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.wn-a span{min-width:0;text-wrap:balance}
.wn-a svg{flex:none;width:.6em;height:.6em;transition:transform var(--t-quick) var(--ease)}
.wn-a:hover{color:var(--violet)}
.wn-a:hover svg{transform:translateX(6px)}
.wn-s{margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted);max-width:none}
.wn-2{justify-self:start;padding:12px 0;margin:-12px 0}
@media (min-width:760px){.wn{padding:56px 0 64px}.wn-col{padding:40px 0 0}.wn-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}.wn-2{justify-self:end}}
@media (prefers-reduced-motion:reduce){.wn-a svg{transition:none}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cta-small{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:16px}
.band-ink .cta-small{color:var(--on-ink-muted)}
.accent-lav{color:var(--lav-2)}
/* flow: optional thin flowing lines behind an ink band. Add class="flow" to any .band-ink */
.flow{position:relative;overflow:hidden;isolation:isolate}
.flow::before{content:"";position:absolute;inset:0;z-index:-1;background:url(brand/flow-lines.svg) center/cover no-repeat;pointer-events:none}
/* glow: soft violet glow on an ink band. Used on every consultation section. */
.glow{position:relative;overflow:hidden;isolation:isolate}
.glow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 70% at 85% 0%,rgba(72,29,201,.42),transparent 70%),radial-gradient(45% 60% at 0% 100%,rgba(72,29,201,.22),transparent 70%)}

/* violet band: the conversion section. One per page. */
.band-violet{--line-v:rgba(255,255,255,.26);--on-v:#E4DEFF;background:var(--violet);color:var(--on-v)}
.band-violet h2,.band-violet h3{color:#fff}
.band-violet p,.band-violet li{color:var(--on-v)}
.band-violet .kicker{color:var(--on-v)}
.band-violet a:not(.btn){color:#fff}
.band-violet :focus-visible{outline-color:#fff}
.band-violet .btn-light:hover{background:var(--lav);color:var(--ink)}

/* philosophy statement: large serif line, not a heading */
.statement{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.band-ink .statement{color:#fff}
.statement .l{display:block}

/* draw: a line that extends when revealed (pair with data-rv) */
.rv-on .draw[data-rv],.rv-on .draw[data-rv]:not(.in){opacity:1;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-med) var(--ease)}
.rv-on .draw[data-rv].in{transform:scaleX(1)}

/* panel: quiet white surface for one featured item per section */
.panel{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line-2)}

/* link-arrow: secondary text CTA that never competes with the primary button */
.link-arrow{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16.5px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px;min-height:0}
.link-arrow::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:1.5px;background:var(--violet);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-quick) var(--ease);pointer-events:none}
.link-arrow:hover::after{transform:none}
/* tap area: at least 44px without moving the layout */
.link-arrow::before,.wn-a::before{content:"";position:absolute;inset:-8px -4px}
.link-arrow{transition:color var(--t-quick) var(--ease)}
.band-ink .link-arrow::after{background:var(--lav-2)}
.link-arrow svg{flex:none;transition:transform var(--t-quick) var(--ease)}
.link-arrow:hover{color:var(--violet)}
.link-arrow:hover svg{transform:translateX(3px)}

/* image placeholder: labelled, never stock or generated */
.ph-box{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;display:grid;place-items:center;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,#ECE7DD 0 14px,#E6E0D4 14px 28px);color:var(--muted);font-size:14.5px;font-weight:500;line-height:1.5}
.ph-box span{max-width:24ch}
.ph-box.ph-ink{background:repeating-linear-gradient(135deg,#1D1937 0 14px,#221D40 14px 28px);color:var(--on-ink-muted)}

/* faq: accessible details/summary accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:60px;padding:16px 0;font-weight:500;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 26px/1 var(--sans);color:var(--ink);transition:transform var(--t-quick) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary{transition:color var(--t-quick) var(--ease)}
.faq summary:hover{color:var(--violet)}
.faq .a{padding:0 48px 22px 0}
.faq .a p{font-size:16.5px;color:var(--text);max-width:60ch}

/* integration-logo: fixed 24px box so any third-party mark sits at equal visible size.
   Replace a file in assets/integrations/ to update it; no markup or CSS change needed. */
.integration-logo{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px}
.integration-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.integration-logo img[src$=".svg"]{width:100%;height:100%}

/* footer: one shared footer, source in assets/partials/footer.html */
.site-foot{background:var(--ink);color:#fff;padding:72px 0 28px}
.ft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"brand brand" "explore touch" "legal legal";gap:40px 24px}
.ft-brand{grid-area:brand}.ft-explore{grid-area:explore}.ft-touch{grid-area:touch}.ft-legal{grid-area:legal}
.ft-logo{display:inline-block;padding:8px 0}
.ft-logo img{display:block;width:auto;height:28px}
.ft-desc{margin-top:18px;max-width:32ch;font-size:16px;line-height:1.55;color:#fff}
.ft-tag{margin-top:12px;font-family:var(--serif);font-size:24px;line-height:1.2;letter-spacing:-.01em;color:var(--lav-2)}
.site-foot h2{margin-bottom:4px;font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lav-2)}
.ft-col ul{list-style:none;display:grid}
.ft-col a{display:inline-block;min-width:44px;max-width:100%;padding:12px 0;font-size:15.5px;line-height:20px;color:#fff;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--lav-2),var(--lav-2)) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size .2s ease}
.ft-col a:hover{color:#fff;background-size:100% 1.5px}
.ft-col a.ft-arrow{display:inline-flex;align-items:center;gap:6px}
.ft-arrow svg{flex:none}
.ft-base{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.ft-small{min-width:0;font-size:13.5px;line-height:1.65;color:#ABA7BE}
.ft-small a{display:inline-block;padding:12px 0;margin:-12px 0;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.ft-small a:hover{color:#fff;text-decoration-color:var(--lav-2)}
@media (min-width:900px){.ft-small a{padding:0;margin:0}}
.ft-top{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.ft-top:hover{border-color:var(--lav-2);color:var(--lav-2)}
@media (min-width:900px){.site-foot{padding:88px 0 32px}.ft-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr);grid-template-areas:"brand explore touch legal";gap:40px}.site-foot h2{margin-bottom:12px}.ft-col a{padding:6px 0;background-position:0 calc(100% - 4px)}.ft-base{align-items:center;margin-top:64px}}
@media (prefers-reduced-motion:reduce){.site-head,.head-in,.head-logo img,.head-menu span,.head-nav a,.head-cta,.ft-col a,.ft-top{transition:none}.head-panel.open .hp-in{animation:none}}
.signoff{margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--serif);font-weight:400;letter-spacing:-.015em;font-size:clamp(28px,4.6vw,44px);line-height:1.1}
.signoff .so-b{position:relative;display:inline-block;color:var(--lav-2)}
.signoff .so-b::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.06em;border-radius:.1em;background:var(--lav-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) .25s}
.signoff.in .so-b::after{transform:scaleX(1)}

/* scroll layer */
#rail{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
#rail i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
/* reveal: site.js adds .rv-on only once it is running and has already shown everything in the first screen.
   If the script is slow or fails, nothing is ever hidden. */
.rv-on [data-rv]:not(.in){opacity:0;transform:translateY(12px)}
.rv-on [data-rv].rv-go{transition:opacity var(--t-med) var(--ease) var(--rv-d,0ms),transform var(--t-med) var(--ease) var(--rv-d,0ms)}
/* after a reveal: children of a .rv-play element can rise (rv-up), draw a hairline (rv-line) or draw a small line icon
   (rv-draw: give each shape pathLength="1" and stroke-dasharray:1). Only transform, opacity and stroke-dashoffset move. */
@keyframes rv-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rv-line{from{transform:scaleX(0)}to{transform:none}}
@keyframes rv-draw{0%{stroke-dashoffset:1;opacity:0}15%{opacity:1}to{stroke-dashoffset:0;opacity:1}}

/* page to page: a quick cross-fade, with the header and logo held still.
   The opt-in (@view-transition) is added by each page's head script on the live site only, not inside preview frames. */
::view-transition-old(root),::view-transition-new(root){animation-duration:250ms;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}
.site-head{view-transition-name:site-head}
::view-transition-group(site-head),::view-transition-new(site-head){animation:none}
::view-transition-old(site-head){display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv-on [data-rv]:not(.in){opacity:1;transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .signoff .so-b::after{transform:scaleX(1)}
}

/* Leadaline footer, calmer version (demo, 18 Oct 2026): the same links, regrouped.
   Brand with contact and the booking button; Services and Company side by side (also on phones);
   Terms, Privacy and Company details in the bottom line. Loaded after site.css, so it only overrides. */
.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"brand brand" "services company";gap:30px 24px}
.ft-services{grid-area:services}
.ft-company{grid-area:company}
.ft-tag{font-size:22px}
.ft-contact{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-top:20px;font-size:15.5px}
.ft-contact a{display:inline-block;padding:10px 0;color:#fff;text-decoration:none;background:linear-gradient(var(--lav-2),var(--lav-2)) 0 calc(100% - 8px)/0 1.5px no-repeat;transition:background-size .2s ease}
.ft-contact a:hover{background-size:100% 1.5px}
.ft-dot{color:#6F6A8C}
.ft-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:600 15px/1.2 var(--sans);color:#fff;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
.ft-cta:hover{border-color:var(--lav-2);background:rgba(169,155,255,.1)}
.ft-cta svg{transition:transform .2s ease}
.ft-cta:hover svg{transform:translateX(3px)}
.ft-col a{padding:9px 0;background-position:0 calc(100% - 7px)}
.ft-base{align-items:center;margin-top:40px}
.ft-base-in{flex:1 1 auto;display:grid;gap:6px;min-width:0}
.ft-legal{grid-area:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 18px}
.ft-legal a{display:inline-block;padding:8px 0;font-size:13.5px;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.ft-legal a:hover{text-decoration-color:var(--lav-2)}
@media (min-width:900px){
  .ft-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"brand services company";gap:48px}
  .ft-col a{padding:6px 0;background-position:0 calc(100% - 4px)}
  .ft-base-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
  .ft-legal a{padding:0}
  .ft-base{margin-top:56px}
}
@media (max-width:640px){.site-foot{padding-top:56px}.ft-desc{display:none}.ft-tag{margin-top:14px}.ft-base{align-items:flex-end;margin-top:32px}}
@media (prefers-reduced-motion:reduce){.ft-contact a,.ft-cta,.ft-cta svg{transition:none}}
/* Leadaline header dropdown (demo, 18 Oct 2026): "Integrations" opens a panel with our three service pages
   and the popular integrations, so people can go straight there. Laptops: hover or the small arrow;
   phones: a toggle in the menu. Loaded after site.css, so it only adds and overrides. */
.head-nav li{position:relative}
.head-nav .hd-drop{display:flex;align-items:center;gap:2px}
.hd-caret{display:grid;place-items:center;width:26px;height:26px;margin-right:-8px;padding:0;border:0;border-radius:6px;background:none;color:var(--hd-fg);cursor:pointer;opacity:.75;transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.hd-caret:hover,.hd-drop.open .hd-caret{opacity:1}
.hd-drop.open .hd-caret{transform:rotate(180deg)}
.hd-menu{position:absolute;top:calc(100% + 14px);left:50%;z-index:70;width:min(640px,calc(100vw - 48px));padding:22px 22px 16px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 30px 60px -24px rgba(21,18,43,.35),0 2px 6px rgba(21,18,43,.05);transform:translateX(-50%)}
.hd-menu[hidden]{display:none}
.hd-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* keeps hover alive across the gap */
.hd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.hd-k{margin:0 0 6px 10px;font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hd-group ul{list-style:none;display:grid;gap:2px}
.head-nav .hd-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;background:none;color:var(--ink);text-decoration:none;transition:background-color .18s ease}
.head-nav .hd-item:hover,.head-nav .hd-item:focus-visible{background:var(--tint,#ECE8FF);background-size:auto}
.hd-ic{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:linear-gradient(160deg,#fff 10%,#E4DEFF);color:#481DC9;box-shadow:0 6px 16px -8px rgba(124,92,255,.6),inset 0 0 0 1px rgba(72,29,201,.08)}
.hd-item b{display:block;font:600 15px/1.25 var(--sans)}
.hd-item b+span{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.head-nav .hd-all{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0 10px;padding:6px 0;font:600 14.5px/1.2 var(--sans);color:#481DC9;background:none;text-decoration:none}
.head-nav .hd-all:hover{color:#481DC9}
.head-nav .hd-all svg{transition:transform .2s ease}
.head-nav .hd-all:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:no-preference){
  .hd-menu{transform-origin:50% 0;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1)}
  .hd-menu:not(.in){opacity:0;transform:translate(-50%,8px) scale(.97);pointer-events:none;transition-duration:.14s,.16s;transition-timing-function:cubic-bezier(.4,0,1,1)}
  .hd-menu.in.re .hd-item{animation:none}
  .hd-menu.in .hd-item{animation:hd-item .4s cubic-bezier(.22,1,.36,1) both}
  .hd-menu.in li:nth-child(2) .hd-item{animation-delay:.04s}
  .hd-menu.in li:nth-child(3) .hd-item{animation-delay:.08s}
  .hd-menu.in li:nth-child(4) .hd-item{animation-delay:.12s}
}
@keyframes hd-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes hd-item{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* phone menu: a toggle beside Integrations opens the same pages */
.hp-links .hp-has{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.hp-sub-t{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:none;color:#fff;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .2s ease}
.hp-sub-t[aria-expanded="true"]{transform:rotate(180deg);border-color:var(--lav-2)}
.hp-sub{flex-basis:100%;list-style:none;display:grid;gap:0;margin:2px 0 10px;padding-left:16px;border-left:1px solid rgba(255,255,255,.18)}
.hp-sub[hidden]{display:none}
.hp-links .hp-sub a{padding:9px 0;font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:0;color:var(--on-ink-muted)}
.hp-links .hp-sub a:hover{color:#fff}
@media (prefers-reduced-motion:no-preference){.hp-sub.in li{animation:hd-item .35s cubic-bezier(.22,1,.36,1) both}.hp-sub.in li:nth-child(n+2){animation-delay:.03s}.hp-sub.in li:nth-child(n+4){animation-delay:.07s}.hp-sub.in li:nth-child(n+6){animation-delay:.11s}}
@media (prefers-reduced-motion:reduce){.hd-caret,.hp-sub-t,.hd-item,.hd-all svg{transition:none}}
/* Shared by every page (18 Oct 2026): the homepage link to Bespoke software and the menu tab's spark. Styles
   for some pages only live in their own files: assets/questions.css, assets/service-hero.css, assets/bespoke.css. */
/* the homepage's pointer to it */
.imp-intro .imp-more{margin-top:22px}

/* the menu: Bespoke software carries a small spark that glints now and then */
.nav-big::before{content:"";display:inline-block;width:.78em;height:.78em;margin:0 .4em .12em 0;vertical-align:middle;background:#7C5CFF;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 5.6 2.9 8.4 11 11-8.1 2.6-10.3 5.4-11 11-.7-5.6-2.9-8.4-11-11 8.1-2.6 10.3-5.4 11-11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 5.6 2.9 8.4 11 11-8.1 2.6-10.3 5.4-11 11-.7-5.6-2.9-8.4-11-11 8.1-2.6 10.3-5.4 11-11z'/%3E%3C/svg%3E") center/contain no-repeat;animation:nav-glint 6s ease-in-out 2s infinite}
.hp-links .nav-big::before,.site-head.menu-open .nav-big::before{background:var(--lav-2)}
/* six tabs: on small laptops (900 to 1100px wide) they sit a little closer so none wraps */
@media (min-width:900px) and (max-width:1099.98px){.head-nav ul{gap:18px}.head-nav a{font-size:14.5px;white-space:nowrap}}
@media (min-width:900px) and (max-width:979.98px){.head-nav ul{gap:12px}}
@keyframes nav-glint{0%,82%,100%{transform:none}88%{transform:scale(1.35) rotate(45deg)}94%{transform:scale(.9) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.nav-big::before{animation:none}}

/* Leadaline motion layer, every page. This block sits at the end of site.css. Everything here waits for html.m-pre (set by
   the head script) or html.m-on (set by motion.js), so without JavaScript, or with reduced motion, each page is
   exactly the live page.
   Only transform and opacity animate; no element repaints a large area while scrolling. */

/* ---------- the first paint ----------
   The head script sets html.m-pre before anything draws, so each page's headline rises by itself, in CSS, from the
   very first paint: it never waits for a script. It starts at 1% opacity, not 0, so the browser counts the page as
   shown straight away (good for speed scores). */
@keyframes m-h1{from{opacity:.01;transform:translateY(.35em)}to{opacity:1;transform:none}}
.m-pre :is(.hero,.c-hero,.doc-hero) h1{animation:m-h1 .9s cubic-bezier(.22,1,.36,1) .05s both}
/* homepage: "simpler." waits off stage for its cartoon entrance (motion.js) */
.m-pre:has(#how-we-work) .hero h1 .accent{opacity:0}
/* homepage: the search check badge waits too, and flies in from under the screen after "simpler." has settled (motion.js) */
.m-pre:has(#how-we-work) .hero .assure-sc{opacity:0}

/* homepage hub: built by motion.js ("your business, connected"). While the page is marked for motion its own CSS
   animations wait, and until the build starts its parts wait off stage; if motion.js never runs, the head script's
   safety net removes m-pre and the hub animates exactly as before */
.m-pre .hero .hz :is(.hz-card,.hz-ln,.hz-dot,.hz-dash){animation:none}
.m-pre .hero .hz:not(.m-built) :is(.hz-card,.hz-ln,.hz-dot,.hz-dash){opacity:0}
.m-pre .hero .hz-run path{animation-delay:calc(3.6s + var(--o) * 2.5s)}
/* the build itself, run by the browser (motion.js sets each part's start time, --d, then adds .m-hz-go) */
@keyframes m-hz-pop{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes m-hz-sync{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes m-hz-draw{from{stroke-dashoffset:-100}to{stroke-dashoffset:0}}
@keyframes m-hz-on{from{opacity:0}to{opacity:1}}
@keyframes m-hz-flow{from{opacity:0;stroke-dashoffset:42}to{opacity:1;stroke-dashoffset:0}}
@keyframes m-hz-spark{0%{stroke-dashoffset:-100;opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes m-hz-pulse{from{stroke-dashoffset:14}to{stroke-dashoffset:-100}}
@keyframes m-hz-glow{0%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
.m-pre .hero .hz.m-hz-go .hz-card{will-change:transform,opacity;animation:m-hz-pop .55s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both}
.m-pre .hero .hz.m-hz-go .hz-c{animation:m-hz-pop .7s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both,m-hz-sync .36s ease-out var(--d2,0s) forwards}
.m-pre .hero .hz.m-hz-go .hz-ln{animation:m-hz-draw .45s cubic-bezier(.45,0,.55,1) var(--d,0s) both}
.m-pre .hero .hz.m-hz-go .hz-dot{animation:m-hz-on .2s ease-out var(--d,0s) both}
.m-pre .hero .hz.m-hz-go .hz-dash{animation:m-hz-flow .6s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
.m-hz-spark,.m-pulse,.m-pulse-halo{fill:none;stroke-linecap:round;pointer-events:none}
.m-hz-spark{stroke:#fff;stroke-width:7;stroke-dasharray:.1 300;animation:m-hz-spark .45s cubic-bezier(.45,0,.55,1) var(--d,0s) both}
.m-pulse{stroke:#fff;stroke-width:3;stroke-dasharray:14 200;animation:m-hz-pulse .5s cubic-bezier(.55,0,1,.45) var(--d,0s) both}
.m-pulse-halo{stroke:#A99BFF;stroke-width:10;stroke-opacity:.35;stroke-dasharray:14 200;animation:m-hz-pulse .5s cubic-bezier(.55,0,1,.45) var(--d,0s) both}
.m-coreglow{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(139,61,240,.55),rgba(139,61,240,0));animation:m-hz-glow .9s ease-in-out var(--d,0s) both}

/* split text: lines are clipped so words rise out of them */
.m-on .m-line{padding-bottom:.08em;margin-bottom:-.08em}
.m-on .m-word{display:inline-block;text-indent:0}

/* first screen: a short coloured word ("simpler.") gets a drawn underline, and a soft light follows the pointer (computers) */
.m-on h1 .accent.m-ul{position:relative}
.m-on h1 .accent.m-ul::after{content:"";position:absolute;left:.02em;right:.06em;bottom:.02em;height:.07em;border-radius:1em;
  background:linear-gradient(90deg,#A99BFF,#8B3DF0);transform:scaleX(var(--ul,0));transform-origin:0 50%}
.m-glow{position:absolute;left:-300px;top:-300px;width:600px;height:600px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(169,155,255,.16),rgba(169,155,255,0));opacity:0;transition:opacity .6s ease}
.m-glow.on{opacity:1}
.m-iso{position:relative;isolation:isolate}

/* homepage: "simpler." flies in from beyond the right edge, so the first screen clips sideways (never scrolls) */
.m-on .hero{overflow-x:clip}
.m-on .m-zip{display:inline-block}

/* highlight sweep under "the hard part", driven by scroll */
.m-on .hl::before{transform:scaleX(var(--hl,0))!important;transition:none!important}

/* words that light up as you read */
.m-on .m-read .m-word{opacity:.16}
/* a quote high on its page waits dimmed until the read-along takes it over (no flash); without the motion layer it shows in full */
.m-pre .m-wait{opacity:.16}

/* How we work: a soft glow travels with the progress line (computers) */
.m-hwglow{position:absolute;left:0;top:-90px;width:300px;height:300px;border-radius:50%;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(139,61,240,.32),rgba(139,61,240,0))}
.m-on #hw{position:relative}

/* question and answer headings: the foundation line the answer is built on (motion.js) */
.m-foot{position:absolute;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,#A99BFF,#8B3DF0);
  transform-origin:0 50%}

/* the six things a Business Data Centre holds, as chips */
.m-on .pv-cap.m-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.m-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--violet);background:#fff;border:1px solid rgba(72,29,201,.16);box-shadow:0 6px 16px -10px rgba(21,18,43,.4)}

/* ---------- the Leadaline cursor (computers with a mouse) ----------
   The pointer is the Signal notch: a solid violet arrowhead with an ink fold and a white outer edge, so it shows on
   paper and on the dark sections. It is drawn by the system, so it never lags. Over anything you can click it turns
   a deeper violet; a click sends out a ring and four corner pieces, like the corner in our logo. */
.m-cur, .m-cur body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 3L24.6 11.2L11.6 12.2L10.8 24.6Z' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M3 3L24.6 11.2L11.6 12.2L10.8 24.6Z' fill='%237C5CFF'/%3E%3Cpath d='M11.6 12.2L7.99 8.34L17.84 11.72Z' fill='%2315122B'/%3E%3C/svg%3E") 3 3, auto}
.m-cur a, .m-cur button, .m-cur [role="button"], .m-cur [role="tab"], .m-cur summary, .m-cur label, .m-cur select,
.m-cur .hz-card, .m-cur [data-int]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 3L24.6 11.2L11.6 12.2L10.8 24.6Z' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M3 3L24.6 11.2L11.6 12.2L10.8 24.6Z' fill='%23481DC9'/%3E%3Cpath d='M11.6 12.2L7.99 8.34L17.84 11.72Z' fill='%23A99BFF'/%3E%3C/svg%3E") 3 3, pointer}
.m-cur input, .m-cur textarea, .m-cur [contenteditable]{cursor:text}
.m-burst{position:fixed;left:0;top:0;width:0;height:0;z-index:2147483001;pointer-events:none}
.m-burst .m-wave{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid #8B3DF0}
.m-burst .m-bit{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-top:3px solid #A99BFF;border-right:3px solid #A99BFF;border-top-right-radius:2px}
.m-burst .m-wave2{border-width:1.5px;border-color:#A99BFF}
.m-burst .m-bit2{border-color:#7C5CFF}
.m-burst .m-bloom{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle,rgba(169,155,255,.55) 0%,rgba(124,92,255,.22) 45%,rgba(124,92,255,0) 70%)}

/* ---------- clicking through to another page ----------
   The old page sinks back a touch and fades into the new page's own colour (cream, or ink for the homepage), so
   there is never a dark flash between two light pages; then the new page rises into place. The header stays put
   and only cross-fades where it changes. The click's ripple carries on over the new page from where it had got to
   (.m-carry, made by the head script). Only transform and opacity move, so the browser runs it all on the
   graphics chip and it stays smooth while the new page starts up (its own motion waits until this has finished).
   Going back plays it the other way. Chrome, Edge and Safari 18.2 or newer; other browsers change page as before. */
@keyframes m-vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes m-vt-in{from{opacity:0;transform:translateY(26px)}}
@keyframes m-vt-out-back{to{opacity:0;transform:translateY(18px)}}
@keyframes m-vt-in-back{from{opacity:0;transform:scale(.985)}}
@keyframes m-vt-fade-out{to{opacity:0}}
@keyframes m-vt-fade-in{from{opacity:0}}
html.m-vt::view-transition{background:#F5F2EC}
html.m-vt:has(#how-we-work)::view-transition{background:#15122B}
html.m-vt::view-transition-old(root){transform-origin:50% 30%;mix-blend-mode:normal;animation:m-vt-out .18s cubic-bezier(.4,0,1,1) both!important}
html.m-vt::view-transition-new(root){mix-blend-mode:normal;animation:m-vt-in .42s cubic-bezier(.22,1,.36,1) .14s both!important}
html.m-vt-back::view-transition-old(root){animation-name:m-vt-out-back!important}
html.m-vt-back::view-transition-new(root){transform-origin:50% 30%;animation-name:m-vt-in-back!important}
html.m-vt::view-transition-old(site-head){display:block;animation:m-vt-fade-out .2s ease both!important}
html.m-vt::view-transition-new(site-head){animation:m-vt-fade-in .3s ease .08s both!important}
html.m-vt::view-transition-group(m-vt-burst),html.m-vt::view-transition-new(m-vt-burst){animation:none!important}
html.m-vt::view-transition-old(m-vt-burst){display:none}
@keyframes m-cb-bloom{from{transform:scale(.3);opacity:.75}to{transform:scale(1.8);opacity:0}}
@keyframes m-cb-w1{from{transform:scale(.2);opacity:.9}to{transform:scale(1.35);opacity:0}}
@keyframes m-cb-w2{from{transform:scale(.2);opacity:.55}to{transform:scale(2.1);opacity:0}}
@keyframes m-cb-bit{from{transform:translate(0,0) rotate(var(--r)) scale(.4);opacity:1}to{transform:translate(var(--x),var(--y)) rotate(calc(var(--r) + 45deg)) scale(1.1);opacity:0}}
.m-burst.m-carry{width:160px;height:160px;margin:-80px 0 0 -80px}
html.m-vt .m-carry{view-transition-name:m-vt-burst}
.m-carry>span{translate:80px 80px}
.m-carry .m-bloom{animation:m-cb-bloom .55s cubic-bezier(.33,1,.68,1) var(--age) both}
.m-carry .m-wave{animation:m-cb-w1 .55s cubic-bezier(.33,1,.68,1) var(--age) both}
.m-carry .m-wave2{animation:m-cb-w2 .85s cubic-bezier(.25,1,.5,1) calc(var(--age) + 60ms) both}
.m-carry .m-bit{animation:m-cb-bit .75s cubic-bezier(.16,1,.3,1) calc(var(--age) + 20ms) both}
.m-carry .m-bit:nth-child(4){--r:0deg;--x:30px;--y:-30px}
.m-carry .m-bit:nth-child(5){--r:90deg;--x:30px;--y:30px}
.m-carry .m-bit:nth-child(6){--r:180deg;--x:-30px;--y:30px}
.m-carry .m-bit:nth-child(7){--r:270deg;--x:-30px;--y:-30px}

/* ---------- scroll-linked moves on the browser's own engine ----------
   Where the browser can run scroll-linked animation itself (Chrome, Edge, Safari 26 or newer) these moves run off
   the main thread, so they stay smooth on a busy phone. motion.js uses GSAP for the same moves everywhere else. */
@supports (animation-timeline:view()){
  .m-on .m-settle{transform-origin:50% 100%;animation:m-settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes m-settle{from{transform:perspective(1300px) translateY(90px) rotateX(14deg) scale(.93)}to{transform:perspective(1300px)}}
  .m-on .m-window{animation:m-window linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes m-window{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}
  .m-on .m-grow{transform-origin:50% 0%;animation:m-grow linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes m-grow{from{transform:translateY(110px) scale(.9)}to{transform:none}}
  @media (max-width:899.98px){
    .m-on .m-settle{animation-name:m-settle-p;animation-range:entry 0% cover 48%}
    @keyframes m-settle-p{from{transform:perspective(1300px) translateY(40px) rotateX(6deg) scale(.97)}to{transform:perspective(1300px)}}
    .m-on .m-grow{animation-name:m-grow-p;animation-range:entry 0% cover 30%}
    @keyframes m-grow-p{from{transform:translateY(50px) scale(.96)}to{transform:none}}
  }
}

/* homepage: the search check badge's glint. One pass of light: a highlight through the words, a fine light along the
   edge (a 1px ring cut out with a mask), a soft sheen across the surface, and a four-point sparkle on the magnifier */
.m-shine-t{background:linear-gradient(100deg,var(--lav-2,#C9BFFF) 40%,#fff 50%,var(--lav-2,#C9BFFF) 60%) 0 0/250% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-edge{position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 0 0/250% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.m-sweep{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}
.m-sweep i{position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
  mix-blend-mode:plus-lighter;transform:translateX(-120%)}
.m-spark{position:absolute;left:19px;top:3px;width:11px;height:11px;z-index:3;pointer-events:none;opacity:0;background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
/* numbered lists in articles and documents: the numbers sit outside the text, so they need this room or they hang off a phone screen (Cam, 25 Oct 2026) */
.body ol{margin:14px 0 0 1.4em;display:grid;gap:8px}