/* GENERATED FILE — do not edit by hand.
   Built from tokens/colors.css, tokens/typography.css, tokens/spacing.css, tokens/effects.css, tokens/base.css, ui_kits/website/kit.css, ui_kits/website/components.css by scripts/build-css.mjs.
   Edit those sources, re-run the script, and bump the ?v= query in the
   HTML <link> tags. */

/* ==== tokens/colors.css ==== */
/* TN Valley Outdoors — Color tokens
   Sourced from the live site (computed styles, 2026-06-10). */
:root {
  /* ---- Brand greens ---- */
  --green-500: #6EA833;   /* Primary — buttons, icons, accents */
  --green-400: #84BD45;   /* Logo highlight leaf / hover lift */
  --green-600: #5A9128;   /* Logo shadow leaf / button hover */
  --green-900: #053B06;   /* Dark forest — footer / contact band */
  --green-100: #D9E4B6;   /* Light green — "What We Do" band, value tiles */

  /* ---- Warm neutrals ---- */
  --cream-50:  #FEFAE0;   /* Light cream — "Our Services" band */
  --terracotta:#914F1E;   /* Warm brown — section eyebrow labels */

  /* ---- Ink / surface ---- */
  --ink-900: #1A1A1A;     /* Near-black headings */
  --ink-600: #666666;     /* Body copy */
  --ink-400: #8A8A8A;     /* Muted / captions */
  --white:   #FFFFFF;
  --black:   #000000;     /* Copyright bar */

  /* Field surfaces */
  --field-bg: #F1F1EC;
  --field-border: #C9CFB4;

  /* Hero / image overlay */
  --overlay-dark: rgba(12, 24, 8, 0.55);
  --overlay-grad: linear-gradient(180deg, rgba(10,20,6,.30) 0%, rgba(10,20,6,.55) 100%); /* @kind color */

  /* ---------- Semantic aliases ---------- */
  --color-primary:        var(--green-500);
  --color-primary-hover:  var(--green-600);
  --color-accent:         var(--terracotta);

  --text-heading:  var(--ink-900);
  --text-body:     var(--ink-600);
  --text-muted:    var(--ink-400);
  --text-on-dark:  var(--white);
  --text-eyebrow:  var(--terracotta);

  --surface-page:   var(--white);
  --surface-soft:   var(--green-100);   /* light green band */
  --surface-cream:  var(--cream-50);    /* cream band */
  --surface-dark:   var(--green-900);   /* dark forest band */
  --surface-card:   var(--white);
  --surface-footbar:var(--black);

  --border-subtle: rgba(0,0,0,.08);
}

/* ==== tokens/typography.css ==== */
/* TN Valley Outdoors — Typography tokens
   Typeface: Onest. The live site leans on extremes — ultra-thin (100) for the
   big hero/display lines and section eyebrows, medium (500) for body, bold
   (700) for in-section headings. That thin-display + bold-heading contrast is
   a signature trait; keep it. */
:root {
  --font-sans: 'Onest', Helvetica, Arial, 'Lucida Grande', sans-serif;

  /* Weights */
  --fw-thin:    100; /* @kind font */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* Type scale (px) — display sizes are intentionally large + thin */
  --fs-hero:      85px;   /* hero display, weight 100 */
  --fs-display:   56px;   /* large page title */
  --fs-h2:        40px;   /* in-section heading, weight 700 */
  --fs-h3:        26px;   /* sub-heading */
  --fs-eyebrow:   30px;   /* section label, weight 100, terracotta */
  --fs-lead:      20px;   /* lead paragraph */
  --fs-body:      16px;   /* default body (site uses 14; 16 reads better) */
  --fs-body-sm:   14px;   /* dense body / form labels */
  --fs-button:    18px;   /* CTA buttons, weight 300 */
  --fs-caption:   13px;

  /* Line heights */
  --lh-tight:  1.05;   /* @kind other */
  --lh-snug:   1.25;   /* @kind other */
  --lh-normal: 1.6;    /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0;      /* @kind other */
  --ls-wide:  0.04em;  /* @kind other */
}

/* ==== tokens/spacing.css ==== */
/* TN Valley Outdoors — Spacing, radii, layout tokens */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section rhythm — the site breathes with generous vertical padding */
  --section-py: 96px;
  --container-max: 1200px;
  --container-pad: 24px;
  --grid-gap: 28px;

  /* Radii */
  --radius-sm: 6px;    /* service card image / label strip */
  --radius-md: 10px;   /* cards, value tiles */
  --radius-lg: 16px;   /* large panels */
  --radius-pill: 50px; /* all CTA buttons */
  --radius-field: 8px; /* form inputs */
}

/* ==== tokens/effects.css ==== */
/* TN Valley Outdoors — Shadows, borders, motion
   The site is flat and clean: soft card shadows, no heavy elevation, pill
   buttons, simple opacity/color hover states, no bounces. */
