/* Chemify — home page sections. Base tokens, header, buttons and shared blocks live in main.css. */

.mono { font: 500 12px/1.45 var(--mono); letter-spacing: .01em; text-transform: none; }
.btn--dark { background: var(--graphite); color: var(--white); }
.btn--dark:hover { background: var(--steel); }

/* ── dot emblems: one illustration language for the whole page — a ring of dots with a figure of dots inside.
   Dots start scattered and gather when the emblem (or a parent) gets the .in class. ── */
svg.dots { overflow: visible; }
svg.dots circle { fill: var(--dot, var(--teal)); stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.in svg.dots circle, svg.dots.in circle, svg.dots .in circle { transform: none; opacity: 1; transition-delay: calc(var(--d, 0s) + var(--cd, 0s)); }
svg[data-morph] .fig:not(.in) circle { transform: scale(0); opacity: 0; transition-delay: 0s; transition-duration: .25s; }
.no-js svg.dots circle { transform: none; opacity: 1; }

/* ── hero: shared ── */
.hero { position: relative; min-height: max(720px, 100svh); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.hsearch {
  position: relative; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-radius: 999px;
  border: 1px solid transparent; transition: border-color .2s, background .2s;
}
.hsearch > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; opacity: .75; }
.hsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 15px; }
.hsearch input:focus { outline: none; }
.hsearch--glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: var(--white); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hsearch--glass input::placeholder { color: rgba(255, 255, 255, .6); }
.hsearch--glass:focus-within { border-color: var(--aqua); }
.hsearch__res {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 8; padding: 6px 20px 14px; border-radius: 20px; min-width: 300px;
  background: var(--mist); color: var(--graphite); box-shadow: 0 30px 70px rgba(0, 0, 0, .3); max-height: 420px; overflow: auto;
}

/* ── hero B · macro texture ── */
.hb { background: var(--graphite); color: var(--white); padding-top: calc(var(--hdr) + clamp(28px, 4vh, 56px)); }
@media (min-width: 701px) { .hb { height: 100vh; height: 100svh; min-height: 680px; } }
.hb__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hb__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: drift 26s ease-in-out infinite alternate; }
/* the photo stays as it is, only a neutral shade under the text */
.hb__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 32, 35, .55), rgba(30, 32, 35, .15) 55%, transparent), linear-gradient(180deg, rgba(30, 32, 35, .35), transparent 30%, transparent 70%, rgba(30, 32, 35, .45)); }
/* the looping video fades in over the photo once it plays; the shade (::after) stays above both */
.hb__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.hb__video.is-on { opacity: 1; } .hb__video.is-top { z-index: 1; }
/* the crossfading copy is raised inside its own photo box only, never above the shade drawn over the photo */
.duo:has(> .hb__video) { isolation: isolate; } .lines__tex::after { z-index: 2; }
@keyframes drift { to { transform: scale(1.16) translate(-1.5%, -1%); } }
/* once the video plays over it the photo stops drifting: two large moving layers cost twice as much */
.hb__bg:has(.hb__video.is-on) img { animation: none; }
/* video preloader: a 2px line on the bottom edge, a running dash until the size is known, then a fill that tracks the buffered part */
.vload { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; overflow: hidden; background: rgba(255, 255, 255, .14); pointer-events: none; transition: opacity .6s .15s; }
.vload b { position: absolute; inset: 0; background: var(--teal, #4CB0B5); transform-origin: left; transform: scaleX(.18); animation: vload 1.3s ease-in-out infinite; transition: transform .4s ease-out; }
.vload.is-known b { animation: none; transform: scaleX(0); }
.vload.is-done { opacity: 0; }
@keyframes vload { from { transform: translateX(-100%) scaleX(.18); } to { transform: translateX(100%) scaleX(.18); } }
.hb > :not(.hb__bg) { position: relative; z-index: 1; }
.hb__band { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
.hb__label { font-weight: 300; font-size: clamp(1.2rem, 1.8vw, 1.8rem); line-height: 1.2; max-width: 26ch; text-transform: none; letter-spacing: .01em; }
.hb__meta { color: rgba(255, 255, 255, .7); text-align: right; padding-top: 4px; }
.hb__globe { width: clamp(52px, 5vw, 80px); fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1; }
.hb__globe .spin-y { transform-origin: 50px 50px; animation: globe 7s linear infinite; }
.hb__globe .d2 { animation-delay: -3.5s; }
@keyframes globe { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.hb__rule { width: 100%; margin: clamp(22px, 3vw, 36px) 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .5); }
.hb__statement { font-weight: 300; font-size: clamp(2.8rem, 7.6vw, 9.4rem); line-height: .98; letter-spacing: -.025em; }
.hb__statement .ln:nth-child(2) > span, .hb__stagger .s2 > span { --d: .1s; }
.hb__statement .ln:nth-child(3) > span, .hb__stagger .s3 > span { --d: .2s; }
.hb__cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* layout 3 — staggered numbered lines on the grid, facts strip */
.hb--3 .hb__band { grid-template-columns: 1fr auto; align-items: center; }
.hb__stagger { margin: auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 6px; padding-top: 32px; padding-bottom: 32px; font-weight: 300; font-size: clamp(2.6rem, 6.8vw, 8.4rem); line-height: 1; letter-spacing: -.025em; }
.hb__stagger .ln { padding-bottom: .1em; }
.hb__stagger i { font-style: normal; font-size: 12px; letter-spacing: .08em; color: var(--aqua); vertical-align: top; margin-right: 16px; position: relative; top: .6em; }
.hb__stagger .s1 { grid-column: 1 / -1; }
.hb__stagger .s2 { grid-column: 4 / -1; }
.hb__stagger .s3 { grid-column: 2 / -1; }
.hb__strip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 32px; align-items: end; padding-top: 22px; padding-bottom: 32px; }
.hb__strip dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hb__strip dt { font: 500 11px/1.3 var(--mono); letter-spacing: .01em; text-transform: none; color: rgba(255, 255, 255, .6); }
.hb__strip dd { font-weight: 300; font-size: clamp(1.8rem, 2.8vw, 2.8rem); letter-spacing: -.015em; color: var(--aqua); margin-top: 6px; }

@media (max-width: 1100px) {
  .hb__base { grid-template-columns: 1fr 1fr; }
  .hb__base > p { grid-column: 1 / -1; }
  .hb__ed .hb__statement { grid-column: 1 / -1; }
  .hb__side { grid-column: 1 / -1; }
  .hb__strip { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hb__band { grid-template-columns: 1fr auto; }
  .hb__meta { display: none; }
  .hb--3 .hb__band { grid-template-columns: 1fr; }
  .hb__statement--center { text-align: left; }
  .hb__base { grid-template-columns: 1fr; }
  .hb__cta .btn { flex: 1; }
  .hb__stagger .s1, .hb__stagger .s2, .hb__stagger .s3 { grid-column: 1 / -1; }
  .hb__stagger i { display: block; top: 0; margin: 0 0 6px; }
  .hb__strip dl { grid-template-columns: 1fr 1fr; }
}

/* ── product line cards: dot emblems ── */
.lcard__art svg.dots { width: 180px; height: 180px; max-width: 100%; --dot: var(--teal-ink); }
@media (max-width: 560px) { .lcard__art svg.dots { width: 140px; height: 140px; } }

/* ── about · shared ── */
.about { --grey-bg: #CED8DA; }
.about .label { color: var(--teal-ink); }
.about svg.dots { --dot: var(--teal-ink); }

/* 1 · split: photo + mission | statement + rows */
.ab1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--grey-bg); }
.ab1__photo { position: relative; min-height: min(100svh, 900px); overflow: hidden; }
.ab1__photo .duo { position: absolute; inset: 0; }
.ab1__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(42, 44, 48, .85)); }
.ab1__mission { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0; padding: clamp(28px, 4vw, 64px) clamp(24px, 4vw, 64px) clamp(28px, 4vw, 56px) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); color: var(--white); display: grid; gap: 14px; }
.ab1__mission .mono { color: var(--aqua); }
.ab1__mission p { font-weight: 300; font-size: clamp(1.4rem, 2.3vw, 2.3rem); line-height: 1.15; letter-spacing: -.015em; max-width: 22ch; }
.ab1__body { display: grid; gap: 24px; align-content: center; padding: var(--sec) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) var(--sec) clamp(32px, 5vw, 96px); }
.ab1__title { font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.18; letter-spacing: -.015em; color: var(--graphite); max-width: 24ch; }
.ab1__rows { display: grid; margin-top: 16px; }
.ab1__rows li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; padding: 18px 0; border-top: 1px solid rgba(50, 52, 57, .14); }
.ab1__rows li:nth-child(2) { --d: .1s; } .ab1__rows li:nth-child(3) { --d: .2s; }
.ab1__rows svg { width: 96px; height: 96px; }
.ab1__rows h3 { font-weight: 500; font-size: 18px; }
.ab1__rows p { color: var(--steel); font-size: 15px; margin-top: 4px; max-width: 40ch; }
@media (max-width: 900px) { .ab1 { grid-template-columns: 1fr; } .ab1__photo { min-height: 460px; } .ab1__body { padding: 56px var(--gut); } }
/* on a narrow screen the mission text crosses the lit ship: a deeper shade keeps it readable */
@media (max-width: 900px) { .ab1__photo::after { background: linear-gradient(180deg, rgba(42, 44, 48, .1) 15%, rgba(42, 44, 48, .9) 70%); } }

