/* ---------------------------------------------------------------------------
   About + Contact — measured against peptideportal.xyz at 1440.

   Content column x120–x1320 (1200), which is --dp-content. Every size below came off the
   live page rather than being chosen: hero title 44/600, section heads 24/600, card numbers
   30/600, card titles 20/600 on ink-80, body 14/400 on the grey Framer uses (156,163,175).
   --------------------------------------------------------------------------- */

/* --dp-maxw + gutter, NOT --dp-content + gutter. The second form nests the gutter INSIDE a
   1200px box, so the content column began at x240 instead of the measured x120 and every
   element on the page sat 120px right of where the live one has it. */
.dp-ab__in,
.dp-ct__in {
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
}

.dp-ab__band { padding-block: 24px; }
.dp-ab__band--alt { background: var(--dp-surface-alt); }

/* --- 1. Hero -------------------------------------------------------------- */
.dp-ab__hero { padding-block: 104px 34px; }
.dp-ab__heroGrid { display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 608px); gap: 72px; align-items: center; }
.dp-ab__eyebrow { font-size: var(--dp-fs-base); font-weight: var(--dp-fw-regular); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-ab__title {
  margin-top: var(--dp-s-3);
  font-size: clamp(30px, 3.4vw, 44px); font-weight: var(--dp-fw-semi);
  line-height: 1.16; letter-spacing: -.02em;
}
/* The FIRST line is blue and the second is ink — not the other way round, and not a fade to
   grey. It is the page's one piece of colour above the fold. */
.dp-ab__titleBlue { display: block; color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-ab__title span:not(.dp-ab__titleBlue) { display: block; color: var(--dp-ink); }
.dp-ab__lede { margin-top: var(--dp-s-7); font-size: var(--dp-fs-base); line-height: 1.6; color: var(--dp-ink-60); max-width: 52ch; }
.dp-ab__hero .dp-btn { margin-top: var(--dp-s-9); }
.dp-ab__heroImg img { display: block; width: 100%; height: auto; border-radius: var(--dp-r-2xs); }

/* --- 2. Statement --------------------------------------------------------- */
.dp-ab__stmt { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 60px; align-items: start; }
.dp-ab__h2 { font-size: clamp(20px, 1.9vw, 24px); font-weight: var(--dp-fw-semi); line-height: 1.28; letter-spacing: -.01em; text-wrap: balance; }
.dp-ab__stmtLead { margin-top: var(--dp-s-6); font-size: var(--dp-fs-base); line-height: 1.6; color: var(--dp-ink-60); }
.dp-ab__stmtBody { display: flex; flex-direction: column; gap: var(--dp-s-6); }
.dp-ab__stmtBody p { margin: 0; font-size: var(--dp-fs-base); line-height: 1.6; color: var(--dpx-fg-9ca3af, #9CA3AF); }

/* --- 3. Numbered cards ---------------------------------------------------- */
/* The card block carries the breathing room before Our Process. Tuned against the live page:
   the mid-page sections were landing ~44px early without it. */
.dp-ab__cards { padding-bottom: 26px; }
.dp-ab__cardGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s-6); }
.dp-ab__card {
  padding: var(--dp-s-7) var(--dp-s-9) var(--dp-s-6);
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
}
.dp-ab__cardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dp-s-5); }
.dp-ab__num { font-size: 30px; font-weight: var(--dp-fw-semi); line-height: 1; letter-spacing: -.02em; color: var(--dp-ink); font-variant-numeric: tabular-nums; }
.dp-ab__icon { display: block; width: 20px; height: 20px; color: var(--dpx-fg-blue, var(--dp-blue)); flex: 0 0 20px; }
.dp-ab__icon svg { display: block; width: 100%; height: 100%; }
.dp-ab__cardH { margin-top: var(--dp-s-6); font-size: var(--dp-fs-h3); font-weight: var(--dp-fw-semi); line-height: 1.3; color: var(--dpx-fg-a414676p8, rgba(46, 36, 30, .8)); }
.dp-ab__cardP { margin-top: var(--dp-s-3); font-size: var(--dp-fs-base); line-height: 1.5; color: var(--dpx-fg-9ca3af, #9CA3AF); }

/* --- 4. Our Process ------------------------------------------------------- */
.dp-ab__panel {
  padding: var(--dp-s-9) var(--dp-s-9) var(--dp-s-5);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface-alt);
}
.dp-ab__panelHead { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s-9); margin-bottom: var(--dp-s-10); }
.dp-ab__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s-9); }
.dp-ab__step { position: relative; margin: 0; border-radius: var(--dp-r-3xs); overflow: hidden; }
.dp-ab__step img { display: block; width: 100%; height: 262px; object-fit: cover; }
/* The caption sits ON the photo, so it carries its own scrim — white text over an
   uncontrolled image is unreadable the moment the photo is light. */
