/* ==========================================================================
   Your Color Source Farm, LLC
   Palette pulled from the logo: leaf greens + terracotta on warm cream.
   ========================================================================== */

:root{
  --green-900:#1f4a20;
  --green-800:#2f6b2e;
  --green-600:#4f8f2d;
  --green-400:#7fbb3f;
  --clay-700:#9b5227;
  --clay-600:#b0602f;
  --clay-500:#c4753d;
  --clay-100:#f6e8dd;

  --cream:#fdfaf5;
  --cream-2:#f6efe4;
  --ink:#22301f;
  --ink-2:#4d5a49;
  --line:#e3dacb;
  --white:#fff;

  --shadow-sm:0 1px 2px rgba(34,48,31,.06), 0 2px 8px rgba(34,48,31,.05);
  --shadow-md:0 6px 24px rgba(34,48,31,.10);
  --r:12px;
  --r-lg:18px;
  --wrap:1180px;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay-700)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.65rem,3.3vw,2.5rem)}
h3{font-size:1.2rem;line-height:1.3}
p{margin:0 0 1em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px}
.hidden{display:none !important}

.skip{position:absolute;left:-9999px;top:0;background:var(--green-800);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

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

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--clay-600);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.85em 1.5em;border:2px solid var(--clay-600);border-radius:999px;
  cursor:pointer;transition:background .15s,border-color .15s,transform .12s;
}
.btn:hover{background:var(--clay-700);border-color:var(--clay-700)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--green-800);border-color:var(--green-800)}
.btn-ghost:hover{background:var(--green-800);color:#fff}
.btn-sm{font-size:.9rem;padding:.6em 1.15em}
.btn-lg{font-size:1.06rem;padding:1em 2em}
.inline-link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--clay-100)}
.inline-link:hover{border-color:var(--clay-500)}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:100;background:rgba(253,250,245,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:20px;min-height:74px}
.brand{flex:0 0 auto;line-height:0}
.brand img{width:auto;height:52px}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--green-400)}
.nav .nav-cta{
  color:#fff;border-bottom:none;
  /* Smaller text and a little more room around it, so the words sit
     comfortably inside the pill instead of filling it edge to edge. */
  font-size:.84rem;padding:.62em 1.4em;
}
.nav .nav-cta:hover{border-bottom:none}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;color:#fff;display:grid;align-items:end;min-height:min(78vh,640px)}
.hero-img,.hero-img img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-img img{object-fit:cover;object-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Tuned for the dusk photo: the image is already dark, so the scrim only
     needs to darken the LEFT, where the headline sits. The right side is
     left almost clear so the sunset and the pond reflection still show. */
  background:
    linear-gradient(90deg,rgba(9,20,12,.82) 0%,rgba(9,20,12,.62) 30%,rgba(9,20,12,.24) 58%,rgba(9,20,12,.04) 100%),
    linear-gradient(180deg,rgba(6,14,9,.34) 0%,rgba(6,14,9,.02) 38%,rgba(6,14,9,.52) 100%);
}
.hero-body{padding-top:96px;padding-bottom:64px;max-width:var(--wrap)}
.eyebrow{
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#d9edc2;margin:0 0 .9em;
}
.hero h1{color:#fff;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.lede{max-width:56ch;font-size:1.1rem;color:#f0f2e8;margin-bottom:1.6em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1.5em}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.hero .btn-ghost:hover{background:#fff;color:var(--green-900);border-color:#fff}
.hero-note{font-size:.92rem;color:#cddcc2;margin:0}
.hero-note a{color:#fff;font-weight:600}

/* ── Fact strip ────────────────────────────────────────────────────────── */
.facts{background:var(--green-800);color:#fff}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding-top:0;padding-bottom:0}
.fact{padding:26px 22px 26px 0;position:relative}
.fact + .fact{padding-left:26px}
.fact + .fact::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:rgba(255,255,255,.22)}
.fact-n{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;margin-bottom:2px}
.fact-t{display:block;font-size:.9rem;color:#d3e6c4;line-height:1.45}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section{padding:84px 0}
.section-alt{background:var(--cream-2)}
.kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-600);margin:0 0 .8em;
}
.section-lede{max-width:62ch;color:var(--ink-2);font-size:1.06rem}

/* ── What we grow ──────────────────────────────────────────────────────── */
.grow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:40px}
.grow-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-sm)}
.section-alt .grow-card{background:#fff}
.grow-card h3{color:var(--green-800);margin-bottom:.7em;padding-bottom:.7em;border-bottom:2px solid var(--clay-100)}
.grow-card ul{list-style:none;margin:0;padding:0;columns:1}
.grow-card li{padding:5px 0 5px 20px;position:relative;font-size:.97rem;color:var(--ink-2)}
.grow-card li::before{
  content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;
  background:var(--green-400);
}
.grow-note{font-size:.88rem;color:var(--ink-2);font-style:italic;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.grow-card-accent{background:linear-gradient(160deg,var(--green-800),var(--green-900));border-color:transparent;color:#eef3e7}
.grow-card-accent h3{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.grow-card-accent p{color:#d7e6cb;font-size:.97rem}
.grow-card-accent .inline-link{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ── Catalog ───────────────────────────────────────────────────────────── */
.catalog-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 30px}
.pdfbox{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-md);height:min(84vh,880px);
}
.pdfbox object{width:100%;height:100%;border:0;display:block}
.pdf-fallback{display:grid;place-content:center;gap:16px;text-align:center;height:100%;padding:40px}

/* ── Gallery ───────────────────────────────────────────────────────────── */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;margin-top:38px;
}
.gallery figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--cream-2);box-shadow:var(--shadow-sm)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease}
.gallery figure:hover img{transform:scale(1.045)}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;padding:34px 14px 11px;
  background:linear-gradient(transparent,rgba(20,38,20,.78));
  color:#fff;font-size:.85rem;font-weight:500;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
}
.gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:1;transform:none}
@media (hover:none){.gallery figcaption{opacity:1;transform:none}}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form{margin-top:36px}
.fieldset{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.fieldset h3{color:var(--green-800);margin-bottom:1em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:.88rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field b{color:var(--clay-600)}
.field input,.field select,.field textarea,
.line input,.line select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--cream);
  border:1.5px solid var(--line);border-radius:10px;padding:.66em .8em;
  transition:border-color .15s,background .15s;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,
.line input:focus,.line select:focus{background:#fff;border-color:var(--green-600);outline:none}
.field input[aria-invalid="true"],.line input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#c0392b;background:#fdf2f0}
.hint{font-size:.88rem;color:var(--ink-2);margin:-2px 0 14px}

.lines{display:grid;gap:10px;margin-bottom:14px}
.line{
  display:grid;grid-template-columns:2.2fr 1.3fr 1.2fr .8fr auto;gap:10px;align-items:end;
}
.line label{display:flex;flex-direction:column;justify-content:flex-end}
.line input,.line select{height:46px}
.line label > span{display:block;font-size:.76rem;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.line:not(:first-child) label > span{display:none}
.line-del{
  background:none;border:1.5px solid var(--line);border-radius:10px;color:var(--ink-2);
  width:42px;height:44px;font-size:1.2rem;line-height:1;cursor:pointer;flex:0 0 auto;
}
.line-del:hover{border-color:#c0392b;color:#c0392b}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:0 0 20px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-foot .hint{margin:0;max-width:34ch}
.formmsg{margin:18px 0 0;padding:0;font-weight:500;border-radius:var(--r)}
.formmsg:not(:empty){padding:14px 18px}
.formmsg.ok{background:#e8f3e0;color:var(--green-900);border:1px solid var(--green-400)}
.formmsg.err{background:#fdeeeb;color:#8e2a1c;border:1px solid #e3b4ab}

/* ── About ─────────────────────────────────────────────────────────────── */
.about-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.about-photo img{border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.about-text p{color:var(--ink-2)}
.about-cta{margin-top:1.6em}

/* ── Testimonials ──────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:40px}
.quote{
  margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--clay-500);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-sm);
}
.quote blockquote{margin:0 0 16px;font-size:.99rem;color:var(--ink-2);line-height:1.6}
.quote figcaption{font-family:var(--serif);font-weight:600;color:var(--green-800)}
.quote figcaption span{display:block;font-family:var(--sans);font-weight:400;font-size:.85rem;color:var(--ink-2)}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-list{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin:0}
.contact-list dt{
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-600);margin-bottom:5px;
}
.contact-list dd{margin:0;font-size:1rem;color:var(--ink-2);line-height:1.6}
.contact-list a{color:var(--green-800);font-weight:600;text-decoration:none}
.contact-list a:hover{text-decoration:underline}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer{background:var(--green-900);color:#cddcc2;padding:52px 0 40px;text-align:center}
.footer-in{display:grid;justify-items:center;gap:18px}
.footer-logo{height:64px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-note{margin:0;font-size:.95rem;max-width:48ch;line-height:1.6}
.footer-note strong{color:#fff}
.footer-legal{margin:0;font-size:.82rem;color:#8fa887}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .about-in,.contact-in{grid-template-columns:1fr;gap:34px}
  .facts-in{grid-template-columns:1fr 1fr}
  .fact{padding:22px 18px 22px 0}
  .fact:nth-child(odd) + .fact{padding-left:22px}
  .fact:nth-child(3)::before,.fact:nth-child(2)::before{top:22px;bottom:22px}
  .fact:nth-child(3)::before{display:none}
  .fact:nth-child(3),.fact:nth-child(4){border-top:1px solid rgba(255,255,255,.22)}
  .line{grid-template-columns:1fr 1fr;gap:10px}
  .line label > span{display:block !important}
  .line-del{grid-column:1/-1;width:100%}
}
@media (max-width:760px){
  html{scroll-padding-top:70px}
  /* On a phone the headline spans the full width, so the left-to-right scrim
     would darken the entire photo. Darken top and bottom instead and leave
     the middle band - the greenhouses and their reflection - clear. */
  .hero::after{
    background:linear-gradient(180deg,
      rgba(6,14,9,.72) 0%,rgba(6,14,9,.52) 26%,rgba(6,14,9,.14) 50%,
      rgba(6,14,9,.42) 78%,rgba(6,14,9,.72) 100%);
  }
  .section{padding:60px 0}
  .navtoggle{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--cream);border-bottom:1px solid var(--line);
    padding:8px 24px 20px;box-shadow:var(--shadow-md);display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav .nav-cta{margin-top:14px;justify-content:center;border-bottom:none}
  .topbar-in{min-height:64px}
  .brand img{height:42px}
  .hero{min-height:auto}
  .hero-body{padding-top:70px;padding-bottom:46px}
  .hero h1{max-width:none}
  .grid2{grid-template-columns:1fr;gap:0}
  .fieldset{padding:22px 18px}
  .contact-list{grid-template-columns:1fr}
  .pdfbox{height:72vh}
  .hero-actions .btn{flex:1 1 auto}
}
@media (max-width:480px){
  .facts-in{grid-template-columns:1fr}
  .fact{padding:18px 0 !important;border-top:1px solid rgba(255,255,255,.22)}
  .fact:first-child{border-top:none}
  .fact + .fact::before{display:none}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
}

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

@media print{
  .topbar,.hero-actions,.navtoggle,.pdfbox,#order{display:none}
  body{background:#fff}
}