:root{
  --bg:#f6f6f6; --hero:#fdfdfd; --white:#fff; --ink:#000; --ink-2:#3f3f42; --mute:#737378;
  --mute-d:#9e9ea8; --line:#d1d1d6; --dark:#0d0d0f; --line-d:#333338;
  --display:"Instrument Sans",system-ui,sans-serif; --text:"Inter",system-ui,sans-serif;
  --gutter:clamp(16px,5vw,112px); --max:1282px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--text);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.eyebrow,.meta{font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
h2{font-size:clamp(44px,5.4vw,72px);line-height:.95;letter-spacing:-.035em;margin-top:16px}
section{padding:clamp(72px,9vw,120px) 0}

/* pills */
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:14px 26px;font-weight:700;font-size:17px;transition:transform .15s ease,opacity .15s ease;white-space:nowrap}
.pill:hover{transform:translateY(-1px);opacity:.85}
.pill-dark{background:#000;color:#fff}
.pill-light{background:#fff;color:#000}
.pill-outline{border:1.5px solid #fff;color:#fff}
.pill-outline-light{border:1.5px solid #fff;color:#fff}

/* hero */
.hero{position:relative;background:var(--hero);overflow:hidden;height:clamp(640px,100svh,900px)}
.nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding-top:40px}
.brand{font-weight:700;font-size:22px}
.nav-links{display:flex;align-items:center;gap:36px;font-weight:700;font-size:19px}
.hero-side{position:absolute;bottom:0;height:auto;width:min(29vw,630px);transition:none;max-width:none;z-index:1;pointer-events:none}
.hero-left{left:0}
.hero-right{right:0}
.hero-copy{position:relative;z-index:2;text-align:center;padding:110px 16px 180px}
.h-strike{font-family:var(--display);font-weight:700;font-size:clamp(60px,8.4vw,120px);line-height:.9;letter-spacing:-.02em;color:#dedede;text-decoration:line-through;text-decoration-thickness:.07em}
.hero h1{font-size:clamp(64px,8.4vw,120px);line-height:.9;letter-spacing:-.02em;background:linear-gradient(180deg,#000 0%,#454545 100%);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:5.6em;margin:0 auto}
.hero-sub{margin-top:28px;font-weight:700;font-size:clamp(16px,1.4vw,20px);line-height:1.25;color:#b8b8bd}

/* proof */
.proof{padding:0 0 64px;background:var(--bg)}
.brands{display:flex;flex-direction:column;justify-content:center;padding:32px 0}
@media (min-width:981px){.brands{height:20svh;min-height:130px;padding:0}}
.logos{overflow:hidden;margin-top:40px;margin-inline:calc(50% - 50vw);padding-inline:var(--gutter)}
.logos.marquee{padding-inline:0}
.logos-track{display:flex;flex-wrap:nowrap;align-items:center;gap:64px;width:max-content;margin:0 auto;background:var(--bg)}
.logos img{width:auto;flex:none}
.logos.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos.marquee .logos-track{gap:0;margin:0;will-change:transform}
.logos.marquee img{margin-right:64px;-webkit-user-drag:none}
.logos.marquee{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.logos.marquee.dragging{cursor:grabbing}
.logos .raster{mix-blend-mode:multiply}
hr{border:0;border-top:2px solid var(--line)}
.proof > .wrap{padding-top:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:56px}
.stat{font-family:var(--display);font-weight:700;font-size:48px;letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
.stats p:not(.stat){color:var(--mute);font-size:17px;line-height:1.4}

/* work */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 40px;margin-top:64px}
.card img{width:100%;height:auto;aspect-ratio:621/440;object-fit:cover;border-radius:16px;background:#dcdce0;margin-bottom:20px}
.card h3{font-size:40px;letter-spacing:-.04em;line-height:1.05;margin:10px 0 14px}
.card p{font-size:18px;line-height:1.5;color:var(--ink-2)}
.card .meta{color:var(--mute);font-size:14px}
.case-link{display:inline-block;margin-top:16px;font-weight:700;font-size:17px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:opacity .15s ease}
.case-link:hover{opacity:.6}
.card .role{font-weight:500;font-size:15px;color:#000;margin-top:14px}

/* leadership */
.lead{background:var(--white)}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:64px}
.principles div{border-top:2px solid #000;padding-top:24px}
.principles span{font-weight:500;font-size:14px;color:var(--mute)}
.principles h3{font-size:30px;letter-spacing:-.03em;margin:14px 0}
.principles p{font-size:17px;line-height:1.55;color:var(--ink-2)}

/* experience */
.experience{background:var(--dark);color:#fff}
.experience .eyebrow{color:var(--mute-d)}
.exp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.timeline{list-style:none;margin-top:64px}
.timeline li{display:grid;grid-template-columns:200px 460px 1fr;gap:40px;padding:28px 0;border-top:1px solid var(--line-d)}
.yr{font-weight:500;font-size:17px;color:var(--mute-d)}
.timeline h3{font-size:26px;letter-spacing:-.02em;line-height:1.2}
.org{display:flex;align-items:center;gap:10px;margin-top:6px;font-weight:500;font-size:14px;letter-spacing:.08em;color:var(--mute-d)}
.timeline li > p{font-size:18px;line-height:1.5;color:#cbcbd3}
.flag{flex:none;width:20px;height:14px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);background-size:cover}
.flag.at{background:linear-gradient(#ed2939 33.33%,#fff 33.33% 66.66%,#ed2939 66.66%)}
.flag.de{background:linear-gradient(#000 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66%)}
.flag.fr{background:linear-gradient(90deg,#0055a4 33.33%,#fff 33.33% 66.66%,#ef4135 66.66%)}
.flag.cz{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='7' fill='%23fff'/%3E%3Crect y='7' width='20' height='7' fill='%23D7141A'/%3E%3Cpath d='M0 0L10 7L0 14Z' fill='%2311457E'/%3E%3C/svg%3E") center/cover}

/* thinking */
.thinking{background:var(--bg)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.rules .meta{font-size:13px}
.rules h3{font-size:30px;letter-spacing:-.03em;margin:12px 0}
.rules p:not(.meta){font-size:16px;line-height:1.55;color:var(--ink-2)}

/* contact */
.contact{background:var(--dark);color:#fff;padding:clamp(96px,11vw,160px) 0 56px}
.contact .eyebrow{color:var(--mute-d)}
.contact h2{font-size:clamp(48px,7.2vw,104px);line-height:.92;letter-spacing:-.03em;margin:32px 0}
.contact-sub{font-size:clamp(18px,1.7vw,24px);line-height:1.45;color:#cbcbd3;max-width:760px}
.ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:120px;padding-top:40px;border-top:1px solid var(--line-d);font-weight:700;font-size:17px}
.foot div{display:flex;gap:36px;flex-wrap:wrap}
.foot span{color:var(--mute-d)}
.foot a{transition:color .15s ease}
.foot a.f-quotes:hover{color:#0088ff}
.foot a.f-dribbble:hover{color:#ea4c89}
.foot a.f-insta:hover{color:#ffd23f}

/* desktop hero: one composition, scaled as a whole by --s (set in script, 1 = 1440 x 900) */
@media (min-width:981px){
  .hero{--s:1;height:80svh;min-height:calc(760px*var(--s))}
  .hero-copy{padding:calc(100px*var(--s)) 16px 0}
  .h-strike,.hero h1{font-size:calc(116px*var(--s))}
  .hero-sub{font-size:max(14px,calc(18px*var(--s)));margin-top:calc(24px*var(--s))}
}
/* responsive */
@media (max-width:1200px){
  .timeline li{grid-template-columns:150px 1fr 1fr}
}
@media (max-width:980px){
  .nav-links a:not(.pill){display:none}
  .hero{height:auto;min-height:auto;display:flex;flex-wrap:wrap;align-items:flex-start}
  .nav{width:100%;order:0}
  .hero-copy{width:100%;order:1;padding:64px 16px 24px}
  .hero-side{position:relative;order:2;height:auto;width:50%;left:auto;right:auto;bottom:auto}
  .hero-left{margin-top:-4%}
  .stats,.principles{grid-template-columns:repeat(2,1fr)}
  .rules{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:8px}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr;gap:56px}
  .stats,.principles{grid-template-columns:1fr;gap:32px}
  .stat{font-size:40px}
  .card h3{font-size:32px}
  .logos-track{gap:40px}.logos.marquee img{margin-right:40px}.logos img{max-height:30px}
  .brand{font-size:19px}
  .nav{padding-top:24px}
  .foot{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pill{transition:none}}
.card img.fit-dark{object-fit:contain;background:#121214}
@media (min-width:981px){.brands .eyebrow{text-align:center}}

.work{padding-top:clamp(48px,5vw,72px)}

/* quotes page */
.q-head{background:var(--hero);padding-bottom:clamp(56px,7vw,96px)}
.q-title{margin-top:clamp(72px,8.5vw,120px)}
.q-title h1{font-size:clamp(64px,8vw,116px);line-height:.9;letter-spacing:-.02em}
.quotes{padding:40px 0 clamp(80px,9vw,120px)}
.q-list{list-style:none}
.q-row{display:grid;grid-template-columns:200px minmax(0,1040px);gap:40px;padding:48px 0 56px;border-top:2px solid var(--line)}
.q-row blockquote p{font-family:var(--display);font-weight:700;font-size:clamp(32px,3.9vw,56px);line-height:1.05;letter-spacing:-.03em}
.hang{position:absolute;transform:translateX(-100%)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.q-row cite{display:block;margin-top:24px;font-style:normal}
.q-ask{display:flex;justify-content:flex-end;align-items:center;gap:40px;padding-top:clamp(64px,9.5vw,164px);border-top:2px solid var(--line)}
.q-ask-line{width:200px;height:1px;background:#0088ff}
.q-ask p{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.03em;line-height:1.2;color:#0088ff}
.pill-blue{background:#2482fd;color:#fff}
.foot a[aria-current]{color:var(--mute-d)}
@media (max-width:980px){
  .q-row{grid-template-columns:1fr;gap:16px;padding:32px 0 40px}
  .q-ask{justify-content:flex-start;flex-wrap:wrap;gap:24px}.q-ask-line{display:none}.q-ask p{font-size:32px}
}

/* phone header: tighter title, pictures pulled up over their transparent top band */
@media (max-width:980px){
  .hero-copy{padding:40px 16px 0}
  .h-strike,.hero h1{font-size:min(15vw,96px)}
  .hero-sub{font-size:15px;margin-top:16px}
  .hero-left{margin-top:-17vw}
  .hero-right{margin-top:-13vw}
  .hero{padding-bottom:8px}
}

/* cursor tag over the hero title */
.cursor-tag{position:fixed;left:0;top:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .15s ease;will-change:transform;transform-origin:0 0}
.cursor-tag.on{opacity:1}
.cursor-tag svg{display:block;margin:-2.4px 0 0 -2.4px}
.cursor-tag span{position:absolute;left:24px;top:29px;white-space:nowrap;background:#257df0;color:#fff;font:700 20px/24px var(--text);padding:13px 20px;border-radius:4.8px 21.6px 21.6px 21.6px;transform:scale(.4);transform-origin:0 0;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.cursor-tag.on span{transform:scale(1)}
.cursor-tag.flip span{left:auto;right:6px;border-radius:21.6px 4.8px 21.6px 21.6px;transform-origin:100% 0}
.hero.tag-on h1{cursor:none}
@media (hover:none),(pointer:coarse){.cursor-tag{display:none}}
@media (prefers-reduced-motion:reduce){.cursor-tag span{transition:none}}