/* Lørenpynten dørklokke — «Lund» (papir + salvie). Beholder klassenavn fra
   originalen slik at eksisterende markup/JS virker uendret. */
/* Selv-hostede fonter (ingen ekstern Google-forespørsel — GDPR). Se fonts/fonts.css. */
@import url('fonts/fonts.css');

:root {
  --bg: #f0f2ec;
  --surface: #ffffff;
  --surface-2: #fafbf7;
  --ink: #232821;
  --muted: #616a5c;
  --faint: #8a9081;
  --hair: #e4e8db;
  --hair-soft: #eef1e8;
  --accent: #4f6a4a;
  --accent-d: #3d5539;
  --accent-soft: #e7ede2;
  --ok: #3d5539;
  --ok-soft: #e6efe1;
  --warn: #8a6a1f;
  --warn-soft: #f6ecd8;
  --danger: #b23b34;
  --danger-soft: #f6e6e5;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-decoration: underline; }
a:hover { color: var(--accent-d); }

/* Nav (admin beholder den; besøksside/beboer bruker slank merke-header) */
.top-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.top-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  padding: 16px 12px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.top-nav a:hover { color: var(--ink); }
.top-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.top-nav .nav-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin-right: 10px;
  padding: 12px 4px;
  border-bottom: none;
}
.top-nav .nav-brand::before {
  content: 'L';
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
}

/* Slank merke-header for besøksside / beboer (uten faner) */
.brandbar {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface);
}
.brandbar .mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; flex-shrink: 0;
}
.brandbar .bt { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; line-height: 1.15; }
.brandbar .bt small { display: block; color: var(--faint); font-weight: 400; font-size: .76rem; font-family: var(--sans); margin-top: 1px; }

.container {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

h1 {
  font-family: var(--serif);
  font-size: 1.95rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.kicker {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}

.subtitle {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 22px;
}
.subtitle b { color: var(--accent); font-weight: 600; }

/* Søk */
.search-box {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--hair);
  border-radius: 14px;
  font-size: 1.05rem;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 16px;
}
.search-box::placeholder { color: var(--faint); }
.search-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Seksjonsliste */
.resident-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* «Noen ringer på»-banner på beboersiden. Vises når det ringer mens siden alt er
   åpen — da kommer beboeren ikke videre via varselet på iOS.

   BUNNARK, ikke toppstripe. Tre målte grunner:
   1) iOS-varselet legger seg over toppen — og ringesignalet gjentar push med
      renotify, så det faller ned IGJEN gjennom hele ringevinduet. En toppstripe
      ligger bak varselet akkurat når den trengs. Bunnen dekkes aldri av iOS.
   2) Tommelsonen er nederst; alle anrops-UI-er legger svar-handlingen der.
   3) Arbeidsdeling: systemet annonserer øverst, appen handler nederst — i
      stedet for to elementer som roper det samme i samme hjørne. */
.ring-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(24, 28, 21, .45);
  animation: ring-banner-inn .25s ease-out;
}
.ring-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--accent, #2f5233); color: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .55);
  /* Bevisst en ren opacity-fade, IKKE en translate-innglidning. En animasjon som
     flytter elementet gjør plasseringen avhengig av at animasjonen faktisk kjører
     — skjer det ikke (throttlet fane, bakgrunnsvindu, reduced motion, en gammel
     WebView), blir arket stående utenfor skjermen og «Svar» er uåpnelig.
     Med fade er elementet på riktig plass uansett; animasjonen er kun pynt. */
  animation: ring-banner-inn .25s ease-out;
}
@keyframes ring-banner-inn { from { opacity: 0; } to { opacity: 1; } }
.ring-banner-txt { display: flex; flex-direction: column; gap: 2px; text-align: center; min-width: 0; }
.ring-banner-txt strong { font-size: 1.25rem; }
.ring-banner-txt span { font-size: .9rem; opacity: .85; }
.ring-banner-btn {
  border: none; border-radius: 14px; cursor: pointer;
  background: #fff; color: var(--accent, #2f5233);
  font: inherit; font-weight: 700; font-size: 1.15rem;
  padding: 16px; min-height: 56px; width: 100%;   /* stor, trykksikker, i tommelsonen */
}
.ring-banner-btn:active { transform: scale(.97); }
/* «Ignorer» er bevisst nedtonet: den skal finnes (ingen automatisk navigering
   uten samtykke), men aldri konkurrere med Svar. */
