:root {
  --navy-900: #0b1f3b;
  --navy-800: #10284d;
  --slate-800: #1f2937;
  --slate-600: #475569;
  --gold-500: #FFC000;
  --orange-600: #C55A11;
  --sand-100: #f4ede4;
  --accent-500: #cc8f2b;
  --white: #ffffff;

  --bg: var(--navy-900);
  --surface: #0f172a;
  --text: #e5e7eb;
  --muted: #a8b1c0;

  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --space: 1rem;
  --container: 1100px;
}

* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: radial-gradient(1200px 800px at 100% -100%, rgba(31,111,139,.25), transparent), var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-family: "Montserrat", Arial, sans-serif; }
h1 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--white); font-weight: 700; }
.serif { font-family: "Source Sans 3", Arial, sans-serif; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

.sr-only {
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(15, 23, 42, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .2px; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--gold-500), var(--teal-400)); color: var(--navy-900); font-weight: 900; }
.brand-text { font-weight: 700; font-family: "Montserrat", Arial, sans-serif; font-size: 1.1rem; }

.nav-toggle { display: none; background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.2); padding: .4rem .6rem; border-radius: 8px; font-family: "Montserrat", Arial, sans-serif; font-size: .9rem; }
.site-nav ul { margin: 0; padding: 0; list-style: none; display: flex; gap: .25rem; flex-wrap: wrap; }
.site-nav a { display: inline-block; padding: .45rem .6rem; color: var(--text); text-decoration: none; border-radius: 8px; font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: .85rem; }
.site-nav a:hover, .site-nav a:focus { background: rgba(255,255,255,.06); }
.site-nav a.active { background: #ADB9CA; color: rgba(15, 23, 42, .82); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; }
  .site-nav.open { display: block; position: absolute; top: 64px; right: 1rem; background: var(--surface); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; box-shadow: var(--shadow); }
  .site-nav ul { flex-direction: column; min-width: 240px; padding: .5rem; }
}

.hero {
  background:
    radial-gradient(800px 400px at -20% 0%, rgba(204,143,43,.23), transparent),
    radial-gradient(800px 400px at 120% 120%, rgba(81,96,115,.28), transparent);
  padding: clamp(3rem, 6vw, 6rem) 0;
  position: relative;
}
.hero-inner { max-width: 920px; position: relative; z-index: 2; }

.hero-collage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.hero-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: .4; /* 40% transparency */
  pointer-events: none;
}
.hero-ctas { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }

.section { padding: clamp(2rem, 5vw, 4rem) 0; }

.about-section {
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}
.section.alt { background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.page-hero.slim { padding: 3rem 0 1rem; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }

.grid { display: grid; gap: 1.25rem; }
.grid.split { grid-template-columns: 1.2fr 1fr; align-items: center; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 880px) {
  .grid.split, .grid.two, .cards-2, .team-grid { grid-template-columns: 1fr; }
}

.media-ph {
  min-height: 260px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(244,237,228,.05), rgba(244,237,228,0)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,.02) 8px 16px);
}

.graphic-placeholder {
  height: 120px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(244,237,228,.05), rgba(244,237,228,0)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,.02) 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: "Montserrat", Arial, sans-serif;
}

.generation-graphic::before {
  content: "Generation Graphic";
}

.grid-graphic::before {
  content: "";
}

.industry-graphic::before {
  content: "Industry Graphic";
}

.hero-collage .media-ph {
  height: 100%;
  width: 100%;
  border-radius: 0;
  border: none;
  background-image: 
    linear-gradient(rgba(11, 31, 59, 0.5), rgba(11, 31, 59, 0.5)),
    url('../img/placeholder - energy stuff 2.jpeg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.person {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.person-image {
  flex-shrink: 0;
}

.person-content {
  flex: 1;
}
.person .avatar {
  width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-500), var(--teal-400));
  color: #062235; font-weight: 800; margin-bottom: .5rem;
}
.person .role { display: block; font-weight: 500; color: var(--teal-400); font-size: .95rem; margin-top: .15rem; }

.work-block { margin: 1.25rem 0; padding: 1rem; border-left: 3px solid var(--gold-500); background: rgba(255,255,255,.02); border-radius: 8px; }
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }

.btn { display: inline-block; padding: .7rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); color: var(--text); background: rgba(255,255,255,.04); text-decoration: none; cursor: pointer; font-family: "Montserrat", Arial, sans-serif; font-size: .9rem; }
.btn-primary { background: #BF4E14; border-color: rgba(255,255,255,.1); color: #ffffff; }
.btn-accent { background: #BF4E14; color: #ffffff; border-color: rgba(255,255,255,.12); }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cta .tight { margin: 0; }
@media (max-width: 720px) { .cta { flex-direction: column; align-items: flex-start; } }

.site-footer { border-top: 1px solid rgba(255,255,255,.06); padding: 2rem 0; background: rgba(15, 23, 42, .6); backdrop-filter: blur(10px); }
.footer-grid { display: grid; gap: 1.25rem; grid-template-columns: 2fr 1fr; align-items: start; }
.footer-cta { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: .25rem; }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin: .25rem 0; }
.footer-brand { margin-bottom: .5rem; }
.tiny { font-size: .85rem; }
.muted { color: var(--muted); }

/* Forms */
.contact-form { margin-top: 1rem; }
.field { display: grid; gap: .35rem; margin-bottom: .9rem; }
label { font-weight: 600; }
input, select, textarea {
  width: 100%; padding: .75rem .8rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03); color: var(--text);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: .9rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.actions { display: flex; gap: .75rem; align-items: center; }

.brand-logo { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }

/* Expertise cards */
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.card h3 { margin-bottom: .5rem; }
ul.tight { margin: .25rem 0 0; padding-left: 1.1rem; }
ul.tight li { margin: .15rem 0; }
.grid.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 920px) { .grid.split { grid-template-columns: 1fr; } }

.modal-content {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 1.5rem;
  width: 100%;
  max-width: 550px;
  max-height: 80vh;
  overflow-y: auto;
  position: absolute;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  top: 50%;
  transform: translateY(-50%);
}

.avatar-img { width: 195px; height: 195px; border-radius: 12px; display: block; box-shadow: var(--shadow); object-fit: cover; object-position: top center; }
.avatar-img.andrew-dawson { object-position: top center; }
.tagline { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; font-weight: 500; font-family: "Montserrat", Arial, sans-serif; }

/* Modal Overlays */
.bio-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.bio-modal.active {
  display: block;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: .25rem;
  border-radius: 4px;
  font-family: "Montserrat", Arial, sans-serif;
}

.modal-close:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.modal-content h3 {
  margin: 0 0 1rem;
  color: var(--text);
}

.modal-content p {
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* Update bio triggers to text links */
.bio-trigger { 
  background: transparent; 
  border: none; 
  color: #C55A11; 
  padding: 0; 
  cursor: pointer; 
  font-size: .9rem; 
  text-decoration: underline;
  font-family: inherit;
}
.bio-trigger:hover { 
  color: #b04a0f; 
  text-decoration: none;
}

/* Expertise Tables */
.expertise-upper {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.expertise-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.8fr;
  gap: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow);
  align-items: center;
}

.expertise-heading h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  text-align: left;
  text-transform: uppercase;
}

.expertise-content ul.tight {
  margin: 0;
  padding-left: 1.1rem;
}

.expertise-content ul.tight li {
  margin: .1rem 0;
  text-align: left;
}

.expertise-lower {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.expertise-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.expertise-card h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  text-align: left;
  text-transform: uppercase;
}

.expertise-card ul.tight li {
  margin: .1rem 0;
  text-align: left;
}