/* ollivere-style template: original stylesheet (c) Brickline Web. No third-party CSS. */
/* Tokens are injected by build.py as :root vars (see critical CSS). The fallbacks below keep the file usable on its own. */
:root{--paper:#F6F3EC;--ink:#1F2A3A;--muted-d:#AEB6C2;--tag-d:#B9C0CA;--accent:#C8553D;--panel:#E9B23B;--panel-2:#2F4858;
--serif:"Lora",Georgia,"Times New Roman",serif;--sans:"Lato",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--script:"Caveat","Comic Sans MS",cursive;
--wrap:90%;--ease-oq:cubic-bezier(.25,.46,.45,.94);--ease-iq:cubic-bezier(.55,.085,.68,.53);--ease-o4:cubic-bezier(.165,.84,.44,1);--ease-i4:cubic-bezier(.895,.03,.685,.22);--spring:cubic-bezier(.34,1.56,.64,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-family:var(--sans)}
.skip:focus{top:16px}
.wrap{width:var(--wrap);margin-inline:auto}

/* ---------- type ---------- */
.st{font-family:var(--serif);font-weight:400;font-size:3vw;line-height:1.65;width:72%;margin-inline:auto;text-align:center;text-wrap:balance}
.st.dk{color:var(--ink)}.st.lt{color:var(--paper)}
.bm{font-size:1.5rem;line-height:1.75}
.bxs{font-size:1rem;line-height:1.75}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:1.25rem;line-height:1.5;letter-spacing:4px;text-transform:uppercase;text-align:center}
.name{font-family:var(--sans);font-size:1.125rem;letter-spacing:3px;text-transform:uppercase;line-height:1.25}
.role{font-family:var(--sans);font-size:1rem;letter-spacing:.5px;line-height:1.5;margin-top:12px}

/* ---------- header ---------- */
.hdr{display:flex;align-items:center;justify-content:space-between;width:var(--wrap);margin:0 auto 48px;padding-top:40px;position:relative;z-index:5}
.mark{display:inline-flex;align-items:flex-end;font-family:var(--sans);font-weight:900;font-size:1.25rem;letter-spacing:.06em;line-height:1;color:var(--ink);padding:6px 0;white-space:nowrap}
.mark span{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .5s var(--ease-oq)}
.mark span.sp{width:.32em}
.mark:hover span,.mark:focus-visible span{animation:wave 1s var(--ease-oq) calc(var(--i)*45ms) both}
@keyframes wave{0%{transform:translateY(var(--y,0)) rotate(var(--r,0deg))}30%{transform:translateY(calc(var(--y,0px) - 9px)) rotate(calc(var(--r,0deg) - 8deg))}60%{transform:translateY(calc(var(--y,0px) + 4px)) rotate(calc(var(--r,0deg) + 5deg))}100%{transform:translateY(var(--y,0)) rotate(var(--r,0deg))}}
.tools{display:flex;align-items:center;gap:18px}
.menu-btn{position:relative;display:inline-grid;align-items:center;font-family:var(--serif);font-weight:500;font-size:1.125rem;line-height:1;padding:14px 4px;color:var(--ink)}
.menu-btn .w{grid-area:1/1;display:inline-flex;justify-content:center;white-space:nowrap}
.menu-btn .w i{font-style:normal;display:inline-block;transition:transform .3s var(--spring),opacity .2s;transition-delay:calc(var(--i)*40ms)}
.menu-btn .w.b i{transform:translateY(110%) rotate(25deg);opacity:0}
.menu-btn:hover .w.a i,.menu-btn:focus-visible .w.a i{transform:translateY(-110%) rotate(-25deg);opacity:0}
.menu-btn:hover .w.b i,.menu-btn:focus-visible .w.b i{transform:none;opacity:1}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.burst b{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:14px;border-radius:3px;background:currentColor;transform-origin:50% 0;transform:rotate(calc(var(--i)*45deg)) translateY(14px) scaleY(0);opacity:0}
.bursting .burst b{animation:burst .3s var(--ease-oq) forwards}
@keyframes burst{0%{transform:rotate(calc(var(--i)*45deg)) translateY(12px) scaleY(.2);opacity:1}60%{opacity:1}100%{transform:rotate(calc(var(--i)*45deg)) translateY(34px) scaleY(1);opacity:0}}
.menu-btn.bursting .w{opacity:0;transition:opacity .1s .2s}

