/* Home — page-specific layout and set pieces only. Every reusable component lives in base.css.
   Set pieces: WebGL prism hero · kinetic "Expertise matters." · live solution scenes ·
   sovereignty story (floating prism, beam through four textured plates) · closing prism light. */

/* ---------------------------------------------------------------- Hero */
.hero {
  --prism-x: 72%;
  --prism-y: 41%;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 680px);
  display: flex; flex-direction: column;
  padding-top: var(--header-h);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 22vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(5 6 11 / 0), var(--ink));
}
.hero__prism {
  position: absolute; left: var(--prism-x); top: var(--prism-y); z-index: 0;
  width: clamp(132px, 18vw, 320px);
  transform: translate(-50%, -50%) translateY(calc(var(--p, 0) * -18vh)) scale(calc(1 - var(--p, 0) * .14));
  will-change: transform;
}
/* Parallax is a flat translate only: a 3D tilt would pull the artwork away from the
   light that hero.js draws around its true silhouette (the rim must never distort the edges). */
.hero__prism-inner {
  position: relative;
  transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * -5px), 0);
}
.hero__prism img { width: 100%; height: auto; }
.hero.is-static .hero__prism img, .no-js .hero__prism img { filter: drop-shadow(0 0 1px rgb(200 190 255 / .6)) drop-shadow(0 0 24px rgb(166 140 255 / .42)) drop-shadow(0 0 70px rgb(228 156 242 / .18)); }
.hero__glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../../img/brand/pertimm-prism.svg") center / 100% 100% no-repeat;
  mask: url("../../img/brand/pertimm-prism.svg") center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .12) 48%, rgb(166 140 255 / .1) 53%, transparent 60%) calc(50% + var(--mx, 0) * 70%) 0 / 280% 100% no-repeat;
  mix-blend-mode: screen;
}
.is-file .hero__glint { display: none; } /* CSS masks cannot load across file:// */

.hero__inner {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding-block: clamp(1.25rem, 3.5vh, 2.75rem) clamp(1.5rem, 4vh, 2.75rem);
}
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero__title {
  grid-row: 3;
  font-size: clamp(3.6rem, 1.1rem + 8.4vw, 10.75rem);
  line-height: .86; letter-spacing: -.058em; font-weight: 530;
  font-stretch: 100%;
  color: var(--fg);
  text-wrap: balance;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero__line > span { display: block; }
.hero__line--serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: .62em; line-height: 1.02; letter-spacing: -.028em;
  margin-top: .05em; padding-left: .04em; color: var(--fg);
}
.hero__foot {
  grid-row: 4;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--space-m);
  align-items: end;
  margin-top: clamp(1.75rem, 4vh, 3rem); padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
  border-top: 1px solid var(--line-2);
}
.hero__lead { grid-column: 1 / span 4; font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); max-width: 34ch; }
.hero__actions { grid-column: 5 / span 5; --cluster-gap: .6rem; }
.hero__signature {
  grid-column: 10 / -1; justify-self: end;
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: var(--step--1); line-height: 1.45; color: var(--fg-2); max-width: 22rem;
}
.hero__signature .flag-fr { margin-top: .2em; }

/* Load choreography: light first, then type (only with JS + motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__prism-inner { animation: prism-in 1.8s var(--ease-out) .15s both; }
  .js .hero__line > span { animation: line-up 1.25s var(--ease-out) both; }
  .js .hero__line:nth-child(1) > span { animation-delay: .35s; }
  .js .hero__line:nth-child(2) > span { animation-delay: .5s; }
  .js .hero__eyebrow, .js .hero__foot { animation: fade-in 1.2s var(--ease-out) .85s both; }
  .js .hero__foot { animation-delay: 1s; }
}
@keyframes prism-in { from { opacity: 0; scale: .86; filter: blur(8px); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1079px) {
  .hero__lead { grid-column: 1 / span 7; }
  .hero__signature { grid-column: 8 / -1; grid-row: 1; justify-self: end; }
  .hero__actions { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 759px) {
  .hero { --prism-x: 50%; --prism-y: 31%; min-height: max(100svh, 700px); }
  .hero__prism { width: clamp(120px, 36vw, 168px); }
  .hero__foot { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__lead, .hero__actions, .hero__signature { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; }
  .hero__actions { width: 100%; }
  .hero__actions > .btn { flex: 1 1 auto; }
  .hero__actions .btn--lg { min-height: 3.25rem; padding: .8rem 1.15rem; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__prism { transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------- Foundations */
/* .feature-strip (base.css); the home band also has a hairline above it */
.foundations { border-top: 1px solid var(--line); }

