@charset "utf-8";

/* ============================================================
   קיסלוק הנדסה — Kisluk Engineering
   Hand-written CSS. No build step. Mobile-first. Hebrew RTL.

   Written with CSS *logical* properties (inline-start / inline-end)
   rather than left / right, so the layout is correct by construction
   in RTL instead of being patched into correctness.

   Contents
     1.  Design tokens
     2.  Reset & base
     3.  Utilities
     4.  Header & navigation
     5.  Hero
     6.  Sections & shared blocks
     7.  Products
     8.  Made to order
     9.  Contact
     10. Footer
     11. Motion & print
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   Colours are sampled from the company logo — brown square,
   three green chevrons. Nothing here is invented.
   ------------------------------------------------------------ */
:root {
  /* brand */
  /* Sampled pixel-for-pixel from the high-resolution logo recovered from
     the company profile letter. Do not "adjust" these — they are the mark. */
  --brand-brown:  #693100;
  --brown-deep:   #401D00;
  --green-900:    #162C00;   /* the logo dark green, taken down to a field tone */
  --green-700:    #336601;
  --green-500:    #66CC00;
  --green-300:    #CCFF64;

  /* Neutrals, all pulled toward the logo's green rather than toward grey.
     Nothing on this page is pure black. */
  --ink:          #17250B;
  --body:         #47513E;
  --muted:        #767E6C;
  --paper:        #FFFFFF;
  --paper-2:      #F5F4EF;
  --line:         #E3E1D7;

  /* Type — three roles, each doing one job.
     Suez One is a heavy Hebrew display face: it reads like paint stencilled
     onto steel, which is where this company's name actually appears.
     Heebo carries the reading. Plex Mono carries the numbers — model
     designations and tonnages are data, and data wants a monospace. */
  --font-display: "Suez One", "Arial Black", sans-serif;
  --font-sans:    "Heebo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing */
  --wrap:         1180px;
  --gutter:       20px;
  --section-y:    64px;

  /* Square. Machinery does not have rounded corners, and a uniform
     border-radius on every surface is the single loudest tell that a
     layout was generated rather than drawn. */
  --radius:       0;
  --radius-lg:    0;

  --shadow:       none;
}

@media (min-width: 48em) {
  :root { --gutter: 32px; --section-y: 104px; }
}


/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 88px;  /* clears the sticky header on anchor jumps */
  scrollbar-gutter: stable;          /* RTL: scrollbar sits inline-end; reserve it */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;        /* Hebrew reads a touch larger than Latin */
  line-height: 1.75;
  letter-spacing: normal;      /* never letter-space Hebrew */
  color: var(--body);
  background: var(--paper);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;            /* Suez One ships a single weight */
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-block-end: 0; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-brown); }

:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 2px;
}

table { border-collapse: collapse; width: 100%; }


/* ------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------ */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: 200;
  padding: 12px 20px;
  background: var(--green-700);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { inset-block-start: 0; color: #fff; }

/* eyebrow label + the three-chevron mark lifted from the logo */
/* Section labels. Note: NOT the mono face — IBM Plex Mono carries no Hebrew
   glyphs, so Hebrew set in it silently falls back to a system monospace,
   and letter-spacing on Hebrew is wrong in any face. Mono is reserved for
   Latin model designations and digits, where it belongs. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--green-700);
}
.eyebrow--light { color: var(--green-300); }

/* Three chevrons taken from the logo. Inlined as a data URI so the mark
   costs no extra request and stays crisp at any size. They point along
   the RTL reading direction. */
.chev {
  inline-size: 30px;
  block-size: 11px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M12 0 0 8l12 8h9L9 8l12-8z' fill='%23336601'/%3E%3Cpath d='M26 0 14 8l12 8h9L23 8l12-8z' fill='%2366CC00'/%3E%3Cpath d='M40 0 28 8l12 8h8L37 8l11-8z' fill='%23CCFF64'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.eyebrow--light .chev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M12 0 0 8l12 8h9L9 8l12-8z' fill='%23CCFF64'/%3E%3Cpath d='M26 0 14 8l12 8h9L23 8l12-8z' fill='%2366CC00'/%3E%3Cpath d='M40 0 28 8l12 8h8L37 8l11-8z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.9vw, 3.1rem);
  margin-block-end: .6em;
}

/* Media wells. These stay presentable while the photo slot is empty —
   the alt text sits on a tinted field instead of a broken-image icon. */
.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(-45deg,
      rgb(51 102 1 / .05) 0 12px, transparent 12px 24px),
    var(--paper-2);
  min-block-size: 240px;
  display: flex;
}
.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.media--sm { min-block-size: 168px; }

