/*
 * CormackCoreWeb 2.0 — Avesco About page
 * Builds on front-page.css (tokens, nav, sectors, smooth-scroll).
 */

.av-about { background: #fff; }

/* ============================================================
   Hero — animated gradient flow + noise, glass nav, light headline
   ============================================================ */
.av-ab-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
  background: #01092d;   /* base under the animated flow */
  min-height: 100vh;     /* full-viewport hero */
  display: flex;
  flex-direction: column;
}

/* Liquid / lava-lamp gradient flow.
   Same proven technique as the homepage aurora: several heavily-blurred,
   screen-blended radial "light pools" each drifting/scaling/rotating on its own
   SHORT, offset cycle. The big blur makes the overlapping pools fold and
   recombine — that's what reads as a morphing, flowing gradient (not a moving
   block). Tinted to the supplied lava palette over the deep-navy base. */
.av-ab-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Clean 45° diagonal, top-left → bottom-right (CSS 135deg), using the 7
     supplied palette colours in order, evenly stepped. */
  background: linear-gradient(135deg,
    #5c6cb5 0%,
    #86a3da 16.6%,
    #5683bd 33.3%,
    #22386a 50%,
    #0a152f 66.6%,
    #1c3260 83.3%,
    #070c2c 100%);
}
.av-ab-flow::before,
.av-ab-flow::after {
  content: "";
  position: absolute;
  inset: -35%;
  filter: blur(70px) saturate(150%);
  mix-blend-mode: screen;
  will-change: transform;
}
/* Pool group 1 — the lighter palette blues (#86a3da, #5683bd). */
.av-ab-flow::before {
  background:
    radial-gradient(ellipse 55% 48% at 22% 28%, rgba(134,163,218,.95) 0%, rgba(134,163,218,.5) 38%, rgba(134,163,218,0) 70%),
    radial-gradient(ellipse 45% 40% at 72% 70%, rgba(86,131,189,.9) 0%, rgba(86,131,189,.4) 42%, rgba(86,131,189,0) 75%);
  animation: av-ab-pool-1 13s ease-in-out -2s infinite alternate;
}
/* Pool group 2 — the indigo + accent navies (#5c6cb5, #22386a), other cycle. */
.av-ab-flow::after {
  background:
    radial-gradient(ellipse 50% 45% at 65% 25%, rgba(92,108,181,.85) 0%, rgba(92,108,181,.35) 45%, rgba(92,108,181,0) 78%),
    radial-gradient(ellipse 40% 38% at 30% 80%, rgba(34,56,106,.85) 0%, rgba(34,56,106,.35) 48%, rgba(34,56,106,0) 80%);
  animation: av-ab-pool-2 17s ease-in-out -4s infinite alternate;
}

@keyframes av-ab-pool-1 {
  0%   { transform: translate3d(-10%,  8%, 0) rotate(-10deg) scale(1.10); }
  50%  { transform: translate3d( 12%, -8%, 0) rotate(16deg)  scale(1.32); }
  100% { transform: translate3d( 14%, 12%, 0) rotate(-8deg)  scale(1.16); }
}
@keyframes av-ab-pool-2 {
  0%   { transform: translate3d( 12%, -10%, 0) rotate(8deg)   scale(1.12); }
  50%  { transform: translate3d(-14%,   8%, 0) rotate(-20deg) scale(1.34); }
  100% { transform: translate3d(  8%,  12%, 0) rotate(12deg)  scale(1.10); }
}

.av-ab-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,6,18,.12) 0%, rgba(3,6,18,.2) 60%, rgba(3,6,18,.42) 100%);
}
.av-ab-hero > .av-header,
.av-ab-hero-inner { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .av-ab-flow::before,
  .av-ab-flow::after { animation: none !important; }
}

.av-ab-hero-inner {
  text-align: center;
  max-width: 1100px;
  /* Fill the remaining viewport height below the nav and centre the content. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 80px;
}
.av-ab-eyebrow { color: #d1d3d4; margin-bottom: 36px; }
.av-ab-eyebrow em { font-style: italic; }
.av-ab-hero h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.3;
  letter-spacing: -1px;
  margin: 0 auto;
  max-width: 960px;
  /* White, at 55% opacity (kept from the front-page match). */
  color: rgba(255, 255, 255, .55);
}
.av-ab-hero-sub { margin: 40px auto 56px; font-size: 20px; color: #d1d3d4; }

/* White button with blue label (hero CTA). */
.avesco .av-btn-onlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--blue-1);
  font-size: 16px;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
