/* ==========================================================================
   Static company pages (about, factories, show-room, certifications, contact).
   Shares the homepage design system (sections, media-section, features,
   certs, stats, factory-gallery, cta-band). This file only adds the
   page-level rhythm + a few company-specific primitives.
   ========================================================================== */

/* ---------- Page wrapper ---------- */
/* The wrapper is now a plain container — rhythm is owned by the inner
   `.section` blocks (same as the homepage). We zero out default Storefront
   block spacing so sections sit flush. */
.company-page-wrap { padding-block: 0; }
.company-page-wrap > .company-page { display: block; }
.company-page-wrap h2,
.company-page-wrap h3 { letter-spacing: -0.015em; }
.company-page-wrap img { max-width: 100%; height: auto; }

/* Reset default link colour inside company pages to match design system.
   `.btn` is excluded so button text/background tokens set in components.css
   are not overridden (this rule has higher specificity than a single class). */
.company-page-wrap a { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.company-page-wrap a:hover { color: var(--color-accent); }
.company-page-wrap .btn { color: var(--color-accent-contrast); text-decoration: none; }
.company-page-wrap .btn--inverse-ghost { color: #fff; }
.company-page-wrap .btn--ghost { color: var(--color-text); }
.company-page-wrap .btn--link { color: var(--color-accent-deep); }
.company-page-wrap .btn--cta-solid { color: var(--color-accent-deep); }
.company-page-wrap .btn--cta-solid:hover { color: #fff; }
/* Cards / nav inside cta etc. */
.company-page-wrap .certs__card,
.company-page-wrap .factory-gallery a,
.company-page-wrap .company-tour-card a { text-decoration: none; }

/* ---------- Media section body (split image + text) ---------- */
/* Two-up image + text sections (about intro, factories, show-room). */
.media-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
@media (max-width: 900px) { .media-section__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.media-section__grid--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .media-section__grid--reverse > :first-child { order: 0; } }
.media-section__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.media-section__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.media-section__media:hover img { transform: scale(1.04); }
/* Parallax layering: when JS drives the img with translate3d, overscale it
   ~7% so the parallax drift never exposes an empty edge. The inline
   transform from parallax.js overrides the hover scale (the drift reads as
   the more "premium" cue), so we drop the hover scale on parallax targets. */
.media-section__media[data-parallax] img { transform: scale(1.07); will-change: transform; }
.media-section__media[data-parallax]:hover img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .media-section__media[data-parallax] img { transform: none; will-change: auto; }
}

.company-page-wrap .media-section__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
.company-page-wrap .media-section__body p { font-size: var(--fs-md); color: var(--color-text-soft); line-height: 1.8; }
.company-page-wrap .media-section__body .section-title { margin: 0; }

/* ---------- Bullet list (factories / strength) ---------- */
.company-bullets { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.company-bullets li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--fs-md); color: var(--color-text-soft); line-height: 1.7;
}
.company-bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(3, 105, 161, 0.10); color: var(--color-accent-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23075985' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23075985' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ==========================================================================
   Development history — Z-shaped alternating timeline.
   A central luminous spine; cards alternate left/right; a scroll-bound
   progress bar fills the spine as the reader descends the journey. Below
   900px it gracefully collapses into a single vertical track on the left.
   ========================================================================== */
.kd-timeline { position: relative; margin-top: var(--space-4); }

/* Year quick-jump rail. */
.kd-timeline__rail {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-7);
  /* Sticky bar styling — applied when .is-stuck is toggled by JS.
     The bar lives below the height-animating site header; its `top`
     is set inline by JS to track the current header height. */
  z-index: 5;
}
.kd-timeline__rail-placeholder { width: 100%; margin-bottom: var(--space-7); }
.kd-timeline__rail.is-stuck {
  position: fixed; left: 0; right: 0;
  margin: 0;
  padding: var(--space-2) var(--container-gutter);
  background: var(--color-surface-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.kd-timeline__chip {
  display: inline-flex; align-items: center;
  min-width: 3.5rem; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: 0.02em;
  color: var(--color-text-soft);
  text-decoration: none !important;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.kd-timeline__chip:hover {
  color: var(--color-accent-deep);
  border-color: var(--color-accent-soft);
  transform: translateY(-2px);
}
.kd-timeline__chip.is-active {
  color: #fff;
  background: var(--gradient-cta);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

/* Track wrapper around all items. */
.kd-timeline__track {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
/* The static, full-height luminous spine sits behind the items. */
.kd-timeline__track::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(3, 105, 161, 0.06) 0%,
    var(--color-border-strong) 8%,
    var(--color-border-strong) 92%,
    rgba(3, 105, 161, 0.06) 100%);
  border-radius: 2px;
}
/* Scroll-bound progress overlay that lights the spine top→bottom. */
.kd-timeline__progress {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 4px; transform: translateX(-50%);
  background: var(--color-border);
  border-radius: 4px; overflow: hidden;
  pointer-events: none;
}
.kd-timeline__progress-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--color-accent-soft), var(--color-accent-deep));
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.55);
  border-radius: 4px;
  transition: height 80ms linear;
}

