/* Shared layout primitives for hand-authored content pages (about.html, our-services.html).
   Shell (header, nav, footer, skip link, eyebrow) comes from css/agc-static-pages.css;
   tokens, bands (.agc-band) and motion hooks from css/agc-system.css and js/agc-motion.js.

   Rhythm: every section is a full-width block with the same vertical padding. Alternate
   sections carry .agc-band (navy ground, hairline edges) so the page reads as a sequence
   of chapters rather than one long flat run. */

.agc-content-main {
  flex: 1;
  overflow-x: clip;
  padding: 0 var(--agc-gutter);
}

.agc-content-section {
  margin: 0 auto;
  max-width: var(--agc-max);
  min-width: 0;
  padding: var(--agc-section-y) 0;
  /* Anchor jumps land with the heading just under the sticky header rather than a full
     section's padding below it (html already pads for the header itself). */
  scroll-margin-top: calc(40px - var(--agc-section-y));
}

/* Hero */

.agc-content-hero {
  isolation: isolate;
  padding-bottom: clamp(72px, 8vw, 120px);
  padding-top: clamp(56px, 7vw, 104px);
  position: relative;
}

/* A slow-drifting warm glow and a patch of the brand dot grid. Both are decorative
   pseudo-elements, so the hero markup stays copy only. */
.agc-content-hero::before {
  animation: agc-drift 18s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(223, 71, 0, .26), transparent);
  content: "";
  height: 760px;
  left: -300px;
  pointer-events: none;
  position: absolute;
  top: -340px;
  width: 980px;
  z-index: -1;
}

.agc-content-hero::after {
  background-image: var(--agc-dots);
  background-size: var(--agc-dots-size);
  bottom: 0;
  content: "";
  height: 360px;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent);
  mask-image: radial-gradient(closest-side, #000 15%, transparent);
  pointer-events: none;
  position: absolute;
  right: -80px;
  width: 560px;
  z-index: -1;
}

.agc-content-hero h1 {
  color: #fff;
  font: 800 var(--agc-fs-hero)/.98 var(--agc-font-display);
  letter-spacing: -.02em;
  margin: 0;
  max-width: 900px;
  text-transform: uppercase;
}

.agc-content-hero h1 span {
  color: var(--agc-accent);
}

.agc-content-lede {
  color: var(--agc-text-2);
  font: 400 var(--agc-fs-lede)/1.5 var(--agc-font-body);
  margin: 26px 0 0;
  max-width: 760px;
}

.agc-content-hero__meta {
  align-items: center;
  border-top: 1px solid var(--agc-line);
  color: var(--agc-text-3);
  display: flex;
  flex-wrap: wrap;
  font: 600 12px/1.6 var(--agc-font-display);
  gap: 6px;
  letter-spacing: var(--agc-tracking-caps);
  margin: clamp(32px, 3.6vw, 48px) 0 0;
  max-width: 760px;
  padding-top: 20px;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Split hero: copy on the left, a visual on the right (our-services.html). */
.agc-content-hero--split {
  align-items: center;
  display: grid;
  gap: clamp(36px, 5vw, 80px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

.agc-content-hero__copy {
  min-width: 0;
}

.agc-content-hero--split h1 {
  font-size: clamp(44px, 5.4vw, 84px);
}

/* Buttons. Primary flips to white on hover, the same interaction as every other primary
   call to action on the site (homepage WhatsApp and Enquire buttons included). */

.agc-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(30px, 3.4vw, 44px);
}

.agc-content-button {
  align-items: center;
  border-radius: var(--agc-radius-sm);
  box-sizing: border-box;
  display: inline-flex;
  font: 600 15px/1.2 var(--agc-font-display);
  gap: 10px;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--agc-dur-fast) ease,
    border-color var(--agc-dur-fast) ease,
    box-shadow var(--agc-dur) ease,
    color var(--agc-dur-fast) ease,
    transform var(--agc-dur) var(--agc-ease);
}

.agc-content-button--primary {
  background: var(--agc-accent-fill);
  border: 1px solid var(--agc-accent-fill);
  box-shadow:
    var(--agc-shadow-accent),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--agc-on-accent);
}

