.certifications-page {
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(37,48,75,.035) 1px) 0 0 / 84px 84px,
    var(--cream);
}

.certifications-page .site-header { grid-template-columns: 1fr auto auto auto; }

.cert-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(460px,.78fr);
  gap: clamp(2.5rem,7vw,8rem);
  align-items: center;
  padding: calc(72px + clamp(3rem,6vw,6rem)) var(--pad) clamp(4rem,7vw,7rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 78%, rgba(196,97,76,.12), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(111,138,183,.22), transparent 32%),
    var(--cream);
  border-bottom: 1px solid var(--ink);
}

.cert-hero::before {
  content: "ARCHIVE / 2020—2026";
  position: absolute;
  right: var(--pad);
  top: calc(72px + 1rem);
  color: rgba(37,48,75,.5);
  font: 500 .6rem var(--mono);
  letter-spacing: .1em;
}

.cert-hero__copy { position: relative; z-index: 2; }
.cert-hero__copy .section-label { margin-bottom: clamp(2.5rem,5vw,5rem); }
.cert-hero__eyebrow { margin: 0 0 1rem; color: var(--clay); font: 500 .62rem var(--mono); letter-spacing: .1em; }

.cert-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(5rem,11vw,12rem);
  line-height: .76;
  letter-spacing: -.095em;
}

.cert-hero h1 em { display: block; color: var(--clay); font-family: var(--serif); font-weight: 500; }

.cert-hero__lede {
  max-width: 640px;
  margin: clamp(2rem,4vw,4rem) 0 0;
  color: rgba(37,48,75,.72);
  font-size: clamp(1rem,1.45vw,1.25rem);
  line-height: 1.75;
}

.cert-hero__jump {
  width: min(360px,100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem 0;
  border-block: 1px solid var(--ink);
  font: 500 .68rem var(--mono);
  text-transform: uppercase;
}

.cert-hero__jump span { color: var(--clay); font-size: 1.2rem; }

.cert-hero__feature {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: .7rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 18px 18px 0 #c8d6e4;
  transform: rotate(1.4deg);
}

.cert-hero__feature::before {
  content: "CERTIFIED";
  position: absolute;
  z-index: 2;
  right: -1.6rem;
  top: 1.6rem;
  padding: .48rem .7rem;
  color: var(--white);
  background: var(--clay);
  font: 500 .58rem var(--mono);
  letter-spacing: .1em;
  transform: rotate(5deg);
}

.cert-hero__feature img { width: 100%; display: block; border: 1px solid var(--border-dark); }
.cert-hero__feature figcaption { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; padding: 1rem .3rem .4rem; }
.cert-hero__feature figcaption span { grid-column: 1 / -1; color: var(--clay); font: 500 .58rem var(--mono); letter-spacing: .08em; }
.cert-hero__feature figcaption strong { font-size: 1.05rem; }
.cert-hero__feature figcaption small { align-self: end; font: .58rem var(--mono); }

.cert-hero__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--ink);
  background: rgba(251,249,243,.72);
}

.cert-hero__facts > div { min-height: 130px; display: grid; align-content: center; gap: .4rem; padding: 1rem 1.4rem; border-right: 1px solid var(--ink); }
.cert-hero__facts > div:last-child { border-right: 0; }
.cert-hero__facts strong { font: 600 clamp(2.5rem,4vw,4.5rem)/1 var(--serif); font-style: italic; }
.cert-hero__facts span { font: 500 .6rem var(--mono); text-transform: uppercase; }

.certificate-archive {
  padding: clamp(5rem,9vw,9rem) var(--pad);
  background: var(--paper);
}

.archive-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,.4fr);
  gap: 2rem;
  align-items: end;
}

.archive-heading h2 {
  margin: 2rem 0 0;
  font-size: clamp(3.7rem,8vw,9rem);
  line-height: .86;
  letter-spacing: -.08em;
}

.archive-heading h2 em { color: var(--clay); font-family: var(--serif); font-weight: 500; }
.archive-heading > p { margin: 0; color: rgba(37,48,75,.68); line-height: 1.7; }

.certificate-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: clamp(3rem,6vw,6rem) 0 2rem;
}

.certificate-count { margin-left: auto; color: rgba(37,48,75,.62); font: 500 .62rem var(--mono); text-transform: uppercase; }

.certificate-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(1rem,2vw,1.6rem);
}

.certificate-card {
  min-width: 0;
  background: var(--cream);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(37,48,75,.08);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}

.certificate-card--feature { grid-column: 1 / -1; }
.certificate-card.is-filtered-out { display: none; }
.certificate-card:hover { transform: translateY(-6px); box-shadow: 14px 16px 0 rgba(37,48,75,.12); }

.certificate-card__open {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr);
  gap: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.certificate-card__image {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: clamp(.7rem,1.5vw,1.2rem);
  overflow: hidden;
  background: #dde5eb;
  border-right: 1px solid var(--ink);
}

