/* ============================================
   Educo EOR — About Page (composite widget)
   Hero → Our Story → Values → Milestones → Leadership → Closing CTA
============================================ */

.edc-about { display: block; }

/* Shared eyebrow + section title */
.edc-about__eyebrow {
  display: inline-block;
  font-family: var(--edc-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--edc-track-label);
  text-transform: uppercase;
  color: var(--edc-solar-gold);
  margin-bottom: 12px;
}
.edc-about__section-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: var(--edc-fs-headline-lg);
  line-height: var(--edc-lh-tight);
  letter-spacing: var(--edc-track-headline);
  color: var(--edc-obsidian);
  margin: 0;
  max-width: 780px;
  text-wrap: balance;
}
.edc-about__section-head {
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--edc-space-md);            /* breathing room between eyebrow pill and title, matches services-bento */
}
.edc-about__section-head--center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.edc-about__section-head--center .edc-about__section-title { margin-inline: auto; }
.edc-about__section-head .edc-about__section-lead { margin-top: 4px; }

/* ═══════════════════════════════════════════
   Shared button
═══════════════════════════════════════════ */
.edc-about__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--edc-radius-full);
  font-family: var(--edc-font-heading);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--edc-dur-quick) var(--edc-ease),
    filter    var(--edc-dur-quick) var(--edc-ease),
    box-shadow var(--edc-dur-quick) var(--edc-ease);
}
.edc-about__btn .material-symbols-outlined { font-size: 18px !important; }
.edc-about__btn--primary {
  background: var(--edc-solar-gold);
  color: var(--edc-obsidian);
  border: 1px solid var(--edc-solar-gold);
}
.edc-about__btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 24px -12px var(--edc-gold-ring);
  color: var(--edc-obsidian);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__btn:active { transform: translateY(1px); }
}

/* ═══════════════════════════════════════════
   1. HERO
   Warm-white bg with a subtle dotted-grid texture and a small
   top-centered gold radial glow. Chip is now a gold pill eyebrow
   with a glowing dot on the left (mirrors careers page).
═══════════════════════════════════════════ */
.edc-about__hero {
  position: relative;
  padding: 96px var(--edc-space-gutter);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(242, 184, 27, 0.10) 0%, transparent 65%),
    var(--edc-warm-white);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .edc-about__hero { padding: 120px var(--edc-section-h); }
}
.edc-about__hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 700px;
  background: radial-gradient(circle at 50% 50%, rgba(242,184,27,0.18) 0%, transparent 55%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
/* Subtle dotted-grid texture — vertically masked so it fades in and out. */
.edc-about__hero-decor {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(41, 41, 40, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.edc-about__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Split variant: copy on the left, image on the right (desktop) */
.edc-about__hero--split .edc-about__hero-inner {
  max-width: var(--edc-container);
  text-align: left;
  align-items: stretch;
  gap: 40px;
}
@media (min-width: 1024px) {
  .edc-about__hero--split .edc-about__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
  }
}
.edc-about__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-inline-size: 0;
}
.edc-about__hero--split .edc-about__hero-title,
.edc-about__hero--split .edc-about__hero-body { text-align: left; }
.edc-about__hero--split .edc-about__hero-ctas { justify-content: flex-start; }
.edc-about__hero--split .edc-about__hero-trust { justify-content: flex-start; }

/* Image column — polished figure with rounded corners, gold accent frame,
   subtle shadow, and a small "Since 2018" badge floating in the corner. */
.edc-about__hero-media {
  position: relative;
  margin: 0;
  border-radius: var(--edc-radius-2xl, 24px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-inline-size: 0;
  box-shadow:
    0 30px 60px -20px rgba(41, 41, 40, 0.25),
    0 0 0 4px rgba(242, 184, 27, 0.10);
  isolation: isolate;
}
@media (min-width: 720px) { .edc-about__hero-media { aspect-ratio: 5 / 4; } }
@media (min-width: 1024px) { .edc-about__hero-media { aspect-ratio: 4 / 5; } }
.edc-about__hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 900ms var(--edc-ease-out);
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__hero-media:hover img { transform: scale(1.03); }
}
/* Warm gradient shade — softens the bottom edge for the floating badge */
.edc-about__hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 28, 26, 0) 55%,
    rgba(28, 28, 26, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.edc-about__hero-media-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--edc-solar-gold);
  color: var(--edc-obsidian);
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 8px 20px -8px rgba(242, 184, 27, 0.55);
}
.edc-about__hero-media-badge .material-symbols-outlined {
  font-size: 15px !important;
  color: var(--edc-obsidian);
}
/* Gold pill eyebrow — white bg, gold border ring, gold dot on the left.
   Mirrors .edc-careers__eyebrow--pill exactly. */
.edc-about__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--edc-gold-ring, rgba(242, 184, 27, 0.35));
  border-radius: 999px;
  font-family: var(--edc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--edc-obsidian);
  margin: 0;
  box-shadow: 0 8px 24px -18px rgba(41, 41, 40, 0.14);
}
.edc-about__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--edc-solar-gold);
  box-shadow: 0 0 0 3px rgba(242, 184, 27, 0.22);
  flex: 0 0 auto;
}
.edc-about__hero-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  /* Match the homepage & mobility hero titles for consistency across pages. */
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: var(--edc-lh-hero);
  letter-spacing: var(--edc-track-tight);
  color: var(--edc-obsidian);
  margin: 0;
  text-wrap: balance;
  max-width: 620px;
}
.edc-about__hero-body {
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-body-lead);
  line-height: var(--edc-lh-body);
  color: var(--edc-slate);
  max-width: 640px;
  margin: 0;
}

/* ─── Corner orb accents ─── */
.edc-about__hero-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(50px);
  z-index: 0;
}
.edc-about__hero-orb--tl {
  top: -160px;
  left: -160px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle at 50% 50%, rgba(242, 184, 27, 0.28) 0%, transparent 70%);
}
.edc-about__hero-orb--br {
  bottom: -140px;
  right: -140px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 50% 50%, rgba(242, 184, 27, 0.18) 0%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__hero-orb--tl { animation: edc-about-orb-drift 16s ease-in-out infinite; }
  .edc-about__hero-orb--br { animation: edc-about-orb-drift 20s ease-in-out infinite reverse; }
  @keyframes edc-about-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, 20px) scale(1.05); }
  }
}

/* ─── Hero CTA pair (primary + ghost) ─── */
.edc-about__hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}
.edc-about__hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform var(--edc-dur-quick) var(--edc-ease),
    background var(--edc-dur-quick) var(--edc-ease),
    color var(--edc-dur-quick) var(--edc-ease),
    border-color var(--edc-dur-quick) var(--edc-ease),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__hero-btn .material-symbols-outlined {
  font-size: 18px !important;
  transition: transform var(--edc-dur-quick) var(--edc-ease);
}
.edc-about__hero-btn--primary {
  background: var(--edc-solar-gold);
  color: var(--edc-obsidian);
  border: 1px solid var(--edc-solar-gold);
  box-shadow: 0 12px 24px -12px rgba(242, 184, 27, 0.55);
}
.edc-about__hero-btn--primary:hover {
  transform: translateY(-2px);
  background: #f5c33a;
  box-shadow: 0 18px 32px -12px rgba(242, 184, 27, 0.70);
  color: var(--edc-obsidian);
}
.edc-about__hero-btn--ghost {
  background: transparent;
  color: var(--edc-obsidian);
  border: 1px solid rgba(41, 41, 40, 0.20);
}
.edc-about__hero-btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--edc-obsidian);
  color: var(--edc-warm-white);
  border-color: var(--edc-obsidian);
}
.edc-about__hero-btn:hover .material-symbols-outlined { transform: translateX(3px); }

/* ─── Trust / credibility chip row ─── */
.edc-about__hero-trust {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.edc-about__hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--edc-border);
  border-radius: 999px;
  font-family: var(--edc-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--edc-obsidian);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.edc-about__hero-trust .material-symbols-outlined {
  font-size: 15px !important;
  color: var(--edc-solar-gold);
}

