@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300;1,9..144,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #FFFFFF;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 0; background: transparent; }

/* ── Colour tokens ── */
:root {
  --black:  #1A1A1A;
  --dgray:  #3F3F3F;
  --mgray:  #6B6B6B;
  --muted:  #9B9B9B;
  --border: #E0E0E0;
  --soft:   #F6F6F5;
  --white:  #FFFFFF;
  --pad:    clamp(20px, 5vw, 64px);
}

/* ── Custom cursor (desktop only) ── */
@media (hover: hover) {
  #c-ring {
    position: fixed; pointer-events: none; z-index: 9999;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--black);
    transform: translate(-50%,-50%);
    transition: width .35s, height .35s, opacity .3s;
    mix-blend-mode: difference;
  }
  #c-dot {
    position: fixed; pointer-events: none; z-index: 9999;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--black);
    transform: translate(-50%,-50%);
    mix-blend-mode: difference;
  }
  #c-ring.expanded { width: 68px; height: 68px; }
}
@media (hover: none) {
  #c-ring, #c-dot { display: none; }
}

/* ── Grain ── */
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  opacity: 0.024;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── Sections ── */
.s-white { background: var(--white); color: var(--black); }
.s-soft  { background: var(--soft);  color: var(--black); }
.s-dark  { background: var(--black); color: var(--white); }

/* ── Reveal animations ── */
.fu { opacity: 0; transform: translateY(32px); transition: opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); }
.fl { opacity: 0; transform: translateX(-36px); transition: opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); }
.fr { opacity: 0; transform: translateX(36px); transition: opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); }
.in { opacity: 1 !important; transform: none !important; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; } .d5 { transition-delay: .5s; }

/* ── Stat counter ── */
.stat-n {
  font-family: 'Fraunces', serif; font-weight: 200; font-style: italic;
  color: var(--white); line-height: 1; display: block;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s, transform .7s;
  font-size: clamp(2.8rem,5vw,5rem);
}
.stat-n.cnt { opacity: 1; transform: translateY(0); }

/* ── Marquee ── */
@keyframes mq { to { transform: translateX(-50%); } }
.mq-track { display: flex; width: max-content; animation: mq 32s linear infinite; white-space: nowrap; }
.mq-track.rev { animation-direction: reverse; }

/* ── Spin badge ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-badge { animation: spin 18s linear infinite; }

/* ── Pulse ── */
@keyframes pulse { 0%,100% { opacity:.3; } 50% { opacity:.9; } }

/* ── Hero slide-up ── */
@keyframes slideUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }

/* Hero entrance (mirrors React T()) */
.hero-t {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1);
}
.hero-t.in {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  padding: 16px 36px; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .3s, transform .25s cubic-bezier(0.16,1,0.3,1);
  white-space: nowrap;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(0.16,1,0.3,1);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn {
  text-decoration: none;
  padding: 16px 36px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .3s, transform .25s cubic-bezier(0.16,1,0.3,1);
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(0.16,1,0.3,1);
  z-index: -1;
}

.btn:hover::before {
  transform: scaleX(1);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-p {
  background: var(--black);
  color: var(--white);
}

.btn-p::before {
  background: #333333;
}

.btn-p:hover {
  color: #FFFFFF;
}


.btn-o {
  background: transparent; color: var(--black);
  box-shadow: inset 0 0 0 1.5px var(--black);
}
.btn-o::before { background: var(--black); }
.btn-o:hover { color: var(--white); }

.btn-ol {
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
}
.btn-ol::before { background: rgba(255,255,255,.1); }
.btn-ol:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }

/* Ensure the footer "Email Directly" button shows white text on hover and a dark background.
   Uses a specific selector and !important to override the inline background/color on the element. */
.connect-btns .btn.btn-p:hover {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* Apply same hover treatment to the adjacent LinkedIn button so both connect buttons behave identically */
.connect-btns .btn.btn-ol:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8) !important;
}

.btn-text {
  background: none; color: inherit; padding: 8px 0; letter-spacing: .1em;
  box-shadow: none;
}
.btn-text::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: currentColor;
  transition: width .4s cubic-bezier(0.16,1,0.3,1);
}
.btn-text::before { display: none; }
.btn-text:hover::after { width: 100%; }
.btn-text:hover { transform: none; }

/* ── Nav items ── */
.nav-a {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  background: none; border: none; cursor: pointer; color: inherit; padding: 4px 0;
  position: relative; transition: color .25s;
  text-decoration: none;
}
.nav-a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  height: 1px; width: 0; background: currentColor;
  transition: width .35s cubic-bezier(0.16,1,0.3,1);
}
.nav-a:hover::after, .nav-a.on::after { width: 100%; }

/* Ventures page: make plain links muted grey, turn black with underline on hover */
body[data-page="ventures"] a:not(.btn):not(.nav-a) {
  color: var(--mgray); /* muted grey */
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-bottom-color .18s ease;
}
body[data-page="ventures"] a:not(.btn):not(.nav-a):hover {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* ── Image zoom ── */
.iz { overflow: hidden; }
.iz img { transition: transform .8s cubic-bezier(0.16,1,0.3,1); display: block; width: 100%; }
.iz:hover img { transform: scale(1.055); }

/* ── 3-D tilt wrapper ── */
.tilt-wrap { transition: transform .6s cubic-bezier(0.16,1,0.3,1); transform-style: preserve-3d; }

/* ── Timeline ── */
.tl::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--dgray);
}

