/* =========================================================================
   OBUS — Cinematic layer
   Scroll-driven "from friction to flow" experience on top of styles.css.
   Loaded together with cinema.js + cinema-hero.js; everything degrades
   gracefully without JS and under prefers-reduced-motion (.cinema-static).
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
.cinema {
  --cine-dark: #021A33;
  --cine-glow: rgba(79, 208, 201, .55);
}

/* ---------------------------------------------------- letterbox opening */
.cine-bar {
  position: fixed; left: 0; right: 0; z-index: 9990;
  height: 12vh; background: var(--cine-dark); pointer-events: none;
  transition: transform 1.5s cubic-bezier(.65,0,.2,1);
  will-change: transform;
}
.cine-bar--top { top: 0; transform-origin: top; }
.cine-bar--bottom { bottom: 0; transform-origin: bottom; }
.cine-bar--top.is-open { transform: translateY(-101%); }
.cine-bar--bottom.is-open { transform: translateY(101%); }

/* ------------------------------------------- hero = pinned opening scene */
/* the wrapper provides the scroll runway; the hero stays pinned while the
   chaos→flow transformation plays out on the canvas */
html.cinema:not(.cinema-static) .cine-pin { position: relative; height: 160vh; }
html.cinema:not(.cinema-static) .cine-pin .hero--center {
  position: sticky; top: 0;
  height: 100svh; min-height: 0; max-height: none;
}
.cine-pin + .section { padding-top: 2.25rem; }

/* evening grade: close to the original banner, one stop deeper, so the
   particle light still reads while the page stays warm and welcoming */
.cinema .hero--center {
  background: linear-gradient(140deg, #012345 0%, #02457E 34%, #02778E 68%, #0FA3AD 100%);
}
.cinema .hero--center::before {
  background:
    radial-gradient(42% 52% at 80% 18%, rgba(150,240,234,.30), transparent 70%),
    radial-gradient(46% 46% at 14% 82%, rgba(79,208,201,.18), transparent 72%),
    radial-gradient(70% 60% at 50% -10%, rgba(255,255,255,.10), transparent 70%);
}
/* the fade-to-paper bottom edge stays subtle while the scene plays, then
   blooms in as the hero hands off to the next section (JS sets --cine-exit) */
html.cinema:not(.cinema-static) .hero--center::after {
  opacity: calc(.18 + .82 * var(--cine-exit, 0));
}
/* edge vignette (injected div — keeps the ::after bottom fade intact) */
.cine-vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(170% 140% at 50% 42%, transparent 60%, rgba(1,12,26,.32) 100%);
}
.cinema .hero-inner { z-index: 2; }
.cinema .hero-flow { z-index: -1; will-change: opacity; }
.cinema .hero-copy { will-change: transform, opacity; }
.cinema .hero--center h1 { text-shadow: 0 0 34px rgba(79,208,201,.30); }

/* kinetic headline: words rise out of an overflow mask, one by one */
.cinema .hero-copy > h1 { animation: none; opacity: 1; }
.cine-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.cine-w > span {
  display: inline-block;
  transform: translateY(112%) rotate(2.5deg);
  filter: blur(6px); opacity: 0;
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .9s var(--ease),
    opacity .7s var(--ease);
  transition-delay: var(--wd, 0s);
  will-change: transform, filter;
}
h1.cine-on .cine-w > span { transform: none; filter: blur(0); opacity: 1; }

/* re-time the supporting copy to enter after the headline */
.cinema .hero-copy > .eyebrow      { animation-delay: .25s; animation-duration: 1.1s; }
.cinema .hero-copy > .lead         { animation-delay: 1.5s; animation-duration: 1.1s; }
.cinema .hero-copy > .hero-actions { animation-delay: 1.75s; animation-duration: 1.1s; }
.cinema .hero-copy > .hero-meta    { animation-delay: 1.95s; animation-duration: 1.1s; }

