/* Page-specific layers for /agencies.
   Loads after styles.css and home-layers.css.

   The brief this solves: the first build of this page was ten near-identical
   white rounded boxes stacked on cream. Same border, same radius, same rhythm,
   nothing to interact with. These rules add contrast between sections, break
   the uniform grid, and support the interactive console in agencies.js. */

/* ── Aurora hero ──────────────────────────────────────────────────────────
   Replaces the flat cream hero. Three slow-drifting blobs behind a blur.
   Sits under the content and never intercepts a click. */
.ag-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ag-hero__aurora {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.5;
}
.ag-hero__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.ag-hero__aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -6%; top: 8%;  background: #dcd6f7; animation: ag-drift-a 22s ease-in-out infinite; }
.ag-hero__aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -4%; top: 0;  background: #e6d5ff; animation: ag-drift-b 26s ease-in-out infinite; }
.ag-hero__aurora i:nth-child(3) { width: 32vw; height: 32vw; left: 38%; top: 34%; background: #ffd9ec; animation: ag-drift-c 30s ease-in-out infinite; }
@keyframes ag-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(6%,4%,0) scale(1.12) } }
@keyframes ag-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-5%,6%,0) scale(1.08) } }
@keyframes ag-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-4%,-5%,0) scale(1.15) } }

/* ── Interactive client console ───────────────────────────────────────────
   The centrepiece. Clicking a client in the rail swaps the panel, which is
   the actual claim the page makes: every client, one login. */
.ag-console {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(13, 22, 48, 0.28);
  max-width: 940px;
  margin: 0 auto;
}
.ag-console__rail {
  background: var(--bg-warm-deep);
  border-right: 1.5px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ag-console__rail b {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 8px;
}
.ag-client {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  width: 100%;
  min-width: 0;
  transition: background 0.16s, transform 0.16s;
}
.ag-client span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ag-client:hover { background: rgba(27, 89, 248, 0.07) }
.ag-client[aria-selected='true'] { background: #fff; box-shadow: 0 2px 10px rgba(13, 22, 48, 0.09) }
.ag-client i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex: 0 0 auto;
  background: var(--dot, #1b59f8);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  font-style: normal;
}
.ag-console__panel { padding: 20px 22px; min-width: 0 }
.ag-console__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ag-console__head h3 { font-size: 1.05rem; margin: 0; letter-spacing: -0.02em }
.ag-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 196, 140, 0.13);
  color: #05815c;
}
.ag-tag--muted { background: var(--bg-warm-deep); color: var(--muted) }

.ag-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.ag-kpi {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 13px;
  min-width: 0;
}
.ag-kpi b {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 800;
}
.ag-kpi strong {
  font-family: 'Funnel Display', 'Inter', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
}
.ag-kpi em {
  font-style: normal;
  font-size: 0.72rem;
  color: #05815c;
  font-weight: 700;
}
.ag-console__row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 11px 14px;
  font-size: 0.85rem;
  color: var(--muted);
}
.ag-console__row .chan { display: flex; gap: 5px; flex-wrap: wrap }
.chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy);
  white-space: nowrap;
}
/* Track record row: the one line no other agency tool can put in a client's
   view. Reads as a receipt, not a badge. */
