/* ==================================================================
   Tabadan Production
   Tokens → base → chrome → hero → sections → pages → responsive
   ================================================================== */

:root {
  --paper: #ece8df;
  --paper-2: #f6f4ef;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  --muted: #7b766d;
  --line: rgba(10, 10, 10, 0.12);
  --jade: #14b37d;          /* fills, and text on ink */
  --jade-ink: #066b50;      /* small text on paper */
  --on-dark-muted: rgba(236, 232, 223, 0.62);
  --on-dark-line: rgba(236, 232, 223, 0.14);

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Inter Tight", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --header-h: 72px;
  --ease: cubic-bezier(.6, 0, .2, 1);
}
/* Archivo has no Cyrillic. Roboto Flex has the same width axis, so font-stretch keeps working */
html[lang="ru"] { --f-display: "Roboto Flex", "Archivo", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); }
.poster, .h-section, .page-title { font-stretch: 86%; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Paper grain — very light, sits behind everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type helpers ---------- */
.kicker {
  font: 800 11px/1.2 var(--f-mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--jade-ink);
}
.on-dark .kicker { color: var(--jade); }
.h-section {
  font-weight: 900;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: .95; letter-spacing: -.035em;
  text-transform: uppercase;
}
/* Second heading line in brand green, like "— DON'T." and "comes out." */
.h-section .dim { color: var(--jade); }
.on-dark .h-section .dim { color: var(--jade); }
.lede { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.on-dark .lede { color: var(--on-dark-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: stretch;
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--ink); text-decoration: none; cursor: pointer;
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s;
}
.btn:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--jade); }
.btn__label { padding: 16px 22px; font: 800 16px/1.2 var(--f-body); letter-spacing: -.01em; display: flex; align-items: center; }
.btn__arrow {
  position: relative; width: 58px; overflow: hidden;
  background: var(--jade); color: var(--ink); font-weight: 900; font-size: 20px;
}
.btn__arrow span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}
.btn__arrow span + span { transform: translate(-400%, -50%); }
.btn:hover .btn__arrow span:first-child { transform: translate(180%, -50%); }
.btn:hover .btn__arrow span + span { transform: translate(-50%, -50%); }
/* Hero button as a message box: typed label with a blinking cursor; the arrow nudges like "send" after each line */
.btn--typing .btn__label { white-space: nowrap; min-width: 14.5em; }
.btn--typing .tw-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--jade); animation: tw-blink 1s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.btn--typing.is-sent .btn__arrow span:first-child { animation: tw-send .7s var(--ease); }
@keyframes tw-send { 0% { transform: translate(-50%, -50%); } 45% { transform: translate(160%, -50%); } 46% { transform: translate(-260%, -50%); } 100% { transform: translate(-50%, -50%); } }
.on-dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.link-line {
  display: inline-flex; align-items: center; gap: 12px;
  font: 800 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; padding: 8px 2px; background: none; border: 0; cursor: pointer;
}
.link-line::before { content: ""; width: 32px; height: 2px; background: currentColor; transition: width .3s; }
.link-line:hover::before { width: 52px; }

