/* ==========================================================================
   Elevated Drone Solutions
   Aerial spraying for New Brunswick farms and wood lots.

   Palette is earth-first: wheat page, paper panels, pine as the single
   accent, ink for the contrast bands. Space Grotesk sets headings, Inter
   reads the body copy, IBM Plex Mono carries labels and instrument details.
   ========================================================================== */

:root {
  --ink: #15170f;
  --pine: #1f4a2e;
  --pine-bright: #3e8b4f;
  --wheat: #ece6d3;
  --paper: #faf8f1;
  --slate: #3c5568;
  --line: rgba(21, 23, 15, 0.14);
  --alert: #8c3b2a;

  --body: #2c2e22;
  --muted: #3a3c2e;
  --quiet: #5b5c4c;

  --max: 1180px;
  --radius: 3px;
  --radius-lg: 6px;

  --display: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --text: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--wheat);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── shared type helpers ─────────────────────────────────────────────── */

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
  font-weight: 500;
}

.mono {
  font-family: var(--mono);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 3px;
}

/* ── layout ──────────────────────────────────────────────────────────── */

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

section {
  padding: 88px 0;
}

@media (max-width: 720px) {
  section {
    padding: 56px 0;
  }
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-top: 10px;
}

.section-head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn svg {
  flex: none;
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--pine);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-wide {
  width: 100%;
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

/* ── nav ─────────────────────────────────────────────────────────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}

header.site.is-stuck {
  box-shadow: 0 8px 26px -20px rgba(21, 23, 15, 0.75);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  height: 34px;
  width: auto;
}

.brand span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  transition: color 0.15s ease;
}

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

.nav-cta {
  background: var(--pine);
  color: var(--paper) !important;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  transition: background 0.15s ease;
}

.nav-cta:hover {
  background: var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--ink);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 760px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--line);
    display: none;
    gap: 16px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  .nav-cta {
    align-self: flex-start;
  }
}

/* ── hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 76px 0 60px;
  overflow: hidden;
  background: radial-gradient(
      ellipse 900px 500px at 82% -10%,
      rgba(62, 139, 79, 0.16),
      transparent 60%
    ),
    var(--wheat);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  margin-top: 14px;
  color: var(--ink);
}

/* Highlighter swipe under the turn of phrase — starts at 62% so it reads as
   marker on paper rather than a solid block fill. */
.hero h1 em {
  font-style: normal;
  color: var(--pine);
  background: linear-gradient(180deg, transparent 62%, rgba(62, 139, 79, 0.28) 62%);
}

.hero .lede {
  margin-top: 20px;
  font-size: 1.1rem;
  max-width: 46ch;
  color: var(--body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.hero-stats .stat b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--pine);
}

.hero-stats .stat span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--quiet);
}

/* Signature visual: the boustrophedon path a spray drone actually flies,
   drawn on once at load. */
.flightbox {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.flightbox svg {
  width: 100%;
  height: 100%;
  display: block;
}

.flight-path {
  fill: none;
  stroke: var(--pine-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 3.2s ease forwards 0.3s;
}

.flight-field {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.14;
  stroke-width: 1;
}

.flight-node {
  fill: var(--ink);
}

.flight-node.origin {
  fill: var(--pine);
}

.flight-drone {
  opacity: 0;
  animation: appear 0.4s ease forwards 3.4s;
}

.flight-caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--quiet);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

/* ── services ────────────────────────────────────────────────────────── */

.services {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* A 2px gap over a line-coloured backing draws the hairline rule between
   cards without any per-card border bookkeeping. */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
}

@media (max-width: 800px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  background: var(--paper);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
}

.service-card .tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 1.5rem;
  margin-bottom: 14px;
}

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

.service-card ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.service-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--body);
}

.service-card li svg {
  flex: none;
  margin-top: 4px;
  width: 15px;
  height: 15px;
  color: var(--pine);
}

/* ── why drones / comparison ─────────────────────────────────────────── */

.compare {
  background: var(--wheat);
}

.compare-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.compare-table th,
.compare-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}

.compare-table thead th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  background: var(--ink);
  color: var(--paper);
}

.compare-table tbody th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--quiet);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compare-table td.hi {
  background: rgba(62, 139, 79, 0.08);
}

.compare-table thead th.hi {
  background: var(--pine);
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 640px) {
  .compare-table {
    font-size: 0.85rem;
  }

  .compare-table th,
  .compare-table td {
    padding: 12px;
  }
}

/* ── about ───────────────────────────────────────────────────────────── */

.about {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 820px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* Standing in for a portrait until there is one: pine light raking across
   a hatched field. */
.about-portrait {
  aspect-ratio: 4 / 5;
  background: var(--ink);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 26px;
}

.about-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(62, 139, 79, 0.35), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 26px);
}

