/* =================================================================
   AURETHIONX — about.css  LUXURY v8
   - About section now FILLS THE VIEWPORT (100vh) so the next section
     (Services) is pushed fully below the fold — no peeking.
   - Page ends cleanly at the gold line at the bottom of the viewport.
   - Services appears only on scroll-down or via the Services nav.
   - All theme / glow / particles / animations / spacing preserved.
   ================================================================= */

/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE WRAPPER  — fills the full screen height
   ══════════════════════════════════════════════════════════════════ */
#about-page {
  scroll-margin-top: 82px;
  position: relative;
  overflow: hidden;

  /* ⭐ FILL THE VIEWPORT so Services can't peek at the bottom */
  min-height: 100vh;
  min-height: 100dvh;          /* mobile-accurate viewport unit */
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(ellipse 100% 55% at 50% -8%,  rgba(201,168,76,.07), transparent 55%),
    radial-gradient(ellipse  90% 55% at 50% 108%, rgba(176,141,58,.05), transparent 60%),
    radial-gradient(circle at 80% 26%, rgba(212,180,92,.06), transparent 42%),
    radial-gradient(circle at 12% 74%, rgba(176,141,58,.05), transparent 42%),
    radial-gradient(ellipse 160% 130% at 50% 50%, transparent 52%, rgba(0,0,0,.68) 100%),
    #050506;
  isolation: isolate;
}

/* Gold bridge line at top */
#about-page::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 25;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201,168,76,0.75) 30%, #FFF0A0 50%,
    rgba(201,168,76,0.75) 70%, transparent 100%);
  box-shadow:
    0 0 12px rgba(255,240,160,0.90),
    0 0 30px rgba(201,168,76,0.65),
    0 0 60px rgba(201,168,76,0.30);
}

/* ── Particle field layer 1 ── */
#about-page::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 100%;
  z-index: 1; pointer-events: none;
  background-image:
    url("../images/network-bg.png"),
    url("../images/contact/particles.png");
  background-repeat: repeat, repeat;
  background-position: center, 0 0;
  background-size: 64% auto, 480px auto;
  opacity: .24;
  mix-blend-mode: screen;
  filter: saturate(.8) sepia(.06);
  -webkit-mask-image: radial-gradient(ellipse 88% 88% at 58% 45%, #000 42%, transparent 92%);
          mask-image: radial-gradient(ellipse 88% 88% at 58% 45%, #000 42%, transparent 92%);
  animation: driftLeft 90s linear infinite;
}
@keyframes driftLeft {
  0%   { transform: translateX(0);    }
  100% { transform: translateX(-50%); }
}

/* ── Particle field layer 2 (disabled below for clean look) ── */
.about-orbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.about-orbs::before {
  content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 200%;
  background-image: url("../images/contact/particles.png");
  background-size: 520px auto; background-repeat: repeat;
  filter: saturate(.85); opacity: .18; mix-blend-mode: screen;
  animation: floatUp 52s linear infinite;
}
.about-orbs::after {
  content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 200%;
  background-image: url("../images/contact/spark-lines.png");
  background-size: 760px auto; background-repeat: repeat;
  filter: saturate(.78); opacity: .10; mix-blend-mode: screen;
  animation: floatUp 74s linear infinite reverse;
}
@keyframes floatUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Ambient gold orbs (disabled below) ── */
.orb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform, opacity; z-index: 2; }
.orb-1 { width:650px;height:650px;top:5%;left:-10%;background:radial-gradient(circle,rgba(201,168,76,0.18) 0%,rgba(201,168,76,0.05) 40%,transparent 70%);filter:blur(45px);animation:orb1 20s ease-in-out infinite; }
.orb-2 { width:520px;height:520px;top:35%;right:-8%;background:radial-gradient(circle,rgba(232,201,109,0.16) 0%,rgba(232,201,109,0.04) 40%,transparent 70%);filter:blur(50px);animation:orb2 24s ease-in-out infinite;animation-delay:-8s; }
.orb-3 { width:460px;height:460px;top:65%;left:25%;background:radial-gradient(circle,rgba(255,215,100,0.14) 0%,rgba(201,168,76,0.04) 40%,transparent 70%);filter:blur(48px);animation:orb3 22s ease-in-out infinite;animation-delay:-14s; }
.orb-4 { width:400px;height:400px;bottom:5%;right:20%;background:radial-gradient(circle,rgba(201,168,76,0.16) 0%,rgba(201,168,76,0.04) 40%,transparent 70%);filter:blur(45px);animation:orb1 28s ease-in-out infinite;animation-delay:-5s; }
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1);opacity:.85;} 33%{transform:translate(60px,-70px) scale(1.15);opacity:1;} 66%{transform:translate(-40px,50px) scale(0.90);opacity:.90;} }
@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1);opacity:.75;} 40%{transform:translate(-70px,50px) scale(1.10);opacity:1;} 70%{transform:translate(45px,-60px) scale(0.94);opacity:.85;} }
@keyframes orb3 { 0%,100%{transform:translate(0,0) scale(1);opacity:.70;} 50%{transform:translate(50px,-40px) scale(1.20);opacity:1;} }

