/* ==========================================================================
   LUCTORC — livestock and forage machinery design system
   Brief section 7: dark green and silage green on white, limited yellow
   accent. Industrial, strong, clean, practical — never soft or decorative.
   Layout is verified from 320px through 2560px with no horizontal overflow.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --ink:        #0E2A20;   /* deepest green-black: display type, footer      */
  --ink-soft:   #17402F;
  --field:      #14523A;   /* primary dark green                             */
  --field-600:  #1B6A4B;
  --field-050:  #ECF3EE;
  --silage:     #63B32E;   /* silage green — the machine green, for accents  */
  --silage-600: #4E8F23;
  --silage-050: #F0F8E9;
  --amber:      #F2B10A;   /* limited yellow accent                          */
  --amber-600:  #CE9207;
  --amber-050:  #FDF5E0;

  /* Neutrals ------------------------------------------------------------- */
  --paper:      #FFFFFF;
  --mist:       #F4F7F4;
  --line:       #DFE5E1;
  --line-soft:  #EDF1EE;
  --steel:      #55635D;   /* muted body text — 5.6:1 on --paper            */
  --steel-dark: #3A4741;

  /* Status --------------------------------------------------------------- */
  --ok:      #1B7A4B;
  --ok-bg:   #E7F4EC;
  --warn:    #9A6206;
  --warn-bg: #FCF1DC;
  --bad:     #A4271C;
  --bad-bg:  #FBEBE9;

  /* Type ----------------------------------------------------------------- */
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Rhythm --------------------------------------------------------------- */
  --wrap: 1280px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --sec-y: clamp(2.25rem, 4.4vw, 4.25rem);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16, 35, 28, .06), 0 2px 8px rgba(16, 35, 28, .05);
  --shadow-md: 0 4px 12px rgba(16, 35, 28, .08), 0 12px 32px rgba(16, 35, 28, .07);
  --shadow-lg: 0 18px 50px rgba(16, 35, 28, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The off-canvas menu parks itself past the right edge; clip stops that from
     ever becoming a sideways scroll without creating a scroll container. */
  overflow-x: clip;
  /* Offset anchor jumps so the sticky header never covers a target heading. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Belt-and-braces against any single wide child causing a sideways scroll. */
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--mist); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--field); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--field-600); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--amber); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink); color: #fff;
  font-weight: 600; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ----------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { scroll-margin-top: 96px; }

.sec { padding-block: var(--sec-y); }
.sec--mist { background: var(--mist); }
.sec--ink { background: var(--ink); color: #E8EFEA; }
.sec--ink h2, .sec--ink h3 { color: #fff; }

.sec--tight { padding-block-start: clamp(1.25rem, 2.5vw, 2rem); }
.sec-head { max-width: 46rem; margin-bottom: clamp(1.4rem, 2.5vw, 2.25rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: .35em; }
.sec-head .sec-intro { color: var(--steel); font-size: 1.05rem; margin: 0; }
/* Lead paragraphs break with `pretty` so a wrap never strands one or two words
   alone on the last line. That orphan is what reads as an unfinished section
   head with a hole on the right; headings already balance globally (h1-h4). */
.sec-head p, .page-head p, .order-note p, .table-note, .plant-grid figcaption {
  text-wrap: pretty;
}
.sec--ink .sec-intro { color: #B3C6BB; }

.kicker {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--field-600);
  margin: 0 0 .75rem;
}
.sec--ink .kicker { color: var(--amber); }

.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--field);
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
a:hover .link-arrow svg, .link-arrow:hover svg { transform: translateX(4px); }


/* --------------------------------------------------------------- videos
   Self-hosted MP4s in a plain grid. The media box carries the aspect ratio so
   the poster and the player occupy identical space and nothing reflows when a
   video starts. Cards are the same shape whatever the source footage is. */
.video-grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 78rem) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.video-card { margin: 0; display: flex; flex-direction: column; }
.video-player {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
  background: var(--ink);
  border-radius: 14px; border: 1px solid var(--line);
  object-fit: cover;
}
.video-meta { padding: .9rem .1rem 0; }
.video-title { font-size: 1.08rem; margin: 0 0 .3rem; }
.video-meta p { margin: 0 0 .35rem; color: var(--steel); font-size: .95rem; text-wrap: pretty; }
.video-machine { margin: .5rem 0 0; }
.video-machine .link-arrow { font-size: .9rem; }


/* ------------------------------------------------- language picker
   <details> so it opens with no JavaScript. The list is absolutely positioned
   and the summary marker removed; everything else is plain links. */
.langpick { position: relative; }
.langpick-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: .85rem; color: var(--ink);
  border: 1px solid var(--line); background: var(--paper);
  list-style: none; user-select: none; white-space: nowrap;
}
.langpick-toggle::-webkit-details-marker { display: none; }
.langpick-toggle svg { width: 1.05rem; height: 1.05rem; }
.langpick-toggle:hover { border-color: var(--field); color: var(--field); }
.langpick[open] .langpick-toggle { border-color: var(--field); color: var(--field); }
.langpick-list {
  position: absolute; z-index: 120; inset-inline-end: 0; top: calc(100% + .4rem);
  margin: 0; padding: .35rem; list-style: none;
  /* 40+ languages: two columns so the list stays inside the viewport instead
     of becoming a very long scroll, and one column again on a phone. */
  min-width: 12rem; max-height: min(70vh, 34rem); overflow-y: auto;
  columns: 2; column-gap: .25rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(20, 38, 28, .16);
}
.langpick-list li { break-inside: avoid; }
.langpick-list a {
  display: block; padding: .48rem .7rem; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: .92rem;
}
.langpick-list a:hover { background: var(--mist); color: var(--field); }
.langpick-list a[aria-current] { background: var(--field); color: #fff; font-weight: 700; }
@media (max-width: 40rem) {
  .langpick-toggle { padding: .4rem .5rem; }
  .langpick-current { display: none; }
  .langpick-list { columns: 1; min-width: 11rem; }
}

/* ------------------------------------------------------------ right to left
   The layout is built on logical properties, so direction mostly just works.
   These are the places that carry a physical direction and would otherwise
   point the wrong way. */
/* The carousel track keeps LTR geometry even in a right-to-left document.
   site.js positions it with translateX(-pos * 100%), which assumes slides are
   laid out left-to-right; under `direction: rtl` the flex row reverses and that
   same transform walks the active slide off-canvas (measured at x: -2760).
   Forcing the track back to ltr keeps the maths valid, and each slide restores
   rtl so its own text, headings and buttons still read right-to-left. */
/* Mixed-direction text.
   Until every string is translated, an RTL page still carries English
   sentences, and the bidi algorithm renders those with their punctuation and
   inline links thrown to the wrong end ("…50–80 .See product info about X
   .tonnes a day"). `unicode-bidi: plaintext` is the CSS form of dir="auto":
   each block takes its direction from its own first strong character, so a
   translated line reads right-to-left and an untranslated one still reads
   correctly left-to-right. */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] figcaption, [dir="rtl"] summary, [dir="rtl"] label,
[dir="rtl"] .kicker, [dir="rtl"] blockquote {
  unicode-bidi: plaintext;
}

[dir="rtl"] .showcase-track { direction: ltr; }
[dir="rtl"] .showcase-slide { direction: rtl; }
[dir="rtl"] .showcase-rail-track { direction: ltr; }
[dir="rtl"] .showcase-thumb { direction: rtl; }

[dir="rtl"] .link-arrow svg,
[dir="rtl"] .range-tile-more svg,
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] a:hover .link-arrow svg,
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .cycle-ring { transform: scaleX(-1); }
[dir="rtl"] .sec--slant::before { transform: skewY(1.1deg); }
[dir="rtl"] .breadcrumbs svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--field);
  --btn-fg: #fff;
  --btn-bd: var(--field);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  /* 48px tall — comfortably above the WCAG 2.2 24px target minimum. */
  min-height: 48px;
  padding: .7rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { --btn-bg: var(--field-600); --btn-bd: var(--field-600); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-amber { --btn-bg: var(--amber); --btn-bd: var(--amber); --btn-fg: var(--ink); }
.btn-amber:hover { --btn-bg: var(--amber-600); --btn-bd: var(--amber-600); color: var(--ink); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--field); --btn-bd: var(--line); }
.btn-ghost:hover { --btn-bg: var(--field-050); --btn-bd: var(--field); color: var(--field); }

.btn-ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: #fff; color: #fff; }

.btn-sm { min-height: 44px; padding: .5rem 1rem; font-size: .875rem; }
.btn-lg { min-height: 56px; padding: .9rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.is-busy { pointer-events: none; opacity: .75; }

/* ------------------------------------------------------------ header / nav */

.topbar {
  background: var(--ink);
  color: #B3C6BB;
  /* 14px is the readable floor the QA standard asks for, utility line or not. */
  font-size: .875rem;
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 40px; flex-wrap: wrap;
}
.topbar-note { margin: 0; }
.topbar-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.topbar-links a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #D6E3DA; text-decoration: none;
}
.topbar-links a:hover { color: #fff; }
.topbar-links svg { width: 15px; height: 15px; }

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-head.is-stuck { box-shadow: var(--shadow-sm); }

.head-in {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: 74px;
}
.brand { flex: none; display: block; }
.brand img { width: clamp(118px, 12vw, 150px); height: auto; }

.main-nav { margin-inline-start: auto; }
.main-nav > ul { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.35rem); }
.main-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .35rem;
  font-family: var(--display); font-weight: 600; font-size: .96rem;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--field); }
.main-nav a.is-active { color: var(--field); border-bottom-color: var(--amber); }

.has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle {
  display: grid; place-items: center;
  width: 30px; height: 44px;
  border: 0; background: none; cursor: pointer; color: var(--steel);
}
.sub-toggle svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s var(--ease); }
.has-sub.is-open .sub-toggle svg { transform: rotate(-90deg); }

.submenu {
  position: absolute; top: calc(100% + 12px); left: -1rem;
  min-width: 21rem;
  padding: .6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu,
.has-sub.is-open .submenu { opacity: 1; visibility: visible; transform: none; }

.submenu a {
  display: block; min-height: 0; padding: .7rem .85rem;
  border-bottom: 0; border-radius: var(--r-sm);
}
.submenu a:hover { background: var(--field-050); }
.submenu strong { display: block; font-size: .95rem; }
.submenu small { display: block; color: var(--steel); font-family: var(--body); font-weight: 400; font-size: .875rem; line-height: 1.45; }
.submenu-all {
  display: inline-flex !important; align-items: center; gap: .4rem;
  margin-top: .25rem; color: var(--field); font-size: .88rem;
}
.submenu-all svg { width: 1em; height: 1em; }

.head-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { background: var(--mist); color: var(--field); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-count {
  position: absolute; top: 4px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--amber); color: var(--ink);
  font-size: .7rem; font-weight: 700; line-height: 1;
  border-radius: 999px;
}
.head-cta { margin-inline-start: .4rem; }
.nav-toggle { display: none; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: clamp(30rem, 74vh, 44rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(16, 35, 28, .93) 0%, rgba(16, 35, 28, .78) 42%, rgba(16, 35, 28, .35) 100%);
}
.hero-in { max-width: 40rem; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero-lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: #C9D9CE; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hero-stats div { background: rgba(16, 35, 28, .72); padding: 1.15rem 1.35rem; }
.hero-stats dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #9FB8A9; }
.hero-stats dd {
  margin: .25rem 0 0;
  font-family: var(--display); font-size: 1.45rem; font-weight: 700; color: #fff;
}

/* -------------------------------------------------------- category cards */

.cat-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.cat-card:hover { border-color: var(--field); box-shadow: var(--shadow-md); transform: translateY(-3px); color: inherit; }
.cat-media { display: block; aspect-ratio: 10 / 7; background: var(--mist); overflow: hidden; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cat-card:hover .cat-media img { transform: scale(1.04); }
.cat-body { display: block; padding: 1.35rem 1.5rem 1.5rem; }
.cat-body strong { display: block; font-family: var(--display); font-size: 1.3rem; margin-bottom: .3rem; }
.cat-body small { display: block; color: var(--steel); font-size: .92rem; line-height: 1.55; margin-bottom: .9rem; }
.cat-body em {
  display: inline-flex; align-items: center; gap: .45rem;
  font-style: normal; font-weight: 600; font-size: .88rem; color: var(--field);
}
.cat-body em svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.cat-card:hover .cat-body em svg { transform: translateX(4px); }

/* --------------------------------------------------------- product cards */

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { border-color: var(--field); box-shadow: var(--shadow-md); }

.card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--mist); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-tag {
  position: absolute; left: .75rem; top: .75rem;
  padding: .3rem .65rem;
  background: rgba(255, 255, 255, .94);
  border-radius: 999px;
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}

.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.card-title { font-size: 1.12rem; margin-bottom: .3rem; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--field); }
.card-sub { color: var(--steel); font-size: .88rem; line-height: 1.5; margin-bottom: .85rem; }

.card-specs {
  display: grid; gap: .3rem;
  margin: 0 0 1rem;
  padding: .75rem .85rem;
  background: var(--mist);
  border-radius: var(--r-sm);
  font-size: .82rem;
}
.card-specs > div { display: flex; justify-content: space-between; gap: .75rem; }
.card-specs dt { color: var(--steel); }
.card-specs dd { margin: 0; font-weight: 600; text-align: right; }

.card-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .25rem;
}
.card-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.card-actions .btn { flex: 1; }