/* ---------- overlay menu ---------- */
.menu{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--ink) 99%,transparent);background:var(--ink);display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s linear;color:var(--paper);height:100vh;height:100dvh}
.menu.show{display:flex}.menu.vis{opacity:1}
.menu.closing{transition:opacity .3s var(--ease-iq)}
.menu.fast{transition:opacity .2s linear}
.menu-top{position:absolute;inset:0 0 auto;width:var(--wrap);margin-inline:auto;padding-top:48px;display:flex;justify-content:flex-end;align-items:center;gap:20px}
.x-btn{width:60px;height:60px;display:grid;place-items:center;color:var(--paper);position:relative}
.x-btn i{position:absolute;width:34px;height:2.5px;background:currentColor;border-radius:2px;transform:rotate(45deg) scaleX(0);transition:transform .2s var(--ease-oq)}
.x-btn i+i{transform:rotate(-45deg) scaleX(0);transition-delay:.06s}
.menu.vis .x-btn i{transform:rotate(45deg) scaleX(1)}
.menu.vis .x-btn i+i{transform:rotate(-45deg) scaleX(1)}
.x-btn:hover{transform:rotate(90deg);transition:transform .3s var(--spring)}
.x-btn.spin{transform:rotate(180deg) scale(.6);opacity:0;transition:transform .2s var(--ease-iq),opacity .2s}
.menu-links{display:flex;flex-direction:column;align-items:center}
.menu-links a{display:flex;align-items:center;gap:16px;margin-bottom:16px;font-family:var(--serif);font-weight:500;font-size:3.75rem;line-height:1.5;color:var(--paper)}
.arrow{width:60px;height:20px;flex:none;overflow:visible}
.arrow path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a:hover>.arrow,a:focus-visible>.arrow,.lnk:hover .arrow{animation:spring .3s var(--ease-oq)}
@keyframes spring{0%{transform:translateX(0) scaleX(1)}35%{transform:translateX(10px) scaleX(1.18)}70%{transform:translateX(-3px) scaleX(.96)}100%{transform:none}}
@keyframes spring-r{0%{transform:scaleX(-1)}35%{transform:translateX(-10px) scaleX(-1.18)}70%{transform:translateX(3px) scaleX(-.96)}100%{transform:scaleX(-1)}}
html.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;height:300vh;height:calc(var(--svh,1vh)*300)}
@supports (height:100svh){.hero{height:300svh}}
.stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
@supports (height:100svh){.stage{height:100svh}}
.hero-art{flex:1;display:flex;align-items:center;justify-content:center;padding-bottom:calc(48px + 6vh);position:relative}
.hero-h{font-family:var(--serif);font-weight:700;font-size:7.4vw;line-height:1.16;letter-spacing:-.005em;color:var(--ink);display:inline-block;text-align:start;position:relative}
.hero-h .l{display:block;white-space:nowrap}
.slot{position:relative;display:inline-grid;vertical-align:baseline;isolation:isolate}
.slot>*{grid-area:1/1}
.drop{display:inline-flex;white-space:nowrap;position:relative;z-index:2}
.drop i{font-style:normal;display:inline-block;will-change:transform}
.rep{font-family:var(--script);font-weight:700;color:var(--accent);font-size:1.18em;line-height:.9;align-self:end;white-space:nowrap;transform:rotate(-4deg) translateY(.04em);transform-origin:0 100%;clip-path:inset(-20% 100% -20% 0);padding-inline-end:.08em;position:relative;z-index:1}
.scrib{position:absolute;left:-6%;top:8%;width:112%;height:90%;overflow:visible;pointer-events:none}
.scrib path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.splash{position:absolute;left:10%;top:-6%;width:80%;height:110%;overflow:visible;pointer-events:none;transform:scale(0);transform-origin:40% 60%;z-index:0}
.splash path,.splash circle{fill:var(--accent)}
html:not(.motion) .drop,html:not(.motion) .scrib{visibility:hidden}
html:not(.motion) .rep{clip-path:none}
html:not(.motion) .splash{transform:scale(1);opacity:.22}

