:root{--ink:#15141c;--panel:#23222a;--purple:#5727e0;--lav:#875dff;--lilac:#ab8dff;--orange:#f4845f;--gray:#b9b9b9;--muted:#8f8c9a;--muted2:#9b98a6;--line:#ffffff1a;--disp:'Urbanist',sans-serif;--body:'Instrument Sans',sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:#fff;font-family:var(--body)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}a:hover{color:var(--lav)}
button{font:inherit;cursor:pointer}
.srlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pill{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 38px;border-radius:100px;background:var(--purple);color:#fff;font:600 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;border:none;transition:background .2s}
.pill:hover{background:#6a3bf0;color:#fff}
.pill.ghost{background:transparent;border:2px solid var(--purple)}
.pill.ghost:hover{background:var(--purple)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px clamp(20px,4vw,80px);border-bottom:1px solid var(--line);position:sticky;top:0;background:#15141cf2;backdrop-filter:blur(8px);z-index:50}
.navlogo img{height:30px}
.navlinks{display:flex;gap:clamp(18px,3vw,44px);font-size:16px;color:#d6d4de}
.navlinks a{padding:10px 0}
.navright{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tag{display:flex;align-items:center;gap:10px;color:var(--lilac);font-size:18px}
.tag i{width:10px;height:2px;background:var(--lilac)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);padding:clamp(48px,7vw,110px) clamp(20px,4vw,80px) clamp(56px,8vw,120px);position:relative;align-items:center}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 500px at 88% 90%,#f4845f26,transparent 70%),radial-gradient(circle 450px at 4% 60%,#f4845f1a,transparent 70%)}
h1{font:600 clamp(42px,4.8vw,92px)/1.06 var(--disp);letter-spacing:-.01em;margin-top:28px;max-width:15ch;text-wrap:pretty}
.herotext{color:var(--gray);font-size:clamp(16px,1.1vw,20px);line-height:1.65;max-width:560px;margin:26px 0 38px}
.heroimg{border-radius:8px;overflow:hidden;justify-self:end}
.heroimg img{width:561px;height:701px;object-fit:cover;filter:grayscale(1)}
.ticker{background:var(--purple);padding:24px 0;overflow:hidden}
.tickertrack{display:flex;gap:32px;width:max-content;font:800 clamp(20px,1.6vw,30px)/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;animation:tick 98s linear infinite;white-space:nowrap}
@keyframes tick{to{transform:translateX(-50%)}}
.svc{padding:clamp(64px,7vw,130px) clamp(20px,4vw,80px)}
.eyebrow{font:800 15px var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--lilac);margin-bottom:26px}
h2{font:900 clamp(38px,4.4vw,84px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(36px,4vw,70px);background:var(--line);border:1px solid var(--line)}
.svccell{background:var(--ink);padding:52px 44px 68px;min-height:360px;display:flex;flex-direction:column;gap:20px}
.svccell.accent{background:var(--purple)}
.svccell .n{font:800 16px var(--disp);color:var(--orange)}
.svccell.accent .n{color:#fff}
.svccell h3{font:800 clamp(26px,2vw,38px)/1.05 var(--disp);text-transform:uppercase}
.svccell p{color:#c9c6d4;font-size:17px;line-height:1.65;margin-top:auto}
.svccell.accent p{color:#e6dfff}
.stroke{padding:clamp(48px,5vw,100px) 0;overflow:hidden}
.stroke>div{display:flex;width:max-content;font:700 clamp(64px,7.8vw,150px)/1.1 var(--disp);text-transform:lowercase;white-space:nowrap}
.s1{color:#fff3;animation:tick 60s linear infinite}
.s2{color:transparent;-webkit-text-stroke:3px #fff3;animation:tick 60s linear infinite reverse}
.work{background:#fff;color:var(--ink);padding:clamp(64px,7vw,120px) clamp(20px,5vw,100px)}
.work h2{color:var(--ink);text-align:center;font:600 clamp(34px,3.2vw,62px)/1.12 var(--disp);text-transform:none}
.tabs{display:flex;gap:16px;max-width:720px;margin:clamp(28px,2.5vw,48px) auto clamp(40px,3.6vw,70px)}
.tab{flex:1;padding:18px 0;text-align:center;border:2px solid var(--purple);border-radius:3px;font-weight:600;font-size:17px;background:#fff;color:var(--ink);transition:background .15s,color .15s}
.tab.on{background:var(--purple);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(40px,4vw,80px) clamp(24px,2.5vw,48px)}
.grid[hidden]{display:none}
.wcard{display:flex;flex-direction:column}
.wimg{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.wimg img{width:100%;height:100%;object-fit:contain}
.wimg .go{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.wcard:hover .go{opacity:1}
.go b{letter-spacing:2px;text-transform:uppercase;background:var(--purple);border:2px solid #fff;border-radius:5px;padding:18px 20px;font-size:15px;font-weight:600;color:#fff;box-shadow:0 0 15px #00000080}
.ph{width:100%;height:100%;background:#f2f1f6;display:flex;align-items:center;justify-content:center;color:var(--muted2);font:600 15px var(--body);text-align:center;padding:20px;border-radius:4px}
.cst{text-align:center;margin-top:20px}
.cst h3{color:var(--purple);font-size:18px;font-weight:700;font-family:var(--body)}
.cst span{color:var(--muted2);font-size:15px;display:block;margin-top:8px}
/* Branding logos are all 368x244 masters. `cover` cropped their left/right
   edges to fill the 4:3 card and upscaled them ~25%, which is what made them
   look stretched and soft. Contain them, and never scale past 1:1 — they drop
   below natural size only when the card itself is narrower. */
.grid.brand .wimg img{object-fit:contain;width:auto;height:auto;max-width:100%;max-height:100%}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,100px);padding:clamp(64px,7vw,130px) clamp(20px,4vw,80px)}
.contact h2{font:600 clamp(36px,3.2vw,62px)/1.12 var(--disp);text-transform:none;margin-top:26px}
.contactcopy p:last-child{color:var(--gray);font-size:18px;line-height:1.65;margin-top:20px;max-width:440px}
form{display:grid;gap:16px;align-content:start}
input,textarea{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px 20px;color:#fff;font:400 16px var(--body)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{outline:2px solid var(--purple);outline-offset:0}
.buds{display:flex;gap:12px;flex-wrap:wrap;border:none;padding:0}
.bud input{position:absolute;opacity:0;width:0;height:0}
.bud span{display:inline-block;padding:13px 22px;border-radius:100px;border:1px solid #ffffff26;font-size:15px;color:#d6d4de;cursor:pointer;transition:background .15s}
.bud input:checked+span{background:var(--purple);border-color:var(--purple);color:#fff}
.bud input:focus-visible+span{outline:2px solid var(--lav)}
form .pill{width:max-content}
.formnote{color:var(--orange);font-size:16px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:44px clamp(20px,4vw,80px);border-top:1px solid var(--line);color:var(--muted);font-size:15px;flex-wrap:wrap}
.foot img{height:26px}
.social{display:inline-flex;gap:18px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.hero{grid-template-columns:1fr}.heroimg{justify-self:start}.heroimg img{max-width:100%;height:auto}.svcgrid{grid-template-columns:1fr}.svccell{min-height:0;padding:40px 32px}.contact{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.burger{display:flex}.navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#15141c;border-bottom:1px solid var(--line);padding:8px 20px 16px}.navlinks.open{display:flex}.navlinks a{padding:14px 0;font-size:18px;border-bottom:1px solid var(--line)}.navlinks a:last-child{border-bottom:none}.nav{padding:14px 20px}.nav .pill.ghost{height:44px;padding:0 22px}.hero{padding-top:40px}h1{margin-top:20px}.grid{grid-template-columns:1fr}.tabs{flex-direction:column}.foot{flex-direction:column;align-items:flex-start;gap:14px}}

/* Reduced motion: the ticker and stroke marquees are decorative, so stop them
   outright rather than slowing them, kill smooth scrolling, and collapse the
   hover/UI transitions. Nothing here hides content — everything stays legible,
   the marquees simply hold still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .tickertrack, .s1, .s2 { animation: none }
  .pill, .burger span, .tab, .wimg .go, .bud span { transition: none }
}