/* ============================================
   FIELDWORK — Shared Styles
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Tokens --- */
:root {
  --paper:   #F4F1EC;
  --ink:     #1B1917;
  --mint:    #87BE91;
  --slate:   #8A97A3;
  --burn:    #E05C2A;
  --dark:    #0F0E0C;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
* { border-radius: 0 !important; }

/* ============================================
   DOT GRID TEXTURE
   ============================================ */
.dot-grid {
  position: relative;
}
.dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(27,25,23,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.dot-grid > * { position: relative; z-index: 1; }

/* ============================================
   NAV
   ============================================ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 80px;
  border-bottom: 1px solid rgba(27,25,23,0.12);
  background-color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.nav__link:hover { opacity: 1; }
.nav__link--active {
  opacity: 1;
  font-weight: 600;
  border-bottom: 2px solid var(--burn);
  padding-bottom: 2px;
}
.nav__cta {
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: none;
  transition: background-color 0.15s;
}
.nav__cta:hover { background-color: var(--burn); }

/* ============================================
   HERO FLICKER ANIMATION
   ============================================ */
/* Flickering grid canvas (hero + work header) */
#hero-grid,
#work-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 8vw, 112px);
  color: var(--ink);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  padding: 100px 80px 80px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 56px;
}
.hero__sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(27,25,23,0.7);
  max-width: 460px;
}
.hero__cta {
  background-color: var(--burn);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 36px;
  border: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.hero__cta:hover { opacity: 0.88; }

/* ============================================
   SECTION SHARED
   ============================================ */
.section {
  padding: 80px 80px;
  border-top: 1px solid rgba(27,25,23,0.12);
}
.section--dark {
  background-color: var(--ink);
  border-top: 1px solid rgba(244,241,236,0.08);
}
.section__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}
.section--dark .section__label { color: rgba(244,241,236,0.3); }
.section__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.5vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.section--dark .section__heading { color: var(--paper); }

/* ============================================
   PROBLEM SECTION
   ============================================ */
.problem {
  display: flex;
  gap: 80px;
}
.problem__statement {
  flex: 1.1;
  border-left: 2px solid var(--burn);
  padding-left: 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.problem__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.problem__body p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(27,25,23,0.7);
}

/* ============================================
   SERVICES
   ============================================ */
.services__header {
  display: flex;
  align-items: baseline;
  gap: 32px;
  margin-bottom: 48px;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.service-card {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
}
.service-card--dark  { background-color: var(--ink); }
.service-card--burn  { background-color: var(--burn); }
.service-card--light { background-color: var(--paper); border: 1px solid rgba(27,25,23,0.15); }

.service-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}
.service-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
}
.service-card--burn .service-card__num  { color: rgba(244,241,236,0.7); }
.service-card--light .service-card__num { color: var(--slate); }

.service-card__duration {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(244,241,236,0.4);
}
.service-card--burn .service-card__duration  { color: rgba(244,241,236,0.65); }
.service-card--light .service-card__duration { color: var(--slate); }

.service-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--paper);
}
.service-card--light .service-card__title { color: var(--ink); }

.service-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(244,241,236,0.6);
  flex: 1;
  margin-bottom: 40px;
}
.service-card--burn .service-card__desc  { color: rgba(244,241,236,0.85); }
.service-card--light .service-card__desc { color: rgba(27,25,23,0.6); }

.service-card__footer {
  border-top: 1px solid rgba(244,241,236,0.15);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-card--burn .service-card__footer  { border-color: rgba(244,241,236,0.3); }
.service-card--light .service-card__footer { border-color: rgba(27,25,23,0.12); }

.service-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--paper);
}
.service-card__price sup {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.5;
  margin-left: 2px;
}
.service-card--light .service-card__price { color: var(--ink); }

.service-card__link {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint);
  transition: opacity 0.15s;
}
.service-card--burn .service-card__link  { color: rgba(244,241,236,0.9); }
.service-card--light .service-card__link { color: var(--ink); }
.service-card__link:hover { opacity: 0.7; }

/* ============================================
   PROCESS
   ============================================ */