/* ═══════════════════════════════════════════
   2. OUR STORY — Who We Are
   Editorial 2-column narrative. Left: pill eyebrow + display title +
   an "Est. 2018" vertical marker. Right: an oversized gold quote glyph
   above the paragraphs, with a vertical gold rule setting them off
   from the left column.
═══════════════════════════════════════════ */
.edc-about__story {
  position: relative;
  padding: 96px var(--edc-space-gutter);
  background: var(--edc-warm-white);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .edc-about__story { padding: 120px var(--edc-section-h); }
}
.edc-about__story-decor {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(41, 41, 40, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.edc-about__story-inner {
  position: relative;
  z-index: 1;
  max-width: var(--edc-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .edc-about__story-inner {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: start;
  }
}
.edc-about__story-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.edc-about__story-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--edc-obsidian);
  margin: 0;
  text-wrap: balance;
  max-width: 460px;
}
/* Est. 2018 vertical badge — gold accent bar + big display year */
.edc-about__story-est {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 12px 18px 12px 14px;
  background: #fff;
  border: 1px solid var(--edc-border);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(41, 41, 40, 0.14);
}
.edc-about__story-est-line {
  width: 4px;
  height: 40px;
  background: linear-gradient(180deg, var(--edc-solar-gold) 0%, #d99a00 100%);
  border-radius: 2px;
}
.edc-about__story-est-year {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--edc-obsidian);
  font-variant-numeric: tabular-nums;
}
.edc-about__story-est-label {
  font-family: var(--edc-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--edc-slate);
  max-width: 130px;
  line-height: 1.35;
}

/* Right column — first line leads with an editorial serif pull-quote
   that floats alongside the copy. Vertical gold rule stays on the
   outside edge. */
.edc-about__story-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 8px 28px;
  border-left: 2px solid rgba(242, 184, 27, 0.35);
}
@media (min-width: 1024px) {
  .edc-about__story-right { padding-left: 40px; }
}
/* Hide the widget's stand-alone " span — it lives as a flex sibling
   of the paragraphs, so floating it can't affect their text flow.
   We repaint the quote inside the first paragraph via ::before below,
   where float actually wraps the copy alongside it. */
.edc-about__story-quote { display: none; }

/* Editorial pull-quote glyph, painted as a floated ::before on the
   lead paragraph. Curly serif open-quote (U+201C) with gold gradient
   text-fill + warm halo. Floats left so "Educo is a Philippine…"
   wraps flush to its right on line 1; the height caps at ~1 line so
   line 2 onward returns to full width. */
.edc-about__story-para--lead { position: relative; }
.edc-about__story-para--lead::before {
  content: '\201C';
  float: left;
  display: block;
  position: relative;
  width: 50px;
  height: 26px;                        /* still under 1 line-height so line 2 stays flush */
  margin: 0 12px 0 0;
  padding: 0;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 72px;
  line-height: 0.6;
  color: transparent;
  background: linear-gradient(180deg, var(--edc-solar-gold) 0%, #d19a0d 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 3px 8px rgba(242, 184, 27, 0.35));
}
.edc-about__story-para--lead::after {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 68px;
  height: 42px;
  z-index: -1;
  background: radial-gradient(circle at 42% 45%,
    rgba(242, 184, 27, 0.28) 0%,
    rgba(242, 184, 27, 0.10) 45%,
    transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .edc-about__story-para--lead::before {
    width: 62px;
    height: 30px;
    margin: 0 14px 0 0;
    font-size: 92px;
  }
  .edc-about__story-para--lead::after {
    top: 0;
    left: -10px;
    width: 82px;
    height: 50px;
  }
}
.edc-about__story-para {
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-body-lead);
  line-height: 1.7;
  color: var(--edc-slate);
  margin: 0;
  position: relative;
}
.edc-about__story-para--lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--edc-obsidian);
  font-weight: 600;
}
@media (min-width: 1024px) {
  .edc-about__story-para--lead { font-size: 22px; }
}

/* ═══════════════════════════════════════════
   3. WHAT WE DO — Bento layout (mirrors "Our Commitment")
   Big 8×2 featured image card + 4 smaller icon cards (4-4-6-6).
═══════════════════════════════════════════ */
.edc-about__values {
  padding: 96px var(--edc-space-gutter);
  background: var(--edc-cream);
}
@media (min-width: 1024px) {
  .edc-about__values { padding: 120px var(--edc-section-h); }
}
.edc-about__values-inner {
  max-width: var(--edc-container);
  margin: 0 auto;
}

/* Bento grid — 12 columns on desktop */
.edc-about__values-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .edc-about__values-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
    gap: 24px;
  }
}

/* Featured image card — spans 8 cols × 2 rows on desktop */
.edc-about__values-feature {
  position: relative;
  overflow: hidden;
  border-radius: var(--edc-radius-bento, 40px);
  border: 1px solid rgba(224, 221, 216, 0.5);
  min-height: 340px;
  box-shadow: var(--edc-shadow-xl, 0 24px 48px -16px rgba(41, 41, 40, 0.16));
}
@media (min-width: 768px) {
  .edc-about__values-feature { grid-column: span 8; grid-row: span 2; min-height: 0; }
}
.edc-about__values-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__values-feature:hover img { transform: scale(1.05); }
}
.edc-about__values-feature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(41, 41, 40, 0.9) 0%,
    rgba(41, 41, 40, 0.4) 40%,
    transparent 100%);
}
.edc-about__values-feature-copy {
  position: absolute;
  left: 0; bottom: 0;
  padding: 28px;
  z-index: 1;
  color: #fff;
}
@media (min-width: 768px) { .edc-about__values-feature-copy { padding: 48px; } }
.edc-about__values-feature-chip {
  display: inline-block;
  background: var(--edc-solar-gold);
  color: var(--edc-obsidian);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--edc-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.edc-about__values-feature-copy h3 {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 22ch;
}
.edc-about__values-feature-copy p {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--edc-font-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

/* Smaller cards */
.edc-about__values-card {
  padding: 28px;
  border-radius: var(--edc-radius-xl, 20px);
  background: #fff;
  border: 1px solid rgba(224, 221, 216, 0.6);
  box-shadow: 0 6px 18px -12px rgba(41, 41, 40, 0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out);
}
@media (min-width: 768px) { .edc-about__values-card { padding: 32px; } }
@media (prefers-reduced-motion: no-preference) {
  .edc-about__values-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -20px rgba(41, 41, 40, 0.18);
    border-color: var(--edc-gold-ring, rgba(242, 184, 27, 0.35));
  }
}
/* Bento arrangement — pos 0 & 1 = 4 cols each; pos 2 & 3 = 6 cols each */
@media (min-width: 768px) {
  .edc-about__values-card--pos-0 { grid-column: span 4; }
  .edc-about__values-card--pos-1 { grid-column: span 4; }
  .edc-about__values-card--pos-2 { grid-column: span 6; }
  .edc-about__values-card--pos-3 { grid-column: span 6; }
}

.edc-about__values-card h4 {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 19px;
  color: var(--edc-obsidian);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.edc-about__values-card p {
  font-family: var(--edc-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--edc-slate);
  margin: 0;
}

/* Icon on top — larger gold-tint square */
.edc-about__values-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--edc-solar-gold) 0%, #d99a00 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow:
    0 10px 22px -10px rgba(242, 184, 27, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__values-card-icon .material-symbols-outlined {
  font-size: 28px !important;
  color: var(--edc-obsidian);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__values-card:hover .edc-about__values-card-icon {
    transform: rotate(-6deg) scale(1.06);
  }
}

/* Icon inline — smaller, sits beside the text */
.edc-about__values-card-inline {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.edc-about__values-card-icon-sm {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--edc-gold-tint);
  border: 1px solid var(--edc-gold-ring, rgba(242, 184, 27, 0.30));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.edc-about__values-card-icon-sm .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--edc-solar-gold);
}
/* Value card — gold-gradient icon medallion, subtle white→cream vertical
   gradient bg, the number rendered as a soft watermark top-right, and a
   growing gold underline flourish anchored at the bottom on hover. */
.edc-about__value {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fff 0%, #fff 55%, rgba(244, 241, 235, 0.55) 100%);
  border: 1px solid var(--edc-border);
  border-radius: var(--edc-radius-xl, 20px);
  padding: 36px 32px 44px;
  box-shadow: 0 12px 28px -20px rgba(41, 41, 40, 0.14);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__value:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 52px -22px rgba(41, 41, 40, 0.22);
    border-color: var(--edc-gold-ring, rgba(242, 184, 27, 0.45));
  }
}
/* Number now a subtle watermark in the top-right corner. */
.edc-about__value-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--edc-track-tight, -0.01em);
  color: rgba(242, 184, 27, 0.28);
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
/* Gold-gradient icon medallion — mirrors .edc-careers__value-icon. */
.edc-about__value-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--edc-solar-gold) 0%, #d99a00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
  box-shadow:
    0 10px 22px -10px rgba(242, 184, 27, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__value-icon .material-symbols-outlined {
  font-size: 28px !important;
  color: var(--edc-obsidian);
  transition: transform var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__value:hover .edc-about__value-icon {
    transform: rotate(-6deg) scale(1.06);
    box-shadow:
      0 14px 26px -10px rgba(242, 184, 27, 0.70),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  .edc-about__value:hover .edc-about__value-icon .material-symbols-outlined {
    transform: rotate(6deg);
  }
}
.edc-about__value-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: var(--edc-lh-tight);
  letter-spacing: var(--edc-track-tight);
  color: var(--edc-obsidian);
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 92%;
}
.edc-about__value-body {
  font-family: var(--edc-font-body);
  font-size: 15px;
  line-height: var(--edc-lh-body);
  color: var(--edc-slate);
  margin: 0;
  position: relative;
  z-index: 1;
}
/* Growing gold underline flourish — anchored to card bottom. */
.edc-about__value-underline {
  position: absolute;
  left: 32px;
  bottom: 22px;
  height: 2px;
  width: 36px;
  background: linear-gradient(90deg, var(--edc-solar-gold) 0%, rgba(242, 184, 27, 0.4) 100%);
  border-radius: 2px;
  transition: width var(--edc-dur-medium) var(--edc-ease-out);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__value:hover .edc-about__value-underline { width: calc(100% - 64px); }
}

/* ═══════════════════════════════════════════
   3.5 HOW WE HELP — Our Solution
   Centered header + a single elevated card containing lightbulb icon,
   body copy, and 3 supporting checkmark points.
═══════════════════════════════════════════ */
.edc-about__help {
  position: relative;
  padding: 96px var(--edc-space-gutter);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(242, 184, 27, 0.08) 0%, transparent 65%),
    var(--edc-cream);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .edc-about__help { padding: 120px var(--edc-section-h); }
}
.edc-about__help-decor {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(41, 41, 40, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.edc-about__help-inner {
  position: relative;
  z-index: 1;
  max-width: var(--edc-container);
  margin: 0 auto;
}

/* 3-column solution-pillars grid */
.edc-about__help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 720px)  { .edc-about__help-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.edc-about__help-pillar {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fff 0%, #fff 60%, rgba(244, 241, 235, 0.55) 100%);
  border: 1px solid var(--edc-border);
  border-radius: var(--edc-radius-xl, 20px);
  padding: 32px 28px 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 28px -20px rgba(41, 41, 40, 0.14);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -20px rgba(41, 41, 40, 0.18);
    border-color: var(--edc-gold-ring, rgba(242, 184, 27, 0.40));
  }
}

/* Big Solar Gold numeral watermark top-right */
.edc-about__help-pillar-num {
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 64px;
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--edc-solar-gold) 0%, #b8830a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.18;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition:
    opacity var(--edc-dur-medium) var(--edc-ease-out),
    transform var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__help-pillar:hover .edc-about__help-pillar-num {
  opacity: 0.35;
  transform: translateY(-2px);
}

/* Icon medallion */
.edc-about__help-pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--edc-solar-gold) 0%, #d99a00 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 22px -10px rgba(242, 184, 27, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  margin: 4px 0 8px;
  transition: transform var(--edc-dur-medium) var(--edc-ease-out);
  position: relative;
  z-index: 1;
}
.edc-about__help-pillar-icon .material-symbols-outlined {
  font-size: 28px !important;
  color: var(--edc-obsidian);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover .edc-about__help-pillar-icon {
    transform: rotate(-6deg) scale(1.06);
  }
}

