:root {
  --bg: #f3f1ec;           /* oat: softer than white, less yellow than cream */
  --text: #1d2327;
  --muted: #5a656c;
  --rule: #dddad2;
  --accent: #2f5d4f;       /* the badge green: button, links, menu, step numbers, price stamp */
  --accent-dark: #244a3f;
  --tint: #e7e4dc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Source Sans 3', 'Segoe UI', Roboto, sans-serif; font-size: 1.2rem; line-height: 1.55; padding: 0 20px 4rem; overflow-x: hidden; }
.page { max-width: 38rem; margin: 0 auto; }
a { color: var(--accent); text-underline-offset: 3px; }

/* Top of every page: Prices, the badge, About, on a line. The badge is the way home.
   Three columns: the badge in the middle, each link hugging it from its side.
   The header is "sticky": it stays at the top of the screen, one size throughout. Scrolling down slides it
   out of the way ("tucked"); any scroll back up brings it back (nav.js). Page-coloured behind, so the page slides under it.
   --logo is the badge's size: 7.6rem (80% of the old 9.5rem), less on narrow phones so the links still fit beside it. */
header { --logo: clamp(4.6rem, 100vw - 15.5rem, 7.6rem); position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(1rem, 5vw, 2.6rem); padding: 0.5rem 0; border-bottom: 1px solid var(--rule); view-transition-name: header; transition: transform 0.3s ease; }
header.tucked:not(:focus-within) { transform: translateY(calc(-100% - 1rem)); }   /* extra 1rem hides its shadow too */
header::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--bg); transition: box-shadow 0.2s; }
header.stuck::before { box-shadow: 0 1px 0 var(--rule), 0 6px 12px -10px rgba(29, 35, 39, 0.35); }
.logo { grid-column: 2; grid-row: 1; position: relative; z-index: 1; display: block; }
.badge-logo { display: block; width: var(--logo); height: auto; }
.menu { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: center; font-size: 1.05rem; font-weight: 600; }
.menu a:first-child { grid-column: 1; justify-self: end; }   /* left of the badge */
.menu a:last-child { grid-column: 3; justify-self: start; }  /* right of the badge */
.menu a { position: relative; color: var(--muted); text-decoration: none; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.menu a::after { content: ""; position: absolute; inset: -0.6rem -0.5rem; }   /* invisible: makes each link a bigger target for a finger */
.menu a:hover { color: var(--text); }
.menu a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* Home page: the farmers' market notice, the headline with what and where under it, then the steps (below) */
.hero { text-align: center; }
.nowrap { white-space: nowrap; }   /* keeps a hyphenated word on one line */
.where { margin-top: 0.6rem; font-size: 1.25rem; line-height: 1.4; }
.cta { display: inline-block; margin-top: 1.4rem; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.2rem; padding: 0.7rem 1.3rem; border-radius: 6px; }
.cta:hover { background: var(--accent-dark); }

/* The farmers' market notice, first thing under the menu */
.market { margin-top: 1.6rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 10px; background: #e1e9e5; text-align: center; }
.market strong { display: block; margin-bottom: 0.2rem; font-size: 1.35rem; color: var(--accent-dark); }

/* Other pages: the page title under the menu */
.page-title { margin-top: 2.2rem; font-weight: 700; font-size: 1.7rem; line-height: 1.2; }

/* PHOTOS: put the file in photos/ and swap the placeholder div for
   <img class="photo" src="photos/wheel.jpg" alt="A knife on the wheel"> */
.photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 2.2rem; border-radius: 6px; background: var(--tint); }
/* Videos keep their own shape (tall or square) instead of being cut down to 3:2 */
.photo.portrait, .photo.square { max-width: 26rem; margin-left: auto; margin-right: auto; }
.photo.portrait { aspect-ratio: 4 / 5; }
.photo.square { aspect-ratio: 1; }
.photo-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 1rem; text-align: center; padding: 1rem; }

