:root {
  --cs-ink: #0a0c0f;
  --cs-ink-2: #14181d;
  --cs-ink-3: #1e242b;
  --cs-paper: #f4f2ed;
  --cs-paper-2: #e7e4dc;
  --cs-line-dark: rgba(244, 242, 237, 0.14);
  --cs-line-light: rgba(10, 12, 15, 0.13);
  --cs-text-on-dark: #f4f2ed;
  --cs-text-on-dark-soft: #b8bcc3;
  --cs-text-on-light: #11161a;
  --cs-text-on-light-soft: #4f575f;
  --cs-accent: #c9f24a;
  --cs-accent-deep: #9fce1f;
  --cs-accent-ink: #131a06;
  --cs-signal: #ff5a3c;
  --cs-radius: 2px;
  --cs-radius-lg: 6px;
  --cs-shadow: 0 28px 70px -34px rgba(10, 12, 15, 0.6);
  --cs-max: 1240px;
  --cs-gutter: clamp(1rem, 4vw, 3rem);
  --cs-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cs-paper);
  color: var(--cs-text-on-light);
  font-family: var(--cs-font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cs-accent-deep);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.6em;
  color: inherit;
}

p {
  margin: 0 0 1.1em;
}

.cs-shell {
  width: 100%;
  max-width: var(--cs-max);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
}

.cs-shell--wide {
  max-width: 1520px;
}

.cs-shell--narrow {
  max-width: 860px;
}

.cs-surface-dark {
  background-color: var(--cs-ink);
  color: var(--cs-text-on-dark);
}

.cs-surface-dark p,
.cs-surface-dark li {
  color: var(--cs-text-on-dark-soft);
}

.cs-surface-light {
  background-color: var(--cs-paper);
  color: var(--cs-text-on-light);
}

.cs-surface-light p,
.cs-surface-light li {
  color: var(--cs-text-on-light-soft);
}

.cs-section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 9rem);
}

.cs-section--tight {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cs-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: var(--cs-text-on-light-soft);
}

.cs-surface-dark .cs-eyebrow {
  color: var(--cs-text-on-dark-soft);
}

.cs-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.7;
}

.cs-display {
  font-size: clamp(2.6rem, 7.5vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.cs-display--xl {
  font-size: clamp(3.2rem, 11vw, 9rem);
}

.cs-title-lg {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}

.cs-title-md {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
}

.cs-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 62ch;
}

.cs-rule {
  height: 1px;
  width: 100%;
  background-color: var(--cs-line-light);
  margin-block: clamp(2rem, 4vw, 3.5rem);
}

.cs-surface-dark .cs-rule {
  background-color: var(--cs-line-dark);
}

.cs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--cs-line-light);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cs-surface-dark .cs-tag {
  border-color: var(--cs-line-dark);
  color: var(--cs-text-on-dark-soft);
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--cs-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--cs-radius);
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cs-btn:hover {
  transform: translateY(-2px);
}

.cs-btn--accent {
  background-color: var(--cs-accent);
  color: var(--cs-accent-ink);
}

.cs-btn--accent:hover {
  background-color: var(--cs-accent-deep);
  color: var(--cs-accent-ink);
}

.cs-btn--dark {
  background-color: var(--cs-ink);
  color: var(--cs-text-on-dark);
}

.cs-btn--ghost {
  background-color: transparent;
  border-color: var(--cs-line-dark);
  color: var(--cs-text-on-dark);
}

.cs-btn--ghost:hover {
  background-color: rgba(244, 242, 237, 0.08);
}

.cs-btn--ghost-light {
  background-color: transparent;
  border-color: var(--cs-line-light);
  color: var(--cs-text-on-light);
}

.cs-btn--ghost-light:hover {
  background-color: rgba(10, 12, 15, 0.05);
}

.cs-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background-color: var(--cs-ink);
  color: var(--cs-text-on-dark);
  border-bottom: 1px solid var(--cs-line-dark);
  transition: padding 0.3s ease, background-color 0.3s ease;
}

.cs-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.9rem;
}

.cs-header__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--cs-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cs-text-on-dark);
}

.cs-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.8rem);
  margin-inline-start: auto;
}

.cs-header__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cs-text-on-dark-soft);
  transition: color 0.2s ease;
}

.cs-header__link:hover {
  color: var(--cs-text-on-dark);
}

.cs-header__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--cs-text-on-dark-soft);
  border-inline-start: 1px solid var(--cs-line-dark);
  padding-inline-start: 1.2rem;
}

