/* =====================================================================
   DW Innovation, dwinnovation.dk, main site
   Mobile first. The header, the footer and the colour scheme are Mill Street's, exactly as on the live site.
   Everything else is this site's own: two type voices (people and system), a light studio floor for the
   robot inside the night page, and calm, precise motion.
   ===================================================================== */

:root {
  /* colour scheme, from the Mill Street site's CSS */
  --night: #131a29;
  --night-2: #1a2234;
  --night-3: #232c41;
  --rule: #2f3950;
  --ink: #ede7db;
  --ink-dim: #b9b4aa;
  --ink-faint: #8d8a86;
  --lamp: #f0c068;
  --lamp-deep: #d9a043;
  --green: #2d6a55;
  --green-deep: #1f4d3d;
  --brick: #8e3b2b;
  --circus: #c4372d;

  /* the header and footer keep their own typeface */
  --f-frame: 'Libre Franklin', 'Franklin Gothic Book', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  /* this site: the human voice and the system voice */
  --f-head: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --f-text: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --gutter: 20px;
  --max: 1200px;
  --nav-h: 65px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }   /* hidden stays hidden, whatever display a component sets */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 700; line-height: 1.1; }
:focus { outline: 2px solid var(--lamp); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }   /* browsers without :focus-visible drop this rule and keep the ring */
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--lamp); color: var(--night); padding: 10px 16px; border-radius: 6px;
  font-family: var(--f-frame); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

main section[id] { scroll-margin-top: 72px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- buttons (Mill Street's header button) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-frame); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn > * + * { margin-left: 10px; }   /* spacing by margin: flexbox gap needs Safari 14.1 */
.btn-play {
  background: rgba(19, 26, 41, 0.86);
  border-color: var(--lamp);
  color: var(--lamp);
  font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px;
}
.btn-play:hover { background: var(--lamp); color: var(--night); }

/* ---------- navigation (Mill Street's header) ---------- */
.nav {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
  background: rgba(19, 26, 41, 0.94);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-frame);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background: rgba(19, 26, 41, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center;
}
.nav-inner > * + * { margin-left: 14px; }
.brand { display: block; flex: none; margin-right: auto; padding: 7px 0; margin-top: -7px; margin-bottom: -7px; }   /* a 44 px target, same header height */
.brand img { height: 30px; width: auto; }
.nav-links { display: none; font-size: 15px; font-weight: 500; }
.nav-links a + a { margin-left: 28px; }
.nav-links a { text-decoration: none; color: var(--ink-dim); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--lamp); }
.nav .btn-play { min-height: 40px; padding: 0 16px; font-size: 12.5px; }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--ink-dim); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; padding: 4px var(--gutter) 16px; border-top: 1px solid var(--rule); }
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block; padding: 14px 0; font-size: 17px; text-decoration: none;
  color: var(--ink-dim); border-bottom: 1px solid var(--rule);
}
.nav-mobile a:last-child { border-bottom: 0; }
/* the language switch, added to the header: small, quiet, always visible */
.lang-switch {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none;
  color: var(--ink-dim); border: 1px solid var(--rule);
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink-faint); }
@media (max-width: 379px) { .nav .btn-play { display: none; } }
/* without JavaScript the menu button cannot open the menu, so the links are simply shown */
.no-js .nav-toggle { display: none; }
.no-js .nav-mobile { display: block; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle, .nav-mobile, .nav-mobile.is-open { display: none; }
  .nav-inner > * + * { margin-left: 32px; }
  .nav-inner > .btn-play { margin-left: 16px; }
  .brand img { height: 34px; }
}

/* ---------- footer (Mill Street's footer) ---------- */
.footer { background: #0e131e; border-top: 1px solid var(--rule); padding: 56px 0 40px; font-family: var(--f-frame); font-size: 14.5px; color: var(--ink-faint); }
.footer-grid { display: grid; grid-template-columns: 1fr; grid-gap: 28px; gap: 28px; }
.footer-logo { height: 30px; width: auto; }
.footer-tag { margin-top: 12px; max-width: 30em; }
.footer-nav { display: flex; flex-wrap: wrap; margin: -10px -12px; }
.footer-nav a { margin: 0 12px; padding: 11px 0; }   /* 45 px tall: a full finger target, same look */
.footer-nav a { color: var(--ink-dim); text-decoration: none; }
.footer-nav a:hover { color: var(--lamp); }
.footer-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 13px; }
.footer-base > * { margin: 0 24px 8px 0; }
.footer-base > *:last-child { margin-right: 0; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
}

/* =====================================================================
   1. Arrival
   A light grey section under the night header: the robot is back in the light studio look Darren approved,
   and the text is set in the scheme's own blues. His floor shadow grounds him: there is no drawn line.
   ===================================================================== */
