/* ---- bromponie (Bromponie — Township kitchen delivery network 329) ---------
   THE STRUCTURAL MOVE: one narrow contained column, 980px, that never widens
   and never draws a rule — and every row inside it is four cells across with
   the gap taken all the way to zero, so what separates a township from the one
   beside it is whitespace and leading and nothing else. The ribbon is broken
   exactly twice: the full-viewport three-slide hero above it, and one
   near-black band below the app split. Rider-vest orange is spent on three
   marks and no others — the hero button, the four counter numerals and the
   badge on the second plan — which is why every OTHER slab on the page (the
   band's button, both plan buttons, the send button) is set in near-black, and
   why the plan ticks and the feature glyphs are pulled off the brand variable
   and onto the ink one. Zero radius, no shadow, no gradient, no diagonal.
   The second plan is reached by :nth-child(2) on a div inside the pricing
   grid — never :nth-of-type, which matches the ELEMENT and would land on the
   hero. Nothing here orders or positions anything inside the header; only the
   bar's own ground colour and hairline are touched. */
body.t-bromponie.ws-body {
  --bg: #f7f5f1; --fg: #4a4843; --heading: #141414; --text: #4a4843; --muted: #8b877f;
  --brp-ink: #141414; --brp-orange: #ff5a1f; --brp-band: #141414; --brp-line: #e2ded4; --brp-field: #ffffff;
  --hero-a: rgba(12, 11, 10, .30); --hero-b: rgba(12, 11, 10, .64);
}
body.t-bromponie, body.t-bromponie.ws-body .ws-section:not(.ws-cta):not(.ws-shoplink) { background: var(--bg); }
body.t-bromponie .ws-section { padding: 104px 0; }

/* the bar itself goes flat bone under one hairline — its items are left alone */
body.t-bromponie .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--brp-line); }

/* THE COLUMN — 980 and never anything else, hero copy ranged to the same edge */
body.t-bromponie .ws-container, body.t-bromponie .ws-narrow, body.t-bromponie .ws-hero-inner { max-width: 980px; }

/* break 1 of 2 — the whole first screen, three stills cross-fading behind it */
body.t-bromponie .ws-hero { min-height: 100vh; }

/* every slab flat, square, borderless and near-black … */
body.t-bromponie.ws-body .btn.brand { background: var(--brp-ink); color: var(--bg); border-radius: 0; box-shadow: none; padding: 16px 32px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
/* … orange 1 of 3, and nowhere else on the page */
body.t-bromponie.ws-body .ws-hero-cta { background: var(--brp-orange); color: #141414; }

/* one type system, everything ranged left, nothing centred anywhere */
body.t-bromponie .ws-h2, body.t-bromponie .ws-story-copy h2 { text-align: left; color: var(--heading); font-size: clamp(24px, 3.2vw, 33px); font-weight: 700; letter-spacing: -.035em; }
body.t-bromponie .ws-sub { text-align: left; color: var(--muted); margin: 12px 0 46px; max-width: 56ch; }
body.t-bromponie .ws-feature p, body.t-bromponie .ws-story-copy p { color: var(--text); }

/* both quartets — four across, gap zero, no card, no border, no fill */
body.t-bromponie .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-bromponie .ws-feature { text-align: left; padding: 0 30px 0 0; }
body.t-bromponie .ws-feature-icon { color: var(--brp-ink); margin-bottom: 16px; }
body.t-bromponie .ws-feature h3 { color: var(--heading); font-size: 15px; font-weight: 700; margin: 0 0 9px; }

/* the coverage block — a map made of type: eight bare names, four across, twice */
body.t-bromponie #list .ws-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-bromponie #list .ws-list li { margin: 0; padding: 0 30px 42px 0; font-size: 15px; line-height: 1.7; color: var(--heading); }

/* orange 2 of 3 — the numeral row, gapless, a small caption under each figure */
body.t-bromponie .ws-columns .ws-cols-4 { gap: 0; }
body.t-bromponie .ws-col { padding: 0 24px 0 0; }
body.t-bromponie .ws-col-h { color: var(--brp-orange); font-size: clamp(38px, 5vw, 54px); font-weight: 700; letter-spacing: -.05em; margin: 0 0 8px; }
body.t-bromponie .ws-col p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }

/* the page's only picture inside the column, square-cornered like everything else */
body.t-bromponie #story .ws-story-grid { grid-template-columns: 6fr 5fr; gap: 64px; }
body.t-bromponie .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 5; }

/* break 2 of 2 — the band, edge to edge, the only dark ground on the page */
body.t-bromponie.ws-body .ws-cta { background: var(--brp-band); color: #cfcbc4; }
body.t-bromponie .ws-cta-inner { text-align: left; max-width: 980px; }
body.t-bromponie.ws-body .ws-cta .btn.brand { background: #f7f5f1; color: #141414; }

/* two plans, sharp and ruled instead of rounded and shadowed */
body.t-bromponie .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: none; }
body.t-bromponie .ws-plan { background: transparent; border: 1px solid var(--brp-line); border-radius: 0; text-align: left; padding: 38px 34px 34px; }
body.t-bromponie .ws-plan + .ws-plan { border-left-width: 0; }
body.t-bromponie .ws-plan li::before { content: '—'; color: var(--brp-ink); }
/* orange 3 of 3 — the badge, and that is the whole ration spent */
body.t-bromponie .ws-plan:nth-child(2) h3::after { content: 'Most kitchens'; display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 8px; background: var(--brp-orange); color: #141414; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* the close — the three lines that matter on the left, the short form on the right */
body.t-bromponie .ws-contact .ws-narrow { display: grid; grid-template-columns: 5fr 6fr; column-gap: 72px; }
body.t-bromponie .ws-contact .ws-sub { white-space: pre-line; margin: 20px 0 0; max-width: 34ch; font-size: 14.5px; line-height: 1.95; }
body.t-bromponie .ws-contact .ws-form { grid-column: 2; grid-row: 1 / -1; max-width: none; }
body.t-bromponie .ws-field input, body.t-bromponie .ws-field textarea, body.t-bromponie .ws-field select, body.t-bromponie .ws-select-trigger { background: var(--brp-field); border: 1px solid var(--brp-line); border-radius: 0; color: var(--heading); }

@media (max-width: 1000px) {
  body.t-bromponie .ws-features-grid, body.t-bromponie #list .ws-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-bromponie #story .ws-story-grid { grid-template-columns: 1fr; gap: 28px; }
  body.t-bromponie .ws-pricing-grid { grid-template-columns: 1fr; }
  body.t-bromponie .ws-plan + .ws-plan { border-left-width: 1px; border-top-width: 0; }
  body.t-bromponie .ws-contact .ws-narrow { grid-template-columns: 1fr; row-gap: 32px; }
  body.t-bromponie .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}

/* night — bone goes to soot and the ink inverts to bone, so the slabs stay the
   heaviest thing on the page; the band lifts one stop ABOVE the ground instead
   of dropping below it, and the orange is warmed a shade so a vest still reads
   as a vest against a dark street */
html[data-theme="dark"] body.t-bromponie.ws-body {
  --bg: #121110; --fg: #a09b93; --heading: #f4f1ec; --text: #a09b93; --muted: #837d75;
  --brp-ink: #f4f1ec; --brp-orange: #ff6a33; --brp-band: #1e1b19; --brp-line: #2a2724; --brp-field: #1a1817;
  --hero-a: rgba(8, 7, 6, .34); --hero-b: rgba(8, 7, 6, .70);
}
html[data-theme="dark"] body.t-bromponie { background: var(--bg); }