.cs-header__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--cs-line-dark);
  border-radius: var(--cs-radius);
  color: var(--cs-text-on-dark);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
}

.cs-header--scrolled {
  background-color: rgba(10, 12, 15, 0.96);
  backdrop-filter: blur(10px);
}

.cs-nav-drawer {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem var(--cs-gutter) 1.8rem;
  border-top: 1px solid var(--cs-line-dark);
}

.cs-nav-drawer.is-open {
  display: flex;
}

.cs-nav-drawer__link {
  padding: 0.65rem 0;
  font-size: 1rem;
  color: var(--cs-text-on-dark-soft);
  border-bottom: 1px solid var(--cs-line-dark);
}

.cs-hero {
  position: relative;
  padding-block: clamp(4.5rem, 12vw, 10rem);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.cs-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.cs-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-inline-start: clamp(0rem, 3vw, 2.5rem);
  border-inline-start: 1px solid var(--cs-line-dark);
}

.cs-hero__index {
  font-family: var(--cs-font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 242, 237, 0.4);
}

.cs-marquee {
  overflow: hidden;
  border-block: 1px solid var(--cs-line-dark);
  background-color: var(--cs-ink-2);
}

.cs-marquee__track {
  display: flex;
  gap: 3rem;
  padding-block: 1.1rem;
  white-space: nowrap;
  animation: cs-scroll 34s linear infinite;
  font-family: var(--cs-font-display);
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cs-text-on-dark-soft);
}

@keyframes cs-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background-color: var(--cs-line-dark);
  border: 1px solid var(--cs-line-dark);
}

.cs-stat {
  background-color: var(--cs-ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.cs-stat__value {
  font-family: var(--cs-font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--cs-accent);
}

.cs-stat__label {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--cs-text-on-dark-soft);
}

.cs-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1px;
  background-color: var(--cs-line-light);
  border: 1px solid var(--cs-line-light);
}

.cs-bento__cell {
  position: relative;
  background-color: var(--cs-paper);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.8rem;
}

.cs-bento__cell--wide {
  grid-column: span 4;
}

.cs-bento__cell--narrow {
  grid-column: span 2;
}

.cs-bento__cell--half {
  grid-column: span 3;
}

.cs-bento__cell--dark {
  background-color: var(--cs-ink);
  color: var(--cs-text-on-dark);
}

.cs-bento__cell--dark p,
.cs-bento__cell--dark li {
  color: var(--cs-text-on-dark-soft);
}

.cs-bento__cell--accent {
  background-color: var(--cs-accent);
  color: var(--cs-accent-ink);
}

.cs-bento__cell--accent p,
.cs-bento__cell--accent li {
  color: var(--cs-accent-ink);
}

.cs-bento__num {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--cs-paper);
  border: 1px solid var(--cs-line-light);
  border-radius: var(--cs-radius);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cs-shadow);
}

.cs-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--cs-ink-3);
}

.cs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  flex: 1;
}

.cs-card__title {
  font-size: 1.25rem;
  margin: 0;
}

.cs-card__text {
  font-size: 0.94rem;
  margin: 0;
  color: var(--cs-text-on-light-soft);
}

.cs-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--cs-line-light);
  font-size: 0.85rem;
  font-weight: 600;
}

.cs-split {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.cs-split--reverse {
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
}

.cs-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--cs-ink-3);
}

.cs-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-split__media--landscape {
  aspect-ratio: 16 / 9;
}

.cs-editorial {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.cs-editorial__headline {
  grid-column: 1 / span 7;
  position: relative;
  z-index: 2;
}

.cs-editorial__figure {
  grid-column: 5 / span 8;
  grid-row: 1;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background-color: var(--cs-ink-3);
}

.cs-editorial__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-editorial__caption {
  grid-column: 9 / span 4;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-on-light-soft);
  border-top: 1px solid var(--cs-line-light);
  padding-top: 0.8rem;
}

.cs-process {
  display: grid;
  gap: 1px;
  background-color: var(--cs-line-light);
  border-block: 1px solid var(--cs-line-light);
}

.cs-process__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  background-color: var(--cs-paper);
  padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem);
  transition: background-color 0.25s ease;
}

.cs-process__row:hover {
  background-color: var(--cs-paper-2);
}

.cs-process__num {
  font-family: var(--cs-font-display);
  font-size: 1.6rem;
  color: var(--cs-accent-deep);
}

