/* Shared styles for every page. Layout concept: quiet Swiss one-pager. Light ground, one typeface at light weight, hairlines, the logo as the only colour.
   Motion does the talking: intro curtain, word reveals, scrubbed statement, parallax images, pinned horizontal scroll. */
:root{
  --bg:#FFFFFF;
  --ink:#150C2B;
  --ink-2:#5E5674;
  --line:#DDD8E8;
  --indigo:#47159C;      /* sampled from the wordmark in Banner1600x1040.png */
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --pad-l:max(20px,env(safe-area-inset-left,0px));
  --pad-r:max(20px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--bg)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:2px}
.in{max-width:1360px;margin:0 auto;padding-left:var(--pad-l);padding-right:var(--pad-r)}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 28px;display:flex;align-items:center;gap:12px}
.label::before{content:"";width:28px;height:1px;background:currentColor}
section{padding-block:clamp(88px,12vw,180px)}
em{font-style:normal;color:var(--indigo)}

/* split words */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;will-change:transform}

/* progress */
#bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;width:100%;background:var(--indigo);transform:scaleX(0);transform-origin:0 50%;z-index:95}
/* preloader (static HTML, auto-hides even if scripts fail) */
#pre{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;animation:preOut .01s 4.5s forwards}
#pre img{width:min(70vw,460px)}
@keyframes preOut{to{visibility:hidden}}

/* nav */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:92px}
.nav .logo img{height:84px;width:auto;display:block}
.nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:15px;color:var(--ink-2);position:relative;transition:color .25s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s}
.nav ul a:hover{color:var(--ink)}.nav ul a:hover::after{transform:scaleX(1)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);font:500 16px/1 var(--sans);padding:19px 30px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;will-change:transform;transition:background .3s}
.btn:hover{background:var(--indigo)}
.btn .ar{display:inline-block;transition:transform .35s}
.btn:hover .ar{transform:translateX(5px)}
.btn.sm{padding:13px 22px;font-size:14px}
@media(max-width:820px){.nav ul{display:none}}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,80px);align-items:start}
.hero h1{font-size:clamp(42px,6.6vw,104px);max-width:13.5em}
.hero-logo{width:clamp(150px,19vw,280px);will-change:transform;margin-top:8px}
.hero-foot{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-top:clamp(40px,6vw,88px);padding-top:28px;border-top:1px solid var(--line)}
.lede{max-width:29em;font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);margin:0}
.cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cue{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.cue i{display:block;width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--indigo);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{to{top:100%}}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr}.hero-logo{display:none}.nav .logo img{height:64px}.nav{height:76px}.btn.sm{padding:12px 16px;font-size:13px}}

/* marquee */
.marq{border-block:1px solid var(--line);overflow:hidden;padding-block:clamp(22px,3vw,38px)}
.track{display:flex;width:max-content;animation:slide 46s linear infinite;white-space:nowrap}
.track span{font:300 clamp(30px,4.6vw,68px)/1 var(--sans);letter-spacing:-.04em;padding-right:.5em;color:transparent;-webkit-text-stroke:1px var(--ink)}
.track span.f{color:var(--ink);-webkit-text-stroke:0}
.track span.s{color:var(--indigo);-webkit-text-stroke:0;font-weight:300}
@keyframes slide{to{transform:translateX(-50%)}}