/* ---------- dark zones ---------- */
.zone{position:relative}
html:not(.motion) .zone{background:var(--ink)}
.intro-copy{min-height:100vh;display:flex;align-items:center;justify-content:center}
.cloud{height:150vh;display:flex;align-items:center;justify-content:center}
.cloud-in{position:relative;width:90%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.logo{position:absolute;width:var(--w,220px);opacity:var(--o,1);color:var(--paper)}
.logo svg,.logo img{width:100%;height:auto}
.logo img{filter:brightness(0) invert(1)}
.cloud .st{position:relative;z-index:2}
html.motion [data-fade]{opacity:0;transition:opacity 1s var(--ease-i4)}
html.motion [data-fade].in{opacity:1;transition:opacity 1s var(--ease-o4)}

/* ---------- train ---------- */
.train-sec{height:425vh;position:relative}
.train-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden}
@supports (height:100svh){.train-stage{height:100svh}}
.train-sec .st{max-width:74%;width:auto;margin-top:10vh}
.train{display:flex;align-items:flex-end;flex:none;will-change:transform;padding-bottom:4px}
.train svg{flex:none;width:468px;height:auto;margin-inline-end:-2px}
.train svg.loco{width:500px}
.train text{font-family:var(--script);font-weight:700}
.wg-b{fill:var(--paper);stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.wg-l{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.wg-w{fill:var(--paper);stroke:var(--ink);stroke-width:5}
.wg-a{fill:var(--accent)}
.wg-t{fill:var(--ink)}
html:not(.motion) .train-sec{height:auto}
html:not(.motion) .train-stage{position:relative;height:auto;padding:12vh 0 6vh;gap:8vh}
html:not(.motion) .train{flex-wrap:wrap;justify-content:center;gap:12px 0;max-width:96%}
html:not(.motion) .train svg{width:240px}

/* ---------- services ---------- */
.svc{display:flex;flex-direction:column;align-items:center;margin-top:20px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:70%;margin:120px auto 0;place-items:baseline center}
.svc-item{display:flex;flex-direction:column;align-items:center;width:70%;margin-bottom:80px;text-align:center}
.ico{width:160px;height:107px;margin-bottom:32px;color:var(--ink)}
.ico svg{width:100%;height:100%;overflow:visible}
.ico path,.ico circle,.ico rect,.ico line,.ico polyline{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico .ac{stroke:var(--accent)}
html.motion .ico svg{transform:scale(.9);transition:transform .45s var(--ease-iq)}
html.motion .ico.in svg{transform:none;transition:transform .5s var(--spring) .25s}
html.motion .ico.in [pathLength]{stroke-dasharray:1;animation:icodraw .75s var(--ease-oq) calc(var(--d,0)*110ms) both}
@keyframes icodraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- process ---------- */
.proc-intro{height:50vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.proc-intro .st{width:75%}
.proc{display:flex;flex-direction:column;align-items:center;position:relative}
.pbar{position:sticky;top:0;z-index:20;width:100%;height:130px;background:var(--paper);box-shadow:0 5px 12px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center}
.pline{width:100%;height:6px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.steps{position:relative;width:90%;margin:auto 0;display:flex;justify-content:center;align-items:center}
.step{position:absolute;width:90%;text-align:center;opacity:0}
html:not(.motion) .pbar{position:relative;height:auto;padding:24px 0}
html:not(.motion) .pline{transform:none}
html:not(.motion) .steps{flex-direction:column;gap:16px}
html:not(.motion) .step{position:relative;opacity:1}
.stack{display:flex;flex-direction:column;align-items:center;width:100%;padding-top:400px;overflow:hidden}
.ph{background:#e9e8de;display:block;width:100%;height:auto}
.board{position:relative;width:90%;min-height:607px;margin:67px 0 154px;background-size:cover;background-position:50%;display:flex;flex-direction:column;align-items:center}
.board .bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.boards{position:relative;width:90%;height:100%}
.doc{position:absolute;box-shadow:0 30px 40px -11px rgba(0,0,0,.26)}
.doc.a{top:-92px;inset-inline-start:6%;width:min(621px,46%);box-shadow:0 20px 40px -11px rgba(0,0,0,.3)}
.doc.b{top:calc(607px - 380px);inset-inline-end:6%;width:min(657px,48%)}
.wide{display:flex;flex-direction:column;align-items:center;width:100%}
.wide img{width:100%;max-width:1384px}
.proto{display:flex;justify-content:center;align-items:flex-start;width:100%;margin-top:80px;padding-bottom:100px;overflow:hidden}
.phones{display:flex;align-items:center;margin-top:36px;padding-inline-end:70px}
.phones img{width:245px;min-width:220px;border-radius:14px}
.phones .p1{box-shadow:0 30px 40px -11px rgba(0,0,0,.26);position:relative;z-index:2}
.phones .p2{position:relative;top:108px;inset-inline-start:-25px;z-index:1;box-shadow:0 10px 15px -6px rgba(0,0,0,.26)}
.screen{min-width:600px;width:725px}
.screen img{border-radius:10px;box-shadow:0 30px 40px -11px rgba(0,0,0,.26)}
.pair{display:flex;justify-content:center;width:90%;margin-top:20px;gap:20px}
.pair img{width:calc(50% - 10px)}
.panel{display:flex;justify-content:center;align-items:flex-end;width:90%;margin-top:20px;background:var(--panel)}
.panel img{width:55%;margin-top:120px;border-radius:18px 18px 0 0}

/* ---------- social proof ---------- */
.social{display:flex;flex-direction:column;align-items:center;margin-top:220px}
.social .eyebrow{margin-bottom:80px}
.quotes{display:flex;justify-content:space-between;width:930px;max-width:92%;padding-bottom:70px}
.q{display:flex;flex-direction:column;max-width:400px}
.q .bm{margin-bottom:40px}
.q .lead{margin-bottom:24px}
.q .bxs{margin-bottom:40px}
.stag{margin-top:180px}
.rows{width:100%;overflow:hidden;margin-top:48px;padding:10px 0 156px;display:flex;flex-direction:column;align-items:center}
.row{display:flex;align-items:center;gap:32px;position:relative;will-change:transform}
.row+.row{top:16px;margin-top:16px;inset-inline-start:-427px}
.card{flex:none;width:483px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 30px 29px -23px rgba(0,0,0,.26);padding:18px 22px;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:center}
.card .av{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 1rem/1 var(--sans)}
.card b{font:700 .95rem/1.2 var(--sans)}
.card .stars{color:#E8A317;letter-spacing:2px;font-size:.85rem;font-family:var(--sans)}
.card p{grid-column:2;font-size:1.05rem;line-height:1.5}

/* ---------- work ---------- */
.work-intro{height:70vh;display:flex;justify-content:center;align-items:flex-end}
.work{margin-bottom:50vh}
.grid{display:grid;grid-template-columns:minmax(300px,627px) minmax(300px,627px);gap:5vw;justify-content:center;width:90%;margin:120px auto 0;padding:40px 0 78px}
.proj{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;box-shadow:0 39px 54px -28px rgba(0,0,0,.5);aspect-ratio:3/2;background:#2c3a4e;isolation:isolate}
.proj img{width:100%;height:100%;object-fit:cover}
.proj .ov{position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .2s var(--ease-oq)}
.proj .pd{position:absolute;width:85%;height:80%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;z-index:2;pointer-events:none}
.proj .tags{font-family:var(--sans);font-size:.875rem;line-height:1.5;color:var(--tag-d);opacity:0;transition:opacity .2s}
.proj .desc{color:var(--paper);font-size:1.5rem;line-height:1.65;opacity:0;transition:opacity .2s var(--ease-iq)}
.lnk{display:inline-flex;align-items:center;gap:15px;color:var(--paper);font-weight:500;font-size:1.25rem;line-height:1.5;transform:translateY(124px);transition:transform .2s var(--ease-oq);pointer-events:auto}
.lnk .arrow{width:42px}
.proj:hover .ov,.proj:focus-within .ov,.proj.open .ov{opacity:.92}
.proj:hover .tags,.proj:hover .desc,.proj:focus-within .tags,.proj:focus-within .desc,.proj.open .tags,.proj.open .desc{opacity:1}
.proj:hover .lnk,.proj:focus-within .lnk,.proj.open .lnk{transform:translateY(24px)}

/* ---------- CTA ---------- */
.cta{height:100vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;border:4px solid var(--ink);border-radius:16px;padding:16px 40px;font-family:var(--serif);font-size:2rem;line-height:1.65;color:var(--ink);background:var(--paper);box-shadow:0 24px 40px -20px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s;position:relative;z-index:2;cursor:pointer}
.btn:hover,.btn:focus-visible{transform:translateY(8px);box-shadow:0 20px 30px -20px rgba(0,0,0,.7)}
.cta .btn{margin-bottom:100px}
.mascot{width:600px;max-width:100%;height:340px;overflow:hidden;position:relative;z-index:0;pointer-events:none}
.mascot-in{transform:translateY(248px);transition:transform .5s var(--ease-iq)}
.btn:hover+.mascot .mascot-in,.btn:focus-visible+.mascot .mascot-in,.cta.up .mascot-in{transform:none;transition:transform .4s var(--ease-oq) .2s}
.mascot svg{width:100%;height:auto;overflow:visible}
.m-body{fill:var(--paper);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.m-ln{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.m-eye{fill:#fff;stroke:var(--ink);stroke-width:5}
.m-pu{fill:var(--ink)}
.m-ac{fill:var(--accent)}
.m-sway{transform-origin:300px 340px;animation:sway 3.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.m-hand{transform-origin:120px 250px;animation:hand 1.1s ease-in-out infinite}
@keyframes hand{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.m-tongue{transform-origin:300px 182px;animation:tongue .83s ease-in-out infinite}
@keyframes tongue{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.25) rotate(4deg)}}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--paper);padding:60px 0 40px;display:flex;flex-direction:column;align-items:center}
.ftr-row{display:flex;justify-content:space-between;align-items:flex-start;width:var(--wrap);margin-bottom:40px;gap:32px}
.ftr .mark{color:var(--paper);font-size:1.15rem}
.f-h{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.5;margin-bottom:24px;color:var(--paper)}
.f-l a,.f-l span{display:block;font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.25;color:var(--muted-d);margin-bottom:16px;transition:color .2s}
.f-l a:hover{color:var(--paper)}
.f-l bdi{unicode-bidi:isolate}
.copy{width:var(--wrap);margin-top:60px;font-family:var(--sans);font-size:14px;line-height:20px;color:var(--muted-d);text-align:start}
.bw-credit a:hover{opacity:1}

/* ---------- sub pages ---------- */
.page-top .hdr{margin-bottom:0}
.ph-hero{width:var(--wrap);margin:0 auto;padding:12vh 0 8vh;text-align:center}
.ph-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,8vw,8.5rem);line-height:1.1}
.ph-hero p{max-width:40ch;margin:28px auto 0}
.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:6vw;width:var(--wrap);max-width:1200px;margin:0 auto 18vh;align-items:start}
.form{display:grid;gap:28px}
.form .r2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld span{font-family:var(--sans);font-size:.8rem;letter-spacing:3px;text-transform:uppercase}
.fld input,.fld textarea{font:400 1.5rem/1.5 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:3px solid var(--ink);border-radius:0;padding:8px 2px;width:100%;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:150px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.03)}
.fld input:focus-visible,.fld textarea:focus-visible{box-shadow:0 3px 0 0 var(--accent)}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start;font-size:1.5rem;padding:12px 34px}
.form-msg{font-family:var(--sans);font-size:1rem;min-height:1.5em}
.details{border:4px solid var(--ink);border-radius:16px;padding:32px;box-shadow:0 24px 40px -20px rgba(0,0,0,.35)}
.details h2{font-weight:600;font-size:1.5rem;margin-bottom:20px}
.details p{margin-bottom:14px;font-size:1.125rem}
.details a{text-decoration:underline;text-underline-offset:3px}
.nf{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:var(--wrap);margin:0 auto;padding:6vh 0 14vh}
.nf .big{position:relative;font-family:var(--serif);font-weight:700;font-size:clamp(7rem,24vw,20rem);line-height:1}
.nf .big svg{position:absolute;left:-4%;top:30%;width:108%;height:50%;overflow:visible}
.nf .big path{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s var(--ease-oq) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.nf h1{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:400;margin:24px 0 12px}
.nf p{margin-bottom:48px}
.nf .btn{font-size:1.5rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- breakpoints (same steps as the studied site) ---------- */
@media (min-width:1920px){
 :root{--wrap:93%}
 .st{font-size:2.8vw;width:65%}
 .bm{font-size:1.9rem}.bxs{font-size:1.5rem}
 .mark{font-size:1.45rem}
 .menu-btn{font-size:1.35rem}
 .svc-grid{width:65%;margin-top:114px}.svc-item{margin-bottom:100px}
 .proc-intro{height:100vh}.pbar{height:150px}
 .quotes{width:1200px}.q{max-width:520px}
 .eyebrow{font-size:1.6rem}.name{font-size:1.5rem}.role{font-size:1.4rem;margin-top:24px}
 .grid{gap:3vw;margin-top:220px}
 .work{margin-bottom:30vh}.work-intro{height:80vh}
 .btn{font-size:2.125rem}
}
@media (max-width:991px){
 .hdr{padding-top:32px}
 .hero-h{font-size:12.6vw}
 .hero-art{align-items:flex-end;padding-bottom:22vh}
 .st{font-size:2.125rem}
 .svc-grid{width:90%}.svc-item{width:100%}
 .bm{line-height:1.5}
 .quotes{width:700px;padding-bottom:50px}.q{max-width:330px}
 .proc{margin-bottom:140px}.pbar{height:130px}
 .board{min-height:340px}.doc.b{top:auto;bottom:-260px}
 .lnk{font-size:1rem}.lnk .arrow{width:32px}
 .ftr-row{width:95%}
 .contact{grid-template-columns:1fr}
 .train svg{width:400px}.train svg.loco{width:430px}
 .screen{min-width:400px;width:520px}
}
@media (max-width:767px){
 .st{font-size:1.75rem;width:88%}
 .menu-links a{font-size:3rem}
 .menu-top{padding-top:32px}
 .svc-grid{margin-top:50px}.svc-item{margin-bottom:50px}.ico{width:130px;height:87px}
 .bm{font-size:1.125rem}
 .q .bm{font-size:1.25rem;margin-bottom:32px}
 .social{margin-top:160px}
 .quotes{flex-direction:column;align-items:center;width:100%;padding-bottom:0}
 .q{max-width:420px}.stag{margin-top:88px}
 .quotes.long .q{margin-bottom:88px}
 .rows{margin-top:77px;padding-bottom:52px}
 .card{width:386px}
 .grid{grid-template-columns:minmax(0,627px);row-gap:9vw;margin-top:50px}
 .work{margin-bottom:25vh}
 .pair{flex-direction:column}.pair img{width:100%}
 .pbar{height:90px}
 .ftr{padding:40px 0}
 .ftr-row{flex-direction:column;gap:8px}
 .f-h{margin-top:20px}
 .form .r2{grid-template-columns:1fr}
 .phones img{min-width:150px;width:150px}.phones .p2{top:48px}
 .screen{min-width:300px;width:400px}
}
@media (max-width:479px){
 .hdr{padding-top:16px}
 .mark{font-size:1.05rem}
 .hero-h{font-size:13.6vw}
 .hero-art{padding-bottom:16vh}
 .st{font-size:1.35rem;width:84%}
 .train-sec{height:320vh}
 .train svg{width:328px}.train svg.loco{width:350px}
 .svc-grid{grid-template-columns:1fr}
 .svc-item{width:80%}.ico{margin-bottom:10px}
 .bm{font-size:1.125rem;line-height:1.65}
 .q{max-width:290px}.q .bm{font-size:1.25rem}.stag{margin-top:44px}
 .name{font-size:1rem}.role{margin-top:8px}
 .quotes.long .q .lead{font-size:1.35rem}
 .card{width:300px;padding:14px 16px}
 .row+.row{inset-inline-start:-240px}
 .grid{row-gap:12vw;padding-top:0}
 .proj .desc{font-size:1.05rem;line-height:1.5}
 .proj .tags{font-size:.75rem}
 .lnk{font-size:.875rem}
 .proj{border-radius:6px}
 .menu-links a{font-size:2.3rem;gap:10px}.menu-links .arrow{width:40px}
 .menu-top{padding-top:24px}
 .pbar{height:120px}
 .step.bm{font-size:1.05rem}
 .board{min-height:200px;margin:0 0 120px}
 .doc.a{top:-60px;width:56%}.doc.b{bottom:-150px;width:60%}
 .stack{padding-top:260px}
 .proto{padding-bottom:60px}
 .phones{padding-inline-end:0;margin-top:0}.phones img{min-width:100px;width:100px;border-radius:8px}
 .screen{min-width:0;width:62%}
 .work-intro{height:90vh}
 .btn{font-size:1.3rem;font-weight:500;border-width:3px;box-shadow:0 14px 40px -20px rgba(0,0,0,.5);padding:14px 30px}
 .btn:hover{box-shadow:0 16px 30px -20px rgba(0,0,0,.7)}
 .mascot{height:250px}.mascot-in{transform:translateY(178px)}
 .details{padding:22px}
 .fld input,.fld textarea{font-size:1.2rem}
}


/* MPS: paint-drop mascot */
.m-body{fill:var(--panel)}.m-shine{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;opacity:.55}
.m-tongue{transform-origin:300px 272px}
/* MPS: long email address wrapping on small screens */
.f-l a,.details a,.details p{overflow-wrap:anywhere}.contact>*,.ftr-row>*{min-width:0}
@media (max-width:479px){.f-l a[href^="mailto:"],.details a[href^="mailto:"]{font-size:1rem}}