/* ================================================================
   ELITEDEEDS — about.css  v2
   Complete redesign — premium law firm aesthetic
   All design tokens inherited from styles.css
================================================================ */


/* ════════════════════════════════════════
   1. HERO
════════════════════════════════════════ */
.ab-hero {
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-h) + var(--sp9));
  padding-bottom: var(--sp10);
  padding-inline: var(--sp6);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 160% 140% at 50% -15%,
    #1f1a48 0%, #130f28 28%, #0c0d16 60%);
}

.ab-hero__glow {
  position: absolute;
  top: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse 60% 55% at 50% 25%,
    rgba(212,168,67,0.20) 0%, rgba(180,130,40,0.07) 45%, transparent 70%);
  pointer-events: none;
  animation: heroLightBreathe 7s ease-in-out infinite;
}

.ab-hero__beam {
  position: absolute;
  top: -40%; left: -60%;
  width: 140%; height: 200%;
  background: linear-gradient(105deg,
    transparent 0%, transparent 42%,
    rgba(212,168,67,0.016) 46%,
    rgba(230,190,80,0.048) 49%,
    rgba(255,215,100,0.025) 51%,
    rgba(212,168,67,0.016) 54%,
    transparent 58%, transparent 100%);
  pointer-events: none;
  animation: lightBeamSweep 9s ease-in-out infinite;
}

.ab-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,67,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 15%, transparent 80%);
  pointer-events: none;
}

.ab-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp5);
}

.ab-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--g2);
  animation: fadeDown 0.8s var(--ease) 0.1s both;
}

.ab-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, var(--tx-5xl));
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.3px;
  color: var(--t-hi);
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
  animation: fadeUp 1s var(--ease) 0.25s both;
}

.ab-hero__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 620px;
  line-height: 1.85;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

.ab-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  animation: fadeUp 1s var(--ease) 0.5s both;
}

/* Stats strip */
.ab-hero__facts {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  padding-top: var(--sp5);
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  justify-content: center;
  animation: fadeUp 1s var(--ease) 0.65s both;
}

.ab-fact { text-align: center; }

.ab-fact__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}

.ab-fact__lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.ab-fact__sep {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}


/* ════════════════════════════════════════
   2. OUR STORY — Split layout
════════════════════════════════════════ */
.ab-story {
  background: var(--bg-base);
}

.ab-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp9);
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.ab-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
}

.ab-split__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 3.8vw, var(--tx-4xl));
  font-weight: 300;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.12;
}

.ab-split__text p {
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.9;
}

.ab-split__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  margin-top: var(--sp2);
}

/* Image side */
.ab-split__visual { position: relative; padding-bottom: 24px; }

.ab-split__img-wrap {
  border-radius: var(--rlg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-lg);
  border: var(--b-ghost);
}

.ab-split__img-wrap img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  filter: saturate(0.82) brightness(0.86);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}

.ab-split__img-wrap:hover img {
  filter: saturate(0.92) brightness(0.94);
  transform: scale(1.025);
}

/* Floating gold badge */
.ab-split__badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--bg-card);
  border: var(--b-gold-hi);
  border-radius: var(--rmd);
  padding: var(--sp4) var(--sp6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--sh-gold);
  backdrop-filter: blur(12px);
}

.ab-split__badge-num {
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  line-height: 1;
  background: var(--grad-gold-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPan 6s linear infinite;
}

.ab-split__badge-lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* ════════════════════════════════════════
   3. WHY WE EXIST — Trust cards
════════════════════════════════════════ */
.ab-why {
  background: var(--bg-raised);
  position: relative;
  overflow: hidden;
}

.ab-why::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.28) 35%, rgba(212,168,67,0.28) 65%, transparent);
  pointer-events: none;
}

.ab-why__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.ab-why__header {
  text-align: center;
  margin-bottom: var(--sp8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.ab-why__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.ab-why__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 560px;
  line-height: 1.8;
}

.ab-why__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp5);
}

.ab-trust-card {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6) var(--sp5);
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ab-trust-card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.09) 50%, transparent);
  pointer-events: none;
}