/* Arrow that nudges forward on hover. */
.agc-content-button--primary::after {
  background: currentColor;
  content: "";
  flex: 0 0 auto;
  height: 16px;
  -webkit-mask: var(--agc-arrow) center / contain no-repeat;
  mask: var(--agc-arrow) center / contain no-repeat;
  transition: transform var(--agc-dur) var(--agc-ease);
  width: 16px;
}

.agc-content-button--secondary {
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--agc-line-strong);
  color: #fff;
}

.agc-content-button--primary:hover,
.agc-content-button--primary:focus-visible {
  background: #fff;
  border-color: #fff;
  box-shadow:
    0 22px 48px rgba(223, 71, 0, .3),
    0 0 0 1px rgba(255, 255, 255, .18);
  color: var(--agc-ink);
  transform: translateY(-3px);
}

.agc-content-button--primary:hover::after,
.agc-content-button--primary:focus-visible::after {
  transform: translateX(4px);
}

.agc-content-button--secondary:hover,
.agc-content-button--secondary:focus-visible {
  background: var(--agc-accent-soft);
  border-color: var(--agc-accent);
  color: #fff;
  transform: translateY(-3px);
}

.agc-content-button:active {
  transform: translateY(-1px) scale(.985);
}

.agc-content-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .92);
  outline-offset: 4px;
}

/* Section headings */

.agc-content-section__head {
  margin-bottom: clamp(36px, 4vw, 56px);
  max-width: 900px;
}

.agc-content-section h2 {
  color: #fff;
  font: 800 var(--agc-fs-h2)/1.03 var(--agc-font-display);
  letter-spacing: -.015em;
  margin: 0;
  max-width: 900px;
  text-transform: uppercase;
  text-wrap: balance;
}

.agc-content-section h2 span {
  color: var(--agc-accent);
}

.agc-content-intro {
  color: var(--agc-text-2);
  font: 400 clamp(16px, 1.35vw, 19px)/1.65 var(--agc-font-body);
  margin: 22px 0 0;
  max-width: 720px;
}

/* Callout: an editorial pull line with an orange rule, not another box. */

.agc-content-callout {
  background: linear-gradient(90deg, rgba(223, 71, 0, .12), rgba(223, 71, 0, 0) 70%);
  border-left: 3px solid var(--agc-accent);
  border-radius: 0 var(--agc-radius) var(--agc-radius) 0;
  color: #fff;
  font: 400 clamp(17px, 1.5vw, 21px)/1.6 var(--agc-font-body);
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 1040px;
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 34px);
}

.agc-content-callout a {
  color: var(--agc-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--agc-dur-fast) ease;
}

.agc-content-callout a:hover,
.agc-content-callout a:focus-visible {
  color: #fff;
}

/* Numbered rows (problems, service range, who we work with) */

.agc-content-rows {
  border-top: 1px solid var(--agc-line-strong);
}

.agc-content-row {
  align-items: baseline;
  border-bottom: 1px solid var(--agc-line);
  display: grid;
  gap: 8px 32px;
  grid-template-columns: 64px minmax(0, 320px) minmax(0, 1fr);
  isolation: isolate;
  padding: clamp(22px, 2.4vw, 32px) 0;
  position: relative;
}

.agc-content-row::before {
  background: linear-gradient(90deg, rgba(223, 71, 0, .1), rgba(255, 255, 255, .02) 60%, transparent);
  border-radius: var(--agc-radius-sm);
  content: "";
  inset: 0 -18px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--agc-dur) ease;
  z-index: -1;
}

.agc-content-row:hover::before {
  opacity: 1;
}

