/* Design tokens — Photonics Open Projects
   Source: official brand guideline (charte graphique, lestudio.bzh) —
   cream/navy base, blue/red/gold/teal/orange accent palette from the POP! logo,
   Avenir Next Bold for display type (falls back to Poppins where unavailable). */

:root {
  --pop-ink: #182743;
  --pop-ink-soft: #5A6B85;
  --pop-surface: #FFFEF8;
  --pop-surface-alt: #F5F0E3;
  --pop-border: #E7E0CE;

  --pop-accent: #0783C6;      /* brand blue — primary accent, PRO-PIX */
  --pop-accent-soft: #E3F1FA;
  --pop-orange: #EF9338;      /* ONE-PIX accent */
  --pop-red: #E50040;
  --pop-gold: #F6C11D;
  --pop-teal: #00A899;

  /* Deepened from the original #182743 — reads as more premium / "very
     deep" per the About-page redesign brief, still clearly navy rather
     than flat black. Shared by hero, the new dark "moment" sections, the
     CTA band and the footer across the whole site (one dark, not three
     competing shades), so this one change reaches every page — a
     deliberate, considered shift, not scope creep: still a navy, just a
     richer one, and it only deepens what was already the site's dark tone. */
  --pop-hero-bg: #0E1B33;
  --pop-hero-text: #FFFEF8;
  --pop-hero-text-soft: #B7C2D6;
  --pop-glow:
    radial-gradient(circle at 30% 0%, rgba(7,131,198,0.35), rgba(24,39,67,0) 55%),
    radial-gradient(circle at 75% 15%, rgba(246,193,29,0.18), rgba(24,39,67,0) 50%),
    radial-gradient(circle at 55% 40%, rgba(0,168,153,0.16), rgba(24,39,67,0) 55%);

  /* Second, very subtle accent: an electric "photon" cyan. Reserved for
     dark surfaces only (glows, hairlines, icon strokes) — never as body
     text on the cream surface, where it would not hold contrast. */
  --pop-accent-cyan: #4FD8FF;
  --pop-accent-cyan-soft: rgba(79,216,255,0.16);

  --pop-radius: 16px;
  --pop-radius-sm: 10px;
  --pop-container: 1180px;

  --pop-font-head: 'Avenir Next', 'Poppins', sans-serif;
  --pop-font-body: 'Inter', sans-serif;
  --pop-font-serif: 'Source Serif 4', 'Georgia', serif; /* rare editorial accents only */

  /* Fluid type scale — clamp(min, preferred, max), same ramp every section
     opts into via .pop-h1/.pop-h2/.pop-eyebrow rather than fixed px per
     widget, so headings scale smoothly between the 480px and 1440px+
     breakpoints named in the brief instead of jumping at fixed points. */
  --pop-size-h1: clamp(2.4rem, 1.7rem + 3.2vw, 4.5rem);
  --pop-size-h2: clamp(1.7rem, 1.45rem + 1.1vw, 2.35rem);
  --pop-size-lede: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);

  /* Section rhythm system (2026-08, About-page redesign): SECTION PADDING
     (breathing room a section needs for its own heading/content) is kept
     separate from SECTION GAP (the transition zone to the next section) —
     collapsing both into one symmetric top+bottom value was what produced
     up to ~208px of dead space between two sections. Top keeps a real
     padding; bottom is deliberately much smaller, since the next section's
     own top padding already supplies the visual separation — stacking both
     in full was the redundancy. -major is for hero/dark "moment"/CTA
     sections only, where a bit more top weight is wanted. */
  --pop-space-section: clamp(2.75rem, 2.15rem + 2.6vw, 4.5rem);
  --pop-space-gap: clamp(1rem, 0.72rem + 1.2vw, 2.25rem);
  --pop-space-major: clamp(3.5rem, 2.7rem + 3.5vw, 5.5rem);
}

html { scroll-behavior: smooth; }

body {
  color: var(--pop-ink);
  background: var(--pop-surface);
  font-family: var(--pop-font-body);
}

/* Anchor targets land below the sticky nav instead of underneath it. */
[id] { scroll-margin-top: 96px; }

.elementor-heading-title { text-wrap: balance; }
/* H1s only had an explicit line-height on mobile; on desktop they fell back
   to the browser's tight "normal" default, which visually overlaps as soon
   as a long title (e.g. the homepage hero) wraps to more than one line. */
h1.elementor-heading-title { line-height: 1.28; }
p { line-height: 1.65; }

a { transition: color .15s ease, opacity .15s ease; }

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--pop-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.pop-nav a:hover,
.pop-footer a:hover { opacity: .7; }

.elementor-button {
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.elementor-button:hover {
  transform: translateY(-1px);
}

.pop-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.pop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(24,39,67,0.10);
}

.pop-hero-glow {
  position: relative;
  overflow: hidden;
}
.pop-hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pop-glow);
  z-index: 0;
  pointer-events: none;
}
.pop-hero-glow > .e-con-inner {
  position: relative;
  z-index: 1;
}

.pop-nav {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255,254,248,0.88);
  border-bottom: 1px solid var(--pop-border);
  box-shadow: 0 0 0 rgba(24,39,67,0);
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* .pop-js--scrolled is toggled in functions.php's footer script, past a
   small scroll threshold - a barely-there lift so the bar reads as "above"
   the page once content is moving under it, not a hard line from the start. */
.pop-js--scrolled .pop-nav {
  box-shadow: 0 8px 24px -12px rgba(24,39,67,.18);
  border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .pop-nav { transition: none; }
}
/* Inner nav containers (brand group, link group, product-badge groups) must
   hug their content: Elementor containers default to width 100% (--width),
   which stretches the badge groups and crushes/overflows the other links. */
.pop-nav .e-con {
  width: auto !important;
  flex-shrink: 0;
}
.pop-nav .elementor-heading-title,
.pop-nav .elementor-button {
  white-space: nowrap;
}

/* Desktop: bandeau plus fin que le logo (le builder Elementor met 30px de
   padding haut/bas, soit ~180px de bandeau pour un logo de 120px). On
   resserre à 128px et on laisse le logo légèrement déborder au lieu d'être
   noyé dans le padding. Desktop only (min-width 1025px, cf. le breakpoint
   1024px ci-dessous) : sous 1024px le bandeau passe sur 2 lignes empilées,
   une hauteur fixe casserait ce wrap. */
