/* Taylor Made Irrigation: "the job sign on the fence". Every system they finish carries a white sign wired to the
   filter-station fence (drop, wordmark, license, phone; see the Errecart photo); the hero headline is set on that sign,
   hung over their own Holland Farms job, and the page then follows the water through what they build: the design, a
   real system drawn as an irrigation plan with its title block (Errecart), the repair, the pipe, the store, the yard.
   Colour sampled with ffmpeg from their own logo and job photos; type from their wordmark and the plan sheet. */
:root {
  /* colour: their logo and their jobs */
  --drop: #0096D4;      /* logo drop, sampled from logo.png; fills, and text on ink only */
  --pipe: #1664A2;      /* the blue manifold at Holland Farms, sampled; links, buttons, the mainline (6.2:1 under white) */
  --ink: #191A17;       /* logo black, warmed toward the soil */
  --ground: #ECE9E4;    /* a dusted concrete filter pad: Pacheco's sand #CDB59E pulled toward grey */
  --sand: #CDB59E;      /* Pacheco Partnership ground, sampled; the Errecart band (ink text only on it) */
  --soil: #5E5045;      /* Errecart's field soil #988576, deepened for captions and secondary text (6.3:1 on ground) */
  --steel: #939598;     /* logo grey: hairlines, and captions on ink (5.8:1) */
  --sign: #FFFFFF;      /* the job sign, the header, the drawing paper */

  /* type: Urbanist 800 for the round, heavy geometric build of the Taylor Made wordmark on their truck and sign;
     Wix Madefor Text for everything that has to be read like a plan's title block: plain, open, sturdy at 18 px */
  --display: "Urbanist", "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --text: "Wix Madefor Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* scale */
  --fs-hero: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);  /* 36 to 38 px phone, 56 to 60 px desktop (on the sign) */
  --fs-h2: clamp(2rem, 1.45rem + 1.7vw, 2.75rem);      /* 32 to 44 */
  --fs-quote: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem);  /* the one big review */
  --fs-body: 1.125rem;                                 /* 18 */
  --fs-small: 0.9375rem;                               /* 15, captions */
  --gutter: 16px;
  --max: 1240px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--fs-h2); }
