/* ============================================================
   WATCHTOWER DIGITAL MANAGEMENT — DARK PROTOCOL DESIGN SYSTEM
   Dark mode first: charcoal surfaces, steel-blue accents,
   copper highlights. Light tower on dark surfaces.
   ============================================================ */
:root{
  --bg:#10151b;            /* page background — deep charcoal */
  --bg-2:#161d25;          /* raised band / alt section */
  --surface:#1b242e;       /* card surface */
  --surface-2:#202b36;     /* hover surface */
  --ink:#f1f5f8;           /* primary text on dark */
  --muted:#9fb0bd;         /* secondary text */
  --line:#2c3844;          /* hairline borders */
  --cobalt:#4da3c7;        /* steel-blue accent (light enough for dark bg) */
  --cobalt-deep:#7fc4e0;   /* hover accent */
  --copper:#d9a066;        /* copper accent */
  --copper-dim:#a97c4b;
  --radius:12px;
  --shadow:0 14px 38px rgba(0,0,0,.45);
  --font-sans:"DM Sans",Inter,system-ui,sans-serif;
  --font-display:"Source Serif 4",Georgia,serif;
  /* legacy aliases — old inline styles map onto dark equivalents */
  --ivory:var(--bg);
  --paper:var(--surface);
  --ink-2:#0b0f14;
  --gold:var(--copper);
  --signal:var(--cobalt);
  --coral:var(--cobalt);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{background:var(--bg)!important;color:var(--ink)!important;font-family:var(--font-sans)!important;line-height:1.65!important}
a{color:inherit}
::selection{background:rgba(77,163,199,.35)}

/* ---------- header ---------- */
.site-header,.wrap header{
  background:rgba(16,21,27,.92)!important;
  border-bottom:1px solid var(--line)!important;
  backdrop-filter:blur(12px)!important;
}
.header-container,.container,.container-narrow{max-width:1160px!important}
.header-container{min-height:104px}

/* brand — compact emblem, never touches the border */
.brand-logo{display:flex!important;align-items:center!important;gap:12px!important}
.brand-logo img{height:84px!important;width:72px!important;object-fit:contain}
.top .mark,.wrap .mark{width:72px!important;height:72px!important}
.top .mark img,.wrap .mark img{width:100%!important;height:100%!important;object-fit:contain}
.top .mark{background:transparent!important}
.brand-words{display:flex;flex-direction:column;justify-content:center;line-height:1}
.brand-words strong{font-size:18px;letter-spacing:.06em;color:var(--ink)}
.brand-words small{font-size:9px;letter-spacing:.15em;color:var(--cobalt);margin-top:6px;white-space:nowrap}
.brand .mark{background:transparent!important}
.brand .mark img{opacity:1!important;filter:none!important}
.brand .w1{color:var(--ink)!important}
.brand .w2{color:var(--cobalt)!important}

/* nav */
.nav-links{gap:18px!important}
.nav-links a{color:var(--muted)!important}
.nav-links a:hover,.nav-links a.active{color:var(--cobalt)!important}
.header-phone{color:var(--cobalt)!important}
.header-contact{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.header-email{color:var(--muted);font-size:13px}
.header-email:hover{color:var(--cobalt)}

/* buttons */
.btn{border-radius:8px!important;font-weight:700!important;transition:transform .2s,background .2s,box-shadow .2s!important}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.wrap .primary{background:var(--cobalt)!important;color:#0b1117!important;border-color:var(--cobalt)!important;box-shadow:none!important}
.btn-primary:hover,.wrap .primary:hover{background:var(--cobalt-deep)!important;color:#0b1117!important}
.btn-secondary{background:transparent!important;color:var(--cobalt)!important;border:1px solid var(--cobalt)!important}
.btn-secondary:hover{background:rgba(77,163,199,.08)}
.site-header .nav-links a.btn-primary,.nav-links .btn-primary{color:#0b1117!important}
.site-header .nav-links .btn-primary{min-width:118px!important;padding-left:18px!important;padding-right:18px!important;white-space:nowrap!important;text-align:center!important;font-size:.86rem!important;letter-spacing:.01em!important}
.site-header .nav-links .btn-secondary{min-width:128px!important;padding-left:18px!important;padding-right:18px!important;white-space:nowrap!important;text-align:center!important;font-size:.86rem!important;letter-spacing:.01em!important}

/* ---------- header bottom accent: quiet copper/steel signal dots ----------
   Replaces the old sweeping gradient line (read as "cheap"). A static row of
   fading dots, alive only on hover of the header. */
/* header bottom edge: clean single hairline — the radar canvas below IS the animation */
.wrap header::after,.site-header::after{content:none!important}

/* ---------- sections & cards ---------- */
section[style*="radial-gradient"],section[style*="padding: 60px"]{background:var(--bg)!important;border-bottom:1px solid var(--line)!important}
.section[style*="padding-top"],section[style*="padding-top"]{background:var(--bg)!important}
.site-footer{background:var(--ink-2)!important;border-color:var(--ink-2)!important;color:#b9c6d0!important}
.site-footer strong{color:#fff}
.site-footer a,.footer-contact{color:var(--copper)!important}

/* legacy page wrappers */
.wrap{max-width:1160px!important}
.wrap header{border-bottom:1px solid var(--line)!important}
.wrap .hero{padding:86px 0 76px!important}
.wrap .hero h1{font-family:var(--font-display)!important;color:var(--ink)!important}
.wrap .hero h1 em{color:var(--cobalt)!important}
.wrap .hero .eyebrow{color:var(--copper)!important}
.wrap .note{background:var(--surface)!important;border:1px solid var(--copper-dim)!important;box-shadow:var(--shadow)!important}
.wrap .card{box-shadow:none!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important}
.wrap .card:first-child{border-color:var(--cobalt)!important}
.wrap .section.alt{background:var(--bg-2)!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
.wrap footer{border-color:var(--line)!important;color:var(--muted)!important}
.wrap footer a{color:var(--cobalt)!important}

/* generic text on dark */
.section-title,h1,h2,h3,.card h3,.wrap .card h3{font-family:var(--font-display),serif!important;color:var(--ink)!important}
.section-subtitle,.container-narrow>p,.card p,.card li,p{color:var(--muted)!important}
.card:hover{border-color:var(--cobalt)!important;transform:translateY(-3px)}
.form-section-header{color:var(--cobalt)!important;border-color:var(--line)!important}
.form-control{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid #3a4754!important;border-radius:8px!important}
.form-control:focus{border-color:var(--cobalt)!important;box-shadow:0 0 0 3px rgba(77,163,199,.18)!important}
.form-control::placeholder{color:#74858f}
.check-group{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--ink)!important}
label,.form-label{color:var(--ink)!important}
.section-tag{background:transparent!important;color:var(--copper)!important;border:1px solid var(--copper-dim)!important;border-radius:999px!important;font-size:.76rem!important;letter-spacing:.1em!important}
.site-footer{border-top:1px solid var(--line)}

/* ---------- forms / page-level section bands ---------- */
section[style*="padding-top"]>.container-narrow>.card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important}
.site-header + section .card{box-shadow:var(--shadow)!important}
.site-header + section .card h2{color:var(--ink)!important}
.site-header + section .card h3{color:var(--cobalt)!important}
.site-header + section .card ul{color:var(--muted)!important}

/* ---------- help-eyebrow (dot-matrix strip next to "Where we can start") ---------- */
.help-eyebrow{display:flex;align-items:center;gap:14px;min-height:44px}
.help-eyebrow img{width:220px;height:44px;object-fit:contain;order:2;transform:translateX(10px);opacity:.55}
.help-eyebrow span{order:1;white-space:nowrap}

/* ---------- homepage-specific legacy rules ---------- */
.eyebrow{color:var(--copper)!important}
.wrap .note{padding:36px!important;border:1px solid var(--copper-dim)!important;box-shadow:var(--shadow)!important;border-radius:22px!important}
.wrap .note h2{color:var(--ink)!important;font-family:var(--font-display),serif!important}
.wrap .note p,.wrap .note li{color:#c3d0d9!important}
.wrap .note .signature{color:var(--ink)!important}
.wrap .note .signature span{color:var(--muted)!important}
.wrap .note .small{color:var(--copper)!important}
.wrap .note a{color:var(--cobalt)!important}
.rung,.band{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important}
.rung p,.band p{color:var(--muted)!important}
.about blockquote{color:var(--ink)!important;border-left:5px solid var(--copper)!important}
.about .who span{color:var(--muted)!important}

/* ---------- chat widget ---------- */
#watch-chat-btn{background:var(--cobalt)!important;color:#0b1117!important;border:2px solid var(--copper-dim)!important}
#watch-chat-btn svg{fill:#0b1117!important}
#watch-chat-window{font-family:var(--font-sans)!important}
#watch-chat-panel{background:var(--surface)!important;border:1px solid var(--line)!important}
#watch-chat-head{background:var(--bg-2)!important;color:var(--ink)!important}
#watch-chat-msgs{background:var(--bg-2)!important}
.watch-msg.bot{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.watch-msg.user{background:var(--cobalt)!important;color:#0b1117!important}
#watch-chat-inputrow{background:var(--bg-2)!important;border-top:1px solid var(--line)!important}
#watch-chat-input{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid #3a4754!important}
#watch-chat-send{background:var(--cobalt)!important;color:#0b1117!important}

/* ---------- responsive ---------- */

/* ---- index: "Where we can start" panel rhythm polish ---- */
.wrap .section.alt{padding-top:46px!important;padding-bottom:50px!important}
.wrap .section.alt .intro{margin-bottom:22px!important}
.wrap .section.alt .eyebrow{margin-bottom:12px!important}
.wrap .section.alt .help-eyebrow{min-height:34px!important}

@media(max-width:900px){
  .header-container{padding:12px 18px!important}
  .brand-logo img{height:56px!important}
  .nav-links{gap:8px!important}
  .nav-links .btn{padding:8px 12px!important}
  .header-phone{display:none!important}
  .wrap .hero{padding:60px 0 50px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}