/* By Damian — the client's mini-website (engine: assets/js/client-site.js).
   Shared by the AI agent (#agent, built live) and Proof (#proof, conceptual examples).
   It is THEIR site, in their palette: the --c-* variables are set on an ancestor by
   client-kit.js (applyPalette). Inner sizes are in cqw (1% of the site's width), so one
   design scales; under 440px wide it switches to its phone layout.

   .cs.is-started / .is-done: the site has begun / is finished.
   .cs__slot.is-on: a piece is built (empty slots show my blueprint: yellow dashed outline + tag).
   .cs.no-anim: no transitions (restored state, reduced motion). */

/* The site scales from its width: inner sizes are in cqw (1% of the site's width). */
.cs-wrap {
  container: cs / inline-size;
  width: 100%;
  margin: 0 auto;
}
.cs {
  --bar-h: 4.6cqw;
  position: relative;
  aspect-ratio: 16 / 10.4;
  border-radius: 1.6cqw;
  background: var(--c-page);
  color: var(--c-ink);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(237, 235, 230, 0.08);
  transition: box-shadow 0.9s var(--ease), transform 0.9s var(--ease), background-color 0.8s var(--ease), color 0.8s var(--ease);
}
/* Empty: it's my blueprint — faint grid on graphite, with the hint. */
.cs:not(.is-started) { background: #262625; box-shadow: 0 0 0 1px rgba(138, 138, 133, 0.28); }
.cs::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(138, 138, 133, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 138, 133, 0.12) 1px, transparent 1px);
  background-size: 3.2cqw 3.2cqw;
  background-position: center;
  transition: opacity 0.8s var(--ease);
}
.cs.is-started::before { opacity: 0; }
.cs.is-done {
  box-shadow:
    0 4cqw 8cqw -3cqw rgba(0, 0, 0, 0.55),
    0 1.4cqw 3cqw -1.4cqw rgba(0, 0, 0, 0.4);
  transform: translateY(-0.4cqw);
}
.cs__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4cqw;
  margin: 0;
  color: var(--muted);
  font-size: max(12px, 1.5cqw);
  text-align: center;
  transition: opacity 0.4s var(--ease);
}
.cs.is-started .cs__hint { opacity: 0; }

/* Browser bar */
.cs__bar {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  height: var(--bar-h);
  padding: 0 1.6cqw;
  background: var(--c-bar);
  transition: background-color 0.8s var(--ease);
}
.cs:not(.is-started) .cs__bar { background: rgba(138, 138, 133, 0.14); }
.cs__dots { display: flex; gap: 0.7cqw; }
.cs__dots i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--c-line); }
.cs:not(.is-started) .cs__dots i { background: rgba(138, 138, 133, 0.4); }
.cs__url {
  flex: 1;
  max-width: 46%;
  margin: 0 auto;
  padding: 0.5cqw 1.4cqw;
  border-radius: 0.8cqw;
  background: var(--c-page);
  color: var(--c-soft);
  font-size: 1.2cqw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.8s var(--ease);
}
.cs:not(.is-started) .cs__url { background: rgba(138, 138, 133, 0.14); color: var(--muted); }

.cs__page {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 2.4cqw;
  height: calc(100% - var(--bar-h));
  padding: 2.2cqw 3.6cqw 3.2cqw;
}

/* ---------- Slots: blueprint outline when empty, the real piece when built ---------- */
.cs__slot {
  position: relative;
  border-radius: 1.2cqw;
  outline: 1.5px dashed rgba(255, 195, 0, 0.55);
  outline-offset: 0.5cqw;
  transition: outline-color 0.6s var(--ease);
}
.cs__slot::after { /* tiny blueprint tag: NAV, HERO, CTA... */
  content: attr(data-tag);
  position: absolute;
  left: 0.2cqw;
  top: -0.2cqw;
  translate: 0 -100%;
  padding: 0.2cqw 0.6cqw;
  border-radius: 0.4cqw;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 max(9px, 0.95cqw) / 1.2 var(--font-body);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}
.cs__slot.is-on { outline-color: transparent; }
.cs__slot.is-on::after { opacity: 0; }
.cs__slot > * {
  opacity: 0;
  transform: translateY(1.2cqw);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.cs__slot.is-on > * { opacity: 1; transform: none; }
.cs__slot.is-on > :nth-child(2) { transition-delay: 0.08s; }
.cs__slot.is-on > :nth-child(3) { transition-delay: 0.16s; }
.cs__slot.is-on > :nth-child(4) { transition-delay: 0.24s; }
/* Restored after a reload, or reduced motion: no transitions. */
.cs.no-anim,
.cs.no-anim::before,
.cs.no-anim *,
.cs.no-anim *::after { transition: none !important; }

/* Nav */
.cs__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  min-height: 4.4cqw;
}
.cs__brand {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  min-width: 0;
  font-weight: 700;
  font-size: calc(1.9cqw * var(--nfit, 1));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cs__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 1cqw;
  background: var(--c-primary);
  color: var(--c-on);
  font-size: 1.8cqw;
  font-weight: 700;
  transition: background-color 0.8s var(--ease);
}
.cs__name { overflow: hidden; text-overflow: ellipsis; }
.cs__links { display: flex; gap: 1cqw; color: var(--c-soft); font-size: 1.35cqw; white-space: nowrap; }
.cs__links b { font-weight: 400; color: var(--c-line); }
.cs__burger { display: none; }

