.theme-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: var(--gold-light, var(--gold2));
  font-size: 18px;
  transition: transform .25s, background .25s, border-color .25s;
}

.theme-toggle:hover {
  transform: translateY(-2px) rotate(12deg);
  border-color: var(--gold);
  background: rgba(214, 173, 85, .12);
}

.mobile-theme { display: none; margin-left: auto; margin-right: 8px; }

.navbar-title {
  display: grid;
  color: #ffffff;
  font: 800 15px/1.1 'Manrope', sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
}

.navbar-title small {
  margin-top: 5px;
  color: var(--gold2);
  font: 600 8px/1 'DM Sans', sans-serif;
  letter-spacing: .18em;
}

/* Dedicated hero photography with layered contrast for readable content */
.hero {
  background-image:
    linear-gradient(90deg, rgba(8, 8, 9, .76) 0%, rgba(8, 8, 9, .56) 40%, rgba(8, 8, 9, .22) 72%, rgba(8, 8, 9, .4) 100%),
    radial-gradient(circle at 76% 28%, rgba(214, 173, 85, .12), transparent 34%),
    url('assets/images/hero-communication.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, var(--bg));
}

.hero .container { position: relative; z-index: 2; }

.hero h1,
.hero .lead,
.hero .eyebrow {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
}

/* Clear white typography for the dark website, navbar and footer */
html:not([data-theme="light"]) {
  --cream: #ffffff;
  --muted: #ffffff;
}

.nav .brand,
.nav-links a,
.mobile-menu a,
.footer,
.footer .brand,
.footer b,
.footer .brand-copy b {
  color: #ffffff;
}

.footer p,
.footer a,
.footer .copyright,
.footer .brand-copy small {
  color: #ffffff;
}

.nav-links a:hover,
.mobile-menu a:hover,
.footer a:hover {
  color: #ffffff;
}

html:not([data-theme="light"]) h1,
html:not([data-theme="light"]) h2,
html:not([data-theme="light"]) h3,
html:not([data-theme="light"]) .person b,
html:not([data-theme="light"]) .contact b {
  color: #ffffff;
}

html[data-theme="light"] {
  --bg: #f6f2e9;
  --bg2: #ede7dc;
  --surface: #fffdf8;
  --surface2: #e8e0d2;
  --cream: #242019;
  --muted: #6f685d;
  --border: rgba(142, 102, 35, .28);
  --line: rgba(67, 54, 34, .12);
  --shadow: 0 28px 70px rgba(73, 57, 31, .14);
}

html[data-theme="light"] body { color-scheme: light; }
html[data-theme="light"] .nav,
html[data-theme="light"] .nav.scrolled { background: rgba(28, 25, 21, .94); }
html[data-theme="light"] .mobile-menu,
html[data-theme="light"] .demo-side,
html[data-theme="light"] .composer textarea,
html[data-theme="light"] .field input { background: #f8f3ea; color: var(--cream); }
html[data-theme="light"] .mobile-menu { background: #1c1915; }
html[data-theme="light"] .hero {
  background-image:
    linear-gradient(90deg, rgba(246,242,233,.82) 0%, rgba(246,242,233,.62) 42%, rgba(246,242,233,.25) 75%, rgba(246,242,233,.42) 100%),
    url('assets/images/hero-communication.jpg');
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero .lead,
html[data-theme="light"] .hero .eyebrow { text-shadow: 0 2px 15px rgba(255,255,255,.95); }
html[data-theme="light"] .chat-card { background: rgba(255,253,248,.86); }
html[data-theme="light"] .footer { background: #27231d; color: #f7f3e8; }
html[data-theme="light"] .footer .brand,
html[data-theme="light"] .footer b { color: #f7f3e8; }
html[data-theme="light"] .login-visual { background: linear-gradient(135deg,rgba(214,173,85,.18),transparent),#ede7dc; }
html[data-theme="light"] .login-card { background: #fffdf8; }

@media (max-width: 768px) {
  .nav-links .theme-toggle { display: none; }
  .mobile-theme { display: grid; }
  .navbar-title { display: none; }
  .brand img { width: 135px !important; }
  .hero { background-attachment: scroll; background-position: 58% center; }
}

@media (max-width: 390px) {
  .brand img { width: 112px !important; }
}