/* ── Horizontal scroll ── */
.hscroll {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  cursor: grab; -webkit-overflow-scrolling: touch;
  gap: 12px;
}
.hscroll:active { cursor: grabbing; }
.hscroll::-webkit-scrollbar { height: 0; }
.hscroll-item { scroll-snap-align: start; flex-shrink: 0; }

/* ── Link underline ── */
.ulink { text-decoration: none; position: relative; color: inherit; }
.ulink::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: currentColor; transition: width .35s cubic-bezier(0.16,1,0.3,1); }
.ulink:hover::after { width: 100%; }

/* ── Lightbox ── */
.lb { position: fixed; inset: 0; background: rgba(26,26,26,.97); z-index: 10000; display: flex; align-items: center; justify-content: center; animation: slideUp .25s both; }
.lb[hidden] { display: none !important; }
.lb [data-lb-close]:hover { border-color: #FFFFFF !important; }

/* ── Misc ── */
.rule { height: 1px; background: var(--border); }
.rule-d { height: 1px; background: var(--dgray); }

/* ── Desktop / mobile visibility (mirrors useMobile 768) ── */
@media (min-width: 769px) {
  .mob-only { display: none !important; }
}
@media (max-width: 768px) {
  .desk-only { display: none !important; }
}

/* ── Site nav shell ── */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  height: 50px;
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height .4s cubic-bezier(0.16,1,0.3,1), background .4s, border-color .4s;
}
#site-nav.scrolled {
  height: 58px;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid #E0E0E0;
  backdrop-filter: blur(16px);
}
#site-nav.nav-solid {
  background: #FFFFFF;
}
#site-nav.menu-open {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
#site-nav .nav-inner {
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 0 clamp(20px,5vw,48px);
  display: flex; align-items: center; justify-content: space-between;
}

/* Normalize desktop navbar spacing for About, Ventures, and Gallery pages
   so the navbar size and spacing remain visually identical when navigating
   between these pages. */
@media (min-width: 769px) {
  body[data-page="about"] #site-nav .nav-inner,
  body[data-page="ventures"] #site-nav .nav-inner,
  body[data-page="gallery"] #site-nav .nav-inner {
    /* ensure the same inner padding */
    padding: 0 clamp(20px,5vw,48px) !important;
    max-width: 1400px !important;
  }

  body[data-page="about"] #site-nav .nav-logo img,
  body[data-page="ventures"] #site-nav .nav-logo img,
  body[data-page="gallery"] #site-nav .nav-logo img {
    /* consistent logo size */
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
  }

  body[data-page="about"] #site-nav .nav-links,
  body[data-page="ventures"] #site-nav .nav-links,
  body[data-page="gallery"] #site-nav .nav-links {
    /* consistent spacing between links */
    gap: 32px !important;
  }

  body[data-page="about"] #site-nav .nav-links .btn,
  body[data-page="ventures"] #site-nav .nav-links .btn,
  body[data-page="gallery"] #site-nav .nav-links .btn {
    padding: 10px 22px !important;
    font-size: .68rem !important;
  }
}
#site-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: 'Fraunces', serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: .05em;
  transition: color .4s;
  z-index: 1;
  text-decoration: none;
  color: inherit;
}



#site-nav .nav-logo span {
  display: inline-block;
}

#site-nav .nav-logo em {
  font-style: italic;
}
#site-nav .nav-logo em { font-style: italic; }
#site-nav .nav-links {
  display: flex; align-items: center; gap: 32px;
}
#site-nav .nav-links .btn { padding: 10px 22px; font-size: .68rem; }
#site-nav .hamburger {
  background: none; border: none; cursor: pointer; padding: 8px;
  display: none; flex-direction: column; gap: 5; z-index: 1;
}
#site-nav .hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform .35s, opacity .25s, background .4s;
  transform-origin: center;
}
#site-nav.on-dark { color: #FFFFFF; }
#site-nav:not(.on-dark) { color: #1A1A1A; }
#site-nav.menu-open { color: #FFFFFF; }

#mob-menu { display: none; }
#mob-menu.open {
  display: flex;
}

