/* Nebbula Solutions — site styles
   Phone first; the wide layout starts at 900px (matches WIDE in main.js). */

/* ---------- Tokens (Nebbula design system) ---------- */
:root {
  --void: #07080D;
  --deep: #0E1018;
  --raised: #161926;
  --line: #262A3B;
  --haze: #9AA0B4;
  --mist: #EEF0F6;
  --cobalt: #3D63FF;
  --cobalt-light: #8EA2FF;
  --cobalt-deep: #2A43B5;
  --nebula: #1B2A6B;
  --nebula-ink: #C8D1F5;
  --star: #E6ECFF;
  --on-cobalt: #FFFFFF;

  --font: 'Jost', 'Futura PT', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --gutter: 16px;
  --content: 640px;
  --section-y: 120px;
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --content: 1360px;
    --section-y: 200px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.snap-hero { scroll-snap-type: y proximity; }

body {
  margin: 0;
  background: var(--void);
  color: var(--mist);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body.menu-open { overflow: hidden; }

a { color: var(--cobalt-light); }
a:hover { color: var(--star); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt-light); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 12px 16px; background: var(--cobalt); color: var(--on-cobalt);
  font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--on-cobalt); }

.wrap { width: 100%; max-width: var(--content); margin-inline: auto; }

/* Copy that swaps between the phone and the wide layout */
.only-wide { display: none; }
.only-wide-flex { display: none !important; }
@media (min-width: 900px) {
  .only-wide { display: inline; }
  .only-wide-flex { display: flex !important; }
  .only-narrow { display: none; }
}