.agc-content-row--pair {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}

.agc-content-row__index {
  color: var(--agc-accent-text);
  font: 700 14px/1.4 var(--agc-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.agc-content-row__title {
  color: #fff;
  font: 700 clamp(19px, 1.7vw, 24px)/1.25 var(--agc-font-display);
  margin: 0;
  transition: color var(--agc-dur-fast) ease, transform var(--agc-dur) var(--agc-ease);
}

.agc-content-row:hover .agc-content-row__title {
  color: var(--agc-accent-text);
  transform: translateX(4px);
}

.agc-content-row__body {
  color: var(--agc-text-2);
  font: 400 clamp(15px, 1.25vw, 18px)/1.6 var(--agc-font-body);
  margin: 0;
}

/* Cards */

.agc-content-grid {
  display: grid;
  gap: var(--agc-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agc-content-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agc-content-card {
  background: var(--agc-surface-gradient);
  border: 1px solid var(--agc-line);
  border-radius: var(--agc-radius-lg);
  box-shadow: var(--agc-shadow-1);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  padding: clamp(26px, 2.5vw, 36px);
  position: relative;
  transition:
    border-color var(--agc-dur) ease,
    box-shadow var(--agc-dur) var(--agc-ease),
    transform var(--agc-dur) var(--agc-ease);
}

/* Cursor spotlight (position fed by js/agc-motion.js) and a top edge that lights up. */
.agc-content-card::before {
  background: radial-gradient(420px circle at var(--agc-mx, 50%) var(--agc-my, 0%), rgba(223, 71, 0, .13), transparent 60%);
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--agc-dur) ease;
  z-index: -1;
}

.agc-content-card::after {
  background: linear-gradient(90deg, transparent, var(--agc-accent), transparent);
  content: "";
  height: 2px;
  left: 24px;
  opacity: 0;
  position: absolute;
  right: 24px;
  top: -1px;
  transform: scaleX(.4);
  transition:
    opacity var(--agc-dur) ease,
    transform 420ms var(--agc-ease);
}

.agc-content-card:hover,
.agc-content-card:focus-within {
  border-color: rgba(223, 71, 0, .42);
  box-shadow: var(--agc-shadow-2);
  transform: translateY(-4px);
}

.agc-content-card:hover::before,
.agc-content-card:focus-within::before,
.agc-content-card:hover::after,
.agc-content-card:focus-within::after {
  opacity: 1;
}

.agc-content-card:hover::after,
.agc-content-card:focus-within::after {
  transform: scaleX(1);
}

/* Index label ("01", "Pillar 01", "Step 01"), followed by a rule to the card edge.
   Qualified with .agc-content-card so it wins over `.agc-content-card p`. */
.agc-content-card .agc-content-card__index {
  align-items: center;
  color: var(--agc-accent-text);
  display: flex;
  font: 700 12px/1.2 var(--agc-font-display);
  gap: 12px;
  letter-spacing: .16em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.agc-content-card .agc-content-card__index::after {
  background: linear-gradient(90deg, var(--agc-line-strong), transparent);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

/* Cards without an index label get a short orange rule above the heading instead. */
.agc-content-card:not(:has(> .agc-content-card__index)) > h3::before {
  background: var(--agc-accent);
  border-radius: 2px;
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 20px;
  transition: width var(--agc-dur) var(--agc-ease);
  width: 28px;
}

.agc-content-card:not(:has(> .agc-content-card__index)):hover > h3::before {
  width: 48px;
}

.agc-content-card h3 {
  color: #fff;
  font: 700 var(--agc-fs-h3)/1.2 var(--agc-font-display);
  margin: 0 0 14px;
}

.agc-content-card p {
  color: var(--agc-text-2);
  font: 400 clamp(15px, 1.2vw, 17px)/1.6 var(--agc-font-body);
  margin: 0;
}

.agc-content-card p + p {
  margin-top: 12px;
}

.agc-content-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.agc-content-list li {
  color: var(--agc-text-2);
  font: 400 clamp(15px, 1.2vw, 17px)/1.55 var(--agc-font-body);
  padding-left: 24px;
  position: relative;
}

.agc-content-list li::before {
  background: var(--agc-accent);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--agc-accent-soft);
  content: "";
  height: 6px;
  left: 3px;
  position: absolute;
  top: .62em;
  width: 6px;
}

.agc-content-list a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--agc-accent);
  text-underline-offset: 4px;
  transition: color var(--agc-dur-fast) ease;
}

.agc-content-list a:hover,
.agc-content-list a:focus-visible {
  color: var(--agc-accent-text);
}

/* Specificity has to beat `.agc-content-card p` so `margin-top: auto` still applies. */
.agc-content-card .agc-content-card__note {
  border-top: 1px solid var(--agc-line);
  color: var(--agc-text-3);
  font: 400 15px/1.55 var(--agc-font-body);
  margin-top: auto;
  padding-top: 18px;
}

/* Keep a minimum gap above the note while it is pushed to the card's foot. */
.agc-content-card > :has(+ .agc-content-card__note) {
  margin-bottom: 24px;
}

.agc-content-card .agc-content-card__note strong {
  color: #fff;
  font-weight: 700;
}

.agc-content-quote {
  border-left: 2px solid var(--agc-accent);
  color: #fff;
  font: 400 clamp(17px, 1.5vw, 21px)/1.45 var(--agc-font-body);
  margin: 0 0 20px;
  padding-left: 18px;
  position: relative;
}

.agc-content-quote cite {
  color: var(--agc-text-3);
  display: block;
  font: 700 12px/1.4 var(--agc-font-display);
  font-style: normal;
  letter-spacing: .14em;
  margin-top: 12px;
  text-transform: uppercase;
}

/* Connected steps (the four joining steps on about.html): each index rule runs across the
   gap into the next card, so the row reads as one path. */
@media (min-width: 1081px) {
  .agc-content-grid--steps .agc-content-card:not(:last-child) .agc-content-card__index::after {
    background: linear-gradient(90deg, var(--agc-accent-line), var(--agc-line-strong));
    margin-right: calc(-1 * (clamp(26px, 2.5vw, 36px) + var(--agc-gap) + 1px));
  }
}

/* Roadmap: a timeline whose line draws in as each stage is revealed. */

.agc-content-stages {
  counter-reset: agc-stage;
  display: grid;
  gap: clamp(22px, 2.6vw, 36px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agc-content-stage {
  padding-top: 38px;
  position: relative;
}

.agc-content-stage::before {
  background: var(--agc-line-strong);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: calc(-1 * clamp(22px, 2.6vw, 36px));
  top: 7px;
}

.agc-content-stage:last-child::before {
  right: 0;
}

.agc-content-stage::after {
  background: var(--agc-bg);
  border: 2px solid var(--agc-accent);
  border-radius: 999px;
  box-sizing: border-box;
  content: "";
  height: 15px;
  left: 0;
  position: absolute;
  top: 0;
  width: 15px;
}

.agc-content-stage--active::after {
  background: var(--agc-accent);
  box-shadow: 0 0 0 6px var(--agc-accent-soft);
}

/* The orange progress line draws over the grey one once the stage is revealed. */
.agc-content-stage__index {
  color: var(--agc-text-3);
  font: 700 12px/1.4 var(--agc-font-display);
  letter-spacing: .16em;
  margin: 0 0 10px;
}

.agc-content-stage__index::before {
  background: linear-gradient(90deg, var(--agc-accent), rgba(223, 71, 0, .45));
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: calc(-1 * clamp(22px, 2.6vw, 36px));
  top: 6px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--agc-ease);
  transition-delay: calc(var(--agc-reveal-delay, 0ms) + 200ms);
}

.agc-content-stage:last-child .agc-content-stage__index::before {
  right: 0;
}

.agc-content-stage.is-revealed .agc-content-stage__index::before,
html:not(.agc-motion) .agc-content-stage__index::before {
  transform: scaleX(1);
}

.agc-content-stage h3 {
  color: #fff;
  font: 800 clamp(28px, 2.8vw, 40px)/1.05 var(--agc-font-display);
  letter-spacing: -.01em;
  margin: 0;
}

.agc-content-stage__tag {
  background: var(--agc-accent-soft);
  border: 1px solid rgba(223, 71, 0, .35);
  border-radius: var(--agc-radius-pill);
  color: var(--agc-accent-text);
  display: inline-block;
  font: 700 11.5px/1 var(--agc-font-display);
  letter-spacing: .16em;
  margin: 16px 0 4px;
  padding: 8px 12px;
  text-transform: uppercase;
}

/* Closing call to action */

.agc-content-cta {
  align-items: center;
  background:
    radial-gradient(circle at 12% 0%, rgba(223, 71, 0, .32), transparent 52%),
    linear-gradient(135deg, #150a05, var(--agc-bg-raised) 58%);
  border: 1px solid rgba(223, 71, 0, .32);
  border-radius: var(--agc-radius-lg);
  box-shadow: var(--agc-shadow-2);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  isolation: isolate;
  justify-content: space-between;
  margin-top: clamp(40px, 4.5vw, 64px);
  overflow: hidden;
  padding: clamp(30px, 4vw, 56px);
  position: relative;
}

.agc-content-cta::after {
  background-image: var(--agc-dots);
  background-size: var(--agc-dots-size);
  content: "";
  height: 150%;
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent);
  mask-image: radial-gradient(closest-side, #000 10%, transparent);
  pointer-events: none;
  position: absolute;
  right: -8%;
  top: -25%;
  width: 55%;
  z-index: -1;
}

.agc-content-cta h3 {
  color: #fff;
  font: 800 clamp(28px, 3vw, 44px)/1.05 var(--agc-font-display);
  letter-spacing: -.01em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.agc-content-cta p {
  color: var(--agc-text-2);
  font: 400 clamp(16px, 1.35vw, 19px)/1.6 var(--agc-font-body);
  margin: 0;
  max-width: 540px;
}

.agc-content-cta .agc-content-actions {
  margin-top: 0;
}

/* Hero visual for our-services.html: an abstract "agents at work" panel echoing the three
   solutions below it. Decorative only (aria-hidden in the markup). */

.agc-flow {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 60%),
    var(--agc-bg-raised);
  border: 1px solid var(--agc-line-strong);
  border-radius: var(--agc-radius-lg);
  box-shadow:
    var(--agc-shadow-2),
    0 0 0 1px rgba(0, 0, 0, .4);
  animation: agc-rise 900ms var(--agc-ease) 240ms backwards;
  min-width: 0;
  padding: 18px;
  position: relative;
}

.agc-flow::before {
  background: radial-gradient(closest-side, rgba(223, 71, 0, .3), transparent);
  content: "";
  inset: -30% -20% auto auto;
  height: 320px;
  pointer-events: none;
  position: absolute;
  width: 320px;
  z-index: -1;
}

.agc-flow__bar {
  display: flex;
  gap: 7px;
  padding: 4px 4px 16px;
}

.agc-flow__bar span {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.agc-flow__bar span:first-child {
  background: var(--agc-accent);
}

.agc-flow__row {
  align-items: center;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--agc-line);
  border-radius: var(--agc-radius);
  display: grid;
  gap: 6px 14px;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  padding: 16px;
}

.agc-flow__row + .agc-flow__row {
  margin-top: 10px;
}

.agc-flow__icon {
  align-items: center;
  background: var(--agc-accent-soft);
  border: 1px solid rgba(223, 71, 0, .35);
  border-radius: 12px;
  color: var(--agc-accent-text);
  display: inline-flex;
  grid-row: 1 / span 2;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.agc-flow__icon svg,
.agc-flow__check svg {
  height: 20px;
  width: 20px;
}

.agc-flow__label {
  color: #fff;
  font: 600 15px/1.3 var(--agc-font-display);
}

.agc-flow__track {
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.agc-flow__track span {
  animation: agc-flow-fill 2.6s var(--agc-ease) both;
  background: linear-gradient(90deg, var(--agc-accent), #ff9a4d);
  border-radius: inherit;
  display: block;
  height: 100%;
  transform-origin: left;
}

.agc-flow__row:nth-of-type(2) .agc-flow__track span {
  animation-delay: .35s;
}

.agc-flow__row:nth-of-type(3) .agc-flow__track span {
  animation-delay: .7s;
}

.agc-flow__check {
  align-items: center;
  animation: agc-flow-done 400ms var(--agc-ease) both;
  animation-delay: 2.4s;
  background: var(--agc-accent);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.agc-flow__check svg {
  height: 15px;
  width: 15px;
}

.agc-flow__row:nth-of-type(2) .agc-flow__check {
  animation-delay: 2.75s;
}

.agc-flow__row:nth-of-type(3) .agc-flow__check {
  animation-delay: 3.1s;
}

@keyframes agc-flow-fill {
  from {
    transform: scaleX(.04);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes agc-flow-done {
  from {
    opacity: 0;
    transform: scale(.5);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1080px) {
  .agc-content-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agc-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A lone third card takes the full row instead of leaving an empty half. */
  .agc-content-grid:not(.agc-content-grid--four) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Stages stack into a vertical timeline. */
  .agc-content-stages {
    grid-template-columns: 1fr;
  }

  .agc-content-stage {
    padding-left: 40px;
    padding-top: 0;
  }

  .agc-content-stage::before {
    bottom: calc(-1 * clamp(22px, 2.6vw, 36px));
    height: auto;
    left: 7px;
    right: auto;
    top: 15px;
    width: 1px;
  }

  .agc-content-stage:last-child::before {
    display: none;
  }

  .agc-content-stage__index::before {
    bottom: calc(-1 * clamp(22px, 2.6vw, 36px));
    height: auto;
    left: 6px;
    right: auto;
    top: 15px;
    transform: scaleY(0);
    transform-origin: top;
    width: 3px;
  }

  .agc-content-stage.is-revealed .agc-content-stage__index::before,
  html:not(.agc-motion) .agc-content-stage__index::before {
    transform: scaleY(1);
  }

  .agc-content-stage:last-child .agc-content-stage__index::before {
    display: none;
  }

  .agc-content-hero--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .agc-flow {
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .agc-content-grid,
  .agc-content-grid--four {
    grid-template-columns: 1fr;
  }

  .agc-content-row,
  .agc-content-row--pair {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .agc-content-row::before {
    inset: 0 -10px;
  }

  .agc-content-actions .agc-content-button {
    width: 100%;
  }

  .agc-content-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .agc-content-cta .agc-content-actions {
    width: 100%;
  }

  .agc-content-hero::after {
    display: none;
  }
}

@media (max-width: 380px) {
  .agc-content-button {
    padding: 0 18px;
  }

  .agc-content-cta {
    padding: 26px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agc-content-hero::before,
  .agc-flow,
  .agc-flow__track span,
  .agc-flow__check {
    animation: none;
  }

  .agc-content-card,
  .agc-content-card:hover,
  .agc-content-card:focus-within,
  .agc-content-row:hover .agc-content-row__title,
  .agc-content-button:hover,
  .agc-content-button:focus-visible,
  .agc-content-button:active,
  .agc-content-button--primary:hover::after {
    transform: none !important;
  }

  .agc-content-stage__index::before {
    transform: none !important;
    transition: none;
  }
}