.edc-about__help-pillar-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--edc-obsidian);
  margin: 0;
  position: relative;
  z-index: 1;
}
.edc-about__help-pillar-body {
  font-family: var(--edc-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--edc-slate);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Growing gold underline anchored at the bottom */
.edc-about__help-pillar-underline {
  position: absolute;
  left: 28px;
  bottom: 22px;
  height: 2px;
  width: 36px;
  background: linear-gradient(90deg, var(--edc-solar-gold) 0%, rgba(242, 184, 27, 0.4) 100%);
  border-radius: 2px;
  transition: width var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__help-pillar:hover .edc-about__help-pillar-underline {
  width: calc(100% - 56px);
}

/* ═══════════════════════════════════════════
   3.6 WHY PARTNER WITH EDUCO
   Obsidian panel with gold orb accent + eyebrow pill + big title,
   supporting body, and a gold CTA button.
═══════════════════════════════════════════ */
.edc-about__why {
  padding: 0 var(--edc-space-gutter) 48px;
  background: var(--edc-warm-white);
}
@media (min-width: 1024px) {
  .edc-about__why { padding: 0 var(--edc-section-h) 64px; }
}
.edc-about__why-inner {
  max-width: var(--edc-container);
  margin: 0 auto;
}
.edc-about__why-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1c1c1a 0%, #292928 100%);
  border-radius: var(--edc-radius-2xl);
  padding: 56px 32px;
  box-shadow:
    0 30px 70px -30px rgba(41, 41, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@media (min-width: 768px) {
  .edc-about__why-panel { padding: 72px 64px; }
}
.edc-about__why-orb {
  position: absolute;
  top: -140px;
  right: -140px;
  width: 380px;
  height: 380px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(242, 184, 27, 0.34) 0%, transparent 70%);
  filter: blur(48px);
  pointer-events: none;
}
.edc-about__why-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.edc-about__why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  background: rgba(250, 248, 244, 0.08);
  border: 1px solid rgba(242, 184, 27, 0.35);
  border-radius: 999px;
  font-family: var(--edc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--edc-warm-white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.edc-about__why-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--edc-solar-gold);
  box-shadow: 0 0 0 3px rgba(242, 184, 27, 0.20), 0 0 12px rgba(242, 184, 27, 0.55);
}
.edc-about__why-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--edc-warm-white);
  margin: 6px 0 4px;
  text-wrap: balance;
}
.edc-about__why-body {
  font-family: var(--edc-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250, 248, 244, 0.75);
  margin: 0;
  max-width: 600px;
}
.edc-about__why-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  margin-top: 12px;
  background: var(--edc-solar-gold);
  color: var(--edc-obsidian);
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 28px -12px rgba(242, 184, 27, 0.55);
  transition:
    transform var(--edc-dur-quick) var(--edc-ease),
    background var(--edc-dur-quick) var(--edc-ease),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__why-cta .material-symbols-outlined {
  font-size: 18px !important;
  color: inherit;
  transition: transform var(--edc-dur-quick) var(--edc-ease);
}
.edc-about__why-cta:hover {
  transform: translateY(-2px);
  background: #f5c33a;
  box-shadow: 0 18px 32px -12px rgba(242, 184, 27, 0.70);
}
.edc-about__why-cta:hover .material-symbols-outlined { transform: translateX(3px); }

/* ═══════════════════════════════════════════
   4. MILESTONES / STATS — 2×2 bento
═══════════════════════════════════════════ */
.edc-about__stats {
  padding: 96px var(--edc-space-gutter);
  background: var(--edc-warm-white);
}
@media (min-width: 1024px) {
  .edc-about__stats { padding: 120px var(--edc-section-h); }
}
.edc-about__stats-inner {
  max-width: var(--edc-container);
  margin: 0 auto;
}
.edc-about__stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .edc-about__stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.edc-about__stat {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fff 0%, #fff 60%, rgba(244, 241, 235, 0.55) 100%);
  border: 1px solid var(--edc-border);
  border-radius: var(--edc-radius-bento);
  padding: 40px 32px;
  box-shadow: var(--edc-shadow-sm);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out);
}
/* Subtle gold accent bar along the top edge. */
.edc-about__stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--edc-solar-gold) 0%,
    rgba(242, 184, 27, 0.45) 70%,
    rgba(242, 184, 27, 0) 100%);
  border-radius: 0 0 3px 3px;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 52px -22px rgba(41, 41, 40, 0.22);
    border-color: var(--edc-gold-ring, rgba(242, 184, 27, 0.45));
  }
  .edc-about__stat:hover .edc-about__stat-icon {
    transform: rotate(-6deg) scale(1.06);
    box-shadow:
      0 12px 24px -10px rgba(242, 184, 27, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
}
/* Gold-tint rounded square icon — sits in top-left, above the big number. */
.edc-about__stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--edc-gold-tint, rgba(242, 184, 27, 0.14));
  border: 1px solid var(--edc-gold-ring, rgba(242, 184, 27, 0.35));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow:
    0 6px 14px -8px rgba(242, 184, 27, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__stat-icon .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--edc-obsidian);
}
.edc-about__stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--edc-obsidian);
  margin-bottom: 8px;
}
.edc-about__stat-num {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: var(--edc-track-hero);
  color: var(--edc-obsidian);
}
.edc-about__stat-suffix {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1;
  color: var(--edc-solar-gold);
}
.edc-about__stat-label {
  font-family: var(--edc-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--edc-obsidian);
  margin-bottom: 12px;
}
.edc-about__stat-caption {
  font-family: var(--edc-font-body);
  font-size: 14px;
  line-height: var(--edc-lh-body);
  color: var(--edc-slate);
  margin: 0;
}

