/* ============================================================================
   NatWorks — Institutional Intelligence design layer
   Source of truth: DESIGN.md (tokens) + pagesData.ts (per-page redlines)
   Loaded AFTER each page's embedded <style>, so these rules win on equal
   specificity. Pure styling only — no visible text is added or changed.
   Spacing resolution (confirmed): 120px section rhythm (responsive),
   32px internal, 8px in lists/cards, 64/24px outer margins, 1280px max.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
   1. Tokens — re-point the variables the existing rules already consume
   --------------------------------------------------------------------------- */
:root {
  /* Type families */
  --font-display: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Soft-Sharp radius scale (4px controls / 8px cards — never pills) */
  --radius-xl: 10px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;

  /* Structured-data depth: tonal layers + 1px borders, shadows nearly gone */
  --shadow-soft: 0 1px 2px rgba(2, 8, 23, 0.05);
  --shadow-card: 0 4px 14px rgba(2, 8, 23, 0.06);
  --shadow-premium: 0 10px 30px rgba(2, 8, 23, 0.10);

  /* Layout */
  --container: 1280px;
  --nw-margin-desktop: 64px;
  --nw-margin-mobile: 24px;

  /* Spacing rhythm */
  --nw-section: 120px;
  --nw-internal: 32px;
  --nw-compact: 8px;

  /* Institutional accents (already in the live palette) */
  --forest-green: #006d30;
  --action-green: #22c55e;
  --slate-border: #e2e8f0;
  --ink-text: #0f172a;
}

/* ---------------------------------------------------------------------------
   2. Base typography — engineered, high-contrast, tighter rhythm
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  line-height: 1.05;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.14;
}

h3 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  line-height: 1.6;
}

.lead {
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   3. Layout container & section rhythm (120px responsive)
   --------------------------------------------------------------------------- */
.container {
  width: min(var(--container), calc(100% - (2 * var(--nw-margin-desktop))));
  margin-inline: auto;
}

.section {
  padding: var(--nw-section) 0;
}

.section-header {
  margin: 0 auto 64px;
}

/* internal grouping — 32px compact rhythm */
.grid-2,
.grid-3 {
  gap: var(--nw-internal);
}

@media (max-width: 1024px) {
  .section { padding: 88px 0; }
}

@media (max-width: 768px) {
  .container {
    width: min(var(--container), calc(100% - (2 * var(--nw-margin-mobile))));
  }
  .section { padding: 64px 0; }
  .section-header { margin: 0 auto 40px; }
}

@media (max-width: 480px) {
  .section { padding: 56px 0; }
}

/* ---------------------------------------------------------------------------
   4. Labels, eyebrows, codes — JetBrains Mono technical signature
   --------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

/* opt-in monospace label utility for service codes (S1–S5), step numbers, stats */
.nw-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.nw-mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-green);
}

/* ---------------------------------------------------------------------------
   5. Components — soft-sharp shapes, border-based depth
   --------------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-border);
  box-shadow: var(--shadow-soft);
}

/* DESIGN.md: hover = border/background shift, NOT a lift */
.card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--action-green);
}

.card-icon {
  border-radius: var(--radius-md);
}

/* Buttons: sharp, compact (kill the pill, keep the brand green CTA crisp) */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.nav-cta {
  border-radius: var(--radius-sm);
}

.nav-cta {
  min-height: 44px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.18);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.24);
}

/* Chips / tags — subtle tint, no pill, mono per DESIGN.md taxonomy spec */
.chip,
.tag,
.pill {
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   6. Semantic-structure helpers (the "indexing" improvement)
   sr-only is an ALLOWED invisible addition; numbered grids use <ol>.
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* <ol>/<li> used for sequential grids must not look like a browser list */
ol.nw-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.nw-grid > li {
  list-style: none;
}

/* Data table styling for the news/intelligence listing (pagesData news redline) */
table.nw-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

table.nw-table th,
table.nw-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--slate-border);
  vertical-align: middle;
}

table.nw-table th {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest-green);
}

/* list items in dense lists — 8px compact rhythm */
.nw-list > li + li {
  margin-top: var(--nw-compact);
}

/* Contact form — institutional inputs; replaces the audited "bright yellow"
   focus with a subtle slate→forest-green state (pagesData contact redline). */
.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--forest-green);
  box-shadow: 0 0 0 3px rgba(0, 109, 48, 0.14);
}

