/* =========================================================
   Belz Calibration Laboratory — image-led card styles
   Loaded after style.css so it can override the icon-era rules.
   ========================================================= */

/* ── Hero photograph ──────────────────────────────────────── */
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(1.04);
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,12,31,0.97) 0%, rgba(8,17,44,0.90) 42%, rgba(10,21,53,0.68) 78%, rgba(10,21,53,0.60) 100%),
    radial-gradient(ellipse at 78% 46%, rgba(0,194,255,0.12), transparent 62%);
}
#heroCanvas { z-index: 1; opacity: 0.75; }
.hero-grid-overlay { z-index: 1; }

/* ── Service cards: photo banner instead of a line-art icon ── */
.card-media {
  margin: -32px -28px 20px; height: 158px; overflow: hidden;
  background: var(--navy); position: relative;
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.service-card:hover .card-media img { transform: scale(1.06); }
.card-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,15,36,0.34), transparent 58%);
}
.service-card.featured .card-media::after {
  background: linear-gradient(to top, rgba(13,27,62,0.62), transparent 60%);
}

/* ── Discipline tiles: label sits over the photograph ─────── */
.disciplines-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px;
}
.disc-card {
  position: relative; padding: 0; border: 1px solid transparent;
  border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--navy); text-align: left; cursor: pointer;
}
.disc-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.disc-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,12,30,0.94) 4%, rgba(6,12,30,0.58) 40%, rgba(6,12,30,0.06) 76%);
}
.disc-card:hover {
  background: var(--navy); border-color: rgba(212,175,55,0.55);
  box-shadow: 0 10px 30px rgba(13,27,62,0.28); transform: translateY(-4px);
}
.disc-card:hover img { transform: scale(1.07); }
.disc-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 15px 15px; }
.disc-card h4 {
  color: #fff; font-size: 15.5px; margin-bottom: 4px; letter-spacing: 0.2px;
}
.disc-overlay span {
  display: block; font-family: var(--ff-mono); font-size: 10px;
  color: rgba(255,255,255,0.74); line-height: 1.5; letter-spacing: 0.2px;
}
.disc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform var(--tr);
}
.disc-card:hover::before { transform: scaleX(1); }

/* ── Product cards: real product shot instead of line-art ─── */
.product-media {
  margin: -32px -28px 22px; height: 216px; overflow: hidden;
  background: #070E20; position: relative;
}
.product-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.product-card:hover .product-media img { transform: scale(1.05); }
.product-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,15,36,0.72), rgba(8,15,36,0.06) 62%);
}
/* The numeral used to be a near-invisible watermark on a flat card; over a
   photograph it needs to read as a deliberate badge instead. */
.product-num {
  top: 16px; right: 16px; z-index: 3;
  font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--gold); background: rgba(8,15,36,0.62);
  border: 1px solid rgba(212,175,55,0.45); border-radius: 8px;
  padding: 3px 10px; backdrop-filter: blur(6px);
}

/* ── Why Belz: main laboratory photograph (the second photo overlaps its corner) ── */
.why-photo {
  border-radius: 16px; overflow: hidden; margin-bottom: 0;
  border: 1px solid var(--gray-light); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3; background: var(--navy);
}
.why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .disciplines-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .disc-overlay { padding: 11px 12px 12px; }
  .disc-card h4 { font-size: 14px; }
  .disc-overlay span { font-size: 9.5px; }
}
@media (max-width: 640px) {
  .card-media { height: 138px; margin: -32px -28px 18px; }
  .product-media { height: 190px; }
  .disciplines-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Videos in place of images ─────────────────────────────
   main.js swaps an <img> for a <video> when the admin uploaded an MP4 for that
   picture. Each rule below is the matching `… img` rule above, for `… video`. */
.hero-photo video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(1.04);
}
.card-media video, .disc-card video, .product-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.service-card:hover .card-media video { transform: scale(1.06); }
.disc-card:hover video { transform: scale(1.07); }
.product-card:hover .product-media video { transform: scale(1.05); }
.why-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Accreditation: photograph in place of the drawn badge ─── */
.accred-right.has-photo { display: flex; align-items: center; }   /* also on phones, where the badge was hidden */
.accred-right.has-photo .nabl-badge-large { display: none; }
.accred-photo {
  width: 100%; max-width: 460px; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(212,175,55,0.45);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 6px rgba(212,175,55,0.06);
  background: var(--navy);
}
.accred-photo img, .accred-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Why Belz: second photograph, inset over the bottom-right corner of the main one ── */
.why-process-photo {
  position: absolute; right: 0; bottom: 0; width: 56%; z-index: 2;
  margin-top: 0; border-radius: 14px; overflow: hidden;
  border: 5px solid var(--white); box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; background: var(--navy);
}
@media (max-width: 560px) {
  .why-visual { padding: 0 0 48px 0; }
  .why-process-photo { width: 52%; right: 10px; }
  .why-badge { left: 10px; bottom: 20px; padding: 9px 12px 9px 10px; }
  .why-features { grid-template-columns: 1fr; }
}
.why-process-photo img, .why-process-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Footer: photograph behind the whole footer ────────────── */
/* Full width (03/10/2026): the photo is the backdrop of the whole footer, edge to
   edge, with the footer's own navy laid over it so the links stay readable. */
