/* Fonts */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-moda-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

:root {
  --bg: #05090e;
  --ink: #091520;
  --text: #ffffff;
  --muted: #7898ac;
  --glass: rgba(120, 152, 172, .14);
  --glass-2: rgba(184, 213, 229, .10);
  --veil: rgba(19, 36, 50, .58);
  --line: rgba(111, 140, 159, .45);
  --line-soft: rgba(184, 213, 229, .14);
  --gold-1: #f0c477;
  --gold-2: #d09a45;
  --gold-text: #c49242;
  --serif: 'Bodoni Moda', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* long, soft ease-out for entrances — no abrupt stop at the end */
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --m: clamp(16px, 4vw, 80px);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; overflow-wrap: break-word; word-break: break-word; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* overflow-wrap only: `word-break: break-word` breaks eagerly and split
   TECHNOLOGY across lines in the narrow capability cards */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; overflow-wrap: break-word; }
button { font: inherit; color: inherit; }
button, a, .ag-pill, .ag-burger {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--m); }
[id] { scroll-margin-top: calc(var(--header-offset, 100px) + 24px); }

/* Shared type */
.ag-display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: clamp(26px, 3.9vw, 54px);
}
.ag-sub { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; }
.ag-lead { font-size: clamp(15px, 1.45vw, 20px); line-height: 1.28; }
.ag-gold { color: var(--gold-text); font-weight: 700; }

/* Pills and buttons */
.ag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  min-height: 50px;
  border-radius: 49px;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border-radius: 49px;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.ag-btn:hover { background: rgba(120, 152, 172, .28); border-color: rgba(184, 213, 229, .32); }
.ag-btn--gold { color: var(--gold-1); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  overflow: visible;
  background: rgba(5, 9, 14, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 121px;
}
.brand {
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 43px); }
.nav a {
  position: relative;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .82);
  transition: color .25s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.ag-burger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 110;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.ag-burger span {
  position: absolute; left: 12px; right: 12px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.ag-burger span:nth-child(1) { top: 15px; }
.ag-burger span:nth-child(2) { top: 21px; }
.ag-burger span:nth-child(3) { top: 27px; }
.ag-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.ag-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ag-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Hero */
.ag-hero {
  position: relative;
  isolation: isolate;
  min-height: 1112px;
  display: flex;
  align-items: center;
  padding-block: 60px;
  overflow: clip;
}
.ag-hero__media { position: absolute; inset: 0; z-index: -2; }
/* hero.avif ships the full uncropped frame; cover + centre reproduces the
   Figma window (0.14…0.86 vs the macket's 0.17…0.86) and leaves the framing
   a CSS knob instead of baking it into the file */
.ag-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.ag-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(5, 9, 14, .95) 0%, rgba(5, 9, 14, .76) 36%, rgba(5, 9, 14, .14) 62%, rgba(5, 9, 14, 0) 80%),
    linear-gradient(180deg, rgba(5, 9, 14, .55) 0%, rgba(5, 9, 14, 0) 22%, rgba(5, 9, 14, 0) 72%, rgba(5, 9, 14, .88) 100%);
}
/* above the pill layer: on narrow screens a pill used to land on top of the
   CTA label */
.ag-hero__inner { position: relative; z-index: 1; width: 100%; }
.ag-hero__copy { max-width: 700px; }
.ag-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6.7vw, 96px);
  line-height: 1.04;
  letter-spacing: -.005em;
}
.ag-hero h1 span { display: block; }
.ag-hero h1 .ag-hero__gold { color: var(--gold-2); }

/* Hero is above the fold: pure CSS keyframes, never an observer, and the
   LCP <img> itself is left alone. */