:root {
  /* Shadows — subtle, warm-neutral */
  --shadow-card:  0 6px 20px rgba(20, 30, 12, 0.10);
  --shadow-soft:  0 2px 10px rgba(20, 30, 12, 0.08);
  --shadow-pop:   0 14px 40px rgba(20, 30, 12, 0.18);
  --shadow-cta:   0 8px 20px rgba(110, 168, 51, 0.30);

  /* Image overlay used on hero / CTA photo panels */
  --img-overlay: linear-gradient(180deg, rgba(10,20,6,.25), rgba(10,20,6,.55)); /* @kind color */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}

/* ==== tokens/base.css ==== */
/* TN Valley Outdoors — Base element styles
   Light, opinionated defaults built on the tokens. Safe to ship to consumers. */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--color-primary); text-decoration: none; transition: var(--transition-base); }
a:hover { color: var(--color-primary-hover); }

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

/* Utility: section eyebrow label — thin terracotta, used above headings */
.tvo-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-thin);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-normal);
  line-height: 1.2;
}

/* Utility: constrained content container */
.tvo-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ==== ui_kits/website/kit.css ==== */
/* TN Valley Outdoors — website UI kit page styles (layout/sections only;
   component visuals live in tvo-lib.jsx). */

.kit-app { background: var(--white); overflow-x: hidden; }
.kit-section { padding: var(--section-py) 0; }
.kit-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* ---- Hero ---- */
.kit-hero { position: relative; min-height: 560px; display: flex; flex-direction: column; }
.kit-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.kit-hero__bg::after { content: ''; position: absolute; inset: 0; background: var(--overlay-grad); }
.kit-hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 80px 24px 96px; color: #fff; }
.kit-hero__title { font-size: var(--fs-hero); font-weight: var(--fw-thin); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); margin: 0; color: #fff; max-width: 14ch; }
.kit-hero__title--page { font-weight: var(--fw-bold); }
.kit-hero__sub { font-size: 30px; font-weight: var(--fw-thin); margin: 18px 0 36px; max-width: 24ch; line-height: 1.25; }
.kit-hero__lead { font-size: 19px; font-weight: var(--fw-medium); line-height: 1.6; max-width: 60ch; margin: 18px 0 34px; }

/* ---- generic two-column split ---- */
.kit-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kit-split--rev .kit-split__media { order: 2; }
.kit-prose h2 { font-size: var(--fs-h2); margin: 10px 0 20px; }
.kit-prose p { font-size: var(--fs-body); color: var(--text-body); margin: 0 0 16px; }
.kit-prose .kit-actions { margin-top: 26px; }

