/* AGI — shared site styles */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap");

/* ============================================================
   Reset for legacy theme (agi-custom.css) global element rules.
   The old theme sets `h1-h6 { color: navy; font-family: Inter; font-weight: 700; }`
   which paints over section-specific design colors (e.g. white text in
   .caps section). These resets restore inheritance so each design
   section's own CSS controls heading appearance.
   ============================================================ */
main h1, main h2, main h3, main h4, main h5, main h6,
.hero h1, .hero h2, .hero h3, .hero h4,
.tagline h1, .tagline h2,
.about h1, .about h2, .about h3,
.caps h1, .caps h2, .caps h3, .caps h4,
.commits h1, .commits h2, .commits h3, .commits h4,
.stats h1, .stats h2, .stats h3, .stats h4,
.show h1, .show h2, .show h3, .show h4,
.certs-band h1, .certs-band h2, .certs-band h3,
.cta-band h1, .cta-band h2,
.ph h1, .ph h2,
.principles h1, .principles h2, .principles h3, .principles h4, .principles h5,
.leaders h1, .leaders h2, .leaders h3, .leaders h4,
.vm h1, .vm h2, .vm h3,
.products-grid h1, .products-grid h2, .products-grid h3, .products-grid h4,
.facility h1, .facility h2, .facility h3, .facility h4,
.gallery h1, .gallery h2, .gallery h3, .gallery h4,
.contact h1, .contact h2, .contact h3, .contact h4,
.details h1, .details h2, .details h3, .details h4,
.pre-footer h1, .pre-footer h2 {
  color: inherit;
  font-family: var(--serif);
  font-weight: 300;
  /* line-height intentionally NOT reset — each design heading sets its own
     tight line-height (e.g. .hero__h { line-height: 1 }) which would
     otherwise be overridden by inheriting body's 1.5 spacing. */
}
main p, .hero p, .tagline p, .about p, .caps p, .commits p,
.stats p, .show p, .certs-band p, .cta-band p, .ph p,
.principles p, .leaders p, .vm p, .products-grid p,
.facility p, .gallery p, .contact p, .details p, .pre-footer p {
  color: inherit;
  font-family: var(--sans);
  line-height: 1.6;
}

/* ============================================================
   Shared .ph (page-header) — dark cinematic header for inner pages
   (About, Products, Facility, Contact). Same treatment as home hero:
   image + dark gradient + white text. Per-page override:
     .ph::before { background-image: url("agi-hero-about.jpg"); }
   ============================================================ */
.ph { position: relative; isolation: isolate; background: rgba(0, 0, 0, 1); }
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("agi-hero.jpg");
  background-size: cover;
  background-position: center;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.78) 100%);
}
.ph__inner, .ph > *:not(::before):not(::after) { position: relative; z-index: 1; }

/* Light text on dark page-header overlay */
.ph, .ph h1, .ph h2, .ph h3, .ph h4, .ph p, .ph .label,
.ph__top, .ph__h, .ph__sub, .ph .eyebrow {
  color: #ffffff;
}
.ph .label, .ph .eyebrow { color: rgba(255,255,255,0.72); }
.ph p, .ph .ph__sub { color: rgba(255,255,255,0.88); }
.ph h1 em, .ph h2 em, .ph__h em { color: var(--bronze-2); }
.ph .btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
}
.ph .btn:hover { background: #fff; color: var(--ink); }

/* White cards nested INSIDE the dark .ph header inherit white text from
   `.ph { color: #fff }` — restore their intended dark-text-on-white-card. */
.ph .stat-cell,
.ph .stat-cell .num,
.ph .stat-cell .label { color: var(--ink); }
.ph .stat-cell .label { color: var(--muted); }   /* keep small label muted */
.ph .stat-cell .num { color: var(--ink); font-weight: 600; }
.ph .stat-cell .num em { color: var(--bronze); }

:root {
  /* AGI brand palette — black + orange.
     Variable names retained for cascade compatibility (~80 references).
     Logical mapping: --ink = near-black primary, --bronze = orange accent. */
  --bg: #fafafa;        /* near-white neutral */
  --bg-2: #f1f1ef;      /* warm-leaning light neutral */
  --paper: #ffffff;     /* clean white */
  --ink: #0d0d0d;       /* deep near-black primary */
  --ink-2: #2a2a2a;     /* softer black */
  --muted: #6b6b6b;     /* neutral muted gray */
  --line: #e5e5e5;      /* neutral border */
  --bronze: #F97316;    /* orange accent — vibrant brand pop */
  --bronze-2: #FB923C;  /* lighter orange */
  --sand: #FED7AA;      /* pale peach */
  --glass-tint: rgba(249, 115, 22, 0.14);   /* orange glass */
  --glass-warm: rgba(13, 13, 13, 0.08);     /* black glass */
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);

  --serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --pad: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1480px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body {
  cursor: auto;
}
/* custom magnetic cursor disabled — hide the JS-injected dot+ring site-wide */
.cursor-dot, .cursor-ring { display: none !important; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--ink); color: var(--bg); }

