/* ==========================================================================
   Bilhotellet.dk — site.css
   Layout: klassisk bilforhandler-udtryk. Store fotos med mørk overlay,
   centrerede overskrifter, skifergrå titelbjælker og sandfarvede flader.
   Nummerpladen er Bilhotellets eget kendetegn.
   Alt er scopet under .bh og bruger container queries, så siden
   reagerer på sin egen bredde (WordPress-indhold, Studio-preview, mobil).
   ========================================================================== */

.bh {
  /* Brand */
  --ink: #0E0E0E;           /* sort infolinje og footer */
  --slate: #4A5562;         /* skifergrå: knapper, titelbjælker, kontakt */
  --slate-press: #3B4450;
  --sand: #EEEBE4;          /* varm sandfarve til flader */
  --signal: var(--slate);
  --signal-press: var(--slate-press);
  --signal-ink: #FFFFFF;
  --red: #C8262E;           /* kun nummerpladens kant og fejlbeskeder */
  --plate: #FAFAF7;
  --plate-ink: #111111;
  --eu: #1E46A6;
  --ok: #2E8B57;
  --busy: #8A8F96;
  --hold: #B98316;

  /* Type */
  --f-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Red Hat Text", "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --f-data: "Red Hat Text", "Helvetica Neue", Arial, sans-serif;
  --f-plate: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;

  /* Mål */
  --wrap: 1200px;
  --gut: clamp(16px, 4cqi, 40px);
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --ease-door: cubic-bezier(.2, .9, .25, 1.06);
  --ease: cubic-bezier(.25, .8, .25, 1);

  /* Lys (standard) */
  --bg: #FFFFFF;
  --bg-2: #F5F3EE;
  --panel: #FFFFFF;
  --panel-2: #F6F5F1;
  --line: #E2DFD8;
  --fg: #141414;
  --muted: #6D6D6D;
  --soft: #3A3A3A;
  --v-fill: #FFFFFF;
  --v-line: #1C1C1C;
  --v-glass: #C9D3DC;
  --v-tyre: #1C1C1C;
  --v-rim: #C4C7CB;

  container-type: inline-size;
  container-name: bh;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light;
  min-height: 100%;
  overflow-x: clip;
}

/* Flader ------------------------------------------------------------------- */
.bh .w-day, .bh .w-night {
  --bg: #FFFFFF; --bg-2: #F5F3EE; --panel: #FFFFFF; --panel-2: #F6F5F1; --line: #E2DFD8;
  --fg: #141414; --muted: #6D6D6D; --soft: #3A3A3A;
  --v-fill: #FFFFFF; --v-line: #1C1C1C; --v-glass: #C9D3DC; --v-tyre: #1C1C1C; --v-rim: #C4C7CB;
  color-scheme: light; background: var(--bg); color: var(--fg);
}
.bh .w-concrete, .bh .w-sand {
  --bg: #EEEBE4; --bg-2: #E6E2D9; --panel: #FFFFFF; --panel-2: #F7F5F0; --line: #DCD7CC;
  --fg: #141414; --muted: #676561; --soft: #3A3936;
  --v-fill: #FFFFFF; --v-line: #1C1C1C; --v-glass: #C9D3DC; --v-tyre: #1C1C1C; --v-rim: #C4C7CB;
  color-scheme: light; background: var(--bg); color: var(--fg);
}
.bh .w-slate {
  --bg: #4A5562; --bg-2: #434D59; --panel: #56616E; --panel-2: #5E6976; --line: rgba(255,255,255,.18);
  --fg: #FFFFFF; --muted: #D3D8DE; --soft: #EEF1F4;
  --signal: #FFFFFF; --signal-press: #E9ECEF; --signal-ink: #2F3842;
  color-scheme: dark; background: var(--bg); color: var(--fg);
}
.bh .w-ink {
  --bg: #0E0E0E; --bg-2: #171717; --panel: #1D1D1D; --panel-2: #242424; --line: #2E2E2E;
  --fg: #F2F2F2; --muted: #A3A3A3; --soft: #D6D6D6;
  color-scheme: dark; background: var(--bg); color: var(--fg);
}

/* Reset (scopet) ------------------------------------------------------------ */
.bh *, .bh *::before, .bh *::after { box-sizing: border-box; }
.bh h1, .bh h2, .bh h3, .bh h4, .bh p, .bh ul, .bh ol, .bh figure, .bh dl, .bh dd, .bh blockquote { margin: 0; padding: 0; }
.bh ul, .bh ol { list-style: none; }
.bh img, .bh svg, .bh canvas { display: block; max-width: 100%; }
.bh a { color: inherit; text-decoration: none; }
.bh button, .bh input, .bh select, .bh textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.bh button { cursor: pointer; background: none; border: 0; padding: 0; }
.bh :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.bh [hidden] { display: none !important; }
.bh svg.ic { width: 1.15em; height: 1.15em; flex: none; }
.bh .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typografi ------------------------------------------------------------------ */
.bh .t-hero {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 125;
  font-weight: 820;
  font-size: clamp(2.35rem, 6.4cqi, 5.4rem);
  line-height: .96;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.bh .t-h2 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 118;
  font-weight: 780;
  font-size: clamp(1.75rem, 3.7cqi, 3.05rem);
  line-height: 1.02;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.bh .t-h3 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 110;
  font-weight: 740;
  font-size: clamp(1.2rem, 1.9cqi, 1.5rem);
  line-height: 1.15;
  text-wrap: balance;
}
.bh .t-lead { font-size: clamp(1.06rem, 1.5cqi, 1.25rem); line-height: 1.55; color: var(--soft); max-width: 60ch; text-wrap: pretty; }
.bh .t-body { max-width: 64ch; color: var(--soft); text-wrap: pretty; }
.bh .t-body + .t-body { margin-top: 1em; }
.bh .t-small { font-size: .875rem; color: var(--muted); }
.bh .t-label { font-family: var(--f-data); font-weight: 600; font-size: .9375rem; letter-spacing: .02em; color: var(--muted); }
.bh .t-data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }

/* Layout ---------------------------------------------------------------------- */
.bh .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.bh .sec { padding-block: clamp(56px, 9cqi, 120px); position: relative; }
.bh .sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4cqi, 52px); max-width: 760px; }
.bh .sec-head--split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.bh .stack { display: grid; gap: 16px; }

/* Knapper --------------------------------------------------------------------- */
.bh .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-family: var(--f-display); font-variation-settings: "wdth" 108; font-weight: 680; font-size: 1rem;
  line-height: 1; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.bh .btn svg { width: 18px; height: 18px; flex: none; }
.bh .btn--signal { background: var(--signal); color: var(--signal-ink); }
.bh .btn--signal:hover { background: var(--signal-press); }
.bh .btn--ghost { border: 1.5px solid var(--line); color: var(--fg); }
.bh .btn--ghost:hover { border-color: var(--fg); }
.bh .btn--plate { background: var(--plate); color: var(--plate-ink); }
.bh .btn--plate:hover { background: #FFFFFF; }
.bh .btn:active { transform: translateY(1px); }
.bh .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.bh .link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-variation-settings: "wdth" 108; font-weight: 680;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.bh .link:hover { gap: 12px; color: var(--signal); }
.bh .link svg { width: 16px; height: 16px; }

/* Nummerplade ----------------------------------------------------------------- */
.bh .plate {
  display: inline-flex; align-items: stretch;
  background: var(--plate); color: var(--plate-ink);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--signal), 0 1px 0 rgba(0,0,0,.25);
  font-family: var(--f-data); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; line-height: 1; white-space: nowrap;
  overflow: hidden;
}
.bh .plate__eu {
  display: grid; place-items: end center;
  background: var(--eu); color: #fff;
  font-size: .62em; letter-spacing: .04em;
  padding: 3px 4px 3px; min-width: 1.5em;
  border-radius: 4px 0 0 4px; margin: 1.5px 0 1.5px 1.5px;
  position: relative;
}
.bh .plate__eu::before {
  content: ""; position: absolute; left: 50%; top: 4px; width: 9px; height: 9px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 2.6px, #F5CE32 2.7px 3.3px, transparent 3.4px);
}
.bh .plate__txt { padding: .38em .7em .34em; display: flex; align-items: center; }
.bh .plate--s { font-size: .78rem; }
.bh .plate--m { font-size: 1rem; }
.bh .plate--l { font-size: 1.35rem; }

/* Header ---------------------------------------------------------------------- */
.bh .hdr {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: background-color .3s var(--ease);
}
.bh .hdr__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.bh .hdr__logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.bh .hdr__logo img { height: 34px; width: auto; }
.bh .hdr__nav { display: flex; gap: 4px; margin-left: auto; }
.bh .hdr__nav a {
  position: relative; padding: 10px 12px; border-radius: 8px;
  font-family: var(--f-display); font-variation-settings: "wdth" 106; font-weight: 600; font-size: .95rem;
  color: var(--soft);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.bh .hdr__nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.bh .hdr__nav a[aria-current="page"] { color: var(--fg); }
.bh .hdr__nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--signal);
}
.bh .hdr__call { flex: none; }
.bh .hdr__call .btn { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.bh .hdr__menu { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); font-family: var(--f-display); font-weight: 650; font-size: .95rem; }
.bh .hdr__menu svg { width: 18px; height: 18px; }
.bh .hdr__sheet { display: none; }