/* Empty photo slot — see main.js §4. Reads as a deliberate panel
   rather than a broken image while the photos are being gathered. */
.media.is-empty::after,

/* Squared, not pills. The inline-start edge carries a heavy green bar —
   the same three-chevron logic as the logo, reduced to one stroke. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 54px;                 /* thumb-sized tap target */
  padding-inline: 30px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}
.btn--primary {
  background: var(--green-700);
  color: #fff;
  border-inline-start-width: 7px;               /* logical — mirrors correctly */
  border-inline-start-color: var(--green-300);
}
.btn--primary:hover { background: var(--green-900); color: #fff; }

.btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.btn--ghost:hover { background: #fff; color: var(--green-900); border-color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none;
}
.link-arrow::after {
  content: "←";                          /* points inline-end in RTL */
  transition: transform .18s;
}
.link-arrow:hover::after { transform: translateX(-4px); }


/* ------------------------------------------------------------
   4. HEADER & NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgb(255 255 255 / .96);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled {
  border-block-end-color: var(--line);
  box-shadow: 0 2px 18px rgb(22 44 0 / .06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 84px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }

/* Bilingual lockup. Below 30em the two names stack and the separator is
   hidden — a hyphen between them would push the line past the header width
   on a small phone. */
.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.logo__he {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
}
.logo__dash { display: none; }
.logo__en {
  /* dir="ltr" lives on this span only. The separator is deliberately OUTSIDE
     it: inside, the bidi algorithm renders it on the far side of the Latin. */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .72rem;
  color: var(--green-700);
  unicode-bidi: isolate;
  white-space: nowrap;
}

@media (min-width: 30em) {
  .logo__text { flex-direction: row; align-items: baseline; }
  .logo__dash { display: inline; margin-inline: .4em; color: var(--muted); }
  .logo__he { font-size: 1.16rem; }
  .logo__en { font-size: .82rem; }
}
@media (min-width: 48em) {
  .logo__he { font-size: 1.35rem; }
  .logo__en { font-size: .95rem; }
}
.logo__mark { inline-size: 78px; block-size: auto; flex: none; }
@media (min-width: 48em) { .logo__mark { inline-size: 112px; } }


.nav-toggle {
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; display: block;
  inline-size: 22px; block-size: 2px;
  background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* mobile drawer */
.nav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
  display: none;
}
.nav.is-open { display: block; }

.nav__list { list-style: none; margin: 0; padding: 8px var(--gutter) 20px; }
.nav__list a {
  display: block;
  padding-block: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px solid var(--line);
}
.nav__list a:hover { color: var(--green-700); }

@media (min-width: 62em) {
  .nav-toggle { display: none; }
  .nav {
    position: static; display: block;
    background: none; border: 0;
  }
  .nav__list { display: flex; align-items: center; gap: 34px; padding: 0; }
  .nav__list a { padding-block: 6px; border: 0; }

  .nav__cta {
    padding: 10px 22px !important;
    background: var(--green-700);
    color: #fff !important;
    border-radius: 999px;
  }
  .nav__cta:hover { background: var(--green-900); }
}


/* ------------------------------------------------------------
   5. HERO
   Full-screen photograph with the copy over it.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* svh rather than vh: on a phone the browser chrome appears and
     disappears while scrolling, and vh makes the hero jump. */
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: 120px 56px;
  background: var(--green-900);
  overflow: hidden;
}
@media (min-width: 48em) { .hero { padding-block: 160px 80px; } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 45%;
  color: transparent;
}

