/* ============================================================
   NALTERO Investments — site-wide theme overrides
   Loaded AFTER style.css. Monochrome palette + Poppins.

   Palette (per spec):
     heading   #ffffff
     body      #c8c8c8
     labels    #969696   (former orange accent #fd5b38 -> #969696)
     bg        #000000
     secondary #282828
   ============================================================ */

/* ---------- Typography: Poppins everywhere (icon fonts untouched) ---------- */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, label, blockquote,
input, textarea, select, button,
.butn, .sub-title, .nav-link, .rolling-text, .tag, .num {
  font-family: 'Poppins', sans-serif;
}

/* ---------- Base colors ---------- */
body {
  background-color: #000;
  color: #c8c8c8;
}

h1, h2, h3, h4, h5, h6 { color: #fff; }
p { color: #c8c8c8; }

/* labels / meta / tags / big numerals -> dark grey */
.p-color,
.sub-title,
.tag,
.services-inline2 .item .num { color: #969696 !important; }

/* former orange accent -> grey */
.main-color,
.main-color2 { color: #969696 !important; }
.main-colorbg,
.main-colorbg2 { background: #282828 !important; }

/* keep filled buttons legible on the dark grey */
.butn.main-colorbg .text,
.contact-button .butn .text { color: #fff; }

/* section backgrounds */
.main-bg { background: #000 !important; }
.sub-bg  { background: #282828 !important; }

/* decorative orange blur blobs -> neutral grey */
.circle-blur img { -webkit-filter: grayscale(1) brightness(.6); filter: grayscale(1) brightness(.6); }

/* ---------- Text logo (nav + footer) ---------- */
.logo-text { display: inline-block; line-height: 1; text-decoration: none; }
.logo-text b { display: block; font-weight: 600; font-size: 20px; letter-spacing: .5px; color: #fff; }
.logo-text span { display: block; margin-top: 3px; font-weight: 300; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #969696; }

/* ============================================================
   Hero header video background (Block 1) — used site-wide
   ============================================================ */
.crev-header { overflow: hidden; }

.crev-header .header-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.crev-header .header-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* video fades to black toward the bottom */
.crev-header .header-video:after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, #000 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
}
.crev-header .container.ontop { position: relative; z-index: 2; }
.crev-header .full-img { position: relative; z-index: 1; }
/* remove the template's orange radial gradient in the hero */
.crev-header .full-img:after { display: none !important; }
/* home.png is a full composed banner (1920×755). The template's fixed 550px-tall
   box cropped its top/bottom on desktop; let height follow the real aspect ratio so
   the whole banner shows. Full-bleed kept via 100vw (safe — header is overflow:hidden).
   Mobile (≤992px) keeps the template's cover crop, which reads fine in portrait. */
@media (min-width: 993px) {
  .crev-header .full-img {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    aspect-ratio: 1920 / 755;
    background-size: cover;
    background-position: center;
  }
}

/* ============================================================
   About (Block 2) — video inside the pill frame, no deco icons
   ============================================================ */
.about-author .profile-img .img { height: 520px; border-radius: 470px; overflow: hidden; }
.about-author .profile-img .img video {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================================
   What We Do (Block 4) — single video instead of the 3-image collage
   ============================================================ */
.intro-skill .imgs.home-media { position: relative; height: 100%; min-height: 340px; }
.intro-skill .imgs.home-media video {
  width: 100%; height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

/* ============================================================
   Founders (Block 6) — remove the orange gradient behind each photo
   ============================================================ */
.team-crev .circle-blur { display: none; }
/* extra role line under each founder */
.team-crev .item .info .role { display: block; margin-top: 6px; font-size: 13px; color: #969696; }

/* ============================================================
   For Investors (Block 8) — lead line above the description
   ============================================================ */
.services-inline2 .item .text h6 { color: #fff; }

/* ============================================================
   Global Company (Block 9) — keep collage imagery neutral
   ============================================================ */
.page-intro .img .img-icon img { -webkit-filter: grayscale(1); filter: grayscale(1); }

/* ============================================================
   Equal-height cards
   ============================================================ */
/* Our Focus (Block 3): all four cards match the tallest;
   title stays at top, icon + copy align to the bottom */
.services-crev .row.sm-marg > [class*="col-"] { display: flex; }
.services-crev .item-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.services-crev .item-box h5 { margin-bottom: 40px; }
.services-crev .item-box .icon { margin-top: auto; }

/* Founders (Block 6): cards match the tallest; photos align to the bottom
   regardless of how many lines the role text wraps to */
.team-crev .row > [class*="col-"] { display: flex; }
.team-crev .item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.team-crev .item .img { margin-top: auto; }

/* ============================================================
   FOUNDATION PAGE
   ============================================================ */

/* Block 1 — inner-page header band with the shared home.mp4 video.
   (.page-header:after from style.css already fades the band to dark) */
.page-header-video { position: relative; overflow: hidden; min-height: 60vh; }
.page-header-video .header-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.page-header-video .header-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* uniform tint so the white H1 stays legible over any video frame */
.page-header-video .header-video:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .45);
}

/* Block 4 — mission image (square), rounded, no object-fit collapse */
.intro-accord .img img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* Blocks 3 & 6 — Our Value / Our Network cards.
   The glassy icons are already monochrome on black, so keep them at full
   strength (no template opacity dimming) and make every card equal height. */
.foundation-feat .item-box .icon-img-70 img { opacity: 1; }
.foundation-feat .row > [class*="col-"] { display: flex; }
.foundation-feat .item-box { width: 100%; height: 100%; }

/* Block 5 — Our Story infographic, centered */
.our-story .story-graphic { max-width: 860px; margin: 0 auto; }
.our-story .story-graphic img { width: 100%; height: auto; display: block; }

/* Block 6 — full-width network banner (about4.png). Native ScrollSmoother
   parallax via data-speed (effects:true in smoother-script.js). The full image
   is always shown and gently drifts within the black vertical slack, so the
   bottom logo is never cropped. */
.story-parallax { width: 100%; overflow: hidden; padding: 80px 0; }
.story-parallax img { display: block; width: 100%; height: auto; }

@media (max-width: 991px) {
  .page-header-video { min-height: 45vh; }
}

/* ============================================================
   FOR INVESTORS PAGE
   ============================================================ */

/* Block 4 — Our Approach. The invest3-*.png are wide monochrome banners
   (~600x210), not pill thumbnails, so show them in full and override the
   template's fixed 140px pill frame + 100px radius. */
.invest-approach .item .img {
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}
.invest-approach .item .img img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
}

/* Block 5 — Startup Pipeline infographic (investline.svg), centered full-width */
.invest-pipeline .pipeline-graphic { width: 100%; margin: 0 auto; }
.invest-pipeline .pipeline-graphic img { width: 100%; height: auto; display: block; }

/* Block 6 — Investment Roadmap. Each step now carries a description under
   its title, so align the number to the top and give the copy room. */
.invest-roadmap .item { align-items: flex-start; }
.invest-roadmap .item .num { flex: 0 0 45px; margin-top: 6px; }
.invest-roadmap .item p { max-width: 90%; }

/* Block 7 — The Moment Is Now. invest4.png is a clean product shot, so show
   it 1:1 (the template blows the image up to 120% and shifts it left). The
   badge sits readably on the image, bottom-left, instead of floating above. */
.invest-moment .img { position: relative; border-radius: 15px; overflow: hidden; }
.invest-moment .img img { width: 100%; margin-left: 0; height: auto; display: block; }
.invest-moment .img .exp {
  top: auto;
  bottom: 30px;
  left: 30px;
  background: rgba(0, 0, 0, .72);
  padding: 18px 26px;
  border-radius: 12px;
}
.invest-moment .img .exp h3 { font-size: 46px; margin-bottom: 4px; }
.invest-moment .img .exp h6 { color: #c8c8c8; }

/* ============================================================
   STRATEGY PAGE
   ============================================================ */

/* Block 4 — Our Process. strategy2-*.png are wide monochrome line-art
   banners (600x210) on black, not pill thumbnails, so show them in full and
   override the services-inline2 fixed 140px pill frame + 100px radius.
   (Section stays on the black main-bg so the black-backed banners blend.) */
.strategy-process .item .img {
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}
.strategy-process .item .img img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
}

/* Block 7 — Risk Mitigation. Each step carries a description, so align the
   number to the top and give the copy room (mirrors the roadmap list). */
.strategy-risk .item { align-items: flex-start; }
.strategy-risk .item .num { flex: 0 0 45px; margin-top: 6px; }
.strategy-risk .item p { max-width: 90%; }

/* Block 8 — Built To Last. strategy5.png is a standard landscape photo, so
   show it 1:1 (the template blows the image up to 120% + shifts it left).
   The badge sits readably on the image, bottom-left, on a dark box. */
.strategy-vision .img { position: relative; border-radius: 15px; overflow: hidden; }
.strategy-vision .img img { width: 100%; margin-left: 0; height: auto; display: block; }
.strategy-vision .img .exp {
  top: auto;
  bottom: 30px;
  left: 30px;
  background: rgba(0, 0, 0, .72);
  padding: 18px 26px;
  border-radius: 12px;
}
.strategy-vision .img .exp h3 { font-size: 46px; margin-bottom: 4px; }
.strategy-vision .img .exp h6 { color: #c8c8c8; }

/* ============================================================
   NEWS & INSIGHTS PAGE
   ============================================================ */

/* Listing — bordered cards from the home-digital-agency blog grid.
   Force equal height across the 12-item flex grid so wrapping rows
   never staircase, and pin "Read more" to the bottom of every card. */
.news-list .row > [class*="col-"] { display: flex; }
.news-list .item { width: 100%; display: flex; flex-direction: column; }
.news-list .item .cont { display: flex; flex-direction: column; flex: 1 1 auto; }
.news-list .item .cont .butn-crev { margin-top: auto; }

/* Detail — per spec the article photo is centered at its natural 3:2
   ratio (not full-bleed), with the body flowing underneath. Override the
   .fit-img cover crop so the whole image always shows. */
.news-detail .news-photo { border-radius: 15px; overflow: hidden; }
.news-detail .news-photo img { width: 100%; height: auto; display: block; }

/* Detail header — centered meta row (no author avatar) */
.news-detail-header .caption,
.blog-header .caption.text-center { text-align: center; }

/* ============================================================
   STARTUP DETAIL PAGES (portfolio)
   Header video band reuses .page-header-video (defined above).
   ============================================================ */

/* Block 1 — the logo sits in the team-single photo slot. Show it whole and
   centered on a neutral card instead of cropping it like a portrait. */
.startup-single .logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: #282828;
  border-radius: 15px;
  padding: 50px;
}
.startup-single .logo-img img { width: 100%; max-width: 320px; height: auto; display: block; }

/* Block 2 — paired gallery images, uniform and rounded */
.startup-gallery .img img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* Block 4 — full-width solution image, rounded */
.startup-solution-img img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* Block 7 — Target Market cards. Reuses .services-crev card styling but, unlike
   the home "Our Focus" grid, the icons read top-to-bottom at full strength.
   These rules sit after the home overrides so they win on equal specificity. */
.startup-market .row.sm-marg > [class*="col-"] { display: flex; }
.startup-market .item-box { width: 100%; height: 100%; display: block; }
.startup-market .item-box h5 { margin-bottom: 30px; }
.startup-market .item-box .icon { margin-top: 0; opacity: 1; }
.startup-market .item-box .icon img { width: 70px; height: auto; }

/* Block 9 — roadmap infographic (Nstartup.svg), centered, intro copy constrained */
.startup-roadmap .sec-head p { max-width: 760px; margin-left: auto; margin-right: auto; }
.startup-roadmap .roadmap-graphic { max-width: 1100px; margin: 0 auto; }
.startup-roadmap .roadmap-graphic img { width: 100%; height: auto; display: block; }

/* Block 10 — three "glimpse" videos as uniform square tiles */
.startup-glimpse .glimpse-video {
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow: hidden;
  background: #282828;
}
.startup-glimpse .glimpse-video video { width: 100%; height: 100%; object-fit: cover; display: block; }