/* ==========================================================================
   NNP RAISINS — CERTIFICATION PAGE, v2 (2026-09-21). Loaded by
   certification/index.html only, after site.css.

   THE DOCUMENT IS THE VISUAL. His rule after Products v2: every page its
   own idea. Home summarises the four marks on cards; About shows them as
   tiles; Products swaps them as plates. This page is the desk they sit on:
   one pinned screen, a cream sheet on a dark desk, and every change of
   standard pulls the next sheet up, presses a wax seal onto it (his own
   render's motif — violet wax, gold rules), and types the reference number
   out. The real document is one click away on the right. Then the ask, on
   paper, under his render.

   Keeps from the site: the palette, Bricolage 800 for display, IBM Plex Mono
   for eyebrows and numbers, `.btn`, the 1280 spine via `.wrap`. Shares its
   masthead and glass rules with products.css by copy, not by import.

   ⚠ EVERY MOTION RULE IS `.js`-GATED. The stacked flow layout is the truth on
   a phone, under reduced motion, and without a script.
   ⚠ HIS LAPTOP IS 1270×680. The sheet is sized in vh with a floor and was
   checked there.
   ⚠ NO CSS TRANSITION ON A PROPERTY GSAP TWEENS (GOTCHAS). The sheets, the
   seal, the sweep and the label are GSAP's; only the tabs and the progress
   line transition.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.cd { --cd-bg: #09060f; --cd-line: rgba(242,237,248,.14); --cd-glass: rgba(242,237,248,.06); --cd-r: 14px;
      --cd-cream: #f3f0e7; --cd-cream-dp: #e4dfd2; --cd-gold: #c9a45c; --cd-gold-lt: #e6c987; --cd-wax: #4b1e78;
      background: var(--cd-bg); color: var(--chalk); overflow-x: clip; }
/* The page owns the body ground and drops the masthead reserve, as about.css,
   products.css and home.css do (GOTCHAS: the paper bar was not the masthead). */
.cd-dark-page, .cd-dark-page body { background: #09060f; }
.cd-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ----
   Transparent at the very top, glass on scroll: the home page's rule, the
   About page's values. The opening is dark; the ask band at the foot is
   paper, and the masthead is long gone by then. */
.cd-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.cd-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cd-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.cd-dark-page .masthead .brand { color: #fff; }
.cd-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .cd-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .cd-dark-page .masthead .mainnav a:not(.btn):hover,
  .cd-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .cd-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .cd-dark-page .masthead .btn-primary::before { background: #fff; }
  .cd-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.cd-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 16px; }
.cd-word { display: inline-block; overflow: hidden; vertical-align: top; }
.cd-word > span { display: inline-block; will-change: transform; }

/* ============================================================== DESK ====
   One pinned screen: the head (his headline, the four tabs), the stage (the
   sheet on the left, its reading on the right), a progress line. Scroll
   walks the four standards; the tabs jump; the home page's anchors
   (#fssc-22000 …) sit on the tabs and land selected. Without the script the
   desk shows FSSC 22000 and does not pin. */
.cd-desk { position: relative; background: var(--cd-bg); }
.cd-scene { position: relative; }
.cd-pin { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 84px 0 0;
  background: linear-gradient(180deg, #09060f 0%, #100a1c 100%); }
/* Two lights on the desk: a violet ambient from the top left and a warm
   gold pool under the sheet. Gold is this page's own accent — the render's
   rules and clip — where Products tints by variety. */
.cd-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cd-light::before { content: ''; position: absolute; left: -10%; top: -20%; width: 70vw; height: 90vh; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(75,30,120,.55) 0%, rgba(75,30,120,.18) 40%, rgba(9,6,15,0) 70%); filter: blur(30px); }
.cd-light::after { content: ''; position: absolute; left: 6%; top: 40%; width: 50vw; height: 70vh; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,164,92,.22) 0%, rgba(201,164,92,.06) 45%, rgba(9,6,15,0) 70%); filter: blur(40px); }
.cd-pin > .wrap { width: 100%; }
.cd-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.cd-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(30px, 4.4vh, 44px); line-height: 1; letter-spacing: -.035em; margin: 0; }
.cd-h1 .accent { color: var(--violet-lt); }
.cd-head .cd-kick { margin-bottom: 10px; }
.cd-lead { margin: 10px 0 0; font-size: clamp(13.5px, 1.9vh, 16px); line-height: 1.5; color: var(--chalk-dim); max-width: 62ch; }

