/* ============================================================
   Luminant Consulting — shared stylesheet
   Palette: deep navy / black / gold, on warm paper & white
   Type: Playfair Display (display) + Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy: #0e2e5d;
  --navy-deep: #081a33;
  --black: #060608;
  --gold: #d4af37;
  --gold-light: #e3ad48;
  --gold-deep: #a9822a;
  --gold-gradient: linear-gradient(180deg, #f8e3a8 0%, #e6b757 28%, #c88a34 62%, #93601f 100%);
  --gold-gradient-bright: linear-gradient(180deg, #f8ea8d 0%, #f2d94c 22%, #e0cc62 42%, #c99d2a 62%, #ac8025 82%, #8d691a 100%);
  /* Brightest on the left (0%), where the sun sits, easing toward a
     deeper — but still light — gold on the right, with a second
     highlight band for shimmer rather than one flat sweep. Lighter
     overall than the old version (raised floor, no near-black stops) so
     the letters read as lit gold even at a glance, not shaded bronze. */
  /* Higher contrast than before: a near-white peak on the left (sun side)
     and a rich, saturated deep amber at the right, instead of the
     narrower, flatter mid-range this used to sit in — that wider spread
     is what reads as "punchy" metal rather than a soft tint. */
  --gold-shine: linear-gradient(100deg, #fffef6 0%, #ffec99 7%, #f4c548 16%, #d99f24 26%, #b8811c 36%, #dba838 46%, #fbe488 54%, #d99f24 68%, #a8801f 82%, #7d5c14 100%);
  --paper: #fbfaf6;
  --white: #ffffff;
  --ink: #16233a;
  --ink-soft: #4a5b74;
  --line: #e6e1d3;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------
   Header / navigation
--------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: linear-gradient(180deg, rgba(6,6,10,0.97), rgba(8,20,38,0.94));
  border-bottom: 1px solid rgba(212,175,55,0.18);
  backdrop-filter: blur(8px);
  transition: padding 0.3s ease;
}
.site-header.scrolled { padding: 10px 40px; }

.logo { display: flex; align-items: center; text-decoration: none; }
.logo-full { height: 88px; width: auto; flex: none; transition: height 0.3s ease; }
.site-header.scrolled .logo-full { height: 64px; }

.nav-links { display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-body); font-size: 15.5px; font-weight: 500;
  letter-spacing: 0.01em; color: rgba(255,255,255,0.82); text-decoration: none;
  position: relative; padding-bottom: 5px;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold); transition: right 0.35s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--gold-light); }

.menu-toggle {
  display: none; background: none; border: 0; color: #fff; font-size: 24px;
  cursor: pointer; padding: 6px; line-height: 1;
}