.price { margin: 0; font-family: var(--display); }
.price-now { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.price--sm .price-now { font-size: 1.12rem; }
.price--lg .price-now { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.price del { margin-inline-start: .5rem; color: var(--steel); font-size: .85em; font-weight: 500; }
.price-off {
  display: inline-block; margin-inline-start: .5rem;
  padding: .1rem .45rem;
  background: var(--bad-bg); color: var(--bad);
  border-radius: var(--r-sm); font-size: .72rem; font-weight: 700;
}
.price-quote { font-size: 1.05rem; font-weight: 600; color: var(--field); }
.price--lg .price-quote { font-size: 1.5rem; }

.stock {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
}
.stock i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stock--in { color: var(--ok); }        .stock--in i { background: var(--ok); }
.stock--low { color: var(--warn); }     .stock--low i { background: var(--warn); }
.stock--out { color: var(--bad); }      .stock--out i { background: var(--bad); }

/* ---------------------------------------------------------- breadcrumbs */

.crumbs { padding-block: 1rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--steel); }
.crumbs li + li::before { content: '/'; margin-inline-end: .4rem; color: var(--line); }
.crumbs a { color: var(--steel); text-decoration: none; }
.crumbs a:hover { color: var(--field); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- page head */

.page-head { background: var(--mist); border-bottom: 1px solid var(--line); padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { margin-bottom: .3em; }
.page-head p { max-width: 44rem; color: var(--steel); font-size: 1.05rem; }
.page-head p + p { margin-top: .7em; }

/* ---------------------------------------------------------- product page */

.pdp { padding-block: clamp(2rem, 4vw, 3.25rem); }
.pdp-top { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .pdp-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.gallery-main {
  aspect-ratio: 4 / 3;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 84px; aspect-ratio: 1;
  padding: 0; overflow: hidden;
  background: var(--mist);
  border: 2px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--field); }

.pdp-model {
  display: inline-block; margin-bottom: .6rem;
  padding: .25rem .6rem;
  background: var(--field-050); color: var(--field);
  border-radius: var(--r-sm);
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pdp h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .25em; }
.pdp-lead { font-size: 1.1rem; color: var(--steel); margin-bottom: 1.5rem; }

.pdp-price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.15rem 1.35rem;
  background: var(--mist); border-radius: var(--r-md);
  margin-bottom: 1.5rem;
}

.pdp-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 1px; margin-bottom: 1.75rem;
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.pdp-highlights div { background: var(--paper); padding: .9rem 1rem; }
.pdp-highlights dt { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--steel); }
.pdp-highlights dd { margin: .2rem 0 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

.qty {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.qty button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; background: var(--paper); cursor: pointer; color: var(--ink);
}
.qty button:hover { background: var(--mist); }
.qty button svg { width: 17px; height: 17px; }
.qty input {
  width: 56px; height: 46px;
  border: 0; border-inline: 1.5px solid var(--line);
  text-align: center; font-family: var(--display); font-weight: 700; font-size: 1rem;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-buy { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; }
.pdp-buy .btn { flex: 1 1 12rem; }

.pdp-assure { display: grid; gap: .85rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pdp-assure li { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; color: var(--steel-dark); }
.pdp-assure svg { width: 20px; height: 20px; flex: none; color: var(--field); margin-top: 2px; }

/* Spec sheet ------------------------------------------------------------- */

.spec-sheet { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .spec-sheet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } }

.spec-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-group h3 {
  margin: 0; padding: .85rem 1.15rem;
  background: var(--ink); color: #fff;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.spec-group table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.spec-group th, .spec-group td { padding: .7rem 1.15rem; text-align: left; vertical-align: top; }
.spec-group th { width: 48%; font-weight: 500; color: var(--steel); }
.spec-group td { font-weight: 600; }
.spec-group tr + tr th, .spec-group tr + tr td { border-top: 1px solid var(--line-soft); }
.spec-group tbody tr:nth-child(even) { background: var(--mist); }

/* Some lines vary by drive and function rather than by figures, so a .spec-group
   can hold a list instead of a table. Same padding as the table cells so a panel
   of options lines up with a panel of specifications beside it in the grid. */
.config-list { display: grid; gap: .7rem; margin: 0; padding: 1rem 1.15rem; list-style: none; }
.config-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; color: var(--steel-dark); }
.config-list svg { width: 18px; height: 18px; flex: none; color: var(--field); margin-top: 2px; }

/* A wide application photograph introducing a section, above its table. */
.media-band {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
}
.media-band img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: none;
}

/* Two plant photographs side by side, stacking on a phone. The figures are
   .media-band, so both crop to the same 16:9 whatever the source ratio and the
   pair reads as one band rather than two mismatched pictures. */
.plant-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
/* Equal tracks, so both 16:9 photographs come out the same size and the pair
   aligns top and bottom. An uneven split stretches the shorter figure to the
   row height and leaves ~110px of dead space under its caption. */
@media (min-width: 52rem) { .plant-grid { grid-template-columns: 1fr 1fr; } }
.plant-grid .media-band { margin: 0; }
.plant-grid figcaption {
  padding: .7rem 1rem .8rem;
  font-size: .88rem; color: var(--steel);
}

/* Wide content must scroll inside itself, never push the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Accordion -------------------------------------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: 1rem 0;
  font-family: var(--display); font-size: 1.08rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; flex: none;
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;
  color: var(--field);
  transition: transform .25s var(--ease);
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding-bottom: 1.35rem; color: var(--steel); max-width: 52rem; }

/* --------------------------------------------------------- feature blocks */

.feature { display: flex; gap: 1rem; }
.feature-ico {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--field-050); color: var(--field);
  border-radius: var(--r-md);
}
.sec--ink .feature-ico { background: rgba(233, 163, 21, .14); color: var(--amber); }
.feature-ico svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.feature p { color: var(--steel); font-size: .93rem; margin: 0; }
.sec--ink .feature p { color: #A9BFB2; }

.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.step { position: relative; padding-inline-start: 3.5rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--amber);
}
.step h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.step p { color: var(--steel); font-size: .93rem; margin: 0; }

/* ------------------------------------------------------------- blog cards */

.post-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.post-card:hover { border-color: var(--field); box-shadow: var(--shadow-md); }
.post-media { display: block; aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.35rem; }
.post-meta { font-size: .8rem; color: var(--steel); margin-bottom: .5rem; }
.post-body h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.post-body h3 a { color: var(--ink); text-decoration: none; }
.post-body h3 a:hover { color: var(--field); }
.post-body p { color: var(--steel); font-size: .92rem; margin-bottom: 1rem; }
.post-body .link-arrow { margin-top: auto; font-size: .9rem; }

/* Article body ----------------------------------------------------------- */

.article-body { max-width: 44rem; font-size: 1.05rem; }
.article-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.25em; }
.article-body h3 { margin-top: 1.75em; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-inline-start: 1.4rem; }
.article-body li { list-style: disc; margin-bottom: .45rem; }
.article-body ol li { list-style: decimal; }
.article-body img { border-radius: var(--r-md); margin-block: 1.75rem; }
.article-body blockquote {
  margin: 1.75rem 0; padding: 1rem 1.5rem;
  border-inline-start: 3px solid var(--amber);
  background: var(--mist); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.08rem;
}

/* ------------------------------------------------------------------ forms */

.field { margin-bottom: 1.15rem; }
.field label {
  display: block; margin-bottom: .35rem;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.field .req { color: var(--bad); }
.field .hint { display: block; margin-top: .3rem; font-size: .875rem; color: var(--steel); font-weight: 400; }

.input, .field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: .95rem;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355635D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-inline-end: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--field);
  box-shadow: 0 0 0 3px rgba(20, 81, 58, .12);
  outline: none;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(164, 39, 28, .1);
}
.field-error { display: block; margin-top: .3rem; font-size: .875rem; font-weight: 600; color: var(--bad); }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--field); }

/* Honeypot: hidden from people, reachable by naive bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-msg { margin: .75rem 0 0; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
.form-msg.is-ok { color: var(--ok); }
.form-msg.is-bad { color: var(--bad); }

.notice {
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  border-inline-start: 3px solid;
  font-size: .93rem;
}
.notice-ok { background: var(--ok-bg); border-color: var(--ok); color: #10502F; }
.notice-warn { background: var(--warn-bg); border-color: var(--warn); color: #6F4604; }
.notice-bad { background: var(--bad-bg); border-color: var(--bad); color: #7C1D14; }

/* ---------------------------------------------------------- shop toolbar */

.shop-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 60rem) { .shop-layout { grid-template-columns: 16rem minmax(0, 1fr); } }

.filters { position: sticky; top: 96px; }
.filters h2 { font-size: 1rem; margin-bottom: .75rem; }
.filter-block { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.filter-block:last-child { border-bottom: 0; }
.filter-list li { margin-bottom: .15rem; }
.filter-list a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 40px; padding: .35rem .6rem;
  border-radius: var(--r-sm);
  color: var(--steel-dark); text-decoration: none; font-size: .92rem;
}
.filter-list a:hover { background: var(--mist); color: var(--field); }
.filter-list a[aria-current="true"] { background: var(--field-050); color: var(--field); font-weight: 600; }
.filter-list span { font-size: .8rem; color: var(--steel); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.toolbar-count { font-size: .92rem; color: var(--steel); margin: 0; }
.toolbar form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.toolbar select, .toolbar input { min-height: 44px; }
.toolbar input[type="search"] { width: min(100%, 15rem); }
.toolbar label { font-size: .88rem; color: var(--steel); }

.pager { display: flex; justify-content: center; gap: .35rem; flex-wrap: wrap; margin-top: 2.5rem; }
.pager a, .pager span {
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--ink);
}
.pager a:hover { border-color: var(--field); color: var(--field); }
.pager [aria-current="page"] { background: var(--field); border-color: var(--field); color: #fff; }
.pager .is-gap { border: 0; }

.empty {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  text-align: center;
  background: var(--mist);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.empty h3 { margin-bottom: .4rem; }
.empty p { color: var(--steel); max-width: 32rem; margin-inline: auto; margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ cart */

.cart-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 62rem) { .cart-layout { grid-template-columns: minmax(0, 1fr) 21rem; } }

.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.cart-line img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); background: var(--mist); }
.cart-line h3 { font-size: 1rem; margin-bottom: .2rem; }
.cart-line h3 a { color: var(--ink); text-decoration: none; }
.cart-line-meta { font-size: .875rem; color: var(--steel); margin-bottom: .6rem; }
.cart-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cart-remove {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: 0 .5rem;
  border: 0; background: none; color: var(--steel); cursor: pointer; font-size: .85rem;
}
.cart-remove:hover { color: var(--bad); }
.cart-remove svg { width: 16px; height: 16px; }

.summary {
  position: sticky; top: 96px;
  padding: 1.5rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.summary h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .93rem; }
.summary-row.is-total {
  margin-top: .5rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 1.2rem; font-weight: 700;
}
.summary .btn { margin-top: 1.25rem; }
.summary-note { margin-top: .85rem; font-size: .875rem; color: var(--steel); }

/* ---------------------------------------------------------------- CTA band */

.cta-band { background: var(--field); color: #fff; padding-block: clamp(2.75rem, 5vw, 4rem); }
.cta-band-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: .3em; }
.cta-band p { color: #CBE0D3; max-width: 42rem; margin: 0; }
.cta-band-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */

.site-foot { background: var(--ink); color: #A9BFB2; padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: .92rem; }
.foot-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-brand img { width: 160px; margin-bottom: 1.15rem; }
.foot-brand p { max-width: 24rem; line-height: 1.7; }
.foot-social { display: flex; gap: .5rem; margin-top: 1.35rem; }
.foot-social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-sm);
  color: #D6E3DA;
}
.foot-social a:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.foot-social svg { width: 19px; height: 19px; }

.foot-col h3 {
  color: #fff; font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.foot-col li { margin-bottom: .1rem; }
.foot-col a { display: inline-block; padding: .3rem 0; color: #A9BFB2; text-decoration: none; }
.foot-col a:hover { color: var(--amber); }

.foot-contact li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; line-height: 1.55; }
.foot-contact svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--amber); }

