/* ─────────────────────────────────────────────────────────────────────────
   Knollwood "look": a quieter, more editorial eye.
   Borrowed habits, not borrowed looks: lots of air, one ground colour per
   section, light serif headings, staggered two-column grids, every photo
   staged the same way, outlined pill tags, filters that show their counts,
   quiet arrow links and hairline rules. Colours and fonts stay Knollwood's.
   Loaded last on every public page, so it refines everything above it.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --r: 0;                      /* square corners, like a printed seed catalog */
  --r-sm: 0;
  --stagger: clamp(60px, 9vw, 150px);   /* how far the right-hand column drops */
}

/* type: lighter, more editorial headings */
h1, h2, .sec-title, .page-hero h1, .hero-full h1, .hero-light h1 { font-weight: 400; letter-spacing: -.012em; }
.sec-title { line-height: 1.08; }
.sub { letter-spacing: .2em; }
/* section labels: a quiet italic line, not tiny spaced capitals */
.eyebrow { font: italic 400 clamp(16px, 1.3vw, 18px)/1.3 var(--serif); text-transform: none; letter-spacing: 0; color: inherit; opacity: .85; }
.sub--lg { font: italic 400 clamp(19px, 1.7vw, 23px)/1.3 var(--serif); text-transform: none; letter-spacing: 0; }

/* header: smaller caps, a quiet marker for the page you're on */
.masthead__nav a, .dd__btn { font-size: 10.5px; letter-spacing: .16em; }

/* rounded photos and cards, one radius everywhere */
.door, .offer img, .gallery figure, .gallery img, .album__p img, .teaser__img, .teaser__old, .story-grid__pic img, .story-photo img, .biz__pic img,
.hero-light__art img, .hero-light__art .gcardx, .page-hero__photo, .season__photo, .card, .vcard, .coll, .kind__card, .pcard, .glib .gcard, .hub-card, .tool-card, .tool,
.qgroup, .qsum, .wsitem, .qres__card, .good__main, .good__thumbs button, .feature, .faq__list, .price-card, .tier, .spots, .months__row figure, .ig__item, .quiz__card, .input, .select, .textarea {
  border-radius: var(--r);
}
.input, .select, .textarea, .req-form .input { border-radius: var(--r-sm); }
.door, .card, .vcard, .coll, .kind__card, .pcard, .hub-card, .tool-card, .tool, .qgroup, .qsum, .qres__card, .good__main, .months__row figure, .ig__item, .page-hero__photo, .season__photo, .gallery figure { overflow: hidden; }
.ig__grid { gap: 10px; }
.btn, .btn--block, .qstep, .tool__tag, .eyebrow-tag, .pill, .card__tag, .tag { border-radius: 0; }

/* filters show what's behind them */
.chip { border-radius: 0; }
.chip__n { display: none; }

/* outlined pill tags under a title */
.tags, .wk__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
/* details under a title read as a line of text, not a row of badges */
.wk__tags { gap: 0; }
.wk__tags .tag { background: none; border: 0; padding: 0; color: var(--ink-soft); font: italic 400 16px/1.4 var(--serif); letter-spacing: 0; text-transform: none; }
.wk__tags .tag + .tag::before { content: "·"; margin: 0 .5em; color: var(--stem); font-style: normal; }

/* quiet arrow links where a boxy button would shout */
.arrow-link { display: inline-flex; align-items: center; font: italic 400 19px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--dew); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; padding: 4px 0; }
.arrow-link:hover { text-decoration-thickness: 2px; }

.arrow-link--dark { color: var(--stem); }
.arrow-link[hidden] { display: none; }

/* ── home: opening ── */
.lead { background: var(--dew); padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 9vw, 140px); overflow: hidden; }
.lead__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lead__title { font-size: clamp(42px, 5vw, 76px); line-height: 1.02; margin: 18px 0 0; color: var(--forest); text-wrap: balance; }
.lead__body { max-width: 30em; margin: 26px 0 0; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-soft); }
.lead__cta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 36px; }
.lead__note { margin: 34px 0 0; color: var(--marigold); font-size: clamp(24px, 2.4vw, 32px); transform: rotate(-3deg); transform-origin: left; }
.lead__art { position: relative; padding: 0 0 clamp(40px, 5vw, 80px) clamp(40px, 6vw, 110px); }
.lead__main { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--sage); }
.lead__main .slides__dots { justify-content: flex-end; padding-right: 18px; }
.lead__then { position: absolute; left: 0; bottom: 0; width: 42%; margin: 0; }
.lead__then img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: 0 0 0 8px var(--dew); }
.lead__then figcaption { margin-top: 14px; font: 400 9px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 860px) {
  .lead__in { grid-template-columns: 1fr; }
  .lead__art { padding-left: 18%; }
  .lead__title { font-size: clamp(36px, 10vw, 52px); }
}