.dp-ab__step figcaption {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--dp-s-9) var(--dp-s-7) var(--dp-s-7);
  background: linear-gradient(to top, var(--dpx-bg-a202440p82, rgba(38, 27, 22, .82)), rgba(38, 27, 22, 0));
  color: var(--dp-on-dark);
}
.dp-ab__stepN { font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-regular); color: var(--dp-on-dark-90); }
.dp-ab__stepT { font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-medium); color: var(--dp-on-dark-90); }
.dp-ab__stepB { font-size: var(--dp-fs-sm); line-height: 1.4; color: var(--dp-on-dark-85); }

/* --- 5. Certificate + copy ------------------------------------------------ */
.dp-ab__coa { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 84px; align-items: center; }
.dp-ab__cert {
  margin: 0; padding: var(--dp-s-7);
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
  box-shadow: 0 1px 2px var(--dpx-shadow-a414676p04, rgba(46, 36, 30, .04)), 0 18px 36px -26px var(--dpx-shadow-a414676p26, rgba(46, 36, 30, .26));
}
.dp-ab__certHead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--dp-s-2) var(--dp-s-5); padding-bottom: var(--dp-s-6); border-bottom: 1px solid var(--dp-hairline); }
.dp-ab__certKicker { grid-column: 1 / -1; font-size: var(--dp-fs-sm); color: var(--dp-ink-60); }
.dp-ab__certName { font-size: var(--dp-fs-h3); font-weight: var(--dp-fw-semi); letter-spacing: -.01em; }
.dp-ab__certBadge { padding: 2px var(--dp-s-4); border-radius: var(--dp-r-pill); background: var(--dpx-bg-e8f5ee, #E8F5EE); font-size: var(--dp-fs-sm); color: var(--dpx-fg-087f17, #087F17); }
.dp-ab__certRows { margin: 0; }
/* 26px row pitch on the live card — a taller row makes the specimen overshoot and pushes
   everything below it down the page. */
.dp-ab__certRows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dp-s-7); padding-block: var(--dp-s-2); border-bottom: 1px solid var(--dp-hairline); }
.dp-ab__certRows dt { font-size: var(--dp-fs-sm); color: var(--dp-muted); }
.dp-ab__certRows dd { margin: 0; font-size: var(--dp-fs-sm); color: var(--dp-ink); font-variant-numeric: tabular-nums; text-align: right; }
.dp-ab__certFoot { margin-top: var(--dp-s-6); font-size: 10px; line-height: 1.5; color: var(--dp-muted); }
.dp-ab__coaTxt p { margin-top: var(--dp-s-6); font-size: var(--dp-fs-base); line-height: 1.6; color: var(--dp-muted); }
.dp-ab__coaTxt .dp-btn { margin-top: var(--dp-s-9); }

/* --- 6. The standard ------------------------------------------------------ */
.dp-ab__h2--std { font-size: 22px; }
.dp-ab__std { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s-6); margin-top: var(--dp-s-9); }
.dp-ab__stdCard {
  padding: var(--dp-s-9);
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
}
.dp-ab__tick { display: block; width: 20px; height: 20px; color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-ab__stdCard p { margin-top: var(--dp-s-7); font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-medium); line-height: 1.35; color: var(--dp-ink); }

/* --- 7. RUO --------------------------------------------------------------- */
.dp-ab__ruoWrap { padding-bottom: 0; }
.dp-ab__ruo { padding: var(--dp-s-7) var(--dp-s-8); border-radius: var(--dp-r-3xs); background: var(--dp-surface-alt); }
.dp-ab__ruoH { font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi); color: var(--dp-ink-60); }
/* 1.1, measured — the live block sets an 11px line box on 10px text. At a comfortable 1.55
   the same legal paragraph runs 62px instead of 33 and pushed everything below it 29px down. */
.dp-ab__ruoP { margin-top: var(--dp-s-2); font-size: 10px; line-height: 1.1; color: var(--dpx-fg-9ca3af, #9CA3AF); }

/* --- 8. Closing ----------------------------------------------------------- */
.dp-ab__close {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--dp-s-9); align-items: center;
  padding: 16px var(--dp-s-11);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface-alt);
}
.dp-ab__closeH { font-size: clamp(24px, 2.4vw, 30px); font-weight: var(--dp-fw-semi); line-height: 1.2; letter-spacing: -.02em; }
.dp-ab__closeH span { display: block; }
.dp-ab__closeTxt p { margin-top: var(--dp-s-7); font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-medium); line-height: 1.5; color: var(--dp-muted); max-width: 48ch; }
.dp-ab__closeTxt .dp-btn { margin-top: var(--dp-s-9); }
/* Capped so the PANEL is sized by its copy, not by the picture. At 400px the image made the
   panel ~450 tall and align-items:center then pushed the heading 140px down from the panel
   top, where the live page has it at 68. */