p { margin: 0 0 1em; }
a { color: var(--pipe); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pipe); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--drop); }
figure { margin: 0; }
figcaption { font-size: var(--fs-small); color: var(--soil); line-height: 1.45; margin-top: 10px; }
blockquote { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- header: sticky, white like the sign, logo left, call right, menu between ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--sign);
  border-bottom: 1px solid #D3CFC8;
}
.bar {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.brand { margin-right: auto; display: flex; align-items: center; min-height: 44px; }
.brand img { height: 38px; width: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.nav a:hover { color: var(--pipe); text-decoration: underline; }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--drop); }
.menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  background: none; border: 1.5px solid var(--ink); border-radius: 22px;
  font: 600 0.9375rem var(--text); color: var(--ink); cursor: pointer;
}
.menu-btn .bars { width: 16px; height: 10px; border-top: 2px solid; border-bottom: 2px solid; position: relative; }
.menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid; }
.call {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: var(--pipe); color: #fff; border-radius: 22px; text-decoration: none; font-weight: 700; font-size: 0.9375rem;
  white-space: nowrap;
}
.call:hover { background: #0F4F82; }
.call svg { width: 16px; height: 16px; flex: none; }
.call .num { display: none; }
@media (min-width: 440px) { .call .num { display: inline; } .call .word { display: none; } }

/* no JS: the list sits in the bar; with JS, a panel under the bar */
.nav { flex-basis: 100%; order: 4; padding-bottom: 8px; }
.js .nav { display: none; }
.js .menu-btn { display: inline-flex; }
.js .site-header.is-open .nav {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--sign); border-bottom: 3px solid var(--drop); padding: 8px var(--gutter) 16px;
}
.js .site-header.is-open .nav a { font-size: 1.125rem; border-bottom: 1px solid #E4E1DC; padding: 0; }

@media (min-width: 1024px) {
  .bar { flex-wrap: nowrap; gap: 16px; min-height: 62px; }
  .brand img { height: 42px; }
  .nav, .js .nav { display: block; flex-basis: auto; order: 0; padding: 0; }
  .nav ul { display: flex; }
  .js .menu-btn { display: none; }
}

/* ---------- hero: their Holland Farms job, the headline on their job sign ---------- */
.hero { position: relative; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 74% 62%; }
.hero-cap {
  position: absolute; right: 8px; top: 8px; margin: 0; padding: 3px 9px;
  background: rgba(25, 26, 23, 0.84); color: #fff; font-size: 0.8125rem;
}
.hero .wrap { position: relative; }
.sign {
  position: relative; z-index: 1;
  margin: -44px 0 0;
  background: var(--sign);
  border: 2px solid #2C2D2A;
  box-shadow: inset 0 0 0 7px var(--sign), inset 0 0 0 9px var(--drop);
  padding: 30px 22px 22px;
  overflow: hidden;
}
/* the two wire ties that hold it to the fence */
.sign::before, .sign::after {
  content: ""; position: absolute; top: 10px; width: 14px; height: 14px;
  border: 3px solid #8A8C8E; border-radius: 50%; background: transparent;
}
.sign::before { left: 18px; }
.sign::after { right: 18px; }
.sign-drop { position: absolute; right: -40px; bottom: -30px; width: 230px; height: auto; z-index: -1; }
.sign h1 { font-size: var(--fs-hero); position: relative; }
.sign h1 span { color: var(--pipe); display: block; }
.sign .deck { margin: 16px 0 20px; max-width: 34em; position: relative; }
.call-big {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px;
  min-height: 60px; padding: 10px 18px; white-space: nowrap;
  background: var(--pipe); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.25rem);
}
.call-big small { font-family: var(--text); font-weight: 600; font-size: 0.9375rem; }
.call-big:hover { background: #0F4F82; }
.sign .lic { margin: 14px 0 0; font-size: var(--fs-small); color: var(--soil); position: relative; }

@media (min-width: 960px) {
  .hero { display: flex; min-height: clamp(660px, 86vh, 880px); background: var(--ink); }
  .hero-photo { position: absolute; inset: 0; }
  .hero-cap { top: auto; bottom: 16px; right: 16px; }
  .hero-photo img { height: 100%; aspect-ratio: auto; object-position: 66% 58%; }
  .hero .wrap { width: 100%; display: flex; align-items: flex-end; padding-top: 120px; padding-bottom: 48px; }
  .sign { width: clamp(500px, 42vw, 590px); margin: 0; padding: 40px 36px 28px; transform: rotate(-0.6deg); }
  .sign::before, .sign::after { top: 12px; }
  .sign-drop { width: 280px; }
}

/* ---------- shared section rhythm ---------- */
.sec { padding-block: 72px; overflow-x: clip; }
@media (min-width: 960px) { .sec { padding-block: 128px; } }
.grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; } }
.lede h2 { margin-bottom: 20px; }
.quote p { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.22; margin: 0 0 12px; }
.quote footer { font-size: var(--fs-small); color: var(--soil); }
.quote { border-left: 4px solid var(--drop); padding-left: 20px; }
.standin {
  display: inline-block; margin-right: 6px; padding: 1px 7px; background: var(--ink); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px;
}

/* ---------- the design: row crop or permanent crop ---------- */
.fit .wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fit .row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 70%; }
@media (min-width: 960px) {
  .fit .wide { grid-column: 6 / -1; grid-row: 1; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter))); }
  .fit .wide figcaption { padding-right: var(--gutter); }
  .fit .lede { grid-column: 1 / 6; grid-row: 1; align-self: center; }
  .fit .quote { grid-column: 7 / 12; grid-row: 2; align-self: end; margin-bottom: 40px; }
  .fit .row { grid-column: 1 / 7; grid-row: 2; margin-top: -40px; }
  .fit .quote p { font-size: 2rem; }
}