.footer { position: relative; overflow: hidden; }
.footer-top, .footer-bottom { position: relative; z-index: 1; }
.footer-photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: #050C1E; }
.footer-photo img, .footer-photo video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.footer-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,12,30,0.86) 0%, rgba(5,12,30,0.66) 45%, rgba(5,12,30,0.90) 100%);
}
.footer { isolation: isolate; }

/* ── Customers: logo strips by sector (08/10/2026) ────────────
   The strips are pictures on white, so the card is white in every UI style. */
.clients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.client-row {
  background: #fff; border: 1px solid var(--gray-light); border-radius: var(--r-card, 12px);
  padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; transition: var(--tr);
}
.client-row:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.client-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.client-row h4 {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--tag, #7A5F0A);
}
.client-logos { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 72px; }
.client-logos img { max-width: 100%; height: auto; }

/* ── Awards & milestones: photographs with a short caption ──── */
.awards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.award-card {
  margin: 0; overflow: hidden; transition: var(--tr);
  background: var(--dk-card, rgba(255,255,255,0.04)); border: 1px solid var(--dk-line, rgba(255,255,255,0.08));
  border-radius: var(--r-card, 14px);
}
.award-card:hover { transform: translateY(-3px); background: var(--dk-card-hi, rgba(255,255,255,0.07)); }
.award-media { aspect-ratio: 45 / 32; overflow: hidden; background: #0A0D14; }
.award-media img, .award-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2,.6,.2,1); }
.award-card:hover .award-media img { transform: scale(1.04); }
.award-card figcaption { padding: 16px 18px 18px; }
.award-card h4 { font-family: var(--ff-head); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--dk-ink, #fff); margin-bottom: 6px; }
.award-card p { font-size: 13px; line-height: 1.6; color: var(--dk-text, rgba(255,255,255,0.74)); }
@media (max-width: 1000px) { .awards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .clients-grid { grid-template-columns: 1fr; } .client-row:last-child:nth-child(odd) { grid-column: auto; } }
@media (max-width: 560px)  { .awards-grid { grid-template-columns: 1fr; } }

/* ── Lab gallery under the discipline tiles (08/10/2026) ──────
   Several of the photographs are cut-outs on white, so the frame is white in every UI style. */
.lab-gallery { margin-top: 46px; }
.lab-gallery-title {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; text-align: center; color: var(--tag, #7A5F0A); margin-bottom: 18px;
}
.lab-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.lab-shot {
  margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--gray-light);
  border-radius: var(--r-card, 12px); transition: var(--tr);
}
.lab-shot:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lab-shot .ph { aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }
.lab-shot img, .lab-shot video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2,.6,.2,1); }
.lab-shot:hover img { transform: scale(1.05); }
.lab-shot figcaption {
  padding: 9px 8px 11px; text-align: center; line-height: 1.25;
  font-family: var(--ff-head); font-size: 14px; font-weight: 700; color: var(--navy);
}