.certificate-card:nth-child(3n) .certificate-card__image { background: #e7d9d2; }
.certificate-card:nth-child(3n + 1) .certificate-card__image { background: #d9dfd2; }

.certificate-card__image img {
  width: 100%;
  max-height: 420px;
  display: block;
  object-fit: contain;
  background: white;
  border: 1px solid rgba(37,48,75,.2);
  box-shadow: 0 12px 32px rgba(37,48,75,.12);
}

.certificate-card--feature .certificate-card__image { min-height: 520px; }
.certificate-card--feature .certificate-card__image img { max-height: 500px; }

.certificate-card__text {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: clamp(1.3rem,2vw,2rem);
}

.certificate-card--feature .certificate-card__text { min-height: 520px; }
.certificate-card__text small { color: var(--clay); font: 500 .58rem var(--mono); letter-spacing: .06em; }
.certificate-card__text strong { margin: auto 0 1rem; font-size: clamp(1.7rem,3.2vw,3.5rem); line-height: 1; letter-spacing: -.055em; }
.certificate-card__text > span { color: rgba(37,48,75,.68); line-height: 1.5; }
.certificate-card__text i { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-dark); font: 500 .62rem var(--mono); font-style: normal; text-transform: uppercase; }

.cert-return {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: clamp(5rem,9vw,9rem) var(--pad) 2rem;
  color: var(--ink);
  background: var(--cloud);
  border-top: 1px solid var(--ink);
}

.cert-return > p { max-width: 540px; margin: 0 0 3rem; color: rgba(37,48,75,.7); font-size: 1.1rem; line-height: 1.7; }
.cert-return h2 { margin: 0; font-size: clamp(5rem,13vw,14rem); line-height: .78; letter-spacing: -.09em; }
.cert-return h2 em { display: block; color: var(--clay); font-family: var(--serif); font-weight: 500; }
.cert-return .button { margin-top: 4rem; align-self: flex-start; }
.cert-return .footer { margin-top: auto; }

.certificate-viewer {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.32fr);
  gap: clamp(1rem,3vw,3rem);
  padding: clamp(4rem,7vw,7rem) var(--pad) var(--pad);
  color: var(--white);
  background: rgba(25,33,52,.96);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.certificate-viewer[hidden] { display: none; }
.certificate-viewer.is-open { opacity: 1; visibility: visible; }
.certificate-viewer__close { position: absolute; top: 1.2rem; right: var(--pad); display: flex; gap: .7rem; align-items: center; padding: .65rem .9rem; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; cursor: pointer; font: 500 .62rem var(--mono); text-transform: uppercase; }
.certificate-viewer__close span { font-size: 1.25rem; }
.certificate-viewer__stage { min-width: 0; display: grid; place-items: center; overflow: auto; }
.certificate-viewer__stage img { max-width: 100%; max-height: calc(100vh - 8rem); display: block; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.36); }
.certificate-viewer__caption { align-self: end; padding-bottom: 1rem; }
.certificate-viewer__caption > span { color: #aebde7; font: 500 .6rem var(--mono); letter-spacing: .1em; }
.certificate-viewer__caption h2 { margin: 1rem 0; font-size: clamp(2.2rem,4vw,4.5rem); line-height: .95; letter-spacing: -.06em; }
.certificate-viewer__caption p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.6; }

body.viewer-open { overflow: hidden; }

@media (max-width: 980px) {
  .cert-hero { grid-template-columns: 1fr; padding-top: calc(72px + 4rem); }
  .cert-hero__copy { max-width: 780px; }
  .cert-hero__feature { width: min(780px,94%); justify-self: center; }
  .archive-heading { grid-template-columns: 1fr; }
  .certificate-grid { grid-template-columns: 1fr; }
  .certificate-card--feature { grid-column: auto; }
  .certificate-viewer { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .certificate-viewer__caption { align-self: start; }
}

@media (max-width: 680px) {
  .cert-hero { min-height: auto; padding-top: calc(66px + 4.5rem); }
  .cert-hero::before { top: calc(66px + .8rem); }
  .cert-hero h1 { font-size: clamp(4.8rem,23vw,8rem); }
  .cert-hero__feature { width: 100%; transform: none; box-shadow: 10px 10px 0 #c8d6e4; }
  .cert-hero__feature::before { right: -.4rem; }
  .cert-hero__facts { grid-template-columns: 1fr; }
  .cert-hero__facts > div { min-height: 105px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .cert-hero__facts > div:last-child { border-bottom: 0; }
  .certificate-count { width: 100%; margin: .7rem 0 0; }
  .certificate-card__open { grid-template-columns: 1fr; }
  .certificate-card__image { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ink); }
  .certificate-card--feature .certificate-card__image { min-height: 0; }
  .certificate-card__text,
  .certificate-card--feature .certificate-card__text { min-height: 300px; }
  .certificate-viewer { padding-top: 4.8rem; }
  .certificate-viewer__caption h2 { font-size: 2rem; }
  .certificate-viewer__caption p { font-size: .88rem; }
}