@media (min-width: 1025px) {
  .pop-nav {
    box-sizing: border-box !important;
    height: 128px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }
}

.pop-footer a { color: var(--pop-ink-soft); text-decoration: none; }
.pop-footer a:hover { color: var(--pop-accent); }

.pop-lang-dropdown {
  position: relative !important;
  font-size: 13px;
  font-weight: 600;
}
.pop-lang-dropdown summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--pop-border);
  color: var(--pop-ink);
  letter-spacing: 0.5px;
}
.pop-lang-dropdown summary::-webkit-details-marker { display: none; }
.pop-lang-dropdown summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--pop-ink-soft);
  border-bottom: 1.5px solid var(--pop-ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.pop-lang-dropdown[open] summary::after {
  transform: rotate(-135deg) translateY(2px);
}
.pop-lang-dropdown summary:hover {
  border-color: var(--pop-accent);
  color: var(--pop-accent);
}
.pop-lang-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px);
  right: 0;
  min-width: 120px;
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(24,39,67,0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 9999 !important;
}
.pop-lang-dropdown-menu a {
  color: var(--pop-ink-soft);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.pop-lang-dropdown-menu a:hover {
  background: var(--pop-surface-alt);
  color: var(--pop-ink);
}
.pop-lang-dropdown-menu a.pop-lang-current {
  color: var(--pop-accent);
  background: var(--pop-accent-soft);
}

.pop-hero-image img {
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,254,248,0.08);
  object-fit: cover;
}

/* Elementor grid containers default to TWO template rows (repeat(2, 1fr)).
   A grid whose items fill only the first row (e.g. 3 cards in 3 columns)
   renders the second row as an equally tall EMPTY band, which showed up as
   "a blank screen" under the Solutions section. Content-sized rows instead. */
.e-grid {
  --e-con-grid-template-rows: auto !important;
}

.pop-card-img {
  overflow: hidden;
}
.pop-card-img img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.pop-card:hover .pop-card-img img {
  transform: scale(1.06);
}
.pop-card-body {
  padding: 28px 28px 32px;
  flex: 1 1 auto;
  justify-content: space-between;
}

/* Each "chapter" section reads as roughly one screen, with the next one
   peeking in at the bottom rather than a big blank gap between sections.
   !important: Elementor's own .e-con base rule sets min-height via a CSS
   custom property that defaults to "initial" and would otherwise win the
   cascade (loads after this stylesheet). */
.pop-section-full {
  min-height: 88vh !important;
}
@media (max-width: 900px) {
  .pop-section-full {
    min-height: 0 !important;
  }
}

/* ---- Responsive layer ----
   Sections are authored desktop-first in Elementor JSON; these rules make
   every page stack cleanly on tablet/phone. !important is required because
   Elementor's generated per-element CSS (custom properties on .e-con) wins
   the cascade over plain class rules (see .pop-section-full note above). */

/* Nav: brand group + link group wrap and centre instead of overflowing. */
@media (max-width: 1024px) {
  .pop-nav {
    flex-wrap: wrap !important;
    row-gap: 14px !important;
    justify-content: center !important;
  }
  .pop-nav > .e-con {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

@media (max-width: 900px) {
  /* Side-by-side rows (hero, image+text) become a single column. */
  .pop-stack-mobile { flex-direction: column !important; }
  .pop-stack-mobile > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Footer: 4 fixed columns reflow into as many as fit. */
  .pop-footer {
    flex-wrap: wrap !important;
    gap: 36px 56px !important;
  }
}

@media (max-width: 767px) {
  h1.elementor-heading-title { font-size: 34px !important; line-height: 1.15 !important; }
  h2.elementor-heading-title { font-size: 26px !important; }
  h3.elementor-heading-title { font-size: 20px !important; }
  .pop-hero-glow { padding: 56px 24px !important; }
  /* Desktop side paddings (40-48px) waste too much of a phone viewport. */
  .e-con.e-parent {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

.pop-figure img {
  border-radius: 14px;
  border: 1px solid var(--pop-border);
}

/* Tutorial steps: number + text on the left (58%), reduced illustrations on
   the right (38%). Widths must live here: the Elementor container "width"
   setting emits no CSS from JSON-built pages (verified in the generated
   post-*.css), so flex children would otherwise share space arbitrarily.
   The .pop-stack-mobile rule above overrides both to 100% under 900px. */
.pop-step-text { width: 58% !important; }
.pop-step-media {
  width: 38% !important;
  flex-shrink: 0;
}

/* Wiki illustrations in the right-hand column of each tutorial step:
   they fill the (already narrow) column and share one frame style. */
.pop-step-figure img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  border: 1px solid var(--pop-border);
}

/* The three assembly GIFs: one horizontal, evenly spaced row of equal-height
   tiles under the step text. Width stays auto so the low-res GIFs (240px tall
   natively) are never blur-stretched; the row wraps on narrow screens. */
.pop-step-gallery img {
  height: 170px !important;
  width: auto !important;
  border-radius: 12px;
  border: 1px solid var(--pop-border);
}
@media (max-width: 767px) {
  .pop-step-gallery img { height: 140px !important; }
}

.pop-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pop-spec-table th, .pop-spec-table td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pop-border);
}
.pop-spec-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pop-ink-soft);
  font-weight: 700;
  background: var(--pop-surface-alt);
}
.pop-spec-table td:first-child {
  color: var(--pop-ink-soft);
  font-weight: 500;
}
.pop-spec-table td:not(:first-child), .pop-spec-table th:not(:first-child) {
  font-variant-numeric: tabular-nums;
}
.pop-spec-table td:not(:first-child) {
  font-family: var(--pop-font-head);
  font-weight: 600;
  color: var(--pop-ink);
  font-size: 14.5px;
}
.pop-spec-table tbody tr:nth-child(even) { background: var(--pop-surface-alt); }
.pop-spec-table tbody tr { transition: background .15s ease; }
.pop-spec-table tbody tr:hover { background: var(--pop-accent-soft); }
.pop-spec-table tr:last-child td {
  border-bottom: none;
}
.pop-spec-wrap {
  overflow-x: auto;
  border: 1px solid var(--pop-border);
  border-radius: 12px;
}
.pop-spec-wrap .pop-spec-table { border: none; }