/* company */
.statement{font-size:clamp(28px,4.3vw,64px);line-height:1.1;letter-spacing:-.035em;font-weight:300;max-width:21em;margin:0}
.statement .sw{opacity:.2;display:inline-block;margin-right:.24em}
.company-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(48px,6vw,88px)}
.company-cols p{margin:0;color:var(--ink-2);max-width:31em;grid-column:2}
.company-cols p b{color:var(--ink);font-weight:500}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,8vw,120px);border-top:1px solid var(--ink)}
.stats div{padding:26px 20px 0 0}
.stats b{display:block;font:300 clamp(48px,7vw,104px)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:14px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media(max-width:820px){.company-cols{grid-template-columns:1fr}.company-cols p{grid-column:1}.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}

/* services */
.svc-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,100px);align-items:start}
.svc-grid .sticky{position:sticky;top:130px}
.h2{font-size:clamp(38px,5.4vw,80px)}
.acc{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.acc li{border-bottom:1px solid var(--line)}
.acc .hd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;padding:30px 0;font:300 clamp(24px,3vw,42px)/1.1 var(--sans);letter-spacing:-.03em;transition:padding .4s,color .3s}
.acc .hd:hover{padding-left:16px;color:var(--indigo)}
.acc .pm{flex:none;position:relative;width:20px;height:20px}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s}
.acc .pm::after{transform:rotate(90deg)}
.acc [aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc .pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.acc .pn>div{overflow:hidden}
.acc [aria-expanded="true"]+.pn{grid-template-rows:1fr}
.acc .pn p{margin:0 0 20px;color:var(--ink-2);max-width:37em}
.acc .pn a{display:inline-block;margin-bottom:34px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--indigo);border-bottom:1px solid currentColor;padding-bottom:5px}
.acc li.plain .hd{cursor:default}.acc li.plain .hd:hover{padding-left:0;color:inherit}
.acc li.plain .pm{display:none}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}.svc-grid .sticky{position:static}}

/* why: pinned horizontal scroll on desktop */
.why{padding-block:0;border-top:1px solid var(--line)}
.why-pin{padding-block:clamp(72px,9vw,120px)}
.why-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(24px,3vw,48px);margin-top:clamp(40px,6vw,72px)}
.card{border-top:1px solid var(--ink);padding-top:22px}
.card h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:14px}
.card p{margin:0;color:var(--ink-2);font-size:17px;max-width:24em}
@media(max-width:900px){.why-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.why-track{grid-template-columns:1fr}}
.why.hz .why-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:0}
.why.hz .why-track{display:flex;gap:0;width:max-content;margin-top:56px;padding-left:var(--pad-l)}
.why.hz .card{flex:none;width:min(31vw,440px);padding:22px 48px 0 0;margin-right:48px}
.why.hz .head{width:100%;max-width:1360px}