/* ---------- Type ---------- */
.label-h { margin: 0; font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.h1 { margin: 0; font-weight: 500; font-size: 38px; line-height: 1.05; letter-spacing: -0.03em; }
.lead { margin: 0; font-size: 18px; line-height: 1.55; }

@media (min-width: 900px) {
  .h1 { font-size: 60px; line-height: 1; letter-spacing: -0.035em; }
  .lead { font-size: 21px; line-height: 1.5; max-width: 40ch; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--cobalt); color: var(--on-cobalt);
  border: 0; border-radius: 0; cursor: pointer;
  font-weight: 500; font-size: 17px; line-height: 1; text-decoration: none;
  transition: background-color 200ms ease;
}
.btn:hover { color: var(--on-cobalt); background: #5274FF; }
.btn:active { background: #3356EE; }
.btn--block { display: flex; width: 100%; }
.btn--quiet { background: var(--line); color: var(--mist); }
.btn--quiet:hover { background: #31364A; color: var(--mist); }

/* ---------- Reveal on scroll (CSS scroll-driven, where supported) ---------- */
@keyframes nb-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv  { animation: nb-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .rv2 { animation: nb-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
    .rv3 { animation: nb-rise linear both; animation-timeline: view(); animation-range: entry 20% entry 65%; }
  }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero { --step: 280px; --cw: 272px; }
@media (min-width: 900px) { .hero { --step: 450px; --cw: 320px; } }

.hero__track {
  position: relative;
  height: calc(100vh + 6 * var(--step));
  height: calc(100svh + 6 * var(--step));
}
.hero__snap {
  position: absolute; left: 0; width: 1px; height: 1px;
  top: calc(var(--i) * var(--step));
  scroll-snap-align: start;
}

.hero__stage {
  --hs: 1; /* vertical scale, set from the window height in main.js */
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--void);
}
/* Shown only if WebGL or three.js is unavailable */
.hero__stage.no-gl { background: radial-gradient(55% 40% at 50% 55%, rgba(61, 99, 255, 0.16), transparent 70%), var(--void); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* Header */
.site-head {
  position: absolute; top: 12px; left: var(--gutter); right: var(--gutter); z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; color: var(--mist); text-decoration: none;
}
.logo:hover { color: var(--mist); }
.logo__row { display: flex; align-items: center; gap: 3px; }
.logo__word { font-weight: 500; font-size: 20px; letter-spacing: -0.045em; line-height: 1; }
.logo__mark { width: 15px; height: 15px; margin-top: 3px; }
.logo__sub { font-weight: 400; font-size: 12px; line-height: 1; padding-left: 1px; }

.site-nav { display: none; }
.site-head__narrow { display: flex; align-items: center; gap: 4px; }

.lang-switch {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 16px; color: var(--haze); text-decoration: none;
}
.lang-switch:hover { color: var(--mist); }
.lang-switch .is-current { color: var(--mist); }

.menu-btn {
  display: flex; align-items: center; min-height: 44px; padding: 0 0 0 12px;
  background: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 500; color: var(--mist);
}

@media (min-width: 900px) {
  .site-head { top: 28px; }
  .logo { gap: 3px; }
  .logo__row { gap: 4px; }
  .logo__word { font-size: 24px; }
  .logo__mark { width: 18px; height: 18px; }
  .logo__sub { font-size: 13px; letter-spacing: -0.01em; }
  .site-nav { display: flex; align-items: center; gap: 28px; font-size: 16px; }
  .site-nav a { color: var(--mist); text-decoration: none; }
  .site-nav a:hover { color: var(--cobalt-light); }
  .site-nav .lang-switch { padding: 0; color: var(--haze); }
  .site-nav .lang-switch .is-current { color: var(--haze); }
  .site-head__narrow { display: none; }
}

/* Phone menu */
.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--deep);
  padding: 12px max(16px, calc((100% - 640px) / 2)) 24px;
  display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu__top { display: flex; justify-content: flex-end; }
.menu__nav { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
.menu__nav a {
  color: var(--mist); text-decoration: none;
  font-weight: 500; font-size: 44px; line-height: 1.25; letter-spacing: -0.03em;
}
.menu__nav a:hover { color: var(--cobalt-light); }
.menu .btn { margin-top: auto; }
@media (min-width: 900px) { .menu { display: none !important; } }

/* Title */
.hero__title {
  position: absolute; left: 0; right: 0; top: calc(72px * var(--hs));
  margin: 0; z-index: 1; pointer-events: none;
  text-align: center; color: var(--mist);
  font-weight: 500; line-height: 1; letter-spacing: -0.06em;
  font-size: calc(clamp(64px, 25vw, 104px) * var(--hs));
}
.hero__sub {
  display: block; margin-top: -2px;
  font-weight: 400; letter-spacing: -0.01em; line-height: 1;
  font-size: calc(clamp(26px, 10vw, 42px) * var(--hs));
}
@media (min-width: 900px) {
  .hero__title { top: calc(66px * var(--hs)); font-size: calc(196px * var(--hs)); }
  .hero__sub { margin-top: -4px; font-size: calc(64px * var(--hs)); }
}

/* Card deck */
.deck {
  position: absolute; left: 0; right: 0; z-index: 2;
  top: calc(232px * var(--hs)); height: 290px;
  transform: scale(var(--hs)); transform-origin: 50% 0;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.card {
  position: absolute; top: 0; left: calc(50% - var(--cw) / 2); width: var(--cw);
  display: flex; flex-direction: column; gap: 12px;
  transform-origin: 50% 114px;
  transition: filter 300ms ease;
}
.card.is-dim { filter: brightness(0.5); }
.card.is-far { visibility: hidden; }
.card__cap { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.card__title { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }

@media (min-width: 900px) {
  .deck { top: calc(360px * var(--hs)); height: 320px; cursor: grab; }
  .deck.is-dragging { cursor: grabbing; }
  .card { transform-origin: 50% 50%; }
}

/* Interface fragments (cards, mockups) */
.frag {
  height: 228px; overflow: hidden; line-height: 1.3;
  background: var(--deep); padding: 16px;
  display: flex; flex-direction: column; gap: 7px; font-size: 15px;
}
.frag__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.frag__title { font-weight: 500; font-size: 17px; }
.frag__side { font-size: 14px; color: var(--haze); }
.frag__row {
  display: flex; justify-content: space-between; gap: 12px;
  background: var(--raised); padding: 8px 12px;
}
.frag__row > span:nth-child(2) { color: var(--haze); }
.frag__row.is-lab > span:first-child { color: var(--haze); }
.frag__row.is-lab > span:nth-child(2) { color: inherit; }
.frag__row.is-hi { background: var(--cobalt); color: var(--on-cobalt); }
.frag__row.is-hi > span { color: inherit; }

.frag--you { background: var(--cobalt); padding: 20px; justify-content: space-between; }
.frag--you__title { font-weight: 500; font-size: 27px; line-height: 1.1; letter-spacing: -0.02em; color: var(--on-cobalt); }
.frag--you a { display: flex; align-items: center; min-height: 44px; color: var(--on-cobalt); font-weight: 500; font-size: 17px; }

.frag--phone { padding: 0; justify-content: flex-end; align-items: center; }
.phone {
  width: 146px; height: 192px; background: var(--raised);
  padding: 13px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px;
}
.phone__title { font-weight: 500; font-size: 15px; }
.phone .frag__row { background: var(--deep); padding: 7px 8px; }
.phone .frag__row.is-hi { background: var(--cobalt); }

.frag--bars { gap: 10px; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; }
.bars > span { flex: 1; height: var(--h); background: var(--cobalt-deep); }
.bars > span.is-hi { background: var(--cobalt); }
.bars__days { display: flex; justify-content: space-between; font-size: 13px; color: var(--haze); }

@media (min-width: 900px) {
  .frag { height: 256px; padding: 18px; gap: 8px; }
  .frag .frag__row { padding: 10px 12px; }
  .frag__side { font-size: 13px; }
  .frag--you { padding: 22px; }
  .frag--you__title { font-size: 28px; }
  .phone { width: 150px; height: 206px; padding: 14px 10px; }
  .frag .phone .frag__row { padding: 7px 8px; }
}

/* Dots, hint, foot */
.deck-dots {
  position: absolute; left: 0; right: 0; top: calc(540px * var(--hs)); z-index: 2;
  display: flex; justify-content: center; gap: 10px;
}
.deck-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color 300ms ease; }
.deck-dots span.is-on { background: var(--cobalt-light); }

.hero__hint {
  position: absolute; left: 0; right: 0; top: calc(562px * var(--hs)); z-index: 2;
  margin: 0; text-align: center; font-size: 15px; color: var(--haze); pointer-events: none;
  transition: opacity 300ms ease;
}
.hero__hint.is-gone { opacity: 0; }

.hero__foot {
  position: absolute; z-index: 2; bottom: 24px;
  left: max(16px, calc((100% - 640px) / 2)); right: max(16px, calc((100% - 640px) / 2));
  display: flex; flex-direction: column; gap: 18px;
}
.hero__intro { margin: 0; max-width: 34ch; font-weight: 500; font-size: 18px; line-height: 1.4; }
.hero__foot .btn { width: 100%; }

@media (min-width: 900px) {
  .deck-dots { display: none; }
  .hero__hint { top: auto; bottom: 46px; }
  .hero__foot {
    left: 40px; right: 40px; bottom: 40px;
    flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px;
  }
  .hero__intro { max-width: 30ch; }
  .hero__foot .btn { width: auto; min-height: 0; padding: 15px 24px; }
}

/* =====================================================================
   SERVICES
   ===================================================================== */
.svc { padding: var(--section-y) var(--gutter); }
.svc__grid { max-width: var(--content); margin-inline: auto; display: flex; flex-direction: column; gap: 32px; }
.svc__side { display: contents; }
.svc__side > h2 { order: 1; }
.svc__tabs { order: 2; display: flex; flex-direction: column; }
.svc__panes { order: 3; display: grid; }
.svc__intro { order: 4; margin: 0; font-size: 18px; line-height: 1.55; }

.svc__tab {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 44px; padding: 12px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--haze); transition: color 200ms ease;
}
.svc__tab:hover, .svc__tab[aria-selected="true"] { color: var(--mist); }
.svc__name { font-weight: 500; font-size: 36px; line-height: 1.05; letter-spacing: -0.035em; }
.svc__short { font-size: 16px; line-height: 1.4; }

@media (min-width: 900px) {
  .svc { padding: 60px var(--gutter) 0; }
  .svc__pin { position: relative; height: calc(100vh + 1080px); height: calc(100svh + 1080px); }
  .svc__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
  .svc__grid {
    width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px; align-items: center;
  }
  .svc__side { display: flex; flex-direction: column; gap: 40px; }
  .svc__tab {
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    column-gap: 24px; row-gap: 4px; padding: 10px 0; transition-duration: 300ms;
  }
  .svc__name { font-size: clamp(48px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.04em; }
  .svc__intro { max-width: 46ch; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .svc__side { gap: 24px; }
  .svc__name { font-size: clamp(44px, 4.6vw, 64px); }
}

/* Panes: crossfade + slide, staggered (timings from the prototype) */
.svc-pane {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 350ms var(--ease-out), visibility 0s linear 350ms;
}
.svc-pane.is-active { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease-out) 320ms, visibility 0s; }
.svc-move { transform: translateY(24px); transition: transform 450ms var(--ease-out); }
.svc-pane.is-before .svc-move { transform: translateY(-24px); }
.svc-pane.is-active .svc-move { transform: none; transition: transform 900ms var(--ease-out) 320ms; }
.svc-move.svc-late, .svc-pane.is-before .svc-move.svc-late { transform: none; }
.svc-late > h3, .svc-late > p, .svc-late li {
  opacity: 0; transform: translateY(20px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.svc-pane.is-before .svc-late > h3, .svc-pane.is-before .svc-late > p, .svc-pane.is-before .svc-late li { transform: translateY(-20px); }
.svc-pane.is-active .svc-late > h3, .svc-pane.is-active .svc-late > p, .svc-pane.is-active .svc-late li {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--ease-out) 520ms, transform 1100ms var(--ease-out) 520ms;
}
.svc-pane.is-active .svc-late > p { transition-delay: 660ms; }
.svc-pane.is-active .svc-late li:nth-child(1) { transition-delay: 820ms; }
.svc-pane.is-active .svc-late li:nth-child(2) { transition-delay: 940ms; }
.svc-pane.is-active .svc-late li:nth-child(3) { transition-delay: 1060ms; }
.svc-pane [data-stagger] > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.svc-pane.is-active [data-stagger] > * {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out) 420ms, transform 700ms var(--ease-out) 420ms;
}
.svc-pane.is-active [data-stagger] > *:nth-child(2) { transition-delay: 500ms; }
.svc-pane.is-active [data-stagger] > *:nth-child(3) { transition-delay: 580ms; }
.svc-pane.is-active [data-stagger] > *:nth-child(4) { transition-delay: 660ms; }
.svc-pane.is-active [data-stagger] > *:nth-child(5) { transition-delay: 740ms; }
.svc-pane.is-active [data-stagger] > *:nth-child(6) { transition-delay: 820ms; }
.svc-pane.is-active [data-stagger] > *:nth-child(7) { transition-delay: 900ms; }

.svc-shot { height: 280px; background: var(--raised); padding: 20px; display: flex; flex-direction: column; }
.svc-late { display: flex; flex-direction: column; gap: 12px; }
.svc-late h3 { margin: 0; font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
.svc-late p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 48ch; }
.svc-late ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.svc-late li { display: flex; gap: 12px; align-items: baseline; }
.svc-late li::before { content: ""; width: 8px; height: 8px; background: var(--cobalt); flex-shrink: 0; transform: translateY(-2px); }

@media (min-width: 900px) {
  .svc-shot { height: 360px; padding: 28px; }
  .svc-late { gap: 14px; }
  .svc-late h3 { font-size: 32px; line-height: 1.15; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .svc-shot { height: 300px; }
}

/* Mockups inside the service panes */
.mk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mk-title { font-weight: 500; font-size: 18px; }
.mk-side { font-size: 14px; color: var(--haze); }
.mk-muted { color: var(--haze); }

.mk-dash { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.mk-phones { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: 14px; overflow: hidden; }
.mk-phone {
  width: 146px; height: 196px; background: var(--deep);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.3;
}
.mk-phone--tall { height: 228px; }
.mk-phone__title { font-weight: 500; font-size: 15px; }
.mk-phone .frag__row { padding: 7px 8px; }
.mk-phone__btn { margin-top: auto; background: var(--cobalt); color: var(--on-cobalt); padding: 8px; text-align: center; }

.mk-list { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.3; }
.mk-row { display: flex; justify-content: space-between; gap: 12px; background: var(--deep); padding: 11px 14px; }
.mk-row > span:nth-child(2) { color: var(--haze); }
.mk-row.is-lab > span:first-child { color: var(--haze); }
.mk-row.is-lab > span:nth-child(2) { color: inherit; }
.mk-row.is-hi { background: var(--cobalt); color: var(--on-cobalt); }
.mk-row.is-hi > span { color: inherit; }
.mk-row--approve { align-items: center; padding: 6px 6px 6px 14px; }
.mk-row--approve > span:nth-child(2) { color: var(--on-cobalt); }
.mk-chip { background: var(--cobalt); color: var(--on-cobalt); padding: 7px 14px; font-weight: 500; }

@media (min-width: 900px) {
  .mk-title { font-size: 20px; }
  .mk-side { font-size: 15px; }
  .mk-dash { gap: 14px; }
  .bars--lg { gap: 12px; }
  .mk-dash .bars__days { font-size: 14px; }
  .mk-phones { gap: 24px; }
  .mk-phone { width: 170px; height: 250px; padding: 16px 12px; gap: 8px; font-size: 14px; }
  .mk-phone--tall { height: 290px; gap: 7px; }
  .mk-phone__title { font-size: 16px; }
  .mk-phone .frag__row { padding: 8px 9px; }
  .mk-phone__btn { padding: 9px; }
  .mk-list { gap: 10px; font-size: 16px; }
  .mk-row { padding: 13px 16px; }
  .mk-row--approve { padding: 8px 8px 8px 16px; }
  .mk-chip { padding: 8px 16px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .mk-phone--tall { height: 244px; }
  .mk-phone { height: 214px; }
  .mk-row { padding: 10px 16px; }
}

/* =====================================================================
   WORK (colour page)
   ===================================================================== */
.work { background: var(--nebula); padding: var(--section-y) var(--gutter); }
.work__grid { display: flex; flex-direction: column; gap: 56px; }
.work__copy { display: flex; flex-direction: column; gap: 24px; }

.facts { margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
.facts dt { color: var(--haze); font-size: 15px; }
.facts dd { margin: 0; }
.facts--ink dt { color: var(--nebula-ink); }

.work__link {
  align-self: flex-start; display: flex; align-items: center; min-height: 44px;
  color: var(--on-cobalt); font-weight: 500; font-size: 18px;
  text-decoration: underline; text-underline-offset: 5px;
}
.work__link:hover { color: var(--star); }

.work__shots { display: flex; flex-direction: column; gap: 16px; }
.mk-admin {
  background: var(--deep); padding: 18px;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.3;
}
.mk-admin .mk-title { font-size: 17px; }
.mk-admin .frag__row { padding: 10px 12px; }
.mk-shops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 13px; }
.chip { background: var(--raised); padding: 8px 10px; display: flex; flex-direction: column; }
.chip__n { color: var(--haze); }
.chip.is-hi { background: var(--cobalt); color: var(--on-cobalt); }
.chip.is-hi .chip__n { color: inherit; }

.work__apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk-app {
  height: 290px; padding: 14px 10px;
  display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.3;
}
.mk-app .frag__row { padding: 7px 8px; }
.mk-app__name { font-weight: 500; font-size: 15px; }
.mk-app__btn { margin-top: auto; padding: 8px; text-align: center; font-weight: 500; }
/* Two invented shops, each in its own brand: the point of a white-label app */
.mk-app--a { background: var(--deep); }
.mk-app--a .mk-app__name { color: #62D4C8; }
.mk-app--a .mk-app__sub { color: var(--haze); }
.mk-app--a .frag__row.is-hi, .mk-app--a .mk-app__btn { background: #62D4C8; color: var(--void); }
.mk-app--b { margin-top: 24px; background: #F2EEE6; color: #1A1712; }
.mk-app--b .mk-app__name { color: #8A3B12; }
.mk-app--b .mk-app__sub { color: #5C554A; }
.mk-app--b .frag__row { background: #E4DED2; }
.mk-app--b .frag__row > span:nth-child(2) { color: #5C554A; }
.mk-app--b .frag__row.is-hi, .mk-app--b .mk-app__btn { background: #8A3B12; color: #FFFFFF; }
.mk-app--b .frag__row.is-hi > span { color: inherit; }

@media (min-width: 900px) {
  .work { padding-block: 180px; }
  .work__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    gap: 72px; align-items: center;
  }
  .work__copy { gap: 28px; }
  .work__copy .h1 { max-width: 14ch; }
  .facts { display: grid; grid-template-columns: auto 1fr; column-gap: 32px; row-gap: 14px; }
  .facts > div { display: contents; }
  .facts dt { font-size: inherit; }

  .work__shots { position: relative; display: block; height: 560px; }
  .mk-admin { position: absolute; left: 0; top: 0; width: 78%; padding: 26px; gap: 10px; font-size: 15px; }
  .mk-admin .mk-title { font-size: 20px; }
  .mk-admin .frag__row { padding: 12px 14px; }
  .mk-shops { gap: 8px; font-size: 14px; }
  .chip { flex-direction: row; gap: 0.3em; padding: 10px 12px; }
  .chip__n { color: inherit; }
  .chip__n::before { content: "· "; }
  .work__apps { display: contents; }
  .mk-app { position: absolute; width: 180px; height: 330px; padding: 16px 12px; gap: 8px; font-size: 14px; }
  .mk-app .frag__row { padding: 8px 9px; }
  .mk-app__name { font-size: 16px; }
  .mk-app__btn { padding: 9px; }
  .mk-app--a { right: 15%; bottom: 0; }
  .mk-app--b { right: 0; bottom: 40px; margin-top: 0; }
}

/* =====================================================================
   PROCESS
   ===================================================================== */
.proc-sec { padding: var(--section-y) var(--gutter); overflow-x: clip; }
.proc-sec__inner { display: flex; flex-direction: column; gap: 48px; }

.proc { position: relative; }
.proc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 64px; }
.proc-step { position: relative; padding-left: 36px; display: flex; flex-direction: column; gap: 10px; }
.proc-head {
  margin: 0; font-weight: 500; font-size: 36px; line-height: 1.05; letter-spacing: -0.035em;
  color: var(--haze); transition: color 400ms ease;
}
.proc-step.is-on .proc-head { color: var(--mist); }
.proc-step p { margin: 0; font-size: 18px; line-height: 1.5; max-width: 34ch; }
.proc-mark {
  position: absolute; left: 1px; top: 12px; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--void); border: 2px solid var(--line);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.proc-step.is-on .proc-mark { background: var(--cobalt-light); border-color: var(--cobalt-light); }

.proc__arc { display: none; }
.proc__line {
  position: absolute; left: 7px; top: 19px; width: 2px; height: var(--len, 0px);
  background: var(--line);
}
.proc__line--prog { background: var(--cobalt-light); transform-origin: 50% 0; transform: scaleY(1); }
.proc__dot {
  position: absolute; left: 2px; top: 13px; z-index: 3;
  width: 12px; height: 12px; border-radius: 50%; background: var(--star);
  opacity: 0; transition: opacity 200ms ease;
}

@media (min-width: 900px) {
  .proc-sec__inner { gap: 72px; }
  .proc__list { gap: 88px; }
  .proc-step { padding-left: 0; width: min(620px, 100%); gap: 12px; }
  .proc-head { font-size: 64px; line-height: 1; }
  .proc-step p { max-width: 36ch; }
  .proc-mark { left: -63px; top: 25px; }
  .proc__line { display: none; }
  .proc__arc {
    display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
  }
  .proc__base { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
  .proc__prog { fill: none; stroke: var(--cobalt-light); stroke-width: 2; stroke-linecap: round; }
  .proc__dot { left: -6px; top: -6px; }
}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about { background: var(--deep); padding: var(--section-y) var(--gutter); }
.about__grid { display: flex; flex-direction: column; gap: 24px; }
.about__copy { display: flex; flex-direction: column; gap: 24px; }
.about__body { margin: 0; font-size: 18px; line-height: 1.55; }
.about__mark { display: flex; justify-content: center; padding-top: 24px; }
.about__mark svg { width: 260px; height: 260px; max-width: 100%; }

@media (min-width: 900px) {
  .about { padding-block: 180px; }
  .about__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
    gap: 72px; align-items: center;
  }
  .about__copy { gap: 28px; }
  .about__copy .h1 { max-width: 13ch; }
  .about__body { font-size: 20px; max-width: 44ch; }
  .about__mark { min-height: 460px; align-items: center; padding-top: 0; }
  .about__mark svg { width: 440px; height: 440px; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact { padding: var(--section-y) var(--gutter); }
.contact__grid { display: flex; flex-direction: column; gap: 48px; }
.contact__copy { display: flex; flex-direction: column; gap: 24px; }
.contact__body { margin: 0; font-size: 18px; line-height: 1.55; }
.contact__copy .btn { width: 100%; }

.form { background: var(--deep); padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; }
.field input, .field textarea {
  background: var(--raised); color: var(--mist);
  border: 0; border-radius: 0; padding: 14px 16px; font-size: 17px; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; }
.field ::placeholder { color: #7D839A; opacity: 1; }
.form__foot { display: flex; flex-direction: column; gap: 12px; }
.form__foot .btn { width: 100%; }
.form__note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--haze); }

@media (min-width: 900px) {
  .contact__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
    gap: 72px; align-items: start;
  }
  .contact__copy { gap: 28px; }
  .contact__copy .h1 { max-width: 13ch; }
  .contact__body { font-size: 20px; max-width: 40ch; }
  .contact__copy .btn { width: auto; align-self: flex-start; padding: 0 26px; min-height: 56px; font-size: 18px; }
  .form { padding: 36px; gap: 20px; }
  .form__foot { flex-direction: row; align-items: center; gap: 20px; }
  .form__foot .btn { width: auto; flex-shrink: 0; }
}

/* =====================================================================
   FOOTER: cobalt band. Email large on one side, facts on the other, one line of links
   ===================================================================== */
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__langs [aria-current] { opacity: 0.72; }

/* ---- cobalt band ---- */
.foot--wide {
  --sp-a: #FFFFFF; --sp-b: #C8D3FF; --sp-c: #FFFFFF;
  background: var(--cobalt); color: var(--on-cobalt);
  padding: 56px var(--gutter) 24px;
  display: flex; flex-direction: column;
}
.foot--wide :focus-visible { outline-color: var(--on-cobalt); }
.foot__head { display: flex; flex-direction: column; gap: 20px; }
.foot__mail {
  font-weight: 500; font-size: clamp(19px, 5.2vw, 48px); line-height: 1.1; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.foot__facts { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.foot__facts > span, .foot__facts .foot__langs { display: flex; align-items: center; gap: 0.3em; min-height: 32px; }
.foot__line {
  margin-top: 40px; display: flex; flex-direction: column-reverse; gap: 16px; font-size: 15px;
}
.foot__line nav { display: flex; flex-wrap: wrap; column-gap: 20px; font-size: 16px; }
.foot__line nav a { min-height: 44px; display: flex; align-items: center; }

@media (min-width: 900px) {
  .foot--wide { padding: 96px var(--gutter) 40px; }
  .foot__head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .foot__facts { align-items: flex-end; text-align: right; }
  .foot__facts > span, .foot__facts .foot__langs { min-height: 0; }
  .foot__line { margin-top: 56px; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .foot__line nav { gap: 28px; font-size: 15px; }
  .foot__line nav a { min-height: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-move, .svc-pane [data-stagger] > *, .svc-late > h3, .svc-late > p, .svc-late li {
    transform: none !important; transition-property: opacity !important;
  }
  .card { transition: none; }
}

/* With About switched off, Process and Contact share the void ground: keep one section gap between them.
   The jump to #contact then lands with some air above the heading (scroll-margin, read by main.js). */
.proc-sec + .contact { padding-top: 0; scroll-margin-top: 72px; }
@media (min-width: 900px) { .proc-sec + .contact { scroll-margin-top: 120px; } }