/* Codiji Site — base typography. Manrope everywhere; weight carries hierarchy. */

html, body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-fg);
  font-weight: 400;
}

::selection {
  background: var(--color-primary);
  color: #fff;
}

p { max-width: 70ch; }

/* ---- Scroll offset so any heading/anchor never lands under the fixed
   navbar (~4.5rem tall) when scrolled/jumped to — browser "find in page",
   fragment links, focus, etc. all respect scroll-margin-top. ---- */
h1, h2, h3, h4, [id] {
  scroll-margin-top: 6rem;
}

/* ---- Big page-level H1s (Work, Services, Process, About, Contact, 404) ----
   clamp() keeps this scaling smoothly between the old mobile/tablet/desktop
   breakpoint values (~3.75rem/6rem/8rem) instead of jumping, and caps it at
   7rem so it can never grow past that on ultra-wide viewports. */
.h-display {
  font-weight: 800;
  font-size: clamp(2.5rem, 1.1rem + 9vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 2rem;
}

/* ---- Case-study H1 (Supportivo / Lawjobs) — one notch smaller ---- */
.h-display-lg {
  font-weight: 800;
  font-size: clamp(2rem, 1.25rem + 7.4vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

/* ---- Shared heading weight/tracking; size set by a modifier ---- */
.h-heading {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Home's mid-page section titles: "Featured Work", "Our Capabilities"... */
.h-heading--section {
  font-size: 2.25rem;
  line-height: 1.1;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .h-heading--section { font-size: 3.75rem; } }

/* Case-study H2s: "The Challenge", "The Solution", "Results" */
.h-heading--case {
  font-size: 1.875rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* ---- Page intro block (title + lead paragraph), used on every inner page ----
   padding-top clears the fixed navbar (~4.5rem tall) with room to spare, since
   .navbar has no document flow height of its own to push this content down. */
.page-intro {
  max-width: var(--container-max);
  margin: 0 auto 6rem;
  padding: 7rem var(--container-pad) 0;
}
@media (min-width: 768px)  { .page-intro { padding-top: 8rem; } }
@media (min-width: 1024px) { .page-intro { padding-top: 9rem; } }
.page-intro__lead {
  font-size: 1.25rem;
  color: var(--color-muted-fg);
  max-width: 48rem;
}
@media (min-width: 768px) { .page-intro__lead { font-size: 1.5rem; } }

/* ---- Small link/tag helpers reused across pages ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  transition: color var(--dur-fast) var(--ease);
}
.link-arrow:hover { color: #fff; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted-fg);
  margin-bottom: 3rem;
  transition: color var(--dur-fast) var(--ease);
}
.back-link:hover { color: var(--color-primary); }

.arrow-icon { display: inline-block; }

.chip {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.chip--primary {
  background: var(--color-primary);
  color: #fff;
}

.tag-outline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  margin-left: 1rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: rgba(245, 243, 238, 0.9);
}
.feature-list li { position: relative; }
.feature-list li::before {
  content: '';
  position: absolute;
  left: -1.6rem;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-primary);
  border-radius: 50%;
}
.feature-list--results {
  border-left-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}