/* ==========================================================================
   Peters Nursery and Garden Center — Madera
   CONCEPT: "Staked and tagged." The page is a walk down Peters' rows, and every
   photograph wears the thing every pot in a nursery wears: a white plant stake
   tag (common name, botanical name in italics, one line about it), pushed into
   the bottom edge of the picture. The one object on the page is the price stake
   for Kurt's $50 consultation. Form source: the nursery yard itself (plant tags,
   pallets on gravel, the teal shade cloth over the pond).
   Type: Alegreya (calligraphic book serif; its italic sets the botanical Latin
   the way horticulture has always set it) + Alegreya Sans (its humanist
   companion, plain and warm for prices, phone lines and directions).
   Palette: sampled from their own photographs (site-05 pond and shade sail,
   site-07 geraniums on the gravel, site-06 African daisy).
   ========================================================================== */
:root {
  /* colour, from their photographs */
  --ink: #16231a;          /* the black-green of a nursery pot in shade */
  --leaf: #1e472b;         /* deep pond-edge foliage (site-05) */
  --shade: #0e6b63;        /* the teal shade sail over the pond, deepened for text */
  --geranium: #c42a1e;     /* the red zonal geraniums on the pallet (site-07) */
  --daisy: #e8862a;        /* African daisy orange (site-06), rules and marks only */
  --gravel: #ecebe5;       /* the yard concrete and gravel under the pallets */
  --tag: #ffffff;          /* white plastic plant tag */
  --muted: #4a5549;        /* secondary text on gravel and tag (7:1+) */

  /* type */
  --display: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Alegreya Sans", "Gill Sans", "Segoe UI", "Trebuchet MS", sans-serif;

  /* scale */
  --step-hero: clamp(2.75rem, 1.4rem + 4.6vw, 5rem);    /* 44 phone → 80 desktop */
  --step-head: clamp(2rem, 1.45rem + 1.6vw, 2.75rem);   /* 32 → 44 */
  --step-lead: clamp(1.2rem, 1.08rem + 0.45vw, 1.4rem);
  --step-body: 1.125rem;                                /* 18 px */
  --step-small: 1rem;

  --gutter: 16px;
  --measure: 34em;
  --header-h: 60px;
  --space: clamp(4.5rem, 3rem + 6vw, 9rem);            /* between sections */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--gravel);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-body);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--step-head); }
p { margin: 0 0 1em; }
a { color: var(--leaf); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--shade); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
.on-dark .stake :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--tag); color: var(--ink); padding: 12px 16px; font-weight: 700;
}
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--tag);
  border-bottom: 3px solid var(--leaf);
}
.bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 8px;
}
.mark {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--leaf); margin-right: auto; min-height: 44px;
}
.mark__name {
  font-family: var(--display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: 0.16em; line-height: 1;
}
.mark__sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); line-height: 1.3;
}
.mark__sub::before, .mark__sub::after { content: ""; width: 12px; height: 2px; background: var(--daisy); }