.news-form { margin-top: 1.5rem; }
.news-form label { display: block; margin-bottom: .5rem; color: #fff; font-weight: 600; font-size: .88rem; }
.news-row { display: flex; gap: .5rem; }
.news-row input {
  flex: 1; min-width: 0; min-height: 48px;
  padding: .6rem .85rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  color: #fff; font: inherit; font-size: .92rem;
}
.news-row input::placeholder { color: #7E9689; }
.news-row input:focus { border-color: var(--amber); outline: none; }
.news-form .form-msg { color: #C9D9CE; }
.news-form .form-msg.is-ok { color: #7ED6A4; }
.news-form .form-msg.is-bad { color: #F0A69C; }

.foot-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .875rem;
}
.foot-base p { margin: 0; }
.foot-base ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot-base a { color: #A9BFB2; text-decoration: none; }
.foot-base a:hover { color: var(--amber); }

/* WhatsApp floater ------------------------------------------------------- */

.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  background: #25D366; color: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.06); color: #fff; }
.wa-float svg { width: 27px; height: 27px; }
/* The badge is an <img>, not an inline <svg>, so the rule above never applied
   to it and the global `img { background: var(--mist) }` placeholder painted a
   pale square behind the artwork's round edge — the "cut white background".
   Clearing that background and letting the badge fill the button removes it. */
.wa-float img {
  display: block;
  width: 100%; height: 100%;
  background: none;
  border-radius: 50%;
}

/* ============================================================== responsive
   Breakpoints sit where this layout actually needs to change, not at
   specific device widths.
   ========================================================================= */

@media (max-width: 60rem) {
  .nav-toggle { display: grid; }
  .head-cta { display: none; }

  .main-nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    margin: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: var(--paper);
    border-inline-start: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(101%);
    transition: transform .3s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open { transform: none; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line-soft); }
  .main-nav a { min-height: 52px; padding: .35rem 0; font-size: 1.05rem; border-bottom: 0; }
  .main-nav a.is-active { border-bottom: 0; }

  .has-sub { flex-wrap: wrap; justify-content: space-between; }
  .has-sub > a { flex: 1; }
  .sub-toggle { width: 44px; height: 52px; }

  .submenu {
    position: static; width: 100%;
    min-width: 0; padding: 0 0 .75rem;
    border: 0; box-shadow: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .has-sub.is-open .submenu { display: block; }
  /* Hover must not open the drawer submenu on touch devices. */
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { display: none; }
  .has-sub.is-open:hover .submenu, .has-sub.is-open:focus-within .submenu { display: block; }
  .submenu a { padding: .55rem .75rem; }

  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; z-index: 99;
    background: rgba(16, 35, 28, .45);
  }
  body.nav-open .main-nav { z-index: 101; }
  body.nav-open .site-head {
    z-index: 102;
    /* backdrop-filter makes the header a containing block for fixed children,
       which pins the open drawer inside the header instead of the viewport. */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--paper);
  }

  .filters {
    position: static;
    padding: 1.25rem;
    background: var(--mist);
    border-radius: var(--r-lg);
  }
  .summary { position: static; }
}

@media (max-width: 40rem) {
  .topbar-note { display: none; }
  .topbar-in { justify-content: center; }
  .topbar-links { gap: 1rem; }
  .topbar-links span { font-size: .875rem; }

  .hero-actions .btn { flex: 1 1 100%; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1 1 100%; }
  .card-actions { flex-direction: column; }
  .pdp-buy .btn { flex: 1 1 100%; }
  .foot-base { justify-content: center; text-align: center; }
}

@media (max-width: 26rem) {
  /* 320px guard: nothing may rely on horizontal space we do not have. */
  .cart-line { grid-template-columns: 64px minmax(0, 1fr); }
  .cart-line img { width: 64px; height: 64px; }
  .gallery-thumbs button { width: 64px; }
  .qty input { width: 46px; }
}

@media (min-width: 100rem) {
  /* Large desktops get more air, not stretched text. */
  :root { --wrap: 1420px; }
}

/* --------------------------------------------------------------- reveal
   Opt-in entrance animation. The un-revealed state is only applied once JS
   has confirmed it can observe elements, so a no-JS visitor sees everything. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ motion / print */

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

@media print {
  .topbar, .site-head, .cta-band, .site-foot, .wa-float, .card-actions, .pdp-buy { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; }
}

/* ==========================================================================
   LUCTORC homepage components
   Added with the client content pass (brief sections 4 and 7): brand lockup,
   split hero, catalogue cards without prices, model comparison tables,
   applications, videos, dealer panel and the inquiry routes.
   ========================================================================== */

/* Brand lockup ------------------------------------------------------------ */

.brand { flex: none; display: block; text-decoration: none; color: inherit; }
/* The supplied wordmark, placed with nothing behind it. Sized by height so the
   two colourways stay identical, and set well above the old lockup: at the
   previous size the letterforms were not legible in the header at all. */
.brand-lockup { display: inline-flex; align-items: center; }
.brand-logo {
  display: block;
  width: auto;
  height: clamp(2rem, 3.4vw, 2.75rem);
  max-width: 100%;
  /* The global `img { background: var(--mist) }` placeholder would otherwise
     paint a pale slab behind the transparent artwork. */
  background: none;
  border: 0; border-radius: 0; box-shadow: none;
  object-fit: contain;
}
/* Footer sits on dark green, so the white artwork is used there — again with no
   panel, plate or border around it. */
.brand-lockup--light .brand-logo { height: clamp(2.1rem, 3.6vw, 3rem); }

/* Hero — cut-out machine on the brand canvas ------------------------------ */

.hero {
  position: relative;
  display: block;
  min-height: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(120% 120% at 76% 12%, #1B4A36 0%, #10301F 48%, #081810 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Fine diagonal machining texture, barely there. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -3;
  background: repeating-linear-gradient(112deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
}
.hero::after { display: none; }

.hero-ghost {
  position: absolute; z-index: -2;
  right: -3vw; top: clamp(1rem, 3vw, 3rem);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(7rem, 20vw, 19rem); line-height: .78;
  letter-spacing: -.045em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .075);
  user-select: none; pointer-events: none;
}
.hero-arc, .hero-arc::after {
  position: absolute; z-index: -2;
  border-radius: 50%; border: 1px solid rgba(99, 179, 46, .22);
  pointer-events: none;
}
.hero-arc { right: -14vw; top: -26vw; width: 62vw; aspect-ratio: 1; border-color: rgba(99, 179, 46, .3); }
.hero-arc::after { content: ''; inset: 12%; border-color: rgba(242, 177, 10, .22); }

.hero-grid {
  display: grid; align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.hero-in { max-width: 34rem; }
.kicker--slogan {
  display: flex; align-items: center; gap: .75rem;
  color: var(--amber) !important;
  font-family: var(--display); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.kicker-rule {
  flex: none; width: clamp(1.5rem, 4vw, 2.75rem); height: 2px;
  background: currentColor; opacity: .8;
}
.hero h1 { color: #fff; margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--silage); }
.h1-cn {
  display: block; margin-top: .5rem;
  font-family: var(--body);
  font-size: clamp(.95rem, 1.6vw, 1.15rem); font-weight: 500;
  letter-spacing: .55em; color: rgba(255, 255, 255, .55);
}
.hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: #C9D9CE; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-cut { position: relative; margin: 0; padding-bottom: 3.4rem; }
.hero-cut img {
  width: 100%; height: auto;
  /* the global img background would paint mist behind the cut-out */
  background: none;
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .5));
  animation: hero-float 11s var(--ease) infinite;
}
/* Contact shadow, so the machine sits on the canvas instead of floating on it. */
.hero-cut::before {
  content: ''; position: absolute; z-index: -1;
  left: 8%; right: 8%; bottom: 2%; height: 14%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(4px);
}
.hero-cut figcaption {
  position: absolute; right: 0; bottom: 0;
  max-width: 17rem; padding: .6rem .9rem;
  background: rgba(8, 24, 16, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .78rem; line-height: 1.45; color: #D7E4DB;
}
.hero-cut figcaption span { display: block; font-weight: 700; color: #fff; }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hero-stats div {
  background: rgba(8, 24, 16, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 1.05rem 1.25rem;
}
.hero-stats dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #9FB8A9; }
.hero-stats dd {
  margin: .3rem 0 0;
  font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; color: #fff;
}

/* Ticker band — the join between two sections ----------------------------- */

.ticker {
  overflow: hidden;
  padding-block: .8rem;
  background: var(--ink); color: var(--silage);
  border-block: 1px solid rgba(255, 255, 255, .12);
}
.ticker--silage { background: var(--silage); color: var(--ink); border-block-color: rgba(14, 42, 32, .25); }
.ticker-track {
  display: flex; width: max-content;
  animation: ticker-run var(--ticker-speed, 42s) linear infinite;
  will-change: transform;
}
.ticker-list { display: flex; align-items: center; margin: 0; padding: 0; }
.ticker-list li {
  display: flex; align-items: center; gap: 1.75rem;
  padding-inline-end: 1.75rem;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.ticker-list li::after {
  content: ''; flex: none; width: 6px; height: 6px;
  background: currentColor; opacity: .55; transform: rotate(45deg);
}
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Pause on hover only where hover is real. On a touch screen :hover latches
   after a tap or a scroll and the band stops dead until you tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker-track { animation-play-state: paused; }
}

/* Numbered section heads -------------------------------------------------- */

.sec-head--numbered { position: relative; }
.sec-no {
  display: block; margin-bottom: .35rem;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line);
}
.sec--ink .sec-no { -webkit-text-stroke-color: rgba(255, 255, 255, .32); }
.sec-head .kicker { display: flex; align-items: center; gap: .7rem; }
.sec-head--center .kicker { justify-content: center; }

/* Angled edges on the dark sections --------------------------------------- */

.sec--ink { position: relative; }
.sec--cut { margin-block: clamp(2rem, 4vw, 3.5rem); }
.sec--cut::before, .sec--cut::after {
  content: ''; position: absolute; left: 0; right: 0; height: 4vw; z-index: -1;
  background: var(--ink);
}
.sec--cut::before { top: -2vw; transform: skewY(-1.1deg); transform-origin: top left; }
.sec--cut::after { bottom: -2vw; transform: skewY(-1.1deg); transform-origin: bottom right; }

/* Pending media ----------------------------------------------------------- */

.media-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, #17402F 0 14px, #143829 14px 28px);
  color: #8FB79C; text-align: center; padding: 1rem;
}
.media-pending-mark svg { width: 34px; height: 34px; color: var(--silage); }
.media-pending-note {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}

/* Catalogue cards --------------------------------------------------------- */

.cat-grid .cat-body strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.cat-body .cn, .card-cn, .range-table .cn {
  font-family: var(--body); font-size: .82rem; font-weight: 500;
  letter-spacing: .08em; color: var(--steel);
}
.cat-card--soon { border-style: dashed; }
.cat-card--soon .cat-body em { color: var(--steel); }

.machine-card .card-badge {
  display: inline-block; margin: 0 0 .5rem;
  padding: .2rem .55rem;
  background: var(--silage-050); color: var(--silage-600);
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.machine-card .card-title { color: var(--ink); }
.machine-card .card-cn { display: block; margin: -.15rem 0 .5rem; }
.machine-card .card-specs { margin-top: auto; }
.machine-card .card-media img { object-fit: contain; background: #fff; padding: .5rem; }
.machine-card:hover .card-media img { transform: none; }

/* Model comparison tables ------------------------------------------------- */

.range-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 46rem; }
.range-table thead th {
  background: var(--ink); color: #fff; text-align: left;
  padding: .8rem 1rem; font-family: var(--display); font-size: .875rem;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.range-table tbody th, .range-table tbody td {
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.range-table tbody th { font-weight: 700; color: var(--ink); max-width: 22rem; }
.range-table tbody th .cn { display: block; margin-top: .2rem; }
.range-table tbody tr:nth-child(even) { background: var(--mist); }
.range-table tbody tr:target { background: var(--amber-050); box-shadow: inset 4px 0 0 var(--amber); }
.range-table .tbd { color: var(--steel); font-style: italic; }
.range-cta { white-space: nowrap; }
.table-note { margin-top: 1rem; color: var(--steel); font-size: .9rem; }
.pellet-usp { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }

.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table th, .spec-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
.spec-table th { width: 45%; color: var(--steel); font-weight: 500; }
.spec-table td { font-weight: 600; }
.spec-title { margin-top: 2rem; font-size: 1.15rem; }

/* Two-column blocks ------------------------------------------------------- */

.split-wide {
  display: grid; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.split-wide--start { align-items: start; }
.sec-foot { margin-top: 2.5rem; text-align: center; }
.sec-foot--left { margin-top: 1.75rem; text-align: left; }

.app-list { display: grid; gap: 1.25rem; }
.app-item { display: flex; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.15rem 1.25rem; }
.app-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--field-050); color: var(--field); }
.app-ico svg { width: 18px; height: 18px; }
.app-item h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.app-item p { margin: 0; color: var(--steel); font-size: .92rem; }

/* Videos ------------------------------------------------------------------ */

.video-tile {
  display: flex; flex-direction: column; gap: .5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ink); color: #E8EFEA; border-radius: var(--r-lg);
}
.video-tile h3 { color: #fff; font-size: 1.15rem; margin: 0; }
.video-tile p { color: #A9BFB2; font-size: .92rem; margin: 0; }
.video-tile .link-arrow { margin-top: auto; padding-top: 1rem; color: var(--amber); }
.video-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: .5rem;
  border-radius: 50%; background: rgba(99, 179, 46, .18); color: var(--silage);
}
.video-ico svg { width: 22px; height: 22px; margin-inline-start: 3px; }

/* Dealer panel ------------------------------------------------------------ */

.dealer-panel {
  display: grid; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.dealer-shot { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 2.5vw, 1.5rem); }
.dealer-shot figcaption { margin-top: .6rem; font-size: .875rem; font-weight: 600; color: var(--steel); }
.tick-list { display: grid; gap: .7rem; margin: 0 0 1.75rem; }
.tick-list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--steel-dark); }
.tick-list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--silage-600); }

/* Inquiry routes ---------------------------------------------------------- */

.inquiry-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.inquiry-route {
  display: grid; gap: .35rem; align-content: start;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.inquiry-route:hover { border-color: var(--field); box-shadow: var(--shadow-md); transform: translateY(-3px); color: inherit; }
.inquiry-route strong { font-family: var(--display); font-size: 1.05rem; overflow-wrap: anywhere; }
.inquiry-route small { color: var(--steel); font-size: .88rem; line-height: 1.5; }
.inquiry-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: .5rem;
  border-radius: var(--r-md); background: var(--field-050); color: var(--field);
}
.inquiry-ico svg { width: 21px; height: 21px; }

/* Submenu bilingual labels ------------------------------------------------ */

.submenu strong { display: flex; align-items: baseline; gap: .45rem; }
.submenu strong .cn { font-size: .78rem; font-weight: 500; color: var(--steel); letter-spacing: .06em; }

@media (max-width: 40rem) {
  .hero-shot { padding: .75rem; }
  .h1-cn { letter-spacing: .35em; }
}

/* Homepage refinements ---------------------------------------------------- */

.hero h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
.machine-card .card-badge { align-self: flex-start; }
.cat-media img { object-fit: contain; background: #fff; padding: .5rem; }
.cat-card:hover .cat-media img { transform: none; }

/* Cards in one grid share a height, whatever their content (QA 02). */
/* Only the bare wrappers around a card become flex — where data-reveal sits on
   a component itself (.feature, .order-step) this would rewrite its layout. */
.grid > div[data-reveal]:not([class]) { display: flex; }
.grid > div[data-reveal]:not([class]) > * { flex: 1 1 auto; }
.cat-card, .machine-card, .video-tile, .inquiry-route { height: 100%; }

/* Staggered reveal, so a row of cards arrives as a sequence not a block. */
.js-reveal .grid > [data-reveal]:nth-child(2) { transition-delay: .07s; }
.js-reveal .grid > [data-reveal]:nth-child(3) { transition-delay: .14s; }
.js-reveal .grid > [data-reveal]:nth-child(4) { transition-delay: .21s; }
.js-reveal .grid > [data-reveal]:nth-child(5) { transition-delay: .07s; }
.js-reveal .grid > [data-reveal]:nth-child(6) { transition-delay: .14s; }
.js-reveal .grid > [data-reveal]:nth-child(7) { transition-delay: .21s; }
.js-reveal .grid > [data-reveal]:nth-child(8) { transition-delay: .07s; }
.js-reveal .grid > [data-reveal]:nth-child(9) { transition-delay: .14s; }

/* Wide tables: a visible edge fade tells the reader there is more to swipe. */
.table-scroll {
  position: relative;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--paper) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(14,42,32,.16), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(14,42,32,.16), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.sec--mist .table-scroll {
  background:
    linear-gradient(to right, var(--mist) 30%, rgba(244,247,244,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--mist) 30%, rgba(244,247,244,0)) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(14,42,32,.16), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(14,42,32,.16), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-hint { display: none; margin: .6rem 0 0; font-size: .875rem; color: var(--steel); }
@media (max-width: 60rem) { .table-hint { display: block; } }

/* Above laptop width the machine bleeds a little past the grid — deliberate,
   and it stops the hero reading as two boxes side by side. */
@media (min-width: 75rem) {
  .hero-cut { margin-inline-end: calc(-1 * var(--gutter)); }
}

/* Hero stacks before the two columns get too narrow to read. */
@media (max-width: 62rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-in { max-width: 40rem; }
  .hero-cut { margin-top: 1rem; }
  .hero-cut figcaption { position: static; margin-top: .75rem; max-width: none; }
  .hero-cut { padding-bottom: 0; }
  .hero-ghost { font-size: clamp(6rem, 26vw, 12rem); top: auto; bottom: 12%; }
}
@media (max-width: 40rem) {
  .sec--cut { margin-block: 2rem; }
  .sec--cut::before, .sec--cut::after { height: 8vw; }
  .ticker-list li { font-size: .78rem; gap: 1.25rem; padding-inline-end: 1.25rem; }
  /* Same pixel speed reads as barely moving on a narrow screen — shorten the
     loop so the band is visibly alive on a phone. */
  .ticker { --ticker-speed: 22s; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; }
  .ticker { overflow-x: auto; }
  .ticker-track > .ticker-list[aria-hidden="true"] { display: none; }
  .hero-cut img { animation: none; }
}


/* Tap targets — WCAG 2.2 AA asks 24px, the Skilly Don standard asks for 44
   where practical (QA 07). These three groups were bare inline text links. */
.topbar-links a { min-height: 32px; padding-block: .35rem; }
.foot-base ul a { display: inline-flex; align-items: center; min-height: 32px; padding-block: .35rem; }
.foot-col ul a, .foot-contact ul a { display: inline-flex; align-items: center; min-height: 28px; }

/* ==========================================================================
   Section transitions
   Dark sections cut in on an angle; light sections meet on a soft slant; the
   tickers carry the eye across the seam. Scroll-linked motion is progressive
   enhancement — nothing depends on it, and it is off under reduced motion.
   ========================================================================== */

.sec--mist { position: relative; }
.sec--rule { border-top: 1px solid var(--line); }
.sec--rule::before { display: none !important; }
.sec--slant::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1.6vw; height: 3.2vw;
  background: var(--mist); transform: skewY(-1.1deg); transform-origin: top left;
  z-index: -1;
}
.sec--slant { margin-top: 1.6vw; }
/* A ticker or a dark section already provides its own seam. */
.ticker + .sec--slant, .sec--ink + .sec--slant { margin-top: 0; }
.ticker + .sec--slant::before, .sec--ink + .sec--slant::before { display: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec-no {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
    .hero-ghost {
      animation: ghost-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    /* Animate the figure, never the image on its own: a translated <img>
       slides over its own <figcaption> and cuts the words in half. */
    .dealer-shot {
      animation: shot-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes ghost-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6rem, -2rem, 0); }
}
@keyframes shot-rise {
  from { transform: translateY(1.75rem) scale(.985); }
  to   { transform: none; }
}

/* Contrast corrections found in the QA pass (WCAG 2.2 AA, section 07). */
.machine-card .card-badge { color: var(--field); }          /* was 3.66:1 on the tint */
.sec--ink .step p { color: #A9BFB2; }                        /* was 2.43:1 on ink */
.sec--ink .step h3 { color: #fff; }
.media-pending { background-color: #17402F; }                /* real colour behind the stripes */

/* ==========================================================================
   Phone menu and header — QA sections 04 and 07
   ========================================================================== */

@media (max-width: 60rem) {
  /* The drawer is a child of the header, so its z-index competes inside the
     header's stacking context: without this the panel covers its own close
     button and the only way out is Escape or a tap on the scrim. */
  /* The nav is what pushes the actions right on desktop (margin-inline-start:
     auto). In drawer mode it leaves the flow, so the hamburger has to claim
     that free space itself or it sits mid-header next to the logo. */
  .head-actions { margin-inline-start: auto; }

  body.nav-open .head-actions { position: relative; z-index: 102; }
  body.nav-open .nav-toggle { background: var(--paper); }

  /* A closed drawer parked off-screen must not stay in the tab order. */
  .main-nav {
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .main-nav.is-open {
    visibility: visible;
    transition: transform .3s var(--ease), visibility 0s;
  }

  /* Drawer items: comfortable targets, and the submenu rows match them. */
  .submenu a { min-height: 48px; padding: .6rem .75rem; }
  .submenu-all { min-height: 48px; }
}

/* Phones: give the content more of the screen back. */
@media (max-width: 40rem) {
  .topbar-in { min-height: 34px; }
  .head-in { min-height: 62px; }
  .brand-mark svg { width: 32px; }
  .brand-word strong { font-size: 1.05rem; }
  .brand-word small { font-size: .7rem; letter-spacing: .26em; }
  html { scroll-padding-top: 76px; }
}

/* Landscape phones are short: drop the topbar entirely and tighten the header. */
@media (max-height: 30rem) and (orientation: landscape) {
  .topbar { display: none; }
  .head-in { min-height: 56px; }
  .main-nav { padding-top: 4.5rem; }
  html { scroll-padding-top: 64px; }
}

/* Inline links that sit in prose or tables still need a tappable box (QA 07). */
.crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 32px; }
.spec-group a, .spec-table a, .foot-social a { display: inline-flex; align-items: center; min-height: 32px; }

/* ==========================================================================
   Model tables on small screens (QA 03 "tables have a mobile strategy")
   Below 48rem the comparison tables stop being tables and become one card per
   model, with the column header carried in as a label. No sideways scrolling
   and no seven-word-tall cells.
   ========================================================================== */

@media (max-width: 47.99rem) {
  .range-table { min-width: 0; display: block; font-size: .95rem; }
  .range-table caption { display: none; }
  .range-table thead { display: none; }
  .range-table tbody { display: block; }
  .range-table tr {
    display: block;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }
  .range-table tbody tr:nth-child(even) { background: var(--paper); }
  .range-table tbody tr:target { background: var(--amber-050); }
  .range-table tbody th {
    display: block; max-width: none;
    padding: 0 0 .65rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.05rem;
  }
  .range-table tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--line-soft);
    text-align: right;
  }
  .range-table tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--steel); font-weight: 500; text-align: left;
  }
  .range-table .range-cta { justify-content: stretch; border-bottom: 0; padding-top: .85rem; }
  .range-table .range-cta::before { content: none; }
  .range-table .range-cta .btn { width: 100%; }
  .table-scroll { background: none; }
  .table-hint { display: none; }
}

/* ==========================================================================
   Client review pass: spec-first cards, ordering steps, FAQ, articles
   ========================================================================== */

/* A machine with no supplied photograph is a specification card, not a hole. */
.machine-card--spec { border-top: 3px solid var(--field); }
.machine-card--spec .card-body { padding-top: 1.35rem; }
.card-line {
  margin: 0 0 .55rem;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}
.cat-card--plain { border-top: 3px solid var(--field); }
.cat-card--plain .cat-body { padding-top: 1.5rem; }

/* Ordering and delivery */
.order-step {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 3.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.order-no {
  position: absolute; left: 1.5rem; top: 1.5rem;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--field); color: #fff;
  font-family: var(--display); font-size: .9rem; font-weight: 700;
}
.order-step h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.order-step p { margin: 0; color: var(--steel); font-size: .95rem; }
.order-note {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--field-050);
  border-radius: var(--r-lg);
}
.order-note p { margin: 0; max-width: 46rem; }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 56rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--field);
  transition: transform .2s var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-answer { padding: 0 0 1.25rem; max-width: 52rem; }
.faq-answer p { margin: 0; color: var(--steel); }

/* Article cards without imagery */
.post-card--text { display: flex; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.post-card--text .post-body { display: flex; flex-direction: column; padding: clamp(1.35rem, 2.5vw, 1.75rem); }
.post-card--text h2, .post-card--text h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.post-card--text h2 a, .post-card--text h3 a { color: var(--ink); text-decoration: none; }
.post-card--text h2 a:hover, .post-card--text h3 a:hover { color: var(--field); }
.post-card--text p { color: var(--steel); font-size: .95rem; }
.post-meta { margin: 0 0 .6rem; font-size: .875rem; color: var(--steel); }

/* Article page */
/* Keep the container on the page grid; constrain the text, not the wrapper,
   or the article header stops aligning with every other section. */
.article-head > * { max-width: 44rem; }
.article-standfirst { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--steel-dark); }
.article-layout {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 19rem; }
  .article-aside { position: sticky; top: 96px; }
}
.prose { max-width: 42rem; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 2.25rem 0 .75rem; }
.prose p { margin-bottom: 1.15rem; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 1.5rem; padding-inline-start: 1.35rem; }
.prose li { list-style: disc; margin-bottom: .5rem; line-height: 1.7; }
.prose ol li { list-style: decimal; }
.prose strong { color: var(--ink); }
.aside-block {
  padding: 1.35rem 1.5rem;
  background: var(--mist);
  border-radius: var(--r-lg);
  margin-bottom: 1.25rem;
}
.aside-block h2 { font-size: 1rem; margin-bottom: .85rem; }
.aside-list { display: grid; gap: .85rem; margin-bottom: 1.15rem; }
.aside-list a { display: block; color: var(--ink); text-decoration: none; }
.aside-list a:hover strong { color: var(--field); }
.aside-list strong { display: block; font-size: .95rem; line-height: 1.4; }
.aside-list small { color: var(--steel); font-size: .875rem; }

/* Measure and target-size corrections on the new blocks. */
.post-card--text h2 a, .post-card--text h3 a { display: inline-block; min-height: 28px; }
.faq-answer { max-width: 38rem; }
.faq-answer p { max-width: 38rem; }
.table-note { max-width: 40rem; }
.order-note p { max-width: 40rem; }
.article-head h1 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); }

