/* QSI Produce site stylesheet. Hand-written; no framework, no theme code.
   Sizes in comments are the desktop pixel size at 100% text size. */

/* Fonts, all local. Licences are in /fonts/OFL.txt. */
@font-face { font-family: "Nunito Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/nunito-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/nunito-sans-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/anton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: italic; font-display: swap; src: url("/fonts/montserrat-latin-800-italic.woff2") format("woff2"); }

:root {
  /* Brand */
  --blue: #203890;         /* headings */
  --navy: #192265;         /* dark bands */
  --menu: #0c117b;         /* menu and footer headings */
  --menu-current: #333bd5; /* current page, hover */
  --red: #d93329;          /* buttons: white text reaches 4.71:1 */
  --red-hover: #b8281f;
  --red-accent: #f84b43;   /* large text and accents only, never white text */
  --pink: #f74371;         /* back-to-top circle */
  /* Text */
  --text: #626262;
  --muted: #737381;        /* live #adadc1 darkened to reach 4.5:1 */
  --link: #4962fd;
  --link-on-dark: #94a2fe; /* reaches 4.5:1 on the band color and its shapes */
  --green: #39aa25;        /* Produce category links, 23px bold on white: 3:1 for large text */
  --white: #fff;
  /* Surfaces and lines */
  --footer-bg: #fafbfc;
  --field-text: #17216f;
  --field-border: #8d8d9c; /* reaches 3:1 on white */
  --focus: #0c117b;
  /* Rhythm */
  --gutter: 30px;
  --body-leading: 1.28;    /* 23px on 18px */
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 1.125rem; /* 18px */
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}

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

/* Text */
p { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; }
a { color: var(--link); }
a:hover { color: var(--menu-current); }
strong, b { font-weight: 700; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 15px;
  color: var(--blue);
  font-weight: 700; /* the live CSS says 600 but loads no 600 file, so browsers draw 700 */
  line-height: 1.1;
}
/* Level default sizes. .as-hN keeps the live look when a heading's level changes. */
h1, .as-h1 { font-size: 3rem; line-height: 1.04; }        /* 48px */
h2, .as-h2 { font-size: 2.75rem; line-height: 1.1; }      /* 44px */
h3, .as-h3 { font-size: 2.125rem; line-height: 1; }       /* 34px */
h4, .as-h4 { font-size: 1.75rem; line-height: 1.1; }      /* 28px */
h5, .as-h5 { font-size: 1.5rem; line-height: 1; }         /* 24px */
h6, .as-h6 { font-size: 1.375rem; line-height: 1.14; }    /* 22px */

.lead { font-size: 1.375rem; font-weight: 300; line-height: 1.14; } /* 22px on 25px */
.tight { line-height: .853; } /* 34px headings with 29px lines, as on the live legal pages */
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Focus and skip link */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.band :focus-visible, .hero :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 10;
  padding: 10px 16px;
  background: var(--white); color: var(--menu);
  font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* Header and menu. The menu is a plain list. On a phone, /js/site.js folds it behind a menu button;
   without the script the links stay visible in a row. */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px;
  min-height: 85px;
  padding: 17px 60px 8px 20px;
  background: var(--white);
}
.site-logo { display: block; flex: none; }
.site-logo img { width: 169px; }
.site-nav { margin-bottom: 4px; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: block;
  padding: 8px 0;
  color: var(--menu);
  font-size: .9375rem; /* 15px */
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--menu-current); }
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: none; color: var(--menu);
  cursor: pointer;
}

/* Hero: a photo with the heading on top. Text sits where the live slider put it.
   --hero-h is the live slider's height at each width. On a short window the hero stops at 75% of
   the window, so the content below still shows. The spacing shrinks with it. --hero-top is how far
   down the text starts, also stepped as live. */
.hero {
  --hero-h: 630px;
  --hero-top: 155px;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: var(--hero-h);
  min-height: min(var(--hero-h), 75svh);
  padding: min(var(--hero-top), 18.5svh) 16px 32px;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 25%); } /* live 25% shade */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: relative; z-index: 1; max-width: 100%; }