/* ═══════════════════════════════════════════
   5. LEADERSHIP — 3-card grid
═══════════════════════════════════════════ */
.edc-about__leaders {
  padding: 96px var(--edc-space-gutter);
  background: var(--edc-cream);
}
@media (min-width: 1024px) {
  .edc-about__leaders { padding: 120px var(--edc-section-h); }
}
.edc-about__leaders-inner {
  max-width: var(--edc-container);
  margin: 0 auto;
}
.edc-about__leaders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .edc-about__leaders-grid { grid-template-columns: repeat(3, 1fr); }
}
.edc-about__leader {
  position: relative;
  background:
    linear-gradient(180deg, #fff 0%, #fff 60%, rgba(244, 241, 235, 0.55) 100%);
  border: 1px solid var(--edc-border);
  border-radius: var(--edc-radius-lg);
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--edc-shadow-sm);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__leader:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 52px -22px rgba(41, 41, 40, 0.22);
    border-color: var(--edc-gold-ring, rgba(242, 184, 27, 0.45));
  }
}
/* Softened square avatar — gold gradient medallion (mirrors pool-icon). */
.edc-about__leader-avatar {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--edc-solar-gold) 0%, #d99a00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow:
    0 14px 28px -12px rgba(242, 184, 27, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__leader:hover .edc-about__leader-avatar {
    transform: rotate(-4deg) scale(1.04);
    box-shadow:
      0 18px 32px -12px rgba(242, 184, 27, 0.70),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
}
.edc-about__leader-avatar span {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 28px;
  color: var(--edc-obsidian);
  letter-spacing: 0.02em;
}
.edc-about__leader-name {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--edc-obsidian);
  margin-bottom: 6px;
}
.edc-about__leader-role {
  font-family: var(--edc-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--edc-solar-gold);
  margin-bottom: 10px;
}
/* Signature-style gold underline flourish under role — expands on hover. */
.edc-about__leader-underline {
  display: block;
  height: 2px;
  width: 24px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, var(--edc-solar-gold) 0%, rgba(242, 184, 27, 0.4) 100%);
  border-radius: 2px;
  transition: width var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__leader:hover .edc-about__leader-underline { width: 56px; }
}
.edc-about__leader-bio {
  font-family: var(--edc-font-body);
  font-size: 14px;
  line-height: var(--edc-lh-body);
  color: var(--edc-slate);
  margin: 0;
}

/* ═══════════════════════════════════════════
   6. CLOSING CTA — cream card with gold border accent
═══════════════════════════════════════════ */
.edc-about__cta {
  padding: 0 var(--edc-space-gutter) 96px;
  background: var(--edc-warm-white);
}
@media (min-width: 1024px) {
  .edc-about__cta { padding: 0 var(--edc-section-h) 120px; }
}
.edc-about__cta-panel {
  position: relative;
  overflow: hidden;
  max-width: var(--edc-container);
  margin: 0 auto;
  padding: 48px 32px;
  background: var(--edc-cream);
  border: 1px solid var(--edc-border);
  border-radius: var(--edc-radius-2xl);
  box-shadow: var(--edc-shadow-md);
}
@media (min-width: 768px) {
  .edc-about__cta-panel { padding: 64px 56px; }
}
/* Gold accent bar along the top edge */
.edc-about__cta-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--edc-solar-gold), var(--edc-pale-gold));
  pointer-events: none;
}
.edc-about__cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 1024px) {
  .edc-about__cta-inner {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }
}
.edc-about__cta-copy { max-width: 640px; }
.edc-about__cta-title {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: var(--edc-lh-tight);
  letter-spacing: var(--edc-track-tight);
  color: var(--edc-obsidian);
  margin: 0 0 12px 0;
}
.edc-about__cta-body {
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-body);
  line-height: var(--edc-lh-body);
  color: var(--edc-slate);
  margin: 0;
}

/* ============================================
   Layout + design refinements (v0.6.1)
   Overrides only. No text content changes.
============================================ */

/* ─── 1. Unified vertical rhythm ─────────────────────────────
   Bring every section into the site-standard token so the
   About page breathes at the same cadence as the rest of the
   site. Also trim mobile section paddings that were over-tall. */
.edc-about__hero,
.edc-about__story,
.edc-about__values,
.edc-about__help {
  padding-top: var(--edc-section-v);
  padding-bottom: var(--edc-section-v);
}
@media (min-width: 1024px) {
  .edc-about__hero      { padding-left: var(--edc-section-h); padding-right: var(--edc-section-h); }
  .edc-about__story     { padding-left: var(--edc-section-h); padding-right: var(--edc-section-h); }
  .edc-about__values    { padding-left: var(--edc-section-h); padding-right: var(--edc-section-h); }
  .edc-about__help      { padding-left: var(--edc-section-h); padding-right: var(--edc-section-h); }
}
.edc-about__why {
  padding-top: 0;
  padding-bottom: var(--edc-section-v);
}
@media (min-width: 1024px) {
  .edc-about__why { padding-left: var(--edc-section-h); padding-right: var(--edc-section-h); }
}

/* ─── 2. Hero decor: quieter background ──────────────────────
   Three overlapping decorative layers (glow + dotted grid +
   two blurred orbs) were competing with the copy. Tone the
   orbs and glow down so the copy leads. */
.edc-about__hero-glow {
  height: 480px;                                    /* was 700px */
  background: radial-gradient(circle at 50% 50%,
              rgba(242, 184, 27, 0.12) 0%,
              transparent 60%);
}
.edc-about__hero-orb   { opacity: 0.5; }
.edc-about__hero-decor { opacity: 0.7; }

/* Tighten hero copy stack rhythm — the 24px gap felt airy after
   the eyebrow pill sat above the H1. */
.edc-about__hero-inner { gap: 20px; }

/* ─── 3. Section headline blocks ─────────────────────────────
   Uniform bottom margin between the head (eyebrow + title +
   lead) and the grid below on all sections. */
.edc-about__section-head { margin-bottom: 40px; }
@media (min-width: 1024px) { .edc-about__section-head { margin-bottom: 48px; } }

/* Kill the extra top gap that grids get since they inherit
   both a section-head margin AND their own margin-top. */
.edc-about__values-bento,
.edc-about__help-grid { margin-top: 0; }

/* ─── 4. Story — cleaner quote treatment ────────────────────
   Retire the floated ::before glyph + halo (fragile across
   line-heights and font-size steps). Replace with a top-of-
   column serif quote badge that sits above the lead paragraph
   and never fights the paragraph's typography. */
.edc-about__story-para--lead::before,
.edc-about__story-para--lead::after { content: none; }

.edc-about__story-right {
  position: relative;
  padding-left: 0;
  padding-top: 12px;
  border-left: 0;
}
/* Editorial quote glyph, block-level above the lead paragraph. */
.edc-about__story-right::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 88px;
  line-height: 0.6;
  height: 32px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, var(--edc-solar-gold) 0%, #d19a0d 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(242, 184, 27, 0.30));
}
@media (min-width: 1024px) {
  .edc-about__story-right::before { font-size: 108px; height: 40px; }
}
.edc-about__story-para--lead {
  color: var(--edc-obsidian);
  font-weight: 600;
}

/* Better badge/title rhythm on the left column. */
.edc-about__story-left { gap: 20px; }
.edc-about__story-est  { margin-top: 4px; }

/* ─── 5. Values feature card ────────────────────────────────
   Radius aligned with the rest of the site's bento cards
   (20px), and a deeper obsidian gradient overlay so the
   Comprehensive Support chip + H3 + body read cleanly against
   the tablet photograph. Same treatment as the workforce-bento
   and solutions-bento feature cards. */
.edc-about__values-feature { border-radius: 20px; }
.edc-about__values-feature-overlay {
  background: linear-gradient(to top,
              rgba(41, 41, 40, 0.95) 0%,
              rgba(41, 41, 40, 0.75) 35%,
              rgba(41, 41, 40, 0.35) 65%,
              rgba(41, 41, 40, 0.20) 100%);
}

/* Match the smaller cards to the same 20px radius so nothing
   in the bento reads as unrelated. */
.edc-about__values-card { border-radius: 20px; }
.edc-about__help-pillar { border-radius: 20px; }

/* ─── 6. Values grid — tighter row height ───────────────────
   grid-auto-rows was 200px so the right stack (two cards)
   left visible space when the copy was short. */
@media (min-width: 768px) {
  .edc-about__values-bento { grid-auto-rows: minmax(170px, auto); }
}

/* ─── 7. Help pillars — lighter number watermark on rest ────
   The 18%-opacity gold numeral read a touch loud alongside
   the icon medallion at rest. Reads cleaner at 12%. */
.edc-about__help-pillar-num { opacity: 0.12; }

/* ─── 8. Why panel — softer orb, wider gutter ───────────────
   The orb accent was sitting near the CTA row; nudge it up so
   it acts as a background flourish instead of a foreground
   element. */
.edc-about__why-orb {
  filter: blur(52px);
  opacity: 0.75;
}

/* ─── 9. Section head width ─────────────────────────────────
   Center-aligned section leads read best inside a comfortable
   measure — cap them so long lines don't sprawl full-width. */