@keyframes ag-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes ag-pill-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.9); }
  to { opacity: 1; transform: none; }
}
.ag-hero h1 span,
.ag-hero__text,
.ag-hero__cta > * {
  animation: ag-rise .95s var(--ease-reveal) var(--ag-d, 0s) both;
}
.ag-hero h1 span:first-child { --ag-d: .05s; }
.ag-hero h1 .ag-hero__gold { --ag-d: .18s; }
.ag-hero__text { --ag-d: .38s; }
.ag-hero__cta > :first-child { --ag-d: .52s; }
.ag-hero__cta > :nth-child(2) { --ag-d: .62s; }
.ag-hero__tags .ag-pill {
  animation: ag-pill-in .8s var(--ease-reveal) var(--ag-d, 0s) both;
}
.ag-tag--corporate { --ag-d: .8s; }
.ag-tag--marketing { --ag-d: .9s; }
.ag-tag--it { --ag-d: 1s; }
.ag-tag--consultants { --ag-d: 1.1s; }
.ag-tag--software { --ag-d: 1.2s; }
.ag-hero__text {
  margin-top: clamp(20px, 2.4vw, 34px);
  margin-left: clamp(0px, 1.4vw, 20px);
  max-width: 690px;
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.4;
}
.ag-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(24px, 5vw, 86px);
  margin-left: clamp(0px, 5.5vw, 79px);
}
.ag-hero__tags { position: absolute; inset: 0; pointer-events: none; }
.ag-hero__tags .ag-pill {
  position: absolute;
  padding: 15px 20px;
  min-height: 48px;
  text-transform: none;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ag-hero__tags svg { width: 18px; height: 18px; flex-shrink: 0; }
.ag-tag--corporate { left: 62.6%; top: 33.5%; }
.ag-tag--marketing { left: 81.3%; top: 41.2%; }
.ag-tag--it { left: 53.5%; top: 57.6%; }
.ag-tag--consultants { left: 81%; top: 63.5%; }
.ag-tag--software { left: 64.7%; top: 71.9%; }
.ag-hero__stage { display: none; }

/* Marquee */
.ag-marquee { padding-block: clamp(30px, 4vw, 56px); overflow: clip; }
/* no `gap` here: an odd gap count would make the -50% loop jump at the seam */
.ag-marquee__track {
  display: flex;
  width: max-content;
  animation: ag-scroll 34s linear infinite;
}
.ag-marquee__track span {
  padding-right: clamp(28px, 4.4vw, 64px);
  font-family: var(--serif);
  font-size: clamp(26px, 3.9vw, 54px);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .92);
}
@keyframes ag-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* About */
.ag-about { padding-block: clamp(40px, 5vw, 80px); }
.ag-about__row { display: flex; align-items: flex-start; gap: clamp(24px, 11vw, 169px); }
.ag-about__body { flex: 1; min-width: 0; text-align: right; }
.ag-about__body h2 { margin-bottom: clamp(18px, 2.6vw, 38px); }
.ag-about__body p + p { margin-top: 6px; }

/* Client engagement model */
.ag-engage { padding-block: clamp(48px, 7vw, 110px); }
.ag-engage__head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(28px, 4vw, 60px);
}
.ag-engage__head h2 { flex-shrink: 0; }
.ag-engage__rule { flex: 1; height: 1px; background: var(--muted); opacity: .55; }
.ag-engage__grid {
  display: grid;
  grid-template-columns: 263px minmax(0, 1fr) 266px;
  align-items: center;
  gap: clamp(20px, 3.5vw, 62px);
}
.ag-engage__card {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: clip;
  padding: 15px;
}
.ag-engage__card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ag-engage__card--round { aspect-ratio: 1; border-radius: 50%; }
.ag-engage__card--wide { min-height: 252px; border-radius: 126px; }
.ag-engage__veil {
  position: absolute;
  inset: 15px;
  z-index: -1;
  background: var(--veil);
  border-radius: 122px;
}
.ag-engage__card--round .ag-engage__veil { border-radius: 50%; }
.ag-engage__inner { position: relative; max-width: 518px; padding-inline: clamp(12px, 3vw, 34px); text-align: center; }
.ag-engage__big { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.2; }
.ag-engage__note { font-size: clamp(14px, 1.45vw, 20px); line-height: 1.2; }
.ag-engage__card--wide .ag-engage__big { color: var(--gold-2); line-height: .95; }
.ag-engage__card--wide .ag-engage__note { margin-top: 12px; }
.ag-engage__card--stages .ag-engage__big { color: var(--gold-2); }

