/*
  File: css/about.css
  Purpose: Page styles for /about (Views/public/about.php) — the centred intro
           column, the alternating photo/copy feature rows (photo on a teal
           plate, copy beside it), the dark "who you'll work with" band over
           the iSpec mural, the owner section (single reading column, no
           portrait by request), the credentials cards and the closing
           call-to-action. Motion = the shared
           [data-reveal] scroll reveal (states in css/site-shell.css, driven by
           js/site-reveal.js). Loaded through layouts/public's
           renderSection('head') after bootstrap-4.4.1.css, main.css and
           site-shell.css, so every rule restates font/size/spacing and every
           class is prefixed about- (.cert-icon .fa cancels main.css's global
           .fa circle badge). Design tokens (--band, --teal, --line, --display,
           --serif …) come from css/site-shell.css. The tall hero above the
           page is the .banner3[data-hero="tall"] variant in css/main.css.
           Photos: images/about/ (EXIF-stripped GD re-encodes, 2026-09-13, of the
           team shot images/porto1/abbey and juhriah1.jpg and
           uploads/projects/19/eb-during-004.jpg) + images/ispecLogoMural2.jpg.
  Used by: Views/public/about.php (via <?= $this->section('head') ?>)
*/

/* ── hero band photo ─────────────────────────────────────
   About only (the layout stamps data-page="about"); every other page that
   has no override keeps the default .wrapper2 bookshelf. The owner's own
   Columbus skyline shot (nola1 archive IMG_2113, 2016; 1920×1080 cut,
   EXIF stripped) — added 2026-09-13. */
.wrapper2[data-page="about"] {
  background-image: url(../images/home/hero-about.jpg);
  background-attachment: scroll;   /* fixed would frame only the sky in a 430px band */
  background-position: center 45%;
}

/* ── page frame ───────────────────────────────────────── */
.about-page {
  overflow-x: clip;            /* the reveal translate must not widen the page */
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.about-page p {
  text-indent: 0;
  margin: 0 0 1.1rem;
}

.about-page h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.about-page h3 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .9rem;
}

.about-rule {
  width: 72px;
  height: 3px;
  border: 0;
  background: var(--teal);
  margin: 0 0 1.3rem;
}

.about-wrap {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

/* ── intro column ─────────────────────────────────────── */
.about-intro {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) 1.25rem 0;
  text-align: center;
}

.about-intro .about-rule {
  margin-inline: auto;
}

.about-eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 .9rem;
}

/* ── feature rows ─────────────────────────────────────── */
.about-features {
  width: min(1180px, 92vw);
  margin-inline: auto;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
}

.about-feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* every other row puts the copy first */
.about-feature-flip {
  grid-template-columns: 5fr 7fr;
}

.about-feature-flip .about-figure {
  order: 2;
}

.about-figure {
  position: relative;
  margin: 0;
}

/* teal plate offset behind the photo */
.about-figure::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 4 / 3;
  background: var(--teal);
  translate: 18px 18px;
  z-index: 0;
}

.about-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 30px 60px -24px rgba(15, 26, 25, .45);
}

.about-figure figcaption {
  position: relative;
  z-index: 1;
  margin-top: 1.4rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--muted);
}

.about-figure figcaption b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.about-figure figcaption a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ── "who you'll work with" band over the mural ───────── */
.about-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--band);
  color: rgba(255, 255, 255, .85);
}

.about-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url(../images/ispecLogoMural2.jpg) center 42% / cover no-repeat;
}

.about-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 26, 25, .88) 0%, rgba(15, 26, 25, .74) 50%, rgba(15, 26, 25, .9) 100%);
}

.about-band .about-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.about-band h2 {
  color: #fff;
}

.about-band p {
  color: rgba(255, 255, 255, .85);
}

.about-band a.a2 {
  color: var(--teal);
}

.about-band a.a2:hover,
.about-band a.a2:focus {
  color: var(--teal-bright);
}

.about-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.about-people li {
  padding-left: 1rem;
  border-left: 3px solid var(--teal);
}

.about-people b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #fff;
}

.about-people span {
  display: block;
  font-size: .95rem;
  line-height: 1.55;
}

/* ── owner (single reading column) ────────────────────── */
.about-owner {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 6.5rem) 1.25rem 0;
}

.about-owner h2 {
  text-align: center;
}

.about-owner .about-rule {
  margin-inline: auto;
}

/* ── credentials ──────────────────────────────────────── */
.about-creds {
  width: min(1180px, 92vw);
  margin-inline: auto;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  text-align: center;
}

.about-creds .about-rule {
  margin-inline: auto;
}

.about-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 2rem auto 0;
}

.about-cert-card {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 8px;
  background: var(--paper);
}

.about-cert-card h3 {
  font-size: 1.15rem;
  margin: .6rem 0 .6rem;
}

.about-cert-card p {
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
}

.about-cert-note {
  display: block;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--muted);
}

.cert-icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--teal);
}

/* cancel main.css's global .fa circle badge */
.cert-icon .fa {
  width: auto;
  padding: 0;
  font-size: 2rem;
  color: var(--teal);
  background: transparent;
  border-radius: 0;
}

.about-note {
  max-width: 760px;
  margin: 2rem auto 0;
  font-size: .95rem;
  color: var(--muted);
}

/* ── closing call to action ───────────────────────────── */
.about-cta {
  width: min(1180px, 92vw);
  margin: clamp(3.5rem, 7vw, 6rem) auto;
  padding: 2.75rem 1.75rem;
  border-radius: 8px;
  background: var(--band);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}

.about-cta h2 {
  color: #fff;
  margin-bottom: .6rem;
}

.about-cta p {
  max-width: 620px;
  margin: 0 auto 1.5rem;
}

.about-cta-btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  background: var(--teal);
  border: 1px solid var(--teal);
  color: var(--band);
  font-family: var(--display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.about-cta .about-cta-btn:hover,
.about-cta .about-cta-btn:focus {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--band);
  text-decoration: none;
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .about-feature,
  .about-feature-flip,
  .about-band .about-wrap {
    grid-template-columns: 1fr;
  }

  .about-feature-flip .about-figure {
    order: 0;
  }

  .about-figure {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .about-cert-grid {
    grid-template-columns: 1fr;
  }

  .about-figure::before {
    translate: 12px 12px;
  }
}