/* Mobil-handlingsbar ---------------------------------------------------------- */
.bh .mbar { display: none; }

/* Footer ---------------------------------------------------------------------- */
.bh .ftr { --bg: #0B0F14; background: var(--bg); color: var(--fg); padding-block: 56px 40px; border-top: 1px solid var(--line); }
.bh .ftr__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.bh .ftr h4 { font-family: var(--f-data); font-weight: 600; font-size: .95rem; color: var(--muted); margin-bottom: 12px; letter-spacing: .02em; }
.bh .ftr li + li { margin-top: 6px; }
.bh .ftr a:hover { color: var(--signal); }
.bh .ftr__base { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.bh .ftr__base a { text-decoration: underline; text-underline-offset: 3px; }

/* Preview-bjælke --------------------------------------------------------------- */
.bh .sample {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 7px var(--gut); background: var(--hold); color: #1B1405;
  font-size: .85rem; font-weight: 600; text-align: center;
}

/* ============================================================================
   FORSIDE — facaden med tre porte
   ========================================================================== */
.bh .facade { position: relative; overflow: hidden; background: #0B1017; }
.bh .facade__sky {
  position: absolute; inset: 0 0 auto 0; height: 78%;
  background:
    radial-gradient(120% 70% at 70% 100%, rgba(255, 196, 120, .10), transparent 60%),
    linear-gradient(180deg, #070A10 0%, #0D1420 55%, #18233A 100%);
}
.bh .facade__stars { position: absolute; inset: 0 0 auto 0; height: 60%; opacity: .8; pointer-events: none; }
.bh .facade__intro { position: relative; z-index: 2; padding-block: clamp(36px, 5cqi, 72px) clamp(28px, 3.6cqi, 48px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px clamp(28px, 5cqi, 72px); align-items: end; }
.bh .facade__intro .t-hero { max-width: 14ch; color: #F3F6FA; font-size: clamp(2.3rem, 5.6cqi, 4.7rem); }
.bh .facade__aside { display: grid; gap: 22px; padding-bottom: 6px; }
@container bh (max-width: 900px) { .bh .facade__intro { grid-template-columns: minmax(0, 1fr); } }
.bh .facade__intro .t-lead { color: #B8C3D1; }
.bh .facade__intro .btn-row { margin-top: 8px; }

.bh .building { position: relative; z-index: 2; }
.bh .building__wall {
  position: relative;
  padding: 26px clamp(14px, 2.4cqi, 30px) 0;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, #2A3341 0 14px, #333D4D 14px 16px, #222A36 16px 30px, #2C3543 30px 32px);
  box-shadow: 0 -1px 0 #3E4A5C inset;
}
.bh .building__wall::before { /* tagkant */
  content: ""; position: absolute; left: -8px; right: -8px; top: -10px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, #3A4556, #1E2530);
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.bh .building__sign { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.bh .building__sign .plate { box-shadow: inset 0 0 0 2px var(--signal), 0 0 24px rgba(255, 230, 190, .22), 0 0 2px rgba(255,255,255,.6); }
.bh .building__no {
  font-family: var(--f-data); font-weight: 700; font-size: .95rem; letter-spacing: .06em;
  color: #DCE4EE; background: #1A2029; border: 1px solid #44505F; border-radius: 4px; padding: 4px 9px;
}
.bh .doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4cqi, 30px); align-items: end; }

.bh .door { display: grid; gap: 0; position: relative; color: #F3F6FA; }
.bh .door__frame {
  position: relative; aspect-ratio: 10 / 8; max-width: 100%;
  overflow: hidden; border-radius: 4px 4px 0 0;
  background: #06080C;
  box-shadow: 0 0 0 6px #161C25, 0 0 0 7px #3B4656;
}
.bh .door__room {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255, 214, 160, var(--room-glow, .55)), transparent 70%),
    linear-gradient(180deg, #3A3226 0%, #2A251E 58%, #1A1714 58.2%, #26211B 100%);
  transition: filter .5s var(--ease);
}
.bh .door[data-room="udlejning"] .door__room {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(220, 235, 255, var(--room-glow, .6)), transparent 70%),
    linear-gradient(180deg, #2B3443 0%, #222A36 58%, #161B23 58.2%, #1F2630 100%);
}
.bh .door[data-room="lager"] .door__room {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255, 236, 200, var(--room-glow, .5)), transparent 70%),
    linear-gradient(180deg, #34363A 0%, #2A2C30 58%, #1C1D20 58.2%, #26282B 100%);
}
.bh .door__lamp {
  position: absolute; left: 22%; right: 22%; top: 7%; height: 4px; border-radius: 4px;
  background: #FFF4DE; box-shadow: 0 0 18px 4px rgba(255, 222, 170, .7);
  opacity: var(--lamp, 1);
}
.bh .door[data-room="udlejning"] .door__lamp { background: #EAF3FF; box-shadow: 0 0 18px 4px rgba(200, 225, 255, .75); }
.bh .door__art {
  position: absolute; left: 6%; right: 6%; bottom: 7%;
  --v-fill: #1C232E; --v-line: #E8EEF6; --v-glass: #3A4A60; --v-tyre: #07090C; --v-rim: #8492A4;
}
.bh .door__art svg { width: 100%; height: auto; }
.bh .door__art--shelves { left: 10%; right: 10%; }
.bh .door__floorline { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); pointer-events: none; }

.bh .door__panel {
  position: absolute; inset: 0; z-index: 2;
  transform: translateY(var(--lift, -54%));
  transition: transform 1.05s var(--ease-door);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    repeating-linear-gradient(180deg, #C9CFD6 0 calc(12.5% - 2px), #8E97A2 calc(12.5% - 2px) calc(12.5% - 1px), #EEF1F4 calc(12.5% - 1px) 12.5%);
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
  will-change: transform;
}
.bh .door__panel::before { /* rude-række */
  content: ""; position: absolute; left: 8%; right: 8%; top: calc(62.5% + 4px); height: calc(12.5% - 10px);
  background: repeating-linear-gradient(90deg, rgba(255, 214, 160, .85) 0 22%, transparent 22% 26%);
  border-radius: 2px; filter: blur(.2px);
  box-shadow: 0 0 12px rgba(255, 210, 150, .35);
  opacity: .9;
}
.bh .door[data-room="udlejning"] .door__panel::before { background: repeating-linear-gradient(90deg, rgba(210, 230, 255, .85) 0 22%, transparent 22% 26%); }
.bh .door__panel::after { /* bundliste */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #2A3038;
}
.bh .door__tag {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3;
}
.bh .door__shade { position: absolute; left: 0; right: 0; bottom: -2px; height: 26px; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent); pointer-events: none; }

/* Gulvet foran portene */
.bh .apron {
  position: relative; z-index: 1;
  background:
    linear-gradient(180deg, #11161E 0%, #0B0F14 100%);
  padding-top: 26px; padding-bottom: clamp(36px, 6cqi, 72px);
}
.bh .apron::before { /* lysspild */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; pointer-events: none;
  background:
    radial-gradient(28% 100% at 16.6% 0%, rgba(255, 200, 130, .16), transparent 70%),
    radial-gradient(28% 100% at 50% 0%, rgba(200, 225, 255, .14), transparent 70%),
    radial-gradient(28% 100% at 83.4% 0%, rgba(255, 225, 180, .13), transparent 70%);
}
.bh .apron .doors { align-items: start; }
.bh .door__cap { position: relative; display: grid; gap: 10px; padding-top: 4px; }
.bh .door__cap .t-h3 { color: #F3F6FA; font-size: clamp(1.25rem, 2.2cqi, 1.7rem); }
.bh .door__cap p { color: #A9B5C4; font-size: .98rem; max-width: 36ch; }
.bh .door__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.bh .door__price { font-family: var(--f-data); font-weight: 600; font-size: 1.15rem; color: #FFFFFF; }
.bh .door__price small { font-size: .85rem; color: #A9B5C4; font-weight: 500; }
.bh .door__status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-data); font-weight: 600; font-size: .95rem; color: #CFE9DB; }
.bh .door__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 158, 99, .25); }
.bh .door__status--neutral { color: #C4CDD8; }
.bh .door__status--neutral::before { background: #7F8B9A; box-shadow: none; }
.bh .door__go { justify-self: start; margin-top: 4px; color: #F3F6FA; }
.bh .door-link { position: absolute; inset: 0; z-index: 5; border-radius: 4px; }
.bh .door-hit { display: contents; }

/* Port-interaktion: løft ved hover/fokus */
.bh .door:hover .door__panel,
.bh .door:focus-within .door__panel { --lift: -95%; }
.bh .door:hover .door__room,
.bh .door:focus-within .door__room { --room-glow: .85; }
.bh .doors:hover .door:not(:hover) .door__frame { filter: brightness(.72); }
.bh .door__frame { transition: filter .4s var(--ease); }

/* Opstart: portene står lukket, lyset tændes, portene kører op til hvilestilling */
.bh .facade.is-booting .door__panel { transition: none; --lift: 0%; }
.bh .facade.is-booting .door__lamp { opacity: 0; }
.bh .facade.is-running .door__lamp { animation: bh-flicker 1.1s steps(1, end) both; animation-delay: calc(var(--i, 0) * 160ms); }
.bh .facade.is-running .door__panel { transition-delay: calc(240ms + var(--i, 0) * 170ms); }
@keyframes bh-flicker {
  0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .1; } 22% { opacity: 1; } 27% { opacity: .2; } 40% { opacity: 1; } 100% { opacity: 1; }
}

/* Bjerg-overgang fra nat til dag */
.bh .ridge { display: block; width: 100%; height: clamp(40px, 7cqi, 90px); margin-bottom: -1px; }

/* ============================================================================
   Bilkort / flåde
   ========================================================================== */
.bh .fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2cqi, 24px); }
.bh .fleet--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.bh .car {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.bh .car:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(15, 22, 32, .45); border-color: color-mix(in srgb, var(--fg) 25%, var(--line)); }
.bh .car__stage {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%;
  background:
    radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--fg) 7%, transparent), transparent 70%),
    linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--bg-2) 70%, var(--panel)));
  display: grid; place-items: end center; padding: 8% 7% 6%;
  overflow: hidden;
}
.bh .car__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh .car__stage svg { width: 100%; height: auto; transition: transform .6s var(--ease); }
.bh .car:hover .car__stage svg { transform: translateX(2%); }
.bh .car__plate { position: absolute; left: 14px; top: 14px; z-index: 2; }
.bh .car__flag { position: absolute; right: 14px; top: 14px; z-index: 2; }
.bh .car__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.bh .car__name { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 740; font-size: 1.25rem; line-height: 1.15; }
.bh .car__tag { color: var(--muted); font-size: .95rem; }
.bh .car__foot { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.bh .car__price { font-family: var(--f-data); line-height: 1.1; }
.bh .car__price small { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; }
.bh .car__price b { font-size: 1.35rem; font-weight: 700; }
.bh .car__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); transition: background-color .2s var(--ease), transform .3s var(--ease); flex: none; }
.bh .car:hover .car__arrow { background: var(--signal); color: #fff; transform: translateX(3px); }
.bh .car__arrow svg { width: 18px; height: 18px; }
.bh .car-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

.bh .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bh .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-family: var(--f-data); font-weight: 600; font-size: .9rem; color: var(--soft);
}
.bh .chip svg { width: 14px; height: 14px; }
.bh .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--f-data); font-weight: 700; font-size: .85rem; letter-spacing: .02em; line-height: 1.2; }
.bh .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bh .pill--ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: color-mix(in srgb, var(--ok) 80%, var(--fg)); }
.bh .pill--busy { background: color-mix(in srgb, var(--busy) 18%, transparent); color: color-mix(in srgb, var(--busy) 50%, var(--fg)); }
.bh .pill--hold { background: color-mix(in srgb, var(--hold) 18%, transparent); color: color-mix(in srgb, var(--hold) 65%, var(--fg)); }
.bh .pill--sale { background: var(--signal); color: #fff; }
.bh .pill--sale::before { display: none; }

/* ============================================================================
   Kontrolpanel-ikoner (tell-tales) til opbevaring
   ========================================================================== */
.bh .cluster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.bh .cluster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container bh (max-width: 480px) { .bh .cluster--2 { grid-template-columns: minmax(0, 1fr); } }
.bh .tell { display: grid; gap: 12px; align-content: start; padding: 26px 22px 28px; background: var(--panel); }
.bh .tell__lamp {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #1E2A38, #0C1118 72%);
  box-shadow: inset 0 0 0 1px #33404F, inset 0 -6px 12px rgba(0,0,0,.5);
  color: var(--tell, #7FE0A6);
}
.bh .tell__lamp svg { width: 28px; height: 28px; filter: drop-shadow(0 0 6px currentColor); }
.bh .tell[data-tone="amber"] { --tell: #FFC25A; }
.bh .tell[data-tone="blue"] { --tell: #7DB8FF; }
.bh .tell[data-tone="green"] { --tell: #7FE0A6; }
.bh .tell[data-tone="red"] { --tell: #FF7A72; }
.bh .tell .t-h3 { font-size: 1.12rem; }
.bh .tell p { color: var(--muted); font-size: .95rem; }

/* CCTV-hallen */
.bh .cctv { position: relative; border-radius: var(--r-m); overflow: hidden; background: #05070A; aspect-ratio: 4 / 3; max-width: 100%; box-shadow: 0 0 0 1px #2A3442, 0 30px 60px -30px rgba(0,0,0,.8); }
.bh .cctv canvas { width: 100%; height: 100%; }
.bh .cctv__ui { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-data); font-weight: 600; color: #DCE6F2; font-size: clamp(.72rem, 1.4cqi, .9rem); letter-spacing: .06em; text-shadow: 0 1px 2px #000; }
.bh .cctv__tl { position: absolute; left: 14px; top: 12px; display: flex; gap: 12px; align-items: center; }
.bh .cctv__rec { display: inline-flex; align-items: center; gap: 6px; color: #FF6B63; }
.bh .cctv__rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF4A40; animation: bh-blink 1.4s steps(1) infinite; }
.bh .cctv__tr { position: absolute; right: 14px; top: 12px; font-variant-numeric: tabular-nums; }
.bh .cctv__bl { position: absolute; left: 14px; bottom: 12px; }
.bh .cctv__br { position: absolute; right: 14px; bottom: 12px; opacity: .7; }
.bh .cctv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
@keyframes bh-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }

/* ============================================================================
   Sidehoveder (undersider)
   ========================================================================== */
.bh .phero { position: relative; overflow: hidden; padding-block: clamp(40px, 6cqi, 84px) clamp(48px, 7cqi, 96px); }
.bh .phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5cqi, 72px); align-items: center; }
.bh .phero__txt { display: grid; gap: 20px; align-content: center; }
.bh .phero__txt .t-hero { font-size: clamp(2.15rem, 4.9cqi, 4.1rem); }
.bh .phero__price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bh .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-data); font-weight: 600; font-size: .95rem; color: var(--muted); }
.bh .crumbs a:hover { color: var(--fg); }
.bh .crumbs span[aria-hidden] { opacity: .5; }

/* Vejen: udlejningens hero */
.bh .road { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--r-l); overflow: hidden; background: linear-gradient(180deg, #CFE3F5 0%, #EAF3FA 60%, #F6F9FB 100%); }
.bh .road svg.road__land { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh .road__car { position: absolute; left: 8%; right: 14%; bottom: 9%;
  --v-fill: #FFFFFF; --v-line: #142030; --v-glass: #BFD3E8; --v-tyre: #18202A; --v-rim: #C6CFD9; }
.bh .road__car svg { width: 100%; height: auto; }
.bh .road__sign { position: absolute; right: 5%; top: 8%; }

/* Vejskilt */
.bh .sign {
  display: inline-grid; gap: 2px; padding: 10px 14px 9px; border-radius: 7px;
  background: #1D4FA0; color: #fff;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px #1D4FA0, 0 8px 18px -10px rgba(10, 30, 70, .7);
  font-family: var(--f-data); font-weight: 700; line-height: 1.05;
}
.bh .sign__place { font-size: 1.15rem; letter-spacing: .01em; display: flex; justify-content: space-between; gap: 18px; }
.bh .sign__km { font-variant-numeric: tabular-nums; }
.bh .sign__sub { font-size: .75rem; font-weight: 600; opacity: .8; }

/* ============================================================================
   Ledighedstavle (uger)
   ========================================================================== */
.bh .board { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(16px, 2.4cqi, 28px); }
.bh .board__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.bh .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--f-data); font-weight: 600; font-size: .9rem; color: var(--muted); }
.bh .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.bh .legend .lg-free { background: color-mix(in srgb, var(--ok) 22%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 50%, transparent); }
.bh .legend .lg-busy { background: repeating-linear-gradient(135deg, var(--busy) 0 2px, color-mix(in srgb, var(--busy) 40%, var(--panel)) 2px 4px); }
.bh .legend .lg-hol { background: color-mix(in srgb, #3D7BD9 30%, var(--panel)); }
.bh .board__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
.bh .wk { display: grid; grid-template-columns: 150px repeat(var(--n, 52), 22px); gap: 3px; min-width: max-content; align-items: center; }
.bh .wk__lab { font-family: var(--f-display); font-variation-settings: "wdth" 106; font-weight: 650; font-size: .92rem; padding-right: 10px; position: sticky; left: 0; background: var(--panel); z-index: 2; height: 100%; display: flex; align-items: center; }
.bh .wk__lab a:hover { color: var(--signal); }
.bh .wk__month { font-family: var(--f-data); font-weight: 600; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: visible; }
.bh .wk__hol { height: 6px; border-radius: 3px; background: color-mix(in srgb, #3D7BD9 45%, var(--panel)); }
.bh .wk__num { font-family: var(--f-data); font-weight: 600; font-size: .7rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.bh .wk__c {
  height: 30px; border-radius: 5px; border: 0; padding: 0;
  background: color-mix(in srgb, var(--ok) 20%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent);
  transition: transform .15s var(--ease), background-color .15s var(--ease);
}
.bh button.wk__c:hover { transform: scaleY(1.12); background: color-mix(in srgb, var(--ok) 45%, var(--panel)); }
.bh .wk__c.is-busy { background: repeating-linear-gradient(135deg, var(--busy) 0 2px, color-mix(in srgb, var(--busy) 35%, var(--panel)) 2px 5px); box-shadow: none; cursor: not-allowed; }
.bh .wk__c.is-hol:not(.is-busy) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent), inset 0 -3px 0 #3D7BD9; }
.bh .wk__c.is-sel { background: var(--signal); box-shadow: none; }
.bh .board__note { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.bh .board__tip { margin-top: 10px; min-height: 1.4em; font-family: var(--f-data); font-weight: 600; color: var(--soft); }

/* Ugekalender på bilsiden (13 kolonner) */
.bh .cal { display: grid; gap: 18px; }
.bh .cal__q { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
.bh .cal__mo { font-family: var(--f-data); font-weight: 700; font-size: .95rem; padding-top: 8px; color: var(--muted); }
.bh .cal__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.bh .cal__w {
  display: grid; gap: 1px; padding: 7px 4px 6px; border-radius: 8px; text-align: center;
  background: color-mix(in srgb, var(--ok) 13%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 38%, transparent);
  font-family: var(--f-data); line-height: 1.05;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.bh .cal__w b { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh .cal__w span { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.bh button.cal__w:hover { background: color-mix(in srgb, var(--ok) 30%, var(--panel)); transform: translateY(-1px); }
.bh .cal__w.is-busy { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--busy) 30%, var(--panel)) 0 3px, var(--panel) 3px 7px); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); cursor: not-allowed; }
.bh .cal__w.is-busy b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bh .cal__w.is-hol::after { content: attr(data-hol); font-size: .62rem; font-weight: 700; color: #2F68C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh .w-night .cal__w.is-hol::after { color: #8DB8FF; }
.bh .cal__w.is-sel { background: var(--signal); color: #fff; box-shadow: none; }
.bh .cal__w.is-sel span, .bh .cal__w.is-sel::after { color: rgba(255,255,255,.85); }

/* ============================================================================
   Bilside
   ========================================================================== */
.bh .vd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4cqi, 56px); align-items: start; }
.bh .vd__head { display: grid; gap: 14px; margin-bottom: clamp(20px, 3cqi, 36px); }
.bh .gallery { display: grid; gap: 10px; }
.bh .gallery__stage {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--r-l); overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(15, 22, 32, .10), transparent 70%),
    linear-gradient(180deg, #E4ECF3 0%, #F4F7FA 62%, #E8EDF2 62.2%, #F2F5F8 100%);
  display: grid; place-items: end center;
}
.bh .gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh .gallery__draw { position: relative; width: 84%; margin-bottom: 7%; }
.bh .gallery__draw svg { width: 100%; height: auto; overflow: visible; }
.bh .gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.bh .gallery__thumbs button { flex: none; width: 92px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; opacity: .65; box-shadow: inset 0 0 0 1px var(--line); background: var(--panel-2); transition: opacity .2s var(--ease); }
.bh .gallery__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--signal); }
.bh .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.bh .gallery__nav { position: absolute; inset: auto 12px 12px auto; display: flex; gap: 8px; z-index: 2; }
.bh .gallery__nav button { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.bh .gallery__nav svg { width: 18px; height: 18px; }
.bh .gallery__hint { position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--f-data); font-weight: 600; font-size: .82rem; color: #4D5B6B; background: rgba(255,255,255,.75); padding: 3px 9px; border-radius: 999px; }

/* Callouts på tegningen */
.bh .co { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); pointer-events: none; }
.bh .co__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(212, 42, 50, .22); flex: none; }
.bh .co__lab { font-family: var(--f-data); font-weight: 700; font-size: clamp(.7rem, 1.4cqi, .92rem); background: #142030; color: #fff; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.bh .co--up { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 5px)); }
.bh .co--up .co__lab { margin-bottom: 2px; }
.bh .co--up::after { content: ""; order: 1; width: 1.5px; height: 22px; background: #142030; margin: -2px 0 -2px; }
.bh .co--up .co__dot { order: 0; }
.bh .co--up .co__lab { order: 2; }

/* Instrumentlinje (nøgledata) */
.bh .gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--line); gap: 1px; }
.bh .gauge { background: var(--panel); padding: 14px 16px 12px; display: grid; gap: 2px; }
.bh .gauge b { font-family: var(--f-data); font-weight: 700; font-size: clamp(1.4rem, 2.6cqi, 1.9rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bh .gauge b small { font-size: .55em; font-weight: 600; margin-left: 3px; color: var(--muted); }
.bh .gauge span { font-size: .82rem; color: var(--muted); }

/* Prisbokse */
.bh .prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.bh .price {
  position: relative; display: grid; gap: 4px; text-align: left;
  padding: 16px 16px 14px; border-radius: var(--r-m);
  background: var(--panel); border: 1.5px solid var(--line);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.bh button.price:hover { border-color: color-mix(in srgb, var(--fg) 40%, var(--line)); transform: translateY(-1px); }
.bh .price[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(212, 42, 50, .14); }
.bh .price__lab { font-family: var(--f-display); font-variation-settings: "wdth" 108; font-weight: 700; font-size: 1rem; }
.bh .price__lab small { display: block; font-family: var(--f-data); font-weight: 600; color: var(--muted); font-size: .85rem; }
.bh .price__amt { font-family: var(--f-data); font-weight: 700; font-size: 1.55rem; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh .price__amt small { font-size: .55em; font-weight: 600; color: var(--muted); margin-right: 4px; }
.bh .price__km { font-family: var(--f-data); font-weight: 600; font-size: .92rem; color: var(--soft); }
.bh .price__note { font-size: .85rem; color: var(--muted); }

/* Udstyr */
.bh .equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px 20px; }
.bh .equip li { display: flex; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bh .equip svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--signal); }

.bh .vd__side { position: sticky; top: 90px; display: grid; gap: 16px; }
.bh .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(18px, 2.6cqi, 28px); }
.bh .card--ink { --bg: #0C131C; --muted: #9FB0C3; --line: #2E3B4D; --panel: #182333; --panel-2: #1E2B3D; --soft: #CFD8E3; --fg: #EEF2F6; background: #111A26; color: var(--fg); border-color: #111A26; color-scheme: dark; }
.bh .vd-block { display: grid; gap: 18px; margin-top: clamp(32px, 5cqi, 56px); }

/* ============================================================================
   Formularer
   ========================================================================== */
.bh .form { display: grid; gap: 14px; }
.bh .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bh .fld { display: grid; gap: 6px; min-width: 0; }
.bh .fld--full { grid-column: 1 / -1; }
.bh .fld > span { font-family: var(--f-data); font-weight: 600; font-size: .92rem; color: var(--soft); }
.bh .fld > span em { font-style: normal; color: var(--muted); font-weight: 500; }
.bh .fld input, .bh .fld select, .bh .fld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border-radius: 10px; border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, var(--bg));
  color: var(--fg); font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bh .fld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.bh .fld input:focus, .bh .fld select:focus, .bh .fld textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(212, 42, 50, .16); }
.bh .fld input:user-invalid { border-color: var(--signal); }
.bh .seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bh .seg label { position: relative; }
.bh .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bh .seg span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: .95rem; transition: all .2s var(--ease); }
.bh .seg input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.bh .seg input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.bh .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bh .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.bh .form__err { color: var(--signal); font-weight: 600; font-size: .95rem; }
.bh .form__done { display: grid; gap: 10px; padding: 22px; border-radius: var(--r-m); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.bh .form__done .t-h3 { display: flex; gap: 10px; align-items: center; }
.bh .form__done svg { width: 24px; height: 24px; color: var(--ok); }
.bh .form__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; font-size: .92rem; color: var(--soft); }
.bh .form__sum dt { font-family: var(--f-data); font-weight: 600; color: var(--muted); }
.bh .form__pick { font-family: var(--f-data); font-weight: 600; font-size: .95rem; color: var(--soft); padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--fg) 5%, transparent); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.bh .form__pick button { color: var(--signal); font-weight: 700; }

/* ============================================================================
   Opbevaring
   ========================================================================== */
.bh .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; position: relative; }
.bh .steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 14px, transparent 14px 22px); }
.bh .step { position: relative; display: grid; gap: 10px; padding-right: 22px; counter-increment: step; }
.bh .step::before {
  content: counter(step); position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--fg);
  font-family: var(--f-data); font-weight: 700; font-size: 1.15rem;
}
.bh .step p { color: var(--muted); font-size: .97rem; }
.bh .faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bh .faq details { border-bottom: 1px solid var(--line); }
.bh .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: var(--f-display); font-variation-settings: "wdth" 108; font-weight: 680; font-size: 1.1rem; }
.bh .faq summary::-webkit-details-marker { display: none; }
.bh .faq summary svg { width: 22px; height: 22px; flex: none; transition: transform .3s var(--ease); }
.bh .faq details[open] summary svg { transform: rotate(45deg); }
.bh .faq details p { padding: 0 0 22px; color: var(--muted); max-width: 64ch; }
.bh .split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5cqi, 72px); align-items: start; }
.bh .bigprice { display: grid; gap: 4px; }
.bh .bigprice b { font-family: var(--f-data); font-weight: 700; font-size: clamp(3rem, 7cqi, 5rem); line-height: .9; font-variant-numeric: tabular-nums; }
.bh .bigprice b small { font-size: .32em; font-weight: 600; color: var(--muted); margin-left: 6px; }