.edc-about__section-head--center .edc-about__section-lead {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   SIGNATURE IDENTITY — About Us page only
   Cinematic + geometric. Alternating light/dark
   sections, oversized decorative shapes, bolder
   typography. Nothing else on the site reads
   like this. CSS-only, no text content touched.
============================================ */

/* Page-level palette shift — warmer off-white base. */
.edc-about { background: #faf7f0; }

/* ─── 1. HERO — cinematic full-bleed with geometric decor ── */
.edc-about__hero {
  padding-top: 120px;
  padding-bottom: 120px;
  background: linear-gradient(180deg, #faf7f0 0%, #f3ecdd 100%);
  overflow: hidden;
}
/* Big gold ring on the right — modernist compositional anchor. */
.edc-about__hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -220px;
  transform: translateY(-50%);
  width: 640px;
  height: 640px;
  border: 40px solid var(--edc-solar-gold);
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1024px) {
  .edc-about__hero::after {
    width: 780px;
    height: 780px;
    right: -260px;
  }
}
/* Ultra-slim vertical accent bar top-left — signature detail. */
.edc-about__hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  width: 3px;
  height: 140px;
  background: linear-gradient(180deg, var(--edc-solar-gold) 0%, transparent 100%);
  z-index: 1;
}
@media (min-width: 1024px) {
  .edc-about__hero::before { left: var(--edc-section-h); }
}
/* Suppress the noisy dotted-grid + orbs — new decor carries weight. */
.edc-about__hero-decor,
.edc-about__hero-orb { display: none; }
.edc-about__hero-glow {
  background: radial-gradient(circle at 40% 50%,
              rgba(242, 184, 27, 0.08) 0%,
              transparent 60%);
  height: 380px;
}

/* Bigger, more assertive hero title. */
.edc-about__hero-title {
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.edc-about__hero-media { position: relative; z-index: 2; }
/* Photo gets a film-plate frame with a subtle gold ring. */
.edc-about__hero-media img {
  border-radius: 24px;
  box-shadow:
    0 40px 80px -32px rgba(41, 41, 40, 0.35),
    0 0 0 8px rgba(255, 255, 255, 0.6),
    0 0 0 9px rgba(242, 184, 27, 0.25);
}

/* ─── 2. STORY — INVERTED obsidian chapter ────────────────
   Full obsidian block with cream typography — a cinematic
   chapter opening that appears nowhere else on the site. */
.edc-about__story {
  background: var(--edc-obsidian);
  color: #f5f3ef;
  overflow: hidden;
}
.edc-about__story-decor { display: none; }
/* Off-canvas dot pattern top-right for texture. */
.edc-about__story::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -100px;
  width: 500px;
  height: 500px;
  background-image: radial-gradient(rgba(242, 184, 27, 0.16) 2px, transparent 2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(closest-side, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(closest-side, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.edc-about__story-inner { position: relative; z-index: 1; }
.edc-about__story-title {
  color: #ffffff;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.03em;
}
.edc-about__story-para,
.edc-about__story-para--lead {
  color: rgba(245, 243, 239, 0.82);
}
.edc-about__story-para--lead {
  color: #ffffff;
  font-size: clamp(22px, 2.3vw, 26px);
  line-height: 1.45;
  font-weight: 500;
  border-left: 3px solid var(--edc-solar-gold);
  padding-left: 20px;
}
/* Suppress old quote glyph — gold border rule carries entrance now. */
.edc-about__story-para--lead::before,
.edc-about__story-para--lead::after,
.edc-about__story-right::before {
  content: none;
}
.edc-about__story-right {
  border-left: 0;
  padding-left: 0;
}
/* Eyebrow pill inverts to warm outline on dark. */
.edc-about__story .edc-about__eyebrow-pill {
  background: transparent;
  border-color: rgba(242, 184, 27, 0.55);
  color: #f5f3ef;
}
/* Est-2018 badge inverts too. */
.edc-about__story-est {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(242, 184, 27, 0.3);
  backdrop-filter: blur(4px);
}
.edc-about__story-est-year { color: #ffffff; }
.edc-about__story-est-label { color: rgba(245, 243, 239, 0.7); }

/* ─── 3. VALUES — asymmetric mosaic on deep cream ────────── */
.edc-about__values {
  background: #f3ecdd;
  overflow: hidden;
}
/* Slanted gold accent stripe on the top-left corner. */
.edc-about__values::after {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: var(--edc-solar-gold);
  transform: rotate(45deg);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.edc-about__values-inner { position: relative; z-index: 1; }
/* Feature card: cinematic photo-plate with thick warm frame. */
.edc-about__values-feature {
  border-radius: 20px;
  padding: 10px;
  background: #ffffff;
  box-shadow:
    0 30px 60px -30px rgba(41, 41, 40, 0.28),
    inset 0 0 0 1px rgba(41, 41, 40, 0.04);
}
.edc-about__values-feature img,
.edc-about__values-feature .edc-about__values-feature-overlay {
  border-radius: 14px;
  inset: 10px;
  width: auto;
  height: auto;
}
/* Deeper overlay gradient so chip + H3 + body always read. */
.edc-about__values-feature-overlay {
  background: linear-gradient(to top,
              rgba(41, 41, 40, 0.95) 0%,
              rgba(41, 41, 40, 0.70) 40%,
              rgba(41, 41, 40, 0.30) 70%,
              rgba(41, 41, 40, 0.15) 100%);
}
/* Value cards: flat editorial with a bold gold corner accent
   that extends on hover — no drop-shadow, no lift. */
.edc-about__values-card {
  background: #ffffff;
  border: 1px solid rgba(211, 197, 172, 0.4);
  border-radius: 20px;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}
.edc-about__values-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 4px;
  background: var(--edc-solar-gold);
  border-radius: 0 0 4px 0;
  transition: width var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__values-card:hover {
    transform: none;
    border-color: rgba(242, 184, 27, 0.5);
    box-shadow: 0 20px 40px -24px rgba(41, 41, 40, 0.18);
  }
  .edc-about__values-card:hover::before { width: 120px; }
}

/* ─── 4. HELP — manuscript-index pillar cards ──────────────
   Trade the lifting card look for a table-of-contents feel:
   massive gold numeral on the left, minimalist copy right. */
.edc-about__help {
  background: #faf7f0;
  overflow: hidden;
}
.edc-about__help-decor { opacity: 0.5; }
.edc-about__help-grid {
  gap: 0;
  margin-top: 48px;
  grid-template-columns: 1fr !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.edc-about__help-pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 32px;
  row-gap: 8px;
  align-items: start;
  padding: 32px 24px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(41, 41, 40, 0.10);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.edc-about__help-pillar:last-child {
  border-bottom: 1px solid rgba(41, 41, 40, 0.10);
}
/* Massive left-column numeral. */
.edc-about__help-pillar-num {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 3;
  font-size: 96px;
  line-height: 1;
  opacity: 1;
  color: transparent;
  background: linear-gradient(180deg, var(--edc-solar-gold) 0%, #b8830a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: none;
  min-width: 100px;
}
@media (min-width: 720px) {
  .edc-about__help-pillar-num { font-size: 120px; min-width: 140px; }
}
/* Hide the icon medallion — the numeral is the identity now. */
.edc-about__help-pillar-icon { display: none; }
/* Title + body flow to the right of the numeral. */
.edc-about__help-pillar-title {
  grid-column: 2;
  font-size: 24px;
  margin-top: 8px;
}
.edc-about__help-pillar-body {
  grid-column: 2;
  font-size: 15px;
  max-width: 56ch;
}
.edc-about__help-pillar-underline { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar {
    transition: background-color var(--edc-dur-medium) var(--edc-ease-out);
  }
  .edc-about__help-pillar:hover {
    background-color: rgba(242, 184, 27, 0.04);
    transform: none;
    box-shadow: none;
    border-top-color: rgba(41, 41, 40, 0.10);
  }
}

/* ─── 5. WHY — bolder panel with cinematic decor ────────── */
.edc-about__why {
  background: transparent;
  padding-top: 32px;
}
.edc-about__why-panel {
  background: linear-gradient(135deg, #1c1c1a 0%, #292928 60%, #1c1c1a 100%);
  overflow: hidden;
}
/* Giant gold arc bottom-right — signature repeat from the hero. */
.edc-about__why-panel::before {
  content: "";
  position: absolute;
  bottom: -180px;
  right: -180px;
  width: 480px;
  height: 480px;
  border: 30px solid var(--edc-solar-gold);
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
}
.edc-about__why-orb {
  filter: blur(70px);
  opacity: 0.6;
}
.edc-about__why-title {
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.03em;
}

/* Bigger section titles overall. */
.edc-about__section-title {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.03em;
}

/* Subtle eyebrow pill refinement. */
.edc-about__eyebrow-pill {
  padding: 8px 18px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  box-shadow: 0 6px 20px -14px rgba(41, 41, 40, 0.20);
}

/* ============================================
   ABOUT-ONLY BENTO REDESIGN
   Cinema banner (full-width feature) + 4-card
   ribbon underneath. Replaces the previous
   8-col/4-col + 6/6 mosaic on this page only.
============================================ */
@media (min-width: 768px) {
  .edc-about__values-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 20px;
  }
  /* 1) Feature spans the full 12 cols as a cinematic banner. */
  .edc-about__values-feature {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 480px;
  }
  /* 2) Value cards drop into a horizontal ribbon: 4 equal cells. */
  .edc-about__values-card--pos-0,
  .edc-about__values-card--pos-1,
  .edc-about__values-card--pos-2,
  .edc-about__values-card--pos-3 {
    grid-column: span 3;
    grid-row: auto;
  }
}

/* ============================================
   ABOUT-ONLY VALUE-CARD REFINEMENT
   Replaces the tiny gold corner accent with a
   proper editorial treatment: full-width top
   gold rule, big serif numeral watermark, richer
   icon medallion, thin divider under the title,
   and a meaningful hover lift.
============================================ */

/* Reset the earlier corner-accent so the new top-rule can own it. */
.edc-about__values-card {
  padding: 36px 28px 32px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(211, 197, 172, 0.4);
  box-shadow: 0 6px 24px -18px rgba(41, 41, 40, 0.14);
  overflow: hidden;
  position: relative;
  gap: 14px;
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
/* Full-width top gold gradient rule (replaces the 48→120 corner). */
.edc-about__values-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg,
              var(--edc-solar-gold) 0%,
              var(--edc-solar-gold) 35%,
              rgba(242, 184, 27, 0.25) 100%);
  border-radius: 0;
  transition: none;
}
/* Big serif numeral watermark in the top-right, auto-numbered
   via a counter scoped to the ribbon so it stays in sync with
   how many cards render. */
.edc-about__values-bento { counter-reset: about-value; }
.edc-about__values-card { counter-increment: about-value; }
.edc-about__values-card::after {
  content: counter(about-value, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg,
              rgba(242, 184, 27, 0.85) 0%,
              rgba(184, 131, 10, 0.75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.18;
  pointer-events: none;
  transition:
    opacity var(--edc-dur-medium) var(--edc-ease-out),
    transform var(--edc-dur-medium) var(--edc-ease-out);
}

/* Meaningful hover lift + border and watermark reveal. */
@media (prefers-reduced-motion: no-preference) {
  .edc-about__values-card:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 184, 27, 0.55);
    box-shadow: 0 22px 44px -20px rgba(41, 41, 40, 0.20);
  }
  .edc-about__values-card:hover::after {
    opacity: 0.32;
    transform: translateY(-2px);
  }
}

/* Icon medallion — slightly larger + a soft warm glow underneath. */
.edc-about__values-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.edc-about__values-card-icon .material-symbols-outlined {
  font-size: 30px !important;
}

/* Thin gold divider under the card title — punctuates the entry
   into the body copy. */
.edc-about__values-card h4 {
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(242, 184, 27, 0.28);
  font-size: 20px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.edc-about__values-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--edc-slate);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Suppress the serif numeral watermark on the value cards. */
.edc-about__values-card::after,
.edc-about__values-card:hover::after {
  content: none;
}

/* Round the top gold rule to match the card's 20px radius so the
   stripe follows the card's curve instead of ending in sharp corners
   that don't line up with the rounded edge. */
.edc-about__values-card::before {
  border-radius: 20px 20px 0 0;
}

/* Kill the pseudo-element top rule — it can't perfectly match the
   card's rounded corners because it sits inside the 1px border and
   leaves a visible gap at the curve. Replace with a real border-top
   directly on the card, which browsers clip cleanly against the
   border-radius. Adjust top padding to keep the internal rhythm. */
.edc-about__values-card::before {
  content: none;
}
.edc-about__values-card {
  border-top: 3px solid var(--edc-solar-gold);
  padding-top: 34px;
}

/* ============================================
   ABOUT-ONLY HELP LIST REFINEMENT
   Timeline connector between numerals, halo
   behind each digit, short gold rule under each
   title, and a chevron that reveals on hover.
============================================ */

/* The grid becomes a positioning context for the vertical connector
   that threads through the numerals. */
.edc-about__help-grid { position: relative; }

/* Vertical gold connector line running down the numerals column,
   threading 01 → 02 → 03 into a single reading arc. */
.edc-about__help-grid::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 50px;
  width: 2px;
  background: linear-gradient(180deg,
              transparent 0%,
              rgba(242, 184, 27, 0.55) 12%,
              rgba(242, 184, 27, 0.55) 88%,
              transparent 100%);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 720px) {
  .edc-about__help-grid::before { left: 70px; }
}

/* Row: keep the manuscript-index bones, but drop the harsh top
   border between rows (the timeline connector does that job now)
   and give each row proper vertical breathing room. */
.edc-about__help-pillar {
  padding: 40px 24px;
  border-top: 0;
  position: relative;
  z-index: 1;
  align-items: center;
}
.edc-about__help-pillar:last-child { border-bottom: 0; }

/* Subtle warm circular halo behind each numeral so it reads as a
   milestone on the connector, not just a floating digit. */
.edc-about__help-pillar-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 120px;
}
@media (min-width: 720px) {
  .edc-about__help-pillar-num { min-width: 140px; min-height: 140px; }
}
.edc-about__help-pillar-num::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 255, 255, 0.95) 0%,
              rgba(250, 247, 240, 0.85) 55%,
              rgba(250, 247, 240, 0) 78%);
  z-index: -1;
  transition: transform var(--edc-dur-medium) var(--edc-ease-out);
}

/* Short gold rule under each row title — a small typographic beat
   between the H3 and the body copy. */
.edc-about__help-pillar-title {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  position: relative;
}
.edc-about__help-pillar-title::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--edc-solar-gold);
  border-radius: 2px;
  transition: width var(--edc-dur-medium) var(--edc-ease-out);
}