.ring-ignore-btn {
  border: none; background: none; cursor: pointer;
  color: #fff; opacity: .7; font: inherit; font-size: .9rem;
  padding: 10px; min-height: 44px;
}
@media (prefers-reduced-motion: reduce) { .ring-banner, .ring-scrim { animation: none; } }

.resident-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 14px 14px 14px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.resident-item:hover {
  border-color: #cdd6c3;
  box-shadow: 0 6px 18px -12px rgba(35,40,33,.4);
}

.resident-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.resident-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}
/* ALLE beboernavn skal vises. Ringetavla erstatter papirlista på inngangsdøra, og
   en besøkende må kunne finne den hen skal ringe på. Sto tidligere med
   `white-space: nowrap` + ellipsis, som klippet lista etter to–tre navn
   («Patrik Warnaar, Idar Sundal Rangsæter, August Wa…») — da er den ubrukelig for
   nettopp det den er til for. Nå brytes teksten over flere linjer i stedet. */
.resident-names {
  color: var(--muted);
  font-size: .9rem !important;
  margin: 3px 0 0 0 !important;
  line-height: 1.35;
  overflow-wrap: break-word;   /* et enkelt langt navn sprenger ikke kortet */
}
.resident-section { color: var(--muted); font-size: .85rem; margin-top: 2px; }

.ring-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  height: 52px;
  padding: 0 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.ring-btn:hover { background: var(--accent-d); }
.ring-btn:disabled { background: var(--faint); cursor: not-allowed; }

.status-msg {
  text-align: center;
  padding: 40px 16px;
  color: var(--faint);
  font-size: 1rem;
}

/* Samtale-overlay */
.call-overlay {
  position: fixed;
  inset: 0;
  /* Safari-verktøylinja kommer og går; med ren vh/inset havner nederste knapp
     bak den. dvh følger den synlige flaten. vh-linja står som fallback for
     nettlesere uten dvh-støtte (topp+height vinner over bottom:0 fra inset). */
  height: 100vh;
  height: 100dvh;
  background: #1b2016;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #eef0e6;
}

.call-overlay h2 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 8px; }
.call-overlay p { color: #a2ab92; margin-bottom: 24px; }

.call-overlay iframe {
  width: 100%; height: 100%;
  border: none;
  position: absolute; inset: 0;
}

.call-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 11;
  padding: 16px 18px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: rgba(79, 106, 74, .96);
  pointer-events: none;
}
.call-status:empty { display: none; }
.call-status.timeout { background: rgba(138, 106, 31, .96); }
.call-status.connected { background: rgba(61, 85, 57, .97); }

.hangup-btn {
  position: absolute;
  bottom: 34px;
  min-width: 200px;
  padding: 16px 32px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 15px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
}
.hangup-btn:hover { background: #9c332d; }

/* Knapperad nederst i samtale-vinduet (beboer): «Åpne dør» + «Legg på». */
.call-actions {
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  z-index: 10;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 18px;
}

.door-btn {
  min-width: 220px;
  padding: 17px 32px;
  background: #5f8a55;
  color: #fff;
  border: none;
  border-radius: 15px;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}
.door-btn:hover { background: #4f7a47; }
.door-btn:disabled { opacity: .6; cursor: default; }

/* Beboer-side */
.setup-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 16px;
}

.setup-card h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.step-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 600;
}
.step-head h2 { margin: 0; font-size: 1.1rem; }