.dp-ab__closeImg { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; }

/* ===========================================================================
   Contact
   =========================================================================== */
.dp-ct { padding-block: 96px 72px; }
.dp-ct__grid { display: grid; grid-template-columns: minmax(0, 584px) minmax(0, 584px); gap: 72px; align-items: start; }
.dp-ct__title { font-size: clamp(30px, 3.4vw, 44px); font-weight: var(--dp-fw-semi); line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; }
.dp-ct__form {
  margin-top: var(--dp-s-10); padding: var(--dp-s-9);
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
}
.dp-ct__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s-9); }
.dp-ct__field { display: flex; flex-direction: column; gap: var(--dp-s-2); margin-bottom: var(--dp-s-7); }
.dp-ct__label { font-size: var(--dp-fs-base); font-weight: var(--dp-fw-regular); color: var(--dp-ink); }
.dp-ct__req { color: var(--dp-alert); }
.dp-ct__input,
.dp-ct__area {
  width: 100%; padding: var(--dp-s-5) var(--dp-s-6);
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-4xs);
  background: var(--dp-surface);
  font-family: inherit; font-size: var(--dp-fs-lg); color: var(--dp-ink);
}
.dp-ct__input::placeholder,
.dp-ct__area::placeholder { color: var(--dp-muted); }
.dp-ct__input:focus-visible,
.dp-ct__area:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -1px; }
.dp-ct__area { min-height: 148px; resize: vertical; }
.dp-ct__submit {
  width: 100%; height: 46px; margin-top: var(--dp-s-3);
  border: 0; border-radius: var(--dp-r-pill);
  background: var(--dp-blue); color: var(--dp-on-dark);
  font-family: inherit; font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  cursor: pointer;
  transition: background-color var(--dp-t-cta) var(--dp-ease-cta);
}
@media (hover: hover) { .dp-ct__submit:hover { background: var(--dpx-bg-0067d1, #bc3915); } }
.dp-ct__submit:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-ct__submit[disabled] { opacity: .6; cursor: progress; }
.dp-ct__note { margin-top: var(--dp-s-5); font-size: var(--dp-fs-base); line-height: 1.5; }
.dp-ct__note--ok { color: var(--dpx-fg-087f17, #087F17); }
.dp-ct__note--bad { color: var(--dp-alert); }
.dp-ct__img img { display: block; width: 100%; height: auto; border-radius: var(--dp-r-2xs); }

.dp-ct__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s-9); margin-top: 72px; text-align: center; }
.dp-ct__cardIco {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto var(--dp-s-7);
  border-radius: var(--dp-r-pill); background: var(--dpx-bg-e9f3ff, #FDEFEB); color: var(--dpx-fg-blue, var(--dp-blue));
}
.dp-ct__cardIco svg { width: 20px; height: 20px; }
.dp-ct__cardLbl { font-size: var(--dp-fs-base); color: var(--dp-ink-60); }
.dp-ct__cardVal { margin-top: var(--dp-s-3); font-size: var(--dp-fs-h3); font-weight: var(--dp-fw-semi); line-height: 1.3; letter-spacing: -.01em; color: var(--dp-ink); }
.dp-ct__cardVal a { color: inherit; }
@media (hover: hover) { .dp-ct__cardVal a:hover { color: var(--dpx-fg-blue, var(--dp-blue)); } }

/* --- Responsive — DP's breakpoints, 1200 / 810 ---------------------------- */
@media (max-width: 1199px) {
  .dp-ab__heroGrid,
  .dp-ab__stmt,
  .dp-ab__coa,
  .dp-ct__grid { gap: 40px; }
  .dp-ab__heroGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dp-ct__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 809px) {
  .dp-ab__hero { padding-block: 48px 36px; }
  .dp-ab__band { padding-block: 40px; }
  .dp-ab__heroGrid,
  .dp-ab__stmt,
  .dp-ab__coa,
  .dp-ab__cardGrid,
  .dp-ab__steps,
  .dp-ab__std,
  .dp-ct__grid,
  .dp-ct__cards { grid-template-columns: minmax(0, 1fr); gap: var(--dp-s-9); }
  /* Photo above the copy on a phone: the hero reads top-down and a picture below the CTA
     would sit past the fold doing nothing. */
  .dp-ab__heroImg { order: -1; }
  .dp-ab__panelHead { flex-direction: column; align-items: flex-start; gap: var(--dp-s-6); }
  .dp-ab__step img { height: 200px; }
  .dp-ab__close { grid-template-columns: minmax(0, 1fr); padding: var(--dp-s-11) var(--dp-s-8); }
  .dp-ab__closeImg { max-width: 260px; }
  .dp-ct { padding-block: 48px 40px; }
  .dp-ct__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dp-ct__cards { margin-top: 48px; }
}