.ag-console__row--record { color: var(--navy); background: #fff; gap: 12px }
.ag-console__row--record > b { font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 800; flex: 0 0 auto }
.ag-console__row--record > span { flex: 1; min-width: 0; font-size: 0.82rem }
.ag-console__row--record strong { color: #05815c }

/* the panel fades between clients rather than snapping */
.ag-swap { animation: ag-fade 0.26s ease }
@keyframes ag-fade { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }

/* ── Approval queue ───────────────────────────────────────────────────────
   Click approve and the row leaves. Small, but it is the loop an agency
   actually runs every week. */
.ag-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.ag-queue li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  transition: opacity 0.3s, transform 0.3s;
  min-width: 0;
}
.ag-queue li.gone { opacity: 0; transform: translateX(22px) }
.ag-queue .t { flex: 1; min-width: 0 }
.ag-queue .t b { display: block; font-size: 0.9rem; color: var(--navy) }
.ag-queue .t span { font-size: 0.78rem; color: var(--muted) }
.ag-approve {
  border: 0;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 15px;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.15s;
}
.ag-approve:hover { transform: translateY(-1px) }
.ag-queue__done {
  font-size: 0.85rem;
  color: #05815c;
  font-weight: 700;
  padding: 12px 2px;
}

/* ── Integration marquee ──────────────────────────────────────────────────
   Answers "what can it actually do" with the real connector list rather
   than another paragraph. */
.ag-marquee { overflow: hidden; position: relative; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent) }
.ag-marquee__track { display: flex; gap: 10px; width: max-content; animation: ag-scroll 38s linear infinite }
.ag-marquee:hover .ag-marquee__track { animation-play-state: paused }
@keyframes ag-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.ag-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.ag-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #1b59f8); flex: 0 0 auto }

/* ── Dark section, for rhythm ─────────────────────────────────────────────
   The page previously ran cream-on-cream from the hero to the footer. */