.hero h1 {
  margin: 0 0 clamp(16px, 3vw, 44px);
  color: var(--white);
  font-family: Anton, "Nunito Sans", sans-serif;
  font-size: clamp(2.5rem, 7vw, 6.25rem); /* 100px */
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0 12px rgb(0 0 0 / 50%);
}
.hero-sub {
  margin: 0;
  color: var(--white);
  font-family: Montserrat, "Nunito Sans", sans-serif;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.76;
  text-shadow: 0 0 8px rgb(0 0 0 / 60%);
}
.hero-sub--strong { font-style: italic; font-weight: 800; }

/* The hero's button scrolls to the content below it. It has a dark backing so the white text holds
   4.75:1 on any photo, with the 25% shade. The live button had no backing. */
.hero-btn {
  display: inline-block;
  margin-top: min(clamp(30px, 4.9vw, 70px), 7.5svh);
  padding: 0 39px;
  border: 1px solid var(--white); border-radius: 3px;
  background: rgb(0 0 0 / 40%); color: var(--white);
  font-family: Montserrat, "Nunito Sans", sans-serif;
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  line-height: 46px;
  text-decoration: none;
}
.hero-btn:hover { background: rgb(0 0 0 / 60%); color: var(--white); }

.hero--home { --hero-h: min(56.45vw, 700px); padding-top: min(clamp(37px, 5.9vw, 85px), 9.1svh); padding-bottom: 16px; } /* grows with the width, as live does */
.hero--home::after { display: none; } /* the home slide has no shade on the live site */
.hero--home .hero-photo { object-position: 50% 0; filter: contrast(1.1) saturate(1.1); } /* a frame from the live video, chosen so no bright drop sits behind the heading at any width */
.hero-video { opacity: 0; transition: opacity .6s; }
.hero-video.is-playing { opacity: 1; }
.hero .hero-enter {
  margin-top: min(clamp(16px, 6.1vw, 88px), 9.4svh);
  padding: 0 clamp(36px, 4.9vw, 61px);
  font-family: Montserrat, "Nunito Sans", sans-serif;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); /* 20px */
  font-weight: 600;
  line-height: clamp(46px, 4.9vw, 61px);
}
.hero-pause {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--white); border-radius: 50%;
  background: rgb(0 0 0 / 55%); color: var(--white);
  cursor: pointer;
}
.hero-pause:hover { background: rgb(0 0 0 / 75%); }
.hero-logo { width: min(565px, 55vw, 60.5svh); margin: 0 auto clamp(2px, .75vw, 11px); }
.hero--home h1 {
  margin: 0;
  font-family: Montserrat, "Nunito Sans", sans-serif;
  font-size: min(2.125rem, (100vw - 34px) / 26); /* 34px at most, sized to stay on one line as live does */
  font-weight: 500;
  letter-spacing: .147em; /* 5px at 34px */
  line-height: 1.33;
  text-shadow: 0 0 1px rgb(0 0 0 / 90%), 0 0 3px rgb(0 0 0 / 90%), 0 0 6px rgb(0 0 0 / 85%), 0 0 12px rgb(0 0 0 / 65%); /* holds contrast over the brighter leaves and drops in the video */
}

/* Hero steps, at the widths where the live slider changes */
@media (max-width: 1023px) { .hero:not(.hero--home) { --hero-h: 570px; --hero-top: 140px; } }
@media (max-width: 777px) {
  .hero:not(.hero--home) { --hero-h: 472px; --hero-top: 120px; }
  .hero--home { --hero-h: 64.27vw; }
  .hero-btn { padding-inline: 30px; font-size: .9375rem; line-height: 38px; } /* 15px on 40px, as live */
}
@media (max-width: 479px) {
  .hero:not(.hero--home) { --hero-h: 352px; --hero-top: 90px; }
  .hero--home { --hero-h: 78.1vw; }
  .hero--home h1 { font-size: calc(.5rem + 3vw); } /* two lines, as live */
}

/* Hero motion. All of it ends within 5 seconds, so no pause control is needed for it. Anyone whose
   device asks for reduced motion gets the finished page. The heading has two layers: the real text,
   and letters that fly in over it. Once they land, the letters go and the real text shows, so the
   resting heading is plain text with the shadow measured for each photo. */