/* ── advantages · stacking cards ──
   Each card sticks a little lower than the one before, so the cards underneath keep their number and title in view.
   A covered card shrinks slightly and fades its body (--p, set by script); the card on top animates its drawing. */
.adv { background: var(--mist); }
.adv__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.adv__aside { position: sticky; top: calc(var(--hdr) + 40px); display: grid; gap: 24px; }
.adv__count { font-size: clamp(3rem, 6vw, 6.4rem); font-weight: 300; letter-spacing: -.02em; color: var(--grey); text-transform: none; font-family: var(--f); }
.adv__count span { color: var(--graphite); }
.adv__aside .link { justify-self: start; }
.adv__stack { display: grid; gap: 20px; padding-bottom: 24px; --step: 68px; }
.acard {
  position: sticky; top: calc(var(--hdr) + 32px + var(--i, 0) * var(--step));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); grid-template-rows: auto 1fr; gap: 20px 32px;
  min-height: 340px; padding: 22px clamp(24px, 3vw, 40px) clamp(24px, 3vw, 36px); border-radius: var(--r);
  background: var(--white); box-shadow: 0 -10px 30px rgba(50, 52, 57, .07), 0 1px 0 var(--line);
  scale: calc(1 - var(--p, 0) * .04); transform-origin: 50% 0; transition: background .4s;
}
.acard.rv { transform: none; }
.acard:nth-child(odd) { background: var(--ice); }
.acard__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; min-height: 26px; }
.acard__head .mono { color: var(--teal-ink); }
.acard h3 { font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.1; letter-spacing: -.013em; }
.acard > p { align-self: end; color: var(--steel); font-size: 16px; max-width: 34ch; opacity: calc(1 - var(--p, 0) * 1.4); transition: opacity .2s; }
.acard__art { width: 100%; max-width: 220px; justify-self: end; align-self: end; opacity: calc(1 - var(--p, 0) * 1.4); --dot: var(--teal-ink); }
.acard.live .ring { transform-box: view-box; transform-origin: 100px 100px; animation: dotspin 18s linear infinite; }
.acard.live .fig { transform-box: view-box; transform-origin: 100px 100px; animation: breathe 2.4s ease-in-out infinite; }
@media (max-width: 1000px) {
  .adv__wrap { grid-template-columns: 1fr; }
  .adv__aside { position: static; }
  .adv__count { display: none; }
}
@media (max-width: 640px) {
  .adv__stack { --step: 82px; }
  .acard h3 { font-size: 1.1rem; }
  .acard__head { min-height: 44px; }
  .acard { grid-template-columns: 1fr 120px; min-height: 260px; }
  .acard__art { max-width: 120px; }
}