.hint-text {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.setup-card select, .setup-card button {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-family: var(--sans);
  margin-bottom: 12px;
}

.setup-card select {
  border: 1.5px solid var(--hair);
  background: var(--surface);
  color: var(--ink);
}
.setup-card select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  min-height: 56px;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-d); }
.btn-primary:disabled { background: var(--faint); cursor: not-allowed; }

.btn-success { background: #5f8a55; color: #fff; border: none; font-weight: 600; cursor: pointer; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}
.status-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.status-badge.ready { background: var(--ok-soft); color: var(--ok); }
.status-badge.waiting { background: var(--warn-soft); color: var(--warn); }

.inline-status {
  font-size: .92rem;
  line-height: 1.45;
  margin-top: 6px;
}
.inline-status.info { color: var(--muted); }
.inline-status.success { color: var(--ok); }
.inline-status.error { color: var(--danger); }

/* Besøkendes venteskjerm (over videoruta til beboeren svarer) */
.call-wait {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 28px; color: #eef0e6; background: #1b2016;
}
.call-wait::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, #232a1c 0 22px, #1e2418 22px 44px);
}
.cw-state { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 300px; }

/* Fase 3: beboerens video fyller flaten når kameraet er PÅ (video-aktiv på
   .call-wait). Statusinnholdet flytter ned på en skygge, og tekstene om at
   «kameraet er av» skjules — de ville vært løgn med ansiktet på skjermen. */
