/* TechRhodes — Alana Lauro leadership page */

:root {
  --bg: #000000;
  --bg-alt: #0c0c0c;
  --gold: #e3ac26;
  --gold-dim: rgba(227, 172, 38, 0.4);
  --white: #f5f2ec;
  --muted: #a9a9a9;
  --rule: #232323;
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.3;
}

img {
  max-width: 100%;
  display: block;
}

.eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Central heading system, used site-wide. h1 is always the page-topic
   kicker label (e.g. "Our Leadership", "Privacy Policy") — visually small,
   matching .eyebrow. h2 is the large serif heading that actually reads as
   the page's visual title (e.g. "Alana Lauro", "We're building something
   new."). Sections may still scope their own h2/h3 overrides contextually
   (mission heading, CTA heading, legal subsection headers). */
h1 {
  display: block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.1;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Leadership section */
.leadership {
  padding: 18px 0 4px;
}

.leadership-grid {
  display: grid;
  grid-template-columns: 392px 46px 324px 52px 1px 44px 1fr;
  align-items: start;
}

.leadership .divider {
  grid-column: 5;
  align-self: start;
  margin-top: 5px;
  width: 2px;
  height: 372px;
  background: var(--gold-dim);
}

.leadership-photo {
  grid-column: 1;
  width: 392px;
  height: 382px;
  overflow: hidden;
  background: #111;
}

.leadership-bio {
  grid-column: 3;
}

.leadership-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leadership-bio h2 {
  margin-bottom: 4px;
}

.leadership-bio .role {
  display: block;
  margin-bottom: 10px;
}

.leadership-bio p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.leadership-bio p:last-child {
  margin-bottom: 0;
}

.leadership-bio a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 172, 38, 0.4);
}

.mission {
  grid-column: 7;
  align-self: center;
}

.mission .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.mission::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 20px;
}

.mission h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.38;
  margin-bottom: 28px;
}

.mission .signature {
  display: block;
  height: 43px;
  width: auto;
  margin-bottom: 28px;
}

.mission::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

/* Logo strip */
.logos {
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0 15px;
}

.logos > .wrap > .eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
}

.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logos .logo-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--gold-dim);
  height: 41px;
}

.logos .logo-item:first-child {
  border-left: none;
  padding-left: 0;
}

.logos .logo-item:last-child {
  padding-right: 0;
}

.logos .logo-item img {
  display: block;
}

.logos .logo-item.and-more {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* CTA banner */
.cta {
  position: relative;
  height: 172px;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 14px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 48%, rgba(0, 0, 0, 0.1) 100%),
    url("../assets/skyline.jpg") right center/cover no-repeat;
  background-color: #050505;
}

.cta .wrap {
  width: 100%;
}

.cta .eyebrow {
  margin-bottom: 9px;
  display: block;
  font-size: 10px;
}

.cta h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 13px;
}

.cta p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  max-width: 340px;
  margin-bottom: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 5px;
}

.btn svg {
  fill: var(--gold);
}

/* Footer */
footer {
  padding: 15px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
  gap: 24px;
  padding-bottom: 12px;
}

.brand {
  display: block;
  height: 33px;
  width: auto;
  margin-bottom: 13px;
}

.brand-tagline {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.6;
  text-transform: uppercase;
}

.footer-col {
  border-left: 2px solid var(--gold-dim);
  padding-left: 16px;
}

.footer-col h3 {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 1px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--white);
}

.footer-col a {
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
}

.footer-col a:hover {
  color: var(--gold);
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-top: 4px;
}

.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.badge .circle {
  width: 60px;
  height: 60px;
  min-width: 60px;
  display: block;
}

.badge .label {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5;
}

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.footer-bottom a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
}

.footer-bottom a:hover {
  color: var(--gold);
}

@media (max-width: 900px) {
  .leadership-grid {
    grid-template-columns: 1fr;
  }
  .leadership-photo,
  .leadership-bio,
  .mission {
    grid-column: 1;
  }
  .leadership-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 392 / 382;
  }
  .leadership-bio {
    margin-top: 20px;
  }
  .mission {
    margin-top: 20px;
  }
  .leadership .divider {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .badge {
    justify-self: start;
  }
  .cta h2 {
    font-size: 28px;
  }
  .logos {
    overflow: hidden;
  }
  .logo-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: logo-bounce 14s ease-in-out infinite;
  }
  .logos .logo-item img {
    flex-shrink: 0;
  }
}

@keyframes logo-bounce {
  0%, 8% {
    transform: translateX(0);
  }
  46%, 54% {
    transform: translateX(calc(-100% + 100vw - 48px));
  }
  92%, 100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-row {
    animation: none;
  }
}

/* Legal pages (privacy policy, terms of service) */
.page-header {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}

.page-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header .brand-link img {
  height: 28px;
  width: auto;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
}

.page-header nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.page-header nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
}

.page-header nav a:hover {
  color: var(--gold);
}

.page-header nav a[aria-current="page"] {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

.page-header .back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  border-left: 1px solid var(--rule);
  padding-left: 24px;
}

.page-header .back-link:hover {
  color: var(--gold);
}

@media (max-width: 640px) {
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 22px;
    cursor: pointer;
  }

  .nav-toggle-label span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--white);
  }

  .page-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: 20px 24px 24px;
    z-index: 10;
  }

  .nav-toggle:checked ~ nav {
    display: flex;
  }

  .page-header .back-link {
    border-left: none;
    padding-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    width: 100%;
  }
}

.legal {
  padding: 56px 0 72px;
}

.legal .wrap {
  max-width: 820px;
}

.legal .updated {
  color: var(--muted);
  font-size: 12px;
  font-weight: 300;
  margin-bottom: 40px;
}

.legal h2 {
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 36px 0 14px;
}

.legal p {
  color: var(--muted);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.legal ul {
  margin: 0 0 14px 20px;
  color: var(--muted);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 172, 38, 0.4);
}

.legal strong {
  color: var(--white);
  font-weight: 500;
}

/* Under-construction pages (Home, Capabilities, About) */
.construction {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.construction h2 {
  margin-bottom: 16px;
}

.construction p {
  color: var(--muted);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 28px;
}

.construction .btn {
  border-bottom-color: var(--gold);
}