@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&family=Inter:wght@300;400;500&display=swap');

:root {
  --charcoal: #0F0F10;
  --ivory: #F7F5F0;
  --sage: #A7B1A5;
  --pink: #FF208F;
  --graphite: #6A6A6A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--ivory);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 640px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Nav */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.nav-logo { display: flex; align-items: center; gap: 14px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.nav-logo svg { width: 14px; height: 26px; color: var(--pink); }
.nav-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav-links a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-links a.active { color: var(--pink); }
.lang-switch { display: flex; gap: 6px; margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(15,15,16,0.15); }
.sec-charcoal .lang-switch, .footer .lang-switch { border-left: 1px solid rgba(247,245,240,0.2); }
.lang-switch a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.04em; opacity: 0.5; }
.lang-switch a.active { opacity: 1; color: var(--pink); }

/* Section rhythm */
.sec { padding: 64px 0; }
.sec-charcoal { background: var(--charcoal); color: var(--ivory); }
.sec-charcoal .wrap { max-width: 640px; }
.sec-sage { background: var(--sage); color: var(--charcoal); }

.eyebrow { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 18px; display: block; }
.sec-charcoal .eyebrow { color: var(--pink); }

h1, h2, h3 { font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -0.01em; line-height: 1.02; text-transform: uppercase; }

/* Hero */
.hero { text-align: left; padding: 56px 0 64px; }
.hero-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.hero-logo svg { width: 18px; height: 34px; color: var(--pink); }
.hero-logo span { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; }
.hero h1 { font-size: clamp(3rem, 16vw, 4.2rem); }
.dot { color: var(--pink); }
.hero-sub { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; color: var(--graphite); max-width: 36ch; margin-top: 26px; }
.hero-cta { display: inline-block; margin-top: 30px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1.5px solid var(--pink); padding-bottom: 4px; }

/* Generic headline block */
.block h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); margin-bottom: 20px; }
.block p { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; max-width: 42ch; color: var(--graphite); }
.sec-charcoal .block p { color: var(--sage); }

/* Pillars */
.pillars { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
.pillar-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.pillar-name .slash { color: var(--pink); }
.pillar-desc { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; color: var(--graphite); }
.sec-charcoal .pillar-desc { color: var(--sage); }

/* Project cards */
.proj-card { padding: 28px 0; border-top: 1px solid rgba(15,15,16,0.12); }
.sec-charcoal .proj-card { border-top: 1px solid rgba(247,245,240,0.15); }
.proj-cat { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); margin-bottom: 8px; }
.proj-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; }
.proj-place { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 12.5px; color: var(--graphite); margin-top: 2px; }
.sec-charcoal .proj-place { color: var(--sage); }
.proj-line { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14px; margin-top: 12px; max-width: 40ch; }
.proj-link { display: inline-block; margin-top: 14px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--pink); padding-bottom: 3px; }

/* Manifesto */
.manifesto-lines h2 { font-size: clamp(2rem, 11vw, 3rem); margin-bottom: 6px; }
.manifesto-close { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 15px; color: var(--sage); margin-top: 30px; }
.manifesto-cta { margin-top: 20px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; }
.manifesto-cta .slash { color: var(--pink); }

/* Steps */
.step { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(15,15,16,0.12); }
.step-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; color: var(--pink); flex-shrink: 0; width: 40px; }
.step-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; margin-bottom: 4px; }
.step-desc { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; color: var(--graphite); }

/* Services columns */
.svc-group { margin-bottom: 30px; }
.svc-group:last-child { margin-bottom: 0; }
.svc-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; margin-bottom: 10px; }
.svc-list { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; color: var(--graphite); line-height: 1.9; }

/* Featured project */
.featured { text-align: left; }
.featured h2 { font-size: clamp(2rem, 11vw, 3rem); }
.featured-stats { margin-top: 22px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--sage); text-transform: none; letter-spacing: 0; }
.featured-stats b { color: var(--ivory); font-weight: 900; }