/* Process */
.ag-process { padding-block: clamp(48px, 7vw, 120px) clamp(40px, 6vw, 90px); }
.ag-process__head { max-width: 929px; }
.ag-process__head h2 { margin-top: clamp(24px, 4vw, 47px); }
.ag-process__head .ag-sub { margin-top: clamp(14px, 2vw, 24px); }
.ag-process__head .ag-lead { margin-top: clamp(12px, 1.8vw, 24px); }
.ag-process__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  margin-top: clamp(40px, 7vw, 103px);
}
.ag-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 628px;
  padding: 30px 26px 24px;
  border-radius: 20px;
  overflow: clip;
}
.ag-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ag-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 79%;
  z-index: -1;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.ag-card__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 52px);
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 31px;
  background: var(--glass-2);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(184, 213, 229, .12);
}
.ag-card__num {
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.14;
  text-transform: uppercase;
}
.ag-card__num b { display: block; font-weight: 400; }
.ag-card__badge {
  align-self: flex-end;
  max-width: 271px;
  padding: 18px 15px;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%);
  color: var(--ink);
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
}
.ag-card__desc { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.28; }
.ag-card__tags {
  margin-top: clamp(18px, 2.6vw, 34px);
  padding-inline: clamp(6px, 2vw, 24px);
  font-size: clamp(13px, 1.3vw, 18px);
  line-height: 1.28;
  text-align: center;
}

/* Statements */
.ag-statement { text-align: center; }
.ag-statement .ag-display { display: block; }
.ag-statement__note {
  display: block;
  margin-top: clamp(18px, 3.2vw, 46px);
  font-size: clamp(13px, 1.45vw, 20px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Capabilities */
.ag-capabilities {
  position: relative;
  isolation: isolate;
  padding-block: clamp(30px, 5vw, 68px) clamp(56px, 8vw, 130px);
}
.ag-capabilities__media {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: -2;
  height: clamp(420px, 59vw, 853px);
  overflow: clip;
}
.ag-capabilities__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
.ag-capabilities__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 9, 14, .92) 0%, rgba(5, 9, 14, .3) 26%, rgba(5, 9, 14, .58) 68%, var(--bg) 100%);
}
.ag-capabilities__stage { padding-top: clamp(64px, 9vw, 138px); }
.ag-capabilities__head { margin-left: auto; max-width: 736px; text-align: right; }
.ag-capabilities__head .ag-pill { margin-bottom: clamp(20px, 3vw, 47px); }
.ag-capabilities__head h2 { margin-bottom: clamp(14px, 1.8vw, 24px); }
.ag-capabilities__head .ag-lead { margin-top: clamp(14px, 1.8vw, 24px); }
.ag-cap-list { display: grid; gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(40px, 6vw, 84px); }
.ag-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(28px, 7vw, 95px);
  padding: clamp(26px, 3.7vw, 53px) clamp(22px, 5.2vw, 75px);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(120, 152, 172, .10) 0%, rgba(120, 152, 172, .02) 55%, rgba(120, 152, 172, 0) 100%);
}
.ag-cap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(200, 224, 240, .40) 0%, rgba(200, 224, 240, .06) 46%, rgba(200, 224, 240, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ag-cap__body { flex: 1 1 611px; min-width: 0; }
.ag-cap__no { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.3vw, 32px); line-height: 1; }
.ag-cap__no svg { width: 23px; height: 23px; flex-shrink: 0; color: #b9d3ea; }
.ag-cap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.ag-cap__body h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.14;
  text-transform: uppercase;
}
.ag-cap__desc { margin-top: clamp(18px, 2.8vw, 39px); font-size: clamp(14px, 1.45vw, 20px); line-height: 1.28; }

/* Show more / less — only ever shown once the card collapses at 1220px */
.ag-cap__more {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* fixed box per the design, and it stops the width jumping when the label
     swaps to the shorter "Show Less" */
  min-width: 110px;
  min-height: 34px;
  padding-inline: 5px;
  border: .5px solid var(--gold-1);
  border-radius: 5px;
  background: rgba(3, 3, 3, .35);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.ag-cap__more-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ag-cap__tags { flex: 0 1 425px; min-width: 0; }
.ag-cap__tags li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: clamp(14px, 1.75vw, 24px);
  line-height: 1.2;
  text-align: right;
}
.ag-cap__tags li + li { margin-top: 14px; }
.ag-cap__tags li::after {
  content: '';
  flex-shrink: 0;
  width: 19px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
}
.ag-capabilities .ag-statement { margin-top: clamp(48px, 7vw, 102px); }

