html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#111;font-family:'Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#111;text-decoration:none}a:hover{color:#00AEEF}
img{max-width:100%}

.nav-link{color:#5b5b60}
.nav-link:hover{color:#111}

.btn-contact{padding:10px 18px;border-radius:100px;background:#111;color:#fff;letter-spacing:.07em}
.btn-contact:hover{background:#00AEEF;color:#fff}

.link-live{display:flex;align-items:center;gap:11px;font:400 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#8d8d93}
.link-live:hover{color:#111}
.link-live-dot{width:9px;height:9px;border-radius:50%;background:#00AEEF;flex:none}

.btn-primary{background:#111;color:#fff}
.btn-primary:hover{background:#00AEEF;color:#fff}

.btn-outline{border:1px solid rgba(0,0,0,.15);color:#111}
.btn-outline:hover{border-color:#111}

.slot-img{display:block;object-fit:cover}

/* Desktop hero: left wordmarks (right-aligned) + right VUGEN card */
.hero-row{
  display:flex;
  gap:48px;
  align-items:flex-start;
}
.hero-lines{
  flex:1;
  min-width:0;
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  z-index:24;
}
/* Keep aspect ratio: scale all lines from longest (882×120).
   Fixed height + max-width:100% was squashing glyphs horizontally. */
.hero-line{
  display:block;
  width:auto;
  height:min(88px, calc(100cqw * 120 / 882));
  max-width:none;
}
.hero-media{
  width:540px;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding-top:6px;
}
.hero-card{
  width:100%;
  height:auto;
  aspect-ratio:580/308;
  border-radius:12px;
  object-fit:cover;
}
.hero-caption{
  margin:0;
  font:300 13.5px/1.7 'Helvetica Neue',Helvetica,sans-serif;
  color:#5b5b60;
  text-wrap:pretty;
}
.hero-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:60px 0 44px;
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8d8d93;
}
.hero-cta a{color:#8d8d93;letter-spacing:.2em}
.hero-cta-chevron{font-size:17px;color:#c3c3c8}
.hero-clients{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 20px;
  padding:22px 0 0;
  border-top:1px solid rgba(0,0,0,.08);
  font:400 11px/1 'IBM Plex Mono',monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a6a6ac;
}

/* Shared centered content column */
.hero-wrap,
.manifesto-wrap{
  width:min(100%,1240px);
  margin-left:auto;
  margin-right:auto;
  padding-left:60px;
  padding-right:60px;
  box-sizing:border-box;
}

/* Manifesto — same content width as partners (shared wrap) */
.manifesto{
  padding:0 0 88px;
}
.manifesto-clients{
  margin:0;
  padding-top:22px;
  padding-bottom:0;
}
.manifesto-logo-row{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  margin-top:48px;
  margin-bottom:48px;
  box-sizing:border-box;
}
.manifesto-logo{
  display:flex;
  align-items:center;
  flex:none;
}
.manifesto-logo img{
  display:block;
  height:24px;
  width:auto;
}
.manifesto-rule{
  flex:1 1 auto;
  height:1px;
  background:rgba(0,0,0,.12);
  min-width:24px;
}
.manifesto-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:60px;
  align-items:start;
  width:100%;
  box-sizing:border-box;
}
.manifesto-title{
  margin:0;
  max-width:none;
  font:300 40px/1.16 'Helvetica Neue',Helvetica,sans-serif;
  letter-spacing:-.035em;
  color:#111;
  text-wrap:pretty;
}
.manifesto-body{
  margin:0;
  min-width:0;
  padding-top:4px;
  font:300 14.5px/1.85 'Helvetica Neue',Helvetica,sans-serif;
  color:#5b5b60;
  text-wrap:pretty;
}

/* Manifesto fluid */
[data-screen-label="Manifesto"],
[data-screen-label="Manifesto"] [data-r="wrap"]{width:min(100%,1240px);max-width:1240px;height:auto;box-sizing:border-box;margin-left:auto;margin-right:auto}
[data-screen-label="Manifesto"] [data-r="row"]{width:100%}
[data-screen-label="Manifesto"] [data-r="row"]>*{min-width:0}

/* What we do — keep media stack gaps consistent (no canvas top offsets) */
.wwd-media-grid{margin-top:24px}

/* Brand icons — right cluster on logo rule; last (orange) +15% */
.brand-icons{
  --brand-icon-size:42px;
  --brand-icon-overlap:11px;
  --brand-icon-size-last:48px; /* ~15% larger than base */
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex:none;
  margin:0;
}
.brand-icon{
  width:var(--brand-icon-size);
  height:var(--brand-icon-size);
  margin-left:calc(var(--brand-icon-overlap) * -1);
  position:relative;
  flex:none;
  display:block;
  object-fit:contain;
}
.brand-icon:first-child{margin-left:0}
.brand-icon:nth-child(1){z-index:1}
.brand-icon:nth-child(2){z-index:2}
.brand-icon:nth-child(3){z-index:3}
.brand-icon:nth-child(4){z-index:4}
.brand-icon:last-child{
  width:var(--brand-icon-size-last);
  height:var(--brand-icon-size-last);
  z-index:5;
}
.brand-icon:nth-child(n+2){
  -webkit-mask-image:radial-gradient(
    circle calc(var(--brand-icon-size) / 2) at calc(var(--brand-icon-overlap) - var(--brand-icon-size) / 2) 50%,
    transparent 99%,
    #000 100%
  );
  mask-image:radial-gradient(
    circle calc(var(--brand-icon-size) / 2) at calc(var(--brand-icon-overlap) - var(--brand-icon-size) / 2) 50%,
    transparent 99%,
    #000 100%
  );
}

/* What we do — 01/02/03 + AX strip as one block */
.wwd-cap-block{
  margin-top:72px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.wwd-cap-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.wwd-cap-grid > *{
  padding:30px 30px 34px;
  border-right:1px solid rgba(0,0,0,.08);
  box-sizing:border-box;
}
.wwd-cap-grid > *:last-child{border-right:none}

.ax-strip{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:26px;
  align-items:center;
  padding:26px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
}
.ax-strip__badge{
  font:400 12px/1 'IBM Plex Mono',monospace;
  letter-spacing:.12em;
  color:#00AEEF;
  border:1px solid rgba(0,174,239,.35);
  border-radius:100px;
  padding:6px 14px;
  white-space:nowrap;
}
.ax-strip__text{
  margin:0;
  font:300 15px/1.65 'Helvetica Neue',Helvetica,sans-serif;
  max-width:70ch;
  color:#5b5b60;
  text-wrap:pretty;
}
.ax-strip__text strong{
  color:#111;
  font-weight:400;
}
.ax-strip__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:400 11px/1 'IBM Plex Mono',monospace;
  letter-spacing:.08em;
  color:#a6a6ac;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s;
}
.ax-strip__link:hover{color:#00AEEF}
.ax-strip__arrow{display:inline-block;transition:transform .18s}
.ax-strip__link:hover .ax-strip__arrow{transform:translateX(4px)}
.work__ax{color:#00AEEF;opacity:.85}
.work__ai{color:#E10600}

.vugen-shots{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.vugen-shots-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.vugen-shot{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  background:#0C0C0E;
}
.vugen-shots-row .vugen-shot{
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
}
@media (max-width:860px){
  .ax-strip{
    grid-template-columns:1fr;
    gap:14px;
    padding:24px;
  }
}

@media (prefers-reduced-motion:reduce){
  .ax-strip__link,.ax-strip__arrow{transition:none}
  .ax-strip__link:hover .ax-strip__arrow{transform:none}
}

@media (max-width:960px){
 section{padding-top:64px!important;padding-bottom:64px!important;height:auto!important}
 [data-r="wrap"]{max-width:100%!important;padding-left:22px!important;padding-right:22px!important;margin-top:0!important;margin-bottom:0!important;height:auto!important}
 [data-screen-label="Nav"] [data-r="wrap"]{height:60px!important}
 [data-r="row"]{flex-direction:column!important;align-items:stretch!important;gap:28px!important;height:auto!important}
 [data-r="row"]>*{width:100%!important;max-width:100%!important;flex:none!important;height:auto!important}
 [data-r="grid3"],[data-r="grid4"]{grid-template-columns:1fr!important;gap:30px!important}
 [data-r="navlinks"]{gap:14px!important}
 [data-r="navlinks"]>a:nth-child(-n+4){display:none!important}
 [data-r="art"]{width:100%!important;height:auto!important;margin-left:auto}
 [data-r="wrapline"]{flex-wrap:wrap!important;justify-content:flex-start!important;gap:12px 20px!important}
 .slot-img{width:100%!important;height:210px!important;position:static!important;top:auto!important}
 h2{font-size:30px!important;line-height:1.14!important;width:auto!important}
 p{width:auto!important;max-width:100%!important;height:auto!important;max-height:none!important}

 .wwd-media-grid{margin-top:28px!important;gap:16px!important}
 [data-screen-label="What we do"] .slot-img{
   height:auto!important;
   aspect-ratio:16/9;
 }
 .vugen-shot{height:auto!important}
 .vugen-shots-row{gap:10px}
 .vugen-shots-row .vugen-shot{aspect-ratio:4/3}
 .hero-wrap,
 .manifesto-wrap{padding-left:22px!important;padding-right:22px!important}
 .manifesto{padding:0 0 56px!important}
 .manifesto-logo-row{margin-top:36px;margin-bottom:32px;flex-wrap:wrap}
 .manifesto-row{
   grid-template-columns:1fr!important;
   gap:22px!important;
   width:100%!important;
 }
 .manifesto-title{
   width:100%!important;
   max-width:100%!important;
   font-size:30px!important;
   line-height:1.16!important;
 }
 .manifesto-body{padding-top:0;font-size:14.5px;width:100%!important}
 .brand-icons{
   --brand-icon-size:36px;
   --brand-icon-overlap:10px;
   --brand-icon-size-last:41px;
   margin:0;
 }
 .wwd-cap-block{margin-top:48px}
 .wwd-cap-grid{
   grid-template-columns:1fr!important;
   gap:0!important;
 }
 .wwd-cap-grid > *{
   border-right:none!important;
   border-bottom:1px solid rgba(0,0,0,.08);
 }
 .wwd-cap-grid > *:last-child{border-bottom:none}
 .ax-strip{
   grid-template-columns:1fr;
   gap:14px;
   padding:24px;
 }
 [data-screen-label="Hero"]{padding-top:28px!important;padding-bottom:0!important}
 .hero-row{gap:22px!important}
 .hero-lines{
   align-items:flex-end!important;
   gap:4px!important;
   width:100%!important;
 }
 .hero-line:last-child{
   width:100%!important;
   height:auto!important;
 }
 .hero-lines .hero-line:not(:last-child){
   height:calc((100vw - 44px) * 120 / 882)!important;
   width:auto!important;
   max-width:none!important;
   margin-left:0!important;
 }
 .hero-media{
   width:100%!important;
   padding-top:0!important;
   gap:14px!important;
 }
 .hero-card,
 .slot-img.hero-card{
   width:100%!important;
   height:auto!important;
   aspect-ratio:580/308;
   border-radius:12px!important;
 }
 .hero-caption{font-size:13px;line-height:1.65;color:#8d8d93;max-width:100%}
 .link-live{height:auto}
 .hero-cta{margin:36px 0 28px}
 .hero-clients{justify-content:flex-start;gap:12px 20px;flex-wrap:wrap}
}