@media (max-width: 768px) {
  #c-ring, #c-dot { display: none !important; }
  #site-nav.on-dark .nav-logo {
  color: #1A1A1A !important;
}

  .mob-menu {
    position: fixed; inset: 0; top: 0; z-index: 400;
    background: var(--black);
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 36px 48px;
    animation: slideUp .35s cubic-bezier(0.16,1,0.3,1) both;
  }

  /* Home & About pages (mobile): keep navbar fully transparent (no background) */
  body[data-page="home"] #site-nav,
  body[data-page="about"] #site-nav {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
  }
  body[data-page="home"] #site-nav.scrolled {
    background: var(--white) !important;
    border-bottom-color: var(--border) !important;
    backdrop-filter: none !important;
    color: #1A1A1A !important;
  }

  /* Keep About page behavior as before (transparent scrolled nav) */
  body[data-page="about"] #site-nav.scrolled {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    color: #FFFFFF !important;
  }

  /* Ensure hamburger and logo switch to dark on scrolled white navbar */
  body[data-page="home"] #site-nav.scrolled .hamburger span { background: #1A1A1A !important; }
  body[data-page="home"] #site-nav.scrolled .nav-logo img { filter: none !important; }

  #site-nav .nav-links { display: none; }

  /* Mobile menu: Make the Connect button white with dark text */
  #mob-menu .btn-p {
    background: var(--white) !important;
    color: var(--black) !important;
  }
  /* Ensure hover/pressed pseudo-layer remains subtle on white bg */
  #mob-menu .btn-p::before {
    background: rgba(0,0,0,.06) !important;
  }
  #site-nav .hamburger { display: flex; gap: 5px; }
  #site-nav.menu-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: #FFFFFF; }
  #site-nav.menu-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  #site-nav.menu-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: #FFFFFF; }

  .gallery-col { columns: 2 160px !important; }
  .btn-full-mob { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .gallery-col { columns: 1 !important; }
}