/* ── home: what we grow, staggered two columns like a portfolio ── */
.work { padding: var(--sp-section) var(--gutter); }
.work__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 70px); }
.work__head .sec-title { margin: 10px 0 0; }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); row-gap: clamp(40px, 5vw, 72px); }
.wk { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.wk[hidden] { display: none; }
.wk__pic { order: -1; margin: 0 0 6px; display: block; overflow: hidden; background: var(--sage); }
.wk__pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.wk__title { margin: 0; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--serif); color: var(--forest); }
.wk:hover .wk__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 960px) { .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__filters { width: 100%; }
}

/* ── home: our story, one statement and four facts on hairlines ── */
.since { padding: var(--sp-section) 0; background: var(--paper); border-top: 1px solid var(--rule); }
.since__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px clamp(32px, 7vw, 110px); align-items: start; }
.statement { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.2; font-weight: 400; margin: 14px 0 30px; color: var(--forest); text-wrap: pretty; }
.since__text { grid-column: 1; grid-row: 1; }
.since__pic { grid-column: 2; grid-row: 1 / span 2; margin: var(--stagger) 0 0; }
.facts { grid-column: 1; grid-row: 2; align-self: end; }
.since__pic img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin: 0; }
.facts div { border-top: 1px solid var(--forest); padding-top: 16px; }
.facts dt { font: 400 clamp(34px, 3.4vw, 48px)/1 var(--serif); color: var(--stem); }
.facts dd { margin: 10px 0 0; font: 400 9.5px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 760px) {
  .since__in { grid-template-columns: 1fr; }
  .since__text, .since__pic, .facts { grid-column: 1; grid-row: auto; }
  .since__pic { margin: 0; width: 70%; justify-self: end; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}

/* ── the same staggered rhythm on the hub & guide grids ── */


/* footer sign-off */
.foot__signoff { text-align: center; margin: 0 auto var(--sp-section-sm); font-size: clamp(28px, 3vw, 40px); }

/* gardener hub: the Garden Planner feature */
.gp-feature { padding-top: var(--sp-section-sm); padding-bottom: var(--sp-section-sm); }
.gp-feature__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 70px); align-items: center; background: #FADCD6; border-radius: var(--r); padding: clamp(20px, 4vw, 48px); text-decoration: none; color: var(--ink); }
.gp-feature__pic { margin: 0; border-radius: calc(var(--r) - 4px); overflow: hidden; aspect-ratio: 1; box-shadow: 0 18px 40px rgba(33,39,28,.18); }
.gp-feature__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-feature__txt .sec-title { margin: 10px 0 14px; color: var(--forest); }
.gp-feature__txt p { margin: 0 0 22px; color: var(--ink-soft); max-width: 34em; }
@media (max-width: 760px) { .gp-feature__in { grid-template-columns: 1fr; } }