#aboutCanvas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.about-grid, .about-vignette, .about-noise { display: none; }

/* ══════════════════════════════════════════════════════════════════
   STATS BAR  — compacted
   ══════════════════════════════════════════════════════════════════ */
.stats-bar {
  flex: 0 0 auto;                          /* natural height in the flex column */
  background: rgba(5,5,8,0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 12px 0 0;
  border-bottom: 1px solid rgba(201,168,76,0.16);
  position: relative; z-index: 5; overflow: visible;
}
.stats-bar::before {
  content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.60) 30%, rgba(255,240,160,0.80) 50%, rgba(201,168,76,0.60) 70%, transparent);
  box-shadow: 0 0 12px rgba(201,168,76,0.50);
}
.stats-inner {
  max-width: 1760px; margin: 0 auto; padding: 0 44px;
  display: grid; grid-template-columns: repeat(5,1fr); align-items: stretch;
}
.stat-item {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 22px 14px;
  border-right: 1px solid rgba(201,168,76,0.10);
  position: relative; transition: background .35s;
}
.stat-item::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #C9A84C 30%, #FFF0A0 50%, #C9A84C 70%, transparent);
  box-shadow: 0 0 10px rgba(201,168,76,0.6);
  transform: scaleX(0); transition: transform .40s cubic-bezier(.4,0,.2,1);
}
.stat-item:hover::after { transform: scaleX(1); }
.stat-item--last { border-right: none; }
.stat-item:hover { background: rgba(201,168,76,0.045); }

.stat-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.20);
  transition: all .35s;
}
.stat-item:hover .stat-icon {
  background: rgba(201,168,76,0.16);
  border-color: rgba(201,168,76,0.55);
  box-shadow: 0 0 22px rgba(201,168,76,0.30), inset 0 0 14px rgba(201,168,76,0.10);
}
.stat-icon img {
  width: 25px; height: 25px; object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(212,175,55,0.32)); transition: .35s;
}
.stat-item:hover .stat-icon img { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(255,215,100,0.80)); }