/* Headline facts row above the full table - same existing .pop-fact-chip
   component used elsewhere (About page), just applied here so the 3-4
   numbers worth scanning first don't require reading the whole table. */
.pop-spec-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.pop-spec-facts .pop-fact-chip { flex: 1 1 150px; }
.pop-spec-facts .pop-fact-value { font-size: 17px; }

/* FAQ accordion: question is a real <button> (keyboard + screen-reader
   accessible via aria-expanded/aria-controls, wired up in functions.php's
   existing footer script, same IIFE pattern as .pop-reveal - no new JS
   file/library). One answer open at a time. max-height transition rather
   than the [hidden] attribute, since [hidden] can't be animated. */
.pop-faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--pop-border);
}
.pop-faq-item:last-child { border-bottom: none; }
.pop-faq-q-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.pop-faq-q-btn:focus-visible {
  outline: 2px solid var(--pop-accent);
  outline-offset: 4px;
}
.pop-faq-q {
  font-weight: 600;
  color: var(--pop-ink);
  font-size: 16px;
  line-height: 1.4;
}
.pop-faq-chevron {
  flex-shrink: 0;
  color: var(--pop-ink-soft);
  transition: transform .2s ease;
}
.pop-faq-item[data-open="true"] .pop-faq-chevron {
  transform: rotate(180deg);
  color: var(--pop-accent);
}
.pop-faq-a-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.pop-faq-item[data-open="true"] .pop-faq-a-wrap {
  max-height: 640px;
}
.pop-faq-a {
  color: var(--pop-ink-soft);
  font-size: 15px;
  line-height: 1.7;
  padding-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .pop-faq-a-wrap, .pop-faq-chevron { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Resource / related-link cards: a labelled, entirely-clickable card  */
/* replacing a stack of button-in-a-pill rows. Secondary in weight to  */
/* .pop-btn-primary - resources/exploration, not the primary CTA.      */
/* ------------------------------------------------------------------ */

.pop-resource-card,
.pop-related-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pop-resource-card {
  padding: 20px 22px;
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius-sm);
}
.pop-resource-card:hover, .pop-resource-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pop-accent);
  box-shadow: 0 16px 32px -8px rgba(24,39,67,0.14);
}
.pop-resource-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pop-resource-content, .pop-related-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pop-resource-eyebrow, .pop-related-eyebrow {
  font-family: var(--pop-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pop-ink-soft);
}
.pop-resource-title, .pop-related-title {
  font-family: var(--pop-font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--pop-ink);
  line-height: 1.35;
}
.pop-resource-arrow, .pop-related-arrow {
  flex-shrink: 0;
  color: var(--pop-ink-soft);
  transition: transform .2s ease, color .2s ease;
}
.pop-resource-card:hover .pop-resource-arrow, .pop-resource-card:focus-visible .pop-resource-arrow,
.pop-related-link:hover .pop-related-arrow, .pop-related-link:focus-visible .pop-related-arrow {
  transform: translateX(4px);
  color: var(--pop-accent);
}
.pop-resource-card:focus-visible, .pop-related-link:focus-visible {
  outline: 2px solid var(--pop-accent);
  outline-offset: 2px;
}
.pop-related-links {
  display: flex;
  flex-direction: column;
}
.pop-related-link {
  padding: 18px 4px;
  border-bottom: 1px solid var(--pop-border);
}
.pop-related-links .pop-related-link:last-child { border-bottom: none; }
@media (max-width: 600px) {
  .pop-resource-card { padding: 16px 18px; gap: 12px; }
  .pop-resource-icon { width: 36px; height: 36px; min-width: 36px; }
}

.pop-legal-section {
  margin-bottom: 32px;
}
.pop-legal-section:last-child {
  margin-bottom: 0;
}
.pop-legal-section h3 {
  font-family: var(--pop-font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--pop-ink);
  margin: 0 0 10px;
}
.pop-legal-section p {
  font-family: var(--pop-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--pop-ink-soft);
  margin: 0 0 12px;
}
.pop-legal-section p:last-child {
  margin-bottom: 0;
}

/* Ambient light pulse behind the hero — a slow, subtle breathing glow rather
   than a static gradient, echoing the "photonics" idea without depending on
   JS (Elementor's own entrance-animation JS was unreliable in this setup). */
@media (prefers-reduced-motion: no-preference) {
  .pop-hero-glow::before {
    animation: pop-pulse 9s ease-in-out infinite;
  }
}
@keyframes pop-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .82; transform: scale(1.06); }
}

/* Supporter/partner logo strip: mixed source files (photos, screenshots,
   transparent PNGs) are normalised to one visual weight — same height,
   greyscale at rest, full colour on hover. */
.pop-logo-strip { flex-wrap: wrap; }
.pop-logo-strip img {
  height: 56px !important;
  width: auto !important;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.pop-logo-strip img:hover {
  filter: none;
  opacity: 1;
}

/* Tertiary text-buttons ("Learn more", "See how it works"): animated arrow. */
.pop-link-btn .elementor-button-text::after {
  content: '\2192';
  display: inline-block;
  margin-left: 8px;
  transition: transform .2s ease;
}
.pop-link-btn .elementor-button:hover .elementor-button-text::after {
  transform: translateX(4px);
}

/* Market-segment / use-case cards */
.pop-segment {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pop-segment:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(24,39,67,0.08);
}
.pop-segment-img {
  overflow: hidden;
}
.pop-segment-img img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.pop-segment:hover .pop-segment-img img {
  transform: scale(1.06);
}

/* ================================================================
   About-page redesign components (2026-08) — a small editorial system
   built for the About page but written as reusable classes rather than
   one-off rules, in case later pages want the same language.
   ================================================================ */

/* Dark "moment" sections (hero, the engineering section, CTA): deep navy,
   an animated photon-light motif, cream text. Reuses .pop-hero-glow's
   existing ::before layer for the ambient pulse (already proven reliable)
   and adds a second, thinner layer of moving light lines on top. */
.pop-section-dark {
  position: relative;
  background: var(--pop-hero-bg) !important;
  color: var(--pop-hero-text);
  overflow: hidden;
}
.pop-section-dark .elementor-heading-title { color: var(--pop-hero-text); }
.pop-section-dark p { color: var(--pop-hero-text-soft); }
.pop-section-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(79,216,255,0.09) 0px, rgba(79,216,255,0.09) 1px,
      transparent 1px, transparent 120px);
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 20%, #000 40%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 60% at 70% 20%, #000 40%, transparent 85%);
}
.pop-section-dark > .e-con-inner,
.pop-section-dark > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .pop-section-dark::after { animation: pop-drift 22s linear infinite; }
}
@keyframes pop-drift {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-120px,60px,0); }
}