/* Each alternating row. */
.kd-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: start;
  margin-bottom: var(--space-6);
}
.kd-timeline__item:last-child { margin-bottom: 0; }

/* The node sits on the spine. */
.kd-timeline__node {
  grid-column: 2; justify-self: center;
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  color: var(--color-accent-deep);
  box-shadow: 0 0 0 6px var(--color-bg), var(--shadow-sm);
  z-index: 2;
}
.kd-timeline__node-inner { display: grid; place-items: center; }
.kd-timeline__node-pulse {
  position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
  animation: kd-timeline-pulse 2.6s var(--ease-out) infinite;
}
@keyframes kd-timeline-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.40); }
  70%  { box-shadow: 0 0 0 14px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}
.kd-timeline.is-visible .kd-timeline__node-pulse { animation-play-state: running; }
.kd-timeline:not(.is-visible) .kd-timeline__node-pulse { animation: none; }

/* Card on the correct half. */
.kd-timeline__card {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.kd-timeline__card::before {
  /* Connector tick from card to spine. */
  content: ""; position: absolute; top: 26px;
  width: 18px; height: 2px;
  background: var(--color-border-strong);
}
.kd-timeline__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-soft);
}
.kd-timeline__item--left .kd-timeline__card  { grid-column: 1; }
.kd-timeline__item--right .kd-timeline__card { grid-column: 3; }
.kd-timeline__item--left .kd-timeline__card::before  { right: -18px; }
.kd-timeline__item--right .kd-timeline__card::before { left: -18px; }

/* Giant year label anchored to the spine side of its first row. */
.kd-timeline__year {
  position: absolute; top: -6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-border-strong);
  pointer-events: none; z-index: 1;
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.kd-timeline__item--left.is-year-first .kd-timeline__year  { right: calc(50% + 44px); text-align: right; }
.kd-timeline__item--right.is-year-first .kd-timeline__year { left: calc(50% + 44px); }

