/* ==========================================================================
   Panoton — About Us (/about-us/). Loads AFTER site.css.
   Mirrors production panoton.com/about-us/: black video hero with angled
   white divider, Our Purpose statement, full-width vision image, numbered
   Our Vision rows, green mission band, The Difference + values/manifesto,
   full-bleed closing image.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */
.abt-hero { position: relative; height: clamp(380px, 55vw, 640px); background: #000; overflow: hidden; }
.abt-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abt-hero-shade { position: absolute; inset: 0; background: #000; opacity: .8; }
.abt-hero-divider { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 20%; }

/* ---------------------------------------------------------------- purpose */
.abt-purpose { padding: clamp(50px, 6vw, 100px) 0 clamp(50px, 6vw, 90px); }
.abt-label { font-size: clamp(22px, 2vw, 30px); margin: 0 0 24px; }
.abt-statement {
  font-family: var(--font-head, Cabin, sans-serif); font-weight: 700;
  color: var(--ink, #10131a);
  font-size: clamp(28px, 6vh, 58px); line-height: 1.1;
  margin: 0; padding-inline: 8%; max-width: 1200px;
}

/* ------------------------------------------------------------ vision media */
.abt-media img { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------- vision */
.abt-vision { padding: clamp(60px, 7vw, 110px) 0 clamp(40px, 5vw, 80px); }
.abt-vision-title { font-size: clamp(48px, 8vw, 120px); line-height: 1; margin: 0 0 clamp(40px, 5vw, 80px); }
.abt-vis {
  display: grid; grid-template-columns: 8fr 4fr; gap: 30px; align-items: center;
  border-top: 1px solid var(--border, #e4ecf7); padding: clamp(28px, 3.5vw, 56px) 0;
}
.abt-vis h2 { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.25; margin: 0; max-width: 700px; }
.abt-num {
  font-family: var(--font-head, Cabin, sans-serif); font-weight: 700;
  font-size: clamp(60px, 9vw, 140px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--blue-deep, #1e43a6);
  justify-self: end;
}

/* ---------------------------------------------------------------- mission */
/* production used #0b473a (a leftover green) under a live Unsplash photo; staging
   uses the brand navy from the home hero instead, per design review. */
.abt-mission {
  position: relative; background: #00054c; padding: clamp(80px, 10vw, 160px) 0;
  text-align: center;
}
.abt-mission::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 30% 20%, rgba(50, 219, 242, .22), transparent 75%),
    radial-gradient(closest-side at 75% 80%, rgba(30, 67, 166, .6), transparent 70%);
}
.abt-mission .wrap { position: relative; }
.abt-mission h2 {
  color: #fff; font-size: clamp(24px, 2.8vw, 42px); line-height: 1.4;
  font-weight: 600; margin: 0 auto; max-width: 1080px;
}

/* ------------------------------------------------------------- difference */
.abt-difference { background: #fff; padding: clamp(60px, 7vw, 110px) 0; }
.abt-diff-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 70px;
  align-items: start; margin-bottom: clamp(40px, 5vw, 70px);
}
.abt-diff-eyebrow { color: #ff7530; font-size: 1.06rem; font-weight: 600; margin: 0 0 10px; }
.abt-diff-eyebrow em { font-style: italic; }
.abt-diff-grid h3 { font-size: clamp(28px, 3vw, 44px); margin: 0; }
.abt-diff-statement {
  font-family: var(--font-head, Cabin, sans-serif); font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px); line-height: 1.55;
  color: var(--ink, #10131a); margin: 0;
}
.abt-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 70px; }
.abt-values-grid h4 { font-size: 1.31rem; margin: 0 0 18px; }
.abt-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abt-values li {
  font-family: var(--font-head, Cabin, sans-serif); font-size: .95rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep, #1e43a6);
}
.abt-values-grid p { font-size: 1.02rem; line-height: 1.8; margin: 0; }

/* ---------------------------------------------------------------- closing */
.abt-closing {
  height: clamp(260px, 40vw, 520px);
  background-size: cover; background-position: center;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 899px) {
  .abt-vis { grid-template-columns: 1fr; gap: 10px; }
  .abt-num { justify-self: start; }
  .abt-diff-grid, .abt-values-grid { grid-template-columns: 1fr; }
  .abt-statement { padding-inline: 0; }
}