.stat-body { display: flex; flex-direction: column; gap: 2px; }
.stat-num {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #C9A84C, #F0D890, #C9A84C, #8B6914);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.42));
  animation: numShimmer 5s linear infinite;
}
@keyframes numShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.stat-label { font-family: 'Montserrat',sans-serif; font-size: .76rem; font-weight: 700; color: #fff; letter-spacing: .03em; line-height: 1.25; }
.stat-label--large { font-size: .84rem; color: #C9A84C; }
.stat-desc { font-family: 'Montserrat',sans-serif; font-size: .63rem; color: rgba(255,255,255,0.38); line-height: 1.35; max-width: 150px; }

/* ══════════════════════════════════════════════════════════════════
   ABOUT MAIN  — grows to fill the rest of the screen; gold line hugs
   the very bottom of the viewport.
   ══════════════════════════════════════════════════════════════════ */
.about-main {
  flex: 1 0 auto;                          /* ⭐ grows to fill viewport */
  background: transparent;
  padding: 26px 0 18px;
  position: relative; z-index: 5;
  /* content sits at the TOP (right under the stats bar); the extra
     viewport height goes to the bottom — no gap above the content */
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* ⭐ ONE clean big gold line that CLOSES the About page at the bottom. */
.about-main::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 25;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201,168,76,0.75) 28%, #FFF0A0 50%,
    rgba(201,168,76,0.75) 72%, transparent 100%);
  box-shadow:
    0 0 12px rgba(255,240,160,0.85),
    0 0 28px rgba(201,168,76,0.55);
}
.about-main-inner {
  max-width: 1760px; margin: 0 auto; padding: 0 44px;
  width: 100%;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 48px;
  align-items: stretch;
  position: relative;
}
.about-intro { position: static; align-self: center; }
.about-intro-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 2.1vw, 2.3rem);
  font-weight: 700; color: #fff; line-height: 1.16; margin-bottom: 12px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9);
}
.about-intro-divider {
  width: 56px; height: 2px; margin-bottom: 14px;
  background: linear-gradient(90deg, #C9A84C, #F0D890, #C9A84C);
  box-shadow: 0 0 12px rgba(201,168,76,0.55);
}
.about-intro-text {
  font-family: 'Montserrat', sans-serif;
  font-size: .84rem; color: rgba(255,255,255,0.75);
  line-height: 1.62; margin-bottom: 11px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.about-cta { margin-top: 14px; display: inline-flex; }

.eyebrow-sm {
  font-family: 'Raleway', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .32em; color: #C9A84C; text-transform: uppercase;
  display: block; margin-bottom: 11px;
}
.gtxt {
  background: linear-gradient(135deg, #C9A84C, #E8C96D 45%, #C9A84C 68%, #8B6914);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS  — compact padding, GAPS KEPT, GLOW BOOSTED
   ══════════════════════════════════════════════════════════════════ */
.about-cards-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 20px;
  align-content: stretch;
}

@keyframes cardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes cardGlow {
  0%,100% { box-shadow: 0 6px 26px rgba(0,0,0,0.60), 0 0 22px rgba(201,168,76,0.14), inset 0 1px 0 rgba(255,255,255,0.04); }
  50%     { box-shadow: 0 6px 26px rgba(0,0,0,0.60), 0 0 40px rgba(201,168,76,0.26), inset 0 1px 0 rgba(255,255,255,0.05); }
}

.about-card-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 26px;
  background: linear-gradient(155deg, rgba(10,10,14,0.90), rgba(6,6,9,0.82));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(201,168,76,0.22);
  border-top: 1px solid rgba(201,168,76,0.55);
  position: relative; overflow: hidden;
  box-shadow:
    0 6px 26px rgba(0,0,0,0.60),
    0 0 26px rgba(201,168,76,0.16),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation:
    cardFloat var(--cd, 7s) ease-in-out infinite,
    cardGlow  var(--cg, 6s) ease-in-out infinite;
  animation-delay: var(--dd, 0s), var(--gd, 0s);
  transition: border-color .40s, box-shadow .40s, transform .40s cubic-bezier(.2,.7,.3,1);
}
.about-cards-grid .about-card-item:nth-child(1) { --cd:7.2s; --dd:0.0s; --cg:5.5s; --gd:0s; }
.about-cards-grid .about-card-item:nth-child(2) { --cd:8.8s; --dd:-2.4s; --cg:6.4s; --gd:-1.5s; }
.about-cards-grid .about-card-item:nth-child(3) { --cd:7.9s; --dd:-3.8s; --cg:5.9s; --gd:-2.7s; }
.about-cards-grid .about-card-item:nth-child(4) { --cd:9.1s; --dd:-1.3s; --cg:6.8s; --gd:-3.4s; }
.about-card-wide                                { --cd:8.4s; --dd:-4.7s; --cg:6.1s; --gd:-4.1s; }

.about-card-item:hover {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(201,168,76,0.70);
  border-top-color: rgba(255,224,130,0.95);
  box-shadow:
    0 24px 56px rgba(0,0,0,0.75),
    0 0 34px rgba(201,168,76,0.45),
    0 0 70px rgba(201,168,76,0.30),
    inset 0 0 22px rgba(201,168,76,0.10);
}
.about-card-item::after {
  content: ''; position: absolute; top: -60%; left: -80%; bottom: -60%;
  width: 55%;
  background: linear-gradient(108deg, transparent 0%, rgba(232,201,109,0.12) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .75s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.about-card-item:hover::after { left: 150%; }
.about-card-wide { grid-column: 1 / -1; }

.aci-icon-wrap {
  width: 44px; height: 44px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.22);
  position: relative; z-index: 1; transition: all .38s;
}
.about-card-item:hover .aci-icon-wrap {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.60);
  box-shadow: 0 0 22px rgba(201,168,76,0.40);
}
.aci-svg { width: 22px; height: 22px; opacity: .82; transition: opacity .38s, filter .38s; }
.about-card-item:hover .aci-svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(201,168,76,0.70)); }