/* ── Belz Training Institute ─────────────────────────────────── */
.training-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.training-layout .section-desc { max-width: none; }
.training-layout .btn-primary { margin-top: 20px; }
.training-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.training-photos figure { margin: 0; }
.training-photos .ph {
  aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy);
  border: 1px solid var(--gray-light); border-radius: var(--r-card, 14px); box-shadow: var(--shadow);
}
.training-photos img, .training-photos video { width: 100%; height: 100%; object-fit: cover; display: block; }
.training-photos figcaption { margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: var(--gray-text); }
/* An odd photo out (three photos since the NBQP certificate was removed,
   14/10/2026) spans both columns instead of leaving a gap beside it. */
.training-photos figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
.training-photos figure:last-child:nth-child(odd) .ph { aspect-ratio: 2 / 1; }

/* ── Social welfare: the award-card look, three across ───────── */
.awards-grid.awards-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1000px) {
  .lab-grid { grid-template-columns: repeat(4, 1fr); }
  .awards-grid.awards-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px)  { .training-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px)  {
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
  .awards-grid.awards-3 { grid-template-columns: 1fr; }
  .training-photos { grid-template-columns: 1fr; }
}

/* Award / social-welfare cards share the row equally however many are shown
   (a card can be deleted from BelzOne), and stay centred when only a few remain. */
@media (min-width: 1001px) {
  .awards-grid, .awards-grid.awards-3 { display: flex; flex-wrap: wrap; justify-content: center; }
  .awards-grid > .award-card { flex: 1 1 240px; max-width: 380px; }
}

/* ── Customers: one scrolling line of logos, right to left (08/10/2026) ──
   Each logo is its own white tile (the files are JPGs on white), so the line looks
   the same in every UI style. Hover pauses it; reduced-motion gets a swipeable row. */
