/* ══════════════════════════════════════════════════════════════
   HarvestHawk V2: the design layer.

   Loaded last on every page, so it sits over each page's own styles.
   One idea: calm confidence. Bigger, quieter type; room around things;
   content that settles into place as you arrive at it; one film per
   page, never four; the brand's green and orange doing the talking.
   ══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: rgba(241,138,39,.35); }

/* ── Type ──────────────────────────────────────────────────────── */
h1 { font-size: clamp(38px, 5.6vw, 70px) !important; line-height: 1.02 !important; letter-spacing: -0.028em !important; font-weight: 800 !important; text-wrap: balance; }
h2 { letter-spacing: -0.022em !important; line-height: 1.08 !important; text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
/* Only a section's own heading grows; headings inside cards and lists keep their size. */
section > .container > h2, section > h2, .section-heading, .price-h2 { font-size: clamp(30px, 4vw, 46px) !important; }
/* A heading in a narrow title rail (the editorial two-column layout) stays a size that fits the column. */
section > .container > div > h2:first-child:only-of-type, .hh-journey-head h2 { font-size: clamp(24px, 2.6vw, 34px) !important; }
.loc-card h2, .grant-card-inner h2, [class*="card"] h2 { font-size: revert-layer; }
.section-sub, .page-hero p, .hero p { font-size: clamp(16px, 1.6vw, 19px) !important; line-height: 1.6 !important; }
section p { line-height: 1.7; }

/* ── Space: sections breathe ───────────────────────────────────── */
section:not(.hero):not(.page-hero):not(.cta-strip):not(.hh-launch) { padding-top: clamp(52px, 7vw, 88px) !important; padding-bottom: clamp(52px, 7vw, 88px) !important; }
.section-heading { margin-bottom: 10px !important; }
.section-sub { margin-bottom: clamp(32px, 4vw, 52px) !important; }
.footer { padding-top: 72px !important; }

/* ── Sub-page hero: a full band, with a film where one earns it ─── */
.page-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(56vh, 560px); padding-top: clamp(72px, 10vw, 128px) !important; padding-bottom: clamp(64px, 8vw, 104px) !important; background: linear-gradient(160deg, #0b4219 0%, #115b27 55%, #1a6b30 100%) !important; }
.page-hero:not([data-video]) { min-height: min(40vh, 400px); }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero .v2-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: 0; opacity: 0; transition: opacity 1.2s ease; }
.page-hero.has-video .v2-video { opacity: 1; }
/* Darker towards the edges, so any caption baked into a clip fades rather than reads. */
.page-hero.has-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,30,15,.55) 0%, rgba(17,91,39,.62) 50%, rgba(10,40,18,.92) 100%); }
.page-hero .pill { letter-spacing: .09em; }

/* ── The pause control, shared with the home page's own ──────────── */
.hero-pause, .v2-pause { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(13,13,13,.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); padding: 0; }
.hero-pause svg, .v2-pause svg { width: 18px; height: 18px; fill: currentColor; }
.hero-pause .hp-play, .v2-pause .hp-play { display: none; }
.hero-pause.is-paused .hp-play, .v2-pause.is-paused .hp-play { display: block; }
.hero-pause.is-paused .hp-pause, .v2-pause.is-paused .hp-pause { display: none; }
.hero-pause:focus-visible, .v2-pause:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── Surfaces: lighter boxes, lift on hover ────────────────────── */
.service-card, .why-card, .help-card, .price-card, .loc-card, .grant-sidebar, .news-card, .show-card,
[style*="border:2px solid rgba(17,91,39,.14)"], [style*="border:1px solid #e4ddcd"] {
  border-width: 1px !important; border-color: rgba(17,91,39,.12) !important; border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(17,91,39,.04); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
@media (hover: hover) {
  .service-card:hover, .why-card:hover, .help-card:hover, .price-card:hover, .loc-card:hover, .show-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,91,39,.10); }
}

