/*
 * Homepage, "Blaupause": the cre8-it blue, Open Sans and Libre Baskerville, set
 * like a technical drawing – a quiet grid, ruled cells, title blocks for section
 * bars and line drawings that draw themselves in.
 * Static styles are each animation's final frame; motion only adds the path there.
 */
.home {
  --gutter: 56px;
  --pad: 64px;
  overflow-x: clip;
  color: var(--ink);
  font-family: 'Open Sans', sans-serif;
}

.home *,
.home *::before,
.home *::after { box-sizing: border-box; }

:where(.home) :where(h2, h3, p) { margin: 0; }
/* Paragraphs follow their section, not the site-wide grey body copy. */
:where(.home) p { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }

.home ul,
.home ol { margin: 0; padding: 0; list-style: none; }

.home em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }

.home .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.home-frame {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  border-inline: 1px solid var(--line);
}

/* Paused while offscreen (set by the page script). */
.is-paused,
.is-paused * { animation-play-state: paused !important; }

/* ── Section bars: drawing title blocks ───────────────────────── */

.section-bar {
  --bar-line: var(--line);
  --bar-caption: var(--quiet);
  --bar-text: var(--ink);
  --bar-accent: var(--blue-deep);
  font-family: var(--mono);
}

.section-bar--dark { --bar-line: rgba(255, 255, 255, .14); --bar-caption: #9fb3c4; --bar-text: #e5e7eb; --bar-accent: #7cc0ff; }
.section-bar--blue { --bar-line: rgba(255, 255, 255, .32); --bar-caption: #fff; --bar-text: #fff; --bar-accent: #fff; }

.section-bar-row {
  position: relative;
  display: flex;
  min-height: 56px;
  font-size: 13px;
  letter-spacing: .04em;
}

/* Rules run edge to edge, past the frame, like the border of a drawing sheet. */
.section-bar-row::before {
  content: '';
  position: absolute;
  inset: 0 -100vw;
  border-block: 1px solid var(--bar-line);
  pointer-events: none;
}

.section-bar--blue .section-bar-row::before { z-index: -1; background: var(--blue-deep); }
.section-bar--blue { position: relative; z-index: 0; }

.section-bar-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 20px;
  border-left: 1px solid var(--bar-line);
  color: var(--bar-text);
  white-space: nowrap;
}

.section-bar-cell:first-child { border-left: 0; }
.section-bar-cell small { color: var(--bar-caption); font-size: 10.5px; letter-spacing: .08em; }

.section-bar-index { width: 112px; flex: none; }

.section-bar-label {
  flex: 1;
  color: var(--bar-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}


.section-bar-mark { width: var(--gutter); flex: none; align-items: center; padding: 0; }
.section-bar-mark svg { width: 22px; fill: none; stroke: var(--bar-accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ── Shared section typography ────────────────────────────────── */

.section-intro { padding: 96px var(--pad) 72px; }

/* Open sheet between sections: the frame lines run on through the gap. */
.home-section > .home-frame > .section-bar:not(.section-bar--blue),
.home-process .section-bar { padding-top: 120px; }
/* Coming out of the dark band, a short gap is enough to separate the sheets. */
.home-process + .home-section > .home-frame > .section-bar { padding-top: 72px; }

.section-eyebrow {
  color: var(--blue-deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home .section-title {
  margin-top: 14px;
  color: var(--ink);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.section-title em { color: var(--blue-deep); }

/* The original underline accent, kept as the one ornament under every title. */
.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 24px;
  background: var(--blue);
}

.section-text {
  max-width: 780px;
  margin-top: 24px !important;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.cell-grid {
  display: grid;
  gap: 1px;
  border-block: 1px solid var(--line);
  background: var(--line);
}

.cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #fff;
}

.cell-copy { font-size: 16.5px; line-height: 1.65; }
.home .cell-copy-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.cell-copy-title small { font-size: .72em; }
.service-cell .cell-copy-title { display: flex; align-items: center; gap: 12px; }
.home .cell-copy-text { margin-top: 10px; color: var(--muted); }

/* Position balloon: how a drawing numbers its parts. */
.balloon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border: 1.3px solid currentColor;
  border-radius: 50%;
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Hero: a connected workspace ──────────────────────────────── */

.home-hero {
  position: relative;
  overflow: clip;
  background: var(--blue-deep);
  color: #fff;
}

.home-hero p { color: #fff; }

/* Dots and paths share a 32px rhythm, anchored to the page centre. */
.home-hero-grid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .2) 1px, transparent 1.5px) 50% 0 / 32px 32px;
  mask-image: radial-gradient(ellipse at 35% 26%, rgba(0, 0, 0, .25), #000 75%);
  pointer-events: none;
}

.hero-paths {
  position: absolute;
  top: 128px;
  left: calc(50% + 384px);
  width: 320px;
  height: 480px;
  overflow: visible;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-wide-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-path-tracks { stroke: rgba(255, 255, 255, .18); }
.hero-path-nodes { fill: rgba(255, 255, 255, .35); }
.hero-path-signal { opacity: 0; }
/* Six dot spacings either side of a small packet, independent of route length. */
.hero-roaming-track {
  --signal-start: 192px;
  --signal-end: calc(192px - var(--route-length) * 1px);
  opacity: 0;
  stroke: rgba(255, 255, 255, .12);
  stroke-dasharray: 384 calc(var(--route-length) + 384);
  stroke-dashoffset: 192;
}
.hero-path-signal--roaming {
  --signal-start: 3px;
  --signal-end: calc(3px - var(--route-length) * 1px);
  stroke: rgba(255, 255, 255, .32);
  stroke-dasharray: 6 calc(var(--route-length) + 384);
  stroke-dashoffset: 3;
}

/* Two packets start ten seconds apart; 12.8s journeys overlap without a long idle gap. */
@media (prefers-reduced-motion: no-preference) {
  .hero-path-signal,
  .hero-roaming-track { animation: hero-signal 20s linear var(--lane-delay) infinite; }
  .hero-roaming-lane.is-clicked .hero-path-signal,
  .hero-roaming-lane.is-clicked .hero-roaming-track { animation: hero-click-signal 12.8s linear both; }
}

@keyframes hero-signal {
  0% { stroke-dashoffset: var(--signal-start); opacity: 1; }
  63% { opacity: 1; }
  64%, 100% { stroke-dashoffset: var(--signal-end); opacity: 0; }
}

@keyframes hero-click-signal {
  0% { stroke-dashoffset: var(--signal-start); opacity: 1; }
  98% { opacity: 1; }
  100% { stroke-dashoffset: var(--signal-end); opacity: 0; }
}

.home-hero-inner {
  z-index: 1;
  padding: 168px var(--pad) 96px;
  border-color: rgba(255, 255, 255, .2);
}

.hero-label {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .02em;
}

.home .hero-title {
  max-width: 900px;
  margin-top: 28px;
  color: #fff;
  font-size: clamp(42px, 6.2vw, 88px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.hero-title-line { display: block; }
.hero-title em { color: #fff; }

.hero-lead {
  max-width: 600px;
  margin-top: 32px !important;
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, transform .2s var(--ease);
}

.btn svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:hover svg { transform: translateX(3px); }

.btn--white { background: #fff; color: var(--blue-ink); }
.btn--white:hover { background: #eef6fe; color: var(--blue-ink); }

.btn--ghost { border: 1px solid rgba(255, 255, 255, .7); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.home-hero .btn:focus-visible { outline-color: #fff; }

/* ── Hero app window: half drawing, half built ────────────────── */

@property --cut-top { syntax: '<percentage>'; inherits: true; initial-value: 62%; }
@property --cut-bottom { syntax: '<percentage>'; inherits: true; initial-value: 47%; }

.hero-window {
  --cut-top: 62%;
  --cut-bottom: 47%;
  max-width: 1120px;
  margin: 88px auto 0;
  animation: hw-sweep 2.6s var(--ease) .5s both;
}

/* The construction line sweeps from "all drawing" to its resting cut. */
@keyframes hw-sweep {
  from { --cut-top: 104%; --cut-bottom: 100%; }
}

.hero-window-sheet { position: relative; text-align: left; }

.hw-layer { display: block; width: 100%; height: auto; }
.hw-layer text { font-family: 'Open Sans', sans-serif; }

.hw-layer--built {
  position: absolute;
  inset: 0;
  clip-path: polygon(var(--cut-top) 0, 100% 0, 100% 100%, var(--cut-bottom) 100%);
  filter: drop-shadow(0 30px 40px rgba(4, 22, 54, .35));
}

/* The drawing: every shape as a white hairline, every label in white. */
.hw-layer--draft :is(rect, circle, path) {
  fill: none !important;
  stroke: rgba(255, 255, 255, .78);
  stroke-width: 1.2px;
  stroke-dasharray: none;
}
.hw-layer--draft text { fill: #fff !important; fill-opacity: .92; }
.hw-layer--draft .hw-grid { stroke: rgba(255, 255, 255, .22); stroke-dasharray: 3 5; }
.hw-layer--draft :is(.hw-toast, .hw-cursor, .hw-status-before, .hw-approve) { display: none; }
.hw-layer--draft,
.hw-layer--draft * { animation: none !important; }

/* Construction line along the cut, overshooting the window by 6% top and bottom. */
.hw-cut {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: calc(var(--cut-bottom) - (var(--cut-top) - var(--cut-bottom)) * .06);
  width: calc((var(--cut-top) - var(--cut-bottom)) * 1.12);
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 255, 255, .9) calc(50% - .5px), rgba(255, 255, 255, .9) calc(50% + .5px), transparent calc(50% + 1px));
  pointer-events: none;
}

.hw-url { fill: #6b7685; font-size: 12px; }
.hw-code { fill: var(--blue); font-family: var(--mono) !important; font-size: 13px; font-weight: 700; }
.hw-strong { fill: var(--ink); font-size: 14px; font-weight: 600; }
.hw-strong--sm { font-size: 13px; }
.hw-small { fill: #7a8594; font-size: 11.5px; }
.hw-small--md { font-size: 12.5px; }
.hw-label { fill: #98a2b0; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; }
.hw-nav { fill: #4b5563; font-size: 13px; }
.hw-badge { fill: #fff; font-size: 10px; font-weight: 700; }
.hw-avatar { fill: #fff; font-family: var(--mono) !important; font-size: 9px; font-weight: 700; }
.hw-title { fill: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.hw-button { fill: #fff; font-size: 13px; font-weight: 600; }
.hw-kpi { fill: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.hw-spark { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.hw-grid { stroke: #eef1f4; stroke-dasharray: 3 4; }
.hw-bar { fill: #bcd9f7; transform-box: fill-box; transform-origin: bottom; }
.hw-bar--today { fill: var(--blue); }
.hw-tip-text { fill: #fff; font-size: 11.5px; font-weight: 600; }
.hw-tip-pos { transition: transform .25s var(--ease); }
.hw-tab { fill: #7a8594; font-size: 12px; }
.hw-head { fill: #98a2b0; font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.hw-id { fill: #7a8594; font-family: var(--mono) !important; font-size: 12px; }
.hw-pill { font-size: 11px; font-weight: 600; }
.hw-approve-text { fill: var(--blue-deep); font-size: 11px; font-weight: 600; }
.hw-toast-title { fill: #fff; font-size: 13px; font-weight: 600; }
.hw-toast-text { fill: #aab4c0; font-size: 11px; }

/* Resting frame: the order is approved and the confirmation is showing. */
.hw-status-before,
.hw-approve,
.hw-cursor { opacity: 0; }
.hw-swap-before { fill-opacity: 0; }
.hw-status-after { transform-box: fill-box; transform-origin: center; }

.hw-spark { animation: hw-draw 12s var(--ease) var(--d, 0s) infinite both; }
.hw-bar { animation: hw-grow 12s var(--ease) var(--d, 0s) infinite both; }
.hw-tip { animation: hw-tip 12s var(--ease) infinite both; }
.hw-row { animation: hw-row 12s var(--ease) var(--d, 0s) infinite both; }
.hw-cursor { animation: hw-cursor 12s cubic-bezier(.45, .05, .25, 1) infinite both; }
.hw-approve { animation: hw-approve 12s linear infinite both; }
.hw-status-before { animation: hw-before 12s linear infinite both; }
.hw-status-after { animation: hw-after 12s var(--ease) infinite both; }
.hw-swap-before { animation: hw-swap-before 12s linear infinite both; }
.hw-swap-after { animation: hw-swap-after 12s linear infinite both; }
.hw-toast { animation: hw-toast 12s var(--ease) infinite both; }
.hw-online { animation: hw-blink 2s ease-in-out infinite; }

@keyframes hw-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes hw-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  14% { stroke-dashoffset: 0; }
  95% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes hw-grow {
  0% { transform: scaleY(0); opacity: 1; }
  12% { transform: scaleY(1); }
  95% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes hw-tip {
  0%, 15% { opacity: 0; transform: translateY(5px); }
  19%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes hw-row {
  0% { opacity: 0; transform: translateX(14px); }
  8%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes hw-cursor {
  0%, 26% { opacity: 0; transform: translate(1010px, 600px); }
  30% { opacity: 1; transform: translate(1010px, 600px); }
  44% { transform: translate(1118px, 348px); }
  46% { transform: translate(1118px, 348px) scale(.82); }
  48% { transform: translate(1118px, 348px); }
  60% { opacity: 1; transform: translate(1046px, 470px); }
  66%, 100% { opacity: 0; transform: translate(1046px, 470px); }
}
@keyframes hw-approve {
  0%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hw-before {
  0%, 47% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes hw-after {
  0%, 47% { opacity: 0; transform: scale(.85); }
  51%, 100% { opacity: 1; transform: none; }
}
@keyframes hw-swap-before {
  0%, 48% { fill-opacity: 1; }
  50%, 100% { fill-opacity: 0; }
}
@keyframes hw-swap-after {
  0%, 48% { fill-opacity: 0; }
  50%, 100% { fill-opacity: 1; }
}
@keyframes hw-toast {
  0%, 49% { opacity: 0; transform: translateY(14px); }
  53%, 86% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(6px); }
}

/* ── Hero app: the visitor takes over ─────────────────────────── */
/* Pages, hover and selection. data-hw marks are highlighted from the overlay. */
.hw-view:not(.is-active),
.hw-quote:not(.is-active) { display: none; }
.hw-view.is-active:not([data-view="dashboard"]),
.hw-quote.is-active { animation: hw-view-in .45s var(--ease) both; }
@keyframes hw-view-in {
  from { opacity: 0; transform: translateY(8px); }
}

.hw-hl { fill: #f1f4f8; opacity: 0; transition: opacity .15s; }
.hw-row > .hw-hl { fill: #f6f9fc; }
.hw-devmode > .hw-hl { fill: #e6f1fd; }
.is-hover > .hw-hl { opacity: 1; }
.hw-nav-bg { fill: #e6f1fd; opacity: 0; transition: opacity .15s; }
.is-current > .hw-nav-bg { opacity: 1; }
.hw-nav-icon { fill: #c3ccd6; transition: fill .15s; }
.is-current > .hw-nav-icon { fill: var(--blue); }
.is-current > .hw-nav { fill: var(--blue-ink); font-weight: 600; }
.hw-card { transition: stroke .15s; }
:is(.is-hover, .is-current) > .hw-card { stroke: #9cc7f3; }
.hw-chevron { fill: none; stroke: #b3bcc7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease), stroke .15s; }
.is-hover > .hw-chevron { stroke: var(--blue); transform: translateX(2px); }
.hw-light-glyph { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.is-hover > .hw-light-glyph { opacity: 1; }
.hw-btn-bg { transition: fill .15s; }
.hw-btn--primary .hw-btn-bg { fill: var(--blue); }
.hw-btn--primary.is-hover .hw-btn-bg { fill: var(--blue-deep); }
.hw-btn--outline .hw-btn-bg { fill: #fff; stroke: var(--blue); }
.hw-btn--outline.is-hover .hw-btn-bg { fill: #eef6fe; }
.hw-btn--dark .hw-btn-bg { fill: var(--ink); }
.hw-btn--dark.is-hover .hw-btn-bg { fill: #34465a; }
.hw-bar { transition: fill .15s; }
.is-hover > .hw-bar { fill: #8fc0f2; }
.is-hover > .hw-bar--today { fill: var(--blue-deep); }
.hw-tab-line { opacity: 0; transition: opacity .2s; }
.is-current > .hw-tab-line { opacity: 1; }
.is-current > .hw-tab { fill: var(--blue-ink); font-weight: 600; }
.is-hover:not(.is-current) > .hw-tab { fill: var(--ink); }
.hw-row-slot { transition: transform .4s var(--ease), opacity .25s; }
.hw-row-slot.is-filtered { opacity: 0; }
.hw-dot { fill: #d4dbe3; transition: fill .2s; }
.hw-dot.is-current { fill: var(--blue); }

.hw-count { fill: #4b5563; font-size: 11px; font-weight: 700; }
.hw-initials { fill: var(--blue-ink); font-size: 12px; font-weight: 700; }
.hw-initials--sm { font-size: 9.5px; }
.hw-initials--light { fill: #fff; font-size: 13px; }
.hw-link { fill: var(--blue-deep); font-size: 12px; font-weight: 700; }
.hw-cta-bg { fill: #f4f9ff; stroke: var(--blue); stroke-dasharray: 5 4; transition: fill .15s; }
.is-hover > .hw-cta-bg { fill: #e3f0fd; }
.hw-arrow { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-arrow--light { stroke: #fff; }
.hw-quote-mark { fill: var(--blue); font-size: 72px; }
.hw-quote-text { fill: var(--ink); font-size: 17px; font-style: italic; }
.hw-layer :is(.hw-quote-mark, .hw-quote-text) { font-family: var(--serif); }
.hw-timer { fill: var(--ink); font-family: var(--mono) !important; font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.hw-live { fill: #156b3a; }
.hw-time-support .hw-small { fill: var(--blue-deep); }
.hw-stock { transform-box: fill-box; transform-origin: left; transform: scaleX(var(--level)); transition: transform 1.4s var(--ease), fill .4s; }
.hw-stock--ok { fill: var(--blue); }
.hw-stock--low { fill: #f0a020; }
.hw-stock--critical { fill: #e5484d; }
.hw-rec { animation: hw-blink 1.4s ease-in-out infinite; }

/* One-off states, toggled by the page script. */
.hw-nav-rec,
.hw-timer-paused,
.hw-coffee-after,
.hw-remind-after { display: none; }
.is-live:not(.is-timer-paused) .hw-nav-rec,
.is-timer-paused .hw-timer-paused,
.is-coffee .hw-coffee-after,
.is-reminded .hw-remind-after { display: inline; }
.is-timer-paused .hw-timer-running,
.is-coffee .hw-coffee-before,
.is-reminded .hw-remind-before { display: none; }
.is-timer-paused .hw-rec { animation: none; fill: #b3bcc7; }
.is-coffee .hw-stock--coffee { fill: #28a35f; transform: none; }

/* The drawing answers in hairlines: dashed for hover, solid for the current item. */
.hw-layer--draft .hw-hl,
.hw-layer--draft .hw-cta-bg { stroke-dasharray: 4 3; }
.hw-layer--draft .is-hover > :is(.hw-card, .hw-btn-bg, .hw-cta-bg, .hw-bar) { stroke: #fff; stroke-width: 1.8px; stroke-dasharray: 4 3; }
.hw-layer--draft .hw-dot.is-current { fill: #fff !important; }

/* Live: the demo loop stops at the start of its story and waits for a real click. */
.is-live :is(.hw-spark, .hw-bar, .hw-tip, .hw-row, .hw-cursor, .hw-approve, .hw-status-before, .hw-status-after, .hw-swap-before, .hw-swap-after, .hw-toast) { animation: none; }
.is-live:not(.is-approved) .hw-layer--built :is(.hw-status-before, .hw-approve) { opacity: 1; }
.is-live:not(.is-approved) .hw-layer--draft :is(.hw-status-before, .hw-approve) { display: inline; opacity: 1; }
.is-live:not(.is-approved) .hw-status-after { opacity: 0; transform: scale(.85); }
.is-live.is-approved .hw-status-after { transition: opacity .25s, transform .4s var(--ease); }
.is-live:not(.is-approved) .hw-swap-before { fill-opacity: 1; }
.is-live:not(.is-approved) .hw-swap-after { fill-opacity: 0; }
.is-live .hw-toast { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s var(--ease); }
.is-live.is-toast .hw-toast { opacity: 1; transform: none; }

/* Window buttons: yellow folds the app back into its drawing, green builds it all. */
.hero-window.is-cut-free { animation: none; transition: --cut-top 1.3s var(--ease), --cut-bottom 1.3s var(--ease); }
.hero-window[data-cut="draft"] { --cut-top: 116%; --cut-bottom: 100%; }
.hero-window[data-cut="built"] { --cut-top: 0%; --cut-bottom: -16%; }
.hw-cut { transition: opacity .3s; }
.hero-window:is([data-cut="draft"], [data-cut="built"]) .hw-cut { opacity: 0; transition-delay: 1s; }
.hero-window-sheet.is-shaking { animation: hw-shake .5s var(--ease); }
@keyframes hw-shake {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* Real controls over the drawing. */
.hw-hotspots { position: absolute; inset: 0; z-index: 2; }
.hw-hot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hw-hot[hidden] { display: none; }
.hw-hot:focus { outline: none; }
.hw-hot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px var(--blue-ink); }
/* Entwicklermodus: everything clickable, outlined like a browser inspector. */
.is-devmode .hw-hot { outline: 1.5px dashed #e3008c; outline-offset: -1px; background: rgba(227, 0, 140, .07); }

.hw-popover {
  position: absolute;
  bottom: calc(100% - 564 / 660 * 100%);
  left: 1%;
  z-index: 3;
  width: min(296px, 86vw);
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(4, 22, 54, .3), 0 0 0 1px rgba(16, 40, 70, .08);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  transform-origin: 30px 100%;
  animation: hw-pop .24s var(--ease) both;
}
.hw-popover[hidden] { display: none; }
.hw-popover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 30px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
@keyframes hw-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
}
.hw-popover-head { display: flex; align-items: center; gap: 10px; }
.hw-popover-avatar {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font: 700 10px var(--mono);
}
/* Beats the hero's white paragraphs. */
.hw-popover p { color: var(--ink); }
.hw-popover-title { font-weight: 700; }
.hw-popover .hw-popover-status { color: var(--muted); font-size: 12.5px; }
.hw-popover-status span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #28c76f;
  vertical-align: 1px;
  animation: hw-blink 2s ease-in-out infinite;
}
.hw-popover-close {
  display: grid;
  width: 30px;
  height: 30px;
  margin: -6px -6px 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
}
.hw-popover-close:hover { background: var(--surface); color: var(--ink); }
.hw-popover-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hw-popover .hw-popover-text { margin: 10px 0 12px; color: var(--muted); font-size: 13.5px; }
.hw-popover-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.hw-popover-link:hover { border-color: var(--blue); background: #f4f9ff; color: var(--ink); }
.hw-popover-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hw-popover-link svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: #e6f1fd;
  fill: none;
  stroke: var(--blue-deep);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.hw-popover-link:hover svg { animation: hw-ring .6s ease-in-out; }
.hw-popover-link[href^="mailto"]:hover svg { animation-name: hw-lift; }
@keyframes hw-ring {
  20%, 60% { transform: rotate(-12deg); }
  40%, 80% { transform: rotate(12deg); }
}
@keyframes hw-lift {
  50% { transform: translateY(-3px); }
}
.hw-popover-link strong { display: block; font-size: 14px; font-weight: 600; }
.hw-popover-link small { display: block; color: var(--muted); font-size: 12.5px; }
.hw-popover .hw-popover-foot { margin-top: 12px; color: var(--quiet); font: 11px var(--mono); letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .hero-window.is-cut-free,
  .hw-row-slot,
  .hw-tip-pos,
  .hw-stock,
  .is-live .hw-toast { transition: none; }
}

/* ── 01 Services ──────────────────────────────────────────────── */

.cell-grid--3 { grid-template-columns: repeat(3, 1fr); }

.service-cell { padding: 48px 48px 0; }

.service-cell .cell-copy { margin-bottom: 40px; }

.cell-stage {
  display: grid;
  height: 290px;
  margin: auto -48px 0;
  place-items: center;
  padding: 36px 40px;
  border-top: 1px solid var(--line);
  background: var(--sheet-grid-light);
}

.vignette { width: 100%; max-width: 360px; }
.vignette svg { display: block; width: 100%; height: auto; overflow: visible; }
.vignette text { font-family: 'Open Sans', sans-serif; }

/* Blueprint drawing primitives: blue hairlines on paper. */
.bp-line { fill: none; stroke: var(--blue-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bp-line--dashed { stroke-dasharray: 4 4; }
.bp-line--ok { stroke: #1f8a4c; }
.bp-soft { fill: none; stroke: rgba(24, 116, 207, .35); stroke-width: 1; }
.bp-paper { fill: #fff; }
.bp-fill { fill: #dcebfb; }
.bp-dot { fill: var(--blue-deep); }
.bp-text { fill: var(--ink); font-size: 11.5px; }
.bp-text--sm { font-size: 11.5px; font-weight: 600; }
.bp-text--xs { font-size: 9.5px; }
.bp-strong { fill: var(--blue-deep); font-weight: 700; }
.bp-mono { fill: var(--blue-deep); font-family: var(--mono) !important; font-size: 10px; letter-spacing: .04em; }
.bp-mono--quiet { fill: var(--quiet); }
.bp-mono--ok { fill: #1f8a4c; }

/*
 * Each drawing plays once, then rests on its final frame. The page script holds
 * it (is-waiting) until its turn comes and replays it on hover.
 */
.vignette.is-waiting * { animation-play-state: paused !important; }

.bp-draw { stroke-dasharray: 1; animation: bp-draw .9s var(--ease) calc(var(--i, 0) * .22s) both; }
.bp-line--dashed.bp-draw { stroke-dasharray: 4 4; animation-name: bp-fade; }
.bp-fade { animation: bp-fade .6s var(--ease) calc(var(--i, 0) * .22s + .3s) both; }
.bp-build { animation: bp-fade .7s var(--ease) calc(var(--i, 0) * .22s + .2s) both; }

@keyframes bp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bp-fade { from { opacity: 0; } }

/* IT support: one message, a moment of typing, one answer. */
.sv-bubble, .sv-ticket { transform-box: fill-box; transform-origin: center; }
.sv-bubble--in { animation: sv-in .6s var(--ease) .1s both; }
.sv-typing { opacity: 0; animation: sv-typing 1.4s linear .7s both; }
.sv-bubble--out { animation: sv-in .6s var(--ease) 2s both; }
.sv-ticket { animation: sv-in .6s var(--ease) 2.8s both; }

@keyframes sv-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sv-typing { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }

/* Process optimisation: loose paper slips give way to one flow. */
.sv-slip { opacity: .35; animation: sv-slip 1.8s var(--ease) calc(var(--i) * .1s) both; }
.sv-step { animation: sv-step .6s var(--ease) calc(var(--i) * .25s + 1.5s) both; }

@keyframes sv-slip {
  0% { opacity: 0; transform: translateY(-6px); }
  25%, 60% { opacity: 1; transform: none; }
  100% { opacity: .35; }
}
@keyframes sv-step { from { opacity: 0; transform: translateX(-8px); } }

/* Interfaces: one packet from each system into the hub. */
.sv-packet { fill: var(--blue-deep); opacity: 0; offset-rotate: 0deg; }

@supports (offset-path: path('M0 0')) {
  .sv-packet { animation: sv-packet 1.2s ease-in calc(var(--i) * .35s + .4s) both; }
}

@keyframes sv-packet {
  0% { offset-distance: 0%; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── 02 Journey ───────────────────────────────────────────────── */

.cell-grid--journey { grid-template-columns: 1fr 1.55fr; }
.journey-cell { padding: 56px 48px; }
.journey-cell .cell-copy { max-width: 560px; }

.az { margin-top: 40px; }

.az-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  color: var(--muted);
  font-size: 15px;
}

.az-search svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.az-window {
  position: relative;
  height: 276px;
  margin-top: 12px;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 8px;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}

/* A fixed selection lens; the portfolio scrolls through it. */
.az-window::after {
  content: '';
  position: absolute;
  top: calc(50% - 23px);
  right: 8px;
  left: 8px;
  height: 46px;
  border: 1px solid #b9d8f8;
  border-radius: 6px;
  background: rgba(35, 135, 234, .06);
  pointer-events: none;
}

.az-list { padding: 4px 0 !important; animation: az-scroll 30s linear infinite; }

.az-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 20px;
  color: var(--ink);
  font-size: 15px;
}

.az-letter {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--blue-ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

@keyframes az-scroll { to { transform: translateY(-100%); } }

.releases { position: relative; margin-top: 40px !important; }

.releases::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17.5px;
  width: 1px;
  background: var(--line);
  transform-origin: top;
  transition: transform 1s var(--ease);
}

.release {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--i) * .2s + .15s);
}

.release + .release { margin-top: 16px; }

.release-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.release-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.release-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 14.5px;
}

.release-head strong { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.release-tag {
  flex: none;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e6f1fd;
  color: var(--blue-ink);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
}

.release-hash { margin-left: auto; color: var(--quiet); font-family: var(--mono); font-size: 12px; text-decoration: underline dotted; }

.release-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.release-state { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #28c76f; }
.release--progress .release-card { border-color: #b9d8f8; }
.release--progress .release-head { border-color: #b9d8f8; background: #eef6fe; }
.release--progress .release-state { background: #f0a020; }

[data-reveal].is-pending:not(.is-revealed)::before { transform: scaleY(0); }
[data-reveal].is-pending:not(.is-revealed) .release { opacity: 0; transform: translateY(12px); }

/* ── 03 Process (dark band): the night version of the drawing ──── */

.home-process {
  position: relative;
  overflow: clip;
  background: var(--navy);
  color: #e5e7eb;
}

.home-process .home-frame { border-color: rgba(255, 255, 255, .1); }
.home-process .home-frame::after { content: ''; display: block; height: 40px; }

.home-process-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 50% 0 / 120px 120px,
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 50% 0 / 120px 120px;
  pointer-events: none;
}

.home-process .section-title { color: #fff; }
.home-process .section-title em { color: #7cc0ff; }
.section-title-soft { color: #9fb3c4; }
.home-process .section-text { color: #c7d2db; }

/* Night ink for the blueprint primitives: light blue hairlines on navy. */
.home-process .bp-line { stroke: #7cc0ff; }
.home-process .bp-line--accent { stroke: #ffd27a; }
.home-process .bp-line--ok { stroke: #6fdc9a; }
.home-process .bp-line--heavy { stroke-width: 4; }
.home-process .bp-soft { stroke: rgba(124, 192, 255, .4); }
.home-process .bp-fill { fill: rgba(124, 192, 255, .16); }
.home-process .bp-text { fill: #e5e7eb; }
.home-process .bp-mono { fill: #7cc0ff; }
.home-process .bp-mono--quiet { fill: #9fb3c4; }
.home-process .bp-mono--accent { fill: #ffd27a; }
.bp-lens { fill: rgba(124, 192, 255, .1); stroke: #fff; stroke-width: 1.3; }
.bp-cursor { fill: #fff; stroke: var(--navy); stroke-width: 1; stroke-linejoin: round; }
.bp-tag { fill: #7cc0ff; }
.bp-tag--white { fill: #fff; }
.bp-tag-text { fill: var(--navy); font-size: 8.5px; font-weight: 700; }

/* Five plates in a row, ruled like the cells of the light sections. */
.process { position: relative; padding-bottom: 72px; }

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-block: 1px solid rgba(255, 255, 255, .1);
}

.process-step {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
}

.process-step + .process-step { border-left: 1px solid rgba(255, 255, 255, .1); }

/* The flow line runs from each balloon into the next plate. */
.process-step-head {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
}

.process-step-head .balloon { position: relative; z-index: 1; background: var(--navy); color: #7cc0ff; }

.process-flow {
  position: absolute;
  top: 50%;
  right: -24px;
  left: 52px;
  z-index: 1;
  height: 1px;
  background: rgba(124, 192, 255, .6);
  transform-origin: left;
  animation: process-flow .6s var(--ease) calc(var(--step) * .66s + .5s) both;
}

.process-flow::after {
  content: '';
  position: absolute;
  top: -4px;
  right: 0;
  border-block: 4.5px solid transparent;
  border-left: 7px solid #7cc0ff;
}

@keyframes process-flow { from { transform: scaleX(0); } }

.process-stage {
  display: grid;
  place-items: center;
  padding: 20px 22px;
  border-block: 1px solid rgba(255, 255, 255, .1);
}

.process-drawing { width: 100%; max-width: 240px; }
.process-drawing svg { display: block; width: 100%; height: auto; overflow: visible; }
.process-drawing text { font-family: 'Open Sans', sans-serif; }

.process-copy { padding: 24px 24px 20px; }
.home .process-title { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.home .process-text { margin-top: 8px; color: #c7d2db; font-size: 14.5px; line-height: 1.6; }

/* Drawings wait offscreen and then draw in one after another. */
[data-reveal].is-pending:not(.is-revealed) .process-drawing *,
[data-reveal].is-pending:not(.is-revealed) .process-flow { animation-play-state: paused; }

/* The way back: after the last step the cycle starts again. */
.process-return {
  position: absolute;
  right: 10%;
  bottom: 30px;
  left: 10%;
  height: 42px;
  border: 1px dashed rgba(255, 255, 255, .4);
  border-top: 0;
}

.process-return::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -5px;
  border-inline: 4.5px solid transparent;
  border-bottom: 7px solid rgba(255, 255, 255, .6);
}

.process-return-label {
  position: absolute;
  bottom: -11px;
  left: 50%;
  padding: 0 14px;
  background: var(--navy);
  color: #c7d2db;
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* ── 04 Contact ───────────────────────────────────────────────── */

.cell-grid--contact { grid-template-columns: 1.1fr 1fr; border-bottom: 0; }
.contact-intro { padding: 96px var(--pad) 88px; }
.home .contact-intro .section-title { font-size: clamp(30px, 3.4vw, 44px); }

.contact-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 40px !important;
  border: 1px solid var(--line);
  background: var(--line);
}

.contact-detail {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-content: start;
  column-gap: 14px;
  padding: 20px;
  background: #fff;
}

.contact-detail-icon {
  display: grid;
  width: 40px;
  height: 40px;
  grid-row: span 2;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--blue-deep);
  font-size: 15px;
}

.home .contact-detail-heading { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.home .contact-detail-value { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.home .contact-detail-link { color: var(--blue-ink); }
.home .contact-detail-link:hover { text-decoration: underline; }

.contact-form-cell {
  justify-content: center;
  padding: 56px 48px;
  background: var(--sheet-grid-light), var(--surface);
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1099px) {
  .cell-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cell-grid--journey,
  .cell-grid--contact { grid-template-columns: 1fr; }
  /* Plates stack: drawing on the left, its step and text beside it. */
  .process { padding-bottom: 0; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step { grid-template: auto 1fr / minmax(220px, 320px) 1fr; }
  .process-step + .process-step { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; }
  .process-stage { grid-area: 1 / 1 / 3 / 2; border-block: 0; border-right: 1px solid rgba(255, 255, 255, .1); }
  .process-step-head { grid-area: 1 / 2; height: auto; padding-top: 24px; }
  .process-copy { grid-area: 2 / 2; padding-top: 14px; }
  .process-flow { display: none; }
  .process-return { position: static; height: auto; padding: 22px 0; border: 0; text-align: center; }
  .process-return::before { display: none; }
  .process-return-label { position: static; padding: 0; transform: none; white-space: normal; }
}

@media (max-width: 991px) {
  .home-hero-inner { padding-top: 140px; }
  .hero-paths { left: calc(50% + 224px); }
}

@media (max-width: 767px) {
  .home { --gutter: 44px; --pad: 22px; }
  .home-hero-inner { padding: 124px var(--pad) 56px; }
  .hero-paths { top: 96px; left: calc(50% + 96px); }
  .hero-lead { font-size: 16.5px; }
  .hero-window { margin-top: 48px; }
  .section-bar-index { width: auto; }
  .section-bar-cell { padding-inline: 14px; }
  .section-bar-label { white-space: normal; }
  .section-intro { padding: 56px var(--pad) 48px; }
  .home-section > .home-frame > .section-bar:not(.section-bar--blue),
  .home-process .section-bar { padding-top: 64px; }
  .home-process .home-frame::after { height: 32px; }
  .home-process + .home-section > .home-frame > .section-bar { padding-top: 48px; }
  .section-text { font-size: 16px; }
  .cell-grid--3 { grid-template-columns: 1fr; }
  .service-cell { padding: 32px var(--pad) 0; }
  .cell-stage { margin-inline: calc(var(--pad) * -1); height: auto; }
  .journey-cell { padding: 32px var(--pad); }
  .release-hash { display: none; }
  .process-step { grid-template: none / 1fr; }
  .process-step > * { grid-column: 1; grid-row: auto; }
  .process-stage { border-block: 1px solid rgba(255, 255, 255, .1); border-right: 0; }
  .process-step-head,
  .process-copy { padding-inline: var(--pad); }
  .contact-intro { padding: 56px var(--pad); }
  .contact-details { grid-template-columns: 1fr; }
  .contact-form-cell { padding: 32px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home *,
  .home *::before,
  .home *::after { animation: none !important; }
  .hero-roaming-track { opacity: 1; }
  .az-window { height: auto; -webkit-mask-image: none; mask-image: none; }
  .az-window::after,
  .az-list--clone { display: none; }
}