section { margin-top: 2.8rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
section p + p, .intro p + p { margin-top: 0.8rem; }
.intro { margin-top: 1.4rem; }

/* Prices: item on the left, price on the right, any note underneath */
.price { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.price:first-of-type { padding-top: 0; }
.price small { display: block; font-size: 1rem; line-height: 1.4; color: var(--muted); margin-top: 0.15rem; }
.price b { font-weight: 600; font-size: 1.3rem; white-space: nowrap; }
.after { margin-top: 1rem; color: var(--muted); }
.after + .after { margin-top: 0.2rem; }

/* Drop-off steps */
ol { list-style: none; counter-reset: step; }
ol li { counter-increment: step; position: relative; padding-left: 2rem; margin-bottom: 0.8rem; }
ol li:last-child { margin-bottom: 0; }
ol li::before { content: counter(step); position: absolute; left: 0; top: 0; font-weight: 700; color: var(--accent); }

/* The steps (home page): the customer's trip, top to bottom. Each stop is a green round icon, a heading and a line,
   joined to the next stop's icon by a thin green line. The Sharpening stop is a shaded panel (the workshop):
   its icon sits on the panel's top edge, and the shop steps (repair, angle, sharpen, hone, test) are inside it.
   On phones the panel runs edge to edge so its photos stay full width. */
/* The headline over the opening lines and the steps */
.service-head { margin-top: 2.4rem; font-size: 1.9rem; text-align: center; }
.journey { margin-top: 2.2rem; text-align: center; }
.journey > li { padding: 0; margin: 0; }
.journey > li::before { content: none; }
.journey > li:not(:last-child)::after { content: ""; display: block; width: 2px; height: 2.4rem; margin: 0.15rem auto 0; background: var(--accent); opacity: 0.4; }   /* starts just under the words, runs into the next icon */
.journey > li:has(.workshop)::after { margin-top: 0; }
.journey > li > h3, .workshop > h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0.4rem 0 0.3rem; }
.journey > li > p, .guarantee p { max-width: 26rem; margin: 0 auto; text-wrap: pretty; }   /* no single word left alone on the last line */
.dot { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto; border-radius: 50%; background: var(--accent); color: #fff; }
.dot svg { width: 1.8rem; height: 1.8rem; }
.logo-dot img { display: block; width: 100%; height: 100%; }   /* the Sharpening stop uses the logo's tab icon */
.workshop { position: relative; margin: 1.7rem -20px 0; padding: 2.4rem 20px 2.6rem; background: var(--tint); text-align: left; }
.workshop .dot { position: absolute; top: -1.7rem; left: 50%; margin-left: -1.7rem; }
.workshop > h3 { text-align: center; }
.guarantee { text-align: center; }
@media (min-width: 40rem) {
  .workshop { margin-left: -1rem; margin-right: -1rem; padding-left: 1.5rem; padding-right: 1.5rem; border-radius: 10px; }
}

/* Shop steps, shown one at a time under a tracking bar (script on the home page): tap a dot or swipe.
   Each step: heading (centred) and words on top, its photo or video centred underneath.
   Without the script the bar stays hidden and the steps simply stack. */
.step { margin-top: 2.4rem; padding-top: 0; border-top: none; text-align: center; }
/* Inside the shaded box the heading is centred but the words read left-aligned, in a block centred under it */
.step .words { width: fit-content; max-width: 30rem; margin: 0 auto; text-align: left; }
.step h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--accent); margin-bottom: 0.4rem; text-align: center; }
.step .photo { margin: 1.2rem auto 0; }
.step .photo.portrait { max-width: 24rem; }
.step .photo.square { max-width: 26rem; }

/* The bar: a grey track, a green part that grows to the step being shown, and a dot for each step (tap to show it).
   --at is the step showing (0 = first), --last the number of the final step; the script sets --at */