/* Category tiles: icon and text, consistent across the row. */
.cat-card { display: flex; gap: 1.15rem; padding: clamp(1.35rem, 2.5vw, 1.75rem); align-items: flex-start; }
.cat-card:hover { transform: none; }
.cat-ico {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--field-050); color: var(--field);
}
.cat-ico svg { width: 22px; height: 22px; }
.cat-body { padding: 0; }
.cat-body strong { font-size: 1.15rem; }
.cat-body small { margin-bottom: .8rem; }

/* ==========================================================================
   Second client pass: card hover, mixed section openings, footer credit
   ========================================================================== */

/* Section openings differ by variant, so the page does not repeat one device. */
.sec-head--label .kicker { letter-spacing: .2em; }
.sec-head--label .kicker::after {
  content: ''; display: block; width: 100%; max-width: 3.5rem; height: 1px;
  margin-top: .55rem; background: currentColor; opacity: .45;
}
.sec-head--bare h2 { margin-top: 0; }
.sec-head--bare { border-top: 2px solid var(--ink); padding-top: 1.35rem; }
.sec--ink .sec-head--bare { border-top-color: rgba(255, 255, 255, .35); }
.sec-head--center.sec-head--bare { border-top: 0; padding-top: 0; }

/* Cards lift on a translucent panel rather than a hard colour change. */
.feature {
  padding: 1.15rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.feature:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
}
.sec--ink .feature:hover {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sec:not(.sec--ink) .feature:hover {
  background: rgba(20, 82, 58, .05);
  border-color: rgba(20, 82, 58, .14);
}

.machine-card, .cat-card, .order-step, .inquiry-route, .post-card--text, .video-tile {
  transition: background .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease), transform .25s var(--ease);
}
.machine-card:hover, .order-step:hover, .post-card--text:hover {
  background: rgba(20, 82, 58, .035);
  border-color: rgba(20, 82, 58, .35);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cat-card:hover, .inquiry-route:hover {
  background: rgba(20, 82, 58, .04);
  border-color: rgba(20, 82, 58, .35);
  transform: translateY(-3px);
}
.sec--mist .machine-card:hover, .sec--mist .post-card--text:hover { background: rgba(255, 255, 255, .85); }
.faq-item:hover summary { color: var(--field); }

@media (prefers-reduced-motion: reduce) {
  .machine-card:hover, .order-step:hover, .post-card--text:hover,
  .cat-card:hover, .inquiry-route:hover, .feature:hover { transform: none; }
}

/* Footer credit */
.foot-credit { display: inline-block; margin-inline-start: .75rem; color: #8FA79A; }
.foot-credit a { color: var(--silage); text-decoration: none; }
.foot-credit a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 40rem) { .foot-credit { display: block; margin: .4rem 0 0; } }
.foot-credit a { display: inline-flex; align-items: center; min-height: 28px; }

/* ==========================================================================
   Showcase hero and the range listing
   Built to the reference layout the client supplied: the machine itself is the
   hero, a rail of every model sits under it, and each product line is listed as
   a grid of cards whose spec rows line up straight across the row.

   Every product photograph is a studio shot on white, so assets/products/cut/**
   carries the same photographs with that white baked into alpha (tools/cutout.py).
   A machine therefore composites onto the hero gradient or a card panel with its
   contact shadow intact and no white plate, and — unlike mix-blend-mode — it does
   not care that the sliding track above it is a stacking context.
   ========================================================================== */

.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--fold-chrome, 10.5rem));
  min-height: calc(100svh - var(--fold-chrome, 10.5rem));
  background: linear-gradient(180deg, #EDF4F7 0%, #F5F2EA 42%, #FCF5E3 70%, #FFFFFF 100%);
}
/* The soft band sweeping across the lower half of the reference hero. Sized
   against the section height, not an aspect ratio, so the crest of the curve
   stays at 42% down the hero instead of climbing into the corner as the
   viewport widens. */