.clients-marquee {
  position: relative; overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.clients-marquee[data-aos] { transform: none; }                   /* fade in only — a moving line must not also slide up */
.clients-track { display: flex; gap: 18px; width: max-content; }
.clients-track.run { animation: clientsScroll var(--clients-dur, 150s) linear infinite; will-change: transform; }
.clients-marquee:hover .clients-track.run, .clients-marquee:focus-within .clients-track.run { animation-play-state: paused; }
@keyframes clientsScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.client-logo {
  flex: 0 0 auto; height: 92px; overflow: hidden; display: flex; align-items: center;
  background: #fff; border: 1px solid var(--gray-light); border-radius: var(--r-card, 12px);
}
.client-logo img { height: 100%; width: auto; max-width: none; display: block; }
@media (max-width: 640px) { .client-logo { height: 70px; } .clients-track { gap: 12px; } @keyframes clientsScroll { to { transform: translateX(calc(-50% - 6px)); } } }
@media (prefers-reduced-motion: reduce) {
  .clients-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .clients-track.run { animation: none; }
}

/* ═════════ Marketing layer (08/10/2026) ═════════
   Announcement bar · call-to-action bands · downloads · phone action bar · one-time offer.
   Colours come from the UI-style tokens, with the Classic values as fallbacks. */

/* announcement bar: sits above the navbar while shown */
.promo-bar { display: none; }
body.has-promo .promo-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1002; height: 40px; padding: 0 44px 0 16px;
  background: var(--btn-bg, linear-gradient(135deg, var(--gold), #b8860b)); color: var(--on-pri, var(--navy));
  font-size: 13px; font-weight: 600; box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.promo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.promo-cta {
  flex-shrink: 0; font-weight: 800; font-size: 12.5px; padding: 5px 13px; border-radius: 999px;
  background: var(--on-pri, var(--navy)); color: var(--pri, #fff); transition: var(--tr);
}
.promo-cta:hover { transform: translateY(-1px); filter: brightness(1.15); }
.promo-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; font-size: 20px; line-height: 1; color: inherit; opacity: 0.75; border-radius: 6px; }
.promo-close:hover { opacity: 1; background: rgba(0,0,0,0.10); }
body.has-promo .navbar { top: 40px; }
@media (max-width: 640px) { body.has-promo .promo-bar { font-size: 12px; gap: 10px; padding-left: 12px; } }

/* hero: third action */
.hero-brochure svg { flex-shrink: 0; }

/* call-to-action bands */
.cta-band { padding: 46px 0; background: var(--feat-bg, linear-gradient(135deg, #0D1B3E 0%, #1B2A6B 100%)); position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--btn-bg, linear-gradient(to bottom, var(--gold), #b8860b)); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band-title { font-family: var(--ff-head); font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; line-height: 1.15; color: var(--feat-ink, #fff); }
.cta-band-text { margin-top: 6px; font-size: 14.5px; line-height: 1.6; max-width: 620px; color: var(--feat-text, rgba(255,255,255,0.82)); }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,0.50) !important; color: #fff !important; }
.cta-band .btn-ghost:hover { border-color: #fff !important; background: rgba(255,255,255,0.10); }
html[data-ui="arctic"] .cta-band .btn-primary { background: #FFFFFF; color: #1E3A8A; box-shadow: none; }

/* downloads */
.downloads-section { background: var(--off-white); }
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; }
.dl-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 20px;
  background: var(--card, #fff); border: 1px solid var(--gray-light); border-radius: var(--r-card, 14px); transition: var(--tr);
}
.dl-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.dl-thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; border: 1px solid var(--gray-light); box-shadow: 0 6px 18px rgba(13,27,62,0.14); background: #fff; }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.6s cubic-bezier(.2,.6,.2,1); }
.dl-card:hover .dl-thumb img { transform: scale(1.04); }
.dl-body h3 { font-family: var(--ff-head); font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.dl-body p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--gray-text); }
.dl-meta { margin: 10px 0 14px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--gray-text); }
.dl-body .btn-primary { padding: 11px 20px; font-size: 13.5px; }

/* phone-width action bar */
.mbar { display: none; }
@media (max-width: 900px) {
  .mbar {
    display: grid; grid-template-columns: 1fr 1.3fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
    background: var(--dk-solid, #080F24); border-top: 1px solid rgba(255,255,255,0.14); box-shadow: 0 -4px 18px rgba(0,0,0,0.28);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; font-size: 13.5px; font-weight: 700; color: #fff; }
  .mbar a.mbar-main { background: var(--btn-bg, linear-gradient(135deg, var(--gold), #b8860b)); color: var(--on-pri, var(--navy)); }
  html[data-ui="arctic"] .mbar { background: #0F172A; }
  body { padding-bottom: 54px; }
  .sc-fab { bottom: 70px !important; }
  .dl-grid { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) { .dl-card { grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; } .dl-body h3 { font-size: 17px; } }

/* one-time offer */
.lead-pop[hidden] { display: none; }
.lead-pop { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,10,22,0.62); animation: leadFade 0.25s ease; }
@keyframes leadFade { from { opacity: 0; } to { opacity: 1; } }
.lead-pop-card { position: relative; width: 100%; max-width: 440px; padding: 30px 28px 26px; background: #fff; border-radius: var(--r-card, 16px); box-shadow: 0 30px 80px rgba(0,0,0,0.45); border-top: 5px solid var(--pri-l, var(--gold)); }
.lead-pop-card h3 { font-family: var(--ff-head); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--navy); padding-right: 24px; }
.lead-pop-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--gray-text); }
.lead-pop-actions { margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lead-pop-link { font-size: 14px; font-weight: 700; color: var(--link, #005FA3); }
.lead-pop-link:hover { text-decoration: underline; }
.lead-pop-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; font-size: 24px; line-height: 1; color: var(--gray-text); border-radius: 8px; }
.lead-pop-close:hover { background: var(--off-white); color: var(--navy); }

/* ═════════ Digital laboratory + Pharma sections (08/10/2026) ═════════ */
.pharma-section { background: var(--off-white); }
.digital-section .section-desc, .pharma-section .section-desc { max-width: 720px; }
.dg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.dg-chip {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; background: var(--navy); color: #fff;
}
/* the record's journey, one line */
.dg-flow { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0 0 34px; padding: 0; counter-reset: none; }
.dg-flow li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 0 8px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--navy);
}
.dg-flow li span {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-size: 16px; font-weight: 800;
  background: var(--pri-l, var(--gold)); color: var(--on-pri-l, var(--navy)); box-shadow: 0 0 0 5px var(--bg, #fff);
}
.dg-flow li + li::before { content: ''; position: absolute; top: 18px; right: 50%; width: 100%; height: 2px; background: var(--gray-light); }
.dg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dg-grid.dg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dg-card {
  background: var(--card, #fff); border: 1px solid var(--gray-light); border-radius: var(--r-card, 14px);
  padding: 26px 24px; transition: var(--tr); position: relative; overflow: hidden;
}
.dg-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--tr);
  background: var(--bar, linear-gradient(90deg, var(--gold), var(--accent)));
}
.dg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dg-card:hover::after { transform: scaleX(1); }
.dg-ico {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  background: var(--chip, rgba(212,175,55,0.12)); color: var(--tag, #7A5F0A);
}
.dg-ico svg { width: 24px; height: 24px; }
.dg-card h3 { font-family: var(--ff-head); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--navy); margin-bottom: 7px; }
.dg-card p { font-size: 13.5px; line-height: 1.65; color: var(--gray-text); }
.dg-actions { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.dg-link { font-size: 14px; font-weight: 700; color: var(--link, #005FA3); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.dg-link:hover { border-bottom-color: currentColor; }
@media (max-width: 1000px) { .dg-grid, .dg-grid.dg-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .dg-flow { grid-template-columns: 1fr; gap: 12px; max-width: 320px; margin-left: auto; margin-right: auto; }
  .dg-flow li { flex-direction: row; text-align: left; padding: 0; gap: 12px; }
  .dg-flow li + li::before { top: -12px; left: 18px; right: auto; width: 2px; height: 12px; }
}
@media (max-width: 560px) { .dg-grid, .dg-grid.dg-grid-4 { grid-template-columns: 1fr; } }

/* ═════════ Testimonials: cards scrolling right to left (09/10/2026) ═════════
   Same motion as the customer logos. Hover pauses the line, lifts the card under
   the pointer and lets the others fall back. With too few cards to fill the row
   they simply sit centred, with no scrolling and no repeats. */
.testimonials-section { background: var(--off-white); overflow: hidden; }
.testimonials-section[hidden] { display: none; }
.tm-marquee {
  position: relative; overflow: hidden; padding: 14px 0 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tm-track { display: flex; gap: 22px; width: max-content; align-items: stretch; }
.tm-track.still { width: auto; justify-content: center; flex-wrap: wrap; padding: 0 24px; }
.tm-marquee.still { -webkit-mask-image: none; mask-image: none; }
.tm-track.run { animation: tmScroll var(--tm-dur, 60s) linear infinite; will-change: transform; }
.tm-marquee:hover .tm-track.run, .tm-marquee:focus-within .tm-track.run { animation-play-state: paused; }
@keyframes tmScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }
.tm-card {
  position: relative; flex: 0 0 auto; width: 370px; max-width: calc(100vw - 48px); margin: 0;
  display: flex; flex-direction: column; gap: 18px; padding: 30px 26px 24px;
  background: var(--card, #fff); border: 1px solid var(--gray-light); border-radius: var(--r-card, 16px);
  box-shadow: 0 2px 10px rgba(13,27,62,0.05);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, border-color 0.3s ease, opacity 0.35s ease;
}
.tm-card::before {                                         /* accent line that draws in on hover */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--bar, linear-gradient(90deg, var(--gold), var(--accent))); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease;
}
.tm-mark {                                                 /* the big opening quote */
  position: absolute; top: 12px; right: 22px; font-family: Georgia, 'Times New Roman', serif; font-size: 76px; line-height: 1;
  color: var(--pri-l, var(--gold)); opacity: 0.22; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.tm-quote { flex: 1; font-size: 14.5px; line-height: 1.72; color: var(--dark-text); }
.tm-who { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--gray-light); }
.tm-photo {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--off-white);
  box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--gray-light); transition: box-shadow 0.35s ease, transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-name { font-family: var(--ff-head); font-size: 16.5px; font-weight: 700; line-height: 1.2; color: var(--navy); }
.tm-role { font-size: 12.5px; line-height: 1.4; color: var(--gray-text); margin-top: 2px; }
.tm-sample {
  position: absolute; top: 14px; left: 18px; font-family: var(--ff-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--navy); color: #fff;
}
.tm-card.is-sample { padding-top: 46px; }
.tm-card:hover {
  transform: translateY(-8px); border-color: transparent;
  box-shadow: 0 22px 48px rgba(13,27,62,0.16), 0 0 0 1px var(--tag-line, rgba(212,175,55,0.45));
}
.tm-card:hover::before { transform: scaleX(1); }
.tm-card:hover .tm-mark { opacity: 0.5; transform: translateY(-4px) scale(1.08); }
.tm-card:hover .tm-photo { transform: scale(1.07); box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--pri-l, var(--gold)); }
.tm-track:hover .tm-card:not(:hover) { opacity: 0.55; }
@media (max-width: 640px) { .tm-card { width: 300px; padding: 26px 20px 20px; } .tm-track { gap: 14px; } @keyframes tmScroll { to { transform: translateX(calc(-50% - 7px)); } } }
@media (prefers-reduced-motion: reduce) {
  .tm-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tm-track.run { animation: none; }
  .tm-card:hover { transform: none; }
}

/* ── About (second section, 14/10/2026) ───────────────────────
   The company profile paragraphs; shown in full (no Read more). The Belz
   seal that sat in the hero's right column (14/10/2026) was removed the
   same day at management's request — the dial is back. */
.about-desc p { margin: 0 0 12px; }
.about-desc p:last-child { margin-bottom: 0; }
.about-desc .about-leader strong { font-weight: 700; }
/* Company profile band (14/10/2026): text and the laboratory-front photo
   side by side across the full container; stacked on narrow screens. The
   photo is image key about-front.jpg (a placeholder until one is uploaded). */
.about-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.about-intro .section-desc { max-width: none; }
.about-front {
  margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3;
  background: #0A1A3F; box-shadow: 0 24px 60px rgba(8,17,44,0.18);
}
.about-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Product photos shown whole (14/10/2026) ──────────────────
   The frame used to crop every product shot to a 216px strip and darken
   its lower half, so most of each instrument was cut off. Now the whole
   photograph is shown (contain) in a 4:3 frame, at most 420px tall; any
   space around a portrait or odd-shaped shot is filled with a blurred copy
   of the same picture (--pm-bg, set by initProductBackdrops in main.js).
   No dark fade and no hover zoom, which clipped the edges. */
.product-media {
  height: auto; aspect-ratio: 4 / 3; max-height: 420px;
  background: #E6E4E2; isolation: isolate;
}
.product-media::before {
  content: ''; position: absolute; inset: -30px; z-index: 0;
  background: var(--pm-bg, none) center / cover no-repeat;
  filter: blur(24px) saturate(1.05); opacity: 0.9;
}
.product-media img { position: relative; z-index: 1; object-fit: contain; }
.product-card:hover .product-media img { transform: none; }
.product-media::after { display: none; }

/* ── Hero: measuring-scale that follows the scroll (19/10/2026) ──────────
   A ruler along the bottom of the hero — fine ticks every 14 px, mid ticks
   every 70 px, tall ticks every 140 px. It slides as the visitor scrolls:
   main.js initHeroRuler() eases --rx toward -scrollY. Pure CSS ticks (three
   repeating layers + a base line) in the hero's text colour, so every UI style
   keeps contrast. Sits under the hero text and buttons and never catches clicks. */
.hero-ruler {
  position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: 1;
  pointer-events: none; color: #fff; opacity: .5;
  background-image:
    linear-gradient(90deg, currentColor 1.5px, transparent 1.5px),
    linear-gradient(90deg, currentColor 1.5px, transparent 1.5px),
    linear-gradient(90deg, currentColor 1.5px, transparent 1.5px),
    linear-gradient(currentColor, currentColor);
  background-size: 140px 210px, 70px 84px, 14px 18px, 100% 1.5px;
  background-repeat: repeat-x;
  background-position: var(--rx, 0px) 100%, var(--rx, 0px) 100%, var(--rx, 0px) 100%, 0 100%;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
          mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}
html.ui-t .hero-ruler { color: var(--hero-ink, #fff); }
@media (max-width: 760px) {
  .hero-ruler { height: 120px; background-size: 112px 120px, 56px 50px, 11.2px 12px, 100% 1.5px; }
}

/* Hero background video (19/10/2026): at full strength the navy overlay hid
   the video's motion completely. While a video plays the overlay is thinned —
   still darkest on the left, behind the headline. */
.hero-photo.has-video::after { opacity: .62; }