/* ============================================================================
   Lager
   ========================================================================== */
.bh .plan { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(16px, 2.4cqi, 26px); overflow: hidden; }
.bh .plan::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; opacity: .35; }
.bh .plan svg { position: relative; width: 100%; height: auto; overflow: visible; }
.bh .plan__cap { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-family: var(--f-data); font-weight: 600; font-size: .88rem; color: var(--muted); }
.bh .unit-shape { cursor: pointer; transition: opacity .2s var(--ease); }
.bh .unit-shape:hover { opacity: .85; }
.bh .unit-shape:focus-visible { outline: none; }
.bh .unit-shape:focus-visible rect.u-room { stroke: var(--signal); stroke-width: 3; }
.bh .units { display: grid; gap: 12px; }
.bh .unit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 18px 20px; border-radius: var(--r-m); background: var(--panel); border: 1.5px solid var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bh .unit.is-active { border-color: var(--fg); box-shadow: 0 10px 30px -18px rgba(0,0,0,.4); }
.bh .unit__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bh .unit__specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-data); font-weight: 600; color: var(--soft); font-size: .98rem; }
.bh .unit__specs span { white-space: nowrap; }
.bh .unit__feat { grid-column: 1 / 3; font-size: .92rem; color: var(--muted); }
.bh .unit__price { text-align: right; font-family: var(--f-data); line-height: 1.1; }
.bh .unit__price b { font-size: 1.45rem; font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.bh .unit__price small { color: var(--muted); font-weight: 600; font-size: .85rem; }
.bh .unit__cta { grid-column: 3; grid-row: 2; justify-self: end; }
.bh .facil { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.bh .facil li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--line); font-weight: 600; line-height: 1.35; }
.bh .facil svg { width: 26px; height: 26px; flex: none; color: var(--fg); }

