/* ============================================================
   ACT (Anti-Climatic) — Colors & Type Foundations
   Climate / sustainability consulting brand.
   Single source of truth for color + type CSS variables.

   Note: Montserrat (the brand typeface) is loaded from Google Fonts
   in index.html. The original design self-hosted a variable TTF; the
   CDN link renders identically and keeps the repo light.
   ============================================================ */

:root {
  /* ---- Brand palette (from the brand guide swatches) ---- */
  --act-moss:     #5A6146; /* deep olive — primary brand color    */
  --act-sage:     #9AA592; /* muted green — secondary / supportive */
  --act-bone:     #E7E4DA; /* warm off-white — surfaces, dividers  */
  --act-stone:    #B39F91; /* taupe — the morel symbol, warm accent */
  --act-charcoal: #2F2F2F; /* near-black — primary text            */

  /* Paper is the page ground seen across the guide — a touch
     lighter & warmer than bone. */
  --act-paper:    #F4F2EC;
  --act-white:    #FFFFFF;

  /* ---- Derived tints / shades (oklch-harmonized) ---- */
  --act-moss-700:   #474D37; /* moss hover / pressed                 */
  --act-moss-300:   #7C8268; /* moss on dark, muted moss text        */
  --act-sage-300:   #BCC4B5; /* sage tint — soft fills, hover ground */
  --act-sage-600:   #7E8A75; /* sage text on light                   */
  --act-stone-300:  #D4C7BC; /* stone tint                           */
  --act-bone-dark:  #D8D4C8; /* bone divider / border                */
  --act-charcoal-soft: #4A4A48; /* softened body text on paper       */

  /* ---- Semantic colors ---- */
  --color-bg:           var(--act-paper);
  --color-surface:      var(--act-white);
  --color-surface-alt:  var(--act-bone);
  --color-fg:           var(--act-charcoal);
  --color-fg-muted:     #6E6F69;   /* warm grey for secondary text   */
  --color-fg-subtle:    #9A9B93;   /* captions, meta                 */
  --color-primary:      var(--act-moss);
  --color-primary-fg:   var(--act-paper);
  --color-accent:       var(--act-sage);
  --color-warm:         var(--act-stone);
  --color-border:       var(--act-bone-dark);
  --color-border-strong:#C9C4B6;
  --color-ring:         var(--act-sage);

  /* Status (kept earthy, in-palette) */
  --color-success: #5A6146;
  --color-warning: #B08948;
  --color-danger:  #9E5B4C;

  /* ---- Typography ---- */
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  4rem;      /* 64px */
  --text-6xl:  5.5rem;    /* 88px */

  /* Letter-spacing — the brand leans on generous tracking for
     display + eyebrow text (see the "ANTI-CLIMATIC" lockup). */
  --tracking-tightish: -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;  /* eyebrows / labels             */
  --tracking-display:  0.18em;  /* the ACT wordmark feel         */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Shadows — soft, low, warm-grey. The brand is calm &
     organic; elevation stays subtle. ---- */
  --shadow-xs: 0 1px 2px rgba(47,47,47,0.05);
  --shadow-sm: 0 1px 3px rgba(47,47,47,0.07), 0 1px 2px rgba(47,47,47,0.04);
  --shadow-md: 0 4px 14px rgba(47,47,47,0.08);
  --shadow-lg: 0 12px 32px rgba(47,47,47,0.10);
  --shadow-focus: 0 0 0 3px rgba(154,165,146,0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Base / reset
   ============================================================ */
html, body { margin: 0; padding: 0; }
body {
  background: var(--act-paper);
  font-family: var(--font-sans);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--act-moss); text-decoration: none; }
a:hover { color: var(--act-moss-700); }
::selection { background: var(--act-sage-300); color: var(--act-charcoal); }
input, textarea, button { font-family: var(--font-sans); }
p { text-wrap: pretty; }
img { max-width: 100%; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; width: 100%; }

/* Image "slots": real photos use .cover; missing/placeholder art uses .img-ph */
.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-ph {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 120% at 20% 0%, var(--act-sage-300), transparent 60%),
    linear-gradient(135deg, var(--act-moss) 0%, var(--act-sage-600) 55%, var(--act-stone) 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.img-ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('assets/act-pattern.svg');
  background-size: 300px;
  opacity: 0.28;
  mix-blend-mode: soft-light;
}
.img-ph > span {
  position: relative;
  margin: 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,242,236,0.85);
}

/* ============================================================
   SPA page visibility (driven by app.js)
   ============================================================ */
[data-page] { display: none; }
[data-page].is-active { display: block; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   Responsive — collapse the desktop grids on tablet / mobile.
   The design is desktop-first; these keep it usable narrow.
   ============================================================ */
@media (max-width: 900px) {
  .wrap { padding: 0 22px; }
  .nav-links { display: none !important; }
  .nav-menu-btn { display: inline-flex !important; }
  .grid-3, .grid-2, .hero-split, .about-grid, .contact-grid,
  .svc-block, .work-card, .insight-hero { grid-template-columns: 1fr !important; }
  .grid-4, .grid-6, .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Reverse-media work cards: keep the image above the text when stacked */
  .work-card { direction: ltr; }
  .work-card .work-media { order: -1; }
  .work-card .work-media, .insight-hero .insight-media { min-height: 240px !important; }
  .stat-row { flex-wrap: wrap; gap: 24px !important; }
  h1 { font-size: 40px !important; }
  .about-sticky { position: static !important; }
  .svc-block .svc-list-col { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--color-border); padding-top: 24px !important; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  h1 { font-size: 34px !important; }
  .hero-cta { flex-direction: column; align-items: stretch; }
}