/* Bergence Digital: /digital/. Loaded after sand.css, which supplies the nav, buttons, rooms
   and footer; this file gives the page its own scheme (black, with amber as the one signal
   colour) and the hero: one swarm of characters (digital.js) that flies from offering to offering.
   Below it, the offerings as a ruled ledger, as on the one-pager. */

:root {
  --ground: #0A0A09;
  --raised: #151513;
  --sunken: #060605;
  --ink: #EEEAE0;
  --muted: #8E8B83;
  --soft: rgba(238, 234, 224, 0.74);
  --line: rgba(238, 234, 224, 0.12);
  --line-strong: rgba(238, 234, 224, 0.3);
  --amber: #FFB020;
  --sand: var(--amber);              /* sand.css hovers, focus and selection pick this up */
  --on-light: #0A0A09;
}
html { scrollbar-color: var(--line-strong) var(--ground); }
::selection { background: var(--amber); color: var(--on-light); }
.nav { background: rgba(21, 21, 19, 0.96); }

/* ================================================================
   Hero
   ================================================================ */
.hx { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-top) + var(--nav-h) + 40px) var(--edge) clamp(40px, 9vh, 96px); overflow: hidden; background: var(--ground); isolation: isolate; }
.hx-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
/* the picture's own area takes touch: a finger stirs the swarm there instead of scrolling the page.
   Everywhere else in the hero scrolls as normal. digital.js sizes it to the picture. */
.hx-touch { position: absolute; left: 0; top: 0; width: 0; height: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* top left: the current offering's services, each wired into the picture by a line of characters */
.hx-specs { position: absolute; left: var(--edge); top: calc(var(--nav-top) + var(--nav-h) + clamp(36px, 7vh, 72px)); width: min(28vw, 320px); display: grid; gap: 16px; pointer-events: none; }
.hx-specs[hidden] { display: none; }
.hx-specs li { display: grid; gap: 3px; }
.sp-n { width: fit-content; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.sp-d { font-size: 13px; line-height: 1.45; color: var(--muted); }
.sp-n .sc { color: var(--amber); }

.hx-title { font-size: clamp(44px, 5.6vw, 6rem); font-weight: 500; line-height: 0.94; letter-spacing: -0.04em; }
/* the line changes with the offering; its box holds two lines so nothing below it jumps */
.hx-line { display: block; width: min(100%, 17ch); min-height: 1.88em; text-wrap: balance; }
.hx-title .sc { color: var(--amber); }
.hx-foot { display: flex; align-items: flex-end; gap: 24px 48px; margin-top: 36px; }
.hx-lede { max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.hx .btn-solid { flex: none; background: var(--amber); color: var(--on-light); }
.hx .btn-solid:hover { background: var(--ink); }

/* the offerings as one typeset line under the headline; the current one in ink, underlined in amber */
.hx-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; width: fit-content; max-width: 100%; margin-top: 20px; font-size: clamp(17px, 1.35vw, 21px); font-weight: 500; letter-spacing: -0.01em; }
/* each slash stays with the word before it, so a wrapped row never starts with one */
.hx-switch .sw { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.hx-switch i { font-style: normal; color: var(--line-strong); }
.hx-switch button { min-height: 44px; color: var(--muted); text-decoration: underline 2px transparent; text-underline-offset: 0.38em; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.hx-switch button:hover { color: var(--ink); }
.hx-switch button[aria-current="true"] { color: var(--ink); text-decoration-color: var(--amber); }
.hx-switch .sc { color: var(--amber); }
html:not(.js) .hx-switch { display: none; }

/* ================================================================
   Offerings: the one-pager as a ruled ledger
   ================================================================ */
.offers-h { font-size: clamp(40px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; margin-bottom: clamp(48px, 5vw, 80px); }
.offers { --rule-c: var(--line-strong); border-bottom: 1px solid var(--line); }
.offer { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8fr); gap: 24px 48px; padding: 40px 0 46px; scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + 24px); }
.offer:first-child { --rule-c: var(--ink); }
.o-lead h3 { font-size: clamp(26px, 2.3vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; transition: color 0.2s var(--ease); }
.o-lead p { margin-top: 14px; font-size: 16px; color: var(--soft); max-width: 34ch; }
.o-svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.o-svc.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o-svc h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.o-svc p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .offer:hover h3 { color: var(--amber); } }

.close-room { text-align: left; }
.close-room h2 { margin: 0; max-width: 13ch; }
.close-room .ul { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 0.2em; }
.mail { text-decoration-color: var(--amber); }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .offer { grid-template-columns: minmax(0, 1fr); }
  .o-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
  .hx-specs { display: none; }
  .hx { padding-bottom: 32px; }
  .hx-title { font-size: clamp(40px, 11vw, 64px); }
  .hx-line { min-height: 2.82em; }
  .hx-lede { font-size: 17px; }
  .hx-foot { margin-top: 24px; }
}
@media (max-width: 600px) {
  .o-svc, .o-svc.three { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hx .btn-solid { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-switch button, .o-lead h3 { transition: none; }
}