/* ==========================================================================
   Horizon Hill Research — brand stylesheet
   Palette derived from logo:
     --navy   #1B2A4A   deep display / headings / dark sections
     --navy-2 #26395F   secondary navy
     --steel  #6B84A8   muted blue (RESEARCH wordmark)
     --gold   #F0A830   sunrise accent
     --gold-2 #F4C542   lighter sunrise highlight
     --ink    #2A3342   body text
     --mist   #F5F7FA   light section fill
   ========================================================================== */

:root {
  --navy:   #1B2A4A;
  --navy-2: #26395F;
  --steel:  #6B84A8;
  --steel-soft: #A9B9D0;
  --gold:   #F0A830;
  --gold-2: #F4C542;
  --ink:    #2A3342;
  --mist:   #F5F7FA;
  --line:   #E4E9F0;

  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- base ---------- */
body {
  color: var(--ink);
  background: #ffffff;
  font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
}

h1, h2, h3, h4, .display-font {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--navy);
  letter-spacing: -0.01em;
}

h1 { font-weight: 600; }
h2 { font-weight: 600; }

.eyebrow {
  font-family: 'Source Sans 3', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--steel);
  margin-bottom: 0.85rem;
}

a { color: var(--navy-2); }
a:hover { color: var(--gold); }

.text-gold { color: var(--gold) !important; }
.bg-mist { background: var(--mist); }
.bg-navy { background: var(--navy); }

/* ---------- navbar ---------- */
.navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar-brand { padding-top: 0; padding-bottom: 0; margin-right: 0; }
.navbar-brand img { height: 95px; width: auto; display: block; }
@media (max-width: 991.98px) {
  .navbar-brand img { height: 68px; }
}
.navbar .nav-link {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.98rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--gold); }

/* ---------- buttons ---------- */
.btn-gold {
  background: var(--gold);
  border: none;
  color: var(--navy);
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 6px;
  transition: background .18s ease, transform .18s ease;
}
.btn-gold:hover { background: var(--gold-2); color: var(--navy); transform: translateY(-1px); }

.btn-outline-navy {
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  padding: 0.62rem 1.5rem;
  border-radius: 6px;
  background: transparent;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

.btn-outline-light-gold {
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  padding: 0.62rem 1.5rem;
  border-radius: 6px;
  background: transparent;
}
.btn-outline-light-gold:hover { background: var(--gold); color: var(--navy); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 480px at 78% -10%, rgba(240,168,48,0.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--mist) 100%);
  padding: 6.5rem 0 5.5rem;
  overflow: hidden;
}
.hero .sun-arc {
  position: absolute;
  right: -120px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, rgba(244,197,66,0.35), rgba(240,168,48,0.05) 62%, transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.06;
  font-weight: 600;
}
.hero .lead {
  font-size: 1.22rem;
  color: var(--navy-2);
  max-width: 640px;
}

/* thin gold rule used as a signature divider */
.rule-gold {
  width: 68px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0 0 1.4rem;
}
.text-center .rule-gold { margin-left: auto; margin-right: auto; }

/* hero tagline echoing the logo's dropped sub-line */
.hero-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--steel);
}
.hero-tagline::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 0.6rem;
  margin-bottom: 0.2rem;
}

/* ---------- sections ---------- */
section { padding: 5rem 0; }
.section-tight { padding: 3.5rem 0; }

/* ---------- cards ---------- */
.svc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(27,42,74,0.10);
  border-color: var(--steel-soft);
}
.svc-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(240,168,48,0.14);
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.svc-icon svg { width: 26px; height: 26px; }
.svc-card h3 { font-size: 1.28rem; margin-bottom: 0.6rem; }

/* ---------- stats ---------- */
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: 2.9rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  color: var(--steel-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* ---------- sectors ---------- */
.sector-pill {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.4rem 1.25rem;
  height: 100%;
  background: #fff;
  transition: border-color .18s ease, background .18s ease;
}
.sector-pill:hover { border-color: var(--gold); background: rgba(240,168,48,0.04); }
.sector-pill h4 { font-size: 1.1rem; margin-bottom: .4rem; }

/* ---------- dark CTA ---------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 85% 120%, rgba(240,168,48,0.22), transparent 60%),
    var(--navy);
  color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--steel-soft); }

/* ---------- testimonial ---------- */
.quote-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 2rem;
  height: 100%;
}
.quote-card p { font-style: italic; color: var(--ink); }
.quote-card .who { font-style: normal; font-weight: 700; color: var(--navy); }