/* ── Buttons and pills ─────────────────────────────────────────── */
.btn-quote, .btn-login, .hero-btn-primary, .hero-btn-secondary, .hh-launch-submit, .cta-btn-white, .news-primary, .shows-cta, .hgg-btn, .portal-btn, .grant-link, .mm-cta {
  border-radius: 999px !important; letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
@media (hover: hover) {
  .btn-quote:hover, .hero-btn-primary:hover, .hh-launch-submit:hover, .cta-btn-white:hover, .news-primary:hover, .shows-cta:hover, .hgg-btn:hover, .portal-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
}
.pill { letter-spacing: .08em !important; font-size: 11px !important; text-transform: uppercase; }
/* Contrast: dark text on every orange surface (7.8:1), and a darker orange for
   small text on cream. White on orange was 2.5:1. */
.pill[style*="--orange"], .hero-tag, .hero-btn-primary, .service-detail-btn, .form-submit, .equipment-quote-btn, .aside-btn, .shows-cta, .hgg-badge, .cookie-btn-accept, .btn-quote, .mm-cta, .hh-launch-submit, .portal-badge, .news-eyebrow[style*="--orange"] { color: #1c1c1c !important; }
:root { --orange-text: #9e4f08; }

/* Eight menu items at laptop widths: a touch less padding so nothing wraps or collides. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-links > a, .nav-links > .nav-dropdown > a { padding-left: 7px !important; padding-right: 7px !important; font-size: 13.5px !important; letter-spacing: 0 !important; }
  .nav-links { gap: 2px !important; }
}
/* ── Nav slims and seals as you scroll ──────────────────────────── */
.nav { transition: padding .25s ease, box-shadow .25s ease, background .25s ease; }
.nav.is-scrolled { padding-top: 8px !important; padding-bottom: 8px !important; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.18); }
@supports (backdrop-filter: blur(8px)) { .nav.is-scrolled { background: rgba(17,91,39,.9) !important; backdrop-filter: blur(10px); } }

/* ── Media ────────────────────────────────────────────────────── */
section video:not(.hero-video):not(.v2-video), .service-video { border-radius: 18px; }
table { border-collapse: separate !important; border-spacing: 0; overflow: hidden; border-radius: 14px; }

/* ── Arrival: content settles into place; headings never move ───── */
html.v2-js .v2-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
html.v2-js .v2-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.v2-js .v2-reveal { opacity: 1; transform: none; transition: none; } }

/* ── Scroll-linked arrival (the Jaguar "autocue"): where the browser can tie an
   animation to scroll position, content arrives in step with the reader's hand,
   not on a timer. Elsewhere the observer fallback above still applies. ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.v2-js .v2-reveal { opacity: 1; transform: none; transition: none; animation: v2Arrive linear both; animation-timeline: view(); animation-range: entry 5% entry 40%; }
    html.v2-js .v2-reveal.in { animation-play-state: running; }
    html.v2-js img.v2-reveal, html.v2-js .v2-reveal > img:only-child { animation-name: v2ArriveImg; }
  }
}
@keyframes v2Arrive { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes v2ArriveImg { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Autocue: the intro paragraphs on the location pages brighten a word at a time. */
html.v2-stage .v2-autocue { color: inherit; }
html.v2-stage .v2-autocue > span { display: inline; opacity: .28; transition: opacity .35s ease; }
html.v2-stage .v2-autocue.in > span { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.v2-stage .v2-autocue > span { opacity: 1; transition: none; animation: v2Word linear both; animation-timeline: view(); animation-range: entry calc(8% + var(--w, 0) * 0.9%) entry calc(26% + var(--w, 0) * 0.9%); }
  }
}
@keyframes v2Word { from { opacity: .22; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.v2-stage .v2-autocue > span { opacity: 1 !important; animation: none !important; } }

/* "not pesticides" is the question every farmer has; it links to the plain answer. */
.ppp-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ppp-link:hover { color: var(--green); }

/* ── Footer brand column: one left edge, a set rhythm. The hawk image carries
   40px of transparent canvas on its left (of 300), so he is pulled left by the
   same fraction at display size, and the text lines up with his feet. ── */
.footer-brand { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
.footer-barley { width: 88px !important; height: auto !important; display: block; margin: 0 0 10px -12px !important; }
.footer-logo-text { margin: 0 0 10px !important; line-height: 1.15 !important; }
.footer-slogan { margin: 0 0 5px !important; }
.footer-subslogan { color: var(--amber) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0; line-height: 1.4; white-space: nowrap; margin: 0 0 18px !important; }
.footer-company { font-size: 11px !important; line-height: 1.55 !important; color: rgba(255,255,255,.5) !important; max-width: 36ch; margin: 0 0 22px !important; }
.footer-socials { margin: 0 !important; }

/* ── Cookie card: a quiet card at the foot of the page in the site's own colours,
   three equal choices, nothing dimmed. "Necessary only" is as easy as "Accept all". ── */
.cookie-overlay { background: transparent !important; backdrop-filter: none !important; pointer-events: none; display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; padding: 0 20px 20px !important; visibility: hidden; }
.cookie-overlay.show { visibility: visible; }
.cookie-overlay:not(.show) { display: none !important; }
.cookie-modal { pointer-events: auto; background: #fff !important; color: var(--near-black) !important; border: 1px solid rgba(17,91,39,.14) !important; border-radius: 18px !important; box-shadow: 0 18px 56px rgba(0,0,0,.22) !important; width: min(440px, 100%) !important; max-width: 440px !important; padding: 22px 22px 18px !important; animation: none !important; }
.cookie-modal h4 { color: var(--green) !important; font-size: 17px !important; font-weight: 800 !important; margin: 0 0 6px !important; letter-spacing: -0.01em; }
.cookie-modal .cookie-desc { color: #4a4a4a !important; font-size: 13.5px !important; line-height: 1.55 !important; margin: 0 0 14px !important; }
.cookie-modal a { color: var(--green) !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 2px; }
.cookie-categories { display: grid; gap: 6px; margin: 0 0 14px !important; }
.cookie-cat { background: var(--cream) !important; border: 1px solid rgba(17,91,39,.10) !important; border-radius: 12px !important; padding: 10px 12px !important; }
.cookie-cat label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cookie-cat input[type="checkbox"] { accent-color: var(--green); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.cookie-cat-label { color: var(--green) !important; font-size: 13.5px !important; font-weight: 700 !important; }
.cookie-cat-desc { color: #6b6b6b !important; font-size: 12px !important; line-height: 1.45; }
.cookie-cat.required { opacity: .85; }
.cookie-btns { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; background: transparent !important; padding: 0 !important; }
.cookie-btn, .cookie-btn-accept, .cookie-btn-selected, .cookie-btn-decline { background: #fff !important; color: var(--green) !important; border: 2px solid var(--green) !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 12.5px !important; padding: 10px 6px !important; white-space: nowrap; cursor: pointer; opacity: 1 !important; transition: background .2s, color .2s; }
.cookie-btn:hover { background: var(--green) !important; color: #fff !important; }
.cookie-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 560px) { .cookie-overlay { padding: 0 !important; } .cookie-modal { width: 100% !important; max-width: none !important; border-radius: 18px 18px 0 0 !important; } .cookie-btns { grid-template-columns: 1fr !important; } }

/* Outline twin of the orange quote button, for pairing two actions on a light band. */
.btn-quote-outline { background: transparent !important; color: var(--green) !important; border: 2px solid var(--green) !important; cursor: pointer; }
.btn-quote-outline:hover { background: var(--green) !important; color: #fff !important; }

/* Anchored sections land below the sticky nav, not under it. */
[id] { scroll-margin-top: 84px; }

/* On a phone the card shows two choices and a "Manage choices" link; the
   categories and the third button appear only when asked for. On a desktop
   everything shows and the link is hidden. */
.cookie-manage { display: none; background: none; border: 0; padding: 0 0 12px; color: var(--green); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 560px) {
  .cookie-manage { display: inline-block; }
  .cookie-modal:not(.manage) .cookie-categories { display: none; }
  .cookie-modal:not(.manage) .cookie-btn-selected { display: none; }
  .cookie-modal:not(.manage) .cookie-btns { grid-template-columns: 1fr 1fr !important; }
  .cookie-modal { padding: 16px 16px 14px !important; }
  .cookie-modal .cookie-desc { margin-bottom: 8px !important; }
}
/* While the cookie card is up on a phone, Barley's button steps aside so it never covers a choice. */
@media (max-width: 560px) {
  body:has(.cookie-overlay.show) .bc-wrap, body:has(.cookie-overlay.show) .bc-btn, body:has(.cookie-overlay.show) .bc-bubble { display: none !important; }
}

/* A still behind a sub-page hero. The film fades in over it on a wide screen;
   on a phone, or with reduced motion, the still is the hero. */
.page-hero[data-poster] { background: linear-gradient(160deg, rgba(11,66,25,.74) 0%, rgba(17,91,39,.52) 55%, rgba(26,107,48,.62) 100%), var(--hero-poster) center 42% / cover no-repeat !important; }