/**
 * Chartreuse Digital section system.
 *
 * The HTML blocks keep their local composition rules. This file owns the
 * cross-section tokens, page rhythm, backgrounds, focus treatment and common
 * responsive behavior.
 */

@font-face {
  font-family: "Almarena Display";
  src: url("../fonts/AlmarenaBold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --cd-page-max: 1920px;
  --cd-page-edge: clamp(8px, 1vw, 12px);
  --cd-container-max: 1400px;
  --cd-gutter: clamp(18px, 4vw, 76px);
  --cd-space-xs: 0.5rem;
  --cd-space-sm: 0.75rem;
  --cd-space-md: 1.25rem;
  --cd-space-lg: clamp(1.5rem, 3vw, 3rem);
  --cd-space-xl: clamp(3rem, 7vw, 7rem);
  --cd-section-y: clamp(6rem, 12vw, 12rem);
  --cd-radius-control: 0.875rem;
  --cd-radius-card: clamp(1.375rem, 2vw, 2rem);
  --cd-radius-section: clamp(1.5rem, 2.4vw, 2.75rem);
  --cd-canvas: #f6f6f3;
  --cd-surface: #ffffff;
  --cd-surface-soft: #ededE8;
  --cd-ink: #151615;
  --cd-muted: #666761;
  --cd-heading-ghost: #e3e3df;
  --cd-dark: #0c0c0b;
  --cd-dark-surface: #1d1e1c;
  --cd-dark-text: #f5f5f2;
  --cd-accent: #f2b84b;
  --cd-focus: #9a6500;
  --cd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cd-duration-fast: 180ms;
  --cd-duration-base: 320ms;
}

.cd-section,
.cd-section *,
.cd-section *::before,
.cd-section *::after {
  box-sizing: border-box;
}

.cd-section {
  --cd-section-width: min(
    var(--cd-page-max),
    calc(100vw - (var(--cd-page-edge) * 2))
  );

  position: relative;
  left: 50%;
  width: var(--cd-section-width);
  max-width: none;
  margin: 0;
  color: var(--cd-ink);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  transform: translateX(-50%);
  scroll-margin-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

.cd-section img,
.cd-section video,
.cd-section canvas {
  max-width: 100%;
}

.cd-section :is(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--cd-focus);
  outline-offset: 4px;
}

.cd-section :is(button, [role="button"], summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cd-section.cd-hero {
  width: var(--cd-section-width);
  min-height: min(920px, calc(100dvh - (var(--cd-page-edge) * 2)));
  margin: var(--cd-page-edge) 0 var(--cd-space-lg);
  border-radius: var(--cd-radius-section);
}

.cd-section.cd-hero .cd-hero__menu-link,
.cd-section.cd-hero .cd-hero__menu-link:visited,
.cd-section.cd-hero .cd-hero__menu-link:hover,
.cd-section.cd-hero .cd-hero__menu-link:focus-visible {
  text-decoration: none !important;
  border-bottom: 0;
  box-shadow: none;
}

.cd-section.cd-nucleus {
  --cd-nucleus-paper: var(--cd-canvas);

  width: var(--cd-section-width);
  min-height: clamp(720px, 100dvh, 980px);
  background: var(--cd-canvas);
}

.cd-section.cd-services,
.cd-section.cdtech,
.cd-section.cdpf,
.cd-section.cd-reviews {
  width: var(--cd-section-width);
  margin: 0;
  color: var(--cd-ink);
  background: var(--cd-canvas);
  border-radius: 0;
}

.cd-section.cd-services {
  --cd-services-title: var(--cd-heading-ghost);
  --cd-services-card: var(--cd-surface);
  --cd-services-accent: var(--cd-accent);

  padding: var(--cd-section-y) var(--cd-gutter) var(--cd-space-xl);
}

.cd-section.cdtech {
  --cdtech-paper: var(--cd-canvas);
  --cdtech-card: var(--cd-surface);
  --cdtech-focus: var(--cd-focus);
  --cdtech-radius: var(--cd-radius-card);

  padding-block: var(--cd-space-lg);
}

.cd-section.cd-project {
  width: var(--cd-section-width);
  min-height: auto;
  margin: 0;
  color: var(--cd-ink);
  background: var(--cd-canvas);
  border-radius: 0;
}

.cd-section.cdpf {
  --cdpf-paper: var(--cd-canvas);
  --cdpf-title: var(--cd-heading-ghost);
  --cdpf-radius: var(--cd-radius-card);
  --cdpf-focus: var(--cd-focus);

  padding: var(--cd-section-y) var(--cd-gutter) var(--cd-space-xl);
}

.cd-section.cd-reviews {
  --cd-reviews-paper: var(--cd-canvas);
  --cd-reviews-card: var(--cd-surface);
  --cd-reviews-accent: var(--cd-accent);
  --cd-reviews-focus: var(--cd-focus);
  --cd-reviews-radius: var(--cd-radius-card);

  padding: var(--cd-section-y) 0 var(--cd-space-xl);
}

.cd-section :is(
  .cd-services__title,
  .cdpf__title,
  .cd-reviews__title
) {
  color: var(--cd-heading-ghost);
  font-family: "Almarena Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(5rem, 16vw, 17rem);
  font-weight: 700;
  line-height: 0.76;
  letter-spacing: -0.065em;
}

.cd-section :is(
  .cd-services__card,
  .cdtech__item,
  .cdpf-card__figure,
  .cd-review-card
) {
  border-radius: var(--cd-radius-card);
}

.cd-section :is(
  .cd-hero__cta,
  .cd-services__cta,
  .cd-reviews__cta,
  .cd-project__contact,
  .cd-project__secondary
) {
  border-radius: var(--cd-radius-control);
}

.cd-section :is(
  .cd-hero__cta,
  .cd-services__cta,
  .cd-reviews__cta
):active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 1100px) {
  :root {
    --cd-section-y: clamp(5rem, 12vw, 8rem);
  }
}

@media (max-width: 900px) {
  :root {
    --cd-page-edge: 8px;
    --cd-gutter: clamp(16px, 5vw, 28px);
    --cd-section-y: clamp(4rem, 16vw, 7rem);
    --cd-space-xl: clamp(2.5rem, 12vw, 5rem);
    --cd-radius-card: clamp(1.25rem, 5vw, 1.5rem);
    --cd-radius-section: clamp(1.375rem, 6vw, 1.75rem);
  }

  .cd-section.cd-hero {
    min-height: calc(100dvh - 16px);
  }

  .cd-section.cd-nucleus {
    min-height: max(680px, 100dvh);
  }

  .cd-section.cd-services,
  .cd-section.cdpf {
    padding: var(--cd-section-y) var(--cd-gutter) var(--cd-space-xl);
  }

  .cd-section :is(
    .cd-services__title,
    .cdpf__title,
    .cd-reviews__title
  ) {
    font-size: clamp(4.75rem, 24vw, 8rem);
    line-height: 0.78;
  }
}

@media (max-width: 520px) {
  :root {
    --cd-gutter: 18px;
  }

  .cd-section.cd-project { margin-block: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-section {
    scroll-behavior: auto !important;
  }

  .cd-section *,
  .cd-section *::before,
  .cd-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .cd-section :is(a, button, input, textarea, summary):focus-visible {
    outline-color: CanvasText;
  }
}