/* Components: brand, nav, buttons, cards, badges, footer, reveal */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand em {
  font-style: normal;
  color: var(--color-violet-deep);
}

.brand__mark {
  width: 28px;
  height: 33px;
  flex: none;
}

.brand__mark svg {
  width: 100%;
  height: 100%;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 500;
  padding: 0 14px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  border: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav__index {
  display: none;
}

.nav__link:hover {
  background: var(--color-white);
}

.nav__link[aria-current="page"] {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.nav__link[aria-current="page"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-lime);
  margin-right: 7px;
}

@media (min-width: 56.25rem) {
  .nav__links {
    gap: 0;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-white) 62%, transparent);
  }
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
}

.nav__toggle-lines {
  display: grid;
  gap: 4px;
}

.nav__toggle-lines i {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav.is-open .nav__toggle-lines i:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nav.is-open .nav__toggle-lines i:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

html.nav-open,
html.nav-open body {
  overflow: hidden;
}

/* Theme control. It sits beside the WhatsApp CTA in the pill on desktop and in
   the sheet's fixed action row on mobile. Without JS it cannot work, so it is
   hidden rather than shipped as a dead button; the OS preference still applies. */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
  background: var(--color-violet-wash);
  border-color: var(--color-ink);
}

html:not(.js) .theme-toggle {
  display: none;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.theme-toggle__moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__moon {
  display: block;
}

/* No explicit choice: follow the OS. Duplicated because display cannot ride on
   light-dark(); this is the only dark rule that cannot be a token. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__moon {
    display: block;
  }
}

@media (max-width: 56.1875rem) {
  .nav {
    flex-wrap: wrap;
    padding-block: var(--space-2);
  }

  html.js .nav__toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .nav__links {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--space-2) var(--space-5);
    margin-inline: 0;
    padding-block: var(--space-2);
  }

  .nav__links .nav__link {
    padding: var(--space-2) 0;
    border-radius: 0;
  }

  html.js .nav__links {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: auto;
    margin: 0;
    padding: var(--space-4) var(--gutter) 6rem;
    background: var(--color-paper);
    border-bottom: 0;
    overflow-y: auto;
    z-index: 30;
  }

  html.js .nav__links .nav__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  html.js .nav__index {
    display: inline;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--color-muted);
  }

  html.js .nav.is-open .nav__links {
    display: flex;
  }

  html.js .nav__actions {
    display: none;
  }

  html.js .nav.is-open .nav__actions {
    display: flex;
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--space-5);
    z-index: 31;
  }

  /* The toggle and the WhatsApp CTA share the fixed row: the CTA takes the
     remaining width instead of the whole row. */
  html.js .nav.is-open .nav__actions .btn {
    flex: 1;
    width: auto;
  }

  html.js .nav.is-open .nav__links::after {
    content: "Usually a reply within a few hours.";
    margin-top: auto;
    padding-top: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--color-surface-deep);
  color: var(--color-on-deep);
}

.btn--primary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
  box-shadow: var(--shadow-action);
}

.btn--primary:hover {
  background: var(--color-surface-deep);
  border-color: var(--color-surface-deep);
  box-shadow: 0 10px 24px -14px light-dark(rgba(6, 10, 22, 0.55), rgba(0, 0, 0, 0.7));
}

.btn--primary::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn--primary:hover::after {
  transform: translateX(3px);
}

.btn--ghost {
  border-color: var(--color-line);
}

.btn--small {
  min-height: 44px;
  padding: 0 var(--space-4);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  height: 100%;
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--color-violet-soft);
  box-shadow: var(--shadow-lift);
}

.card > :last-child {
  margin-top: auto;
}

.card__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.card__num::after {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--color-lime);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.badge--concept {
  background: var(--color-lime);
  color: var(--color-on-bright);
}

.badge--client {
  background: var(--color-action);
  color: var(--color-action-text);
}

/* Awning stripe band: the brand mark used as structure. Max twice per page. */
.rule--awning {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-violet) 0 22px,
    transparent 22px 44px
  );
}

/* Uniform white tile for client logos, so different source shapes read as one set. */
.logo-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-white);
}

.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light artwork in the dark room: the same files, framed by a hairline and a
   soft violet glow. Both tokens are transparent in light, so the light design
   gains nothing and moves nothing. */
.overture__stage,
.hero__stage,
.cs-hero__media img,
.cs-figure img,
.work-card__media,
.case-card__media,
.concept-card__cover {
  box-shadow: 0 0 0 1px var(--ring-media), 0 40px 90px -50px var(--glow-tint);
}

.site-footer a {
  color: var(--color-on-deep);
}

.site-footer .brand {
  color: var(--color-on-deep);
}

.site-footer .brand em {
  color: var(--color-violet-soft);
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-on-deep) 70%, transparent);
  margin: 0 0 var(--space-3);
}

.footer__links {
  display: grid;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links a {
  display: inline-block;
  padding-block: 4px;
}

.footer__note {
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--color-on-deep) 72%, transparent);
  margin: var(--space-6) 0 0;
  max-width: none;
}

.footer__wordmark {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-on-deep) 18%, transparent);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9.5vw, 8rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--color-on-deep);
}

.footer__wordmark em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-violet-soft);
}

/* Reveal: only hidden when JS is present, so no-JS keeps content visible */
.reveal {
  opacity: 1;
  transform: none;
}

html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

html.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 23.4375rem) {
  .nav__toggle {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .nav__toggle > span:last-child {
    display: none;
  }

  .brand {
    font-size: 1rem;
    gap: var(--space-2);
  }
}

/* Shared action row and dark call-to-action band */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
}

.cta-band {
  background: var(--color-surface-deep);
  color: var(--color-on-deep);
  padding-block: clamp(3rem, 7vw, 6rem);
}

.cta-band h2 {
  color: var(--color-on-deep);
  max-width: 18ch;
}

.cta-band p {
  color: color-mix(in srgb, var(--color-on-deep) 78%, transparent);
}

.cta-band .btn--primary {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-on-bright);
  box-shadow: 0 10px 24px -16px light-dark(rgba(198, 255, 61, 0.5), rgba(198, 255, 61, 0.32));
}

.cta-band .btn--primary:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-ink);
}

.cta-band .btn--ghost {
  border-color: color-mix(in srgb, var(--color-on-deep) 40%, transparent);
  color: var(--color-on-deep);
}

.cta-band .btn--ghost:hover {
  background: var(--color-on-deep);
  color: var(--color-surface-deep);
}