/* ------------------------------------------------ Trusted by (logo wall) */
.trusted { position: relative; padding-block: var(--space-2xl) var(--space-l); }
.trusted__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 2rem; margin-bottom: var(--space-l); }
.trusted__heading { display: grid; gap: var(--space-s); }
.trusted__title { font-size: var(--step-4); line-height: 1; letter-spacing: var(--track-h2); font-weight: 540; max-width: 17ch; }
.trusted__title em { font-weight: 330; }
.trusted__link { font-size: var(--step-1); }
/* Large, high-contrast wall: pure white marks, generous cells, pointer light behind the grid */
.trusted__wall {
  --logo-opacity: 1;
  position: relative; isolation: isolate;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-color: var(--line-2);
}
.trusted__wall > li { min-height: clamp(8rem, 5rem + 6.4vw, 12rem); padding: clamp(1.25rem, .8rem + 1.6vw, 2.5rem); border-color: var(--line-2); }
.trusted__wall .logo { --logo-w: min(100%, 12.5rem); max-height: calc(var(--logo-h, 2.75rem) * 1.32); }
.trusted__wall .logo--tall { max-height: calc(3.5rem * 1.32); }
.trusted__wall[data-spotlight]::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgb(166 140 255 / .16), rgb(138 212 255 / .05) 40%, transparent 70%); }
@media (max-width: 719px) {
  .trusted__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trusted__wall .logo { --logo-w: min(100%, 8.5rem); max-height: var(--logo-h, 2.75rem); }
  .trusted__wall .logo--tall { max-height: 3.5rem; }
}

/* --------------------------------------------------- Expertise matters */
/* Kinetic crossover from base.css (.kinetic: "Expertise" condensed→wide & light→bold,
   "matters." the opposite) driven by data-kinetic, plus a spectral sweep through the
   letters that settles to solid pearl when the statement reaches mid-viewport (--p = 1). */