/* Philosophy / card hover helpers */
.card-dark-hover { transition: background .25s; }
.card-dark-hover:hover { background: #272727 !important; }
.card-light-hover { transition: background .25s; }
.card-light-hover:hover { background: #F6F6F5 !important; }
.gallery-cap {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  opacity: 0; background: linear-gradient(to top, rgba(26,26,26,.55) 0%, transparent 55%);
  transition: opacity .3s;
}
.gallery-item:hover .gallery-cap { opacity: 1; }

/* ═══════════════════════════════════════
   PAGE LAYOUT (responsive mirrors of isMob)
═══════════════════════════════════════ */
.home-stats { padding: 80px 48px; }
.stats-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #3F3F3F;
}
.stat-cell { background: #1A1A1A; padding: 52px 40px; }

.about-preview {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  height: 560px;
  overflow: hidden;
}

.about-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-preview-img { background: #F6F6F5; }
.about-preview-copy {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-left: 1px solid #E0E0E0;
  padding-top: 110px;
}

.ventures-sec { padding: 80px 48px; }
.ventures-head { padding: 0 clamp(24px,5vw,48px); margin-bottom: 44px; }
.home-hscroll { padding-left: 48px; padding-right: 48px; }
.venture-card { width: 390px; }
.venture-img { height: 250px; }
.venture-body { padding: 24px 26px 32px; border-top: 1px solid #E0E0E0; }
.ventures-cta { padding: 28px clamp(24px,5vw,48px) 0; display: flex; justify-content: center; text-align: center; }

/* Ensure the 'View All Ventures' button is centered */
.btn-ventures-all { margin: 0 auto; display: inline-flex; }

.phil-sec { padding: 112px 48px; }
.phil-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 56px;
}
.phil-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #3F3F3F; }
.phil-card { background: #1A1A1A; padding: 44px 32px; }

.quote-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: auto; }
/* Unified container height so image and text match exactly */
:root {
  --quote-h: clamp(380px, 48vh, 600px);
  --quote-extra: 50px; /* additional height to extend downward */
}
.quote-img { background: #F6F6F5; order: 1; height: calc(var(--quote-h) + var(--quote-extra)); overflow: hidden; display: block; }
/* Fill container and crop vertically; object-position tuned to show head with slight breathing space above and a bit below hands */
.quote-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transform: none; }
/* Keep text layout but nudge the main quote down ~1% without altering font metrics */
.quote-copy {
  background: #F6F6F5; padding: 80px 72px; display: flex; flex-direction: column;
  justify-content: center; position: relative; order: 2; height: calc(var(--quote-h) + var(--quote-extra)); box-sizing: border-box;
}
.quote-copy .fl { transform: translateY(1%); }
/* Slightly larger button for FULL BACKGROUND while reusing existing .btn hover animation */
.quote-btn { align-self: flex-start; padding: 18px 44px; }
.quote-btn::before { background: #333333; }

.media-strip { padding: 112px 48px; }
.media-mob { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Center the mobile 'View All' button below the image grid */
.media-mob > a.btn { grid-column: 1 / -1; justify-self: center; margin-top: 12px; }
.media-desk {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 8px;
}

.connect-sec {
  padding: 140px 48px; position: relative; overflow: hidden; text-align: center;
}
.connect-btns { display: flex; flex-direction: row; gap: 12px; justify-content: center; }

.site-footer { padding: 96px 48px 56px; position: relative; overflow: hidden; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 64px;
  padding-bottom: 56px; border-bottom: 1px solid #3F3F3F;
}
.footer-nav { display: flex; flex-direction: column; gap: 14px; }
.footer-bottom {
  display: flex; flex-direction: row; justify-content: space-between; gap: 12px; padding-top: 24px;
}

/* About page */
.about-hero {
  display: grid; grid-template-columns: 50% 50%; min-height: 85vh; overflow: hidden;
}
.about-hero-copy {
  padding: 120px 72px 80px; display: flex; flex-direction: column; justify-content: flex-end;
}

/* Desktop-only: crop the top of the about hero image (trim down to the ear of the shadow)
   and adjust the text block padding so the layout stays balanced. */
@media (min-width: 769px) {
  /* Apply crop and text adjustment to the home page second picture (about-preview) only */
  body[data-page="home"] .about-preview img {
    object-position: center -80px !important;
  }
  body[data-page="home"] .about-preview-copy {
    padding-top: 60px;
  }
}

.edu-sec { padding: 112px 48px; }
.edu-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center;
}
.tl-sec { padding: 112px 48px; }
.about-phil-sec { padding: 112px 48px; }
.about-phil-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; margin-bottom: 56px;
}
.about-phil-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: #E0E0E0; }
.about-phil-card { background: #FFFFFF; padding: 52px 44px; }

/* Ventures page */
.page-hero-dark {
  min-height: 65vh; display: flex; align-items: flex-end; position: relative; overflow: hidden;
}
.page-hero-inner { position: relative; z-index: 1; padding: 140px 48px 80px; max-width: 800px; }
.venture-row {
  display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #E0E0E0; min-height: 480px;
}
.venture-row-img { background: #F6F6F5; }
.venture-row-copy {
  padding: 72px 64px; display: flex; flex-direction: column; justify-content: center;
}
.venture-cta-sec { padding: 112px 48px; text-align: center; }

/* Media page */
.media-hero { min-height: 60vh; }
.media-cards-sec { padding: 96px 48px; }
.media-cards-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #E0E0E0;
}
.media-card-img { height: 260px; background: #F6F6F5; }
.media-card-body { padding: 28px 24px 32px; border-top: 1px solid #E0E0E0; }

/* Gallery page */
.gallery-hero { padding: 100px 38px 60px; }
.gallery-sec { padding: 100px 38px 60px; }
.gallery-col { max-width: 1400px; margin: 0 auto; columns: 3 260px; column-gap: 10px; }
.gallery-item {
  break-inside: avoid; margin-bottom: 10px; cursor: pointer; position: relative;
  background: #F6F6F5; overflow: hidden; display: block;
}

@media (max-width: 768px) {
  .home-stats { padding: 60px 24px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-cell { padding: 36px 24px; }

 .about-preview {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 660px;
  align-items: start;
}
  .about-preview-img { height: 56vw; min-height: 260px; }
  .about-preview-copy {
    padding: 48px 24px; border-left: none; border-top: 1px solid #E0E0E0;
  }

  .ventures-sec { padding: 72px 0; }
  .ventures-head { padding: 0 24px; }
  .home-hscroll { padding-left: 24px; padding-right: 24px; }
  .venture-card { width: min(320px, 80vw); }
  .venture-img { height: 200px; }
  .venture-body { padding: 20px 20px 28px; }
  .btn-ventures-all { width: 100%; justify-content: center; }

  .phil-sec { padding: 72px 24px; }
  .phil-head { grid-template-columns: 1fr; gap: 32px; }
  .phil-grid { grid-template-columns: 1fr; }
  .phil-card { padding: 32px 24px; }

  .quote-grid { grid-template-columns: 1fr; min-height: auto; }
  .quote-img { height: calc(60vw + var(--quote-extra)); min-height: calc(280px + var(--quote-extra)); order: -1; }
  .quote-copy { padding: 48px 24px; order: 1; height: calc(60vw + var(--quote-extra)); box-sizing: border-box; }
  .quote-btn { width: 100%; justify-content: center; }

  .media-strip { padding: 72px 24px; }

  .connect-sec { padding: 96px 24px; }
  .connect-btns { flex-direction: column; }

  .site-footer { padding: 72px 24px 48px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
  .footer-bottom { flex-direction: column; }

  .about-hero { grid-template-columns: 1fr; min-height: auto; }
  .about-hero-copy { padding: 48px 24px 56px; }
  .about-hero-img-mob { background: #E0E0E0; height: 60vw; min-height: 240px; }
  .edu-sec { padding: 72px 24px; }
  .edu-grid { grid-template-columns: 1fr; gap: 48px; }
  .tl-sec { padding: 72px 24px; }
  .about-phil-sec { padding: 72px 24px; }
  .about-phil-head { grid-template-columns: 1fr; gap: 32px; }
  .about-phil-grid { grid-template-columns: 1fr; }
  .about-phil-card { padding: 36px 24px; }

  .page-hero-dark { min-height: 72vw; }
  .page-hero-inner { padding: 100px 24px 56px; }
  .venture-row { grid-template-columns: 1fr; min-height: auto; }
  .venture-row-img { height: 55vw; min-height: 220px; order: -1 !important; }
  .venture-row-copy { padding: 36px 24px 48px; order: 1 !important; border: none !important; }
  .venture-cta-sec { padding: 72px 24px; }

  .media-hero { min-height: 65vw; }
  .media-cards-sec { padding: 60px 24px; }
  .media-cards-grid { grid-template-columns: 1fr; }
.media-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  width: 100%;
  gap: 0;
}

.media-image-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}

.media-image-box .fu,
.media-image-box .iz,
.media-card-img {
  width: 100%;
  height: 100%;
}

.media-card-img {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.media-card-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
  .media-card-body { padding: 24px 20px 28px; }

  .gallery-hero { padding: 100px 24px 60px; }
  .gallery-sec { padding: 32px 16px 72px; }
  .gallery-col { columns: 1 140px; column-gap: px; }
  .gallery-item { margin-bottom: 8px; }
}
@media (max-width: 700px) {
  .quote-img {
    height: 420px !important;
    overflow: hidden;
  }

  .quote-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 70% !important;
    display: block !important;
  }
}
@media (max-width: 768px) {
  .about-hero-img-mob img {
    object-position: center 10% !important;
  }
}
/* =========================================
   ABOUT PAGE — DARK HERO NAV
   SAME TRANSITION AS HOME
   ========================================= */

body[data-page="about"] #site-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* At top of About page */
body[data-page="about"] #site-nav.on-dark {
  background: transparent !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* After scrolling */
body[data-page="about"] #site-nav.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1A1A1A !important;
  border-bottom-color: #E0E0E0 !important;
  backdrop-filter: blur(16px);
}

/* Navbar text */
body[data-page="about"] #site-nav.on-dark .nav-a {
  color: #FFFFFF !important;
}

/* Logo ALWAYS BLACK */
body[data-page="about"] #site-nav .nav-logo {
  color: #1A1A1A !important;
}

/* Logo ALWAYS BLACK */
body[data-page="about"] #site-nav .nav-logo {
  color: #1A1A1A !important;
}

body[data-page="about"] #site-nav.scrolled .nav-a,
body[data-page="about"] #site-nav.scrolled .nav-logo {
  color: #1A1A1A !important;
}
/* =========================================================
   RESPONSIVE SYSTEM
   ========================================================= */

/* ---------- GENERAL SAFETY ---------- */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

section,
main,
footer,
nav,
div {
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
a,
span {
  overflow-wrap: break-word;
}


/* =========================================================
   TABLET — 769px to 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

  /* Desktop-specific fix: prevent hero heading descender clipping */
  .hero-line-wrap { overflow: visible !important; line-height: 1.12 !important; }



  #site-nav .nav-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  #site-nav .nav-links {
    gap: 22px;
  }

  .about-hero-copy {
    padding: 100px 44px 60px;
  }

  .edu-sec,
  .tl-sec,
  .about-phil-sec,
  .phil-sec,
  .media-strip,
  .connect-sec {
    padding-left: 32px;
    padding-right: 32px;
  }

  .venture-row-copy {
    padding: 52px 42px;
  }

  .media-cards-sec {
    padding-left: 32px;
    padding-right: 32px;
  }

}


/* =========================================================
   DESKTOP — 1101px and above
   ========================================================= */

@media (min-width: 1101px) {
  .hero-line-wrap { overflow: visible !important; line-height: 1.12 !important; }
}


/* =========================================================
   MOBILE — 768px AND BELOW
   ========================================================= */

@media (max-width: 768px) {

  /* Ensure mobile keeps original tight line-height and clipping for reveal */
  .hero-line-wrap { overflow: hidden !important; line-height: 1.06 !important; }

  /* ---------- GLOBAL ---------- */

  body {
    width: 100%;
    overflow-x: hidden;
  }

  main {
    width: 100%;
    overflow-x: hidden;
  }

  section {
    width: 100%;
  }

  /* Remove accidental desktop spacing */

  .s-white,
  .s-soft,
  .s-dark {
    width: 100%;
  }


  /* ---------- NAVBAR ---------- */

  #site-nav {
    height: 58px !important;
    min-height: 58px;
  }

  #site-nav.scrolled {
    height: 54px !important;
  }

  #site-nav .nav-inner {
    width: 100%;
    padding: 0 16px;
  }

  #site-nav .nav-logo {
    gap: 8px;
    font-size: 1rem;
  }

  #site-nav .nav-logo img {
    width: 32px;
    height: 32px;
  }

  #site-nav .hamburger {
    display: flex;
    padding: 7px;
  }

  #site-nav .nav-links {
    display: none !important;
  }


  /* ---------- MOBILE MENU ---------- */

  .mob-menu {
    width: 100%;
    max-width: 100%;
    padding: 76px 24px 32px;
    overflow-y: auto;
  }

  .mob-menu a {
    max-width: 100%;
  }


  /* ---------- BUTTONS ---------- */

  .btn {
    max-width: 100%;
    padding: 14px 24px;
    white-space: normal;
    text-align: center;
  }

  .btn-full-mob {
    width: 100%;
    justify-content: center;
  }


  /* ---------- TYPOGRAPHY ---------- */

  .page-hero-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-t {
    max-width: 100%;
  }


  /* ---------- ABOUT HERO ---------- */

  .about-hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: auto !important;
  }

  /* Target the actual about hero image container on mobile and enforce a fixed, cropped height so the image shows head→waist only */
  .about-hero .about-hero-img-mob, .about-hero-img-mob.mob-only {
    width: 100% !important;
    height: 440px !important; /* fixed mobile height within requested 420–460px */
    min-height: 0 !important;
    max-height: 440px !important;
    overflow: hidden !important;
  }

  .about-hero .about-hero-img-mob img, .about-hero-img-mob.mob-only img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; /* crop from bottom */
    display: block !important;
  }

  .about-hero-copy {
    width: 100%;
    padding: 48px 24px 52px;
  }


  /* ---------- HOME ABOUT PREVIEW ---------- */

  .about-preview {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .about-preview-img {
    width: 100%;
    height: 60vw;
    min-height: 240px;
    max-height: 420px;
  }

  .about-preview-copy {
    width: 100%;
    padding: 48px 24px;
  }


  /* ---------- HOME STATS ---------- */

  .home-stats {
    width: 100%;
    padding: 56px 20px;
  }

  .stats-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-cell {
    padding: 30px 18px;
    min-width: 0;
  }


  /* ---------- VENTURES CARDS ---------- */

  .ventures-sec {
    width: 100%;
    padding: 64px 0;
    overflow: hidden;
  }

  .ventures-head {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-hscroll {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    overflow-x: auto;
  }

  .venture-card {
    width: min(320px, calc(100vw - 48px));
    min-width: 0;
  }

  .venture-img {
    width: 100%;
    height: 200px;
  }


  /* ---------- PHILOSOPHY ---------- */

  .phil-sec {
    padding: 64px 24px;
  }

  .phil-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .phil-grid {
    grid-template-columns: 1fr;
  }

  .phil-card {
    padding: 32px 24px;
  }


  /* ---------- CEO QUOTE ---------- */

  .quote-grid {
    width: 100%;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .quote-img {
    width: 100%;
    height: 420px;
    min-height: 0;
    overflow: hidden;
  }

  .quote-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

 .quote-copy {
  background: #F6F6F5;
  padding: 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  order: 2;
  padding-top: 190px;
}

  .quote-btn {
    width: 100%;
    justify-content: center;
  }


  /* ---------- MEDIA STRIP ---------- */

  .media-strip {
    width: 100%;
    padding: 64px 24px;
  }

  .media-desk {
    display: none;
  }

  .media-mob {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }


  /* ---------- CONNECT ---------- */

  .connect-sec {
    width: 100%;
    padding: 80px 24px;
  }

  .connect-btns {
    width: 100%;
    flex-direction: column;
  }

  .connect-btns .btn {
    width: 100%;
  }


  /* ---------- ABOUT EDUCATION ---------- */

  .edu-sec {
    width: 100%;
    padding: 64px 24px;
  }

  .edu-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 40px;
  }


  /* ---------- TIMELINE ---------- */

  .tl-sec {
    width: 100%;
    padding: 64px 24px;
  }

  .tl {
    padding-left: 28px !important;
  }


  /* ---------- ABOUT PHILOSOPHY ---------- */

  .about-phil-sec {
    width: 100%;
    padding: 64px 24px;
  }

  .about-phil-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-phil-grid {
    grid-template-columns: 1fr;
  }

  .about-phil-card {
    padding: 32px 24px;
  }


  /* ---------- VENTURES PAGE ---------- */

  .page-hero-dark {
    width: 100%;
    min-height: 520px;
  }

  .page-hero-inner {
    width: 100%;
    padding: 100px 24px 56px;
  }

  .venture-row {
    width: 100%;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .venture-row-img {
    width: 100%;
    height: 60vw;
    min-height: 240px;
    max-height: 450px;
    order: -1 !important;
  }

  .venture-row-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

  .venture-row-copy {
    width: 100%;
    padding: 40px 24px 48px;
    border: none !important;
  }

  .venture-cta-sec {
    width: 100%;
    padding: 72px 24px;
  }


  /* ---------- MEDIA PAGE ---------- */

  .media-hero {
    width: 100%;
    min-height: 420px;
  }

  .media-cards-sec {
    width: 100%;
    padding: 56px 20px;
  }

  .media-cards-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }

 .media-card {
    height: 420px;
    overflow: hidden;
    background: #F6F6F5;
}

.media-card-img {
    width: 100%;
    height: 100%;
    background: #F6F6F5;
    overflow: hidden;
}

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

  /* ---------- GALLERY ---------- */

  .gallery-hero {
    width: 100%;
    padding: 92px 20px 52px;
  }

  .gallery-sec {
    width: 100%;
    padding: 28px 16px 64px;
  }

  .gallery-col {
    width: 100%;
    columns: 2;
    column-gap: 8px;
  }

  .gallery-item {
    width: 100%;
    margin-bottom: 8px;
  }


  /* ---------- FOOTER ---------- */

  .site-footer {
    width: 100%;
    padding: 64px 24px 40px;
  }

  .site-footer > div {
    max-width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
  }

  .site-footer > div:first-child {
    font-size: clamp(3rem, 15vw, 7rem) !important;
    right: 8px !important;
  }

}


/* =========================================================
   SMALL MOBILE — 480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

  #site-nav {
    height: 56px !important;
  }

  #site-nav .nav-inner {
    padding: 0 14px;
  }

 

  #site-nav .nav-logo {
    font-size: .95rem;
  }


  .about-hero-img-mob {
    height: 58vw !important;
    min-height: 220px;
  }

  .about-hero-copy {
    padding: 42px 20px 48px;
  }


  .home-stats {
    padding: 48px 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-cell {
    padding: 26px 14px;
  }


  .phil-sec,
  .edu-sec,
  .tl-sec,
  .about-phil-sec,
  .media-strip {
    padding-left: 20px;
    padding-right: 20px;
  }


  .quote-img {
    height: 360px;
  }

  .quote-copy {
    padding: 40px 20px;
  }


  .venture-row-img {
    height: 65vw;
    min-height: 220px;
  }

  .venture-row-copy {
    padding: 34px 20px 44px;
  }


  .media-cards-sec {
    padding-left: 16px;
    padding-right: 16px;
  }


  .gallery-col {
    columns: 1;
  }


  .mob-menu {
    padding-left: 20px;
    padding-right: 20px;
  }

}


/* =========================================================
   VERY SMALL PHONES — 360px AND BELOW
   ========================================================= */

@media (max-width: 360px) {

  #site-nav .nav-logo span {
    font-size: .9rem;
  }

  #site-nav .nav-logo img {
    width: 28px;
    height: 28px;
  }

  .about-hero-copy,
  .quote-copy,
  .venture-row-copy {
    padding-left: 18px;
    padding-right: 18px;
  }

  .page-hero-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  .gallery-sec {
    padding-left: 12px;
    padding-right: 12px;
  }

  .btn {
    padding: 13px 18px;
  }

}
.media-card-img a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.media-card-img a img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
  .image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99999;
}