/* scroll cue — a slow pulse inviting the next scene */
.cine-cue {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  opacity: 0; animation: cine-cue-in 1s var(--ease) 2.6s forwards;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.cine-cue.is-gone { opacity: 0 !important; }
.cine-cue::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), transparent);
  animation: cine-cue-drop 2.2s var(--ease) infinite;
}
@keyframes cine-cue-in { to { opacity: 1; } }
@keyframes cine-cue-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ------------------------------------------ transformation thread (beam) */
.cine-beam {
  position: fixed; left: 0; top: 0; z-index: 9980;
  width: 3px; height: 100%;
  transform: scaleY(0); transform-origin: top;
  background: linear-gradient(to bottom, var(--grad-start), var(--accent), var(--grad-end));
  pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cine-beam.is-on { opacity: 1; }
.cine-beam-head {
  position: fixed; left: -4px; top: 0; z-index: 9981;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent-tint);
  box-shadow: 0 0 10px 2px var(--cine-glow), 0 0 26px 8px rgba(79,208,201,.25);
  pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cine-beam-head.is-on { opacity: 1; }

/* --------------------------------------------- cinematic section reveals */
/* main.js toggles .is-in on .reveal — we layer a slow blur-rise on top    */
.cinema .section-head.reveal h2 {
  opacity: 0; transform: translateY(30px); filter: blur(10px);
  transition: opacity .9s var(--ease), transform 1.1s cubic-bezier(.16,1,.3,1), filter .9s var(--ease);
}
.cinema .section-head.reveal.is-in h2 {
  opacity: 1; transform: none; filter: blur(0);
  transition-delay: .08s;
}
.cinema .section-head.reveal .eyebrow {
  opacity: 0; transform: translateX(-14px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.cinema .section-head.reveal.is-in .eyebrow { opacity: 1; transform: none; }

/* ------------------------------------- service & industry cards: night  */
/* the illustration stages become lit night scenes — line art glows        */
.cinema .svc-stage {
  background: linear-gradient(155deg, #02274A 0%, #013D5C 55%, #016273 100%);
}
.cinema .svc-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 72% at 50% 54%, rgba(79,208,201,.26), transparent 76%);
}
.cinema .svc-art { filter: drop-shadow(0 0 4px rgba(127,233,225,.35)); }

/* cinematic entrance: cards surface with depth (animation so the hover/tilt
   transition stays snappy afterwards); cinema.js copies the reveal stagger
   into animation-delay */
.cinema .svc-card.reveal.is-in,
.cinema .scene-tile.reveal.is-in,
.cinema .chapter.reveal.is-in,
.cinema .why-card.reveal.is-in {
  animation: cine-card-in .95s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes cine-card-in {
  from { opacity: 0; transform: translateY(48px) scale(.95); filter: saturate(.4) brightness(.85); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* gentle 3D tilt toward the cursor (no glare, no speed change) */
@media (pointer: fine) {
  .cinema .svc-card, .cinema .scene-tile:not(.sector-tile) { transform-style: preserve-3d; will-change: transform; }
  .cinema .svc-card.is-tilting, .cinema .scene-tile.is-tilting {
    transform:
      perspective(900px)
      rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
      translateY(-4px);
    transition: box-shadow .3s var(--ease);
  }
}

/* ------------------------------------------------ pathway: lit-fuse run */
.cinema .pathway .dot { will-change: transform; }
.cinema .pathway.is-lit .pathway-node .dot {
  animation: cine-fuse 1.1s var(--ease) both;
}
.cinema .pathway.is-lit .pathway-node:nth-child(1) .dot  { animation-delay: .15s; }
.cinema .pathway.is-lit .pathway-node:nth-child(3) .dot  { animation-delay: .65s; }
.cinema .pathway.is-lit .pathway-node:nth-child(5) .dot  { animation-delay: 1.15s; }
.cinema .pathway.is-lit .pathway-node:nth-child(7) .dot  { animation-delay: 1.65s; }
.cinema .pathway.is-lit .pathway-node:nth-child(9) .dot  { animation-delay: 2.15s; }
.cinema .pathway.is-lit .pathway-node:nth-child(11) .dot { animation-delay: 2.65s; }
@keyframes cine-fuse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,208,201,0); }
  35%  { transform: scale(1.9); box-shadow: 0 0 14px 5px var(--cine-glow); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,208,201,0); }
}
.cinema .pathway .pathway-link { position: relative; overflow: visible; }
.cinema .pathway .pathway-link::after {
  content: ""; position: absolute; inset: -1px 0;
  background: linear-gradient(90deg, var(--accent-tint), #fff, var(--accent-tint));
  transform: scaleX(0); transform-origin: left;
  opacity: 0;
}
.cinema .pathway.is-lit .pathway-link::after {
  animation: cine-fuse-link .55s linear both;
}
.cinema .pathway.is-lit .pathway-link:nth-child(2)::after  { animation-delay: .3s; }
.cinema .pathway.is-lit .pathway-link:nth-child(4)::after  { animation-delay: .8s; }
.cinema .pathway.is-lit .pathway-link:nth-child(6)::after  { animation-delay: 1.3s; }
.cinema .pathway.is-lit .pathway-link:nth-child(8)::after  { animation-delay: 1.8s; }
.cinema .pathway.is-lit .pathway-link:nth-child(10)::after { animation-delay: 2.3s; }
@keyframes cine-fuse-link {
  0%   { transform: scaleX(0); opacity: 1; transform-origin: left; }
  70%  { transform: scaleX(1); opacity: 1; transform-origin: left; }
  100% { transform: scaleX(1); opacity: 0; transform-origin: left; }
}

/* ------------------------------------------- gradient run: aurora drift */
.cinema .gradient-run { position: relative; overflow: hidden; }
.cinema .gradient-run::before {
  content: ""; position: absolute; inset: -30% -20%; pointer-events: none;
  background:
    radial-gradient(34% 40% at 24% 30%, rgba(79,208,201,.16), transparent 70%),
    radial-gradient(30% 36% at 78% 70%, rgba(150,240,234,.10), transparent 70%);
  animation: cine-aurora 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cine-aurora {
  from { transform: translate3d(-4%, -3%, 0) rotate(-1.5deg) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) rotate(1.5deg) scale(1.12); }
}

/* -------------------------------------------------------- film grain    */
.cinema .hero--center .grain,
.cinema .gradient-run .grain,
.cinema .cine-subhero .grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: cine-grain 1.2s steps(3) infinite;
}
@keyframes cine-grain {
  0%   { background-position: 0 0; }
  33%  { background-position: 60px -40px; }
  66%  { background-position: -50px 70px; }
  100% { background-position: 0 0; }
}

/* --------------------------------------- services: cinematic chapters  */
/* four wide night panels, alternating sides, each carrying its own slow
   ambient scene — no boxes, no hover tricks, just light and story        */
.chapters { display: grid; gap: 1.7rem; }
.chapter {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  background: linear-gradient(135deg, #022C53 0%, #024A6E 55%, #02677C 100%);
  border: 1px solid rgba(255,255,255,.10); border-radius: 22px; overflow: hidden;
  color: #fff; box-shadow: 0 18px 50px -18px rgba(0,30,60,.45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.chapter:hover {
  transform: translateY(-5px); color: #fff;
  box-shadow: 0 26px 64px -22px rgba(0,40,80,.55);
  border-color: rgba(255,255,255,.18);
}
.chapter:nth-child(even) { grid-template-columns: 1fr 1.05fr; }
.chapter:nth-child(even) .chapter-stage { order: 2; }
.chapter-stage {
  position: relative; display: grid; place-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem); min-height: 240px;
  background: radial-gradient(72% 84% at 50% 55%, rgba(79,208,201,.16), transparent 78%);
}
.chapter-art { width: min(100%, 430px); height: auto; }
.chapter-body { padding: clamp(1.8rem, 3.4vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; }
.chapter-num {
  font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1;
  color: rgba(190,245,240,.30); letter-spacing: .02em;
}
.chapter-body h3 { color: #fff; font-size: var(--step-2); margin-top: .55rem; }
.chapter-body p { color: rgba(255,255,255,.84); margin-top: .8rem; max-width: 52ch; }
.chapter-body .card-link { color: var(--accent-tint); margin-top: 1.3rem; }
.chapter-body .card-link:hover { color: #fff; }
@media (max-width: 820px) {
  .chapter, .chapter:nth-child(even) { grid-template-columns: 1fr; }
  .chapter:nth-child(even) .chapter-stage { order: 0; }
  .chapter-stage { min-height: 200px; }
}

/* ---- chapter scenes: slow, ambient, no hover changes ---- */
.ch { stroke: rgba(255,255,255,.9); }
.chapter-art { filter: drop-shadow(0 0 9px rgba(79,208,201,.30)); }

/* 01 · route to the flag */
.pm2-route { stroke: rgba(255,255,255,.38); stroke-dasharray: 1 11; }
.pm2-prog {
  stroke: #CFFCF8; stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(79,208,201,.85));
  animation: pm2-draw 7s linear infinite;
}
@keyframes pm2-draw {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  86%  { stroke-dashoffset: 0; opacity: 1; }
  96%  { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}
.pm2-base { stroke: rgba(255,255,255,.85); fill: rgba(255,255,255,.18); }
.pm2-m { stroke: rgba(255,255,255,.75); fill: transparent; transform-box: fill-box; transform-origin: center; }
.pm2-m1 { animation: pm2-pass 7s var(--ease) infinite; }
.pm2-m2 { animation: pm2-pass 7s var(--ease) 1.6s infinite; }
@keyframes pm2-pass {
  0%, 22% { fill: transparent; }
  30%     { fill: rgba(255,255,255,.95); transform: scale(1.25); }
  38%, 100% { fill: rgba(255,255,255,.30); transform: scale(1); }
}
.pm2-flag path:first-child { stroke: rgba(255,255,255,.9); }
.pm2-cloth { fill: #fff; stroke: none; transform-box: fill-box; transform-origin: left center; animation: pm2-wave 3.2s ease-in-out infinite; }
@keyframes pm2-wave { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-4deg); } }
.pm2-comet { fill: #fff; filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); animation: pm2-comet 7s linear infinite; }
@keyframes pm2-comet { 0% { opacity: 0; } 4% { opacity: 1; } 60% { opacity: 1; } 70%,100% { opacity: 0; } }

/* 02 · the tangle becomes a line */
.po2-knot {
  stroke: rgba(255,255,255,.55); stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: po2-knot 9s var(--ease) infinite;
}
@keyframes po2-knot {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  26%  { stroke-dashoffset: 0; }
  44%  { stroke-dashoffset: 0; opacity: 1; }
  56%  { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}
.po2-line {
  stroke: #CFFCF8; stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 7px rgba(79,208,201,.9));
  animation: po2-line 9s var(--ease) infinite;
}
@keyframes po2-line {
  0%, 48% { stroke-dashoffset: 100; opacity: 1; }
  64%     { stroke-dashoffset: 0; opacity: 1; }
  92%     { stroke-dashoffset: 0; opacity: 1; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
.po2-n { stroke: rgba(255,255,255,.85); fill: transparent; }
.po2-n1 { animation: po2-lit 9s var(--ease) infinite; }
.po2-n2 { animation: po2-lit 9s var(--ease) .6s infinite; }
.po2-n3 { animation: po2-lit 9s var(--ease) 1.2s infinite; }
@keyframes po2-lit {
  0%, 50% { fill: transparent; }
  60%, 88% { fill: rgba(255,255,255,.85); }
  100% { fill: transparent; }
}
.po2-pulse { fill: #fff; filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); animation: po2-pulse 9s linear infinite; }
@keyframes po2-pulse { 0%, 60% { opacity: 0; } 64%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* 03 · constellation linking up */
.ai2-l {
  stroke: rgba(190,245,240,.55); stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: ai2-link 10s ease-in-out infinite;
}
.ai2-l2 { animation-delay: .5s; } .ai2-l3 { animation-delay: 1s; }
.ai2-l4 { animation-delay: 1.5s; } .ai2-l5 { animation-delay: 2s; }
.ai2-l6 { animation-delay: 2.5s; } .ai2-l7 { animation-delay: 3s; }
.ai2-l8 { animation-delay: 3.5s; } .ai2-l9 { animation-delay: 4s; }
@keyframes ai2-link {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  6%   { opacity: .9; }
  22%  { stroke-dashoffset: 0; }
  74%  { stroke-dashoffset: 0; opacity: .55; }
  88%  { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}
.ai2-n { fill: #fff; animation: ai2-tw 4.5s ease-in-out infinite; }
.ai2-nb { animation-delay: .6s; } .ai2-nc { animation-delay: 1.2s; }
.ai2-nd { animation-delay: 1.8s; } .ai2-ne { animation-delay: 2.4s; }
.ai2-nf { animation-delay: 3s; } .ai2-ng { animation-delay: 3.6s; }
@keyframes ai2-tw { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ai2-core { fill: #fff; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 9px rgba(255,255,255,.9)); animation: ai2-core 5s ease-in-out infinite; }
@keyframes ai2-core { 0%,100% { transform: scale(.82); } 50% { transform: scale(1.12); } }
.ai2-halo { stroke: rgba(190,245,240,.5); fill: none; transform-box: fill-box; transform-origin: center; animation: ai2-halo 5s ease-in-out infinite; }
@keyframes ai2-halo { 0%,100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.25); opacity: .9; } }

/* 04 · the cycle turns around people; light rises */
.cm2-ring path { stroke: rgba(255,255,255,.85); fill: none; }
.cm2-ring { transform-box: fill-box; transform-origin: center; animation: cm2-turn 18s linear infinite; }
@keyframes cm2-turn { to { transform: rotate(360deg); } }
.cm2-p circle { fill: #fff; }
.cm2-p path { stroke: rgba(255,255,255,.9); fill: none; }
.cm2-p { transform-box: fill-box; transform-origin: center bottom; }
.cm2-p1 { animation: cm2-bob 5.2s ease-in-out infinite; }
.cm2-p2 { animation: cm2-bob 5.2s ease-in-out .8s infinite; }
.cm2-p3 { animation: cm2-bob 5.2s ease-in-out 1.6s infinite; }
@keyframes cm2-bob { 0%,100% { transform: translateY(1.6px); } 50% { transform: translateY(-1.6px); } }
.cm2-s { fill: rgba(220,252,249,.95); animation: cm2-rise 6s ease-in infinite; }
.cm2-s2 { animation-delay: 1.5s; } .cm2-s3 { animation-delay: 3s; } .cm2-s4 { animation-delay: 4.5s; }
@keyframes cm2-rise {
  0%   { transform: translateY(8px); opacity: 0; }
  12%  { opacity: .9; }
  55%  { transform: translateY(-34px); opacity: 0; }
  100% { transform: translateY(-34px); opacity: 0; }
}

/* ------------------------------------- industries: night scene tiles   */
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.scene-tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(155deg, #022B50 0%, #024361 55%, #026676 100%);
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
  color: #fff; box-shadow: 0 14px 40px -16px rgba(0,30,60,.40);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.scene-tile:hover {
  transform: translateY(-6px); color: #fff;
  box-shadow: 0 22px 54px -20px rgba(0,40,80,.5);
  border-color: rgba(255,255,255,.18);
}
.scene-stage { position: relative; aspect-ratio: 200 / 112; }
.scene-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 76% at 50% 56%, rgba(79,208,201,.22), transparent 78%);
}
/* refined two-tone line illustrations (in2): crisp, professional, light glow */
.in2-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.in2-art * { transform-box: fill-box; }
.scene-stage .in2-art { filter: drop-shadow(0 0 3px rgba(127,233,225,.30)); }
.in2-main { stroke: rgba(255,255,255,.92); }
.in2-soft { stroke: rgba(255,255,255,.50); }
.in2-acc  { stroke: #7FE9E1; }

/* Logistik — speed lines breathe behind the truck */
.lg2-speed line { stroke: rgba(255,255,255,.55); animation: in2-speed 2.8s ease-in-out infinite; }
.lg2-speed line:nth-child(2) { animation-delay: .45s; }
.lg2-speed line:nth-child(3) { animation-delay: .9s; }
@keyframes in2-speed {
  0%, 100% { opacity: .12; transform: translateX(0); }
  50%      { opacity: .85; transform: translateX(-7px); }
}

/* Lager — stock breathes softly, shelf by shelf */
.in2-wh rect { animation: in2-breathe 6.5s ease-in-out infinite; }
.wh2-b2 { animation-delay: .8s; } .wh2-b3 { animation-delay: 1.6s; }
.wh2-b4 { animation-delay: 2.4s; } .wh2-b5 { animation-delay: 3.2s; }
.wh2-b6 { animation-delay: 4s; } .wh2-b7 { animation-delay: 4.8s; }
.wh2-b8 { animation-delay: 5.6s; }
@keyframes in2-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Produktion — the robot arm sweeps slowly over the line */
.pr2-arm {
  transform-box: view-box; transform-origin: 101px 82px;
  animation: pr2-sway 8s ease-in-out infinite;
}
@keyframes pr2-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.pr2-i1, .pr2-i2 { animation: in2-breathe 7s ease-in-out infinite; }
.pr2-i2 { animation-delay: 3.5s; }

/* Detail — a quiet sparkle beside the bag */
.rt2-spark {
  transform-box: view-box; transform-origin: 122px 70px;
  animation: rt2-tw 3.8s ease-in-out infinite;
}
@keyframes rt2-tw {
  0%, 100% { opacity: .2; transform: scale(.75) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.05) rotate(8deg); }
}

/* Salgsorganisationer — a soft pulse travels the trend line */
.sl2-grid { opacity: .45; }
.sl2-line { filter: drop-shadow(0 0 4px rgba(127,233,225,.5)); }
.sl2-pulse { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); animation: sl2-pulse 8s linear infinite; }
@keyframes sl2-pulse { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.sl2-d { animation: in2-breathe 5s ease-in-out infinite; }
.sl2-d2 { animation-delay: 1.2s; } .sl2-d3 { animation-delay: 2.4s; }

/* Maritim — gentle bob, slow drifting waterline */
.mr2-ship { animation: mr2-bob 6.5s ease-in-out infinite; }
@keyframes mr2-bob { 0%, 100% { transform: translateY(1.4px); } 50% { transform: translateY(-1.4px); } }
.mr2-wave { animation: mr2-drift 6s linear infinite; }
@keyframes mr2-drift { to { transform: translateX(-16px); } }
.scene-body { padding: 1.45rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.scene-body h3 { color: #fff; font-size: var(--step-1); }
.scene-body p { color: rgba(255,255,255,.82); margin-top: .55rem; font-size: var(--step-0); }
.scene-body .card-link { color: var(--accent-tint); margin-top: auto; padding-top: 1.1rem; }
.scene-body .card-link:hover { color: #fff; }
@media (max-width: 980px) { .scene-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .scene-grid { grid-template-columns: 1fr; } }

/* --------------------------------------- welcoming light-section grade */
.cinema .section--mist { background: linear-gradient(180deg, #F3F8FA 0%, #E6F0F4 100%); }
.cinema .eyebrow::before { background: linear-gradient(90deg, var(--accent), var(--accent-tint)); height: 2px; border-radius: 2px; }
.cinema .feature-list { gap: .9rem; }
.cinema .feature-list li {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 1.05rem 1.2rem; box-shadow: 0 6px 18px -10px rgba(0,50,99,.10);
}
/* non-interactive elements stay still on hover — movement is reserved for
   things you can actually click (links, buttons, cards that lead somewhere) */
.cinema .value-row .v:hover { transform: none; box-shadow: none; border-color: var(--line); }
.cinema .pathway-node:hover .dot { transform: none; box-shadow: none; }
.cinema div.card:hover, .cinema form.card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.cinema div.card:hover .card-icon { transform: none; }
.cinema .feature-list svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  background: var(--gradient); color: #fff; margin-top: 0;
}

/* ----------------------------------------- Tilgang: hero, evening grade */
.cinema .approach-hero {
  background: linear-gradient(140deg, #012345 0%, #02457E 34%, #02778E 68%, #0FA3AD 100%);
  padding-block: calc(var(--sp-5) + 70px) var(--sp-6);
}
.cinema .approach-hero .hero-copy {
  max-width: 900px; margin-inline: auto; text-align: center;
  background: none; padding: 0;
}
.cinema .approach-hero h1 { color: #fff; text-shadow: 0 0 34px rgba(79,208,201,.30); margin-top: 1.4rem; }
.cinema .approach-hero .lead { color: rgba(255,255,255,.88); margin: 1.2rem auto 0; max-width: 62rem; }

/* --------------------------------------- Tilgang: method orbit makeover */
/* full-size centred orbit under the headline; the vertical room comes from
   tighter section paddings, not from shrinking the ring */
.cinema .approach-hero .improve-loop { width: min(660px, 92vw, 62vh); margin-top: var(--sp-3); }
.cinema .approach-hero { padding-block: calc(var(--sp-5) + 70px) var(--sp-3); }
.cinema .approach-hero .loop-hint { margin-top: var(--sp-3); }
.cinema .cm-band { padding-block: var(--sp-6) var(--sp-7); }
/* keep the centre text safely inside the ring: the card is measured by
   approach-orbit.js, which steps the font down (via this em scale) until the
   card's corners sit inside the orbit — no clipping, no truncation */
.cinema .loop-center-detail { width: 50%; }
.cinema .loop-step__num { font-size: 2.3em; }
.cinema .loop-step__title { font-size: 1.15em; }
.cinema .loop-step p { font-size: .95em; line-height: 1.5; }
@media (max-width: 600px) {
  .cinema .loop-step__num { font-size: 1.9em; }
}
/* faint echo rings extending the orbit outward — presence, not noise */
.cinema .improve-loop::before,
.cinema .improve-loop::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(255,255,255,.10);
}
.cinema .improve-loop::before { inset: -7%; animation: j-emb-turn 90s linear infinite; }
.cinema .improve-loop::after { inset: -15%; border-color: rgba(255,255,255,.06); animation: j-emb-turn 140s linear infinite reverse; }
/* centre detail: dark glass card floating inside the orbit */
.cinema .loop-center-detail {
  background: rgba(1, 20, 42, .38);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 18px 50px -22px rgba(0, 10, 30, .8), inset 0 0 40px rgba(79, 208, 201, .05);
}
.cinema .loop-step__num {
  background: linear-gradient(120deg, #9FECE6, #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* station labels: glass pills that ignite when active */
.cinema .loop-label {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: .42rem 1rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: none; font-size: 1rem;
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cinema .loop-label:hover, .cinema .loop-label:focus-visible {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff;
}
.cinema .loop-label.is-active {
  background: linear-gradient(120deg, #0151A1, #4FD0C9);
  border-color: transparent; color: #fff;
  box-shadow: 0 0 18px rgba(79, 208, 201, .45), 0 6px 18px -6px rgba(0, 20, 40, .6);
}
.cinema .loop-hint { letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
@media (max-width: 600px) {
  /* phones keep the stacked-chip layout from styles.css; the glass pills
     simply restyle those chips */
  .cinema .loop-center-detail { background: rgba(1, 20, 42, .45); }
}

/* ------------------------------------ Tilgang: change-management band  */
.cinema .cm-band {
  position: relative; overflow: hidden; color: #C9D4DE;
  background: linear-gradient(140deg, #012345 0%, #02457E 45%, #02778E 100%);
}
.cinema .cm-band::before {
  content: ""; position: absolute; inset: -30% -20%; pointer-events: none;
  background:
    radial-gradient(34% 40% at 24% 30%, rgba(79,208,201,.16), transparent 70%),
    radial-gradient(30% 36% at 78% 70%, rgba(150,240,234,.10), transparent 70%);
  animation: cine-aurora 16s ease-in-out infinite alternate;
}
.cinema .cm-band .container { position: relative; z-index: 1; }
.cinema .cm-band h2 { color: #fff; }
.cinema .cm-band .section-head p { color: rgba(255,255,255,.86); }
.cinema .cm-band .eyebrow { color: var(--accent-tint); }
.cinema .cm-band .eyebrow::before { background: var(--accent-tint); }
/* the three phases as a lit relay: glass scene-cards joined by pulse links */
.cm-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 1rem; margin-top: 2.8rem;
}
.cm-stage {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.20);
  border-radius: 18px; padding: 1.5rem 1.5rem 1.4rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-align: center; color: rgba(255,255,255,.85);
  font-family: var(--font-head); font-size: var(--step--1);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
/* cm-stage cards are informational — no hover motion */
.cm-stage b { color: #fff; font-size: var(--step-0); letter-spacing: .04em; margin-top: .3rem; }
.cm-scene { width: min(150px, 64%); }
.cm-scene svg { width: 100%; height: auto; filter: drop-shadow(0 0 3px rgba(127,233,225,.30)); }
.cm-link {
  position: relative; align-self: center;
  width: clamp(26px, 4.5vw, 60px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(159,236,232,.22), rgba(159,236,232,.55));
}
.cm-link::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(79,208,201,.6);
  animation: cm-run 3.4s ease-in-out infinite;
}
.cm-link:nth-of-type(4)::after { animation-delay: 1.7s; }
@keyframes cm-run {
  0%   { left: 0; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
/* phase scene motion */
.cmf-flag { transform-box: fill-box; transform-origin: left center; animation: pm2-wave 3.4s ease-in-out infinite; }
.cmu-loop { transform-box: view-box; transform-origin: 60px 25px; animation: cm2-turn 14s linear infinite; }
.cme-anchor { transform-box: view-box; transform-origin: 52px 22px; animation: cme-sway 6.5s ease-in-out infinite; }
@keyframes cme-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (max-width: 820px) {
  .cm-flow { grid-template-columns: 1fr; }
  .cm-link { width: 2px; height: 30px; justify-self: center; background: linear-gradient(180deg, rgba(159,236,232,.22), rgba(159,236,232,.55)); }
  .cm-link::after { left: 50%; top: 0; margin: 0 0 0 -4px; animation: cm-run-v 3.4s ease-in-out infinite; }
  @keyframes cm-run-v {
    0%   { top: 0; opacity: 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { top: calc(100% - 8px); opacity: 0; }
  }
}

/* ----------------------------------- Tilgang: "Hvorfor det virker" cards */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.why-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 2rem 1.8rem 1.8rem;
  box-shadow: 0 10px 30px -18px rgba(0,50,99,.18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.why-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--gradient);
}
.why-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--gradient);
  box-shadow: 0 8px 18px -8px rgba(2,126,150,.6);
  margin-bottom: 1.1rem;
}
.why-icon svg { width: 24px; height: 24px; }
.why-card b {
  display: block; font-family: var(--font-head); font-size: var(--step-1); line-height: 1.2;
  background: linear-gradient(120deg, var(--ink), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.why-card p { margin-top: .6rem; font-size: var(--step--1); }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* Tilgang CTA: evening grade instead of flat ink */
.cinema .cta-band.section--ink {
  background: linear-gradient(150deg, #012345 0%, #023D6B 45%, #02778E 100%);
}

/* ===================================================== shared sub-heroes */
/* every interior page opens on the same evening grade as the front page —
   one continuous world; each page adds its own signature light layer */
.cinema .cine-subhero {
  position: relative; overflow: hidden; border-bottom: 0;
  background: linear-gradient(140deg, #012345 0%, #02457E 34%, #02778E 68%, #0FA3AD 100%);
  padding-block: calc(var(--sp-5) + 80px) var(--sp-6);
}
.cinema .cine-subhero::before {
  content: ""; position: absolute; inset: -30% -20%; pointer-events: none;
  background:
    radial-gradient(36% 44% at 22% 24%, rgba(79,208,201,.18), transparent 70%),
    radial-gradient(30% 38% at 82% 74%, rgba(150,240,234,.12), transparent 70%);
  animation: cine-aurora 18s ease-in-out infinite alternate;
  will-change: transform;
}
.cinema .cine-subhero > .container { position: relative; z-index: 2; }
.cinema .cine-subhero h1 { color: #fff; text-shadow: 0 0 34px rgba(79,208,201,.30); margin-top: 1rem; }
.cinema .cine-subhero .lead { color: rgba(255,255,255,.88); }
.cinema .cine-subhero .breadcrumb,
.cinema .cine-subhero .breadcrumb a { color: rgba(255,255,255,.72); }
.cinema .cine-subhero .breadcrumb a:hover { color: #fff; }
.cinema .cine-subhero .eyebrow { color: var(--accent-tint); }
.cinema .cine-subhero .eyebrow::before { background: var(--accent-tint); }
.cinema .cine-subhero .grain { z-index: 1; }
.cinema .about-hero .hero-copy > p:not(.breadcrumb),
.cinema .contact-hero .hero-copy > p:not(.breadcrumb) {
  color: rgba(255,255,255,.88); font-size: var(--step-1);
  margin-top: 1.2rem; max-width: 72ch;
}

/* generic dark aurora content band (white headings, glass content) */
.cine-band {
  position: relative; overflow: hidden; color: #C9D4DE;
  background: linear-gradient(140deg, #012345 0%, #02457E 45%, #02778E 100%);
}
.cine-band::before {
  content: ""; position: absolute; inset: -30% -20%; pointer-events: none;
  background:
    radial-gradient(34% 40% at 24% 30%, rgba(79,208,201,.16), transparent 70%),
    radial-gradient(30% 36% at 78% 70%, rgba(150,240,234,.10), transparent 70%);
  animation: cine-aurora 16s ease-in-out infinite alternate;
}
.cine-band > .container { position: relative; z-index: 1; }
/* night-run: when a dark band flows straight into the CTA, both sections
   share one continuous grade — no hard seam between them */
.night-run {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #012345 0%, #02457E 36%, #02778E 70%, #0A93A4 100%);
}
.night-run::before {
  content: ""; position: absolute; inset: -30% -20%; pointer-events: none;
  background:
    radial-gradient(34% 40% at 24% 26%, rgba(79,208,201,.16), transparent 70%),
    radial-gradient(30% 36% at 78% 74%, rgba(150,240,234,.10), transparent 70%);
  animation: cine-aurora 16s ease-in-out infinite alternate;
}
.night-run > section { position: relative; z-index: 1; }
.night-run > .cine-band,
.cinema .night-run > .cta-band.section--ink { background: none; }
.night-run > .cine-band::before { display: none; }
.cine-band h2 { color: #fff; }
.cine-band .section-head p { color: rgba(255,255,255,.86); }
.cine-band .eyebrow { color: var(--accent-tint); }
.cine-band .eyebrow::before { background: var(--accent-tint); }
.cine-band .card-link { color: var(--accent-tint); }
.cine-band .card-link:hover { color: #fff; }

/* ===================================== Ydelser: convergence hero artwork */
/* four strands of light — the four disciplines — merge into one clear beam */
.ydl-merge {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: .55;
}
.ydl-merge .yd-strand { stroke: rgba(255,255,255,.30); stroke-width: 2; fill: none; }
.ydl-merge .yd-beam {
  stroke: #CFFCF8; stroke-width: 2.6; fill: none;
  filter: drop-shadow(0 0 7px rgba(79,208,201,.9));
  animation: ydl-beam 6s ease-in-out infinite;
}
@keyframes ydl-beam { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.ydl-merge .yd-node {
  fill: #CFFCF8; filter: drop-shadow(0 0 9px rgba(79,208,201,.95));
  animation: ydl-beam 6s ease-in-out infinite;
}
.ydl-merge .yd-dot { fill: rgba(255,255,255,.55); }
.ydl-merge .yd-comet { fill: #fff; filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); }
@media (max-width: 900px) { .ydl-merge { display: none; } }

/* ------------------------------------------- Ydelser: the four acts     */
/* each service is one contained panel — night stage on one side, the full
   story on calm paper on the other; the scene drifts gently with you      */
.acts { display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); }
.act {
  display: grid; grid-template-columns: .85fr 1.15fr; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 48px -24px rgba(0,50,99,.18);
}
.act:nth-child(even) .act-stage { order: 2; border-radius: 0 23px 23px 0; }
.act-stage {
  position: relative; display: grid; place-items: center;
  padding: clamp(1.8rem, 3vw, 2.6rem); min-height: 420px;
  border-radius: 23px 0 0 23px;
  background: linear-gradient(160deg, #022B56 0%, var(--ta, #02406B) 58%, var(--tb, #027E96) 140%);
}
.act-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 80% at 50% 56%, rgba(79,208,201,.20), transparent 78%);
}
/* the scene keeps you company while the longer text side scrolls */
.act-scene { position: sticky; top: calc(50vh - 140px); width: 100%; display: grid; place-items: center; }
.act-art { width: min(100%, 400px); height: auto; filter: drop-shadow(0 0 9px rgba(79,208,201,.32)); }
.act-num {
  position: absolute; top: .6rem; right: 1.4rem;
  font-family: var(--font-head); font-weight: 700; line-height: 1;
  font-size: clamp(3.6rem, 6vw, 5.4rem); letter-spacing: .01em;
  color: rgba(190,245,240,.18); pointer-events: none;
}
.act-name {
  position: absolute; left: 1.8rem; bottom: 1.4rem;
  font-family: var(--font-head); font-weight: 500; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.act-name::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin-right: .6rem;
  background: rgba(127,233,225,.7);
}
.act-body { padding: clamp(1.8rem, 3.2vw, 3rem); }
.act-body h2 { font-size: var(--step-3); margin-top: .7rem; }
.act-body > p { margin-top: 1rem; }
.act-body .feature-list { margin-top: 1.6rem; }
/* the act headline gets the same blur-rise as section heads */
.cinema .act-body.reveal h2 {
  opacity: 0; transform: translateY(26px); filter: blur(8px);
  transition: opacity .9s var(--ease), transform 1.05s cubic-bezier(.16,1,.3,1), filter .9s var(--ease);
}
.cinema .act-body.reveal.is-in h2 { opacity: 1; transform: none; filter: blur(0); transition-delay: .08s; }
.cinema .act-stage.reveal.is-in { animation: cine-card-in .95s cubic-bezier(.16,1,.3,1) backwards; }
@media (max-width: 880px) {
  .act, .act:nth-child(even) { grid-template-columns: 1fr; }
  .act:nth-child(even) .act-stage { order: 0; }
  .act-stage, .act:nth-child(even) .act-stage { border-radius: 23px 23px 0 0; min-height: 280px; }
  .act-scene { position: static; }
}

/* Ydelser: pathway on the dark band becomes a run of glass pills */
.cine-band .pathway-node {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px; padding: .5rem 1.1rem; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cine-band .pathway-link { opacity: .75; }

/* ============================== Hvor vi arbejder: skyline + sector tiles */
/* a quiet working skyline along the hero's horizon — the worlds we work in */
.ind-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  width: 100%; height: clamp(120px, 22vw, 210px);
  pointer-events: none; opacity: .85;
}
.ind-skyline .sky-main { stroke: rgba(255,255,255,.85); }
.ind-skyline .sky-soft { stroke: rgba(255,255,255,.45); }
.ind-skyline .sky-acc  { stroke: #7FE9E1; }
.ind-skyline .sky-dot  { fill: #CFFCF8; filter: drop-shadow(0 0 6px rgba(79,208,201,.9)); animation: ydl-beam 5s ease-in-out infinite; }
.ind-skyline .sky-dot2 { animation-delay: 1.6s; }
.ind-skyline .sky-dot3 { animation-delay: 3.2s; }
.cinema .ind-hero { padding-bottom: clamp(8rem, 20vw, 13rem); }
.ind-skyline .sky-hook { animation: sky-hook 7s ease-in-out infinite; }
@keyframes sky-hook { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* sector tiles: the front page's night scenes, grown up to carry the full
   story — one calm, uniform grid; daylight-bright like the hero banner */
.sector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.sector-tile,
.sector-tile:hover {
  cursor: default; transform: none;
  background: linear-gradient(150deg, #02457E 0%, #02778E 58%, #0BA0AC 125%);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 40px -16px rgba(0,30,60,.40);
}
.sector-tile .scene-stage { flex: none; }
.sector-tile .scene-stage::before {
  background: radial-gradient(62% 76% at 50% 56%, rgba(150,240,234,.30), transparent 78%);
}
.sector-tile .in2-art { filter: drop-shadow(0 0 5px rgba(170,255,248,.45)); }
.sector-tile .scene-body { padding: 1.55rem 1.8rem 1.7rem; }
.sector-tile .scene-body h3 { font-size: var(--step-2); }
.sector-tile .scene-body p { color: rgba(255,255,255,.9); max-width: 64ch; }
.sector-tile .ind-tags { margin-top: 1.1rem; }
.sector-num {
  position: absolute; top: .9rem; left: 1.3rem; z-index: 1;
  font-family: var(--font-head); font-weight: 700; line-height: 1;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: rgba(220,250,247,.30); pointer-events: none;
}
@media (max-width: 880px) {
  .sector-grid { grid-template-columns: 1fr; }
}

/* the common thread: one line of light passing through all three pillars */
.thread-line {
  position: relative; height: 2px; margin: 2.6rem 0 2.2rem; border-radius: 2px;
  background: linear-gradient(90deg, rgba(159,236,232,.10), rgba(159,236,232,.55), rgba(159,236,232,.10));
}
.thread-line::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px rgba(79,208,201,.65);
  animation: cm-run 5s ease-in-out infinite;
}
.cine-band .value-row { margin-top: 0; }
.cine-band .value-row .v,
.cine-band .value-row .v:hover {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: none; transform: none;
}
.cine-band .value-row .v b { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.cine-band .value-row .v p { color: rgba(255,255,255,.85); }

/* ============================================ Om os: story + portrait    */
/* founder portrait scene: night band, glowing frame, echo ring */
.founder-scene p { color: rgba(255,255,255,.88); }
.founder-scene .muted { color: rgba(255,255,255,.62); }
.founder-scene .prose b { color: #fff; }
.founder-frame { position: relative; }
.founder-frame::before {
  content: ""; position: absolute; inset: -9% auto auto -9%; width: 58%; aspect-ratio: 1;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 50%;
  animation: j-emb-turn 90s linear infinite; pointer-events: none;
}
.founder-frame::after {
  content: ""; position: absolute; inset: 8% -10% -8% 12%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgba(79,208,201,.30), transparent 72%);
  pointer-events: none;
}
.founder-frame picture { display: block; }
.founder-frame .founder-photo {
  width: 100%; height: auto; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 30px 70px -28px rgba(0,10,30,.85), 0 0 40px -8px rgba(79,208,201,.25);
}

/* background tiles: the experience areas in the site's own icon language —
   same bright night grade as the sector tiles; informational, so no hover  */
.exp-tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(150deg, #02457E 0%, #02778E 58%, #0BA0AC 125%);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  color: #fff; box-shadow: 0 14px 40px -16px rgba(0,30,60,.40);
}
.exp-tile .scene-stage { flex: none; }
.exp-tile .scene-stage::before {
  background: radial-gradient(62% 76% at 50% 56%, rgba(150,240,234,.30), transparent 78%);
}
.exp-tile .in2-art, .exp-tile .exp-art { filter: drop-shadow(0 0 5px rgba(170,255,248,.45)); }
.exp-tile .exp-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.exp-tile .scene-body { padding: 1.45rem 1.6rem 1.6rem; }
.cinema .exp-tile.reveal.is-in { animation: cine-card-in .95s cubic-bezier(.16,1,.3,1) backwards; }

/* ========================================== Kontakt: the signal carries */
/* a message travels a long dotted arc and lands as rings of light — the
   conversation starting */
.contact-wave {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: .55;
}
.contact-wave .ct-line {
  stroke: rgba(255,255,255,.32); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-dasharray: 2 11;
}
.contact-wave .ct-node { fill: #CFFCF8; filter: drop-shadow(0 0 9px rgba(79,208,201,.95)); animation: ydl-beam 5s ease-in-out infinite; }
.contact-wave .ct-dot { fill: rgba(255,255,255,.55); }
.contact-wave .ct-ring {
  fill: none; stroke: rgba(159,236,232,.55); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: ct-ring 5.5s ease-out infinite;
}
.contact-wave .ct-ring2 { animation-delay: 1.8s; }
.contact-wave .ct-ring3 { animation-delay: 3.6s; }
@keyframes ct-ring {
  0%   { transform: scale(.15); opacity: .9; }
  70%  { opacity: .2; }
  100% { transform: scale(1); opacity: 0; }
}
.contact-wave .ct-comet { fill: #fff; filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); }
@media (max-width: 900px) { .contact-wave { display: none; } }

/* contact details: gradient medallion icons, calm rows */
.cinema .contact-item { border-top-color: var(--line-soft); }
.cinema .contact-item svg {
  width: 44px; height: 44px; padding: 10px; margin-top: 0;
  border-radius: 13px; background: var(--gradient); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(2,126,150,.55);
}
/* the form: one polished surface with the brand thread across the top */
.cinema #contact-form {
  position: relative; overflow: hidden;
  border-radius: 20px; border-color: var(--line);
  box-shadow: 0 18px 50px -26px rgba(0,50,99,.30);
}
.cinema #contact-form::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--gradient);
}

/* ------------------------------------------------------------- mobile  */
@media (max-width: 700px) {
  html.cinema:not(.cinema-static) .cine-pin { height: 128vh; }
  .cine-bar { height: 8vh; }
  .cine-beam { width: 2px; }
  .cine-beam-head { width: 8px; height: 8px; left: -3px; }
  .cine-cue { display: none; }
}

/* ------------------------------------------------------ reduced motion */
.cinema-static .cine-bar,
.cinema-static .cine-beam,
.cinema-static .cine-beam-head,
.cinema-static .cine-cue,
.cinema-static .grain { display: none !important; }
.cinema-static .cine-w > span { transform: none; filter: none; opacity: 1; transition: none; }
.cinema-static .section-head.reveal h2,
.cinema-static .section-head.reveal .eyebrow { opacity: 1; transform: none; filter: none; transition: none; }
.cinema-static .gradient-run::before { animation: none; }
.cinema-static .svc-card.reveal.is-in { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cine-bar, .cine-beam, .cine-beam-head, .cine-cue, .grain { display: none !important; }
  .cine-w > span { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
  .cinema .gradient-run::before { animation: none; }
  .cinema .svc-card.reveal.is-in,
  .cinema .scene-tile.reveal.is-in,
  .cinema .chapter.reveal.is-in,
  .cinema .why-card.reveal.is-in { animation: none; }
  /* Tilgang facelift pieces: still and legible */
  .cm-link::after { animation: none !important; opacity: .7; left: calc(50% - 4px); }
  .cmf-flag, .cmu-loop, .cme-anchor { animation: none !important; }
  /* chapter scenes: freeze in a complete, legible end-state */
  .ch * { animation: none !important; }
  .pm2-comet, .po2-pulse { display: none; }
  .pm2-prog, .po2-line, .ai2-l { stroke-dashoffset: 0; opacity: 1; }
  .po2-knot { stroke-dashoffset: 0; opacity: .22; }
  .pm2-m, .po2-n { fill: rgba(255,255,255,.5); }
  .ai2-n, .ai2-core { opacity: 1; }
  .cm2-s { display: none; }
  /* refined industry icons: freeze legibly */
  .in2 * { animation: none !important; }
  .sl2-pulse { display: none; }
  .in2-wh rect, .pr2-i1, .pr2-i2, .sl2-d { opacity: 1; }
  .lg2-speed line { opacity: .4; }
  .rt2-spark { opacity: .8; }
  .cinema .cm-band::before { animation: none; }
  /* subpage redesign pieces: still and legible */
  .cinema .cine-subhero::before, .cine-band::before, .night-run::before { animation: none; }
  .ydl-merge *, .ind-skyline *, .contact-wave * { animation: none !important; }
  .ydl-merge .yd-comet, .contact-wave .ct-comet { display: none; }
  .contact-wave .ct-ring { opacity: .25; transform: scale(.55); }
  .contact-wave .ct-ring2, .contact-wave .ct-ring3 { display: none; }
  .thread-line::after { animation: none; left: calc(50% - 4.5px); opacity: .8; }
  .founder-frame::before { animation: none; }
  .cinema .act-stage.reveal.is-in,
  .cinema .exp-tile.reveal.is-in { animation: none; }
  .cinema .act-body.reveal h2 { opacity: 1; transform: none; filter: none; transition: none; }
}