/* ---------- process steps ---------- */
.step-num {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gold);
  width: 46px; height: 46px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--steel-soft);
  padding: 3.5rem 0 1.75rem;
}
.site-footer h5 {
  color: #fff;
  font-family: 'Source Sans 3', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.site-footer a { color: var(--steel-soft); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-brand { color:#fff; font-family:'Fraunces',serif; font-size:1.35rem; }
.footer-divider { border-color: rgba(255,255,255,0.12); }

/* ---------- forms ---------- */
.form-control, .form-select {
  border: 1px solid var(--line);
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 0.2rem rgba(240,168,48,0.18);
}

/* ---------- page header (interior pages) ---------- */
.page-head {
  background:
    radial-gradient(800px 320px at 88% -20%, rgba(240,168,48,0.14), transparent 60%),
    var(--mist);
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); }

/* ---------- misc ---------- */
.lead-tight { max-width: 720px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- full-width image band ---------- */
.image-band {
    position: relative;
    background-image: linear-gradient(90deg, rgba(27,42,74,0.92) 0%, rgba(27,42,74,0.72) 45%, rgba(27,42,74,0.45) 100%), url("../images/focus-group.jpg");
    background-size: cover;
    background-position: center;
    padding: 6rem 0;
}

    .image-band .band-inner {
        max-width: 620px;
    }

    .image-band .eyebrow {
        color: var(--gold);
    }

    .image-band h2 {
        color: #fff;
    }

    .image-band p {
        color: var(--steel-soft);
    }

@media (max-width: 767.98px) {
    .image-band {
        padding: 4rem 0;
        background-image: linear-gradient(180deg, rgba(27,42,74,0.90) 0%, rgba(27,42,74,0.80) 100%), url("../images/focus-group.jpg");
    }
}

/* participants page band image */
.image-band.band-interview {
    background-image: linear-gradient(90deg, rgba(27,42,74,0.92) 0%, rgba(27,42,74,0.72) 45%, rgba(27,42,74,0.45) 100%), url("../images/interview.jpg");
}

@media (max-width: 767.98px) {
    .image-band.band-interview {
        background-image: linear-gradient(180deg, rgba(27,42,74,0.90) 0%, rgba(27,42,74,0.80) 100%), url("../images/interview.jpg");
    }
}

/* about page band image */
.image-band.band-handshake {
    background-image: linear-gradient(90deg, rgba(27,42,74,0.92) 0%, rgba(27,42,74,0.72) 45%, rgba(27,42,74,0.45) 100%), url("../images/handshake.jpg");
}

@media (max-width: 767.98px) {
    .image-band.band-handshake {
        background-image: linear-gradient(180deg, rgba(27,42,74,0.90) 0%, rgba(27,42,74,0.80) 100%), url("../images/handshake.jpg");
    }
}

/* ============================================================
   Hides the honeypot field from real users while keeping it in
   the DOM for bots. Uses off-screen positioning (not display:none),
   which some bots skip — more effective than display:none alone.
   ============================================================ */
.hh-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   Add this to the END of css/styles.css — Leadership section
   ============================================================ */
.leader-photo {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(27, 42, 74, 0.16);
    border: 4px solid #fff;
    outline: 1px solid var(--line);
    max-width: 340px;
    margin: 0 auto;
}

    .leader-photo img {
        width: 100%;
        height: auto;
        display: block;
    }

.leader-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--navy);
    font-size: 1.5rem;
}

.leader-title {
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.leader-bio p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 1rem;
}
/* subtle gold accent bar to the left of the bio on larger screens */
@media (min-width: 992px) {
    .leader-bio {
        border-left: 3px solid var(--gold);
        padding-left: 1.75rem;
    }
}
.leader-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    transition: background .18s ease, transform .18s ease;
}

    .leader-linkedin:hover {
        background: var(--gold);
        color: var(--navy);
        transform: translateY(-2px);
    }