.statement { position: relative; padding-top: var(--space-section); padding-bottom: 0; overflow: clip; }
.statement__inner { display: grid; gap: var(--space-l); }
.statement__title {
  --p: 1;
  font-size: clamp(3.5rem, 17.4vw, 17.5rem); line-height: .84; letter-spacing: -.055em;
  color: var(--fg);
}
.js .statement__title { --p: 0; }
.no-reveal .statement__title { --p: 1 !important; }
.statement__word {
  --sweep: calc(var(--p) * 190% - 45%);
  display: block; width: fit-content; padding-bottom: .07em; padding-right: .04em;
  background: linear-gradient(100deg,
    var(--fg) 0%, var(--fg) calc(var(--sweep) - 26%),
    var(--glacier) calc(var(--sweep) - 12%), #fff calc(var(--sweep) - 4%),
    var(--orchid) calc(var(--sweep) + 6%), var(--fg-3) calc(var(--sweep) + 22%), var(--fg-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statement__word--end { margin-left: auto; }
.statement__aside {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 2rem;
  padding-top: var(--space-m); border-top: 1px solid var(--line);
}
.statement__text { color: var(--fg-2); font-size: var(--step-1); line-height: 1.45; max-width: 36ch; }
@media (max-width: 639px) {
  .statement__aside { grid-template-columns: 1fr; justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .statement__word { --sweep: 145%; } }

/* Services ticker — alternating light-wide / bold-condensed (Mona Sans width axis) */
.statement__ticker { margin-top: var(--space-xl); padding-block: 1.3rem; border-block: 1px solid var(--line); --marquee-gap: clamp(1.5rem, .9rem + 2vw, 3rem); }
.statement__ticker .ticker-item { font-size: clamp(1.5rem, .95rem + 2.1vw, 3.1rem); line-height: 1.1; color: var(--fg); }
.statement__ticker .ticker-item:nth-child(odd) { font-weight: 250; font-stretch: 120%; letter-spacing: -.04em; }
.statement__ticker .ticker-item:nth-child(even) { font-weight: 700; font-stretch: 78%; letter-spacing: -.02em; }
/* the echo run only exists to keep the alternation seamless across the loop */
.marquee:not(.is-ready) .ticker-item--echo { display: none; }
@media (prefers-reduced-motion: reduce) { .ticker-item--echo { display: none !important; } }
.statement__ticker:not(.is-ready) .marquee__track { justify-content: flex-start; padding-inline: var(--gutter); column-gap: 2rem; }

/* ---------------------------------------------------------- Solutions */
/* Live micro-interface scenes in the pearl-on-ink style of the insight covers:
   pearl type, hairlines, minimal monospace — the spectrum appears only as light.
   Each plays once in view (index.js); without JS or with reduced motion the final
   state is simply there. */
.solutions__grid { align-items: stretch; }
.scene-card .card__body { gap: .5rem; padding: clamp(1.1rem, .9rem + .9vw, 1.75rem); }
.scene-card .card__title { font-size: var(--step-3); letter-spacing: -.032em; line-height: 1.04; }
.scene-card .card__text { max-width: 40ch; }
.scene-card .card__link { margin-top: auto; padding-top: .6rem; }
.scene-card:hover .scene { --scene-glow: .2; }
.solutions__note { margin-top: 1rem; }

.scene {
  --scene-h: clamp(14.5rem, 11.25rem + 6.6vw, 18.5rem);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --scene-glow: .13;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  height: var(--scene-h); flex: none;
  background:
    radial-gradient(80% 90% at 88% 0%, rgb(166 140 255 / var(--scene-glow)), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgb(138 212 255 / .06), transparent 60%),
    #090b16;
  border-bottom: 1px solid var(--line);
  color: #b4b7c9; font-family: var(--mono); font-size: .75rem; line-height: 1.4; letter-spacing: 0;
}
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent 0 calc(100% - 1px), rgb(240 237 247 / .035) 0) 0 0 / 100% 24px;
}
.scene__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, .8rem + .6vw, 1.35rem); border-bottom: 1px solid rgb(240 237 247 / .08);
  color: #8b90a7; white-space: nowrap;
}
.scene__path { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene__path::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #f0edf7; box-shadow: 0 0 8px rgb(166 140 255 / .9), 0 0 2px #fff; }
.scene__index { color: #8b90a7; }
.scene__tag {
  display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .55rem;
  border: 1px solid rgb(240 237 247 / .3); border-radius: 3px; color: #f0edf7; background: rgb(240 237 247 / .04);
}
.scene__tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f0edf7; box-shadow: 0 0 8px rgb(138 212 255 / .9); }

/* 01 · Language AI & RAG */
.rag { flex: 1; display: grid; align-content: center; gap: .85rem; padding: .9rem clamp(1rem, .8rem + .6vw, 1.35rem) 1rem; min-width: 0; }
.rag__query {
  display: flex; align-items: center; gap: .6rem; min-width: 0; height: 2.5rem; padding: 0 .9rem;
  border: 1px solid rgb(240 237 247 / .2); border-radius: 4px; background: rgb(240 237 247 / .04);
  box-shadow: 0 0 0 3px rgb(166 140 255 / .1); color: #f0edf7; font-size: .8125rem; white-space: nowrap; overflow: hidden;
}
.rag__prompt { color: #c8b8ff; }
.rag__q { overflow: hidden; text-overflow: ellipsis; }
.rag__caret { flex: none; width: 1.5px; height: 1.05em; margin-left: -.35rem; background: #f0edf7; opacity: 0; }
.scene.is-typing .rag__caret { opacity: 1; animation: caret 1s steps(1) infinite; }
.rag__hits { display: grid; gap: .55rem; margin: 0 0 0 1.05rem; padding: .1rem 0 .1rem 1rem; border-left: 1px dashed rgb(240 237 247 / .2); list-style: none; }
.rag__hit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 34%) 2.4rem; gap: .9rem; align-items: center; }
.rag__src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rag__bar { position: relative; height: 4px; border-radius: 2px; background: rgb(240 237 247 / .1); }
.rag__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: rgb(240 237 247 / .46); transform-origin: 0 50%; }
.rag__hit:first-child { color: #f0edf7; }
.rag__hit:first-child .rag__bar::after { background: linear-gradient(90deg, #e49cf2, #a68cff 50%, #8ad4ff); box-shadow: 0 0 12px rgb(166 140 255 / .75); }
.rag__score { text-align: right; color: #f0edf7; }
.rag__answer { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: #b4b7c9; }
.rag__sep { color: #8b90a7; }

/* 02 · Agentic AI */
.agent { flex: 1; display: grid; align-content: center; gap: .95rem; margin: 0; padding: .9rem clamp(1rem, .8rem + .6vw, 1.35rem); list-style: none; }
.agent__step { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: .9rem; }
.agent__step:not(:last-child)::before,
.agent__step:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 50%; width: 1px; height: calc(100% + .95rem); }
.agent__step:not(:last-child)::before { background: rgb(240 237 247 / .16); }
.agent__step:not(:last-child)::after { background: linear-gradient(180deg, #e49cf2, #a68cff 55%, #8ad4ff); box-shadow: 0 0 8px rgb(166 140 255 / .7); transform-origin: 50% 0; }
.agent__node { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgb(240 237 247 / .5); background: #090b16; }
.agent__node::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: #f0edf7; }
.agent__label { color: #f0edf7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent__state { color: #8b90a7; }
.agent__state::before { content: ""; display: inline-block; width: .55em; height: .3em; margin-right: .5em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(-45deg); }
.agent__step--human .agent__node { border-radius: 2px; transform: rotate(45deg) scale(.86); border-color: #c8b8ff; box-shadow: 0 0 0 4px rgb(166 140 255 / .12), 0 0 16px rgb(166 140 255 / .6); }
.agent__step--human .agent__node::after { inset: 4px; background: transparent; border: 1px solid #f0edf7; border-radius: 1px; }
.agent__step--human .agent__label::after { content: ":"; color: #8b90a7; }
.agent__step--human .agent__state { padding: .16rem .55rem; border: 1px solid rgb(200 184 255 / .55); border-radius: 3px; color: #f0edf7; background: rgb(166 140 255 / .1); }
.agent__step--human .agent__state::before { display: none; }

/* 03 · Computer Vision (one real work image, graded to pearl on ink) */
.scene--cv { background: #05060b; }
.cv { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* anchored to the bottom and centred: the crop falls under the top bar, never on the detections */
.cv__frame {
  position: absolute; left: 50%; bottom: 0;
  width: max(100%, calc((var(--scene-h) - 2.2rem) * 1.777));
  aspect-ratio: 1672 / 941; transform: translateX(-50%);
}
.cv__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.5); }
.cv__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgb(10 20 51 / .45), rgb(40 30 90 / .15) 55%, rgb(5 6 11 / .35)); }
.cv__box {
  --c: rgb(240 237 247 / .95);
  position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1px solid rgb(240 237 247 / .3);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 11px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 11px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 11px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 11px,
    linear-gradient(var(--c), var(--c)) 0 100% / 11px 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 11px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 11px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 11px;
  background-repeat: no-repeat;
}
.cv__box--lock { border-color: rgb(200 184 255 / .6); box-shadow: 0 0 24px rgb(166 140 255 / .35), inset 0 0 24px rgb(166 140 255 / .14); }
.cv__box--group { border-style: dashed; }
.cv__label {
  position: absolute; left: -1px; bottom: calc(100% + 4px);
  padding: .08rem .4rem; border-radius: 2px; background: #f0edf7; color: #05060b; white-space: nowrap; font-size: .75rem; line-height: 1.45;
}
.cv__box--lock .cv__label { box-shadow: 0 0 14px rgb(166 140 255 / .6); }
.cv__box--group .cv__label { left: auto; right: -1px; }
.cv__box--inside .cv__label { bottom: 7px; left: 7px; }
.cv__scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.cv__scan::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, transparent, rgb(166 140 255 / .14)); }
.cv__scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #8ad4ff 18%, #fff 50%, #e49cf2 82%, transparent); box-shadow: 0 0 12px 1px rgb(166 140 255 / .7); }
.scene__bar--over { position: relative; z-index: 3; background: linear-gradient(180deg, rgb(5 6 11 / .85), rgb(5 6 11 / .4)); border-bottom-color: rgb(240 237 247 / .1); }

/* 04 · Data Intelligence */
.merge { position: relative; flex: 1; margin: 1.6rem clamp(1rem, .8rem + .6vw, 1.35rem) 1.9rem; }
.merge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.merge__grid { fill: none; stroke: rgb(240 237 247 / .06); stroke-width: 1; }
.merge__src { fill: none; stroke: rgb(240 237 247 / .42); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.merge__out { fill: none; stroke: url(#g-merge); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.merge__out-glow { fill: none; stroke: #a68cff; stroke-width: 9; stroke-linecap: round; opacity: .2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.merge__node { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #090b16; border: 1.5px solid #f0edf7; box-shadow: 0 0 0 4px rgb(166 140 255 / .14), 0 0 14px rgb(166 140 255 / .7); }
.merge__label { position: absolute; left: 0; color: #8b90a7; white-space: nowrap; line-height: 1; }
.merge__label--erp { top: calc(15.5% - 1.35rem); }
.merge__label--iot { top: calc(50% - 1.35rem); }
.merge__label--crm { top: calc(84.5% + .5rem); }
.merge__label--out { left: auto; right: 0; top: calc(17.8% + .75rem); color: #f0edf7; padding: .18rem .55rem; border: 1px solid rgb(240 237 247 / .3); border-radius: 3px; background: rgb(9 11 22 / .8); line-height: 1.4; }

/* Scene choreography — only once index.js has armed a scene (JS + motion allowed).
   Armed = the starting frame, set instantly; the transitions live on the played state. */
@media (prefers-reduced-motion: no-preference) {
  /* RAG: the query types itself, then sources arrive and relevance bars fill */
  .scene.is-armed .rag__hit { opacity: 0; transform: translateX(-8px); }
  .scene.is-armed .rag__bar::after { transform: scaleX(0); }
  .scene.is-armed .rag__answer { opacity: 0; transform: translateY(4px); }
  .scene.is-typed .rag__hit { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) calc(var(--i) * 150ms), transform .9s var(--ease-out) calc(var(--i) * 150ms); }
  .scene.is-typed .rag__bar::after { transform: none; transition: transform 1.3s var(--ease-out) calc(180ms + var(--i) * 150ms); }
  .scene.is-typed .rag__answer { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) 1.05s, transform .8s var(--ease-out) 1.05s; }

  /* Agent: each step completes in turn; the run stops at the human checkpoint */
  .agent__step { --t: calc(250ms + var(--i) * 560ms); }
  .scene.is-armed .agent__node, .scene.is-armed .agent__label { opacity: .5; }
  .scene.is-armed .agent__state { opacity: 0; transform: translateX(-4px); }
  .scene.is-armed .agent__step:not(:last-child)::after { transform: scaleY(0); }
  .scene.is-played .agent__node, .scene.is-played .agent__label { opacity: 1; transition: opacity .45s var(--ease-out) var(--t); }
  .scene.is-played .agent__state { opacity: 1; transform: none; transition: opacity .45s var(--ease-out) calc(var(--t) + 240ms), transform .6s var(--ease-out) calc(var(--t) + 240ms); }
  .scene.is-played .agent__step:not(:last-child)::after { transform: none; transition: transform .5s var(--ease-in-out) calc(var(--t) + 300ms); }
  .scene.is-played .agent__step--human .agent__node { animation: await-pulse 1.5s var(--ease-out) calc(var(--t) + 500ms) 2; }

  /* Vision: one scan pass, then the detections lock on */
  .scene.is-armed .cv__box { opacity: 0; transform: scale(1.22); }
  .scene.is-played .cv__box { opacity: 1; transform: none; transition: opacity .35s var(--ease-out) calc(650ms + var(--i) * 260ms), transform .8s var(--ease-out) calc(650ms + var(--i) * 260ms); }
  .scene.is-played .cv__scan { animation: cv-scan 1.9s var(--ease-in-out) .1s 1 both; }

  /* Data: sources draw in, meet at one node, leave as one unified, enriched line */
  .scene.is-armed :is(.merge__src, .merge__out, .merge__out-glow) { stroke-dashoffset: 1; }
  .scene.is-armed .merge__node { opacity: 0; transform: scale(.3); }
  .scene.is-armed .merge__label { opacity: 0; }
  .scene.is-armed .merge__label--out { transform: translateY(4px); }
  .scene.is-played .merge__src { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-out) calc(var(--i) * 170ms); }
  .scene.is-played :is(.merge__out, .merge__out-glow) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out) 1.2s; }
  .scene.is-played .merge__node { opacity: 1; transform: none; transition: opacity .4s var(--ease-out) 1.05s, transform .7s var(--ease-spring) 1.05s; }
  .scene.is-played .merge__label { opacity: 1; transition: opacity .6s var(--ease-out) .2s; }
  .scene.is-played .merge__label--out { transform: none; transition: opacity .6s var(--ease-out) 2.1s, transform .8s var(--ease-out) 2.1s; }
}
@keyframes await-pulse { 0% { box-shadow: 0 0 0 4px rgb(166 140 255 / .12), 0 0 16px rgb(166 140 255 / .6); } 40% { box-shadow: 0 0 0 10px rgb(166 140 255 / 0), 0 0 26px rgb(200 184 255 / .95); } 100% { box-shadow: 0 0 0 4px rgb(166 140 255 / .12), 0 0 16px rgb(166 140 255 / .6); } }
@keyframes cv-scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }

@media (max-width: 719px) {
  .scene { --scene-h: 14.25rem; }
  .rag__hit { grid-template-columns: minmax(0, 1fr) 3.25rem 2.3rem; gap: .7rem; }
}

/* ----------------------------------------------- Control at every layer */
.control { overflow: clip; }
.control__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m) var(--space-m); margin-bottom: var(--space-xl); }
.control__head .eyebrow { grid-column: 1 / -1; }
.control__title { grid-column: 1 / span 7; font-size: var(--step-5); line-height: .9; letter-spacing: var(--track-display); font-weight: 530; }
.control__title em { font-weight: 320; }
.control__intro { grid-column: 8 / -1; align-self: end; display: grid; gap: var(--space-m); }
.control__intro .body-l { color: var(--fg-2); }
@media (max-width: 999px) {
  .control__title, .control__intro { grid-column: 1 / -1; }
}

/* The stage: a floating prism, a beam of light through four textured plates, the L1–L4 legend */
.control__stage { display: grid; justify-items: center; align-content: center; gap: clamp(1rem, .6rem + 1vw, 1.75rem); }
.layers { width: 100%; max-width: 30rem; height: auto; overflow: visible; }
.layer__lift { transition: transform .9s var(--ease-out); }
.layer__top { fill: rgb(13 17 34 / .92); stroke: rgb(240 237 247 / .3); stroke-width: 1; transition: fill .7s, stroke .7s, filter .7s; }
.layer__side { fill: rgb(6 8 16 / .96); stroke: rgb(240 237 247 / .16); stroke-width: 1; }
.layer__tex { opacity: .3; transition: opacity .7s; }
.layer__pierce { opacity: .5; transform-box: fill-box; transform-origin: center; transition: opacity .6s, transform .8s var(--ease-out); }
.layer__leader { stroke: rgb(240 237 247 / .24); stroke-width: 1; transition: stroke .5s; }
.layer__label { fill: #b4b7c9; font-family: var(--font-sans); font-size: 19px; font-weight: 520; letter-spacing: -.01em; transition: fill .5s; }
.layer__key { fill: #8b90a7; font-weight: 640; letter-spacing: .02em; transition: fill .5s; }
.layer.is-active .layer__lift { transform: translateY(-14px); }
.layer.is-active .layer__top { fill: url(#g-plate); stroke: rgb(255 255 255 / .72); filter: drop-shadow(0 0 22px rgb(166 140 255 / .5)); }
.layer.is-active .layer__tex { opacity: .7; }
.layer.is-active .layer__pierce { opacity: 1; transform: scale(1.7); }
.layer.is-active .layer__leader { stroke: var(--iris); }
.layer.is-active .layer__label { fill: #f0edf7; }
.layer.is-active .layer__key { fill: #c8b8ff; }

.beam__soft { opacity: .85; }
.beam__core { fill: none; stroke-width: 1.6; }
.beam__photon { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 6; opacity: 0; filter: drop-shadow(0 0 4px #c8b8ff); }
.float-prism__halo { opacity: .95; }
.float-prism__body { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .control__story.is-inview .beam__photon { animation: photon 3.6s var(--ease-in-out) infinite; }
  .float-prism__body { animation: prism-float 6.5s ease-in-out infinite; animation-play-state: paused; }
  .control__story.is-inview .float-prism__body { animation-play-state: running; }
}
@keyframes photon { 0% { stroke-dashoffset: 6; opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { stroke-dashoffset: -94; opacity: 0; } }
@keyframes prism-float { 50% { transform: translateY(-8px); } }

/* L1–L4 summary: always visible, doubles as the legend and as shortcuts to each layer */
.control__summary { width: 100%; max-width: 34rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.control__sum { min-width: 0; }
.control__sum-link { position: relative; display: grid; align-content: start; gap: .15rem; height: 100%; padding: .85rem .7rem .15rem 0; color: var(--fg-2); text-decoration: none; }
.control__sum + .control__sum .control__sum-link { padding-left: .8rem; border-left: 1px solid var(--line); }
.control__sum-link::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--spectrum); box-shadow: 0 0 8px var(--glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.control__sum.is-active .control__sum-link::before { transform: none; }
.control__sum-key { font-size: var(--step--2); font-weight: 640; letter-spacing: .04em; color: var(--fg-3); transition: color .5s; }
.control__sum-name { font-size: var(--step-0); font-weight: 560; color: var(--fg); letter-spacing: -.01em; line-height: 1.25; }
.control__sum-gist { font-size: var(--step--2); color: var(--fg-3); line-height: 1.4; }
.control__sum.is-active .control__sum-key { color: var(--accent-text); }
.control__sum-link:hover .control__sum-name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }

.control__steps { counter-reset: none; }
.control__index { font-size: var(--step--1); color: var(--fg-3); margin-bottom: 1rem; }
.control__step-title { font-size: var(--step-4); line-height: .98; letter-spacing: var(--track-h2); font-weight: 530; max-width: 12ch; }
.control__step-text { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); max-width: 34ch; }
.control__step { position: relative; }
.control__step::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--spectrum); transition: width 1.1s var(--ease-out); }
.control__step.is-active::before { width: 100%; }
.no-js .control__step::before { width: 3rem; }
/* inactive layers stay readable: titles dim to fg-3 (≥ 5:1 on navy), body copy keeps fg-2 */
.js .control__step:not(.is-active) .control__step-text { color: var(--fg-2); }
.js .control__step:not(.is-active) .control__index { color: var(--fg-3); }
.control__step.is-active .control__index { color: var(--accent-text); }

@media (min-width: 1000px) {
  /* a shorter runway: compact steps, the stage centred in the viewport, no trailing void */
  .control__stage { height: auto; min-height: 0; top: max(calc(var(--header-h) + 1rem), calc(50vh + var(--header-h) / 2 - 20.5rem)); }
  .control__step { min-height: 38vh; scroll-margin-top: 30vh; }
  .control__step:last-child { min-height: 44vh; justify-content: flex-start; padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
  .control { padding-bottom: var(--space-2xl); }
}
@media (max-width: 999px) {
  /* narrow stage: the L1–L4 summary below is the legend, the plates re-centre */
  .control__stage { max-width: 34rem; margin-inline: auto; width: 100%; overflow: hidden; }
  .layers { max-width: 30rem; transform: translateX(10.9%); }
  .layer__label, .layer__leader { display: none; }
}
@media (max-width: 559px) {
  .control__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control__sum:nth-child(3) .control__sum-link { padding-left: 0; border-left: 0; }
  .control__sum:nth-child(n+3) .control__sum-link { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------- Capabilities */
.capabilities .section-head__title em { font-weight: 330; }
.capability { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); padding-top: var(--space-m); }
.capability__head { grid-column: 1 / span 5; display: grid; gap: 1rem; align-content: start; }
.capability__title { font-size: var(--step-3); letter-spacing: -.035em; line-height: 1.04; max-width: 14ch; }
.capability__count { color: var(--fg-3); font-size: var(--step--1); }
.capability__list { grid-column: 6 / -1; align-self: start; }
.capability__list > li { font-size: var(--step-1); letter-spacing: -.012em; line-height: 1.35; }
@media (max-width: 899px) {
  .capability__head, .capability__list { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ About us */
.about-teaser { padding-bottom: var(--space-2xl); }
.about-teaser__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m); }
.about-teaser__eyebrow { grid-column: 1 / span 3; align-self: start; margin-top: .9em; }
.about-teaser__statement {
  grid-column: 4 / -1;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.75rem); line-height: 1.08; letter-spacing: -.038em; font-weight: 460; color: var(--fg);
  max-width: 24ch;
}
.about-teaser__statement em { font-weight: 330; letter-spacing: -.02em; }
.about-teaser__link { grid-column: 4 / -1; justify-self: start; font-size: var(--step-1); margin-top: var(--space-s); }
@media (max-width: 899px) {
  .about-teaser__eyebrow, .about-teaser__statement, .about-teaser__link { grid-column: 1 / -1; }
  .about-teaser__eyebrow { margin-top: 0; }
}

/* --------------------------------------------------------- Why Pertimm */
.why__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); align-items: end;
  padding-top: var(--space-2xl); border-top: 1px solid var(--line);
}
.why__heading { grid-column: 1 / span 7; display: grid; gap: var(--space-m); }
.why__title { font-size: clamp(2.5rem, 1.35rem + 4.4vw, 6.25rem); line-height: .94; letter-spacing: var(--track-display); font-weight: 530; max-width: 13ch; }
.why__title em { font-weight: 320; }
/* the proof sits beside the heading */
.why__proof {
  grid-column: 9 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: .25rem 1.25rem;
  padding: 1.25rem 0 .35rem; border-top: 1px solid var(--line-2); position: relative;
}
.why__proof::before { content: ""; position: absolute; left: 0; top: -1px; width: 3.5rem; height: 1px; background: var(--spectrum); box-shadow: 0 0 10px var(--glow); }
.why__proof-value { font-size: clamp(4rem, 2.4rem + 5.6vw, 8.75rem); font-weight: 250; font-stretch: 116%; line-height: .8; letter-spacing: -.055em; color: var(--fg); }
.why__proof-unit { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-stretch: normal; letter-spacing: 0; margin-left: .02em; }
.why__proof-label { color: var(--fg-2); font-size: var(--step--1); line-height: 1.45; max-width: 24ch; padding-bottom: .35rem; }
.why__proof-label strong { display: block; font-size: var(--step-1); font-weight: 560; letter-spacing: -.01em; }
.why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--space-m); margin-top: var(--space-2xl); }
.why__intro { grid-column: 1 / span 4; display: grid; gap: var(--space-m); align-content: start; align-self: start; }
.why__text { color: var(--fg-2); font-size: var(--step-1); line-height: 1.5; max-width: 40ch; }
.why__origin { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step--1); color: var(--fg-3); }
.why__list { grid-column: 6 / -1; }
.why__list .index-list__item:first-child { padding-top: var(--space-m); }
@media (min-width: 1000px) { .why__intro { position: sticky; top: calc(var(--header-h) + 2rem); } }
@media (max-width: 999px) {
  .why__heading { grid-column: 1 / -1; }
  .why__proof { grid-column: 1 / -1; max-width: 32rem; }
  .why__intro, .why__list { grid-column: 1 / -1; }
}

/* ------------------------------------------------- What we offer (paper) */
.offer__head { display: grid; gap: var(--space-s); margin-bottom: var(--space-xl); }
.offer__title { font-size: var(--step-5); line-height: .92; letter-spacing: var(--track-display); font-weight: 530; }
.offer__title em { font-weight: 320; }
.offer__stats { border-top-color: var(--line-2); }
.offer__stats .stat { position: relative; padding-top: 2rem; }
.offer__stats .stat::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.75rem; height: 1px; background: var(--spectrum-deep); }
.offer__stats .stat + .stat::before { left: 1.5rem; }
.offer__stats .stat__value { font-size: clamp(3.4rem, 1.7rem + 5.4vw, 8rem); font-weight: 300; font-stretch: 108%; letter-spacing: -.055em; }
.offer__stats .stat__unit { font-weight: 300; margin-left: .02em; }
.offer__stats .stat__label { font-size: var(--step-2); letter-spacing: -.02em; margin-top: .75rem; }
@media (min-width: 720px) and (max-width: 1079px) {
  .offer__stats { grid-template-columns: repeat(2, 1fr); }
  .offer__stats .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .offer__stats .stat:nth-child(3)::before { left: 0; }
  .offer__stats .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 719px) { .offer__stats .stat + .stat::before { left: 0; } }

/* ----------------------------------------------------------- Research */
.research { overflow-x: clip; }
.research__figure { position: relative; }
.research__figure::after {
  content: ""; position: absolute; inset: auto 0 -10% 30%; height: 60%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(166 140 255 / .22), transparent);
  filter: blur(30px);
}
.research__copy { display: grid; gap: var(--space-m); justify-items: start; }
.research__title { font-size: var(--step-4); line-height: .98; letter-spacing: var(--track-h2); font-weight: 530; max-width: 13ch; }
.research__title em { font-weight: 320; }
.research__text { color: var(--fg-2); max-width: 40ch; }

.research__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + .8vw, 1.25rem); margin-top: var(--space-2xl); }
@media (max-width: 759px) { .research__facts { grid-template-columns: 1fr; } }
.fact-card {
  container-type: inline-size;
  position: relative; display: flex; flex-direction: column; gap: 1.5rem;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.fact-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 3.5rem; height: 1px; background: var(--spectrum); box-shadow: 0 0 10px var(--glow); }
.fact-card__head { display: grid; gap: .45rem; }
.fact-card__eyebrow { font-size: var(--step--1); color: var(--fg-3); font-weight: 520; }
.fact-card__title { font-size: var(--step-3); letter-spacing: -.035em; line-height: 1.04; font-weight: 550; }
.fact-card__lead { color: var(--fg-2); font-size: var(--step-1); line-height: 1.4; }
.fact-card__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.fact-card__fig { padding: 1.1rem 1rem 0 0; }
.fact-card__fig + .fact-card__fig { padding-left: 1rem; border-left: 1px solid var(--line); }
.fact-card__fig--wide { grid-column: span 2; }
.fact-card__fig dd { margin: 0; color: var(--fg-2); font-size: var(--step--1); line-height: 1.35; }
.fact-card__num { display: block; margin-bottom: .35rem; color: var(--fg); font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); font-weight: 280; font-stretch: 112%; letter-spacing: -.05em; line-height: .95; }
.fact-card__fig:last-child .fact-card__num { font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); font-stretch: 100%; letter-spacing: -.03em; line-height: 1.1; padding-top: .35em; }
.fact-card__link { margin-top: auto; }
/* narrow card: the programme period takes its own row */
@container (max-width: 33rem) {
  .fact-card__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-card__fig:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1rem; }
}

.research__partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--line); }
.research__partners-label { color: var(--fg-3); font-size: var(--step--1); max-width: 16ch; }
.research__partners .partner-row { --partner-h: 3.25rem; }
.research__partners .partner-row > li { min-width: 8.5rem; padding: .85rem 1.2rem; }
@media (max-width: 559px) {
  .research__partners-label { max-width: none; }
  .research__partners .partner-row { --partner-h: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .5rem; }
  .research__partners .partner-row > li { min-width: 0; padding: .7rem .5rem; }
  .research__partners .partner-row img { max-width: 100%; }
}