/* Journal */
.journal-item { padding: 22px 0; border-top: 1px solid rgba(15,15,16,0.12); }
.journal-cat { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); }
.journal-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; margin-top: 6px; text-transform: none; letter-spacing: -0.005em; }

/* Contact */
.contact-hero { text-align: left; padding: 88px 0; }
.contact-hero h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
.contact-email { display: inline-block; margin-top: 28px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; border-bottom: 2px solid var(--pink); padding-bottom: 4px; }
.contact-socials { margin-top: 30px; display: flex; gap: 18px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sage); }

/* Footer */
.footer { padding: 44px 0 40px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-bottom: 30px; }
.footer-logo { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; }
.footer-tag { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 12.5px; color: var(--sage); margin-top: 6px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-family: 'Inter', sans-serif; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage); }
.footer-meta { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--graphite); letter-spacing: 0.03em; padding-top: 24px; border-top: 1px solid rgba(247,245,240,0.12); }

@media (prefers-reduced-motion: no-preference) {
  .fade-in { opacity: 0; animation: rise 0.7s ease-out forwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

/* Proof / stats */
.proof-grid { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; }
.proof-item { border-top: 1px solid rgba(15,15,16,0.12); padding-top: 18px; }
.proof-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(2.2rem, 12vw, 3.4rem); line-height: 1; letter-spacing: -0.01em; }
.proof-label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); margin-top: 8px; }

/* Steps: sub-list under a step (used by The Kiiva Model) */
.step-sublist { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 12.5px; color: var(--graphite); margin-top: 8px; letter-spacing: 0.01em; }
.sec-charcoal .step-sublist { color: var(--sage); }
.sec-charcoal .step { border-top: 1px solid rgba(247,245,240,0.15); }

/* Flow / escalation line (Experience -> Community -> System -> Scale) */
.flow-line { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pink); }
.escalation { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.escalation-line { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 5vw, 1.5rem); text-transform: none; letter-spacing: -0.005em; }
.escalation-line b { color: var(--pink); }

/* Where we move: network list */
.network-group { margin-top: 30px; }
.network-group:first-child { margin-top: 0; }
.network-title { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-bottom: 10px; }
.sec-charcoal .network-title { color: var(--sage); }
.network-list { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.9; text-transform: uppercase; }

/* What could move: word list */
.moves-list { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 8px; }
.moves-list span { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 7vw, 2rem); text-transform: uppercase; }
.moves-list span:not(:last-child)::after { content: '/'; color: var(--pink); margin-left: 16px; }

/* Imagine this: narrative block */
.imagine-tag { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); font-style: italic; margin-bottom: 22px; display: block; }
.imagine-lines p { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; margin-bottom: 10px; }
.imagine-lines .imagine-strong { font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; margin-top: 20px; }
.imagine-final { margin-top: 26px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 6vw, 2rem); text-transform: uppercase; }

/* Case studies inside project cards */
.case-block { margin-top: 16px; }
.case-label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-bottom: 4px; }
.sec-charcoal .case-label { color: var(--sage); }
.case-text { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14px; max-width: 44ch; }
.case-results { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0; margin-top: 4px; }

/* Contact form */
.contact-form { margin-top: 44px; display: flex; flex-direction: column; gap: 24px; max-width: 44ch; }
.form-field label { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.form-field input[type="text"], .form-field input[type="email"], .form-field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(247,245,240,0.3);
  color: var(--ivory); font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; padding: 8px 0; resize: none;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-bottom-color: var(--pink); }
.form-options { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.form-options label { display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; color: var(--sage); text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.form-options input[type="radio"] { accent-color: var(--pink); }
.form-submit { align-self: flex-start; margin-top: 8px; background: transparent; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1.5px solid var(--pink); padding-bottom: 4px; color: var(--ivory); }