/* =====================================================================
   SAPCOTE KIT — range-page layer (loads after sgc-kit.css + sgc-kit-v8.css)
   The inner-page template, v2.7, 4-Nov-2026. Every range page (plants, compost,
   gravel and slabs, bird care, pots, seeds and tools, coal and logs) is:
     hero (the homepage's own .hero3 on this page's photo, breadcrumb overlaid at
     its top)  ->  open-now strip  ->  what you'll find (tiles)  ->  this month (the homepage's month block,
     four cards)  ->  why buy it here  ->  the things people ask about <topic>
     ->  also at Sapcote (the homepage's whole hub grid, two rows, this page
     marked)  ->  visit (Find us)  ->  guides for this topic  ->  Facebook  ->  footer
   v2 change: the split hero with the floating note went. Matt: "too SaaS - the
   overlapping card, the shadow, the curved edges".
   v2.1: three hero treatments to compare (A short band, B the homepage hero on
   one photo, C the words on a white panel).
   v2.2: Matt picked B, and asked for it to be the homepage hero exactly. So this
   layer no longer resizes it: .hero3 keeps every homepage rule (700px, 72px
   title, 880px lock, the same scrim, the same pills). Only the lead paragraph,
   which the homepage does not have, is styled here. The guides sit under
   Find us, as they do on the homepage.
   v2.5: the seasonal variant (Christmas). The template is not forked: a page
   with season="christmas" gets the rules at the bottom of this file.
   v2.6: Matt: "doesn't feel very Christmasy". The season became a full skin
   (bottom of this file): tinted hero scrim, red/gold/blush through every
   seasonal section, a dates block instead of the month block, the Lemax band.
   v2.7: Matt: go further. Red chrome, dark wintry bands with white relief,
   the hero scrim red (same geometry), no dates block, a Lemax photo slider,
   a seasonal Find us on deep green.
   v2.8: Matt: "I really like it", five fixes. The seasonal hero's small text
   pure white with a halo in the skin's hue over a stronger scrim (same
   geometry), no ghost button; the Lemax band's class renamed (it had
   collided with the kit's .band); ten shop tiles; Also at Sapcote above
   Facebook on seasonal pages (builder).
   v2.9: Matt: the hero "a lot clearer" but overlaid too much. The Christmas
   scrim becomes a bottom-left ellipse plus a light floor (no overlay at the
   top-left or top-right, little at the bottom-right), the breadcrumbs get a
   small backing of their own footprint, the dots a halo, and no kit green or
   lime ink anywhere on the red chrome (strip icons, popover today row, the
   phone's round call button, focus rings).
   v2.10: the cafe page. A service page on the same template: a menu block
   (the printed menu as text) in the month block's slot, eight tiles in two
   rows of four, the FHRS badge on the why mosaic, no guides block. The
   seasonal skin is untouched.
   v2.11: Matt's cafe verdict. The hygiene badge in the hero under the pills
   (`hero_badge`), a dietary filter on the menu block, marker pills at 14px.
   v2.12: the hero badge bare and readable (no white backing, 200px / 168px,
   a drop shadow on the image); the why mosaic keeps its badge too.
   v2.13: Matt on the cafe hero ("a greeny tinge across the whole thing"):
   the Christmas ellipse-and-floor scrim became the kit's own, in the kit ink
   (sgc-kit-v8.css, --scrim-rgb); this file now sets only the Christmas hue.
   The lead is white everywhere; the cafe badge row takes the pills' 16px gap
   at 180px wide.
   v2.14: one subtler halo on every hero (kit), the Christmas red follows the
   same geometry; --scrim-k and --halo-k multipliers; the preview tuner.
   v2.16: the About page. A story block in the mid slot (a compact dated list)
   and the homepage's press line under the why block's facts (rules at the end
   of the file). The cafe and seasonal rules are untouched.
   v2.17: the Services page. Six tiles in two rows of three, and a "how
   delivery works" block in the mid slot (three step cards, then the carry and
   build lines on a white card), rules at the end of the file.
   v2.18: Matt's Services verdict. The review element kit-wide (a white card
   with the platform's mark, stars or "Recommends", the words, the name and
   month; a wall of them in the why slot on Services and About; the single
   quote on the other pages is the same card), and the Services page in depth
   (six service sections in the mid slot, the tiles as jump links). The step
   cards and the old quote-card rules are gone.
   v2.19: Matt on round 29. The service tiles carry the hub tiles' .go line
   pointing down ("See how it works"); each section's review is a full-width
   bar under the text and photo, the photo stretched to the text's height.
   ===================================================================== */

/* The inner-page template, v2.19, 6-Nov-2026: the cafe page (v2.10 to v2.13), the About page's story block and press line, the Services page's three-up tiles, then the review element and the service sections (rules at the end of the file). */

