:root{
  --paper:#F7F4EF; --paper-2:#EFEAE2; --ink:#16121F; --ink-2:#4A4358;
  --violet:#2E00A8; --violet-lo:#F0EBFF; --flame:#FF5A1F;
  --rule:#DCD5C9; --rule-dk:rgba(255,255,255,.16);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --disp:"Bricolage Grotesque","IBM Plex Sans",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.62 var(--sans);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.032em}
h1{font-size:clamp(3.1rem,7.6vw,6.4rem)}
h2{font-size:clamp(2.15rem,4.6vw,3.7rem)}
h3{font-size:1.3rem;letter-spacing:-.016em;line-height:1.22}
p{margin:0 0 1.05em}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(247,244,239,.9);
backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:21px 0}
.brand img{height:52px;width:auto;transition:.2s}
.brand:hover img{opacity:.72}
nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;align-items:center}
nav a{font-size:1.02rem;font-weight:500;color:var(--ink-2);padding-bottom:3px;
border-bottom:2px solid transparent;transition:.18s}
nav a:hover,nav a.on{color:var(--violet);border-bottom-color:var(--violet)}
.navcta{background:var(--ink);color:var(--paper)!important;padding:12px 22px;border-radius:2px;
font-size:.95rem;font-weight:600;border:none!important;transition:.18s}
.navcta:hover{background:var(--flame)}
@media(max-width:980px){nav ul{gap:20px}nav a{font-size:.92rem}.navcta{padding:10px 16px;font-size:.88rem}
.brand img{height:44px}}
@media(max-width:680px){.nav{flex-wrap:wrap;gap:14px;padding:16px 0}.brand img{height:40px}
nav ul{width:100%;flex-wrap:wrap;gap:16px}}

/* ---------- hero ---------- */
.hero{background:var(--violet);color:#fff;position:relative;overflow:hidden;
padding:104px 0 0;border-bottom:1px solid var(--violet)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:64px 64px}
.hero::after{content:"";position:absolute;width:620px;height:620px;right:-190px;top:-230px;
border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.42),transparent 66%);
pointer-events:none;filter:blur(8px)}
.hero .wrap{position:relative;z-index:2}
.hero .mono{color:rgba(255,255,255,.62);display:block;margin-bottom:26px}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:#FFC9B4;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:5px;background:var(--flame)}
.hero .sub{font-size:clamp(1.12rem,1.75vw,1.36rem);line-height:1.55;color:rgba(255,255,255,.82);
max-width:54ch;margin:34px 0 42px}
.rail b{font-size:2.6rem}
.shead p{font-size:1.1rem}
.row h3{font-size:1.38rem}
.row .desc{font-size:1.02rem}
.reveal{opacity:0;transform:translateY(16px);animation:rise .78s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

.btn{display:inline-block;background:#fff;color:var(--violet);padding:14px 30px;border-radius:2px;
font-weight:600;font-size:.95rem;transition:.18s;border:1.5px solid #fff}
.btn:hover{background:var(--flame);border-color:var(--flame);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);margin-left:10px}
.btn.ghost:hover{background:#fff;color:var(--violet);border-color:#fff}
.btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.dark:hover{background:var(--violet);border-color:var(--violet)}

/* stat rail sits astride the hero edge */
.rail{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.2);
margin-top:76px}
.rail div{padding:24px 22px 26px;border-right:1px solid rgba(255,255,255,.2)}
.rail div:last-child{border-right:none}
.rail b{display:block;font-family:var(--disp);font-size:2.05rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.rail span{display:block;margin-top:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.6)}
@media(max-width:760px){.rail{grid-template-columns:repeat(2,1fr)}
.rail div:nth-child(2n){border-right:none}.rail div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2)}}

/* ---------- sections ---------- */
section{padding:88px 0;border-bottom:1px solid var(--rule)}
section.tintd{background:var(--paper-2)}
.shead{display:grid;grid-template-columns:76px 1fr;gap:0 26px;margin-bottom:46px;align-items:start}
.snum{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--flame);
padding-top:.7em;border-top:2px solid var(--flame)}
.shead p{margin:14px 0 0;color:var(--ink-2);max-width:62ch;font-size:1.02rem}
@media(max-width:680px){.shead{grid-template-columns:1fr;gap:14px}.snum{max-width:76px}section{padding:62px 0}}

/* service rows: dense, ruled, editorial */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:76px 1.05fr 1.35fr;gap:0 26px;padding:34px 0;
border-bottom:1px solid var(--rule);transition:.2s}
.row:hover{background:rgba(46,0,168,.028)}
.row .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-2);padding-top:.45em}
.row h3{margin-bottom:9px}
.row .desc{color:var(--ink-2);font-size:.97rem;margin:0}
.row ul{margin:14px 0 0;padding:0;list-style:none;columns:2;column-gap:26px}
.row ul li{font-size:.9rem;color:var(--ink-2);padding:5px 0 5px 16px;position:relative;break-inside:avoid}
.row ul li::before{content:"";position:absolute;left:0;top:.86em;width:7px;height:1.5px;background:var(--flame)}
@media(max-width:820px){.row{grid-template-columns:1fr;gap:10px}.row .k{padding-top:0}.row ul{columns:1}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);background:#fff}
.steps>div{padding:30px 26px;border-right:1px solid var(--rule)}
.steps>div:last-child{border-right:none}
.steps .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--flame);margin-bottom:16px}
.steps h3{font-size:1.04rem;margin-bottom:9px}
.steps p{font-size:.91rem;color:var(--ink-2);margin:0}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}
.steps>div:nth-child(2n){border-right:none}.steps>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.steps>div{border-right:none;border-bottom:1px solid var(--rule)}}

