@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500..900,50..100,0..1&family=Inter:wght@400;500;650;750;850;900&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  --paper: #f4efe3;
  --paper-2: #ece2d0;
  --ink: #10222c;
  --muted: #55707b;
  --purple: #10222c;
  --purple-2: #14253a;
  --acid: #b8ed5d;
  --green: #287b82;
  --orange: #ff6f3d;
  --amber: #ffc947;
  --cyan: #4bd4e0;
  --violet: #8371ff;
  --rose: #ff6d8d;
  --line: rgba(16, 34, 44, .16);
  --card: rgba(255, 250, 240, .82);
  --shadow: 0 24px 60px rgba(16, 34, 44, .16);
  --hard-shadow: 8px 8px 0 rgba(16, 34, 44, .92);
  --radius: 34px;
  --radius-sm: 22px;
}

html { background: var(--paper); }

body {
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.58;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 111, 61, .16), transparent 28rem),
    radial-gradient(circle at 86% 4%, rgba(75, 212, 224, .20), transparent 25rem),
    linear-gradient(180deg, #f6efe0 0%, #f4efe3 46%, #ece2d0 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(16, 34, 44, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 34, 44, .10) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}

::selection { background: var(--acid); color: var(--ink); }
p { color: #314856; font-weight: 540; }
.small-note { color: #55707b; }
.container { width: min(var(--max), calc(100% - 44px)); }

/* Navigation */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0;
  background: rgba(246, 239, 224, .96);
  border-bottom: 1px solid rgba(16, 34, 44, .14);
  backdrop-filter: blur(16px);
}

.nav-inner {
  min-height: 76px;
  width: min(1240px, calc(100% - 40px));
  gap: 20px;
}

.logo-img { height: 46px; }

.nav-links {
  gap: 6px;
  padding: 5px;
  border: 1.5px solid var(--ink);
  background: rgba(255, 250, 240, .74);
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(16, 34, 44, .9);
}

.nav-links a {
  padding: 10px 13px;
  color: #435d69;
  font: 900 11px/1 "Space Grotesk", Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav-links a:hover { background: var(--acid); color: var(--ink); transform: none; }
.nav-links a.active { background: var(--ink); color: #fffaf0; }

.nav-cta {
  padding: 13px 16px;
  border: 2px solid var(--ink);
  background: var(--acid);
  color: var(--ink);
  font: 900 11px/1 "Space Grotesk", Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 5px 5px 0 rgba(16, 34, 44, .92);
}

.nav-cta:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(16, 34, 44, .92); }

/* Editorial typography */
h1,
.page-title,
.hero-copy h1,
.work-hero-copy h1,
.section-title,
.mega-line,
.dark-slab h2,
.final-work-panel h2 {
  font-family: "Archivo Black", "Arial Black", Inter, sans-serif;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: -.087em;
  text-wrap: balance;
}

.hero-copy h1,
.work-hero-copy h1,
.page-hero-lite h1 {
  color: var(--orange);
  text-shadow: 5px 5px 0 var(--acid);
}

.work-hero-copy h1,
.page-hero-lite h1 {
  font-size: clamp(3.4rem, 6vw, 5.5rem);
  line-height: .84;
}

.section-title {
  font-size: clamp(2.5rem, 5.7vw, 5.8rem);
  line-height: .86;
  margin-bottom: 30px;
}

.lead,
.question,
.compact-card h3,
.audience-columns h3,
.editorial-card h2,
.panel h3,
.card h3,
.team-card h3,
.service-line h3,
.work-service-card h3,
.route-map-row h3,
.form-card h2,
.contact-aside h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 900;
  letter-spacing: -.06em;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 250, 240, .78);
  color: var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 34, 44, .88);
  font: 900 11px/1 "Space Grotesk", Inter, sans-serif;
  letter-spacing: .12em;
}

.eyebrow::before,
.section-kicker::before {
  width: 9px;
  height: 9px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(255, 111, 61, .16);
}

/* Buttons and links */
.btn {
  min-height: 50px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--acid);
  color: var(--ink);
  box-shadow: 6px 6px 0 rgba(16, 34, 44, .95);
  font: 900 12px/1 "Space Grotesk", Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 rgba(16, 34, 44, .95); }