/* ── growers: the Farm Kit ── */
.fkit { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--stem); color: var(--dew); border-radius: var(--r); }
.fkit__pic { margin: 0; }
.fkit__pic img { display: block; width: 100%; height: auto; border-radius: var(--r-sm, 8px); box-shadow: 0 24px 50px rgba(0, 0, 0, .28); }
.fkit__txt { display: grid; gap: 14px; align-content: start; }
.fkit .tool__tag { justify-self: start; background: var(--dahlia); color: var(--cosmo); }
.fkit h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; font-weight: 400; margin: 0; color: var(--dew); }
.fkit__lede { margin: 0; font-size: clamp(18px, 1.6vw, 21px); opacity: .92; }
.fkit__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; counter-reset: fk; }
.fkit__list li { counter-increment: fk; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; padding: 12px 0; border-top: 1px solid rgba(233, 239, 227, .22); }
.fkit__list li::before { content: counter(fk, decimal-leading-zero); grid-row: span 2; font: 400 10px/1.9 var(--display); letter-spacing: .14em; color: var(--dahlia); }
.fkit__list b { font: 400 19px/1.25 var(--serif); }
.fkit__list span { font-size: 15px; line-height: 1.4; opacity: .82; }
.fkit__plus { margin: 2px 0 0; font-size: 16px; opacity: .92; }
.fkit__plus a { color: var(--dew); }
.fkit__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(233, 239, 227, .22); }
.fkit__price { font-size: 36px; line-height: 1; }
.fkit__buy .btn { background: var(--dew); color: var(--stem); border-color: var(--dew); }
.fkit__buy small { font: 400 9.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
@media (max-width: 900px) { .fkit { grid-template-columns: 1fr; } .fkit__pic { max-width: 340px; } }
@media (max-width: 560px) { .fkit__list { grid-template-columns: 1fr; } }
.fkit__addon { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r-sm, 8px); background: rgba(233, 239, 227, .1); border: 1px solid rgba(233, 239, 227, .22); scroll-margin-top: 110px; }
.fkit__addon > div { display: grid; gap: 4px; flex: 1 1 260px; }
.fkit__addon b { font: 400 19px/1.25 var(--serif); }
.fkit__addon span { font-size: 15px; line-height: 1.4; opacity: .85; }
.fkit__addon .btn { background: transparent; color: var(--dew); border-color: var(--dew); }


/* ─────────────────────────────────────────────────────────────────────────
   House style. Knollwood's own, from its brand fonts and colours: square
   corners, hairline rules, no floating shadows, no bubbly badges, sections
   that simply appear instead of sliding up as you scroll.
   ───────────────────────────────────────────────────────────────────────── */
.reveal-ready [data-reveal]:not(.in) { transform: none; }
[data-reveal] { transition: opacity .6s ease; }
img { border-radius: 0; }
.lead__then img { box-shadow: none; }
.since__pic { margin-top: 0; }
/* numbered steps: plain figures, no circles */
.wsteps li { padding-left: 34px; }
.wsteps li::before { content: counter(ws, decimal-leading-zero); width: auto; height: auto; border: 0; border-radius: 0; display: block; font: italic 400 17px/1.4 var(--serif); opacity: 1; }
.process__n { width: auto; height: auto; border: 0; border-radius: 0; display: block; font: italic 400 20px/1 var(--serif); }
/* cards and panels sit on hairlines, not shadows */
.gp-buy, .gp-hero__card { box-shadow: none; border: 1px solid var(--rule); }
.gp-gcard:hover { box-shadow: none; transform: none; outline: 1px solid var(--stem); }
.gp-hero__rows span, .gp-wiz__bar, .gp-sample-flag { border-radius: 0; }
.gp-feature__pic, .fkit__pic img { box-shadow: none; }
/* photos lie flat: no tilted snapshots, white photo-frame borders or drop shadows */
.teaser__old, .pcard__img img, .gcardx, .hero-light--fan .hero-light__art img, .album__p, .album__p img { transform: none !important; }
.teaser__old, .album__p, .pcard__img img, .hero-light--framed .framed, .hero-light--fan .hero-light__art img, .gcardx, .price-card, .tier--best { box-shadow: none; }
.hero-light--framed .framed { border: 0; }
.hero-light--fan .hero-light__art img, .teaser__old { border-color: var(--paper); }
.album__p { background: none; padding: 0; }
.gp-chat__fab { box-shadow: none; }
.lead__note, .season__note { transform: none; }
/* kind words read like quotes printed on the page, not a row of cards */
.kind__card { background: none; border: 0; border-top: 1px solid var(--forest); padding: 22px 0 0; }
.kind__card blockquote { font-style: italic; }
.kind__card blockquote::before { content: none; }
/* the gardener page: the photo speaks for itself, no floating app mock-up */
.gp-hero__card, .gp-hero__chat { display: none; }
.gp-hero__photo { margin-left: 0; }
/* garden styles: a printed list on hairlines instead of a grid of pastel tiles */
.gp-stylegrid li { background: none !important; border-top: 1px solid var(--rule); padding: 16px 0 0; min-height: 0; align-content: start; }