.cs-process__name {
  font-family: var(--cs-font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin: 0;
}

.cs-process__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--cs-text-on-light-soft);
}

.cs-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 1rem;
}

.cs-gallery__item {
  position: relative;
  overflow: hidden;
  background-color: var(--cs-ink-3);
}

.cs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cs-gallery__item:hover img {
  transform: scale(1.05);
}

.cs-gallery__item--tall {
  grid-row: span 2;
}

.cs-gallery__item--wide {
  grid-column: span 2;
}

.cs-gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.9rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-text-on-dark);
  background: linear-gradient(to top, rgba(10, 12, 15, 0.85), rgba(10, 12, 15, 0));
}

.cs-price {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.cs-price__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background-color: var(--cs-paper);
  border: 1px solid var(--cs-line-light);
  border-radius: var(--cs-radius);
}

.cs-price__card--featured {
  background-color: var(--cs-ink);
  color: var(--cs-text-on-dark);
  border-color: var(--cs-ink);
}

.cs-price__card--featured p,
.cs-price__card--featured li {
  color: var(--cs-text-on-dark-soft);
}

.cs-price__amount {
  font-family: var(--cs-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.cs-price__period {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.cs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.cs-list li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: 0.94rem;
}

.cs-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-size: 0.75rem;
  color: var(--cs-accent-deep);
}

.cs-surface-dark .cs-list li::before,
.cs-price__card--featured .cs-list li::before {
  color: var(--cs-accent);
}

.cs-faq {
  border-top: 1px solid var(--cs-line-light);
}

.cs-faq__item {
  border-bottom: 1px solid var(--cs-line-light);
}

.cs-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  background: transparent;
  border: 0;
  text-align: start;
  font-family: var(--cs-font-display);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: inherit;
  cursor: pointer;
}

.cs-faq__trigger i {
  transition: transform 0.3s ease;
  color: var(--cs-accent-deep);
}

.cs-faq__trigger[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.cs-faq__panel {
  padding-bottom: 1.4rem;
  font-size: 0.96rem;
  color: var(--cs-text-on-light-soft);
  max-width: 78ch;
}

.cs-quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  background-color: var(--cs-ink-2);
  color: var(--cs-text-on-dark);
  border-inline-start: 3px solid var(--cs-accent);
}

.cs-quote__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--cs-ink-3);
}

.cs-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-quote__text {
  font-family: var(--cs-font-display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.4;
  margin: 0 0 0.7rem;
  color: var(--cs-text-on-dark);
}

.cs-quote__author {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-text-on-dark-soft);
}

.cs-form {
  display: grid;
  gap: 1.1rem;
}

.cs-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.cs-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cs-field--full {
  grid-column: 1 / -1;
}

.cs-field__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-text-on-light-soft);
}

.cs-surface-dark .cs-field__label {
  color: var(--cs-text-on-dark-soft);
}

.cs-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--cs-font-body);
  font-size: 1rem;
  color: var(--cs-text-on-light);
  background-color: transparent;
  border: 1px solid var(--cs-line-light);
  border-radius: var(--cs-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cs-input:focus {
  border-color: var(--cs-accent-deep);
  box-shadow: 0 0 0 3px rgba(159, 206, 31, 0.22);
  outline: none;
}

.cs-input[aria-invalid="true"] {
  border-color: var(--cs-signal);
}

.cs-surface-dark .cs-input {
  color: var(--cs-text-on-dark);
  border-color: var(--cs-line-dark);
  background-color: rgba(244, 242, 237, 0.03);
}

.cs-field__error {
  font-size: 0.8rem;
  color: #ff7a63;
  min-height: 1rem;
}

.cs-surface-light .cs-field__error {
  color: #b3240c;
}

.cs-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--cs-text-on-light-soft);
}

.cs-surface-dark .cs-checkbox {
  color: var(--cs-text-on-dark-soft);
}

.cs-checkbox input {
  margin-top: 0.25rem;
  accent-color: var(--cs-accent-deep);
}

.cs-cta {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--cs-text-on-dark);
}

.cs-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cs-footer {
  background-color: var(--cs-ink);
  color: var(--cs-text-on-dark);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--cs-line-dark);
}

.cs-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.cs-footer__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-text-on-dark-soft);
  margin-bottom: 1rem;
}

.cs-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
}

.cs-footer__list a:hover {
  color: var(--cs-accent);
}