/* ---------- magnetic cursor ---------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 999px;
  mix-blend-mode: difference;
  transition: transform 0.18s ease, width 0.25s ease, height 0.25s ease,
    border-color 0.25s ease, opacity 0.2s ease;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
}
.cursor-ring.is-hover {
  width: 70px; height: 70px;
  background: rgba(255, 255, 255, 0.06);
}
.cursor-ring.is-press { width: 28px; height: 28px; }
@media (max-width: 880px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem var(--pad);
  background: #ffffff;
  /* backdrop-filter removed — caused scroll jank from per-frame blur rasterization. */
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav.is-scrolled {
  background: #ffffff;
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
/* Orange chrome needs dark type for readable contrast. */
.nav { color: var(--ink); }
.nav .nav__cta { border-color: rgba(13,13,13,0.55); color: var(--ink); }
.nav .nav__cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav .nav__links a { color: var(--ink); }
.nav .nav__links a:hover { background: rgba(13,13,13,0.12); color: var(--ink); }
.nav .nav__links a.is-active { background: rgba(255,255,255,0.26); color: var(--ink); }
/* Logo keeps its original navy + teal colors over the dark nav.
   If logo legibility against dark gets tight, swap to a white-version PNG
   via the [agi_asset] shortcode — don't filter the colored source. */
.nav__logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.nav__logo-img {
  height: 82px; width: auto; display: block; max-width: 320px; object-fit: contain;
}
@media (max-width: 1100px) {
  .nav { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .nav__logo-img { height: 48px; max-width: 300px; }
}
.nav__logo-txt {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border-left: 1px solid var(--line);
  padding-left: 0.7rem;
}
@media (max-width: 1100px) {
  .nav__logo-txt { display: none; }
}
.nav__links {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.nav__links a {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
  text-transform: uppercase;
}
.nav__links a:hover { background: var(--ink); color: var(--bg); }
.nav__links a.is-active { color: var(--bronze); }
.nav__cta {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.72rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav__cta:hover { background: var(--ink); color: var(--bg); }
.nav__cta::after {
  content: "↗";
  display: inline-block;
  transition: transform 0.25s ease;
}
.nav__cta:hover::after { transform: translate(2px, -2px); }

/* ---------- hamburger button (mobile only) ---------- */
.nav__hamburger {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.2);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 110;
  transition: background 0.2s ease;
}
.nav__hamburger:hover { background: rgba(0,0,0,0.06); }
.nav__hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
/* X transformation when open */
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav__cta--mobile { display: none; }   /* shown only inside drawer */

@media (max-width: 1100px) {
  .nav__hamburger { display: flex; }
  .nav__cta--desktop { display: none; }
  .nav__cta--mobile { display: inline-flex; margin-top: 1.5rem; align-self: flex-start; width: auto; }
  .nav .nav__cta {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
  }
  .nav .nav__cta:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
  }
  .nav__links {
    /* Slide-down drawer covering the viewport below the nav */
    position: fixed;
    inset: 80px 0 0 0;
    background: rgba(0, 0, 0, 0.97);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 2rem var(--pad);
    transform: translateY(-110%);
    transition: transform 0.35s cubic-bezier(.6,.05,.2,1);
    visibility: hidden;
    overflow-y: auto;
  }
  .nav__links.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .nav__links a {
    width: 100%;
    padding: 0.9rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .nav .nav__links a {
    color: #fff;
  }
  .nav .nav__links a.is-active {
    background: transparent;
    color: var(--bronze-2);
  }
  .nav__links a:hover { background: transparent; color: var(--bronze-2); }
  /* Lock body scroll when menu open */
  body.menu-open { overflow: hidden; }
}

/* ---------- typography helpers ---------- */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.label--ink { color: var(--ink); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.display {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(3rem, 9vw, 9rem);
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--bronze);
}
.h1 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  margin: 0;
}
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  margin: 0;
}
.h2 em { font-style: italic; color: var(--bronze); font-weight: 300; }
.lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.4vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ---------- shell ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- glass card ---------- */
.glass {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.45), rgba(255,255,255,0.18));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow: 0 20px 50px -25px rgba(26, 26, 26, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 35%, transparent 65%, rgba(168, 197, 209, 0.15) 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn .arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}
.btn--ghost .arrow { background: var(--ink); color: var(--bg); }
.btn:hover .arrow { transform: translate(3px, -3px); }

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 6rem var(--pad) 2rem;
  margin-top: 8rem;
  position: relative;
  overflow: hidden;
}
.footer__big-wrap {
  margin: 0 0 3rem;
  opacity: 0.95;
}
.footer__big-img {
  width: clamp(220px, 45vw, 560px);
  height: auto;
  display: block;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__grid h5 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.2rem;
}
.footer__grid a, .footer__grid p {
  display: block;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
}
.footer__grid a:hover { color: var(--bronze-2); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; gap: 1rem; align-items: flex-start; }
}