/* ---- the tabs: 01 to 04, the name under each (his call 2026-09-21) ---- */
.cd-tabs { display: flex; gap: 6px; }
.cd-tab { display: grid; justify-items: center; gap: 4px; padding: 8px 12px 9px; min-width: 96px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer;
  color: var(--chalk-dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.cd-tab b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.04em; color: rgba(242,237,248,.35); transition: color var(--t-hover) ease, transform .4s var(--ease-out); }
.cd-tab:hover { color: #fff; }
.cd-tab:hover b { color: var(--chalk); }
.cd-tab.is-on { color: #fff; background: rgba(242,237,248,.06); border-color: rgba(242,237,248,.16); }
.cd-tab.is-on b { color: #fff; transform: translateY(-1px); }
.cd-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the stage ---- */
/* padding-BLOCK only: the stage carries `.wrap`, and the padding shorthand
   would take it off the spine (site.css, THE PAGE SPINE, rule 4 — it did,
   on the phone, first build). */
.cd-stage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 64px); align-items: center; padding-block: 8px; }

/* THE SHEET. A designed document, not the PDF: the PDF prints the expiry
   date, which the page does not carry by his decision (claims.md), so the
   sheet shows the parts that identify the document — the issuer's mark, the
   holder, the reference — and abstract rules where the body text would be.
   Sized by width, in vh with a vw ceiling, so it fits his 680 screen with
   the head above it; every size inside is in cqw so the sheet scales as one
   object. Two sheets alternate (A and B) so the next can rise while the last
   is going down; the stack behind is decoration. */
.cd-table { position: relative; justify-self: center; width: min(32vw, 50vh); aspect-ratio: 1 / 1.3; perspective: 1400px; }
.cd-stack { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cd-stack i { position: absolute; inset: 0; background: var(--cd-cream-dp); border-radius: 3px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.cd-stack i:nth-child(1) { transform: rotate(5deg) translate(4%, 2%); opacity: .55; }
.cd-stack i:nth-child(2) { transform: rotate(-7deg) translate(-5%, 1%); opacity: .35; }
/* No preserve-3d here: inside a 3D context Chrome stops clipping the paper's
   overflow, and the light sweep parked past the sheet's edge (his report,
   2026-09-21). Only the table leans in 3D; the sheet is flat. */
.cd-sheet { position: absolute; inset: 0; z-index: 1; container-type: inline-size; transform: rotate(-3deg); will-change: transform, opacity; }
.cd-sheet[hidden] { display: none; }
.cd-paper { position: absolute; inset: 0; background: linear-gradient(160deg, #f7f4ec 0%, var(--cd-cream) 55%, #ebe6d9 100%); border-radius: 3px; overflow: hidden; clip-path: inset(0 round 3px); color: var(--ink);
  box-shadow: 0 50px 90px -24px rgba(0,0,0,.85), 0 8px 20px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.08) inset; }
/* the double gold rule of his render */
.cd-paper::before { content: ''; position: absolute; inset: 3.2cqw; border: 1px solid rgba(201,164,92,.85); border-radius: 1px; pointer-events: none; }
.cd-paper::after { content: ''; position: absolute; inset: 4.4cqw; border: 1px solid rgba(201,164,92,.45); pointer-events: none; }
/* two lights on the paper: the sweep that crosses it when the seal lands
   (GSAP moves it) and the sheen that follows the pointer (GSAP too). Two
   elements so the two tweens never fight over one transform. */
.cd-sweep { position: absolute; top: -20%; bottom: -20%; left: -10%; width: 45%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%); transform: translateX(-140%) skewX(-12deg); opacity: 0; will-change: transform, opacity; }
.cd-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.05) 100%); will-change: transform; }
/* minmax(0, 1fr), not the implicit auto column: the typed reference is
   nowrap, and the 31-character EU Organic number grew the auto track past
   the sheet, pushing the issuer's mark and the rules sideways as the last
   characters arrived (his report, 2026-09-21). */