.arrival {
  /* light section tokens: the scheme's blues on a light grey */
  --bg: #e6e8ec;
  --fg: var(--night);        /* #131a29 */
  --fg-2: var(--rule);       /* #2f3950 */
  --fg-3: #56607a;           /* the scheme's blue, lightened to stay above 4.5:1 on the grey */
  --line: #c3c8d1;
  background: var(--bg);
  color: var(--fg);
}
.arrival :focus, .arrival :focus-visible { outline-color: var(--night); }
.arrival-inner {
  --stage-w: 280px;                       /* browsers without min(): a fixed, safe size */
  max-width: var(--max); margin: 0 auto;
  padding: 36px var(--gutter) 32px;
}
@supports (width: min(1px, 2px)) {
  .arrival-inner { --stage-w: min(72vw, 46vh * 0.8, 360px); }
  @supports (height: 1svh) { .arrival-inner { --stage-w: min(72vw, 46svh * 0.8, 360px); } }
}
.arrival-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  grid-row-gap: 20px; row-gap: 20px;
}
.arrival-copy { justify-self: stretch; }
.arrival-eyebrow {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
}
.arrival-title {
  margin-top: 14px;
  font-size: 2.6rem;                             /* browsers without clamp() */
  font-size: clamp(1.9rem, 7.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  max-width: 17ch;
  text-wrap: balance;
  color: var(--fg);
}
.arrival-title-b { color: var(--fg-3); }
.arrival-line {
  margin-top: 18px; max-width: 32em;
  font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.6; color: var(--fg-2);
}

/* The stage is always 4:5, so the camera framing and the still are exact at every size.
   The robot's feet sit 6.13 percent above the stage's bottom edge (measured in the still, 11-10-2026):
   the stage is pulled down by that much (6.13 percent of a height of 1.25 widths = 0.0766 widths),
   so his feet sit at the bottom of the scene, where his floor shadow grounds him. */
.stage {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 4 / 5;
  margin-bottom: calc(var(--stage-w) * -0.0766);
  z-index: 1;
}
@supports not (aspect-ratio: 4 / 5) {
  .stage { height: calc(var(--stage-w) * 1.25); }
}
.stage-still, .stage-still img, .stage-canvas {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block;
}
.stage-canvas { opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.stage.is-live .stage-canvas { opacity: 1; }
.stage-still { transition: opacity .45s var(--ease); }
.stage.is-live .stage-still { opacity: 0; }
/* first view of a visit: the line waits empty and he walks in. If the 3D fails, the still returns. */
.walkin .stage-still { opacity: 0; }
.robot-failed .stage-still { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stage-canvas, .stage-still { transition: none; } }

/* The guide (guide.js): he is there to be talked to. His figure is clickable, and the ask button sits under
   the paragraph. The conversation opens in the text's own place and takes its exact height: the section never
   grows, nothing is covered and no empty space appears. */
.arrival-copy.is-talking .arrival-say { display: none; }
/* centred in the space the text had, so it stays level with him */
.arrival-copy.is-talking { display: flex; flex-direction: column; justify-content: center; }
.stage-ask { visibility: hidden; }
.stage.guide-on .stage-ask { visibility: visible; }
.stage-ask {
  position: absolute; left: 27%; right: 27%; top: 6%; bottom: 7%; z-index: 2;
  padding: 0; border: 0; border-radius: 40px; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.talk { display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px; min-height: 40px; visibility: hidden; }
.talk.guide-on { visibility: visible; }
.stage-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  font: 500 14px/1 var(--f-text); color: var(--fg);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(19, 26, 41, 0.06);
  cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stage-chip[hidden] { display: none; }
.stage-chip:hover { border-color: var(--fg-3); box-shadow: 0 4px 14px rgba(19, 26, 41, 0.1); }
.stage-chip-dot { margin-right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(45, 106, 85, 0.18); }

.bubble {
  position: relative; width: 100%; max-width: 34em;
  margin-top: 14px;
  color: var(--fg);
  font: 400 1.25rem/1.5 var(--f-text);
  font: 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.5 var(--f-text);
  letter-spacing: -0.005em;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.bubble[hidden] { display: none; }
.bubble.is-entering { opacity: 0; transform: translateY(4px); }
.bubble-text { margin-right: 44px; }
.bubble-close {
  position: absolute; top: -6px; right: 0; width: 40px; height: 40px; padding: 0;
  font: 400 20px/1 var(--f-text); color: var(--fg-3); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.bubble-close:hover { color: var(--fg); background: #eef0f3; }
.bubble-proof { list-style: none; margin: 14px 0 0; padding: 0; font: 400 13px/1.5 var(--f-mono); letter-spacing: 0; color: var(--fg-2); }
.bubble-proof[hidden] { display: none; }
.bubble-proof li { position: relative; padding: 3px 0 3px 18px; }
.bubble-proof li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 7px; height: 4px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }
.bubble-actions { display: flex; flex-direction: column; margin-top: 18px; max-width: 26em; letter-spacing: 0; }
.bubble-btn + .bubble-btn { margin-top: 6px; }
.bubble-btn {
  text-align: left; min-height: 40px; padding: 9px 12px; border-radius: 9px;
  font: 500 14px/1.35 var(--f-text); color: var(--fg);
  background: #f1f3f6; border: 1px solid #e1e5eb; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.bubble-btn:hover { background: #e7eaef; border-color: var(--line); }
.bubble-btn.is-quiet { background: transparent; border-color: transparent; color: var(--fg-3); padding-left: 2px; }
.bubble-btn.is-quiet:hover { color: var(--fg); background: transparent; }
@media (prefers-reduced-motion: reduce) { .bubble { transition: none; } }

@media (min-width: 900px) {
  .arrival-inner {
    --stage-w: 380px;
    padding-top: 32px; padding-bottom: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stage-w);
    grid-template-areas: "scene scene";
    grid-column-gap: 56px; column-gap: 56px;
    align-items: start;
  }
  /* The text is centred on his figure, head to feet. The row runs from the stage's top to his feet
     (1.1734 stage widths). His figure runs from 0.084 to 1.1734 widths, so its middle is 0.042 widths below
     the row's middle: padding the top by twice that moves the centred text onto it. */
  .arrival-scene {
    grid-area: scene;
    grid-template-columns: minmax(0, 1fr) var(--stage-w);
    align-items: center;
    grid-column-gap: 56px; column-gap: 56px;
  }
  .arrival-copy { padding-top: calc(var(--stage-w) * 0.084 + 28px); padding-bottom: 28px; }   /* equal extra room above and below keeps it centred */
}
@media (min-width: 900px) {
  @supports (width: min(1px, 2px)) {
    .arrival-inner { --stage-w: min(38vw, 52vh * 0.8, 440px); }
    @supports (height: 1svh) { .arrival-inner { --stage-w: min(38vw, 52svh * 0.8, 440px); } }
  }
}

/* =====================================================================
   2. The proof: the whole chain, one line
   The section holds still while scrolling draws a gold line through every role, and one marker,
   "One person", travels all of it. --p (0 to 1) is the progress, set by site.js from the scroll.
   Without JavaScript, or with reduced motion, the line is simply complete.
   Phones: the line runs down the screen. Wide screens: across it.
   ===================================================================== */
.proof { --p: 1; background: var(--night); color: var(--ink); }
.proof-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 40px; }
.proof-title { font-size: 2.25rem; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.proof-intro { margin-top: 14px; max-width: 34em; color: var(--ink-dim); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); }

/* The block sticks just under the header, exactly as tall as its content (no blank screen around it).
   The spacer after it is the scroll distance that draws the line. */
.proof-spacer { display: none; }
.js-scroll .proof-spacer { display: block; height: 130vh; height: 130svh; }
.js-scroll .proof-sticky { position: -webkit-sticky; position: sticky; top: var(--nav-h); }
.js-scroll .proof-inner { width: 100%; padding-top: 32px; padding-bottom: 24px; }

/* the role the line has reached, large: scrolling plays the whole chain as a sequence */
.chain-now { display: none; }
@media (min-width: 900px) { .js-scroll .chain-now { display: block; } }   /* on phones the lit list already says it */
.js-scroll .chain-now { margin-top: 24px; min-height: 1.2em; font-size: 3.25rem; font-size: clamp(1.9rem, 5.5vw, 4.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.chain-count {
  display: block; margin-bottom: 10px;
  font: 400 12px/1 var(--f-mono); letter-spacing: 0.14em; color: var(--lamp);
}
.chain-role { display: block; transition: opacity .22s var(--ease); }
.chain-role.is-changing { opacity: 0; }
.chain {
  position: relative;
  margin-top: 32px;
  height: 340px;                                  /* browsers without min() */
  height: min(46vh, 400px); height: min(46svh, 400px);
  margin-left: 6px;
}
.chain-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.chain-progress {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--lamp);
  transform-origin: top; transform: scaleY(var(--p));
}
.chain-list { list-style: none; margin: 0; padding: 0; }
.chain-stop {
  position: absolute; left: 0; top: calc(var(--i) / 12 * 100%);
  display: flex; align-items: center;
  transform: translate(-4px, -50%);
}
.chain-dot {
  flex: none; margin-right: 16px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--night); border: 1px solid var(--ink-faint);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.chain-name {
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); transition: color .3s var(--ease);
}
.chain-stop.is-on .chain-dot { background: var(--lamp); border-color: var(--lamp); }
.chain-stop.is-on .chain-name { color: var(--ink); }
.no-js .chain-dot, .reduce .chain-dot { background: var(--lamp); border-color: var(--lamp); }
.no-js .chain-name, .reduce .chain-name { color: var(--ink); }
.chain-marker {
  position: absolute; left: 0; top: calc(var(--p) * 100%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.chain-marker-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-block; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  font: 600 13px/1 var(--f-text); color: var(--night); background: var(--lamp);
  box-shadow: 0 0 0 4px var(--night);
}
/* short phones (iPhone SE and similar): a tighter line, so the whole section fits under the header */
@media (max-width: 899px) and (max-height: 640px) {
  .chain { height: 40vh; height: 40svh; margin-top: 24px; }
  .js-scroll .proof-inner { padding-top: 12px; padding-bottom: 12px; }
}
/* on a phone the label rides the line on the right of the dots, clear of the role names */
@media (max-width: 899px) {
  .chain-marker { left: auto; right: 0; }
  .chain-marker-label { left: auto; right: 0; transform: translate(0, -50%); }
  .chain::after {
    content: ''; position: absolute; top: calc(var(--p) * 100%); left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--lamp), rgba(240, 192, 104, 0.15));
    transform: translateY(-50%); opacity: .7;
  }
}

.proof-facts { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 56px; }
.proof-facts-title {
  font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.facts { margin: 0; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 4px; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.fact dt {
  position: relative; padding-left: 20px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lamp);
}
.fact dt::before {
  content: ''; position: absolute; left: 1px; top: 3px; width: 8px; height: 4px;
  border-left: 1.5px solid #4f9c80; border-bottom: 1.5px solid #4f9c80; transform: rotate(-45deg);
}
.fact dd { margin: 0; font-size: 1.15rem; font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.45; color: var(--ink); max-width: 38em; }

@media (min-width: 900px) {
  .proof-inner { padding-top: 56px; }
  .chain { height: 176px; margin: 28px 64px 0; }   /* room for the first and last names and the marker */
  .chain-line { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .chain-progress { transform-origin: left; transform: scaleX(var(--p)); }
  .chain-stop {
    top: 50%; left: calc(var(--i) / 12 * 100%);
    flex-direction: column;
    transform: translate(-50%, -4px);
  }
  .chain-dot { margin-right: 0; }
  .chain-name {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: -webkit-max-content; width: max-content; max-width: 112px; text-align: center; line-height: 1.3;
  }
  /* role names alternate above and below the line, so thirteen fit in one row */
  .chain-stop:nth-child(odd) .chain-name { bottom: 22px; }
  .chain-stop:nth-child(even) .chain-name { top: 22px; }
  .chain-marker { left: calc(var(--p) * 100%); top: 50%; }
  .chain-marker-label { box-shadow: 0 0 0 5px var(--night); }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 56px; column-gap: 56px; }
  .fact { grid-template-columns: 9.5em minmax(0, 1fr); grid-gap: 20px; gap: 20px; align-items: baseline; padding: 22px 0; }
}

/* =====================================================================
   3. From plan to reality: the blueprint
   A technical drawing that builds itself when it comes into view (site.js): the data core, then the plan
   (dashed lines and footprints), then the modules rise, then the data flows. Notes 1 to 4 light up in step.
   Light grey with navy lines, like an engineer's drawing. Without JavaScript or with reduced motion the
   finished drawing is shown.
   ===================================================================== */
.plan {
  /* deep green from the scheme, the drawing in light ink on it, like a drafting board */
  --bg: var(--green-deep); --fg: var(--ink); --fg-2: #d6e3dc; --fg-3: #a9c4b8; --line: #3f7563;
  --dot: #3a6f5d; --face-top: #2f6a56; --face-left: #285d4b; --face-right: #224f40;
  background: var(--bg); color: var(--fg);
}
.plan :focus, .plan :focus-visible { outline-color: var(--lamp); }
.plan-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 48px; }
.plan-title { font-size: 2.25rem; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: var(--fg); }
.plan-intro { margin-top: 14px; max-width: 32em; color: var(--fg-2); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); }
.plan-notes { list-style: none; margin: 28px 0 0; padding: 0; max-width: 32em; }
.plan-note {
  display: flex; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line);
  color: var(--fg); font-size: 1rem; line-height: 1.5;
  transition: opacity .4s var(--ease);
}
.plan-note:last-child { border-bottom: 1px solid var(--line); }
.plan-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -1px 14px 0 0; border-radius: 50%;
  border: 1px solid var(--fg); font: 400 12px/1 var(--f-mono); color: var(--fg);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.plan.is-playing .plan-note { opacity: .38; }
.plan.is-playing .plan-note.is-on { opacity: 1; }
.plan-note.is-now .plan-n { background: var(--lamp); border-color: var(--lamp); color: var(--bg); }
.plan-replay {
  margin-top: 18px; padding: 8px 0; min-height: 40px;
  font: 500 14px/1 var(--f-text); color: var(--fg-3);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}
.plan-replay:hover { color: var(--fg); }
.plan-figure { margin: 28px calc(var(--gutter) * -0.5) 0; }

/* the drawing */
.bp { display: block; width: 100%; height: auto; overflow: visible; }
.bp-grid circle { fill: var(--dot); }
.bp-plan { fill: none; stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 4 4; }
.bp-real { fill: none; stroke: var(--fg); stroke-width: 1.4; }
.bp-foot { fill: none; stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 3; }
.bp-top { fill: var(--face-top); }
.bp-left { fill: var(--face-left); }
.bp-right { fill: var(--face-right); }
.bp-top, .bp-left, .bp-right { stroke: var(--fg); stroke-width: 1.2; stroke-linejoin: round; }
.bp-core ellipse, .bp-core path { stroke: var(--fg); stroke-width: 1.4; }
.bp-core-base { fill: var(--face-right); }
.bp-core-body { fill: var(--face-left); }
.bp-core-ring { fill: none; stroke-width: 1 !important; }
.bp-core-top { fill: var(--face-top); }
.bp-packet { fill: var(--lamp); stroke: #ffe3a6; stroke-width: 1; }
.bp-call circle { fill: var(--bg); stroke: var(--fg); stroke-width: 1; }
.bp-call text { font: 400 12px var(--f-mono); fill: var(--fg); text-anchor: middle; }
.bp-leader { fill: none; stroke: var(--fg); stroke-width: .8; }
.bp-call { transition: opacity .5s var(--ease); }   /* the rest is moved frame by frame in site.js */

@media (min-width: 900px) {
  /* wide screens: words on the left, the drawing on the right. Phones: title, drawing, then the notes,
     so the notes light up while the drawing is on screen */
  .plan-inner {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head fig" "copy fig";
    grid-template-rows: auto 1fr;
    grid-column-gap: 56px; column-gap: 56px;
    padding-top: 72px; padding-bottom: 64px;
  }
  .plan-head { grid-area: head; }
  .plan-copy { grid-area: copy; }
  .plan-figure { grid-area: fig; margin: 0; align-self: center; }
}
.bp-detail { fill: none; stroke: var(--fg); stroke-width: 1; stroke-linecap: round; }
.bp-led { fill: var(--lamp); }   /* status lights glow gold on the green */
.bp-lock rect, .bp-lock path { fill: none; stroke: var(--fg); stroke-width: 1.3; stroke-linecap: round; }
.bp-lock rect { fill: var(--face-top); }
.bp-lock circle { fill: var(--fg); }
/* lines keep their width on screen whatever size the drawing is shown at */
.bp path, .bp polygon, .bp ellipse, .bp circle, .bp rect { vector-effect: non-scaling-stroke; }

/* =====================================================================
   4. Worlds: not only IT
   A cinematic break from the data sections: dark, image-led, a collage of different sizes. Mill Street
   carries it, the robot stands as a studio shot, the film plays in place (loaded only on a click), the
   other tiles show the range. Phones: Mill Street, the robot, then a strip to swipe through.
   ===================================================================== */
.worlds { background: #0b0f17; color: var(--ink); }
.worlds-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 64px; }
.worlds-title { font-size: 2.25rem; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.worlds-intro { margin-top: 14px; max-width: 34em; color: var(--ink-dim); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); }
.worlds-grid { margin-top: 32px; }
.tile { position: relative; margin: 0 0 20px; }
.tile picture, .tile-img { display: block; width: 100%; height: auto; }
.tile-media {
  position: relative; overflow: hidden; border-radius: 10px; background: #151b28;
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* Safari: keeps a zooming image inside the rounded corners */
}
/* a slight zoom on hover, only where there is a real pointer (on touch it would stick) and motion is welcome */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile-media .tile-img { transition: transform .6s var(--ease); }
  .tile:hover .tile-media .tile-img { transform: scale(1.03); }
}
.tile-cap { padding-top: 12px; }
.tile-label { font: 400 11.5px/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lamp); }
.tile-text { margin-top: 4px; color: var(--ink-dim); font-size: 15px; line-height: 1.5; max-width: 34em; }

