/* Reference visual pass 3 — asset + composition consolidation.
   Keeps existing copy/navigation/interactions. This layer focuses on the actual
   imagery and product/application presentation so the site reads as one visual system. */

:root {
  --ref-plate: #f4f8fb;
  --ref-plate-grid: rgba(42, 126, 184, .075);
  --ref-panel-blue: #eaf5fd;
}

/* More consistent page opening: technical, quiet, product-led. */
.site-page:not(.site-page--index):not(.site-page--agent) .pim-pagehero,
.security-page > .page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(42,126,184,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,126,184,.042) 1px, transparent 1px),
    linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
  background-size: 32px 32px, 32px 32px, auto;
}
.site-page:not(.site-page--index):not(.site-page--agent) .pim-pagehero::before,
.security-page > .page-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ref-blue-600);
  opacity: .9;
}

/* HOME — use a deliberately art-directed industrial asset rather than a raw studio crop. */
.product-proof .pim-shell::before {
  background:
    url("../img/editorial/orvex-dark.webp") center / cover no-repeat;
  border-color: rgba(120,201,255,.25);
}
.product-proof .pim-shell::after {
  content: "";
  position: absolute;
  left: 0;
  top: 42px;
  width: min(46%, 600px);
  height: 356px;
  pointer-events: none;
  box-shadow: inset 0 -80px 100px rgba(2,18,33,.12);
}

/* FEATURES — the product is now part of the page opening, like the supplied reference. */
.site-page--features .feature-page-hero {
  min-height: 330px;
  display: flex;
  align-items: center;
}
.site-page--features .feature-page-hero .page-hero-copy {
  width: min(var(--ref-page-max), calc(100% - 48px));
  padding-right: min(52vw, 720px);
  position: relative;
  z-index: 2;
}
.site-page--features .feature-page-hero::after {
  content: "";
  position: absolute;
  right: max(24px, calc((100vw - var(--ref-page-max))/2));
  top: 34px;
  bottom: 34px;
  width: min(48vw, 650px);
  border: 1px solid #c8d9e6;
  border-radius: 5px;
  /* Inert as it stands: reference-final-pass5 replaces every background
     longhand on this selector with the lighting schematic, so neither layer
     here renders. Kept correct rather than deleted -- the filename is the
     thing that was broken (the shots gained a _<locale> suffix when the site
     went multilingual) and which of the two images this hero wants is a design
     question, not a cleanup one. A CSS background cannot use the build's
     locale fallback, so this names the English file directly. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(2,25,45,.02)),
    url("../img/shots/product-editor_en.webp") left top / cover no-repeat;
  box-shadow: 0 15px 32px rgba(4,31,55,.10);
}
.site-page--features .feature-page-hero::after,
.site-page--features .pim-shot-frame img,
.site-page--features .product-shot-frame img {
  image-rendering: auto;
}

/* The app screenshots now sit in a neutral blue application bezel and use the recoloured UI assets. */
.site-page--features .pim-shot-frame,
.site-page--features .product-shot-frame {
  padding: 26px 8px 8px;
  background: #e6eef5;
  border-color: #b9cedd;
  box-shadow: 0 14px 30px rgba(5,33,58,.095);
}
.site-page--features .pim-shot-frame::after,
.site-page--features .product-shot-frame::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 11px;
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9bb6c9 0 45%, #6aaedc 45% 100%);
  opacity: .75;
}
.site-page--features .pim-shot-frame img,
.site-page--features .product-shot-frame img {
  display: block;
  width: 100%;
  background: #fff;
}

