/* ================================================================
   EMILIO YEPEZ — ORIGINAL BRAND PALETTE
   Edit these variables to adjust colors globally.
   Navy #11102E | Cyan #20C6D2 | White #FFFFFF
   This file loads AFTER Bootstrap and the base theme stylesheet.
   ================================================================ */
:root {
  --ink: #11112e;
  --muted: #52556b;
  --accent: #20c6d2;
  --cream: #fafafa;
  --line: #d9dbe3;
  --dark: #11102e;
}

/* Global typography and content */
body { color: var(--ink); background: #fff; line-height: 1.6; }
h1, h2, h3, h4, .brand, .quote { font-weight: 800; letter-spacing: -.045em; }
.section { padding-top: 100px; padding-bottom: 100px; }
.eyebrow, .card .num, .card-link, .article-card .meta { color: var(--accent); }
.section h2 { color: var(--ink); }

/* Header: original deep navy with cyan CTA */
.site-header { background: #11102e; border-bottom: 1px solid rgba(255,255,255,.1); }
.site-header .brand { color: #fff; }
.site-header .brand span { color: var(--accent); }
.site-header .site-links a { color: #f1f2fa; }
.site-header .site-links a:hover { color: var(--accent); }
.site-header .menu { color: #fff; }
.btn { border-radius: 0; }
.btn.primary { background: var(--accent); color: #11102e; border-color: var(--accent); }
.btn.primary:hover { background: #0ca7b6; border-color: #0ca7b6; color: #11102e; }

/* Hero: navy-to-slate gradient, oversized translucent section number */
.hero {
  background: linear-gradient(115deg, #11102e 0%, #171833 48%, #404a5b 100%);
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}
.hero h1 { color: #fff; text-transform: uppercase; font-weight: 900; line-height: .98; }
.hero h1 span { color: var(--accent); }
.hero .lede { color: #e0e4ec; }
.hero .eyebrow { color: var(--accent); }
.hero-index { color: rgba(255,255,255,.055); }
.hero .btn:not(.primary) { color: #fff; border-color: rgba(255,255,255,.75); }
.hero .btn:not(.primary):hover { color: var(--accent); border-color: var(--accent); }
.portrait { background: #25203a; }
.portrait-label { background: #11102e; color: #fff; }

/* Focus bar and credentials */
.signal { background: #fff; color: #11102e; border-bottom: 1px solid #e6e7eb; }
.signal > div { border-left: 2px solid var(--accent); padding-left: 12px; }
.proof { background: #f4f4f5; border-bottom: 0; }
.proof-item strong { color: #11102e; }

/* About / approach / expertise */
.quote { color: #11102e; }
.about-copy p, .approach-copy p { color: #45475c; }
.grid { gap: 0; }
.grid .card { border-color: #dfe1e7; }
.grid .card:hover { border-color: var(--accent); }
.approach { background: #fff; }
.approach-links a { color: #11102e; }
.approach-links a:hover { color: var(--accent); }

/* Dark navy timeline and community */
.dark { background: #11102e; color: #fff; }
.dark h2, .dark h3 { color: #fff; }
.dark .eyebrow, .event time { color: var(--accent); }
.dark p, .dark .muted { color: #c4c7d6; }
.event { border-color: rgba(255,255,255,.15); }

/* Selected work: cool light grey */
.work { background: #ededf0; }
.work .client-group { border-color: #bfc2cb; }
.client-list span { background: rgba(255,255,255,.55); }
.notice { border-left: 3px solid var(--accent); padding-left: 16px; }

/* Lighthouse diagonal cyan stripe, matching the reference */
.beam {
  background: #11102e;
  position: relative;
  overflow: hidden;
}
.beam::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 160%;
  background: #20c6d2;
  left: 48%;
  top: -30%;
  transform: rotate(38deg);
  box-shadow: 22px 0 0 #e6faff;
}
.beam::after { display: none; }

/* Insights cards */
.article-card { border-color: #dfe1e7; }
.article-card:hover { border-color: var(--accent); }
.article-card:first-child { background: #11102e; color: #fff; }
.article-card:first-child h3 { color: #fff; }
.article-card:first-child p { color: #d1d5e2; }

/* Contact: deep navy gradient with minimalist underline form */
.contact { background: linear-gradient(120deg, #11102e 0%, #151431 65%, #243f59 100%); color: #fff; }
.contact h2, .contact .contact-list a { color: #fff; }
.contact .contact-list a:hover { color: var(--accent); }
.contact-mark { color: rgba(255,255,255,.035); }
.contact form { background: transparent; }
.contact form label { color: #fff; }
.contact input:not([type=checkbox]), .contact textarea, .contact select {
  background: transparent;
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  border-radius: 0;
}
.contact select option { color: #11102e; background: #fff; }
.contact input::placeholder, .contact textarea::placeholder { color: #c8c9d6; }
.contact form small { color: #d4d7e3; }
.contact-feedback { color: #11102e; }
.footer { background: #0c0b24; color: #c4c6d4; }

@media (max-width: 991px) {
  .site-header .navbar-collapse { background: #11102e; }
  .hero { padding-top: 70px; padding-bottom: 70px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 45px; }
  .section { padding-top: 65px; padding-bottom: 65px; }
  .beam { min-height: 230px; }
}