.menu-btn {
  display: none;
  align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 22px;
  font: 700 1rem var(--body); cursor: pointer;
}
.menu-btn__icon { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
.menu-btn__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
.js .menu-btn { display: inline-flex; }

.call-top {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 22px;
  background: var(--geranium); color: #fff; text-decoration: none; font-weight: 700;
  white-space: nowrap;
}
.call-top svg { width: 18px; height: 18px; flex: none; }
.call-top__num { display: none; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--daisy); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.nav a:hover { color: var(--leaf); text-decoration: underline; }

/* no JavaScript: the nav is a plain stacked list in the header */
.nav { padding-bottom: 8px; }
.nav li + li { border-top: 1px solid #d6d6cf; }

/* with JavaScript and below the desktop breakpoint: a dropdown panel */
.js .nav { display: none; }
.js .nav.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: calc(100% + 3px);
  background: var(--tag); border-bottom: 3px solid var(--leaf);
  padding: 4px var(--gutter) 16px;
  box-shadow: 0 18px 30px -18px rgba(22, 35, 26, 0.45);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.js .nav.is-open a { font-size: 1.15rem; min-height: 52px; }

/* phones: the wordmark's second line stacks so logo, menu and call fit at 320 px */
@media (max-width: 29.99em) {
  .mark__name { font-size: 1.4rem; }
  .mark__sub { display: block; font-size: 0.62rem; letter-spacing: 0.06em; line-height: 1.15; }
  .mark__sub > span { display: block; }
  .mark__sub::before, .mark__sub::after { display: none; }
  .menu-btn { padding: 0 10px; }
  .call-top { padding: 0 12px; }
}
/* no JavaScript: let the bar grow so the stacked nav list fits */
html:not(.js) .bar { flex-wrap: wrap; height: auto; min-height: var(--header-h); }
html:not(.js) .nav { flex-basis: 100%; order: 3; }

@media (min-width: 36em) {
  .call-top__num { display: inline; }
}

@media (min-width: 80em) {
  .call-top__word { display: none; }
  .js .menu-btn { display: none; }
  .nav, .js .nav { display: block; padding: 0; margin-right: 12px; }
  .nav ul { display: flex; gap: 20px; }
  .nav li + li { border: 0; }
  .nav a { font-size: 1rem; }
  .mark { margin-right: 32px; }
  .bar { gap: 0; }
  .bar .nav { margin-left: auto; margin-right: 24px; }
}

/* ---------- the plant tag (signature) ---------- */
.tag {
  position: relative;
  display: inline-block;
  max-width: min(21rem, calc(100% - 2 * var(--gutter)));
  margin: -2.6rem 0 0 var(--gutter);
  padding: 18px 16px 12px;
  background: var(--tag);
  border-top: 6px solid var(--shade);
  border-radius: 6px 6px 2px 2px;
  transform: rotate(-1.6deg);
  transform-origin: 50% 100%;
  box-shadow: 0 1px 0 rgba(22, 35, 26, 0.12), 0 10px 18px -12px rgba(22, 35, 26, 0.45);
  line-height: 1.3;
  z-index: 2;
}
/* punched hole */
.tag::before {
  content: ""; position: absolute; top: 6px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--gravel); box-shadow: inset 0 1px 2px rgba(22, 35, 26, 0.45);
}
/* the stake, pointing down into the ground */
.tag::after {
  content: ""; position: absolute; left: 22px; top: 100%;
  width: 22px; height: 30px; background: var(--tag);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tag__name { display: block; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.tag__latin { display: block; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--leaf); }
.tag__note { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--muted); }
.tag--right { margin-left: auto; margin-right: var(--gutter); transform: rotate(1.4deg); }
figure { margin: 0; }
.staked { display: flex; flex-direction: column; }
.staked > picture, .staked > img { width: 100%; }
.staked > .tag--right { align-self: flex-end; }

/* ---------- hero: the headline floats on the pond ---------- */
.hero { position: relative; background: var(--ink); color: #fff; }
.hero__photo { position: relative; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__photo::after {
  /* darkens the water where the headline sits, never the waterfall */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 46% at 30% 64%, rgba(10, 26, 18, 0.78) 0%, rgba(10, 26, 18, 0.55) 55%, rgba(10, 26, 18, 0) 100%),
    linear-gradient(to bottom, rgba(10, 26, 18, 0) 70%, rgba(10, 26, 18, 0.55) 100%);
}
.hero__words {
  position: absolute; left: 0; right: 0; top: 41%; z-index: 1;
}
.hero h1 {
  font-size: var(--step-hero);
  max-width: 11em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero__below {
  display: flex; flex-direction: column;
  background: var(--gravel); color: var(--ink);
  padding-bottom: 8px;
}
.hero__below .tag { align-self: flex-end; margin-right: var(--gutter); transform: rotate(1.4deg); max-width: 17rem; }
.hero__text { padding: 36px var(--gutter) 0; }
.hero__lead { font-size: var(--step-lead); line-height: 1.45; max-width: 30em; margin-bottom: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.btn-call {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 26px;
  background: var(--geranium); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.15rem;
}
.btn-call svg { width: 20px; height: 20px; flex: none; }
.btn-call:hover { background: #a8231a; text-decoration: none; }
.link-strong {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--leaf);
  text-decoration: underline; text-decoration-color: var(--daisy); text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
.link-strong:hover { text-decoration-color: var(--leaf); }

@media (min-width: 48em) {
  .hero__photo img { aspect-ratio: 16 / 9; max-height: 86vh; min-height: 520px; }
  .hero__photo::after {
    background:
      radial-gradient(70% 62% at 24% 70%, rgba(10, 26, 18, 0.8) 0%, rgba(10, 26, 18, 0.5) 55%, rgba(10, 26, 18, 0) 100%),
      linear-gradient(to bottom, rgba(10, 26, 18, 0) 72%, rgba(10, 26, 18, 0.45) 100%);
  }
  .hero__words { top: auto; bottom: 12%; }
  .hero__below {
    display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0 48px;
    max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter);
  }
  .hero__below .tag { grid-column: 2; grid-row: 1; margin-right: 0; }
  .hero__text { grid-column: 1; grid-row: 1; padding: 34px 0 0; }
  .hero__lead { max-width: 34em; }
}

/* ---------- the rows (plants) ---------- */
.rows { padding-top: var(--space); }
.rows__head { max-width: var(--measure); margin-bottom: 40px; }
.rows__head h2 { margin-bottom: 18px; }
.rows__grid { display: grid; gap: 56px 24px; }
.rows__grid img { width: 100%; object-fit: cover; }
.rows__big img { aspect-ratio: 4 / 5; }
.rows__b img { aspect-ratio: 1 / 1; }
.rows__c img { aspect-ratio: 3 / 4; }
.rows__ask { max-width: var(--measure); }

@media (min-width: 48em) {
  .rows__grid { grid-template-columns: repeat(12, 1fr); gap: 64px 24px; }
  .rows__big { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .rows__b { grid-column: 9 / span 4; }
  .rows__c { grid-column: 8 / span 4; align-self: end; }
  .rows__ask { grid-column: 1 / span 6; }
}

/* ---------- consultation: the price stake ---------- */
.consult {
  margin-top: var(--space);
  background: var(--leaf); color: #fff;
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}
.consult a { color: #fff; }
.consult__grid { display: grid; gap: 40px; align-items: start; }
.consult h2 { margin-bottom: 20px; color: #fff; }
.consult__text p { max-width: var(--measure); }
.consult__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 100%; }
.consult__photo figcaption { margin-top: 10px; font-size: var(--step-small); color: #d7e4da; }

.stake {
  position: relative;
  background: var(--tag); color: var(--ink);
  padding: 34px 26px 26px;
  max-width: 24rem;
  clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  transform: rotate(-1.2deg);
}
.stake::before {
  content: ""; position: absolute; top: 14px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--leaf);
}
.stake__what { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; display: block; margin-top: 8px; }
.stake__price {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(4.5rem, 3.5rem + 4vw, 6.5rem); line-height: 1; color: var(--geranium);
  margin: 12px 0 6px;
}
.stake__terms { list-style: none; margin: 0 0 20px; padding: 14px 0 0; border-top: 2px dashed #b9c0b5; }
.stake__terms li { padding: 4px 0; }
.stake__terms strong { color: var(--leaf); }
.stake .btn-call { width: 100%; justify-content: center; }
.consult__or { margin-top: 18px; }

@media (min-width: 56em) {
  .consult__grid { grid-template-columns: 5fr 7fr; gap: 72px 64px; }
  .consult__photo { grid-column: 1 / -1; grid-row: 1; }
  .consult__photo img { aspect-ratio: 21 / 8; }
  .consult__text { grid-column: 2; grid-row: 2; }
  .stake { grid-column: 1; grid-row: 2; }
}

/* ---------- two numbers ---------- */
.lines { padding-top: var(--space); }
.lines__grid { display: grid; gap: 40px; }
.lines h2 { margin-bottom: 24px; }
.line { border-top: 3px solid var(--ink); padding: 18px 0 22px; }
.line + .line { border-top-width: 1px; }
.line h3 { font-size: 1.5rem; margin-bottom: 4px; }
.line__num {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--geranium);
  text-decoration: none;
}
.line__num:hover { text-decoration: underline; }
.line p { margin: 4px 0 0; color: var(--muted); max-width: 30em; }
.lines__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 56em) {
  .lines__grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
}

/* ---------- what people say ---------- */
.said { padding-top: var(--space); }
.said__grid { display: grid; gap: 48px; align-items: start; }
.said blockquote { margin: 0; }
.said__big p {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.22; margin-bottom: 14px;
}
.said__small p { font-family: var(--display); font-style: italic; font-size: 1.45rem; line-height: 1.3; margin-bottom: 10px; }
.said cite { font-style: normal; font-weight: 700; font-size: var(--step-small); }
.said cite span { font-weight: 400; color: var(--muted); }
.said__small { border-left: 4px solid var(--daisy); padding-left: 18px; margin-top: 36px !important; }
.said__rating { margin-top: 28px; max-width: 30em; }
.said__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

@media (min-width: 56em) {
  .said__grid { grid-template-columns: 4fr 7fr; gap: 72px; }
  .said__words { padding-top: 64px; }
}

/* ---------- visit ---------- */
.visit { padding-block: var(--space); }
.visit__grid { display: grid; gap: 40px; }
.visit h2 { margin-bottom: 20px; }
.visit address { font-style: normal; font-size: var(--step-lead); line-height: 1.45; margin-bottom: 8px; }
.visit__es { margin-top: 26px; padding-top: 18px; border-top: 1px solid #c9cbc2; }
.visit__es q { font-family: var(--display); font-style: italic; font-size: 1.3rem; quotes: "\201C" "\201D"; }
.visit__es span { display: block; font-size: var(--step-small); color: var(--muted); margin-top: 4px; }
.visit__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 56em) {
  .visit__grid { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #e6ebe4; padding: 56px 0 32px; font-size: var(--step-small); }
.site-footer a { color: #fff; }
.foot { display: grid; gap: 32px; }
.foot__name { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: 0.14em; color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__mock { margin-top: 40px; padding-top: 18px; border-top: 1px solid #3a4a3e; font-size: 0.875rem; color: #bcc8bd; }
@media (min-width: 48em) {
  .foot { grid-template-columns: 4fr 4fr 4fr; }
}

/* ---------- stub pages ---------- */
.stub { padding-block: var(--space); }
.stub h1 { font-size: var(--step-hero); margin-bottom: 24px; color: var(--leaf); }
.stub p { font-size: var(--step-lead); max-width: 30em; }
.stub__photo { margin-bottom: 0; }
.stub__photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }

/* ---------- motion, lightly: the tag lifts when you point at a plant ---------- */
.rows__grid .tag { transition: transform 0.35s ease; }
.rows__grid figure:hover .tag { transform: rotate(0deg) translateY(-4px); }

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