/* ---------- Errecart: the plan sheet (signature) on their soil ---------- */
.errecart { background: var(--sand); }
.errecart figcaption, .errecart .quote footer { color: var(--ink); }
.errecart a { color: var(--ink); }
.errecart .photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 60%; }
.errecart .quote { border-left-color: var(--pipe); }
.sheet {
  background: var(--sign); border: 2px solid var(--ink);
  display: grid; margin-top: 8px;
}
.sheet-draw { padding: 16px; border-bottom: 2px solid var(--ink); }
.sheet-draw svg { width: 100%; height: auto; }
.sheet figcaption { margin: 0; color: var(--ink); font-size: 0.9375rem; }
.sheet .tb { margin: 0; display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); font-size: 0.9375rem; line-height: 1.4; }
.sheet .tb dt, .sheet .tb dd { margin: 0; padding: 9px 12px; border-bottom: 1px solid #BDB8B0; }
.sheet .tb dt { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soil); border-right: 1px solid #BDB8B0; padding-top: 11px; }
.sheet .tb-head { margin: 0; padding: 14px 12px; background: var(--ink); color: #fff; }
.sheet .tb-head strong { font-family: var(--display); font-size: 1.375rem; font-weight: 800; display: block; line-height: 1.1; }
.sheet .tb-head span { font-size: var(--fs-small); color: #D8DADB; }
.sheet .tb dd:last-of-type, .sheet .tb dt:last-of-type { border-bottom: 0; }

/* the drawing */
.plan .field { fill: url(#rows); }
.plan .edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.plan .wet { fill: var(--drop); opacity: 0.12; }
.plan .sub { stroke: var(--drop); stroke-width: 5; fill: none; stroke-linecap: round; }
.plan .main { stroke: var(--pipe); stroke-width: 10; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.plan .flow { stroke: #fff; stroke-width: 2.5; fill: none; stroke-dasharray: 8 22; stroke-linejoin: round; opacity: 0.85; }
.plan .pad { fill: #E4E1DC; stroke: var(--ink); stroke-width: 2; }
.plan .tank { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.plan .valve { fill: var(--ink); }
.plan .setname { font-family: var(--display); font-weight: 800; font-size: 44px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 8px; stroke-linejoin: round; }
.plan .lbl { font-family: var(--text); font-weight: 600; font-size: 17px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.plan .lead { stroke: var(--ink); stroke-width: 1.2; fill: none; }
@media (max-width: 699px) { .plan .lbl, .plan .lead { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .plan .flow { animation: flow 1.6s linear infinite; }
  .plan .wet-a { animation: turn-a 12s ease-in-out infinite; }
  .plan .wet-b { animation: turn-b 12s ease-in-out infinite; }
}
@keyframes flow { to { stroke-dashoffset: -30; } }
@keyframes turn-a { 0%, 42% { opacity: 0.26; } 50%, 92% { opacity: 0.04; } 100% { opacity: 0.26; } }
@keyframes turn-b { 0%, 42% { opacity: 0.04; } 50%, 92% { opacity: 0.26; } 100% { opacity: 0.04; } }

@media (min-width: 960px) {
  .errecart .grid { row-gap: 40px; }
  .errecart .lede { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .errecart .quote { grid-column: 1 / 6; grid-row: 2; align-self: start; }
  .errecart .quote p { font-size: 1.5rem; }
  .errecart .photo { grid-column: 6 / -1; grid-row: 1 / 3; align-self: center; }
  .sheet { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) 330px; margin-top: 24px; }
  .sheet-draw { border-bottom: 0; border-right: 2px solid var(--ink); padding: 24px; }
}

/* ---------- repairs: bled left ---------- */
.repairs .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 60%; }
.text-call { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--pipe); }
@media (min-width: 960px) {
  .repairs .photo { grid-column: 1 / 7; margin-left: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter))); }
  .repairs .photo figcaption { padding-left: var(--gutter); }
  .repairs .lede { grid-column: 8 / -1; align-self: center; }
}

/* ---------- pipe in the ground: one full-bleed band ---------- */
.pipe { padding-top: 0; }
.band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 60%; }
.band figcaption { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.pipe .grid { margin-top: 40px; }
@media (min-width: 760px) { .band img { aspect-ratio: 21 / 9; } }
@media (min-width: 960px) {
  .pipe .lede { grid-column: 1 / 6; }
  .pipe .cols { grid-column: 6 / -1; columns: 2; column-gap: 32px; }
  .pipe .cols p { break-inside: avoid; }
}

/* ---------- the store: bled right ---------- */
.store .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
@media (min-width: 960px) {
  .store .photo { grid-column: 6 / -1; grid-row: 1; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter))); }
  .store .photo figcaption { padding-right: var(--gutter); }
  .store .lede { grid-column: 1 / 6; grid-row: 1; align-self: center; }
}

/* ---------- what growers say: the one ink band ---------- */
.proof { background: var(--ink); color: var(--ground); }
.proof a { color: #8FD3F2; }
.proof figcaption, .proof footer { color: #C9CBCC; }
.proof .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 22% 70%; }
.big-quote p {
  font-family: var(--display); font-weight: 800; font-size: var(--fs-quote); line-height: 1; color: var(--drop);
  margin: 0 0 16px; text-wrap: balance;
}
.big-quote footer { font-size: 1rem; }
.proof .rating { font-size: 1.25rem; margin: 28px 0 0; }
.proof .more { display: grid; gap: 28px; }
.proof .quote { border-left-color: var(--drop); }
.proof .quote p { font-size: 1.25rem; color: #fff; }
.proof .standin { outline: 1px solid #C9CBCC; outline-offset: -1px; }
@media (min-width: 760px) { .proof .more { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (min-width: 960px) {
  .proof .photo { grid-column: 1 / 6; grid-row: 1 / 3; }
  .proof .photo img { aspect-ratio: 4 / 5; }
  .proof .big-quote { grid-column: 7 / -1; grid-row: 1; align-self: end; }
  .proof .more { grid-column: 7 / -1; grid-row: 2; align-self: start; }
}

/* ---------- the yard on West A Street ---------- */
.yard .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 35% 60%; }
.yard h2 { margin-bottom: 12px; }
.crew { margin: 24px 0; display: grid; grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); border-top: 2px solid var(--ink); }
.crew dt, .crew dd { margin: 0; padding: 10px 0; border-bottom: 1px solid #C9C4BC; }
.crew dt { font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.crew dd { color: var(--ink); }
.visit-call { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; background: var(--pipe); color: #fff; font-weight: 700; text-decoration: none; border-radius: 26px; margin-right: 16px; }
.visit-call:hover { background: #0F4F82; }
.facts { font-size: var(--fs-small); color: var(--soil); margin-top: 20px; }
@media (min-width: 960px) {
  .yard .photo { grid-column: 1 / 8; margin-left: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter))); }
  .yard .photo figcaption { padding-left: var(--gutter); }
  .yard .lede { grid-column: 8 / -1; align-self: center; }
}

/* ---------- photos: a light hover on the work ---------- */
.work img { transition: transform 0.4s ease, filter 0.4s ease; }
.work { overflow: hidden; }
.work:hover img { transform: scale(1.02); filter: saturate(1.08); }
@media (prefers-reduced-motion: reduce) { .work img { transition: none; } .work:hover img { transform: none; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--ground); padding: 56px 0 32px; font-size: var(--fs-small); }
.site-footer a { color: #fff; }
.foot { display: grid; gap: 28px; }
.foot .mark { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; margin: 0 0 6px; color: #fff; }
.foot .mark span { color: var(--drop); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot ul a { display: inline-flex; align-items: center; min-height: 32px; }
.mockup { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid #3A3B37; color: #B8BABB; font-size: 0.8125rem; }
@media (min-width: 760px) { .foot { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); } }

/* ---------- stub pages ---------- */
.stub { padding-block: 56px 96px; }
.stub h1 { font-size: var(--fs-hero); margin-bottom: 20px; }
.stub .grid { align-items: center; }
.stub p { max-width: 36em; }
.stub figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 960px) {
  .stub .lede { grid-column: 1 / 7; }
  .stub figure { grid-column: 7 / -1; }
}