/* =====================================================================
   LIGNUM TRADE — catalogue components
   ---------------------------------------------------------------------
   Loaded after styles.css and theme.css. Those two are unchanged from the
   Lignum storefront they came from, so the type, colour, spacing and
   controls are identical; everything here is a new component the
   catalogue needs and the storefront did not have: the to-scale item
   drawings, the size grids, the spec list and the quick-contact panel.
   ===================================================================== */

/* ---------- Brand ----------
   The logo is inline SVG filled with currentColor, so one file serves the
   white header, the dark footer and the dark admin sidebar. Only the height
   is set; the mark keeps its own 2.72:1 proportions. */
.brand--logo { display: inline-flex; align-items: center; }
.brand--logo svg { height: 50px; width: auto; display: block; }
/* theme.css tints the wordmark it was written for; the logo is artwork and
   wants the full-strength ink on light and plain white on dark. */
body.site .brand--logo { color: var(--ink); }
body.site .footer .brand--logo { color: #fff; }
body.site .header .brand--logo svg { height: clamp(36px, 5.3vw, 55px); }
/* Set by width, not height, so the mark lines up with the heading beneath it
   — 214px is how wide "Our other products" sets. The other two languages run
   a little longer; the logo stays put rather than resizing per locale. */
.footer .brand--logo { margin-bottom: 14px; max-width: 100%; }
.footer .brand--logo svg { width: 214px; height: auto; max-width: 100%; }
.admin-side .brand--logo svg { height: 36px; }
@media (max-width: 600px) {
  body.site .header .brand--logo svg { height: 31px; }
}

/* ---------- Search ----------
   The shared stylesheet opens the field on hover, which a touch screen never
   reports — the first tap just submitted an empty form and landed on /search.
   The script in the footer opens it by class instead, so the same rule serves
   mouse, keyboard and finger. */
.header__search.is-open input {
  width: 210px; padding: 9px 16px 9px 14px; border-width: 1px; opacity: 1;
  pointer-events: auto;
}
@media (max-width: 860px) {
  .header__search.is-open input { width: 150px; }
}
/* At phone widths the field opens leftward across the whole row, so it is
   measured off the screen instead of being given a width the row cannot hold.
   Its right edge is pinned 154px in — the language switcher (96) plus the gap
   (2) plus the 38px the field is offset from the button — and the left edge
   stops at the 18px gutter: 154 + 18 = 172. min() keeps it from growing past
   the desktop width on the widest phones. */
@media (max-width: 480px) {
  .header__search.is-open input { width: min(210px, calc(100vw - 172px)); }
}

/* ---------- Header additions ---------- */
.topbar__contact { margin-left: auto; font-weight: var(--w-text); }
.topbar .container { justify-content: flex-start; }

/* The nav is a row of text links again — this site has four destinations,
   not a catalogue tree, so hiding them behind one button would cost a
   click for nothing. */
.nav--ps { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav--ps > a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: .95rem; }
.catalog__btn--text {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; padding: 10px 12px; height: auto;
  font-size: .95rem; border: none; background: transparent; color: inherit;
}
.catalog__btn--text .catalog__chev { display: inline; font-size: .7em; }
/* The wrapper is a block by default, so the inline-flex button leaves a line
   box a few pixels taller than itself and the button sits low against the
   controls on the other side of the row. */
.catalog { display: flex; align-items: center; }
/* Wide screens: the word, no bars, and the two links live in the row. */
.catalog__bars, .catalog__srmenu, .catalog__mobile { display: none; }
body.site .header .catalog__btn--text { width: auto; border: none; }
body.site .header .catalog__btn--text:hover,
body.site .header .catalog__btn--text.is-open { background: var(--bg-soft); color: var(--primary); }

@media (max-width: 900px) {
  .nav--ps > a, .catalog__btn--text { padding: 8px 8px; font-size: .88rem; }
}
@media (max-width: 700px) {
  /* Vertical padding only — the shorthand's "0" was wiping out the
     container's side gutter and pinning the logo to the screen edge. */
  body.site .header__row { height: auto; padding: 8px var(--gutter); gap: 6px; }

  /* The whole menu collapses into one button beside the logo: the bars
     replace the word, and About us and Contacts move inside the dropdown. */
  .nav--ps { order: initial; width: auto; margin-left: 2px; flex: none; }
  .nav--ps > a { display: none; }
  .catalog__word, .catalog__btn--text .catalog__chev { display: none; }
  .catalog__bars { display: grid; }
  .catalog__srmenu { display: block; }
  .catalog__mobile { display: block; }
  /* Same specificity as the body.site rule that sets width:auto, or the
     button collapses to the width of the three bars — a 20px tap target.
     36px matches the search button beside it, so the two read as a pair. */
  body.site .header .catalog__btn--text {
    width: 36px; height: 36px; justify-content: center; padding: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  .catalog__menu { min-width: 220px; }

  /* A little more air at the edges than the 14px the shared stylesheet drops
     to on small screens — the logo and the language switcher sit right on the
     two margins and were reading as flush against the glass. */
  body.site { --gutter: 18px; }
  /* On a phone the strip has room for one thing, and the address is the one
     worth having. The claims are still there on wider screens. */
  .topbar .container > span { display: none; }
  .topbar .container { justify-content: center; }
  .topbar__contact { margin-left: 0; }

  /* A telephone number is something to press on a phone, and the line box
     around it is 16px tall — with two numbers stacked under one name, the
     wrong one is as easy to hit as the right one. inline-block so the padding
     grows the target and separates the lines; the text itself does not move. */
  a[href^="tel:"] { display: inline-block; padding: 6px 0; }
}

/* ---------- Page head ---------- */
.page-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.range-count { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.section-rule {
  margin: 48px 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Two-column page with the enquiry rail ---------- */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.two-col    { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
/* minmax(0, 1fr), not 1fr: a bare 1fr track is floored at the min-content
   width of what it holds, and the partner marquee on the print page is a
   max-content strip of logos. That floor made the column wider than the phone,
   which widened the layout viewport and pushed every other block off-screen
   with it — the marquee clips itself, but only once the track lets it. */
@media (max-width: 1000px) {
  .with-aside, .two-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Home ---------- */
.home__lead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.home__intro { background: var(--panel, #fff); border-radius: var(--radius); }
.home__intro p:not(.eyebrow) { color: var(--muted); max-width: 46ch; }
@media (max-width: 900px) { .home__lead { grid-template-columns: 1fr; } }

.range-grid { display: grid; gap: 18px; }
.range-grid--lead { grid-template-columns: 1fr; }
.range-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.range-card { padding: 0; overflow: hidden; align-items: stretch; }
.range-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow); }
.range-card__photo { min-width: 0; overflow: hidden; }
.range-card__photo img {
  width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.range-card:hover .range-card__photo img { transform: scale(1.04); }
.range-card__body { padding: 22px 24px; align-self: center; }
.range-card__body h2 { font-size: 1.35rem; margin-bottom: 6px; }
.range-card__body p { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 560px) { .range-card { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.fact h3 { font-size: 1.25rem; }
.fact p { color: var(--muted); font-size: .95rem; }
@media (max-width: 800px) { .facts { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: 6px; margin-top: 14px; font-size: .95rem; }

/* ---------- Banner ---------- */
.banner {
  height: clamp(120px, 17vw, 240px);
  background: url('/img/home-banner.jpg') center 55% / cover no-repeat;
}

/* ---------- Item pictures ----------
   Photographs cut out of the design document. Each one is laid out inside a
   shared 550 mm frame — the longest item in the catalogue — so the grid is a
   size chart: the picture's width IS the item's length. The hairline under it
   is the measurement rule. */
.art { width: 100%; height: auto; display: block; }
.art--photo { display: flex; align-items: flex-end; min-height: 54px; }
.art__scale { flex: none; }
.art__scale img { width: 100%; height: auto; display: block; }
.art__scale::after {
  content: ""; display: block; height: 1px; margin-top: 7px;
  background: var(--line);
}
.art--full { min-height: 0; }
.art--full .art__scale::after { display: none; }

.item-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.item-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.item-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow); }
.item-card__art { min-height: 0; }
.item-card__body { display: flex; flex-direction: column; gap: 2px; }
.item-card__name { font-size: 1rem; }
.item-card__dims { font-size: .85rem; color: var(--muted); letter-spacing: .01em; }

/* ---------- Range header shot ---------- */
.range-hero { margin: 8px 0 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.range-hero img { width: 100%; height: clamp(200px, 26vw, 340px); object-fit: cover; display: block; }
/* The stirrer family shot is a full-height size chart photographed from the
   front — cropping it to a band would cut the sticks in half, so it keeps its
   own proportions and sits centred instead. */
.range-hero--paint-stirrers { background: #fff; }
.range-hero--paint-stirrers img {
  width: auto; max-width: 100%; height: auto; max-height: 560px;
  margin: 0 auto; object-fit: contain;
}

/* ---------- Range copy ---------- */
.range-intro { max-width: 62ch; margin-bottom: 36px; }
.range-intro p { color: var(--muted); }
.range-intro__dl { margin-top: 18px; }
.range-heading { margin-bottom: 18px; }
.range-heading h2 { font-size: 1.15rem; margin-bottom: 4px; color: var(--muted) !important;
  text-transform: uppercase; letter-spacing: .1em; }
.range-heading .hint { display: block; }

.ticks { display: grid; gap: 6px; margin: 8px 0 16px; }
.ticks li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--primary); opacity: .55;
}

.range-block { margin-bottom: 52px; }
.range-block:last-child { margin-bottom: 0; }

.cta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 36px; padding: 26px 28px;
  background: var(--bg-soft); border-radius: var(--radius);
}
.cta-strip h3 { margin-bottom: 2px; }
.cta-strip p { margin: 0; color: var(--muted); font-size: .92rem; }

.others { margin-top: 48px; }
.others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.others__card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  background: #fff;
}
.others__card:hover { border-color: var(--ink); }

/* ---------- Item detail ---------- */
.item-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.item-detail__art {
  margin: 0; padding: 26px 22px 16px;
  background: var(--bg-soft); border-radius: var(--radius);
}
.item-detail__art figcaption { display: block; margin-top: 8px; }
.item-detail__spec h1 { margin-bottom: 6px; }
.item-detail__spec > p.muted { max-width: 62ch; }

.speclist { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 22px 0 0; }
.speclist dt {
  padding: 12px 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .9rem;
}
.speclist dd {
  padding: 12px 0; border-top: 1px solid var(--line); margin: 0; font-size: .95rem;
}
.speclist dd .ticks { margin: 0; }
.speclist dd .ticks li { color: inherit; }
@media (max-width: 620px) {
  .speclist { grid-template-columns: 1fr; }
  .speclist dd { border-top: none; padding-top: 0; }
}

.item-detail__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.pager {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .92rem;
}
.pager a { display: flex; flex-direction: column; gap: 2px; }
.pager__next { text-align: right; }
.pager__name { color: var(--muted); font-size: .85rem; }

/* ---------- Print page ---------- */
.print-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.print-lead__art { border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.print-lead__art img { width: 100%; height: auto; display: block; }
.print-lead__copy p { color: var(--muted); }
.print-lead__copy p b { color: var(--ink); }
@media (max-width: 900px) { .print-lead { grid-template-columns: 1fr; } }

.swatches { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 18px; }
.swatches li { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--muted); }
.swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); }

/* ---------- About / contacts ---------- */
.prose-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.prose-cols__item h2 { font-size: 1.3rem; }
.prose-cols__item p { color: var(--muted); font-size: .95rem; }

.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.office { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; }
.office h3 { font-size: 1.05rem; }
.office p { font-size: .95rem; margin-bottom: 10px; }

/* A list of people, one per row: name and role on the left, how to reach them
   on the right. No portraits. */
.team { display: block; border-top: 1px solid var(--line); }
.team__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 8px 28px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.team__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team__who b { font-size: 1.02rem; }
.team__role { color: var(--muted); }

/* Label / value pairs, so a row stays scannable without a table. */
.team__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; margin: 0; }
.team__meta dt { color: var(--muted); font-size: .82rem; }
.team__meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.team__meta p { margin: 0 0 6px; }

/* An open position: no name, so the role carries the row. */
.team__row--vacant .team__who b { color: var(--muted); font-weight: var(--w-text); }
.team__row--vacant .team__meta { display: block; }

@media (max-width: 640px) {
  .team__row { grid-template-columns: 1fr; gap: 8px; }
  .team__meta { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------- Partner marquee ----------
   "(moving widget)" in the design document. Duplicated once in the markup so
   the loop has no seam; the copy is hidden from assistive tech. */
.marquee { overflow: hidden; margin-top: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 46px; width: max-content;
  animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: none; display: grid; place-items: center; height: 52px; }
.marquee__item img { max-height: 46px; width: auto; opacity: .8; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; gap: 28px; }
}

/* ---------- Quick contact ---------- */
/* The panel is sticky, and the stirrer variant is the tallest form on the
   site — ten fields. Left at its natural size it stood taller than a laptop
   viewport, so it stuck at the top with the Submit button below the fold and
   no way to scroll to it: the page scrolled, the panel did not.
   Three things keep it reachable, in order of preference:
     1. compact fields, so it simply fits;
     2. short fields paired two to a row, which removes two more rows;
     3. a max-height backstop — on a viewport too short for even that, the
        panel scrolls internally instead of hiding its own button. */
.quick {
  position: sticky; top: 112px;
  max-height: calc(100vh - 126px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.quick__head h3 { margin-bottom: 0; font-size: 1.02rem; }
.quick__head p { font-size: .74rem; line-height: 1.35; color: var(--muted); margin-bottom: 10px; }
.quick__ok {
  background: #e9f7ef; color: #1e6b43; border: 1px solid #bfe6cf;
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: .84rem;
  margin-bottom: 12px;
}

.quick__form { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
/* Full width by default; only the fields tagged --half share a row. */
.quick__form > * { grid-column: 1 / -1; min-width: 0; }
.quick__form .field--half { grid-column: span 1; }

.quick__form .field { gap: 2px; }
.quick__form .field label {
  font-size: .75rem; line-height: 1.25; color: var(--muted); font-weight: var(--w-text);
}
.quick__form .input, .quick__form .select {
  padding: 5px 10px; font-size: .88rem; line-height: 1.4; width: 100%;
  border-radius: 6px;
}
.quick__form textarea.input { min-height: 48px; resize: vertical; }
.quick__form .hint { font-size: .7rem; line-height: 1.3; }
.quick__form .btn { margin-top: 3px; padding: 9px 18px; }

/* Available to any label the layout cannot afford to print. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Off the sticky rail the panel is in normal flow with the whole page to grow
   into, so the fields go back to a comfortable size and one per row — which is
   also where the touch targets matter. */
@media (max-width: 1000px) {
  .quick { position: static; max-height: none; overflow: visible; padding: 24px; }
  .quick__head h3 { font-size: 1.15rem; }
  .quick__head p { font-size: .82rem; margin-bottom: 16px; }
  .quick__form { grid-template-columns: 1fr; gap: 12px; }
  .quick__form .field--half { grid-column: 1 / -1; }
  .quick__form .field { gap: 5px; }
  .quick__form .field label { font-size: .85rem; }
  .quick__form .input, .quick__form .select { padding: 10px 12px; font-size: .95rem; }
  .quick__form textarea.input { min-height: 96px; }
  .quick__form .btn { padding: 13px 22px; }
}

/* ---------- Footer ---------- */
.footer__grid--ps { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; }
.footer__plain li { padding: 3px 0; font-size: .92rem; }
@media (max-width: 1100px) { .footer__grid--ps { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px)  { .footer__grid--ps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .footer__grid--ps { grid-template-columns: 1fr; } }

/* ---------- FSC trademark panel ----------
   The artwork is the promotional panel generated for certificate C178290
   through FSC's trademark portal: the Forests For All Forever mark, a rule, and
   "fsc.org | FSC(R) C178290" under it. One file, FSC's own arrangement, so this
   stylesheet only has to place and size it.

   Sized against FSC-STD-50-001, the standard that applies to a certificate
   holder:

   - Clause 8.9: the FSC logo shall be no less than 6mm high, 10mm recommended.
     The tree-and-check device runs most of the panel's upper block, so at 143px
     of panel it is about 25mm. Met several times over.
   - Clause 8.10: clear space all round shall be at least the height of the
     panel's own "FSC" initials. Measured in the shipped file they are 39 of its
     286 rows, 13.6%, which at 143px displayed is 19.5px — so nothing comes
     closer than that: 26px of padding above it, and below it the column ends.
   - NO border, background or radius of ours. The panel already has a frame,
     drawn by FSC as part of the artwork; that one is theirs and is fine. A
     second, ours, is what the guide warns makes a promotional panel resemble
     the on-product label. The rule above the block is a divider between it and
     the list of other products — it touches one side and encloses nothing.
   - The panel sits at the foot of the first footer column, below our own logo
     and the group's other sites rather than beside them, so the two identities
     stay visually separate.

   inline-flex, so the block is only as wide as the panel and the divider above
   it — which is this element's own top border — stops where the artwork stops
   rather than running to the edge of the column. */
.fsc { display: inline-flex; vertical-align: top; padding: 26px 0 4px;
  margin-top: 22px; max-width: 100%;
  border-top: 1px solid rgba(255,255,255,.12); }

/* The mark keeps the file's own proportions — 300x490, FSC's, not ours. Width
   and height are both on the tag so the footer does not reflow while it loads;
   the file is vector, so any size is sharp. Nothing here tints, frames or
   rounds it: the file is the portal's own, unchanged, and it brings its own
   white plate.

   That plate is clause 8.10's clear space, drawn by FSC. The padding here only
   keeps the footer's own text off it — 26px above, and the column ends below.
   Measured inside the plate at this size: the tree device is 20.4mm against a
   6mm floor, and the FSC initials 5.8mm. */
.fsc__logo {
  display: block; width: 120px; height: auto; max-width: 100%;
  /* The white is the PAGE under FSC's artwork, not a box around it. Outside its
     plate the file is transparent, and the plate stops short of the strapline —
     which the portal drew in black, for a white page. On the footer's brown that
     line is 1.30:1 and unreadable; on white it is 21:1, as intended.

     The radius is the plate's own, converted: 15 of 300 units, so 6px at 120px
     wide. It exists so the white does not stick out past FSC's rounded corners,
     and for no other reason. NO border, NO shadow, NO padding — the outline and
     the rule you can see are inside the artwork and belong to FSC. */
  background: #fff; border-radius: 6px;
}

/* Shown when the artwork is not on disk. The FSC initials are a trademark in
   their own right, so this is a permitted alternative and not a placeholder to
   be replaced by something of our own drawing. */
.fsc__mark { color: #fff; font-size: 1.5rem; line-height: 1; }
.fsc__initials { font-weight: 700; letter-spacing: .06em; }
@media (max-width: 460px) { .fsc { gap: 16px; } }

/* ---------- Backdrop ----------
   The inherited backdrop is decking and fence photography from the other
   site; it has nothing to do with beech sticks, so the page sits on the
   plain canvas instead. */
.bgstage { display: none; }
body.site .section[data-bg] .section__head { background: transparent; border: none; padding: 0 0 20px; }

/* ---------- Footer: other products ---------- */
.footer__sites-head {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; margin: 2px 0 8px;
}
.footer__sites { margin-bottom: 14px; }
.footer__sites li { font-size: .92rem; }
.footer__sites li a { display: block; padding: 3px 0; }