/* Mill Street: the image carries the section. On wide screens the words sit on it, on phones below it */
.tile-ms .tile-img { border-radius: 12px; }
@media (min-width: 640px) {
.tile-ms { overflow: hidden; border-radius: 12px; }
.tile-ms .tile-img { border-radius: 0; }
.tile-ms .tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 20px 18px;
  background: linear-gradient(to top, rgba(11, 15, 23, 0.94), rgba(11, 15, 23, 0.7) 55%, rgba(11, 15, 23, 0));
}
.tile-ms .tile-text { color: var(--ink); }
}
.tile-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; }
.tile-actions .btn { min-height: 42px; padding: 0 18px; font-size: 12.5px; margin-right: 18px; }
.tile-link { color: var(--ink); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(237, 231, 219, 0.5); }
.tile-link:hover { text-decoration-color: var(--ink); }

/* the robot as a studio shot */
/* the robot stands in an absolutely placed box: a definite height in every browser (older Safari cannot size a
   percentage height inside a stretched flex item) */
.tile-studio { background: #e6e8ec; height: 300px; }
.tile-studio picture { position: absolute; top: 4%; right: 0; bottom: 0; left: 0; text-align: center; }
.tile-robot-img { display: inline-block; width: auto; height: 100%; max-width: none; }

/* the film: a poster with a play button, the player only loads on a click */
.tile-play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.tile-play-icon {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(11, 15, 23, 0.72); border: 2px solid var(--lamp);
  transition: background-color .2s var(--ease);
}
.tile-play-icon::after {
  content: ''; position: absolute; left: 26px; top: 20px;
  border-left: 18px solid var(--lamp); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.tile-play:hover .tile-play-icon { background: rgba(11, 15, 23, 0.9); }
.tile-frame { position: relative; width: 100%; padding-top: 56.25%; }
.tile-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* phones: the smaller tiles become a strip to swipe through */
.worlds-strip {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  scroll-padding: 0 var(--gutter);   /* snapping respects the page margin */
  scrollbar-width: none;
}
.worlds-strip::-webkit-scrollbar { display: none; }
.worlds-strip .tile { flex: none; width: 80%; margin-right: 14px; scroll-snap-align: start; }
.worlds-strip .tile:last-child { margin-right: 0; }

/* calm arrival: tiles rise a little as they come into view (worlds.js adds .is-anim to the section, then .is-in) */
.worlds.is-anim .tile { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.worlds.is-anim .tile.is-in { opacity: 1; transform: none; }
.reduce .worlds .tile { opacity: 1; transform: none; transition: none; }

@media (min-width: 900px) {
  .worlds-inner { padding-top: 80px; padding-bottom: 80px; }
  .worlds-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-column-gap: 24px; column-gap: 24px; grid-row-gap: 28px; row-gap: 28px; margin-top: 40px;
  }
  .tile { margin: 0; }
  .tile-ms { grid-column: 1 / span 8; }
  .tile-ms .tile-cap { padding: 96px 32px 28px; }
  .tile-robot { grid-column: 9 / span 4; display: flex; flex-direction: column; }
  .tile-robot .tile-studio { height: auto; flex: 1; min-height: 260px; }
  .worlds-strip { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 24px; column-gap: 24px; overflow: visible; margin: 0; padding: 0; }
  .worlds-strip .tile { width: auto; margin: 0; }
}
.nowrap { white-space: nowrap; }

/* the sound tiles: a play button, the waveform that fills as it plays, and the time */
.player { display: flex; align-items: center; margin-top: 12px; }
.player-audio { width: 100%; }
.player-btn {
  flex: none; position: relative; width: 44px; height: 44px; margin-right: 14px; padding: 0;
  border-radius: 50%; border: 2px solid var(--lamp); background: transparent; cursor: pointer;
}
.player-btn:hover { background: rgba(240, 192, 104, 0.12); }
.player-icon {
  position: absolute; left: 16px; top: 12px;
  border-left: 13px solid var(--lamp); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.player.is-playing .player-icon {
  left: 14px; top: 13px; width: 12px; height: 14px; border: 0;
  border-left: 4px solid var(--lamp); border-right: 4px solid var(--lamp);
}
.player-wave { flex: 1; min-width: 0; height: 40px; cursor: pointer; }
.wave { display: block; width: 100%; height: 40px; }
.wave-rest rect { fill: #3a4256; }
.wave-played rect { fill: var(--lamp); }
.player-time { flex: none; margin-left: 12px; font: 400 12px/1 var(--f-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.player [hidden] { display: none !important; }

/* =====================================================================
   5. The ecosystem: a transit map
   Five lines of data meet at the secured core. Trains run along the lines while the section is on screen.
   Choosing a line (or a station) highlights its route, dims the rest and explains it in the panel beside.
   A warm light section, new in the page's sequence. Without JavaScript: the map and every line described.
   ===================================================================== */
.eco {
  --bg: var(--ink); --fg: var(--night); --fg-2: #3a4256; --fg-3: #5d6274; --line: #d3cbbb;
  --l-orders: var(--lamp-deep); --l-products: var(--green); --l-compliance: var(--brick); --l-insight: var(--circus); --l-identity: var(--night);
  background: var(--bg); color: var(--fg);
}
.eco :focus, .eco :focus-visible { outline-color: var(--night); }
.eco-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 56px; }
.eco-title { font-size: 2.25rem; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.eco-intro { margin-top: 14px; max-width: 34em; color: var(--fg-2); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); }
.eco-figure { margin: 24px calc(var(--gutter) * -0.5) 0; }

svg.eco-map { display: block; width: 100%; height: auto; overflow: visible; }
.eco-line { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--ease); }
.eco-line-orders { stroke: var(--l-orders); }
.eco-line-products { stroke: var(--l-products); }
.eco-line-compliance { stroke: var(--l-compliance); }
.eco-line-insight { stroke: var(--l-insight); }
.eco-line-identity { stroke: var(--l-identity); }
.eco-stop { fill: #ffffff; stroke: var(--fg); stroke-width: 3.5; }
.eco-core { fill: #ffffff; stroke: var(--fg); stroke-width: 3.5; }
.eco-lock rect, .eco-lock path { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; }
.eco-label text { font: 600 14px var(--f-text); fill: var(--fg); }
.eco-station { cursor: pointer; transition: opacity .3s var(--ease); }
.eco-station:focus { outline: none; }
.eco-station:focus .eco-stop, .eco-station:focus .eco-core { stroke: var(--lamp-deep); stroke-width: 4; }
.eco-station:hover .eco-stop { stroke-width: 4; }
.eco-train { stroke-width: 2.5; fill: #ffffff; }

/* a chosen line or station: the rest steps back */
svg.eco-map.is-focused .eco-line { opacity: .15; }
svg.eco-map.is-focused .eco-line.is-on { opacity: 1; }
svg.eco-map.is-focused .eco-station { opacity: .3; }
svg.eco-map.is-focused .eco-station.is-on { opacity: 1; }
svg.eco-map.is-focused .eco-train { opacity: .15; }
svg.eco-map.is-focused .eco-train.is-on { opacity: 1; }

.eco-legend-title { margin-top: 28px; font: 400 11.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.eco-legend { list-style: none; margin: 12px 0 0; padding: 0; }
.eco-key {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 10px; margin: 0 0 4px;
  font: 500 15px/1.3 var(--f-text); color: var(--fg); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.eco-key:hover { background: rgba(19, 26, 41, 0.05); }
.eco-key[aria-pressed="true"] { background: #ffffff; border-color: var(--line); }
.eco-swatch { flex: none; width: 28px; height: 6px; margin-right: 12px; border-radius: 3px; }
.eco-swatch-orders { background: var(--l-orders); }
.eco-swatch-products { background: var(--l-products); }
.eco-swatch-compliance { background: var(--l-compliance); }
.eco-swatch-insight { background: var(--l-insight); }
.eco-swatch-identity { background: var(--l-identity); }
.eco-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); min-height: 7.5em; }
.eco-detail-name { font: 400 11.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); min-height: 1em; }
.eco-detail-text { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--fg); max-width: 30em; }
.eco-all { margin: 18px 0 0; }
.eco-all dt { margin-top: 12px; font-weight: 600; }
.eco-all dd { margin: 2px 0 0; color: var(--fg-2); }
.eco.is-live .eco-all { display: none; }   /* only once ecosystem.js runs and shows them in the panel instead */

@media (min-width: 900px) {
  .eco-inner {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas: "head head" "fig side";
    grid-column-gap: 56px; column-gap: 56px; align-items: center;
    padding-top: 80px; padding-bottom: 72px;
  }
  .eco-head { grid-area: head; }
  .eco-figure { grid-area: fig; margin: 16px 0 0; }
  .eco-side { grid-area: side; }
  .eco-legend-title { margin-top: 0; }
}
.eco-hit { fill: rgba(0, 0, 0, 0); stroke: none; }
.tile-link-quiet { font-size: 13px; color: var(--ink-dim); white-space: nowrap; }

/* =====================================================================
   6. Business value: less, on purpose
   Gold, new in the page's sequence. Typography only: four outcomes set large, each with its explanation beside it.
   ===================================================================== */
.value { --bg: var(--lamp); --fg: var(--night); --fg-2: #2b2a26; background: var(--bg); color: var(--fg); }
.value :focus, .value :focus-visible { outline-color: var(--night); }
.value-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 48px; }
.value-title { font-size: 2.25rem; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.value-intro { margin-top: 14px; max-width: 32em; color: var(--fg-2); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); }
.value-list { list-style: none; margin: 28px 0 0; padding: 0; }
.value-row { padding: 22px 0; border-top: 1px solid rgba(19, 26, 41, 0.22); }
.value-row:last-child { border-bottom: 1px solid rgba(19, 26, 41, 0.22); }
.value-n { display: block; font: 400 12px/1 var(--f-mono); letter-spacing: 0.14em; color: var(--fg-2); }
.value-statement { margin-top: 10px; font-size: 1.6rem; font-size: clamp(1.4rem, 4.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.value-sub { margin-top: 10px; color: var(--fg-2); font-size: 1rem; line-height: 1.55; max-width: 32em; }

@media (min-width: 900px) {
  .value-inner { padding-top: 80px; padding-bottom: 72px; }
  .value-copy {
    display: grid; grid-template-columns: 4em minmax(0, 7fr) minmax(0, 5fr);
    grid-column-gap: 32px; column-gap: 32px; align-items: baseline;
  }
  .value-row { padding: 28px 0; }
  .value-statement, .value-sub { margin-top: 0; }
}

/* a row with one of the robot's films: the words beside the film on wide screens, above it on phones */
.value-film { margin-top: 18px; border-radius: 12px; overflow: hidden; background: #e6e8ec; box-shadow: 0 14px 34px rgba(19, 26, 41, 0.18); }   /* the films' own ground: the first section's grey */
.film { display: block; width: 100%; height: auto; border-radius: 12px; }   /* older Safari does not clip a video to its parent's corners */
@media (min-width: 900px) {
  .value-row-film { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-column-gap: 48px; column-gap: 48px; align-items: center; }
  .value-row-film .value-copy { display: block; }
  .value-row-film .value-statement, .value-row-film .value-sub { margin-top: 10px; }
  .value-row-film .value-film { margin-top: 0; }
  /* the films change sides row by row */
  .value-row-film:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .value-row-film:nth-child(even) .value-film { order: -1; }
}

/* Identity and marketing: the first section's background and type, the robot's film laid straight on it
   (rendered on the same #e6e8ec, no frame), so he stands in the section as he does at the top. */
.identity {
  --bg: #e6e8ec; --fg: var(--night); --fg-2: var(--rule); --fg-3: #56607a;
  background: var(--bg); color: var(--fg);
}
.identity-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 36px; }
.identity-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.identity-title {
  margin-top: 14px; font-size: 2.25rem; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.08; max-width: 16ch; color: var(--fg);
}
.identity-line { margin-top: 14px; max-width: 30em; font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.6; color: var(--fg-2); }
.identity-film { margin: 18px auto 0; max-width: 560px; }   /* the film is cropped to the robot, so it stays near his size at the top */
.identity .film { border-radius: 0; }
@media (min-width: 900px) {
  .identity-inner {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-column-gap: 40px; column-gap: 40px; align-items: center;
    padding-top: 72px; padding-bottom: 48px;
  }
  .identity-film { margin-top: 0; justify-self: center; width: 100%; }
}

/* His own products: a showcase. The two real app screens, large and crisp in phone frames, lean in either
   side of the robot holding them up; they rise into place when the section comes into view (only when the
   script runs and motion is welcome). Under each phone, its app: a hook, a line, three facts. */
.products {
  --bg: var(--green-deep); --fg: var(--ink); --fg-2: #d6e3dc; --fg-3: #a9c4b8; --line: #3f7563;
  background: var(--bg); color: var(--fg); overflow: hidden;
}
.products :focus, .products :focus-visible { outline-color: var(--lamp); }
.products-inner { max-width: var(--max); margin: 0 auto; padding: 60px var(--gutter) 56px; }
.products-head { text-align: center; max-width: 40em; margin: 0 auto; }
.products-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.products-title {
  margin-top: 14px; font-size: 2.4rem; font-size: clamp(2rem, 7vw, 3.75rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.04; color: var(--fg);
}
.products-intro { margin: 16px auto 0; max-width: 30em; color: var(--fg-2); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.1875rem); line-height: 1.55; }

.showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-column-gap: 0; column-gap: 0; align-items: center;
  max-width: 940px; margin: 36px auto 0;
}
.phone {
  position: relative; z-index: 1; margin: 0;
  padding: 3.2%; background: #0b0f17; border-radius: 14% / 6.5%;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-transition: opacity 0.9s ease, -webkit-transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 11% / 5%; }
.phone-travel { margin-right: -9%; -webkit-transform: rotate(-6deg) translateY(14px); transform: rotate(-6deg) translateY(14px); }
.phone-hus { margin-left: -9%; -webkit-transform: rotate(6deg) translateY(14px); transform: rotate(6deg) translateY(14px); }
.showcase-film {
  position: relative; z-index: 2; border-radius: 14px; overflow: hidden; background: #e6e8ec;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}
.products.is-anim .phone { opacity: 0; }
.products.is-anim .phone-travel { -webkit-transform: rotate(0deg) translate(30%, 60px); transform: rotate(0deg) translate(30%, 60px); }
.products.is-anim .phone-hus { -webkit-transform: rotate(0deg) translate(-30%, 60px); transform: rotate(0deg) translate(-30%, 60px); }
.products.is-anim.is-in .phone { opacity: 1; }
.products.is-anim.is-in .phone-travel { -webkit-transform: rotate(-6deg) translateY(14px); transform: rotate(-6deg) translateY(14px); }
.products.is-anim.is-in .phone-hus { -webkit-transform: rotate(6deg) translateY(14px); transform: rotate(6deg) translateY(14px); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; }

.products-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 36px; row-gap: 36px;
  max-width: 940px; margin: 44px auto 0;
}
.product { border-top: 1px solid var(--line); padding-top: 20px; }
.product-name { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lamp); }
.product-hook {
  margin-top: 10px; font-size: 1.6rem; font-size: clamp(1.45rem, 4.4vw, 2.1rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.12; color: var(--fg);
}
.product-text { margin-top: 12px; color: var(--fg-2); font-size: 1rem; line-height: 1.6; max-width: 30em; }
.product-facts { list-style: none; margin: 16px 0 0; padding: 0; }
.product-facts li { position: relative; padding: 7px 0 7px 26px; color: var(--fg); font-size: 0.975rem; line-height: 1.45; border-top: 1px solid rgba(169, 196, 184, 0.18); }
.product-facts li:first-child { border-top: 0; }
.product-facts li::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--lamp); }
.thanks { margin-top: 22px; }
.thanks-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.thanks-logos { margin-top: 10px; }
.thanks-logo {
  display: inline-block; vertical-align: middle; height: 40px; margin: 0 10px 8px 0; padding: 8px 12px;
  background: #fff; border-radius: 8px;
}
.thanks-logo img { display: block; height: 24px; width: auto; }
.thanks-line { margin-top: 4px; color: var(--fg-3); font-size: 0.875rem; line-height: 1.5; max-width: 30em; }
@media (min-width: 760px) {
  .products-inner { padding-top: 84px; padding-bottom: 76px; }
  .products-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 56px; column-gap: 56px; align-items: start; }
  .showcase { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone { -webkit-transition: none; transition: none; }
}

/* Contact: the page ends where it began, on the first section's grey with the robot, who waves. The form posts
   to Mill Street's /contact.php with its own fields (honeypot, timestamp); every answer is shown in the page's
   own words and language (src/js/contact.js). Phones: the heading, the robot, then the form. */
.contact {
  --bg: #e6e8ec; --fg: var(--night); --fg-2: var(--rule); --fg-3: #56607a; --line: #c3c8d1;
  background: var(--bg); color: var(--fg);
}
.contact :focus, .contact :focus-visible { outline-color: var(--night); }
.contact-inner {
  max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 48px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'film' 'body';
  grid-row-gap: 24px; row-gap: 24px;
}
.contact-head { grid-area: head; }
.contact-body { grid-area: body; }
.contact-film { grid-area: film; max-width: 380px; width: 100%; margin: 0 auto; }
.contact-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.contact-title {
  margin-top: 14px; font-size: 2.3rem; font-size: clamp(1.9rem, 6.6vw, 3.4rem); font-weight: 600;
  letter-spacing: -0.032em; line-height: 1.06; max-width: 15ch; color: var(--fg);
}
.contact-line { margin-top: 16px; max-width: 32em; color: var(--fg-2); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.6; }
.contact-note { margin-bottom: 14px; padding: 12px 14px; border-radius: 8px; background: #fff; color: var(--fg); }
.contact-form, .contact-sent {
  max-width: 34em; padding: 24px; border-radius: 14px; background: #fff;
  box-shadow: 0 14px 34px rgba(19, 26, 41, 0.1), 0 0 0 1px rgba(19, 26, 41, 0.06);
}
.cf-field { margin-bottom: 16px; }
.cf-field label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--fg); }
.cf-field input, .cf-field textarea {
  display: block; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #f7f8fa;
  font: inherit; font-size: 16px; color: var(--fg); -webkit-appearance: none; appearance: none;
}
.cf-field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.cf-field input:focus, .cf-field textarea:focus { border-color: var(--night); background: #fff; }
.cf-field [aria-invalid='true'] { border-color: #b3261e; }
.cf-count { display: block; margin-top: 6px; text-align: right; font-family: var(--f-mono); font-size: 12px; color: var(--fg-3); }
.cf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #fbeceb; color: #8c1d18; font-size: 0.9375rem; line-height: 1.45; }
.cf-send, .cf-again {
  display: inline-block; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--night); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.cf-send:hover, .cf-again:hover { background: var(--rule); }
.cf-send[disabled] { opacity: 0.6; cursor: default; }
.cf-privacy { margin-top: 16px; color: var(--fg-3); font-size: 0.875rem; line-height: 1.5; }
.cf-privacy a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.contact-sent-title { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.contact-sent-text { margin: 8px 0 18px; color: var(--fg-2); line-height: 1.55; }
@media (min-width: 900px) {
  .contact-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'head film' 'body film';
    grid-column-gap: 48px; column-gap: 48px; grid-row-gap: 28px; row-gap: 28px;
    padding-top: 80px; padding-bottom: 64px; align-items: start;
  }
  /* he stands on the form's baseline: his feet are 94.6% down the film, so it drops by the rest */
  .contact-film { max-width: 760px; align-self: end; -webkit-transform: translateY(5.4%); transform: translateY(5.4%); }
  .contact-form, .contact-sent { padding: 28px; }
}

/* Legal pages (privacy): the first section's light grey and navy type, set for reading. */
.legal {
  --bg: #e6e8ec; --fg: var(--night); --fg-2: var(--rule); --fg-3: #56607a; --line: #c3c8d1;
  background: var(--bg); color: var(--fg);
}
.legal :focus, .legal :focus-visible { outline-color: var(--night); }
.legal-inner { max-width: 42em; margin: 0 auto; padding: 48px var(--gutter) 64px; }
.legal-title {
  font-size: 2.5rem; font-size: clamp(2.1rem, 7vw, 3.4rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.05; color: var(--fg);
}
.legal-lead { margin-top: 14px; font-size: 1.125rem; font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.55; color: var(--fg-2); }
.legal-updated { margin-top: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--fg-3); }
.legal-head { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.legal h2 { margin-top: 34px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--fg); }
.legal p, .legal li { color: var(--fg-2); font-size: 1rem; line-height: 1.65; }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal li { margin-top: 6px; }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal-quiet { font-size: 0.9375rem; color: var(--fg-3); }
.legal-back { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line); }
.legal-back a { display: inline-block; padding: 12px 0; }
.footer-privacy { display: inline-block; padding: 12px 0; margin-top: -12px; margin-bottom: -4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .legal-inner { padding-top: 72px; padding-bottom: 88px; } }

/* Touch screens: every control a full finger target (at least 44 px). Desktop keeps Mill Street's exact header. */
@media (pointer: coarse) {
  .lang-switch { height: 44px; }
  .nav .btn-play { min-height: 44px; }
  .stage-chip { min-height: 44px; }
  .tile-actions .btn { min-height: 44px; }
  .tile-link { display: inline-block; padding: 11px 0; }
}

/* 404: the first section's grey, the robot puzzled beside the words, two ways on. Phones: words, then robot. */
.lost {
  --bg: #e6e8ec; --fg: var(--night); --fg-2: var(--rule); --fg-3: #56607a; --line: #c3c8d1;
  background: var(--bg); color: var(--fg);
}
.lost :focus, .lost :focus-visible { outline-color: var(--night); }
.lost-inner {
  max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 20px; row-gap: 20px; align-items: center;
}
.lost-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.lost-title {
  margin-top: 14px; font-size: 2.4rem; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 600;
  letter-spacing: -0.034em; line-height: 1.04; max-width: 13ch; color: var(--fg);
}
.lost-line { margin-top: 16px; max-width: 30em; color: var(--fg-2); font-size: 1.0625rem; font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.6; }
.lost-actions { margin-top: 24px; }
.lost-home {
  display: inline-block; vertical-align: middle; min-height: 48px; padding: 14px 24px; margin: 0 0 10px 0;
  -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 999px;
  background: var(--night); color: #fff; font-weight: 600; line-height: 20px; text-decoration: none;
}
.lost-home:hover { background: var(--rule); }
.lost-film { max-width: 360px; width: 100%; margin: 0 auto; }
@media (min-width: 900px) {
  .lost-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-column-gap: 48px; column-gap: 48px; padding-top: 72px; padding-bottom: 56px; }
  .lost-film { max-width: 560px; }
  /* on a desktop the whole page fits the window: the film is as tall as the space between header, padding
     and footer allows (about 500 px of them; the film is 866 x 800, so its width is 1.08 times its height),
     never under 260 px wide. Browsers without svh keep the vh line, without min() the plain 560px */
  .page-fill .lost-film { max-width: 560px; max-width: min(560px, max(260px, calc((100vh - 500px) * 1.08))); max-width: min(560px, max(260px, calc((100svh - 500px) * 1.08))); }
}

/* A short page (404): at least the window's height, the content stretches, the footer sits at the bottom.
   Phones: svh, the height with the browser bars shown, where supported; vh for the others. */
.page-fill { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-fill > main { display: flex; flex-direction: column; -webkit-box-flex: 1; flex: 1 0 auto; }
.page-fill > main > .lost { display: flex; align-items: center; flex: 1 0 auto; }
.page-fill > main > .lost > .lost-inner { width: 100%; }
.page-fill > .footer { flex-shrink: 0; }