/* ============================================================================
   Om os / rejser / kontakt
   ========================================================================== */
.bh .trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.bh .trip { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-l); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.bh .trip__img { aspect-ratio: 4 / 3; max-width: 100%; position: relative; background: linear-gradient(180deg, #CFE0F0, #EEF3F8); display: grid; place-items: center; overflow: hidden; }
.bh .trip__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh .trip__img svg.trip__land { position: absolute; inset: auto 0 0 0; width: 100%; height: 60%; }
.bh .trip__img .sign { position: relative; z-index: 1; }
.bh .trip__body { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.bh .trip__body p { color: var(--muted); font-size: .95rem; }
.bh .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bh .quote { padding: 24px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 14px; }
.bh .quote p { font-size: 1.1rem; line-height: 1.5; }
.bh .quote footer { font-family: var(--f-data); font-weight: 600; color: var(--muted); }

.bh .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5cqi, 72px); align-items: start; }
.bh .phone-big { display: grid; gap: 6px; }
.bh .phone-big a, .bh .phone-big .num { font-family: var(--f-data); font-weight: 700; font-size: clamp(2.6rem, 7.5cqi, 5.4rem); line-height: .95; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.bh .phone-big a:hover { color: var(--signal); }
.bh .facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bh .facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.bh .facts dt { font-family: var(--f-data); font-weight: 600; color: var(--muted); }
.bh .facts dd { font-weight: 600; overflow-wrap: anywhere; }
.bh .copy { font-family: var(--f-data); font-weight: 700; font-size: .85rem; color: var(--muted); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.bh .copy:hover { color: var(--fg); border-color: var(--fg); }
.bh .map { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--r-l); overflow: hidden; background: #0C1219; border: 1px solid var(--line); }
.bh .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2); }
.bh .map canvas { width: 100%; height: 100%; }
.bh .map__card { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-m); background: rgba(12, 18, 26, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #EEF2F6; border: 1px solid #2A3647; }
.bh .map__card b { font-family: var(--f-display); font-variation-settings: "wdth" 110; font-weight: 720; display: block; }
.bh .map__card span { font-size: .9rem; color: #A9B6C5; }

/* Bånd-sektioner på forsiden */
.bh .band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5cqi, 64px); align-items: center; }
.bh .mini-units { display: grid; gap: 8px; }
.bh .mini-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--line); font-family: var(--f-data); font-weight: 600; }
.bh .mini-unit b { font-family: var(--f-display); font-variation-settings: "wdth" 108; font-weight: 700; }
.bh .mini-unit span.t-data { color: var(--soft); white-space: nowrap; }
.bh .dest-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.bh .dest-row .sign { scroll-snap-align: start; flex: none; }