.showcase::after {
  content: ''; position: absolute; z-index: -1;
  left: -25%; right: -25%; bottom: -62%;
  height: 120%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}

.showcase-stage {
  position: relative;
  /* flex-basis 0 on this whole chain (stage/viewport/track below), not auto:
     an auto basis is a *content* size first, grown/shrunk from there, and
     the machine photo's natural size is content big enough to push every
     one of these taller than the fold before the flex algorithm gets a say.
     0 skips straight to "sized by available space". */
  flex: 1 1 0;
  display: flex; flex-direction: column;
  min-height: 0;
  /* The reference gives the model name real air under the header; below that
     every pixel spent here is a pixel the machine does not get. */
  padding-block: clamp(1.25rem, 4vh, 2.75rem) 0;
}

/* Viewport clips; the track slides. Slides stay in the flow at 100% each, so
   with this stylesheet and no JavaScript the first slide is simply the hero. */
.showcase-viewport { flex: 1 1 0; display: flex; min-height: 0; overflow: hidden; }
.showcase-track {
  flex: 1 1 0;
  display: flex; width: 100%;
  min-height: 0;
  will-change: transform;
}
.showcase-slide {
  flex: 0 0 100%;
  min-width: 0; min-height: 0;
  display: flex;
}
/* Set by script once it takes over, so a no-JS track never animates. */
.showcase-track.is-live { transition: transform .72s cubic-bezier(.4, .01, .2, 1); }
.showcase-track.is-jumping { transition: none; }

/* The slide is a two-column grid — copy on the left, the machine on the
   right, sharing one row — not stacked. That's the point: the photo's height
   is set by the row height, not by whatever the copy above it left over, so
   it no longer shrinks every time the copy grows. Stacked and centred only
   below 40rem (the max-width:40rem block further down), where there's no width
   to split. */
.showcase-slide-grid {
  /* flex-basis 0, not auto: an auto basis starts from the *content's* size —
     here, the machine photo's natural size — and only then grows/shrinks,
     which is what let a tall photo push this box, and the whole hero, taller
     than the fold. A zero basis is sized purely by the flex chain instead,
     the way .showcase-shot itself used to be before this was a grid. */
  flex: 1 1 0;
  /* A flex item's default min-height is auto (its content size), which has
     the same trap — 0 hands sizing back to the flex chain here too. */
  min-height: 0;
  /* Stacked, not split: centred copy over a full-width machine, as on the
     reference. The photo is the only elastic row, so every line the copy
     saves goes straight to the machine. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  gap: clamp(.75rem, 2vh, 1.5rem);
}

.showcase-copy { max-width: 52rem; text-align: center; }
.showcase-title {
  margin: 0 0 .4rem;
  /* The floor is set by the longest model name in the range
     (LUC-55 Double-Wrapping) still fitting one line inside the 320px gutter —
     the rail caption below is already nowrap, and a hero that wraps its model
     name while its own thumbnail does not reads as a bug. */
  font-size: clamp(1.3rem, 2.9vw, 2.35rem);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--ink);
}
.showcase-lead {
  margin: 0 auto;
  /* Wide enough that the longest summary in the catalogue sets on two lines. */
  max-width: 46rem;
  /* Two lines reserved, not three. Every summary is written to fit two, and the
     line the copy gives back goes straight to the machine below it. */
  min-height: calc(1.55em * 2);
  font-size: clamp(.98rem, 1.15vw, 1.06rem);
  line-height: 1.55; color: var(--steel-dark);
}
/* No underline rule at all. The client was explicit that the amber line under
   these links reads as a highlighter stripe; the link is carried by colour and
   weight, and gains an underline only on hover. */
.showcase-more {
  display: inline-block;
  padding: .15rem 0;
  color: var(--field);
  font-weight: 600;
  text-decoration: none;
}
.showcase-more:hover,
.showcase-more:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* The machine's own grid cell, full row height, so it can be as big as the
   row allows rather than whatever the copy leaves over. Measure
   .showcase-shot img's own rect after any change here — the CSS numbers
   alone don't say how big the photograph ends up. */
.showcase-shot {
  width: 100%; height: 100%; min-height: 0; min-width: 0;
  margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
/* width/height:auto caps the machine at its intrinsic pixel size, so a 1200px
   photograph sat small in the middle of a 1600px hero and no amount of extra
   row height reached it. Filling the cell and letting object-fit do the
   letterboxing is what lets the machine scale *up* to the space it is given,
   which is the size it has on the reference site. */
.showcase-shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: none;
}

/* Stacked and centred — the layout this used to be everywhere — only below
   40rem, where a left/right split has no room to work with. */
@media (max-width: 40rem) {
  /* A phone hero no longer has to reach the fold: the spec ticker that used to
     sit at the bottom edge is gone, and a 2:1 side elevation cannot fill a
     full viewport, so reserving one leaves a band of empty gradient. Cap it
     and the machine sits with the copy instead of adrift below it. */
  .showcase { min-height: min(calc(100svh - var(--fold-chrome, 10.5rem)), 33rem); }

  .showcase-slide-grid {
    display: flex; flex-direction: column;
    padding-block: clamp(.5rem, 2vh, 1.25rem) 0;
    gap: 0;
  }
  .showcase-copy { max-width: 34rem; margin-inline: auto; text-align: center; }
  .showcase-lead { margin-inline: auto; }
  /* Centred, not bottom-aligned: a side elevation is about 2:1, so on a phone
     it can never fill the height it is given and flex-end leaves the whole
     gap above it. Full-bleed past the wrap gutter buys back the width the
     machine is actually limited by. */
  .showcase-shot {
    flex: 1 1 0; min-height: 8rem;
    align-items: center;
    margin-top: clamp(.25rem, 1.5vh, .6rem);
    margin-inline: calc(var(--gutter) * -1);
    width: auto;
  }
}

/* Bare chevrons at the page edge, level with the machine rather than with the
   copy — the reference puts them low, out of the headline's way. */
.showcase-arrow {
  position: absolute; top: 62%; z-index: 2;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--amber-600);
  cursor: pointer;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.showcase-arrow svg { width: 34px; height: 34px; stroke-width: 1.6; }
.showcase-arrow:hover { color: var(--field); background: transparent; }
.showcase-arrow--prev { left: max(.5rem, calc(var(--gutter) - 1.25rem)); }
.showcase-arrow--prev svg { transform: rotate(180deg); }
.showcase-arrow--next { right: max(.5rem, calc(var(--gutter) - 1.25rem)); }

/* Rail of every machine, under the stage. Every photo is cut onto the same
   canvas, so top-aligning the thumbs (flex-start, not flex-end) puts every
   image on one strict row and every caption on the row below it — flex-end
   used to bottom-align the whole thumb box, so a longer caption pushed its
   own image down against its shorter neighbours. */
.showcase-rail { flex: none; background: var(--paper); border-bottom: 1px solid var(--line); }
.showcase-rail-inner {
  position: relative;
  padding-block: clamp(.9rem, 1.8vw, 1.25rem);
}
.showcase-rail-track {
  /* offsetParent for the thumbs, so centring the rail measures against it. */
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(.6rem, 1.8vw, 1.5rem);
  overflow-x: auto;
  /* Edge-to-edge scroll on a phone without clipping the focus ring. */
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scrollbar-width: none;
}
.showcase-rail-track::-webkit-scrollbar { display: none; }
.showcase-thumb {
  /* No fixed width: the box sizes to whichever is wider, the photo or its
     one-line caption (below), so a name is never forced to wrap and the rail
     never has to choose between a visible photo and a readable name. */
  flex: none;
  display: grid; gap: .35rem; justify-items: center;
  padding: .35rem;
  text-decoration: none; color: var(--steel);
  border-radius: var(--r-sm);
}
.showcase-thumb-shot {
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(3.5rem, 5.5vw, 4.5rem);
}
.showcase-thumb img {
  width: auto; height: 100%; max-width: 100%; background: none;
  object-fit: contain;
  filter: grayscale(.35);
  opacity: .72;
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.showcase-thumb-name {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  text-align: center; line-height: 1.25;
  /* One line, always — a name is never hidden or wrapped. On the narrowest
     screens the rail scrolls sideways (above) rather than clipping it. */
  white-space: nowrap;
}
.showcase-thumb:hover, .showcase-thumb:focus-visible { color: var(--ink); }
.showcase-thumb:hover img, .showcase-thumb:focus-visible img { opacity: 1; filter: none; }
.showcase-thumb.is-active { color: var(--ink); }
.showcase-thumb.is-active img { opacity: 1; filter: none; }
.showcase-thumb.is-active .showcase-thumb-name { font-weight: 700; }

.showcase-pause {
  position: absolute; right: var(--gutter); bottom: .35rem;
  min-height: 32px; padding: .25rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--steel);
  font-family: var(--display); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.showcase-pause:hover { color: var(--ink); border-color: var(--field); }

@media (max-width: 62rem) {
  .showcase-arrow { width: 40px; height: 40px; }
  .showcase-arrow svg { width: 22px; height: 22px; }
  .showcase-rail-track { justify-content: flex-start; }
  .showcase-pause {
    position: static; display: block;
    margin: .5rem auto 0;
    min-height: 28px; padding: .2rem .65rem;
  }
}
@media (max-width: 40rem) {
  .showcase-shot { padding-inline: var(--gutter); }
  .showcase-lead { min-height: calc(1.6em * 3); }
  .showcase-thumb-shot { height: clamp(2.75rem, 11vw, 3.5rem); }
}

/* Short viewports — a laptop with the address bar and bookmarks bar both up,
   a phone in landscape. The split layout above already keeps the machine off
   the copy's back at any width from 40rem up, so there's very little left to
   tighten here; this only trims the rail band a touch so the fold still
   lands close to where the marquee begins. */
@media (max-height: 700px) {
  .showcase-rail-inner { padding-block: clamp(.5rem, 1.6vh, .75rem); }
  .showcase-thumb-shot { height: clamp(2.75rem, 4.2vh, 3.5rem); }
}
@media (max-width: 40rem) and (max-height: 700px) {
  .showcase-title { font-size: clamp(1.6rem, 5.5vh, 2.4rem); }
  .showcase-lead { min-height: 0; margin-bottom: .35rem; }
  .showcase-shot { min-height: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-slide.is-active .showcase-copy { animation: none; }
}

/* The range, one product line at a time -------------------------------------- */

.range-group + .range-group { margin-top: clamp(2.75rem, 5vw, 4.25rem); }

/* Fixed column counts, not auto-fit: a product line with a single model has to
   occupy one column and leave the rest of the row empty, exactly as on the
   reference, instead of stretching one card across the full width. */
.range-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .range-grid { grid-template-columns: minmax(0, 1fr); } }
.range-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem 1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.range-group-head h3 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.range-group-head p { margin: 0; color: var(--steel); font-size: .92rem; }

/* Listing card ---------------------------------------------------------------- */

.spec-card {
  display: flex; flex-direction: column; height: 100%;
  background: none; border: 0;
}
.spec-card-media {
  display: block; aspect-ratio: 4 / 3;
  text-decoration: none;
  background: #EDEEEE;
  /* Contains the multiply blend so it meets the panel, not the page behind it. */
  isolation: isolate;
  overflow: hidden;
}
.spec-card-media img {
  width: 100%; height: 100%;
  /* Small inset only: these are working machines and the client needs the
     detail readable, so the photograph takes as much of the panel as it can
     without touching the edges. */
  padding: .4rem;
  object-fit: contain;
  background: none;
}
/* Panel for a machine with no photograph yet: the model designation set as type,
   filling the slot deliberately. It never names the missing asset. */
.spec-card-plate {
  text-decoration: none;
  display: grid; place-content: center; justify-items: center; gap: .35rem;
  width: 100%; height: 100%; padding: 1rem;
  text-align: center;
}
.spec-card-plate-code {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1;
  letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--steel);
}
.spec-card-plate-series {
  font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}

