/*
 * Component layer: reusable building blocks. No section-specific selectors here.
 */
.container {
  inline-size: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.eyebrow {
  display: block;
  color: var(--c-eyebrow);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section {
  padding-block: var(--s-section);
}

.section--tint {
  background: var(--c-surface-tint);
}

.section-head {
  max-inline-size: 48rem;
  margin-block-end: var(--s-8);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  margin-block: var(--s-3) var(--s-4);
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.section-head p {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 3rem;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--c-action-bg);
  color: var(--c-action-fg);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  background: var(--c-action-bg-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn--secondary {
  border-color: var(--c-action-secondary-border);
  background: var(--c-action-secondary-bg);
  color: var(--c-action-secondary-fg);
}

.btn--secondary:hover {
  background: var(--c-surface-brand-subtle);
}

.btn--on-dark {
  background: var(--c-action-on-dark-bg);
  color: var(--c-action-on-dark-fg);
}

.btn--on-dark:hover {
  background: var(--p-teal-100);
}

.btn--sm {
  min-block-size: 2.75rem;
  padding: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
}

.btn .icon {
  font-size: 1.05em;
}

/* Language switch -------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(21 109 114 / 0.16);
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / 0.35);
}

.lang-switch button {
  min-inline-size: 2.75rem;
  min-block-size: 2.25rem;
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.lang-switch button[aria-pressed='true'] {
  background: var(--c-lang-active-bg);
  color: var(--c-lang-active-fg);
}

/* Feature card (services overview) -------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.card__media {
  aspect-ratio: 2.1;
  background: var(--c-surface-brand-subtle);
}

.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--s-6) var(--s-6) var(--s-8);
}

.card__index {
  color: var(--c-eyebrow);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card h3 {
  margin-block: var(--s-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.card p {
  color: var(--c-text-muted);
  font-size: 0.9375rem;
}

/* Service panel (local guide / personal assistant) ---------------------- */
.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}

.service__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  grid-row: span 2;
  border-radius: var(--r-md);
  background: var(--c-icon-bg);
  color: var(--c-icon-fg);
  font-size: 1.5rem;
}

.service h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.service__tag {
  justify-self: start;
  padding: 2px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-brand-subtle);
  color: var(--c-lang-active-fg);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.service__body {
  grid-column: 2;
  display: grid;
  gap: var(--s-3);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.service__price {
  padding-block-start: var(--s-3);
  border-block-start: 1px dashed var(--c-border-brand);
  color: var(--c-text);
}

.service__price strong {
  font-weight: 700;
}

/* Chips ------------------------------------------------------------------ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-border-brand);
  border-radius: var(--r-pill);
  background: var(--c-chip-bg);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.chip .icon {
  color: var(--c-icon-fg);
}