/* Hero: copy + buttons on the left, illustration on the right. */
.cs__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 4cqw;
  row-gap: 2.2cqw;
  align-items: start;
}
.cs__copy { grid-column: 1; grid-row: 1; display: grid; gap: 1.2cqw; justify-items: start; min-height: 15cqw; }
.cs__ctas { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 1.2cqw; min-height: 4.6cqw; }
.cs__img { grid-column: 2; grid-row: 1 / span 2; }

.cs__city {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.5cqw 1.2cqw 0.5cqw 0.9cqw;
  border-radius: 99px;
  background: var(--c-tint);
  color: var(--c-ink);
  font-size: 1.25cqw;
  font-weight: 600;
  transition: background-color 0.8s var(--ease);
}
.cs__city[hidden] { display: none; }
.cs__pin { display: grid; width: 1.5cqw; color: var(--c-primary); }
.cs__pin svg { width: 100%; height: auto; }
.cs__h {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(3.5cqw * var(--nfit, 1));
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cs__sub { margin: 0; color: var(--c-soft); font-size: 1.55cqw; line-height: 1.4; }

.cs__btn {
  display: inline-flex;
  align-items: center;
  padding: 1.1cqw 2cqw;
  border-radius: 99px;
  background: var(--c-primary);
  color: var(--c-on);
  font-size: 1.4cqw;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1.2cqw 2.4cqw -1.4cqw var(--c-shadow);
  transition: background-color 0.8s var(--ease);
}
.cs__btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-line); }

/* Illustration: colored shapes + the business icon (same language as the hero's). */
.cs__img {
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  border-radius: 1.8cqw;
}
.cs__img.is-on { background: var(--c-tint); box-shadow: 0 2.2cqw 4.4cqw -2.6cqw var(--c-shadow); transition: background-color 0.8s var(--ease); }
.cs__ill { position: absolute; display: block; }
.cs__ill--sun {
  left: 27%;
  top: 16%;
  width: 46%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
}
.cs__icon { display: grid; place-items: center; width: 44%; color: var(--c-on); }
.cs__icon svg { width: 100%; height: auto; stroke-width: 1.5; }
.cs__ill--dot { left: 11%; top: 13%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--c-accent); }
.cs__ill--ring { right: 8%; bottom: 10%; width: 21%; aspect-ratio: 1; border-radius: 50%; border: 1.1cqw solid var(--c-accent); }
.cs__ill--dots {
  right: 7%;
  top: 8%;
  width: 26%;
  height: 22%;
  background-image: radial-gradient(var(--c-primary) 22%, transparent 25%);
  background-size: 1.6cqw 1.6cqw;
}
.cs__img.is-on .cs__ill--dots { opacity: 0.35; }

/* Lower band: what it fixes + booking. */
.cs__lower {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 4cqw;
  align-items: start;
}
.cs__features { display: grid; gap: 1.2cqw; min-height: 9cqw; }
.cs__features[data-count="1"] { grid-template-columns: 1fr; }
.cs__feat {
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  padding: 1.2cqw 1.4cqw;
  border: 1px solid var(--c-line);
  border-radius: 1.2cqw;
  background: #FFFFFF;
}
.cs__ficon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 1cqw;
  background: var(--c-tint);
  color: var(--c-primary);
}
.cs__ficon svg { width: 55%; height: 55%; }
.cs__ftext { display: grid; gap: 0.3cqw; min-width: 0; }
.cs__ftext b { font-size: 1.4cqw; font-weight: 700; line-height: 1.2; }
.cs__ftext small { color: var(--c-soft); font-size: 1.15cqw; line-height: 1.3; }

.cs__book {
  display: grid;
  gap: 1.1cqw;
  padding: 1.6cqw;
  border: 1px solid var(--c-line);
  border-radius: 1.4cqw;
  background: #FFFFFF;
}
.cs__book:not(.is-on) { background: transparent; border-color: transparent; }
.cs__booktitle { display: flex; justify-content: space-between; gap: 1cqw; margin: 0; font-size: 1.35cqw; font-weight: 700; }
.cs__booktitle span { color: var(--c-soft); font-weight: 500; }
.cs__slots { display: flex; flex-wrap: wrap; gap: 0.7cqw; }
.cs__slots span {
  padding: 0.7cqw 1cqw;
  border: 1px solid var(--c-line);
  border-radius: 0.8cqw;
  font-size: 1.15cqw;
  font-weight: 500;
  white-space: nowrap;
}
.cs__slots .is-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on); }