/* ----------------------------------------------------------- Insights */
.insights__all { justify-self: end; }
.insights .section-head__title em { font-weight: 330; }
@media (max-width: 899px) { .insights__all { justify-self: start; } }

/* ---------------------------------------------------------------- CTA */
/* The prism light returns as a bookend to the hero (layout from .cta-band in base.css) */
.home-cta { --prism-x: 80%; --prism-y: 36%; }
.home-cta::after { content: ""; position: absolute; inset: 0 0 auto; height: 22%; z-index: -1; pointer-events: none; background: linear-gradient(var(--ink), rgb(5 6 11 / 0)); }
.home-cta__prism {
  position: absolute; left: var(--prism-x); top: var(--prism-y); z-index: 0;
  width: clamp(96px, 9vw, 168px); transform: translate(-50%, -50%);
}
.home-cta__prism img { width: 100%; height: auto; }
.home-cta.is-static .home-cta__prism img, .no-js .home-cta__prism img { filter: drop-shadow(0 0 1px rgb(200 190 255 / .6)) drop-shadow(0 0 26px rgb(166 140 255 / .4)); }
.home-cta__inner, .home-cta .cta-band__inner { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .home-cta { --prism-x: 76%; --prism-y: 5.5rem; }
  .home-cta__prism { width: 84px; }
}