/* Readability wash. Angled from the inline-start so the text side stays
   dark. Gradients are physical, not logical - this one is written for RTL
   and mirrored for LTR below. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to left, rgb(22 44 0 / .93) 0%, rgb(22 44 0 / .68) 45%, rgb(22 44 0 / .3) 100%),
    linear-gradient(to top, rgb(22 44 0 / .7), transparent 55%);
}
.hero:dir(ltr)::after {
  background:
    linear-gradient(to right, rgb(22 44 0 / .93) 0%, rgb(22 44 0 / .68) 45%, rgb(22 44 0 / .3) 100%),
    linear-gradient(to top, rgb(22 44 0 / .7), transparent 55%);
}

.hero__inner { position: relative; max-inline-size: 720px; }

.hero__title {
  font-size: clamp(2.4rem, 1.4rem + 5.2vw, 4.4rem);
  color: #fff;
  margin-block-end: 20px;
}

/* Suez One's zero reads close to a samekh at display size, which turns
   "90" into a guess. The numeral switches to Heebo's clear figures and
   takes the accent colour - the number is the claim. */
.hero__title .num {
  font-family: var(--font-sans);
  font-weight: 900;
  color: var(--green-300);
  unicode-bidi: isolate;
}

.hero__lead {
  font-size: clamp(1rem, .95rem + .5vw, 1.25rem);
  color: rgb(255 255 255 / .88);
  max-inline-size: 46ch;
  margin-block-end: 30px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }


/* ------------------------------------------------------------
   6. SECTIONS & SHARED BLOCKS
   ------------------------------------------------------------ */
.section { padding-block: var(--section-y); }
.section--about { background: var(--paper); }
.section--products { background: var(--paper-2); }
.section--contact { background: var(--paper); }

.section__head { max-inline-size: 620px; margin-block-end: 48px; }

.grid-2 { display: grid; gap: 40px; }
@media (min-width: 56em) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
}

.about__media { min-block-size: 320px; }

/* ---- data plate ------------------------------------------
   Deliberately uneven: the founding year is the claim, the other two
   are supporting stamps. Equal thirds would flatten the one fact that
   actually distinguishes this company. */
.plate {
  margin: 56px 0 0;
  padding: 26px 24px;
  background: var(--brown-deep);
  border-inline-start: 7px solid var(--green-500);
  display: grid;
  gap: 24px;
}
@media (min-width: 42em) {
  .plate {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
    padding: 30px 34px;
    align-items: end;
  }
}

.plate__item dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: normal;      /* Hebrew is never letter-spaced */
  color: var(--green-300);
  margin-block-end: 8px;
}
.plate__item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  /* Digits are weak-LTR and resolve on their own. Isolate, but never set
     dir="ltr" on a block — that flips its alignment too. */
  unicode-bidi: isolate;
  text-align: start;
}
/* The year is stamped data, not a headline — mono, the way it would read
   on an actual nameplate. It also sidesteps Suez One's ambiguous zero. */
.plate__item--lead dd {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  letter-spacing: -.02em;
}


/* ------------------------------------------------------------
   7. PRODUCTS
   ------------------------------------------------------------ */

/* Featured product. Deliberately heavier than the cards below —
   it is the one machine with a full published spec sheet, so the
   layout reflects what we actually know rather than pretending
   every product carries equal weight. */
.product--featured {
  display: grid;
  gap: 32px;
  padding: 24px;
  margin-block-end: 56px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (min-width: 56em) {
  .product--featured {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    padding: 36px;
    align-items: center;
  }
}
.product__media { min-block-size: 300px; block-size: 100%; }

.product__kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 14px;
  background: var(--green-300);
  color: var(--green-900);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.product__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); margin-block-end: .5em; }

.spec { margin-block: 22px; font-size: .975rem; }
.spec th, .spec td {
  padding-block: 11px;
  border-block-end: 1px solid var(--line);
  text-align: start;                      /* never `left` in RTL */
  vertical-align: baseline;
}
.spec th { inline-size: 38%; font-weight: 700; color: var(--ink); }
.spec td { color: var(--body); }
.spec tr:last-child th, .spec tr:last-child td { border-block-end: 0; }

.product__materials {
  padding: 16px 18px;
  background: var(--paper-2);
  border-inline-start: 3px solid var(--green-500);
  border-radius: var(--radius);
  font-size: .9375rem;
}

/* ---- catalogue index -------------------------------------
   Rows on hairlines rather than a grid of equal cards. A range of
   machines is a list a buyer scans down, not a set of tiles. */
.catalogue {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 2px solid var(--ink);
}