.cs-footer__legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--cs-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--cs-text-on-dark-soft);
}

.cs-accordion-panel[hidden] {
  display: none;
}

.cs-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1080;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cs-cookie__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.2rem, 3vw, 2.2rem);
  background-color: var(--cs-ink-2);
  color: var(--cs-text-on-dark);
  border: 1px solid var(--cs-line-dark);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow);
  transform: translateY(18px);
  opacity: 0;
  animation: cs-cookie-in 0.45s ease forwards;
}

@keyframes cs-cookie-in {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cs-cookie__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-accent);
  margin-bottom: 0.6rem;
}

.cs-cookie__title {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  margin: 0 0 0.4rem;
  color: var(--cs-text-on-dark);
}

.cs-cookie__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cs-text-on-dark-soft);
  max-width: 68ch;
}

.cs-cookie__link {
  color: var(--cs-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cs-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: flex-end;
}

.cs-cookie__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: var(--cs-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.cs-cookie__btn--accept {
  background-color: var(--cs-accent);
  color: var(--cs-accent-ink);
}

.cs-cookie__btn--accept:hover {
  background-color: var(--cs-accent-deep);
}

.cs-cookie__btn--decline {
  background-color: transparent;
  border-color: var(--cs-line-dark);
  color: var(--cs-text-on-dark);
}

.cs-cookie__btn--decline:hover {
  background-color: rgba(244, 242, 237, 0.08);
}

.cs-cookie--dismissed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

html.cs-cookie-decided .cs-cookie {
  display: none;
}

.cs-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cs-top-btn {
  position: fixed;
  inset-inline-end: 1.2rem;
  bottom: 1.2rem;
  z-index: 1030;
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--cs-ink);
  color: var(--cs-accent);
  border: 1px solid var(--cs-line-dark);
  border-radius: 50%;
  cursor: pointer;
}

.cs-top-btn.is-visible {
  display: flex;
}

.cs-map-frame {
  width: 100%;
  min-height: 380px;
  border: 1px solid var(--cs-line-light);
  filter: grayscale(0.35) contrast(1.05);
}

.cs-blog-item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--cs-line-light);
}

.cs-blog-item__media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background-color: var(--cs-ink-3);
}

.cs-blog-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-meta {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-text-on-light-soft);
}

.cs-rich p {
  max-width: 72ch;
}

.cs-rich h2 {
  margin-top: 2.2em;
}

.cs-rich ul,
.cs-rich ol {
  max-width: 72ch;
  color: var(--cs-text-on-light-soft);
}

@media (max-width: 1100px) {
  .cs-header__meta {
    display: none;
  }

  .cs-header__nav {
    display: none;
  }

  .cs-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
  }

  .cs-editorial__headline,
  .cs-editorial__figure,
  .cs-editorial__caption {
    grid-column: 1 / -1;
  }

  .cs-editorial__headline {
    grid-row: 2;
  }

  .cs-editorial__figure {
    grid-row: 1;
  }
}

