:root {
  --ground: #B3D4EA;
  --ink: #141C33;
  --muted: #2C3A5A;
  --p1: #E3253F;
  --p2: #E3253F;
  --p3: #141C33;
  --card: #CFE3F1;
  --hot: #C4142F;
  --shadow: #E3253F;
  --band: #141C33;
  --band-ink: #D3E6F3;
  --band-hot: #FF5A70;
  --display: "Unbounded", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121A30;
    --ink: #D3E6F3;
    --muted: #9DB9CF;
    --p1: #E3253F;
    --p2: #E3253F;
    --p3: #AED3EA;
    --card: #1A2442;
    --hot: #C4142F;
    --shadow: #E3253F;
    --band: #0A0F20;
  }
}
:root[data-theme="dark"] {
  --ground: #121A30;
  --ink: #D3E6F3;
  --muted: #9DB9CF;
  --p1: #E3253F;
  --p2: #E3253F;
  --p3: #AED3EA;
  --card: #1A2442;
  --hot: #C4142F;
  --shadow: #E3253F;
  --band: #0A0F20;
}

* { box-sizing: border-box; }
:root { --bar: 2.75rem; }
:root { --nav-h: 3.75rem; }
html { scroll-padding-top: calc(var(--nav-h) + 0.5rem); }
html.has-ticker { scroll-padding-top: calc(var(--bar) + var(--nav-h)); }

.ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--bar);
  display: flex;
  align-items: stretch;
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 2px solid var(--shadow);
  font-size: 0.95rem;
  line-height: 1;
}
html:not(.has-ticker) .ticker { display: none; }
.ticker-view {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-view { padding-left: 1.25rem; }
.ticker-prefix {
  flex: none;
  margin-right: 0.85rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--band-hot);
  white-space: nowrap;
}
@media (max-width: 40rem) { .ticker-prefix { display: none; } }
.ticker-track { flex: 1 1 auto; min-width: 0; }
.ticker-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: center;
}
.ticker-group li {
  grid-area: 1 / 1;
  min-width: 0;
  padding-right: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.ticker-group li.on {
  opacity: 1;
  transition: opacity 0.7s ease 0.5s;
}
.ticker-group strong { font-weight: 500; color: #fff; margin-right: 0.4em; }
@media (max-width: 64rem) { .ticker-group .tail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ticker-group li, .ticker-group li.on { transition: none; }
}

.ticker-cta {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  background: var(--hot);
  color: #fff;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.ticker-cta:hover { background: var(--shadow); }
.ticker-close {
  flex: none;
  width: var(--bar);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--band-ink);
  cursor: pointer;
}
.ticker-close:hover { color: #fff; }
.ticker-cta:focus-visible, .ticker-close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 36rem) {
  .ticker { font-size: 0.875rem; }
  .ticker-cta .long { display: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  cursor: crosshair;
}
#bg, #fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#bg { z-index: 0; }
#fx { z-index: 2; }
.hero-foot { z-index: 3; }
.center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
  /* lift the hero copy a tenth of the viewport; the canvases behind are positioned on main, so they stay put */
  transform: translateY(-10vh);
  transform: translateY(-10svh);
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 14vw, 14rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--p2);
  user-select: none;
}
.fx-on h1 { color: transparent; }

.tag {
  margin: clamp(1rem, 2.5vw, 2rem) 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 2.1vw, 1.75rem);
  letter-spacing: 0.01em;
}
.slogan {
  margin: 0.9rem 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
}

/* Hero footnote, typed out by main.js like a line from the site's AI */
.ai-note {
  margin: 2.25rem 0 0;
  min-height: 1.5em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.5;
  color: var(--muted);
}
.ai-note-prompt { color: var(--shadow); margin-right: 0.4em; }
.ai-note-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--shadow);
  opacity: 0;
}
.ai-note-cursor.on { opacity: 1; animation: cta-cursor 0.9s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .ai-note-cursor.on { animation: none; } }
@media (max-width: 39.99rem) { .ai-note { font-size: 0.7rem; letter-spacing: -0.01em; } }
.brands-note { margin-top: 1.75rem; max-width: 72ch; }
.results-note, .foot-note { max-width: 80ch; color: var(--band-ink); } /* notes on the dark bands */
.results-note { margin-top: clamp(2rem, 4vw, 3rem); }
.foot-note { margin-top: 1.5rem; }
.results-note .ai-note-prompt, .foot-note .ai-note-prompt { color: var(--band-hot); }
.results-note .ai-note-cursor, .foot-note .ai-note-cursor { background: var(--band-hot); }
.book .book-note { margin: 1.75rem 0 0; padding: 0; border: 0; max-width: 72ch; } /* beats the generic .cards p rule */

.hero-foot, .page-foot {
  position: relative;
  padding: 1.5rem 1.25rem 2rem;
  text-align: center;
  font-size: 0.95rem;
}
.hero-foot a, .page-foot a {
  display: inline-block;
  padding: 0.75rem 0.5rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--p2);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.hero-foot a { background: var(--ground); padding: 0.6rem 1rem; }
.hero-foot a:hover, .page-foot a:hover { text-decoration-color: var(--p3); }
.hero-foot a:focus-visible, .page-foot a:focus-visible {
  outline: 2px solid var(--p2);
  outline-offset: 2px;
  border-radius: 4px;
}