/* Fluid vertical rhythm: replaces fixed 56-64px Elementor padding with a
   value that actually scales between breakpoints instead of just being
   smaller past 767px like the rest of the site's sections. */
.pop-space-y {
  padding-top: var(--pop-space-section) !important;
  padding-bottom: var(--pop-space-gap) !important;
}
/* Hero / dark "moment" / CTA sections: same gap, more generous top weight. */
.pop-space-y-major {
  padding-top: var(--pop-space-major) !important;
  padding-bottom: var(--pop-space-gap) !important;
}

/* Small caps eyebrow label, used above section titles. */
.pop-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* POP-is editorial cards: numbered, ghost background numeral, subtle lift
   + accent-glow border on hover instead of a generic shadow. */
.pop-numbered-card {
  position: relative;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.pop-numbered-card:hover {
  transform: translateY(-6px);
  border-color: var(--pop-accent) !important;
  box-shadow: 0 24px 48px -12px rgba(24,39,67,0.18);
}
.pop-numbered-card .pop-card-number {
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: var(--pop-font-head);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--pop-ink);
  opacity: .06;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Home "Our solutions": normalized image/label/title/CTA alignment.   */
/* Scoped to .pop-solution-card specifically, NOT plain                */
/* .pop-numbered-card - that class is also reused unmodified by        */
/* About's POP IS cards and ONE-PIX's Community-contributions cards,   */
/* which have a different shape (no image, or no CTA) and must not     */
/* pick up these rules.                                                */
/* ------------------------------------------------------------------ */
/* Elementor wraps every container's own children in an .e-con-inner
   layer (confirmed by inspecting the rendered markup), so a plain
   flex-column on .pop-solution-card only affects its single
   .e-con-inner child - the real image+content layout, and margin-top:
   auto on the button, need that .e-con-inner (and .pop-solution-
   content's own .e-con-inner) to be the flex column, not the outer
   element itself. */
.pop-solution-card,
.pop-solution-card > .e-con-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* aspect-ratio goes on the WRAPPER, not the <img> - confirmed via
   direct DOM inspection (CDP getBoundingClientRect): putting it on the
   img instead created a circular sizing dependency (the flex item's
   auto height gets committed using the image's *intrinsic* 300px
   width before its final 100%-of-wrapper rendered width is known,
   producing a wrapper box shorter than the image actually paints at,
   which then visibly overlapped the content below). Aspect-ratio on
   the wrapper itself has no such dependency - width comes from the
   flex/grid context directly, height follows deterministically, and
   the image just fills that fixed box. */
.pop-solution-card .elementor-widget-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}
.pop-solution-card .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pop-solution-content,
.pop-solution-content > .e-con-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pop-solution-eyebrow-row {
  min-height: 26px;
}
.pop-solution-content .elementor-widget-text-editor {
  min-height: 6.4rem;
  margin-bottom: 8px;
}
.pop-solution-content .elementor-widget-button {
  margin-top: auto;
}
@media (max-width: 767px) {
  .pop-solution-card, .pop-solution-card > .e-con-inner { height: auto; }
  .pop-solution-content .elementor-widget-text-editor { min-height: 0; }
}

/* Home "Application areas": same normalized-media principle, simpler
   cards (no CTA to pin, so no flex/margin-top:auto needed - just a
   consistent image height so the icon/title/text rows line up). */
.pop-application-media {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.pop-application-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .pop-application-media { aspect-ratio: 16 / 10; }
}

/* Fact chips (2023 / Lannion, France / SCOP / Open science). */
.pop-fact-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius-sm);
  background: var(--pop-surface);
}
.pop-fact-chip .pop-fact-value {
  font-family: var(--pop-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--pop-ink);
}
.pop-fact-chip .pop-fact-label {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pop-ink-soft);
}

/* Mission keyword pills (open hardware / open source / research / ...). */
.pop-keyword-pill {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--pop-border);
  background: var(--pop-surface-alt);
  color: var(--pop-ink);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pop-keyword-pill:hover {
  border-color: var(--pop-accent);
  color: var(--pop-accent);
  background: var(--pop-accent-soft);
}
.pop-section-dark .pop-keyword-pill {
  background: rgba(255,254,248,0.06);
  border-color: rgba(255,254,248,0.18);
  color: var(--pop-hero-text);
}
.pop-section-dark .pop-keyword-pill:hover {
  border-color: var(--pop-accent-cyan);
  color: var(--pop-accent-cyan);
  background: var(--pop-accent-cyan-soft);
}

/* Team initials as a graphic mark: a large ghost numeral/letter mark
   behind the card content rather than only a small solid-color circle. */
.pop-team-card { position: relative; overflow: hidden; }
.pop-team-mark {
  position: absolute;
  top: -18px;
  right: -6px;
  font-family: var(--pop-font-head);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  opacity: .07;
  pointer-events: none;
}

/* Scroll-reveal: fade + rise, applied via .pop-reveal + a tiny
   IntersectionObserver (see functions.php). The hidden starting state only
   applies once a `pop-js` class confirms JS actually ran and will do the
   revealing — with JS disabled/blocked/erroring, .pop-reveal content stays
   at its default, fully visible state. Reduced motion gets the same safe
   default even with JS on. */