/* ---------- legacy agi-footer override: off-white bg + readable dark type ---------- */
.agi-footer { background: #f5f4f0 !important; }
.agi-footer__grid,
.agi-footer__bottom,
.agi-footer__certs-strip {
  border-color: rgba(13,13,13,0.16) !important;
}
.agi-footer__col h4 {
  color: var(--ink) !important;
  font-size: 1.125rem !important;
}
.agi-footer__col h4::after { background: var(--ink) !important; }
.agi-footer__about p {
  color: rgba(13,13,13,0.86) !important;
  font-size: 1rem !important;
}
.agi-footer__links a {
  color: rgba(13,13,13,0.88) !important;
  font-size: 1rem !important;
  font-weight: 500;
  line-height: 1.5;
}
.agi-footer__contact-item svg { color: var(--ink) !important; }
.agi-footer__contact-item p,
.agi-footer__contact-item a {
  color: rgba(13,13,13,0.9) !important;
  font-size: 0.98rem !important;
}
.agi-footer__contact-item p { font-size: 0.98rem !important; }
.agi-footer__contact-item a { font-size: 0.98rem !important; }
.agi-footer__bottom p,
.agi-footer__bottom a {
  color: rgba(13,13,13,0.88) !important;
  font-size: 0.92rem !important;
}
.agi-footer__bottom p { font-size: 0.92rem !important; }
.agi-footer__bottom a { font-size: 0.92rem !important; }
.agi-footer__social a {
  border-color: rgba(13,13,13,0.24) !important;
  color: rgba(13,13,13,0.82) !important;
}
.agi-footer__contact-item a:hover,
.agi-footer__social a:hover,
.agi-footer a:hover {
  color: var(--ink) !important;
}
.agi-footer__social a:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}
.agi-footer__social a:hover svg { stroke: #fff !important; }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--lg { transform: translateY(80px); }
/* Above-the-fold .reveal elements should never wait on JS to be visible —
   .ph (page-header) content is always immediately on-screen at page load. */
.ph .reveal,
.hero .reveal {
  opacity: 1;
  transform: none;
}
/* Defensive: if JS hasn't loaded after 1s, make everything visible anyway. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* word reveal */
.word-reveal { display: inline-block; overflow: hidden; }
.word-reveal > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.word-reveal.is-in > span { transform: none; }

/* ---------- marquee ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  border-block: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  padding: 1.25rem 0;
}
.marquee__track {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  animation: marquee 36s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  white-space: nowrap;
  padding-right: 0;
  will-change: transform;
}
.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  padding-right: 4rem;
}
.marquee__track .star {
  font-style: normal;
  display: inline-block;
  font-size: 0.7em;
  color: var(--bronze-2);
  font-family: var(--sans);
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* page intro overlay */
.page-intro {
  position: fixed; inset: 0;
  background: var(--ink);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg);
  pointer-events: none;
}
.page-intro__inner {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.page-intro__count {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.page-intro.is-out {
  transform: translateY(-100%);
  transition: transform 1.1s cubic-bezier(.7,.0,.2,1);
}


/* CTA band — used across pages */
.cta-band {
  padding: 8rem var(--pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cta-band h2 {
  font-family: var(--serif); font-weight: 300;
  line-height: 0.95; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 7vw, 7rem);
  margin: 1.2rem auto 2rem;
  max-width: 18ch;
}
.cta-band h2 em { font-style: italic; color: var(--bronze); font-weight: 300; }

/* ============== ACCREDITATION IMAGERY (added 2026-05-10) ============== */

/* Cert-card pill replaced by accreditation strip on the 3 ISO cards */
.cert-card .badge--strip {
  width: 100%;
  height: auto;
  max-height: 56px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  border: 1px solid var(--line);
  object-fit: contain;
  display: block;
  margin: 0 0 1rem;
}
/* Hide the spinning conic-gradient ring on image-style badges */
.cert-card .badge--strip::after { display: none !important; }

/* Trust strip above the cert grid on /facility */
.cert-trust {
  margin: 0 0 3.5rem;
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: center;
}
.cert-trust img {
  width: 100%;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  display: block;
}
.cert-trust__cap {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0.4rem 0 0;
}
@media (max-width: 880px) {
  .cert-trust { grid-template-columns: 1fr; gap: 0.8rem; padding: 1.1rem; }
}

/* Accreditation strip inside the cert lightbox */
.lightbox__badge {
  width: calc(100% - 3rem);
  margin: 0.75rem 1.5rem 0;
  padding: 0.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 76px;
  object-fit: contain;
  display: block;
}
.lightbox__badge:not([src]),
.lightbox__badge[src=""] { display: none; }

/* PDF download link inside the lightbox body */
.lightbox__pdf {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.lightbox__pdf:hover { background: var(--ink); color: var(--bg); }
.lightbox__pdf[hidden] { display: none; }

/* Sitewide footer accreditation strip */
.agi-footer__certs-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.6rem 0 0.4rem;
  margin: 1.8rem 0 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.agi-footer__certs-strip img {
  width: 100%;
  height: auto;
  max-height: 58px;
  background: #fff;
  padding: 6px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}
.agi-footer__certs-strip__cap {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(13,13,13,0.78);
  text-align: center;
  margin: 0.6rem 0 0;
}
@media (max-width: 700px) {
  .agi-footer__certs-strip { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ============== CERTIFICATE SHOWCASE (added 2026-05-10) ============== */

.cert-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0 0 3rem;
}
.cert-showcase__tile {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  cursor: pointer;
}
.cert-showcase__tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.14);
  border-color: var(--ink);
}
.cert-showcase__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.414;
  object-fit: contain;
  display: block;
  background: #fafafa;
}
.cert-showcase__cap {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cert-showcase__cap .iso { color: var(--bronze); font-weight: 500; }
.cert-showcase__cap .arr {
  width: 28px; height: 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s ease;
}
.cert-showcase__tile:hover .cert-showcase__cap .arr {
  background: var(--ink); color: var(--bg); transform: rotate(-45deg);
}
@media (max-width: 880px) {
  .cert-showcase { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.4rem; }
}

/* Showcase subhead */
.cert-showcase__head {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
}
.cert-showcase__head .eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 0.5rem;
}
.cert-showcase__head h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.cert-showcase__head h3 em { font-style: italic; color: var(--bronze); font-weight: 300; }
.cert-showcase__head p {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  text-align: right;
  max-width: 36ch;
}
@media (max-width: 880px) {
  .cert-showcase__head { grid-template-columns: 1fr; }
  .cert-showcase__head p { text-align: left; }
}

/* ============== .ph BODY-COPY VISIBILITY FIX (added 2026-05-10) ============== */
/* Each page template's inline <style> sets `.ph__sub p { color: var(--ink-2) }`
   at specificity 0,2,1 — which beats site.css's `.ph p { color: white }` at 0,1,1.
   Result: body copy in the dark page hero was invisible.
   Bump specificity here and use !important as a final guard for any future
   per-page overrides. */
.ph .ph__sub,
.ph .ph__sub p,
.ph .ph__sub .reveal,
.ph .ph__lead,
.ph p.lead,
.ph .lead {
  color: rgba(255, 255, 255, 0.88) !important;
}
.ph .ph__sub p strong,
.ph .ph__sub p em,
.ph .lead em {
  color: var(--bronze-2);
}
/* Eyebrow / labels stay slightly muted but still readable on dark */
.ph .label,
.ph .eyebrow,
.ph .ph__top .label {
  color: rgba(255, 255, 255, 0.72) !important;
}