.letters { display: none; }
.hero .split-text, .letters { font-kerning: none; }

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

  .hero:not(.hero--home) .hero-photo { animation: hero-drift 4.8s ease-out both; }
  .page-services .hero .hero-photo { animation-direction: reverse; animation-timing-function: ease-in; } /* zooms out; ease-in played backward eases out */
  .page-contact .hero .hero-photo { animation-name: hero-drift-right; }

  .split { display: grid; } /* both layers share one cell, so they line break at the same width */
  .split-text, .letters { grid-area: 1 / 1; }
  .split-text { animation: split-text-wait 0s 1.65s both; }
  .letters { display: block; animation: letters-leave 0s 1.65s both; }
  .word { display: inline-block; white-space: nowrap; }
  .word span {
    --from: -.8em;
    display: inline-block;
    animation: letter-in 1s cubic-bezier(.16, 1, .3, 1) .3s both;
  }
  .word span:nth-child(even) { --from: .8em; }
  .word span:nth-child(3n + 1) { animation-delay: .4s; }
  .word span:nth-child(4n + 2) { animation-delay: .5s; }
  .word span:nth-child(5n) { animation-delay: .62s; }

  .hero-sub { animation: hero-rise 1s cubic-bezier(.16, 1, .3, 1) .35s both; }
  .hero-btn, .hero-enter { animation: hero-rise 1s cubic-bezier(.16, 1, .3, 1) .4s both; }
}

@keyframes hero-drift { from { transform: none; } to { transform: scale(1.05) translateX(-1.2%); } }
@keyframes hero-drift-right { from { transform: none; } to { transform: scale(1.05) translateX(1.2%); } }
@keyframes split-text-wait { from { clip-path: inset(50%); } } /* hidden from view, not from screen readers or contrast tools */
@keyframes letters-leave { from { visibility: visible; } to { visibility: hidden; } }
@keyframes letter-in { from { opacity: 0; transform: translateY(var(--from)); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } }

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 0; border-radius: 24px;
  background: var(--red); color: var(--white);
  font: inherit; font-size: 1rem; line-height: 1;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--red-hover); color: var(--white); }
.btn--large { font-size: 1.125rem; }
.btn--small { padding: 13px 35px; font-size: .875rem; }
.btn--block { display: block; width: 100%; border-radius: 50px; padding: 16px 35px; font-size: .875rem; }

/* Sections */
.section { padding: 40px var(--gutter); }
.narrow { max-width: 1080px; margin-inline: auto; }

/* Two columns, one of them a photo. In the HTML the text always comes first, which is the
   stacking order on a phone. .media--img-left moves the photo left on desktop. */