/* Stats */
.ag-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 84px);
  padding: 21px clamp(16px, 2vw, 28px);
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  background: linear-gradient(135deg, rgba(120, 152, 172, .10) 0%, rgba(120, 152, 172, 0) 100%);
}
.ag-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(200, 224, 240, .36) 0%, rgba(200, 224, 240, .04) 52%, rgba(200, 224, 240, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* stays a 2-column grid all the way down to 320px — the icon and type scale
   with the viewport instead of the layout collapsing to one column */
.ag-stat { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ag-stat svg { width: clamp(34px, 9vw, 100px); height: clamp(34px, 9vw, 100px); flex-shrink: 0; }
.ag-stat__body { min-width: 0; }
.ag-stat__label { display: block; font-size: clamp(10px, 2.4vw, 14.4px); line-height: 1.15; text-transform: uppercase; }
.ag-stat__value {
  display: block;
  margin-block: clamp(4px, 1.4vw, 8px);
  font-size: clamp(22px, 6vw, 50.4px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Footer */
.site-footer { background: #000; padding-block: 50px; }
.site-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px 20px;
  margin-bottom: 60px;
}
.site-footer__left { flex: 0 1 500px; width: 100%; }
.site-footer__right { flex: 0 1 600px; width: 100%; }
.site-footer__brand {
  display: inline-block;
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.site-footer__legal-name { color: var(--muted); font-size: 16px; }
.site-footer__title { margin-bottom: 20px; font-size: clamp(20px, 2vw, 24px); font-weight: 500; }
.site-footer__address { font-style: normal; }
.site-footer__address li { display: flex; gap: 20px; margin-bottom: 10px; font-size: 16px; }
.site-footer__address li > span:first-child { flex: 0 0 110px; }
.site-footer__address li > span:last-child { color: var(--muted); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.site-footer__nav a { color: var(--muted); transition: color .25s var(--ease); }
.site-footer__nav a:hover { color: #fff; }
.site-footer__copy { color: var(--muted); font-size: 15px; text-align: center; }

/* Legal pages */
.ag-legal { padding-block: clamp(48px, 7vw, 110px); }
.ag-legal h1 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 60px); line-height: 1.08; text-transform: uppercase; }
.ag-legal__date { margin-top: 14px; color: var(--muted); font-size: 15px; }
.ag-legal h2 {
  margin-top: clamp(32px, 4vw, 54px);
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.16;
  text-transform: uppercase;
}
.ag-legal p, .ag-legal li { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.ag-legal p { margin-top: 16px; }
.ag-legal ul { margin-top: 16px; display: grid; gap: 10px; }
.ag-legal ul li { position: relative; padding-left: 22px; }
.ag-legal ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
}

/* Cookie banner */
.ag-cookie {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(8, 14, 23, .96);
  border: 1px solid var(--line-soft);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.ag-cookie p { font-size: 14px; line-height: 1.45; max-width: 720px; color: rgba(255, 255, 255, .84); }
.ag-cookie a { color: var(--gold-1); text-decoration: underline; }
.ag-cookie__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Parallax layers — JS writes only the offsets, so a layer with no JS (or
   reduced motion) simply renders at rest. */
[data-parallax] {
  transform: translate3d(var(--pxx, 0px), var(--pxy, 0px), 0);
}
/* Drift headroom: the image is grown past its box by --px-room on every side,
   so it can travel that far without exposing an edge. Stated in px rather than
   as a scale, because JS clamps travel to exactly this value. */
.ag-hero__media img[data-parallax],
.ag-capabilities__media img[data-parallax],
.ag-engage__card img[data-parallax] {
  /* required: the hero and capabilities images were only sized to 100%, never
     positioned, so a negative inset on them did nothing */
  position: absolute;
  inset: calc(-1 * var(--px-room));
  width: calc(100% + 2 * var(--px-room));
  height: calc(100% + 2 * var(--px-room));
  /* the base `img { max-width: 100% }` would clamp the grown width back to the
     container and leave the far edge uncovered */
  max-width: none;
  max-height: none;
}
.ag-hero__media img[data-parallax] { --px-room: 26px; }
.ag-capabilities__media img[data-parallax] { --px-room: 26px; }
.ag-engage__card img[data-parallax] { --px-room: 20px; }

/* Scroll reveal */
.ag-reveal {
  opacity: 0;
  transform: translate3d(var(--ag-x, 0px), var(--ag-y, 24px), 0) scale(var(--ag-s, 1));
  transition:
    opacity .95s var(--ease-reveal) var(--ag-delay, 0s),
    transform .95s var(--ease-reveal) var(--ag-delay, 0s);
}
.ag-reveal.is-in { opacity: 1; transform: none; }
.ag-reveal--left { --ag-x: -34px; --ag-y: 0px; }
.ag-reveal--right { --ag-x: 34px; --ag-y: 0px; }
.ag-reveal--zoom { --ag-y: 14px; --ag-s: .93; }
.ag-reveal--soft { --ag-y: 12px; }
.ag-reveal--line {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease-reveal) var(--ag-delay, 0s);
}
.ag-reveal--line.is-in { transform: scaleX(1); }

/* Tablet */
@media (max-width: 1220px) {
  .ag-burger { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: 100%;
    max-width: 100vw;
    max-height: calc(100dvh - var(--header-offset, 80px));
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--m) 28px;
    background: linear-gradient(180deg, #05090e 0%, #0b1420 100%);
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s var(--ease), opacity .25s var(--ease), visibility 0s linear .3s;
  }
  .nav[data-open="true"] {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s var(--ease), opacity .25s var(--ease), visibility 0s linear 0s;
  }
  .nav a { width: 100%; padding: 16px 0; font-size: 18px; border-bottom: 1px solid var(--line-soft); }
  .nav a::after { display: none; }

  .site-header__row { min-height: 76px; }
  .ag-hero { min-height: 820px; }
  .ag-engage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-engage__card--round { width: 100%; max-width: 320px; margin-inline: auto; }
  .ag-engage__card--wide { grid-column: 1 / -1; order: -1; }
  .ag-card { min-height: 540px; }
  .ag-cap { flex-direction: column; align-items: stretch; gap: 26px; }
  /* flex-basis turns into height once the row flips to a column */
  .ag-cap__body, .ag-cap__tags { flex: none; }
  .ag-cap__tags li { justify-content: flex-start; text-align: left; }
  .ag-cap__tags li::after { order: -1; }

  /* collapsed by default, opened by the Show More toggle; the height tween
     itself is run on the card by JS (see initCapToggles) */
  .ag-cap { gap: 0; }
  .ag-cap__more { display: inline-flex; }
  .ag-cap__desc, .ag-cap__tags { display: none; }
  .ag-cap.is-open .ag-cap__desc,
  .ag-cap.is-open .ag-cap__tags { display: block; }
  .ag-cap.is-open .ag-cap__tags { margin-top: 26px; }
  .ag-cap.is-animating { overflow: hidden; }
}

/* Mobile */
@media (max-width: 820px) {
  .ag-hero {
    min-height: 0;
    align-items: flex-start;
    padding-block: 58px 0;
    text-align: center;
  }
  .ag-hero__media img { object-position: 50% center; }
  .ag-hero::after {
    background: linear-gradient(180deg, rgba(5, 9, 14, .9) 0%, rgba(5, 9, 14, .78) 16%, rgba(5, 9, 14, .5) 32%, rgba(5, 9, 14, .12) 50%, rgba(5, 9, 14, .5) 84%, var(--bg) 100%);
  }
  .ag-hero__copy { max-width: none; }
  .ag-hero h1, .ag-hero__text { text-shadow: 0 2px 20px rgba(5, 9, 14, .9); }
  .ag-hero__text { margin-inline: auto; }
  .ag-hero__cta { flex-direction: column; align-items: center; margin-left: 0; }
  .ag-hero__cta .ag-btn { min-width: 210px; }
  /* scroll parallax needs a far bigger travel than the pointer one to read at
     all on a phone, so the drift headroom grows with it */
  .ag-hero__media img[data-parallax] { --px-room: 58px; }
  /* cover fits this portrait canvas by width, so the surplus height has to be
     cropped off the empty sky at the top rather than off the scene's base:
     anchor the picture to the bottom and keep the drift headroom above it */
  .ag-hero__media img[data-parallax] {
    inset: calc(-1 * var(--px-room)) calc(-1 * var(--px-room)) 0;
    height: calc(100% + var(--px-room));
    object-position: 50% bottom;
  }
  .ag-capabilities__media img[data-parallax] { --px-room: 54px; }
  .ag-engage__card img[data-parallax] { --px-room: 36px; }

  .ag-hero__stage { display: block; height: 320px; }
  /* headroom so the scroll parallax cannot push the lowest pill past the
     hero's clipped bottom edge */
  .ag-hero__tags { inset: 0 0 62px; }
  .ag-hero__tags .ag-pill { padding: 9px 12px; min-height: 34px; font-size: 11px; gap: 6px; }
  .ag-hero__tags svg { width: 13px; height: 13px; }
  .ag-tag--consultants { left: 4%; top: 58%; }
  .ag-tag--marketing { left: auto; right: 4%; top: 66%; }
  .ag-tag--corporate { left: 13%; top: 73.5%; }
  .ag-tag--software { left: auto; right: 4%; top: 82%; }
  .ag-tag--it { left: 15%; top: 89%; }

  .ag-marquee__track { animation-duration: 22s; }
  .ag-about__row { flex-direction: column; align-items: center; gap: 26px; }
  .ag-about__body { text-align: center; }
  .ag-engage__head { flex-direction: column; align-items: stretch; text-align: center; }
  .ag-engage__rule { width: 100%; }
  .ag-engage__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ag-engage__card--round { max-width: 250px; margin-inline: auto; }
  .ag-engage__card--wide { min-height: 210px; border-radius: 110px; order: 0; }
  .ag-process__head { text-align: center; margin-inline: auto; }
  .ag-process__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ag-card { min-height: 0; padding: 20px 16px; }
  .ag-card__tags { display: none; }
  .ag-card__desc { text-align: right; }
  .ag-card__panel { gap: 20px; padding: 18px; border-radius: 22px; }
  .ag-card__badge { max-width: 240px; padding: 14px; }
  .ag-capabilities__head { text-align: center; margin-inline: auto; }
  .ag-capabilities__stage { padding-top: 130px; }
  .ag-cap { padding: 22px 18px; }
  .ag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding: 22px 16px; }
  .site-footer__top { flex-direction: column; }
  .site-footer__left, .site-footer__right { flex: none; }
  .site-footer__bottom { flex-direction: column; }
  .site-footer__copy span { display: block; }
  .ag-cookie { flex-direction: column; align-items: stretch; padding: 18px; }
  .ag-cookie__actions .ag-btn { flex: 1; }
}

@media (max-width: 520px) {
  .site-header__row { min-height: 64px; }
  .ag-hero { padding-top: 40px; }
  .ag-hero__stage { height: 270px; }
  /* the copy is taller here, so the pill band starts below it instead of
     hiding behind the CTA */
  .ag-tag--consultants { top: 65%; }
  .ag-tag--marketing { top: 72%; }
  .ag-tag--corporate { top: 79%; }
  .ag-tag--software { top: 86%; }
  .ag-tag--it { top: 93%; }
  .ag-engage__card--wide { border-radius: 40px; min-height: 0; padding: 12px; }
  .ag-engage__card--wide .ag-engage__veil { inset: 12px; border-radius: 30px; }
  .ag-engage__inner { padding-block: 18px; }
  .site-footer__address li { flex-direction: column; gap: 2px; }
  .site-footer__address li > span:first-child { flex: none; }
}

@media (max-width: 430px) {
  .ag-hero__cta .ag-btn { min-width: 0; padding-inline: 18px; }
  .ag-card__badge { max-width: none; align-self: stretch; text-align: center; }
  /* the toggle stays on the heading's line at every width, so here the button
     gives width back and the heading steps down enough that its longest word
     (INFRASTRUCTURE) still fits without breaking mid-word */
  .ag-cap__head { gap: 10px; }
  .ag-cap__more { min-width: 84px; }
  .ag-cap__body h3 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* delays too, or a staggered item still waits out its full delay at opacity 0 */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
  .ag-reveal, .ag-reveal--line { opacity: 1; transform: none; }
}