.about-portrait__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* keeps the name plate legible over the photo */
.about-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(12, 20, 14, 0.78) 0%, rgba(12, 20, 14, 0.32) 26%, transparent 52%);
  pointer-events: none;
}

.about-portrait .cap {
  position: relative;
  z-index: 3;
  color: var(--paper);
}

.about-portrait .cap b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
}

.about-portrait .cap span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9d6cc;
}

.about-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-top: 10px;
}

.about-copy p {
  margin-top: 18px;
  color: var(--body);
  font-size: 1.02rem;
}

.about-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--wheat);
}

/* ── service area (dark band) ────────────────────────────────────────── */

.area {
  background: var(--ink);
  color: var(--paper);
}

.area .eyebrow {
  color: var(--pine-bright);
}

.area h2 {
  color: var(--paper);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-top: 10px;
}

.area-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 820px) {
  .area-grid {
    grid-template-columns: 1fr;
  }
}

.area p {
  margin-top: 18px;
  color: #cfd2c3;
  font-size: 1.02rem;
}

.area-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

@media (max-width: 520px) {
  .area-list {
    grid-template-columns: 1fr;
  }
}

.area-list li {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: #e8e6d8;
  border-left: 2px solid var(--pine-bright);
  padding-left: 10px;
}

.area-note {
  border: 1px solid rgba(250, 248, 241, 0.18);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: rgba(250, 248, 241, 0.04);
}

.area-note p {
  margin-top: 8px;
  font-size: 0.95rem;
}

/* ── contact ─────────────────────────────────────────────────────────── */

.contact {
  background: var(--wheat);
}

.contact-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 48px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 880px) {
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 26px;
  }
}

.contact-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: 10px;
}

.contact-intro > p {
  margin-top: 14px;
  color: var(--muted);
}

.contact-links {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.contact-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.contact-links a:hover {
  border-color: var(--pine);
  background: rgba(62, 139, 79, 0.06);
}

.contact-links a svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--pine);
}

.contact-links small {
  display: block;
  font-family: var(--text);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--quiet);
  margin-top: 2px;
}

/* ── quote form ──────────────────────────────────────────────────────── */

.form {
  display: grid;
  gap: 18px;
  border-left: 1px solid var(--line);
  padding-left: 48px;
}

@media (max-width: 880px) {
  .form {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 32px;
  }
}

.form__intro {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Honeypot: out of the layout and out of the tab order. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  display: grid;
  gap: 7px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field .opt {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--quiet);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--text);
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--wheat);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.55;
}

/* Chevron lives in the data URI so the control needs no extra markup. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233a3c2e' stroke-width='1.6'%3E%3Cpath d='M4 6.5L8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  padding-right: 38px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8a8a76;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pine);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(62, 139, 79, 0.15);
}

.field .err {
  display: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--alert);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--alert);
  background: rgba(140, 59, 42, 0.05);
}

.field.is-invalid .err {
  display: block;
}

.form__foot {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.form__note {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--quiet);
  text-align: center;
}

.form__status {
  display: none;
  font-size: 0.9rem;
  color: var(--pine);
  border-left: 2px solid var(--pine);
  padding-left: 12px;
}

.form__status.is-visible {
  display: block;
}

.form__status.is-error {
  color: var(--alert);
  border-left-color: var(--alert);
}

/* Once Netlify has the submission the fields have nothing left to say. */
.form.is-sent .field,
.form.is-sent .field-row,
.form.is-sent .form__foot,
.form.is-sent .form__intro {
  display: none;
}

/* ── footer ──────────────────────────────────────────────────────────── */

.foot {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.foot-row .brand img {
  height: 24px;
}

.foot-row > p {
  font-size: 0.82rem;
  color: var(--quiet);
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.foot-nav a {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.15s ease;
}

.foot-nav a:hover {
  color: var(--pine);
}

/* ── 404 / thank-you plate ───────────────────────────────────────────── */

.plate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 660px;
  margin: 0 auto;
  padding: 56px 24px;
  background: radial-gradient(
      ellipse 700px 420px at 92% 0%,
      rgba(62, 139, 79, 0.16),
      transparent 60%
    ),
    var(--wheat);
}

.plate img {
  width: 190px;
  margin-bottom: 32px;
}

.plate .mono {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
}

.plate h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin-top: 12px;
}

.plate p:not(.mono) {
  margin-top: 18px;
  color: var(--body);
  font-size: 1.04rem;
}

.plate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ── reveal on scroll ────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease var(--d, 0ms), transform 0.6s ease var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* No JS, no observer — content must never stay hidden. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .flight-path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .flight-drone {
    animation: none;
    opacity: 1;
  }

  .btn:hover {
    transform: none;
  }
}