.brick {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--ink); background: var(--paper);
  font: 800 11px/1.1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.brick:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.brick[aria-pressed="true"], .brick.is-on { background: var(--jade); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(236, 232, 223, .86);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* Logo is outlined SVG: TABADAN and PRODUCTION share exact left and right edges on every device */
.brand__logo { display: block; width: auto; height: 46px; overflow: visible; }
.brand__mark { transform-box: fill-box; transform-origin: 50% 60%; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.brand:hover .brand__mark { transform: rotate(-8deg); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font: 800 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: var(--jade); transition: right .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav .nav__brief, .nav .nav__contacts, .nav .nav__robot { display: none; }
.nav__contacts { gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 28px; }
/* Menu contact buttons: each app's official colour and mark, framed in the site's black border and offset shadow.
   .nav prefix outranks the generic .nav a (mono caps, underline) */
.nav .mc-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 6px;
  font: 700 clamp(13px, 3.8vw, 15px)/1 var(--f-body); letter-spacing: -.01em; text-transform: none; text-decoration: none; color: #fff;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.nav .mc-btn::after { display: none; }
.nav .mc-btn svg { width: 21px; height: 21px; flex: none; fill: currentColor; }
.nav .mc-btn--wa { background: #25d366; }
.nav .mc-btn--tg { background: #26a5e4; }
/* Cute bits: the buttons pop in one by one when the menu opens, then take turns with a little move
   (the phone rings, the paper plane flies, the envelope hops). A tap squishes the button */
.menu-open .nav .mc-btn { animation: mc-pop .5s cubic-bezier(.3, 1.7, .5, 1) both; }
.menu-open .nav .mc-btn:nth-child(1) { animation-delay: .62s; }
.menu-open .nav .mc-btn:nth-child(2) { animation-delay: .72s; }
.menu-open .nav .mc-btn:nth-child(3) { animation-delay: .82s; }
@keyframes mc-pop { from { opacity: 0; transform: translateY(12px) scale(.6); } }
.menu-open .nav .mc-btn svg { animation: 3.6s ease-in-out infinite; }
.menu-open .nav .mc-btn--wa svg { animation-name: mc-ring; animation-delay: 1.5s; }
.menu-open .nav .mc-btn--tg svg { animation-name: mc-fly; animation-delay: 2.7s; }
.menu-open .nav .mc-btn--mail svg { animation-name: mc-hop; animation-delay: 3.9s; }
@keyframes mc-ring { 0%, 16%, 100% { transform: none; } 2%, 6%, 10% { transform: rotate(-14deg); } 4%, 8%, 12% { transform: rotate(14deg); } }
@keyframes mc-fly { 0%, 18%, 100% { transform: none; } 7% { transform: translate(5px, -6px) rotate(-10deg) scale(.85); opacity: .2; } 8% { transform: translate(-5px, 5px) scale(.85); opacity: 0; } 14% { transform: none; opacity: 1; } }
@keyframes mc-hop { 0%, 14%, 100% { transform: none; } 3% { transform: translateY(-5px); } 6% { transform: none; } 9% { transform: translateY(-3px); } 12% { transform: none; } }
.nav .mc-btn:active { transform: translate(2px, 2px) scale(.96); box-shadow: 1px 1px 0 var(--ink); }
.nav .mc-btn--mail { background: var(--paper-2); color: var(--ink); }
.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 13px 20px; border-radius: 999px;
  font: 800 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.header-cta:hover { background: var(--jade); color: var(--ink); }
/* Language switch: the other language's code, framed like a brick */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px;
  border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
  font: 800 11px/1 var(--f-mono); letter-spacing: .14em; padding-left: calc(8px + .14em);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.lang-switch svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.lang-switch:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); background: var(--jade); }
.menu-btn {
  display: none; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0;
  background: transparent; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
}
/* Icon: long bar, short bar, and the green square from the logo. Opens into an X.
   State follows the button's aria-expanded, so it switches back the moment closing starts. */
.menu-btn__icon { position: absolute; top: 50%; left: 50%; width: 28px; height: 18px; transform: translate(-50%, -50%); }
.menu-btn__icon::before, .menu-btn__icon::after {
  content: ""; position: absolute; right: 0; height: 4px; background: var(--ink);
  transition: top .3s var(--ease), bottom .3s var(--ease), width .3s var(--ease), transform .3s var(--ease);
}
.menu-btn__icon::before { top: 0; width: 28px; }
.menu-btn__icon::after { bottom: 1.5px; width: 16px; }
.menu-btn__icon i {
  position: absolute; left: 0; bottom: 0; width: 7px; height: 7px; background: var(--jade);
  transition: opacity .2s, transform .3s var(--ease);
}
@media (hover: hover) { .menu-btn:hover .menu-btn__icon::after { width: 28px; } }
.menu-btn[aria-expanded="true"] .menu-btn__icon i { opacity: 0; transform: scale(0); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { top: 7px; width: 28px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { bottom: 7px; width: 28px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ticker {
  background: var(--jade); color: var(--ink); overflow: hidden;
  border-top: 3px solid var(--ink);
}
.ticker__track {
  display: flex; width: max-content; gap: 32px; padding: 9px 0 9px 32px;
  font: 800 12px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  animation: ticker 32s linear infinite;
}
.ticker__track { padding-block: 14px; font-size: 13px; animation-duration: 40s; }
.ticker__track i { font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.hero__body { flex: 1; display: flex; flex-direction: column; padding-block: clamp(28px, 5vh, 64px) 28px; }
.hero__grid {
  flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center;
}
.poster {
  font-weight: 900; font-size: clamp(52px, 7.6vw, 132px);
  line-height: .88; letter-spacing: -.05em; text-transform: uppercase;
}
.poster__row { display: block; overflow: hidden; padding-bottom: .04em; }
.poster__row > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.is-in .poster__row > span { transform: none; }
.is-in .poster__row:nth-child(2) > span { transition-delay: .12s; }
.is-in .poster__row:nth-child(3) > span { transition-delay: .26s; }
.is-in .poster__row:nth-child(4) > span { transition-delay: .4s; }
.poster__outline { color: transparent; -webkit-text-stroke: 2.5px var(--ink); }
.poster__accent { color: var(--jade); }
.poster__dash { display: inline-block; width: .55em; height: .11em; background: var(--jade); vertical-align: .26em; margin-inline: .08em .12em; }

.robot-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.robot {
  width: 100%; max-width: 380px; cursor: default;
  filter: drop-shadow(10px 10px 0 rgba(10, 10, 10, .1));
}
.robot__body { transform-origin: 200px 300px; }

/* Robot's speech bubble (phones and desktop): a short guided intro typed out next to the robot */
.robot__say {
  display: flex; flex-direction: column; gap: 10px; position: relative;
  padding: 11px 13px 10px; background: var(--paper-2); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font: 700 14px/1.35 var(--f-body); color: var(--ink); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.robot__say p { margin: 0 !important; max-width: none !important; color: var(--ink) !important; font-size: 14px !important; }
.robot__say-cta {
  align-self: flex-start; background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 8px 12px; font: 800 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
}
.robot__say-cta:not([hidden]) { animation: case-in .35s var(--ease); }
.robot__dots { margin-top: auto; display: flex; gap: 5px; }
.robot__dots i { width: 7px; height: 7px; border: 1.5px solid var(--ink); border-radius: 50%; transition: background .2s; }
.robot__dots i.is-on { background: var(--jade); }
.is-in .robot__say { animation: rb-fade .4s 2.5s both; }
.robot__say::before, .robot__say::after { content: ""; position: absolute; top: 20px; border-style: solid; border-color: transparent; }
.robot__say::before { right: -19px; border-width: 11px 0 11px 17px; border-left-color: var(--ink); }
.robot__say::after { right: -13px; top: 23.5px; border-width: 7.5px 0 7.5px 12px; border-left-color: var(--paper-2); }
.robot__caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--jade); animation: blink .9s steps(1) infinite; }

/* Entrance: a closed suitcase drops in, shakes, then unpacks into the robot.
   Wrapper groups (.rb-*) carry the entrance so they never clash with the dance animations inside.
   JS adds .is-unpack to play it; --rb-t shifts the timeline (negative skips the drop when the case flies back in). */
.robot .rb-drop, .robot .rb-head, .robot .rb-tag, .robot .rb-arm-l, .robot .rb-arm-r, .robot .rb-legs, .robot .rb-label { opacity: 0; }
.robot.is-unpack .rb-drop { opacity: 1; animation: rb-drop .65s cubic-bezier(.3, 1.35, .5, 1) calc(var(--rb-t, 0s) + .2s) both; }
.robot.is-unpack.is-replay .rb-drop { animation: none; }
.robot.is-unpack .rb-shake { transform-origin: 200px 404px; animation: rb-shake .5s ease-in-out calc(var(--rb-t, 0s) + .9s); }
.robot.is-unpack .rb-head, .robot.is-unpack .rb-tag { opacity: 1; animation: rb-head .7s cubic-bezier(.3, 1.45, .5, 1) calc(var(--rb-t, 0s) + 1.35s) both; }
.robot.is-unpack .rb-arm-l { opacity: 1; animation: rb-arm-l .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--rb-t, 0s) + 1.8s) both; }
.robot.is-unpack .rb-arm-r { opacity: 1; animation: rb-arm-r .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--rb-t, 0s) + 1.8s) both; }
.robot.is-unpack .rb-legs { opacity: 1; animation: rb-legs .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--rb-t, 0s) + 1.95s) both; }
.robot.is-unpack .robot__eye rect { animation: rb-eyes .6s calc(var(--rb-t, 0s) + 2.3s) both; }
.robot.is-unpack .rb-label { opacity: 1; animation: rb-fade .4s calc(var(--rb-t, 0s) + 2.55s) both; }
.robot.is-unpack .robot__belly > rect:first-child { animation: rb-lock .5s calc(var(--rb-t, 0s) + .9s); }
@keyframes rb-drop { 0% { opacity: 0; transform: translateY(-70px); } 40% { opacity: 1; } 72% { transform: translateY(6px) scaleY(.96); } 100% { transform: none; } }
@keyframes rb-shake { 15% { transform: rotate(-3deg); } 35% { transform: rotate(3deg); } 55% { transform: rotate(-2.5deg); } 75% { transform: rotate(2deg); } }
@keyframes rb-head { from { transform: translateY(165px); } }
@keyframes rb-arm-l { from { transform: translateX(48px); } }
@keyframes rb-arm-r { from { transform: translateX(-48px); } }
@keyframes rb-legs { from { transform: translateY(-78px); } }
@keyframes rb-eyes { 0%, 25%, 55% { fill: #0a0a0a; } 12%, 40%, 70%, 100% { fill: #14b37d; } }
@keyframes rb-lock { 30%, 70% { fill: #8ff5cf; } }
@keyframes rb-fade { from { opacity: 0; } }
.robot__eye { transition: transform .12s linear; }
.robot__belly { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: filter .15s, transform .15s; }
.robot__belly:hover { filter: brightness(1.15); transform: scale(1.06); }
.robot__belly:focus-visible { outline: none; stroke: var(--ink); stroke-width: 6; }
.robot.dancing .robot__body { animation: dance .75s ease-in-out infinite; transition: none; }
.robot__arm-l { transform-origin: 52px 258px; }
.robot__arm-r { transform-origin: 348px 258px; }
.robot__leg-l { transform-origin: 140px 408px; }
.robot__handle { transform-origin: 200px 60px; }
.robot__tag { transform-origin: 236px 30px; transform: rotate(8deg); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.robot:hover .robot__tag { transform: rotate(-4deg); }
.robot__wheel { transform-box: fill-box; transform-origin: center; }
.robot.dancing .robot__tag { animation: tag-swing .75s ease-in-out infinite; transition: none; }
.robot.dancing .robot__handle { animation: handle-bob .375s ease-in-out infinite; }
.robot.dancing .robot__wheel { animation: spin .75s linear infinite; }
@keyframes tag-swing { 25% { transform: rotate(24deg); } 75% { transform: rotate(-10deg); } }
@keyframes handle-bob { 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.robot__leg-r { transform-origin: 260px 408px; }
.robot.dancing .robot__arm-l { animation: arm-l .75s ease-in-out infinite; }
.robot.dancing .robot__arm-r { animation: arm-r .75s ease-in-out infinite; }
.robot.dancing .robot__leg-l { animation: leg-l .75s ease-in-out infinite; }
.robot.dancing .robot__leg-r { animation: leg-r .75s ease-in-out infinite; }
.robot.dancing .robot__belly { animation: pulse .375s ease-in-out infinite; }
@keyframes dance {
  12% { transform: translateY(-14px) rotate(-5deg); }
  25% { transform: translateY(-6px) rotate(5deg); }
  37% { transform: translateY(-16px) rotate(-5deg); }
  50% { transform: translateY(-4px) rotate(5deg); }
  62% { transform: translateY(-14px) rotate(-5deg); }
  75% { transform: translateY(-4px) rotate(5deg); }
  87% { transform: translateY(-12px) rotate(-4deg); }
}
@keyframes arm-l { 25% { transform: rotate(-40deg); } 75% { transform: rotate(20deg); } }
@keyframes arm-r { 25% { transform: rotate(40deg); } 75% { transform: rotate(-20deg); } }
@keyframes leg-l { 25% { transform: rotate(-22deg); } 75% { transform: rotate(22deg); } }
@keyframes leg-r { 25% { transform: rotate(22deg); } 75% { transform: rotate(-22deg); } }
@keyframes pulse { 30% { transform: scale(1.12); } 70% { transform: scale(.88); } }
@keyframes blink { 50% { opacity: .35; } }

.hero__info {
  display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: end;
  padding-top: 24px; opacity: 0; transform: translateY(16px);
  transition: opacity .7s .9s, transform .7s .9s;
}
.is-in .hero__info { opacity: 1; transform: none; }
.hero__info p { margin-top: 10px; max-width: 46ch; color: var(--ink-2); font-size: 16px; }
.hero__statement, .hero__lead, .hero__points, .hero__services-label { display: none; }
.bricks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.bricks .brick { flex: 1 1 auto; }

/* "What we do" selling points, on the dark band (desktop panel and mobile) */
.hero__points { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--on-dark-line); }
.hero__points li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--on-dark-line); }
.hero__icon { display: grid; place-items: center; width: 36px; height: 36px; background: var(--jade); box-shadow: 3px 3px 0 #0b5c43; }
.hero__icon svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__icon .i-fill { fill: var(--ink); stroke: var(--ink); }
.hero__icon .i-dot { fill: var(--jade); stroke: none; }
.hero__icon .i-mark { stroke: var(--jade); stroke-width: 2.1; }
/* What we build, as chips under the headline */
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.hero__chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px;
  border: 1.5px solid color-mix(in srgb, var(--jade) 55%, transparent); border-radius: 999px;
  color: var(--paper); font: 700 14px/1 var(--f-body); letter-spacing: -.005em;
}
.hero__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jade); }
.hero__info .hero__points p { margin: 0; max-width: none; color: var(--paper); }
.hero__points b { display: block; font: 800 15px/1.2 var(--f-body); letter-spacing: -.01em; }
.hero__points p > span { display: block; margin-top: 1px; font-size: 13.5px; color: var(--on-dark-muted); }

/* Desktop "what we do" band: a dark panel — pitch, points and button on the left, services on the right */
@media (min-width: 901px) {
  /* Size the poster and robot by window height too, so poster, robot, panel and meta bar fit one screen */
  .hero__body { padding-top: clamp(16px, 3vh, 64px); }
  .poster { font-size: clamp(52px, min(7.6vw, 10.5vh), 132px); }
  .robot { max-width: min(380px, 33vh); }
  .hero__info {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "copy label" "copy bricks" "cta bricks";
    gap: 0 clamp(32px, 5vw, 80px); align-items: start;
    margin-top: 12px; padding: 28px 36px 32px;
    background: var(--ink); color: var(--paper); box-shadow: 8px 8px 0 var(--jade);
  }
  .hero__info > div { grid-area: copy; }
  .hero__info .kicker { margin-top: 0; color: var(--jade); }
  .hero__info .hero__statement {
    display: block; margin-top: 10px; max-width: 24ch; color: var(--paper);
    font: 900 clamp(26px, 2.2vw, 36px)/1.02 var(--f-display); letter-spacing: -.03em; text-wrap: balance;
  }
  .hero__statement span { color: var(--jade); }
  /* The services grid sits right beside the pitch on desktop, so the chips would repeat it */
  .hero__chips { display: none; }
  .hero__info .hero__lead {
    display: flex; align-items: center; gap: 10px; margin-top: 12px; max-width: none; color: var(--paper);
    font: 800 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  }
  .hero__info .hero__lead::before { content: ""; width: 24px; height: 2px; flex: none; background: var(--jade); }
  .hero__points { display: grid; margin-top: 14px; }
  .hero__points li { padding: 6px 0; }
  .hero__info .btn { grid-area: cta; justify-self: start; align-self: end; margin-top: 18px; background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .hero__info .hero__services-label {
    grid-area: label; display: block; margin: 0 0 12px; max-width: none; color: var(--jade);
    font: 800 11px/1.2 var(--f-mono); letter-spacing: .22em; text-transform: uppercase;
  }
  .hero__info .bricks { grid-area: bricks; align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
  .hero__info .bricks .brick {
    justify-content: space-between; min-height: 42px; padding: 0 16px; text-align: left;
    background: rgba(236, 232, 223, .05); border: 1.5px solid rgba(236, 232, 223, .28); color: var(--paper); font-size: 12px;
  }
  .hero__info .bricks .brick::after { content: "→"; color: var(--jade); font: 900 17px/1 var(--f-body); transition: transform .25s; }
  .hero__info .bricks .brick:hover { background: var(--jade); color: var(--ink); border-color: var(--jade); box-shadow: 3px 3px 0 var(--paper); }
  .hero__info .bricks .brick:hover::after { color: var(--ink); transform: translateX(3px); }
}
/* Shorter desktop windows (most laptops): tighter poster and panel so the whole hero fits one screen */
@media (min-width: 901px) and (max-height: 900px) {
  .hero__body { padding-bottom: 20px; }
  .poster { font-size: clamp(52px, min(7.6vw, 9.5vh), 132px); }
  .robot { max-width: min(380px, 31vh); }
  .hero__info { padding-block: 24px 26px; }
  .hero__info .hero__lead { margin-top: 8px; }
  .hero__info .hero__statement { max-width: 32ch; font-size: clamp(24px, 2vw, 30px); }
  .hero__points { margin-top: 12px; }
  .hero__points li { padding: 5px 0; }
  .hero__points p > span { display: none; }
  .hero__info .btn { margin-top: 16px; }
  .hero__info .btn__label { padding-block: 13px; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .hero__body { padding-top: 12px; padding-bottom: 14px; }
  .poster { font-size: clamp(52px, min(7.6vw, 9vh), 132px); }
  .hero__info { margin-top: 8px; padding-block: 18px 20px; }
  .hero__points { margin-top: 8px; }
  .hero__points li { grid-template-columns: 30px 1fr; padding: 3px 0; }
  .hero__icon { width: 30px; height: 30px; box-shadow: 2px 2px 0 #0b5c43; }
  .hero__icon svg { width: 18px; height: 18px; }
  .hero__info .btn { margin-top: 12px; }
  .hero__info .btn__label { padding-block: 10px; }
}
/* Narrow desktops: one column — pitch, button, then services full width */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero__info {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "copy" "cta" "label" "bricks";
  }
  .hero__info .hero__services-label { margin-top: 32px; }
  .hero__info .bricks { grid-template-columns: 1fr 1fr; }
}

.meta-bar {
  background: var(--ink); color: var(--paper); flex-shrink: 0;
  font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.meta-bar .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 12px; }
.meta-bar .sep { width: 16px; height: 2px; background: currentColor; opacity: .35; }
.meta-bar .live { color: var(--jade); animation: blink 1.2s ease-in-out infinite; }
.meta-bar .grow { flex: 1; }
.clock b { font-weight: 800; color: var(--jade); margin-right: 6px; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 10vw, 128px); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--tight { padding-block: clamp(56px, 7vw, 88px); }
/* The robot line flows straight into Services (both light) without doubled padding */
#line { padding-bottom: clamp(56px, 7vw, 96px); }
#line + #services { padding-top: 0; }
/* Two dark sections in a row: a hairline keeps them apart */
.section--dark + .section--dark { padding-top: 0; }
.section--dark + .section--dark > .wrap { border-top: 1px solid var(--on-dark-line); padding-top: clamp(72px, 10vw, 128px); }
.section__head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--split { grid-template-columns: 1fr auto; align-items: end; }

/* Services on the homepage: three groups of cards */
.svc-head { grid-template-columns: 1fr auto; align-items: end; gap: 14px 48px; }
.svc-head__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.svc-head h2 { margin: 0; }
.svc-head__sub { grid-column: 1 / -1; max-width: 44ch; margin-bottom: clamp(8px, 1.4vw, 18px); font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; line-height: 1.45; color: var(--ink-2); }
/* Accent: the invitation is a jade-underlined link to the brief; the underline fills on hover */
.svc-head__sub a {
  color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--jade), var(--jade)) 0 100% / 100% 3px no-repeat; transition: background-size .25s var(--ease);
}
.svc-head__sub a:hover { background-size: 100% 100%; }
.svc-all {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 999px;
  font: 800 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  transition: background .2s, color .2s;
}
.svc-all span { font: 900 14px/1 var(--f-body); color: var(--jade-ink); transition: transform .2s; }
.svc-all:hover { background: var(--ink); color: var(--paper); }
.svc-all:hover span { color: var(--jade); transform: translateX(3px); }
.svc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); column-gap: 28px; row-gap: 12px; }
/* each group spans the four rows (head + 3 cards) so cards line up across the columns */
.svc-group { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
.svc-group__cards { display: contents; }
.svc-group__swipe { display: none; }
.svc-group__head { padding: 0 0 4px; }
.svc-group__head h3 { display: flex; align-items: center; gap: 10px; font: 900 24px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; }
.svc-group__head h3::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: var(--jade); border: 2px solid var(--ink); }
.svc-group__head p { padding-left: 22px; }
.svc-group__head p { margin-top: 6px; font: 800 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jade-ink); }
.svc-card {
  position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
  padding: 16px 44px 16px 16px; background: var(--paper-2); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.svc-card:hover, .svc-card:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--jade); background: var(--ink); color: var(--paper); }
.svc-card__icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--jade); border: 2px solid var(--ink); }
.svc-card__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-card__body { display: grid; gap: 6px; min-width: 0; }
.svc-card__title { font: 900 21px/1.02 var(--f-display); font-stretch: 86%; letter-spacing: -.015em; text-transform: uppercase; }
.svc-card__line { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.svc-card:hover .svc-card__line, .svc-card:focus-visible .svc-card__line { color: var(--on-dark-muted); }
.svc-card__metric { justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px; padding: 4px 8px; background: rgba(20, 179, 125, .14); font: 700 12px/1.2 var(--f-body); color: var(--ink-2); }
.svc-card__metric strong { font: 900 16px/1 var(--f-display); font-stretch: 86%; color: var(--jade-ink); }
.svc-card:hover .svc-card__metric { background: rgba(20, 179, 125, .2); color: var(--paper); }
.svc-card:hover .svc-card__metric strong { color: var(--jade); }
.svc-card__go { position: absolute; top: 16px; right: 14px; font: 900 20px/1 var(--f-body); color: var(--jade-ink); transition: transform .25s; }
.svc-card:hover .svc-card__go { transform: translateX(4px); color: var(--jade); }

/* Case carousel */
.case-stage { border: 1px solid var(--on-dark-line); }
.case-big { display: none; padding: clamp(28px, 4vw, 52px); }
.case-big.is-active { display: block; animation: case-in .45s var(--ease); }
@keyframes case-in { from { opacity: 0; transform: translateX(16px); } }
.case-big__top { display: flex; justify-content: space-between; gap: 16px; font: 700 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.case-big__top .sector { color: var(--jade); }
.case-big h3 { margin-top: 22px; font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; max-width: 22ch; }
.case-big__who { margin-top: 12px; color: var(--on-dark-muted); font-size: 15px; }
.case-big__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-top: 40px; }
.block-label { font: 800 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; }
.case-big__text { font-size: 15px; line-height: 1.65; color: rgba(236, 232, 223, .86); }
.case-big__text + .block-label { margin-top: 28px; }
.results { list-style: none; margin: 0; padding: 0; }
.results li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--on-dark-line); }
.results li:first-child { padding-top: 0; }
.results b { font: 900 24px/1 var(--f-display); letter-spacing: -.02em; color: var(--jade); white-space: nowrap; }
.results span { font-size: 14px; color: rgba(236, 232, 223, .8); }
.case-big__cta { margin-top: 32px; }