.tbar { display: none; }
.tracker.ready .tbar { display: block; position: relative; height: 3.4rem; margin: 1.2rem 1.8rem 0.4rem; }
.tbar::before, .tfill { content: ""; position: absolute; left: 0; top: 0.75rem; height: 6px; margin-top: -3px; border-radius: 3px; }
.tbar::before { right: 0; background: #cfd5d1; }
.tfill { width: calc(var(--at) / var(--last) * 100%); background: var(--accent); transition: width 0.55s ease; }
.tdot { position: absolute; left: calc(var(--i) / var(--last) * 100%); top: 0.75rem; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; padding: 0; border: 3px solid #cfd5d1; border-radius: 50%; background: var(--tint); cursor: pointer; transition: border-color 0.3s 0.2s; }
.tdot.done { border-color: var(--accent); }
.tdot::after { content: ""; position: absolute; inset: -0.9rem -1.2rem -1.8rem; }   /* invisible: a bigger target for a finger */
.tdot span { position: absolute; top: 1.15rem; left: 50%; transform: translateX(-50%); font: 600 0.85rem/1 'Source Sans 3', sans-serif; color: var(--muted); white-space: nowrap; }
.tdot[aria-current] span { color: var(--text); }
/* The steps sit on top of each other in one spot; the script sets the box's height to fit the step showing,
   and the height changes smoothly from one step to the next */
.tracker.ready .slides { display: grid; align-items: start; margin-top: 0.6rem; overflow: hidden; touch-action: pan-y; transition: height 0.4s ease; }
.tracker.ready .slide { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.tracker.ready .slide.on { opacity: 1; visibility: visible; transition: opacity 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .tfill, .tracker.ready .slides, .tracker.ready .slide { transition: none; }
}

/* Before and after: drag the handle to wipe between the two pictures (script on the home page) */
.compare { position: relative; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.compare img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .over { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare .tag { position: absolute; bottom: 0.7rem; left: 0.7rem; padding: 0.1rem 0.55rem; border-radius: 4px; background: var(--bg); color: var(--text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.compare .over .tag { left: auto; right: 0.7rem; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--bg); box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); pointer-events: none; }
.compare .knob { position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--accent); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }
.compare .knob svg { width: 1.5rem; height: 1.5rem; }
.compare input:focus-visible ~ .handle .knob { outline: 3px solid var(--accent); outline-offset: 2px; }

footer { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); text-align: center; }
footer .cta { margin-top: 0; }
footer p { margin-top: 1rem; color: var(--muted); }

@media (min-width: 40rem) {
  header { padding: 0.9rem 0; }
}
/* Very narrow phones: slightly smaller menu text so it stays on one line beside the badge */
@media (max-width: 21.5rem) {
  .menu { font-size: 0.95rem; }
}

/* Phones: once scrolled, a copy of the page's Text button stays pinned at the bottom of the screen,
   except when another Text button is already in view (nav.js makes the copy and shows/hides it) */
.cta-float { position: fixed; z-index: 20; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); margin: 0; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(29, 35, 39, 0.5); transform: translate(-50%, calc(100% + 2rem)); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.cta-float.show { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 40rem) {
  .cta-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  header, .cta-float { transition: none; }
}

/* Moving between pages: the header holds still (or slides back into view) while the page below fades over.
   Browsers without this feature (Firefox, for now) just change page as usual. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Gift cards: the link under the home tagline, the row on Prices, and the Gift cards page */
.gift-note { margin-top: 0.9rem; font-size: 1.05rem; }
.gift-note a { font-weight: 600; }
.price.gift span { font-weight: 700; }
.price.gift .buy { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; padding: 0.35rem 0.9rem; border-radius: 6px; }
.price.gift .buy:hover { background: var(--accent-dark); }
.centre { text-align: center; }
.small { font-size: 1rem; }
.after.centre { margin-top: 0.5rem; }
.gift-steps li { margin-bottom: 0.6rem; }
/* The card as the recipient sees it */
.card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem; margin: 0 auto; max-width: 30rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: 14px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule), 0 14px 30px -18px rgba(29, 35, 39, 0.45); }
.card-badge { width: 6.2rem; height: auto; }
.card-words { display: grid; gap: 0.1rem; line-height: 1.25; }
.card-words small { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card-words b { font-size: 2.6rem; font-weight: 700; color: var(--accent-dark); line-height: 1; margin: 0.1rem 0 0.3rem; }
.card-name { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }
.card-how { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; }
.card-code { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.card-code kbd { font: 600 0.9rem/1 'Source Sans 3', sans-serif; letter-spacing: 0.06em; color: var(--text); background: var(--tint); padding: 0.15rem 0.45rem; border-radius: 4px; }
.card-from { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.cobrand { margin-top: 1.4rem; }
@media (max-width: 24rem) {
  .card { grid-template-columns: 1fr; justify-items: start; }
  .card-badge { width: 5rem; }
}