/* ---------- Beacon — Lighthouse stay 36 (website) ----------
   The one structural move: there are NO bands. Every section is transparent and
   unusually tall, so the page reads object → gap → object → gap, the way the
   reference does with its explicit separators. The hero is the full first screen
   and the only photograph; everything after it is words in a narrow measure. */
body.t-beacon.ws-body { --bg: #0e1a1f; --fg: #b9c6cb; --heading: #e8eef0; --text: #b9c6cb; --muted: #74868d; }
body.t-beacon.ws-body .ws-section, body.t-beacon.ws-body .ws-section:nth-child(even) { background: transparent; padding: 104px 0; }
/* the header is chrome the reference does not have — dissolve it into the photograph */
body.t-beacon .ws-nav { background: transparent; backdrop-filter: none; border-bottom: 0; }
body.t-beacon .ws-brand, body.t-beacon .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 700; opacity: 1; }
body.t-beacon .ws-nav-links a { color: #e8a33d; }
body.t-beacon .ws-hero { min-height: 100vh; --hero-a: rgba(6, 16, 20, 0.32); --hero-b: rgba(6, 16, 20, 0.76); }
body.t-beacon.ws-body .ws-hero h1 { font-size: clamp(40px, 9vw, 132px); font-weight: 300; letter-spacing: -0.04em; line-height: 0.94; max-width: none; }
body.t-beacon.ws-body .ws-hero p { margin: 24px auto 0; max-width: 52ch; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #e8a33d; opacity: 1; }
body.t-beacon .ws-h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.26em; font-weight: 700; color: #74868d; margin-bottom: 36px; }
/* the three-column band IS the about page — hairline rules, no gap, one measure */
body.t-beacon .ws-columns .ws-container { max-width: 980px; }
body.t-beacon .ws-columns .ws-cols-3 { gap: 0; }
body.t-beacon .ws-col { font-size: 15px; padding-right: 40px; }
body.t-beacon .ws-col + .ws-col { border-left: 1px solid #1d3038; padding-left: 40px; }
body.t-beacon .ws-col-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 700; color: #e8a33d; margin-bottom: 18px; }
body.t-beacon .ws-listblock .ws-container, body.t-beacon .ws-contact .ws-container { max-width: 560px; }
body.t-beacon .ws-list-number { list-style: none; padding-left: 0; counter-reset: rule; }
body.t-beacon .ws-list-number li { counter-increment: rule; position: relative; padding-left: 54px; margin: 0 0 22px; font-size: 16px; line-height: 1.7; }
body.t-beacon .ws-list-number li::before { content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 4px; color: #e8a33d; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
body.t-beacon .ws-quote-t { font-style: normal; font-weight: 300; font-size: clamp(21px, 3vw, 31px); line-height: 1.45; color: #e8eef0; }
body.t-beacon .ws-quote-a { color: #e8a33d; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; }
/* the form is the only interactive thing on the page — ruled lines, not boxes */
body.t-beacon .ws-field label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: #74868d; }
body.t-beacon .ws-field input, body.t-beacon .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid #22383f; border-radius: 0; color: #e8eef0; padding: 12px 0; }
body.t-beacon.ws-body .btn.brand { background: #e8a33d; color: #0e1a1f; border: 0; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; padding: 15px 30px; }
body.t-beacon.ws-body .btn.brand:hover { background: #f2b356; }

html[data-theme="dark"] body.t-beacon.ws-body { --bg: #050c10; --fg: #a5b4ba; --heading: #eef4f6; --text: #a5b4ba; --muted: #66787f; }
html[data-theme="dark"] body.t-beacon { background: #050c10; }
html[data-theme="dark"] body.t-beacon .ws-col + .ws-col { border-left-color: #15252b; }
html[data-theme="dark"] body.t-beacon .ws-field input, html[data-theme="dark"] body.t-beacon .ws-field textarea { border-bottom-color: #182a30; }
html[data-theme="dark"] body.t-beacon .ws-nav-links a, html[data-theme="dark"] body.t-beacon .ws-list-number li::before, html[data-theme="dark"] body.t-beacon .ws-quote-a { color: #f2b356; }
html[data-theme="dark"] body.t-beacon.ws-body .btn.brand { background: #f2b356; color: #050c10; }