.ag-dark {
  background: var(--navy);
  color: #cfd9f5;
  padding: var(--sy) 0;
  position: relative;
  overflow: hidden;
}
.ag-dark h2, .ag-dark h3 { color: #fff }
.ag-dark .eyebrow { color: #c4b5fd; background: rgba(196, 181, 253, 0.12); border-color: rgba(196, 181, 253, 0.24) }
.ag-dark .section-head p { color: #9fb0d8 }

/* Asymmetric grid - deliberately not equal boxes */
.ag-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px }
.ag-cell {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 22px 24px;
  min-width: 0;
}
.ag-cell h3 { font-size: 1rem; margin: 0 0 7px; letter-spacing: -0.01em }
.ag-cell p { font-size: 0.88rem; color: #9fb0d8; margin: 0; line-height: 1.55 }
.ag-cell--tall { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between }
.ag-cell--wide { grid-column: span 2 }
.ag-cell--accent { background: linear-gradient(150deg, #0d1630, #7c3aed); border-color: transparent }
.ag-cell--accent p { color: rgba(255, 255, 255, 0.86) }

/* Count-up figures */
.ag-stat {
  font-family: 'Funnel Display', 'Inter', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
  display: block;
}
.ag-stat + span { font-size: 0.86rem; color: #9fb0d8; display: block; margin-top: 8px }

/* ── Responsive ───────────────────────────────────────────────────────────
   Every grid collapses, and nothing is allowed to push its track wider. */
@media (max-width: 860px) {
  .ag-mosaic { grid-template-columns: repeat(2, 1fr) }
  .ag-cell--wide { grid-column: span 2 }
  .ag-cell--tall { grid-row: auto }
}
@media (max-width: 760px) {
  .ag-console { grid-template-columns: 1fr }
  .ag-console__rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1.5px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .ag-console__rail b { display: none }
  .ag-client { width: auto; flex: 0 0 auto }
  .ag-kpis { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .ag-mosaic { grid-template-columns: 1fr }
  .ag-cell--wide { grid-column: auto }
}

@media (prefers-reduced-motion: reduce) {
  .ag-hero__aurora i, .ag-marquee__track { animation: none }
  .ag-swap { animation: none }
}

/* Prompt above the console. Small, quiet - it only needs to tell you the
   thing is clickable, because a static mock trains you not to try. */
.ag-try {
  font-family: 'Caveat', cursive;
  font-size: 1.18rem;
  color: var(--muted);
  text-align: center;
  margin: 26px 0 12px;
}
.ag-try::after { content: ' ↓'; }

/* ─── Magneety for Agencies - the endorsed track ────────────────────────
   Same brand, one secondary: navy #0d1630 where the business track uses
   magenta. A panel and frame colour on the light ground, never a theme.
   docs/BRAND_STRATEGY.md section 6b. */
.ag-hero .eyebrow { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 3px 0 #060a1c }
.ag-hero .btn--outline { color: var(--navy); border-color: var(--navy); box-shadow: 0 4px 0 var(--navy) }
.ag-hero .btn--outline:hover { border-color: var(--navy); box-shadow: 0 4px 0 var(--navy), 0 10px 28px rgba(13, 22, 48, 0.18) }
.ag-hero .btn--outline:active { box-shadow: 0 0 0 var(--navy) }
.ag-console { border: 2px solid var(--navy); box-shadow: 0 4px 0 var(--navy), 0 30px 70px -30px rgba(13, 22, 48, 0.28) }
.ag-try { color: var(--navy); font-weight: 600 }
.ag-strip__card { border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); border-radius: 22px }
.ag-strip__card--hot { border-color: var(--navy); box-shadow: 0 3px 0 var(--navy) }

/* The agency hero is a navy poster on the light page - the one place the
   track's secondary is allowed to be the ground. Everything on it is white or
   violet; the console below keeps its white card so it reads as the product. */
.ag-hero { background: var(--navy) !important; color: #dfe6ff; padding-bottom: clamp(40px, 6vw, 72px) }
.ag-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.22)); pointer-events: none; z-index: 0 }
.ag-hero__aurora i:nth-child(1) { background: #4c1d95; opacity: .55 }
.ag-hero__aurora i:nth-child(2) { background: #6d28d9; opacity: .45 }
.ag-hero__aurora i:nth-child(3) { background: #ec4492; opacity: .28 }
.ag-hero__aurora i { mix-blend-mode: screen }
.ag-hero h1 { color: #fff }
.ag-hero .hero__sub { color: rgba(223, 230, 255, 0.82) }
.ag-hero .eyebrow { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 3px 0 var(--ledge) }
.ag-hero .btn--outline { color: #fff; background: transparent; border-color: rgba(255,255,255,0.55); box-shadow: 0 4px 0 rgba(255,255,255,0.28) }
.ag-hero .btn--outline:hover { border-color: #fff; box-shadow: 0 4px 0 rgba(255,255,255,0.4), 0 10px 28px rgba(0,0,0,0.25) }
.ag-hero .ag-try { color: #fff; font-weight: 600 }
.ag-console { border-color: #fff; box-shadow: 0 4px 0 rgba(255,255,255,0.35), 0 40px 90px -30px rgba(0,0,0,0.6) }
.ag-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff }
.ag-pill i { box-shadow: 0 0 0 3px rgba(255,255,255,0.08) }

/* ─── Rulebook pass (docs/DESIGN_RULES.md) ───────────────────────────────
   Hero: two columns, text left, the live console right. Run: a 3x2 grid of
   equal tiles - no wide tiles, no orphans. Show: the queue left, three equal
   statements stacked right. Every card: 2px edge, 3px ledge, 22-24px radius. */
.ag-hero__inner { max-width: 1180px; align-items: stretch }
.ag-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; width: 100%; margin-bottom: clamp(28px, 4vw, 44px) }
.ag-hero__text { text-align: left }
.ag-hero__text .eyebrow { margin-bottom: 18px }
.ag-hero__text h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); text-align: left; margin-bottom: 18px }
.ag-hero .ag-hero__text .hero__sub { text-align: left; margin: 0 0 26px; max-width: 480px }
.ag-hero__text .ag-cta-row { justify-content: flex-start }
.ag-hero__demo { min-width: 0 }
.ag-hero__demo .ag-try { text-align: left; margin: 0 0 10px 6px }
.ag-hero__demo .ag-console { max-width: none; margin: 0 }
@media (min-width: 961px) { .ag-hero__demo .ag-console { grid-template-columns: 176px 1fr } }
@media (max-width: 960px) { .ag-hero__grid { grid-template-columns: 1fr } .ag-hero__text { text-align: center } .ag-hero__text h1, .ag-hero .ag-hero__text .hero__sub { text-align: center; margin-left: auto; margin-right: auto } .ag-hero__text .ag-cta-row { justify-content: center } .ag-hero__demo .ag-try { text-align: center; margin-left: 0 } }

.ag-six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
@media (max-width: 960px) { .ag-six { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .ag-six { grid-template-columns: 1fr } }
.ag-tile { background: #fff; border: 2px solid var(--border); border-radius: 24px; box-shadow: 0 3px 0 var(--border); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s }
.ag-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--border) }
.ag-tile__visual { height: 112px; border-radius: 16px; background: var(--off); padding: 14px; display: grid; place-items: center; overflow: hidden }
.ag-tile__visual > * { width: 100% }
.ag-tile h3 { font-size: 1.02rem; margin: 4px 0 0; letter-spacing: -0.01em; color: var(--navy) }
.ag-tile p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5 }
.ag-switch { display: grid; gap: 6px }
.ag-switch span { display: block; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 0.78rem; font-weight: 600; color: var(--navy) }
.ag-switch span.on { border-color: var(--blue); box-shadow: 0 2px 0 var(--ledge); color: var(--blue) }

.ag-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch }
@media (max-width: 860px) { .ag-show { grid-template-columns: 1fr } }
.ag-show__stack { display: grid; grid-template-rows: repeat(3, 1fr); gap: 20px }
.ag-show .ag-cell { display: flex; gap: 14px; align-items: flex-start; border: 2px solid rgba(255,255,255,0.1); border-radius: 22px; box-shadow: 0 3px 0 rgba(0,0,0,0.35) }
.ag-show .ag-cell--queue { flex-direction: column; justify-content: space-between; gap: 18px }
.ag-cell__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 900; font-size: 1rem; flex-shrink: 0; box-shadow: 0 3px 0 rgba(0,0,0,0.3) }
.ag-show .ag-cell h3 { font-size: 1rem }
/* rulebook: a two-column hero caps its H1 at 3.4rem and never below 5 lines */
.ag-hero__text h1 { font-size: clamp(2.2rem, 3.1vw, 3rem) !important; line-height: 1.05 }
/* tile visuals must never clip: two rows max in the switch, smaller quote */
.ag-switch span:nth-child(n+3) { display: none }
.ag-tile .ag-kpi strong { font-size: 0.95rem; line-height: 1.25 }
.ag-tile .ag-kpi span { font-size: 0.72rem }

.ag-hero__textlink{align-self:center;font-weight:700;color:#fff;text-decoration:none;opacity:.85;padding:10px 4px}
.ag-hero__textlink:hover{opacity:1;text-decoration:underline}

/* Sub-product identity: the parent wordmark plus a quiet suffix. Same face,
   same violet - a second brand would cost trust the page has not earned. */
.nav__suffix{font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--blue);margin-left:6px;white-space:nowrap;transition:opacity .25s,max-width .4s cubic-bezier(.4,0,.2,1),margin-left .4s cubic-bezier(.4,0,.2,1);overflow:hidden;max-width:120px}
.nav--pill .nav__suffix{opacity:0;max-width:0;margin-left:0}
@media(max-width:420px){.nav__suffix{display:none}}
.ag-hero .btn--outline{color:#fff;background:transparent;border-color:rgba(255,255,255,.55);box-shadow:0 4px 0 rgba(255,255,255,.28)}
.ag-hero .btn--outline:hover{border-color:#fff;box-shadow:0 4px 0 rgba(255,255,255,.4),0 10px 28px rgba(0,0,0,.25)}
.ag-switch{text-align:center;font-size:.86rem;color:rgba(223,230,255,.62);margin:18px 0 0}
.ag-switch a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}