.cat {
  background: rgb(51 102 1 / .06);
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-template-areas:
    "thumb process"
    "thumb text";
  gap: 4px 18px;
  padding-block: 20px;
  border-block-end: 1px solid var(--line);
  transition: background-color .16s;
}
.cat:hover { background: rgb(51 102 1 / .05); }

@media (min-width: 46em) {
  .cat {
    grid-template-columns: 150px 130px 1fr;
    grid-template-areas: "thumb process text";
    align-items: center;
    gap: 28px;
    padding-block: 22px;
  }
}

.cat__thumb {
  grid-area: thumb;
  min-block-size: 0;
  aspect-ratio: 4 / 3;
}

.cat__process {
  grid-area: process;
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--green-700);
}

.cat__text { grid-area: text; }
.cat__text h3 { font-size: 1.1rem; margin-block-end: 3px; }
.cat__text p { font-size: .9375rem; margin: 0; }

/* Model designations are data — set them in the technical face. */
.model {
  font-family: var(--font-mono);
  font-size: .82em;
  font-weight: 600;
  color: var(--brand-brown);
  unicode-bidi: isolate;
}

/* Spare parts: no photograph exists, and none is needed. The row simply
   spans the space a thumbnail would occupy instead of faking one. */
/* The service row is brown, not green: it is not a machine, and the brown
   ties it to the 1936 nameplate rather than to the product rows. */
.cat--parts {
  grid-template-areas: "process" "text";
  grid-template-columns: 1fr;
  background: var(--brand-brown);
  padding-inline: 20px;
  border-block-end-color: var(--brand-brown);
}
@media (min-width: 46em) {
  .cat--parts { grid-template-columns: 130px 1fr; grid-template-areas: "process text"; }
}
.cat--parts:hover { background: var(--brand-brown); }
.cat--parts .cat__process { color: var(--green-300); }
.cat--parts h3 { color: #fff; }
.cat--parts p { color: rgb(255 255 255 / .75); }
.cat--parts .link-arrow { color: var(--green-300); margin-block-start: 10px; }


/* ------------------------------------------------------------
   8. MADE TO ORDER
   ------------------------------------------------------------ */
.section--order {
  background: var(--brand-brown);
  color: rgb(255 255 255 / .88);
}
.order__inner { max-inline-size: 760px; }
.section--order .h2 { color: #fff; }
.order__lead { font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem); margin-block-end: 32px; }


/* ------------------------------------------------------------
   9. CONTACT
   ------------------------------------------------------------ */
.contact-list { margin: 32px 0 0; }
.contact-list > div {
  display: grid;
  gap: 2px;
  padding-block: 16px;
  border-block-end: 1px solid var(--line);
}
@media (min-width: 30em) {
  .contact-list > div { grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; }
}
.contact-list dt { font-weight: 700; color: var(--ink); }
/* Block, not flex: a flex container turns the bare text of the address
   into its own anonymous item and opens a gap before the postcode. */
.contact-list dd { margin: 0; }
.contact-list dd a { font-weight: 600; text-decoration: none; }

/* Separator between the two mobile numbers. It carries the spacing rather
   than the links themselves: those are dir="ltr" for correct digit order,
   which also flips what inline-start/end mean *inside* them — so a margin
   set on the link lands on the wrong side. The separator inherits the
   page's RTL direction and spaces correctly. */
.contact-list .sep {
  margin-inline: 12px;
  color: var(--line);
  user-select: none;
}
.contact-list a:hover { text-decoration: underline; }

.contact__media { min-block-size: 320px; }


/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  padding-block: 44px;
  background: var(--green-900);
  color: rgb(255 255 255 / .62);
  font-size: .9375rem;
}
.footer__inner { display: grid; gap: 6px; }
@media (min-width: 48em) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 4px;
  }
  .footer__copy { grid-column: 1 / -1; padding-block-start: 18px; border-block-start: 1px solid rgb(255 255 255 / .12); }
}
.footer__brand { color: #fff; font-weight: 700; margin: 0; }
.footer__meta, .footer__copy { margin: 0; }


/* ------------------------------------------------------------
   11. 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;
  }
}

@media print {
  .site-header, .nav, .btn { display: none !important; }
  body { color: #000; }
  .hero { min-block-size: auto; padding-block: 20px; background: none; }
  .hero__title, .hero__lead { color: #000; }
}


/* ============================================================
   12. REAL MEDIA
   Added once the photographs and video arrived. Note that almost
   every photograph is PORTRAIT — phone shots of tall machines —
   so the layout gives them tall frames rather than cropping them
   into the letterbox a landscape-first design would assume.
   ============================================================ */

.media--tall { aspect-ratio: 3 / 4; min-block-size: 0; }
@media (min-width: 56em) { .media--tall { aspect-ratio: auto; block-size: 100%; min-block-size: 460px; } }

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

/* ---- section lead ---- */
.section__lead {
  font-size: clamp(1rem, .95rem + .4vw, 1.15rem);
  color: var(--body);
  margin-block-start: -.2em;
}

/* ---- feed systems: one large frame, two tall ones beside it ---- */
.systems { display: grid; gap: 16px; }
@media (min-width: 56em) {
  .systems {
    grid-template-columns: 1.55fr 1fr 1fr;
    align-items: stretch;
  }
}
.systems__main { min-block-size: 300px; }
.systems__main img { object-position: center 62%; }

.systems figure,
.about__media { position: relative; }
/* Captions sit over the photograph. One of them now carries a full
   sentence of technical description, so the scrim has to be deep enough
   to keep several lines readable rather than assuming a short label. */
.about__media figcaption,
.systems figcaption,
.clip figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 40px 16px 14px;
  font-size: .8125rem;
  line-height: 1.5;
  color: #fff;
  background: linear-gradient(to top,
    rgb(22 44 0 / .94) 0%, rgb(22 44 0 / .82) 55%, transparent 100%);
}