.aci-body { position: relative; z-index: 1; }
.aci-body h3 {
  font-family: 'Cinzel', serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 7px;
  background: linear-gradient(90deg, #C9A84C, #F0D890, #C9A84C);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: headingShimmer 4s linear infinite;
}
@keyframes headingShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.aci-body p { font-family: 'Montserrat', sans-serif; font-size: .82rem; color: rgba(255,255,255,0.70); line-height: 1.6; }

.aci-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 22px;
}
.aci-list li {
  font-family: 'Montserrat', sans-serif; font-size: .80rem; color: rgba(255,255,255,0.70);
  padding-left: 15px; position: relative; line-height: 1.5;
}
.aci-list li::before { content: '›'; position: absolute; left: 0; color: #C9A84C; font-weight: 700; }
.aci-list--dots { grid-template-columns: 1fr; gap: 5px; }
.aci-list--dots li::before { content: '•'; }

/* Reveal */
.ap-reveal { will-change: opacity, transform; }
.ap-hidden { opacity: 0 !important; transform: translateY(24px) !important; }

/* ══════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1600px) {
  .about-main-inner { grid-template-columns: 400px 1fr; gap: 40px; }
}
@media (max-width:1280px) {
  .about-main-inner { grid-template-columns: 340px 1fr; gap: 32px; }
  .about-intro-title { font-size: clamp(1.5rem, 2vw, 2rem); }
}
@media (max-width:1024px) {
  .about-main-inner  { grid-template-columns: 1fr; gap: 30px; }
  .about-intro       { align-self: start; text-align: center; }
  .about-intro-divider { margin-left: auto; margin-right: auto; }
  .stats-inner       { grid-template-columns: repeat(3,1fr); }
  .stat-item--last   { border-right: 1px solid rgba(201,168,76,0.10); }
}
@media (max-width:768px) {
  /* On phones the About content is taller than the screen, so let it
     flow naturally instead of forcing 100vh. */
  #about-page { min-height: 0; display: block; }
  .about-main { flex: none; display: block; padding: 24px 0 40px; }
  .about-main-inner  { padding: 0 22px; gap: 26px; }
  .about-cards-grid  { grid-template-columns: 1fr; gap: 16px; }
  .about-card-wide   { grid-column: 1; }
  .stats-inner       { grid-template-columns: repeat(2,1fr); padding: 0 20px; }
  .stat-item         { padding: 14px 16px 18px; }
}
@media (max-width:480px) {
  .stats-inner { grid-template-columns: 1fr; }
  .stat-item   { border-right:none; border-bottom:1px solid rgba(201,168,76,0.09); }
  .aci-list    { grid-template-columns: 1fr; }
  .about-intro { text-align: left; }
  .about-intro-divider { margin-left: 0; margin-right: 0; }
}