.cd-body { position: absolute; inset: 0; padding: 8cqw 8cqw 7.5cqw; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 4cqw; z-index: 1; }
.cd-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; }
.cd-sheet-top .cd-nnp { display: block; width: 8cqw; height: 8.9cqw; color: var(--ink); opacity: .85; }
.cd-issuer-mark { display: block; width: auto; height: auto; max-width: 30cqw; max-height: 9cqw; object-fit: contain; }
.cd-doc { display: grid; gap: 1.6cqw; }
.cd-doc-kind { font-family: var(--mono); font-size: 2.6cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin: 0; }
.cd-doc-holder { font-family: var(--display); font-weight: 800; font-size: 5.6cqw; line-height: 1.02; letter-spacing: -.03em; color: var(--ink); margin: 0; }
.cd-doc-place { font-family: var(--mono); font-size: 2.5cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0; }
/* the body of the document, as rules: what a page of a certificate looks
   like at arm's length, and the one honest way to show a document whose
   text is not published here in full */
.cd-rules { position: relative; display: grid; align-content: start; gap: 2.6cqw; padding-top: 1cqw; }
.cd-rules i { display: block; height: 1.15cqw; border-radius: 1cqw; background: rgba(22,20,28,.13); }
.cd-rules i:nth-child(1) { width: 92%; } .cd-rules i:nth-child(2) { width: 84%; } .cd-rules i:nth-child(3) { width: 96%; }
.cd-rules i:nth-child(4) { width: 70%; } .cd-rules i:nth-child(5) { width: 88%; } .cd-rules i:nth-child(6) { width: 52%; }
.cd-rules i:nth-child(7) { width: 78%; margin-top: 2cqw; } .cd-rules i:nth-child(8) { width: 60%; }
/* the reference number, typed as the seal lands */
.cd-sheet-ref { display: grid; gap: 1.2cqw; align-self: end; }
.cd-sheet-ref span { font-family: var(--mono); font-size: 2.4cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.cd-sheet-ref b { font-family: var(--mono); font-weight: 500; font-size: 4.3cqw; letter-spacing: .02em; color: var(--violet-dp); white-space: nowrap; min-width: 0; overflow: hidden; min-height: 1.3em; line-height: 1.3; }
/* a long number (EU Organic's 31 characters) at a size that fits the sheet */
.cd-sheet-ref b.is-long { font-size: 3.4cqw; letter-spacing: 0; }
.cd-sheet-ref b::after { content: ''; display: inline-block; width: .55em; height: 1em; margin-left: .12em; vertical-align: -.15em; background: var(--violet); opacity: 0; }
.cd-sheet-ref b.is-typing::after { opacity: 1; animation: cd-caret .7s steps(1) infinite; }
@keyframes cd-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cd-sheet-ref b.is-typing::after { animation: none; } }

/* THE SEAL. Violet wax with gold detail, the render's own. The script drops
   it onto the sheet on every change; without the script it is simply there.
   It overhangs the rule, as a seal does. */
.cd-seal { position: absolute; right: 5cqw; bottom: 17cqw; width: 30cqw; height: 30cqw; z-index: 4; transform: rotate(-8deg); transform-origin: 50% 50%; will-change: transform, opacity;
  filter: drop-shadow(0 6cqw 6cqw rgba(20,6,40,.45)); }
/* `>`: the mark inside is a nested svg whose viewBox CROPS the logo symbol
   to its grape; overflow visible on it showed the whole wordmark in the wax. */