.beboer-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none; z-index: 1;
}
.video-skygge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 230px;
  display: none; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(20, 24, 15, 0), rgba(20, 24, 15, .55) 45%, rgba(20, 24, 15, .88));
}
.call-wait.video-aktiv .beboer-video { display: block; }
.call-wait.video-aktiv .video-skygge { display: block; }
.call-wait.video-aktiv { justify-content: flex-end; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
.call-wait.video-aktiv .cw-orb,
.call-wait.video-aktiv .cw-sub,
.call-wait.video-aktiv .cw-hint,
/* Også status og tittel: med ansiktet på skjermen er «I samtale» åpenbart
   (eierbeslutning 02.08). Kun «Legg på» blir igjen på skyggen — dørbanneret
   og merkelappen bærer sine egne beskjeder når de trengs. */
.call-wait.video-aktiv .cw-statusline,
.call-wait.video-aktiv #cwConnected h2 { display: none; }

/* «I samtale»-tilstanden (gjestesiden) */
.cw-statusline { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cw-livedot { width: 8px; height: 8px; border-radius: 50%; background: #7fb473; flex-shrink: 0; }
.cw-statusline span:last-child {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #a9c19e;
}

/* «Døra er åpen»: banner OVER samtalen — samtalen fortsetter urørt under.
   Etter ~10 s krymper det til .door-badge, som blir stående som bevis. */
.door-banner {
  position: absolute; left: 14px; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 3;
  background: #3d6b36; border-radius: 18px; padding: 17px 19px;
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: 0 10px 26px rgba(20, 40, 16, .45);
  animation: ring-banner-inn .25s ease-out; /* opacity-fade — aldri translate */
  text-align: left;
}
.door-banner-sirkel {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.door-banner-tittel { font-family: var(--serif, Georgia, serif); font-size: 1.32rem; font-weight: 600; color: #fff; line-height: 1.15; }
.door-banner-tekst { font-size: .9rem; color: #d5e5cf; margin-top: 4px; line-height: 1.45; }
.door-badge {
  position: absolute; left: 14px; top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(61, 107, 54, .5); border: 1px solid rgba(143, 192, 127, .45);
  border-radius: 999px; padding: 7px 13px;
  font-size: .8rem; font-weight: 600; color: #d5e5cf;
}

/* Fase 3: gjestens selvbilde — hjørnebekreftelse, ikke innhold (104×138 per
   design). Flyttes ned mens dørbanneret er oppe, så de ikke overlapper. */
.selfie-wrap {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px;
  z-index: 4;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  transition: top .2s ease-out;
}
.call-wait.banner-aapen .selfie-wrap { top: calc(196px + env(safe-area-inset-top, 0px)); }
.selfie {
  position: relative; width: 104px; height: 138px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22); background: #262d21;
}
.selfie video { width: 100%; height: 100%; object-fit: cover; display: block; }
.selfie-flip {
  position: absolute; right: 6px; bottom: 6px;
  width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(20, 24, 15, .55); color: #e8ece2;
  display: flex; align-items: center; justify-content: center;
}
.selfie-label {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(95, 138, 85, .22); border-radius: 9px; padding: 4px 9px;
  font-size: .72rem; font-weight: 600; color: #cfe0c6;
}
.selfie-dot { width: 7px; height: 7px; border-radius: 50%; background: #8fc07f; flex-shrink: 0; }
.cw-orb { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.cw-orb .pulse {
  position: absolute; width: 96px; height: 96px; border-radius: 50%;
  background: #5f8a55; animation: callorb 1.8s ease-out infinite;
}
.cw-orb .pulse:nth-of-type(2) { animation-delay: .9s; }
.cw-core {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  background: #33402b; display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.cw-orb--still .cw-core { opacity: .85; }
.call-wait h2 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; line-height: 1.2; }
.cw-dots { display: flex; gap: 7px; margin: 16px 0 4px; }
.cw-dots span { width: 8px; height: 8px; border-radius: 50%; background: #c9d6b0; animation: dotblink 1.4s infinite; }
.cw-dots span:nth-child(2) { animation-delay: .2s; }
.cw-dots span:nth-child(3) { animation-delay: .4s; }
.cw-sub { color: #a2ab92; font-size: 1rem; line-height: 1.5; margin-top: 12px; }
.cw-hint { color: #8f9a82; font-size: .84rem; line-height: 1.5; margin-top: 16px; max-width: 260px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.cw-hint b { color: #c9d6b0; font-weight: 600; }
.cw-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 280px; margin-top: 28px; }
.btn-retry {
  height: 60px; background: #5f8a55; color: #fff; border: none; border-radius: 15px;
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600; cursor: pointer;
}
.btn-retry:hover { background: #4f7a47; }
.cw-cancel {
  height: 56px; background: transparent; color: #eab0a9;
  border: 1.5px solid rgba(178,59,52,.55); border-radius: 15px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.cw-cancel:hover { background: rgba(178,59,52,.12); }
@keyframes callorb { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }
@keyframes dotblink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* Tapte anrop (beboer) — bruker eksisterende farge-tokens, ingen nye farger. */
.missed-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--hair-soft);
}
.missed-row:last-child { border-bottom: none; }
.missed-where { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.missed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex-shrink: 0; transform: translateY(-1px); }
.missed-label { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.missed-row.read .missed-label { color: var(--muted); font-weight: 500; }
.missed-time { color: var(--faint); font-size: .86rem; white-space: nowrap; flex-shrink: 0; }
.missed-seen-btn {
  width: 100%; margin-top: 14px; padding: 13px; min-height: 50px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 12px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.missed-seen-btn:hover { border-color: var(--accent); color: var(--accent); }
.missed-empty { color: var(--faint); font-size: .95rem; padding: 20px 2px; text-align: center; }

/* Faner på beboersiden (Varsling / Tapte anrop) */
.beboer-tabs { display: flex; gap: 6px; margin-bottom: 22px; }
.btab {
  flex: 1; padding: 11px 12px; border: 1px solid var(--hair); border-radius: 11px;
  background: var(--surface); color: var(--muted); font-family: var(--sans);
  font-size: .95rem; font-weight: 600; cursor: pointer; transition: all .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btab:hover { border-color: #cdd6c3; color: var(--ink); }
.btab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.btab-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--warn); color: #fff; font-size: .74rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.btab.active .btab-badge { background: #fff; color: var(--accent); }

@media print {
  .top-nav, .brandbar { display: none !important; }
}