/* ==========================================================================
   Velaharra — Agency page (artboard 2). Page-specific styles, .ag- prefix.
   Shared tokens/components come from styles.css.
   ========================================================================== */

/* ---- shared small label ------------------------------------------------ */
.ag-label {
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- Hero -------------------------------------------------------------- */
.ag-hero__copy { padding-right: max(12px, 2vw); }

.ag-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-hero-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-left: -0.03em;
}
.ag-hero__tagline {
  font-family: var(--serif);
  font-size: max(22px, 2.6vw);
  line-height: 1.2;
  color: var(--black);
  margin-top: .45em;
}
.ag-hero__body {
  max-width: 36em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
  margin-top: 2.4em;
}
.ag-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: max(12px, 1.4vw);
  margin-top: max(28px, 3.2vw);
}
.ag-hero__actions .btn-arrow { margin-top: 0; }

/* quick staggered entrance for the hero copy */
.ag-hero__title, .ag-hero__tagline, .ag-hero__body, .ag-hero__actions .btn-arrow {
  opacity: 0;
  animation: ag-row-in .9s var(--ease) both;
  animation-delay: calc(.15s + var(--r, 0) * .12s);
}
@keyframes ag-row-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- What we do: four numbered columns --------------------------------- */
.ag-what {
  background: var(--light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: max(36px, 3.2vw) var(--edge) max(32px, 2.8vw);
}
.ag-what__grid {
  display: flex;
  margin-top: max(24px, 2.2vw);
}
.ag-what__grid > * { flex: 1 1 0; min-width: 0; }
.ag-what__grid .pillar { padding-left: max(10px, 2vw); padding-right: max(10px, 2vw); }
.ag-what__grid .pillar__body { max-width: 20em; }

/* ---- Statement (shared .statement, smaller for four lines) ------------- */
.ag-statement { background: var(--white); }
.ag-statement .statement__title {
  font-size: max(32px, 4.4vw);
  line-height: 1.08;
  padding-left: 0;
}

/* ---- Who we work with -------------------------------------------------- */
.ag-who {
  background: var(--light);
  border-bottom: 1px solid var(--line);
  padding: max(32px, 2.8vw) var(--edge) max(28px, 2.4vw);
}
.ag-who__row {
  list-style: none;
  margin: max(18px, 1.6vw) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ag-who__row + .ag-who__row { margin-top: max(10px, .8vw); }
.ag-who__row li {
  flex: 1 1 0;
  text-align: center;
  padding: .35em .6em;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  color: var(--black);
  border-left: 1px solid var(--line);
  white-space: nowrap;
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), color .3s ease;
}
.ag-who__row li:first-child { border-left: 0; }
@media (hover: hover) {
  .ag-who__row li:hover { transform: translateY(-4px); }
}

/* ---- A selective approach (shared .join grid + lift) ------------------- */
.ag-sel { background: var(--light2); }
.ag-sel .join__copy { background: var(--light2); }
.ag-sel__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: max(26px, 2.9vw);
  line-height: 1.12;
  color: var(--black);
  margin-top: .9em;
}
.ag-sel__body {
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
  margin-top: 1.8em;
}
.ag-sel__title, .ag-sel__body, .ag-sel .ag-label {
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1);
}
@media (hover: hover) {
  .ag-sel .join__copy:hover .ag-label     { transform: translateY(-5px); }
  .ag-sel .join__copy:hover .ag-sel__title { transform: translateY(-3px); transition-delay: .04s; }
  .ag-sel .join__copy:hover .ag-sel__body  { transform: translateY(-1px); transition-delay: .08s; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .ag-what__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 0;
  }
  .ag-what__grid .pillar:nth-child(3)::before { display: none; }
  .ag-who__row li { flex: 0 0 50%; border-left: 0; white-space: normal; }
}

@media (max-width: 720px) {
  .ag-hero__copy { padding: max(32px, 9vw) 0 max(32px, 8vw) var(--edge); }
  .ag-hero__title   { font-size: 9.2vw; }
  .ag-hero__tagline { font-size: 4.6vw; }
  .ag-hero__body    { font-size: 3.2vw; margin-top: 1.8em; }
  .ag-hero__actions { flex-direction: column; gap: 10px; margin-top: 7vw; }
  .ag-hero__actions .btn-arrow { width: 100%; justify-content: space-between; height: 42px; font-size: 2.2vw; padding: 0 1em 0 1.1em; }
  .ag-hero__actions .btn-arrow__label { white-space: nowrap; }
}

@media (max-width: 560px) {
  .ag-what__grid { grid-template-columns: 1fr; gap: 28px; }
  .ag-what__grid .pillar { border-top: 1px solid var(--line); padding-top: 28px; }
  .ag-what__grid .pillar:first-child { border-top: 0; padding-top: 0; }
  .ag-who__row li { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-hero__title, .ag-hero__tagline, .ag-hero__body, .ag-hero__actions .btn-arrow { animation: none; opacity: 1; }
  .ag-who__row li, .ag-sel__title, .ag-sel__body, .ag-sel .ag-label { transition: none; }
}