.cards {
  width: 100%; /* main is a grid: without this, auto margins shrink-wrap short sections */
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
.cards h2 {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--shadow);
}
.cards ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 40rem) { .cards ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 78rem) { .cards ul { grid-template-columns: repeat(5, 1fr); } }
/* Scroll position dots under a card track (built by main.js, shown on mobile only) */
.cards .dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.cards .dots button {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cards .dots button[aria-current="true"] {
  background: var(--shadow);
  border-color: var(--shadow);
  transform: scale(1.25);
}
.cards .dots button:focus-visible { outline: 2px solid var(--p2); outline-offset: 2px; }

/* Mobile: cards sit in a horizontal track, two per screen, snapping two at a time */
@media (max-width: 39.99rem) {
  .cards ul {
    --gutter: 1.25rem;
    --gap: 1rem;
    contain: inline-size; /* stop the track's intrinsic width from widening the page */
    min-width: 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--gap)) / 2);
    gap: var(--gap);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cards ul::-webkit-scrollbar { display: none; }
  .cards li { padding: 1.15rem; min-height: 10rem; }
  .cards li:nth-child(odd) { scroll-snap-align: start; }
  /* Solutions and industries: one card plus a fifth of the next, so it is clear there is more */
  .cards:not(.team) ul { grid-auto-columns: calc((100% - var(--gap)) / 1.2); }
  .cards:not(.team) li { scroll-snap-align: start; }
  .cards .dots { display: flex; }
  .cards h3 { font-size: 1rem; }
  .cards p { font-size: 0.92rem; }
}
.cards li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 11rem;
  padding: 1.5rem;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.cards h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
}
.cards p {
  margin: auto 0 0;
  padding-top: 0.9rem;
  border-top: 2px dashed currentColor;
  font-size: 1rem;
  line-height: 1.5;
}
.cards li.lead {
  background: var(--hot);
  color: #fff;
  box-shadow: 6px 6px 0 var(--ink);
}
@media (min-width: 62rem) { .cards.three ul { grid-template-columns: repeat(3, 1fr); } }
.cards + .cards { padding-top: 0; }
.cards p.role {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
}
.cards li.lead p.role { color: inherit; }
.cards p.years {
  font-family: var(--display);
  font-weight: 500;
}
.team li { min-height: 10rem; }

/* Card hover: lift, deepen the shadow, and wipe the fill up in pixel steps */
@media (hover: hover) {
  .cards li {
    position: relative;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.2s ease;
  }
  .cards li::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hot);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.32s steps(8);
  }
  .cards li.lead::before { background: #141C33; }
  .cards li:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 var(--ink);
    color: #fff;
  }
  .cards li.lead:hover { box-shadow: 10px 10px 0 var(--shadow); }
  .cards li:hover::before { transform: scaleY(1); }
  .cards li:hover p.role { color: inherit; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .cards li, .cards li::before { transition: none; }
  .cards li:hover { transform: none; }
}
/* Collapsible card grids (Industries): on tablet and desktop only the first two rows show
   until "Show more" is pressed. main.js adds .is-collapsed, so without it everything shows. */
@media (min-width: 40rem) and (max-width: 61.99rem) { /* 2 columns */
  .cards.is-collapsed li:nth-child(n+5) { display: none; }
  .cards.opening li:nth-child(n+5) { animation: card-in 0.3s steps(4) both; }
}
@media (min-width: 62rem) { /* 3 columns */
  .cards.is-collapsed li:nth-child(n+7) { display: none; }
  .cards.opening li:nth-child(n+7) { animation: card-in 0.3s steps(4) both; }
}
.cards .show-more-wrap { margin: 2rem 0 0; padding: 0; border: 0; text-align: center; }
.show-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.show-more::after { /* pixel chevron that flips when open */
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.show-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.show-more:hover, .show-more:focus-visible { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.show-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.show-more[hidden] { display: none; }
@media (max-width: 39.99rem) { .cards .show-more-wrap { display: none; } } /* phones scroll the full track instead */
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cards.opening li { animation: none; } }

.book .lede {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}
.book-btn {
  display: inline-block;
  padding: 1rem 1.75rem;
  background: var(--hot);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.book-btn:hover, .book-btn:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.book-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.book-btn[hidden] { display: none; }
/* Google Calendar booking popup: its iframe (.mmGMM) paints var(--gm3-sys-color-surface), which Google's
   stylesheet never defines, so the iframe fell back to transparent and showed the dimmed backdrop through it.
   Define the variable and pin the iframe to solid white in both themes (the booking page itself is white). */
:root { --gm3-sys-color-surface: #fff; }
.hur54b .mmGMM, iframe.mmGMM { background-color: #fff; }
.book .book-alt { /* beats the generic .cards p rule that adds a dashed top border */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  border: 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}
.book-email {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95em;
  user-select: all;
  -webkit-user-select: all;
}
.copy-btn {
  padding: 0.35rem 0.75rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.copy-btn:hover, .copy-btn:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.copy-btn.is-done { background: var(--ink); color: var(--ground); }
.copy-status { font-size: 0.9em; color: var(--muted); }
/* Brands we worked with: a continuous logo scroller, logos normalised to one height and one colour */
.brands {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 1.25rem clamp(3rem, 6vw, 5rem);
}
.brands h2 {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--shadow);
}
.brands-marquee {
  --brand-h: clamp(2.25rem, 4vw, 3rem);
  --brand-gap: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  padding: 1.25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.brands-marquee .strip {
  display: flex;
  width: max-content;
  animation: brands-scroll var(--dur, 30s) linear infinite;
}
.brands-marquee:hover .strip, .brands-marquee:focus-within .strip { animation-play-state: paused; }
.brands-track {
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--brand-gap) / 2);
  display: flex;
  align-items: center;
  gap: var(--brand-gap);
  flex: none;
}
.brands-track li { display: flex; align-items: center; }
.brands-track img {
  display: block;
  height: var(--brand-h);
  width: auto;
  max-width: min(22rem, 70vw); /* very wide wordmarks are capped so they never dwarf the others */
  object-fit: contain;
  filter: brightness(0); /* every logo in one ink colour, whatever colour the file was */
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.brands-track img:hover { opacity: 1; }
/* Files with lots of empty padding are drawn larger so the mark itself matches the others */
.brands-track img.pad { height: calc(var(--brand-h) * 1.45); }
/* Logos with white lettering cut out of a coloured shape cannot be flattened, so they go greyscale instead */
.brands-track img.knockout { filter: grayscale(1) contrast(1.15); opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brands-track img { filter: brightness(0) invert(1); }
  :root:not([data-theme="light"]) .brands-track img.knockout { filter: grayscale(1) invert(1) contrast(1.15); }
}
:root[data-theme="dark"] .brands-track img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .brands-track img.knockout { filter: grayscale(1) invert(1) contrast(1.15); }
@keyframes brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .brands-marquee .strip { animation: none; }
  .brands-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.results {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--band);
  color: var(--band-ink);
}
.results .inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) 1.25rem;
}
.results h2 {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.75rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.results h2 .upto {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--band-hot);
  vertical-align: 0.15em;
}
.results dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 on every screen size */
  gap: 2rem 1rem;
}
@media (min-width: 44rem) { .results dl { gap: 3.5rem 3rem; } }
.results .stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end; /* pack to the top so figures line up even when a label wraps */
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 2px dashed var(--band-ink);
}
.results dt {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.3;
}
.results dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.25rem, 8.5vw, 7rem);
  line-height: 1;
  color: var(--band-hot);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Mobile: smaller figures so two fit side by side without wrapping */