.ab-trust-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,168,67,0.22);
  box-shadow: var(--sh-md), 0 0 36px rgba(212,168,67,0.07);
}

.ab-trust-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--rmd);
  background: rgba(212,168,67,0.08);
  border: var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
}

.ab-trust-card:hover .ab-trust-card__icon {
  background: rgba(212,168,67,0.14);
  color: var(--g2);
}

.ab-trust-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.ab-trust-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.75;
}


/* ════════════════════════════════════════
   4. TEAM — Expert Cards
════════════════════════════════════════ */
.ab-team {
  background: var(--bg-base);
  position: relative;
}

.ab-team::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.20) 35%, rgba(212,168,67,0.20) 65%, transparent);
  pointer-events: none;
}

.ab-team__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp6);
}

.ab-team__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
  margin-bottom: var(--sp4);
}

.ab-team__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}

.ab-team__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 580px;
  line-height: 1.8;
}

/* ── Base expert card ── */
.ab-expert {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rxl);
  padding: var(--sp7);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,0.055);
}

.ab-expert::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.10) 60%, transparent);
  pointer-events: none;
}

.ab-expert:hover {
  transform: translateY(-4px);
  border-color: rgba(212,168,67,0.16);
  box-shadow: var(--sh-lg), 0 0 56px rgba(212,168,67,0.07);
}

/* ── Lead expert — gold treatment ── */
.ab-expert--lead {
  background-color: #131526;
  background-image: linear-gradient(135deg,
    rgba(212,168,67,0.09) 0%,
    rgba(212,168,67,0.03) 45%,
    transparent 100%);
  border-color: rgba(212,168,67,0.32);
  box-shadow: var(--sh-lg), var(--sh-gold), inset 0 1px 0 rgba(212,168,67,0.14);
  animation: cardGlowPulse 5s ease-in-out infinite;
}

.ab-expert--lead::before {
  left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
  opacity: 0.88;
  border-radius: var(--rxl) var(--rxl) 0 0;
}

.ab-expert--lead:hover {
  border-color: rgba(212,168,67,0.52);
  box-shadow: var(--sh-lg), 0 0 72px rgba(212,168,67,0.18);
}

/* ── Secondary expert ── */
.ab-expert--secondary {
  border-color: rgba(212,168,67,0.18);
}

.ab-expert--secondary::before {
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.58), transparent);
  border-radius: var(--rxl) var(--rxl) 0 0;
}

.ab-expert--secondary:hover {
  border-color: rgba(212,168,67,0.36);
}

/* Ambient glow inside lead card */
.ab-expert__glow {
  position: absolute;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 350px;
  background: radial-gradient(ellipse 60% 60% at 50% 0%,
    rgba(212,168,67,0.09) 0%, transparent 65%);
  pointer-events: none;
}

/* Two-column layout inside each card */
.ab-expert__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp7);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Left column — identity */
.ab-expert__identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
}

/* Avatar */
.ab-expert__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--t-mid);
  flex-shrink: 0;
  position: relative;
}

.ab-expert__avatar--lead {
  width: 88px; height: 88px;
  background: rgba(212,168,67,0.12);
  border: 2px solid rgba(212,168,67,0.45);
  color: var(--g2);
  box-shadow: 0 0 28px rgba(212,168,67,0.22);
}

.ab-expert__avatar--secondary {
  background: rgba(212,168,67,0.07);
  border: 2px solid rgba(212,168,67,0.28);
  color: var(--g3);
}

/* Pulsing ring on lead avatar */
.ab-expert__avatar-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,67,0.22);
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}

/* Role badge */
.ab-expert__role-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0f0800;
  background: var(--grad-gold);
  padding: 4px 14px;
  border-radius: var(--rfull);
  box-shadow: 0 2px 12px rgba(212,168,67,0.35);
}

.ab-expert__role-badge--blue {
  background: rgba(212,168,67,0.10);
  border: 1px solid rgba(212,168,67,0.30);
  color: var(--g2);
  box-shadow: none;
}

.ab-expert__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}