.spec-card-title { margin: 1.1rem 0 0; font-size: 1.22rem; line-height: 1.25; }
/* The amber rule under every model name is gone: across a grid of cards it read
   as a highlighter run through the page rather than as emphasis. */
.spec-card-title a {
  color: var(--ink); text-decoration: none;
  border-bottom: 0;
  padding-bottom: .12rem;
}
.spec-card-title a:hover { color: var(--field); border-bottom-color: var(--field); }
.spec-card-name {
  margin: .5rem 0 0;
  /* Two lines reserved whatever the name's length: the spec rows below have to
     start at the same height on every card or they stop reading as a table. */
  min-height: calc(1.45em * 2);
  font-size: .875rem; line-height: 1.45; color: var(--steel);
}

.spec-card-rows { margin: .9rem 0 1.25rem; }
.spec-card-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.spec-card-rows dt { color: var(--steel); }
.spec-card-rows dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.spec-card-rows .tbd { font-weight: 500; font-style: italic; color: var(--steel); }

.spec-card-foot { margin: auto 0 0; }
.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--amber);
  border-width: 2px;
}
.btn-outline:hover { --btn-bg: var(--amber); --btn-bd: var(--amber); color: var(--ink); }

/* A grey panel on a mist section needs to stay distinct from it. */
.sec--mist .spec-card-media { background: #E7E9E8; }



/* ==========================================================================
   Client artwork pass, 2026-08-24: category cards, the workflow band, the
   "Why choose LUCTORC" strip and the closing contact strip, built to the
   four mockups supplied with LUCTORQ_CTA_Final_HQ_Icons.zip.
   ========================================================================== */

/* ------------------------------------------------- category entrance cards */

/* Supersedes the icon-and-text tile above: the machine is the card again, but
   as a cut-out on white rather than a cropped photograph, so the three cards
   sit on one baseline whatever the source crop was. */
/* Simplified at the client's request: no panel, no border, no rounded plate.
   The machine sits straight on the section background and the type is centred
   under it, so a row of three reads as three machines rather than three cards. */
.cat-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.cat-card:hover {
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}
/* Padding lives on the image, not the panel: a percentage height on a
   replaced element resolves against the padding box, so a padded container
   makes an object-fit:contain image overflow and crop instead of shrink. */
.cat-media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 10 / 7.4;
  background: none; overflow: hidden;
}
/* The global `img { background: var(--mist) }` placeholder panel has to be
   cleared on every cut-out: its transparent surround would otherwise paint a
   pale rectangle of the image's whole box. */
/* Positioned, not flowed. The panel is a flex item inside a stretched card, so
   its height is indefinite to its children: `height:100%` and `max-height:100%`
   both fall back to the image's intrinsic ratio and overflow. An absolutely
   positioned child resolves its percentages against the panel's used size, so
   object-fit:contain finally has a real box to fit into. */
.cat-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: .85rem 1rem .35rem;
  background: none;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.cat-card:hover .cat-media img { transform: scale(1.03); }

/* No supplied photograph: the panel carries the line's mark and model count,
   never a notice about the missing asset. */
.cat-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .65rem; width: 100%; height: 100%;
  border-radius: var(--r-md);
  background: var(--field-050); color: var(--field);
}
.cat-plate-ico svg { width: 40px; height: 40px; }
.cat-plate-count {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--field-600);
}

.cat-body {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  padding: 1rem .5rem 0;
}
.cat-body strong { display: block; font-family: var(--display); font-size: 1.3rem; margin-bottom: .35rem; }
/* auto margin, not a fixed one: a one-line tagline must not float its link
   above the two-line neighbours in the same row. */
.cat-body small {
  display: block; max-width: 26rem;
  color: var(--steel); font-size: .92rem; line-height: 1.55;
  margin-bottom: auto; padding-bottom: 1rem;
}

/* A plain text link, centred. The solid green button was the heaviest thing in
   the row and pulled the eye off the machines, which is the opposite of what
   this section is for. */
.cat-cta {
  align-self: center;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 32px;
  color: var(--field);
  font-family: var(--display); font-size: .88rem; font-weight: 700;
  letter-spacing: .02em;
  transition: color .22s var(--ease);
}
.cat-cta svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.cat-card:hover .cat-cta { color: var(--ink); }
.cat-card:hover .cat-cta svg { transform: translateX(4px); }
.cat-card--plate .cat-media { padding: 1rem 1.15rem; }

/* ------------------------------------------------------- forage materials */

/* "Bale anything": the material itself is the subject, so the photograph runs
   edge to edge in its cell with no card, no border and no panel behind it.
   The caption sits under the crop as plain type. */
/* Five cells across: the four materials and the closing question, exactly as
   the reference site lays this row out. Its photographs are circular and so are
   these — the source files are square-cropped to suit, because a circle throws
   away everything outside the inscribed disc. */
.forage-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}
.forage-item { min-width: 0; }
.forage-shot { margin: 0; text-align: center; }
.forage-shot img {
  display: block;
  width: 100%; max-width: 11rem;
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: none;
  transition: transform .35s var(--ease);
}
.forage-item:hover .forage-shot img { transform: scale(1.04); }
.forage-shot figcaption {
  display: block;
  padding-top: .9rem;
}
.forage-shot figcaption strong {
  display: block;
  font-family: var(--display); font-size: 1.02rem; line-height: 1.3;
  color: var(--ink);
}
.forage-shot figcaption span {
  display: block; margin-top: .2rem;
  font-size: .86rem; line-height: 1.5; color: var(--steel);
}

/* The closing cell is a circle too, so the row reads as one run of five rather
   than four photographs and a boxed card. */
.forage-item--ask { display: block; }
.forage-ask {
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0; padding: 0;
  border: 0; background: none;
  text-align: center;
}
.forage-ask:hover { background: none; border: 0; }
/* The dashed ring lives in the SVG, not as a CSS border: only the SVG circle
   can be rotated, and two rings would otherwise be drawn on top of each other. */
.forage-ask-ring {
  display: grid; place-items: center;
  width: 100%; max-width: 11rem;
  margin-inline: auto;
  aspect-ratio: 1;
  border: 0;
  color: var(--field);
}
.forage-ask-ring svg { width: 100%; height: auto; }
.forage-ask-body { padding-top: .9rem; }

@media (max-width: 68rem) { .forage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .forage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------- workflow band */

.flow {
  --flow-gap: clamp(2rem, 4.5vw, 3.75rem);
  /* Set inline by workflow_band() from the number of stages, so removing the
     pellet stage could never leave a fourth, empty column behind. */
  --flow-cols: 3;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--flow-gap);
  grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr));
  align-items: start;
}
.flow-step { position: relative; text-align: center; }

/* The arrow lives in the gutter between two steps and is decorative. Once the
   row wraps it would point at the wrong neighbour, so it is hidden there. */
.flow-arrow {
  position: absolute; z-index: 1;
  top: 4.25rem;
  left: calc(var(--flow-gap) * -1);
  width: var(--flow-gap);
  display: grid; place-items: center;
  color: var(--silage-600);
  pointer-events: none;
}
.flow-arrow svg { width: min(100%, 3.25rem); height: auto; }

/* No card: the machine sits on the section background like the product lines
   above it, so the whole page reads as one treatment. */
.flow-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 0;
  background: none;
  border: 0; border-radius: 0;
  text-decoration: none; color: inherit;
}
.flow-card:hover { background: none; border: 0; box-shadow: none; transform: none; color: inherit; }

.flow-media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 10 / 7.6; margin-bottom: 1rem;
  background: none; border: 0; border-radius: 0;
  overflow: visible;
}
.flow-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0;
  background: none;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.flow-card:hover .flow-media img { transform: scale(1.03); }
.flow-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; width: 100%; height: 100%;
  border-radius: var(--r-md);
  background: var(--field-050);
}
.flow-plate-code { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--field); }
.flow-plate-series {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--field-600);
}

.flow-head { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-bottom: .5rem; }
.flow-no {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--field); color: #fff;
  font-family: var(--display); font-size: .85rem; font-weight: 700;
}
.flow-head strong { font-family: var(--display); font-size: 1.05rem; line-height: 1.3; }
.flow-text { color: var(--steel); font-size: .92rem; line-height: 1.55; }

/* ------------------------------------------------------------- why band */

/* Light, not another green slab. Why choose / CTA / footer used to run three
   dark greens in a row and read as one block; the CTA has to stay dark because
   the client's supplied icons are white line art, so this is the one that
   turns. The composition of their artwork is unchanged — centred 4-up, ring
   icons, hairline dividers — only the surface is inverted. */
.why-band {
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, transparent 60%),
    linear-gradient(180deg, var(--field-050) 0%, #F7FAF7 55%, var(--paper) 100%);
  border-block: 1px solid var(--line-soft);
}