.mobile-panel {
  position: fixed; inset: 0; z-index: 900;
  background: linear-gradient(165deg, var(--black) 0%, var(--navy-deep) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobile-panel.open { opacity: 1; pointer-events: auto; }
.mobile-panel a {
  font-family: var(--font-display); font-size: 28px; color: #fff; text-decoration: none;
}
.mobile-panel a.active { color: var(--gold-light); }
.mobile-panel .close-btn {
  position: absolute; top: 24px; right: 28px; background: none; border: 0;
  color: #fff; font-size: 30px; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .site-header { padding: 14px 24px; }
  .logo-full { height: 68px; }
  .site-header.scrolled .logo-full { height: 54px; }
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 15px 32px; border-radius: 2px; text-decoration: none;
  transition: all 0.3s ease; border: 1px solid transparent; cursor: pointer;
  overflow-wrap: anywhere; text-align: center; max-width: 100%;
}
.btn-gold { background: var(--gold); color: #1c1404; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(212,175,55,0.3); }
.btn-outline { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }
.btn-outline-navy { border-color: rgba(14,46,93,0.35); color: var(--navy); }
.btn-outline-navy:hover { border-color: var(--gold-deep); color: var(--gold-deep); transform: translateY(-2px); }

/* ---------------------------------------------------------------
   Hero (home)
--------------------------------------------------------------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  padding: 120px 24px 100px;
  /* Black holds for most of the frame, easing into navy only near the
     very bottom — keeps the same family resemblance to the
     About/Services/Contact page-heroes without letting blue take over
     as much of the section. */
  background: linear-gradient(180deg, var(--black) 0%, var(--black) 45%, var(--navy-deep) 85%, var(--navy) 100%);
}
.hero-glow {
  /* This is the exact same sunburst mark used in the logo — the goal here
     is to reproduce it faithfully, not reprocess it into something new.
     A square box sized/centered with left/top + translate (not
     background-position percentages) guarantees the image's own true
     center always lands exactly on that point, at any viewport size —
     background-position math drifts with aspect ratio and was the reason
     the brightest point used to float above the actual ray convergence.
     The size is generous enough that the fade-to-black finishes well
     inside the box, so overflow:hidden on .hero never cuts a ray off
     mid-fade. */
  position: absolute; left: 16%; top: 24%;
  width: 62vmax; height: 62vmax;
  transform: translate(-50%, -50%);
  background-image: url('images/starburst.jpg');
  background-size: 100% 100%; background-repeat: no-repeat;
  /* No heavy contrast/saturate here — the source art is already a clean,
     bright core with crisp rays on true black (it's the brand mark).
     Reprocessing it was what turned it fuzzy and muddy-orange; screen
     blending it in almost as-is is what makes it match. Back on the left
     side (per feedback that version read better than the upper-right
     corner), pushed further left than the first pass so it clears the
     centered headline block more fully. Faded down and sized smaller to
     match the more subdued treatment the About/Services/Contact
     page-heroes use, rather than the full-strength version. */
  opacity: 0.45; mix-blend-mode: screen;
}
.hero-vignette {
  /* Pushed further out and much lighter in the near/mid field than
     before — the vignette's job is only to deepen the corners at the
     very edge of the frame, not to dim the visible ray field, which was
     what made the sun look dull instead of vivid like the logo. */
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 16% 24%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 46%, rgba(0,0,0,0.35) 68%, rgba(0,0,0,0.82) 88%, var(--black) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.eyebrow-light {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff; opacity: 0.92;
  display: inline-block; margin-bottom: 26px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}
.hero h1 {
  position: relative;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 5.4vw, 62px); line-height: 1.14; color: #fff;
  margin: 0 0 26px; letter-spacing: -0.01em;
}
.hero h1::before {
  /* A dark contact patch sitting immediately behind the headline —
     independent of the sun's glow — so the gold reads against genuinely
     dark ground right where it matters, instead of the surrounding glow
     lifting the backdrop and flattening the contrast the shine depends on. */
  content: ''; position: absolute; z-index: -1;
  inset: -18% -8%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0) 78%);
}
.gold-shine {
  /* Real shine, not a flat top-to-bottom tint: a diagonal sweep with two
     bright, near-white highlight bands running through darker gold, the
     same way a polished metal surface (or the logo mark) catches light
     unevenly rather than shading smoothly. */
  color: var(--gold-light); /* fallback for browsers without background-clip:text */
  background: var(--gold-shine);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block; line-height: 1.3; font-weight: 700;
  /* A thin dark stroke gives the letterforms crisp edge definition without
     diluting the gradient. Depth and glow come from filter: drop-shadow
     rather than text-shadow — text-shadow paints its own solid color
     underneath a transparent-fill glyph and shows straight through it,
     which flattened the gradient into a pale, washed tone. drop-shadow
     operates on the already-rendered gradient pixels, so it casts a real
     shadow and a warm gold glow behind the text while leaving the shine
     itself untouched. */
  -webkit-text-stroke: 0.6px rgba(30,18,4,0.55);
  /* goldBevel (defined once in index.htm) lights each glyph's own raised
     edges with a real lighting simulation — the same per-letter highlight
     and shadow the logo's embossed wordmark has — rather than one bevel
     drawn across the whole line. A tight contact shadow grounds the text;
     no wide soft glow here, since that was reading as a hazy halo ring
     around the letters — the dark patch behind the headline (::before,
     above) is what makes the gold pop now, not a bright ring around it. */
  filter:
    url(#goldBevel)
    drop-shadow(0 3px 8px rgba(0,0,0,0.7));
}
.hero h1 em {
  font-style: italic;
}
.hero p.lead {
  font-family: var(--font-body); font-size: 19.5px; line-height: 1.7;
  color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto 42px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.hero-ctas { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2;
}
.hero-scroll .line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.65), transparent);
}