.ab-expert__name {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.ab-expert__title {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.5;
}

/* Stats inside identity col (lead only) */
.ab-expert__stats {
  display: flex;
  align-items: center;
  gap: var(--sp4);
  padding: var(--sp4) var(--sp5);
  background: rgba(212,168,67,0.05);
  border: 1px solid rgba(212,168,67,0.14);
  border-radius: var(--rmd);
}

.ab-expert__stat { text-align: center; flex: 1; }

.ab-expert__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 4px;
}

.ab-expert__stat-lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ab-expert__stat-sep {
  width: 1px; height: 28px;
  background: rgba(212,168,67,0.18);
  flex-shrink: 0;
}

/* Right column — detail */
.ab-expert__detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp6);
}

.ab-expert__bio {
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.9;
}

.ab-expert__expertise-label {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: var(--sp3);
}

.ab-expert__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
}

.ab-expert__tags span {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--t-mid);
  padding: 5px 14px;
  background: rgba(255,255,255,0.04);
  border: var(--b-ghost);
  border-radius: var(--rfull);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.ab-expert--lead .ab-expert__tags span:hover {
  background: rgba(212,168,67,0.09);
  border-color: rgba(212,168,67,0.28);
  color: var(--g2);
}


/* ════════════════════════════════════════
   5. WHY CLIENTS CHOOSE US
════════════════════════════════════════ */
.ab-choose {
  background: var(--bg-raised);
  position: relative;
  overflow: hidden;
}

.ab-choose::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.22) 35%, rgba(212,168,67,0.22) 65%, transparent);
  pointer-events: none;
}

.ab-choose__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.ab-choose__header {
  text-align: center;
  margin-bottom: var(--sp8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.ab-choose__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}

.ab-choose__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 560px;
  line-height: 1.8;
}

.ab-choose__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp5);
}

.ab-choose-card {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ab-choose-card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.08) 50%, transparent);
  pointer-events: none;
}

.ab-choose-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,168,67,0.22);
  box-shadow: var(--sh-md), 0 0 36px rgba(212,168,67,0.07);
}

.ab-choose-card__icon {
  width: 50px; height: 50px;
  border-radius: var(--rmd);
  background: rgba(212,168,67,0.07);
  border: var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
}

.ab-choose-card:hover .ab-choose-card__icon {
  background: rgba(212,168,67,0.13);
  color: var(--g2);
}

.ab-choose-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.ab-choose-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.75;
}


/* ════════════════════════════════════════
   6. LEGAL PROCESS — Horizontal timeline
════════════════════════════════════════ */
.ab-process {
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

.ab-process::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.20) 35%, rgba(212,168,67,0.20) 65%, transparent);
  pointer-events: none;
}

.ab-process__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.ab-process__header {
  text-align: center;
  margin-bottom: var(--sp8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.ab-process__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}

.ab-process__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 560px;
  line-height: 1.8;
}

/* Horizontal timeline grid */
.ab-process__timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}

/* Connecting line behind all circles */
.ab-process__timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(212,168,67,0.12),
    rgba(212,168,67,0.40) 30%,
    rgba(212,168,67,0.40) 70%,
    rgba(212,168,67,0.12));
  z-index: 0;
}

.ab-proc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp4);
  padding: 0 var(--sp3);
  position: relative;
  z-index: 1;
}

/* Numbered circle */
.ab-proc-step__circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid rgba(212,168,67,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
  box-shadow: 0 0 0 5px rgba(212,168,67,0.06);
}

.ab-proc-step__circle span {
  font-family: var(--font-display);
  font-size: var(--tx-sm);
  font-weight: 400;
  background: var(--grad-gold-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPan 6s linear infinite;
  letter-spacing: 0.5px;
}

.ab-proc-step__circle--last {
  background: rgba(212,168,67,0.10);
  border-color: rgba(212,168,67,0.50);
  box-shadow:
    0 0 0 6px rgba(212,168,67,0.08),
    0 0 32px rgba(212,168,67,0.18);
}

.ab-proc-step:hover .ab-proc-step__circle {
  background: rgba(212,168,67,0.08);
  border-color: rgba(212,168,67,0.55);
  box-shadow: 0 0 0 7px rgba(212,168,67,0.10), 0 0 24px rgba(212,168,67,0.15);
}

.ab-proc-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}

