/* ---------- Servery — Catering kitchen & platters 247 (store) ----------
   THE STRUCTURAL MOVE: four occasion tiles are WELDED GAPLESS to the floor of
   the full-viewport slider. The strip gives up the container, its gutters, its
   tile borders and every scrap of its padding, so the four portraits touch each
   other and touch the bottom edge of the hero with no seam and no gap at all —
   the band reads as one continuous strip rather than four cards. Everything
   after that alternates edge-to-edge against contained: a contained airy split,
   then ONE deep-charcoal full-bleed band (the photograph multiplied down into
   the charcoal, the only dark surface above the foot), then the catalogue as a
   deliberately GAPPED 3x2 wall of square flat-lays on clean white — the gapped
   grid answering the gapless strip two screens above it — then a narrow centred
   paragraph, then the dark contact band. The strip is reached by class and never
   by position, and the two prose blocks already land on different classes
   (.sc-about-split vs .sc-richtext), so no positional selector is needed
   anywhere. Brass is spent on exactly three things: the slabs, the hairline over
   the closing paragraph, and the rand. */
body.t-servery {
  background: #f3eee1;
  color: #26231d;
  --sv-brass: #7f6226;
  --sv-brass-hi: #654d1a;
  --sv-btn-ink: #fdfaf2;
  --sv-char: #211f19;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bg-flat: #f3eee1;
  --surface: #ffffff;
  --surface-2: #ebe4d3;
  --line: #e0d8c5;
  --line-strong: #cdc2aa;
  --heading: #1a1814;
  --text: #26231d;
  --muted: #6d6656;
  --header-bg: #f3eee1;
  --radius: 0;
  --shadow: none;
}

/* the bar dissolves into the oat ground — no panel, no blur, no rule under it */
body.t-servery .sf-header, body.t-servery .sf-head,
body.t-servery .sf-footer, body.t-servery .sf-foot, body.t-servery .sf-cats {
  background: #f3eee1; border-color: #f3eee1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* one display face carries the wordmark, the stage line and every section title */
body.t-servery .sf-name, body.t-servery .sc-hero h1,
body.t-servery .sc-h2, body.t-servery .sc-banner h2 {
  font-family: var(--sf-serif); font-weight: 500; letter-spacing: -0.018em; text-transform: none;
}
body.t-servery .sf-name { font-size: 20px; letter-spacing: 0.01em; }
body.t-servery .sc-h2 { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.1; margin-bottom: 30px; }

/* flat brass slabs — no border, no inset shadow, bone lettering */
body.t-servery .btn.brand { background: var(--sv-brass); border: 0; box-shadow: none; color: var(--sv-btn-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 34px; }
body.t-servery .btn.brand:hover { background: var(--sv-brass-hi); color: var(--sv-btn-ink); opacity: 1; }

/* the slider owns the whole first screen; nothing peeks under it */
body.t-servery .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-servery .sc-hero h1 { font-size: clamp(31px, 5.4vw, 64px); line-height: 1.08; }

/* THE WELD — four portraits edge to edge, touching each other and touching the
   floor of the hero: no container, no gutters, no borders, no padding at all */
body.t-servery .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-servery .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-servery .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; }
body.t-servery .sc-strip-card { position: relative; }
body.t-servery .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 44px 22px 22px; background: linear-gradient(rgba(20, 18, 14, 0), rgba(20, 18, 14, 0.78)); color: #f6f1e4; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

/* the page snaps back into a contained, airy column: picture one half, a loud
   serif line and one small quiet paragraph the other */
body.t-servery .sc-about-split { padding: 112px 20px 100px; gap: 64px; }
body.t-servery .sc-about-copy .sc-h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; margin-bottom: 24px; }
body.t-servery .sc-about-copy p { font-size: 14.5px; line-height: 2; max-width: 40ch; }

/* THE ONE DARK SURFACE above the foot — the photograph is multiplied down into
   charcoal and the band is welded to the blocks either side of it */
body.t-servery .sc-banner { background-color: var(--sv-char); background-blend-mode: multiply; margin: 0 calc(50% - 50vw); padding: 132px 28px 136px; }
body.t-servery .sc-banner h2 { font-size: clamp(25px, 3.4vw, 42px); line-height: 1.14; text-shadow: none; }
body.t-servery .sc-banner p { font-size: 15px; line-height: 1.9; text-shadow: none; }

/* the catalogue as a GAPPED 3x2 gallery — flat-lays on clean white so the oat
   ground frames each one instead of a card border doing it */
body.t-servery .sc-products { padding: 104px 20px 96px; }
body.t-servery .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; padding: 0; }
body.t-servery .product-card, body.t-servery .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-servery .product-card .ph { background: #ffffff; border: 1px solid var(--line); }
body.t-servery .product-card .meta { padding: 16px 2px 0; }
body.t-servery .product-card .p { color: var(--sv-brass); font-weight: 700; font-size: 15px; }

/* the late centred paragraph — narrow measure, white space either side, and the
   only brass hairline on the page sitting over it */
body.t-servery .sc-richtext { max-width: 560px; padding: 46px 20px 118px; border-top: 1px solid var(--sv-brass); }

/* the foot band: charcoal edge to edge, the form running as three quiet columns
   so the block reads wide and multi-column rather than as a stacked list */
body.t-servery .sc-contact-band { background: var(--sv-char); color: #ebe4d4; padding: 96px 0 104px; }
body.t-servery .sc-contact-band-inner { max-width: 1040px; text-align: left; }
body.t-servery .sc-contact-band .sc-h2 { color: #f7f2e6; text-align: left; margin-bottom: 14px; }
body.t-servery .sc-contact-band .sc-contact-sub { color: #a89f8c; max-width: 62ch; margin-bottom: 34px; }
body.t-servery .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 30px; max-width: none; }
body.t-servery .sc-contact-band .sc-field input, body.t-servery .sc-contact-band .sc-field textarea { background: #2c2921; border: 1px solid #3b362b; color: #f2ecdd; }

@media (max-width: 900px) {
  body.t-servery .sc-strip-row, body.t-servery .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-servery .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
}

/* NIGHT — the oat tablecloth drops to a warm near-black and the brass lifts to
   a lit chafing-dish colour so the slabs and the rand stay the one coloured
   thing on the page; the button ink flips to dark against it. The charcoal band
   and the contact band go deeper still, so the alternation survives the flip
   instead of collapsing into one flat dark page. */
html[data-theme="dark"] body.t-servery {
  background: #161410;
  color: #e9e2d3;
  --sv-brass: #c9a457;
  --sv-brass-hi: #dcbb74;
  --sv-btn-ink: #17150f;
  --sv-char: #100e0b;
  --bg-flat: #161410;
  --surface: #1f1c16;
  --surface-2: #242019;
  --line: #302b22;
  --line-strong: #3d382e;
  --heading: #f8f3e6;
  --text: #e9e2d3;
  --muted: #98907e;
  --header-bg: #161410;
}
html[data-theme="dark"] body.t-servery .sf-header, html[data-theme="dark"] body.t-servery .sf-head,
html[data-theme="dark"] body.t-servery .sf-footer, html[data-theme="dark"] body.t-servery .sf-foot,
html[data-theme="dark"] body.t-servery .sf-cats { background: #161410; border-color: #161410; }
html[data-theme="dark"] body.t-servery .product-card .ph { background: #1f1c16; border-color: #302b22; }
html[data-theme="dark"] body.t-servery .sc-contact-band { background: #0e0d09; }
html[data-theme="dark"] body.t-servery .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-servery .sc-contact-band .sc-field textarea { background: #1c1913; border-color: #2b2720; }