/* photo collage (About / What We Do) */
.kit-collage { position: relative; min-height: 420px; }
.kit-collage img { position: absolute; border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  object-fit: cover; border: 6px solid #fff; }
.kit-collage__a { width: 74%; top: 0; left: 0; aspect-ratio: 16/11; z-index: 1; }
.kit-collage__b { width: 56%; bottom: 0; right: 0; aspect-ratio: 5/4; z-index: 2; border-color: var(--green-100); }

/* ---- Video ---- */
.kit-video { position: relative; max-width: 760px; margin: 0 auto; border: 8px solid var(--green-100);
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); }
.kit-video img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.kit-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,20,6,.18); border: none; cursor: pointer; }
.kit-video__play span { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; color: var(--green-600); transition: var(--transition-base); }
.kit-video__play:hover span { transform: scale(1.08); background: #fff; }

/* ---- centered section header ---- */
.kit-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.kit-head h2 { font-size: var(--fs-h2); margin: 8px 0 16px; }
.kit-head p { font-size: var(--fs-body); color: var(--text-body); }

/* ---- grids ---- */
.kit-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.kit-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.kit-center-actions { display: flex; justify-content: center; margin-top: 48px; }

/* ---- Contact CTA split ---- */
.kit-cta { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.kit-cta__photo { position: relative; padding: 80px 56px; display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center; min-height: 520px; color: #fff; }
.kit-cta__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,6,.25), rgba(10,20,6,.72)); }
.kit-cta__photo > * { position: relative; z-index: 2; }
.kit-cta__photo h2 { color: #fff; font-size: 40px; margin: 0; max-width: 16ch; }
.kit-cta__form { background: var(--green-100); padding: 64px 56px; }
.kit-cta__form h3 { font-size: 30px; font-weight: var(--fw-bold); color: var(--ink-900); margin: 6px 0 26px; letter-spacing: var(--ls-tight); }
.kit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kit-form-grid .kit-span2 { grid-column: 1 / -1; }

/* ---- job listings ---- */
.kit-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.kit-job__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.kit-job h3 { font-size: 22px; margin: 22px 0 12px; }
.kit-job p { font-size: var(--fs-body); color: var(--text-body); margin: 0 0 18px; }
.kit-job em { color: var(--ink-900); font-style: italic; }

/* ---- job detail prose ---- */
.kit-jd { max-width: 820px; margin: 0 auto; }
.kit-jd h2 { font-size: 30px; margin: 40px 0 14px; }
.kit-jd h3 { font-size: 19px; color: var(--green-600); margin: 26px 0 8px; }
.kit-jd p, .kit-jd li { font-size: var(--fs-body); color: var(--text-body); line-height: 1.7; }
.kit-jd ul { margin: 0 0 14px; padding-left: 22px; }
.kit-jd li { margin-bottom: 6px; }

/* thank-you */
.kit-thanks { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; }
.kit-thanks h1 { font-size: 56px; font-weight: var(--fw-thin); }

@media (max-width: 860px) {
  .kit-split, .kit-cta, .kit-jobs, .kit-grid-4, .kit-grid-3, .kit-form-grid { grid-template-columns: 1fr; }
  .kit-hero__title { font-size: 54px; } .kit-hero__sub { font-size: 22px; }
  .kit-section { padding: 56px 0; }
  .kit-head h2, .kit-prose h2 { font-size: 30px; }
  .kit-cta__photo { padding: 48px 24px; min-height: 340px; }
  .kit-cta__form { padding: 40px 24px; }
  .kit-form-grid .kit-span2 .tvo-btn { width: 100%; }
}
@media (max-width: 540px) {
  .kit-hero__title { font-size: 40px; }
  .kit-hero__lead { font-size: 16px; }
  .kit-hero__sub { font-size: 20px; }
  .kit-hero__inner { padding: 72px 20px 76px; }
  .kit-hero { min-height: 480px; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .kit-grid-3, .kit-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ==== ui_kits/website/components.css ==== */
/* TN Valley Outdoors — component visual styles as a static stylesheet.
   Mirrors the CSS injected by ui_kits/website/tvo-lib.jsx, so plain static
   HTML pages get the real Button / NavBar / Footer / card / field looks.
   Built on the design-system tokens (link styles.css first). */

/* ---- Buttons ---- */
.tvo-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans);font-weight:var(--fw-light);font-size:var(--fs-button);line-height:1;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;border-radius:var(--radius-pill);padding:15px 30px;min-height:44px;box-sizing:border-box;transition:var(--transition-base)}
.tvo-btn--lg{font-size:20px;padding:18px 38px}
.tvo-btn--sm{font-size:15px;padding:11px 22px}
.tvo-btn--full{display:flex;width:100%}
.tvo-btn--primary{background:var(--green-500);color:#fff;box-shadow:var(--shadow-cta)}
.tvo-btn--primary:hover{background:var(--green-600);color:#fff;box-shadow:0 10px 26px rgba(90,145,40,.38);transform:translateY(-1px)}
.tvo-btn--primary:active{transform:translateY(0)}
.tvo-btn--outline{background:transparent;color:var(--green-600);box-shadow:inset 0 0 0 2px var(--green-500)}
.tvo-btn--outline:hover{background:var(--green-500);color:#fff}
.tvo-btn--onDark{background:var(--green-500);color:#fff}
.tvo-btn--onDark:hover{background:var(--green-400);color:#fff}
.tvo-btn--text{background:transparent;color:var(--green-600)}
.tvo-btn--text:hover{color:var(--green-600)}
.tvo-btn[disabled]{opacity:.5;pointer-events:none}

/* ---- Section eyebrow ---- */
.tvo-eyebrow-label{display:block;font-family:var(--font-sans);font-weight:var(--fw-thin);color:var(--terracotta);font-size:var(--fs-eyebrow);line-height:1.2}
.tvo-eyebrow-label--center{text-align:center}
.tvo-eyebrow-label--sm{font-size:22px}

/* ---- Service card ---- */
.tvo-service{display:block;border-radius:var(--radius-sm);overflow:hidden;background:#fff;box-shadow:var(--shadow-card);text-decoration:none;transition:var(--transition-base)}
.tvo-service:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.tvo-service__img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}
.tvo-service__label{padding:18px 16px;text-align:center;font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:17px;color:var(--ink-900);letter-spacing:var(--ls-tight)}

/* ---- Value tile ---- */
.tvo-value{background:var(--green-100);border-radius:var(--radius-md);padding:34px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;transition:var(--transition-base)}
.tvo-value:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.tvo-value__icon{color:var(--green-600)}
.tvo-value__label{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:18px;color:var(--ink-900);line-height:1.25;letter-spacing:var(--ls-tight)}

/* ---- Contact card (on dark) ---- */
.tvo-contact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:26px 20px;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.tvo-contact__icon{color:var(--green-400)}
.tvo-contact__title{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-100)}
.tvo-contact__value{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:16px;color:#fff;line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
a.tvo-contact__value:hover{color:var(--green-400)}

/* ---- Form field ---- */
.tvo-field{display:flex;flex-direction:column;gap:7px;font-family:var(--font-sans)}
.tvo-field__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--green-900)}
.tvo-field__req{color:var(--green-600)}
.tvo-field__control{font-family:var(--font-sans);font-size:16px;font-weight:var(--fw-medium);color:var(--ink-900);background:#fff;border:1px solid var(--field-border);border-radius:var(--radius-field);padding:13px 15px;width:100%;transition:var(--transition-base)}
.tvo-field__control::placeholder{color:var(--ink-400)}
.tvo-field__control:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(110,168,51,.18)}
textarea.tvo-field__control{min-height:120px;resize:vertical}

/* ---- Nav ---- */
.tvo-nav{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:1332px;width:calc(100% - 48px);margin-inline:auto;padding:27px 0;font-family:var(--font-sans)}
.tvo-nav--transparent{background:transparent}
.tvo-nav--solid{background:#fff;box-shadow:var(--shadow-soft)}
.tvo-nav__links{display:flex;gap:32px;align-items:center;padding-left:11px}
.tvo-nav__link{font-size:20px;font-weight:var(--fw-medium);text-decoration:none;transition:var(--transition-base);cursor:pointer}
.tvo-nav--transparent .tvo-nav__link{color:#fff}
.tvo-nav--solid .tvo-nav__link{color:var(--ink-900)}
.tvo-nav__link:hover{color:var(--green-500)}
.tvo-nav__logo{display:flex;justify-content:center}
.tvo-nav__logo a{display:flex}
.tvo-nav__logo img{display:block;height:67px;width:auto}
.tvo-nav__cta{display:flex;justify-content:flex-end}
.tvo-nav__cta .tvo-btn{font-size:18px;padding:5px 18px;min-height:0;height:41px}
.tvo-nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--green-500);padding:0;flex:0 0 auto}
.tvo-nav--solid .tvo-nav__toggle{color:var(--ink-900)}
.tvo-nav__mobileonly{display:none}
@media(max-width:760px){
  .tvo-nav{display:flex;align-items:flex-end;justify-content:space-between;max-width:none;width:auto;margin:0;padding:12px 20px}
  .tvo-nav__cta{display:none}
  .tvo-nav__toggle{display:flex}
  .tvo-nav__logo{justify-content:flex-start}
  .tvo-nav__logo img{height:70px;transform:translateY(2px)}
  .tvo-nav__toggle{transform:translateY(10px)}
  .tvo-nav__toggle svg{width:34px;height:34px}
  .tvo-nav--open{background:rgb(8,16,6)}
  .tvo-nav--open .tvo-nav__toggle{color:var(--green-500)}
  .tvo-nav__links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;background:rgb(8,16,6);padding:12px 0 16px;box-shadow:var(--shadow-card);z-index:30;border-top:1px solid rgba(255,255,255,.16)}
  .tvo-nav--open .tvo-nav__links{display:flex}
  .tvo-nav__links .tvo-nav__link{color:#fff;padding:0 24px;min-height:56px;display:flex;align-items:center;width:100%;font-size:21px}
  .tvo-nav__mobileonly{display:flex}
  .tvo-nav__phone{gap:10px;justify-content:center;margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);color:var(--green-100);font-size:20px}
  .tvo-nav__phone svg{flex:0 0 auto}
  .tvo-nav__menucta{padding:14px 24px 4px;width:100%}
  .tvo-nav__menucta .tvo-btn{width:100%;font-size:19px}
}

/* ---- Footer ---- */
.tvo-footer{background:var(--green-900);color:#fff;font-family:var(--font-sans)}
.tvo-footer__inner{max-width:var(--container-max);margin:0 auto;padding:80px var(--container-pad);display:grid;grid-template-columns:1.1fr 1.4fr;gap:56px;align-items:start}
.tvo-footer__logo{height:70px;width:auto;margin-bottom:22px;display:block}
.tvo-footer__heading{font-size:40px;font-weight:var(--fw-bold);color:#fff;margin:0 0 18px;letter-spacing:var(--ls-tight)}
.tvo-footer__copy{color:var(--green-100);font-size:16px;line-height:1.7;max-width:420px;margin:0 0 26px}
.tvo-footer__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tvo-footer__bar{background:#000;color:rgba(255,255,255,.7);text-align:center;font-size:13px;font-weight:var(--fw-medium);padding:18px}
@media(max-width:760px){.tvo-footer__inner{grid-template-columns:1fr;gap:32px;padding:54px 20px}.tvo-footer__cards{grid-template-columns:1fr}.tvo-footer__heading{font-size:30px}}