.media { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.media-text { padding: 40px var(--gutter); }
.media-img img { width: 100%; }
.media-img--fill { align-self: stretch; }
.media-img--fill img { height: 100%; object-fit: cover; }
.media--img-left .media-img { order: -1; }
.media--img-wide { grid-template-columns: 3fr 2fr; }

/* List with check marks */
.checks { margin: 0 0 20px; padding: 0; list-style: none; }
.checks li {
  margin-bottom: 2.5px;
  padding: 0 0 2.5px 41px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23203890'/%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") left center / 20px 20px no-repeat;
}

/* Dark band with white text */
.band {
  padding: 40px var(--gutter) 50px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.band h1, .band h2, .band h3, .band h4, .band h5, .band h6 { color: var(--white); }
.band a:not(.btn) { color: var(--link-on-dark); }

/* Long text pages: privacy, terms, accessibility */
.legal { max-width: 1180px; margin-inline: auto; padding: 66px var(--gutter) 10px; }
.legal ul { padding-left: 30px; }
.legal li { margin-bottom: 10px; }
.legal hr { height: 1px; margin: 0; border: 0; } /* a divider that doesn't show on the live pages */

/* Three equal columns */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Image above a heading, centered: credentials and values */
.card { text-align: center; }
.card img { margin: 0 auto 20px; }
.card > :last-child { margin-bottom: 0; }

/* Forms */
.field { margin: 0 0 20px; }
.field label, .field legend { display: block; margin-bottom: 4px; color: var(--field-text); font-size: .9375rem; font-weight: 600; }
.field input, .field textarea {
  display: block; width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--field-border); border-radius: 14px;
  background: var(--white); color: var(--field-text);
  font: inherit; font-size: .9375rem; line-height: 1.33;
}
.field textarea { min-height: 222px; resize: vertical; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
fieldset.field { margin-inline: 0; padding: 0; border: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; margin: 0; font-weight: 400; }
.choices input { width: 18px; min-height: 0; height: 18px; margin: 0; accent-color: var(--menu-current); }

/* Footer */
.site-footer { padding: 100px var(--gutter) 0; background: var(--footer-bg); color: var(--muted); }
.footer-columns {
  display: grid; grid-template-columns: 51% 1fr;
  max-width: 1106px;
  margin-inline: auto;
}
.footer-brand img { width: 200px; margin: 0 0 37px; }
.footer-brand p { margin: 0; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-heading { margin: 0 0 14px; color: var(--menu); font-size: 1.375rem; line-height: 1.14; }
.footer-links ul { margin: 0; padding: 0; list-style: none; }
.footer-links a { display: block; color: var(--muted); line-height: 24px; text-decoration: none; } /* tap targets stay at least 24px tall */
.footer-links a:hover { color: var(--menu-current); }
.footer-bottom { padding: 121px 0 60px; text-align: center; }
.footer-bottom p { margin: 0; }
.to-top {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--pink); color: #3a3b40;
}
.to-top:hover { color: #000; }

/* Phone, and the same layout when a desktop browser is zoomed in */
@media (max-width: 767px) {
  :root { --gutter: 20px; --body-leading: 1.06; } /* 19px lines on 18px text, as on the live phone layout */
  h1, .as-h1 { font-size: 2.5rem; }
  h2, .as-h2, h3, .as-h3, h4, .as-h4 { line-height: .9; }
  .tight { line-height: .9; }
  .phone-sm { font-size: 1.75rem; } /* headings that drop to 28px on a phone */
  .lead { font-size: 1.125rem; line-height: 1.39; }

  .site-header { justify-content: center; padding: 7px 16px 6px; }
  .site-logo img { width: 141px; }
  .site-nav { width: 100%; margin: 0; }
  .site-nav ul { justify-content: space-between; gap: 0 8px; max-width: 420px; margin-inline: auto; }
  .site-nav a { padding: 6px 2px; }

  /* With the script, the header is the live 61 pixels and the menu sits behind its button */
  .js .site-header { justify-content: space-between; gap: 0; min-height: 61px; padding: 5px 8px 6px 16px; }
  .js .menu-toggle { display: flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; max-width: none; padding: 4px 8px 8px 0; }
  .js .site-nav a { padding: 12px 0; font-size: 1rem; }
  .js .legal { padding-top: 140px; }

  .media, .media--img-wide { grid-template-columns: 1fr; }
  .media--img-left .media-img { order: 0; }
  .cards-3, .fields-2 { grid-template-columns: 1fr; }

  .footer-columns { grid-template-columns: 1fr; padding-inline: 25px; }
  .footer-brand { margin-bottom: 69px; }
  .footer-links { grid-template-columns: 1fr; gap: 60px; }
  .footer-bottom { padding: 98px 0 59px; }
  .footer-bottom p { line-height: 19px; }

  .hero--home h1 { line-height: 1.7; }

  .legal { padding-top: 99px; padding-inline: 10px; } /* text starts at the live height, below the taller header */
  .legal h1 { font-size: 3rem; } /* legal titles stay 48px on the live phone layout */
}

/* Narrowest phones */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .site-nav ul { gap: 0 4px; }
  html:not(.js) .site-nav a { font-size: .875rem; }
}

/* Page rules. Everything below is scoped to one page. Each page keeps its phone rules beside
   its desktop rules. Sizes are measured from the live pages. */

/* Home */
.page-home .intro { margin-top: 40px; }
.page-home .intro .media-text { padding: 0 4.1vw 0 4.2vw; }
.page-home .intro h2, .page-home .inventory h2 { margin-bottom: 20px; }
.page-home .lead { padding-left: 5px; }
.page-home .intro .lead { max-width: 406px; margin-bottom: 35px; }
.page-home .media-img--fill img { height: 390px; }
.page-home .inventory { padding-top: 125px; }
.page-home .inventory .media-text { padding: 0 10%; }
.page-home .inventory .media-img { padding: 0 20px; }
.page-home .inventory .lead { margin-bottom: 35px; }
.page-home .band { margin-top: 110px; padding: 39px var(--gutter) 116px; }
.page-home .band h2 { margin-bottom: 20px; line-height: 1; }
.page-home .band-intro { margin-bottom: 45px; }
.page-home .band .cards-3 { max-width: 1080px; margin: 0 auto 55px; gap: 0; }
.page-home .band .card { padding: 0 27px; }
.page-home .band .card h3 { margin-bottom: 20px; }
.page-home .band .card img { width: 102px; }
.page-home .credentials { max-width: 1140px; margin: 74px auto 0; }
.page-home .credentials .cards-3 { gap: 31px 0; }
.page-home .credentials .card { padding: 0 10px; }
.page-home .credentials .card img { width: 106px; margin-bottom: 21px; }
.page-home .credentials .card .logo-wide { width: 241px; margin-bottom: 6px; }
.page-home .credentials .card .logo-medium { width: 175px; margin-bottom: 12px; }
.page-home .signup { position: relative; margin-top: 197px; padding: 0 var(--gutter) 95px; text-align: center; }
.page-home .signup h2 { margin-bottom: 35px; line-height: 1.32; }
.page-home .signup .btn { margin: 25px 0 60px; }
.page-home .consent { margin: 0; color: var(--muted); }

@media (max-width: 767px) {
  .page-home .intro { margin-top: 0; }
  .page-home .intro .media-text { padding: 39px var(--gutter); }
  .page-home .intro .lead, .page-home .inventory .lead { max-width: 301px; }
  .page-home .media-img--fill img { height: 190px; }
  .page-home .inventory { padding-top: 39px; }
  .page-home .inventory h2 { font-size: 1.5rem; }
  .page-home .inventory .media-text { padding: 0 var(--gutter); }
  .page-home .inventory .media-img { margin-top: 59px; padding: 0 var(--gutter); }
  .page-home .band { margin-top: 20px; padding: 60px 16px 75px; }
  .page-home .band h2 { line-height: .9; }
  .page-home .band .cards-3 { gap: 35px; }
  .page-home .band .card { padding: 0 11%; }
  .page-home .band .card img { width: 93px; }
  .page-home .credentials { margin-top: 90px; padding-inline: 10px; }
  .page-home .credentials .cards-3 { gap: 20px; }
  .page-home .credentials .card { padding: 0; }
  .page-home .credentials .card img { margin-bottom: 19px; }
  .page-home .credentials .card .logo-wide { width: 248px; margin-bottom: 4px; }
  .page-home .signup { margin-top: 40px; padding-inline: var(--gutter); }
  .page-home .signup h2 { line-height: .9; }
}

/* About and Services: the heading and subline cross bright produce, so they get a stronger shadow */
.page-about .hero h1, .page-services .hero h1 { text-shadow: 0 0 4px rgb(0 0 0 / 70%), 0 0 14px rgb(0 0 0 / 70%); }
.page-about .hero-sub, .page-services .hero-sub { text-shadow: 0 0 1px rgb(0 0 0 / 90%), 0 0 3px rgb(0 0 0 / 90%), 0 0 6px rgb(0 0 0 / 90%), 0 0 10px rgb(0 0 0 / 85%), 0 0 16px rgb(0 0 0 / 60%); }

@media (max-width: 767px) {
  .page-about .hero-sub, .page-services .hero-sub { font-size: .9375rem; line-height: 25px; }
  .page-about .media--img-left .media-img, .page-services .media--img-left .media-img { order: -1; } /* photo above text, as on the live phone layout */
}

@media (max-width: 479px) {
  .page-about .hero-sub, .page-services .hero-sub { font-size: .8125rem; line-height: 20px; } /* 13px on the live phone layout */
}

/* About */
.page-about .story > h2 { margin: 0; padding: 30px var(--gutter) 45px; line-height: 1.318; } /* 58px lines */
.page-about .story .media { min-height: 410px; }
.page-about .story .media-text { padding: 0 30px; }
.page-about .story .media-img { position: relative; }
.page-about .story .media-img img { position: absolute; inset: 0; object-position: 0 0; }

/* Text over the left, plain blue part of the photo */
.page-about .believe {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: 410px;
  color: #212121;
}
.page-about .believe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-about .believe-text { position: relative; z-index: 1; padding: 30px; font-weight: 500; text-shadow: 2px 1px 4px rgb(252 246 246); }

/* Plain text; the live counter animated up to 40 */
.page-about .years { padding: 24px var(--gutter) 36px; background: var(--blue); color: var(--white); text-align: center; }
.page-about .years p { margin: 0; }
.page-about .years .years-number { font-size: 4.3125rem; font-weight: 700; line-height: 1; } /* 69px */
.page-about .years .years-label { margin-top: 12px; font-size: 1.1875rem; line-height: 1.25; } /* 19px */

.page-about .fresh { position: relative; padding: 130px var(--gutter) 95px; text-align: center; }
.page-about .fresh h2 { line-height: 1.318; }
.page-about .fresh h3 { margin-bottom: 35px; line-height: .893; }
.page-about .fresh p { margin-bottom: 55px; }
.page-about .fresh .btn, .page-about .values .btn { margin-left: 10px; }

.page-about .values .media-text { padding: 40px 72px; }
.page-about .values h2 { margin-bottom: 20px; line-height: 1; }
.page-about .values p { margin-bottom: 35px; }
.page-about .value-list { margin: 0 0 40px; padding: 0; list-style: none; }
.page-about .value-list li { display: flex; align-items: center; gap: 27px; }
.page-about .value-list li + li { margin-top: 25px; }
.page-about .value-list img { flex: none; width: 30px; }
/* Shown at its own size, as on the live page. Scaling it to fit the column height would bring the
   file's stock watermark, in the bottom right corner, into view. */
.page-about .values .media-img { height: 589px; overflow: hidden; }
.page-about .values .media-img img { height: 100%; object-fit: none; object-position: 50% 50%; }

@media (min-width: 2000px) {
  .page-about .values .media-img img { object-fit: cover; }
}

@media (max-width: 767px) {
  .page-about .story > h2 { padding: 50px 30px 45px; }
  .page-about .story .media { min-height: 0; padding-top: 20px; }
  .page-about .story .media-img { height: 210px; }
  .page-about .story .media-text { padding: 30px 30px 15px; }
  .page-about .believe { grid-template-columns: 1fr; min-height: 0; }
  .page-about .believe-text { padding: 50px 30px 30px; }
  /* On one column the text runs over the lettuce. A wash in the photo's own blue lightens the
     dark creases so #212121 stays above 4.5:1. */
  .page-about .believe::after { content: ""; position: absolute; inset: 0; background: rgb(190 232 255 / 48%); }
  .page-about .years { padding: 13px 10px 26px; }
  .page-about .fresh { padding: 30px 30px 95px; }
  .page-about .fresh h2 { line-height: .9; }
  .page-about .fresh p { max-width: 230px; margin-inline: auto; }
  .page-about .values .media-text { padding: 25px; }
  .page-about .values h2 { margin-bottom: 19px; line-height: .9; }
  .page-about .values .media-img { height: 210px; }
  .page-about .values .media-img img { object-fit: cover; }
}

/* Narrow enough that the crop would reach the watermark, so zoom in slightly */
@media (max-width: 359px) {
  .page-about .values .media-img img { transform: scale(1.15); }
}

/* Services */
.page-services .intro { max-width: 1140px; margin-inline: auto; padding: 112px var(--gutter) 30px; }
.page-services .intro h2, .page-services .team h2, .page-services .facility h2, .page-services .areas h2 { line-height: 1.318; } /* 58px lines */

.page-services .offers { padding-inline: 10%; }
.page-services .offers ol { padding-left: 60px; }

.page-services .team { padding: 75px 0 25px; }
.page-services .team .media-text { padding: 0 72px; }
.page-services .team h2 { margin-bottom: 35px; }
.page-services .team .media-img img { width: 550px; margin-inline: auto; }
.page-services .team p, .page-services .facility p, .page-services .areas .media-text p { padding: 0 50px 0 5px; }

.page-services .band { margin: 72px 0; padding: 49px var(--gutter); }
.page-services .band h2 { margin-bottom: 20px; line-height: 1; }

.page-services .location > h2 { margin: 0; padding: 10px var(--gutter); line-height: 1; }
.page-services .facility, .page-services .areas .media { max-width: 1080px; margin-inline: auto; align-items: start; }
.page-services .facility { padding-top: 44px; }
.page-services .facility .media-img, .page-services .areas .media-img { padding: 10px; }
.page-services .facility .media-text { padding: 40px 10px 0; }
.page-services .facility h3 { margin-bottom: 35px; line-height: .893; }

.page-services .run {
  max-width: 1080px;
  margin: 50px auto 0;
  font-weight: 700;
  text-align: center;
}
.page-services .location, .page-services .areas { padding-inline: var(--gutter); }
.page-services .location { padding-bottom: 45px; }
.page-services .areas { padding-top: 14px; padding-bottom: 45px; }
.page-services .areas .media-text { padding: 30px 10px 0; }
.page-services .areas h2 { margin-bottom: 35px; }
.page-services .areas .media-text p { margin-bottom: 35px; }

@media (max-width: 767px) {
  .page-services .intro { padding: 40px 38px 30px; }
  .page-services .intro h2, .page-services .team h2, .page-services .facility h2, .page-services .areas h2 { line-height: .9; }
  .page-services .offers { padding-bottom: 39px; }
  .page-services .team { padding: 0 8px; }
  .page-services .team .media-text { padding: 37px 19px 38px; }
  .page-services .team .media-img img { width: 268px; }
  .page-services .band { margin: 19.5px 0; padding: 10px; }
  .page-services .band h2 { line-height: .9; }
  .page-services .location { padding: 0 0 15px; }
  .page-services .location > h2 { padding-inline: 10px; line-height: .9; }
  .page-services .facility { padding: 0 8px; }
  .page-services .facility .media-text { padding: 10px 5px 0; }
  .page-services .run { margin: 60px 0 0; padding: 0 8px; }
  .page-services .areas { padding: 10px 8px 15px; }
  .page-services .areas .media-text { padding: 0 5px; }
  .page-services .areas .run { margin-top: 49px; padding: 0; }
}

/* Produce, All Categories and Contact share one photo. Their heading crosses the bright kale and carrots,
   measured at the letters, and a stronger shadow is enough for text this large. */
.page-produce .hero h1, .page-produce-all-categories .hero h1, .page-contact .hero h1 { text-shadow: 0 0 2px rgb(0 0 0 / 85%), 0 0 5px rgb(0 0 0 / 75%), 0 0 12px rgb(0 0 0 / 60%); }

/* Produce */
.page-produce .selection { max-width: 1180px; margin: 92px auto 0; padding-inline: var(--gutter); }
.page-produce .selection h2 { margin-bottom: 20px; line-height: 1; }
.page-produce .category-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 35px 0 0; padding: 0;
  list-style: none;
}
.page-produce .category-links a {
  display: block;
  padding: 13px 20px;
  color: var(--green);
  font-size: 1.4625rem; /* 23.4px bold: --green only reaches 3:1, so it needs this size at every width */
  font-weight: 700;
  line-height: 1.25rem;
}
.page-produce .category-links a:hover { color: var(--menu-current); }
.page-produce .changes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 1120px; margin: 162px auto 80px; }
.page-produce .changes .media-img { padding: 0 45px 0 20px; }
.page-produce .changes .media-text { padding: 15px 20px 0 30px; }
.page-produce .changes h2 { line-height: 1.32; }