/* ---------------------------------------------------------------------------
   8. Hero — calmer type, cleaner positioning over the cinematic video
   The original .hero h1 out-specified the global type reset and stayed
   cramped (line-height .98 / -0.055em). Reposition the copy column and let
   the headline breathe with balanced, natural line breaks.
   --------------------------------------------------------------------------- */
.hero-copy {
  max-width: 660px;
  padding-left: 0;            /* remove the arbitrary 48px shove off the grid edge */
}

.hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;        /* even, intentional line breaks (replaces the hard <br>) */
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

.hero-subcopy {
  margin-top: 22px;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.82);
}

.hero-pill {
  border-radius: var(--radius-md);   /* de-pill to match the institutional system */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 9px 14px;
}

.hero-actions {
  margin-top: 32px;
  gap: 14px;
}

@media (max-width: 768px) {
  .hero h1 { font-size: clamp(2.1rem, 8vw, 2.9rem); }
  .hero-copy { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   9. Page templates — PROJECT pages (carbon / mangrove / partnership)
   They use their own .project-* / .kpi-card classes, so harmonize explicitly.
   --------------------------------------------------------------------------- */
.kpi-card {
  border-radius: var(--radius-lg);
}

.kpi-card strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.project-breadcrumbs {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.project-lead {
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   10. Page templates — ARTICLE pages (news story template)
   --------------------------------------------------------------------------- */
.article-cat {
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
}

.article-hero-content h1 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.article-body h2 {
  letter-spacing: -0.02em;
}

.stat-item {
  border-radius: var(--radius-lg);
}

.stat-item strong {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.author-box {
  border-radius: var(--radius-lg);
}

.back-btn {
  border-radius: var(--radius-md);
}

.article-divider {
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   11. Page templates — NEWS index (news.html)
   --------------------------------------------------------------------------- */
.news-card {
  border-radius: var(--radius-lg);
}

.news-card-cat {
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
}

/* page heros across project/news pages kept weight 900 / -0.04em — calm them */
.page-hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   12. Our Team — people grid (new homepage section, between CTA and Contact)
   --------------------------------------------------------------------------- */
/* staggered rows — 3 / 2 / 3 (centered), not a uniform line-by-line grid */
.team-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nw-internal);
}

.team-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nw-internal);
  width: 100%;
}

.team-card {
  flex: 0 1 260px;
  max-width: 290px;
  text-align: center;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #064e3b, var(--action-green));
  overflow: hidden;
  flex-shrink: 0;
}

img.team-avatar { object-fit: cover; }

.team-name {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.team-role {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--forest-green);
  margin-bottom: 12px;
}


/* team.html dedicated-page hero (sits under the fixed project-page navbar) */
.team-hero {
  position: relative;
  padding: 150px 0 84px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #06101d 0%, #0c1b30 45%, #0d6b3c 140%);
}

.team-hero .section-header {
  max-width: 720px;
  margin: 0 auto;
}

.team-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.3vw, 3.3rem);
  line-height: 1.08;
}

.team-hero .eyebrow {
  color: var(--green-400);
  justify-content: center;
}

.team-hero .lead {
  color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------------------
   7. Technical numerals & codes → JetBrains Mono (DESIGN.md signature)
   Applied to existing classes so NO markup/text changes are needed.
   --------------------------------------------------------------------------- */
[data-counter],
.method-step,
.advantage-number,
.workflow-step,
.card-icon {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.method-step,
.advantage-number,
.workflow-step {
  color: var(--forest-green);
  font-weight: 600;
}

/* Approach grid had no base display:grid (cards stacked). Make it a real
   responsive grid. This stylesheet loads after the pages' inline styles, so
   the unconditional 4-col rule would override their responsive media queries
   — the breakpoints must be restated here. */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nw-internal);
}

@media (max-width: 1100px) {
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .method-grid { grid-template-columns: 1fr; }
}

/* === Skip link (keyboard users jump past the fixed header) === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  background: var(--forest-green, #006d30);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Contact form submit: the global .btn-primary is a white gradient meant for
   dark hero/CTA bands — on the light contact panel it washes out. Use the
   brand green here. */
.contact-form .btn-primary {
  background: var(--green-600, #16a34a);
  color: #fff;
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.25);
}
.contact-form .btn-primary:hover {
  background: var(--green-700, #15803d);
}