/* ===== FONTS — Proxima Nova (Typekit) + Mulish (Google Fonts fallback) =====
Typekit (icc1fgt) serves Proxima Nova on Jack's whitelisted domains.
On any non-whitelisted origin (file://, localhost), the typekit font files
return 400 — so we layer Mulish (the closest free Proxima Nova analog) underneath
so the page always renders with the right kind of clean modern sans.
======================================== */
@import url('https://use.typekit.net/icc1fgt.css');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--white:#FFFFFF;--ink:#0E0E0F;--ink2:#161618;--grey:#8A8A8E;--bone:#FFFFFF;--clay:#E0785C;
--accent:#168C76;--accent2:#45C99A;--accent-d:#094A42;
--line:rgba(14,14,15,.13);--linel:rgba(255,255,255,.16);--rad:16px;
--disp:'filson-pro','proxima-nova','Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--mono:'proxima-nova','Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--gut:clamp(20px,4.5vw,76px);
}
html{-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body{background:var(--bone);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.6;overflow-x:hidden}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{border:0;background:none;font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--white)}
.load{position:fixed;inset:0;z-index:9000;background:#0E0E0F;display:flex;
align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
.load.done{opacity:0;visibility:hidden;pointer-events:none}
.load__spin{width:34px;height:34px;border-radius:50%;border-top-color:var(--accent2);
animation:load-spin .7s linear infinite}
@keyframes load-spin{to{transform:rotate(360deg)}}
.logo path{fill:currentColor}
.nav{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
padding:16px var(--gut)}
.nav__l{display:flex;align-items:center;gap:16px}
.nav__l .logo{height:40px;width:auto}
.nav__tag{font-family:var(--mono);font-size:15px;letter-spacing:.13em;text-transform:uppercase;
color:var(--grey);line-height:1.5;border-left:1px solid currentColor;padding-left:16px;max-width:150px}
.nav__m{display:flex;gap:clamp(14px,2.2vw,30px);font-family:var(--mono);font-size:15px}
.nav__m a.is-here{color:var(--accent)}
.nav__cta{font-family:var(--mono);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
background:transparent;color:inherit;padding:10px 17px;border-radius:8px;
transition:transform .3s,background .3s,color .3s,border-color .3s}
.nav__cta:hover{transform:translateY(-2px);background:var(--accent2);color:var(--ink);border-color:transparent}
.nav__cta::after{content:"\2192";display:inline-block;margin-left:7px;animation:cta-nudge 4.2s ease-in-out infinite}
@keyframes cta-nudge{0%,66%,100%{transform:translateX(0)}78%{transform:translateX(5px)}88%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.nav__cta::after{animation:none}}
.nav.on-dark{color:var(--white)}
.nav__burger{display:none;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:38px;height:38px}
.nav__burger span{display:block;width:24px;height:2px;background:currentColor}
@media (max-width:880px){.nav__tag{display:none}}
@media (max-width:720px){.nav__m{display:none}.nav__cta{display:none}.nav__burger{display:flex}}
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;
gap:clamp(2px,1vh,10px);padding:clamp(86px,15vh,130px) var(--gut);
background:var(--accent-d);
clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.76,0,.24,1);visibility:hidden}
.menu.open{clip-path:inset(0 0 0% 0);visibility:visible}
.menu a{font-family:var(--disp);font-weight:800;font-size:clamp(40px,11vw,82px);line-height:1.08;
letter-spacing:-.045em;color:var(--white);width:max-content;
opacity:0;transform:translateY(46px);transition:opacity .5s ease,transform .55s cubic-bezier(.5,0,.2,1)}
.menu.open a{opacity:1;transform:translateY(0)}
.menu.open a:nth-of-type(1){transition-delay:.16s}.menu.open a:nth-of-type(2){transition-delay:.22s}
.menu.open a:nth-of-type(3){transition-delay:.28s}.menu.open a:nth-of-type(4){transition-delay:.34s}
.menu.open a:nth-of-type(5){transition-delay:.4s}.menu.open a:nth-of-type(6){transition-delay:.46s}
.menu.open a:nth-of-type(7){transition-delay:.52s}
.menu.open a:nth-of-type(8){transition-delay:.58s}
.menu a:hover{opacity:.65}
.menu__top{position:absolute;top:18px;left:var(--gut);right:var(--gut);display:flex;align-items:center;justify-content:space-between}
.menu__logo{height:42px;width:auto;color:var(--white);display:block}
.menu__x{font-family:var(--mono);font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--white)}
.menu__foot{margin-top:clamp(22px,4vh,42px);font-family:var(--mono);font-size:15px;
letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.dark{background:var(--ink);color:var(--white)}
.sec{padding:clamp(96px,14vh,184px) var(--gut);position:relative}
.wrap{max-width:1340px;margin:0 auto}
.kick{display:block;font-family:var(--mono);font-size:15px;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);margin-bottom:clamp(20px,3vh,36px)}
.kick .n,.kick .fill,.kick span:last-child{display:none}
.big-h{font-family:var(--disp);font-weight:400;font-size:clamp(32px,5.5vw,72px);line-height:1.05;letter-spacing:-.04em}
.hl{color:var(--accent)}
.dark .hl{color:var(--accent2)}
.lede{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.4vw,34px);line-height:1.3;
letter-spacing:-.015em;max-width:30ch;margin-top:26px}
.body{max-width:62ch;margin-top:24px}
.body p{font-size:clamp(15px,1.1vw,16px);line-height:1.78}
.btn{font-family:var(--mono);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:15px 24px;
border-radius:9px;display:inline-flex;align-items:center;gap:8px;transition:transform .3s,background .3s,color .3s;cursor:pointer}
.btn--solid{background:var(--accent2);color:var(--ink)}
.btn--solid:hover{transform:translateY(-3px)}
.btn--ghost{}
.btn--ghost:hover{transform:translateY(-3px)}
/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;padding:clamp(122px,17vh,210px) var(--gut) 84px;position:relative}
.hero>*{position:relative;z-index:1}
.hero__lava{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lava{position:absolute;top:0;left:0;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.lava--a{width:clamp(220px,30vw,440px);aspect-ratio:1;background:rgba(9,74,66,.5)}
.lava--b{width:clamp(200px,26vw,390px);aspect-ratio:1;background:rgba(69,201,154,.46)}
.lava--c{width:clamp(150px,18vw,270px);aspect-ratio:1;background:rgba(255,92,182,.42)}
.hero__eyebrow{font-family:var(--mono);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.hero__title{font-family:var(--disp);font-weight:400;
margin-top:18px;font-size:clamp(40px,7vw,96px);line-height:1.05;letter-spacing:-.04em}
.hero__title .ln{display:block;padding-bottom:.06em}
.hero__title .ln>span{display:block}
.uline{display:block;height:7px;background:var(--accent2);
width:min(280px,52vw);transform:scaleX(0);border-radius:4px;margin:14px auto 0}
.hero__svc{margin:22px auto 0;font-family:var(--mono);font-size:15px;
letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--ink);
display:flex;gap:clamp(10px,1.4vw,16px);align-items:center;justify-content:center;flex-wrap:wrap}
.hero__svc i{font-style:normal;color:var(--accent);font-size:1.1em;line-height:0}
.hero__sub{margin:20px auto 0;font-size:clamp(15px,1.2vw,17px);max-width:56ch;line-height:1.7}
.hero__sub b{color:var(--accent-d);font-weight:500}
.hero__cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero__cue{margin-top:clamp(30px,6vh,60px);font-family:var(--mono);font-size:15px;
letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
/* intro */
.intro__lede{font-family:var(--disp);font-weight:500;
max-width:30ch;font-size:clamp(24px,3.4vw,52px);line-height:1.2;letter-spacing:-.02em}
.intro__lede em{font-style:normal;color:var(--accent-d)}
.intro__body{max-width:60ch;margin-top:28px;font-size:clamp(15px,1.15vw,16.5px);line-height:1.78;color:var(--grey)}
/* service blocks */
.svc__top{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(38px,6vh,76px)}
.svc__lede{font-family:var(--disp);font-weight:500;
max-width:34ch;font-size:clamp(24px,2.8vw,36px);line-height:1.18;letter-spacing:-.02em}
.svc__grid{display:grid;gap:clamp(30px,5vw,80px);grid-template-columns:1fr;align-items:start;margin-top:clamp(40px,6vh,74px)}
@media (min-width:880px){.svc__grid{grid-template-columns:1.04fr .96fr}}
.svc__body p{font-size:clamp(15px,1.15vw,17px);line-height:1.78;margin-bottom:18px}
.svc__for{font-family:var(--mono);font-size:15px;line-height:1.65;color:var(--grey);
border-left:2px solid var(--accent);padding-left:16px;margin-top:8px}
.svc__for b{font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-size:15px;display:block;margin-bottom:4px}
.svc__cta{margin-top:clamp(18px,2.6vh,30px)}
.svc__list{list-style:none}
.svc__list li{font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.55vw,22px);letter-spacing:-.02em;
padding:17px 6px 17px 42px;border-top:1px solid var(--line);position:relative}
.svc__list li:last-child{border-bottom:1px solid var(--line)}
.svc__list li::before{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
width:20px;height:20px;border-radius:6px;background:var(--accent-d)}
.svc__list li::after{content:'✓';position:absolute;left:7px;top:50%;transform:translateY(-50%);
font-family:var(--mono);font-size:15px;color:#fff}
.dark .svc__list li,.dark .svc__list li:last-child{border-color:var(--linel)}
.dark .svc__for{color:rgba(255,255,255,.6)}
.svc__media{position:relative;aspect-ratio:16/9;border-radius:var(--rad);overflow:hidden;
margin-bottom:clamp(38px,6vh,74px);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:13px;text-align:center;padding:34px;
background:rgba(9,74,66,.13),var(--ink2);}
.svc__media img,.svc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc__media__tag{position:absolute;top:15px;left:15px;font-family:var(--mono);font-size:15px;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-radius:5px;padding:4px 9px}
.svc__media__ico{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--accent-d);}
.svc__media__ico svg{width:27px;height:27px}
.svc__media__label{font-family:var(--disp);font-weight:700;
color:#fff;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.svc__media__hint{font-family:var(--mono);font-size:15px;line-height:1.6;color:rgba(255,255,255,.62);max-width:46ch}
/* process */
.stages{border-bottom:1px solid var(--linel)}
.pstep{display:grid;grid-template-columns:70px 1fr auto;gap:clamp(16px,3vw,46px);align-items:start;
padding:clamp(20px,3.2vh,36px) 4px;border-top:1px solid var(--linel);position:relative;transition:padding-left .4s}
.pstep::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .4s}
.pstep:hover{padding-left:20px}.pstep:hover::before{width:3px}
.pstep__n{font-family:var(--mono);font-size:15px;color:var(--accent);padding-top:5px}
.pstep__nm{font-family:var(--disp);font-weight:800;margin-bottom:10px;font-size:clamp(24px,2.8vw,36px);line-height:1.18;letter-spacing:-.02em}
.pstep__d{font-family:var(--mono);font-size:15px;line-height:1.65;color:var(--grey);max-width:58ch}
.pstep__t{font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;border-radius:6px;padding:7px 12px;white-space:nowrap;margin-top:3px}
@media (max-width:620px){.pstep{grid-template-columns:46px 1fr}.pstep__t{grid-column:2/3;justify-self:start}}
/* faq */
.faq{margin-top:clamp(30px,5vh,56px);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;padding:clamp(20px,3vh,30px) 0;
display:flex;justify-content:space-between;gap:24px;align-items:center;
font-family:var(--disp);font-weight:700;font-size:clamp(18px,2.1vw,28px);letter-spacing:-.02em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'+';font-family:var(--mono);font-size:26px;color:var(--accent);
transition:transform .3s;line-height:1}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 0 clamp(22px,3vh,32px);max-width:74ch;font-family:var(--mono);
font-size:15px;line-height:1.76;color:var(--grey)}
/* cta */
.cta{text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) contrast(1.05) saturate(1.04)}
.cta__veil{position:absolute;inset:0;background:rgba(14,14,15,.42)}
.cta__c{position:relative;z-index:2}
.cta h2{font-family:var(--disp);font-weight:800;font-size:clamp(60px,13vw,212px);line-height:1.04;letter-spacing:-.05em}
.cta .ln{display:block;overflow:hidden;padding-bottom:.1em}
.cta .sub{font-family:var(--mono);font-size:clamp(17px,1.3vw,20px);line-height:1.7;color:rgba(255,255,255,.82);margin:26px auto 30px;max-width:54ch}
.foot{background:#08080A;color:var(--grey);padding:38px var(--gut);display:flex;justify-content:space-between;
flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* Floating WhatsApp button */
.wapp{position:fixed;bottom:24px;right:24px;z-index:60;
width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:#25D366;color:#fff;transition:transform .25s ease,background .25s ease}
.wapp:hover{transform:scale(1.08);background:#1FB955}
.wapp svg{width:30px;height:30px;fill:currentColor;display:block}
@media (max-width:560px){.wapp{bottom:18px;right:18px;width:54px;height:54px}.wapp svg{width:26px;height:26px}}
.foot a:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.uline{transform:scaleX(1)}.hero__lava{display:none}}
/* footer links */
.foot__links{display:flex;gap:18px;flex-wrap:wrap}
.foot__links a{transition:color .2s}
/* work grid (shared: work + sector pages) */
.work__g{margin-top:clamp(34px,5vh,60px);display:grid;gap:20px}
@media (min-width:820px){.work__g{grid-template-columns:1fr 1fr}}
.shot{display:block}
.shot__img{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--ink2);border-radius:var(--rad)}
.shot__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,0,1)}
.shot:hover .shot__img img{transform:scale(1.05)}
.shot__rm{position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom}
.shot__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 2px 0}
.shot__nm{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.8vw,36px);line-height:1.18;letter-spacing:-.02em}
.shot__d{font-family:var(--mono);font-size:15px;color:var(--grey);line-height:1.55;margin-top:4px}
.shot__x{font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
/* case study pages */
.case-hero{position:relative;min-height:90svh;display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(120px,19vh,210px) var(--gut) clamp(48px,8vh,86px);overflow:hidden;color:var(--white)}
.case-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero__veil{position:absolute;inset:0;background:rgba(14,14,15,.42)}
.case-hero>.wrap{position:relative;z-index:2}
.case-hero__eye{font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.case-hero h1{font-family:var(--disp);font-weight:400;margin-top:12px;font-size:clamp(40px,7vw,96px);line-height:1.05;letter-spacing:-.04em}
.case-hero__tag{font-family:var(--disp);font-weight:500;font-size:clamp(18px,2.3vw,32px);letter-spacing:-.02em;max-width:26ch;margin-top:18px;color:rgba(255,255,255,.9)}
.case-meta{display:flex;flex-wrap:wrap;gap:clamp(22px,5vw,68px);margin-top:clamp(28px,4vh,46px);padding-top:26px;border-top:1px solid var(--linel)}
.case-meta dt{font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.case-meta dd{font-family:var(--mono);font-size:15px;margin-top:7px}
.case-fig{margin-top:clamp(36px,5.2vh,68px);border-radius:var(--rad);overflow:hidden;background:#f3f3f4}
.case-fig img,.case-fig video{width:100%;display:block}
.case-grid{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(36px,5.2vh,68px)}
@media (min-width:740px){.case-grid--2{grid-template-columns:1fr 1fr}}
.case-grid img{width:100%;display:block;border-radius:var(--rad);background:#f3f3f4}
.shot__img video{width:100%;height:100%;object-fit:cover;display:block}
.case-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:clamp(22px,3vh,38px)}
.case-next__l{font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.case-next__nm{font-family:var(--disp);font-weight:400;margin-top:10px;display:block;transition:opacity .3s;font-size:clamp(24px,2.8vw,36px);line-height:1.18;letter-spacing:-.02em}
.case-next__nm:hover{background:var(--accent-d);-webkit-background-clip:text;background-clip:text;color:transparent}
/* brand image rows (case studies) — natural aspect, no crop */
.case-duo,.case-trio{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(36px,5.2vh,68px)}
.case-duo{grid-template-columns:1fr 1fr}
.case-trio{grid-template-columns:repeat(3,1fr)}
.case-duo img,.case-trio img{width:100%;height:auto;display:block;border-radius:var(--rad);background:#f3f3f4}
@media (max-width:560px){.case-duo{grid-template-columns:1fr}.case-trio{grid-template-columns:1fr 1fr}}
/* campaign landing pages */
.lphero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
padding:clamp(120px,16vh,180px) var(--gut) clamp(74px,11vh,128px)}
.lphero__glow{position:absolute;top:-25%;left:-12%;width:62%;height:95%;pointer-events:none;
background:rgba(9,74,66,.42)}
.lphero__glow2{position:absolute;bottom:-30%;right:-8%;width:58%;height:95%;pointer-events:none;
background:rgba(69,201,154,.4)}
.lphero__grid{position:relative;z-index:2;max-width:1340px;margin:0 auto;display:grid;
gap:clamp(34px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.lphero__grid{grid-template-columns:1.04fr .96fr}}
.lphero__inner{position:relative;z-index:2;max-width:1060px;margin:0 auto;width:100%;
display:flex;flex-direction:column;align-items:center;text-align:center}
.lphero__inner .lphero__sub{max-width:50ch}
.lphero__cta{margin-top:30px}
.lphero__eye{font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.lphero h1{font-family:var(--disp);font-weight:400;
margin-top:18px;font-size:clamp(40px,7vw,96px);line-height:1.05;letter-spacing:-.04em}
.lphero__sub{font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.68;color:rgba(255,255,255,.78);margin-top:20px;max-width:46ch}
.lphero__ticks{list-style:none;margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:11px 26px}
.lphero__ticks li{font-family:var(--mono);font-size:15px;padding-left:30px;position:relative;color:rgba(255,255,255,.92);line-height:1.55}
.lphero__ticks li::before{content:"";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:5px;
background:var(--accent-d)}
.lphero__ticks li::after{content:"\2713";position:absolute;left:5px;top:0;font-size:15px;color:#fff;font-family:var(--mono)}
.lphero__trust{margin-top:26px;font-family:var(--mono);font-size:15px;letter-spacing:.13em;
text-transform:uppercase;color:rgba(255,255,255,.5)}
.lpcard{background:#fff;color:var(--ink);border-radius:18px;padding:clamp(26px,3.2vw,40px);}
.lpcard__eye{font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lpcard h2{font-family:var(--disp);font-weight:800;font-size:clamp(23px,2.5vw,32px);letter-spacing:-.035em;
margin:9px 0 10px;line-height:1.04}
.lpcard p{font-family:var(--mono);font-size:15px;line-height:1.66;color:var(--grey)}
.lpform{display:grid;gap:13px;margin-top:20px}
.lpform label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:15px;
letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
.lpform input{font-family:var(--mono);font-size:15px;width:100%;background:#fff;border-radius:9px;padding:13px 14px;color:var(--ink);transition:border-color .25s}
.lpform input:focus{outline:none;border-color:var(--accent)}
.lpform button{width:100%;justify-content:center;margin-top:6px;border:0;cursor:pointer}
.lpform__micro{font-family:var(--mono);font-size:15px;color:var(--grey);text-align:center;margin:2px 0 0}
.lp-engine{display:grid;gap:18px;margin-top:clamp(30px,5vh,52px)}
@media (min-width:820px){.lp-engine{grid-template-columns:repeat(3,1fr)}}
.lp-ecard{border-radius:var(--rad);padding:clamp(24px,2.8vw,34px)}
.lp-ecard__n{font-family:var(--mono);font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.lp-ecard h3{font-family:var(--disp);font-weight:800;margin:11px 0 9px;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.lp-ecard p{font-family:var(--mono);font-size:15px;line-height:1.66;color:var(--grey)}
/* engine cards — animated icons */
.lp-ecard__ico{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);margin-bottom:20px}
.lp-ecard__ico .ei{width:100%;height:100%;display:block}
.ei *{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ei--spark path{fill:var(--accent);stroke:none;transform-box:fill-box;transform-origin:center;
animation:ei-spin 20s linear infinite}
@keyframes ei-spin{to{transform:rotate(360deg)}}
.ei--web circle{fill:var(--accent);stroke:none}
.ei--web .ei-w1,.ei--web .ei-w2,.ei--web .ei-w3{transform-box:fill-box;transform-origin:left center;
animation:ei-line 3s ease-in-out infinite}
.ei--web .ei-w2{animation-delay:.3s}
.ei--web .ei-w3{animation-delay:.6s}
@keyframes ei-line{0%,70%,100%{transform:scaleX(1)}32%,48%{transform:scaleX(.22)}}
.ei--pulse .ei-core{fill:var(--accent);stroke:none}
.ei--pulse .ei-ring{transform-box:fill-box;transform-origin:center;animation:ei-pulse 3s ease-out infinite}
.ei--pulse .ei-ring2{animation-delay:1.5s}
@keyframes ei-pulse{0%{transform:scale(.3);opacity:.9}80%,100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.ei *{animation:none!important}}
.lp-points{display:grid;gap:16px;margin-top:clamp(28px,4.5vh,52px)}
@media (min-width:780px){.lp-points{grid-template-columns:1fr 1fr}}
.lp-point{border-radius:var(--rad);padding:clamp(22px,3vw,34px)}
.lp-point__n{font-family:var(--mono);font-size:15px;color:var(--accent);letter-spacing:.12em}
.lp-point h3{font-family:var(--disp);font-weight:800;margin:11px 0 8px;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.lp-point p{font-family:var(--mono);font-size:15px;line-height:1.66;color:rgba(255,255,255,.7)}
.lpcta{max-width:560px;margin:clamp(28px,5vh,50px) auto 0}
/* centred section intros — no more text-left / empty-right */
.big-h,.kick{text-align:center}
.lede,.body,.intro__lede,.intro__body,.svc__lede{margin-left:auto;margin-right:auto;text-align:center}
/* ===== sector landing pages — proof / process / testimonials ===== */
/* centred action rows — fixes left-aligned buttons under centred copy */
.lp-actions{display:flex;justify-content:center;align-items:center;gap:14px;
flex-wrap:wrap;margin-top:clamp(28px,4.5vh,48px)}
/* selected work — project cards + placeholder slot */
.lp-proof{display:grid;gap:20px;margin-top:clamp(34px,5vh,58px);grid-template-columns:1fr}
@media (min-width:760px){.lp-proof{grid-template-columns:repeat(3,1fr)}}
.lp-pcard{display:flex;flex-direction:column;border-radius:var(--rad);overflow:hidden;background:#fff;
transition:transform .4s,border-color .4s}
.lp-pcard:hover{transform:translateY(-6px);border-color:var(--accent);}
.lp-pcard__img{aspect-ratio:4/3;overflow:hidden;background:var(--ink2)}
.lp-pcard__img img{width:100%;height:100%;object-fit:cover;
transition:transform .8s cubic-bezier(.2,.7,0,1)}
.lp-pcard:hover .lp-pcard__img img{transform:scale(1.06)}
.lp-pcard__b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.lp-pcard__tag{font-family:var(--mono);font-size:15px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent)}
.lp-pcard__nm{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.lp-pcard__d{font-family:var(--mono);font-size:15px;line-height:1.6;color:var(--grey)}
.lp-pcard__go{font-family:var(--mono);font-size:15px;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent);margin-top:auto;padding-top:8px}
.lp-pcard--ph{align-items:center;justify-content:center;text-align:center;
padding:34px 26px;min-height:248px;
background:rgba(9,74,66,.05)}
.lp-pcard--ph .lp-pcard__ico{width:54px;height:54px;border-radius:50%;display:flex;
align-items:center;justify-content:center;margin-bottom:15px;
background:var(--accent-d);}
.lp-pcard--ph .lp-pcard__ico svg{width:24px;height:24px}
.lp-pcard--ph h3{font-family:var(--disp);font-weight:800;
margin-bottom:8px;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.lp-pcard--ph p{font-family:var(--mono);font-size:15px;line-height:1.6;
color:var(--grey);max-width:30ch}
/* process — what happens after you enquire */
.lp-steps{display:grid;gap:16px;margin-top:clamp(32px,5vh,58px);grid-template-columns:1fr}
@media (min-width:640px){.lp-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.lp-steps{grid-template-columns:repeat(4,1fr)}}
.lp-step{border-radius:var(--rad);
padding:clamp(22px,2.4vw,30px);position:relative;overflow:hidden;
transition:transform .4s,border-color .4s}
.lp-step:hover{transform:translateY(-5px);border-color:var(--accent)}
.lp-step__n{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.05em;
line-height:1;background:var(--accent-d);
-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-step h3{font-family:var(--disp);font-weight:800;
margin:13px 0 8px;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.lp-step p{font-family:var(--mono);font-size:15px;line-height:1.62;color:rgba(255,255,255,.7)}
.pinsteps__bar{margin:clamp(30px,4.5vh,52px) auto 0;width:min(440px,72vw);height:3px;
background:rgba(255,255,255,.14);border-radius:3px;position:relative;overflow:hidden}
.pinsteps__bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
background:var(--accent-d)}
/* testimonials — placeholder quote cards */
.lp-quotes{display:grid;gap:18px;margin-top:clamp(32px,5vh,58px);grid-template-columns:1fr}
@media (min-width:820px){.lp-quotes{grid-template-columns:repeat(3,1fr)}}
.lp-quote{position:relative;border-radius:var(--rad);
padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:15px;
background:rgba(9,74,66,.04),#fff}
.lp-quote__tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:15px;
letter-spacing:.13em;text-transform:uppercase;color:var(--accent);border-radius:5px;padding:3px 7px}
.lp-quote__stars{color:var(--clay);font-size:15px;letter-spacing:3px}
.lp-quote__t{font-family:var(--disp);font-weight:500;font-size:clamp(15px,1.45vw,19px);
line-height:1.42;letter-spacing:-.015em;color:var(--ink)}
.lp-quote__by{font-family:var(--mono);font-size:15px;color:var(--grey);margin-top:auto}
.lp-quote__by b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:2px}
/* dark-section FAQ variant */
.dark .faq{border-top-color:var(--linel)}
.dark .faq__item{border-bottom-color:var(--linel)}
.dark .faq__a{color:rgba(255,255,255,.6)}
/* sector section headers — two-column editorial (heading left, lede + CTA right) */
.lp-head{display:grid;gap:22px;margin-bottom:clamp(32px,4.8vh,58px)}
@media (min-width:900px){.lp-head{grid-template-columns:1.08fr .92fr;gap:26px 58px;align-items:end}}
.lp-head__k{display:block;font-family:var(--mono);font-size:15px;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.lp-head__h{font-family:var(--disp);font-weight:800;font-size:clamp(32px,5.5vw,72px);line-height:1.05;letter-spacing:-.04em}
.lp-head__r{display:flex;flex-direction:column;gap:15px}
.lp-head__r p{font-family:var(--mono);font-size:15px;line-height:1.7;color:var(--grey)}
.dark .lp-head__r p{color:rgba(255,255,255,.66)}
.lp-head__r em{font-style:italic;color:var(--ink)}
.dark .lp-head__r em{color:#fff}
.lp-head__cta{margin-top:6px}
/* problem section — pain points */
.lp-pains{display:grid;gap:16px;margin-top:clamp(24px,3.6vh,42px);grid-template-columns:1fr}
@media (min-width:720px){.lp-pains{grid-template-columns:repeat(3,1fr)}}
.lp-pain{border-radius:var(--rad);
padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:13px;
transition:transform .4s,border-color .4s}
.lp-pain:hover{transform:translateY(-4px);border-color:var(--accent)}
.lp-pain__ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
justify-content:center;background:rgba(9,74,66,.12);}
.lp-pain__ico svg{width:19px;height:19px}
.lp-pain p{font-family:var(--mono);font-size:15px;line-height:1.6;color:rgba(255,255,255,.78)}
/* hero background video */
.lphero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
z-index:0;opacity:.55}
.lphero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
background:rgba(14,14,15,.86)}
.lphero__glow,.lphero__glow2{z-index:1}
/* final CTA — centred */
.lp-claimhead{text-align:center;max-width:640px;margin:0 auto}
.lp-claimhead .lp-head__k{margin-bottom:14px}
.lp-claimhead .lp-head__h{margin-bottom:15px}
.lp-claimhead p{font-family:var(--mono);font-size:15px;line-height:1.7;
color:rgba(255,255,255,.68);margin:0 auto;max-width:52ch}
/* footer with feature image */
.foot--img{position:relative;overflow:hidden;
padding-top:clamp(58px,9vh,104px);padding-bottom:clamp(58px,9vh,104px)}
.foot--img::before{content:"";position:absolute;inset:0;z-index:0;
background:url("discovery-still.jpg") center 22% / cover no-repeat}
.foot--img::after{content:"";position:absolute;inset:0;z-index:1;
background:rgba(8,8,10,.74)}
.foot--img>*{position:relative;z-index:2}
/* final CTA — video background */
#claim{overflow:hidden}
#claim .wrap{position:relative;z-index:2}
/* recruitment showcase — scroll-on-hover design panels */
.lp-showgrid{display:grid;gap:22px;margin-top:clamp(34px,5vh,58px);grid-template-columns:1fr}
@media (min-width:760px){.lp-showgrid{grid-template-columns:repeat(3,1fr)}}
.lp-shot{border-radius:14px;overflow:hidden;background:#fff;
transition:transform .4s}
.lp-shot:hover{transform:translateY(-6px);}
.lp-shot__bar{display:flex;gap:7px;align-items:center;padding:12px 15px;background:#15151a}
.lp-shot__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.lp-shot__bar i:first-child{background:var(--accent)}
.lp-shot__win{aspect-ratio:4/5;background-size:100% auto;background-position:50% 0%;
background-repeat:no-repeat;background-color:var(--ink2);transition:background-position 5s ease}
.lp-shot:hover .lp-shot__win{background-position:50% 100%}
.lp-shot__cap{padding:15px 17px 18px;font-family:var(--mono);font-size:15px;color:var(--grey);line-height:1.55}
.lp-shot__cap b{display:block;font-family:var(--disp);font-weight:800;font-size:21px;
letter-spacing:-.025em;color:var(--ink);margin-bottom:3px}
/* ===== READABILITY — larger body & nav text + logo (override pass) =====
Re-sizes body copy site-wide. To revert, delete this whole block. */
.nav__tag{display:none}
.nav__l .logo{height:46px}
.nav__m{font-size:15px}
.body p{font-size:clamp(16px,1.2vw,17.5px);line-height:1.78}
.intro__body{font-size:clamp(16.5px,1.35vw,19px);line-height:1.75}
.svc__body p{font-size:clamp(16px,1.25vw,17.5px);line-height:1.8}
.faq__a{font-size:16.5px;line-height:1.74}
.hero__sub{font-size:clamp(16px,1.3vw,18px);line-height:1.66}
.hero__svc{font-size:clamp(15px,1.2vw,16px)}
.lphero__sub{font-size:clamp(16.5px,1.45vw,19.5px);line-height:1.62}
.lphero__ticks li{font-size:15px}
.cta .sub{font-size:17px;line-height:1.65}
.pstep__d{font-size:15.5px;line-height:1.66}
.faq__a{font-size:16.5px}
.lp-head__r p{font-size:16.5px;line-height:1.68}
.lp-ecard p,.lp-point p,.lp-pain p{font-size:16px;line-height:1.62}
.lp-pcard__d,.lp-step p,.lp-pcard--ph p{font-size:15.5px;line-height:1.6}
.lpcard p,.lp-claimhead p{font-size:15.5px;line-height:1.66}
.lpform input{font-size:16px}
.lp-quote__t{font-size:clamp(20px,2vw,26px)}
.svc__for{font-size:clamp(15px,1.15vw,16.5px)}
.svc__media__hint{font-size:15px}
.shot__d{font-size:15px}
.case-meta dd{font-size:15.5px}
.foot{font-size:12px}
/* about — team photo placeholders + scroll parallax */
.teamgrid{display:grid;gap:clamp(20px,3vw,38px);margin-top:clamp(36px,5.5vh,66px);grid-template-columns:1fr;
max-width:680px;margin-left:auto;margin-right:auto}
@media (min-width:680px){.teamgrid{grid-template-columns:1fr 1fr;align-items:start}
.teamgrid figure:nth-child(2){margin-top:clamp(30px,6vw,74px)}}
.teamph{position:relative;aspect-ratio:4/5;border-radius:var(--rad);overflow:hidden;
background:rgba(9,74,66,.06);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;text-align:center;padding:34px;will-change:transform}
.teamph__tag{font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);border-radius:5px;padding:4px 9px}
.teamph__ico{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--accent-d);}
.teamph__ico svg{width:26px;height:26px}
.teamph__label{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.teamph__hint{font-family:var(--mono);font-size:15px;line-height:1.6;color:var(--grey);max-width:26ch}
/* team — real photos */
.teamph--photo{border:none;padding:0;background:#0E0E0F;display:block}
.teamph--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .8s cubic-bezier(.22,1,.36,1)}
.teamph--photo:hover img{transform:scale(1.045)}
.teamph__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:left;
display:flex;flex-direction:column;gap:3px;padding:48px 22px 20px;
background:rgba(10,9,12,.86)}
.teamph__cap b{font-family:var(--disp);font-weight:800;
color:#fff;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.teamph__cap span{font-family:var(--mono);font-size:15px;letter-spacing:.15em;
text-transform:uppercase;color:var(--accent)}
.svc__media--photo{border:none;padding:0;background:#0E0E0F;margin-bottom:0}
.svc__media--photo .svc__media__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;flex-direction:column;gap:3px;padding:44px 18px 16px;
background:rgba(10,9,12,.86)}
.svc__media--photo .svc__media__cap b{font-family:var(--disp);font-weight:700;
font-size:clamp(17px,1.8vw,21px);letter-spacing:-.02em;color:#fff}
.svc__media--photo .svc__media__cap span{font-family:var(--mono);font-size:15px;
letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.svc__media--photo img{filter:grayscale(1) contrast(1.02)}
/* brand-work band — used on About + sector pages */
.bwband{padding:clamp(48px,8vh,94px) 0;overflow:hidden}
.bw-marq{overflow:hidden;margin-top:clamp(22px,3.5vh,38px);-webkit-mask-image:#000;mask-image:#000}
.bw-marq__track{display:flex;width:max-content;animation:bw-marq 78s linear infinite}
.bw-marq:hover .bw-marq__track{animation-play-state:paused}
@keyframes bw-marq{to{transform:translateX(-50%)}}
.bw-pic{flex:none;width:clamp(176px,21vw,266px);margin-right:16px;border-radius:var(--rad);overflow:hidden;background:#15131a}
.bw-pic img{width:100%;display:block;aspect-ratio:1;object-fit:cover}
/* recruitment — social content marquee */
.lp-marquee{margin-top:clamp(30px,5vh,54px);overflow:hidden;
-webkit-mask-image:#000;
mask-image:#000}
.lp-marquee__track{display:flex;width:max-content;animation:lp-marq 95s linear infinite}
.lp-marquee:hover .lp-marquee__track{animation-play-state:paused}
.lp-post{flex:none;width:clamp(206px,22vw,258px);margin-right:18px;background:#fff;border-radius:15px;overflow:hidden;}
.lp-post__bar{display:flex;align-items:center;gap:8px;padding:10px 11px}
.lp-post__av{width:27px;height:27px;border-radius:50%;flex:none;
background:var(--accent-d)}
.lp-post__nm{flex:1;min-width:0;font-family:var(--mono);font-size:15px;font-weight:600;
color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-post__ico{width:18px;height:18px;flex:none}
.lp-post>img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.lp-post__act{display:flex;gap:14px;padding:10px 12px}
.lp-post__act svg{width:18px;height:18px}
@keyframes lp-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lp-marquee__track{animation:none}}
/* website panels running in a marquee line */
.lp-marquee .lp-shot{flex:none;width:clamp(248px,27vw,322px);margin-right:18px}
.lp-marquee--web .lp-marquee__track{animation-duration:64s}
/* services — branding work montage */
.svc__montage{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,16px);
margin-top:clamp(28px,4vh,48px)}
@media (min-width:740px){.svc__montage{grid-template-columns:repeat(4,1fr)}}
.svc__montage figure{aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--ink2)}
.svc__montage img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s cubic-bezier(.2,.7,0,1)}
.svc__montage figure:hover img{transform:scale(1.07)}
/* services — scattered, draggable brand-work board */
.svc__scatter{position:relative;width:100vw;margin-left:calc(50% - 50vw);
margin-top:clamp(30px,4.5vh,52px);overflow:hidden;height:clamp(540px,56vw,800px)}
.scatter-pic{position:absolute;opacity:0;background:#fff;padding:8px;border-radius:5px;cursor:grab;touch-action:none;
transform:rotate(var(--r,0deg));transition:transform .25s}
.scatter-pic:hover{}
.scatter-pic.is-drag{cursor:grabbing;transform:rotate(var(--r,0deg)) scale(1.03)}
.scatter-pic img{display:block;width:100%;height:auto;border-radius:2px;pointer-events:none}
/* ===== Brand Pilot — value blocks ===== */
.bp-tag{display:inline-block;font-family:var(--mono);font-size:15px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.bp-tag--light{color:#fff;opacity:.6}
/* cost contrast */
.bp-dept{margin-top:clamp(44px,7vh,96px);text-align:center}
.bp-dept__h{font-family:var(--disp);font-weight:800; max-width:17ch;margin:0 auto;font-size:clamp(32px,5.5vw,72px);line-height:1.05;letter-spacing:-.04em}
.bp-dept__roles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
max-width:820px;margin:clamp(26px,4vh,44px) auto 0}
@media(min-width:760px){.bp-dept__roles{grid-template-columns:repeat(4,1fr)}}
.bp-role{border-radius:14px;padding:22px 16px;background:#fafafa;
display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.bp-role::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
background:var(--accent-d);
transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.bp-role:hover::after{transform:scaleX(1)}
.bp-role__job{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.28}
.bp-role__cost{font-family:var(--mono);font-size:15px;color:var(--grey)}
.bp-dept__sum{font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.6vw,22px);
line-height:1.58;max-width:52ch;margin:clamp(22px,3vh,36px) auto 0}
.bp-dept__sum b{font-weight:800;color:var(--accent)}
/* autonomy panel */
.bp-auto{margin-top:clamp(44px,7vh,96px);background:var(--ink);color:#fff;
border-radius:26px;padding:clamp(32px,5vw,72px) clamp(20px,4vw,60px)}
.bp-auto__head{text-align:center;margin-bottom:clamp(30px,4.5vh,54px)}
.bp-auto__h{font-family:var(--disp);font-weight:800;font-size:clamp(32px,5.5vw,72px);line-height:1.05;letter-spacing:-.04em}
.bp-auto__grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:620px){.bp-auto__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.bp-auto__grid{grid-template-columns:repeat(4,1fr)}}
.bp-pill{background:rgba(255,255,255,.045);
border-radius:16px;padding:24px 22px 20px;display:flex;flex-direction:column;
transition:transform .4s ease,border-color .4s ease,background .4s ease}
.bp-pill:hover{transform:translateY(-6px);border-color:rgba(9,74,66,.55);
background:rgba(255,255,255,.07)}
.bp-pill__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bp-pill__ico{width:46px;height:46px;border-radius:12px;flex:none;display:flex;
align-items:center;justify-content:center;background:var(--accent-d)}
.bp-pill__ico svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.bp-pill__lvl{display:flex;align-items:center;gap:5px;font-family:var(--mono);
font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bp-pill__lvl i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.bp-pill__lvl--3 i,.bp-pill__lvl--2 i:nth-child(-n+2),.bp-pill__lvl--1 i:first-child{
background:var(--accent)}
.bp-pill__ch{font-family:var(--mono);font-size:15px;letter-spacing:.13em;
text-transform:uppercase;color:rgba(255,255,255,.55)}
.bp-pill__verb{font-family:var(--disp);font-weight:800; margin:7px 0 11px;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.bp-pill__d{font-family:var(--mono);font-size:15px;line-height:1.6;
color:rgba(255,255,255,.66);flex:1}
.bp-pill__status{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:15px;
border-top:1px solid var(--linel);font-family:var(--mono);font-size:15px;color:rgba(255,255,255,.5)}
.bp-dot{width:7px;height:7px;border-radius:50%;background:#28D979;flex:none;animation:bp-pulse 2.4s ease-out infinite}
@keyframes bp-pulse{0%{}
70%{}100%{}}
@media(prefers-reduced-motion:reduce){.bp-dot{animation:none}}
/* flywheel tie-back */
.bp-fly{margin-top:clamp(40px,6vh,82px);border-radius:20px;
padding:clamp(28px,4.4vw,52px);text-align:center;background:#fff}
.bp-fly__nodes{display:flex;align-items:center;justify-content:center;gap:10px;
flex-wrap:wrap;margin-bottom:22px}
.bp-fly__node{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;
font-size:clamp(15px,1.5vw,20px);padding:11px 21px;border-radius:999px;}
.bp-fly__node--live{background:var(--accent-d);
color:#fff;border-color:transparent}
.bp-fly__arr{color:var(--accent);font-size:18px;font-weight:700}
.bp-fly__p{font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.65vw,23px);
line-height:1.5;max-width:50ch;margin:0 auto}
.bp-fly__p b{font-weight:800}
/* ===== Brand Pilot spotlight (sector pages) ===== */
#pilotspot .kick{text-align:left}
.psp{margin-top:clamp(30px,4.5vh,54px);display:grid;gap:clamp(28px,4vw,60px);
grid-template-columns:1fr;align-items:center}
@media(min-width:920px){.psp{grid-template-columns:1.05fr .95fr}}
.psp__tx .big-h{text-align:left;font-size:clamp(28px,3.5vw,52px);line-height:1.06}
.psp__lede{font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.5vw,21px);
line-height:1.55;color:var(--grey);margin:22px 0 26px;max-width:44ch}
.psp__demo{display:block;background:var(--ink);border-radius:18px;
overflow:hidden;transition:transform .4s ease,border-color .4s ease}
.psp__demo:hover{transform:translateY(-6px);border-color:rgba(9,74,66,.5)}
.psp__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#161618;
border-bottom:1px solid #232327}
.psp__bar i{width:9px;height:9px;border-radius:50%;background:#3a3a40}
.psp__bar i:first-child{background:var(--accent)}
.psp__bar span{margin-left:6px;font-family:var(--mono);font-size:15px;color:rgba(255,255,255,.5)}
.psp__rows{padding:15px;display:flex;flex-direction:column;gap:9px}
.psp__row{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:10px;
background:rgba(255,255,255,.04)}
.psp__rtx{flex:1;min-width:0;font-family:var(--mono);font-size:15px;line-height:1.4;color:#fff}
.psp__row b{font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
color:#28D979;flex:none}
.psp__dot{width:8px;height:8px;border-radius:50%;background:#28D979;flex:none;
animation:psp-pulse 2.6s ease-out infinite}
.psp__row:nth-child(2) .psp__dot{animation-delay:.65s}
.psp__row:nth-child(3) .psp__dot{animation-delay:1.3s}
.psp__row:nth-child(4) .psp__dot{animation-delay:1.95s}
@keyframes psp-pulse{0%{}
70%{}100%{}}
.psp__cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;
background:var(--accent-d);
font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.07em;
text-transform:uppercase;color:#fff}
@media(prefers-reduced-motion:reduce){.psp__dot{animation:none}}
/* Pricing page */
.pr-lede{font-family:var(--disp);font-weight:500;font-size:clamp(22px,3vw,40px);
line-height:1.2;letter-spacing:-.02em;max-width:20ch;margin:0 auto;text-align:center}
.pr-lede em{font-style:normal;color:var(--accent-d)}
.pr-prins{display:grid;gap:16px;margin-top:46px;
grid-template-columns:repeat(4,1fr)}
.pr-prin{border-radius:var(--rad);padding:24px}
.pr-prin h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.02em;margin:0 0 8px}
.pr-prin p{font-size:15px;line-height:1.6;color:var(--grey);margin:0}
.dark .pr-prin{border-color:var(--linel)}
.dark .pr-prin p{color:rgba(255,255,255,.62)}
.pr-group{margin-top:clamp(24px,3.4vw,40px);background:var(--white);border-radius:20px;padding:clamp(24px,3.4vw,44px);}
.pr-group + .pr-group{margin-top:18px}
.dark .pr-group{background:rgba(255,255,255,.045);border-color:var(--linel);}
.pr-ghead{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:34px}
.dark .pr-ghead{border-bottom-color:var(--linel)}
.pr-ghead h2{font-family:var(--disp);font-weight:800;
margin:0 0 12px;font-size:clamp(32px,5.5vw,72px);line-height:1.05;letter-spacing:-.04em}
.pr-ghead p{font-size:15px;line-height:1.65;color:var(--grey);margin:0;max-width:62ch}
.dark .pr-ghead p{color:rgba(255,255,255,.62)}
/* comparison tables */
.pr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rad)}
.pr-table{width:100%;border-collapse:collapse;min-width:660px}
.pr-table--4{min-width:800px}
.pr-table th,.pr-table td{padding:15px 16px;text-align:center;vertical-align:middle;
border-bottom:1px solid var(--line)}
.dark .pr-table th,.dark .pr-table td{border-bottom-color:var(--linel)}
.pr-table tbody tr:nth-child(even){background:rgba(14,14,15,.022)}
.dark .pr-table tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.pr-table tbody td{font-family:var(--disp);font-weight:500;font-size:15px;
letter-spacing:-.005em;color:var(--grey)}
.dark .pr-table tbody td{color:rgba(255,255,255,.66)}
.pr-table tbody th,.pr-table tfoot th{text-align:left;padding-left:22px;width:32%;
font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;
color:var(--ink)}
.dark .pr-table tbody th{color:#fff}
.pr-table thead th{background:var(--ink);color:#fff;padding:20px 16px;
vertical-align:top;border-bottom:none}
.dark .pr-table thead th{background:var(--ink);}
.pr-table thead .pr-th-corner{background:transparent;border-bottom:none;}
.pr-tier{display:block;font-family:var(--disp);font-weight:700;font-size:15px;
letter-spacing:-.02em;line-height:1.2}
.pr-tprice{display:block;margin-top:7px;font-family:var(--disp);font-weight:800;
font-size:25px;letter-spacing:-.03em;line-height:1}
.pr-tprice small{font-family:var(--mono);font-size:15px;font-weight:500;
letter-spacing:.03em;opacity:.62}
.pr-yes{display:inline-block;width:7px;height:12px;margin-bottom:3px;
border:solid var(--accent-d);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dark .pr-yes{border-color:var(--accent)}
.pr-no{color:var(--line);font-size:15px;font-weight:600}
.dark .pr-no{color:rgba(255,255,255,.26)}
.pr-table tfoot td{padding:18px 14px;border-bottom:none}
.pr-tcta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:11px 17px;border-radius:9px;white-space:nowrap;
font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink);
background:var(--accent2);
transition:transform .3s}
.pr-tcta:hover{transform:translateY(-2px)}
.pr-addons{margin-top:20px;border-radius:var(--rad);
padding:21px 24px}
.dark .pr-addons{border-color:var(--linel)}
.pr-addons__label{display:block;margin-bottom:13px;font-family:var(--mono);
font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--grey)}
.pr-addons ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pr-addons--2 ul{grid-template-columns:repeat(2,1fr);gap:9px 36px}
.pr-addons li{display:flex;justify-content:space-between;align-items:baseline;
gap:18px;font-size:15px;line-height:1.5;padding-bottom:9px;
border-bottom:1px solid var(--line)}
.dark .pr-addons li{border-bottom-color:var(--linel);color:rgba(255,255,255,.72)}
.pr-addons:not(.pr-addons--2) li:last-child{border-bottom:none;padding-bottom:0}
.pr-addons__price{flex-shrink:0;font-family:var(--mono);font-weight:600;
font-size:15px;letter-spacing:.03em;color:var(--accent-d)}
.dark .pr-addons__price{color:var(--accent)}
.pr-note{margin-top:14px;font-size:15px;line-height:1.6;color:var(--grey)}
.dark .pr-note{color:rgba(255,255,255,.55)}
.pr-foot{margin-top:clamp(54px,7vw,90px);padding-top:30px;
border-top:1px solid var(--line);display:grid;gap:10px}
.dark .pr-foot{border-top-color:var(--linel)}
.pr-foot p{font-size:15px;line-height:1.7;color:var(--grey);margin:0;max-width:74ch}
.pr-foot a{color:var(--accent-d);border-bottom:1px solid currentColor}
.dark .pr-foot a{color:var(--accent)}
/* Pricing page — responsive */
@media(max-width:1100px){
.pr-prins{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
.pr-prins{grid-template-columns:1fr}
.pr-addons--2 ul{grid-template-columns:1fr}
.pr-addons--2 li:last-child{border-bottom:none;padding-bottom:0}
}
/* duotone — accents on deep-teal dark surfaces */
.dark .kick,.dark .hero__eyebrow{color:var(--accent2)}
.dark .pr-card__time,.dark .pr-addons__price,.dark .pr-foot a{color:var(--accent2)}
.dark .pr-yes{border-color:var(--accent2)}
/* === SECTOR SEO INTRO === */
/* sector SEO intro band — sits between hero and #engine */
.sec-seo{background:var(--white);padding:clamp(40px,5vw,72px) var(--gut);border-bottom:1px solid var(--line)}
.sec-seo__inner{max-width:1100px;margin:0 auto;display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1fr}
@media (min-width:880px){.sec-seo__inner{grid-template-columns:.7fr 1.3fr}}
.sec-seo__k{font-family:var(--mono);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600}
.sec-seo__h{font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.8vw,38px);line-height:1.12;letter-spacing:-.025em;margin-top:14px;color:var(--ink)}
.sec-seo__h em{font-style:italic;font-weight:500;color:var(--accent-d)}
.sec-seo__body{font-family:var(--mono);font-size:clamp(15px,1.05vw,15.5px);line-height:1.75;color:rgba(14,14,15,.78);display:grid;gap:14px}
.sec-seo__body p{max-width:62ch}
.sec-seo__body strong{color:var(--ink);font-weight:600}
/* === MOBILE: pinned cinema acts — stop "marketing department" hiding under sticky nav === */
@media (max-width:820px){
.act{
justify-content:flex-start;
padding-top:clamp(98px,16vh,150px);
padding-bottom:clamp(48px,7vh,80px);
overflow-y:auto;
}
#a1{justify-content:center;padding-top:0}
.a4row{gap:18px}
.mrun{margin-bottom:clamp(20px,3vh,32px)}
.mrun__h{;font-size:clamp(32px,5.5vw,72px);line-height:1.05;letter-spacing:-.04em}
.mrun__s{font-size:15px;max-width:38ch}
}
/* ============================================================
MOBILE POLISH PASS — 2026-05-31
- Hide the cinematic #build GSAP section on phones
- Stack pricing comparison tables as cards
- Tighten common pain points
============================================================ */
/* Show
only on mobile */
.mob-br{display:none}
/* MOBILE ≤ 760px ============================ */
@media (max-width:760px){
/* mobile-only line break helper */
.mob-br{display:inline}
/* (Mobile hide of cinematic #build removed — sections are now per-act with
IntersectionObserver-triggered animations, mobile-friendly out of the box.) */
/* Also disable the scroll-driven section pinning for sector pages */
body.no-pin-mobile [data-pin]{position:static !important;height:auto !important}
/* 2) PRICING — collapse the wide comparison table into tier cards.
We use CSS-only display:block transformation. */
.pr-tablewrap{overflow-x:visible}
.pr-table{min-width:0 !important;width:100%;display:block}
.pr-table thead{display:none}
.pr-table tbody{display:flex;flex-direction:column;gap:18px}
.pr-table tbody tr{display:flex;flex-direction:column;background:#fff;
border-radius:14px;padding:14px 16px;}
.pr-table tbody tr:nth-child(even){background:#fff}
.pr-table tbody th[scope="row"]{
display:block;text-align:left !important;padding:0 0 12px 0 !important;width:100% !important;
font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line);margin-bottom:10px}
.pr-table tbody td{
display:flex;justify-content:space-between;align-items:center;gap:14px;
text-align:left !important;padding:8px 0 !important;border-bottom:1px dashed rgba(14,14,15,.08);
font-family:var(--mono);font-size:15px}
.pr-table tbody td:last-child{border-bottom:0}
/* Show which tier each td is for — set via data-tier attr if present, otherwise fallback */
.pr-table tbody td::before{
content:attr(data-tier);font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
color:var(--grey);font-weight:600;flex:1;text-align:left}
/* Footer (tier CTA buttons) becomes its own stack */
.pr-table tfoot{display:block;margin-top:20px}
.pr-table tfoot tr{display:flex;flex-direction:column;gap:10px}
.pr-table tfoot td{display:block;padding:0 !important}
.pr-tcta{width:100%;justify-content:center}
/* Show a tip above the tables on mobile telling users to scroll */
.pr-tablewrap::before{
content:"Each row is a feature. Tap a tier name below to see it priced.";
display:none}
/* Add-ons: 2-col → 1-col */
.pr-addons--2 ul{grid-template-columns:1fr !important}
/* 3) HERO TITLE — keep huge but never split a word mid-character */
.hero__title,.h1{word-break:normal;overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
/* 4) NAV — make the burger always visible on mobile (was already at <=720px) */
.nav__l .nav__tag{display:none}
.nav__cta{display:none}
.nav__burger{display:flex}
/* 5) KICK strip — wrap nicer */
.kick{flex-wrap:wrap;gap:6px 12px}
.kick .fill{display:none}
/* 6) Sections — tighter top/bottom padding on phones */
.sec{padding-top:clamp(54px,9vh,80px) !important;padding-bottom:clamp(54px,9vh,80px) !important}
.hero{padding-top:clamp(110px,16vh,160px) !important;padding-bottom:clamp(40px,7vh,72px) !important}
/* 7) Big headings — softer ceiling on mobile so they don't dominate */
.big-h,.hero__title{font-size:clamp(34px,8.6vw,60px) !important;line-height:1.04 !important;letter-spacing:-.035em}
/* 8) Latest Work / case grids — single column */
.case-grid--2,.case-duo,.case-trio{grid-template-columns:1fr !important}
/* 9) Buttons — wider tap targets, full-width if stacked */
.hero__cta{flex-direction:column;align-items:stretch;width:100%;gap:10px}
.hero__cta .btn{justify-content:center;width:100%}
/* 10) Footer links — wrap to 2 cols on mid-phone, 1 col on tiny */
.foot__links{flex-wrap:wrap;gap:10px 18px}
}
/* TINY MOBILE ≤ 420px ============================ */
@media (max-width:420px){
.pr-table tbody th[scope="row"]{font-size:15px}
.pr-table tbody td{font-size:15px}
.hero__sub{font-size:15px}
.pr-ghead h2{font-size:24px !important}
}
/* TOUCH-ONLY — disable parallax / hover-only flair on touch */
@media (hover:none) and (pointer:coarse){
.show{display:none !important;height:0 !important} /* extra safety for tablets too */
}
/* Standard heroes inherit body white background — no overrides */
/* --- Clay accent for internal pages ------------------------- */
.kick{color:var(--accent)}
.sec:not(.dark) .kick .n{color:var(--accent)}
.sec:not(.dark) .big-h .hl,
.sec:not(.dark) .intro__lede em,
.sec:not(.dark) .pr-lede em{color:var(--accent)}
.sec:not(.dark) .pstep__n{color:var(--accent)}
.sec:not(.dark) .pstep::before{background:var(--accent)}
.sec:not(.dark) .pstep__t{color:var(--accent)}
/* NAV — transparent, static, no background or borders sitewide */
.nav__l .logo path{color:var(--ink)}
.nav__m a.is-here{color:var(--accent2)}
/* Work case-study pages have dark video heroes — force nav + logo white */
body:has(.case-hero) .nav__l .logo path,
body:has(.case-hero) .nav__l .logo{color:#fff !important;fill:#fff !important}
body:has(.case-hero) .nav__m a{color:#fff}
body:has(.case-hero) .nav__m a.is-here{color:var(--accent2)}
body:has(.case-hero) .nav__tag{color:rgba(255,255,255,.65);border-left-color:rgba(255,255,255,.3)}
body:has(.case-hero) .nav__cta{border-color:rgba(255,255,255,.4);color:#fff}
body:has(.case-hero) .nav__burger span{background:#fff}
/* ============================================================
ARROW GLYPH FALLBACK — Adobe Fonts proxima-nova / filson-pro
sometimes subset out U+2192 (→) and U+2193 (↓) on mobile,
leaving an empty box. Force arrow-only spans to use a system
font stack that always has these glyphs.
============================================================ */
.ccard__arr,
.rvl__arr{
font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',system-ui,-apple-system,sans-serif !important;
}
/* For buttons/links that mix text + arrow, ensure tap targets stay generous on mobile
and the arrow inherits the system fallback if the brand font doesn't ship it. */
@media (max-width:760px){
.ccard__next,
.btn,
.nav__cta,
.shot__x{
min-height:44px;
touch-action:manipulation;
}
}
/* ============================================================
CLAY CIRCLE TICKS — sitewide replacement for the green squares
Used on lphero ticks, svc lists, and pricing pr-yes marks.
Flat-design solid clay circle with white checkmark inside.
============================================================ */
.lphero__ticks li::before{
width:20px !important;height:20px !important;
border-radius:50% !important;
background:var(--clay) !important;
}
.lphero__ticks li::after{
content:"\2713" !important;
left:5px !important;top:1px !important;
font-size:15px !important;font-weight:700 !important;color:#fff !important;
}
/* Pricing tick marks — clay circle + white check */
.pr-yes{
width:22px !important;height:22px !important;border-radius:50% !important;
background:var(--clay) !important;border:0 !important;
margin:0 auto !important;display:inline-flex !important;
align-items:center !important;justify-content:center !important;
position:relative !important;
}
.pr-yes::before{
content:"\2713";font-size:15px;font-weight:700;color:#fff;line-height:1;
}
.dark .pr-yes{background:var(--clay) !important;border:0 !important}
.dark .pr-yes::before{color:#fff}
/* SVC list ticks (services page) — same clay circle treatment */
.svc__list li{padding-left:34px;position:relative}
.svc__list li::before{
content:"" !important;position:absolute;left:0;top:50%;transform:translateY(-50%);
width:20px;height:20px;border-radius:50%;background:var(--clay) !important;
}
.svc__list li::after{
content:"\2713" !important;position:absolute;left:5px !important;top:50% !important;
transform:translateY(-50%) !important;
font-size:15px !important;font-weight:700 !important;color:#fff !important;
}
/* ============================================================
LIGHT SAAS-STYLE DEMO CARDS — was dark, now white with shadow
Apply to .psp__demo (Brand Pilot console on homepage) and to
anything that wants that "Linear/Stripe screenshot" feel.
Add class .saas-demo to opt in, or these auto-apply to .psp__demo.
============================================================ */
.psp__demo,
.saas-demo{
background:#FFFFFF !important;
border-radius:18px !important;
overflow:hidden;
transition:transform .35s;
}
.psp__demo:hover,
.saas-demo:hover{
transform:translateY(-6px) !important;
border-color:rgba(14,14,15,.18) !important;
}
/* Browser bar at top of the card */
.psp__demo .psp__bar,
.saas-demo .saas-demo__bar{
background:#F6F7F9 !important;
border-bottom:1px solid rgba(14,14,15,.08);
padding:13px 16px !important;
}
.psp__demo .psp__bar i,
.saas-demo .saas-demo__bar i{background:rgba(14,14,15,.18) !important}
.psp__demo .psp__bar i:first-child,
.saas-demo .saas-demo__bar i:first-child{background:#FF5F57 !important}
.psp__demo .psp__bar i:nth-child(2),
.saas-demo .saas-demo__bar i:nth-child(2){background:#FFBD2E !important}
.psp__demo .psp__bar i:nth-child(3),
.saas-demo .saas-demo__bar i:nth-child(3){background:#28C840 !important}
.psp__demo .psp__bar span{color:rgba(14,14,15,.55) !important;font-weight:500}
/* Body content rows */
.psp__rows{padding:18px !important;background:#FFFFFF}
.psp__row{
background:#FAFBFC !important;
color:var(--ink) !important;
font-family:var(--mono);font-size:15px;font-weight:500;
}
.psp__row b{
color:var(--clay) !important;
background:rgba(224,120,92,.1) !important;
padding:4px 10px;border-radius:30px;font-weight:600;
}
.psp__dot{background:#28C840 !important}
/* Bottom CTA strip */
.psp__cta{
background:var(--ink) !important;color:#fff !important;
border-top:1px solid rgba(14,14,15,.08);
padding:18px !important;font-weight:600;
}
/* ============================================================
BIGGER NAV + LIGHTER DISPLAY HEADINGS — 2026-05-31
Match the lighter weight-500 feel of .intro__lede across all
big display headings. Editorial, not chunky.
============================================================ */
/* Nav — bigger across the board */
.nav__l .logo{height:62px !important}
.nav__m{font-size:17px !important;gap:clamp(18px,2.6vw,36px) !important}
.nav__m a{font-weight:500}
.nav__cta{font-size:15px !important;padding:13px 22px !important;letter-spacing:.04em !important}
.nav{padding-top:22px !important;padding-bottom:22px !important}
/* All site headings sit at 700 — Typekit only serves Proxima Nova at 400 + 700,
so 500/600/800 get synth-rendered as distorted faux weights. */
h1, h2, h3, h4, h5, h6,
.big-h, .h2,
.hero__title, .hero__title .ln>span,
.case-hero h1, .lphero h1,
.case-next__nm,
.pstep__nm, .shot__nm,
.lpcard h2, .lp-ecard h3, .lp-point h3, .lp-step h3, .lp-pcard--ph h3,
.lp-pcard__nm, .lp-head__h, .lp-shot__cap b,
.teamph__label, .cta h2, .pr-ghead h2, .pr-lede,
.svc__media__label, .menu a, .ccard__h{
font-weight:700 !important;
}
/* The .intro__lede already sits at 500 — keep it there as the reference */
/* Hero titles need a touch more letter-tightness at 500 to keep impact */
.hero__title{letter-spacing:-.045em !important}
/* Highlight spans within headings — keep these slightly heavier for the colour pop */
.big-h .hl,
.hero__title .hl,
.h2 .hl{font-weight:700 !important}
/* ============================================================
BRAND PILOT — LIGHT SAAS UI OVERRIDE (2026-05-31)
The two dark sections on brand-pilot.html flipped to white
Linear/Stripe-style demo UI using BARE colours:
- Jade accent for active/iconography
- Clay for status pills + level dots
- Ink for headlines, soft grey body
============================================================ */
/* === .dm console (chips picker, business, lanes) === */
.dm{
background:#FFFFFF !important;
color:var(--ink);
}
.dm__bar{
background:#F6F7F9 !important;
border-bottom:1px solid rgba(14,14,15,.08) !important;
}
.dm__dots i{background:rgba(14,14,15,.18) !important}
.dm__dots i:first-child{background:#FF5F57 !important}
.dm__dots i:nth-child(2){background:#FFBD2E !important}
.dm__dots i:nth-child(3){background:#28C840 !important}
.dm__id{color:rgba(14,14,15,.55) !important}
.dm__status{color:rgba(14,14,15,.55) !important;
background:rgba(14,14,15,.05) !important;
padding:5px 10px;border-radius:30px;font-weight:600}
.dm__status.is-live{color:var(--accent-d) !important;
background:rgba(69,201,154,.14) !important}
.dm__lab{color:rgba(14,14,15,.55) !important}
.dm-chip{
background:#FAFBFC !important;
color:var(--ink) !important;font-weight:500;
}
.dm-chip:hover{background:#fff !important;border-color:rgba(14,14,15,.25) !important}
.dm-chip.is-on{
background:rgba(69,201,154,.14) !important;border-color:var(--accent2) !important;
color:var(--accent-d) !important;font-weight:600;
}
.dm__brand{
background:#FAFBFC !important;
border-radius:14px;padding:14px 16px !important;margin-top:18px;
}
.dm__brand-tx b{color:var(--ink) !important}
.dm__brand-tx span{color:rgba(14,14,15,.55) !important}
.dm__swatch{background:var(--accent2) !important;border-radius:10px}
.dm__run{
background:var(--accent2) !important;color:var(--ink) !important;font-weight:700;
}
.dm__run:hover{background:#fff !important;color:var(--ink) !important;}
.dm__weeks{padding:20px clamp(18px,3vw,32px) !important}
.dm__weeks b{color:rgba(14,14,15,.5) !important;font-weight:600}
.dm__weeks::before{background:rgba(14,14,15,.1) !important}
.dm__weeks i{background:var(--accent2) !important}
.dm-lane{
background:#FAFBFC !important;
color:var(--ink);
}
.dm-lane.flash{
border-color:var(--accent2) !important;
}
.dm-lane__hd{border-bottom:1px solid rgba(14,14,15,.08) !important;
background:#fff !important}
.dm-lane__ico{background:rgba(69,201,154,.14) !important}
.dm-lane__ico svg{stroke:var(--accent-d) !important}
.dm-lane__nm{color:rgba(14,14,15,.7) !important;font-weight:600}
.dm-lane__ct{color:var(--ink) !important}
.dm-lane__empty{color:rgba(14,14,15,.4) !important}
.dm-lane__body > *{
background:#fff !important;
border-radius:8px;padding:9px 11px !important;
color:var(--ink) !important;font-size:15px;line-height:1.4;
}
.dm__done{background:#FAFBFC !important;border-top:1px solid rgba(14,14,15,.08) !important;
color:var(--ink) !important;padding:24px clamp(18px,3vw,32px) !important}
.dm__done p{color:var(--ink) !important}
.dm-again{background:var(--ink) !important;color:#fff !important}
.dm-again:hover{background:var(--accent2) !important;color:var(--ink) !important}
/* === .bp-auto "It runs it" 4-card block — light === */
.bp-auto{
background:#F6F7F9 !important;color:var(--ink) !important;
border-radius:24px !important;
padding:clamp(48px,7vw,96px) clamp(28px,4vw,64px) !important;
margin-top:clamp(44px,7vh,96px) !important;
}
.bp-auto__h{color:var(--ink) !important;font-weight:500 !important}
.bp-auto__h .hl{color:var(--accent) !important;font-weight:700 !important}
.bp-pill{
background:#FFFFFF !important;
color:var(--ink) !important;
transition:transform .35s,border-color .3s;
}
.bp-pill:hover{
border-color:var(--accent2) !important;
transform:translateY(-6px);
}
.bp-pill__ico{background:rgba(69,201,154,.14) !important}
.bp-pill__ico svg{stroke:var(--accent-d) !important}
.bp-pill__lvl{color:rgba(14,14,15,.55) !important;font-weight:600}
.bp-pill__lvl i{background:rgba(14,14,15,.16) !important}
.bp-pill__lvl--3 i,
.bp-pill__lvl--2 i:nth-child(-n+2),
.bp-pill__lvl--1 i:first-child{background:var(--clay) !important}
.bp-pill__ch{color:rgba(14,14,15,.55) !important;font-weight:600}
.bp-pill__verb{color:var(--ink) !important;font-weight:500 !important}
.bp-pill__d{color:rgba(14,14,15,.65) !important}
.bp-pill__status{
border-top:1px solid rgba(14,14,15,.1) !important;
color:rgba(14,14,15,.6) !important;font-weight:500;
}
.bp-pill__status::before{
content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
background:var(--accent2);margin-right:8px;
}
/* ============================================================
PRICING PAGE — included-cards grid, smaller ledes, nicer FAQ
============================================================ */
/* New "Everything included" card grid */
.pp-incl{margin-top:clamp(34px,5vh,56px);display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:680px){.pp-incl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pp-incl{grid-template-columns:repeat(3,1fr)}}
.pp-incl__c{background:#fff;border-radius:18px;
padding:26px 24px;display:flex;flex-direction:column;gap:14px;
transition:transform .35s,border-color .3s;position:relative;overflow:hidden}
.pp-incl__c:hover{transform:translateY(-4px);border-color:var(--accent2);}
.pp-incl__pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
padding:5px 10px;border-radius:30px;width:max-content}
.pp-incl__pill--once{background:rgba(224,120,92,.14);color:var(--clay)}
.pp-incl__pill--monthly{background:rgba(69,201,154,.16);color:var(--accent-d)}
.pp-incl__pill::before{content:"";width:6px;height:6px;border-radius:50%}
.pp-incl__pill--once::before{background:var(--clay)}
.pp-incl__pill--monthly::before{background:var(--accent2)}
.pp-incl__ico{width:44px;height:44px;border-radius:12px;background:rgba(14,14,15,.04);
display:flex;align-items:center;justify-content:center;color:var(--ink)}
.pp-incl__ico svg{width:22px;height:22px;stroke:currentColor;fill:none;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-incl__c--once .pp-incl__ico{background:rgba(224,120,92,.12);color:var(--clay)}
.pp-incl__c--monthly .pp-incl__ico{background:rgba(69,201,154,.16);color:var(--accent-d)}
.pp-incl__h{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.015em;color:var(--ink);line-height:1.2;margin:0}
.pp-incl__d{font-family:var(--mono);font-size:15px;line-height:1.65;color:var(--grey);margin:0}
/* Smaller lede variant — for section sub-copy that shouldn't be display-sized */
.pp-lede-sm{margin-top:14px !important;max-width:62ch;
font-family:var(--mono) !important;font-weight:400 !important;
font-size:clamp(15px,1.1vw,16.5px) !important;line-height:1.7 !important;
color:var(--grey) !important;letter-spacing:0 !important}
.pp-lede-sm em{font-style:normal;color:var(--accent);font-weight:600}
.sec.dark .pp-lede-sm{color:rgba(255,255,255,.7) !important}
.sec.dark .pp-lede-sm em{color:var(--accent2)}
/* FAQ — centred + bigger, cleaner */
.faq-sec .wrap{text-align:center}
.faq-sec .kick{justify-content:center;display:inline-flex !important}
.faq-sec .big-h{margin-left:auto;margin-right:auto;text-align:center}
.faq-list{margin-left:auto !important;margin-right:auto !important;text-align:left}
.faq-q{border-radius:16px !important;
background:#fff !important;transition:border-color .25s;}
.faq-q[open]{border-color:var(--clay) !important;}
.faq-q>summary{padding:clamp(22px,2.6vw,28px) clamp(22px,3vw,30px) !important;
font-weight:500 !important;font-size:clamp(17px,1.5vw,20px) !important;
color:var(--ink) !important}
.faq-q__a{padding:0 clamp(22px,3vw,30px) clamp(24px,2.8vw,28px) !important;
font-size:clamp(15.5px,1.15vw,17px) !important;
line-height:1.78 !important;color:rgba(14,14,15,.78) !important;
max-width:68ch !important}
.faq-q[open] .faq-q__i{background:var(--clay) !important;border-color:var(--clay) !important}
/* ===== STACKED POST-IT CARDS (sector + homepage) ===== */
.cstack{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;margin:0 auto;perspective:1400px}
.ccard{position:absolute;inset:0;background:#fff;color:var(--ink);
border-radius:6px;padding:clamp(28px,3.5vw,42px);
display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);
transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease;
transform-origin:50% 50%;will-change:transform,opacity}
.ccard:nth-child(1){background:#ffffff}
.ccard:nth-child(2){background:#e8f6ef}
.ccard:nth-child(3){background:#fdf0ea}
.ccard:nth-child(4){background:#d4ebe1;color:var(--accent-d)}
.ccard:nth-child(5){background:var(--accent-d);color:#fff}
.ccard:nth-child(5) .ccard__eye{color:var(--accent2);background:rgba(255,255,255,.1)}
.ccard:nth-child(5) .ccard__b{color:rgba(255,255,255,.78)}
.ccard:nth-child(5) .ccard__b b{color:#fff}
.ccard:nth-child(5) .ccard__next{background:var(--accent2);color:var(--ink)}
.ccard:nth-child(5) .ccard__next:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.ccard.cgone{opacity:0;transform:translate(60px,-80px) rotate(-18deg) scale(.85);pointer-events:none}
.ccard__eye{font-family:var(--mono);font-size:clamp(13px,1.05vw,14px);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-d);font-weight:700;
display:inline-block;align-self:flex-start;padding:6px 12px;background:rgba(9,74,66,.1);border-radius:999px}
.ccard__h{font-family:var(--disp);font-size:clamp(28px,3.6vw,46px);line-height:1.05;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.ccard__b{font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:rgba(14,14,15,.62);flex:1;font-weight:500}
.ccard__b b{color:var(--ink);font-weight:700}
.ccard__next{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
padding:13px 22px;border-radius:999px;background:var(--ink);color:#fff;
cursor:pointer;border:0;margin-top:auto;transition:transform .25s ease,background .25s ease,opacity .25s ease}
.ccard__next:hover{transform:translateY(-2px);background:var(--accent-d)}
.ccard__next:disabled{background:rgba(14,14,15,.12);color:rgba(14,14,15,.45);cursor:default}
.ccard__next:disabled:hover{transform:none;background:rgba(14,14,15,.12)}
.ccard__arr{display:inline-block;font-size:15px;transition:transform .3s ease}
.ccard__next:hover .ccard__arr{transform:translateY(3px)}
@media (max-width:560px){.cstack{aspect-ratio:auto;min-height:440px;max-width:none}}
/* ===== SECTOR SEO DARK SPLIT (text left, image right) ===== */
.sec.seo-dark{background:var(--ink);color:#fff}
.seo-split{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,80px);align-items:start}
@media (min-width:900px){.seo-split{grid-template-columns:1.1fr .9fr}}
.seo-split__tx{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);max-width:580px}
.seo-split__tx .big-h{text-align:left;color:#fff}
.seo-split__tx .kick{text-align:left;margin-bottom:0;color:var(--accent2)}
.seo-body{font-family:var(--mono);font-size:clamp(15px,1.1vw,16.5px);line-height:1.75;color:rgba(255,255,255,.7);max-width:60ch}
.seo-body p+p{margin-top:14px}
.seo-body strong, .seo-body b{color:#fff;font-weight:600}
.seo-body em{font-style:italic;color:var(--accent2)}
.seo-split__img{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.seo-split__img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* ============================================================
BARE — CMS form styling
Targets the markup the CMS actually outputs.
Drop this file into /barestudio/assets/ and link it in any
page that contains a CMS form. Or paste these rules into site.css.
============================================================ */
/* ============================================================
1. #cmsForm — the CMS contact / project form
Used on /contact/ and /get-online/
Works on dark and light backgrounds via .cms-light helper.
============================================================ */
#cmsForm{
max-width:680px;
margin:clamp(28px,4vh,52px) auto 0;
text-align:left;
font-family:var(--mono);
}
/* Inner wrapper the CMS adds, e.g. */
#cmsForm > div[class^="thisform"]{
display:flex;
flex-direction:column;
gap:clamp(20px,3vh,32px);
}
/* Each field row */
#cmsForm > div[class^="thisform"] > div{
margin:0 !important;
display:flex;
flex-direction:column;
gap:8px;
}
/* All text-style inputs + textarea — dark theme default */
#cmsForm input[type=text],
#cmsForm input[type=email],
#cmsForm input[type=tel],
#cmsForm input[type=password],
#cmsForm textarea{
width:100%;
background:transparent;
color:#fff;
font-family:var(--disp);
font-weight:500;
font-size:clamp(18px,1.5vw,22px);
padding:8px 0 14px;
border:0;
border-bottom:1px solid rgba(255,255,255,.18);
outline:none;
-webkit-appearance:none;
appearance:none;
transition:border-bottom-color .25s ease;
}
#cmsForm input[type=text]:focus,
#cmsForm input[type=email]:focus,
#cmsForm input[type=tel]:focus,
#cmsForm input[type=password]:focus,
#cmsForm textarea:focus{
border-bottom-color:var(--accent2);
}
#cmsForm input::placeholder,
#cmsForm textarea::placeholder{
color:rgba(255,255,255,.42);
font-family:var(--disp);
font-weight:500;
}
#cmsForm textarea{
resize:vertical;
min-height:120px;
line-height:1.55;
font-family:var(--mono);
font-size:clamp(15px,1.1vw,17px);
}
/* Captcha section */
#cmsForm .captcha-label{
display:block;
font-family:var(--mono);
font-size:12px;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(255,255,255,.55);
font-weight:700;
margin-bottom:8px;
}
/* Captcha image is set by the CMS as a background-image on .captcha-image.
Force the URL back + give the empty div explicit dimensions so the image actually shows.
Do NOT use the `background` shorthand carelessly — it would wipe background-image. */
#cmsForm .captcha-image{
background: url(/zms_inc/captcha.php) no-repeat left center !important;
background-size: 110px auto !important;
background-color: transparent !important;
width: 110px !important;
height: 40px !important;
margin-bottom: 14px !important;
border-radius: 0 !important;
overflow: visible !important;
max-width: none !important;
}
#cmsForm .captcha-image img{
width:100%;
height:auto;
display:block;
}
/* Submit button — full-width jade pill */
#cmsForm .formbutton{
margin-top:clamp(16px,2.5vh,28px);
}
#cmsForm .formbutton input[type=submit],
#cmsForm input[type=submit]{
font-family:var(--mono);
font-size:15px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
background:var(--accent2);
color:var(--ink);
border:0;
padding:16px 30px;
border-radius:9px;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
display:inline-flex;
align-items:center;
gap:10px;
transition:transform .3s ease,background .3s ease;
}
#cmsForm .formbutton input[type=submit]:hover,
#cmsForm input[type=submit]:hover{
transform:translateY(-2px);
background:#fff;
}
/* Inline error messages */
#cmsForm .error-msg{
display:none;
margin-top:6px;
font-family:var(--mono);
font-size:13px;
color:#FF9B8D;
letter-spacing:.04em;
}
#cmsForm .field-error{
border-bottom-color:#FF9B8D !important;
}
#cmsForm .error-msg.is-visible,
#cmsForm .field-error + .error-msg{
display:block;
}
/* Hide honeypot */
#cmsForm input[name="a_password"]{
position:absolute !important;
left:-9999px !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
}
/* ============================================================
1b. Light-theme variant for #cmsForm
Add .cms-light to a wrapper around the form (or to body)
on light-background pages.
============================================================ */
.cms-light #cmsForm input[type=text],
.cms-light #cmsForm input[type=email],
.cms-light #cmsForm input[type=tel],
.cms-light #cmsForm input[type=password],
.cms-light #cmsForm textarea{
color:var(--ink);
border-bottom-color:rgba(14,14,15,.18);
}
.cms-light #cmsForm input:focus,
.cms-light #cmsForm textarea:focus{
border-bottom-color:var(--accent);
}
.cms-light #cmsForm input::placeholder,
.cms-light #cmsForm textarea::placeholder{
color:rgba(14,14,15,.4);
}
.cms-light #cmsForm .captcha-label{
color:rgba(14,14,15,.6);
}
.cms-light #cmsForm .formbutton input[type=submit]{
background:var(--ink);
color:#fff;
}
.cms-light #cmsForm .formbutton input[type=submit]:hover{
background:var(--accent);
}
/* ============================================================
2. .loginfield — my-account login form
Centered card, username + password + submit
============================================================ */
.login-wrap{
max-width:420px;
margin:clamp(48px,7vh,80px) auto;
padding:clamp(28px,3.5vw,44px);
background:#fff;
border-radius:18px;
font-family:var(--mono);
}
.login-wrap h1,
.login-wrap h2{
font-family:var(--disp);
font-weight:700;
font-size:clamp(24px,2.5vw,32px);
letter-spacing:-.02em;
margin-bottom:8px;
color:var(--ink);
text-align:center;
}
.login-wrap p{
text-align:center;
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--grey);
margin-bottom:clamp(24px,3vh,36px);
font-weight:700;
}
.login-wrap form{
display:flex;
flex-direction:column;
gap:18px;
}
.login-wrap form > div{
display:flex;
flex-direction:column;
}
.loginfield{
width:100%;
font-family:var(--mono);
font-size:15px;
background:transparent;
color:var(--ink);
border:0;
border-bottom:1px solid rgba(14,14,15,.18);
padding:14px 0;
outline:none;
-webkit-appearance:none;
appearance:none;
transition:border-bottom-color .25s ease;
}
.loginfield::placeholder{
color:rgba(14,14,15,.4);
}
.loginfield:focus{
border-bottom-color:var(--accent);
}
/* Submit button on login — selectors broadened to also work when the CMS
doesn't wrap the form in .login-wrap. */
.login-wrap input.submit,
.login-wrap input[type=submit],
input.submit,
form input.submit{
margin-top:14px;
font-family:var(--mono);
font-size:14px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
background:var(--ink);
color:#fff;
border:0;
padding:16px 28px;
border-radius:9px;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
width:auto;
min-width:200px;
transition:transform .3s ease,background .3s ease;
}
.login-wrap input.submit,
.login-wrap input[type=submit]{
width:100%;
}
.login-wrap input.submit:hover,
.login-wrap input[type=submit]:hover,
input.submit:hover{
transform:translateY(-2px);
background:var(--accent);
}
/* ============================================================
3. Form flash / status messages
============================================================ */
.cms-flash{
max-width:680px;
margin:0 auto 24px;
padding:16px 22px;
font-family:var(--mono);
font-size:14px;
line-height:1.6;
border-radius:10px;
text-align:center;
}
.cms-flash.is-ok{
background:rgba(69,201,154,.14);
color:#fff;
}
.cms-flash.is-ok b{
color:var(--accent2);
font-weight:600;
}
.cms-flash.is-err{
background:rgba(255,155,141,.14);
color:#fff;
}
.cms-flash.is-err b{
color:#FF9B8D;
font-weight:600;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width:560px){
#cmsForm input[type=text],
#cmsForm input[type=email],
#cmsForm input[type=tel],
#cmsForm input[type=password],
#cmsForm textarea{
font-size:17px; /* keep above 16px to avoid mobile-zoom on focus */
padding:6px 0 12px;
}
.login-wrap{
margin:clamp(36px,6vh,60px) clamp(16px,4vw,24px);
}
}