.cd-seal > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cd-seal-mark { overflow: hidden; }
.cd-seal-wax { fill: url(#cd-wax); }
.cd-seal-rim { fill: none; stroke: rgba(230,201,135,.55); stroke-width: 1.2; }
.cd-seal-ring { fill: none; stroke: rgba(230,201,135,.9); stroke-width: 1.6; }
/* 13px on a 220 viewBox: one word repeated fills the 465-unit arc without
   running past its own start (cert.js counts the repeats). */
.cd-seal-text { font-family: var(--mono); font-size: 13px; letter-spacing: .22em; font-weight: 500; fill: #efdfb0; }
.cd-seal-mark { color: #efdfb0; }
/* the impact ring, expanding from the seal as it lands */
.cd-ring { position: absolute; right: 5cqw; bottom: 17cqw; width: 30cqw; height: 30cqw; border-radius: 50%; border: 2px solid rgba(230,201,135,.9); opacity: 0; z-index: 3; pointer-events: none; transform: scale(.6); will-change: transform, opacity; }

/* ---- the reading, on the right ---- */
.cd-label { display: grid; gap: clamp(8px, 1.6vh, 14px); align-content: center; }
/* The issuer's mark on a white plate, in place of "01 / 04" (his call
   2026-09-21). Plate and mark in px, every breakpoint (GOTCHAS). */
/* Bigger on his note (too small): 250x116, mark up to 206x76. */
.cd-markplate { display: grid; place-items: center; width: 250px; height: 116px; padding: 0 22px; background: #fff; border-radius: 14px; margin-bottom: 6px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.cd-markplate img { display: block; width: auto; height: auto; max-width: 206px; max-height: 76px; object-fit: contain; }
.cd-label .cd-kick { margin: 0; }
.cd-name { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(30px, 6vh, 54px); line-height: .96; letter-spacing: -.035em; margin: 0; }
.cd-issuer { margin: 0; font-size: clamp(13px, 1.8vh, 14.5px); line-height: 1.5; color: var(--chalk-dim); }
.cd-covers { margin: 0; font-size: clamp(14px, 2vh, 16.5px); line-height: 1.55; color: var(--chalk); max-width: 46ch; }
/* The reference number is on the sheet only, his call 2026-09-21. */
.cd-action { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding-top: clamp(6px, 1.4vh, 12px); }
.cd-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--chalk-dim); max-width: 34ch; }
.cd-note:empty { display: none; }

/* progress + hint */
.cd-progress { display: none; }
.cd-hint { display: none; }

/* ==================================================== pinned motion ==== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .cd-scene { height: 400vh; }
  .js .cd-pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .js .cd-progress { display: block; position: absolute; left: var(--spine); right: var(--spine); bottom: 22px; height: 2px; background: rgba(242,237,248,.14); z-index: 3; }
  /* scaled, not resized: the line grows on a transform so a change never
     relays out the pin */
  .js .cd-progress i { display: block; height: 100%; width: 100%; background: var(--cd-gold-lt); transform: scaleX(.25); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
  .js .cd-hint { display: block; position: absolute; right: var(--spine); bottom: 32px; margin: 0; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); transition: opacity .4s ease; }
  .js .cd-hint.is-off { opacity: 0; }
}
/* Short laptops: his is 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .cd-pin { padding-top: 74px; }
  .cd-h1 { font-size: 30px; }
  .cd-lead { font-size: 13.5px; margin-top: 8px; }
  .cd-tab { padding: 6px 10px 7px; font-size: 9px; min-width: 88px; }
  .cd-tab b { font-size: 26px; }
  .cd-markplate { width: 220px; height: 100px; margin-bottom: 2px; }
  .cd-markplate img { max-width: 180px; max-height: 64px; }
  /* 48vh: at 680 the sheet's lower corner (rotated) touched the progress line at 50 */
  .cd-table { width: min(30vw, 48vh); }
  .cd-label { gap: 8px; }
}

/* ============================================================== ASK ====
   Paper, under his render: the page ends the way the old one opened. The
   render's ground is colour-shifted onto --paper exactly (tools/build-cert-
   hero.ps1) so it ends in the band rather than on it. */
.cd-ask { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; }
.cd-ask > .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(64px, 9vh, 104px); }
.cd-ask .cd-kick { color: var(--violet); }
.cd-ask h2 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5.2vw, 60px); line-height: .96; letter-spacing: -.04em; color: var(--ink); margin: 0 0 18px; max-width: 14ch; }
.cd-ask .lead { max-width: 46ch; }
.cd-ask-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cd-ask-art { display: block; width: 100%; max-width: 560px; height: auto; justify-self: end;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%); }