/* Card content. */
.kd-timeline__tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(3, 105, 161, 0.08); color: var(--color-accent-deep);
}
.kd-timeline__tag--founding    { background: rgba(3, 105, 161, 0.10); color: #075985; }
.kd-timeline__tag--production  { background: rgba(22, 163, 74, 0.10);  color: #15803d; }
.kd-timeline__tag--innovation  { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.kd-timeline__tag--partnership { background: rgba(37, 99, 235, 0.10);  color: #1d4ed8; }
.kd-timeline__tag--industry    { background: rgba(13, 148, 136, 0.10); color: #0f766e; }
.kd-timeline__tag--credential  { background: rgba(139, 92, 246, 0.10); color: #6d28d9; }
.kd-timeline__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); line-height: var(--lh-tight);
  color: var(--color-text);
}
.kd-timeline__desc {
  margin: 0;
  font-size: var(--fs-sm); line-height: 1.75;
  color: var(--color-text-soft);
}
.kd-timeline__index {
  position: absolute; right: var(--space-4); bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted); opacity: 0.7;
}

/* Scroll-reveal: cards glide in from their own side. */
.kd-timeline__item[data-reveal]:not(.is-visible) .kd-timeline__card { opacity: 0; }
.kd-timeline__item--left[data-reveal]:not(.is-visible) .kd-timeline__card  { transform: translateX(-32px); }
.kd-timeline__item--right[data-reveal]:not(.is-visible) .kd-timeline__card { transform: translateX(32px); }
.kd-timeline__item[data-reveal]:not(.is-visible) .kd-timeline__node { opacity: 0; transform: scale(0.4); }
.kd-timeline__item[data-reveal]:not(.is-visible) .kd-timeline__year { opacity: 0; }

/* ---------- Responsive: collapse into a single left track ---------- */
@media (max-width: 900px) {
  .kd-timeline__rail { justify-content: flex-start; margin-bottom: var(--space-6); }
  .kd-timeline__track::before { left: 19px; transform: none; }
  .kd-timeline__progress { left: 18px; transform: none; }
  .kd-timeline__item {
    grid-template-columns: 40px 1fr;
    margin-bottom: var(--space-5);
  }
  .kd-timeline__node {
    grid-column: 1; width: 40px; height: 40px; justify-self: start;
  }
  .kd-timeline__card { grid-column: 2 !important; }
  .kd-timeline__card::before { display: none; }
  .kd-timeline__year {
    position: relative; top: auto; left: auto !important; right: auto !important;
    display: block; margin-bottom: var(--space-1);
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
  .kd-timeline__item--left.is-year-first .kd-timeline__year,
  .kd-timeline__item--right.is-year-first .kd-timeline__year { text-align: left; }
  .kd-timeline__item--right[data-reveal]:not(.is-visible) .kd-timeline__card { transform: translateX(24px); }
  .kd-timeline__item--left[data-reveal]:not(.is-visible) .kd-timeline__card { transform: translateX(-24px); }
}
@media (max-width: 480px) {
  .kd-timeline__item { grid-template-columns: 32px 1fr; }
  .kd-timeline__track::before { left: 15px; }
  .kd-timeline__progress { left: 14px; }
  .kd-timeline__node { width: 32px; height: 32px; }
  .kd-timeline__node-inner svg { width: 16px; height: 16px; }
  .kd-timeline__card { padding: var(--space-4); }
  .kd-timeline__index { display: none; }
}

/* Respect reduced motion: disable pulse + glide. */
@media (prefers-reduced-motion: reduce) {
  .kd-timeline__node-pulse { animation: none; }
  .kd-timeline__item[data-reveal]:not(.is-visible) .kd-timeline__card,
  .kd-timeline__item--left[data-reveal]:not(.is-visible) .kd-timeline__card,
  .kd-timeline__item--right[data-reveal]:not(.is-visible) .kd-timeline__card { transform: none; opacity: 1; }
  .kd-timeline__item[data-reveal]:not(.is-visible) .kd-timeline__node,
  .kd-timeline__item[data-reveal]:not(.is-visible) .kd-timeline__year { opacity: 1; transform: none; }
  .kd-timeline__progress-fill { transition: none; }
}

/* ---------- 3D showroom tour card ---------- */
.company-tour-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 16 / 7;
}
.company-tour-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.company-tour-card:hover img { transform: scale(1.04); }
.company-tour-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  color: #fff;
  background: linear-gradient(180deg, rgba(11,13,18,0.15) 0%, rgba(11,13,18,0.6) 100%);
}
.company-tour-card__overlay svg { color: #fff; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); transition: transform var(--duration-base) var(--ease-out); }
.company-tour-card:hover .company-tour-card__overlay svg { transform: scale(1.1); }
.company-tour-card__overlay strong {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-sm);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
@media (max-width: 700px) { .company-tour-card { aspect-ratio: 4 / 3; } }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.contact-card h2,
.contact-card__title { font-size: var(--fs-xl); margin-block: var(--space-2) var(--space-4); color: var(--color-text); }
.contact-card__eyebrow { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-deep); }
.contact-card__list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.contact-card__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-elev); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-accent-deep); }
.contact-card__icon::before { content: ""; width: 20px; height: 20px; background-color: currentColor; mask: var(--contact-icon) center / contain no-repeat; -webkit-mask: var(--contact-icon) center / contain no-repeat; }
.contact-card__icon--email { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v12H4V6Zm8 7 8-5H4l8 5Zm0 2L6 11.3V16h12v-4.7L12 15Z'/%3E%3C/svg%3E"); }
.contact-card__icon--phone { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.7 21.4 2.6 13.3 2.6 3.4c0-.7.5-1.2 1.2-1.2h3.5c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .9-.3 1.2l-2.2 2.2Z'/%3E%3C/svg%3E"); }
.contact-card__icon--location { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E"); }
.contact-card__label { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-card__value { display: inline-block; font-size: var(--fs-md); color: var(--color-text); line-height: 1.7; }
.contact-card a.contact-card__value { text-decoration: none; }
.contact-card a.contact-card__value:hover { color: var(--color-accent-deep); }
.contact-map { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.contact-card--map { display: flex; flex-direction: column; }
.contact-card--map .contact-map { flex: 1; min-height: 320px; }
.company-contact-eyebrow { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-deep); }
.company-contact-title { font-size: var(--fs-xl); margin-block: var(--space-2) var(--space-4); color: var(--color-text); }

/* ===== Inquiry form (contact page) ===== */
.kd-inquiry { padding-block: var(--space-7); }
.kd-inquiry__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) { .kd-inquiry__grid { grid-template-columns: 1fr; } }
.kd-inquiry__intro { padding-top: var(--space-2); }
.kd-inquiry__intro .section-title { margin-block: var(--space-2) var(--space-3); }
.kd-inquiry__intro .section-subtitle { color: var(--color-text-muted); max-width: 40ch; line-height: 1.7; }

.kd-inquiry-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.kd-inquiry-form__row { display: flex; flex-direction: column; gap: var(--space-4); }
.kd-inquiry-form__row--double { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 620px) { .kd-inquiry-form__row--double { grid-template-columns: 1fr; } }
.kd-inquiry-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.kd-inquiry-form__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text);
}
.kd-inquiry-form__req { color: var(--color-accent); }
.kd-inquiry-form__input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kd-inquiry-form__input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.kd-inquiry-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.16);
  background: var(--color-surface);
}
.kd-inquiry-form__textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.kd-inquiry-form__actions { margin-top: var(--space-1); }
.kd-inquiry-form__submit { cursor: pointer; }