.why-title {
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.why-item {
  position: relative; isolation: isolate;
  text-align: center;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
  border-inline-start: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.why-item:nth-child(4n + 1) { border-inline-start: 0; }
.why-ico {
  display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(20, 82, 58, .28);
  color: var(--field);
  background: var(--paper);
  transition: border-color .35s var(--ease), color .35s var(--ease),
              box-shadow .35s var(--ease), transform .35s var(--ease);
}
.why-ico svg { width: 38px; height: 38px; stroke-width: 1.4; }
.why-item h3 { font-size: 1.15rem; margin-bottom: .45rem; color: var(--ink); }
.why-item p { margin: 0; color: var(--steel); font-size: .92rem; line-height: 1.6; }

/* Hover: the ring lights up rather than the whole tile moving, so the four
   hairline dividers stay put. */
.why-item::before {
  content: ''; position: absolute; inset: -.5rem 0;
  z-index: -1; border-radius: var(--r-lg);
  background: radial-gradient(60% 55% at 50% 32%, rgba(242, 177, 10, .16), transparent 72%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.why-item:hover::before, .why-item:focus-within::before { opacity: 1; }
.why-item:hover .why-ico, .why-item:focus-within .why-ico {
  border-color: var(--amber);
  color: var(--amber-600);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(242, 177, 10, .40),
              0 6px 22px rgba(242, 177, 10, .28),
              0 10px 46px rgba(99, 179, 46, .16);
}
.why-item:hover h3, .why-item:focus-within h3 { color: var(--field); }

@media (prefers-reduced-motion: reduce) {
  .why-item:hover .why-ico, .why-item:focus-within .why-ico { transform: none; }
}

/* -------------------------------------------------------- contact strip */

/* A shade lighter than --ink so the strip reads as its own block against the
   footer, which is --ink too. */
.sec--cta { background: var(--field); position: relative; overflow: hidden; }
.sec--cta::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(
    128deg,
    rgba(255, 255, 255, .028) 0 2px,
    transparent 2px 26px
  );
  pointer-events: none;
}
.sec--cta > .wrap { position: relative; z-index: 1; }

/* A ghosted machine bleeding off the corner, so the strip is a place rather
   than a flat green field. Decorative only — it carries no information the
   copy does not. The URL is relative to this stylesheet, so it resolves the
   same in the repo and under a staging subdirectory. */
.sec--cta::after {
  content: '';
  position: absolute; z-index: 0;
  right: -7%; bottom: -20%;
  width: min(38rem, 46%);
  aspect-ratio: 1262 / 816;
  background: url('../products/cut/9ydb-70-silage-bale-wrapper-angle.webp') no-repeat right bottom / contain;
  opacity: .055;
  filter: grayscale(1) brightness(2.8);
  pointer-events: none;
}
@media (max-width: 64rem) {
  /* Behind the tiles on a narrow screen it is just noise. */
  .sec--cta::after { display: none; }
}

/* The CTA and the footer are both dark: give the seam a real edge so they do
   not read as one block. */
.site-foot { border-top: 3px solid var(--amber); }

.cta-strip {
  display: grid; gap: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
}
.cta-eyebrow {
  margin: 0 0 .85rem;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.cta-title {
  margin: 0; color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15;
}
.cta-rule {
  display: block; width: 5.5rem; height: 2px;
  margin: 1.25rem 0; background: var(--amber);
}
.cta-copy { margin: 0; color: #C3D8CB; font-size: 1rem; max-width: 34rem; }
.cta-form-link { margin: 1.15rem 0 0; }
.cta-form-link a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 32px;
  color: #fff; font-weight: 600; font-size: .95rem;
  text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px;
}
.cta-form-link a:hover { color: var(--amber); text-decoration-color: var(--amber); }
.cta-form-link svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.cta-form-link a:hover svg { transform: translateX(4px); }

.cta-cards {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cta-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1rem; padding: clamp(1.35rem, 2.4vw, 1.85rem) 1rem;
  border: 1px solid rgba(242, 177, 10, .38); border-radius: var(--r-md);
  background: rgba(0, 0, 0, .12);
  text-decoration: none; color: inherit;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.cta-card:hover {
  background: rgba(0, 0, 0, .22);
  border-color: var(--amber);
  transform: translateY(-3px);
  color: inherit;
}
.cta-card-ico { display: grid; place-items: center; height: 46px; }
.cta-card-ico img { width: 46px; height: 46px; background: none; object-fit: contain; }
.cta-card-body { display: grid; gap: .3rem; }
.cta-card-body strong {
  font-family: var(--display); font-size: 1.02rem; color: #fff;
}
.cta-card-body small {
  color: #C3D8CB; font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- narrow steps */

@media (max-width: 64rem) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two columns: only the second step of each row still follows its arrow, so
     no arrow ever points backwards across a wrap. */
  .flow-arrow { display: none; }
  .flow-step:nth-child(2n) .flow-arrow { display: grid; }

  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-item:nth-child(4n + 1) { border-inline-start: 1px solid var(--line); }
  .why-item:nth-child(2n + 1) { border-inline-start: 0; }

  .cta-strip { grid-template-columns: minmax(0, 1fr); }
  .cta-copy { max-width: none; }
}

@media (max-width: 44rem) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  /* One column: the reading order alone carries the sequence. */
  .flow-arrow, .flow-step:nth-child(2n) .flow-arrow { display: none !important; }
  .flow-card { padding-bottom: 1.25rem; }
  .flow-media { aspect-ratio: 10 / 6.4; }

  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .why-item { border-inline-start: 0 !important; padding-inline: 0; }
  .why-item + .why-item { border-top: 1px solid var(--line); padding-top: 2rem; }
  .why-ico { width: 72px; height: 72px; }

  .cta-cards { grid-template-columns: minmax(0, 1fr); }
  .cta-card { flex-direction: row; text-align: start; gap: 1rem; padding: 1.15rem 1.25rem; }
  .cta-card-ico { flex: none; height: 40px; }
  .cta-card-ico img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card:hover .cat-media img,
  .flow-card:hover,
  .cta-card:hover { transform: none; }
}

/* ==========================================================================
   2026-08-27 revisions — reference-site listing format, workflow cycle,
   green "Why choose" band and the supplied CTA pill buttons.

   These come last on purpose: several of them supersede earlier blocks in this
   file, and later-wins is doing the work rather than a pile of !important.
   ========================================================================== */

/* ------------------------------- machine listing, to the reference listing */

/* Measured off the reference site's own "Agricultural balers" listing rather
   than a description of it: four across, a 3:2 figure with the machine
   contained inside a faintly tinted plate, the model name, a compact
   label/value table, then "Read more". The table is the point of that layout —
   it is what lets two machines be compared by reading straight across a row. */
.range-tiles {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.25rem) clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* The homepage features nine products, so it runs three across and lands as a
   square block. The full catalogue listing keeps four. */
.range-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 74rem) { .range-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .range-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .range-tiles { grid-template-columns: minmax(0, 1fr); } }

.range-tile { display: flex; flex-direction: column; height: 100%; }

/* The tint sits over the plate, not on the image, so a cut-out machine keeps
   its own edges and every tile reads as the same panel whatever the crop was. */
.range-tile-media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 3 / 2;
  margin-bottom: 1rem;
  background: rgba(27, 27, 27, .05);
  overflow: hidden;
}
/* Film and net rolls are tall: in the 3:2 machine box they fill the height but
   only about a quarter of the width, which reads as a small picture. A square
   box gives the same roll half again as much height at no cost to the grid.
   Scoped to the grid, not the tile: it is only right where every tile is a roll.
   In a mixed row — the homepage nine, or the full listing — a square box makes
   the rolls tower over the machines beside them. */
.range-tiles--rolls .range-tile-media { aspect-ratio: 1 / 1; }
@media (max-width: 46rem) { .range-tiles--rolls .range-tile-media { aspect-ratio: 4 / 3; } }

.range-tile-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: .75rem;
  background: none;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.range-tile:hover .range-tile-media img { transform: scale(1.04); }

/* No photograph yet: the model designation carries the plate. */
.range-tile-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; width: 100%; height: 100%; padding: 1rem;
}
.range-tile-plate-code {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1;
  letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--steel);
}
.range-tile-plate-series {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--steel);
  text-align: center;
}

.range-tile-title { margin: 0 0 .9rem; font-size: 1.22rem; line-height: 1.25; }
.range-tile-title a { color: var(--ink); text-decoration: none; border-bottom: 0; }
.range-tile-title a:hover { color: var(--field); }

/* Hairline rules top and bottom of every row, value right-aligned and bold. */
.range-tile-specs { width: 100%; }
.range-tile-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.range-tile-specs tbody { border-top: 1px solid var(--line); }
.range-tile-specs tr { border-bottom: 1px solid var(--line); }
.range-tile-specs td { padding: .5rem 0; color: var(--steel); line-height: 1.35; }
.range-tile-specs td:last-child {
  font-weight: 600; text-align: end; color: var(--ink);
  padding-inline-start: .75rem;
}
.range-tile-specs .tbd { font-weight: 500; font-style: italic; color: var(--steel); }

.range-tile-foot { margin: auto 0 0; padding-top: 1rem; }
.range-tile-more {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 32px;
  color: var(--field); font-weight: 600;
  text-decoration: none;
}
.range-tile-more svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.range-tile-more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.range-tile:hover .range-tile-more svg { transform: translateX(4px); }

/* ------------------------------ product categories, to the reference header */

/* The reference site presents its categories as a row of machines on faintly
   tinted plates, each with the line name and a chevron under a rule. The same
   tile is used in two places — the header mega-menu and the product-lines
   section — so they cannot drift apart. */
.cat-tiles {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  /* Four lines, so four across and then a clean 2x2 — a three-column track
     leaves the fourth tile stranded on a row of its own at every width. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 64rem) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cat-tile {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.cat-tile-media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 10 / 7;
  background: rgba(27, 27, 27, .05);
  overflow: hidden;
}
.cat-tile-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: .85rem;
  background: none;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.cat-tile:hover .cat-tile-media img { transform: scale(1.04); }

.cat-tile-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; width: 100%; height: 100%; padding: 1rem;
  color: var(--field);
}
.cat-tile-plate-ico svg { width: 40px; height: 40px; }
.cat-tile-plate-count {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--field-600);
}

/* Name left, chevron hard right, rule underneath. */
.cat-tile-label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  margin-top: .9rem; padding-bottom: .9rem;
  border-bottom: 2px solid var(--line);
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.cat-tile-label svg {
  flex: none; width: 16px; height: 16px;
  color: var(--steel);
  transition: transform .25s var(--ease), color .22s var(--ease);
}
.cat-tile:hover .cat-tile-label { border-bottom-color: var(--field); color: var(--field); }
.cat-tile:hover .cat-tile-label svg { color: var(--field); transform: translateX(3px); }

/* --------------------------------------------------- header mega-menu panel */

/* Full-width white panel dropping from the bar, its contents held to the site
   grid. Supersedes the narrow text submenu that was here. */
@media (min-width: 60rem) {
  .main-nav .has-sub { position: static; }
  .submenu.mega-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    width: 100%;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: clamp(1.75rem, 3vw, 2.75rem) var(--gutter) clamp(2rem, 3.5vw, 3rem);
    background: var(--paper);
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 20px -2px rgba(0, 0, 0, .22);
  }
  .mega-menu-inner { max-width: 80rem; margin-inline: auto; }
  .mega-menu-grid {
    display: grid;
    /* Four lines on one row. A three-column track wrapped the fourth onto a
       row of its own, which made the panel twice as tall as it needs to be. */
    gap: clamp(.9rem, 1.8vw, 1.5rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Smaller plates than the product-lines section: this is a menu, so a tile is
     a target with a picture on it, not a piece of the page's own layout. The
     height is set directly rather than by ratio, so widening the panel makes the
     row wider without making the whole dropdown taller. */
  .mega-menu .cat-tile-media { aspect-ratio: auto; height: clamp(6rem, 8.5vw, 8rem); }
  .mega-menu .cat-tile-media img { padding: .55rem; }
  .mega-menu .cat-tile-label { margin-top: .35rem; padding-block: .5rem; font-size: .92rem; }
  .mega-menu .cat-tile-label svg { width: 1em; height: 1em; }
  .submenu.mega-menu { padding-block: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem); }
  .mega-menu-foot { margin: 1.1rem 0 0; }
  .mega-menu-foot { margin: 1.75rem 0 0; }
  .mega-menu-foot a {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--field); font-weight: 600; text-decoration: none;
  }
  .mega-menu-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  .mega-menu-foot svg { width: 1.05em; height: 1.05em; }
}

/* On a phone the panel is part of the stacked nav, so the plates would waste a
   screen: the tiles collapse to a plain two-up run of names. */
@media (max-width: 59.99rem) {
  .mega-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  .mega-menu .cat-tile-media { display: none; }
  .mega-menu .cat-tile-label { margin-top: 0; padding-block: .6rem; font-size: .95rem; }
  .mega-menu-foot { margin: .75rem 0 0; }
  .mega-menu-foot a { color: var(--field); font-weight: 600; text-decoration: none; }
}

/* ------------------------------------------------------- workflow as a cycle */

/* The heading "Complete workflow, complete solution" was breaking to two lines
   against the 46rem default; this section gets the room to set it on one. */
#applications .sec-head { max-width: 58rem; }

/* Progressive enhancement, deliberately. The base layout below is a plain row
   of steps that works in any browser; the ring is layered on further down and
   only applies where the viewport has room AND calc() can do trigonometry.
   Positioning the steps with top/left rather than a translate() is the whole
   point: a percentage in translate() resolves against the element's own box,
   which would scale the ring to the step, not to the circle. */
.cycle {
  --cycle-r: 34%;
  /* One source of truth for the disc size: .cycle-disc sizes itself from this,
     and .cycle-step offsets by half of it to sit the disc on the ring. */
  --disc: clamp(11rem, 24vw, 17rem);
  position: relative;
  display: grid;
  width: 100%;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
}

/* The dashed arcs and their arrowheads, on the same square as the step discs. */
.cycle-ring {
  display: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--silage-600);
  opacity: .75;
  pointer-events: none;
}

.cycle-hub {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  place-items: center; gap: .1rem;
  width: 26%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--field-050);
  text-align: center;
  padding: 1rem;
}
.cycle-hub-lead {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.9rem, 2vw, 1.15rem); color: var(--field);
  letter-spacing: .02em;
}
.cycle-hub-main {
  font-size: clamp(.68rem, 1.3vw, .82rem); line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
}

/* Base: a plain row. This is what renders if the ring never applies. */
.cycle-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.cycle-step { position: static; }

.cycle-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  text-decoration: none; color: inherit;
}
.cycle-disc {
  position: relative;
  display: grid; place-items: center;
  width: clamp(7rem, 15vw, 10.5rem); aspect-ratio: 1;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(14, 42, 32, .10);
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.cycle-card:hover .cycle-disc {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(20, 82, 58, .35), 0 14px 36px rgba(14, 42, 32, .16);
}
.cycle-disc img {
  /* Absolutely positioned, so the image cannot push the disc taller than its
     own aspect-ratio. As a normal in-flow child, height:100% resolved against
     an indefinite height, fell back to the intrinsic ratio, and a portrait
     machine stretched the 240px disc to 240x284 — a border-radius:50% oval
     with the machine hanging out of both sides. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 12%;
  background: none;
  object-fit: contain;
}
.cycle-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; width: 100%; height: 100%; padding: .75rem;
  background: var(--field-050);
}
.cycle-plate-code { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--field); }
.cycle-plate-series {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--field-600);
}

/* The step number rides the rim of the disc. */
.cycle-no {
  position: absolute; top: 4%; left: 4%;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--field); color: #fff;
  font-family: var(--display); font-size: .9rem; font-weight: 700;
}
.cycle-body { display: block; max-width: 15rem; }
.cycle-body strong {
  display: block; margin-bottom: .3rem;
  font-family: var(--display); font-size: 1.02rem; line-height: 1.3; color: var(--ink);
}
.cycle-text { display: block; color: var(--steel); font-size: .86rem; line-height: 1.5; }

/* The ring, applied only where there is room for it and only where calc() can
   do trigonometry. Everywhere else the plain row above stands, and the numbered
   headings carry the sequence on their own — nothing is lost.

   left/top resolve against the square container, which is what puts each step
   on a real circle of radius --cycle-r; the -50%/-50% translate then centres
   the step on that point using its own box, which is correct. */
@supports (left: calc(1% * cos(45deg))) {
  @media (min-width: 60rem) {
    .cycle {
      width: min(46rem, 100%);
      aspect-ratio: 1;
      display: block;
    }
    .cycle-ring { display: block; }
    .cycle-hub { display: grid; }

    .cycle-steps { display: block; gap: 0; }
    .cycle-step {
      /* -90deg puts step 1 at the top of the circle. */
      --angle: calc(var(--i) * (360deg / var(--cycle-n)) - 90deg);
      position: absolute;
      width: 32%;
      left: calc(50% + var(--cycle-r) * cos(var(--angle)));
      top: calc(50% + var(--cycle-r) * sin(var(--angle)));
      transform: translate(-50%, -50%);
    }
  }
}

/* ------------------------------------------ "Why choose" — the green band */

/* Green, textured, with a ghosted machine bleeding off the corner: the
   treatment that used to sit on the closing CTA, moved up here so the page
   closes green / white / green into the footer. */
.why-band {
  position: relative;
  overflow: hidden;
  background: var(--field);
  border-block: 0;
  color: #E8EFEA;
}
.why-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(
    128deg,
    rgba(255, 255, 255, .028) 0 2px,
    transparent 2px 26px
  );
  pointer-events: none;
}
.why-band::after {
  content: '';
  position: absolute; z-index: 0;
  right: -7%; bottom: -20%;
  width: min(38rem, 46%);
  aspect-ratio: 1262 / 816;
  background: url('../products/cut/9ydb-70-silage-bale-wrapper-angle.webp') no-repeat right bottom / contain;
  opacity: .055;
  filter: grayscale(1) brightness(2.8);
  pointer-events: none;
}
@media (max-width: 64rem) {
  /* Behind the four reasons on a narrow screen it is just noise. */
  .why-band::after { display: none; }
}
.why-band > .wrap { position: relative; z-index: 1; }