/* ---- catalogue rows without a photograph ----
   Several machines have no picture yet. Rather than reserve an empty
   frame, those rows drop the thumbnail column entirely and mark
   themselves with a rule in the accent colour. */
.cat--nophoto {
  grid-template-columns: 1fr;
  grid-template-areas: "process" "text";
  padding-inline-start: 16px;
}
@media (min-width: 46em) {
  /* Keep the thumbnail column even though there is no picture, so the text
     lines up with the rows that do have one. Without the empty column the
     headings of the photo-less rows sat further into the page. */
  .cat--nophoto {
    grid-template-columns: 150px 130px 1fr;
    grid-template-areas: ". process text";
    /* no extra indent: the empty column already does the aligning, and the
       padding was pushing these rows 16px off the ones with a photograph */
    padding-inline-start: 0;
  }
}

.spec__note { color: var(--muted); font-size: .9em; }

/* ---- video clips ---- */
.section--action {
  background: var(--green-900);
  color: rgb(255 255 255 / .82);
}
.section--action .h2 { color: #fff; }

/* auto-fit keeps two clips side by side on a phone. A single 9:16 clip
   at full width would be over 1000px tall, which is an absurd amount of
   scrolling for a 15-second loop. */
.clips {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Portrait frames. The footage was shot on a phone held upright, and
   forcing it into a 16:9 letterbox throws away most of the frame —
   the tall stream of ground meal is the whole point of the shot. */
.clip {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 16;
  max-block-size: 560px;
}
.clip video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.clip figcaption { display: flex; flex-direction: column; gap: 2px; }
.clip figcaption strong { font-size: .95rem; }
.clip__spec {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--green-300);
}

/* ---- customers + export, under the made-to-order pitch ---- */
.order__meta {
  margin-block-start: 48px;
  padding-block-start: 32px;
  border-block-start: 1px solid rgb(255 255 255 / .18);
  display: grid;
  gap: 28px;
}
@media (min-width: 46em) { .order__meta { grid-template-columns: 1fr 1fr; gap: 40px; } }

.order__block h3 {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--green-300);
  margin-block-end: 8px;
}
.order__block p { font-size: 1rem; color: rgb(255 255 255 / .88); }
.clients { font-weight: 700; }


/* The nameplate in the hero. Narrower column than the one it used to sit
   in, so the three fields run as a compact row and the founding year is
   the only one given display size. */
.plate--hero {
  margin: 0;
  padding: 16px 18px;
  grid-template-columns: auto auto auto;
  justify-content: start;
  gap: 20px;
  align-items: end;
}
@media (min-width: 42em) {
  .plate--hero { padding: 18px 22px; gap: 28px; }
}
.plate--hero .plate__item dt { font-size: .68rem; margin-block-end: 4px; }
.plate--hero .plate__item dd { font-size: 1.05rem; }
.plate--hero .plate__item--lead dd { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.4rem); }