/* ---- breadcrumb ---------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.crumbs .ic{width:14px;height:14px;color:var(--hair)}
.crumbs b{color:var(--ink);font-weight:700}

/* ---- page banner: the homepage hero on one photo. The breadcrumb is a minimal
   overlay at the top of the photo (Matt, round 13), so the hero and the strip land
   exactly where the homepage's do. No pre-heading line, and the words sit a little
   higher than the homepage's so more photo shows under the pills ---- */
.pban{background:#fff}
.pban .hero3 .crumbbar{position:absolute;left:0;right:0;top:0;z-index:2;padding-top:18px}
.pban .hero3 .crumbbar .in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.pban .hero3 .crumbs{color:#fff;text-shadow:0 0 12px rgba(12,14,10,calc(.45 * var(--halo-k))),0 1px 2px rgba(0,0,0,calc(.45 * var(--halo-k)))}   /* v2.14: the kit halo's geometry */
.pban .hero3 .crumbs a{color:rgba(255,255,255,.88)}
.pban .hero3 .crumbs a:hover{color:#fff}
.pban .hero3 .crumbs b{color:#fff}
.pban .hero3 .crumbs .ic{color:rgba(255,255,255,.6)}
.pban .hero3 .wrap{padding-bottom:64px}                     /* homepage is 40px: a little more photo under the pills */
.pban .hero3 .lead{font-size:21px;line-height:1.45;color:#fff;max-width:60ch;margin:0 0 var(--s5)}   /* v2.13: pure white on every page (was #F1F6E8), the kit's halo carries it */
.pban .hero3 .cta{margin-bottom:0}                          /* the pills follow the buttons directly, no proof line between */

/* ---- tiles and guide cards with no photo yet: an icon on a plain ground --- */
.card .img.noimg{display:flex;align-items:center;justify-content:center;background:#E8ECE2}
.card .img.noimg .ic{width:56px;height:56px;color:var(--green);opacity:.7}
.card.hub3 .img .chips{position:absolute;left:12px;top:12px;bottom:auto;z-index:1}

/* ---- why buy it here: the customer's words sit under the mosaic, no overlap */
.why .mosaic{margin-right:0}
/* v2.18: the single quote under the mosaic is the kit review card (rules at the end of the file); the old .said card is gone */
.why .mosaic+.rev{margin-top:14px}

/* ---- also at Sapcote: the homepage's hub grid, shorter photos, this page marked ---- */
.also .cards.five .card.hub3 .img{aspect-ratio:4/3}
.also .card.here .chip{display:inline-block;background:#fff;color:var(--green-dark);font:700 13px/1 var(--font);padding:7px 10px;border-radius:var(--pill);box-shadow:0 2px 8px -2px rgba(0,0,0,.25)}

@media (max-width:760px){
  .pban .hero3 .lead{font-size:18px}
}

/* ---- seasonal skin: Christmas (template v2.7, hero and band fixes v2.8, scrim shape v2.9, 4 Nov 2026) ----
   Matt on v2.6: go further, a hybrid of dark wintry grounds and white relief,
   red chrome, the hero scrim red not green, no "season at a glance", less text
   on the Lemax band, a seasonal Find us. The builder puts `season-xmas` on the
   body and the season's classes on the page's own sections; this file skins
   them. Rhythm: red header and strip -> hero (the homepage scrim, hue only
   changed) -> the shop on deep green with a fine snow -> the Lemax band on
   burgundy with a photo slider -> FAQ and Also at Sapcote on white -> Find us
   on deep green -> guides on a snow tint -> Facebook on white -> the kit's
   deep green footer. Tokens: the homepage's .xmas3 reds, gold and blush, the
   kit's forest greens. AA on every dark ground (white and #D9E4D6 on the
   greens, white on the reds); gold is never text on a light ground; nothing
   under 16px; Lato only. ---- */
.season-xmas,.pban.xmas,.sec.xmas,.sec.xmas-head{--xr:#8F2430;--xr-deep:#6E1A24;--xg:#1E3B22;--xg-deep:#15301A;--xgold:#E8B84A;--xgold-hi:#F2C86A;--xblush:#F7E9EA;--xrose:#FBE8EA;--xsnow:#F1F4F6;--xpale:#D9E4D6}
.eyebrow .ic{width:18px;height:18px}

/* chrome on the seasonal page: deep red header with white menu, phone and
   directions buttons (the logo badge as it is), the open-now strip deep red
   with white text and a gold pip; the mega menu panel and the hours popover
   stay white; the footer stays the kit's deep green */
.season-xmas .hdr6{background:var(--xr-deep);border-bottom-color:rgba(255,255,255,.14)}
.season-xmas .hdr6 .menu-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.season-xmas .hdr6 .menu-btn:hover,.season-xmas .hdr6 .menu-btn.on{background:#fff;color:var(--xr-deep);border-color:#fff}
.season-xmas .ctas{border-color:rgba(255,255,255,.85);background:transparent}
.season-xmas .ctas .c-tel{color:#fff}
.season-xmas .ctas .c-tel:hover{background:rgba(255,255,255,.14)}
.season-xmas .ctas .c-dir{background:#fff;color:var(--xr-deep)}
.season-xmas .ctas .c-dir:hover{background:var(--xgold);color:var(--ink)}
.season-xmas .strip2{background:var(--xr-deep);border-bottom:0;color:#fff}
.season-xmas .strip2 .item .ic{color:var(--xgold-hi)}   /* v2.9: light gold, 7:1 on the deep red; the pip stays --xgold */
.season-xmas .strip2 .item a{color:#fff}
.season-xmas .strip2 .item a:hover{color:var(--xgold)}
.season-xmas .strip2 .open::before{background:var(--xgold);box-shadow:0 0 0 3px rgba(232,184,74,.28)}
.season-xmas .strip2 .hp summary{color:#fff}
.season-xmas .strip2 .hp .pop{color:var(--ink)}
.season-xmas .strip2 .hp .pop tr.today th,.season-xmas .strip2 .hp .pop tr.today td{color:var(--xr)}   /* the popover's today row: the skin's red, not kit green (v2.9) */
.season-xmas .hdr6 :focus-visible,.season-xmas .strip2 :focus-visible,.season-xmas .pban :focus-visible{outline-color:var(--xgold-hi)}   /* no lime ring on red chrome (v2.9) */

/* hero: the homepage hero (.hero3) untouched; on this skin the scrim is its
   own shape (v2.9, Matt on v2.8: "the background image is overlaid too much
   with red", the top-left and bottom-right overlay "not needed"): a deep-red
   ellipse anchored bottom-left where the words are, plus a light floor, in
   place of the kit's two linear gradients. Tuned by measurement at 1440:
   white on the backdrop under the lead stays at or above 4.5:1 on every
   slide (4.77 / 5.48 / 4.79), the top-left and top-right corners carry no
   overlay, the bottom-right .28. Narrower ellipses lost the lead on the dome
   and crates slides. On the phone the lead spans the width and sits higher,
   so the ellipse moves to the middle. Gold underline and directions button,
   white pills with red type.
   v2.8 (Matt: "the smaller text in the hero is quite hard to see ... the call
   button is not quite crisp"): the lead, breadcrumb and chevrons are pure white with a two-layer halo in the
   skin's hue, a wide soft one and a tight one at the strokes (the homepage's
   olive glow read muddy on red and gave no edge; the tight layer is what
   carries the phone, where the lead sits mid-frame beyond the scrim), and there
   is no ghost button on a seasonal hero: the secondary is solid white with
   deep-red type, and both buttons take the pills' lift so they sit off the
   photo. */
.pban.xmas .hero3 .lock{text-shadow:0 0 12px rgba(40,6,12,calc(.45 * var(--halo-k))),0 1px 2px rgba(0,0,0,calc(.45 * var(--halo-k)))}   /* v2.14: the kit halo's geometry in the skin's red */
.pban.xmas .hero3 .crumbs,.pban.xmas .hero3 .crumbs a,.pban.xmas .hero3 .crumbs b{color:#fff;text-shadow:0 0 12px rgba(40,6,12,calc(.45 * var(--halo-k))),0 1px 2px rgba(0,0,0,calc(.45 * var(--halo-k)))}
.pban.xmas .hero3 .crumbs a:hover{color:var(--xgold-hi)}
.pban.xmas .hero3 .crumbs{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(40,6,12,.42)}   /* v2.9: a small backing of the crumbs' own footprint, so the overlay need not reach the top-left */
.pban.xmas .hero3 .dots button{box-shadow:0 0 0 1px rgba(40,6,12,.45),0 2px 6px rgba(0,0,0,.45)}   /* v2.9: the dots sit bottom-right where the overlay is light */
.pban.xmas .hero3 .crumbs .ic{color:#fff;filter:drop-shadow(0 1px 3px rgba(40,6,12,.8))}
.pban.xmas .hero3 .cta .btn{box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.pban.xmas .hero3 .cta .btn-white{background:#fff;color:var(--xr-deep);border-color:#fff}
.pban.xmas .hero3 .cta .btn-white:hover{background:var(--xblush);color:var(--xr-deep);border-color:var(--xblush)}
.pban.xmas{--scrim-rgb:74,14,24}   /* v2.13: the ellipse-and-floor scrim is now the kit's own (sgc-kit-v8.css); the skin changes only the hue */
.pban.xmas .hero3 h1{--u-color:var(--xgold)}
.pban.xmas .hero3 .lead{color:#fff}
.pban.xmas .hero3 .kick{font-size:22px}
.pban.xmas .hero3 .kick .ic{width:24px;height:24px;color:var(--xgold)}
.pban.xmas .hero3 .cta .btn-primary{background:var(--xgold);border-color:var(--xgold);color:var(--ink)}
.pban.xmas .hero3 .cta .btn-primary:hover{background:var(--xgold-hi);border-color:var(--xgold-hi);color:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
.pban.xmas .usps span{color:var(--xr-deep)}
.pban.xmas .usps .ic{color:var(--xr)}

/* every seasonal section on a light ground: red eyebrows and icons, gold
   heading rules and underlines, red buttons, a gold rule that sweeps in under
   a card on hover, the chip as a red ribbon with a gold dot */
.sec.xmas .eyebrow,.sec.xmas-head .eyebrow{color:var(--xr)}
.sec.xmas .sh2 h2::after,.sec.xmas-head .sh2 h2::after{background:var(--xgold)}
.sec.xmas h2,.sec.xmas-head h2{--u-color:var(--xgold)}
.sec.xmas .btn-primary{background:var(--xr);border-color:var(--xr);color:#fff}
.sec.xmas .btn-primary:hover{background:var(--xr-deep);border-color:var(--xr-deep);color:#fff;box-shadow:0 8px 20px -8px rgba(110,26,36,.5)}
.sec.xmas .btn-secondary{background:#fff;color:var(--xr);border-color:var(--xr)}
.sec.xmas .btn-secondary:hover{background:var(--xblush);color:var(--xr-deep)}
.sec.xmas .ico{color:var(--xr)}
.sec.xmas .card .img.noimg .ic{color:var(--xr)}
.sec.xmas a.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--xgold);z-index:2;transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease)}
.sec.xmas a.card:hover::after{transform:scaleX(1)}
.sec.xmas .pill.xmas{background:var(--xr);color:#fff;padding:7px 12px 7px 9px;gap:7px;letter-spacing:.03em}
.sec.xmas .pill.xmas::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--xgold);flex:none}
.card.hub3 .img .chips .pill{box-shadow:0 2px 8px -2px rgba(0,0,0,.3)}
.sec.xmas .leaf-list .ic{color:var(--xr)}
.sec.xmas .faq summary .ic{color:var(--xr)}
.sec.xmas .faq summary .plus{background:var(--xblush)}
.sec.xmas .faq summary .plus::before,.sec.xmas .faq summary .plus::after{background:var(--xr)}
.sec.xmas.snowy{background:var(--xsnow);border-top:0}
.sec.xmas.snowy+.sec{border-top:0}
.sec.xmas .snow{position:absolute;inset:0;pointer-events:none}

/* the dark wintry ground (the shop, Find us): deep green, a fine white snow
   over the whole band, white headings, gold eyebrow and rule, pale lead,
   white cards as the kit draws them */
.sec.xmas.dark{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--xg) 0%,var(--xg-deep) 100%);color:#fff;border-top:0}
.sec.xmas.dark+.sec{border-top:0}
.sec.xmas.dark>.wrap{position:relative;z-index:1}
.sec.xmas.dark .snow{background-image:radial-gradient(rgba(255,255,255,.14) 1.1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.09) .8px,transparent 1.2px);background-size:38px 38px,23px 23px;background-position:0 0,11px 15px}
.sec.xmas.dark .eyebrow{color:var(--xgold)}
.sec.xmas.dark h2{color:#fff}
.sec.xmas.dark .sh2 .lead{color:var(--xpale)}
.sec.xmas.dark .sh2 h2::after{background:var(--xgold)}
.sec.xmas.dark .hours,.sec.xmas.dark .reasons>div{color:var(--ink)}   /* white cards on the dark ground keep ink type */
.sec.xmas.dark .hours tr.today th,.sec.xmas.dark .hours tr.today td{color:var(--xr)}
.sec.xmas.dark .hours .note{font-size:16px;color:var(--muted);margin:12px 0 0;max-width:40ch}
.sec.xmas.dark .reasons .ico{background:var(--xblush);color:var(--xr)}

/* the Lemax band: the homepage's Christmas ground (red to deep red, white
   snow on the right), white type, gold eyebrow, icons and underline, a gold
   directions button, and a photo slider on the cafe slider's mechanism.
   Its class is `xmas-band`, not `band`: the kit's own .band>.wrap (min-height
   600px, flex-end, 48px padding) once matched it and pushed the split 126px
   down (Matt, round 18: "a really large block of red before the text") */
.sec.xmas.xmas-band{position:relative;background:linear-gradient(180deg,var(--xr) 0%,var(--xr-deep) 100%);color:#fff;isolation:isolate;border-top:0}
.sec.xmas.xmas-band+.sec{border-top:0}
.sec.xmas.xmas-band>.wrap{position:relative;z-index:1}
.sec.xmas.xmas-band .snow{background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.6px),radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:46px 46px,29px 29px;background-position:0 0,13px 19px;mask-image:linear-gradient(to right,transparent 48%,#000 82%);-webkit-mask-image:linear-gradient(to right,transparent 48%,#000 82%)}
.sec.xmas.xmas-band .eyebrow{color:var(--xgold)}
.sec.xmas.xmas-band h2{color:#fff}
.sec.xmas.xmas-band .text p{color:var(--xrose)}
.sec.xmas.xmas-band .leaf-list li{color:#fff}
.sec.xmas.xmas-band .leaf-list .ic{color:var(--xgold)}
.sec.xmas.xmas-band .btn-primary{background:var(--xgold);border-color:var(--xgold);color:var(--ink)}
.sec.xmas.xmas-band .btn-primary:hover{background:var(--xgold-hi);border-color:var(--xgold-hi);color:var(--ink);box-shadow:none}
.sec.xmas.xmas-band .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.sec.xmas.xmas-band .btn-secondary:hover{background:#fff;color:var(--xr-deep);border-color:#fff}
.sec.xmas.xmas-band .frame{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);background:#5a1620}
.sec.xmas.xmas-band .frame img.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s var(--ease)}
.sec.xmas.xmas-band .frame img.slide.on{opacity:1}
.sec.xmas.xmas-band .frame .dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:7px;z-index:2}
.sec.xmas.xmas-band .frame .dots button{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer;transition:width .45s var(--ease),background .45s var(--ease)}
.sec.xmas.xmas-band .frame .dots button.on{width:26px;background:#fff}

@media (prefers-reduced-motion:reduce){
  .sec.xmas.xmas-band .frame img.slide{transition:none}
}
@media (max-width:760px){
  .pban.xmas .hero3 .kick{font-size:19px}
  .season-xmas .ctas .c-tel{border-color:rgba(255,255,255,.85)}   /* the kit's round call button has its own green border on the phone (v2.9) */
}
@media (max-width:380px){
  .pban.xmas .hero3 .crumbs{font-size:14px;gap:6px;padding:5px 10px}   /* one line on a 360 phone, so the backing hugs the text and is not a bar */
}


/* ---- the menu block (cafe page, template v2.10, 5 Nov 2026): the printed menu as text in the month block's slot ----
   On the kit's tint. The serving times sit once at the top in the kit's own .hours card (its compact table: label
   hugs value, nowrap, no full-width dot leaders), the dietary facts once beside it as a leaf-list card, then the nine
   groups as white cards in three columns (two at tablet, one on the phone). A dish row is a flex row: the name in
   bold, the price right after it, an optional kit pill ("Vegan option"); the description under it at 16px muted.
   Class `fare` and its children were grepped against all three kit files before use. ---- */
.fare .intro{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:var(--s5);align-items:start;margin-bottom:var(--s6)}
.fare .hours{max-width:none}
.fare .hours h3,.fare .diet h3{font-size:20px;margin-bottom:var(--s2)}
.fare .hours .nb{font-size:16px;color:var(--muted);margin:14px 0 0;max-width:none}
.fare .diet{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:28px 28px 24px}
.fare .diet .leaf-list{margin-top:var(--s3)}
.fare .groups{columns:3;column-gap:var(--s4)}   /* balanced columns, read down then across like the printed menu; a grid left a card-sized hole under the short Paninis group */
.fare .group{break-inside:avoid;margin:0 0 var(--s4);background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:24px 24px 20px}
.fare .group h3{font-size:20px;margin:0}
.fare .group .when{font-size:16px;color:var(--muted);margin:6px 0 0;max-width:none;line-height:1.45}
.fare .dish{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:17px;line-height:1.35;margin-top:14px}
.fare .dish .name{font-weight:700}
.fare .dish .price{color:var(--ink);white-space:nowrap}
.fare .dish .pill{align-self:center;padding:4px 9px;font-size:12px}
.fare .desc{font-size:16px;color:var(--muted);margin:3px 0 0;max-width:none;line-height:1.45}
.fare .desc+.desc{margin-top:10px}

/* eight tiles fill two rows of four at desktop widths (the cafe's menu at a glance); the phone keeps the kit's two-up grid */
@media (min-width:761px){
  .cards.five.rows.four{grid-template-columns:repeat(4,1fr)}
}

/* the FHRS badge on the why mosaic's tall photo, as the homepage carries it on the cafe slider (same badge, 150px, same shadow) */
.why .mosaic .fsa{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;width:150px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}

@media (max-width:980px){
  .fare .groups{columns:2}
}
@media (max-width:760px){
  .fare .intro{grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s5)}
  .fare .hours,.fare .diet{padding:22px 20px 18px}
  .fare .intro>*{min-width:0}
  .fare .hours td{white-space:normal}   /* the kit's nowrap value cells made the single column 382px wide on a 390 phone; the labels stay on one line */
  .fare .groups{columns:1}
  .fare .group{margin-bottom:var(--s3)}
  .fare .group{padding:20px 18px 16px}
  .why .mosaic .fsa{width:120px;bottom:12px}
}


/* ---- v2.11 (5 Nov 2026, Matt's cafe verdict) ---- */
/* the hygiene badge in the hero (a page's `hero_badge`): under the pills, left-aligned with them, the draft FHRS badge
   on a white pill-shaped backing with the pills' own lift so it reads on the photo. The homepage's .hero3 rules are
   untouched: the lock simply starts higher and the 64px bottom padding stays. */
.pban .hero3 .hbadge{display:flex;margin-top:16px}   /* v2.13 (Matt: equal spacing): the same 16px the pills have under the buttons, measured on the rendered page */
/* v2.12 (Matt on v2.11: 'way too small ... the white background around it looks quite tacky'): no backing, the badge stands on
   the photo at a readable size (200px wide at desktop = the svg's 'food hygiene rating' header at 13.3px; 168px on the phone =
   11.2px), lifted by a drop shadow on the image itself, no box */
.pban .hero3 .hbadge img{display:block;width:180px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)) drop-shadow(0 1px 3px rgba(0,0,0,.4))}   /* v2.13: 180px (header text 12.0px) so the 16px gap keeps the hero at 700px */

/* the dietary filter on the menu block: kit-style pill toggles (white, hairline border; pressed = the kit green, as one
   small pill of green per row), a muted count line, a note line in ink; the marker pills in the dish rows rise to 14px
   bold (the eyebrow size) now that they carry meaning. No script: the filter row and the count are hidden. */
.fare .filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.fare .filters button{min-height:44px;padding:0 18px;border-radius:var(--pill);border:2px solid var(--hair);background:#fff;color:var(--ink);font:700 16px/1 var(--font);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.fare .filters button:hover{border-color:var(--green);color:var(--green-dark)}
.fare .filters button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.fare .filters button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.fare .fcount{font-size:16px;color:var(--muted);margin:0 0 4px;max-width:none}
.fare .fnote{font-size:17px;color:var(--ink);margin:0 0 4px;max-width:none}
.fare .fcount+.groups,.fare .fnote+.groups{margin-top:var(--s4)}
.fare .dish .pill{font-size:14px;padding:5px 10px}
.fare .entry[hidden],.fare .group[hidden]{display:none}
html.no-js .fare .filters,html.no-js .fare .fcount{display:none}
@media (max-width:760px){
  .pban .hero3 .hbadge img{width:168px}   /* v2.12: the svg's header text at 11.2px on the phone; this block sits after the desktop rule so it wins */
}


/* ---- v2.16 (6 Nov 2026, the About page) ---- */
/* our story: the About page's mid slot. One paragraph in their voice on the left (the kit's .split), a compact dated list
   on a white card on the right: the year in bold beside one line, a hairline between entries, no rail, no dots, no card per
   year (no editorial timeline). Classes `story` and `yrs` were grepped against all three kit files before use. */
.story .yrs{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:8px 28px}
.story .yrs>div{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hair);font-size:17px;line-height:1.45}
.story .yrs>div:first-child{border-top:0}
.story .yrs b{font-size:22px;color:var(--green-dark);letter-spacing:-.01em}
.story .yrs span{color:var(--ink)}
/* the press line under the why block's facts (a page's `why_press`): the homepage's .rate .seen rules, same label, the
   logos with the card radius and shadow; 56px high and a 16px gap so all three sit on one line in the split's 540px text
   column (at the homepage's 60px and 22px the third logo wrapped to a second row) */
.why .seen{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:var(--s5)}
.why .seen span{font:700 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.why .seen .logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.why .seen img{height:56px;width:auto;border-radius:8px;box-shadow:var(--shadow-card)}
@media (max-width:760px){
  .story .yrs{padding:4px 20px}
  .story .yrs>div{grid-template-columns:60px 1fr;gap:12px;padding:14px 0;font-size:16px}
  .story .yrs b{font-size:20px}
  .why .seen .logos{gap:12px}
  .why .seen img{height:40px}
}


/* ---- v2.17 (6 Nov 2026, the Services page) ---- */
/* six tiles fill two rows of three at desktop widths (`cols=3` on the dict); the phone keeps the kit's two-up grid. `three-up` was
   grepped against all three kit files first; the kit's own `.cards.three` carries phone rules of its own, so it is not reused here */
@media (min-width:761px){
  .cards.five.rows.three-up{grid-template-columns:repeat(3,1fr)}
}


/* ---- v2.18 (6 Nov 2026, Matt's Services verdict: "a collection of those reviews ... the platform logo next to the review") ---- */
/* the review card: one real review on a white card with the kit's shadow and no border. Top row = the platform's mark (the
   homepage's own Google "G" at the kit's 22px, or the sheet's "f" in Facebook blue) and five gold stars (Google) or the word
   "Recommends" (a Facebook recommendation has no stars); the words at 18px; the name and month at 16px. No quote glyph, no
   avatar, no initials in a circle. `rev`, `say`, `who` (scoped), `mark`, `recs`, `fbm`, `wall`, `allrev` grepped first. */
.rev{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:22px 24px 20px;break-inside:avoid;margin:0}
.rev .mark{display:flex;align-items:center;gap:10px;min-height:24px}
.rev .mark .glogo{gap:0}
.rev .mark .gstars{font-size:17px;color:var(--gold);gap:1px}
.rev .mark .recs{font:700 16px/1 var(--font);color:var(--green-dark)}
.rev .fbm{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#1877F2;color:#fff;align-items:center;justify-content:center}
.rev .fbm .ic{width:16px;height:16px;fill:currentColor;stroke:none}
.rev .say{font-size:18px;line-height:1.5;color:var(--ink);margin:12px 0 10px;max-width:none}
.rev .who{font-size:16px;color:var(--muted);margin:0;max-width:none}
/* the wall: four to six cards in two CSS columns at desktop (unequal heights stagger, which is the point), one column on the
   phone; under it the link to all the Google reviews with the same mark. The why block's split gives the wall the wider column. */
.why.reviews .split{align-items:start}
@media (min-width:981px){
  .why.reviews .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}   /* the kit stacks .split at 980 and under; this rule must not reach the phone */
}
.why.reviews .leaf-list{margin-top:var(--s4)}
.wall{columns:2;column-gap:var(--s4)}
.wall .rev{margin-bottom:var(--s4);display:inline-block;width:100%}
.allrev{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-weight:700;color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.allrev:hover{color:var(--green)}
/* the service sections: the Services page's mid slot, six in turn. Shorter sections than the kit's 72px blocks (48px), the
   heading a step down from the block h2, their paragraphs at the body size, the steps as a numbered list in the kit green, the
   cost and who-to-ask lines in the kit's leaf-list; on the right the photo (16:10, the card radius and shadow) and the reviews
   that mention the service. Each section is a jump target, so it clears the sticky header. */
.sec.service{padding:var(--s7) 0;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.service .split{align-items:stretch;gap:var(--s7)}   /* v2.19: the photo column stretches to the text column's height */
.service .split.solo{grid-template-columns:minmax(0,1fr)}
.service .text h2{font-size:36px;margin-bottom:var(--s3)}
.service .text p{font-size:18px;line-height:1.5;margin:0 0 12px;max-width:60ch}
.service .howlist{list-style:none;counter-reset:s;margin:var(--s3) 0 0;padding:0;display:grid;gap:10px;max-width:60ch}
.service .howlist li{position:relative;padding-left:42px;font-size:17px;line-height:1.45}
.service .howlist li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;background:var(--lime-tint);color:var(--green-dark);font:700 15px/30px var(--font);text-align:center}
.service .leaf-list{margin-top:var(--s4)}
.service .leaf-list a,.service .text p a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* v2.19: the photo fills the text column's height (object-fit cover), never shorter than 240px nor taller than 420px, so no column is
   left blank; where a section has no photo its steps sit on a white card in that column; the section's review is one full-width bar
   under both: the mark and stars left, the words in the middle, the name and month right; white on the tint sections, the tint on the
   white ones; stacked on the phone. The tile's jump line is the hub tiles' own .go with the chevron turned down; hover nudges it 2px. */
.service .visual{display:flex;flex-direction:column}
.service .svcimg{flex:1;min-height:240px;max-height:420px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);background:#eef0ea}
.service .svcimg img{width:100%;height:100%;object-fit:cover;display:block}
.service .howcard{flex:1;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:22px 24px}
.service .howcard .howlist{margin:0;max-width:none}
.service .rev.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px var(--s5);align-items:center;margin-top:var(--s5);padding:20px 24px}
.service .rev.bar .mark{min-height:0}
.service .rev.bar .say{margin:0}
.service .rev.bar .who{text-align:right;white-space:nowrap}
.service:not(.tint) .rev.bar{background:var(--lime-tint)}
.card .go.down{display:inline;line-height:1.4}   /* inline, not the kit's inline-flex, so on the two-up phone grid the line wraps as words and the chevron stays on the last word */
.card .go.down svg{vertical-align:-3px;margin-left:5px;transform:rotate(90deg);transition:transform .25s var(--ease)}
.card:hover .go.down svg{transform:rotate(90deg) translateX(2px)}
@media (max-width:760px){
  .rev{padding:18px 18px 16px}
  .wall{columns:1}
  .sec.service{padding:var(--s6) 0}
  .service .split{gap:var(--s5)}
  .service .text h2{font-size:28px}
  .service .text p{font-size:17px}
  .service .svcimg{min-height:0;max-height:none;aspect-ratio:16/10;flex:none}   /* the phone stacks, so the photo takes its own shape again */
  .service .howcard{padding:18px 18px 16px}
  .service .rev.bar{grid-template-columns:1fr;gap:10px;padding:18px 18px 16px;margin-top:var(--s4)}
  .service .rev.bar .who{text-align:left;white-space:normal}
}

/* ---- v2.20 (6 Nov 2026, the Contact page) ---- */
/* the reach tiles: the hub tile with its action line as the detail (a phone number, the email address, "Get directions"); `act` is
   the kit's .go with the chevron still pointing right, inline so a number wraps as words on the two-up phone grid, and an address
   may break anywhere rather than overflow the card. The Facebook mark in a tile is the sheet's filled glyph, so it is filled here. */
.card .go.act{display:inline;line-height:1.4;overflow-wrap:anywhere}
.card .go.act svg{vertical-align:-3px;margin-left:5px;transition:transform .25s var(--ease)}
.card:hover .go.act svg{transform:translateX(2px)}
.reach use[href="#i-fb"]{fill:currentColor;stroke:none}
/* getting here: one paragraph in the live contact page's words directly under Find us, a short tint band (the service sections' 48px) */
.sec.route{padding:var(--s7) 0}
.route p{font-size:18px;line-height:1.6;max-width:72ch;margin:0}
/* the message block: a plain form in the kit's style on a white card (labels above the fields at 18px, 18px fields with the kit's
   hairline border and focus ring, the primary button) beside a "who to ask" card in the kit's leaf-list. The two-column split is
   desktop-only, inside the kit's own breakpoint (the kit stacks .split at 1000px and under). On the preview the form posts nowhere. */
@media (min-width:1001px){
  .msg .split{grid-template-columns:1.15fr .85fr;gap:var(--s7)}
}
.msg .split{align-items:start}
.msg .form-card,.msg .who-card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card)}
.msg .form-card{padding:28px 28px 26px}
.msg .who-card{padding:26px 28px 24px}
.msg .field{display:block;margin:0 0 16px}
.msg .field>span{display:block;font:700 18px/1.3 var(--font);color:var(--ink);margin-bottom:8px}
.msg .field>span small{font-weight:400;font-size:16px;color:var(--muted)}
.msg input,.msg select,.msg textarea{display:block;width:100%;border:1.5px solid var(--hair);border-radius:var(--r-sm);padding:12px 14px;font:400 18px/1.4 var(--font);color:var(--ink);background:#fff}
.msg select{appearance:none;-webkit-appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351731C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px 18px}
.msg textarea{min-height:150px;resize:vertical}
.msg input:focus,.msg select:focus,.msg textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--lime-tint)}
.msg .row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.msg .send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
.msg .btn[disabled]{opacity:.6;cursor:not-allowed}
.msg .preview{font-size:16px;color:var(--muted);margin:0;max-width:none}
.msg .who-card h3{font-size:22px;margin-bottom:4px}
.msg .who-card>p{font-size:16px;color:var(--muted);margin:0;max-width:none}
.msg .who-card .leaf-list{margin-top:var(--s4);gap:12px}
.msg .who-card .leaf-list li{font-size:17px;line-height:1.45}
.msg .who-card .leaf-list a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.msg .who-card .leaf-list a[href^="tel:"]{white-space:nowrap}   /* a phone number never breaks across lines */
.msg .who-card .nb{font-size:16px;color:var(--muted);margin:var(--s4) 0 0;padding-top:14px;border-top:1px solid var(--hair)}
@media (max-width:760px){
  .msg .row{grid-template-columns:1fr}
  .msg .form-card,.msg .who-card{padding:20px 18px 18px}
  .sec.route{padding:var(--s6) 0}
}