.ab-proc-step__body h3 {
  font-family: var(--font-display);
  font-size: var(--tx-base);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.25;
}

.ab-proc-step__body p {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.7;
}


/* ════════════════════════════════════════
   7. SERVICE COVERAGE
════════════════════════════════════════ */
.ab-coverage {
  background: var(--bg-raised);
  position: relative;
}

.ab-coverage::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.20) 35%, rgba(212,168,67,0.20) 65%, transparent);
  pointer-events: none;
}

.ab-coverage__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp7);
}

.ab-coverage__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.ab-coverage__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}

.ab-coverage__districts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp4);
  justify-content: center;
}

.ab-district {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--sp3) var(--sp6);
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rfull);
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.22s var(--spring);
}

.ab-district:hover {
  background: rgba(212,168,67,0.07);
  border-color: rgba(212,168,67,0.28);
  transform: translateY(-3px);
}

.ab-district__icon {
  width: 18px;
  height: 18px;
  color: var(--g3);
  flex: 0 0 auto;
}

.ab-district__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-district span {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--t-hi);
  letter-spacing: 0.3px;
}

.ab-district--muted .ab-district__icon,
.ab-district--muted span { opacity: 0.55; }

.ab-coverage__note {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-low);
  font-style: italic;
  line-height: 1.6;
}


/* ════════════════════════════════════════
   8. CORE VALUES
════════════════════════════════════════ */
.ab-values {
  background: var(--bg-base);
  position: relative;
}

.ab-values::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.18) 35%, rgba(212,168,67,0.18) 65%, transparent);
  pointer-events: none;
}

.ab-values__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.ab-values__header {
  text-align: center;
  margin-bottom: var(--sp8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.ab-values__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}

.ab-values__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 520px;
  line-height: 1.8;
}

.ab-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp5);
}

.ab-value {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ab-value::after {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.08) 50%, transparent);
  pointer-events: none;
}

.ab-value:hover {
  transform: translateY(-5px);
  border-color: rgba(212,168,67,0.20);
  box-shadow: var(--sh-md), 0 0 30px rgba(212,168,67,0.06);
}

.ab-value__num {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 300;
  color: rgba(212,168,67,0.07);
  line-height: 1;
  position: absolute;
  top: var(--sp3); right: var(--sp4);
  letter-spacing: -2px;
  pointer-events: none;
  user-select: none;
}

.ab-value__icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 2px;
}

.ab-value h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
}

.ab-value p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.75;
}


/* ════════════════════════════════════════
   9. FAQ
════════════════════════════════════════ */
.ab-faq {
  background: var(--bg-raised);
  position: relative;
}

.ab-faq::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.18) 35%, rgba(212,168,67,0.18) 65%, transparent);
  pointer-events: none;
}

.ab-faq__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.ab-faq__header {
  text-align: center;
  margin-bottom: var(--sp8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.ab-faq__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}

.ab-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}

.ab-faq-item {
  border: var(--b-ghost);
  border-radius: var(--rmd);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.ab-faq-item.open {
  border-color: rgba(212,168,67,0.28);
  background: rgba(212,168,67,0.025);
}

.ab-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp4);
  padding: var(--sp5) var(--sp5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s var(--ease);
}

.ab-faq-q:hover { background: rgba(255,255,255,0.025); }

.ab-faq-q span {
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 400;
  color: var(--t-hi);
  line-height: 1.5;
  flex: 1;
  transition: color 0.2s;
}

.ab-faq-q[aria-expanded="true"] span { color: var(--g2); }

.ab-faq-q__arrow {
  color: var(--t-low);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), color 0.2s;
}

.ab-faq-q[aria-expanded="true"] .ab-faq-q__arrow {
  transform: rotate(180deg);
  color: var(--g3);
}