@media (max-width: 900px) {
  .cs-hero__grid,
  .cs-split,
  .cs-split--reverse,
  .cs-cta__inner,
  .cs-blog-item,
  .cs-cookie__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-hero__aside {
    border-inline-start: 0;
    border-top: 1px solid var(--cs-line-dark);
    padding-inline-start: 0;
    padding-top: 1.4rem;
  }

  .cs-bento__cell--wide,
  .cs-bento__cell--narrow,
  .cs-bento__cell--half {
    grid-column: 1 / -1;
  }

  .cs-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }

  .cs-process__row {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .cs-process__text {
    grid-column: 2;
  }

  .cs-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-cookie__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .cs-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-cookie__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-cookie__btn {
    justify-content: center;
  }

  .cs-quote {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cs-marquee__track {
    animation: none;
  }

  .cs-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cs-card,
  .cs-btn,
  .cs-cookie__panel {
    transition: none;
    animation: none;
  }
}
/* Contrast fix: hero index glyph must be readable on dark hero background */
.cs-hero__index {
  color: var(--cs-text-on-dark-soft);
  -webkit-text-stroke: 1px var(--cs-text-on-dark);
}

/* Contrast fix: give the decorative hero index letter a solid readable color
   instead of transparent fill (which computed as black on the dark hero). */
.cs-hero__index {
  color: var(--cs-accent);
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 18px rgba(10, 12, 15, 0.45);
}

.cs-surface-light .cs-hero__index {
  color: var(--cs-accent-deep);
}

/* Contrast fix: darken soft text on light surfaces so it meets WCAG AA */
.cs-surface-light {
  --cs-text-on-light-soft: #23282e;
}

/* Contrast hardening: rich-text copy on light surfaces must meet WCAG AA */
.cs-rich p,
.cs-rich li,
.cs-surface-light .cs-rich p,
.cs-surface-light .cs-rich li {
  color: #11161a;
}

.cs-rich ul,
.cs-rich ol {
  color: #11161a;
}

/* Contrast fix (contacts hero): the hero copy block carries scroll-reveal
   attributes (data-aos). While that fade animation is running the whole
   <aside>/text block renders at a fraction of full opacity, which drags the
   "@" index glyph, the intro paragraph and the three contact list items far
   below WCAG AA on the dark hero surface. Force the hero reveal targets to be
   fully opaque and in place so the text is always rendered at full strength. */
.cs-hero [data-aos],
.cs-hero [data-aos] * {
  opacity: 1 !important;
}

.cs-hero [data-aos] {
  transform: none !important;
  transition: none !important;
}

/* Contrast fix: lift the soft text tone used on dark surfaces so paragraphs,
   list items and meta text keep a comfortable margin above WCAG AA. */
.cs-surface-dark {
  --cs-text-on-dark-soft: #d6d9de;
}

/* Contrast fix (legal-information page): the aside cards and the rich-text block
   carry scroll-reveal (data-aos) attributes. While the fade animation is running
   the whole <aside>/copy block renders at a fraction of full opacity, which drags
   the eyebrow, card text, list items and legal links far below WCAG AA on the
   light surface. Force the reveal targets inside <main> to render fully opaque
   and in place so the text always has full strength. */
main [data-aos],
main [data-aos] * {
  opacity: 1 !important;
}

main [data-aos] {
  transform: none !important;
  transition: none !important;
}

/* Contrast fix (sprachdaten page): the hero sits on a darkened background
   image but inherited the dark body text color, so the eyebrow, headline and
   aside copy rendered dark-on-dark. Force the hero text to the light palette. */
.cs-hero {
  color: var(--cs-text-on-dark);
}

.cs-hero .cs-display,
.cs-hero h1,
.cs-hero h2 {
  color: var(--cs-text-on-dark);
}

.cs-hero .cs-eyebrow {
  color: var(--cs-text-on-dark-soft);
}

.cs-hero__aside p,
.cs-hero p {
  color: var(--cs-text-on-dark-soft);
}

/* Contrast fix (quote block): the generic light-surface paragraph rule
   (.cs-surface-light p) was overriding .cs-quote__text, leaving dark text on
   the dark quote panel. Restore the light palette inside the quote. */
.cs-surface-light .cs-quote,
.cs-surface-light .cs-quote p,
.cs-quote .cs-quote__text {
  color: var(--cs-text-on-dark);
}

.cs-surface-light .cs-quote .cs-quote__author {
  color: var(--cs-text-on-dark-soft);
}

/* Fix: hero copy must render light on the dark hero image overlay.
   The hero has no surface class, so its text previously inherited the
   body's dark light-surface color, making title/lead/list unreadable. */
.cs-hero {
  color: var(--cs-text-on-dark);
}

.cs-hero .cs-display,
.cs-hero .cs-lead {
  color: var(--cs-text-on-dark);
}

.cs-hero .cs-eyebrow {
  color: var(--cs-text-on-dark-soft);
}

.cs-hero p,
.cs-hero li {
  color: var(--cs-text-on-dark-soft);
}

/* Fix: CTA eyebrow text sits on a dark image band but used the
   light-surface soft tone, leaving it nearly invisible. */
.cs-cta .cs-eyebrow {
  color: var(--cs-text-on-dark-soft);
}

.cs-cta .cs-display,
.cs-cta .cs-lead {
  color: var(--cs-text-on-dark);
}

.cs-cta p {
  color: var(--cs-text-on-dark-soft);
}

/* Fix: the quote block has a dark panel background but lives inside a
   light section, so ".cs-surface-light p" overrode the quote text color
   with the dark light-surface tone. Restore the dark-surface text color. */
.cs-quote__text,
.cs-surface-light .cs-quote__text {
  color: var(--cs-text-on-dark);
}

.cs-quote__author {
  color: var(--cs-text-on-dark-soft);
}

/* Fix: the numbered process rows are light cards placed in a dark section,
   so their inherited/soft text collided with the light card background.
   Give the rows the dark surface treatment with readable text. */
.cs-surface-dark .cs-process {
  background-color: var(--cs-line-dark);
  border-block-color: var(--cs-line-dark);
}

.cs-surface-dark .cs-process__row {
  background-color: var(--cs-ink-2);
  color: var(--cs-text-on-dark);
}

.cs-surface-dark .cs-process__row:hover {
  background-color: var(--cs-ink-3);
}

.cs-surface-dark .cs-process__name {
  color: var(--cs-text-on-dark);
}

.cs-surface-dark .cs-process__text {
  color: var(--cs-text-on-dark-soft);
}

.cs-surface-dark .cs-process__num {
  color: var(--cs-accent);
}

/* Contrast fix (thank-you page): the numbered process steps rendered the accent
   green (#9fce1f) on the light paper background, which only reaches ~1.7:1.
   Use a darker green tone that keeps the same accent family while meeting
   WCAG AA (>= 4.5:1) on light surfaces. */
.cs-process__num {
  color: #3f5013;
}

/* Overlap fix (mobile hero): the fixed cookie consent banner is anchored to the
   viewport bottom and, on narrow screens, its tall stacked panel covers the
   hero H1 and lead copy underneath. Keep the banner fixed and dismissible but
   shrink its footprint on small screens and cap its height so the headline
   stays readable, while allowing the text/actions to scroll inside the panel. */
@media (max-width: 900px) {
  .cs-cookie {
    padding: 0.5rem;
  }

  .cs-cookie__panel {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
  }

  .cs-cookie__text {
    font-size: 0.84rem;
    line-height: 1.45;
  }

  .cs-cookie__title {
    font-size: 1rem;
  }

  .cs-cookie__badge {
    margin-bottom: 0.4rem;
  }

  .cs-cookie__actions {
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
  }

  .cs-cookie__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .cs-cookie__panel {
    max-height: 40vh;
    padding: 0.85rem 0.9rem;
  }

  .cs-cookie__actions {
    flex-direction: row;
  }

  .cs-cookie__btn {
    padding: 0.68rem 0.6rem;
  }
}

/* Layout fix (home hero H1): the hero headline used .cs-display--xl with
   clamp(3.2rem, 11vw, 9rem). On desktop the 11vw term resolves to ~158px, which
   is far wider than the ~770px text column inside .cs-hero__grid. The browser
   then broke the sentence into a squeezed narrow column ("di", "draußen zu
   selten gibt"), destroying the hero. Constrain the display size so it stays in
   proportion to the hero text column and wraps into a few natural lines.
   The override is scoped to the hero XL display and keeps the mobile behavior
   (fluid, viewport-relative) intact. */
.cs-hero .cs-display--xl {
  font-size: clamp(2.4rem, 7.2vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .cs-hero .cs-display--xl {
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    line-height: 1;
  }
}

@media (max-width: 600px) {
  .cs-hero .cs-display--xl {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
}

/* Layout fix (home hero H1, part 2): reducing the font alone was not enough.
   The hero copy column (.cs-hero__grid first track, minmax(0, 1.15fr)) is only
   ~770px wide at desktop while long words like "Trainingsdaten," need more
   room, so the browser wrapped the sentence into 5 short lines that read as a
   squeezed narrow column. Give the text column more of the grid and cap the XL
   display slightly tighter so the headline settles into a few natural lines.
   The aside keeps its own track and the mobile stacking is untouched. */
@media (min-width: 901px) {
  .cs-hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
  }

  .cs-hero .cs-display--xl {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1;
    text-wrap: pretty;
  }
}

/* Contrast fix (editorial caption): .cs-editorial__caption uses the light-surface
   soft tone (--cs-text-on-light-soft, ~#4f575f) unconditionally. When the figure
   caption sits inside a dark section (.cs-surface-dark, background #0a0c0f) that
   tone computes to roughly 2.7:1, far below WCAG AA. The dark surface only
   remaps --cs-text-on-dark-soft, so the caption inherited the wrong palette.
   Scope the caption to the dark-surface soft tone and matching hairline border
   when it appears on a dark surface; light-surface captions are untouched. */
.cs-surface-dark .cs-editorial__caption,
.cs-surface-dark .cs-editorial figcaption {
  color: var(--cs-text-on-dark-soft);
  border-top-color: var(--cs-line-dark);
}