@media (max-width: 767px) {
  .page-produce .selection { margin-top: 39px; padding-inline: 10px; }
  .page-produce .selection h2 { line-height: .9; }
  .page-produce .changes { grid-template-columns: minmax(0, 1fr); margin: 29px 0 20px; }
  .page-produce .changes .media-img { padding: 0; }
  .page-produce .changes .media-text { padding: 20px; }
  .page-produce .changes h2 { line-height: .9; }
}

/* All Categories */
.page-produce-all-categories .catalog { max-width: 1180px; margin: 92px auto 84px; padding-inline: var(--gutter); }
.page-produce-all-categories .catalog h2,
.page-produce-all-categories .catalog h3 { margin-bottom: 20px; line-height: 1; }
/* Columns have a minimum width in rem, so larger text gets fewer columns instead of broken words. */
.page-produce-all-categories .product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7.3rem, 1fr)); gap: 20px;
  margin: 0; padding: 10px 21.5px;
  list-style: none;
}
.page-produce-all-categories .product-grid img { width: 100%; margin-bottom: 21px; }
.page-produce-all-categories .product-grid h4 { margin: 0 0 15px; line-height: 1.5625rem; text-align: center; overflow-wrap: normal; }

@media (min-width: 768px) {
  .page-produce-all-categories .product-grid .long { font-size: 1.2375rem; }
  .page-produce-all-categories .product-grid .longest { font-size: 1.0125rem; }
}