/* Right-side chevron that reveals on hover. Sits as its own grid
   column so the numeral + copy layout stays clean. */
.edc-about__help-pillar {
  grid-template-columns: auto 1fr auto;
}
.edc-about__help-pillar-body { grid-column: 2; }
.edc-about__help-pillar::after {
  content: "\2192";                              /* → */
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  font-family: var(--edc-font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--edc-solar-gold);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity var(--edc-dur-medium) var(--edc-ease-out),
    transform var(--edc-dur-medium) var(--edc-ease-out);
  padding-left: 24px;
}

/* Warmer, more meaningful hover — halo grows, title rule extends,
   chevron slides in. */
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover { background: transparent; }
  .edc-about__help-pillar:hover .edc-about__help-pillar-num::before {
    transform: scale(1.05);
  }
  .edc-about__help-pillar:hover .edc-about__help-pillar-title::after {
    width: 72px;
  }
  .edc-about__help-pillar:hover::after {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   ABOUT-ONLY HELP GRID — OBSIDIAN TILES
   Full pivot: 3 tall dark cards side-by-side.
   Big gold icon medallion, oversized numeral
   watermark, cream typography, gold divider.
============================================ */

/* Reset the timeline block that came before. */
.edc-about__help-grid::before,
.edc-about__help-pillar::after,
.edc-about__help-pillar-num::before,
.edc-about__help-pillar-title::after {
  content: none;
}

/* Section background: warm off-white gets a large centred glow so
   the dark tiles pop against it. */
.edc-about__help {
  background: #faf7f0;
}
.edc-about__help::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 90%);
  height: 480px;
  background: radial-gradient(ellipse at center,
              rgba(242, 184, 27, 0.14) 0%,
              transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.edc-about__help-inner { position: relative; z-index: 1; }

/* GRID: 3 equal tall cards on desktop; stack on mobile. */
.edc-about__help-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 1160px !important;
  margin: 48px auto 0 !important;
}
@media (min-width: 900px) {
  .edc-about__help-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}

/* CARD: obsidian tile, full reset from the previous list treatment. */
.edc-about__help-pillar {
  display: block;
  grid-template-columns: none;
  padding: 44px 34px 40px !important;
  background: linear-gradient(160deg, #1c1c1a 0%, #292928 65%, #1c1c1a 100%) !important;
  border: 1px solid rgba(242, 184, 27, 0.18);
  border-top: 1px solid rgba(242, 184, 27, 0.18);
  border-radius: 24px !important;
  overflow: hidden;
  min-height: 340px;
  box-shadow:
    0 30px 60px -32px rgba(41, 41, 40, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out);
}
.edc-about__help-pillar:last-child { border-bottom: 1px solid rgba(242, 184, 27, 0.18); }
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 184, 27, 0.5);
    box-shadow:
      0 40px 80px -30px rgba(41, 41, 40, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, #1c1c1a 0%, #333330 65%, #1c1c1a 100%) !important;
  }
}