.btn.secondary { background: #fffaf0; color: var(--ink); border-color: var(--ink); }
.btn.ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn.orange { background: var(--orange); color: var(--ink); }
.mini-link { color: var(--ink); font: 900 12px/1 "Space Grotesk", Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.mini-link::after { color: var(--orange); }

/* Shared cards */
.panel,
.card,
.compact-card,
.editorial-card,
.team-card,
.form-card,
.calendar-box,
.contact-aside,
.micro-table,
.output-ledger,
.fit-board,
.route-map-card,
.service-line,
.work-service-card,
.final-work-panel {
  border: 2px solid var(--ink);
  border-radius: 30px;
  background: rgba(255, 250, 240, .84);
  box-shadow: var(--hard-shadow);
  backdrop-filter: blur(14px);
}

.panel::before,
.card::before,
.question-card::before {
  height: 6px;
  background: linear-gradient(90deg, var(--orange), var(--amber), var(--acid), var(--cyan));
}

.compact-card,
.editorial-card,
.team-card,
.work-service-card,
.service-line { transition: transform .2s ease, box-shadow .2s ease; }

.compact-card:hover,
.editorial-card:hover,
.team-card:hover,
.work-service-card:hover,
.service-line:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 rgba(16, 34, 44, .92); }

.list li::before { background: var(--acid); border-color: var(--ink); }

/* Home */
.hero-v3 { padding-top: 72px; }
.hero-v3-grid { align-items: stretch; }
.hero-copy h1 { line-height: .82; }
.hero-positioning { border-left: 8px solid var(--orange); background: linear-gradient(90deg, rgba(255, 111, 61, .12), transparent); }

.radar-console,
.work-command {
  border: 2px solid var(--ink);
  border-radius: 38px;
  background: var(--ink);
  color: #fffaf0;
  box-shadow: var(--shadow);
}

.radar-console::before,
.work-command::before {
  background:
    linear-gradient(rgba(255, 250, 240, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 250, 240, .08) 1px, transparent 1px);
  background-size: 38px 38px;
}

.console-top span,
.command-top span { color: rgba(255, 250, 240, .68); }
.console-top b,
.command-top b { color: var(--ink); background: var(--acid); border: 1px solid var(--ink); }
.scan-ring { border-color: rgba(255, 250, 240, .18); }
.ring-3 { background: rgba(184, 237, 93, .09); }
.scan-line { background: linear-gradient(90deg, var(--acid), transparent); }
.radar-core { background: var(--acid); color: var(--ink); border: 2px solid #fffaf0; box-shadow: 7px 7px 0 var(--orange); }
.radar-node { background: #fffaf0; color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--cyan); }
.console-bottom,
.console-bottom span { color: rgba(255, 250, 240, .7); }
.console-bottom b { color: var(--acid); }

.strip { border-block: 2px solid var(--ink); background: var(--ink); }
.strip span:nth-child(3n+2) { color: var(--acid); }
.strip span:nth-child(3n) { color: var(--cyan); }

.decision-strip { border-bottom: 2px solid var(--ink); background: var(--acid); }
.decision-strip-grid > div + div { border-left-color: var(--ink); }
.decision-strip-grid span { color: #435d69; }
.decision-strip-grid strong { color: var(--ink); }

.compact-card { border-top-width: 2px; }
.compact-card > span,
.audience-columns article > span { color: var(--orange); font: 900 11px/1 "Space Grotesk", Inter, sans-serif; letter-spacing: .12em; }

.audience-columns article {
  border: 2px solid var(--ink);
  background: #fffaf0;
  box-shadow: 6px 6px 0 rgba(16, 34, 44, .9);
}

.micro-table > div,
.output-ledger article { border-bottom-color: rgba(16, 34, 44, .18); }
.micro-table strong,
.output-ledger article > span { color: var(--orange); }

.credibility-stage,
.work-process-band {
  background:
    radial-gradient(circle at 12% 20%, rgba(184, 237, 93, .22), transparent 20rem),
    linear-gradient(135deg, var(--ink), #152b42);
  border-block: 2px solid var(--ink);
}

.credibility-stage .mega-line,
.credibility-stage .section-kicker,
.work-process-band .section-title,
.work-process-band .section-kicker { color: #fffaf0; }
.credibility-stage .section-kicker,
.work-process-band .section-kicker { background: rgba(255, 250, 240, .1); border-color: #fffaf0; box-shadow: 4px 4px 0 var(--acid); }
.credibility-stage .panel { background: #fffaf0; color: var(--ink); }

.editorial-card.dark-card { background: var(--ink); color: #fffaf0; border-color: var(--ink); box-shadow: 8px 8px 0 var(--orange); }
.editorial-card.dark-card h2,
.editorial-card.dark-card p,
.editorial-card.dark-card .mini-link { color: #fffaf0; }
.route-mosaic a { border: 2px solid var(--ink); background: #fffaf0; box-shadow: 5px 5px 0 rgba(16, 34, 44, .88); }
.route-mosaic a:hover { background: var(--acid); transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(16, 34, 44, .88); }
.route-mosaic span { color: var(--orange); }

.dark-slab,
.final-work-panel {
  border: 2px solid var(--ink);
  border-radius: 42px;
  background:
    radial-gradient(circle at 12% 12%, rgba(184, 237, 93, .85), transparent 22%),
    radial-gradient(circle at 90% 16%, rgba(255, 111, 61, .64), transparent 22%),
    linear-gradient(135deg, #10222c, #152b42);
  box-shadow: var(--shadow);
}

.dark-slab h2,
.final-work-panel h2 { color: #fffaf0; }
.dark-slab p,
.final-work-panel p { color: rgba(255, 250, 240, .82); }

/* Services */
.work-hero { padding-top: 72px; }
.work-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(400px, .85fr); gap: 48px; }
.work-hero-copy { min-width: 0; }
.work-hero-copy h1 { color: var(--orange); }
.command-core { border-color: rgba(255, 250, 240, .2); background: rgba(255, 250, 240, .09); }
.work-command .command-core h2,
.work-command .command-core strong { color: #fffaf0; }
.work-command .command-core p { color: rgba(255, 250, 240, .76); }
.command-grid div { border-color: rgba(255, 250, 240, .18); background: rgba(255, 250, 240, .08); }
.work-command .command-grid span { color: var(--acid); }
.work-command .command-grid strong { color: #fffaf0; }
.work-command .command-grid small { color: rgba(255, 250, 240, .64); }
.work-signal-band { border-block: 2px solid var(--ink); background: var(--acid); }
.signal-grid div { color: var(--ink); border-color: rgba(16, 34, 44, .22); }
.fit-board > div { border-bottom-color: rgba(16, 34, 44, .18); }
.fit-board span { color: var(--orange); }
.output-ledger article:nth-child(odd) { background: rgba(184, 237, 93, .09); }
.service-system { background: transparent; border-block: 0; }
.service-system-head { border-bottom: 2px solid var(--ink); }
.service-meta span { border: 1.5px solid var(--ink); background: var(--acid); color: var(--ink); }
.service-output { border: 1.5px solid var(--ink); background: rgba(184, 237, 93, .18); }
.service-note { color: #55707b; }
.route-map-card { background: var(--ink); color: #fffaf0; }
.route-map-row { border-color: rgba(255, 250, 240, .18); background: rgba(255, 250, 240, .08); }
.route-map-row span { color: var(--acid); }
.route-map-row strong,
.route-map-row p { color: #fffaf0; }
.process-rail article { border: 2px solid #fffaf0; background: rgba(255, 250, 240, .08); box-shadow: 6px 6px 0 var(--acid); }
.process-rail span { background: var(--acid); color: var(--ink); border-color: var(--ink); }
.process-rail h3,
.process-rail p { color: #fffaf0; }

/* About and contact */
.page-hero-lite { padding-top: 76px; }
.page-hero-lite::after { background: linear-gradient(90deg, transparent, var(--ink), transparent); }
.clean-split { gap: 44px; }
.soft-note { border: 2px solid var(--ink); background: #fffaf0; box-shadow: 6px 6px 0 var(--cyan); }
.audience-band { background: var(--acid); border-block: 2px solid var(--ink); }
.audience-band .section-kicker { background: #fffaf0; }
.team-card:nth-child(3n+1) { box-shadow: 8px 8px 0 var(--orange); }
.team-card:nth-child(3n+2) { box-shadow: 8px 8px 0 var(--cyan); }
.team-card:nth-child(3n) { box-shadow: 8px 8px 0 var(--acid); }

.calendar-box { overflow: hidden; }
.calendar-box iframe { border-radius: 20px; }
.form-card input,
.form-card textarea,
.form-card select,
.contact-aside input,
.contact-aside textarea,
.contact-aside select {
  border: 1.5px solid var(--ink);
  background: #fffaf0;
  color: var(--ink);
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(75, 212, 224, .28); }
.contact-aside { background: var(--ink); color: #fffaf0; }
.contact-aside h2,
.contact-aside strong { color: #fffaf0; }
.contact-aside p,
.contact-aside li { color: rgba(255, 250, 240, .78); }

/* Footer */
.footer {
  margin-top: 80px;
  padding: 64px 0;
  border-top: 2px solid var(--ink);
  background: var(--ink);
  color: #fffaf0;
}
.footer p { color: rgba(255, 250, 240, .68); }
.footer a { color: rgba(255, 250, 240, .8); }
.footer a:hover { color: var(--acid); }
.footer .logo-img { background: #fffaf0; border: 2px solid #fffaf0; }

@media (max-width: 1040px) {
  .nav-inner { padding: 10px 0; }
  .nav-links { order: 3; border-radius: 20px; box-shadow: 4px 4px 0 rgba(16, 34, 44, .9); }
  .hero-v3,
  .work-hero,
  .page-hero-lite { padding-top: 58px; }
  .work-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .container { width: min(100% - 30px, var(--max)); }
  .site-nav { position: relative; }
  .nav-inner { width: min(100% - 28px, 1240px); }
  .nav-links { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .nav-links a { font-size: 10px; letter-spacing: .035em; }
  .hero-copy h1,
  .work-hero-copy h1,
  .page-hero-lite h1 { text-shadow: 3px 3px 0 var(--acid); }
  .section-title { font-size: clamp(2.35rem, 12vw, 3.65rem); }
  .panel,
  .card,
  .compact-card,
  .editorial-card,
  .team-card,
  .form-card,
  .calendar-box,
  .contact-aside,
  .micro-table,
  .output-ledger,
  .fit-board,
  .route-map-card,
  .service-line,
  .work-service-card,
  .final-work-panel { border-radius: 24px; box-shadow: 5px 5px 0 rgba(16, 34, 44, .92); }
  .radar-console,
  .work-command,
  .dark-slab { border-radius: 28px; }
  .decision-strip-grid > div + div { border-left: 0; border-top: 1.5px solid var(--ink); }
  .footer { margin-top: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}