/* ============================================================
   ROVE — Home page (photo-hero) only.
   Shared chrome (nav, buttons, eyebrow, sections, cta-strip,
   footer) lives in site.css; tokens in colors_and_type.css.
   ============================================================ */

/* ── Hero ── */
.hero { position: relative; padding: 80px 0 96px; overflow: hidden; }
h1.hero-title { font: var(--t-display-xl); letter-spacing: -0.018em; margin: 18px 0 18px; max-width: 560px; text-wrap: balance; }
.hero-sub { font: 400 19px/1.5 var(--font-sans); color: var(--ink-2); max-width: 520px; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 18px; align-items: center; margin-top: 28px; color: var(--ink-2); font: var(--t-small); flex-wrap: wrap; }
.hero-trust > span:not(.sep) { white-space: nowrap; }
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--stone-400); }
.hero-copy-left { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

/* Browser-framed product shot tucked under the hero */
.hero-shot { position: relative; z-index: 1; margin-top: 56px; }
.browser { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-3), 0 40px 80px rgba(42,34,24,0.16); }
.browser-bar { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--cream-100); border-bottom: 1px solid var(--line); }
.browser-bar .dots { display: flex; gap: 8px; }
.browser-bar .dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.browser-bar .url { flex: 1; max-width: 420px; height: 28px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 14px; font: var(--t-mono); font-size: 12px; color: var(--ink-2); }
.browser-viewport { aspect-ratio: 2660 / 1540; overflow: hidden; }
.browser-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
@media (max-width: 880px) { .browser-viewport { aspect-ratio: 2660 / 1960; } }

/* ── Photo hero (cattle) ── */
.photo-hero { position: relative; padding: 0; min-height: 720px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.photo-hero .bg { position: absolute; inset: 0; background-image: url("/assets/images/cows-hill.jpg"); background-size: cover; background-position: center 42%; }
.photo-hero .scrim { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(18,34,24,0.88) 0%, rgba(18,34,24,0.66) 40%, rgba(18,34,24,0.18) 78%, rgba(18,34,24,0.05) 100%),
    linear-gradient(0deg, rgba(18,34,24,0.55) 0%, rgba(18,34,24,0) 46%); }
.photo-hero .wrap { position: relative; z-index: 2; padding-top: 104px; padding-bottom: 132px; }
.photo-hero .hero-title { color: var(--cream-50); max-width: 600px; }
.photo-hero .hero-sub { color: rgba(250,245,237,0.9); max-width: 520px; }
.photo-hero .hero-ctas { justify-content: flex-start; }
.photo-hero .eyebrow { background: rgba(250,245,237,0.16); color: var(--cream-50); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.photo-hero .eyebrow .dot { background: var(--cream-50); }
.photo-hero .btn-primary { background: var(--cream-50); color: var(--forest-900); }
.photo-hero .btn-primary:hover { background: #fff; color: var(--forest-900); }
.photo-hero .btn-ghost { color: var(--cream-50); border-color: rgba(250,245,237,0.55); background: rgba(250,245,237,0.04); }
.photo-hero .btn-ghost:hover { color: var(--cream-50); border-color: var(--cream-50); }
.photo-hero .hero-trust { color: rgba(250,245,237,0.85); }
.photo-hero .hero-trust .sep { background: rgba(250,245,237,0.5); }
.hero-shot.pull-up { margin-top: -76px; margin-bottom: 28px; position: relative; z-index: 3; }
@media (max-width: 880px) {
  .photo-hero { min-height: 560px; }
  .photo-hero .wrap { padding-top: 72px; padding-bottom: 104px; }
  .hero-shot.pull-up { margin-top: -56px; }
}

/* ── Trust strip ── */
.trust { background: var(--forest-900); color: var(--ink-on-dark); padding: 22px 0; }
.trust-inner { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; font: var(--t-body-strong); font-size: 14px; letter-spacing: 0.02em; }
.trust-inner span { display: inline-flex; align-items: center; gap: 10px; opacity: 0.92; }
.trust-inner .glyph { width: 18px; height: 18px; opacity: 0.85; }

/* ── Feature grid ── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: #fff; border-radius: var(--r-l); padding: 28px; box-shadow: var(--shadow-1), var(--shadow-inset); display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
.feature .icon { width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; }
.feature .icon svg { width: 22px; height: 22px; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feature.task   .icon { background: var(--sage-200); color: var(--forest-700); }
.feature.padd   .icon { background: color-mix(in oklab, var(--paddock-400) 30%, var(--cream-50)); color: var(--forest-700); }
.feature.cal    .icon { background: var(--wheat-200); color: #6b4f10; }
.feature.map    .icon { background: var(--sky-200); color: #2a4757; }
.feature.crop   .icon { background: var(--soil-300); color: var(--soil-600); }
.feature.water  .icon { background: color-mix(in oklab, var(--sky-500) 25%, var(--cream-50)); color: var(--sky-500); }
.feature h3 { font: var(--t-h1); margin: 0; }
.feature p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.feature .more { margin-top: auto; color: var(--forest-700); font: var(--t-body-strong); font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.feature .more:hover { color: var(--forest-900); }

/* ── Highlight rows ── */
.highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.highlight.flip .copy { order: 2; }
.highlight .copy h3 { font: var(--t-display-m); letter-spacing: -0.01em; margin: 14px 0 14px; text-wrap: balance; }
.highlight .copy p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 480px; text-wrap: pretty; }
.highlight .bullets { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.highlight .bullets li { display: flex; gap: 10px; align-items: flex-start; font: var(--t-body); color: var(--ink-1); }
.highlight .bullets li::before {
  content: ""; width: 16px; height: 16px; margin-top: 4px; background: var(--forest-900);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  flex: 0 0 auto;
}
.paddock-vis { background: var(--cream-100); border-radius: var(--r-xl); padding: 36px; box-shadow: var(--shadow-2), var(--shadow-inset); aspect-ratio: 4/3; position: relative; overflow: hidden; }
.map-vis { background: var(--cream-100); border-radius: var(--r-xl); aspect-ratio: 4/3; box-shadow: var(--shadow-2), var(--shadow-inset); overflow: hidden; position: relative; }

/* ── Quote ── */
.quote-section { background: var(--forest-900); color: var(--ink-on-dark); }
.quote-section .wrap { padding-top: 96px; padding-bottom: 96px; }
.quote-section .eyebrow { background: rgba(250,245,237,0.1); color: var(--cream-50); }
.quote-section .eyebrow .dot { background: var(--cream-50); }
.quote { font: 500 36px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--cream-50); max-width: 920px; margin: 24px 0 32px; text-wrap: balance; }
.quote-meta { display: flex; align-items: center; gap: 14px; }
.quote-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--soil-300); display: grid; place-items: center; color: var(--soil-600); font: 600 16px/1 var(--font-sans); }
.quote-name { font: var(--t-body-strong); }
.quote-role { font: var(--t-meta); color: rgba(250,245,237,0.7); margin-top: 2px; }

/* ── Mobile ── */
@media (max-width: 880px) {
  .features { grid-template-columns: 1fr; }
  .highlight { grid-template-columns: 1fr; gap: 32px; }
  .highlight.flip .copy { order: 0; }
  .trust-inner { gap: 18px 28px; }
}
@media (max-width: 560px) {
  h1.hero-title { font-size: 38px; }
}