/* contact + footer */
.contact{border-top:1px solid var(--line);padding-block:clamp(72px,9vw,130px) clamp(56px,6vw,84px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.contact h2{font-size:clamp(34px,4.4vw,62px)}
.contact h2 + p{color:var(--ink-2);max-width:24em;margin:24px 0 0}
form{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px}
form .full{grid-column:1/-1}
label{display:block;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
label small{text-transform:none;letter-spacing:0;font-family:var(--sans);margin-left:6px;opacity:.7}
input,select,textarea{display:block;width:100%;margin-top:10px;font:400 18px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0 12px;transition:border-color .3s;-webkit-appearance:none;appearance:none}
select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2347159C' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo)}
#sent{margin:16px 0 0;font-size:15px;color:var(--indigo);min-height:1.4em}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:520px){form{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding-block:48px 44px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,.75fr));gap:36px;font-size:15px;color:var(--ink-2)}
.foot img{height:84px;width:auto;margin:0 0 8px -6px}
.foot p{margin:0;max-width:20em}
.foot h4{margin:0 0 16px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.foot a{display:block;text-decoration:none;margin-bottom:10px;transition:color .25s}.foot a:hover{color:var(--indigo)}.foot p a{display:inline;margin:0;text-decoration:underline;text-underline-offset:3px}
.copy{margin:44px 0 0;font-size:13px;color:var(--ink-2)}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}

/* ---------- added for the multi-page site ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:12px 18px;z-index:300}
.skip:focus{left:12px;top:12px}
.crumb{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 36px;display:flex;flex-wrap:wrap;gap:10px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--indigo)}
.phero{padding-block:clamp(40px,6vw,84px) clamp(48px,7vw,96px)}
.phero h1{font-size:clamp(38px,5.6vw,88px);max-width:14em}
.phero .lede{margin-top:clamp(28px,4vw,48px)}
.phero .cta{margin-top:36px}
.blk{padding-block:clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.blk-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,100px);align-items:start}
.sh{font-size:clamp(28px,3.2vw,46px)}
@media(max-width:860px){.blk-grid{grid-template-columns:1fr}}
.prose p{margin:0 0 1.1em;color:var(--ink-2);max-width:34em}
.prose a{color:var(--indigo);text-underline-offset:3px}
.prose>*:last-child{margin-bottom:0}
.list,.steps,.proof,.hub{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--ink)}
.list li{padding:20px 0;border-bottom:1px solid var(--line)}
.list b,.steps b{display:block;font-weight:300;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;line-height:1.15;color:var(--ink);margin-bottom:6px}
.list span,.steps span{display:block;color:var(--ink-2);max-width:32em}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 12px;padding:24px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 12px/2.6 var(--mono);letter-spacing:.1em;color:var(--indigo)}
.steps span a{color:var(--indigo);text-underline-offset:3px}
.tags{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.tags li{padding:11px 18px;border:1px solid var(--line);border-radius:999px;font-size:17px;color:var(--ink)}
.proof li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;gap:14px 40px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line)}
.proof h3{font-size:clamp(32px,4.2vw,58px)}
.proof p{margin:0;color:var(--ink-2);max-width:30em}
.proof a,.textlink{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--indigo);border-bottom:1px solid currentColor;padding-bottom:5px;white-space:nowrap}
@media(max-width:760px){.proof li{grid-template-columns:1fr;gap:12px}.proof li>a{justify-self:start}}
.faq{margin:0;border-top:1px solid var(--ink)}
.faq div{padding:26px 0;border-bottom:1px solid var(--line)}
.faq dt{font-weight:400;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.faq dd{margin:10px 0 0;color:var(--ink-2);max-width:36em}
.faq dd a{color:var(--indigo);text-underline-offset:3px}
.hub li{border-bottom:1px solid var(--line)}
.hub a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 20px;gap:12px 40px;align-items:center;padding:32px 0;text-decoration:none;transition:padding .4s,color .3s}
.hub a:hover{padding-left:16px;color:var(--indigo)}
.hub b{font:300 clamp(24px,3vw,42px)/1.1 var(--sans);letter-spacing:-.03em}
.hub span{color:var(--ink-2)}
.hub i{font-style:normal;transition:transform .35s}.hub a:hover i{transform:translateX(5px)}
@media(max-width:760px){.hub a{grid-template-columns:minmax(0,1fr) 20px}.hub span{grid-column:1;grid-row:2}.hub i{grid-column:2;grid-row:1}}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
@media(max-width:640px){.two{grid-template-columns:1fr}}
.stack-wrap{margin-top:clamp(32px,4vw,56px)}
.endcta{border-top:1px solid var(--line);padding-block:clamp(72px,9vw,130px)}
.endcta h2{font-size:clamp(34px,4.4vw,62px);max-width:14em}
.endcta p{color:var(--ink-2);max-width:26em;margin:24px 0 36px}
.related{display:flex;flex-wrap:wrap;gap:10px 28px}
.related a{font-size:17px;color:var(--ink-2);text-underline-offset:4px}.related a:hover{color:var(--indigo)}
.facts{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--ink);max-width:26em}
.facts li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.facts b{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.facts a{color:var(--ink);text-underline-offset:3px}.facts a:hover{color:var(--indigo)}
.form-note{grid-column:1/-1;margin:0;font-size:15px;color:var(--ink-2);border-left:2px solid var(--indigo);padding-left:14px}
[aria-invalid="true"]{border-color:#B3261E}
.legal{max-width:46em}
.legal .hl{border-block:1px solid var(--line);padding:22px 0;margin-bottom:12px}
.legal .hl p{margin:0;font-size:20px;color:var(--ink)}
.legal h2{font-size:clamp(24px,2.6vw,34px);margin:2.2em 0 .5em}
.legal h3{font-weight:400;font-size:20px;letter-spacing:-.01em;margin:1.6em 0 .4em}
.legal p,.legal li{font-size:17px;color:var(--ink-2)}
.legal ul{padding-left:1.2em}.legal li{margin-bottom:.4em}
.legal a{color:var(--indigo);text-underline-offset:3px;overflow-wrap:anywhere}
.legal .upd{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:28px 0 0}
.nf{min-height:60vh;display:flex;align-items:center}
.nf p{color:var(--ink-2);max-width:26em;margin:24px 0 32px}
.nf h1{font-size:clamp(42px,6.6vw,96px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}#pre{display:none}}