@media (max-width: 767px) {
  .page-produce-all-categories .catalog { margin: 39px auto 25px; padding-inline: 10px; }
  .page-produce-all-categories .catalog h2,
  .page-produce-all-categories .catalog h3 { line-height: .9; }
  .page-produce-all-categories .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(5rem, 22%), 1fr)); /* four columns at most */
    gap: 20px 0; padding-inline: 0;
  }
  .page-produce-all-categories .product-grid img { width: calc(100% - 20px); margin: 0 auto 19px; }
  .page-produce-all-categories .product-grid h4 { font-size: .9rem; line-height: 1.1875rem; }
}

/* Contact */
/* The subline sits on tomatoes and kale. It needs a backing: with the 25% hero shade it holds 4.75:1 on any photo. */
.page-contact .hero-sub { width: fit-content; margin-inline: auto; padding-inline: 10px; border-radius: 4px; background: rgb(0 0 0 / 40%); }
.page-contact .band { padding: 80px var(--gutter) 105px; }
.page-contact .band h2 { margin-bottom: 20px; line-height: 1; }
.page-contact .touch-intro { max-width: 790px; margin: 0 auto 35px; }
.page-contact .contact-form { max-width: 790px; margin-inline: auto; padding-inline: 10px; text-align: left; }
.page-contact .form-note { margin-bottom: 20px; font-size: .9375rem; }
/* .field labels are navy by default, which would vanish on the band */
.page-contact .band .field label, .page-contact .band .field legend { color: var(--white); }
.page-contact .band .field legend { margin-left: -10px; padding: 0; font-size: 1.125rem; }
.page-contact .band .choices { column-gap: 22px; padding-left: 13px; }
.page-contact .band .choices label { font-size: 1.125rem; }
.page-contact .btn--block { line-height: 1.2; }
.page-contact .fields-2 { grid-template-columns: repeat(auto-fit, minmax(8.125rem, 1fr)); } /* side by side on a phone, as live */
.page-contact .botcheck { display: none; } /* spam trap: no person should ever see or reach it */
.page-contact .social { display: flex; justify-content: center; padding: 10px var(--gutter); }
.page-contact .social a {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border-radius: 5px;
  background: #262626; color: var(--white); /* live values, 15:1 */
}
.page-contact .social a:hover { color: var(--white); }
.page-contact .contact-photo { padding: 80px var(--gutter); }
.page-contact .contact-photo img { width: 495px; margin-inline: auto; }

@media (max-width: 767px) {
  .page-contact .band { padding-inline: 30px; }
  .page-contact .contact-photo { padding: 0; }
  .page-contact .contact-photo img { width: 100%; }
}

@media (max-width: 480px) {
  .page-contact .hero-sub { font-size: .8125rem; } /* 13px, the live slider's phone size */
}

@media (max-width: 360px) {
  .page-contact .band { padding-inline: var(--gutter); }
}

/* Thank-you and 404 */
.page-thank-you .message, .page-404 .message { padding-block: 100px; text-align: center; }
.page-404 .sorry { color: var(--menu); font-size: 1.75rem; line-height: 1.1; }
.page-404 .message .btn { margin-left: 8px; }

@media (max-width: 767px) {
  .page-thank-you .message, .page-404 .message { padding-block: 60px; }
}

/* Accessibility Statement: section headings look like bold body text, as on the live page */
.page-accessibility-statement .legal h2 { color: var(--text); font-size: 1.125rem; line-height: var(--body-leading); }
.page-accessibility-statement .legal .published { margin-bottom: 53px; }
.page-accessibility-statement .legal .resources { padding-left: 0; list-style: none; }
.page-accessibility-statement .legal .resources li { margin-bottom: 15px; }