.image-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.lightbox-close:hover {
  opacity: 0.7;
}
.nav-logo img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
/* ATHER ALI NAV LOGO */
.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.nav-logo img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  object-position: center !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-logo span {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   ABOUT PAGE NAVBAR — AUTO LIGHT / DARK TRANSITION
   ========================================================= */

body[data-page="about"] #site-nav {
  transition:
    background 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    height 0.4s ease;
}

/* Default — light navbar */
body[data-page="about"] #site-nav {
  background: rgba(255, 255, 255, 0.96);
  color: #1A1A1A;
  border-bottom: 1px solid #E0E0E0;
  backdrop-filter: blur(16px);
}

/* When About page reaches dark section */
body[data-page="about"] #site-nav.about-dark {
  background: rgba(26, 26, 26, 0.92);
  color: #FFFFFF;
  border-bottom-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
}

/* Nav links */
body[data-page="about"] #site-nav .nav-a {
  color: inherit;
  transition: color 0.45s ease;
}

/* Logo text */
body[data-page="about"] #site-nav .nav-logo {
  color: inherit;
  transition: color 0.45s ease;
}

/* Logo image */
body[data-page="about"] #site-nav .nav-logo img {
  transition: filter 0.45s ease;
}

/* Black logo on light navbar */
body[data-page="about"] #site-nav:not(.about-dark) .nav-logo img {
  filter: none;
}