.kd-inquiry-form.is-submitting { opacity: 0.85; pointer-events: none; }
.kd-inquiry-form__feedback {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.kd-inquiry-form__feedback.is-success { background: rgba(16, 185, 129, 0.12); color: #047857; border: 1px solid rgba(16, 185, 129, 0.3); }
.kd-inquiry-form__feedback.is-error { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Honeypot — hidden from real users, visible to most bots. */
.kd-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   R&D & Testing Center (lab) page — page-specific primitives only.
   Reuses .media-section, .stats, .features, .company-bullets,
   .factory-gallery and .cta-band from the homepage design system.
   ========================================================================== */

/* Hero split — give the lab intro a slightly larger title. */
.company-page-wrap .lab-hero .section-title { font-size: var(--fs-3xl); }
@media (max-width: 900px) { .company-page-wrap .lab-hero .section-title { font-size: var(--fs-2xl); } }

/* Bulleted capability list with an inline icon chip. The base .company-bullets
   uses a ::before mask; this variant swaps in a colored icon for the hero. */
.company-page-wrap .lab-hero .company-bullets li { padding-left: 0; }
.company-page-wrap .lab-hero .company-bullets li::before { content: none; }
.lab-bullet__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-md);
  background: rgba(3, 105, 161, 0.10);
  color: var(--color-accent-deep);
}
.lab-bullet__icon svg { width: 20px; height: 20px; }

/* Stats strip supporting note under the .stats grid. */
.lab-stats-note {
  margin: var(--space-5) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* Three-step closed-loop verification timeline.
   Rendered inside a reversed .media-section__grid body, so it stays compact
   and aligns to the body column rhythm. */
.lab-process { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.lab-process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.lab-process__step:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.lab-process__num {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
}
.lab-process__step h3 { font-size: var(--fs-md); margin: 0 0 2px; color: var(--color-text); }
.lab-process__step h3 small {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.lab-process__step p { font-size: var(--fs-sm); color: var(--color-text-soft); margin: 0; line-height: 1.6; }
@media (max-width: 600px) {
  .lab-process__step { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ==========================================================================
   Strength highlights — three finished marketing banners (technology edge,
   tempered safety, visualized digital platform). Each banner embeds its own
   copy, so the image is shown with object-fit: contain (never cropped) inside
   a neutral media frame, with a caption block beneath. All three banners share
   a portrait aspect (~4:5), so the media frame locks to that ratio and every
   card renders at the same height regardless of source pixel dimensions.
   ========================================================================== */
.strength-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .strength-highlights { grid-template-columns: 1fr; }
}
.strength-highlight {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.strength-highlight:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Media frame: a plain white plate so the banner copy stays legible regardless
   of page background. The locked aspect-ratio keeps the three portrait banners
   vertically aligned; object-fit: contain keeps the whole banner visible. */
.strength-highlight__media {
  background: #fff;
  padding: var(--space-3);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden; /* clip the parallax drift inside the white frame */
}
.strength-highlight__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* Parallax: banner images embed their own copy, so we keep object-fit:
     contain (never crop). The drift is tiny (±2.5%) so a 5% overscale
     safely masks the edge without clipping any embedded text. */
  transform: scale(1.05);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .strength-highlight__img { transform: none; will-change: auto; }
}
.strength-highlight__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.strength-highlight__title { font-size: var(--fs-lg); margin: 0; color: var(--color-text); }
.strength-highlight__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-deep);
  margin: 0;
}
.strength-highlight__desc { font-size: var(--fs-sm); color: var(--color-text-soft); line-height: 1.7; margin: 0; }

/* ==========================================================================
   Legal pages (privacy-policy, terms-of-service)
   ========================================================================== */
.company-legal .section-head { text-align: left; max-width: 46rem; }
.company-legal .section-head .section-title { font-size: clamp(2rem, 4vw, 2.75rem); }

.legal-content {
  max-width: 46rem;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text-soft);
}
.legal-content h2 {
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin: 2.5em 0 0.6em;
  padding-top: 1.25em;
  border-top: 1px solid var(--color-border);
}
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content p { margin: 0 0 1em; }
.legal-content ul {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
  list-style: none;
}
.legal-content ul li { position: relative; margin-bottom: 0.5em; }
.legal-content ul li::before {
  content: "";
  position: absolute;
  left: -1.4em;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal-content strong { color: var(--color-text); font-weight: 600; }