.process__header {
  display: flex;
  align-items: baseline;
  gap: 32px;
  margin-bottom: 48px;
}
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.process-step {
  padding: 36px;
  border: 1px solid rgba(27,25,23,0.12);
}
.process-step--dark {
  background-color: var(--ink);
  border-color: transparent;
}
.process-step__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}
.process-step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--mint);
  line-height: 1;
}
.process-step__days {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 8px;
}
.process-step--dark .process-step__days { color: rgba(244,241,236,0.35); }
.process-step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.process-step--dark .process-step__title { color: var(--paper); }
.process-step__desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(27,25,23,0.6);
}
.process-step--dark .process-step__desc { color: rgba(244,241,236,0.55); }

/* ============================================
   FIELDWORK OS
   ============================================ */
.os {
  background-color: var(--ink);
  border-top: none;
}
.os__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 48px;
}
.os__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 12px;
}
.os__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.5vw, 48px);
  color: var(--paper);
  letter-spacing: -0.02em;
  line-height: 1;
}
.os__sub {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(244,241,236,0.4);
  max-width: 340px;
  padding-top: 8px;
}
.terminal {
  background-color: var(--dark);
  border: 1px solid rgba(244,241,236,0.08);
  overflow: hidden;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(244,241,236,0.08);
}
.terminal__dot {
  width: 12px; height: 12px;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.terminal__dot--red    { background-color: var(--burn); }
.terminal__dot--yellow { background-color: var(--mint); }
.terminal__dot--grey   { background-color: rgba(244,241,236,0.15); }
.terminal__title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(244,241,236,0.3);
  margin-left: 12px;
  letter-spacing: 0.04em;
}
.terminal__body {
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.terminal__prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.terminal__path    { font-family: var(--font-mono); font-size: 13px; color: var(--mint); }
.terminal__dollar  { font-family: var(--font-mono); font-size: 13px; color: rgba(244,241,236,0.3); }
.terminal__command { font-family: var(--font-mono); font-size: 13px; color: var(--paper); }
.terminal__row {
  display: flex;
  padding: 14px 18px;
  gap: 0;
}
.terminal__row--active {
  background-color: rgba(201,169,110,0.08);
  border-left: 2px solid var(--mint);
}
.terminal__skill {
  font-family: var(--font-mono);
  font-size: 13px;
  width: 260px;
  flex-shrink: 0;
  color: rgba(244,241,236,0.65);
}
.terminal__row--active .terminal__skill { color: var(--mint); }
.terminal__desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(244,241,236,0.3);
}
.terminal__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.terminal__meta { font-family: var(--font-mono); font-size: 12px; color: rgba(244,241,236,0.2); }
.terminal__status { font-family: var(--font-mono); font-size: 12px; color: var(--burn); }

.os__beta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}
.os__beta-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(244,241,236,0.35);
}
.os__beta-dot {
  width: 6px; height: 6px;
  border-radius: 50% !important;
  background-color: var(--burn);
  flex-shrink: 0;
}
.os__beta-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--mint);
  letter-spacing: 0.04em;
  transition: opacity 0.15s;
}
.os__beta-cta:hover { opacity: 0.7; }

/* ============================================
   CTA STRIP
   ============================================ */
.cta-strip {
  background-color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 80px;
  border-top: 1px solid rgba(244,241,236,0.08);
}
.cta-strip__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 12px;
}
.cta-strip__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--paper);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cta-strip__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}
.btn--burn {
  background-color: var(--burn);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 40px;
  border: none;
  white-space: nowrap;
  transition: opacity 0.15s;
  display: inline-block;
}
.btn--burn:hover { opacity: 0.88; }
.btn--ghost-light {
  border: 1px solid rgba(244,241,236,0.25);
  color: rgba(244,241,236,0.7);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 18px 40px;
  white-space: nowrap;
  transition: border-color 0.15s;
  display: inline-block;
}
.btn--ghost-light:hover { border-color: rgba(244,241,236,0.5); }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background-color: var(--ink);
  border-top: 1px solid rgba(244,241,236,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 80px;
}
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.footer__tagline {
  font-size: 13px;
  color: rgba(244,241,236,0.3);
}
.footer__links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.footer__link {
  font-size: 13px;
  color: rgba(244,241,236,0.3);
  transition: color 0.15s;
}
.footer__link:hover { color: rgba(244,241,236,0.7); }