.avesco .av-btn-onlight:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }

/* Photo nav variant: translucent glass buttons (rgba white 10%). */
.av-header--photo .av-nav-links a {
  border-color: transparent;
  background: rgba(217,217,217,.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.av-header--photo .av-nav-links a:hover { background: rgba(217,217,217,.22); }
.av-header--photo .av-nav-links a.av-cta { background: var(--blue-1); }
.av-header--photo .av-nav-links a.av-cta:hover { background: var(--blue-2); }

/* ============================================================
   Our differentiator — dot grid + copy
   ============================================================ */
/* Dot grid covers the WHOLE section — small, dense dots. A semi-transparent
   white overlay sits over the RIGHT HALF so the copy reads with good contrast. */
/* Centered "Our differentiator" — eyebrow, heading, paragraph, all centred. */
.av-ab-diff {
  background: #EDF1F5;
  padding: 110px 0;
  text-align: center;
}
.av-ab-diff-inner { max-width: 940px; }
.av-ab-diff-eyebrow { color: var(--grey-600); margin-bottom: 28px; }
.av-ab-diff .av-h2 { margin: 0 0 36px; }
.av-ab-diff-inner p {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: .2px;
  color: var(--grey-600);
  margin: 0 auto;
  max-width: 820px;
}

/* ============================================================
   Team grid — 2 columns
   ============================================================ */
/* Team section with the blue-glory glow (same as the Services pillars). */
.av-ab-team {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  isolation: isolate;
}
.av-ab-team::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: 2800px;
  height: 2800px;
  transform: translate(-50%, 50%);
  background: url("../images/ui/blue-glory.jpg") center / contain no-repeat;
  pointer-events: none;
}
/* 2 columns × 2 rows (Rob | Richard / Adam | James).
   Fills the shared .av-container (1600px) so it lines up with the footer. */
.av-ab-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 110px 160px;
  margin: 0 auto;
}

.av-team-photo {
  width: 146px;
  height: 146px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 36px;
  background: #e6e6e6;
}
/* Fill the circle uniformly, centred, with minimal crop — no per-axis
   over-zoom (that distorted photos of differing aspect ratios). */
.av-team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* Base = released state: long, gentle ease-out zoom back. */
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* Hover: a soft, slightly quicker zoom-in. */
.av-team-photo:hover img {
  transform: scale(1.08);
  transition: transform .5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .av-team-photo img,
  .av-team-photo:hover img { transition: none; transform: none; }
}
/* Wider-team avatars are a consistent 168px — both real photos (e.g. Casie)
   and the grey placeholders — so every card in that section matches. */
.av-ab-team--wider .av-team-photo { width: 168px; height: 168px; }
.av-team-card--placeholder .av-team-photo { background: #c4c6c9; }
/* Wider team: flat light background, no blue-glory glow. */
.av-ab-team--wider { background: #EDF1F5; padding-top: 100px; }
.av-ab-team--wider::before { display: none; }
.av-team-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(34px, 3.4vw, 44px);
  letter-spacing: -1px;
  color: var(--grey-900);
  margin: 0 0 22px;
}
.av-team-li-link { display: inline-flex; line-height: 0; }
.av-team-li { display: block; border-radius: 4px; }
.av-team-role {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--blue-1);
  margin: 0 0 26px;
}
.av-team-bio p {
  font-size: 16px;
  line-height: 24px;
  color: var(--grey-600);
  margin: 0;
}
.av-team-bio p + p { margin-top: 18px; }   /* gap between bio paragraphs */
.avesco .av-team-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue-1);
  font-weight: 500;
  white-space: nowrap;
}
.av-team-more svg { width: 18px; height: 18px; stroke: var(--blue-1); }

/* ============================================================
   Services CTA band
   ============================================================ */
.av-ab-cta { padding: 60px 0 120px; text-align: center; }
.av-ab-cta-eyebrow { color: var(--grey-600); margin-bottom: 40px; }
.av-ab-cta-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--grey-900);
  max-width: 800px;
  margin: 0 auto 48px;
}
.avesco .av-btn-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}
.avesco .av-btn-teal:hover { background: #2f7591; transform: translateY(-2px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .av-ab-team-grid { grid-template-columns: 1fr; gap: 64px; max-width: 560px; }
}

@media (max-width: 820px) {
  .av-ab-hero-inner { padding-top: 80px; padding-bottom: 90px; }
  .av-ab-diff, .av-ab-team { padding-block: 64px; }
}