/* AGENT — closer to the reference's dark operator banner and dense execution workspace. */
.site-page--agent .agent-page-hero {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 79% 50%, rgba(22,154,241,.18), transparent 28%),
    linear-gradient(rgba(67,164,230,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,164,230,.065) 1px, transparent 1px),
    linear-gradient(120deg, #03182c, #05213a 72%, #07365c);
  background-size: auto, 34px 34px, 34px 34px, auto;
}
.site-page--agent .agent-page-hero .page-hero-copy { position: relative; z-index: 2; }
.site-page--agent .agent-page-hero::after {
  content: "";
  position: absolute;
  right: max(24px, calc((100vw - var(--ref-page-max))/2));
  width: min(43vw, 570px);
  height: 170px;
  border: 1px solid rgba(107,190,245,.26);
  background:
    radial-gradient(circle at 12% 22%, #29a9ff 0 4px, transparent 5px),
    radial-gradient(circle at 42% 50%, #29a9ff 0 4px, transparent 5px),
    radial-gradient(circle at 76% 28%, #29a9ff 0 4px, transparent 5px),
    radial-gradient(circle at 89% 72%, #29a9ff 0 4px, transparent 5px),
    linear-gradient(28deg, transparent 0 24%, rgba(48,168,246,.32) 24.2% 24.7%, transparent 25% 100%),
    linear-gradient(-20deg, transparent 0 42%, rgba(48,168,246,.28) 42.2% 42.7%, transparent 43% 100%),
    rgba(2,23,41,.45);
  box-shadow: inset 0 0 38px rgba(28,142,218,.08);
}
.site-page--agent .agent-console-area { background: #f6f9fc; }
.site-page--agent .pim-console {
  padding: 9px;
  border: 1px solid #c5d7e4;
  border-radius: 5px;
  background: #e4edf4;
  box-shadow: 0 17px 36px rgba(5,33,58,.10);
}
.site-page--agent .pim-console-rail {
  max-height: 590px;
  overflow: auto;
  padding: 5px;
  border: 1px solid #ccdbe6;
  border-radius: 3px;
  background: #f8fbfd;
  scrollbar-width: thin;
}
.site-page--agent .agent-run-panels .pim-console-panel,
.site-page--agent .pim-console-panels .pim-console-panel {
  min-height: 590px;
  box-shadow: none;
}
.site-page--agent .pim-console-bar {
  min-height: 42px;
  border-bottom: 1px solid rgba(137,205,249,.18);
}
.site-page--agent .pim-console-thread { min-height: 500px; }
.site-page--agent .pim-agentline--tool {
  border-left: 2px solid #1b9ff2;
  background: #061f35;
}

/* CASE STUDIES — consistent 16:9 technical product plates. */
.site-page--cases .case-index .case-grid .pim-study .editorial-media {
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ref-plate);
}
.site-page--cases .case-index .case-grid .pim-study .editorial-media img {
  object-fit: cover;
  filter: saturate(.94) contrast(1.015);
}
.site-page--cases .case-index .case-grid .pim-study {
  border-top: 2px solid #9ecce9;
  background: #fff;
}

/* Case detail: the primary image acts like a product launch plate, with a restrained gallery strip. */
.case-detail > .case-editorial .editorial-media {
  padding: 0;
  border: 1px solid #cedde7;
  background: #f4f8fb;
  overflow: hidden;
}
.case-detail > .case-editorial .editorial-media > img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  background: #f4f8fb;
}
.case-detail > .case-editorial .editorial-media > figcaption {
  padding: 8px 12px 9px;
  margin: 0;
  border-top: 1px solid #d8e4ec;
  background: #fff;
}
.case-detail > .case-editorial .editorial-gallery {
  display: flex;
  gap: 7px;
  padding: 8px;
  border-top: 1px solid #d8e4ec;
  background: #eef4f8;
  overflow-x: auto;
}
.case-detail > .case-editorial .editorial-gallery figure {
  flex: 0 0 145px;
  margin: 0;
}
.case-detail > .case-editorial .editorial-gallery img {
  width: 145px;
  height: 84px;
  object-fit: cover;
  border: 1px solid #c8d8e4;
  background: #fff;
}
.case-detail > .case-editorial .editorial-gallery figcaption { display: none; }

/* SERVICES — bring the industrial editorial image language into the service page without adding copy. */
.site-page--consult .consult-page > .pim-pagehero,
.consult-page > .pim-pagehero {
  min-height: 380px;
  display: flex;
  align-items: center;
}
.consult-page > .pim-pagehero .page-hero-copy {
  position: relative;
  z-index: 2;
  padding-right: min(49vw, 680px);
}
.consult-page > .pim-pagehero::after {
  content: "";
  position: absolute;
  right: max(24px, calc((100vw - var(--ref-page-max))/2));
  top: 34px;
  bottom: 34px;
  width: min(45vw, 610px);
  border: 1px solid #cadbe6;
  background: url("../img/editorial/voltra-plate.webp") center / cover no-repeat;
}

/* Card language: one family, less decorative variation. */
.pim-card,
.feature-panel,
.case-panel,
.pim-study,
.pim-plan {
  border-color: #d3e0e9;
}
.pim-card::before { background: var(--ref-blue-600); }
.pim-card-glyph { border-radius: 4px; }

@media (max-width: 980px) {
  .site-page--features .feature-page-hero .page-hero-copy,
  .consult-page > .pim-pagehero .page-hero-copy { padding-right: 0; max-width: 680px; }
  .site-page--features .feature-page-hero::after,
  .consult-page > .pim-pagehero::after,
  .site-page--agent .agent-page-hero::after { display: none; }
  .site-page--features .feature-page-hero,
  .consult-page > .pim-pagehero { min-height: 0; }
  .site-page--agent .agent-page-hero { min-height: 240px; }
}

@media (max-width: 720px) {
  .product-proof .pim-shell::after { display: none; }
  .site-page--agent .pim-console { padding: 5px; }
  .site-page--agent .pim-console-rail { max-height: none; overflow: visible; }
  .site-page--agent .agent-run-panels .pim-console-panel,
  .site-page--agent .pim-console-panels .pim-console-panel { min-height: 0; }
  .case-detail > .case-editorial .editorial-gallery figure,
  .case-detail > .case-editorial .editorial-gallery img { width: 112px; flex-basis: 112px; }
}

/* Correct the legacy hero max-width when the hero becomes a two-column composition. */
.site-page--features .feature-page-hero .page-hero-copy,
.consult-page > .pim-pagehero .page-hero-copy {
  max-width: none;
}
.site-page--features .feature-page-hero .pim-h1 {
  max-width: 500px;
  font-size: clamp(46px, 4.3vw, 64px);
}
.site-page--features .feature-page-hero .pim-lede {
  max-width: 450px;
  font-size: 16px;
  line-height: 1.55;
}
.consult-page > .pim-pagehero .pim-h1 {
  max-width: 500px;
  font-size: clamp(46px, 4.2vw, 62px);
}
.consult-page > .pim-pagehero .pim-lede,
.consult-page > .pim-pagehero .pim-hero-support {
  max-width: 500px;
}

@media (max-width: 980px) {
  .site-page--features .feature-page-hero .page-hero-copy,
  .consult-page > .pim-pagehero .page-hero-copy { max-width: 680px; }
}