/* ---------------------------------------------------------------
   Page hero (About / Services / Contact)
--------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden; text-align: center;
  display: flex; align-items: center; justify-content: center;
  min-height: 406px; box-sizing: border-box;
  padding: 64px 24px;
  background: linear-gradient(180deg, var(--black) 0%, var(--navy-deep) 55%, var(--navy) 100%);
}
.page-hero .hero-glow-sm {
  /* Fixed pixel size (not tied to container width) so this stays a sane,
     visible glow on very wide/short viewports instead of ballooning into
     an oversized circle whose bright core lands outside the clipped area. */
  position: absolute; top: -90px; right: -90px; width: 640px; height: 640px;
  background-image: url('images/starburst.jpg'); background-size: cover;
  border-radius: 50%; opacity: 0.32; mix-blend-mode: screen;
}
@media (max-width: 640px) {
  .page-hero .hero-glow-sm { width: 380px; height: 380px; top: -50px; right: -110px; }
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(30px, 4.4vw, 46px); margin: 0 0 14px;
}
.page-hero p {
  font-family: var(--font-body); color: rgba(255,255,255,0.78);
  max-width: 560px; margin: 0 auto; font-size: 17.5px; line-height: 1.7;
}

/* ---------------------------------------------------------------
   Generic section scaffolding
--------------------------------------------------------------- */
.section { padding: 100px 24px; }
.section-tight { padding: 74px 24px; }
.section-head { max-width: 680px; margin: 0 auto 54px; text-align: center; }
.eyebrow-navy {
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep);
  display: block; margin-bottom: 16px;
}
.section h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--navy);
  font-size: clamp(27px, 3.4vw, 38px); line-height: 1.28; margin: 0 0 18px;
}
.section p.lede {
  font-family: var(--font-body); font-size: 17.5px; line-height: 1.78;
  color: var(--ink-soft); max-width: 620px; margin: 0 auto;
}
.bg-white { background: var(--white); }
.bg-paper { background: var(--paper); }

/* Mission / statement block */
.statement { max-width: 860px; margin: 0 auto; padding: 108px 24px; text-align: center; }
.statement blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(21px, 2.5vw, 29px); line-height: 1.55; color: var(--navy);
  margin: 0 0 30px;
}
.statement p {
  font-family: var(--font-body); font-size: 17.5px; line-height: 1.8;
  color: var(--ink-soft); max-width: 640px; margin: 0 auto;
}

/* ---------------------------------------------------------------
   Cards (services)
--------------------------------------------------------------- */
.cards-grid {
  max-width: 1140px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;
}
.cards-stack {
  max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px;
}
.cards-stack .card { padding: 44px 46px; }
@media (max-width: 600px) {
  .cards-stack .card { padding: 32px 26px; }
}
@media (max-width: 380px) {
  .contact-card { padding: 52px 24px; }
}
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 40px 34px; text-align: left; position: relative; overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease;
}
.card:hover { transform: translateY(-7px); box-shadow: 0 26px 50px rgba(14,46,93,0.14); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card .num {
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.2em;
  color: var(--gold-deep); font-weight: 700;
}
.card h3 {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: var(--navy); margin: 16px 0 12px;
}
.card p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin: 0; }
.card a.card-link {
  display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--gold-deep); text-decoration: none;
}
.card a.card-link:hover { color: var(--navy); }

/* ---------------------------------------------------------------
   Credibility strip
--------------------------------------------------------------- */
.credibility { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 46px 24px; }
.credibility-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.credibility .label {
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 22px; display: block;
}
.credibility-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.credibility-row span {
  font-family: var(--font-display); font-style: italic; font-size: 16.5px;
  color: var(--navy); opacity: 0.78;
}