/* The band that carries the nameplate under the hero. No top padding, so
   the plate reads as attached to the photograph above it. */
.plate-band {
  background: var(--paper);
  padding-block: 0 var(--section-y);
}
.plate-band .plate { margin-block-start: -34px; position: relative; z-index: 2; }
@media (min-width: 42em) { .plate-band .plate { margin-block-start: -44px; } }

/* The lead model in the catalogue. Marked, not shouted: a green field, a
   heavier rule and a small badge, so it reads as first among the range
   rather than as an advertisement inside a list. */
.cat--lead {
  background: rgb(51 102 1 / .06);
  border-inline-start: 4px solid var(--green-500);
  padding-inline-start: 14px;
}
.cat--lead:hover { background: rgb(51 102 1 / .1); }
.cat__badge {
  margin: 0 0 4px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: normal;
  color: var(--brand-brown);
}
.cat--lead h3 { font-size: 1.28rem; }

/* Catalogue thumbnails: contain, not cover. Most of these photographs are
   portrait and the frame is landscape, so cover was slicing a band out of
   the middle of the machine. Letterboxing on the tinted field costs a
   little space and shows the whole thing. */
.cat__thumb img {
  object-fit: contain;
  object-position: center;
}
.cat__thumb { background: rgb(51 102 1 / .05); }
.cat--lead .cat__thumb { background: #fff; }

/* ============================================================
   HERO SLIDESHOW
   Slides are stacked and cross-faded; only opacity animates, so the
   browser never re-lays-out the page mid-transition.
   ============================================================ */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img,
.hero__slide video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* Portrait sources in a landscape frame only ever show a horizontal band.
   Centred, that band misses the subject - these push it to where the
   machine actually is. */
.hero__slide video { object-position: center 62%; }
.hero__slide:nth-child(3) img { object-position: center 38%; }
.hero__slide:nth-child(4) img { object-position: center 42%; }

/* caption + dots */
.hero__ui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-block-start: 30px;
}
.hero__caption {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(255 255 255 / .85);
  border-inline-start: 3px solid var(--green-500);
  padding-inline-start: 12px;
  min-block-size: 1.4em;
}
.hero__dots { display: flex; gap: 8px; }
.hero__dots button {
  position: relative;
  inline-size: 34px; block-size: 4px;
  padding: 0; border: 0; border-radius: 0;
  background: rgb(255 255 255 / .32);
  cursor: pointer;
  transition: background-color .25s;
}
.hero__dots button:hover { background: rgb(255 255 255 / .6); }
.hero__dots button[aria-selected="true"] { background: var(--green-300); }
/* 4px tall, but it needs a thumb-sized hit area on a phone */
.hero__dots button::before {
  content: "";
  position: absolute;
  inset-block: -14px;
  inset-inline: 0;
}

/* With the full spec back, the text column is much taller than the
   photograph. The frame stretches to match it and the picture is
   contained inside - stretched to fill it would crop the machine. */
@media (min-width: 56em) {
  .product--featured .product__media {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 100%;
    align-self: stretch;
  }
  .product--featured .product__media img {
    object-fit: contain;
    object-position: center;
  }
  .product--featured { align-items: stretch; }
}

/* The smaller mills sit under the lead model as a continuation of the same
   group, so they carry no process label of their own - גריסה is already
   stated on the row above. The indent is what marks the relationship. */
.cat--sub {
  grid-template-columns: 1fr;
  grid-template-areas: "text";
  /* Same field as the lead row above: the two are one group, and a
     different background would read as a different category. */
  background: rgb(51 102 1 / .06);
  border-inline-start: 4px solid var(--green-500);
  padding-inline-start: 14px;
  padding-block: 16px;
  border-block-end-color: rgb(51 102 1 / .18);
}
.cat--sub:hover { background: rgb(51 102 1 / .1); }
@media (min-width: 46em) {
  .cat--sub {
    grid-template-columns: 150px 130px 1fr;
    grid-template-areas: ". . text";
  }
}
.cat--sub h3 { font-size: 1.05rem; }