/* ============================================================
   FIRST LIGHT MARKETING — brand stylesheet
   Same design system as reaganroams.netlify.app: same color tokens,
   same type rules, same component patterns (.wrap, .btn, .card,
   .eyebrow, .mark, etc). Kept in sync on purpose so both sites read
   as one brand family. If you change a value here, consider whether
   it should change over there too.
   ============================================================ */

:root {
  --black: #121212;
  --green: #314528;
  --lime: #39ff14;
  --grey: #676767;
  --white: #ffffff;

  /* Brand grey (#676767) is only 3.3:1 on black and 1.8:1 on the green —
     both fail WCAG AA for small text, so muted TEXT uses this instead:
     4.7:1 on the green, 7.1:1 on black. */
  --muted: #ababab;

  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;

  --measure: 68ch;
  --wrap: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Topographic lines always present, 15% opacity, fixed so they sit under
   the whole page and don't scroll away. Same texture as reaganroams. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../images/topo.svg");
  background-size: 620px;
  background-repeat: repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

/* ---------- type ---------- */

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--lime);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 4.75rem);
}
h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
h3 {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 1.25rem;
}

a {
  color: var(--lime);
}

strong {
  color: var(--white);
  font-weight: 600;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
}

.logo span {
  color: var(--lime);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--lime);
}

@media (max-width: 640px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .nav-links {
    gap: 0.6rem 1.1rem;
    font-size: 0.8rem;
  }
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3rem, 7vw, 5rem);
}

.hero h1 {
  max-width: 18ch;
}

/* Neon marker stroke: white text, lime slash behind the key word. */
.mark {
  color: var(--white);
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-size: 100% 0.22em;
  background-position: 0 94%;
  padding: 0 0.08em;
}

.hero-sub {
  max-width: 46ch;
  margin: 2rem 0 2.5rem;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.82);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  background: var(--lime);
  color: var(--black);
  border: 2px solid var(--lime);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn:hover {
  background: transparent;
  color: var(--lime);
}

.btn-ghost {
  background: transparent;
  color: var(--lime);
}

.btn-ghost:hover {
  background: var(--lime);
  color: var(--black);
}

/* ---------- sections ---------- */

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-head {
  margin-bottom: 2.5rem;
  max-width: 60ch;
}

/* Bigger lead paragraph with a lime rule down the left — used for the
   positioning statement and the testimonial quote. */
.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--white);
  border-left: 3px solid var(--lime);
  padding-left: 1.25rem;
  margin-bottom: 0;
}

/* ---------- tags (who it's for) ---------- */

.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag-list li {
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--lime);
  border: 1px solid rgba(57, 255, 20, 0.4);
  padding: 0.55rem 1rem;
  margin: 0;
}

/* ---------- card grid (services + proof) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--green);
  border: 1px solid rgba(57, 255, 20, 0.18);
  padding: 2rem 1.75rem;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.15s, transform 0.15s;
}

.card:hover {
  border-color: var(--lime);
  transform: translateY(-3px);
}

.card-tag {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--lime);
  margin-bottom: 0.9rem;
}

.card h3 {
  color: var(--white);
  margin-bottom: 0.75rem;
}

.card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* placeholder proof card — dashed border, muted, obviously "swap me out" */
.card-placeholder {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  justify-content: center;
}

.card-placeholder .card-tag {
  color: var(--muted);
}

.card-placeholder p {
  color: var(--muted);
}

/* ---------- edge callouts ---------- */

.edge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.edge-card {
  background: var(--green);
  border: 1px solid var(--lime);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.edge-card h3 {
  margin: 0.5rem 0 0.75rem;
}

.edge-card p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* ---------- logo strip (proof) ---------- */

.logo-strip {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
}

.logo-box {
  width: 130px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey);
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.testimonial {
  margin-top: 2.5rem;
  max-width: 60ch;
}

.testimonial footer {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1rem;
}

/* ---------- contact ---------- */

.contact-panel {
  background: var(--green);
  border: 2px solid var(--lime);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 640px;
}

.field {
  margin-bottom: 1.25rem;
}

.field:last-of-type {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--grey);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  min-height: 48px;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
  border-color: var(--lime);
}

.contact-direct {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.95rem;
}

.contact-direct a {
  color: var(--white);
  text-decoration: none;
}

.contact-direct a:hover {
  color: var(--lime);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 2.5rem;
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer a {
  color: var(--white);
  text-decoration: none;
}

.footer a:hover {
  color: var(--lime);
}

/* ---------- focus + motion ---------- */

a:focus-visible,
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

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

  html {
    scroll-behavior: auto;
  }
}