.why-title { color: #fff; }
.why-item { border-inline-start-color: rgba(255, 255, 255, .16); }
.why-item h3 { color: #fff; }
.why-item p { color: #B3C6BB; }
.why-ico {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .30);
  color: #fff;
}
.why-item:hover .why-ico, .why-item:focus-within .why-ico {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 0 0 1px rgba(242, 177, 10, .40),
              0 6px 22px rgba(242, 177, 10, .22);
}
.why-item:hover h3, .why-item:focus-within h3 { color: var(--amber); }

/* --------------------------------------------- closing CTA — white section */

.sec--cta {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
/* The green texture and ghosted machine now live on the band above. */
.sec--cta::before, .sec--cta::after { content: none; }

.cta-strip {
  display: block;
  text-align: center;
}
.cta-intro { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.cta-eyebrow { color: var(--field-600); }
.cta-title { color: var(--ink); }
.cta-rule { margin-inline: auto; }
.cta-copy { color: var(--steel); margin-inline: auto; }

.cta-form-link { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.cta-form-link a { color: var(--field); text-decoration-color: rgba(20, 82, 58, .4); }
.cta-form-link a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* The footer is green and so is the band above the CTA, so the CTA no longer
   needs a rule to separate it from the footer. */
.site-foot { border-top: 0; }

/* ----------------------------------------------- closing CTA — three routes */

/* Simple on purpose. The three official brand marks already carry all the
   colour this row needs (WhatsApp green, LUCTORC green, amber), so the tiles
   themselves stay quiet: a hairline, generous padding, and a green edge on
   hover. The heavy pill treatment this replaces fought the icons for attention. */
.cta-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  text-align: start;
  max-width: 68rem;
  margin-inline: auto;
}

.cta-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease),
              transform .22s var(--ease);
}
.cta-route:hover {
  border-color: var(--field);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

/* The mark is a coloured disc with its own transparent surround, so the global
   img placeholder has to be cleared or it paints a pale square behind it. */
.cta-route-ico {
  width: clamp(2.75rem, 4.5vw, 3.4rem);
  height: auto;
  aspect-ratio: 1;
  background: none;
  border-radius: 50%;
  object-fit: contain;
}

.cta-route-body { display: grid; gap: .2rem; min-width: 0; }
.cta-route-body strong {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ink);
}
.cta-route-body small {
  font-size: .86rem;
  line-height: 1.45;
  color: var(--steel);
  overflow-wrap: anywhere;
}

.cta-route-go { display: grid; place-items: center; color: var(--field); }
.cta-route-go svg { width: 1.15rem; height: 1.15rem; transition: transform .25s var(--ease); }
.cta-route:hover .cta-route-go svg { transform: translateX(4px); }

@media (max-width: 62rem) {
  .cta-routes { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
}

/* ------------------------------------------------------ bigger workflow ring */

/* The machines have to be big enough to recognise, or the ring is a diagram of
   nothing — so the discs grow while the circle they sit on shrinks. That ratio
   is what makes the machines dominate instead of floating in a large empty
   round. */
.cycle-disc {
  width: var(--disc);
  /* No clipping needed: the image is object-fit:contain inside padding, so it
     never reaches the edge anyway — and leaving this visible is what stops
     anything sitting near the rim being cut to a sliver. */
  overflow: visible;
}
/* 12% of the disc, not a fixed rem: a picture is contained inside the square,
   but the visible circle is the square's INSCRIBED circle, so the corners of a
   tall machine still cross the rim. Fitting a picture of ratio r inside the
   circle needs padding of at least (1 - 1/sqrt(1+r^2)) / 2; the tallest machine
   here is 576x700 (r = 0.82) which needs 11.4%. */
.cycle-disc img { padding: 12%; }
/* The disc no longer clips, so the plate has to round itself or it shows as a
   square of tint sticking out of the circle. */
.cycle-plate { border-radius: 50%; }
.cycle-body strong { font-size: 1.08rem; }
.cycle-text { font-size: .89rem; }

/* Narrow enough that a step's text never reaches the arc passing beside it,
   but with the centre hub gone there is room to keep it to three lines. */
.cycle-body { max-width: 15rem; }

/* The number now rides with the title. On the disc it sat in the corner of the
   square, outside the circle, and the border-radius clipped it to a crescent. */
.cycle-no {
  /* The base rule pins this to the step's top-left corner; in the title it has
     to flow inline again. */
  position: static;
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  margin-inline-end: .45rem;
  vertical-align: -.2rem;
  border-radius: 50%;
  background: var(--field); color: #fff;
  font-family: var(--display); font-size: .8rem; font-weight: 700;
}

@supports (left: calc(1% * cos(45deg))) {
  @media (min-width: 68rem) {
    /* Tighter: at 56rem the ring was mostly air. */
    .cycle { width: min(58rem, 100%); }
    .cycle-step { width: 32%; }

    /* Anchor each step by its DISC, not by the whole step box.
       translate(-50%,-50%) centres the box — so a step with a longer caption is
       taller, and centring it pulls its disc further in. The three discs then
       sit at different radii (measured: 42.5, 31.0, 30.6) while the arcs are
       drawn on a single radius of 34, which is why one arrowhead ran into the
       "Feed the baler" circle. Shifting up by half a disc puts every disc centre
       exactly on the ring, whatever the caption underneath it does. */
    .cycle-step { transform: translate(-50%, calc(var(--disc) / -2)); }

    /* With the discs on the ring the content fills the square almost exactly,
       so no big top reservation is needed.

       The bottom is different once the stage count is EVEN: a stage then sits
       at dead bottom of the ring and its caption hangs below the square.
       Measured at a constant 97px (the ring is width-capped, so its height
       does not vary with the viewport), against a 40px gap to the button
       underneath — which the caption was landing on top of. Reserve the
       difference plus normal spacing. An odd count has no bottom stage and
       just gets a little more air. */
    .cycle { margin-top: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: var(--cycle-tail, 0); }
  }
  /* Between 60rem and 68rem the ring would crowd; keep the plain row there. */
  @media (min-width: 60rem) and (max-width: 67.99rem) {
    .cycle { width: 100%; aspect-ratio: auto; display: grid; }
    .cycle-ring, .cycle-hub { display: none; }
    .cycle-steps {
      display: grid; gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
    .cycle-step { position: static; width: auto; transform: none; }
  }
}

/* ------------------------------------------------------------ scroll reveal */

/* A little further and a little softer than the base 14px, so the arrival is
   actually noticeable rather than a twitch. */
.js-reveal [data-reveal] {
  transform: translateY(26px);
  transition-duration: .7s;
}

/* The stagger rules further up only match `.grid`, so the listing grids added
   later arrived as one solid block. Same cascade, applied to them by name. */
.js-reveal .range-tiles > [data-reveal]:nth-child(4n+2),
.js-reveal .cat-tiles > [data-reveal]:nth-child(3n+2),
.js-reveal .forage-grid > [data-reveal]:nth-child(3n+2) { transition-delay: .08s; }
.js-reveal .range-tiles > [data-reveal]:nth-child(4n+3),
.js-reveal .cat-tiles > [data-reveal]:nth-child(3n+3),
.js-reveal .forage-grid > [data-reveal]:nth-child(3n+3) { transition-delay: .16s; }
.js-reveal .range-tiles > [data-reveal]:nth-child(4n+4) { transition-delay: .24s; }

/* The section heading leads, its content follows. */
.js-reveal .sec-head[data-reveal] { transition-delay: 0s; }

/* The ring's steps are absolutely positioned, so they must not be moved by the
   reveal transform — only faded, or they land off the circle. */
.js-reveal .cycle-step[data-reveal] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cta-route:hover { transform: none; }
  .js-reveal [data-reveal] { transform: none; transition: none; }
}

/* ------------------------------------------------ "Your material?" tile */

/* Sits as the last cell of the materials row. No photograph on purpose — the
   reference site uses a drawn ring here too, because the tile is a question,
   not another example. */
/* Laid out as a fifth circle in the row — see the .forage-* block above, which
   sizes it to match the photographs. No panel, no border, no rounded card: the
   reference site's closing cell is a drawn ring and a line of type. */
.forage-item--ask { display: block; }
.forage-ask {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
  text-decoration: none; color: inherit;
}
.forage-ask:hover { border: 0; background: none; color: inherit; }
/* The dashed ring turns slowly, and steps up on hover — the only moving part,
   so it reads as a control rather than decoration. */
.forage-ask-ring svg circle {
  transform-origin: 50% 50%;
  animation: ask-spin 14s linear infinite;
}
.forage-ask:hover .forage-ask-ring svg circle { animation-duration: 3.5s; }
@keyframes ask-spin { to { transform: rotate(360deg); } }

.forage-ask-body strong {
  display: block;
  font-family: var(--display); font-size: 1.05rem; line-height: 1.3; color: var(--ink);
}
.forage-ask-body span {
  display: block; margin-top: .2rem;
  font-size: .88rem; line-height: 1.5; color: var(--field);
  font-weight: 600;
}

/* ------------------------------------------- "Why choose" — animated marks */

/* The reference site animates each benefit icon as a small looping GIF. Same
   idea, done as CSS on the existing line icons: scalable, themed, and each
   movement says something about the word underneath it. They start when the
   item scrolls in (.is-in comes from the reveal observer) and run once, so the
   band is not permanently in motion behind the copy. */
.why-ico svg { transform-origin: 50% 50%; }

.js-reveal .why-item.is-in .why-ico { animation: why-pop .5s var(--ease) both; }
@keyframes why-pop {
  0%   { transform: scale(.86); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* 1 Power — a charge building, then settling. */
.js-reveal .why-item:nth-child(1).is-in .why-ico svg { animation: why-bolt 1.1s var(--ease) .25s both; }
@keyframes why-bolt {
  0%, 100% { opacity: 1; transform: scale(1); }
  20%      { opacity: .35; transform: scale(.94); }
  40%      { opacity: 1; transform: scale(1.12); }
  62%      { opacity: .6; transform: scale(1); }
  80%      { opacity: 1; transform: scale(1.06); }
}

/* 2 Durability — a shield taking a hit and holding. */
.js-reveal .why-item:nth-child(2).is-in .why-ico svg { animation: why-shield 1.1s var(--ease) .3s both; }
@keyframes why-shield {
  0%   { transform: translateY(-16%) scale(.9); }
  45%  { transform: translateY(0) scale(1.08); }
  62%  { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}

/* 3 Efficiency — a needle sweeping up the dial. */
.js-reveal .why-item:nth-child(3).is-in .why-ico svg { animation: why-gauge 1.4s var(--ease) .35s both; }
@keyframes why-gauge {
  0%   { transform: rotate(-32deg); }
  55%  { transform: rotate(14deg); }
  75%  { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}

/* 4 Reliability — a steady, unhurried settle. */
.js-reveal .why-item:nth-child(4).is-in .why-ico svg { animation: why-steady 1.5s var(--ease) .4s both; }
@keyframes why-steady {
  0%   { transform: translateY(10%); opacity: .5; }
  50%  { transform: translateY(-4%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* The ring draws itself in behind the mark. */
.js-reveal .why-item.is-in .why-ico::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: why-ring 1.5s var(--ease) both;
  pointer-events: none;
}
.why-ico { position: relative; }
@keyframes why-ring {
  0%   { opacity: 0; transform: scale(.7); }
  35%  { opacity: .75; }
  100% { opacity: 0; transform: scale(1.28); }
}

/* --------------------------------------- workflow arrows — flow animation */

/* The dash pattern is 2.4 on / 2.8 off, so shifting the offset by one full
   period (5.2 user units) and looping puts the dashes into continuous travel
   toward the arrowhead. --flow-i staggers the second arc behind the first so
   the two read as one run rather than two things moving in lockstep. */
.cycle-flow {
  animation: cycle-flow 1.5s linear infinite;
  animation-delay: calc(var(--flow-i, 0) * -.5s);
}
@keyframes cycle-flow { to { stroke-dashoffset: -5.2; } }

@media (prefers-reduced-motion: reduce) {
  .forage-ask-ring svg circle,
  .cycle-flow,
  .js-reveal .why-item.is-in .why-ico,
  .js-reveal .why-item.is-in .why-ico svg,
  .js-reveal .why-item.is-in .why-ico::after { animation: none; }
  .js-reveal .why-item.is-in .why-ico::after { display: none; }
}