.ab-faq-a {
  display: none;
  padding: 0 var(--sp5) var(--sp5);
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.85;
}

.ab-faq-item.open .ab-faq-a {
  display: block;
  animation: faqOpen 0.3s var(--ease) both;
}

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════
   10. CTA BAND
════════════════════════════════════════ */
.ab-cta-band {
  background: var(--bg-base);
  padding-block: var(--sp10);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ab-cta-band__glow {
  position: absolute;
  bottom: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse 60% 60% at 50% 90%,
    rgba(212,168,67,0.18) 0%, transparent 62%);
  pointer-events: none;
}

.ab-cta-band__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 1.5px at center,
    rgba(212,168,67,0.055) 0%, transparent 100%);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 80%);
  pointer-events: none;
}

.ab-cta-band__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp5);
}

.ab-cta-band__eyebrow {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--g3);
}

.ab-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4.5vw, var(--tx-4xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  line-height: 1.18;
}

.ab-cta-band p {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.85;
  max-width: 520px;
}

.ab-cta-band__btns {
  display: flex;
  gap: var(--sp4);
  flex-wrap: wrap;
  justify-content: center;
}

.ab-hero__cta:focus-visible,
.ab-split__cta:focus-visible,
.ab-cta-band__btns a:focus-visible,
.ab-faq-q:focus-visible {
  outline: 2px solid var(--g2);
  outline-offset: 4px;
}


/* ════════════════════════════════════════
   RESPONSIVE — Tablet (≤1100px)
════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ab-why__cards    { grid-template-columns: repeat(2, 1fr); }
  .ab-choose__grid  { grid-template-columns: repeat(2, 1fr); }
  .ab-values__grid  { grid-template-columns: repeat(2, 1fr); }

  .ab-expert__layout {
    grid-template-columns: 240px 1fr;
    gap: var(--sp6);
  }

  .ab-process__timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp6);
  }

  .ab-process__timeline::before {
    display: none;
  }

  .ab-proc-step {
    padding: 0;
  }
}


/* ════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px)
════════════════════════════════════════ */
@media (max-width: 900px) {
  .ab-split {
    grid-template-columns: 1fr;
    gap: var(--sp7);
  }

  .ab-split__visual {
    order: -1;
    padding-bottom: 32px;
  }

  .ab-split__badge { left: 16px; }

  .ab-expert__layout {
    grid-template-columns: 1fr;
    gap: var(--sp6);
  }

  .ab-expert__stats {
    flex-wrap: wrap;
  }

  .ab-process__timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
════════════════════════════════════════ */
@media (max-width: 768px) {
  .ab-hero {
    padding-top: calc(var(--header-h) + 48px);
    padding-bottom: 72px;
    min-height: auto;
  }

  .ab-hero__facts { gap: var(--sp4); flex-wrap: wrap; }
  .ab-fact__sep   { display: none; }

  .ab-why__cards    { grid-template-columns: 1fr; }
  .ab-choose__grid  { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .ab-values__grid  { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }

  .ab-process__timeline { grid-template-columns: 1fr; }

  .ab-coverage__districts { gap: var(--sp3); }
  .ab-district { padding: var(--sp2) var(--sp4); }

  .ab-cta-band__btns {
    flex-direction: column;
    max-width: 300px;
  }
  .ab-cta-band__btns .btn-large {
    width: 100%;
    justify-content: center;
  }
}


/* ════════════════════════════════════════
   RESPONSIVE — Small mobile (≤560px)
════════════════════════════════════════ */
@media (max-width: 560px) {
  .ab-hero__headline   { font-size: 2.2rem; }
  .ab-split__img-wrap img { height: 280px; }
  .ab-split__badge     { left: 8px; bottom: -10px; }
  .ab-expert           { padding: var(--sp5); }
  .ab-faq__inner       { padding-inline: var(--sp4); }
  .ab-faq-q            { padding: var(--sp4); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero__glow,
  .ab-hero__beam,
  .ab-split__badge-num,
  .ab-expert--lead,
  .ab-expert__avatar-ring,
  .ab-proc-step__circle span {
    animation: none;
  }
}