/* Chat widget, bottom-right: it arrives last. */
.cs__chat {
  position: absolute;
  right: 2.6cqw;
  bottom: 2.6cqw;
  display: flex;
  align-items: flex-end;
  gap: 1cqw;
  outline: none;
}
.cs__chat::after { display: none; }
.cs__bubble {
  padding: 1cqw 1.5cqw;
  border-radius: 1.4cqw 1.4cqw 0.3cqw 1.4cqw;
  background: var(--c-primary);
  color: var(--c-on);
  font-size: 1.25cqw;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1.2cqw 2.4cqw -1.2cqw var(--c-shadow);
}
.cs__launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: var(--c-primary);
  border: 0.35cqw solid #FFFFFF;
  box-shadow: 0 1.2cqw 2.4cqw -1.2cqw var(--c-shadow);
}
.cs__launcher i { width: 0.55cqw; height: 0.55cqw; border-radius: 50%; background: var(--c-on); }

/* ---------- Phone layout (narrow sites: the agent's peek and sheet, Proof's carousel) ---------- */
@container cs (max-width: 440px) {
  .cs { --bar-h: 11cqw; aspect-ratio: auto; border-radius: 5cqw; }
  .cs__bar { gap: 3cqw; padding: 0 4cqw; }
  .cs__dots { gap: 1.6cqw; }
  .cs__dots i { width: 2.4cqw; height: 2.4cqw; }
  .cs__url { max-width: 62%; padding: 1.2cqw 3cqw; border-radius: 2cqw; font-size: 3.2cqw; }
  .cs__page { display: flex; flex-direction: column; gap: 6cqw; height: auto; padding: 5cqw 5.5cqw 20cqw; }
  .cs__slot { border-radius: 3cqw; outline-offset: 1.4cqw; }
  .cs__slot::after { padding: 0.5cqw 1.6cqw; border-radius: 1cqw; font-size: 2.6cqw; }
  .cs__nav { min-height: 9cqw; }
  .cs__brand { gap: 2.6cqw; font-size: calc(4.6cqw * var(--nfit, 1)); }
  .cs__logo { width: 8.6cqw; height: 8.6cqw; border-radius: 2.4cqw; font-size: 4.2cqw; }
  .cs__links { display: none; }
  .cs__burger { display: flex; flex-direction: column; gap: 1.4cqw; }
  .cs__burger i { display: block; width: 6cqw; height: 0.7cqw; border-radius: 1cqw; background: var(--c-ink); }
  .cs__hero { display: flex; flex-direction: column; gap: 5cqw; }
  .cs__copy { gap: 3cqw; min-height: 34cqw; }
  .cs__ctas { gap: 2.6cqw; min-height: 11cqw; }
  .cs__img { width: 100%; aspect-ratio: 1 / 0.62; border-radius: 4cqw; }
  .cs__city { gap: 1.4cqw; padding: 1.2cqw 3cqw 1.2cqw 2.2cqw; font-size: 3.2cqw; }
  .cs__pin { width: 3.6cqw; }
  .cs__h { font-size: calc(8.6cqw * var(--nfit, 1)); }
  .cs__sub { font-size: 3.9cqw; }
  .cs__btn { padding: 2.8cqw 5cqw; font-size: 3.6cqw; }
  .cs__ill--ring { border-width: 2.4cqw; }
  .cs__ill--dots { background-size: 3.4cqw 3.4cqw; }
  .cs__lower { display: flex; flex-direction: column; align-items: stretch; gap: 6cqw; }
  .cs__features { gap: 2.6cqw; min-height: 20cqw; }
  .cs__feat { gap: 3cqw; padding: 3cqw 3.4cqw; border-radius: 3cqw; }
  .cs__ficon { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; }
  .cs__ftext b { font-size: 3.7cqw; }
  .cs__ftext small { font-size: 3.1cqw; }
  .cs__book { gap: 2.6cqw; padding: 4cqw; border-radius: 3.4cqw; }
  .cs__booktitle { font-size: 3.6cqw; }
  .cs__slots { gap: 1.8cqw; }
  .cs__slots span { padding: 1.8cqw 2.4cqw; border-radius: 2cqw; font-size: 3cqw; }
  .cs__chat { right: 4.5cqw; bottom: 4.5cqw; gap: 2.4cqw; }
  .cs__bubble { padding: 2.4cqw 3.6cqw; border-radius: 3.4cqw 3.4cqw 0.8cqw 3.4cqw; font-size: 3.4cqw; }
  .cs__launcher { gap: 1.1cqw; width: 11cqw; height: 11cqw; border-width: 0.9cqw; }
  .cs__launcher i { width: 1.4cqw; height: 1.4cqw; }
  .cs__hint { bottom: auto; top: 30cqw; font-size: 3.4cqw; }
  .cs.is-done { box-shadow: 0 8cqw 16cqw -8cqw rgba(0, 0, 0, 0.6); transform: none; }
  .cs:not(.is-started) { min-height: 150cqw; }
}

/* Reduced motion / ?static: everything instant. */
.is-static .cs,
.is-static .cs *,
.is-static .cs *::after,
.is-static .cs::before { transition: none !important; }