.pop-js .pop-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.pop-reveal.pop-reveal--visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .pop-js .pop-reveal { opacity: 1; transform: none; transition: none; }
}

/* Placeholder list rows (e.g. "latest news" before real posts exist) — a
   compact divider list rather than full cards, muted badge so it reads
   unmistakably as temporary, not live content. */
.pop-placeholder-row {
  flex-wrap: wrap;
}
.pop-placeholder-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pop-border);
  color: var(--pop-ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ------------------------------------------------------------------ */
/* Order-request system: nav badge, product configurator, cart/order   */
/* summary. No payment anywhere in this flow — see inc/order-system.   */
/* ------------------------------------------------------------------ */

.pop-btn-primary {
  display: inline-block;
  background: var(--pop-accent);
  color: #FFFFFF !important;
  font-family: var(--pop-font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pop-btn-primary:hover {
  background: #066BA8;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(7,131,198,0.25);
}
.pop-btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Nav badge */
.pop-cart-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pop-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--pop-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.pop-cart-badge:hover { color: var(--pop-ink); }
.pop-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pop-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Quantity selector (shared by configurator + cart rows) */
.pop-quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pop-border);
  border-radius: 999px;
  overflow: hidden;
}
.pop-qty-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: none;
  background: var(--pop-surface-alt);
  color: var(--pop-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pop-qty-btn:hover { background: var(--pop-border); }
.pop-qty-input {
  width: 44px;
  height: 38px;
  border: none;
  border-left: 1px solid var(--pop-border);
  border-right: 1px solid var(--pop-border);
  text-align: center;
  font-family: var(--pop-font-body);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--pop-ink);
  appearance: textfield;
  -moz-appearance: textfield;
}
.pop-qty-input::-webkit-outer-spin-button,
.pop-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Product configurator */
.pop-product-configurator {
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius);
  padding: 32px;
  max-width: 560px;
}
.pop-configurator-title {
  font-family: var(--pop-font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--pop-ink);
  margin: 0 0 22px;
}
/* Choices lay out side by side (most products are a short single-choice
   list, e.g. 2 configurations) instead of one full-width row each -
   stacking them was the biggest source of unused height. */
.pop-option-group {
  display: flex;
  flex-wrap: wrap;
  border: none;
  padding: 0;
  margin: 0 0 20px;
  gap: 10px;
}
.pop-option-group legend {
  flex: 1 0 100%;
  font-family: var(--pop-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pop-ink-soft);
  padding: 0 0 10px;
}
.pop-option {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  padding: 12px 14px;
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pop-option:hover { border-color: var(--pop-accent); }
.pop-option:has(input:checked) {
  border-color: var(--pop-accent);
  background: var(--pop-accent-soft);
}
.pop-option input { accent-color: var(--pop-accent); width: 16px; height: 16px; flex-shrink: 0; }
.pop-option span:first-of-type { font-family: var(--pop-font-body); font-size: 14.5px; color: var(--pop-ink); flex: 1; }
.pop-option-delta { font-size: 13px; color: var(--pop-ink-soft); font-variant-numeric: tabular-nums; }

/* Quantity + total used to be two separate full-width rows (each with its
   own top border) - now share one row so they take one line instead of two. */
.pop-configurator-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 14px 0;
  border-top: 1px solid var(--pop-border);
}
.pop-configurator-meta-row .pop-quantity-row,
.pop-configurator-meta-row .pop-configurator-total-row {
  padding: 0;
  border-top: none;
}
.pop-quantity-row,
.pop-configurator-total-row,
.pop-order-total-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--pop-border);
}
.pop-quantity-label,
.pop-configurator-total-row > span:first-child,
.pop-order-total-row > span:first-child {
  font-family: var(--pop-font-body);
  font-size: 14px;
  color: var(--pop-ink-soft);
}
.pop-configurator-total-row [data-pop-configurator-total],
.pop-order-total-row [data-pop-cart-total] {
  font-family: var(--pop-font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--pop-ink);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.pop-configurator .pop-btn-primary,
.pop-product-configurator .pop-btn-primary {
  width: 100%;
  margin-top: 18px;
  text-align: center;
}
.pop-configurator-feedback {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--pop-accent);
  font-weight: 600;
}

/* Cart / order-request summary */
.pop-order-summary { max-width: 640px; }
.pop-order-summary-count {
  font-family: var(--pop-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--pop-accent);
  margin-bottom: 20px;
}
.pop-cart-items { border-top: 1px solid var(--pop-border); }
.pop-cart-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--pop-border);
}
.pop-cart-item-image {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--pop-radius-sm);
  border: 1px solid var(--pop-border);
  flex-shrink: 0;
}
.pop-cart-item-body { flex: 1; min-width: 0; }
.pop-cart-item-name {
  font-family: var(--pop-font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--pop-ink);
}
.pop-cart-item-options {
  font-size: 13px;
  color: var(--pop-ink-soft);
  margin-top: 3px;
}
.pop-cart-item-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pop-price {
  font-family: var(--pop-font-head);
  font-weight: 600;
  color: var(--pop-ink);
  font-variant-numeric: tabular-nums;
}
.pop-cart-remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--pop-font-body);
  font-size: 13px;
  color: var(--pop-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  margin-left: auto;
}
.pop-cart-remove:hover { color: var(--pop-red); }
.pop-no-payment-notice {
  font-size: 13px;
  color: var(--pop-ink-soft);
  font-style: italic;
  margin: 18px 0 0;
}
.pop-cart-empty {
  text-align: center;
  padding: 60px 20px;
}
.pop-cart-empty h2 {
  font-family: var(--pop-font-head);
  font-size: 24px;
  color: var(--pop-ink);
  margin: 0 0 10px;
}
.pop-cart-empty p {
  color: var(--pop-ink-soft);
  margin: 0 0 24px;
}

@media (max-width: 600px) {
  .pop-product-configurator { padding: 22px; max-width: 100%; }
  .pop-option { flex-basis: 100%; }
  .pop-configurator-meta-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .pop-configurator-meta-row .pop-configurator-total-row { border-top: 1px solid var(--pop-border); padding-top: 12px; margin-top: 8px; }
  .pop-cart-item { flex-direction: column; }
  .pop-cart-item-row { gap: 12px; }
  .pop-cart-remove { margin-left: 0; }
}