.case-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.case-thumb {
  flex: 0 0 220px; scroll-snap-align: start; text-align: left; cursor: pointer;
  padding: 16px; background: transparent; border: 1px solid var(--on-dark-line); color: var(--paper);
  transition: border-color .2s, background .2s;
}
.case-thumb:hover { border-color: rgba(236, 232, 223, .4); }
.case-thumb[aria-selected="true"] { background: rgba(20, 179, 125, .12); border-color: var(--jade); }
.case-thumb small { display: block; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jade); margin-bottom: 8px; }
.case-thumb span { font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.case-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.case-nav__btn {
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--on-dark-line); color: var(--paper); font-size: 20px;
  transition: background .2s, border-color .2s;
}
.case-nav__btn:hover { background: rgba(236, 232, 223, .08); border-color: rgba(236, 232, 223, .4); }
.case-nav__count { font: 700 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--on-dark-muted); margin-left: 8px; }
.case-nav .grow { flex: 1; }
.footnote { margin-top: 20px; font-size: 12px; color: var(--on-dark-muted); }

/* Homepage case studies: industry tabs + one compact before/after card */
.cs-head { gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
.cs-head h2 { margin: 0; }
.svc-all--dark { color: var(--paper); border-color: rgba(236, 232, 223, .5); }
.svc-all--dark span { color: var(--jade); }
.svc-all--dark:hover { background: var(--paper); color: var(--ink); }
.svc-all--dark:hover span { color: var(--jade-ink); }
.cs__pick { font: 800 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; }
.cs-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 16px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab {
  flex-shrink: 0; padding: 10px 16px; cursor: pointer; border-radius: 999px;
  background: transparent; color: var(--paper); border: 1.5px solid rgba(236, 232, 223, .35);
  font: 700 14px/1 var(--f-body); transition: background .2s, border-color .2s, color .2s;
}
.cs-tab:hover { border-color: var(--jade); }
.cs-tab[aria-selected="true"] { background: var(--jade); border-color: var(--jade); color: var(--ink); }
.cs-card { display: grid; grid-template-columns: 1.15fr 1fr; background: #141413; border: 1px solid var(--on-dark-line); }
.cs-card[hidden] { display: none; }
.cs-card:not([hidden]) { animation: case-in .4s var(--ease); }
.cs-card__main { padding: clamp(22px, 3vw, 36px); }
.cs-card__who { font: 800 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jade); }
.cs-card h3 { margin-top: 12px; font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; max-width: 20ch; }
.cs-ba { display: grid; gap: 10px; margin-top: 22px; }
.cs-ba p { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.45; color: rgba(236, 232, 223, .88); }
.cs-ba b { font: 800 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 0; text-align: center; background: rgba(236, 232, 223, .1); color: var(--on-dark-muted); }
.cs-ba p + p b { background: var(--jade); color: var(--ink); }
.cs-card__side { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 36px); border-left: 1px solid var(--on-dark-line); }
.cs-hero strong { display: block; font: 900 clamp(2.8rem, 6vw, 4.6rem)/.9 var(--f-display); font-stretch: 86%; letter-spacing: -.04em; color: var(--jade); }
.cs-hero span { display: block; margin-top: 8px; font-size: 15px; color: var(--on-dark-muted); }
.cs-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-stats li { padding: 12px 10px; background: rgba(236, 232, 223, .06); border: 1px solid var(--on-dark-line); }
.cs-stats b { display: block; font: 900 19px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.01em; white-space: nowrap; }
.cs-stats span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--on-dark-muted); }
.cs-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cs-more { font: 800 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--jade); }
.cs-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.cs-dots { display: flex; gap: 6px; }
.cs-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(236, 232, 223, .25); transition: width .3s, background .3s; }
.cs-dots i.is-on { width: 22px; background: var(--jade); }

