/* INSAAAJ Agri Foods — styles for index.html and 404.html.
   Colours, fonts and sizes follow the brief. All sizes are in rem and all breakpoints in em,
   so the page still works at 200% zoom and with large text. */

/* Fonts (self-hosted; nothing loads from any other server) */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.98f81926.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400.e8993d94.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500.41201b65.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Stand-in fonts sized to match Archivo / Plex Mono, so text doesn't jump when they load. */
/* FALLBACKS START (written by tools/fallbacks.mjs) */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 98.04%; ascent-override: 89.76%; descent-override: 21.42%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; size-adjust: 101.59%; ascent-override: 86.62%; descent-override: 20.67%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 96.27%; ascent-override: 91.41%; descent-override: 21.81%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Lede Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 97.74%; ascent-override: 90.04%; descent-override: 21.49%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Small Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 98.96%; ascent-override: 88.93%; descent-override: 21.22%; line-gap-override: 0%; }
@font-face { font-family: "Archivo H1 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 114.99%; ascent-override: 76.53%; descent-override: 18.26%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 116.79%; ascent-override: 75.35%; descent-override: 17.98%; line-gap-override: 0%; }
@font-face { font-family: "Archivo H3 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 111.96%; ascent-override: 78.60%; descent-override: 18.76%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Brand Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 127.21%; ascent-override: 69.18%; descent-override: 16.51%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); font-weight: 400; size-adjust: 98.79%; ascent-override: 89.08%; descent-override: 21.26%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback Roboto"; src: local("Roboto Medium"), local("Roboto-Medium"), local("Roboto"); font-weight: 500; size-adjust: 101.89%; ascent-override: 86.37%; descent-override: 20.61%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 102.74%; ascent-override: 85.66%; descent-override: 20.44%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Lede Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); font-weight: 400; size-adjust: 98.78%; ascent-override: 89.09%; descent-override: 21.26%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Small Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); font-weight: 400; size-adjust: 99.81%; ascent-override: 88.17%; descent-override: 21.04%; line-gap-override: 0%; }
@font-face { font-family: "Archivo H1 Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 122.98%; ascent-override: 71.56%; descent-override: 17.08%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Display Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 124.22%; ascent-override: 70.84%; descent-override: 16.91%; line-gap-override: 0%; }
@font-face { font-family: "Archivo H3 Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 119.35%; ascent-override: 73.73%; descent-override: 17.59%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Brand Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 134.06%; ascent-override: 65.64%; descent-override: 15.66%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Menlo-Regular"), local("Menlo"); font-weight: 400 500; size-adjust: 99.70%; ascent-override: 102.31%; descent-override: 27.08%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback Windows"; src: local("Consolas"); font-weight: 400 500; size-adjust: 109.13%; ascent-override: 93.47%; descent-override: 24.74%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback Courier"; src: local("Courier New"), local("CourierNewPSMT"); font-weight: 400 500; size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 27.00%; line-gap-override: 0%; }
/* FALLBACKS END */

