/* Spark Expeditions — stylesheet */

:root {
  --ink:           #0A0D13;
  --surface:       #12161F;
  --surface-hover: #1A1F2B;
  --cream:         #F5F3EF;
  --muted:         #98A1B0;
  --accent:        #C9A961;
  --accent-hover:  #E0C98D;
  --line:          rgba(245, 243, 239, 0.10);
  --line-strong:   rgba(245, 243, 239, 0.20);

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;

  --nav-h: 68px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--ink);
  padding: var(--s-1) var(--s-2);
  z-index: 100;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ---------- Typography ---------- */

.eyebrow {
  margin: 0 0 var(--s-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section__title {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.section__lede {
  margin: 0 0 var(--s-5);
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 13, 19, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(10, 13, 19, 0.92);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--cream);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.nav__brand:hover { color: var(--cream); }
.nav__brand img { width: 28px; height: 28px; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.nav__menu a {
  position: relative;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding-block: 0.4rem;
  transition: color 0.2s ease;
}
.nav__menu a:hover { color: var(--cream); }
.nav__menu a.active { color: var(--cream); }
.nav__menu a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
}

.nav__menu a.nav__cta {
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.45rem 1rem;
}
.nav__menu a.nav__cta:hover {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
.nav__menu a.nav__cta.active::after { display: none; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  width: 22px;
  margin-inline: auto;
  background: var(--cream);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 900px);
  padding-block: var(--s-6);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -28%;
  width: min(760px, 85vw);
  aspect-ratio: 1;
  background: url("../assets/mark-white.png") no-repeat center / contain;
  opacity: 0.035;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__logo {
  width: clamp(112px, 15vw, 168px);
  height: auto;
  margin-bottom: var(--s-4);
}

.hero__title {
  margin: 0 0 var(--s-3);
  max-width: 30ch;
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.hero__sub {
  margin: 0 0 var(--s-5);
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

#heroSentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--accent);
  color: var(--ink);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--ink);
}
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--cream);
}
.btn--ghost:hover {
  border-color: var(--cream);
  color: var(--cream);
}
.btn--lg {
  padding: 1.05rem 2.2rem;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  word-break: break-word;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  scroll-margin-top: var(--nav-h);
}
.section--alt {
  background: #0D1118;
  border-block: 1px solid var(--line);
}

/* ---------- About ---------- */

.about {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.about__body p { color: var(--muted); }
.about__body > p:not(.eyebrow) { max-width: 60ch; }

.about__link { margin-top: var(--s-3); font-size: 0.925rem; }

/* ---------- Cards ---------- */

.grid { display: grid; gap: var(--s-3); }
.grid--two   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

/* Company logos, standing in for the company name.
   These marks range from a 1.5:1 monogram (iO) to a 10.7:1 wordmark (Saviu).
   Capping height alone would make the wide ones enormous and capping width
   alone would make the compact ones tiny, so each logo instead gets an
   identical box and is scaled to fit inside it with object-fit. That is what
   makes them read as one set rather than seven unrelated images. */
.card__logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  margin: 0;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.card:hover .card__logo { opacity: 1; }

/* The three-up ventures grid has narrower cards, so a smaller box. */
.grid--three .card__logo {
  max-width: 165px;
  height: 40px;
}

/* Amorino's logo is the only stacked one — cherub mark above the wordmark,
   so it is almost square (1.15:1) where every other logo is a single-line
   wordmark. Fitted to the same 40px height it would shrink to ~46px wide and
   the wordmark would be unreadable, so it gets a taller box. */
.card__logo--stacked { height: 68px; }

/* This repeat is deliberate, not a duplicate. `.grid--three .card__logo` above
   is two classes; a bare `.card__logo--stacked` is one, so it loses and Amorino
   renders at 40px — shrunk to ~46px wide with an unreadable wordmark, which is
   the exact thing the stacked class exists to prevent. Matching the selector
   weight is what makes it apply. Keep both numbers in step. */
.grid--three .card__logo--stacked { height: 68px; }

/* Because one logo is taller than the others, pin every logo box in the row to
   a common height and sit the artwork on a shared baseline. Without this the
   Amorino card's description would start 28px lower than its neighbours'.
   This must match the --stacked height above; if you change one, change both. */
.grid--three .card__name {
  display: flex;
  align-items: flex-end;
  min-height: 68px;
}

.card__role {
  margin: 0 0 var(--s-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Wraps the logo. Kept as a real heading so the document outline and screen
   readers still get the company name — it comes from the logo's alt text. The
   font properties only apply if you ever put text back inside it. */
.card__name {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.card__desc {
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-size: 0.95rem;
  flex: 1;
}

.card__link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---------- Contact ---------- */

.section--contact {
  background: #0D1118;
  border-top: 1px solid var(--line);
  text-align: center;
}
.contact .eyebrow,
.contact .section__title { text-align: center; }
.contact__lede { margin-inline: auto; }
.contact__alt {
  margin: var(--s-3) 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Legal pages ---------- */

.legal { max-width: 68ch; }
.legal h2 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.legal h2:first-of-type { margin-top: var(--s-4); }
.legal p,
.legal li { color: var(--muted); font-size: 0.95rem; }
.legal ul { padding-left: 1.1rem; }
.legal li { margin-bottom: 0.4rem; }
.legal dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: 0.95rem;
}
.legal dt { color: var(--cream); font-weight: 500; }
.legal dd { margin: 0; color: var(--muted); }
.legal__updated {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .legal dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .legal dt { margin-top: 0.6rem; }
}

/* ---------- Footer ---------- */

.footer {
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.footer__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.825rem;
}

/* ---------- Breakpoints ---------- */

/* Keep "Advisory and Venture Capital," unbroken on one line. Only above 620px,
   where it provably fits with room to spare — on narrower phones it must be
   allowed to wrap or it would overflow the screen. */
@media (min-width: 620px) {
  .hero__title .nowrap { white-space: nowrap; }
}

@media (min-width: 860px) {
  .about {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

@media (max-width: 720px) {
  .nav__toggle { display: flex; }

  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-1) clamp(1.25rem, 5vw, 3rem) var(--s-3);
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav__menu.open { display: flex; }

  .nav__menu a {
    padding-block: 0.85rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__menu a.active::after { display: none; }
  .nav__menu a.active { color: var(--accent); }

  .nav__menu a.nav__cta {
    margin-top: var(--s-2);
    text-align: center;
    border: 1px solid var(--line-strong);
  }

  .hero { min-height: auto; padding-block: var(--s-6) var(--s-6); }
}

@media (max-width: 420px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .btn--lg { padding-inline: 1rem; font-size: 0.9rem; }
}