/* OVERSIZED NUMERAL WATERMARK — sits in the bottom-right of the card. */
.edc-about__help-pillar-num {
  display: block !important;
  position: absolute !important;
  bottom: -30px !important;
  right: -8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  font-size: 200px !important;
  line-height: 0.85 !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  background: linear-gradient(180deg,
              rgba(242, 184, 27, 0.30) 0%,
              rgba(242, 184, 27, 0.08) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 0;
  transition: transform var(--edc-dur-medium) var(--edc-ease-out) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover .edc-about__help-pillar-num {
    transform: translateY(-4px) !important;
  }
}

/* GOLD ICON MEDALLION — bring the icon back, style as site-standard
   gradient squircle. */
.edc-about__help-pillar-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffd875 0%, var(--edc-solar-gold) 55%, #d19a0d 100%);
  color: var(--edc-obsidian);
  box-shadow:
    0 12px 24px -10px rgba(242, 184, 27, 0.6),
    inset 0 -2px 4px rgba(209, 154, 13, 0.25);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.edc-about__help-pillar-icon .material-symbols-outlined {
  font-size: 30px !important;
  color: var(--edc-obsidian) !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 30;
}

/* Title + body — cream typography, subtle gold divider between. */
.edc-about__help-pillar-title {
  display: block;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(242, 184, 27, 0.28);
  position: relative;
  z-index: 1;
}
.edc-about__help-pillar-body {
  display: block;
  color: rgba(245, 243, 239, 0.72) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  max-width: none !important;
  position: relative;
  z-index: 1;
}

/* Hide the oversized numeral watermark on the About help tiles. */
.edc-about__help-pillar-num {
  display: none !important;
}

/* ============================================
   ABOUT-ONLY HELP GRID — WARM PIVOT
   The Why panel below is already obsidian, so
   the three "Our Solution" tiles switch to a
   warm cream + rich gold-framed palette. Nothing
   else on the site reads this way.
============================================ */

/* Section: deeper cream base + a warmer radial wash so the tiles
   feel bedded on a golden stage. */
.edc-about__help {
  background: #f3ecdd !important;
}
.edc-about__help::after {
  background: radial-gradient(ellipse at center,
              rgba(242, 184, 27, 0.22) 0%,
              rgba(242, 184, 27, 0.06) 45%,
              transparent 75%) !important;
}

/* CARD: warm cream tile with a rich gold hairline frame and a
   soft honey-glow underneath. */
.edc-about__help-pillar {
  background:
    linear-gradient(180deg, #ffffff 0%, #fdf6e5 100%) !important;
  border: 1.5px solid rgba(242, 184, 27, 0.45) !important;
  border-top: 1.5px solid rgba(242, 184, 27, 0.45) !important;
  box-shadow:
    0 24px 48px -28px rgba(184, 131, 10, 0.35),
    0 8px 20px -14px rgba(41, 41, 40, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.edc-about__help-pillar:last-child {
  border-bottom: 1.5px solid rgba(242, 184, 27, 0.45) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover {
    background: linear-gradient(180deg, #ffffff 0%, #fbeecb 100%) !important;
    border-color: var(--edc-solar-gold) !important;
    box-shadow:
      0 34px 60px -28px rgba(184, 131, 10, 0.45),
      0 12px 24px -14px rgba(41, 41, 40, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  }
}

/* GOLD RAIL top-left — a small vertical accent bar in the corner
   as a distinctive editorial anchor. */
.edc-about__help-pillar {
  position: relative;
}
.edc-about__help-pillar::after {
  content: "" !important;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 3px;
  height: 40px;
  background: linear-gradient(180deg,
              var(--edc-solar-gold) 0%,
              rgba(242, 184, 27, 0.3) 100%);
  border-radius: 3px;
  opacity: 1;
  transform: none;
  padding: 0;
  transition: height var(--edc-dur-medium) var(--edc-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover::after {
    height: 72px;
  }
}

/* Push the icon in from the left so the gold rail doesn't collide
   with it. */
.edc-about__help-pillar-icon {
  margin-left: 20px;
}

/* Title in obsidian, divider stays gold. */
.edc-about__help-pillar-title {
  color: var(--edc-obsidian) !important;
  border-bottom-color: rgba(242, 184, 27, 0.4) !important;
  margin-left: 20px !important;
}

/* Body copy in slate for warm readability on cream. */
.edc-about__help-pillar-body {
  color: var(--edc-slate) !important;
  margin-left: 20px !important;
}

/* ============================================
   ABOUT-ONLY HELP CARDS — BALANCED LAYOUT
   Vertically-centered content, tighter internal
   rhythm, and a stronger visual anchor so cards
   with different body lengths still look level.
============================================ */

/* Reset from earlier block:false and re-enable flex column so
   content can be distributed vertically. */
.edc-about__help-pillar {
  display: flex !important;
  flex-direction: column;
  justify-content: center;                     /* content centered vertically */
  align-items: flex-start;
  gap: 14px;
  padding: 44px 36px !important;
  min-height: 360px !important;
}

/* Kill the earlier grid template rules that assumed a 3-col row
   layout inside the card. */
.edc-about__help-pillar > * { grid-column: auto; grid-row: auto; }

/* Reposition the gold rail from a small top-left tab to a taller
   vertical stripe along the LEFT edge — a stronger, more visible
   anchor that centers with the content. */
.edc-about__help-pillar::after {
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  height: 72px !important;
  width: 4px !important;
  background: linear-gradient(180deg,
              var(--edc-solar-gold) 0%,
              #d19a0d 100%) !important;
  border-radius: 0 4px 4px 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover::after {
    height: 120px !important;
  }
}

/* Content sits inside its own inner block so the left-edge rail
   doesn't crowd the icon/title/body. */
.edc-about__help-pillar-icon,
.edc-about__help-pillar-title,
.edc-about__help-pillar-body {
  margin-left: 8px !important;
}

/* Icon-title clustering — tighter than before, reads as a header. */
.edc-about__help-pillar-icon { margin-bottom: 8px !important; }

/* Title + divider tuned so shorter titles still get an even rule. */
.edc-about__help-pillar-title {
  font-size: 22px !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}

/* Body copy — comfortable measure, better line-height. */
.edc-about__help-pillar-body {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  max-width: 34ch !important;
}

/* ============================================
   ABOUT-ONLY HELP CARDS — POSTER TREATMENT
   Bold gold banner across the top of each card
   with a centered icon medallion, then white
   copy area below. Distinct, premium, poster-y.
============================================ */

/* Section back to a soft neutral so the bold gold banners pop. */
.edc-about__help {
  background: #faf7f0 !important;
}
.edc-about__help::after {
  background: radial-gradient(ellipse at center,
              rgba(242, 184, 27, 0.12) 0%,
              transparent 60%) !important;
}

/* CARD — reset previous treatment. Clean white body + rich gold
   top banner via a large ::before. */
.edc-about__help-pillar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-height: 380px !important;
  background: #ffffff !important;
  border: 1px solid rgba(211, 197, 172, 0.35) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow:
    0 20px 40px -24px rgba(41, 41, 40, 0.18),
    0 6px 16px -12px rgba(184, 131, 10, 0.20) !important;
  gap: 0 !important;
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover {
    transform: translateY(-6px) !important;
    box-shadow:
      0 30px 56px -24px rgba(41, 41, 40, 0.22),
      0 10px 24px -12px rgba(184, 131, 10, 0.28) !important;
  }
}

/* TOP BANNER — solid gold gradient, occupies the top 128px. */
.edc-about__help-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 128px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.28) 0%, transparent 55%),
    linear-gradient(135deg, #ffd875 0%, var(--edc-solar-gold) 50%, #d19a0d 100%);
  z-index: 0;
}

/* Drop the left-edge rail — the top banner is the anchor now. */
.edc-about__help-pillar::after {
  content: none !important;
}

/* ICON — sits centered in the banner, floats on a soft white puck
   so it reads as a badge, not a glyph pasted on gold. */
.edc-about__help-pillar-icon {
  position: relative !important;
  z-index: 2 !important;
  width: 72px !important;
  height: 72px !important;
  margin: 28px auto 0 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: var(--edc-obsidian) !important;
  box-shadow:
    0 12px 28px -10px rgba(41, 41, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.edc-about__help-pillar-icon .material-symbols-outlined {
  color: var(--edc-obsidian) !important;
  font-size: 32px !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 32;
}

/* COPY AREA — pushed down below the banner. Centered content, tighter
   internal rhythm, and equal presentation regardless of body length. */
.edc-about__help-pillar-title,
.edc-about__help-pillar-body {
  position: relative;
  z-index: 1;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  text-align: center;
}
.edc-about__help-pillar-title {
  margin-top: 88px !important;                 /* clear the top banner */
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  color: var(--edc-obsidian) !important;
  font-size: 22px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-bottom: 0 !important;
  position: relative;
}
/* Short centered gold rule under the title. */
.edc-about__help-pillar-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--edc-solar-gold) 0%, #d19a0d 100%);
}
.edc-about__help-pillar-body {
  color: var(--edc-slate) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  max-width: none !important;
  margin-bottom: 32px !important;
  margin-top: 0 !important;
}

/* ============================================
   ABOUT-ONLY HELP — EDITORIAL COLUMNS
   Full pivot: no cards. Three clean columns
   sit directly on the section background,
   separated by thin vertical gold rules.
   Big gold-ring icons, centered typography.
============================================ */

/* Section: keep the warm cream, dial the glow back so it doesn't
   compete with the icons. */
.edc-about__help {
  background: #f3ecdd !important;
}
.edc-about__help::after {
  background: radial-gradient(ellipse at center,
              rgba(242, 184, 27, 0.08) 0%,
              transparent 70%) !important;
  height: 300px !important;
}

/* GRID: three equal columns, big gaps between so the dividers
   have room to breathe. */
.edc-about__help-grid {
  gap: 0 !important;
  max-width: 1160px !important;
  margin: 56px auto 0 !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px) {
  .edc-about__help-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

/* COLUMN: shed every card treatment — no bg, no border, no shadow,
   no radius. Just centered content on the section. */
.edc-about__help-pillar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px 40px !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 20px !important;
  position: relative;
}
/* Thin vertical gold rule between adjacent columns. */
@media (min-width: 900px) {
  .edc-about__help-pillar + .edc-about__help-pillar::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg,
                transparent 0%,
                rgba(184, 131, 10, 0.35) 20%,
                rgba(184, 131, 10, 0.35) 80%,
                transparent 100%);
    pointer-events: none;
  }
}
/* Kill the earlier hover treatments — plain typography wins. */
@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}
.edc-about__help-pillar::after { content: none !important; }

/* ICON: BIG gold ring with obsidian glyph inside — a serious badge,
   not a small squircle. */
.edc-about__help-pillar-icon {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  margin: 0 0 8px !important;
  background: transparent !important;
  border: 2px solid var(--edc-solar-gold) !important;
  box-shadow:
    inset 0 0 0 8px rgba(242, 184, 27, 0.10),
    0 12px 24px -14px rgba(184, 131, 10, 0.35) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--edc-obsidian) !important;
}
.edc-about__help-pillar-icon .material-symbols-outlined {
  color: var(--edc-obsidian) !important;
  font-size: 40px !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 40;
}

/* TITLE: bigger, obsidian, no divider — the gold rule below carries
   the beat. */
.edc-about__help-pillar-title {
  color: var(--edc-obsidian) !important;
  font-size: 24px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
  padding-bottom: 14px !important;
}
.edc-about__help-pillar-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--edc-solar-gold);
}