/* ROI calculator */
/* Calculator: a bar that unfolds into the estimate */
.calc-head { margin-bottom: clamp(24px, 3vw, 36px); }
.calc-fold__toggle {
  width: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr) 48px; gap: 18px; align-items: center; text-align: left; cursor: pointer;
  padding: 12px 14px 12px 12px; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--jade);
  transition: transform .15s, box-shadow .15s;
}
.calc-fold__toggle:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--jade); }
.calc-fold__toggle:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--jade); }
.calc-fold__icon { width: 60px; height: 60px; display: grid; place-items: center; background: var(--jade); }
.calc-fold__icon svg { width: 32px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calc-fold__txt b { display: block; font: 900 clamp(1.3rem, 2.8vw, 2rem)/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; }
.calc-fold__txt small { display: block; margin-top: 6px; font: 600 14px/1.3 var(--f-body); color: var(--on-dark-muted); }
.calc-fold__txt em { font-style: normal; font-weight: 900; color: var(--jade); }
.calc-fold__plus { position: relative; width: 48px; height: 48px; background: var(--jade); }
.calc-fold__plus::before, .calc-fold__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 4px; margin: -2px 0 0 -10px; background: var(--ink);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.calc-fold__plus::after { transform: rotate(90deg); }
.calc-fold.is-open .calc-fold__plus::before { transform: rotate(45deg); }
.calc-fold.is-open .calc-fold__plus::after { transform: rotate(135deg); }
.calc-fold__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.calc-fold.is-open .calc-fold__body { grid-template-rows: 1fr; }
.calc-fold__inner { overflow: hidden; min-height: 0; }
.calc {
  display: grid; grid-template-columns: 1fr 1fr; margin: 16px 6px 8px 0; border: 3px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--ink);
  opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .45s var(--ease);
}
.calc-fold.is-open .calc { opacity: 1; transform: none; transition-delay: .12s; }
.calc__inputs { padding: clamp(20px, 3vw, 36px); display: grid; gap: 24px; align-content: start; }
.calc__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.calc__presets span { margin-right: 4px; font: 800 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.calc-preset { padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer; font: 700 13px/1 var(--f-body); transition: background .15s; }
.calc-preset:hover { background: rgba(20, 179, 125, .15); }
.calc-preset[aria-pressed="true"] { background: var(--jade); }
.field { display: grid; gap: 10px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field label, .field legend { font-weight: 700; font-size: 15px; }
.field output { font: 900 22px/1 var(--f-display); letter-spacing: -.02em; }
.field__hint { font-size: 13px; color: var(--muted); }
.inline-inputs { display: flex; gap: 8px; }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink);
  font: 600 16px/1.3 var(--f-body); border-radius: 0;
}
.input:focus { outline: 3px solid var(--jade); outline-offset: 0; }
.inline-inputs select.input { width: 110px; flex-shrink: 0; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--jade) var(--p, 50%), rgba(10, 10, 10, .12) var(--p, 50%)); border: 2px solid var(--ink); }
input[type="range"]::-moz-range-track { height: 8px; background: rgba(10, 10, 10, .12); border: 2px solid var(--ink); }
input[type="range"]::-moz-range-progress { height: 8px; background: var(--jade); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--paper-2); border: 3px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink); }
input[type="range"]:focus-visible { outline: 3px solid var(--jade); outline-offset: 4px; }
.calc__out { background: var(--ink); color: var(--paper); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.calc__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: -6px 0 0; }
.calc__big span { font: 900 clamp(2.6rem, 6vw, 4.8rem)/.95 var(--f-display); font-stretch: 86%; letter-spacing: -.045em; color: var(--jade); font-variant-numeric: tabular-nums; }
.calc__big small { font: 700 15px/1 var(--f-body); color: var(--on-dark-muted); }
.calc__bars { display: grid; gap: 10px; }
.calc__bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.calc__bar span { color: var(--on-dark-muted); }
.calc__bar i { display: flex; height: 14px; background: rgba(236, 232, 223, .08); }
.calc__bar b { display: block; height: 100%; background: rgba(236, 232, 223, .55); transition: width .45s var(--ease); }
.calc__bar--after b { background: var(--paper); }
.calc__bar b.is-saved { background: repeating-linear-gradient(-45deg, var(--jade) 0 6px, #0f8a60 6px 10px); }
.calc__bar em { font-style: normal; font-weight: 800; min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.calc__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.calc__tiles div { padding: 12px; border: 1px solid var(--on-dark-line); background: rgba(236, 232, 223, .05); }
.calc__tiles dt { font-size: 12px; line-height: 1.3; color: var(--on-dark-muted); }
.calc__tiles dd { margin: 6px 0 0; font: 900 20px/1 var(--f-display); font-stretch: 86%; font-variant-numeric: tabular-nums; }
.calc__note { font-size: 12.5px; color: var(--on-dark-muted); margin-top: -6px; }
.calc__out .btn { align-self: flex-start; }

/* Process */
/* How we work: a timeline that fills as you scroll, stages pop in when the line reaches them */
.tl { --node: 56px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; max-width: 980px; margin-inline: auto; }
.tl__track { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: repeating-linear-gradient(180deg, rgba(10, 10, 10, .22) 0 8px, transparent 8px 14px); }
.tl__fill { position: absolute; top: 0; left: -1px; right: -1px; height: 100%; transform-origin: top; transform: scaleY(var(--fill, 0)); background: var(--jade); border-inline: 1px solid var(--ink); }
.tl__track::after { content: ""; position: absolute; left: 50%; top: calc(var(--fill, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--ink); border: 3px solid var(--jade); }
.tl__step { position: relative; display: grid; grid-template-columns: 1fr var(--node) 1fr; gap: 28px; align-items: center; }
.tl__node {
  grid-column: 2; grid-row: 1; z-index: 1; width: var(--node); height: var(--node); display: grid; place-items: center;
  background: var(--paper-2); border: 3px solid var(--ink); transition: background .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.tl__node svg { width: 26px; height: 26px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.tl__card {
  grid-row: 1; grid-column: 3; padding: 18px 20px; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  opacity: 0; transform: translateX(28px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.3, .5, 1);
}
.tl__step:nth-child(odd) .tl__card { grid-column: 1; transform: translateX(-28px); text-align: right; }
.tl__when { font: 800 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jade-ink); }
.tl__card h3 { margin: 10px 0 6px; font: 900 26px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; }
.tl__card p:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tl .tl__step.is-in .tl__card { opacity: 1; transform: none; }
.tl__step.is-in .tl__node { background: var(--jade); transform: rotate(-6deg) scale(1.08); box-shadow: 4px 4px 0 var(--ink); }
.tl__step.is-in .tl__node svg { stroke: var(--ink); }
.tl__step:last-child.is-in .tl__card { background: var(--jade); }
.tl__step:last-child.is-in .tl__card .tl__when { color: var(--ink); }

/* FAQ */
.faq { border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 24px 4px; font: 800 clamp(1.05rem, 1.8vw, 1.35rem)/1.25 var(--f-display); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
  border: 2px solid var(--ink); font: 700 20px/1 var(--f-mono); transition: transform .3s, background .2s;
}
.faq details[open] summary::after { content: "−"; background: var(--jade); }

.faq details p { padding: 0 4px 26px; max-width: 72ch; color: var(--ink-2); }
/* FAQ chat: light version of the Doubts chat */
.f-chat.f-chat--light { margin: 0; opacity: 1; transform: none; background: var(--paper-2); color: var(--ink); border-color: var(--ink); box-shadow: 8px 8px 0 var(--ink); max-width: 860px; }
.f-chat.f-chat--light .f-chat__head { border-bottom-color: var(--line); background: var(--ink); color: var(--paper); }
.f-chat.f-chat--light .f-chat__log { max-height: 420px; }
.f-chat.f-chat--light .msg--bot { background: #fff; border-color: var(--line); color: var(--ink); }
.f-chat.f-chat--light .msg--me { border: 2px solid var(--ink); }
.f-chat.f-chat--light .msg--typing i { background: var(--muted); }
.f-chat.f-chat--light .f-chat__hint { color: var(--muted); }
.f-chat.f-chat--light .f-doubt { color: var(--ink); border-color: var(--ink); background: var(--paper); }
.f-chat.f-chat--light .f-doubt:hover { background: var(--jade); color: var(--ink); border-color: var(--ink); }
.f-chat.f-chat--light .f-doubt.is-used { color: var(--muted); border-color: var(--line); background: transparent; }
.f-chat.f-chat--light .f-doubt.is-used::before { color: var(--jade-ink); }
.f-chat.f-chat--light .f-chat__cta { border-top-color: var(--line); color: var(--jade-ink); }
.f-chat.f-chat--light .f-chat__cta:hover { background: rgba(20, 179, 125, .12); }
.faq-chat[hidden], .faq[hidden] { display: none; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.contact-card {
  display: flex; flex-direction: column; gap: 18px; min-height: 220px;
  padding: 24px; border: 2px solid var(--ink); background: var(--paper-2);
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.contact-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.contact-card svg { width: 36px; height: 36px; }
.contact-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.contact-card p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.contact-card__go { margin-top: auto; font: 800 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.contact-card--brief { background: var(--ink); color: var(--paper); }
.contact-card--brief p { color: var(--on-dark-muted); }
.contact-card--brief .contact-card__go { color: var(--jade); }
.contact-card--brief:hover { box-shadow: 6px 6px 0 var(--jade); }

/* Footer */
.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 7vw, 88px) 20px; overflow: hidden; }
.site-footer .kicker { color: var(--jade); }

/* Footer CTA */
/* Footer contact: a heading and three cards in the site's square, bordered style.
   Each app keeps its official colour and mark in the logo tile; the card shows the actual contact */
.ft-contact { display: grid; gap: clamp(22px, 3vw, 32px); padding-bottom: clamp(32px, 4.5vw, 52px); border-bottom: 1px solid var(--on-dark-line); }
.ft-contact__title { text-align: center; font: 900 clamp(2rem, 4vw, 3.2rem)/.95 var(--f-display); font-stretch: 86%; letter-spacing: -.035em; word-spacing: .1em; text-transform: uppercase; }
.ft-contact__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ct-card {
  --c: var(--paper); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 18px 14px 14px; text-decoration: none; color: var(--paper);
  background: #141414; border: 1px solid var(--on-dark-line);
  transition: border-color .2s, transform .15s var(--ease), background .2s;
}
.ct-card__icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--c); color: #fff; }
.ct-card__icon svg { width: 26px; height: 26px; fill: currentColor; }
.ct-card__txt { display: grid; gap: 4px; min-width: 0; }
.ct-card__txt b { font: 700 17px/1.1 var(--f-body); }
.ct-card__txt small { font: 600 12px/1.2 var(--f-mono); letter-spacing: .02em; color: var(--paper); opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-card__go { font-size: 20px; color: var(--paper); transition: transform .2s var(--ease); }
.ct-card:hover { border-color: var(--c); background: #181818; transform: translateY(-2px); }
.ct-card:hover .ct-card__go { transform: translateX(4px); }
.ct-card--wa { --c: #25d366; }
.ct-card--tg { --c: #26a5e4; }
.ct-card--mail { --c: var(--paper); }
.ct-card--mail .ct-card__icon { color: var(--ink); }

/* Departures board + links */
.ft-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px clamp(32px, 6vw, 96px); padding-block: clamp(32px, 5vw, 52px); }
.ft-globe { position: relative; display: grid; justify-items: center; gap: 14px; }
.ft-globe canvas { display: block; width: min(100%, 440px); aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.ft-globe canvas.is-grabbing { cursor: grabbing; }
.ft-globe__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ft-city {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 12px; cursor: pointer;
  background: transparent; color: var(--paper); border: 1.5px solid rgba(236, 232, 223, .3);
  font: 700 12px/1 var(--f-mono); letter-spacing: .06em; transition: border-color .2s, background .2s;
}
.ft-city b { color: var(--jade); font-weight: 800; }
.ft-city span { color: #f2c94c; font-weight: 800; font-variant-numeric: tabular-nums; }
.ft-city:hover, .ft-city[aria-pressed="true"] { border-color: var(--jade); background: rgba(20, 179, 125, .12); }
.ft-globe__hint { position: absolute; top: 8px; left: 0; font: 800 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.ft-globe__hint::before { content: "↻ "; color: var(--jade); }
.ft-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: start; }
.ft-links > div { display: grid; gap: 11px; align-content: start; }
.ft-links__title { font: 800 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--jade); margin-bottom: 5px; }
.ft-links a { justify-self: start; text-decoration: none; color: var(--on-dark-muted); font-size: 15px; transition: color .2s, transform .2s; }
.ft-links a:hover { color: var(--paper); transform: translateX(3px); }

/* Giant wordmark, cropped by the bottom bar */
.ft-word {
  margin: 0 0 -.18em; text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font: 900 min(19vw, 290px)/.8 var(--f-display); font-stretch: 86%; letter-spacing: -.05em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(236, 232, 223, .28);
}
.ft-bottom {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--on-dark-line); background: var(--ink);
  font: 700 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted);
}
.ft-bottom__mid { color: var(--jade); }
.ft-top { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: transparent; color: var(--paper); border: 1.5px solid rgba(236, 232, 223, .35); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.ft-top:hover { border-color: var(--jade); color: var(--jade); }
.ft-top span { transition: transform .2s; }
.ft-top:hover span { transform: translateY(-3px); }

/* ---------- Inner page header ---------- */
.page-head { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); border-bottom: 3px solid var(--ink); }
.crumbs { font: 700 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.page-title {
  font-weight: 900; font-size: clamp(3rem, 9vw, 8rem); line-height: .86; letter-spacing: -.05em; text-transform: uppercase;
}
.page-title .poster__outline { -webkit-text-stroke-width: 2px; }
.page-head .lede { margin-top: 28px; }

/* Services page: a board of nine tiles that unfold */
/* No divider on this page: the header flows straight into the service groups */
.page-head--tight { padding-block: clamp(34px, 4vw, 52px) clamp(10px, 1.6vw, 20px); border-bottom: 0; }
/* Tight tracking eats the spaces too; word-spacing gives each gap back roughly a quarter em */
.page-head--tight .page-title { font-size: clamp(2.5rem, 7.6vw, 6.4rem); white-space: nowrap; word-spacing: .15em; }
/* Breadcrumb to title and title to line get the same step, so the three read as one stack */
.page-head--tight .crumbs { margin-bottom: clamp(24px, 3.2vw, 44px); }
/* Standfirst: a jade bar parts it from the headline; the invitation is a button inside the sentence */
/* One row under the title, on its left edge: the line in the headline's family, then the button */
.svc-deck {
  margin-top: clamp(26px, 3.4vw, 46px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-family: var(--f-display); font-stretch: 90%; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.1; color: var(--ink);
}
.svc-deck__text { font-weight: 700; letter-spacing: -.025em; word-spacing: .08em; }
.svc-deck__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 7px; white-space: nowrap;
  background: var(--jade); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-weight: 800; letter-spacing: -.02em; text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.svc-deck__btn span { transition: transform .2s var(--ease); }
.svc-deck__btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.svc-deck__btn:hover span { transform: translateX(3px); }
.svc-deck__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.svc-band + .svc-band { margin-top: clamp(28px, 3vw, 42px); }
/* Heading and note read as one unit: stacked, joined by a jade bar down their left edge */
.svc-band__head { display: grid; gap: 6px; margin-bottom: 16px; padding: 2px 0 2px 14px; border-left: 4px solid var(--jade); }
.svc-band__title {
  font-family: var(--f-display); font-stretch: 86%; font-weight: 900;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase;
}
.svc-band__note { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
/* No row gaps: a closed detail is an empty grid row and would still collect one.
   Tiles carry the space beneath them instead, so closed rows add nothing */
.svc-band__grid { --gap: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; align-items: stretch; }
.svc-band__grid .svc-tile { margin-bottom: var(--gap); }

.svc-tile {
  display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; gap: 4px 14px;
  padding: 16px 44px 16px 16px; position: relative; text-align: left; cursor: pointer;
  background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s;
}
.svc-tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.svc-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.svc-tile__icon { grid-row: 1 / 3; align-self: center; width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink); }
.svc-tile__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--jade); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-tile__title {
  align-self: end; font-family: var(--f-display); font-stretch: 86%; font-weight: 900;
  font-size: 17px; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase;
}
.svc-tile__metric { align-self: start; font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.svc-tile__metric b { font: 900 15px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); margin-right: 7px; }
/* The open tile takes the accent, so the board always shows which detail is below */
.svc-tile.is-open { background: var(--jade); }
.svc-tile.is-open .svc-tile__metric { color: var(--ink); }
.svc-tile.is-open .svc-tile__icon { background: var(--ink); }

.svc-tile__mark { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; }
.svc-tile__mark::before, .svc-tile__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px; margin: -1.5px 0 0 -8px;
  background: var(--ink); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.svc-tile__mark::after { transform: rotate(90deg); }
.svc-tile.is-open .svc-tile__mark::before { transform: rotate(45deg); }
.svc-tile.is-open .svc-tile__mark::after { transform: rotate(135deg); }

.svc-fold { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.svc-fold.is-open { grid-template-rows: 1fr; }
.svc-fold__inner { overflow: hidden; }
.svc-fold__box { border: 3px solid var(--ink); background: var(--paper-2); padding: clamp(18px, 2.4vw, 28px); margin-top: 2px; }
.svc-fold__line { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; margin-bottom: 20px; }
.svc-fold__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.svc-fold__foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
/* Services section: top sits close under the header; bottom leaves one clear step before the ticker */
.svc-section { padding-block: clamp(20px, 2.8vw, 36px) clamp(48px, 6vw, 80px); }

/* Closing card: jade, framed like the tiles (ink border, offset shadow), so it belongs to the board
   but stands apart from both the cream tiles and the dark footer. Button is the site's default black one */
.svc-cta {
  margin-top: clamp(28px, 3vw, 42px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px;
  padding: clamp(22px, 3.2vw, 40px); background: var(--jade); color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.svc-cta h2 { font-stretch: 86%; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: .95; letter-spacing: -.035em; word-spacing: .1em; text-transform: uppercase; }
.svc-cta p { margin-top: 12px; max-width: 48ch; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.45; color: var(--ink); }
.svc-cta .svc-cta__btn:hover { box-shadow: 6px 6px 0 var(--paper-2); }
/* In view: a black ring pings out from the button every few seconds, like a notification.
   Black, because a jade ring would vanish on the jade card. Hovering stops it */
.svc-cta .svc-cta__btn { position: relative; }
.svc-cta .svc-cta__btn::after {
  content: ""; position: absolute; inset: -3px; border: 3px solid var(--ink); opacity: 0; pointer-events: none;
}
.svc-cta.is-seen .svc-cta__btn::after { animation: cta-ping 2.8s cubic-bezier(.2, .6, .35, 1) .3s infinite; }
.svc-cta.is-seen .svc-cta__btn:hover::after { animation: none; }
@keyframes cta-ping {
  0% { inset: -3px; opacity: .85; }
  55%, 100% { inset: -18px; opacity: 0; }
}

.panel { padding: 24px; border: 2px solid var(--ink); background: var(--paper-2); }
.panel--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel h3, .panel h4 { font: 800 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; }
.panel--dark h3, .panel--dark h4 { color: var(--jade); }
.panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.panel li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.panel li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border: 2px solid currentColor; }
.panel--dark li::before { background: var(--jade); border-color: var(--jade); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 700 11px/1 var(--f-mono); letter-spacing: .06em; padding: 8px 10px; border: 1px solid var(--line); background: var(--paper-2); }

/* Cases page */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.case-card {
  display: flex; flex-direction: column; gap: 14px; min-height: 280px; text-align: left; cursor: pointer;
  padding: 26px; border: 2px solid var(--ink); background: var(--paper-2);
  transition: transform .2s, box-shadow .2s;
}
.case-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.case-card small { font: 800 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--jade-ink); }
.case-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.case-card p { font-size: 14px; color: var(--muted); }
.case-card__metric { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.case-card__metric b { display: block; font: 900 30px/1 var(--f-display); letter-spacing: -.03em; }
.case-card__metric span { font-size: 13px; color: var(--muted); }
.case-card[hidden] { display: none; }
.case-card--cta { grid-column: span 2; background: var(--jade); text-decoration: none; justify-content: space-between; }
.case-card--cta h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: -.035em; font-stretch: 86%; max-width: 14ch; }
.case-card--cta p { color: var(--ink); font-size: 15px; max-width: 40ch; }
.case-card--cta span { font: 800 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }

dialog.case-dialog {
  width: min(960px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: 0;
  border: 0; background: var(--ink); color: var(--paper); overflow: auto;
}
dialog.case-dialog::backdrop { background: rgba(10, 10, 10, .6); backdrop-filter: blur(4px); }
dialog.case-dialog[open] { animation: case-in .35s var(--ease); }
.dialog-close {
  position: sticky; top: 0; float: right; margin: 16px 16px 0 0; z-index: 2;
  width: 44px; height: 44px; border: 1px solid var(--on-dark-line); background: var(--ink); color: var(--paper);
  font-size: 22px; cursor: pointer;
}
.dialog-close:hover { border-color: var(--jade); color: var(--jade); }

/* Brief page */
.brief-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.brief-form { display: grid; gap: 28px; }
.brief-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.brief-form legend { padding: 0; margin-bottom: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.check-grid input { position: absolute; opacity: 0; pointer-events: none; }
.check-grid label { user-select: none; }
.check-grid input:checked + label { background: var(--jade); }
.check-grid input:focus-visible + label { outline: 3px solid var(--jade); outline-offset: 2px; }
.req { color: var(--jade-ink); }
.error { font-size: 13px; font-weight: 700; color: #b3261e; }
.brief-aside { position: sticky; top: calc(var(--header-h) + 32px); }
.brief-aside .panel + .panel { margin-top: 12px; }
.brief-aside ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }
.panel ol li { padding-left: 4px; }
.panel ol li::before { content: none; }
.brief-result { border: 3px solid var(--ink); background: var(--paper-2); padding: clamp(24px, 3vw, 36px); }
.brief-result pre {
  white-space: pre-wrap; font: 500 13.5px/1.6 var(--f-mono); background: var(--paper); border: 1px solid var(--line);
  padding: 16px; margin: 20px 0; max-height: 360px; overflow: auto;
}
.brief-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Story */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.story__text { display: grid; gap: 20px; align-content: start; }
.story__text h2 { margin-bottom: 8px; }
.story__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.story__beats li { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; }
.story__stamp {
  justify-self: start; white-space: nowrap; padding: 7px 10px; border: 2px solid var(--jade-ink); border-radius: 4px; transform: rotate(-4deg);
  font: 800 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jade-ink);
}
.story__beats li:nth-child(2) .story__stamp { transform: rotate(3deg); }
.story__beats li:last-child .story__stamp { background: var(--jade); border-color: var(--ink); color: var(--ink); }
.story__beats p { font-size: 17px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.story__beats b { color: var(--ink); font-weight: 800; }

/* Story: an oversized luggage tag written like a dictionary entry; flips to a baggage check.
   JS adds .is-flippable (3D flip) and .is-in (swings in, then sways). Without JS both faces stack. */
.ttag { --tag-w: min(400px, 100%); --cut: 46px; --hole-y: 46px; margin: 0; display: grid; justify-items: center; gap: 18px; padding-top: 104px; }
.ttag__swing { position: relative; width: var(--tag-w); transform-origin: 50% calc(var(--hole-y) - 146px); }
.ttag__cord { position: absolute; left: 50%; top: calc(var(--hole-y) - 146px); width: 80px; height: 150px; margin-left: -40px; z-index: 3; overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.ttag__cord path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.ttag__card { display: grid; }
.ttag__face {
  grid-area: 1 / 1; position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: calc(var(--hole-y) + 34px) clamp(22px, 3vw, 32px) 26px; filter: drop-shadow(8px 8px 0 var(--ink));
}
/* Chamfered tag: an ink shape, with the fill inset 3px inside it */
.ttag__face::before, .ttag__face::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut)); }
.ttag__face::before { inset: 0; background: var(--ink); }
.ttag__face::after { --cut: 44.8px; inset: 3px; background: var(--fill); }
.ttag__front { --fill: var(--jade); }
.ttag__back { --fill: var(--paper-2); }
.ttag__hole {
  position: absolute; left: 50%; top: var(--hole-y); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--paper); border: 5px solid var(--ink); box-shadow: 0 0 0 5px var(--fill), 0 0 0 7.5px var(--ink);
}
.ttag :where(p) { margin: 0; }
.ttag__head {
  display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
  font: 800 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
}
.ttag__word { margin-top: 22px; font: 900 clamp(52px, 6.4vw, 80px)/.9 var(--f-display); font-stretch: 86%; letter-spacing: -.03em; }
.ttag__pos { margin-top: 10px; font: italic 600 13px/1 var(--f-mono); letter-spacing: .04em; }
.ttag__defs { margin: 20px 0 24px; padding: 0; list-style: none; counter-reset: def; display: grid; gap: 10px; }
.ttag__defs li { counter-increment: def; display: grid; grid-template-columns: 26px 1fr; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.ttag__defs li::before { content: counter(def) "."; font: 800 15px/1.55 var(--f-mono); color: var(--ink); }
.ttag__defs b { color: var(--ink); font-weight: 800; }
.ttag__route {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 2px dashed var(--ink);
  font: 900 26px/1 var(--f-display); font-stretch: 86%;
}
.ttag__route i { flex: 1; height: 0; border-top: 3px dotted var(--ink); }
.ttag__code { margin-top: 18px; display: grid; gap: 7px; font: 700 10px/1 var(--f-mono); letter-spacing: .24em; }
.ttag__bars {
  height: 40px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 9px,
    var(--ink) 9px 13px, transparent 13px 15px, var(--ink) 15px 16px, transparent 16px 20px, var(--ink) 20px 22px, transparent 22px 23px);
}
.ttag__label { margin-top: 22px; font: 800 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--jade-ink); }
.ttag__bags { margin: 12px 0 0; padding: 0; list-style: none; }
.ttag__bags li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1.5px dashed rgba(10, 10, 10, .28); font: 700 17px/1.2 var(--f-body); }
.ttag__bags li::before {
  content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; transform: rotate(-6deg);
  background: var(--jade); border: 2px solid var(--ink); font: 900 13px/1 var(--f-body);
}
.ttag__carry { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; }
.ttag__carry span { font: 800 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ttag__carry b { font: 900 22px/1 var(--f-display); font-stretch: 86%; text-transform: uppercase; }
.ttag__cta {
  margin-top: auto; align-self: stretch; text-align: center; padding: 14px 18px; background: var(--jade); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s;
  font: 900 18px/1 var(--f-display); font-stretch: 86%; text-transform: uppercase; letter-spacing: -.01em;
}
.ttag__back .ttag__carry { margin-bottom: 22px; }
.ttag__cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ttag__flip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; background: transparent; border: 2px solid var(--ink); border-radius: 999px;
  font: 800 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
}
.ttag__flip span { font-size: 16px; transition: transform .6s var(--ease); }
.ttag__flip[aria-pressed="true"] span { transform: rotate(-180deg); }
.ttag__flip:hover { background: var(--ink); color: var(--paper); }
.ttag__flip[hidden] { display: none; }

/* No JS: the back sits under the front as a second tag */
.ttag:not(.is-flippable) .ttag__back { grid-area: 2 / 1; margin-top: 40px; }
.ttag:not(.is-flippable) .ttag__back .ttag__hole { display: none; }

/* With JS: one tag, two sides */
.ttag.is-flippable .ttag__card { transform-style: preserve-3d; transition: transform .8s cubic-bezier(.5, 0, .2, 1.15); cursor: pointer; }
.ttag.is-flippable .ttag__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ttag.is-flippable .ttag__back { transform: rotateY(180deg); }
.ttag.is-flipped .ttag__card { transform: rotateY(180deg); }
.ttag.is-in .ttag__swing { animation: ttag-in 1.7s cubic-bezier(.3, 0, .4, 1) both; }
.ttag.is-settled .ttag__swing { animation: ttag-sway 7s ease-in-out infinite; }
.ttag.is-kick .ttag__swing { animation: ttag-kick 1.1s ease-in-out; }
@keyframes ttag-in { 0% { transform: rotate(14deg); } 30% { transform: rotate(-7deg); } 55% { transform: rotate(3.5deg); } 78% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
@keyframes ttag-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(1.2deg); } 70% { transform: rotate(-1.2deg); } }
@keyframes ttag-kick { 25% { transform: rotate(-4deg); } 55% { transform: rotate(2deg); } 80% { transform: rotate(-.8deg); } }

/* Line: robots at work */
.factory { --scene-h: 340px; --belt-top: 262px; --card-w: 172px; --card-h: 58px; --robot-w: 150px; --tray-w: 116px; }
.f-scene { position: relative; height: var(--scene-h); overflow: hidden; }
.f-belt { position: absolute; left: 0; right: 0; top: var(--belt-top); z-index: 2; }
.f-belt__top {
  height: 14px; background-color: var(--ink);
  background-image: repeating-linear-gradient(90deg, #3a3a3a 0 20px, transparent 20px 40px);
  background-position-x: var(--belt-off, 0px);
}
.f-belt__body {
  height: 34px; margin-inline: 24px; border: 3px solid var(--ink); border-top: 0; background: var(--paper-2);
  background-image: radial-gradient(circle at 50% 45%, var(--ink) 0 7px, transparent 7.5px);
  background-size: 40px 100%; background-position-x: var(--belt-off, 0px);
}
.f-inbox, .f-done {
  position: absolute; bottom: calc(var(--scene-h) - var(--belt-top) - 48px); z-index: 5;
  width: var(--tray-w); height: calc(var(--card-h) + 76px);
  background: var(--paper-2); border: 3px solid var(--ink);
  display: flex; flex-direction: column; justify-content: space-between; padding: 9px 11px;
  font: 800 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.f-inbox b, .f-done b { font: 900 38px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.03em; }
.f-inbox { left: 0; }
.f-done { right: 0; background: var(--jade); text-align: right; }
.f-done.is-bump b { animation: f-bump .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes f-bump { 40% { transform: scale(1.3); } }

.f-robot { position: absolute; z-index: 1; width: var(--robot-w); top: calc(var(--belt-top) - var(--robot-w) * 1.333 - 12px); transform: translateX(-50%); }
.f-robot svg { width: 100%; height: auto; overflow: visible; }
.f-packet { display: none; }
.fr-arm-l { transform-origin: 13px 82px; }
.fr-arm-r { transform-origin: 107px 82px; }
.f-robot.is-working .fr-all { animation: fr-hop .6s ease; }
.f-robot.is-working .fr-arm-l { animation: fr-arm-l .6s ease; }
.f-robot.is-working .fr-arm-r { animation: fr-arm-r .6s ease; }
.f-robot.is-working .fr-eyes rect { fill: #8ff5cf; }
.f-robot.is-working .fr-lock rect:first-child { fill: #8ff5cf; }
@keyframes fr-hop { 35% { transform: translateY(-7px); } }
/* Each worker has its own idle and working motion */
.fr-head { transform-origin: 60px 71px; }
.fr--sort .fr-scan { animation: fr-scan 1.6s ease-in-out infinite alternate; }
.fr--sort .fr-blink { animation: blink 1.2s steps(1) infinite; }
.f-robot--sort.is-working .fr-scan { animation-duration: .25s; }
.f-robot--sort.is-working .fr-eyes rect:first-child { fill: #14b37d; }
.fr--talk .fr-mic { animation: blink 2s steps(1) infinite; }
.f-robot--talk.is-working .fr-head { animation: fr-tilt .6s ease; }
.f-robot--talk.is-working .fr-mic { animation: none; fill: #8ff5cf; }
.f-robot--talk.is-working .fr-eyes path { stroke: #8ff5cf; }
.f-robot--record.is-working .fr-arm-l { animation: fr-stamp .6s ease; }
.f-robot--record.is-working .fr-arm-r { animation: none; }
@keyframes fr-scan { to { transform: translateX(30px); } }
@keyframes fr-tilt { 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }
@keyframes fr-stamp { 35% { transform: rotate(28deg); } 55% { transform: rotate(22deg); } }
@keyframes fr-arm-l { 40% { transform: rotate(-38deg); } }
@keyframes fr-arm-r { 40% { transform: rotate(38deg); } }
.f-pop {
  position: absolute; z-index: 6; top: calc(var(--belt-top) - var(--robot-w) * 1.333 - 30px); transform: translateX(-50%);
  background: var(--ink); color: var(--jade); padding: 6px 9px; white-space: nowrap;
  font: 800 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  animation: f-pop 1.1s ease-out forwards; pointer-events: none;
}
@keyframes f-pop { 0% { opacity: 0; margin-top: 8px; } 20% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -14px; } }

.f-item {
  position: absolute; left: 0; z-index: 3; top: calc(var(--belt-top) - var(--card-h));
  width: var(--card-w); height: var(--card-h); will-change: transform;
}
.f-item__in {
  height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 12px;
  background: var(--paper-2); color: var(--ink); border: 2px solid var(--ink);
  transition: background .25s, color .25s, box-shadow .25s;
}
.f-item small { font: 800 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.f-item b { font: 700 14.5px/1.15 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-item.is-s1 .f-item__in { box-shadow: inset 6px 0 0 var(--jade); padding-left: 16px; }
.f-item.is-s2 .f-item__in { background: var(--ink); color: var(--paper); box-shadow: none; }
.f-item.is-s2 small { color: var(--jade); }
.f-item.is-s3 .f-item__in { background: var(--jade); color: var(--ink); }
.f-item.is-s3 small { color: var(--ink); }
.f-item.is-pop .f-item__in { animation: f-card .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes f-card { 40% { transform: translateY(-6px) scale(1.05); } }

/* Section head: headline in the hero's style + the everyday inputs as chips */
.line-head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 28px 64px; }
.line-title { margin-top: 20px; }
.line-title .poster__outline { -webkit-text-stroke-width: 2px; }
.line-title__out { color: var(--jade); }
.line-inputs__label { font: 800 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.line-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.line-chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 9px 10px;
  background: var(--ink); color: var(--paper); font: 800 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.line-chips svg { width: 16px; height: 16px; fill: none; stroke: var(--jade); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.line-inputs__out { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.line-inputs__out span { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--jade); border: 2px solid var(--ink); font: 900 16px/1 var(--f-body); }
.js-reveal .line-chips li { opacity: 0; transform: translateY(10px) scale(.9); }
.js-reveal.is-seen .line-chips li { opacity: 1; transform: none; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--n) * 70ms); }

/* Steps under the belt, linked to the robots */
.f-foot { display: grid; gap: 36px; margin-top: 36px; }
.f-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.f-legend li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.f-legend li:not(:last-child)::after {
  content: ""; position: absolute; top: 27px; left: calc(100% - 6px); width: 34px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); opacity: .25; z-index: -1;
}
.f-step__icon {
  width: 56px; height: 56px; display: grid; place-items: center; background: var(--jade);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, background .2s;
}
.f-step__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.f-step__n { display: block; font: 800 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--jade-ink); margin: 4px 0 6px; }
.f-legend b { display: block; font: 900 24px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; }
.f-legend p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.f-legend li.is-active .f-step__icon { background: #8ff5cf; transform: translate(-3px, -3px) rotate(-4deg); box-shadow: 7px 7px 0 var(--ink); }
.f-legend li.is-active b { color: var(--jade-ink); }
/* Desktop: each step centred under its robot on the belt, icons joined by the dashed line.
   Robots stand at 20/50/80% of the belt between the trays (see measure() in main.js);
   this padding makes the three equal columns centre on exactly those points. */
@media (min-width: 901px) {
  .f-legend { gap: 0; padding-inline: calc(.9 * var(--tray-w) + 5%); }
  .f-legend li { grid-template-columns: 1fr; justify-items: center; gap: 18px; align-content: start; padding-inline: 12px; text-align: center; }
  .f-legend li:not(:last-child)::after { top: 26px; left: calc(50% + 44px); width: calc(100% - 88px); opacity: .3; }
  .f-legend li > div { max-width: 30ch; }
  .f-step__n { margin-top: 0; }
}

/* Doubts: a bar that unfolds into a chat with the Handler robot */
.f-doubts { margin-top: 4px; }
.f-doubts__toggle {
  width: 100%; display: grid; grid-template-columns: 60px 1fr 48px; gap: 18px; align-items: center; text-align: left; cursor: pointer;
  padding: 12px 14px 12px 12px; background: var(--jade); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.f-doubts__toggle:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.f-doubts__toggle:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.f-doubts__face { width: 60px; height: 60px; display: grid; place-items: end center; overflow: hidden; background: var(--paper-2); border: 2px solid var(--ink); }
.f-doubts__face svg, .f-chat__avatar svg { display: block; width: 100%; height: auto; }
.f-doubts__txt b { display: block; font: 900 clamp(1.4rem, 2.8vw, 2rem)/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; }
.f-doubts__txt small { display: block; margin-top: 6px; font: 700 14px/1.3 var(--f-body); }
.f-doubts__icon { position: relative; width: 48px; height: 48px; background: var(--ink); }
.f-doubts__icon::before, .f-doubts__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 4px; margin: -2px 0 0 -10px; background: var(--jade);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.f-doubts__icon::after { transform: rotate(90deg); }
.f-doubts.is-open .f-doubts__icon::before { transform: rotate(45deg); }
.f-doubts.is-open .f-doubts__icon::after { transform: rotate(135deg); }

.f-doubts__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.f-doubts.is-open .f-doubts__body { grid-template-rows: 1fr; }
.f-doubts__inner { overflow: hidden; min-height: 0; }
.f-chat {
  margin: 14px 6px 8px 0; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--jade);
  opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .45s var(--ease);
}
.f-doubts.is-open .f-chat { opacity: 1; transform: none; transition-delay: .12s; }
.f-chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--on-dark-line); }
.f-chat__avatar { width: 38px; height: 38px; display: grid; place-items: end center; overflow: hidden; background: var(--jade); }
.f-chat__head b { display: block; font: 800 13px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.f-chat__head small { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--on-dark-muted); }
.f-chat__head small i { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); animation: blink 1.6s ease-in-out infinite; }
.f-chat__log { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.msg { flex-shrink: 0; max-width: min(560px, 85%); padding: 11px 14px; font: 500 15.5px/1.5 var(--f-body); animation: msg-in .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.msg--bot { align-self: flex-start; background: #1d1d1c; border: 1px solid var(--on-dark-line); border-radius: 2px 14px 14px 14px; }
.msg--me { align-self: flex-end; background: var(--jade); color: var(--ink); font-weight: 700; border-radius: 14px 2px 14px 14px; }
.msg__note { display: block; margin-top: 8px; font: 800 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--jade); }
.msg__caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--jade); animation: blink .9s steps(1) infinite; }
.msg--typing { display: flex; gap: 5px; padding: 14px 16px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-muted); animation: typing 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.f-chat__hint { padding: 0 16px; font: 800 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.f-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 16px; }
.f-doubt {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; text-align: left;
  background: transparent; color: var(--paper); border: 1.5px solid rgba(236, 232, 223, .45); border-radius: 999px;
  font: 700 14px/1.25 var(--f-body); transition: background .15s, border-color .15s, color .15s;
}
.f-doubt:hover { border-color: var(--jade); color: var(--jade); }
.f-doubt.is-used { color: var(--on-dark-muted); border-color: var(--on-dark-line); }
.f-doubt.is-used::before { content: "✓"; color: var(--jade); font-weight: 900; }
.f-doubt:disabled { cursor: wait; }
.f-chat__cta { display: block; padding: 14px 16px; border-top: 1px solid var(--on-dark-line); color: var(--jade); text-decoration: none; font: 800 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.f-chat__cta:hover { background: rgba(20, 179, 125, .1); }
.f-item.is-custom .f-item__in { outline: 3px solid #8ff5cf; outline-offset: 2px; }

@media (max-width: 900px) {
  .ft-contact__cards { grid-template-columns: 1fr; }
  .line-head { grid-template-columns: 1fr; }
}

/* Phones: the line runs top to bottom */
@media (max-width: 640px) {
  .factory {
    --scene-h: 620px; --card-h: 50px; --tray-h: 62px;
    /* Belt, card and robot scale with the screen so the belt still reads as a belt on small phones */
    --belt-w: min(158px, 48vw); --card-w: min(126px, 39vw); --robot-w: min(112px, 31vw);
  }
  .f-scene { border-bottom: 0; }
  .f-belt { top: 0; bottom: 0; right: auto; width: var(--belt-w); border-inline: 3px solid var(--ink); background: #4a4a47; }
  .f-belt__top {
    height: 100%; background-color: #4a4a47;
    background-image: repeating-linear-gradient(0deg, #3b3b38 0 20px, transparent 20px 40px);
    background-position: 0 var(--belt-off, 0px);
  }
  .f-belt__body { display: none; }
  .f-inbox, .f-done {
    left: 0; right: auto; width: var(--belt-w); height: var(--tray-h);
    flex-direction: row; align-items: center; text-align: left; padding: 0 12px;
  }
  .f-inbox { top: 0; bottom: auto; }
  .f-done { bottom: 0; }
  .f-inbox b, .f-done b { font-size: 26px; }
  .f-item { left: calc((var(--belt-w) - var(--card-w)) / 2); top: 0; }
  /* Narrower cards: tighten the type so the longest labels still fit without an ellipsis */
  .f-item__in { padding: 0 9px; gap: 4px; }
  .f-item small { font-size: 9px; letter-spacing: .1em; }
  .f-item b { font-size: 13px; }
  .f-item.is-s1 .f-item__in { box-shadow: inset 5px 0 0 var(--jade); padding-left: 12px; }
  .f-robot { top: 0; left: calc(100% - var(--robot-w) / 2 - 8px) !important; transform: translate(-50%, -50%); }
  /* Cable from the belt to each robot: dashes flow toward the robot and a data packet travels along it */
  .f-robot { --cable: calc(100vw - 2 * var(--gutter) - var(--belt-w) - var(--robot-w) + 6px); }
  .f-robot::before {
    content: ""; position: absolute; top: 58%; right: calc(100% - 14px); z-index: -1;
    width: var(--cable); height: 4px;
    background: repeating-linear-gradient(90deg, var(--ink) 0 8px, rgba(10, 10, 10, .22) 8px 12px);
    animation: cable-flow .5s linear infinite; transition: filter .2s;
  }
  .f-robot::after {
    content: ""; position: absolute; top: calc(58% - 4px); z-index: -1; width: 12px; height: 12px; background: var(--jade); border: 2px solid var(--ink);
    right: calc(100% - 20px + var(--cable));
  }
  .f-packet {
    display: block; position: absolute; z-index: -1; top: calc(58% - 3px); left: calc(14px - var(--cable) + 8px);
    width: 10px; height: 10px; background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
    animation: packet 1.7s cubic-bezier(.5, 0, .6, 1) infinite;
  }
  .f-robot--talk .f-packet { animation-delay: -.55s; }
  .f-robot--record .f-packet { animation-delay: -1.1s; }
  .f-robot.is-working::before { background: var(--jade); animation: none; }
  .f-robot.is-working .f-packet { background: var(--jade); }
  @keyframes cable-flow { from { background-position-x: 0; } to { background-position-x: 12px; } }
  @keyframes packet {
    0% { transform: translateX(0) scale(.4); opacity: 0; }
    12% { transform: translateX(0) scale(1); opacity: 1; }
    82% { opacity: 1; transform: translateX(calc(var(--cable) - 30px)) scale(1); }
    100% { opacity: 0; transform: translateX(calc(var(--cable) - 22px)) scale(.4); }
  }
  .f-pop { top: 0; left: calc(100% - var(--robot-w) / 2 - 8px) !important; }
  .f-legend { grid-template-columns: 1fr; gap: 0; }
  .f-legend li { grid-template-columns: 52px 1fr; padding-bottom: 26px; }
  .f-legend li:last-child { padding-bottom: 0; }
  .f-foot { gap: 28px; margin-top: 28px; }
  #line { padding-bottom: 48px; }
  #services .section__head { gap: 10px; margin-bottom: 26px; }
  .f-doubts__txt b { font-size: 19px; white-space: nowrap; }
  .f-legend li:not(:last-child)::after {
    top: 58px; bottom: 4px; left: 24.5px; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px);
  }
  .f-step__icon { width: 52px; height: 52px; }
  .f-legend b { font-size: 22px; }
  .f-doubts__toggle { grid-template-columns: 52px 1fr 40px; gap: 12px; padding: 10px; }
  .f-doubts__face { width: 52px; height: 52px; }
  .f-doubts__icon { width: 40px; height: 40px; }
  .f-doubts__txt small { font-size: 13px; }
  .f-chat__log { max-height: 320px; padding: 14px 12px; }
  .msg { max-width: 90%; font-size: 15px; }
  .f-chat__chips { flex-direction: column; align-items: stretch; padding: 10px 12px 14px; }
  .f-doubt { border-radius: 12px; }
  .line-chips li { font-size: 11px; padding: 8px 10px 8px 9px; }
  .line-title .poster__outline { -webkit-text-stroke-width: 1.4px; letter-spacing: -.01em; }
}

/* Final CTA band */

/* ---------- Guide: robot quick help in the corner ---------- */
.guide { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.guide > * { pointer-events: auto; }
.guide.is-open { z-index: 70; }
/* Blurred, dimmed page behind the open quick-help panel */
.guide__backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: rgba(10, 10, 10, .45); backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9);
  transition: opacity .3s;
}
.guide.is-open .guide__backdrop { opacity: 1; pointer-events: auto; }
.guide__dock {
  position: relative; width: 70px; height: 78px; padding: 0; cursor: pointer; display: grid; grid-template-rows: 1fr 20px;
  background: var(--jade); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink);
  opacity: 0; transform: translateY(24px) scale(.6); pointer-events: none;
  transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.guide.is-docked .guide__dock { opacity: 1; transform: none; pointer-events: auto; }
.guide.no-pop .guide__dock { transform: none; transition: opacity .3s .05s, box-shadow .2s, background .2s; }
.guide__dock:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.guide__dock:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px); }
/* robot head, like it is peeking out of the suitcase */
.guide__face { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px 14px 0 0; }
.guide__face svg { width: 48px; height: auto; margin-top: 4px; transform-origin: 50% 90%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); animation: guide-bob 3.6s ease-in-out infinite; }
.guide__dock:hover .guide__face svg { animation: none; transform: rotate(-10deg) scale(1.08); }
@keyframes guide-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.guide__dock .fr-eyes rect { transform-box: fill-box; transform-origin: center; animation: guide-blink 4.5s infinite; }
@keyframes guide-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
/* suitcase band with a label */
.guide__label {
  display: grid; place-items: center; background: var(--ink); color: var(--jade); border-radius: 0 0 14px 14px;
  font: 800 10px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; padding-left: .22em;
}
/* close state: the head drops into the case and an X appears */
.guide__x { position: absolute; left: 0; right: 0; top: 0; bottom: 20px; display: grid; place-items: center; opacity: 0; transform: scale(.4) rotate(-90deg); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.guide__x::before, .guide__x::after { content: ""; position: absolute; width: 26px; height: 5px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); }
.guide__x::after { transform: rotate(-45deg); }
.guide.is-open .guide__face svg { animation: none; transform: translateY(70px); }
.guide.is-open .guide__x { opacity: 1; transform: none; }
.guide.is-open .guide__dock { background: var(--paper-2); }
.guide.is-open .guide__label { color: var(--paper); font-size: 0; }
.guide.is-open .guide__label::after { content: "Close"; font: 800 10px/1 var(--f-mono); letter-spacing: .22em; }
html[lang="ru"] .guide.is-open .guide__label::after { content: "Закрыть"; letter-spacing: .12em; }
/* online light */
.guide__online { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: #8ff5cf; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); }
.guide__online::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--jade); animation: guide-ping 2s ease-out infinite; }
.guide.is-open .guide__online { display: none; }
@keyframes guide-ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

.guide__tip {
  margin: 0 4px 12px 0; padding: 8px 12px; background: var(--ink); color: var(--paper);
  font: 800 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
  position: relative;
}
.guide__tip::after { content: ""; position: absolute; right: 22px; bottom: -8px; border-style: solid; border-width: 8px 8px 0 0; border-color: var(--ink) transparent transparent; }
.guide__tip.is-shown { opacity: 1; transform: none; }

.guide__panel {
  width: min(340px, calc(100vw - 32px)); margin-bottom: 14px;
  background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transform-origin: bottom right; animation: guide-open .35s cubic-bezier(.3, 1.4, .5, 1);
}
.guide__panel[hidden] { display: none; }
@keyframes guide-open { from { opacity: 0; transform: translateY(12px) scale(.92); } }
.guide__head { position: relative; padding: 16px 16px 14px; background: var(--ink); color: var(--paper); }
.guide__who { margin: 0; font: 800 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--jade); }
.guide__hello { margin: 10px 0 0; min-height: 1.2em; font: 900 22px/1.1 var(--f-display); font-stretch: 86%; letter-spacing: -.01em; text-transform: uppercase; }
.guide__caret { display: inline-block; width: 8px; height: .85em; margin-left: 3px; vertical-align: -1px; background: var(--jade); animation: blink .9s steps(1) infinite; }
.guide__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--paper); font-size: 26px; line-height: 1; cursor: pointer; }
.guide__close:hover { color: var(--jade); }
.guide__list { display: grid; }
.guide__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  text-align: left; text-decoration: none; color: var(--ink); cursor: pointer; font: inherit;
  transition: background .15s;
}
.guide__row:hover { background: rgba(20, 179, 125, .12); }
.guide__row b { display: block; font: 800 15.5px/1.2 var(--f-body); }
.guide__row small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.guide__go { font: 900 18px/1 var(--f-body); color: var(--jade-ink); transition: transform .2s; }
.guide__row:hover .guide__go { transform: translateX(3px); }
.guide__row--main { background: var(--jade); }
.guide__row--main:hover { background: #1bc58b; }
.guide__row--main small { color: var(--ink); opacity: .75; }
.guide__row--main .guide__go { color: var(--ink); }
.guide__row--main[aria-expanded="true"] .guide__go { transform: rotate(90deg); }
.guide__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); background: var(--jade); }
.guide__channels[hidden] { display: none; }
.guide__channels .brick { min-height: 42px; padding: 6px; background: var(--paper-2); }
.guide__list > .guide__row:last-child { border-bottom: 0; }

.robot--ghost .rb-drop, .robot--ghost .rb-head, .robot--ghost .rb-tag, .robot--ghost .rb-arm-l, .robot--ghost .rb-arm-r, .robot--ghost .rb-legs, .robot--ghost .rb-label { opacity: 1 !important; animation: none !important; }
.robot--ghost * { animation: none !important; }
/* The flying copy packs into a suitcase on the way to the corner, and arrives back packed */
.robot--ghost .rb-head, .robot--ghost .rb-tag, .robot--ghost .rb-arm-l, .robot--ghost .rb-arm-r, .robot--ghost .rb-legs { transition: transform .38s cubic-bezier(.5, 0, .5, 1); }
.robot--ghost .rb-label, .robot--ghost .robot__eye rect { transition: opacity .2s, fill .2s; }
.robot--ghost.as-case .rb-head, .robot--ghost.as-case .rb-tag { transform: translateY(165px); }
.robot--ghost.as-case .rb-arm-l { transform: translateX(48px); }
.robot--ghost.as-case .rb-arm-r { transform: translateX(-48px); }
.robot--ghost.as-case .rb-legs { transform: translateY(-78px); }
.robot--ghost.as-case .rb-label { opacity: 0 !important; }
.robot--ghost.as-case .robot__eye rect { fill: #0a0a0a; }

.menu-open .guide { visibility: hidden; }
.hero .robot__say { transition: opacity .3s; }
.hero.robot-away .robot__say { opacity: 0; }

@media (max-width: 640px) {
  .guide__dock { width: 64px; height: 72px; grid-template-rows: 1fr 18px; }
  .guide__x { bottom: 18px; }
  .guide__face svg { width: 44px; }
  .guide__panel { position: fixed; left: 12px; right: 12px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); width: auto; margin: 0; transform-origin: bottom center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .ft-grid { grid-template-columns: 1fr; }
  /* tablets and phones: each group is a swipe row with the next card peeking in */
  .svc-groups { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 30px; }
  .svc-group { grid-row: auto; grid-template-rows: none; }
  .svc-group__head { position: relative; }
  .svc-group__head h3 { padding-right: 70px; }
  .svc-group__swipe { display: block; position: absolute; right: 0; top: 7px; font: 800 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .svc-group__cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .svc-group__cards::-webkit-scrollbar { display: none; }
  .svc-card { scroll-snap-align: start; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .nav, .header-cta { display: none; }
  .menu-btn { display: block; }
  .site-header .wrap { gap: 14px; }
  /* Full-screen menu. The header's blur would trap a fixed menu inside the header, so drop it while open */
  body.menu-open { overflow: hidden; }
  .menu-open .site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100dvh - var(--header-h));
    background: var(--paper); padding: 6px var(--gutter) calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden;
    animation: menu-open .6s cubic-bezier(.7, 0, .2, 1) both;
  }
  /* Opens like a suitcase being unzipped: a zipper line with a pull tab runs down, revealing the menu */
  @keyframes menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes menu-close { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
  .menu-open .nav::before, .menu-open .nav::after { content: ""; position: absolute; z-index: 3; pointer-events: none; }
  .menu-open .nav::before { left: 0; right: 0; height: 4px; background: var(--ink); animation: zip-bar .6s cubic-bezier(.7, 0, .2, 1) both, zip-fade .25s .6s both; }
  .menu-open .nav::after {
    right: calc(var(--gutter) + 10px); width: 16px; height: 28px; background: var(--jade); border: 3px solid var(--ink); border-radius: 0 0 5px 5px;
    animation: zip-tab .6s cubic-bezier(.7, 0, .2, 1) both, zip-fade .25s .6s both;
  }
  @keyframes zip-bar { from { top: 0; } to { top: calc(100% - 4px); } }
  @keyframes zip-tab { from { top: -24px; } to { top: calc(100% - 28px); } }
  @keyframes zip-fade { to { opacity: 0; } }
  .menu-closing .nav { animation: menu-close .42s cubic-bezier(.6, 0, .4, 1) both; }
  .menu-closing .nav::before { animation: zip-bar-up .42s cubic-bezier(.6, 0, .4, 1) both; }
  .menu-closing .nav::after { animation: zip-tab-up .42s cubic-bezier(.6, 0, .4, 1) both; }
  @keyframes zip-bar-up { from { top: calc(100% - 4px); opacity: 1; } to { top: 0; opacity: 1; } }
  @keyframes zip-tab-up { from { top: calc(100% - 28px); opacity: 1; } to { top: -24px; opacity: 1; } }

  .menu-open .nav > * { animation: menu-item .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i, 0) * .06s); }
  @keyframes menu-item { from { opacity: 0; transform: translateY(28px); } }
  .menu-closing .nav > * { animation: menu-item-out .2s ease-in both; }
  @keyframes menu-item-out { to { opacity: 0; transform: translateY(-10px); } }

  .menu-open .nav > a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--line);
    font: 900 clamp(1.75rem, 8.2vw, 2.4rem)/1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase;
  }
  .menu-open .nav > a:not(.nav__brief)::after {
    content: "→"; position: static; display: block; height: auto; background: none;
    font: 900 22px/1 var(--f-body); color: var(--jade-ink);
    animation: menu-arrow .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.42s + var(--i, 0) * .06s);
  }
  @keyframes menu-arrow { from { opacity: 0; transform: translateX(-18px); } }
  .menu-open .nav > a[aria-current="page"] { color: var(--jade-ink); }
  .menu-open .nav .nav__brief {
    display: block; margin-top: 18px; padding: 15px; text-align: center; border: 3px solid var(--ink);
    background: var(--jade); color: var(--ink); font-size: 21px; box-shadow: 5px 5px 0 var(--ink);
    animation-name: menu-pop; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1);
  }
  @keyframes menu-pop { from { opacity: 0; transform: scale(.85); box-shadow: 0 0 0 var(--ink); } }
  .menu-open .nav .nav__contacts { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 16px; padding-top: 0; }

  /* Mini robot at the bottom of the menu */
  .menu-open .nav .nav__robot { display: flex; }
  .nav__robot { margin-top: auto; padding-top: 16px; align-items: flex-end; justify-content: flex-end; gap: 10px; }
  .nav__caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--jade); animation: blink .9s steps(1) infinite; }
  .nav__robot-say {
    position: relative; margin-bottom: 44px; padding: 9px 12px; min-width: 196px; white-space: nowrap; background: var(--paper-2);
    border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 700 14px/1.3 var(--f-body);
  }
  .nav__robot-say::before, .nav__robot-say::after { content: ""; position: absolute; border-style: solid; border-color: transparent; }
  .nav__robot-say::before { right: -14px; top: 10px; border-width: 8px 0 8px 12px; border-left-color: var(--ink); }
  .nav__robot-say::after { right: -9px; top: 12.5px; border-width: 5.5px 0 5.5px 8px; border-left-color: var(--paper-2); }
  .nav__robot svg { width: 78px; height: auto; overflow: visible; }
  /* Rides in from the right on its wheels once the menu has unzipped, slowing smoothly to a stop.
     Travel and wheel spin share one easing so the wheels never slip; the body leans gently as it brakes
     (on its own layer, so lean and travel blend instead of fighting). Then the bubble eases in and it waves */
  .menu-open .nav .nav__robot { animation: none; }
  .menu-open .nav__robot svg { will-change: transform; animation: bot-ride 1.7s cubic-bezier(.33, 1, .68, 1) .5s both; }
  .menu-open .nav__robot .fr-wheel { transform-box: fill-box; transform-origin: center; animation: bot-wheel 1.7s cubic-bezier(.33, 1, .68, 1) .5s both; }
  .menu-open .nav__robot .fr-all { transform-origin: 60px 150px; animation: bot-lean 1.9s ease-in-out .5s both; }
  .menu-open .nav__robot .nav__robot-say { transform-origin: 100% 50%; animation: say-in .5s cubic-bezier(.22, 1, .36, 1) 2.05s both; }
  @keyframes bot-ride { from { transform: translateX(190px); } to { transform: none; } }
  @keyframes bot-wheel { from { transform: rotate(0); } to { transform: rotate(-1800deg); } }
  @keyframes bot-lean { 0%, 45% { transform: none; } 72% { transform: rotate(-4deg); } 88% { transform: rotate(.8deg); } 100% { transform: none; } }
  @keyframes say-in { from { opacity: 0; transform: translateX(10px) scale(.92); } }
  .menu-open .nav__robot .fr-arm-r { animation: wave 1.5s ease-in-out 2.1s both; }
  @keyframes wave { 20% { transform: rotate(-150deg); } 40% { transform: rotate(-115deg); } 60% { transform: rotate(-150deg); } 80% { transform: rotate(-120deg); } }
  .menu-open .nav__robot.wave-2 .fr-arm-r { animation: wave-again 1.5s ease-in-out both; }
  @keyframes wave-again { 20% { transform: rotate(-150deg); } 40% { transform: rotate(-115deg); } 60% { transform: rotate(-150deg); } 80% { transform: rotate(-120deg); } }

  /* Short screens (browser bars take a share): drop the decorative robot so nothing scrolls */
  @media (max-height: 650px) { .menu-open .nav .nav__robot { display: none; } }

  .hero__grid { grid-template-columns: 1fr; }
  /* Phone hero: talking robot standing on a dark "what we do" block */
  .hero__body { padding-bottom: 0; }
  .hero__grid { flex: none; gap: 0; align-items: end; }
  .robot-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "say robot";
    align-items: center; column-gap: 12px; margin: 18px 0 -16px; position: relative; z-index: 2;
  }
  .robot { grid-area: robot; width: min(172px, 46vw); filter: none; }
  .robot__say { grid-area: say; align-self: end; margin-bottom: 34px; min-height: 9.6em; }

  .hero__info {
    flex: 1; align-content: start; margin-inline: calc(-1 * var(--gutter)); padding: 40px var(--gutter) 28px;
    background: var(--ink); color: var(--paper); gap: 20px;
  }
  .hero__info .kicker { color: var(--jade); }
  .hero__statement {
    display: block; margin-top: 12px !important; color: var(--paper) !important; max-width: none !important;
    font: 900 clamp(1.875rem, 8.6vw, 2.5rem)/1.02 var(--f-display) !important; letter-spacing: -.03em; text-wrap: balance;
  }
  .hero__statement span { color: var(--jade); }
  .hero__chips { justify-content: center; margin-top: 28px; }
  .hero__info .hero__lead {
    display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto 0; max-width: none; color: var(--paper);
    font: 800 13px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  }
  .hero__info .hero__lead::before, .hero__info .hero__lead::after {
    content: ""; width: 28px; height: 2px; flex: none; background: var(--jade);
  }
  /* Centred pitch on phones; the icon list below stays left-aligned */
  .hero__info .kicker, .hero__statement, .hero__info .hero__lead { text-align: center; }
  .hero__info .kicker { max-width: none; }
  .hero__info .hero__services-label { text-align: center; max-width: none; }
  .hero__info .btn { justify-self: stretch; background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .hero__info .btn__label { flex: 1; padding-block: 18px; font-size: 17px; }
  .hero__info .btn__arrow { width: 64px; }
  .hero__info .brick { background: transparent; color: var(--paper); border-color: rgba(236, 232, 223, .3); }
  .hero__info .brick:hover { box-shadow: 3px 3px 0 var(--jade); border-color: var(--paper); }
  /* Service buttons as an even grid: 5 across on tablets, 2 across on phones */
  .hero__info .bricks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .hero__info .bricks .brick { min-height: 48px; padding: 8px 6px; white-space: normal; text-align: center; line-height: 1.25; }

  /* Scannable "what we do" points, larger for touch */
  .hero__points { display: grid; margin-top: 36px; }
  .hero__points li { grid-template-columns: 42px 1fr; gap: 16px; padding: 15px 0; }
  .hero__icon { width: 42px; height: 42px; }
  .hero__icon svg { width: 26px; height: 26px; }
  .hero__points b { font-size: 17px; }
  .hero__points p > span { margin-top: 3px; font-size: 14px; }

  /* Service buttons: labelled, brighter, clearly tappable */
  .hero__info .hero__services-label {
    display: block; margin: 8px 0 -8px; max-width: none; color: var(--jade);
    font: 800 11px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase;
  }
  .hero__info .bricks .brick {
    background: rgba(236, 232, 223, .07); border: 1.5px solid rgba(236, 232, 223, .5);
    font-size: 11px; color: var(--paper);
  }
  .hero__info { grid-template-columns: 1fr; }
  .cs-card { grid-template-columns: 1fr; }
  .cs-card__side { border-left: 0; border-top: 1px solid var(--on-dark-line); }
  .case-big__grid, .calc, .faq-layout, .story, .svc-fold__cols, .brief-layout { grid-template-columns: 1fr; }
  .svc-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-aside { position: static; }
  .section__head--split { grid-template-columns: 1fr; }
  .svc-head { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 640px) {
  .contact-grid, .case-grid, .form-row { grid-template-columns: 1fr; }
  .ft-bottom__mid { display: none; }
  .case-card--cta { grid-column: auto; }
  .story__beats li { grid-template-columns: 1fr; gap: 8px; }
  .story__beats p { font-size: 16px; }
  .ttag { padding-top: 100px; }
  .ttag__face { filter: drop-shadow(5px 5px 0 var(--ink)); margin-right: 5px; }
  .ttag__defs li, .ttag__bags li { font-size: 16px; }
  .contact-card { min-height: 0; }
  .svc-groups { row-gap: 26px; }
  .svc-group__cards { grid-auto-columns: 84%; }
  .svc-card { grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 40px 14px 14px; box-shadow: 3px 3px 0 var(--ink); }
  .svc-card__icon { width: 42px; height: 42px; }
  .svc-card__icon svg { width: 22px; height: 22px; }
  .svc-card__title { font-size: 19px; }
  .svc-card__line { font-size: 14px; }
  .svc-band__grid { grid-template-columns: 1fr; --gap: 8px; }
  .ft-contact__cards { grid-template-columns: 1fr; gap: 8px; }
  .svc-cta { grid-template-columns: 1fr; }
  .svc-cta__btn { justify-self: stretch; }
  .svc-cta__btn .btn__label { flex: 1; }
  .svc-deck { font-size: 17px; gap: 8px 9px; }
  .svc-deck__btn { gap: 5px; padding: 4px 8px 5px; box-shadow: 2px 2px 0 var(--ink); }
  .svc-tile { grid-template-columns: 38px 1fr; gap: 3px 11px; padding: 12px 30px 12px 12px; box-shadow: 3px 3px 0 var(--ink); border-width: 2px; }
  .svc-tile__icon { width: 38px; height: 38px; }
  .svc-tile__icon svg { width: 20px; height: 20px; }
  .svc-tile__title { font-size: 14px; }
  .svc-tile__metric { font-size: 10px; }
  .svc-tile__metric b { font-size: 13px; margin-right: 5px; }
  .svc-tile__mark { right: 9px; width: 14px; height: 14px; margin-top: -7px; }
  .svc-tile__mark::before, .svc-tile__mark::after { width: 13px; margin-left: -6.5px; }
  .svc-band__head { gap: 4px; margin-bottom: 12px; padding-left: 12px; border-left-width: 3px; }
  .svc-fold__line { font-size: 15px; margin-bottom: 16px; }
  .poster { font-size: clamp(44px, 14.5vw, 72px); }
  .poster__outline { -webkit-text-stroke-width: 1.6px; }
  .bricks .brick { flex: 0 1 auto; font-size: 10px; padding-inline: 10px; }
  .hero__info .bricks { grid-template-columns: 1fr 1fr; }
  .hero__info .bricks .brick { justify-content: space-between; gap: 8px; padding: 10px 12px; min-height: 52px; text-align: left; font-size: 11.5px; letter-spacing: .08em; }
  .hero__info .bricks .brick::after { content: "→"; flex-shrink: 0; margin-top: -3px; color: var(--jade); font: 900 16px/1 var(--f-body); }
  .meta-bar .hide-sm { display: none; }
  .case-thumb { flex-basis: 180px; }
  .results li { grid-template-columns: 1fr; gap: 6px; }
  .cs-ba p { grid-template-columns: 56px 1fr; font-size: 15px; }
  .cs-stats b { font-size: 17px; }
  .cs-stats li { padding: 10px 8px; }
  .cs-card__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .cs-card__actions .btn__label { flex: 1; }
  .cs-more { align-self: center; }
  .btn__label { padding: 14px 18px; font-size: 15px; }
}

/* Narrow phones: the lead bar steps up a line so the sentence and its button never split */
@media (max-width: 400px) {
  .svc-deck { row-gap: 12px; font-size: 16px; column-gap: 7px; }
  .svc-deck__text { word-spacing: .03em; }
  .svc-deck__btn { padding: 4px 7px 5px; }
}
/* Smallest phones: the one-line title steps down just enough to fit */
@media (max-width: 340px) {
  .page-head--tight .page-title { font-size: 2.2rem; }
  .nav .mc-btn { gap: 4px; padding: 0 3px; font-size: 12px; }
  .nav .mc-btn svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .svc-cta .svc-cta__btn::after { animation: none !important; }
  .svc-fold { transition: none; }
  .svc-tile, .svc-tile__mark::before, .svc-tile__mark::after { transition: none; }
  .ticker__track { animation: none; }
  .ttag .ttag__swing { animation: none !important; }
}

/* Narrow phones: keep the doubts bar title on one line */
@media (max-width: 430px) {
  .f-doubts__toggle { grid-template-columns: 46px 1fr 36px; gap: 10px; }
  .f-doubts__face { width: 46px; height: 46px; }
  .f-doubts__icon { width: 36px; height: 36px; }
  .f-doubts__txt b { font-size: 17.5px; }
}

/* Calculator on phones */
@media (max-width: 640px) {
  .calc-fold__toggle { grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 12px; padding: 10px; }
  .calc-fold__icon { width: 48px; height: 48px; }
  .calc-fold__icon svg { width: 26px; height: 26px; }
  .calc-fold__plus { width: 40px; height: 40px; }
  .calc-fold__txt b { font-size: clamp(17px, 5vw, 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calc-fold__txt small { font-size: 13px; }
  .calc { margin-right: 4px; box-shadow: 4px 4px 0 var(--ink); }
  .calc__bar { grid-template-columns: 76px 1fr auto; gap: 8px; font-size: 12px; }
  .calc__tiles dd { font-size: 17px; }
  .calc__tiles div { padding: 10px 8px; }
  .calc__out .btn { align-self: stretch; }
  .calc__out .btn__label { flex: 1; }
}

/* Timeline on phones: line on the left, cards on the right */
@media (max-width: 760px) {
  .tl { --node: 46px; gap: 18px; }
  .tl__track { left: calc(var(--node) / 2); }
  .tl__step { grid-template-columns: var(--node) 1fr; gap: 14px; align-items: start; }
  .tl__node { grid-column: 1; }
  .tl__node svg { width: 22px; height: 22px; }
  .tl__card, .tl__step:nth-child(odd) .tl__card { grid-column: 2; text-align: left; transform: translateY(18px); padding: 14px 16px; box-shadow: 4px 4px 0 var(--ink); }
  .tl__card h3 { font-size: 22px; margin: 8px 0 4px; }
  .tl__card p:last-child { font-size: 14px; }
}

@media (max-width: 640px) {
  .f-chat.f-chat--light { box-shadow: 5px 5px 0 var(--ink); margin-right: 5px; }
  .f-chat.f-chat--light .f-chat__log { max-height: 340px; }
}

/* Phones: "what we do" points as three compact tiles in a row */
@media (max-width: 640px) {
  .hero__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 0; }
  .hero__points li {
    grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 12px;
    padding: 16px 6px 14px; text-align: center; border: 1px solid var(--on-dark-line);
  }
  .hero__icon { width: 38px; height: 38px; }
  .hero__icon svg { width: 22px; height: 22px; }
  .hero__points b { font-size: clamp(12px, 3.5vw, 14px); line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
  .hero__points p > span { display: none; }
}

/* Narrow phones: keep the "built and run for you" caption on one line between its dashes */
@media (max-width: 400px) {
  .hero__info .hero__lead { gap: 10px; font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; }
  .hero__info .hero__lead::before, .hero__info .hero__lead::after { width: 20px; }
}

/* Scroll reveal: main.js adds .rv to blocks below the fold and fades them up when they come into view */
.rv { opacity: 0; }

/* Production-line heading: one centred column on every screen size */
.line-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.line-head .kicker, .line-inputs__label { max-width: none; }
.line-chips { justify-content: center; }
.line-inputs__out { justify-content: center; text-align: left; max-width: 46ch; margin-inline: auto; }
@media (max-width: 640px) {
  .line-inputs__out { justify-content: flex-start; max-width: none; }
}

/* Desktop "what we do" panel: pitch centred in its column, points as three tiles (as on phones) */
@media (min-width: 901px) {
  .hero__info > div { text-align: center; }
  .hero__info .kicker { max-width: none; }
  .hero__info .hero__statement { margin: 14px auto 0; max-width: none; font-size: clamp(32px, 2.8vw, 46px); line-height: 1; }
  .hero__info .hero__lead { justify-content: center; margin-top: 18px; }
  .hero__points { margin-top: 22px; }
  .hero__info .hero__lead::after { content: ""; width: 24px; height: 2px; flex: none; background: var(--jade); }
  .hero__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 0; }
  .hero__points li {
    grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 10px;
    padding: 14px 8px 12px; text-align: center; border: 1px solid var(--on-dark-line);
  }
  .hero__points p > span { display: none; }
  .hero__info .btn { justify-self: stretch; }
  .hero__info .btn__label { flex: 1; }
  .hero__info .hero__services-label { text-align: center; }
}

/* Shorter desktop windows: headline a step smaller so the whole panel still fits */
@media (min-width: 901px) and (max-height: 900px) {
  .hero__info .hero__statement { margin-top: 10px; font-size: clamp(30px, 2.5vw, 38px); }
  .hero__info .hero__lead { margin-top: 14px; }
  .hero__points { margin-top: 18px; }
}

/* Desktop hero: robot with its speech bubble, standing on the "what we do" panel */
@media (min-width: 901px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: end; }
  .hero__grid .poster { align-self: center; }
  .robot-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "say robot";
    align-items: end; column-gap: 20px; margin-bottom: -14px; position: relative; z-index: 2;
  }
  .robot { grid-area: robot; }
  .robot__say { grid-area: say; align-self: center; justify-self: end; width: min(100%, 300px); min-height: 6.6em; padding: 14px 16px 12px; font-size: 16px; }
  .robot__say p { font-size: 16px !important; }
}