/* White logo on dark navbar */
body[data-page="about"] #site-nav.about-dark .nav-logo img {
  filter: brightness(0) invert(1);
}

/* Connect button */
body[data-page="about"] #site-nav .btn-p {
  transition:
    background 0.45s ease,
    color 0.45s ease;
}

/* Light navbar button */
body[data-page="about"] #site-nav:not(.about-dark) .btn-p {
  background: #1A1A1A;
  color: #FFFFFF;
}

/* Dark navbar button */
body[data-page="about"] #site-nav.about-dark .btn-p {
  background: #FFFFFF;
  color: #1A1A1A;
}

/* =========================================================
   FINAL ATHER ALI NAVBAR LOGO FIX
   ========================================================= */

/* Desktop logo */


/* Keep logo black on About page */
body[data-page="about"] #site-nav .nav-logo img {
    filter: none !important;
}

/* Keep logo black on Ventures */
body[data-page="ventures"] #site-nav .nav-logo img {
    filter: none !important;
}

/* Keep logo black on Blogs */
body[data-page="blogs"] #site-nav .nav-logo img {
    filter: none !important;
}

/* Keep logo black on Media */
body[data-page="media"] #site-nav .nav-logo img {
    filter: none !important;
}

/* Keep logo black on Gallery */
body[data-page="gallery"] #site-nav .nav-logo img {
    filter: none !important;
}