/* BODY: slate copy, comfortable measure, centered. */
.edc-about__help-pillar-body {
  color: var(--edc-slate) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 34ch !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ============================================
   ABOUT-ONLY HELP CARDS — CLEAN ELEVATED
   Simple, distinctive cards. Pure white base
   with a subtle warm border, centered icon in
   a gold circle, and a short gold underline
   under each title. Balanced regardless of
   body length.
============================================ */

/* Section: keep the warm cream stage. */
.edc-about__help {
  background: #f3ecdd !important;
}
.edc-about__help::after {
  background: radial-gradient(ellipse at center,
              rgba(242, 184, 27, 0.10) 0%,
              transparent 65%) !important;
  height: 380px !important;
  top: 15% !important;
}

/* GRID: 3 equal cards, generous gaps. */
.edc-about__help-grid {
  gap: 28px !important;
  max-width: 1160px !important;
  margin: 56px auto 0 !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px) {
  .edc-about__help-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* Kill the vertical dividers from the previous editorial pass. */
.edc-about__help-pillar + .edc-about__help-pillar::before {
  content: none !important;
}

/* CARD: pure white plate with a very soft warm border and a layered
   warm shadow. Rounded 22px, generous padding, centered composition. */
.edc-about__help-pillar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center;
  background: #ffffff !important;
  border: 1px solid rgba(211, 197, 172, 0.55) !important;
  border-top: 1px solid rgba(211, 197, 172, 0.55) !important;
  border-bottom: 1px solid rgba(211, 197, 172, 0.55) !important;
  border-radius: 22px !important;
  padding: 48px 32px 44px !important;
  min-height: 360px !important;
  overflow: hidden !important;
  gap: 18px !important;
  box-shadow:
    0 20px 44px -24px rgba(41, 41, 40, 0.15),
    0 4px 12px -8px rgba(184, 131, 10, 0.14) !important;
  transition:
    transform var(--edc-dur-medium) var(--edc-ease-out),
    box-shadow var(--edc-dur-medium) var(--edc-ease-out),
    border-color var(--edc-dur-medium) var(--edc-ease-out) !important;
  position: relative;
}
.edc-about__help-pillar::after,
.edc-about__help-pillar::before { content: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .edc-about__help-pillar:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(242, 184, 27, 0.5) !important;
    box-shadow:
      0 30px 60px -24px rgba(41, 41, 40, 0.20),
      0 8px 20px -10px rgba(184, 131, 10, 0.24) !important;
    background: #ffffff !important;
  }
}

/* ICON: gold gradient circle (not squircle) centered at the top.
   Feels distinctive vs the squircles used everywhere else on the
   site — a signature detail just for the About page cards. */
.edc-about__help-pillar-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.4) 0%, transparent 55%),
    linear-gradient(135deg, #ffd875 0%, var(--edc-solar-gold) 55%, #d19a0d 100%) !important;
  color: var(--edc-obsidian) !important;
  margin: 0 0 6px !important;
  box-shadow:
    0 14px 26px -10px rgba(242, 184, 27, 0.6),
    inset 0 -2px 6px rgba(209, 154, 13, 0.28),
    inset 0 2px 4px rgba(255, 255, 255, 0.35) !important;
}
.edc-about__help-pillar-icon .material-symbols-outlined {
  color: var(--edc-obsidian) !important;
  font-size: 34px !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 34;
}

/* TITLE: bold obsidian, centered, with a short gold rule underneath. */
.edc-about__help-pillar-title {
  color: var(--edc-obsidian) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 4px 0 0 !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  position: relative;
}
.edc-about__help-pillar-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--edc-solar-gold) 0%, #d19a0d 100%);
}

/* BODY: slate copy, centered, comfortable measure. */
.edc-about__help-pillar-body {
  color: var(--edc-slate) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  max-width: 34ch !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Hide the geometric decor shapes on the hero — the big gold ring
   on the right and the slim vertical accent bar on the top-left. */
.edc-about__hero::before,
.edc-about__hero::after {
  content: none !important;
}

/* Hide EVERY decorative element inside the hero so the section
   sits on a clean warm background with just the copy + photo. */
.edc-about__hero-glow,
.edc-about__hero-decor,
.edc-about__hero-orb,
.edc-about__hero-orb--tl,
.edc-about__hero-orb--br {
  display: none !important;
}

/* Force the hero to a solid flat background — remove the linear
   gradient that was creating visible warm banding at the top edge.
   Also strip any lingering background layers from the .edc-about
   root and the hero-inner so nothing paints a shape underneath. */
.edc-about {
  background: #faf7f0 !important;
}
.edc-about__hero {
  background: #faf7f0 !important;
  background-image: none !important;
}
.edc-about__hero-inner {
  background: transparent !important;
  background-image: none !important;
}

/* ============================================
   HERO CLEAN-SLATE — aggressive suppression
   Every decorative helper in or around the
   About hero gets nuked. Catches Elementor
   wrappers and any lingering shape helpers
   whose names include decor/orb/glow/shape.
============================================ */

/* Any element inside the About widget whose class hints at decor. */
.edc-about *[class*="decor"],
.edc-about *[class*="orb"],
.edc-about *[class*="glow"],
.edc-about *[class*="shape"],
.edc-about *[class*="halo"],
.edc-about *[class*="ornament"] {
  display: none !important;
}

/* Elementor wrappers that host this widget — strip any bg + overlay. */
.elementor-widget-edc_about_page,
.elementor-widget-edc_about_page > .elementor-widget-container,
.elementor-widget-edc_about_page .elementor-background-overlay,
.elementor-section:has(.edc-about),
.elementor-section:has(.edc-about) > .elementor-background-overlay {
  background: transparent !important;
  background-image: none !important;
}

/* Force every direct child of the hero section (except the copy
   and media containers) to be invisible — belt-and-suspenders
   against any div we may have missed. */
.edc-about__hero > div:not(.edc-about__hero-inner) {
  display: none !important;
}

/* ============================================
   Elementor shape dividers — hide any SVG shape
   attached to the top/bottom of the section that
   hosts the About widget. Editors can drop these
   in from the Elementor UI (triangles, waves…)
   and they render as position:absolute SVGs at
   the section edges.
============================================ */
.elementor-section:has(.edc-about) .elementor-shape,
.elementor-section:has(.edc-about) .elementor-shape-top,
.elementor-section:has(.edc-about) .elementor-shape-bottom,
.elementor-widget-edc_about_page + .elementor-shape,
.elementor-widget-edc_about_page ~ .elementor-shape {
  display: none !important;
}
/* Broader fallback — any shape divider that appears just before
   or inside the About widget's container tree. */
.elementor-widget-edc_about_page .elementor-shape,
.elementor-widget-edc_about_page > .elementor-shape,
.elementor-widget-edc_about_page ~ .elementor-shape {
  display: none !important;
}
/* And any WordPress .elementor-widget-container ::before / ::after
   that a background overlay may leak through. */
.elementor-widget-edc_about_page > .elementor-widget-container::before,
.elementor-widget-edc_about_page > .elementor-widget-container::after {
  content: none !important;
}

/* Match the About widget's warm-white to the site body color
   (rgb 250, 248, 244) exactly. Any 1-point mismatch shows through
   the header's backdrop-filter as a visible tint band or "shape". */
.edc-about,
.edc-about__hero,
.edc-about__hero-inner {
  background: rgb(250, 248, 244) !important;
  background-color: rgb(250, 248, 244) !important;
  background-image: none !important;
}