/* ==========================================================================
   Time Zero Atlas — Static Site Stylesheet
   Adapted from Webflow CSS source. All CDN URLs replaced with local paths.
   ========================================================================== */

/* ---------- Normalize / Reset ---------- */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

[hidden], template {
  display: none;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

b, strong {
  font-weight: bold;
}

img {
  border: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

/* ---------- Webflow Layout Classes ---------- */
.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  display: table;
}

.w-row:after {
  clear: both;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ---------- Navigation ---------- */
.w-nav {
  z-index: 1000;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.w-nav:before, .w-nav:after {
  content: " ";
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-menu {
  float: right;
  position: relative;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* ---------- Slider ---------- */
.w-slider {
  text-align: center;
  clear: both;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---------- Typography ---------- */
:root {
  --black: black;
  --white: white;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

h3 {
  color: #515151;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 30px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

p {
  color: #818181;
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}

/* ---------- Custom Component Styles ---------- */

/* Navigation */
.navigation {
  background-color: transparent;
  border-bottom: 1px rgba(255,255,255,0.09);
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  position: absolute;
}

.navigation-menu {
  float: right;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
  display: block;
  position: relative;
  left: auto;
  right: -3vw;
}

.navigation-link {
  color: rgba(255,255,255,0.61);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  margin-left: 30px;
  padding-left: 0;
  padding-right: 0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.navigation-link:hover, .navigation-link.w--current {
  color: #fff;
  border-bottom-color: #fff;
}

.image-2 {
  border-radius: 0;
  margin-top: 23px;
  margin-left: -1vw;
  padding-left: 0;
}

.container-4 {
  object-fit: fill;
  width: auto;
  position: relative;
}

.menu {
  color: #fff;
  max-height: 500px;
  margin-top: 0;
}

.menu.w--open {
  background-color: rgba(0,0,0,0.56);
}

.image-26 {
  margin-left: 6px;
}

.kebab-icon {
  margin-top: 5px;
  cursor: pointer;
}

/* Hero / Slider */
.slider {
  background-color: transparent;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.w-slider-mask {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slide-6 {
  background-color: transparent;
  height: 100%;
  position: relative;
}

.html-embed-8 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.html-embed-8 video {
  /* brightness(1.4) matches the original timezerocapital.com hero. The same
     file renders darker here than on the Webflow original (different browser
     video-compositing path with object-fit cover), so we compensate. Tuned
     by side-by-side screenshot comparison 2026-07-11. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* scale(1.10) replicates the original site's overscan (it sizes the video
     to 110% of the viewport width, cropping ~9% of the frame at the sides). */
  transform: scale(1.10);
  filter: brightness(1.4);
}

.w-slider-arrow-left,
.w-slider-arrow-right,
.w-slider-nav {
  display: none;
}

.big-text {
  color: #fff;
  text-align: left;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-top: 5px;
  margin-left: 0;
  margin-right: 200px;
  padding: 10px 200px 20px 5px;
  font-family: 'Raleway', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
  display: inline-block;
}

.left-arrow {
  margin-left: auto;
  margin-right: 95px;
  display: none;
  position: absolute;
  right: 0;
}

.w-slider-arrow-right {
  display: none;
}

.slider-nav {
  display: none;
}

.begin-wrapper {
  display: none;
}

/* About Section */
.section {
  background-color: #fff;
  padding-top: 0;
  position: relative;
  z-index: 1001;
}

.container-welcome {
  text-align: center;
}

.title-wrapper {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.heading-11 {
  padding-top: 65px;
}

.line {
  background-color: #d6d6d6;
  width: 7%;
  height: 2px;
  margin: -19px auto 30px;
  padding-top: 0;
  display: block;
}

.sub {
  color: #5d5d5d;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 30px;
}

/* Portfolio Section */
.cards-section {
  text-align: left;
  object-fit: fill;
  background-color: #f1f1f1;
  padding-top: 100px;
  padding-bottom: 100px;
  font-weight: 600;
  position: relative;
  z-index: 1001;
}

.centered-container {
  text-align: center;
  flex: 1;
}

.heading {
  color: #515151;
}

.heading-2 {
  color: #5d5d5d;
  text-align: center;
  margin-top: 38px;
  padding-bottom: 20px;
  font-size: 15px;
  font-weight: 600;
}

.image {
  padding-bottom: 0;
}

/* Portfolio Grid (Companies) */
.grid-5 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  place-content: stretch;
  align-items: stretch;
  width: 100%;
  position: relative;
  left: auto;
  display: grid;
}

.grid-5 > * {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

/* Cards / Portfolio Items */
.cards-image-mask {
  background-position: 50%;
  background-size: cover;
  border-radius: 0%;
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

.cards-image {
  opacity: 1;
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  position: absolute;
  inset: 0%;
}

/* Historical Investments Grid */
.cards-grid-container-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: left;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: end stretch;
  place-items: end stretch;
  margin-bottom: 13px;
  display: grid;
  position: static;
}

/* Badge Buttons — ALL use identical positioning */
.button-2,
.button-7,
.button-19,
.button-20,
.button-merger {
  text-align: center;
  border-radius: 5px;
  width: 130px;
  height: 24px;
  margin-top: -95%;
  margin-bottom: 0;
  margin-left: 53%;
  padding: 3px 0 0;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  font-family: 'Raleway', Arial, sans-serif;
  letter-spacing: normal;
  line-height: 20px;
  position: absolute;
  display: block;
  z-index: 2;
  text-decoration: none;
  transform: translate(-12.5px, -2.5px) rotate(45deg);
}

/* White ribbon (light background) */
.button-2,
.button-19,
.button-20,
.button-merger {
  background-color: #fff;
  color: #000;
}

/* Dark ribbon (dark background) */
.button-7 {
  background-color: #000;
  color: #fff;
}

.button-9 {
  color: #000;
  object-fit: fill;
  background-color: #fff;
  border-radius: 5px;
  width: 30px;
  height: 24px;
  margin-top: .7%;
  margin-left: 70%;
  padding-top: 3px;
  padding-left: 8px;
  font-size: 10px;
  position: fixed;
}

/* Link blocks for logos with background images */
.link-block-2 {
  object-fit: fill;
  width: 100%;
  height: 100%;
  margin-top: -12vw;
  position: absolute;
}

.link-block-3 {
  width: 100%;
  height: 100%;
  margin-top: -10vw;
  margin-left: -6vw;
  position: absolute;
}

.link-block-18 {
  height: 100%;
}

/* Responsive line breaks: mobile-only breaks hidden by default */
.br-mobile {
  display: none;
}

/* Hero video credit (bottom-right of frame) */
.video-credit {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* "Building the future since" — quiet small-caps line with hairline rules */
.about-since {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 92px;
}

.since-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}

.since-text {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: #8a8a8a;
  line-height: 1.6;
  white-space: nowrap;
}

.since-date {
  color: #65A44B;
  font-weight: 600;
}

/* Split-flap (Solari) date board */
.solari {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.solari-group {
  display: inline-flex;
  gap: 2px;
}

.solari-cell {
  display: inline-block;
  width: 23px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #111111;
  color: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* flap seam: soft lower-half shade instead of a hard line through the glyph */
.solari-cell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.05) 30%);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.solari-cell.flip {
  animation: solariflip 0.13s ease-in-out;
}

@keyframes solariflip {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.12); }
  100% { transform: scaleY(1); }
}

@media screen and (max-width: 479px) {
  .since-text { white-space: normal; letter-spacing: 0.2em; }
  .since-rule { display: none; }
  .about-since { flex-wrap: wrap; row-gap: 10px; }
  .solari { gap: 7px; }
  .solari-cell {
    width: 19px;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
  }
}

/* Sequoia-style hairline grid for company tiles: 4 wider columns separated
   by thin dark-grey lines; each tile floats inside its cell with whitespace. */
.grid-5,
.cards-grid-container-2 {
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  gap: 0;
  background: transparent;
}

.grid-5 .cards-image-mask,
.cards-grid-container-2 .cards-image-mask {
  background: #f1f1f1;
}

/* Sequoia-style partitions: hairline segments between tiles that stop short
   of the crossings (they never touch). Each cell draws a right-edge and a
   bottom-edge segment; edge cells suppress theirs below. */
.grid-5 .cards-image-mask::before,
.cards-grid-container-2 .cards-image-mask::before {
  content: '';
  position: absolute;
  top: 7%;
  bottom: 7%;
  right: 0;
  width: 1px;
  background: #cfcfcf;
  z-index: 3;
}

.grid-5 .cards-image-mask::after,
.cards-grid-container-2 .cards-image-mask::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  height: 1px;
  background: #cfcfcf;
  z-index: 3;
}

/* Desktop (4 columns): no segment on the last column, after the last tile in
   a partial row, or under the final row. */
@media screen and (min-width: 480px) {
  .cards-grid-container-2 .cards-image-mask:nth-child(4n)::before,
  .cards-grid-container-2 .cards-image-mask:nth-child(10)::before,
  .cards-grid-container-2 .cards-image-mask:nth-child(n+7)::after,
  .grid-5 .cards-image-mask:nth-child(2)::before,
  .grid-5 .cards-image-mask::after {
    display: none;
  }
}

/* Phones (2 columns): same logic for the 2-up layout. */
@media screen and (max-width: 479px) {
  .cards-grid-container-2 .cards-image-mask:nth-child(2n)::before,
  .cards-grid-container-2 .cards-image-mask:nth-child(n+9)::after,
  .grid-5 .cards-image-mask:nth-child(2)::before,
  .grid-5 .cards-image-mask::after {
    display: none;
  }
}

/* ---- Founders Fund-style tiles: monochrome mark on quiet ground,
        smooth invert on hover ---- */
.ff-tile {
  transition: background-color 0.28s ease;
}

.ff-mark {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  bottom: 34%;
  background-color: #4a4a4a;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  transition: background-color 0.28s ease;
}

.ff-name {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 17%;
  text-align: center;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #6a6a6a;
  transition: color 0.28s ease;
}

.ff-badge {
  position: absolute;
  top: 9%;
  right: 9%;
  padding: 4px 9px;
  border: 1px solid #b5b5b5;
  border-radius: 2px;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: #8a8a8a;
  transition: color 0.28s ease, border-color 0.28s ease;
}

.ff-tile:hover {
  background-color: #101010;
}

.ff-tile:hover .ff-mark {
  background-color: #ffffff;
}

.ff-tile:hover .ff-name {
  color: #e8e8e8;
}

.ff-tile:hover .ff-badge {
  color: #ffffff;
  border-color: #6a6a6a;
}

/* Dark logo tile (DoubleBlind, Stealth) */
.tile-dark {
  background-color: #000;
}

.tile-logo {
  position: absolute !important;
  width: 78% !important;
  height: auto !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  object-fit: contain !important;
}

/* Stealth tile — black square, "coming soon" */
.stealth-tile {
  background-color: #f1f1f1;
}



.stealth-word {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 35.2%;
  transform: translateY(-50%);
  text-align: center;
  color: #4a4a4a;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 1.05vw;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  transition: color 0.28s ease;
}

.ff-tile:hover .stealth-word {
  color: #ffffff;
}



@media screen and (max-width: 767px) {
  .stealth-word { font-size: 3.4vw; }
}

/* Quote / Fun Facts Banner */
.section.fun-facts {
  opacity: 1;
  background-color: #0b0d09;
  padding-top: 200px;
  padding-bottom: 200px;
  position: relative;
  z-index: 1001;
  overflow: hidden;
}

/* Parallax photo layer — a transform-driven child (works on iOS, unlike
   background-attachment: fixed). Overscanned vertically so the JS drift
   never exposes the section edges. js/main.js translates it on scroll. */
.fun-facts .parallax-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -90px;
  bottom: -90px;
  z-index: 0;
  background-image: linear-gradient(rgba(10, 12, 8, 0.45), rgba(10, 12, 8, 0.45)), url('../assets/images/ui/whiteboard.jpg?v=2');
  background-position: 0 0, 50% 42%;
  background-size: auto, cover;
  will-change: transform;
}

.fun-facts .container-9 {
  position: relative;
  z-index: 1;
}

/* Desktop: use true fixed-attachment for the classic full-strength parallax.
   (transform/will-change MUST be disabled here — they create a containing
   block that silently downgrades background-attachment: fixed to scroll.
   js/main.js also skips the bg transform on desktop.) */
@media screen and (min-width: 992px) {
  .fun-facts .parallax-bg {
    background-attachment: scroll, fixed;
    will-change: auto;
    transform: none !important;
    top: 0;
    bottom: 0;
  }
}

.container-9 {
  overflow: visible;
}

.text-number {
  color: #fff;
  text-align: center;
  width: 100%;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 44px;
  display: block;
  position: relative;
  overflow: visible;
}

/* Values Section */
.service-section {
  background-color: #fafafa;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1001;
}

.container-5 {
  margin-bottom: -98px;
}

.heading-4 {
  margin-top: -3px;
  padding-bottom: 30px;
}

.service-column {
  text-align: center;
  padding-left: 10px;
}

.row-service {
  margin-top: -16px;
  margin-bottom: 60px;
}

.service-title {
  color: #5d5d5d;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  position: relative;
  bottom: 13px;
  left: -54px;
}

.text-block-30 {
  color: #5d5d5d;
  font-size: 15px;
  font-weight: 600;
}

.text-block-30.service-title {
  color: rgba(93,93,93,0.98);
  margin-left: 0;
}

.text-block-31 {
  color: #5d5d5d;
  font-size: 15px;
  font-weight: 600;
}

.text-block-31.service-title {
  color: rgba(93,93,93,0.98);
  margin-left: 0;
}

.paragraph-4 {
  text-align: left;
  margin-left: 0;
}

.paragraph-5 {
  text-align: left;
  margin-left: 0;
}

.paragraph-6 {
  text-align: left;
  margin-left: 0;
}

.paragraph-7, .paragraph-8 {
  text-align: left;
}

.paragraph-9 {
  text-align: left;
  margin-left: 0;
}

/* Guiding Values (desktop): equal-width measure so all six paragraphs set
   to the same number of lines, with balanced wrapping (no orphan words) */
@media screen and (min-width: 992px) {
  .service-column p {
    max-width: 295px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-wrap: balance;
  }
}

/* Guiding Values: titles as full-width blocks so their centered text is
   exactly centered over each paragraph column */
.service-column .service-title {
  display: block;
  float: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  left: 0;
  right: 0;
  text-align: center;
}

/* Desktop: value titles share the paragraph's 295px measure, flush left */
@media screen and (min-width: 992px) {
  .service-column .service-title {
    width: auto;
    max-width: 295px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* Team Section — z-index above the footer (1001) so open bio overlays,
   which live inside this section's stacking context, are never covered
   by the footer bar. */
.team-section {
  background-color: #f1f1f1;
  padding-top: 100px;
  padding-bottom: 100px;
  font-style: normal;
  position: relative;
  z-index: 1002;
}

.heading-17 {
  font-style: normal;
  font-weight: 700;
}

.container-11 {
  font-style: normal;
}

/* Team Photos */
.image-17 {
  object-fit: cover;
  width: 215px;
  height: 275px;
  margin-top: 12%;
  margin-left: 5px;
  line-height: 20px;
  position: static;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.image-18 {
  text-align: left;
  object-fit: cover;
  width: 215px;
  max-width: 100%;
  height: 275px;
  margin-top: 12.5%;
  margin-left: 2px;
  display: block;
  position: relative;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.image-19 {
  object-fit: cover;
  object-position: 75% 25%;
  width: 225px;
  max-width: 214px;
  height: 275px;
  max-height: 300px;
  margin-top: 13%;
  margin-left: -8px;
  position: static;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.image-27 {
  object-fit: cover;
  width: 225px;
  max-width: 245px;
  height: 275px;
  max-height: 100%;
  margin-top: 12%;
  margin-left: 3px;
  overflow: visible;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.image-33 {
  float: none;
  object-fit: cover;
  width: 215px;
  height: 275px;
  margin-left: 5px;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.image-17:hover, .image-18:hover, .image-19:hover, .image-27:hover, .image-33:hover {
  filter: brightness(100%) !important;
}

/* Team Text */
.text-block-28 {
  color: #515151;
  text-align: center;
  margin-top: 5%;
  font-size: 18px;
  font-weight: 700;
  overflow: visible;
}

.text-block-29 {
  color: #888;
  text-align: center;
}

.text-block-27 {
  color: #515151;
  text-align: center;
  margin-top: 5%;
  font-size: 18px;
  font-weight: 700;
}

.text-block-21 {
  color: #888;
  text-align: center;
}

.text-block-22 {
  color: #515151;
  text-align: center;
  margin-top: 5%;
  font-size: 18px;
  font-weight: 700;
}

.text-block-17 {
  color: #888;
  text-align: center;
  width: 100%;
  margin-left: 0;
  font-size: 14px;
  position: relative;
}

.text-block-37 {
  color: #515151;
  text-align: center;
  margin-top: 5%;
  font-size: 18px;
  font-weight: 700;
}

.text-block-38 {
  color: #888;
  text-align: center;
}

.column-3 {
  margin-top: 0;
  padding-left: 2.1%;
}

.column-4 {
  font-style: normal;
  display: block;
}

.column-7 {
  font-style: normal;
}

.column-8 {
  outline-offset: 0px;
  border: 1px #000;
  border-bottom-color: #fff;
  outline: 3px #111;
}

.div-block-22 {
  width: 100%;
  height: 20%;
  position: relative;
}

.columns-2 {
  object-fit: cover;
  margin-top: 2.5%;
}

/* Team Bio Overlays — desktop: base styles.
   Direction (left/right of the headshot) is set automatically by
   js/main.js when an overlay opens, based on which half of the page
   the cell sits in — so cells can be reordered freely. */
/* Desktop: bio opens to the right of the headshot (same placement and
   dimensions as timezerocapital.com), layered above all page chrome so the
   footer never covers it. (Mobile media query overrides this back to an
   inline card below the headshot.) */
.bio-overlay {
  z-index: 10000;
  text-align: left;
  background-color: #fafafa;
  border-radius: 8px;
  width: 500px;
  height: auto;
  max-height: none;
  overflow-y: visible;
  padding: 10px 20px 20px;
  display: none;
  position: absolute;
  top: 0;
  left: 240px;
  margin-top: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Per-person size overrides (longer bios need wider/taller windows).
   Dinesh's bio is wide enough that the whole text fits on screen without
   scrolling: it extends rightward from the headshot, capped so it never
   runs off the viewport edge. */
#bio-dinesh {
  width: 700px;
  top: -260px;
}

@media screen and (min-width: 992px) {
  #bio-dinesh .text-block-24 {
    font-size: 13px;
    line-height: 19.5px;
  }
}

#bio-norman {
  width: 650px;
  top: -400px;
}

/* Norman headshot zoom crop */
.norman-headshot-wrap {
  width: 215px;
  height: 275px;
  overflow: hidden;
  margin: 0 auto;
  display: block;
}

.norman-img {
  width: 215px !important;
  height: 450px !important;
  object-fit: cover;
  object-position: 50% 0%;
  margin-top: -30px !important;
}

/* Row 2 col 4 (Norman) — bio to the LEFT (650px wide), raised to fit full text */
.div-block-norman {
  left: -660px;
  top: -400px;
  width: 650px;
}

.text-block-23 {
  color: #5d5d5d;
  margin-top: 35px;
  margin-left: 16px;
  padding-top: 0;
  padding-left: 14px;
  font-size: 35px;
  font-weight: 600;
}

.text-block-24 {
  color: #5d5d5d;
  width: 96%;
  height: 85%;
  margin-top: 16px;
  margin-bottom: 0;
  margin-left: 19px;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 400;
}

.div-block-15 {
  cursor: pointer;
  width: 5%;
  height: 5%;
  margin-top: 3px;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.image-20 {
  margin-left: 12px;
}

.text-block-35 {
  color: #5d5d5d;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 19px;
  padding-left: 14px;
  font-size: 10px;
}


.heading-8 {
  color: #5d5d5d;
  width: auto;
  margin-top: 22px;
  margin-left: 16px;
  margin-right: 40px;
  padding-left: 14px;
  font-size: 35px;
  font-weight: 600;
  display: block;
}

.text-block-25 {
  color: #5d5d5d;
  width: 450px;
  margin-top: -6px;
  margin-left: 19px;
  padding-left: 14px;
  font-size: 14px;
}

.div-block-18 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.image-21 {
  margin-top: 6px;
  margin-left: 3px;
}


.heading-9 {
  color: #5d5d5d;
  margin-top: 19px;
  margin-left: 16px;
  padding-left: 14px;
  font-size: 35px;
  font-weight: 600;
}

.text-block-26 {
  color: #5d5d5d;
  width: 96%;
  margin-top: -3px;
  margin-left: 19px;
  padding-left: 14px;
  font-size: 14px;
  overflow: visible;
}

.div-block-20 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.image-22 {
  margin-top: 3px;
  margin-left: 3px;
}


.heading-15 {
  color: #5d5d5d;
  margin-top: 0;
  margin-left: 16px;
  padding-left: 14px;
  font-size: 35px;
  font-weight: 600;
}

.text-block-32 {
  color: #5d5d5d;
  width: 96%;
  margin-top: 0%;
  margin-bottom: 0;
  margin-left: 19px;
  padding-left: 14px;
}

.text-block-34 {
  color: #5d5d5d;
  margin-bottom: 20px;
  margin-left: 19px;
  padding-left: 14px;
  font-size: 10px;
}

.div-block-25 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-top: 0;
  margin-left: auto;
  margin-right: 0;
}


.heading-16 {
  color: #5d5d5d;
  margin-top: 0;
  margin-left: 16px;
  padding-top: 5px;
  padding-left: 14px;
  font-size: 35px;
  font-weight: 600;
}

.text-block-36 {
  color: #5d5d5d;
  margin-top: -.5vw;
  margin-left: 18px;
  padding-bottom: 25px;
  padding-left: 14px;
  padding-right: 15px;
}

.div-block-28 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  margin-left: 500px;
  padding-left: 5px;
}

.image-31 {
  width: 12px;
  height: 12px;
  margin-left: 0;
  padding-left: 0;
}

.div-block-13 {
  position: absolute;
  top: 6px;
  bottom: auto;
  left: 500px;
}

.container-10 {
  margin-top: -3px;
}

/* Contact Section */
.contact-section {
  background-color: #fafafa;
  height: 80%;
  margin-bottom: auto;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1001;
}

.heading-10 {
  color: #515151;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
}

.container-8 {
  height: 175px;
  margin-bottom: 19px;
  line-height: 55px;
  position: relative;
}

.html-embed-5 {
  width: 100%;
  height: 300%;
  max-height: none;
  margin-top: -140px;
  margin-bottom: auto;
  position: absolute;
}

/* Image for CRWD */
.image-41 {
  aspect-ratio: auto;
  object-fit: fill;
  max-height: 100%;
  line-height: 50px;
}

/* IPO badge in historical */
.button-9-standalone {
  color: #000;
  background-color: #fff;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* ---------- Mobile Bio Backdrop ---------- */
.bio-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.15);
  z-index: 9999;
}

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

/* ---------- Back to Top Button ---------- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border: 2px solid #888;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, border-color 0.3s;
  opacity: 0.7;
}

.back-to-top:hover {
  opacity: 1;
  border-color: #333;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: #888;
  stroke-width: 2.5;
  fill: none;
  transition: stroke 0.3s;
}

.back-to-top:hover svg {
  stroke: #333;
}

.back-to-top.visible {
  display: flex;
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: #1a1a1a;
  padding: 30px 0;
  margin-bottom: 0;
  text-align: center;
  position: relative;
  z-index: 1001;
}

/* Remove any whitespace below footer */
body {
  margin-bottom: 0;
  padding-bottom: 0;
}

html {
  background-color: #1a1a1a;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-copyright {
  color: #888;
  font-size: 12px;
  margin: 0;
  font-weight: 400;
}

.footer-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.footer-link {
  color: #888;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #ccc;
}

.footer-divider {
  color: #555;
  font-size: 12px;
}

/* ---------- Legal Modals ---------- */
.legal-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-modal-content {
  background: #fff;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  border-radius: 8px;
  position: relative;
  margin: 20px;
}

.legal-modal-content h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
}

.legal-modal-content p {
  color: #555;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 12px;
}

.legal-modal-close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}

.legal-modal-close:hover {
  color: #333;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-layout-blockcontainer {
    max-width: 728px;
  }

  h3 {
    text-align: center;
  }

  .navigation-menu {
    background-color: rgba(0,0,0,0.83);
    max-width: 200px;
    max-height: 320px;
    margin-top: 95px;
    margin-left: 6px;
    padding-top: 0;
    padding-bottom: 0;
    display: none;
  }

  .navigation-menu.nav-open {
    display: block;
  }

  .navigation-link {
    margin-right: 30px;
    display: block;
  }

  .menu {
    display: block;
  }

  .w-nav-button {
    display: block;
  }

  .slider {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .w-slider-mask {
    height: 100%;
  }

  .slide-6 {
    height: 100%;
    position: relative;
  }

  .html-embed-8 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .html-embed-8 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Mobile: same parallax layer, centered crop */
  .fun-facts .parallax-bg {
    background-position: 0 0, 50% 50%;
  }

  /* Bio overlays: appear below headshot on mobile, scrollable */
  .bio-overlay {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    margin: 10px 0 20px 0 !important;
    padding: 15px 20px !important;
    border-radius: 12px;
    z-index: 10 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }

  /* Ensure bio text fits mobile */
  .bio-text,
  .text-block-24,
  .text-block-25,
  .text-block-26,
  .text-block-32,
  .text-block-36 {
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 10px !important;
    font-size: 13px !important;
    line-height: 22px !important;
  }

  .bio-heading, .heading-8, .heading-9, .heading-15, .heading-16, .text-block-23 {
    font-size: 24px !important;
    margin-left: 10px !important;
    padding-left: 0 !important;
  }

  .bio-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
  }

  .text-number {
    width: 100%;
    max-width: none;
    font-size: 30px;
  }

  .service-title {
    margin-top: -16px;
    margin-left: 19px;
    margin-right: -29px;
  }

  .big-text {
    margin-top: 0;
    margin-left: 1vw;
    font-size: 35px;
    line-height: 50px;
  }

  .grid-5 {
    width: auto;
    max-width: none;
  }

  .image-17, .image-18 {
    object-fit: cover;
    width: 65vw;
    height: 25vw;
    margin-top: 1vw;
  }

  .image-19 {
    width: 65vw;
    max-width: 100%;
    height: 25vw;
    margin-top: 1vw;
    margin-left: 0;
  }

  .image-27 {
    object-fit: cover;
    width: 105%;
    height: 25vw;
    margin-top: 1vw;
    margin-left: 0;
  }

  .div-block-14 {
    width: 730px;
    margin-top: -72px;
    margin-left: 0;
  }

  .div-block-17 {
    width: 500px;
    height: auto;
    margin-top: -38px;
    margin-left: 109px;
  }

  .div-block-19 {
    width: 650px;
    height: auto;
    margin-top: -6.3vw;
    margin-left: 40px;
    padding-bottom: 10px;
  }

  .text-block-26 {
    width: 93%;
    padding-bottom: 6px;
  }

  .div-block-24 {
    width: 500px;
    max-width: none;
    height: auto;
    margin-top: -325px;
    margin-left: 109px;
  }

  .text-block-32 {
    width: auto;
    margin-bottom: 15px;
    margin-right: 10px;
  }

  .image-33 {
    width: 65vw;
    height: 25vw;
  }

  .button-2 {
    margin-left: 48%;
    padding-left: 6%;
  }

  .button-7 {
    margin-left: 43%;
    padding-left: 10%;
  }

  .text-block-30.service-title {
    margin-left: 3px;
  }

  .text-block-31.service-title {
    margin-left: 48px;
  }

  .html-embed-8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .slide-6 {
    object-fit: cover;
    height: 100%;
    position: relative;
  }

  .paragraph-5 {
    width: 110%;
  }
}

@media screen and (max-width: 767px) {
  .w-container {
    max-width: none;
  }

  .w-layout-blockcontainer {
    max-width: none;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .sub {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 17px;
  }

  .service-column {
    margin-bottom: 30px;
  }

  .big-text {
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 32px;
    line-height: 66px;
  }

  .menu {
    margin-top: 6px;
    margin-right: 14px;
  }

  .cards-section {
    padding: 40px 20px;
  }

  .cards-grid-container-2 {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    max-width: none;
  }

  .slide-6 {
    background-position: 50%;
    background-size: cover;
  }

  /* Mobile hero video fix */
  .slider {
    height: 100vh;
  }

  .html-embed-8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  /* Mobile parallax fallback */
  .section.fun-facts {
    background-attachment: scroll, scroll;
    padding-top: 100px;
    padding-bottom: 100px;
  }

}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-col {
    width: 100%;
  }

  .section.fun-facts {
    position: relative;
    overflow: hidden;
    background-attachment: scroll, scroll;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .sub {
    padding-left: 9vw;
    padding-right: 9vw;
  }

  .text-number {
    width: 90%;
    margin-left: 5%;
    font-size: 16px;
    line-height: 25px;
  }

  .service-column {
    padding-left: 0;
    padding-right: 0;
  }

  .row-service {
    margin-bottom: 3.2vw;
    margin-left: 0;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
  }

  .service-title {
    margin-left: 0;
    margin-right: 0;
    margin-top: 38px;
    margin-bottom: 8px;
    font-size: 15px;
  }

  /* keep the paragraph snug under its headline */
  .service-column p {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* don't double-space the very first headline under the section heading */
  .row-service:first-of-type .service-column:first-child .service-title {
    margin-top: 10px;
  }

  .team-section {
    padding-bottom: 70px;
    overflow: hidden;
  }

  .contact-section {
    overflow: hidden;
  }

  .big-text {
    letter-spacing: 5px;
    height: auto;
    margin-left: 3.2vw;
    padding-top: 0;
    padding-bottom: 10px;
    padding-left: 14px;
    font-size: 15px;
    line-height: 25px;
    left: 10px;
  }

  .navigation-menu {
    width: auto;
    height: auto;
    max-height: 72vw;
    margin-top: 110px;
    padding-top: 0;
    display: none;
    overflow: visible;
  }

  .image-2 {
    margin-top: -10px;
    margin-left: 1.5vw;
  }

  .container-4 {
    overflow: hidden;
  }

  .heading-2 {
    padding-bottom: 8px;
  }

  .centered-container {
    text-align: left;
  }

  .grid-5 {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: 2.5%;
    margin-left: 0;
    overflow: hidden;
  }

  .cards-grid-container-2 {
    gap: 1px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: auto;
    margin: 2.5% 0 60px;
    overflow: hidden;
  }

  .image-17 {
    width: 75vw;
    height: 95vw;
    margin-left: 10vw;
  }

  .image-18 {
    width: 75vw;
    height: 95vw;
    margin-top: 8%;
    margin-left: 10vw;
  }

  .image-19 {
    width: 75vw;
    height: 95vw;
    max-height: none;
    margin-top: 6%;
    margin-left: 11.5vw;
  }

  .image-27 {
    width: 75vw;
    max-width: none;
    height: 95vw;
    margin-top: 6%;
    margin-left: 10vw;
  }

  .image-33 {
    width: 75vw;
    height: 95vw;
    margin-left: 10vw;
  }



  .text-block-25 {
    width: 90%;
    display: block;
  }

  .text-block-26 {
    width: 88%;
    padding-bottom: 22px;
  }

  .text-block-32 {
    width: 85%;
    height: 90%;
    margin-top: 69px;
    margin-bottom: 10px;
    padding-bottom: 15px;
  }

  .slide-6 {
    width: 100%;
    margin-left: 0;
    padding-top: 133px;
    padding-right: 0;
  }

  .html-embed-8 {
    object-fit: fill;
    margin: -136.5vw -73vw 0 -69.8vw;
    position: absolute;
    overflow: hidden;
  }

  .container-8 {
    overflow: hidden;
  }

  .html-embed-5 {
    width: 95%;
    height: 200%;
    margin-left: 3.2vw;
    overflow: hidden;
  }

  /* Historical grid badges (3-col mobile grid, small tiles) */
  .button-2 {
    width: 20vw;
    height: 4vw;
    margin-top: -27.8vw;
    margin-left: 16.5vw;
    padding: 0 0 0 3.5vw;
    font-size: 8px;
    font-weight: 400 !important;
    line-height: 4vw;
    transform: translate(-3vw) rotate(45deg);
  }

  .button-7 {
    width: 20vw;
    height: 4vw;
    margin-top: -27.8vw;
    margin-left: 15.9vw;
    padding: 0 0 0 3.5vw;
    font-size: 8px;
    font-weight: 400 !important;
    line-height: 4vw;
    transform: translate(-3vw) rotate(45deg);
  }

  /* Companies grid badges (2-col mobile grid, larger tiles) — wider to cover full corner */
  .button-19,
  .button-20,
  .button-merger {
    width: 150px;
    height: 24px;
    margin-top: -95%;
    margin-left: 50%;
    padding: 3px 0 0;
    font-size: 10px;
    font-weight: 400 !important;
    line-height: 20px;
    text-align: center;
    position: absolute;
    transform: translate(-14px) rotate(45deg);
  }

  .paragraph-4, .paragraph-5, .paragraph-6, .paragraph-7, .paragraph-8, .paragraph-9 {
    text-align: center;
    margin-left: 0;
    width: auto;
  }

  .text-block-30.service-title {
    margin-top: 38px;
    margin-left: 0;
  }

  .text-block-31.service-title {
    margin-top: 38px;
    margin-left: 0;
  }

  .image-26 {
    margin-left: 6px;
  }

  .menu {
    margin-top: 2px;
    margin-left: -19px;
    margin-right: 6vw;
    overflow: hidden;
  }

  .container-9 {
    overflow: visible;
  }

  .column-7 {
    margin-top: 6%;
    padding-bottom: 35px;
  }

}

/* ==========================================================================
   Utility / Extra Styles
   ========================================================================== */

/* Ensure hero takes full viewport */
.slider, .w-slider-mask, .w-slide, .slide-6 {
  min-height: 100vh;
}

.html-embed-8 video {
  min-height: 100vh;
}

/* Hero overlay for readability */
.slide-6::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

.big-text {
  z-index: 2;
}

/* Navigation overlay */
.navigation {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Mobile nav overlay - slide from right */
@media screen and (max-width: 991px) {
  .navigation-menu {
    position: fixed;
    top: 0;
    right: -40vw;
    width: 33vw;
    max-width: 33vw;
    height: 100vh;
    max-height: 100vh;
    background-color: rgba(0, 0, 0, 0.93);
    margin-top: 0;
    padding-top: 80px;
    /* Keep the menu rendered (not display:none) so the slide can animate;
       visibility flips after the slide-out finishes on close. */
    display: block;
    visibility: hidden;
    transition: right 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 1.2s;
    z-index: 999;
    overflow-y: auto;
  }

  .navigation-menu.nav-open {
    right: 0;
    visibility: visible;
    transition: right 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }

  .navigation-link {
    display: block;
    padding: 15px 8px 15px 20px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Ensure bio overlays sit above all page chrome (footer, back-to-top) */
.bio-overlay {
  z-index: 10000;
}

/* Active nav link */
.navigation-link.active {
  color: #fff;
  border-bottom-color: #fff;
}

/* Typeform container */
[data-tf-widget] {
  width: 100%;
  height: 500px;
}

/* ---------- Extra breathing room between Companies grid and Historical Investments (desktop) ---------- */
@media screen and (min-width: 992px) {
  .heading-2-historical {
    margin-top: 130px;
  }
}

/* ---------- Norman headshot: match other team photos on phones ----------
   His crop wrapper mirrors .team-photo sizing at each breakpoint. The image
   inside reproduces the desktop crop proportionally: image height = 1.636x
   the wrapper height (450/275), shifted up 10.9% of wrapper height (30/275),
   so phones show the same head-to-chest framing as desktop. */
@media screen and (max-width: 767px) {
  .norman-headshot-wrap {
    width: 75vw;
    height: 95vw;
  }
  .norman-img {
    width: 100% !important;
    height: 155.5vw !important;
    margin-top: -10.4vw !important;
    margin-left: 0 !important;
  }
}

/* ---------- Uniform bio-overlay close "x" (desktop only) ----------
   Match every overlay's close button to Peter Horan's placement:
   20x20 box anchored 10px from the top, 20px from the right of the
   overlay window, icon nudged 6px/3px inside. Mobile keeps its own
   !important absolute positioning in the max-991px block above. */
@media screen and (min-width: 992px) {
  .bio-close {
    position: absolute;
    top: 10px;
    right: 20px;
    left: auto;
    bottom: auto;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
  }
  .bio-close img {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    margin-left: 3px;
  }
}

/* ---------- Team grid (scalable) ----------
   One uniform grid for all team members. Add a cell anywhere in
   .team-grid (see the CELL TEMPLATE comment in index.html) and every
   photo stays the same size, equally spaced, and column-aligned across
   rows. "row-break" forces a cell to start a new row. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 48px;
  margin-top: 40px;
}

.team-cell {
  position: relative;
  text-align: center;
}

.team-cell.row-break {
  grid-column-start: 1;
}

.team-photo {
  border: 1px solid #d0d0d0;
  width: 215px;
  height: 275px;
  object-fit: cover;
  cursor: pointer;
  transition: filter 0.3s ease;
  display: block;
  margin: 0 auto;
}

.team-photo:hover {
  filter: brightness(100%) !important;
}

.team-name {
  color: #515151;
  text-align: center;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
}

.team-title {
  color: #888;
  text-align: center;
}

/* Bio heading/text styles for cells built from the template */
.bio-heading {
  color: #5d5d5d;
  width: auto;
  margin-top: 22px;
  margin-left: 16px;
  margin-right: 40px;
  padding-left: 14px;
  font-size: 35px;
  font-weight: 600;
  display: block;
}

.bio-text {
  color: #5d5d5d;
  width: 450px;
  margin-top: -6px;
  margin-left: 19px;
  padding-left: 14px;
  font-size: 14px;
}

/* Tablet: two columns; phone: single column (photos sized like the
   other mobile team rules) */
@media screen and (max-width: 991px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media screen and (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .team-photo {
    width: 60vw;
    height: 76vw;
  }
}

/* ---------- Align hero headline's left edge with the logo tile above it,
   and vertically center the logo against the nav links ---------- */
@media screen and (min-width: 992px) {
  /* vertically center the wordmark against the nav links */
  .image-2 {
    margin-top: 32px;
  }
}

/* ---------- Mobile header: lower the logo to align with the kebab menu dots,
   drop the headline correspondingly, and undo the desktop video overscan
   (phones crop the video heavily already via object-fit: cover). ---------- */
@media screen and (max-width: 767px) {
  /* vertically center the wordmark against the kebab menu dots */
  .image-2 {
    margin-top: 26px;
    margin-left: 23px;
  }
  .html-embed-8 video {
    transform: none;
  }
  /* About: swap the desktop line break for hand-balanced 4-line breaks */
  .sub .br-desktop {
    display: none;
  }
  .sub .br-mobile {
    display: inline;
  }
  .sub {
    font-size: 15px;
    letter-spacing: 2px;
    padding-left: 10px;
    padding-right: 10px;
  }
}