/* Timeline cards: big outlined step number, days as a green tag, green edge facing the line */
.tl { counter-reset: tl-step; }
.tl__step { counter-increment: tl-step; }
.tl__card { position: relative; overflow: hidden; padding: 22px 24px 20px; border-left: 7px solid var(--jade); }
.tl__step:nth-child(odd) .tl__card { border-left-width: 2px; border-right: 7px solid var(--jade); }
.tl__card::before {
  content: counter(tl-step, decimal-leading-zero); position: absolute; top: -6px; right: 14px;
  font: 900 76px/1 var(--f-display); letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(10, 10, 10, .14); pointer-events: none;
}
.tl__step:nth-child(odd) .tl__card::before { right: auto; left: 14px; }
.tl__card > * { position: relative; }
.tl__when {
  display: inline-block; padding: 5px 9px 4px; background: var(--jade); color: var(--ink);
  border: 1.5px solid var(--ink); font-size: 11px;
}
.tl__card h3 { margin: 12px 0 8px; font-size: 30px; }
.tl__step:last-child.is-in .tl__card .tl__when { background: var(--ink); color: var(--jade); }
.tl__step:last-child .tl__card { border-left-color: var(--ink); border-right-color: var(--ink); }
.tl__step:last-child.is-in .tl__card::before { -webkit-text-stroke-color: rgba(10, 10, 10, .25); }
@media (max-width: 760px) {
  .tl__card, .tl__step:nth-child(odd) .tl__card { padding: 16px 16px 14px; border-left-width: 6px; border-right-width: 2px; border-right-color: var(--ink); }
  .tl__card::before, .tl__step:nth-child(odd) .tl__card::before { left: auto; right: 10px; font-size: 56px; }
  .tl__card h3 { font-size: 24px; margin: 10px 0 6px; }
}