/* Reveal: hidden only once the script is confirmed present. */
.js .cd [data-rv] { opacity: 0; transform: translateY(26px); }
.js .cd [data-rv].is-rv { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .cd [data-rv] { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- phone ---- */
@media (max-width: 900px) {
  .cd-pin { min-height: 0; padding: 96px 0 32px; display: block; }
  .cd-light::before { width: 140vw; height: 60vh; left: -20%; }
  .cd-light::after { width: 120vw; height: 50vh; left: -10%; top: 30%; }
  .cd-head { grid-template-columns: 1fr; gap: 16px; }
  .cd-lead { max-width: none; }
  .cd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
  .cd-tab { font-size: 9px; }
  .cd-stage { grid-template-columns: 1fr; gap: 28px; padding-block: 24px 8px; }
  .cd-table { width: min(74vw, 340px); }
  .cd-label { align-content: start; }
  .cd-tab { min-width: 0; padding: 6px 10px 7px; }
  .cd-tab b { font-size: 26px; }
  .cd-markplate { width: 220px; height: 100px; }
  .cd-markplate img { max-width: 180px; max-height: 64px; }
  .cd-name { font-size: 34px; }
  .cd-covers { max-width: none; }
  .cd-ask > .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 56px; }
  .cd-ask-art { justify-self: center; max-width: 420px; -webkit-mask-image: none; mask-image: none; }
  .cd-kick { font-size: 12px; }
}

/* ======================================================== LABORATORY ====
   Moved from the About page 2026-09-22: the head and the three laboratory
   cards, in this page's ground. */
.cd-lab { position: relative; overflow: hidden; background: var(--cd-bg); padding: clamp(64px, 10vh, 110px) 0; }
.cd-lab-glow { position: absolute; left: 65%; top: 50%; width: 70vw; height: 70vh; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(226,183,255,.14) 0%, rgba(75,30,120,.1) 40%, rgba(9,6,15,0) 70%); filter: blur(30px); }
.cd-lab-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cd-lab .cd-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(34px, 7vh, 64px); line-height: .96; letter-spacing: -.04em; margin: 0 0 14px; max-width: 14ch; }
.cd-lab .cd-lead { font-size: clamp(15px, 2.2vh, 18px); line-height: 1.6; max-width: 54ch; }
.cd-labs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cd-labcard { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; padding: 14px 20px 14px 14px;
  background: var(--cd-glass); border: 1px solid var(--cd-line); border-radius: var(--cd-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 30px 60px -30px rgba(0,0,0,.7); }
.cd-labmark { height: clamp(64px, 10vh, 84px); display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 12px 16px; }
/* max-width 100%, not 100px: the plate is 96px wide on a phone with 16px of
   padding a side, so a 100px cap let both laboratory marks spill out of it
   (his report, 2026-09-22: "lab testing section has logo overlapping bugs") */
.cd-labmark img { max-width: 100%; max-height: clamp(40px, calc(10vh - 24px), 60px); width: auto; height: auto; object-fit: contain; display: block; }
.cd-labmark-own { background: linear-gradient(135deg, #4b1e78 0%, #37125e 100%); }
.cd-ico { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cd-labcard h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: clamp(16px, 2.4vh, 19px); letter-spacing: -.02em; color: #fff; }
.cd-labcard p { margin: 0; font-size: clamp(13px, 1.9vh, 14.5px); line-height: 1.45; color: var(--chalk-dim); }
@media (max-width: 900px) {
  .cd-lab-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-labcard { grid-template-columns: 96px 1fr; gap: 14px; }
}