/* ---------------------------------------------------------------
   CTA band
--------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(180deg, var(--black), var(--navy-deep));
  padding: 110px 24px; text-align: center; color: #fff; position: relative; overflow: hidden;
}
.cta-band h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(27px, 4vw, 40px); max-width: 700px; margin: 0 auto 36px; line-height: 1.32;
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.6); padding: 56px 24px 26px; }
.footer-inner {
  max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start; gap: 36px;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand { display: flex; align-items: center; }
.footer-brand .logo-full { height: 64px; }
.footer-nav { display: flex; gap: 30px; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; }
.footer-nav a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 15.5px; }
.footer-nav a:hover { color: var(--gold-light); }
.footer-nav a.active { color: var(--gold-light); }
.footer-contact a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 15.5px; overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: 1140px; margin: 22px auto 0; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.4);
}

/* ---------------------------------------------------------------
   Team (About)
--------------------------------------------------------------- */
.team-grid { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 68px; }
.team-card { display: grid; grid-template-columns: 190px 1fr; gap: 42px; align-items: start; }
.team-photo-wrap {
  width: 180px; height: 180px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--gold); box-shadow: 0 16px 32px rgba(14,46,93,0.18);
  margin: 0 auto;
}
.team-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.team-info h3 { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
.team-role {
  font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-deep); font-weight: 700; display: block; margin-bottom: 18px;
}
.team-bio p { font-family: var(--font-body); font-size: 17px; line-height: 1.76; color: var(--ink-soft); margin: 0 0 14px; }
.team-bio p.bio-more { display: none; }
.team-bio.expanded p.bio-more { display: block; }
.bio-toggle {
  background: none; border: none; font-family: var(--font-body); font-size: 14px;
  font-weight: 700; color: var(--gold-deep); letter-spacing: 0.03em; cursor: pointer;
  padding: 0; margin-top: 2px; display: inline-flex; align-items: center; gap: 6px;
}
.bio-toggle:hover { color: var(--navy); }
.bio-toggle .arrow { transition: transform 0.3s ease; display: inline-block; }
.team-bio.expanded .bio-toggle .arrow { transform: rotate(180deg); }

@media (max-width: 720px) {
  .team-card { grid-template-columns: 1fr; text-align: center; }
  .team-bio { text-align: left; }
}

/* ---------------------------------------------------------------
   Contact
--------------------------------------------------------------- */
.contact-card {
  max-width: 600px; margin: 0 auto; text-align: center; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 68px 44px;
  box-shadow: 0 34px 64px rgba(14,46,93,0.09); position: relative;
}
.contact-card::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 3px; background: var(--gold);
}
.contact-card p.kicker { font-family: var(--font-body); font-size: 17.5px; color: var(--ink-soft); margin: 0 0 22px; }
.contact-email {
  font-family: var(--font-display); font-size: clamp(17px, 4.6vw, 25px); font-weight: 600;
  color: var(--navy); text-decoration: none; display: inline-block; margin-top: 4px;
  border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease;
  overflow-wrap: anywhere; max-width: 100%;
}
.contact-email:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ---------------------------------------------------------------
   Scroll reveal
--------------------------------------------------------------- */
/* Default: fully visible. JS opts elements into the hidden-until-scrolled
   state via .js-reveal, so content never disappears if script fails to load. */
.reveal { opacity: 1; transform: none; }
.reveal.js-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.js-reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in { transition-delay: 0.1s; }
.reveal-delay-2.in { transition-delay: 0.2s; }
.reveal-delay-3.in { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------
   Ultra-wide screens — give the light sections a bit more presence
   so they don't read as bare margins on very large monitors.
--------------------------------------------------------------- */
.bg-white, .bg-paper, .credibility, .statement {
  position: relative;
}
.bg-white::before, .bg-paper::before, .credibility::before, .statement::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(169,130,42,0.05) 0%, rgba(169,130,42,0) 70%);
}
@media (min-width: 1700px) {
  .cards-grid { max-width: 1320px; }
  .cards-stack { max-width: 1000px; }
  .credibility-inner { max-width: 1240px; }
  .team-grid { max-width: 1140px; }
  .statement { max-width: 980px; }
  .section-head { max-width: 760px; }
}