.bh .cta-band { position: relative; overflow: hidden; }
.bh .cta-band__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }

/* Visningsskift */
.bh .view { animation: bh-in .45s var(--ease) both; }
@keyframes bh-in { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   Container queries — tablet og mobil
   ========================================================================== */
@container bh (max-width: 1080px) {
  .bh .hdr__nav a { padding: 10px 9px; font-size: .9rem; }
  .bh .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container bh (max-width: 900px) {
  .bh .hdr__nav, .bh .hdr__call { display: none; }
  .bh .hdr__menu { display: inline-flex; }
  .bh .hdr__sheet { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gut) 20px; box-shadow: 0 30px 40px -20px rgba(0,0,0,.4); }
  .bh .hdr__sheet[hidden] { display: none !important; }
  .bh .hdr__sheet a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 1.25rem; }
  .bh .hdr__sheet a[aria-current="page"] { color: var(--signal); }
  .bh .hdr__sheet a svg { width: 20px; height: 20px; opacity: .6; }
  .bh .mbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: sticky; bottom: 0; z-index: 60;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, #0B0F14 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid #2A3442;
  }
  .bh .mbar .btn { width: 100%; padding: 0 12px; }
  .bh .mbar .btn--ghost { color: #F3F6FA; border-color: #3A4656; }
  .bh .phero__grid, .bh .vd, .bh .split, .bh .contact, .bh .band { grid-template-columns: minmax(0, 1fr); }
  .bh .vd__side { position: static; }
  .bh .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .bh .steps::before { display: none; }
  .bh .unit { grid-template-columns: minmax(0, 1fr) auto; }
  .bh .unit__specs { grid-column: 1 / -1; grid-row: 2; }
  .bh .unit__feat { grid-column: 1 / -1; grid-row: 3; }
  .bh .unit__price { grid-column: 2; grid-row: 1; }
  .bh .unit__cta { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
  .bh .cta-band__in { grid-template-columns: minmax(0, 1fr); }
}
@container bh (max-width: 760px) {
  .bh .doors { gap: 10px; }
  .bh .building__wall { padding-inline: 10px; padding-top: 16px; }
  .bh .building__sign { margin-bottom: 14px; }
  .bh .door__frame { box-shadow: 0 0 0 3px #161C25, 0 0 0 4px #3B4656; }
  .bh .door__tag { display: none; }
  .bh .form__grid { grid-template-columns: minmax(0, 1fr); }
  .bh .sec-head--split { grid-template-columns: minmax(0, 1fr); }
  .bh .facts > div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .bh .facts dt { grid-column: 1 / -1; }
  .bh .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .bh .wk { grid-template-columns: 112px repeat(var(--n, 52), 20px); }
  .bh .cal__q { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bh .cal__mo { padding-top: 0; }
}
@container bh (max-width: 480px) {
  .bh .steps { grid-template-columns: minmax(0, 1fr); }
  .bh .hdr__in { min-height: 60px; }
  .bh .plate--l { font-size: 1.1rem; }
  .bh .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobil: portene og billedteksterne flettes sammen (port + tekst under) */
.bh .building--merged .door__cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bh *, .bh *::before, .bh *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* ============================================================================
   Bil-tegninger (SVG-klasser)
   ========================================================================== */
.bh .veh { overflow: visible; }
.bh .veh .vs { fill: rgba(0, 0, 0, .22); }
.bh .w-night .veh .vs, .bh .door .veh .vs { fill: rgba(0, 0, 0, .55); }
.bh .veh .vb { fill: var(--v-fill); stroke: var(--v-line); stroke-width: 1.6; stroke-linejoin: round; }
.bh .veh .vb--cover { fill: color-mix(in srgb, var(--v-fill) 80%, var(--v-line) 12%); }
.bh .veh .vg { fill: var(--v-glass); stroke: var(--v-line); stroke-width: 1.2; stroke-linejoin: round; }
.bh .veh .vp { fill: var(--v-fill); stroke: var(--v-line); stroke-width: 1.2; }
.bh .veh .vd { fill: none; stroke: var(--v-line); stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
.bh .veh .vd--b { stroke-width: 2.6; opacity: .8; }
.bh .veh .vd--frame { stroke-width: 4; opacity: 1; stroke-linecap: round; }
.bh .veh .vl { fill: #FFF3D6; stroke: var(--v-line); stroke-width: 1; }
.bh .door .veh .vl { fill: #FFE3A8; filter: drop-shadow(0 0 4px rgba(255, 220, 150, .9)); }
.bh .veh .vt { fill: var(--signal); stroke: var(--v-line); stroke-width: .8; }
.bh .veh .vty { fill: var(--v-tyre); }
.bh .veh .vr { fill: var(--v-rim); stroke: var(--v-tyre); stroke-width: 1; }
.bh .veh .vh { fill: var(--v-tyre); }

/* Port: synk-løft fra billedtekst + mobilvæg */
.bh .door.is-open .door__panel { --lift: -95%; }
.bh .door.is-open .door__room { --room-glow: .85; }
@container bh (max-width: 760px) {
  .bh .building__wall { background: linear-gradient(180deg, #1A212C, #11161E); }
  .bh .building__wall .doors { gap: 10px; }
  .bh .building__sign .plate--l { font-size: 1rem; }
}

/* Bilside: rækkefølge på mobil */
@container bh (max-width: 900px) {
  .bh .vd { gap: 18px; }
  .bh .vd__main, .bh .vd__side { display: contents; }
  .bh .vd .o1 { order: 1; } .bh .vd .o2 { order: 2; } .bh .vd .o3 { order: 3; margin-top: 0 !important; }
  .bh .vd .o4 { order: 4; margin-top: 12px; } .bh .vd .o5 { order: 5; margin-top: 12px; } .bh .vd .o6 { order: 6; }
}

@container bh (max-width: 520px) {
  .bh .gallery__hint { display: none; }
  .bh .gallery__draw .co:nth-of-type(n+4) { display: none; }
  .bh .co__lab { font-size: .68rem; padding: 2px 6px; }
}
.bh .cal__more { justify-self: start; }

/* ============================================================================
   v2: infobjælke, foto-hero, tre indgange, firmainfo, områder, køb & salg
   ========================================================================== */
.bh .topbar { background: #0B0F14; color: #AEB9C6; font-size: .85rem; border-bottom: 1px solid #1E2733; }
.bh .topbar__in { display: flex; align-items: center; gap: 6px 22px; min-height: 36px; flex-wrap: wrap; }
.bh .topbar a, .bh .topbar span { display: inline-flex; align-items: center; gap: 7px; }
.bh .topbar svg { width: 14px; height: 14px; opacity: .8; }
.bh .topbar a:hover { color: #FFFFFF; }
.bh .topbar__end { margin-left: auto; gap: 22px !important; }
@container bh (max-width: 900px) { .bh .topbar { display: none; } }

/* Foto-hero med krydsfade */
.bh .hero { position: relative; overflow: hidden; background: #0B1017; color: #F3F6FA; min-height: clamp(420px, 52cqi, 640px); display: grid; align-items: end; }
.bh .hero__slides { position: absolute; inset: 0; }
.bh .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.bh .hero__img.is-on { opacity: 1; }
.bh .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 18, .15) 0%, rgba(8, 12, 18, .25) 45%, rgba(8, 12, 18, .82) 100%); }
.bh .hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; padding-block: 120px clamp(32px, 5cqi, 64px); }
.bh .hero__txt { display: grid; gap: 18px; max-width: 760px; }
.bh .hero__txt .t-hero { font-size: clamp(2.2rem, 5.2cqi, 4.4rem); color: #FFFFFF; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.bh .hero__txt .t-lead { color: #DCE4EE; }
.bh .hero .btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.bh .hero .btn--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.08); }
.bh .hero__dots { display: flex; gap: 8px; padding-bottom: 6px; }
.bh .hero__dot { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.bh .hero__dot[aria-current="true"] { background: #FFFFFF; }
@container bh (max-width: 760px) { .bh .hero { min-height: 480px; } .bh .hero__in { grid-template-columns: minmax(0, 1fr); padding-top: 160px; } }

/* Pladsholder-facade: asfalt under portene */
.bh .facade__ground { position: relative; z-index: 1; height: clamp(18px, 3cqi, 34px); background: linear-gradient(180deg, #161C24, #0E1218); box-shadow: inset 0 1px 0 #2A3442; }

/* Tre indgange */
.bh .legs-sec { padding-block: clamp(40px, 6cqi, 80px); }
.bh .legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2cqi, 28px); }
.bh .leg { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bh .leg:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(15, 22, 32, .55); }
.bh .leg__img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: #1A222E; }
.bh .leg__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bh .leg:hover .leg__img > img { transform: scale(1.04); }
.bh .leg__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; }
.bh .leg__title { font-family: var(--f-display); font-variation-settings: "wdth" 114; font-weight: 780; font-size: clamp(1.3rem, 2.1cqi, 1.6rem); line-height: 1.12; text-wrap: balance; }
.bh .leg__body > p { color: var(--muted); }
.bh .leg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bh .leg__price { font-family: var(--f-data); font-weight: 700; font-size: 1.15rem; }
.bh .leg__price small { color: var(--muted); font-weight: 600; font-size: .85rem; }
.bh .leg__go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-variation-settings: "wdth" 108; font-weight: 700; color: var(--signal); transition: gap .2s var(--ease); }
.bh .leg:hover .leg__go { gap: 12px; }
.bh .leg__go svg { width: 18px; height: 18px; }
.bh .leg-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
@container bh (max-width: 900px) { .bh .legs { grid-template-columns: minmax(0, 1fr); } .bh .leg { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: none; } .bh .leg__img { aspect-ratio: auto; min-height: 200px; } }
@container bh (max-width: 560px) { .bh .leg { grid-template-columns: minmax(0, 1fr); } .bh .leg__img { aspect-ratio: 16 / 9; min-height: 0; } }

/* Illustrationer som pladsholdere for fotos */
.bh .leg__draw { position: absolute; inset: 0; display: grid; place-items: end center; padding: 10% 9% 9%; }
.bh .leg__draw svg { width: 100%; height: auto; }
.bh .leg__draw--day { background: radial-gradient(80% 60% at 50% 100%, rgba(15,22,32,.08), transparent 70%), linear-gradient(180deg, #CFE3F5 0%, #EAF3FA 62%, #D9E2EA 62.3%, #E9EEF3 100%);
  --v-fill: #FFFFFF; --v-line: #142030; --v-glass: #BFD3E8; --v-tyre: #18202A; --v-rim: #C6CFD9; }
.bh .leg__draw--night { background: radial-gradient(60% 55% at 50% 0%, rgba(255, 214, 160, .45), transparent 70%), linear-gradient(180deg, #2E2A24 0%, #241F1A 62%, #16130F 62.3%, #1F1B16 100%);
  --v-fill: #2A2F38; --v-line: #E8EEF6; --v-glass: #3A4A60; --v-tyre: #07090C; --v-rim: #8492A4; }
.bh .leg__draw--show { background: radial-gradient(45% 70% at 50% 0%, rgba(255, 246, 228, .55), transparent 72%), linear-gradient(180deg, #3A3E44 0%, #2C3036 62%, #1C1F23 62.3%, #262A2F 100%);
  --v-fill: #F3F4F5; --v-line: #12161C; --v-glass: #B8C6D3; --v-tyre: #12161C; --v-rim: #B9C1C9; }
.bh .leg__draw--concrete { background: radial-gradient(60% 55% at 50% 0%, rgba(255, 236, 200, .4), transparent 70%), linear-gradient(180deg, #4A4D52 0%, #3A3D42 62%, #2A2C30 62.3%, #34373B 100%);
  --v-fill: #3F444B; --v-line: #E4E8EC; --v-glass: #5A6878; --v-tyre: #111; --v-rim: #8A95A2; }
.bh .leg__draw--night .veh .vs, .bh .leg__draw--show .veh .vs, .bh .leg__draw--concrete .veh .vs { fill: rgba(0,0,0,.5); }

/* Firmainfo nederst */
.bh .info { border-top: 1px solid var(--line); }
.bh .info__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1fr); gap: clamp(28px, 4cqi, 56px); }
.bh .info__col { display: grid; gap: 16px; align-content: start; }
.bh .info__h { font-family: var(--f-data); font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--muted); }
.bh .info .phone-big a { font-size: clamp(2.2rem, 4.2cqi, 3.4rem); }
.bh .info__dl { display: grid; gap: 10px; }
.bh .info__dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.bh .info__dl dt { font-family: var(--f-data); font-weight: 600; color: var(--muted); }
.bh .info__dl dd { overflow-wrap: anywhere; }
.bh .info__dl a:hover, .bh .info__facts a:hover { color: var(--signal); }
.bh .info__hours { font-family: var(--f-display); font-variation-settings: "wdth" 116; font-weight: 780; font-size: clamp(1.6rem, 2.8cqi, 2.2rem); line-height: 1.1; }
.bh .info__facts { display: grid; gap: 8px; color: var(--soft); }
.bh .info__facts a { display: inline-flex; align-items: center; gap: 8px; }
.bh .info__facts svg { width: 18px; height: 18px; }
@container bh (max-width: 900px) { .bh .info__grid { grid-template-columns: minmax(0, 1fr); } }

/* Opbevaring: områder */
.bh .notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); background: color-mix(in srgb, var(--hold) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--hold) 45%, transparent); color: var(--fg); max-width: 60ch; }
.bh .notice svg { width: 22px; height: 22px; flex: none; color: var(--hold); margin-top: 2px; }
.bh .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2cqi, 24px); }
.bh .area { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: border-color .2s var(--ease); scroll-margin-top: 100px; }
.bh .area.is-active { border-color: var(--fg); }
.bh .area__img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: #1A222E; }
.bh .area__strip { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bh .area__strip::-webkit-scrollbar { display: none; }
.bh .area__strip img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.bh .area__pill { position: absolute; left: 12px; top: 12px; z-index: 2; }
.bh .area__pill .pill { background: rgba(10, 14, 20, .78); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bh .area__pill .pill--ok::before { background: #4CC08A; }
.bh .area__pill .pill--busy::before { background: #FF7A72; }
.bh .area__pill .pill--hold::before { background: #E6B04A; }
.bh .area__count { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-family: var(--f-data); font-weight: 700; font-size: .8rem; color: #fff; background: rgba(10, 14, 20, .7); padding: 3px 9px; border-radius: 999px; }
.bh .area__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.bh .area__text { color: var(--muted); font-size: .97rem; }
.bh .area__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh .area__foot .btn { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.bh .facil--stack { grid-template-columns: minmax(0, 1fr); }

/* Køb & salg */
.bh .showroom { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--r-l); overflow: hidden; background: linear-gradient(180deg, #2B2F35 0%, #23262B 64%, #191B1F 64.2%, #24272C 100%); }
.bh .showroom__beam { position: absolute; left: 50%; top: -10%; width: 70%; height: 90%; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 0%, rgba(255, 246, 228, .5), transparent 75%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); }
.bh .showroom__beam--2 { width: 40%; left: 22%; opacity: .45; }
.bh .showroom__floor { position: absolute; left: 12%; right: 12%; bottom: 10%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 228, .28), transparent); }
.bh .showroom__car { position: absolute; left: 12%; right: 12%; bottom: 11%; z-index: 1;
  --v-fill: #F3F4F5; --v-line: #12161C; --v-glass: #B8C6D3; --v-tyre: #12161C; --v-rim: #B9C1C9; }
.bh .showroom__car svg { width: 100%; height: auto; }
.bh .showroom .veh .vs { fill: rgba(0,0,0,.55); }
.bh .tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.bh .tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 650; font-size: .95rem; color: var(--muted); }
.bh .tabs button span { font-family: var(--f-data); font-weight: 700; font-size: .85rem; opacity: .75; }
.bh .tabs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.bh .empty { display: grid; gap: 10px; padding: clamp(24px, 4cqi, 44px); border-radius: var(--r-l); border: 1.5px dashed var(--line); background: var(--panel-2); max-width: 760px; }
.bh .empty a { text-decoration: underline; text-underline-offset: 3px; }
.bh .car__flags { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.bh .car--sold .car__stage img, .bh .car--sold .car__stage svg { filter: grayscale(1); opacity: .7; }
.bh .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.bh .specs > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bh .specs dt { color: var(--muted); font-family: var(--f-data); font-weight: 600; }
.bh .specs dd { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
@container bh (max-width: 560px) { .bh .specs { grid-template-columns: minmax(0, 1fr); } }

.bh .fleet--c1 { grid-template-columns: minmax(0, 420px); }
.bh .fleet--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh .fleet--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh .fband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4cqi, 56px); align-items: start; }
.bh .fband--c1 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bh .fband .fleet--c1 { grid-template-columns: minmax(0, 1fr); }
.bh .fband__head { position: sticky; top: 100px; }
.bh .areas--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh .areas--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container bh (max-width: 900px) {
  .bh .fband, .bh .fband--c1 { grid-template-columns: minmax(0, 1fr); }
  .bh .fband__head { position: static; }
  .bh .fleet--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh .areas--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container bh (max-width: 640px) {
  .bh .fleet--c1, .bh .fleet--c2, .bh .fleet--c3, .bh .areas--c2, .bh .areas--c3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   v3: klassisk udtryk (rolig, fotobåret, centreret)
   ========================================================================== */
.bh .t-hero { font-family: var(--f-display); font-weight: 600; font-variation-settings: normal; font-size: clamp(2.3rem, 5.2cqi, 4.1rem); line-height: 1.05; letter-spacing: -0.015em; }
.bh .t-h2 { font-family: var(--f-display); font-weight: 600; font-variation-settings: normal; font-size: clamp(1.8rem, 3.4cqi, 2.75rem); line-height: 1.12; letter-spacing: -0.01em; }
.bh .t-h3 { font-family: var(--f-display); font-weight: 600; font-variation-settings: normal; }
.bh .t-lead { color: var(--muted); }
.bh .t-label { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.bh .sec { padding-block: clamp(56px, 8cqi, 104px); }
.bh .sec-head { margin-inline: auto; text-align: center; justify-items: center; max-width: 780px; }
.bh .sec-head .t-lead { margin-inline: auto; }
.bh .sec-head--split { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 780px; }
.bh .sec-more { display: flex; justify-content: center; margin-top: clamp(28px, 4cqi, 44px); }
.bh :focus-visible { outline-color: var(--slate); }
.bh .crumbs { font-family: var(--f-body); }

/* Knapper */
.bh .btn { font-family: var(--f-display); font-weight: 600; font-variation-settings: normal; min-height: 52px; padding: 0 28px; font-size: 1.02rem; }
.bh .btn--ghost { border: 2.5px solid var(--fg); color: var(--fg); background: transparent; }
.bh .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.bh .btn--light { background: #FFFFFF; color: #3F4752; border-radius: 2px; min-height: 58px; padding: 0 34px; }
.bh .btn--light:hover { background: #F0F0EE; }
.bh .btn--line-light { border: 1.5px solid rgba(255, 255, 255, .7); color: #FFFFFF; border-radius: 2px; min-height: 58px; padding: 0 30px; }
.bh .btn--line-light:hover { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; }
.bh .link { font-family: var(--f-display); font-weight: 600; font-variation-settings: normal; }
.bh .link:hover { color: var(--slate); }
.bh .plate { font-family: var(--f-plate); box-shadow: inset 0 0 0 1.5px var(--red), 0 1px 0 rgba(0, 0, 0, .15); }
.bh .pill--sale { background: var(--slate); color: #FFFFFF; }

/* Sort infolinje */
.bh .topbar { display: block; background: var(--ink); color: #E6E6E6; font-size: .92rem; border: 0; }
.bh .topbar__in { justify-content: center; gap: 0; min-height: 46px; flex-wrap: nowrap; }
.bh .topbar a { padding: 0 28px; min-height: 46px; border-left: 1px solid #2C2C2C; letter-spacing: .02em; }
.bh .topbar a:last-child { border-right: 1px solid #2C2C2C; }
.bh .topbar svg { width: 15px; height: 15px; opacity: 1; }
.bh .topbar a:hover { color: #FFFFFF; background: #1A1A1A; }
@container bh (max-width: 900px) {
  .bh .topbar { display: block; }
  .bh .topbar__addr { display: none !important; }
  .bh .topbar a { padding: 0 16px; font-size: .84rem; }
}
@container bh (max-width: 400px) { .bh .topbar a { padding: 0 10px; font-size: .8rem; } .bh .topbar svg { display: none; } }

/* Header */
.bh .hdr { background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
.bh .hdr__nav a { font-family: var(--f-display); font-weight: 500; font-variation-settings: normal; font-size: 1.02rem; color: var(--soft); }
.bh .hdr__nav a:hover { background: var(--bg-2); color: var(--fg); }
.bh .hdr__nav a[aria-current="page"] { color: var(--fg); }
.bh .hdr__nav a[aria-current="page"]::after { background: var(--slate); }
.bh .hdr__menu { border-color: var(--line); font-family: var(--f-display); }
.bh .hdr__sheet { background: #FFFFFF; }
.bh .hdr__sheet a { font-family: var(--f-display); font-weight: 600; font-variation-settings: normal; }
.bh .hdr__sheet a[aria-current="page"] { color: var(--slate); }

/* Foto-hero: centreret tekst på mørk overlay */
.bh .hero { min-height: clamp(460px, 54cqi, 680px); align-items: center; }
.bh .hero__shade { background: rgba(8, 8, 8, .55); }
.bh .hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: clamp(64px, 9cqi, 120px); }
.bh .hero__txt { justify-items: center; max-width: 900px; }
.bh .hero__txt .t-hero { text-shadow: none; }
.bh .hero__txt .t-lead { color: #E6E6E6; max-width: 56ch; }
.bh .hero__cta { justify-content: center; margin-top: 10px; }
.bh .hero__dots { justify-content: center; }
@container bh (max-width: 760px) { .bh .hero__in { padding-top: 72px; } }

/* Pladsholder-facade i gråtoner */
.bh .facade { background: #111111; }
.bh .facade__sky { background: radial-gradient(90% 60% at 50% 100%, rgba(255, 236, 205, .07), transparent 60%), linear-gradient(180deg, #0B0B0C 0%, #141517 55%, #1F2124 100%); }
.bh .facade__intro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: clamp(56px, 8cqi, 104px) clamp(32px, 4cqi, 56px); gap: 18px; }
.bh .facade__intro .t-hero { max-width: 18ch; }
.bh .facade__intro .t-lead { color: #CFCFCF; max-width: 56ch; margin-inline: auto; }
.bh .building__wall { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25)), repeating-linear-gradient(90deg, #2B2D30 0 14px, #34373B 14px 16px, #24262A 16px 30px, #2E3034 30px 32px); box-shadow: 0 -1px 0 #45484D inset; }
.bh .building__wall::before { background: linear-gradient(180deg, #3D4044, #1F2023); }
.bh .door__frame { box-shadow: 0 0 0 6px #191A1C, 0 0 0 7px #44474C; }
.bh .facade__ground { background: linear-gradient(180deg, #1B1C1E, #121314); box-shadow: inset 0 1px 0 #2D2F33; }
@container bh (max-width: 760px) { .bh .building__wall { background: linear-gradient(180deg, #232427, #161719); } .bh .door__frame { box-shadow: 0 0 0 3px #191A1C, 0 0 0 4px #44474C; } }

/* Fotokort: billede, skifergrå titelbjælke, centreret tekst */
.bh .legs-sec { padding-block: clamp(56px, 8cqi, 104px); }
.bh .legs { gap: clamp(20px, 3cqi, 40px); }
.bh .leg, .bh .car, .bh .area { border: 0; border-radius: 0; background: transparent; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
.bh .leg:hover, .bh .car:hover { transform: none; box-shadow: none; border: 0; }
.bh .leg__img, .bh .car__stage, .bh .area__img { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; }
.bh .leg__bar, .bh .car__bar, .bh .area__bar {
  margin-top: 14px; padding: 20px 16px; background: var(--slate); color: #FFFFFF;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; text-align: center; text-wrap: balance;
  transition: background-color .25s var(--ease);
}
.bh .leg:hover .leg__bar, .bh .car:hover .car__bar { background: var(--slate-press); }
.bh .leg__body, .bh .car__body { padding: 18px 6px 4px; text-align: center; align-items: center; }
.bh .leg__body > p, .bh .car__tag { color: var(--muted); max-width: 44ch; margin-inline: auto; }
.bh .leg__meta, .bh .car__body .chips { justify-content: center; }
.bh .leg__go { margin-top: auto; }
.bh .leg:hover .leg__go { background: var(--fg); color: var(--bg); }
.bh .car__foot { width: 100%; justify-content: center; border-top: 0; padding-top: 6px; margin-top: 6px; }
.bh .car__price { text-align: center; }
.bh .car__price b { font-family: var(--f-display); font-weight: 700; }
.bh .car__arrow { display: none; }
.bh .car__flags { left: 12px; bottom: 12px; }
.bh .area__body { padding: 16px 4px 4px; }
.bh .area__foot { border-top: 1px solid var(--line); }
.bh .area.is-active .area__bar { background: var(--ink); }
@container bh (max-width: 900px) { .bh .leg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; } .bh .leg__img { aspect-ratio: 16 / 10; min-height: 0; } }

/* Studie-baggrund til tegninger (lys væg, mørk sokkel, gulv) */
.bh .car__stage, .bh .gallery__stage, .bh .leg__draw--day {
  background: linear-gradient(180deg, #E4E3DF 0%, #DDDBD6 63%, #2F3134 63.2%, #2F3134 66.5%, #CFCCC5 66.7%, #C6C3BB 100%);
  --v-fill: #FFFFFF; --v-line: #1C1C1C; --v-glass: #C9D3DC; --v-tyre: #1C1C1C; --v-rim: #C4C7CB;
}
.bh .leg__draw--night, .bh .leg__draw--concrete {
  background: linear-gradient(180deg, #5C6672 0%, #535D69 63%, #2B2F34 63.2%, #2B2F34 66.5%, #464E58 66.7%, #3E4650 100%);
  --v-fill: #6A7480; --v-line: #F2F2F2; --v-glass: #7D8995; --v-tyre: #15171A; --v-rim: #9AA3AD;
}
.bh .leg__draw--show { background: radial-gradient(45% 70% at 50% 0%, rgba(255, 250, 240, .45), transparent 72%), linear-gradient(180deg, #34363A 0%, #2A2C2F 63%, #1B1C1E 63.2%, #232427 100%); }
.bh .co__dot { background: var(--slate); box-shadow: 0 0 0 4px rgba(74, 85, 98, .22); }
.bh .road__land { filter: saturate(.4); }

/* Gitre med få kort centreres */
.bh .fleet { gap: clamp(24px, 3cqi, 40px); }
.bh .fleet--c1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bh .fleet--c2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
@container bh (max-width: 640px) { .bh .fleet--c1, .bh .fleet--c2 { grid-template-columns: minmax(0, 1fr); } }

/* Hvide kort med streg-ikoner på sand */
.bh .cluster { background: transparent; border: 0; border-radius: 0; overflow: visible; gap: clamp(16px, 2.2cqi, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.bh .tell { background: #FFFFFF; color: #141414; border-radius: var(--r-l); padding: clamp(24px, 3.2cqi, 40px); gap: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.bh .tell__head { display: flex; align-items: center; gap: 22px; }
.bh .tell__icon { flex: none; color: #141414; }
.bh .tell__icon svg.ic { width: 52px; height: 52px; stroke-width: 1.35; }
.bh .tell__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 2cqi, 1.55rem); line-height: 1.2; }
.bh .tell p { color: #6D6D6D; font-size: 1.02rem; }

/* Kontakt på skifergrå */
.bh .info { border-top: 0; text-align: center; }
.bh .info__in { display: grid; gap: 20px; justify-items: center; max-width: 640px; font-size: 1.15rem; line-height: 1.5; }
.bh .info__in .t-h2 { margin-bottom: 8px; }
.bh .info__k { color: var(--muted); font-size: .98rem; }
.bh .info a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bh .info__phone { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; }
.bh .info__fb { display: inline-flex; gap: 8px; align-items: center; }
.bh .info__fb svg { width: 18px; height: 18px; }

/* Velkomstkort på mørk baggrund */
.bh .welcome { position: relative; overflow: hidden; background: linear-gradient(180deg, #1A1A1A, #0E0E0E); padding-block: clamp(56px, 9cqi, 120px); }
.bh .welcome__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) brightness(.42); }
.bh .welcome__card { position: relative; background: #FFFFFF; color: #141414; max-width: 720px; margin-inline: auto; padding: clamp(28px, 5cqi, 64px); text-align: center; display: grid; gap: 24px; justify-items: center; border-radius: 4px; }
.bh .welcome__card p { color: #6D6D6D; font-size: 1.12rem; max-width: 52ch; }
.bh .welcome__btns { display: grid; gap: 14px; justify-items: center; }
.bh .welcome__btns .btn { min-width: min(280px, 100%); }
.bh .welcome .btn--ghost { border-color: #141414; color: #141414; }
.bh .welcome .btn--ghost:hover { background: #141414; color: #FFFFFF; }
.bh .welcome .btn--signal { background: var(--slate); color: #FFFFFF; }
.bh .welcome__phone { color: #555555; font-size: 1.2rem; }

/* Formularer og kort */
.bh .card--ink { background: var(--slate); border-color: var(--slate); --bg: #3F4954; --panel: #56616E; --line: rgba(255, 255, 255, .25); --muted: #D3D8DE; --soft: #EEF1F4; --fg: #FFFFFF; --signal: #FFFFFF; --signal-press: #ECEFF2; --signal-ink: #2F3842; color-scheme: dark; }
.bh .fld input:focus, .bh .fld select:focus, .bh .fld textarea:focus { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(74, 85, 98, .18); }
.bh .card--ink .fld input:focus, .bh .card--ink .fld select:focus, .bh .card--ink .fld textarea:focus { border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }
.bh .fld input:user-invalid, .bh .form__err { color: var(--red); }
.bh .fld input:user-invalid { border-color: var(--red); }
.bh .price[aria-pressed="true"] { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(74, 85, 98, .16); }
.bh .cal__w.is-sel, .bh .wk__c.is-sel { background: var(--slate); }
.bh .equip svg { color: var(--slate); }
.bh .price__amt, .bh .gauge b, .bh .bigprice b, .bh .phone-big a, .bh .phone-big .num, .bh .unit__price b, .bh .leg__price { font-family: var(--f-display); }
.bh .faq summary, .bh .step::before { font-family: var(--f-display); font-variation-settings: normal; font-weight: 600; }
.bh .sample { background: #F3E7C9; color: #4A3B12; }

/* Ikonbjælke i bunden på mobil */
@container bh (max-width: 900px) {
  .bh .mbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--slate); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bh .mbar__i { display: grid; place-items: center; gap: 3px; padding: 11px 0 9px; color: #FFFFFF; border-left: 1px solid rgba(255, 255, 255, .22); font-family: var(--f-body); font-size: .72rem; font-weight: 600; line-height: 1.1; }
  .bh .mbar__i:first-child { border-left: 0; }
  .bh .mbar__i svg { width: 24px; height: 24px; }
  .bh .mbar__i:active { background: var(--slate-press); }
}

.bh .hero__dots { position: absolute; left: 0; right: 0; bottom: 22px; }