/* ============================================
   ADVANCED MONKEY — BASE CSS
   Design tokens, reset, typography
   ============================================ */

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ─── DESIGN TOKENS ─── */
:root {
  /* Colours */
  --ink:    #111010;
  --paper:  #F4F1EA;
  --warm:   #EDE9E0;
  --accent: #C94F1A;
  --mid:    #6E6860;
  --faint:  #D9D4CA;

  /* Typography */
  --font-head:  'Plus Jakarta Sans', sans-serif;
  --font-body:  'DM Sans', sans-serif;

  /* Sizing */
  --nav-height: 64px;
  --max-width:  1440px;
  --pad-x:      48px;
  --pad-section: 96px;

  /* Radius */
  --radius:     5px;
  --radius-sm:  4px;

  /* Transitions */
  --transition: 0.18s ease;
}

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-optical-sizing: auto;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

/* ─── TYPOGRAPHY SCALE ─── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: clamp(40px, 5.5vw, 68px); }
h2 { font-size: clamp(28px, 3.5vw, 46px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: 18px; }
h5 { font-size: 15px; letter-spacing: 0.01em; }

p { line-height: 1.75; }

/* ─── UTILITY CLASSES ─── */

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section {
  padding: var(--pad-section) var(--pad-x);
}

/* Label / eyebrow text */
.label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}

/* Section header block */
.section-head {
  margin-bottom: 56px;
}
.section-head h2 {
  margin-bottom: 20px;
}
.section-head .sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--mid);
  max-width: 560px;
  line-height: 1.75;
}

/* Divider */
.rule {
  border: none;
  border-top: 1px solid var(--faint);
}

/* Grid utility */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Flex */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }

/* Text */
.text-center { text-align: center; }
.text-mid { color: var(--mid); }
.text-white { color: white; }
.text-accent { color: var(--accent); }
.fw-300 { font-weight: 300; }
.fw-500 { font-weight: 500; }

/* Visibility */
.hide-mobile { display: block; }
.show-mobile { display: none; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: #a83d10;
  border-color: #a83d10;
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-dark:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--faint);
}
.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-white {
  background: white;
  color: var(--ink);
  border-color: white;
}
.btn-white:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn-outline-white {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}
.btn-outline-white:hover {
  border-color: rgba(255,255,255,0.5);
  color: white;
}

/* ─── CARDS ─── */
.card {
  background: var(--paper);
  border: 1px solid var(--faint);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background var(--transition);
}
.card:hover { background: var(--warm); }

/* ─── DARK SECTION OVERRIDES ─── */
.bg-dark {
  background: var(--ink);
}
.bg-dark .label { color: rgba(255,255,255,0.4); }
.bg-dark h2, .bg-dark h3 { color: white; }
.bg-dark .sub { color: rgba(255,255,255,0.45); }

.bg-warm { background: var(--warm); }
.bg-accent { background: var(--accent); }

/* ─── SCROLL OFFSET FOR FIXED NAV ─── */
[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-up   { opacity: 0; animation: fadeUp  0.5s forwards; }
.anim-fade { opacity: 0; animation: fadeIn  0.6s forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  :root {
    --pad-x: 32px;
    --pad-section: 72px;
  }
}

@media (max-width: 768px) {
  :root {
    --pad-x: 24px;
    --pad-section: 56px;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hide-mobile { display: none; }
  .show-mobile { display: block; }
}