/* ── industries · periodic table ── */
.inds { background: var(--white); }
.ptab { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ptab__detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; padding: 4px 6px; }
.ptab__detail .duo { border-radius: 10px; min-height: 100%; }
.ptab__detail .duo img { position: absolute; inset: 0; }
.ptab__dtxt { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.ptab__dtxt .mono { color: var(--teal-ink); }
.ptab__dname { font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.8rem); line-height: 1; letter-spacing: -.015em; }
.ptab__dtxt p { font-size: 14px; color: var(--steel); }
.ptab__legend { align-self: end; padding: 0 6px 6px; color: var(--steel); }
.el a {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 1; padding: clamp(10px, 1vw, 16px); border-radius: 10px;
  border: 1px solid var(--line); background: var(--mist); transition: background .3s, color .3s, transform .4s var(--ease), border-color .3s;
}
.el__top { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--steel); }
.el__sym { align-self: center; font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.el__name { font-size: clamp(11px, .95vw, 14px); line-height: 1.2; }
.el a:hover, .el a:focus-visible, .el a.is-on { background: var(--graphite); color: var(--white); border-color: var(--graphite); transform: translateY(-4px); }
.el a:hover .el__top, .el a.is-on .el__top { color: var(--aqua); }
@media (max-width: 900px) {
  .ptab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptab .el { grid-column: auto !important; grid-row: auto !important; }
  .ptab__detail, .ptab__legend { display: none; }
}

/* ── geography · shared ── */
.geo { background: var(--graphite); color: var(--white); overflow: hidden; }
.geo .label { color: var(--aqua); }
.geo__lead { color: rgba(255, 255, 255, .72); font-size: 16px; max-width: 44ch; }

/* 1 · dot globe */
.gg { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.gg__copy { display: grid; gap: 22px; align-content: center; }
.gg__list { display: grid; margin-top: 10px; }
.gg__list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; cursor: default; transition: color .3s; }
.gg__list .mono { color: rgba(255, 255, 255, .45); }
.gg__list .nm { font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 2.2rem); letter-spacing: -.015em; line-height: 1.05; }
.gg__list .dir { font: 500 12px/1 var(--mono); color: rgba(255, 255, 255, .45); }
.gg__list li.on, .gg__list li.on .mono, .gg__list li.on .dir { color: var(--aqua); }
.gg__globe { width: 100%; max-width: 680px; justify-self: center; }
.gg__globe canvas { display: block; width: 100%; }
@media (max-width: 900px) { .gg { grid-template-columns: 1fr; } .gg__globe { order: -1; max-width: 520px; } }

