/* ==========================================================================
   Arches Labs — landing page styles

   Type: Archivo (headings, nav, buttons, labels; variable width, set semi-condensed
   for headings) and Source Serif 4 (reading text). Both load from Google Fonts in
   <head>; the fallbacks below keep the page readable if they're blocked.

   Scale: the root font size grows with the window, from 16px on laptops to 20px on
   big monitors (and when the browser is zoomed out). Every size, gutter, and
   container below is in rem, so the whole page scales together instead of sitting
   in a narrow column in the middle of a wide screen.

   Palette (AA-checked where used as text):
     --paper    #E9EAE6  page background (cool high-desert stone)
     --mist     #F5F3EE  raised surfaces (form panel, light buttons)
     --ink      #22271F  body text on paper, ~13:1
     --ink-soft #454A3E  secondary text on paper, ~6:1
     --slate    #33475A  primary buttons and links on paper, ~7:1
     --sage     #7E8768  hairlines only (not text)
     --rust     #A24E2C  accents, focus ring, link hover
     --night    #1B211C  security section background; text on it is --on-night (~14:1)
                         and --on-night-soft (~8:1)
     --stone    #DDE0D7  records section band; ink stays ~12:1, ink-soft ~7:1
   ========================================================================== */

:root {
  --paper: #e9eae6;
  --mist: #f5f3ee;
  --ink: #22271f;
  --ink-soft: #454a3e;
  --slate: #33475a;
  --slate-dark: #26374a;
  --sage: #7e8768;
  --rust: #a24e2c;
  --rust-light: #e0824f;
  --night: #1b211c;
  --on-night: #ecebe4;
  --on-night-soft: #b8bbae;
  --line: #c3c8ba;
  --line-night: rgba(236, 235, 228, 0.16);
  --stone: #dde0d7;   /* a step darker than paper, for alternating section bands */

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --text: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --page: 82rem;        /* widest content row */
  --measure: 40rem;     /* longest comfortable line of body text */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --space: clamp(4rem, 9vw, 8.5rem);
}

/* ----- base ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, 0.4rem + 0.65vw, 125%);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6.25rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 0.94;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1;
}
h3 { font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem); }
h4 { font-size: 1.15rem; font-weight: 650; font-stretch: 90%; line-height: 1.2; letter-spacing: 0; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: var(--slate); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rust); }

.lede { font-size: clamp(1.15rem, 1rem + 0.35vw, 1.35rem); line-height: 1.5; }

/* ----- focus ----- */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----- skip link ----- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--slate);
  color: #fff;
  font-family: var(--ui);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ----- layout ----- */
.page {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space); }

/* heading on the left, text on the right (stacks on phones) */
.split { display: grid; gap: 1.25rem 0; }
.split__body { max-width: var(--measure); }
.split__body > :last-child { margin-bottom: 0; }
.split > h2, .split > h3 { margin-bottom: 0; }
@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
  }
}

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.35rem;
  border-radius: 2px;
  border: 1.5px solid transparent;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn--small { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.92rem; }
.btn--primary { background: var(--slate); color: #fff; border-color: var(--slate); }
.btn--primary:hover { background: var(--slate-dark); border-color: var(--slate-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn--ghost:hover { background: color-mix(in srgb, var(--slate) 8%, transparent); color: var(--slate); }
.btn--light { background: var(--mist); color: var(--ink); border-color: var(--mist); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 2rem;
}
.link-note {
  font-family: var(--ui);
  font-size: 0.98rem;
  color: var(--slate);
  text-decoration: underline;
}

/* ----- page tabs: hunting ranches | cattle ranches | local AI -----
   A thin ink strip above the header on every page. The current page's tab is paper, so
   it reads as joined to the header under it (local-ai.css recolors it for that page).
   Shown at every width: the section nav is hidden on phones, and this is how a cattle
   rancher finds their page. On small phones the tabs drop "ranches" to fit in a row. */
.audience { background: var(--ink); }
.audience__inner { display: flex; gap: 0.25rem; padding-top: 0.4rem; }
.audience__tab {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.3rem 0.95rem;
  border-radius: 4px 4px 0 0;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: #cfd2c8;
  text-decoration: none;
}
.audience__tab:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--rust-light);
  text-underline-offset: 0.35em;
}
.audience__tab[aria-current="page"] { background: var(--paper); color: var(--ink); text-decoration: none; }
@media (max-width: 29.99rem) { .audience__long { display: none; } }
.audience :focus-visible { outline-color: var(--rust-light); outline-offset: -3px; }

/* ----- header ----- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}
/* logo: the arch mark beside the ARCHES / LABS lettering, both cut from the logo art */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  padding-block: 0.5rem;
  text-decoration: none;
}
.wordmark picture { flex: none; }
.wordmark__mark { height: 3rem; width: auto; }
.wordmark__text { height: 2.35rem; width: auto; }
.site-nav { display: none; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.site-nav a {
  padding-block: 0.5rem;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-underline-offset: 0.4em;
}
@media (min-width: 56rem) { .site-nav { display: flex; } }
/* the cattle page lists seven sections, so its nav waits for a little more room */
@media (min-width: 56rem) and (max-width: 61.99rem) { .site-nav--long { display: none; } }

/* ----- hero ----- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 88vh, 60rem);
  min-height: clamp(34rem, 88svh, 60rem);
  overflow: hidden;
  isolation: isolate;
  background: #2d3328;
  color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(16, 19, 14, 0.9) 0%, rgba(16, 19, 14, 0.55) 40%, rgba(16, 19, 14, 0.08) 72%, rgba(16, 19, 14, 0) 100%),
    linear-gradient(to right, rgba(16, 19, 14, 0.45) 0%, rgba(16, 19, 14, 0) 60%);
}
.hero__body {
  position: relative;
  z-index: 2;
  padding-top: 8rem;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.hero h1 { max-width: 12ch; margin-bottom: 0.4em; color: #fff; }
.hero__lede {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
/* cattle page: the cows stand right of center, so narrow screens crop toward them */
.hero--herd .hero__img { object-position: 82% 62%; }

/* ----- what we build: drone solutions and ranch software, right under the hero -----
   Two equal white panels on a stone band. Each line is a link down to the section that
   shows it, so the panels double as a table of contents. */
.section--solutions { padding-block: clamp(3rem, 6vw, 5.5rem); }
.solutions__title { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); }
.solutions__grid { display: grid; gap: 1.25rem clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 56rem) {
  .solutions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.solution {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 20px 40px -32px rgba(34, 39, 31, 0.55);
}
.solution__top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; }
.solution__icon { flex: none; width: 2.75rem; height: 2.75rem; }
.solution h3 { margin: 0; font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.8rem); }
.solution > p { margin: 0 0 1.4rem; font-size: 1.05rem; color: var(--ink-soft); }
.solution__list { list-style: none; margin: auto 0 0; padding: 0; }
.solution__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.solution__list li:last-child a { border-bottom: 1px solid var(--line); }
.solution__name { grid-column: 1; font-family: var(--ui); font-size: 1.02rem; font-weight: 700; }
.solution__what { grid-column: 1; font-size: 0.95rem; color: var(--ink-soft); }
.solution__list a::after {
  content: "→";
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--ui);
  color: var(--rust);
  transition: transform 150ms ease;
}
.solution__list a:hover { color: var(--ink); }
.solution__list a:hover .solution__name { text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 0.2em; }
.solution__list a:hover::after { transform: translateX(3px); }
/* the other page: a bordered row under the two panels, its button in the site's
   outline style so it doesn't compete with "Book a call" */
.switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
}
.switch__text { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }
.switch__text b { margin-right: 0.3rem; font-family: var(--ui); font-weight: 700; color: var(--ink); }
.switch__btn { flex: none; }
.switch__btn::after { content: "→"; margin-left: 0.55rem; transition: transform 150ms ease; }
.switch__btn:hover::after { transform: translateX(3px); }
@media (max-width: 39.99rem) { .switch__btn { width: 100%; } }

/* ----- who we are ----- */
.founders {
  list-style: none;
  margin: clamp(2.75rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 3rem;
}
@media (min-width: 48rem) {
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 4rem); }
}
.founder { display: grid; gap: 1.1rem; align-content: start; }
@media (min-width: 64rem) {
  .founder {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.25rem, 2vw, 2rem);
    row-gap: 0.6rem;
  }
  .founder__photo { grid-row: 1 / span 2; }
}
.founder__photo { background: var(--sage); border-radius: 2px; overflow: hidden; }
.founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founder__name { margin: 0; font-size: 1.5rem; }
.founder__line { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* ----- full-bleed photo section (surveys) ----- */
.section--bleed { padding-top: 0; }
.bleed { margin: 0 0 var(--space); background: var(--sage); }
.bleed img { width: 100%; height: clamp(16rem, 62vh, 44rem); object-fit: cover; }

/* ----- short points beside a photo: stacked (hunts) or two by two (cattle) ----- */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem clamp(1.5rem, 3vw, 3rem); }
.points li { padding-top: 1rem; border-top: 1px solid var(--line); }
.points h3 { margin: 0 0 0.45rem; font-size: 1.2rem; font-stretch: 88%; line-height: 1.2; }
.points p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.points--stack { margin: 2rem 0 0; gap: 1.25rem; }
.points--2 { margin: 2rem 0 0; }
@media (min-width: 40rem) {
  .points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- surveys: flight demo + live dashboard -----
   One "app window": the map (inline SVG) beside a dashboard panel on wide screens,
   the panel under the map below 72rem. Species colors were run through the dataviz
   palette validator (colorblind separation and 3:1 against the map ground). */
.survey {
  --map-ground: #e4e7dc;
  --sp-deer: #2d6fb7;
  --sp-elk: #d0602e;
  --sp-pronghorn: #1c9269;
  /* cattle page head count: the same three validated hues */
  --sp-cow: #2d6fb7;
  --sp-calf: #1c9269;
  --sp-bull: #d0602e;
  --up-good: #2e6b34;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}
.survey__stage { margin: 0; }
.survey__window {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem -2rem rgba(34, 39, 31, 0.45);
}
.survey__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
  font-size: 0.85rem;
  line-height: 1.3;
}
.survey__bar-title { font-weight: 700; }
.survey__bar-sub { margin-left: 0.4rem; font-weight: 400; color: var(--ink-soft); }
.survey__bar-live {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.survey__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.survey__pill::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--sage);
}
.survey.is-flying .survey__pill { background: var(--rust); color: #fff; }
.survey.is-flying .survey__pill::before { background: #fff; animation: sd-blink 1.2s ease-in-out infinite; }
.survey.is-paused .survey__pill::before { animation-play-state: paused; }
@keyframes sd-blink { 50% { opacity: 0.25; } }

.survey__body { display: grid; }
.survey__map { position: relative; background: var(--map-ground); }
.survey__map > svg { display: block; width: 100%; height: 100%; }
@media (min-width: 72rem) {
  .survey__body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* map text + marks */
.sd-label {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  fill: var(--ink-soft);
}
.sd-label--cam { font-size: 10px; fill: #e9eae6; fill-opacity: 0.85; }
.sd-cam-id { font: 700 11px/1 var(--mono); letter-spacing: 0.06em; fill: #ffd9a0; }
.sd-a circle { stroke: #fff; stroke-width: 2; }
.sd-a--deer circle { fill: var(--sp-deer); }
.sd-a--elk circle { fill: var(--sp-elk); }
.sd-a--pronghorn circle { fill: var(--sp-pronghorn); }
.sd-a--cow circle { fill: var(--sp-cow); }
.sd-a--calf circle { fill: var(--sp-calf); }
.sd-a--bull circle { fill: var(--sp-bull); }
.sd-a--unknown circle { fill: #fff; stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 2.4 1.6; }
.sd-a--unknown text { font: 700 7px/1 var(--ui); fill: var(--ink); text-anchor: middle; }
/* no JS: the finished survey, so no live camera */
.survey:not(.survey--live) .sd-cam { display: none; }
@media (max-width: 30rem) {
  .sd-label { font-size: 14px; }
  .sd-cam text { display: none; }   /* too small to read on a phone; the panel says the same */
}

.survey__card {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 16.5rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 8px 24px -12px rgba(34, 39, 31, 0.55);
  transition: opacity 260ms ease, transform 260ms ease;
}
.survey__card-icon { flex: none; margin-top: 0.1rem; }
.survey__card-body { display: block; min-width: 0; }
.survey__card-title { display: block; font-weight: 700; }
.survey__card-text { display: block; color: var(--ink-soft); }
.survey--live .survey__card:not(.is-shown) { opacity: 0; transform: translateY(0.5rem); }

/* the dashboard panel */
.survey__panel {
  display: grid;
  align-content: start;
  gap: 1.1rem 1.75rem;
  grid-template-areas: "head" "cover" "total" "species" "slot";
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid var(--line);
  font-family: var(--ui);
  font-size: 0.9rem;
  line-height: 1.35;
}
@media (min-width: 40rem) and (max-width: 71.99rem) {
  .survey__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "head species" "cover species" "total species" "slot slot";
  }
}
@media (min-width: 72rem) {
  .survey__panel { border-top: 0; border-left: 1px solid var(--line); }
}
.survey__panel p { margin: 0; }
.sp-head { grid-area: head; }
.sp-cover { grid-area: cover; }
.sp-total { grid-area: total; }
.sp-species { grid-area: species; }
.sp-slot { grid-area: slot; }

.sp-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-status { font-size: 1.02rem; font-weight: 700; }
.sp-status::before {
  content: "";
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--sage);
  vertical-align: 0.08em;
}
.survey.is-flying .sp-status::before { background: var(--rust); }
.sp-sub { margin-top: 0.15rem; font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.sp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.sp-num { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #d3dbe2;   /* a light step of slate, so the whole bar reads as one meter */
  overflow: hidden;
}
.sp-meter__fill {
  display: block;
  height: 100%;
  width: calc(var(--v, 0) * 100%);
  background: var(--slate);
}
.sp-note { margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.sp-hero {
  margin-top: 0.1rem;
  font-size: 3rem;
  font-weight: 700;
  font-stretch: 90%;
  line-height: 1;
}

.sp-species { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; align-content: start; }
.sp-sp {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) auto;
  column-gap: 0.55rem;
  align-items: center;
}
.sp-sw { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.sp-sw--deer { background: var(--sp-deer); }
.sp-sw--elk { background: var(--sp-elk); }
.sp-sw--pronghorn { background: var(--sp-pronghorn); }
.sp-sw--cow { background: var(--sp-cow); }
.sp-sw--calf { background: var(--sp-calf); }
.sp-sw--bull { background: var(--sp-bull); }
.sp-sw--review {
  display: inline-grid;
  place-items: center;
  width: 0.95rem; height: 0.95rem;
  margin-left: -0.125rem;
  border: 1.5px dashed var(--ink-soft);
  background: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.sp-name { font-weight: 600; }
.sp-count { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sp-bar { grid-column: 2 / -1; display: block; height: 6px; margin-top: 0.3rem; }
.sp-bar__fill {
  display: block;
  height: 100%;
  width: calc(var(--v, 0) * 100%);
  border-radius: 0 3px 3px 0;
  transition: width 200ms ease-out;
}
.sp-bar__fill--deer { background: var(--sp-deer); }
.sp-bar__fill--elk { background: var(--sp-elk); }
.sp-bar__fill--pronghorn { background: var(--sp-pronghorn); }
.sp-bar__fill--cow { background: var(--sp-cow); }
.sp-bar__fill--calf { background: var(--sp-calf); }
.sp-bar__fill--bull { background: var(--sp-bull); }
.sp-classes { grid-column: 2 / -1; margin-top: 0.2rem; font-size: 0.78rem; color: var(--ink-soft); }

/* bottom of the panel: sightings while flying, last-fall comparison once landed.
   Both sit in one grid cell so the panel doesn't change height when they swap. */
.sp-slot { display: grid; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.sp-feed, .sp-compare { grid-area: 1 / 1; }
.sp-feed { visibility: hidden; }
.survey--live:not(.is-done) .sp-feed { visibility: visible; }
.survey--live:not(.is-done) .sp-compare { visibility: hidden; }
.sp-feed__list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  align-content: start;
}
.sp-feed__list li {
  display: grid;
  grid-template-columns: 2.4rem 0.6rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  font-size: 0.82rem;
}
.sp-feed__list li:first-child { animation: sd-in 320ms ease-out; }
.sp-feed__list .sp-sw { width: 0.6rem; height: 0.6rem; }
.sp-feed__list .sp-sw--review { width: 0.7rem; height: 0.7rem; margin: 0; font-size: 0.5rem; }
.sp-feed__time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sp-feed__list .sp-feed__empty { display: block; color: var(--ink-soft); }
@keyframes sd-in { from { opacity: 0; transform: translateY(-0.3rem); } }

.sp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.survey__panel .sp-tile { display: grid; gap: 0.15rem; align-content: start; }
.sp-tile__label { font-size: 0.78rem; line-height: 1.25; color: var(--ink-soft); }
.sp-tile__val { font-size: 1.9rem; font-weight: 700; font-stretch: 90%; line-height: 1.05; }
.sp-delta { font-size: 0.8rem; font-weight: 600; }
.sp-delta--up { color: var(--up-good); }
.sp-delta--down { color: var(--rust); }

.survey__caption,
.fence__caption,
.demo__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.8rem;
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.survey__toggle,
.fence__toggle,
.demo__toggle {
  min-height: 2.5rem;
  padding: 0.25rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--slate);
  background: transparent;
  border: 1.5px solid var(--slate);
  border-radius: 2px;
  cursor: pointer;
}
.survey__toggle:hover,
.fence__toggle:hover,
.demo__toggle:hover { background: color-mix(in srgb, var(--slate) 8%, transparent); }
/* pause bars while playing, play triangle while paused */
.survey__toggle::before,
.fence__toggle::before,
.demo__toggle::before,
.patrol__toggle::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 0.7em;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: -0.05em;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 0.22em;
}
.is-paused .survey__toggle::before,
.is-paused .fence__toggle::before,
.is-paused .demo__toggle::before,
.is-paused .patrol__toggle::before {
  width: 0;
  border-color: transparent transparent transparent currentColor;
  border-width: 0.4em 0 0.4em 0.7em;
}

/* phones: window runs edge to edge; the "saved" card shrinks to a strip */
@media (max-width: 39.99rem) {
  .survey__window { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
  .survey__bar-sub { display: none; }
  .survey__caption { font-size: 0.82rem; }
  .survey__card {
    left: 0.4rem; right: 0.4rem; bottom: 0.4rem;
    width: auto;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
  }
  .survey__card .survey__card-icon { width: 18px; height: 18px; margin: 0; }
  .survey__card .survey__card-body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .survey__card .survey__card-title { display: inline; }
  .survey__card .survey__card-text { display: inline; }
  .survey__card .survey__card-text::before { content: " · "; }
}

/* the five steps: a row under the window on wide screens, a list on phones */
.survey__steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
@media (min-width: 56rem) {
  .survey__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
}
.survey__step { position: relative; padding: 1rem 0; border-top: 1px solid var(--line); }
@media (max-width: 55.99rem) {
  .survey__step:last-child { border-bottom: 1px solid var(--line); }
}
.survey__title,
.fence__title,
.demo__title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: 88%;
}
.survey__num,
.fence__num,
.demo__num {
  flex: none;
  min-width: 1rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rust);
}
.survey__step p { margin: 0.45rem 0 0 1.7rem; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 56rem) {
  .survey__step p { margin-left: 0; }
}
.survey__step-btn,
.fence__step-btn,
.demo__step-btn {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0;
  margin: -0.35rem 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.survey--live .survey__step:not(.is-active) .survey__step-btn { color: var(--ink-soft); }
.survey--live .survey__step.is-active p { color: var(--ink); }
.survey--live .survey__step-btn:hover { color: var(--ink); }
.survey__progress,
.fence__progress,
.demo__progress {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--rust);
  transform-origin: left center;
  transform: scaleX(0);
}
.survey.is-paused .survey__progress,
.fence.is-paused .fence__progress,
.demo--live.is-paused .demo__progress { opacity: 0; }


/* ----- photo + text sections (records, guests) ----- */
.feature__grid { display: grid; gap: 2.25rem; }
.feature__media {
  margin: 0 calc(-1 * var(--gutter));
  background: var(--sage);
  overflow: hidden;
}
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__media--tall img { aspect-ratio: 1 / 1; object-position: 50% 30%; }
.feature__body { max-width: var(--measure); }
.feature__body > :last-child { margin-bottom: 0; }
@media (min-width: 64rem) {
  .feature__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
  }
  .feature--flip .feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .feature--flip .feature__media { order: 2; }
  .feature__media { margin: 0; border-radius: 2px; }
  .feature__media img { aspect-ratio: 5 / 4; }
  .feature__media--tall img { aspect-ratio: 4 / 5; max-height: min(82vh, 52rem); }
}

/* ----- the ask at the foot of a section -----
   Every topic section ends on this strip: its question and the booking button, flush
   with the bottom edge of the section so it reads as that section's footer rather than a
   line floating in the space between sections. Tone-on-tone: a translucent ink wash
   makes it one step darker than whatever band it sits on (a light wash on the night
   band), so it matches its section instead of adding a new color. */
.ask {
  margin: var(--space) 0 calc(-1 * var(--space));
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  background: rgba(34, 39, 31, 0.06);
  border-top: 1px solid var(--line);
}
.ask__inner { display: grid; gap: 1.25rem 3rem; align-items: center; }
@media (min-width: 56rem) {
  .ask__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.ask__q {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
}
.ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; }
.section--night .ask { background: rgba(236, 235, 228, 0.05); border-top-color: var(--line-night); }
.section--night .ask .ask__q { color: var(--on-night); }   /* two classes: beats .section--night p */

/* ----- section bands -----
   Every section below the survey photo sits on its own band so one topic ends before the
   next begins (and "what we build" sits on stone under the hero): night (security), mist (fences), stone (records), mist (guests), stone
   (hunts), mist (cattle), paper (contact). A hairline marks the edge wherever two light
   bands meet. The cattle page runs the same way: stone (counts), mist (temperature), night
   (calving), mist (fence and water), stone (records), mist (grazing), stone (herding),
   paper (contact). */
.section--fence, .section--hospitality, .section--cattle, .section--grazing, .section--temps { background: var(--mist); }
.section--solutions, .section--records, .section--hunts, .section--counts, .section--herding { background: var(--stone); }
.section--who, .section--fence, .section--records, .section--hospitality, .section--hunts,
.section--cattle, .section--counts, .section--grazing, .section--temps, .section--herding,
.section--contact { border-top: 1px solid var(--line); }

/* ----- lists of short points (security "keep your land safe", guests "hunts") ----- */
.safe { margin-top: var(--space); }
.safe .split__body { max-width: none; }
.safe .split__body > p { max-width: var(--measure); }
.safe__list {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: grid;
  gap: 1.75rem 2.5rem;
}
@media (min-width: 40rem) { .safe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.safe__item { padding-top: 1rem; border-top: 1px solid var(--line); }
.safe__item h4 { margin: 0 0 0.45rem; }
.safe__item p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 64rem) {
  /* keep the short heading beside its list instead of leaving an empty column */
  .safe__title { position: sticky; top: 2rem; }
}

/* ----- security section: dark, like the night map ----- */
.section--night { background: var(--night); color: var(--on-night); }
.section--night h2, .section--night h3, .section--night h4 { color: #f6f5ef; }
.section--night p { color: var(--on-night-soft); }
.section--night .lede { color: var(--on-night); }
.section--night a { color: var(--on-night); }
.section--night a:hover { color: #fff; }
.section--night :focus-visible { outline-color: var(--rust-light); }
.section--night .btn--primary { background: var(--mist); color: var(--ink); border-color: var(--mist); }
.section--night .btn--primary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.section--night .link-note { color: var(--on-night); }
.section--night .safe__item { border-top-color: var(--line-night); }
.section--night .safe__item p { color: var(--on-night-soft); }

/* ----- security: patrol demo ----- */
.patrol {
  --heat: #ffc46b;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  display: grid;
  gap: 2rem;
  grid-template-areas: "stage" "steps";
}
.patrol__stage { grid-area: stage; margin: 0; align-self: start; }
.patrol__steps { grid-area: steps; }
/* phones: keep the map in view while reading the steps under it */
@media (max-width: 55.99rem) {
  .patrol--live .patrol__stage {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--night);
    padding-bottom: 0.25rem;
  }
}
@media (min-width: 56rem) {
  .patrol {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
    grid-template-areas: "steps stage";
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.patrol__screen {
  position: relative;
  aspect-ratio: 640 / 420;
  background: #151a16;
  border: 1px solid rgba(236, 235, 228, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.patrol__screen > svg { display: block; width: 100%; height: 100%; }

.pd-label {
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.08em;
  fill: #e9eae6;
  fill-opacity: 0.55;
}
.pd-label--sm { font-size: 11px; fill-opacity: 0.4; }
.pd-label--fence { fill: #e0824f; fill-opacity: 0.9; }
.pd-label--muted { font-size: 11px; fill: #ffd9a0; fill-opacity: 0.7; }
.pd-label--inset { font-size: 11px; fill-opacity: 0.85; }
.pd-tag { font: 700 11px/1 var(--mono); letter-spacing: 0.06em; fill: #1b221c; }
.pd-fence { animation: pd-march 1.4s linear infinite; }
.patrol.is-paused .pd-fence { animation-play-state: paused; }
@keyframes pd-march { to { stroke-dashoffset: -28; } }
@media (max-width: 30rem) {
  .pd-label--sm, .pd-label--muted { display: none; }
}

.patrol__hud {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  margin: 0;
  max-width: 62%;
  padding: 0.4rem 0.6rem 0.45rem;
  border-radius: 3px;
  background: rgba(16, 21, 17, 0.8);
  color: #e9eae6;
  font-family: var(--mono);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.section--night .patrol__hud { color: #e9eae6; } /* beats the section's paragraph color */
.patrol__hud-status { display: block; font-size: 0.72rem; font-weight: 700; }
.patrol__hud-status::before {
  content: "";
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--heat);
  vertical-align: 0.05em;
}
.patrol__hud-sub { display: block; font-size: 0.64rem; opacity: 0.72; }

.patrol__card {
  position: absolute;
  left: 28%;
  right: 3%;
  bottom: 0.6rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(245, 243, 238, 0.97);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  transition: opacity 260ms ease, transform 260ms ease;
}
@media (min-width: 40rem) { .patrol__card { left: auto; width: 17.5rem; right: 0.75rem; } }
/* phones: map runs edge to edge, cards shrink to a one-line strip along the bottom */
@media (max-width: 39.99rem) {
  .patrol__screen { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
  .patrol__caption { font-size: 0.82rem; }
  .patrol__hud { top: 0.4rem; left: 0.4rem; padding: 0.3rem 0.45rem; }
  .patrol__hud-status { font-size: 0.62rem; }
  .patrol__hud-sub { font-size: 0.56rem; }
  .patrol__card {
    left: 0.4rem; right: 0.4rem; bottom: 0.4rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
  }
  .patrol__card .patrol__card-icon { width: 18px; height: 18px; margin: 0; }
  .patrol__card .patrol__card-title { display: inline; }
  .patrol__card .patrol__card-time { display: none; }
  .patrol__card .patrol__card-body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .patrol__card .patrol__card-text { display: inline; }
  .patrol__card .patrol__card-text::before { content: " · "; }
}
.patrol__card-icon { flex: none; margin-top: 0.1rem; }
.patrol__card-body { display: block; min-width: 0; }
.patrol__card-title { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 700; }
.patrol__card-time { font-weight: 400; color: var(--ink-soft); }
.patrol__card-text { display: block; color: var(--ink-soft); }
.patrol__card-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.patrol__card-actions span {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--slate);
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
}
.patrol__card-actions span + span { background: var(--rust); }
@media (max-width: 39.99rem) { .patrol__card-actions { display: none; } }
/* no JS: one static frame, alert showing */
.patrol:not(.patrol--live) .patrol__card--report { display: none; }
.patrol--live .patrol__card:not(.is-shown) { opacity: 0; transform: translateY(0.5rem); }

.patrol__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.8rem;
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--on-night-soft);
}
.patrol__toggle {
  min-height: 2.5rem;
  padding: 0.25rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-night);
  background: transparent;
  border: 1.5px solid rgba(236, 235, 228, 0.5);
  border-radius: 2px;
  cursor: pointer;
}
.patrol__toggle:hover { border-color: var(--on-night); background: rgba(236, 235, 228, 0.08); }

.patrol__steps { list-style: none; margin: 0; padding: 0; }
.patrol__step {
  position: relative;
  padding: 1rem 0;
  border-top: 1px solid var(--line-night);
}
.patrol__step:last-child { border-bottom: 1px solid var(--line-night); }
.patrol__title {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-stretch: 88%;
}
.patrol__num {
  flex: none;
  min-width: 1.1rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rust-light);
}
.patrol__step p { margin: 0.45rem 0 0 1.95rem; font-size: 1rem; line-height: 1.55; }
.patrol__step-btn {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0;
  margin: -0.35rem 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.patrol--live .patrol__step:not(.is-active) .patrol__step-btn { color: rgba(236, 235, 228, 0.6); }
.patrol--live .patrol__step-btn:hover { color: #fff; }
.patrol__bar {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--rust-light);
  transform-origin: left center;
  transform: scaleX(0);
}
.patrol.is-paused .patrol__bar { opacity: 0; }
@media (min-width: 56rem) {
  /* desktop: only the active step's text is open, like a tab list */
  .patrol--live .patrol__step:not(.is-active) p { display: none; }
}

/* ----- fences: fence-line check demo -----
   The map (inline SVG) beside a phone showing what the rancher gets. Steps sit to the
   left of both on wide screens, under them otherwise. Status colors follow the dataviz
   status palette and always come with an icon and a word, never color alone. */
.fence {
  --down: #d03b3b;
  --work: #fab219;
  --ok: #2e8540;
  --fixed: #2e6b34;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  display: grid;
  gap: 2rem;
  grid-template-areas: "stage" "steps";
}
.fence__stage { grid-area: stage; margin: 0; }
.fence__steps { grid-area: steps; }
@media (min-width: 80rem) {
  .fence {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 3.1fr);
    grid-template-areas: "steps stage";
    column-gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }
}
.fence__scene { display: grid; gap: 1.75rem 2rem; align-items: center; }
@media (min-width: 48rem) {
  .fence__scene { grid-template-columns: minmax(0, 1fr) 16.5rem; }
}

.fence__map {
  aspect-ratio: 640 / 440;
  background: #e4e7dc;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.fence__map > svg { display: block; width: 100%; height: 100%; }
.fd-label { font: 600 12px/1 var(--mono); letter-spacing: 0.08em; fill: var(--ink-soft); }
.fd-label--pin { font-weight: 700; fill: var(--ink); }
.fd-cap { font: 600 8.5px/1 var(--mono); letter-spacing: 0.06em; fill: var(--ink-soft); }
/* no JS: the finished check, so no mid-flight photo callouts */
.fence:not(.fence--live) .fd-callout { display: none; }
@media (max-width: 30rem) {
  .fd-label { font-size: 15px; }
}
@media (max-width: 39.99rem) {
  .fence__map { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
}

.fence__legend {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-family: var(--ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.fence__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.fl-key { flex: none; display: inline-grid; place-items: center; }
.fl-key--checked, .fl-key--line {
  width: 1.4rem;
  height: 0.4rem;
  background: linear-gradient(#4d4a40, #4d4a40) center / 100% 1.5px no-repeat;
}
.fl-key--checked { background-color: rgba(46, 133, 64, 0.45); border-radius: 2px; }
.fl-key--down, .fl-key--work, .fl-key--fixed {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}
.fl-key--down { background: var(--down); color: #fff; }
.fl-key--work { background: var(--work); color: var(--ink); }
.fl-key--fixed { background: var(--fixed); color: #fff; }
.fl-key--cow, .fl-key--calf { border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(34, 39, 31, 0.15); }
.fl-key--cow { width: 0.7rem; height: 0.7rem; background: #2d6fb7; }
.fl-key--calf { width: 0.5rem; height: 0.5rem; background: #1c9269; }
.fl-key--tank { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #a9c6da; box-shadow: inset 0 0 0 1.5px #4d4a40; }

/* the phone */
.fence__phone {
  justify-self: center;
  width: 100%;
  max-width: 16.5rem;
  padding: 0.5rem;
  border-radius: 2.4rem;
  background: #1b211c;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(34, 39, 31, 0.55);
}
.fp-screen {
  position: relative;
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.95rem;
  background: #fbfaf7;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.78rem;
  line-height: 1.35;
}
.fence__phone p { margin: 0; }
.fp-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.35rem 0.25rem;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fp-bar__battery {
  width: 1.3rem;
  height: 0.62rem;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(var(--ink), var(--ink)) 1px 50% / 70% calc(100% - 2px) no-repeat;
}
.fp-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0.85rem 1rem; }
.fp-app > * { flex-shrink: 0; }
.fp-title { font-size: 1.15rem; font-weight: 750; font-stretch: 88%; }
.fp-sub { font-size: 0.72rem; color: var(--ink-soft); }
.fp-row { display: flex; justify-content: space-between; font-size: 0.74rem; font-weight: 600; }
.fence__phone .fp-row { margin-top: 0.45rem; }
.fp-row span:last-child { font-variant-numeric: tabular-nums; }
.fp-meter { display: block; height: 5px; border-radius: 3px; background: #d5e5d7; overflow: hidden; }
.fp-meter__fill { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--ok); }
.fp-label { font-weight: 700; }
.fence__phone .fp-label { margin-top: 0.55rem; }
.fp-finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fp-find {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0.4rem 0.55rem;
  padding: 0.45rem;
  border-radius: 0.6rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(34, 39, 31, 0.1);
}
.fence--live .fp-find:not(.is-found) { display: none; }
.fence--live .fp-find.is-found { animation: sd-in 320ms ease-out; }
.fp-thumb { display: block; width: 100%; height: auto; border-radius: 0.3rem; }
.fp-find__body { display: grid; gap: 0.1rem; align-content: start; min-width: 0; }
.fp-badge {
  justify-self: start;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fp-badge--down { background: var(--down); color: #fff; }
.fp-badge--work { background: var(--work); color: var(--ink); }
.fp-badge--fixed { background: var(--fixed); color: #fff; }
.fp-find__title { font-weight: 700; line-height: 1.2; }
.fp-find__text { font-size: 0.7rem; color: var(--ink-soft); }
.fp-actions { grid-column: 1 / -1; display: flex; gap: 0.35rem; }
.fp-actions span {
  flex: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  background: var(--slate);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}
.fp-actions span + span { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--slate); }
.fp-actions span.is-pressed { background: var(--slate-dark); color: #fff; }
.fp-ok { padding-top: 0.4rem; font-size: 0.72rem; color: var(--ink-soft); }
.fence__phone .fp-ok { margin-top: auto; }
.fp-ok::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.fp-notif {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  display: grid;
  gap: 0.05rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 39, 31, 0.08);
  transition: transform 320ms ease, opacity 320ms ease;
}
.fence:not(.fence--live) .fp-notif,
.fence--live .fp-notif:not(.is-shown) { opacity: 0; transform: translateY(-115%); }
.fp-notif__app { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.fp-notif__title { font-weight: 700; }
.fp-notif__text { font-size: 0.72rem; color: var(--ink-soft); }

/* steps: a list beside the stage on wide screens, two columns on tablets */
.fence__steps { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .fence__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
}
.fence__step { position: relative; padding: 1rem 0; border-top: 1px solid var(--line); }
@media (max-width: 47.99rem), (min-width: 80rem) {
  .fence__step:last-child { border-bottom: 1px solid var(--line); }
}
.fence__step p { margin: 0.45rem 0 0 1.7rem; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
.fence--live .fence__step:not(.is-active) .fence__step-btn { color: var(--ink-soft); }
.fence--live .fence__step.is-active p { color: var(--ink); }
.fence--live .fence__step-btn:hover { color: var(--ink); }
@media (min-width: 80rem) {
  /* beside the stage, only the active step's text is open, like a tab list */
  .fence--live .fence__step:not(.is-active) p { display: none; }
}

/* ----- records and guests demos (assets/js/demos.js) -----
   Smaller demos than the three drone ones: mostly HTML "screens" whose parts fade in as
   the loop plays. Hidden-until-shown states only apply once the script adds .demo--live,
   so with JS off every part is visible (the finished state). */
.feature__demo { margin: 0; }
@media (min-width: 64rem) {
  .feature--flip .feature__demo { order: 2; }
}
.demo__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; }
.demo__step { position: relative; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.demo__step:last-child { border-bottom: 1px solid var(--line); }
.demo__step p { margin: 0.35rem 0 0 1.7rem; font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); }
.demo--live .demo__step:not(.is-active) .demo__step-btn { color: var(--ink-soft); }
.demo--live .demo__step.is-active p { color: var(--ink); }
.demo--live .demo__step-btn:hover { color: var(--ink); }
.rec__inbox, .rec__harvest, .rec__chips span, .book__req, .book__client, .book__sent {
  transition: opacity 280ms ease, transform 280ms ease;
}
.demo--live .rec__inbox:not(.is-shown),
.demo--live .rec__harvest:not(.is-shown),
.demo--live .rec__chips span:not(.is-shown),
.demo--live .book__req:not(.is-shown),
.demo--live .book__client:not(.is-shown),
.demo--live .book__sent:not(.is-shown) { opacity: 0; transform: translateY(0.4rem); }

/* records: one buck's record */
.rec {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink);
}
.rec__inbox {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px -18px rgba(34, 39, 31, 0.6);
}
.rec__cam { position: relative; flex: none; width: 6rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #333; }
.rec__cam img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.15) brightness(0.92); }
.rec__cam--tag { display: grid; place-items: center; background: #e6e2d3; }
.rec__cam--tag svg { width: 58%; height: auto; }
.rec__stamp {
  position: absolute;
  inset: auto 0 0;
  padding: 0.1rem 0.3rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: 600 0.5rem/1.3 var(--mono);
  letter-spacing: 0.04em;
}
.rec__inbox-body { display: grid; gap: 0.1rem; min-width: 0; }
.rec__inbox-title { font-weight: 700; }
.rec__inbox-text { color: var(--ink-soft); }
.rec__confirm {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: #2e6b34;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 160ms linear;
}
.demo--live .rec__confirm:not(.is-done) { background: var(--slate); }
.demo--live .rec__confirm.is-pressed { background: var(--slate-dark); }
.rec__card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 40px -30px rgba(34, 39, 31, 0.6);
}
.rec__head { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; }
.rec__photo { width: 3.6rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.rec__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.rec__id { min-width: 0; }
.rec__name { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 750; font-stretch: 85%; line-height: 1.1; }
.rec__nick { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
.rec__meta { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.rec__status {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--rust);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  min-width: 7.5rem;   /* same width for both labels, so the name doesn't reflow */
}
.demo--live .rec__status:not(.is-harvested) { background: var(--paper); color: var(--ink); }
.rec__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0;
  border-block: 1px solid var(--line);
}
.rec__stats dt { font-size: 0.72rem; color: var(--ink-soft); }
.rec__stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 300ms linear; }
.rec__stats dd.is-new { color: var(--rust); }
.rec__label { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }
.rec__chart svg { display: block; width: 100%; height: auto; max-height: 7.5rem; }
.rec__vals text { font: 700 11px var(--ui); fill: var(--ink); text-anchor: middle; }
.rec__years text { font: 500 10px var(--ui); fill: var(--ink-soft); text-anchor: middle; }
.rec__harvest {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--rust);
  border-radius: 6px;
  background: #f6efe9;
}
.rec__harvest-title { font-weight: 700; }
.rec__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rec__chips span { padding: 0.12rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.72rem; font-weight: 600; }

/* guests: the week's booking board */
.book {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 40px -30px rgba(34, 39, 31, 0.6);
  font-family: var(--ui);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink);
}
.book__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.book__title { font-family: var(--display); font-size: 1.2rem; font-weight: 750; font-stretch: 85%; }
.book__req { padding: 0.3rem 0.6rem; border: 1px solid rgba(162, 78, 44, 0.35); border-radius: 8px; background: #f6efe9; font-size: 0.76rem; }
.book__req b { margin-right: 0.3rem; color: var(--rust); }
.book__grid {
  display: grid;
  grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, 1.75rem);
  gap: 3px 2px;
}
.book__day { grid-row: 1; grid-column: var(--c); padding-bottom: 0.2rem; font-size: 0.68rem; line-height: 1.15; text-align: center; color: var(--ink-soft); }
.book__day b { display: block; font-size: 0.8rem; color: var(--ink); }
.book__row { grid-row: var(--r); grid-column: 1; align-self: center; font-size: 0.74rem; font-weight: 600; transition: color 200ms linear; }
.book__row--cabin { font-weight: 500; color: var(--ink-soft); }
.book__row.is-free { color: var(--rust); }
.book__bk {
  z-index: 1;
  grid-row: var(--r);
  grid-column: var(--c) / span var(--s);
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0.4rem;
  border-radius: 4px;
  background: #dde3e8;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book__bk--cabin { background: #e6e4da; }
.book__bk--new { background: var(--rust); color: #fff; transform-origin: left center; transition: transform 380ms ease, opacity 200ms linear; }
.demo--live .book__bk--new:not(.is-shown) { opacity: 0; transform: scaleX(0.1); }
/* grazing plan: a pasture resting (hatched), including one that starts resting this week */
.book__bk--rest {
  background: repeating-linear-gradient(135deg, #efede6 0 5px, #e3e0d6 5px 10px);
  color: var(--ink-soft);
  font-weight: 500;
}
.book__hl {
  grid-row: 1 / -1;
  grid-column: var(--c) / span var(--s);
  border-radius: 6px;
  background: rgba(162, 78, 44, 0.1);
  opacity: 0;
  transition: opacity 260ms linear;
}
.demo--live .book__hl.is-shown { opacity: 1; }
.book__client { display: flex; gap: 0.65rem; align-items: center; padding: 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--mist); }
.book__client img { flex: none; width: 4.4rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.book__sent { margin: 0; font-weight: 600; color: #2e6b34; }
@media (max-width: 29.99rem) {
  .book { padding: 0.7rem; }
  .book__grid { grid-template-columns: 3rem repeat(7, minmax(0, 1fr)); }
  .book__bk { padding: 0 0.25rem; font-size: 0.6rem; }
}

/* temperature checks (cattle page): a small dashboard in the style of the head-count
   window. Thermal view beside a readout (they stack when the card is narrow), then a
   tracker that fills in as the calf is flagged, treated, and rechecked. Rows that wait
   for the scan share one grid cell with their placeholder, so nothing jumps. */
.temp {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1.5rem 3rem -2rem rgba(34, 39, 31, 0.45);
  font-family: var(--ui);
  color: var(--ink);
}
.temp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--mist);
  font-size: 0.85rem;
  line-height: 1.3;
}
.temp__bar-title { font-weight: 700; }
.temp__bar-sub { margin-left: 0.4rem; font-weight: 400; color: var(--ink-soft); }
.temp__bar-live { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.temp.is-scanning .survey__pill { background: var(--rust); color: #fff; }
.temp.is-scanning .survey__pill::before { background: #fff; animation: sd-blink 1.2s ease-in-out infinite; }
/* side by side only when each half gets 16rem; the view's contents stay inside x 22-298 so
   the slice crop (when the readout is taller) never cuts them */
.temp__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.temp__view { display: block; width: 100%; height: 100%; min-height: 13rem; background: #1a1030; }
.tc-cam { font: 700 10px/1 var(--mono); letter-spacing: 0.08em; fill: #e9eae6; fill-opacity: 0.85; }
.tc-flag text { font: 700 11px/1 var(--mono); fill: #fff; }
.tc-body { transition: opacity 200ms linear; }
.demo--live .tc-a:not(.is-shown) .tc-body { opacity: 0.4; }
.demo--live .tc-a:not(.is-flagged) .tc-flag { opacity: 0; }

.temp__panel { display: grid; gap: 0.85rem; align-content: start; padding: 0.95rem 1rem 1.05rem; font-size: 0.85rem; line-height: 1.35; }
.temp__panel p { margin: 0; }
.tp-label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }
.tp-note { font-size: 0.76rem; color: var(--ink-soft); }
.tp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tp-stat { display: grid; gap: 0.1rem; }
.tp-num { font-size: 2.2rem; font-weight: 700; font-stretch: 90%; line-height: 1; font-variant-numeric: tabular-nums; }
.temp.is-flagged .tp-stat--warm .tp-num { color: var(--rust); }
.tp-heat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; padding: 0.5rem 0.65rem; border-radius: 6px; background: var(--mist); }
.tp-heat .tp-label { display: inline; }
.tp-heat__val { font-weight: 700; color: #2e6b34; }
.tp-list .tp-label { margin-bottom: 0.4rem; }
.tp-slot { display: grid; }
.tp-wait, .tp-rows { grid-area: 1 / 1; }
.tp-wait { visibility: hidden; color: var(--ink-soft); }
.demo--live .tp-wait.is-shown { visibility: visible; }
.demo--live .tp-rows:not(.is-shown) { visibility: hidden; }
.tp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.tp-row {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  background: var(--mist);
  font-size: 0.82rem;
}
.tp-row--warm { background: #f6e7df; }
.tp-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-row--warm .tp-val { color: var(--rust); }
.tp-where { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-badge { padding: 0.08rem 0.5rem; border-radius: 999px; background: var(--rust); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.demo--live .temp:not(.is-flagged) .tp-badge { visibility: hidden; }
.tp-ok { font-size: 0.74rem; font-weight: 600; color: #2e6b34; }

.temp__track { list-style: none; margin: 0; padding: 0.85rem 1rem 0.95rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; font-size: 0.84rem; line-height: 1.35; }
.tt-step { position: relative; padding-left: 1.5rem; color: var(--ink-soft); transition: color 200ms linear; }
.tt-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color 200ms linear, box-shadow 200ms linear;
}
.tt-step b { margin-right: 0.35rem; }
.tt-step.is-done { color: var(--ink); }
.tt-step.is-done::before { box-shadow: none; }
.tt-step--flag.is-done::before { background: var(--rust); }
.tt-step--treat.is-done::before { background: var(--slate); }
.tt-step--ok.is-done::before { background: #2e6b34; }

/* herding (cattle page): the map beside its steps on wide screens, steps on the right
   (the mirror of the calving demo). The status and "move done" card sit over the map. */
.herd { margin-top: clamp(2.75rem, 5vw, 4.5rem); display: grid; gap: 2rem; }
.herd__stage { margin: 0; }
@media (min-width: 64rem) {
  .herd {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .herd .demo__steps { margin-top: 0; }
}
.herd__map {
  position: relative;
  aspect-ratio: 640 / 400;
  background: #e4e7dc;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.herd__map > svg { display: block; width: 100%; height: 100%; }
.herd__status {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  margin: 0;
  max-width: 60%;
  padding: 0.4rem 0.65rem 0.45rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px -12px rgba(34, 39, 31, 0.6);
  font-family: var(--ui);
  line-height: 1.3;
}
.herd__status-title { display: block; font-size: 0.85rem; font-weight: 700; }
.herd__status-sub { display: block; font-size: 0.74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.demo--live .survey__card:not(.is-shown) { opacity: 0; transform: translateY(0.5rem); }
@media (max-width: 39.99rem) {
  .herd__map { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
  .herd__status { top: 0.4rem; left: 0.4rem; padding: 0.3rem 0.45rem; }
  .herd__status-title { font-size: 0.72rem; }
  .herd__status-sub { font-size: 0.64rem; }
}

/* ----- contact ----- */
.contact { display: grid; gap: 3rem; }
@media (min-width: 64rem) {
  .contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
}
.contact__info { max-width: var(--measure); }
.contact-methods { margin: 2rem 0 0; }
.contact-method {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.contact-method:last-child { border-bottom: 1px solid var(--line); }
.contact-method__label { font-family: var(--ui); font-size: 0.88rem; color: var(--ink-soft); }
.contact-method__value { font-family: var(--ui); font-size: 1.3rem; font-weight: 600; }
.contact-method .btn { align-self: flex-start; margin-top: 0.35rem; }

/* ----- form ----- */
.form-panel {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.form-panel h3 { margin-bottom: 0.3rem; }
.form-panel__intro { color: var(--ink-soft); margin-bottom: 1.75rem; }
#contact-form { display: grid; column-gap: 1.25rem; }
@media (min-width: 40rem) {
  #contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide, .field--span, .form-actions, .form-status { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; margin-bottom: 1.15rem; }
.field label { margin-bottom: 0.4rem; font-family: var(--ui); font-size: 0.95rem; font-weight: 600; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  font-family: var(--ui);
  font-size: 1.0625rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--sage);
  border-radius: 2px;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--rust);
  outline-offset: 1px;
  border-color: var(--rust);
}
.field--wide label { font-family: var(--display); font-size: 1.2rem; font-weight: 700; font-stretch: 88%; }

.form-actions { margin-top: 0.75rem; }
.form-actions .btn { width: 100%; }
@media (min-width: 30rem) { .form-actions .btn { width: auto; min-width: 12rem; } }

.form-status { margin: 1.1rem 0 0; font-family: var(--ui); font-weight: 600; }
.form-status:empty { margin: 0; }
.form-status--ok { color: var(--slate); }
.form-status--err { color: var(--rust); }

/* honeypot: reachable by bots, off-screen for people */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----- footer ----- */
.site-footer { background: var(--ink); color: var(--paper); }
.footer-strip { display: flex; }
.footer-strip picture { flex: 1 1 0; min-width: 0; display: block; }
.footer-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  filter: saturate(0.8);
}
.site-footer .page { padding-block: clamp(3rem, 6vw, 5rem); }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: #fff; text-decoration-color: var(--rust-light); }

.footer-grid { display: grid; gap: 1.75rem; }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-mark { height: 3.25rem; width: auto; margin-bottom: 0.75rem; }
.footer-brand {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 750;
  font-stretch: 85%;
}
.footer-place { margin: 0; font-family: var(--ui); color: #b7bbb2; }
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  font-family: var(--ui);
}
.footer-contact .btn--book {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
}

.footer-credits { margin-top: 2.75rem; }
.footer-credits__title {
  margin: 0 0 0.6rem;
  font-family: var(--ui);
  font-size: 0.85rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.02em;
  color: #cfd2c8;
}
.footer-credits ul { list-style: none; margin: 0; padding: 0; }
.footer-credits li {
  margin-bottom: 0.3rem;
  font-family: var(--ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #aeb2a9;
}
.footer-legal { margin: 2rem 0 0; font-family: var(--ui); font-size: 0.85rem; color: #a4a89f; }

/* ----- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}