/* =========================================================
   GLOBAL / RESET
   ========================================================= */

:root {
  --font-sans: "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Space Grotesk", "Inter", Helvetica, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: #0B0C0F;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

a {
  color: #FF5E96;
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
}

@keyframes cgFadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cgMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes cgScrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Shared layout utilities — reused across every section */

.cg-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 64px;
  padding-right: 64px;
}
@media (max-width: 1239px) {
  .cg-container { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 999px) {
  .cg-container { padding-left: 20px; padding-right: 20px; }
}

.cg-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cg-eyebrow__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--n-950);
}
.cg-eyebrow__rule {
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 14px;
  background: var(--accent-500);
}

.cg-accent { color: var(--accent-500); }
.cg-min0 { min-width: 0; }

.cg-page {
  position: relative;
  background: #FFFFFF;
  font-family: var(--font-sans);
  overflow-x: clip;
}
.cg-page__hero-wrap {
  position: relative;
  background: #0B0C0F;
}

/* Generic content pages (page.php / single.php / index.php / 404.php).
   Phase 1 has no bespoke design for these — styled from design tokens only. */
.cg-page-content {
  padding: 64px 0 96px;
  background: #FFFFFF;
  color: var(--text-body, #2F3238);
}
.cg-page-content__title {
  font-family: var(--font-display), var(--font-sans);
  margin-bottom: 24px;
}
.cg-page-content__body {
  max-width: var(--measure-prose, 66ch);
  line-height: var(--lh-body, 1.65);
}

/* Full-width pages (per-page switch, see inc/page-settings.php).
   The wrapper drops .cg-container in PHP, so only the vertical padding and
   the reading measure need clearing here: sections built in Elementor bring
   their own gutters and are designed to run edge to edge. */
.cg-page-content--full {
  padding-top: 0;
  padding-bottom: 0;
}
.cg-page-content--full .cg-page-content__body {
  max-width: none;
}
/* A title left visible on a full-width page still needs a gutter, or it
   would sit flush against the viewport edge. */
.cg-page-content--full .cg-page-content__header {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 64px 0;
}
@media (max-width: 1239px) {
  .cg-page-content--full .cg-page-content__header { padding: 40px 40px 0; }
}
.cg-404 { text-align: center; padding: 120px 0; }