/* Mobile */
@media (max-width: 768px) {
    #site-nav .nav-logo img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    #site-nav .nav-logo img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
}

/* =========================================================
   ATHER ALI NAVBAR LOGO — FINAL
   ========================================================= */

/* Logo size */
#site-nav .nav-logo img {
  
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
  transition: filter 0.45s ease, opacity 0.45s ease !important;
}

/* =========================================
   HOME / DARK HERO
   Logo = WHITE
   ========================================= */

#site-nav.on-dark .nav-logo img {
  filter: none !important;
}

/* =========================================
   AFTER SCROLL / WHITE NAVBAR
   Logo = BLACK
   ========================================= */



/* =========================================
   ABOUT PAGE
   ========================================= */

/* Top of About = dark background
   Logo should stay WHITE */
body[data-page="about"] #site-nav.on-dark .nav-logo img {
  filter: none !important;
  opacity: 1 !important;
}

/* After scrolling = white navbar
   Logo becomes BLACK */
body[data-page="about"] #site-nav.scrolled .nav-logo img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}

/* Make navbar transition smooth */
body[data-page="about"] #site-nav {
  transition:
    background 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    backdrop-filter 0.45s ease !important;
}

/* About top */
body[data-page="about"] #site-nav.on-dark {
  background: transparent !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