/* work grid */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
border:1px solid var(--rule)}
.wcard{background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.wcard .img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.wcard .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.86);
transition:transform 1.1s cubic-bezier(.18,.72,.3,1),filter .5s}
.wcard:hover .img img{transform:scale(1.065);filter:saturate(1.05)}
.wcard .meta{padding:24px 26px 30px;flex:1}
.wcard .tag{display:block;font-family:var(--mono);font-size:.61rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--flame);margin-bottom:12px}
.wcard h3{margin-bottom:9px;font-size:1.24rem}
.wcard p{font-size:.94rem;color:var(--ink-2);margin:0;line-height:1.55}
@media(max-width:960px){.work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.work{grid-template-columns:1fr}.wcard .meta{padding:20px 22px 26px}}

/* clients — twin scrolling marquees */
.marq{--fade:var(--paper);overflow:hidden;position:relative;width:100%}
.tintd .marq{--fade:var(--paper-2)}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:3;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--fade),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--fade),transparent)}
.track{display:flex;width:max-content;animation:slide 54s linear infinite}
.track.rev{animation-duration:42s;animation-direction:reverse}
.marq:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.track{animation:none}}

.lcard{flex:0 0 auto;width:206px;height:132px;margin-right:18px;border:1px solid var(--rule);
background:#fff;display:grid;place-items:center;padding:24px;transition:.28s}
.lcard:hover{border-color:var(--violet);transform:translateY(-4px);
box-shadow:0 14px 30px -18px rgba(46,0,168,.5)}
.lcard img{max-height:74px;max-width:100%;width:auto;object-fit:contain;
filter:grayscale(1);opacity:.62;transition:.28s}
.lcard:hover img{filter:none;opacity:1}

.nameline{display:flex;align-items:center;flex:0 0 auto}
.nameline span{padding:0 26px;font-family:var(--disp);font-weight:600;font-size:1.32rem;
letter-spacing:-.01em;color:var(--ink);white-space:nowrap;opacity:.82}
.nameline i{color:var(--flame);font-style:normal;font-size:.8rem}
@media(max-width:600px){.lcard{width:158px;height:106px;padding:18px}
.lcard img{max-height:56px}.nameline span{font-size:1.04rem;padding:0 17px}}

/* spec table */
.spec{border-top:1px solid var(--rule)}
.spec div{display:grid;grid-template-columns:230px 1fr;gap:26px;padding:15px 0;border-bottom:1px solid var(--rule)}
.spec dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-2);padding-top:.25em}
.spec dd{margin:0;font-weight:500}
.spec a{color:var(--violet);border-bottom:1px solid rgba(46,0,168,.3)}
@media(max-width:620px){.spec div{grid-template-columns:1fr;gap:4px}}

/* faq */
details{border-bottom:1px solid var(--rule)}
details summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
font-family:var(--disp);font-weight:600;font-size:1.06rem;letter-spacing:-.012em}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:6px;top:19px;font-family:var(--mono);
font-size:1.2rem;color:var(--flame);transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 0 24px;color:var(--ink-2);max-width:76ch;font-size:.98rem}
details:hover summary{color:var(--violet)}

/* cta */
.cta{background:var(--ink);color:#fff;padding:92px 0}
.cta h2{max-width:19ch;margin-bottom:20px}
.cta p{color:rgba(255,255,255,.66);max-width:52ch;font-size:1.04rem}

/* long-form */
article{max-width:74ch}
article h2{font-size:1.5rem;margin:2.2em 0 .6em}
article h2:first-child{margin-top:0}
article ul{padding-left:18px}article li{margin-bottom:.45em;color:var(--ink-2)}
article p{color:var(--ink-2)}
.pagehead{background:var(--ink);color:#fff;padding:82px 0 74px}
.pagehead .mono{color:rgba(255,255,255,.55);display:block;margin-bottom:20px}
.pagehead p{color:rgba(255,255,255,.7);max-width:58ch;margin:20px 0 0;font-size:1.06rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:0;
border:1px solid var(--rule);background:#fff}
.cards>div{padding:30px 26px;border-right:1px solid var(--rule)}
.cards>div:last-child{border-right:none}
.cards h3{margin-bottom:10px}
.cards p{font-size:.93rem;color:var(--ink-2);margin:0}
@media(max-width:760px){.cards>div{border-right:none;border-bottom:1px solid var(--rule)}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding:58px 0 34px;font-size:.9rem}
footer .ftop{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:38px;
border-bottom:1px solid var(--rule-dk)}
footer img.flogo{height:34px;width:auto;margin-bottom:16px}
footer h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
color:#fff;margin:0 0 14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a:hover{color:#fff}
footer .fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;
font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
color:rgba(255,255,255,.42)}
@media(max-width:800px){footer .ftop{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .ftop{grid-template-columns:1fr}}