@media (max-width: 43.99rem) {
  .results dd { font-size: clamp(1.6rem, 8vw, 2.75rem); } /* scales with the screen, ~2/3 of the column at most */
  .results dt { font-size: 0.9rem; }
  .results .stat { gap: 0.5rem; padding-top: 1rem; }
}
/* How we build: four phases on a rail. Each phase names what AI does and the guardrail
   that keeps it trustworthy. Vertical timeline on small screens, four across on wide ones. */
.process {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
.process h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--shadow);
}
.process .lede {
  margin: 0 0 1.5rem;
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}
.process-status {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.process-status .led {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--shadow);
  box-shadow: 0 0 10px 2px rgba(227, 37, 63, 0.45);
}
.process-status .sep { opacity: 0.4; }
.process-status .ai-key { color: var(--shadow); }
.process-status .guard-key { color: var(--ink); }
@media (max-width: 39.99rem) { .process-status .sep { display: none; } }

.phases {
  --gap: 1.5rem;     /* space between phases */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
}
.phase {
  position: relative;
  display: grid;
  gap: 0.9rem;
}
.phase-head { display: grid; gap: 0.3rem; }
.phase h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
}
.phase .ai {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}
.guard {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.guard-tag {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.guard-tag .shield { flex: none; fill: var(--ink); }
.guard-tag .tick { fill: none; stroke: var(--card); stroke-width: 1.8; }
.guard strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
}
.guard p {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 2px dashed currentColor;
  font-size: 0.9rem;
  line-height: 1.5;
}

.boost {
  display: grid;
  gap: 0.4rem;
  padding: 0.8rem 1rem 0.9rem;
  background: var(--hot);
  border: 2px solid var(--hot);
  color: #fff;
}
.boost-tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.boost p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.outcome {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  color: var(--hot);
}
.outcome-box {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--hot);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.25;
}
.outcome-tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Tablet: still a vertical rail, but the AI line sits left and the guardrail right */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .phase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: auto auto 1fr; /* the head row hugs its content, so the AI line sits right under it */
    grid-template-areas: "head guard" "ai guard" "boost guard";
    column-gap: 2rem;
    align-items: start;
  }
  .phase-head { grid-area: head; }
  .phase .ai { grid-area: ai; }
  .guard { grid-area: guard; }
  .boost { grid-area: boost; }
}