/* ------------------------------------------------------------------ */
/* Checkout form + confirmation page                                   */
/* ------------------------------------------------------------------ */

.pop-checkout-summary { margin-bottom: 40px; }
.pop-cart-item-readonly .pop-cart-item-body { display: flex; flex-direction: column; gap: 2px; }

.pop-checkout-form-wrap { max-width: 560px; }
.pop-checkout-form-wrap .pop-no-payment-notice { margin-top: 0; margin-bottom: 26px; }

.pop-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pop-form-error {
  background: rgba(229,0,64,0.08);
  border: 1px solid rgba(229,0,64,0.3);
  color: var(--pop-red);
  border-radius: var(--pop-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

.pop-checkout-form { display: flex; flex-direction: column; gap: 18px; }
.pop-form-field { display: flex; flex-direction: column; gap: 6px; }
.pop-form-field label {
  font-family: var(--pop-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--pop-ink-soft);
}
.pop-form-field input,
.pop-form-field select,
.pop-form-field textarea {
  font-family: var(--pop-font-body);
  font-size: 15px;
  color: var(--pop-ink);
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius-sm);
  padding: 12px 14px;
  transition: border-color .15s ease;
  width: 100%;
}
.pop-form-field input:focus,
.pop-form-field select:focus,
.pop-form-field textarea:focus {
  outline: none;
  border-color: var(--pop-accent);
  box-shadow: 0 0 0 3px var(--pop-accent-soft);
}
.pop-form-field textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.pop-form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.pop-checkout-submit { margin-top: 6px; width: 100%; text-align: center; }

.pop-confirmation { text-align: center; max-width: 480px; margin: 0 auto; }
.pop-confirmation h1 {
  font-family: var(--pop-font-head);
  font-size: 32px;
  font-weight: 600;
  color: var(--pop-ink);
  margin: 0 0 16px;
}
.pop-confirmation-thanks { color: var(--pop-ink-soft); font-size: 16px; margin: 0 0 26px; }
.pop-confirmation-ref {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--pop-surface-alt);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius);
  padding: 18px 32px;
  margin: 0 0 24px;
}
.pop-confirmation-ref span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pop-accent);
}
.pop-confirmation-ref strong {
  font-family: var(--pop-font-head);
  font-size: 22px;
  color: var(--pop-ink);
  font-variant-numeric: tabular-nums;
}
.pop-confirmation .pop-no-payment-notice { margin-bottom: 26px; }

@media (max-width: 600px) {
  .pop-checkout-form-wrap { max-width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Density pass: compact feature cards + horizontal process flow.      */
/* Matrix/grid layouts themselves use Elementor's native CSS Grid      */
/* container (see bin/pop-builder-helpers.php: grid_container()) so    */
/* there is no competing .pop-grid class fighting Elementor's own      */
/* generated flex CSS - these two components are the only genuinely    */
/* new primitives needed on top of that.                               */
/* ------------------------------------------------------------------ */

.pop-card-feature {
  padding: 22px;
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.pop-card-feature:hover {
  border-color: var(--pop-accent);
  transform: translateY(-2px);
}
.pop-card-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.pop-card-feature h3 {
  font-family: var(--pop-font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--pop-ink);
  margin: 0 0 6px;
  line-height: 1.35;
}
.pop-card-feature p {
  font-family: var(--pop-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pop-ink-soft);
  margin: 0;
}
.pop-section-dark .pop-card-feature {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.pop-section-dark .pop-card-feature h3 { color: var(--pop-hero-text); }
.pop-section-dark .pop-card-feature p { color: var(--pop-hero-text-soft); }

.pop-process {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.pop-process::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 44px;
  right: 44px;
  height: 1px;
  background: var(--pop-border);
  z-index: 0;
}
.pop-process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  gap: 10px;
}
.pop-process-number {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  background: var(--pop-surface);
  border: 2px solid var(--pop-accent);
  color: var(--pop-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pop-font-head);
  font-weight: 600;
  font-size: 15px;
}
.pop-process-step h3 {
  font-family: var(--pop-font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pop-ink);
  margin: 0;
  line-height: 1.35;
}
.pop-process-step p {
  font-family: var(--pop-font-body);
  font-size: 12.5px;
  color: var(--pop-ink-soft);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .pop-process { flex-direction: column; align-items: stretch; gap: 26px; }
  .pop-process::before { top: 0; bottom: 0; left: 22px; right: auto; width: 1px; height: auto; }
  .pop-process-step { flex-direction: row; text-align: left; align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* Order Request: combined items + form two-column view.               */
/* ------------------------------------------------------------------ */

.pop-order-request-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
.pop-order-request-items .pop-order-summary-count {
  font-family: var(--pop-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--pop-accent);
  margin-bottom: 20px;
}
.pop-order-request-items .pop-cart-items { border-top: 1px solid var(--pop-border); }
.pop-order-request-form .pop-checkout-form-wrap { max-width: 100%; }

/* ------------------------------------------------------------------ */
/* Contextual contact-form system.                                     */
/* ------------------------------------------------------------------ */

.pop-contact-form-wrap { max-width: 1000px; }
.pop-contact-form-intro { margin-bottom: 40px; max-width: 640px; }
.pop-contact-form-intro h1 {
  font-family: var(--pop-font-head);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  color: var(--pop-ink);
  margin: 12px 0 10px;
}
.pop-contact-subtitle { font-size: 16.5px; color: var(--pop-ink-soft); margin: 0 0 8px; }
.pop-context-auto-note {
  font-size: 12.5px;
  color: var(--pop-ink-soft);
  font-style: italic;
  opacity: .8;
  margin: 0;
}

.pop-contact-form-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: start;
}
.pop-contact-request-col,
.pop-contact-details-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pop-contact-request-col .pop-configurator-title,
.pop-contact-details-col .pop-configurator-title {
  margin: 0 0 4px;
}

.pop-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0 4px;
}
.pop-form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--pop-ink-soft);
  line-height: 1.5;
}
.pop-form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  accent-color: var(--pop-accent);
}
.pop-form-consent a { color: var(--pop-accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .pop-contact-form-split { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .pop-order-request-split { grid-template-columns: 1fr; gap: 44px; }
}

/* ------------------------------------------------------------------ */
/* Home "Latest news": ONE-PIX annual webinar announcement card.       */
/* ------------------------------------------------------------------ */

.pop-webinar-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
}
.pop-webinar-intro p {
  font-family: var(--pop-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--pop-ink-soft);
  margin: 0 0 16px;
}
.pop-webinar-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pop-font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--pop-ink);
  background: var(--pop-surface-alt);
  border: 1px solid var(--pop-border);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 16px;
}
.pop-webinar-note {
  font-family: var(--pop-font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--pop-ink-soft);
  margin: 16px 0 0;
}
.pop-webinar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.pop-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--pop-accent) !important;
  font-family: var(--pop-font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid var(--pop-accent);
  border-radius: 999px;
  padding: 11.5px 24px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.pop-btn-secondary:hover {
  background: rgba(7,131,198,0.08);
  transform: translateY(-1px);
}
.pop-webinar-program {
  background: var(--pop-surface-alt);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius-sm);
  padding: 20px 22px;
}
.pop-webinar-program h4 {
  font-family: var(--pop-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--pop-ink);
  margin: 0 0 12px;
}
.pop-webinar-program ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pop-webinar-program li {
  font-family: var(--pop-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pop-ink-soft);
  padding-left: 16px;
  position: relative;
}
.pop-webinar-program li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--pop-accent);
}
.pop-webinar-program li strong { color: var(--pop-ink); }