:root {
  color-scheme: only light;

  --bg: #F6F1E7;
  --card: #EFE8DA;
  --photo: #FFFFFF;
  --ink: #1E1812;
  --ink-2: #5C5142;
  --muted: #6E6454;
  --nav: #3D342A;
  --accent: #8A5A00;
  --accent-hover: #5E3D00;
  --btn: #F2C230;
  --btn-hover: #E3B21E;
  --line: rgba(30, 24, 18, 0.14);

  --font: "Archivo", "Archivo Fallback", "Archivo Fallback Roboto", Arial, sans-serif;
  --font-lede: "Archivo", "Archivo Lede Fallback", "Archivo Lede Fallback Roboto", Arial, sans-serif;
  --font-small: "Archivo", "Archivo Small Fallback", "Archivo Small Fallback Roboto", Arial, sans-serif;
  --font-h1: "Archivo", "Archivo H1 Fallback", "Archivo H1 Fallback Roboto", Arial, sans-serif;
  --font-h3: "Archivo", "Archivo H3 Fallback", "Archivo H3 Fallback Roboto", Arial, sans-serif;
  --font-display: "Archivo", "Archivo Display Fallback", "Archivo Display Fallback Roboto", Arial, sans-serif;
  --font-brand: "Archivo", "Archivo Brand Fallback", "Archivo Brand Fallback Roboto", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", "Plex Mono Fallback Windows", "Plex Mono Fallback Courier", monospace;

  --max: 75rem;
  --pad: clamp(16px, 4.5vw, 4rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
.nowrap { white-space: nowrap; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

section[id] { scroll-margin-top: 1rem; }

/* Skip link: hidden until a keyboard user tabs to it */
.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:not(:focus) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Small uppercase labels */
.label,
.brand-tag,
.num,
.contact-list dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.label { text-wrap: balance; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn-primary { background: var(--btn); color: var(--ink); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: rgba(30, 24, 18, 0.06); }

/* Header (not sticky) */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
}
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.75rem;
  margin-right: auto;
  text-decoration: none;
}
.brand-name {
  font-family: var(--font-brand);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.1;
}
.brand-tag { line-height: 1.3; }
.nav { display: none; }
.nav ul { display: flex; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  color: var(--nav);
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.btn-header {
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  font-size: 0.9375rem;
}

@media (min-width: 25em) {
  .actions .btn { padding-inline: 1.375rem; }
}
@media (min-width: 22.5em) {
  .brand-name { font-size: 1.25rem; }
  .btn-header { padding-inline: 1.125rem; font-size: 1rem; }
}
@media (min-width: 40em) {
  .nav { display: block; }
}
@media (min-width: 52em) {
  .header-inner { gap: 1rem; align-items: baseline; }
  .brand { flex-direction: row; flex-wrap: wrap; align-content: center; align-items: baseline; column-gap: 0.75rem; }
  .brand-name { font-size: 1.375rem; }
  .nav a { padding-inline: 0.75rem; }
}

/* Hero */
.hero-inner {
  display: grid;
  gap: 2rem;
  padding-block: 1.75rem 2.5rem;
}
.hero-text { container-type: inline-size; }
.hero h1 {
  margin-top: 0.75rem;
  font-family: var(--font-h1);
  font-stretch: 120%;
  font-weight: 600;
  font-size: clamp(2.0625rem, 1.578rem + 2.247vw, 3.375rem);
  /* never wider than the text column allows for "First press only." on one line */
  font-size: min(clamp(2.0625rem, 1.578rem + 2.247vw, 3.375rem), calc(100cqi / 9));
  line-height: 1.05;
  letter-spacing: -0.01em;
}
/* each sentence on its own line, so the headline is always exactly two lines */
.hero h1 span { display: block; }
.lede {
  max-width: 36em;
  margin-top: 1.125rem;
  font-family: var(--font-lede);
  text-wrap: pretty;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.actions .btn { padding-inline: 1.125rem; }
@media (max-width: 22.49em) {
  .actions { flex-direction: column; align-items: flex-start; }
}
.note {
  margin-top: 1rem;
  font-family: var(--font-small);
  text-wrap: pretty;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.photo-card {
  max-width: 1038px; /* the photo's real width, written by tools/images.mjs */
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--photo);
}
.photo-card img { width: 100%; }

@media (min-width: 56.25em) {
  .hero-inner {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    gap: 3rem;
    padding-block: 2.25rem;
  }
}

/* Sections */
.section {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3rem);
}
h2 {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 600;
  font-size: clamp(1.625rem, 1.33rem + 1.25vw, 2.375rem);
  line-height: 1.12;
  text-wrap: balance;
}
@media (max-width: 22.49em) {
  h2 { font-family: var(--font-h3); font-stretch: 115%; }
}
h3 {
  font-family: var(--font-h3);
  font-stretch: 115%;
  font-weight: 600;
  font-size: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  line-height: 1.3;
}
.body-text {
  color: var(--ink-2);
  text-wrap: pretty;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  line-height: 1.55;
}

/* Our standard */
.standards {
  display: grid;
  column-gap: 2rem;
  margin-top: 1.75rem;
}
.standard {
  padding-block: 1rem 1.25rem;
  border-top: 1px solid var(--line);
}
.num { display: block; }
.standard h3 { margin-top: 0.375rem; }
.standard .body-text,
.lab { margin-top: 0.375rem; }
.lab {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
}
.lab li { display: block; }
.applying {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pills li {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid rgba(30, 24, 18, 0.3);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

@media (min-width: 40em) {
  .standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .standards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Supply and contact */
.split {
  display: grid;
  gap: 2.5rem;
}
.rows {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  gap: 0.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.contact {
  container-type: inline-size;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  padding-inline: min(clamp(1.25rem, 1rem + 1.5vw, 2rem), 6vw);
  border-radius: 1.25rem;
  background: var(--card);
}
.contact .body-text { margin-top: 0.75rem; }
.contact-list {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.contact-list > div {
  display: grid;
  border-bottom: 1px solid var(--line);
}
.contact-list dt { padding-top: 0.75rem; }
.contact-list dd {
  padding-block: 0.75rem;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.contact-list dd:has(> a) { padding-block: 0; }
.contact-list a {
  display: inline-block;
  padding-block: 0.75rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.contact-list a:hover { color: var(--accent-hover); }

/* from tablet width up: label on the left, value on the right whenever both fit side by side */
@media (min-width: 40em) {
  .contact-list > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; }
  .contact-list dt { flex: 0 0 auto; min-width: 5.25rem; }
  .contact-list dd { flex: 1 1 9rem; min-width: 0; }
}

@media (min-width: 40em) {
  .row {
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1.5rem;
  }
}
@media (min-width: 60em) {
  .split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: 3rem;
  }
  #supply { padding-top: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 1.25rem;
  color: var(--muted);
  font-family: var(--font-small);
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-inner p:last-child { margin-left: auto; }

/* 404 page: footer sits at the bottom of the screen */
.page-404 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-404 main { flex: 1; }
.notfound {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.notfound h1 {
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 600;
  font-size: clamp(2.0625rem, 1.578rem + 2.247vw, 3.375rem);
  line-height: 1.05;
}
.notfound .body-text { margin-top: 1rem; }
.notfound .actions { margin-top: 1.75rem; }