/* =====================================================================
   About cards — gold image icons instead of inline SVG
   ===================================================================== */
.aci-svg { display: none !important; }
.aci-icon-wrap { background: #000000 !important; }
.aci-icon-wrap::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  pointer-events: none;
}
.about-card-item:nth-of-type(1) .aci-icon-wrap::after { background-image: url("../images/target.png"); }
.about-card-item:nth-of-type(2) .aci-icon-wrap::after { background-image: url("../images/values.png"); }
.about-card-item:nth-of-type(3) .aci-icon-wrap::after { background-image: url("../images/commitment.png"); }
.about-card-item:nth-of-type(4) .aci-icon-wrap::after { background-image: url("../images/lightbulb.png"); }
.about-card-item:nth-of-type(5) .aci-icon-wrap::after { background-image: url("../images/users.png"); }

/* =====================================================================
   Clean Services-style background (orbs / canvas off)
   ===================================================================== */
.about-orbs { display: none !important; }
#aboutCanvas { display: none !important; }


/* ============================================================
   AURETHIONX – PERFECT ONE-VIEW DESKTOP ABOUT PAGE
   Fixes card overflow, excess height and horizontal scrolling
============================================================ */

@media (min-width: 1025px) {

  /* Fit About page below the navigation bar */
  #about-page {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Statistics bar retains its natural height */
  .stats-bar {
    flex: 0 0 auto;
  }

  /* Use remaining desktop viewport for About content */
  .about-main {
    flex: 1 1 0;
    min-height: 0;
    padding: 20px 0 24px;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  /* Prevent horizontal overflow */
  .about-main-inner {
    width: 100%;
    max-width: 1760px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 clamp(22px, 2.7vw, 44px);

    display: grid;
    grid-template-columns:
      minmax(280px, 0.75fr)
      minmax(0, 2fr);

    gap: clamp(20px, 2.4vw, 42px);
    align-items: stretch;
  }

  /* Left introduction */
  .about-intro {
    min-width: 0;
    align-self: center;
  }

  .about-intro-title {
    font-size: clamp(1.5rem, 2vw, 2.15rem);
    line-height: 1.16;
  }

  .about-intro-text {
    font-size: clamp(0.74rem, 0.85vw, 0.84rem);
    line-height: 1.55;
  }

  /* Right-side cards */
  .about-cards-grid {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 0.65fr);

    gap: clamp(12px, 1.2vw, 18px);
    align-content: stretch;
  }

  /* Keep all five cards inside the available space */
  .about-card-item {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;

    padding: clamp(12px, 1.4vw, 22px);
    gap: clamp(10px, 1vw, 18px);

    align-items: center;
  }

  .about-card-wide {
    grid-column: 1 / -1;
  }

  .aci-icon-wrap {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }

  .aci-body {
    min-width: 0;
  }

  .aci-body h3 {
    font-size: clamp(0.65rem, 0.75vw, 0.74rem);
    margin-bottom: 6px;
  }

  .aci-body p {
    font-size: clamp(0.70rem, 0.8vw, 0.82rem);
    line-height: 1.5;
  }

  .aci-list {
    gap: 5px 12px;
  }

  .aci-list li {
    font-size: clamp(0.68rem, 0.77vw, 0.80rem);
    line-height: 1.4;
  }

}

/* ============================================================
   TABLET – NORMAL SCROLLING
============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  #about-page {
    height: auto;
    min-height: 100vh;
    overflow: hidden;
  }

  .about-main {
    min-height: 0;
    overflow: visible;
    padding: 28px 0 35px;
  }

  .about-main-inner {
    height: auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr;
  }

  .about-cards-grid {
    height: auto;
    grid-template-rows: auto;
  }

  .about-card-item {
    height: auto;
    min-height: 120px;
  }
}

/* ============================================================
   MOBILE – NATURAL CONTENT HEIGHT
============================================================ */