/* ── geography · a large stippled globe cropped by a card; arcs from Dubai to the six regions, a label at each end ── */
.sg { background: var(--white); }
.sg__card { position: relative; overflow: hidden; height: clamp(560px, 56vw, 760px); border-radius: 18px; border: 1px solid #E6EBEC; background: radial-gradient(ellipse 60% 55% at 64% 70%, rgba(208, 244, 246, .55), rgba(255, 255, 255, 0) 70%), #FFFFFF; }
.sg__card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg__side { position: absolute; left: clamp(24px, 3vw, 40px); top: clamp(24px, 3vw, 40px); z-index: 2; display: grid; gap: 10px; max-width: 300px; }
.sg__side .mono { font: 500 12px/1 var(--mono); color: var(--teal-ink); }
.sg__side b { font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; }
.sg__list { display: grid; gap: 2px; margin-top: 14px; }
.sg__list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--steel); transition: color .3s; }
.sg__list li i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; transition: background .3s, opacity .3s, box-shadow .3s; }
.sg__list li.on i { background: var(--teal); opacity: 1; box-shadow: 0 0 0 4px rgba(76, 176, 181, .2); }
.sg__pill { position: absolute; left: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(30, 50, 55, .06), 0 8px 24px rgba(30, 50, 55, .12); font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--graphite); opacity: 0; transition: opacity .5s; will-change: transform, opacity; pointer-events: none; }
.sg__pill em { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #EEF5F6; color: var(--teal-ink); font: 600 11px/1 var(--mono); font-style: normal; }
.sg__pill small { font-weight: 400; font-size: 15px; color: #8A9095; }
.sg__pill.on { opacity: 1; }
@media (max-width: 760px) { .sg__card { height: 560px; } .sg__side { right: 24px; max-width: none; } .sg__side b { font-size: 1.3rem; } .sg__list { grid-template-columns: 1fr 1fr; } .sg__pill small { display: none; } }

/* ── logistics services · shared ── */
.svcs { position: relative; background: var(--graphite); color: var(--white); overflow: hidden; }
.svcs .label { color: var(--aqua); }
.sv1__title { font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1; letter-spacing: -.023em; }
.plate { border-radius: var(--r); padding: clamp(20px, 2.4vw, 32px); transition: transform .5s var(--ease), background .3s; }
.plate h3 { font-weight: 500; font-size: 18px; }
.plate p { font-size: 15px; margin-top: 6px; }
.plate:hover { transform: translateY(-4px); }


/* ── logistics services · three near-black cards with soft teal glows, each holding a small white interface that works by itself ── */
.lgs { background: var(--mist); }
.lgs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lgs__vis { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; border-radius: 14px; background: #111315; }
.lgs__blob { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; }
.lgs__blob:nth-of-type(1) { width: 60%; height: 60%; background: #2B7C81; animation: lgs-b1 12s ease-in-out infinite alternate; }
.lgs__blob:nth-of-type(2) { width: 42%; height: 42%; background: #8FE9EE; opacity: .45; animation: lgs-b2 15s ease-in-out infinite alternate; }
@keyframes lgs-b1 { from { transform: translate(-60%, -40%); } to { transform: translate(40%, 30%); } }
@keyframes lgs-b2 { from { transform: translate(50%, 40%); } to { transform: translate(-50%, -30%); } }
.lgs__ui { position: relative; z-index: 1; width: 76%; padding: 16px; border-radius: 12px; background: var(--white); color: var(--graphite); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); font-size: 13px; }
.lgs__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 500; font-size: 14px; }
.lgs__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: #E9F6F7; color: var(--teal-ink); font-size: 11px; font-weight: 400; }
.lgs__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: lgs-pulse 1.6s ease-in-out infinite; }
@keyframes lgs-pulse { 50% { opacity: .25; } }
.trk__ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--steel); }
.trk__ends span:last-child { text-align: right; }
.trk__ends b { display: block; font-weight: 500; font-size: 15px; color: var(--graphite); }
.trk__line { position: relative; height: 2px; margin: 16px 0 14px; background: repeating-linear-gradient(90deg, #CFD6D8 0 6px, transparent 6px 11px); }
.trk__line i { position: absolute; left: 0; top: 0; height: 2px; width: var(--t, 0%); background: var(--teal); }
.trk__line b { position: absolute; top: 50%; left: var(--t, 0%); width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 3px solid var(--teal-ink); transform: translate(-50%, -50%); }
.trk__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--steel); }
.con li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: #F4F6F6; transition: transform .6s var(--ease), opacity .6s; }
.con li i { width: 8px; height: 8px; border-radius: 2px; background: var(--teal); flex: none; }
.con li:nth-child(2) i { background: var(--aqua); } .con li:nth-child(3) i { background: var(--steel); }
.con li::after { content: "Packed"; margin-left: auto; font-size: 11px; color: var(--teal-ink); opacity: 0; transition: opacity .4s; }
.con li.in { opacity: .45; }
.con li.in::after { opacity: 1; }
.con__box { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px; border: 1.5px dashed #BFD8DA; border-radius: 8px; color: var(--steel); font-size: 12px; transition: border-color .4s, background .4s, color .4s; }
.con.packed .con__box { border-style: solid; border-color: var(--teal-ink); background: #E9F6F7; color: var(--teal-ink); }
.con__chips { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.con__chips i { width: 10px; height: 10px; border-radius: 2px; transform: scale(0); transition: transform .45s var(--ease); }
.con__chips i:nth-child(1) { background: var(--teal); } .con__chips i:nth-child(2) { background: var(--aqua); } .con__chips i:nth-child(3) { background: var(--steel); }
.con__chips i.on { transform: scale(1); }
.doc li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #EEF0F1; }
.doc li span:last-child { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #CFD6D8; transition: background .3s, border-color .3s; }
.doc li.ok span:last-child { background: var(--teal-ink); border-color: var(--teal-ink); }
.doc li svg { width: 11px; height: 11px; fill: none; stroke: var(--white); stroke-width: 3; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s .1s; }
.doc li.ok svg { stroke-dashoffset: 0; }
.lgs__card h3 { margin-top: 20px; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.lgs__card p { margin-top: 8px; color: var(--steel); font-size: 15px; line-height: 1.5; max-width: 38ch; }
@media (max-width: 1000px) { .lgs__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .lgs__grid { grid-template-columns: 1fr; } .lgs__vis { aspect-ratio: 4 / 3.4; } }

/* ── dot drawings in motion ── */
@keyframes dotspin { to { transform: rotate(360deg); } }
/* product lines: on hover the ring turns and the figure breathes. Only the two groups move, never single dots:
   animating each of ~100 dots repaints the whole drawing every frame and stutters in Safari and on slower machines */
.lcard svg.dots .ring, .hov svg.dots .ring, .lcard svg.dots .fig, .hov svg.dots .fig { transform-box: view-box; transform-origin: 100px 100px; }
.lcard:hover svg.dots .ring, .hov:hover svg.dots .ring { animation: dotspin 18s linear infinite; }
.lcard:hover svg.dots .fig, .hov:hover svg.dots .fig { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.07); } }
.lcard__art, .hov svg.dots { contain: paint; }
/* request process: each figure has its own small action */
.live .letter { animation: p-bob 2.6s ease-in-out infinite; }
@keyframes p-bob { 50% { transform: translateY(-10px); } }
.live .mol { transform-box: fill-box; transform-origin: center; animation: dotspin 9s linear infinite; }
.live .lens { animation: p-scan 4s ease-in-out infinite; }
@keyframes p-scan { 50% { transform: translate(4px, -4px); } }
.live .txt circle { animation: p-type 3s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes p-type { 0%, 100% { opacity: .2; } 30%, 70% { opacity: 1; } }
.live .seal, .live .badge { transform-box: fill-box; transform-origin: center; animation: p-stamp 3s ease-in-out infinite; }
@keyframes p-stamp { 0%, 55%, 100% { transform: scale(1); } 65% { transform: scale(1.18); } 75% { transform: scale(.96); } }
.live .bub circle { animation: p-rise 2.4s linear infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes p-rise { 0% { transform: translateY(0); opacity: 0; } 15%, 75% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.live .wheel { transform-box: fill-box; transform-origin: center; animation: dotspin 1.6s linear infinite; }
.live .truck { animation: p-shake .4s ease-in-out infinite; }
@keyframes p-shake { 50% { transform: translateY(-1px); } }
.live .road { animation: p-road .55s linear infinite; }
@keyframes p-road { to { transform: translateX(calc(var(--s) * -1px)); } }
.wiz__prog svg { --dot: rgba(50, 52, 57, .16); }

/* ── supply experience · item wall: one light tile per item, a dark tile with shimmering colour that carries the figures ── */
.xp { background: var(--white); }
.xp__wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 10px; }
.xp__t { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 30px 16px 16px; border-radius: 10px; background: #F4F6F6; text-align: center; transition: background .3s; }
.xp__t:hover { background: #EAF5F6; }
.xp__t b { font-weight: 500; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.xp__t small { font-size: 12px; color: #8A9095; }
.xp__t i { position: absolute; top: 12px; right: 14px; font: 400 11px/1 var(--mono); font-style: normal; color: #A3A9AD; }
.xp__g { position: absolute; top: 12px; left: 14px; right: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 400 11px/1 var(--mono); color: var(--teal-ink); }
.xp__feat { position: relative; grid-column: 5; grid-row: 1 / span 4; overflow: hidden; isolation: isolate; clip-path: inset(0 round 12px); -webkit-mask-image: -webkit-radial-gradient(white, black); display: grid; align-content: space-between; gap: 28px; padding: 24px; border-radius: 12px; background: #111315; color: var(--white); }
.xp__feat > dl, .xp__cta { position: relative; z-index: 2; }
.xp__iri { position: absolute; inset: -40%; background: conic-gradient(from 0deg at 50% 50%, #12191B, #2B7C81, #4CB0B5, #8FE9EE, #D0F4F6, #4CB0B5, #1F4F53, #12191B); filter: blur(34px) saturate(1.25); animation: xp-iri 14s linear infinite; }
.xp__iri::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(208, 244, 246, .5), transparent 35%), radial-gradient(circle at 75% 25%, rgba(17, 19, 21, .7), transparent 40%); animation: xp-iri2 9s ease-in-out infinite alternate; }
.xp__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 47%, rgba(208, 244, 246, .35) 50%, rgba(255, 255, 255, .12) 53%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen; animation: xp-sheen 6.5s ease-in-out infinite; }
.xp__feat::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17, 19, 21, .05), rgba(17, 19, 21, .15) 45%, rgba(17, 19, 21, .6)); }
@keyframes xp-iri { to { transform: rotate(360deg); } }
@keyframes xp-iri2 { to { transform: translate(18%, -14%) scale(1.2); } }
@keyframes xp-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.xp__feat dl { display: grid; gap: 18px; margin: 0; }
.xp__feat dd { margin: 0; font-weight: 500; font-size: 4rem; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.xp__feat dt { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.xp__cta { display: grid; gap: 16px; }
.xp__cta p { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.xp__cta a { display: inline-flex; align-items: center; gap: 8px; color: var(--aqua); font-weight: 500; }
.xp__cta svg, .xp__foot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s var(--ease); }
.xp__cta a:hover svg { transform: translateX(4px); }
.xp__foot { margin-top: 28px; }
@media (max-width: 1000px) { .xp__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); } .xp__feat { grid-column: 1 / -1; grid-row: 1; } .xp__feat dl { display: flex; gap: 40px; } }
@media (max-width: 560px) { .xp__wall { grid-template-columns: 1fr 1fr; } .xp__t { padding: 30px 12px 14px; } .xp__g { left: 10px; right: 30px; font-size: 10px; letter-spacing: -.03em; } .xp__t i { font-size: 10px; } .xp__t i { right: 10px; } .xp__t b { font-size: 14px; } }

/* ── process · one emblem morphs through the steps ── */
.proc { background: var(--mist); }
.proc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.proc__stage { position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 22px; }
.proc__fig { position: relative; width: min(100%, 440px); margin-top: 16px; }
.proc__fig svg { width: 100%; height: auto; overflow: visible; }
.proc__fig svg { --dot: var(--teal-ink); }
.proc__n { position: absolute; right: 0; bottom: 0; color: var(--grey); font-size: 14px; }
.proc__n span { color: var(--graphite); }
.proc__steps { display: grid; padding-top: clamp(20px, 8vh, 100px); }
.proc__steps li { min-height: 52vh; display: grid; align-content: center; gap: 14px; padding: 32px 0; border-top: 1px solid var(--line); opacity: .3; transition: opacity .5s; }
.proc__steps li.on { opacity: 1; }
.proc__steps li:last-child { min-height: 40vh; }
.proc__steps .mono { color: var(--teal-ink); }
.proc__steps h3 { font-weight: 300; font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1; letter-spacing: -.02em; }
.proc__steps p { color: var(--steel); font-size: 16px; max-width: 42ch; }
.proc__mini { display: none; width: 140px; --dot: var(--teal-ink); }
@media (max-width: 900px) {
  .proc__grid { grid-template-columns: 1fr; }
  .proc__stage { position: static; }
  .proc__fig { display: none; }
  .proc__steps { padding-top: 0; }
  .proc__steps li { min-height: 0; opacity: 1; }
  .proc__mini { display: block; }
}

/* ── request · step-by-step form ── */
.req { background: var(--ice); }
.req__head { display: grid; gap: 22px; margin-bottom: clamp(32px, 4vw, 56px); }
.wiz { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); padding: clamp(28px, 4vw, 64px); border-radius: 28px; background: var(--white); box-shadow: 0 30px 80px rgba(50, 52, 57, .08); }
.wiz__side { display: grid; gap: 28px; align-content: start; }
.wiz__prog { position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; }
.wiz__prog svg { width: 100%; height: 100%; }
.wiz__prog circle { fill: var(--line); transition: fill .4s; transition-delay: var(--pd, 0s); }
.wiz__prog circle.on { fill: var(--teal); }
.wiz__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.4rem); letter-spacing: -.015em; color: var(--grey); }
.wiz__num b { font-weight: 300; color: var(--graphite); }
.wiz__steps { display: grid; gap: 4px; counter-reset: ws; }
.wiz__steps li { counter-increment: ws; display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--grey); transition: color .3s; }
.wiz__steps li::before { content: counter(ws); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font: 500 12px/1 var(--mono); }
.wiz__steps li.on { color: var(--graphite); }
.wiz__steps li.done { color: var(--teal-ink); }
.wiz__main { display: grid; gap: 28px; align-content: start; min-width: 0; }
.wiz__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; animation: stepin .5s var(--ease); }
@keyframes stepin { from { opacity: 0; transform: translateX(16px); } }
.wiz__q { font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; padding: 0; margin-bottom: 14px; }
.wiz__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.wiz__items { margin-bottom: 8px; }
.wiz .check { color: var(--steel); margin-top: 18px; }
.wiz__nav { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.wiz .form__status.warn { background: var(--mist); border: 1px solid var(--line); }
.ufield { position: relative; padding-top: 22px; }
.ufield input, .ufield textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(50, 52, 57, .3); border-radius: 0; background: none; padding: 10px 0 12px;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: 300; transition: border-color .25s;
}
.ufield textarea { resize: vertical; min-height: 96px; }
.ufield label { position: absolute; left: 0; top: 34px; font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: 300; color: #7d8186; pointer-events: none; transform-origin: 0 0; transition: transform .3s var(--ease), color .3s; }
.ufield input:focus, .ufield textarea:focus { outline: none; border-bottom: 2px solid var(--teal); }
.ufield input:focus + label, .ufield input:not(:placeholder-shown) + label, .ufield textarea:focus + label, .ufield textarea:not(:placeholder-shown) + label { transform: translateY(-28px) scale(.72); color: var(--teal-ink); }
.ufield.invalid input, .ufield.invalid textarea { border-bottom: 2px solid #B3261E; }
.ufield .field__err { margin-top: 6px; }
.req__contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.req__contacts li { display: grid; gap: 8px; }
.req__contacts .mono { color: var(--teal-ink); }
.req__contacts a, .req__contacts address { font-weight: 300; font-size: clamp(1.15rem, 1.8vw, 1.7rem); letter-spacing: -.01em; overflow-wrap: anywhere; }
.req__contacts a:hover { color: var(--teal-ink); }
@media (max-width: 860px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz__side { grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
  .wiz__prog { width: 110px; }
  .wiz__num { font-size: 1.4rem; }
}
@media (max-width: 560px) { .wiz__two, .req__contacts { grid-template-columns: 1fr; } .wiz__nav .btn { flex: 1; } }

/* shared form bits (rows in request lists, consent, status) */
.item { display: grid; grid-template-columns: minmax(0, 1fr) 150px 40px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.item__name { font-weight: 500; font-size: 15px; }
.item__name small { display: block; font: 400 12px/1.3 var(--mono); color: var(--steel); }
.vol { display: flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; gap: 6px; }
.vol:focus-within { border-color: var(--teal); }
.vol input { width: 100%; border: 0; background: none; font: 400 14px var(--mono); }
.vol input:focus { outline: none; }
.vol span { font: 400 12px var(--mono); color: var(--steel); }
.rm { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--steel); }
.rm:hover { background: var(--mist); color: var(--graphite); }
.rm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.field__err { font-size: 14px; color: #B3261E; }
.field__err:empty { display: none; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--teal-ink); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.check .field__err { grid-column: 2; }
.form__status { border-radius: 14px; padding: 18px 20px; font-size: 15px; display: grid; gap: 12px; }
.form__status.err { background: #FFF6F5; color: #8C1D18; }
.form__status .btn { justify-self: start; }
@media (max-width: 560px) {
  .item { grid-template-columns: minmax(0, 1fr) 40px; }
  .item .vol { grid-column: 1; grid-row: 2; }
  .item .rm { grid-row: 1 / span 2; grid-column: 2; }
}

/* ── footer (Caladan structure) with an animated halftone wordmark ── */
.ftr { background: var(--graphite); color: #DDF6F7; padding-top: clamp(56px, 6vw, 96px); overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto; gap: 32px; align-items: start; font-weight: 300; font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1.32; letter-spacing: -.01em; }
.ftr__brand { display: flex; gap: 18px; align-items: flex-start; }
.ftr__brand svg { width: clamp(52px, 5vw, 76px); height: auto; color: var(--aqua); flex: none; }
.ftr__col li { padding: 0 0 4px; }
.ftr__col a { transition: color .2s; }
.ftr__col a:hover { color: var(--aqua); }
.ftr__pill { justify-self: end; display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border: 1px solid currentColor; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .01em; text-transform: none; transition: background .2s, color .2s; }
.ftr__pill:hover { background: var(--aqua); border-color: var(--aqua); color: var(--graphite); }
.ftr__legal { margin-top: clamp(56px, 6vw, 96px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 18px; padding-bottom: 24px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ftr__legal p:last-child { display: flex; gap: 24px; }
.ftr__legal a:hover { color: var(--white); }
@media (max-width: 1100px) { .ftr__top { grid-template-columns: 1fr 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } .ftr__pill { justify-self: start; } }
@media (max-width: 600px) { .ftr__top { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  svg.dots circle { transform: none; opacity: 1; }
  .xp__iri, .xp__iri::after, .xp__sheen { animation: none; }
  .lgs__blob, .lgs__pill::before { animation: none; }
  .qf__ring { animation: none; }
}

/* ══ phone: shorter cards, smaller drawings, larger tap areas ══ */
@media (max-width: 700px) {
  /* the photo is bright on the right, so the shade runs top to bottom under the text */
  .hb__bg::after { background: linear-gradient(180deg, rgba(30, 32, 35, .6), rgba(30, 32, 35, .38) 45%, rgba(30, 32, 35, .72)); }
}
@media (max-width: 560px) {
  /* product lines: title and drawing side by side instead of a tall drawing in every card */
  .lcard { display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: 16px; align-items: center; padding: 20px; }
  .lcard__top, .lcard p, .lcard__go { grid-column: 1 / -1; }
  .lcard h3 { grid-column: 1; margin-top: 14px; }
  .lcard__art { grid-column: 2; grid-row: 2; height: 84px; margin: 14px 0 0; }
  .lcard__art svg, .lcard__art svg.dots { width: 84px; height: 84px; }
  .lcard p { margin-top: 14px; }
  .lcard__go { margin-top: 14px; padding-top: 12px; min-height: 44px; }
  /* advantages: text across the full width, the drawing small beside the title */
  .acard { grid-template-columns: minmax(0, 1fr) 64px; grid-template-rows: auto auto; min-height: 0; gap: 14px 16px; }
  .acard__head { grid-column: 1; }
  .acard__art { grid-column: 2; grid-row: 1; max-width: 64px; align-self: start; }
  .acard > p { grid-column: 1 / -1; max-width: none; font-size: 15px; }
  /* process: a small drawing above each step */
  .proc__mini { width: 72px; }
  .proc__steps li { padding: 24px 0; gap: 10px; }
  .proc__steps h3 { font-size: 1.9rem; }
  /* footer links are tall enough to tap */
  .ftr__col li { padding: 0; }
  .ftr__col a { display: inline-block; padding: 6px 0; }
  .ftr__legal a { display: inline-block; padding: 8px 0; }
}


/* ── request process screens (after Cradle): five dark square cards, a soft colour glow and a small live screen in each; title and grey text below ═════ */
.prc { position: relative; overflow: hidden; background: var(--white); }
.prc .wrap { position: relative; }
.prc__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px; align-items: stretch; }
.prc__list { display: grid; gap: 8px; }
.prc__list button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 8px 12px; padding: 17px 20px; border-radius: 10px; background: #F4F6F6; text-align: left; color: var(--graphite); font-size: 16px; transition: background .3s; }
.prc__list button:hover { background: #EAF5F6; }
.prc__list i { position: relative; width: 12px; height: 12px; align-self: center; }
.prc__list i::before, .prc__list i::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1.5px; background: var(--steel); transition: transform .3s; }
.prc__list i::after { transform: rotate(90deg); }
.prc__list p { grid-column: 1 / -1; display: none; max-width: 60ch; color: var(--steel); font-size: 15px; line-height: 1.55; }
.prc__list u { grid-column: 1 / -1; display: none; height: 2px; border-radius: 2px; background: #E1E8E9; text-decoration: none; overflow: hidden; }
.prc__list .on button { background: #EAF5F6; }
.prc__list .on i::before, .prc__list .on i::after { background: var(--teal-ink); }
.prc__list .on i::after { transform: none; }
.prc__list .on p { display: block; animation: prcIn .4s var(--ease); }
.prc__list .on u { display: block; }
.prc__list .on u::before { content: ""; display: block; height: 100%; background: var(--teal); transform-origin: left; animation: prcBar var(--dur, 8s) linear forwards; }
.prc.held .prc__list u { display: none !important; }
@keyframes prcBar { from { transform: scaleX(0); } }
@keyframes prcIn { from { opacity: 0; transform: translateY(6px); } }
/* the panel on the right is as tall as the list and grows with it: a fine dot grid, the dot drawing of the open step, a status pill */
.prc__scr { position: relative; overflow: hidden; min-height: 340px; display: grid; place-items: center; border-radius: 10px; background: #F4F6F6; }
.prc__top { position: absolute; left: 20px; right: 20px; top: 18px; display: flex; justify-content: space-between; align-items: center; color: var(--teal-ink); font: 500 12px/1 var(--mono); }
.prc__dots { display: flex; gap: 6px; }
.prc__dots i { width: 6px; height: 6px; border-radius: 50%; background: #D5DDDF; transition: background .4s, transform .4s; }
.prc__dots i.done { background: var(--teal); }
.prc__dots i.on { background: var(--teal-ink); transform: scale(1.4); }
.prc__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.prc__top, .prc__pill { z-index: 1; }
.prc__pill { position: absolute; left: 20px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 8px; background: var(--white); color: var(--graphite); font-size: 14px; box-shadow: 0 1px 2px rgba(30, 50, 55, .06), 0 8px 24px rgba(30, 50, 55, .12); }
.prc__pill.in { animation: prcPill .6s var(--ease) both; }
.prc__pill em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #E3F4F5; color: var(--teal-ink); font: 600 11px/1 var(--mono); font-style: normal; }
.prc__pill.in em { animation: prcPop .5s .35s var(--ease) both; }
@keyframes prcPill { from { opacity: 0; transform: translateY(14px); } }
@keyframes prcPop { from { transform: scale(.4); opacity: 0; } }
@media (max-width: 860px) { .prc__grid { grid-template-columns: 1fr; } .prc__scr { order: -1; min-height: 300px; } }
.cr__card { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #121618; font-size: 10px; line-height: 1.2; color: var(--graphite); container-type: inline-size; }
.cr__card * { animation-play-state: paused !important; }
.cr.run .cr__card * { animation-play-state: running !important; }
@media (max-width: 1100px) {
  .cr__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .cr__it { flex: 0 0 min(76vw, 280px); scroll-snap-align: start; }
}
/* the soft glows: two large blurred spots of colour drifting slowly, as on Cradle */
.cr__b { position: absolute; border-radius: 50%; pointer-events: none; animation: crDrift 14s ease-in-out infinite alternate; }
.cr__b.b1 { width: 110%; height: 75%; left: -34%; bottom: -40%; background: radial-gradient(closest-side, rgba(76, 176, 181, .95), rgba(43, 124, 129, .55) 55%, rgba(43, 124, 129, 0)); }
.cr__b.b2 { width: 70%; height: 70%; right: -40%; top: -30%; background: radial-gradient(closest-side, rgba(143, 233, 238, .7), rgba(76, 176, 181, .35) 55%, rgba(76, 176, 181, 0)); animation-duration: 18s; animation-direction: alternate-reverse; }
.cr__b.b3 { width: 80%; height: 55%; right: -30%; bottom: -30%; background: radial-gradient(closest-side, rgba(89, 93, 98, .9), rgba(89, 93, 98, .35) 55%, rgba(89, 93, 98, 0)); }
.cr__b.b4 { width: 80%; height: 75%; left: -32%; top: -30%; background: radial-gradient(closest-side, rgba(43, 124, 129, .85), rgba(43, 124, 129, .3) 55%, rgba(43, 124, 129, 0)); }
@keyframes crDrift { to { transform: translate(14%, -10%) scale(1.12); } }
.cr__w { position: absolute; border-radius: 6px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cr__w b { font-weight: 500; }
.cr__ok { display: inline-grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 7px; font-style: normal; }

/* 1 · inquiry: a cursor drops the positions into "My request"; they are added one after another */
.k1 .cr__w { left: 18%; top: 26%; width: 54%; padding: 7px; }
.k1__drop { position: relative; display: grid; place-items: center; height: 46px; margin-top: 6px; border-radius: 4px; background: #EEF2F3; color: var(--teal-ink); }
.k1__drop span { position: absolute; inset: 0; display: grid; place-items: center; animation: k1drop 8s infinite; }
.k1__drop span + span { opacity: 0; animation-name: k1done; font: 500 9px/1.2 var(--mono); text-align: center; }
@keyframes k1drop { 0%, 44% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes k1done { 0%, 46% { opacity: 0; } 52%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.k1__cur { position: absolute; left: 0; top: 0; width: 14px; animation: k1cur 8s infinite; }
@keyframes k1cur { 0% { transform: translate(190%, 760%); opacity: 0; } 6% { opacity: 1; } 20% { transform: translate(560%, 330%); } 23% { transform: translate(560%, 330%) scale(.82); } 26%, 84% { transform: translate(560%, 330%); opacity: 1; } 92%, 100% { transform: translate(560%, 330%); opacity: 0; } }
.k1__chip { position: absolute; left: 50%; display: flex; align-items: center; gap: 5px; padding: 4px 7px 4px 4px; border-radius: 4px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); font-size: 9px; white-space: nowrap; opacity: 0; animation: k1chip 8s infinite; }
.k1__chip.c1 { top: 60%; } .k1__chip.c2 { top: 69%; animation-name: k1chip2; } .k1__chip.c3 { top: 78%; animation-name: k1chip3; }
@keyframes k1chip { 0%, 26% { opacity: 0; transform: translateY(6px); } 30%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes k1chip2 { 0%, 32% { opacity: 0; transform: translateY(6px); } 36%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes k1chip3 { 0%, 38% { opacity: 0; transform: translateY(6px); } 42%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* 2 · selection: three options narrow down, one by one, as the criteria are ticked */
.k2__leg { position: absolute; left: 9%; top: 11%; display: flex; gap: 10px; color: rgba(255,255,255,.85); font-size: 9px; white-space: nowrap; }
.k2__leg span { display: flex; align-items: center; gap: 4px; }
.k2__leg i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,.4); animation: k2box 9s infinite; }
.k2__leg span:nth-child(2) i { animation-name: k2box2; } .k2__leg span:nth-child(3) i { animation-name: k2box3; }
@keyframes k2box { 0%, 6% { background: transparent; } 10%, 94% { background: var(--aqua); border-color: var(--aqua); } }
@keyframes k2box2 { 0%, 30% { background: transparent; } 34%, 94% { background: var(--teal); border-color: var(--teal); } }
@keyframes k2box3 { 0%, 54% { background: transparent; } 58%, 94% { background: #D0F4F6; border-color: #D0F4F6; } }
.k2 svg { position: absolute; left: 9%; top: 27%; width: 82%; height: 60%; overflow: visible; }
.k2 path.c { fill: none; stroke-width: 1.6; stroke-dasharray: 260; stroke-dashoffset: 260; animation: k2draw 9s infinite; }
.k2 path.c2 { animation-name: k2draw2; } .k2 path.c3 { animation-name: k2draw3; }
@keyframes k2draw { 0%, 6% { stroke-dashoffset: 260; } 24%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes k2draw2 { 0%, 30% { stroke-dashoffset: 260; } 48%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes k2draw3 { 0%, 54% { stroke-dashoffset: 260; } 72%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.k2 path.a { animation: k2area 9s infinite; }
@keyframes k2area { 0%, 8% { opacity: 0; } 24%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.k2__pick { position: absolute; right: 6%; bottom: 14%; padding: 4px 8px; border-radius: 4px; background: #fff; font-size: 9px; white-space: nowrap; display: flex; gap: 5px; align-items: center; opacity: 0; animation: k2pick 9s infinite; }
@keyframes k2pick { 0%, 72% { opacity: 0; transform: translateY(5px); } 76%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* 3 · commercial offer: the sheet writes itself line by line, then goes out */
.k3 .cr__w { left: 21%; top: 15%; width: 58%; height: 66%; padding: 9px; }
.k3__hd { display: flex; justify-content: space-between; align-items: center; }
.k3__st { position: relative; width: 34px; height: 13px; }
.k3__st span { position: absolute; right: 0; top: 0; padding: 2px 5px; border-radius: 3px; font: 500 8px/1.1 var(--mono); }
.k3__st span:first-child { background: #F1F4F5; color: var(--steel); animation: k1drop 8s infinite; }
.k3__st span + span { background: #E3F4F5; color: var(--teal-ink); opacity: 0; animation: k3sent 8s infinite; }
@keyframes k3sent { 0%, 66% { opacity: 0; } 70%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.k3__l { height: 5px; margin-top: 8px; border-radius: 3px; background: #E6ECED; transform-origin: left; transform: scaleX(0); animation: k3line 8s infinite; }
.k3__l.t { background: #CFE7E8; }
.k3__l:nth-of-type(2) { animation-name: k3l0; }
@keyframes k3l0 { 0%, 4% { transform: scaleX(0); } 12%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__l:nth-of-type(3) { animation-name: k3l1; }
@keyframes k3l1 { 0%, 12% { transform: scaleX(0); } 20%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__l:nth-of-type(4) { animation-name: k3l2; }
@keyframes k3l2 { 0%, 20% { transform: scaleX(0); } 28%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__l:nth-of-type(5) { animation-name: k3l3; }
@keyframes k3l3 { 0%, 30% { transform: scaleX(0); } 38%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__l:nth-of-type(6) { animation-name: k3l4; }
@keyframes k3l4 { 0%, 38% { transform: scaleX(0); } 46%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__l:nth-of-type(7) { animation-name: k3l5; }
@keyframes k3l5 { 0%, 46% { transform: scaleX(0); } 54%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__l:nth-of-type(8) { animation-name: k3l6; }
@keyframes k3l6 { 0%, 56% { transform: scaleX(0); } 64%, 92% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.k3__toast { position: absolute; left: 50%; bottom: 9%; display: flex; gap: 5px; align-items: center; padding: 5px 9px; border-radius: 5px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.35); font-size: 9px; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px); animation: k3toast 8s infinite; }
@keyframes k3toast { 0%, 68% { opacity: 0; transform: translate(-50%, 8px); } 72%, 90% { opacity: 1; transform: translate(-50%, 0); } 96%, 100% { opacity: 0; } }

/* 4 · quality & documents: the batch inspection fills in; then the document set slides in, ready */
.k4 .cr__w { top: 28%; width: 62%; padding: 9px; }
.k4__a { left: 19%; animation: k4a 9s infinite; }
.k4__b { left: 19%; animation: k4b 9s infinite; }
@keyframes k4a { 0%, 52% { transform: none; opacity: 1; } 60%, 92% { transform: translateX(-16%) scale(.94); opacity: .55; } 100% { transform: none; opacity: 1; } }
@keyframes k4b { 0%, 52% { transform: translateX(120%); } 60%, 92% { transform: translateX(12%); } 100% { transform: translateX(120%); } }
.k4__hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.k4__hd small { display: flex; gap: 4px; align-items: center; font-size: 8px; color: var(--steel); }
.k4__r { margin-top: 7px; font-size: 8px; color: #8A9095; }
.k4__r i { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: #EDF1F2; overflow: hidden; }
.k4__r i::before { content: ""; display: block; height: 100%; width: var(--w); background: var(--teal); transform-origin: left; transform: scaleX(0); animation: k4fill 9s infinite; animation-delay: var(--d); }
.k4__b .k4__r i::before { transform: scaleX(1); animation: none; }
@keyframes k4fill { 0%, 4% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }

/* 5 · storage & delivery: the shipment leaves the warehouse and follows the route to the client */
.k5 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.k5__st { position: absolute; left: 9%; top: 10%; height: 18px; }
.k5__st span { position: absolute; left: 0; top: 0; display: flex; gap: 5px; align-items: center; padding: 4px 8px; border-radius: 4px; background: #fff; font-size: 9px; white-space: nowrap; opacity: 0; }
.k5__st span:nth-child(1) { animation: k5s1 8s infinite; } .k5__st span:nth-child(2) { animation: k5s2 8s infinite; } .k5__st span:nth-child(3) { animation: k5s3 8s infinite; }
@keyframes k5s1 { 0%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes k5s2 { 0%, 20% { opacity: 0; } 24%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes k5s3 { 0%, 72% { opacity: 0; } 76%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.k5__lb { position: absolute; color: rgba(255,255,255,.7); font: 400 8px/1.2 var(--mono); white-space: nowrap; }

.cr__card[data-still] * { animation: none !important; }

/* iOS Safari lets blurred or animated children spill past rounded corners; clipping to the same rounded shape keeps the corners */
.sg__card { clip-path: inset(0 round 18px); }
.lgs__vis { clip-path: inset(0 round 14px); }
.prc__scr { clip-path: inset(0 round 10px); }