/* Desktop: four columns */
@media (min-width: 60rem) {
  .phases { --gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
  /* Subgrid: every phase shares the same four rows, so the guardrail and AI boxes line up and match in height */
  .phase {
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0.75rem;
  }
  .phase h3 { font-size: 1.05rem; }
  .phase .ai { font-size: 0.88rem; }
  .guard { padding: 0.8rem 0.85rem 0.9rem; }
  .guard strong { font-size: 0.88rem; }
  .guard p { font-size: 0.84rem; }
  .boost { padding: 0.7rem 0.85rem 0.8rem; }
  .boost p { font-size: 0.84rem; }
}

.process-note { margin-top: clamp(2rem, 4vw, 3rem); max-width: 72ch; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
footer.page-foot {
  padding: 0;
  text-align: left;
  background: var(--band);
  color: var(--band-ink);
  font-size: 1rem;
}
footer.page-foot .inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) 1.25rem clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56rem) {
  footer.page-foot .inner { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
}
footer.page-foot h2 {
  margin: 0 0 1.75rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--band-hot);
}
.cities { list-style: none; margin: 0; padding: 0; }
.cities li {
  display: grid;
  grid-template-columns: 0.75rem 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  padding: 1rem 0;
  border-top: 2px dashed var(--band-ink);
}
.cities li:last-child { border-bottom: 2px dashed var(--band-ink); }
.cities .pin {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--band-hot);
  align-self: center;
}
.cities .city {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}
.cities .country {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  opacity: 0.75;
  margin-left: 0.5rem;
}
.cities .clock {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
footer.page-foot h3 {
  margin: 2.25rem 0 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.2;
}
.langs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.langs li {
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--band-ink);
  font-size: 1rem;
  line-height: 1.2;
}
.eu {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 2px dashed var(--band-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
}
.eu li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
}
.eu svg { flex: none; color: var(--band-hot); }
.theme-switch {
  margin-top: 1.75rem;
  display: inline-flex;
  border: 2px solid var(--band-ink);
}
.theme-switch button {
  min-width: 5rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 0;
  background: transparent;
  color: var(--band-ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
}
.theme-switch button + button { border-left: 2px solid var(--band-ink); }
.theme-switch button:hover { color: #fff; }
.theme-switch button[aria-pressed="true"] { background: var(--band-ink); color: #141C33; }
.theme-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.theme-switch.small { margin-top: 1.5rem; }
.theme-switch.small button {
  min-width: 3.75rem;
  min-height: 2rem;
  padding: 0 0.8rem;
  font-size: 0.7rem;
}
.theme-switch.on-ground { border-color: var(--ink); background: var(--ground); }
.theme-switch.on-ground button { color: var(--ink); }
.theme-switch.on-ground button + button { border-left-color: var(--ink); }
.theme-switch.on-ground button:hover { color: var(--shadow); }
.theme-switch.on-ground button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.theme-switch.on-ground button:focus-visible { outline-color: var(--ink); }
footer.page-foot .meta {
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}
footer.page-foot a {
  padding-left: 0;
  color: var(--band-ink);
  text-decoration-color: var(--band-hot);
}
footer.page-foot a:focus-visible { outline-color: var(--band-ink); }
footer.page-foot small { font-size: 0.9rem; opacity: 0.75; }

.map { width: 100%; max-width: 30rem; height: auto; justify-self: center; display: block; }
@media (max-width: 39.99rem) { .map { display: none; } } /* phones: the city list above already carries the information */
.map .grid-dot { fill: var(--band-ink); opacity: 0.22; }
.map .route { fill: none; stroke: var(--band-ink); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.7; }
.map .dot { fill: var(--band-hot); }
.map .ring { fill: none; stroke: var(--band-hot); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map text { fill: var(--band-ink); font-family: var(--display); font-weight: 500; font-size: 13px; }
.map .flag { outline: none; filter: drop-shadow(0 0 0.5px rgba(211, 230, 243, 0.6)); }
@media (prefers-reduced-motion: no-preference) {
  .map .ring { animation: ping 3.2s ease-out infinite; }
  .map .c2 .ring { animation-delay: 0.8s; }
  .map .c3 .ring { animation-delay: 1.6s; }
  .map .c4 .ring { animation-delay: 2.4s; }
  @keyframes ping {
    0% { transform: scale(1); opacity: 0.9; }
    70%, 100% { transform: scale(4.5); opacity: 0; }
  }
}

/* End-of-page CTA modal: panel opens like a display, text is decoded and typed live */
.cta-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.cta-modal[hidden] { display: none; }
.cta-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 32, 0.74);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cta-modal.open .cta-backdrop { opacity: 1; }
.cta-modal.closing .cta-backdrop { opacity: 0; }
.cta-box { position: relative; width: min(39rem, 100%); }
.cta-box.built { box-shadow: 8px 8px 0 #E3253F; }
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(2.75rem, 5vw, 3rem);
  border: 2px solid #D3E6F3;
  background-color: #141C33;
  background-image:
    linear-gradient(rgba(211, 230, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 230, 243, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #D3E6F3;
  clip-path: inset(49.6% 50% 49.6% 50%);
}
.cta-modal.open .cta-panel { animation: cta-open 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cta-modal.closing .cta-panel { animation: cta-close 0.32s ease-in forwards; }
@keyframes cta-open {
  0% { clip-path: inset(49.6% 50% 49.6% 50%); }
  45% { clip-path: inset(49.6% 0 49.6% 0); }
  100% { clip-path: inset(0); }
}
@keyframes cta-close {
  0% { clip-path: inset(0); }
  60% { clip-path: inset(49.6% 0 49.6% 0); }
  100% { clip-path: inset(49.6% 50% 49.6% 50%); }
}
.cta-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid #FF5A70;
  opacity: 0;
}
.cta-corner.tl { top: -9px; left: -9px; border-top-width: 3px; border-left-width: 3px; }
.cta-corner.tr { top: -9px; right: -9px; border-top-width: 3px; border-right-width: 3px; }
.cta-corner.bl { bottom: -9px; left: -9px; border-bottom-width: 3px; border-left-width: 3px; }
.cta-corner.br { bottom: -17px; right: -17px; border-bottom-width: 3px; border-right-width: 3px; }
.cta-box.built .cta-corner { animation: cta-blink 0.5s steps(1) forwards; }
@keyframes cta-blink { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } }
.cta-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: #FF5A70;
  box-shadow: 0 0 18px 4px rgba(255, 90, 112, 0.55);
  opacity: 0;
  pointer-events: none;
}
.cta-scan.run { animation: cta-scan 0.85s linear forwards; }
@keyframes cta-scan {
  0% { top: 0; opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.cta-status {
  margin: 0 0 1.25rem;
  min-height: 1.3em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #FF5A70;
  white-space: nowrap;
  overflow: hidden;
}
.cta-panel h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.2vw, 2.2rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: #fff;
}
.cta-text {
  position: relative;
  margin: 0 0 1.75rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
}
.cta-word { white-space: nowrap; }
.cta-char { opacity: 0; }
.cta-panel h2 .cta-char { display: inline-block; text-align: center; }
.cta-char.show { opacity: 1; }
.cta-char.scr { color: #FF5A70; }
.cta-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 0.55em;
  height: 1.15em;
  background: #FF5A70;
  opacity: 0;
  pointer-events: none;
}
.cta-cursor.on { opacity: 1; animation: cta-cursor 0.9s steps(1) infinite; }
@keyframes cta-cursor { 50% { opacity: 0; } }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cta-actions > a {
  clip-path: inset(0 100% -10px 0);
  transition: clip-path 0.36s steps(7), transform 0.12s ease, box-shadow 0.12s ease;
}
.cta-actions > a.show { clip-path: inset(0 -10px -10px 0); }
.cta-panel .book-btn { border-color: #D3E6F3; box-shadow: 6px 6px 0 #D3E6F3; }
.cta-panel .book-btn:hover, .cta-panel .book-btn:focus-visible { box-shadow: 3px 3px 0 #D3E6F3; }
.cta-panel .book-btn:focus-visible { outline-color: #fff; }
.cta-mail {
  display: inline-block;
  padding: 1rem 1.25rem;
  border: 2px solid #D3E6F3;
  color: #D3E6F3;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}
.cta-mail:hover { background: #D3E6F3; color: #141C33; }
.cta-mail:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cta-close {
  position: absolute;
  top: 0; right: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #D3E6F3;
  cursor: pointer;
}
.cta-close:hover { color: #fff; }
.cta-close:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .cta-modal.open .cta-panel, .cta-modal.closing .cta-panel { animation: none; clip-path: none; }
  .cta-box.built .cta-corner { animation: none; opacity: 1; }
  .cta-actions > a { transition: none; }
  .cta-cursor.on { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .fx-on .tag, .fx-on .slogan, .fx-on .center .theme-switch, .fx-on .hero-foot {
    opacity: 0;
    animation: settle 0.9s ease-out forwards;
  }
  .fx-on .tag { animation-delay: 1.3s; }
  .fx-on .slogan { animation-delay: 1.55s; }
  .fx-on .center .theme-switch { animation-delay: 1.75s; }
  .fx-on .hero-foot { animation-delay: 1.9s; }
  @keyframes settle { to { opacity: 1; } }
}

/* Team photos: square portrait above the name, placeholder until main.js finds a file */
.team .photo {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  object-position: 50% 20%; /* keep faces in frame when a photo is portrait-shaped */
  border: 2px solid var(--ink);
  background: var(--ground);
}
.team li.lead .photo { border-color: #fff; }
.team .photo.is-placeholder { filter: grayscale(1); opacity: 0.85; }

/* AI agent cookie consent: a small console panel that slides up from the corner */
.agent-consent {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: min(27rem, calc(100vw - 2.5rem));
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.agent-consent[hidden] { display: none; }
.agent-consent.open { transform: none; }
.agent-consent.leaving { transform: translateY(calc(100% + 2rem)); transition-duration: 0.35s; }
.agent-panel {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 2px solid #D3E6F3;
  box-shadow: 8px 8px 0 #E3253F;
  background-color: #141C33;
  background-image:
    linear-gradient(rgba(211, 230, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 230, 243, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #D3E6F3;
  font-family: var(--body);
}
.agent-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: #FF5A70;
  box-shadow: 0 0 18px 4px rgba(255, 90, 112, 0.55);
  opacity: 0;
  pointer-events: none;
}
.agent-consent.open .agent-scan { animation: cta-scan 0.85s linear 0.3s forwards; }
.agent-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #9DB9CF;
  white-space: nowrap;
}
.agent-status { margin-left: auto; color: #FF5A70; overflow: hidden; text-overflow: ellipsis; }
.agent-orb {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFD3DA 0, #FF5A70 35%, #C4142F 70%, #7A0A1D 100%);
  box-shadow: 0 0 0 0 rgba(255, 90, 112, 0.55), 0 0 14px 2px rgba(255, 90, 112, 0.5);
  animation: agent-pulse 2.2s ease-out infinite;
}
@keyframes agent-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 112, 0.55), 0 0 14px 2px rgba(255, 90, 112, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255, 90, 112, 0), 0 0 14px 2px rgba(255, 90, 112, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 112, 0), 0 0 14px 2px rgba(255, 90, 112, 0.5); }
}
.agent-consent.thinking .agent-orb { animation-duration: 0.7s; }
.agent-line {
  margin: 0 0 0.75rem;
  min-height: 2.6em;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #fff;
}
.agent-prompt { color: #FF5A70; margin-right: 0.4em; }
.agent-typed .scr { color: #FF5A70; }
.agent-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: #FF5A70;
  opacity: 0;
}
.agent-cursor.on { opacity: 1; animation: cta-cursor 0.9s steps(1) infinite; }
.agent-text {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #D3E6F3;
}
.agent-scopes {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px dashed rgba(211, 230, 243, 0.45);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
}
.agent-scopes li { display: flex; align-items: center; gap: 0.5rem; }
.agent-scopes small { color: #9DB9CF; font-size: inherit; }
.agent-bit {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid #D3E6F3;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.agent-bit.on { background: #FF5A70; border-color: #FF5A70; }
.agent-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.agent-actions.pending { opacity: 0; transform: translateY(6px); pointer-events: none; }
.agent-actions { transition: opacity 0.3s ease, transform 0.3s ease; }
.agent-btn {
  padding: 0.75rem 1.1rem;
  border: 2px solid #D3E6F3;
  background: transparent;
  color: #D3E6F3;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.agent-btn.primary { background: var(--hot); color: #fff; box-shadow: 4px 4px 0 #D3E6F3; }
.agent-btn.primary:hover, .agent-btn.primary:focus-visible { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #D3E6F3; }
.agent-btn:not(.primary):hover, .agent-btn:not(.primary):focus-visible { background: #D3E6F3; color: #141C33; }
.agent-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.consent-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-link:hover { color: var(--band-hot); }
@media (max-width: 39.99rem) {
  .agent-consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; }
  .agent-panel { box-shadow: 5px 5px 0 #E3253F; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-consent, .agent-actions, .agent-bit { transition: none; }
  .agent-orb, .agent-cursor.on, .agent-consent.open .agent-scan { animation: none; }
  .agent-consent.open .agent-scan { opacity: 0; }
}

/* ===== Main navigation (every page) =====
   Sticky bar under the ticker. Wide screens: brand left, links and the booking button right.
   Narrow screens: the links fold into a dropdown opened by the toggle (nav.js). */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground);
  border-bottom: 2px solid var(--ink);
}
html.has-ticker .site-nav { top: var(--bar); margin-top: var(--bar); }
/* On the home page the hero fills whatever is left of the screen below the bars */
.site-nav ~ main:not(.page) {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}
html.has-ticker .site-nav ~ main:not(.page) {
  min-height: calc(100vh - var(--nav-h) - var(--bar));
  min-height: calc(100svh - var(--nav-h) - var(--bar));
}
.nav-inner {
  position: relative;
  max-width: 84rem;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* menu stays on the right even when the brand is left out (home page) */
  gap: 1.5rem;
}
.nav-brand {
  margin-right: auto;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shadow);
}
.nav-brand:focus-visible, .nav-menu a:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav-menu { display: flex; align-items: center; gap: 1.75rem; }
.nav-menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; }
.nav-menu li a {
  display: inline-block;
  padding: 0.5rem 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-menu li a:hover { border-bottom-color: var(--ink); }
.nav-menu li a[aria-current="page"] { border-bottom-color: var(--shadow); }
.nav-cta {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--hot);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.nav-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-cta { transition: none; } }

@media (max-width: 51.99rem) {
  .site-nav.has-js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-bars, .nav-bars::before, .nav-bars::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
  }
  .nav-bars { position: relative; }
  .nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
  .nav-bars::before { top: -7px; }
  .nav-bars::after { top: 7px; }
  .site-nav.is-open .nav-bars { background: transparent; }
  .site-nav.is-open .nav-bars::before { top: 0; transform: rotate(45deg); }
  .site-nav.is-open .nav-bars::after { top: 0; transform: rotate(-45deg); }

  .site-nav.has-js .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
    background: var(--ground);
    border-bottom: 2px solid var(--ink);
    max-height: calc(100vh - var(--nav-h) - var(--bar));
    max-height: calc(100svh - var(--nav-h) - var(--bar));
    overflow-y: auto;
  }
  .site-nav.has-js.is-open .nav-menu { display: flex; }
  .site-nav.has-js .nav-menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.has-js .nav-menu li + li { border-top: 2px dashed var(--ink); }
  .site-nav.has-js .nav-menu li a { display: block; padding: 1rem 0; font-size: 1rem; border-bottom: 0; }
  .site-nav.has-js .nav-menu li a[aria-current="page"] { color: var(--shadow); }
  .site-nav.has-js .nav-cta { margin-top: 1rem; text-align: center; padding: 0.9rem 1.1rem; font-size: 0.95rem; }
  /* No JavaScript: keep everything visible, wrapped under the brand */
  .site-nav:not(.has-js) .nav-inner { height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding-block: 0.75rem; }
  .site-nav:not(.has-js) .nav-menu, .site-nav:not(.has-js) .nav-menu ul { flex-wrap: wrap; gap: 0.25rem 1.25rem; }
}

/* ===== Subpages =====
   main.page is the content column of every page except the home page: no hero, no canvases. */
main.page {
  display: block;
  min-height: 0;
  overflow: visible;
  cursor: auto;
  padding-top: 0;
}
.page-head {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) 1.25rem clamp(1.5rem, 3vw, 2.5rem);
}
.page-head h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--shadow);
  user-select: auto;
  overflow-wrap: anywhere;
}
.page-head .lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}
.tiles {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
.tiles > h2, .sub-band h2 {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--shadow);
}
.tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 40rem) { .tile-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .tile-list { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.tile h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
}
.tile > p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.tile.lead { background: var(--hot); color: #fff; box-shadow: 6px 6px 0 var(--ink); }
.tile:target { outline: 3px solid var(--ink); outline-offset: 4px; }
.tile-links {
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  border-top: 2px dashed currentColor;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
  list-style: none;
}
.tile-links .label {
  flex-basis: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.tile-links a {
  padding: 0.25rem 0.6rem;
  color: inherit;
  border: 2px solid currentColor;
  text-decoration: none;
  font-weight: 500;
}
.tile-links a:hover, .tile-links a:focus-visible { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.tile.lead .tile-links a:hover, .tile.lead .tile-links a:focus-visible { background: #fff; color: var(--hot); border-color: #fff; }
.tile-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tile.lead .tile-links a:focus-visible { outline-color: #fff; }

/* Dark full-width band for secondary content (locations, languages, closing call to action) */
.sub-band { background: var(--band); color: var(--band-ink); }
.sub-band .inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.25rem;
}
.sub-band h2 { color: var(--band-hot); }
.sub-band .lede { margin: 0 0 1.75rem; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.5; }
.sub-band .book-btn { border-color: var(--band-ink); box-shadow: 6px 6px 0 var(--band-ink); }
.sub-band .book-btn:hover, .sub-band .book-btn:focus-visible { box-shadow: 3px 3px 0 var(--band-ink); }
.sub-band .book-btn:focus-visible { outline-color: var(--band-ink); }
.sub-band .mail { margin: 1.5rem 0 0; font-size: 1rem; }
.sub-band .mail a { color: var(--band-ink); text-decoration-color: var(--band-hot); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.sub-band .cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 56rem) { .sub-band .cols { grid-template-columns: 1.15fr 1fr; gap: 4rem; } }
.sub-band h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.2;
}
.sub-band .foot-note { margin-top: 1.5rem; }
.sub-band .langs + h3 { margin-top: 2.25rem; }
.sub-band .eu { margin-top: 0; }

/* Process page: drop the section's own top padding, the page head already supplies it */
.page .process { padding-top: clamp(1rem, 3vw, 2rem); }
.page .brands { padding-top: clamp(1rem, 3vw, 2rem); }

/* Footer used on subpages */
.site-foot {
  background: var(--band);
  color: var(--band-ink);
  border-top: 2px dashed var(--band-ink);
  font-size: 1rem;
}
.site-foot .inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
  display: grid;
  gap: 1.75rem;
}
.site-foot ul.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.site-foot ul.foot-links a {
  color: var(--band-ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: var(--band-hot);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.site-foot a:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 3px; }
.site-foot .meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.site-foot small { font-size: 0.9rem; opacity: 0.75; }
.site-foot .theme-switch { margin-top: 0; justify-self: start; }

/* "Included in delivery" list on the solutions tiles */
.tile-included {
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  border-top: 2px dashed currentColor;
}
.tile-included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.tile-included li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.93rem;
  line-height: 1.4;
}
.tile-included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--shadow);
}
.tile.lead .tile-included li::before { background: #fff; }

/* AI starter packages: heading intro and delivery/price rows */
.ai-start { padding-top: 0; }
.ai-start .section-lede { margin: -1rem 0 1.75rem; max-width: 46ch; font-size: 1.05rem; line-height: 1.5; }
.tile.has-badge { position: relative; }
.tile-badge {
  position: absolute;
  top: -0.8rem;
  right: 1rem;
  padding: 0.2rem 0.65rem;
  background: var(--hot);
  color: #fff;
  border: 2px solid var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tile.lead .tile-badge { background: #fff; color: var(--hot); }
.why-data {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.why-data h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.25;
}
.why-data p { margin: 0; font-size: 1rem; line-height: 1.55; }
.why-intro { max-width: 62ch; }
.why-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
}
@media (min-width: 40rem) { .why-list { grid-template-columns: repeat(2, 1fr); } }
.why-list li { padding-top: 0.9rem; border-top: 2px dashed currentColor; }
.why-list h4 { margin: 0 0 0.35rem; font-family: var(--display); font-weight: 500; font-size: 1rem; line-height: 1.3; }
.why-list p { font-size: 0.95rem; }
.why-close { max-width: 62ch; font-weight: 500; }
.why-more { margin-top: 1rem; }
.why-more summary {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 2px solid currentColor;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.why-more summary::-webkit-details-marker { display: none; }
.why-more summary::after { content: " +"; }
.why-more[open] summary::after { content: " \2212"; }
.why-more summary:hover, .why-more summary:focus-visible { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.why-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.why-more .more-close, .why-more[open] .more-open { display: none; }
.why-more[open] .more-close { display: inline; }
.tile-price {
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 2px dashed currentColor;
  display: grid;
  gap: 0.35rem;
}
.tile-price div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tile-price dt {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.tile-price dd { margin: 0; font-weight: 500; }
.tile-price div:last-child dd { font-family: var(--display); font-size: 1.3rem; }

/* Contact page: the booking heading sits under the page title, so it is a step smaller */
main.page .cards.book h2 { font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.1; }

/* "Read more" links at the end of each home page section, pointing to the matching subpage */
.read-more-wrap { margin: 2rem 0 0; }
.cards .read-more-wrap { margin: 2rem 0 0; padding: 0; border: 0; } /* beats the generic .cards p rule */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.read-more::after { /* pixel arrow pointing right */
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.read-more:hover, .read-more:focus-visible { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.read-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* on the dark Results band */
.results .read-more { color: var(--band-ink); border-color: var(--band-ink); box-shadow: 4px 4px 0 var(--band-hot); }
.results .read-more:hover, .results .read-more:focus-visible { box-shadow: 2px 2px 0 var(--band-hot); }
.results .read-more:focus-visible { outline-color: var(--band-ink); }
@media (prefers-reduced-motion: reduce) { .read-more { transition: none; } }

/* ===== Kanban illustration (How we build) =====
   One ticket moves across a seven-column board; AI works each stage, a person verifies it. See kanban.js. */
.kanban { --card-h: 9.75rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.kanban:not(.is-ready) .kb-frame, .kanban:not(.is-ready) .kb-scroll, .kanban:not(.is-ready) .kb-info, .kanban:not(.is-ready) .kb-controls { display: none; }
.kb-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.kb-title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  line-height: 1.2;
}
.kb-lede { margin: 0; max-width: 62ch; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.kb-controls { display: flex; gap: 0.75rem; }
.kb-btn {
  padding: 0.6rem 1.1rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kb-btn:hover, .kb-btn:focus-visible { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.kb-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.kb-scroll { overflow-x: auto; padding: 0.25rem 0.5rem 1rem 0.25rem; margin: 0 -0.5rem 0 -0.25rem; scrollbar-width: thin; }
.kb-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  min-width: calc(7 * 8.5rem + 6 * 0.75rem);
  align-items: start;
}
.kb-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 19rem;
  padding: 0.5rem;
  background: var(--card);
  border: 2px solid var(--ink);
}
.kb-col h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px dashed var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kb-count {
  min-width: 1.3rem;
  padding: 0 0.3rem;
  text-align: center;
  border: 2px solid var(--ink);
  font-size: 0.62rem;
  line-height: 1.3;
}
.kb-col.is-current h4 { color: var(--hot); }
.kb-col.is-current { box-shadow: 4px 4px 0 var(--hot); }
.kb-slot { height: var(--card-h); border: 2px dashed var(--muted); opacity: 0.45; }
.kb-ghost {
  height: 2.6rem;
  border: 2px solid var(--ink);
  opacity: 0.22;
  background:
    linear-gradient(var(--ink), var(--ink)) 0.4rem 0.45rem / 70% 0.25rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0.4rem 1.2rem / 45% 0.25rem no-repeat;
}

.kb-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--slot-w, 7.5rem);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.55rem;
  background: var(--ground);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.25s ease;
}
.kb-card.no-move { transition: none; }
.kb-card.is-hidden { opacity: 0; }
.kb-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.64rem; letter-spacing: 0.06em; color: var(--muted); }
.kb-name { font-family: var(--display); font-weight: 500; font-size: 0.8rem; line-height: 1.25; }
.kb-chip {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border: 2px solid var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.kb-chip.new { background: transparent; color: var(--ink); }
.kb-chip.ai { background: var(--hot); border-color: var(--hot); color: #fff; }
.kb-chip.wait { background: var(--ink); color: var(--ground); }
.kb-chip.ok { background: transparent; color: var(--ink); }
.kb-chip.ai::after { content: ""; animation: kb-dots 1s steps(1) infinite; }
@keyframes kb-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.kb-seg { display: flex; gap: 0.2rem; margin-top: auto; }
.kb-seg i { flex: 1; height: 0.65rem; border: 2px solid var(--ink); opacity: 0.35; }
.kb-seg i.done { background: var(--ink); opacity: 1; }
.kb-seg i.cur { background: var(--hot); border-color: var(--hot); opacity: 1; }

.kb-info { margin-top: 0.5rem; }
.kb-stage {
  margin: 0 0 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kb-panels { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .kb-panels { grid-template-columns: 1fr 1fr; } }
.kb-ai, .kb-human {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-height: 6.5rem;
  padding: 0.9rem 1rem 1rem;
  transition: opacity 0.25s ease;
}
.kb-ai { background: var(--hot); color: #fff; border: 2px solid var(--hot); }
.kb-human { background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.kb-ai.is-dim, .kb-human.is-dim { opacity: 0.45; }
.kb-tag { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.kb-human .kb-tag { color: var(--muted); }
.kb-ai p, .kb-human p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .kb-card, .kb-ai, .kb-human, .kb-btn { transition: none; }
  .kb-chip.ai::after { animation: none; content: "..."; }
}

/* Architectural guardrails: a frame around the whole ticket flow */
.kb-frame {
  position: relative;
  margin-top: 1.5rem;
  padding: 1.9rem 1rem 1rem;
  border: 2px solid var(--hot);
}
@media (min-width: 48rem) { .kb-frame { padding: 2.1rem 1.25rem 1.25rem; } }
.kb-frame-tag {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  background: var(--hot);
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.kb-shield { flex: none; fill: #fff; }
.kb-shield .tick { fill: none; stroke: var(--hot); stroke-width: 1.8; }
.kb-frame-text { margin: 0 0 1rem; max-width: 70ch; font-size: 0.95rem; line-height: 1.5; }

/* Mobile: the four steps scroll sideways, one per screen with a peek of the next.
   Subgrid keeps the heading, text, guardrail and AI boxes lined up across steps. */
@media (max-width: 47.99rem) {
  .phases {
    --gutter: 1.25rem;
    grid-template-rows: auto auto auto auto;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 0 1rem;
    min-width: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .phases::-webkit-scrollbar { display: none; }
  .phase {
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0.75rem;
    scroll-snap-align: start;
  }
  .guard { box-shadow: 4px 4px 0 var(--ink); }
}

/* Cost estimate: two running totals that grow as the ticket moves forward */
.kb-costs { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .kb-costs { grid-template-columns: 1fr 1fr; } }
.kb-cost {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.4s ease, border-color 0.4s ease;
}
/* Whichever total is cheaper right now is green; the dearer one (and equal totals) keep the neutral style */
.kb-cost.is-cheaper { background: #15803D; border-color: #15803D; color: #fff; box-shadow: none; }
.kb-cost.is-cheaper .kb-tag { color: #fff; }
.kb-cost .kb-tag { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .kb-cost { transition: none; } }
.kb-amt {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 4.5vw, 2.9rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kb-bar { display: block; height: 0.6rem; border: 2px solid currentColor; }
.kb-bar i { display: block; height: 100%; width: 0; background: currentColor; }
.kb-save {
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--hot);
  font-variant-numeric: tabular-nums;
}
.kb-costnote { margin: 0.4rem 0 1.25rem; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }

/* Showcase: a social-feed / moodboard of project posts (masonry columns) */
.feed {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 1;
  column-gap: 1.5rem;
}
@media (min-width: 40rem) { .feed-list { column-count: 2; } }
@media (min-width: 62rem) { .feed-list { column-count: 3; } }
.post {
  break-inside: avoid;
  margin: 0 0 1.75rem;
  padding: 0.5rem;
}
.post article {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  transition: transform 0.15s ease;
}
.post:nth-child(3n+1) article { box-shadow: 6px 6px 0 var(--hot); }
.post:nth-child(3n+2) article { box-shadow: 6px 6px 0 var(--ink); }
@media (min-width: 40rem) and (prefers-reduced-motion: no-preference) {
  .post:nth-child(4n+1) article { transform: rotate(-0.6deg); }
  .post:nth-child(4n+3) article { transform: rotate(0.6deg); }
  .post article:hover { transform: rotate(0) translateY(-3px); }
}
.post-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; }
.post-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--hot);
  color: #fff;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
}
.post-who { display: grid; line-height: 1.25; }
.post-who small {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.post img { display: block; width: 100%; height: auto; border-block: 2px solid var(--ink); background: var(--ground); }
.post-body { padding: 0.9rem 1rem 1.1rem; }
.post-body h2 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.post-body p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* Showcase on phones: one post at a time, snapping into place like a short-video feed */
@media (max-width: 39.99rem) {
  html:has(.feed-list) { scroll-snap-type: y proximity; }
  .feed { padding-inline: 0; padding-top: 0.5rem; }
  .feed-list { column-count: 1; }
  .post {
    margin: 0 0 1.25rem;
    padding: 0 0.75rem;
    scroll-snap-align: start;
    scroll-margin-top: calc(var(--nav-h) + 0.5rem);
  }
  .post img { max-height: 62svh; object-fit: cover; }
  .post-head { padding: 0.55rem 0.8rem; }
  .post-body { padding: 0.7rem 0.9rem 0.9rem; }
}
@media (max-width: 39.99rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .post article {
      animation: post-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
  @keyframes post-in { from { opacity: 0.2; transform: translateY(2.5rem) scale(0.96); } to { opacity: 1; transform: none; } }
}

/* Showcase: heart and thumbs-up row under each image */
.post-actions { display: flex; gap: 0.5rem; padding: 0.6rem 0.8rem 0; }
.react {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.react svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.react:hover, .react:focus-visible { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.react:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.react[aria-pressed="true"] { background: var(--hot); color: #fff; border-color: var(--hot); }
.react[aria-pressed="true"] svg { fill: currentColor; }
.post-actions + .post-body { padding-top: 0.6rem; }
.react-heart { --react: #E3253F; }
.react-thumb { --react: #1D6FE0; }
.react svg { color: var(--react); }
.react:hover, .react:focus-visible { background: transparent; color: inherit; border-color: var(--react); }
.react:focus-visible { outline-color: var(--react); }
.react[aria-pressed="true"] { background: var(--react); color: #fff; border-color: var(--react); }
.react[aria-pressed="true"] svg { color: #fff; fill: currentColor; }

/* Showcase: service labels at the bottom of each post */
.post-tags { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.post-tags li {
  padding: 0.15rem 0.5rem;
  border: 1.5px solid currentColor;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}