@media (max-width: 768px) {

  #about-page {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .about-main {
    flex: none;
    min-height: 0;
    display: block;
    overflow: visible;
    padding: 24px 0 40px;
  }

  .about-main-inner {
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .about-cards-grid {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  .about-card-item {
    height: auto;
    min-height: 110px;
    padding: 20px;
  }

  .about-card-wide {
    grid-column: 1;
  }
}



/* ============================================================
   AURETHIONX – LEFT ABOUT INTRO PREMIUM SIZE ENHANCEMENT
============================================================ */

@media (min-width: 1025px) {

  /* Left introduction container */
  .about-intro {
    width: 100%;
    max-width: 480px;
    align-self: center;
    padding: 15px 0;
  }

  /* ABOUT AURETHIONX label */
  .about-intro .eyebrow-sm {
    font-size: clamp(0.85rem, 1vw, 1rem);
    letter-spacing: 0.30em;
    margin-bottom: 20px;
  }

  /* Main heading */
  .about-intro-title {
    font-size: clamp(2.2rem, 2.7vw, 3rem);
    line-height: 1.22;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.025em;
  }

  /* Gold divider */
  .about-intro-divider {
    width: 85px;
    height: 3px;
    margin-bottom: 25px;
  }

  /* Description paragraphs */
  .about-intro-text {
    font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    line-height: 1.85;
    margin-bottom: 22px;
    color: rgba(255,255,255,0.82);
    max-width: 470px;
  }

  /* Our Services button */
  .about-cta {
    margin-top: 18px;
    padding: 17px 34px;
    min-height: 54px;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
  }

}

/* Tablet adjustment */
@media (min-width: 769px) and (max-width: 1024px) {

  .about-intro-title {
    font-size: clamp(2rem, 4vw, 2.6rem);
  }

  .about-intro-text {
    font-size: 0.95rem;
    line-height: 1.7;
  }

}

/* Mobile adjustment */
@media (max-width: 768px) {

  .about-intro-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .about-intro-text {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .about-intro .eyebrow-sm {
    font-size: 0.75rem;
  }

}


/* ================================================================
   AURETHIONX ABOUT PAGE — GLOBAL WORLD / NETWORK BACKGROUND RESTORE
   Reuses the same approved world-map and network assets as the
   Solutions / Industries / Careers sections.
   ================================================================ */

#about-page {
  background-color: #050506;
  background-image:
    radial-gradient(ellipse 100% 55% at 50% -8%, rgba(201,168,76,.075), transparent 55%),
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(176,141,58,.055), transparent 60%),
    radial-gradient(circle at 80% 26%, rgba(212,180,92,.055), transparent 42%),
    radial-gradient(circle at 12% 74%, rgba(176,141,58,.045), transparent 42%),
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.18)),
    url("../images/world-map.png");
  background-repeat: no-repeat;
  background-position: center, center, center, center, center, center 48%;
  background-size: auto, auto, auto, auto, cover, min(100%, 1720px) auto;
}

#about-page::after {
  width: 200%;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 35%, rgba(0,0,0,.08)),
    url("../images/network-bg.png"),
    url("../images/contact/particles.png"),
    url("../images/contact/spark-lines.png");
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-position: center, center, 0 0, center;
  background-size: cover, 32% auto, 480px auto, 760px auto;
  opacity: .30;
  mix-blend-mode: screen;
  filter: brightness(1.08) contrast(1.10) saturate(.92);
}

.about-orbs {
  display: block !important;
  opacity: .55;
}

#aboutCanvas {
  display: block !important;
  opacity: .72;
}

@media (max-width: 768px) {
  #about-page {
    background-position: center, center, center, center, center, 52% 42%;
    background-size: auto, auto, auto, auto, cover, 1150px auto;
  }

  #about-page::after {
    opacity: .22;
    background-size: cover, 58% auto, 360px auto, 600px auto;
  }

  #aboutCanvas {
    opacity: .48;
  }

  .about-orbs {
    opacity: .38;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about-page::after,
  .about-orbs::before,
  .about-orbs::after {
    animation: none !important;
  }
}