/* "How we work" and "Cost of routine" headings centred */
#process .section__head, #calculator .section__head { justify-items: center; text-align: center; }
#process .section__head .kicker, #calculator .section__head .kicker { max-width: none; }

/* Case studies heading centred: label, heading, then the "All cases" button underneath */
#cases .cs-head { justify-items: center; text-align: center; }
#cases .cs-head .svc-head__top { display: contents; }
#cases .cs-head .kicker { max-width: none; order: 1; }
#cases .cs-head h2 { order: 2; }
#cases .cs-head .svc-all { order: 3; justify-self: center; }
/* Industry picker centred under it where the buttons fit; on phones the row still scrolls from the left */
#cases .cs__pick { text-align: center; max-width: none; }
@media (min-width: 1200px) {
  #cases .cs-tabs { justify-content: center; }
}

/* Services heading centred: label, heading, subline, then the "All services" button */
#services .svc-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
#services .svc-head .svc-head__top { display: contents; }
#services .svc-head .kicker { max-width: none; order: 1; }
#services .svc-head h2 { order: 2; }
#services .svc-head__sub { order: 3; margin-inline: auto; }
#services .svc-head .svc-all { order: 4; justify-self: center; }

/* Contact heading centred */
#contact .section__head { justify-items: center; text-align: center; }
#contact .section__head .kicker { max-width: none; }
#contact .section__head .lede { margin-inline: auto; }

/* FAQ: heading centred and the chat card centred under it */
#faq .section__head { justify-items: center; text-align: center; }
#faq .section__head .kicker { max-width: none; }
#faq .faq-chat { margin-inline: auto; }

/* Heading variety: some second lines outlined (like "SYSTEMS"), the rest green, alternating down the page */
#cases .h-section .dim, #story .h-section .dim {
  color: transparent; -webkit-text-stroke: 2px var(--ink);
}
#cases .h-section .dim { -webkit-text-stroke-color: var(--paper); }
@media (max-width: 640px) {
  #cases .h-section .dim, #story .h-section .dim { -webkit-text-stroke-width: 1.4px; }
}

/* "Cost of routine": one short heading line, kept on one line where it fits */
#calculator .h-section { text-wrap: balance; }