@media (max-width: 780px) {
  .pop-webinar-card { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* About page: "A tailored engineering office" value-chain list.      */
/* ------------------------------------------------------------------ */

.pop-eng-value-prop {
  font-family: var(--pop-font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--pop-hero-text);
  line-height: 1.4;
  margin: 10px 0 16px;
}
.pop-eng-steps {
  display: flex;
  flex-direction: column;
}
.pop-eng-step {
  display: flex;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,254,248,0.10);
}
.pop-eng-step:first-child { padding-top: 0; }
.pop-eng-step:last-child { padding-bottom: 0; border-bottom: none; }
.pop-eng-step-number {
  font-family: var(--pop-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pop-accent-cyan);
  min-width: 26px;
  padding-top: 2px;
  flex-shrink: 0;
}
.pop-eng-step h3 {
  font-family: var(--pop-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pop-hero-text);
  margin: 0 0 4px;
}
.pop-eng-step p {
  font-family: var(--pop-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--pop-hero-text-soft);
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Product shot: a low-res photo/cutout given a soft studio "stage"   */
/* instead of the hard white-box-with-border treatment - a blurred    */
/* radial glow (reusing the brand teal/cyan already used for the dark */
/* hero glow, at light-surface-safe opacity) plus a diffused drop     */
/* shadow. border-radius on the img is a no-op on transparent PNG     */
/* cutouts (PRO-PIX) and softens plain rectangular photos (ONE-PIX).  */
/* ------------------------------------------------------------------ */
.pop-product-shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-height: 220px;
}
.pop-product-shot::before {
  content: '';
  position: absolute;
  inset: 6%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,168,153,0.20) 0%, rgba(79,216,255,0.12) 42%, rgba(0,168,153,0) 72%);
  filter: blur(8px);
  z-index: 0;
}
.pop-product-shot img {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  filter: drop-shadow(0 18px 30px rgba(24,39,67,0.18));
}
/* Per-product tint: PRO-PIX (brand blue) / ONE-PIX (brand orange) instead
   of the generic teal, echoing each product's own accent colour used
   elsewhere (nav badges, "Our solutions" cards). */
.pop-product-shot--pro::before {
  background: radial-gradient(circle at 50% 50%, rgba(7,131,198,0.20) 0%, rgba(79,216,255,0.12) 42%, rgba(7,131,198,0) 72%);
}
.pop-product-shot--one::before {
  background: radial-gradient(circle at 50% 50%, rgba(239,147,56,0.20) 0%, rgba(246,193,29,0.12) 42%, rgba(239,147,56,0) 72%);
}

/* ------------------------------------------------------------------ */
/* Application carousel: one horizontally-scrolling card per sector,  */
/* each mirroring the SITUATION / MEASURED / RESULT structure used    */
/* throughout the real sector datasheets. Native scroll-snap does the */
/* work; the prev/next buttons and dots (functions.php) are a         */
/* convenience layer on top, not a dependency - swipe/scroll alone    */
/* already works with zero JS.                                       */
/* ------------------------------------------------------------------ */
.pop-app-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.pop-app-carousel-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.pop-app-carousel-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  border: 1px solid var(--pop-border);
  background: var(--pop-surface);
  color: var(--pop-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pop-app-carousel-btn:hover {
  border-color: var(--pop-accent);
  color: var(--pop-accent);
}
.pop-app-carousel-btn:disabled {
  opacity: .35;
  cursor: default;
  border-color: var(--pop-border);
  color: var(--pop-ink);
}
.pop-app-carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  padding: 4px 2px 20px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pop-border) transparent;
}
.pop-app-carousel-track::-webkit-scrollbar { height: 6px; }
.pop-app-carousel-track::-webkit-scrollbar-thumb { background: var(--pop-border); border-radius: 999px; }
.pop-app-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(360px, 82vw);
  display: flex;
  flex-direction: column;
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius);
  padding: 26px 26px 24px;
  border-top: 3px solid var(--pop-app-card-accent, var(--pop-accent));
}
.pop-app-card-sector {
  font-family: var(--pop-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pop-app-card-accent, var(--pop-accent));
  margin-bottom: 10px;
}
.pop-app-card-title {
  font-family: var(--pop-font-head);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--pop-ink);
  line-height: 1.3;
  margin: 0 0 18px;
}
.pop-app-card-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.pop-app-card-row-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pop-ink-soft);
  margin-bottom: 2px;
}
.pop-app-card-row-value {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pop-ink);
}
.pop-app-card-takeaway {
  font-family: var(--pop-font-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pop-ink);
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid var(--pop-border);
}
.pop-app-carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.pop-app-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--pop-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.pop-app-carousel-dot:hover { background: var(--pop-ink-soft); }
.pop-app-carousel-dot[aria-current="true"] {
  background: var(--pop-accent);
  transform: scale(1.3);
}
@media (max-width: 600px) {
  .pop-app-carousel-head { flex-direction: column; align-items: flex-start; }
  .pop-app-carousel-nav { display: none; }
}