/* About after scroll */
body[data-page="about"] #site-nav.scrolled {
  background: rgba(255,255,255,0.96) !important;
  color: #1A1A1A !important;
  border-bottom-color: #E0E0E0 !important;
  backdrop-filter: blur(16px) !important;
}

/* About nav links */
body[data-page="about"] #site-nav.on-dark .nav-a {
  color: #FFFFFF !important;
}

body[data-page="about"] #site-nav.scrolled .nav-a {
  color: #1A1A1A !important;
}
/* =========================================================
   FINAL ATHER ALI NAVBAR LOGO SYSTEM
   ONE SIZE — ONE COLOUR SYSTEM
   ========================================================= */

/* ---------- LOGO BASE ---------- */

#site-nav .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

#site-nav .nav-logo img {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;

    display: block !important;
    object-fit: contain !important;
    object-position: center !important;

    padding: 0 !important;
    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    transition: filter 0.4s ease, opacity 0.4s ease !important;
}


/* =========================================================
   DARK BACKGROUND
   Logo = WHITE
   ========================================================= */

#site-nav.on-dark .nav-logo img {
    filter: brightness(0) invert(1) !important;
}


/* =========================================================
   LIGHT BACKGROUND
   Logo = BLACK
   ========================================================= */

#site-nav:not(.on-dark) .nav-logo img {
    filter: none !important;
}


/* =========================================================
   SCROLLED NAVBAR
   Logo = BLACK
   ========================================================= */

#site-nav.scrolled .nav-logo img {
    filter: none !important;
}


/* =========================================================
   ABOUT PAGE
   DARK SECTION = WHITE LOGO
   LIGHT SECTION = BLACK LOGO
   ========================================================= */


body[data-page="about"] #site-nav:not(.about-dark) .nav-logo img {
    filter: none !important;
}


/* =========================================================
   VENTURES / BLOGS / MEDIA / GALLERY
   ALWAYS LIGHT NAVBAR = BLACK LOGO
   ========================================================= */

body[data-page="ventures"] #site-nav .nav-logo img,
body[data-page="blogs"] #site-nav .nav-logo img,
body[data-page="media"] #site-nav .nav-logo img,
body[data-page="gallery"] #site-nav .nav-logo img {
    filter: none !important;
}


/* =========================================================
   MOBILE — SAME LOGO SYSTEM
   ========================================================= */

@media (max-width: 768px) {

    #site-nav .nav-logo img {
        width: 80x !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }

}

/* Black line underneath on hover */
.venture-website a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: #1A1A1A;
    transition: width .3s ease;
}
body[data-page="gallery"] #site-nav {
    height: 72px;
}

body[data-page="gallery"] #site-nav .nav-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-page="gallery"] #site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

body[data-page="gallery"] #site-nav .nav-links .btn {
    padding: 10px 22px;
    font-size: .68rem;
}


/* Mobile: stack the about-preview so the image appears above the text */
@media (max-width: 768px) {
  .about-preview {
    display: block !important;
    grid-template-columns: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 auto;
    overflow: visible !important; /* allow descenders (g, y) to show */
  }

  /* Ensure the image becomes roughly half the viewport height on mobile */
  .about-preview > img {
    width: 100% !important;
    height: 50vh !important;
    max-height: 50vh !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Move the text below the image and remove desktop left border */
  .about-preview-copy {
    padding: 28px 20px 32px 20px !important; /* extra bottom padding so descenders are visible */
    border-left: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.05 !important;
  }

  /* Reduce large top padding used on desktop so content doesn't appear too low */
  .about-preview-copy { padding-top: 24px !important; }
}

/* Desktop: align main content with the logo and keep consistent horizontal gutters
   Applies to home, ventures, and gallery pages so text aligns with #site-nav .nav-inner */
@media (min-width: 769px) {
  body[data-page="home"] div[style*="max-width:1400px;margin:0 auto"],
  body[data-page="ventures"] div[style*="max-width:1400px;margin:0 auto"],
  body[data-page="gallery"] div[style*="max-width:1400px;margin:0 auto"] {
    padding-left: clamp(20px, 5vw, 48px) !important;
    padding-right: clamp(20px, 5vw, 48px) !important;
  }
}