:root {
  --navy: #031b49;
  --navy-deep: #010b21;
  --gold: #f5c842;
  --blue: #27a8f2;
  --white: #f7f9fc;
}

* { box-sizing: border-box; }

html { background: var(--navy-deep); }

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: url("assets/atikokan-banner.png") 46% center / cover no-repeat;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 11, 33, .12) 0%, rgba(1, 11, 33, .05) 45%, rgba(1, 11, 33, .42) 68%, rgba(1, 11, 33, .94) 100%);
}

.hero-content {
  position: relative;
  width: min(590px, 46vw);
  margin: 0 6vw 7vh auto;
  text-shadow: 0 2px 20px rgba(1, 11, 33, .45);
}

.kicker,
.section-label {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1,
h2,
p { margin-top: 0; }

h1 {
  margin-bottom: 1.4rem;
  font-size: clamp(2.7rem, 5.2vw, 5.5rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.025em;
}

.gold-rule {
  width: 86px;
  height: 4px;
  margin: 0 0 1.4rem;
  background: var(--gold);
}

.positioning {
  margin-bottom: 0;
  color: rgba(247, 249, 252, .9);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.45;
}

.market {
  padding: clamp(4rem, 8vw, 7.5rem) 7vw;
  background: radial-gradient(circle at 12% 48%, rgba(39, 168, 242, .12), transparent 28%), linear-gradient(135deg, #061e4d, var(--navy-deep));
  border-top: 1px solid rgba(245, 200, 66, .28);
}

.market-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.market-copy { max-width: 720px; }

h2 {
  margin-bottom: 1.35rem;
  color: var(--white);
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.market-copy > p:last-child {
  margin-bottom: 0;
  color: rgba(247, 249, 252, .78);
  font-size: clamp(1.05rem, 1.65vw, 1.28rem);
  line-height: 1.72;
}

.principals {
  padding: clamp(4rem, 8vw, 7rem) 7vw;
  background: #f5f7fa;
  color: var(--navy);
}

.principals-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.principals .section-label { color: #117ab9; }

.principals h2 {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  color: var(--navy);
}

.principal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(3, 27, 73, .2);
}

.principal {
  min-height: 190px;
  padding: 2rem 2rem 2rem 0;
  border-bottom: 1px solid rgba(3, 27, 73, .2);
}

.principal + .principal {
  padding-left: 2rem;
  border-left: 1px solid rgba(3, 27, 73, .2);
}

.principal h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.2;
}

.principal-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.principal h3 span {
  font-size: .72em;
  font-weight: 500;
}

.principal p {
  margin: 0 0 0 5rem;
  color: rgba(3, 27, 73, .7);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.linkedin-link {
  display: grid;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 1px solid rgba(3, 27, 73, .25);
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.linkedin-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linkedin-link:hover,
.linkedin-link:focus-visible {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(39, 168, 242, .22);
  outline: none;
}

.advisors {
  padding-top: 2rem;
}

.advisor-label {
  margin-bottom: 1rem;
  color: rgba(3, 27, 73, .58);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.advisor-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--navy);
  text-decoration: none;
}

.advisor-logo {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 1px solid rgba(3, 27, 73, .25);
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.advisor-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advisor-name {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 700;
}

.advisor-link:hover .advisor-logo,
.advisor-link:focus-visible .advisor-logo {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(39, 168, 242, .22);
}

.advisor-link:focus-visible {
  outline: none;
}

.opportunity-link {
  padding: clamp(4rem, 8vw, 7rem) 7vw;
  background: linear-gradient(135deg, #061e4d, var(--navy-deep));
  border-top: 1px solid rgba(245, 200, 66, .28);
}

.opportunity-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: inherit;
  text-decoration: none;
}

.opportunity-inner h2 { margin-bottom: 1rem; }

.opportunity-title {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.opportunity-title img {
  width: 3.75rem;
  height: 3.75rem;
  border: 1px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.opportunity-title h2 { margin: 0; }

.opportunity-arrow {
  flex: 0 0 auto;
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  border: 1px solid rgba(245, 200, 66, .45);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.65rem;
  transition: color .2s ease, background-color .2s ease;
}

.opportunity-inner:hover .opportunity-arrow,
.opportunity-inner:focus-visible .opportunity-arrow {
  background: var(--gold);
  color: var(--navy-deep);
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 7vw;
  border-top: 1px solid rgba(245, 200, 66, .24);
  color: rgba(247, 249, 252, .58);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

footer p { margin: 0; }
.footer-name { color: var(--gold); font-weight: 700; }

@media (max-width: 760px) {
  .hero {
    min-height: 720px;
    background-position: 28% center;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(1, 11, 33, .03) 0%, rgba(1, 11, 33, .08) 42%, rgba(1, 11, 33, .94) 82%, var(--navy-deep) 100%);
  }

  .hero-content {
    width: auto;
    margin: 0 1.5rem 3.5rem;
  }

  .market { padding: 4rem 1.5rem; }

  .principals { padding: 4rem 1.5rem; }

  .opportunity-link { padding: 4rem 1.5rem; }

  .opportunity-arrow { width: 3.5rem; height: 3.5rem; }

  .principal-list { grid-template-columns: 1fr; }

  .principal { min-height: 0; padding: 1.75rem 0; }

  .principal + .principal {
    padding-left: 0;
    border-left: 0;
  }

  footer {
    display: grid;
    padding: 1.8rem 1.5rem;
    line-height: 1.6;
  }
}