/* ------------------------------------------------------------------ */
/* Applications-by-sector "scene" cards: each one is a compact         */
/* object -> acquisition -> spectral signature -> insight pipeline,    */
/* not just an icon-plus-paragraph tile. All 4 always fully visible -  */
/* hover only lifts the card, it never gates content.                  */
/* ------------------------------------------------------------------ */
.pop-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.pop-scene-card {
  --scene-accent: var(--pop-accent);
  position: relative;
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.pop-scene-card:hover {
  transform: translateY(-5px);
  border-color: var(--scene-accent);
  box-shadow: 0 28px 56px -20px rgba(24,39,67,.18);
}
.pop-scene-head { display: flex; align-items: center; gap: 12px; }
.pop-scene-icon {
  width: 44px; height: 44px; min-width: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--scene-accent) 12%, transparent);
}
.pop-scene-title {
  font-family: var(--pop-font-head); font-size: 18px; font-weight: 600; color: var(--pop-ink);
}
.pop-scene-context { font-size: 12.5px; color: var(--pop-ink-soft); margin-top: 1px; }

.pop-scene-pipeline {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2px;
  background: var(--pop-surface-alt); border-radius: var(--pop-radius-sm);
  padding: 16px 6px 12px;
}
.pop-scene-node { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.pop-scene-node-icon {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pop-surface); border: 1px solid var(--pop-border);
}
.pop-scene-card:hover .pop-scene-node-icon {
  border-color: var(--scene-accent);
  background: color-mix(in srgb, var(--scene-accent) 10%, var(--pop-surface));
}
.pop-scene-node-label {
  font-size: 9.5px; text-align: center; color: var(--pop-ink-soft); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; max-width: 68px;
}
.pop-scene-arrow { flex: 0 0 auto; color: var(--pop-border); margin-top: 16px; }

.pop-scene-benefit {
  font-family: var(--pop-font-head); font-size: 16.5px; font-weight: 600; color: var(--pop-ink); line-height: 1.35;
}
.pop-scene-desc { font-size: 13.5px; color: var(--pop-ink-soft); line-height: 1.6; margin: 0; }
.pop-scene-flow {
  font-size: 11.5px; color: var(--pop-ink-soft); padding-top: 14px; border-top: 1px solid var(--pop-border);
  font-variant-numeric: tabular-nums;
}
.pop-scene-flow b { color: var(--scene-accent); font-weight: 700; }

@media (max-width: 900px) {
  .pop-scene-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pop-scene-node-label { display: none; }
  .pop-scene-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop-scene-card { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Applications carousel, evidence variant: a real photograph of the   */
/* study object, a real (cited, illustratively redrawn) spectral       */
/* signature, and a real named index/method, each with its source     */
/* credited on the card itself - not just in a caption elsewhere.      */
/* Reuses the existing .pop-app-carousel-* shell (track/buttons/dots). */
/* ------------------------------------------------------------------ */
.pop-evidence-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(380px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--pop-surface);
  border: 1px solid var(--pop-border);
  border-radius: var(--pop-radius);
  overflow: hidden;
  border-top: 3px solid var(--evidence-accent, var(--pop-accent));
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.pop-evidence-card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -20px rgba(24,39,67,.18); }

.pop-evidence-photo { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--pop-surface-alt); }
.pop-evidence-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pop-evidence-photo-tag {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #FFFEF8; background: rgba(14,27,51,.72); backdrop-filter: blur(3px);
  padding: 5px 10px; border-radius: 999px;
}

.pop-evidence-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.pop-evidence-title { font-family: var(--pop-font-head); font-size: 17.5px; font-weight: 600; color: var(--pop-ink); }
.pop-evidence-benefit { font-size: 13.5px; font-weight: 600; color: var(--evidence-accent, var(--pop-accent)); line-height: 1.4; }

.pop-evidence-chart { background: var(--pop-surface-alt); border-radius: var(--pop-radius-sm); padding: 12px 14px 8px; }
.pop-evidence-chart svg { width: 100%; height: auto; display: block; }
.pop-evidence-chart-caption {
  font-size: 10px; color: var(--pop-ink-soft); text-align: center; margin-top: 4px;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
}

.pop-evidence-index-label {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pop-ink-soft);
}
.pop-evidence-index-value {
  font-family: var(--pop-font-head); font-size: 14.5px; font-weight: 600; color: var(--pop-ink);
  font-variant-numeric: tabular-nums;
}
.pop-evidence-desc { font-size: 13px; color: var(--pop-ink-soft); line-height: 1.55; margin: 0; }

.pop-evidence-sources {
  font-size: 10.5px; color: var(--pop-ink-soft); line-height: 1.6; padding-top: 12px; border-top: 1px solid var(--pop-border);
}
.pop-evidence-sources b { display: block; color: var(--pop-ink); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.pop-evidence-sources a { color: var(--evidence-accent, var(--pop-accent)); text-decoration: none; }
.pop-evidence-sources a:hover { text-decoration: underline; }

.pop-evidence-disclaimer {
  font-size: 11.5px; color: var(--pop-ink-soft); line-height: 1.5; font-style: italic;
  text-align: center; max-width: 640px; margin: 20px auto 0;
}

.pop-hero-carousel { position: relative; width: 100%; aspect-ratio: 0.94 / 1; }
.pop-hero-carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1.1s ease;
}
.pop-hero-carousel-slide.is-active { opacity: 1; z-index: 1; }
.pop-hero-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.pop-hero-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(24,39,67,.15); transition: background .25s, transform .25s;
}
.pop-hero-carousel-dot.is-active { background: #FFFFFF; transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .pop-evidence-card { transition: none; }
  .pop-hero-carousel-slide { transition: none; }
}