/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 20 2026 | 17:43:25 */
/* =========================
   NEW ABOUT PAGE
========================= */
/* ===============================
   DESKTOP
================================ */

.blkfog-image-cluster {
  display: grid;
  grid-template-columns: 1fr 1.35fr 0.9fr;
align-items: start;
  gap: 4vw;
  width: 100%;
  margin: 100px 0;
}

.cluster-img img {
  width: 100%;
  height: auto;
  display: block;
}
.cluster-img.middle img {
  transform: scale(1.05);
}
.cluster-img:first-child {
  margin-top: 90px;
}
.cluster-img:nth-child(3) img {
  height: 500px;
  object-fit: cover;
}
.cluster-img:last-child {
  margin-top: 80px;
}
/* ===============================
   MOBILE
================================ */

@media (max-width: 600px) {

  .blkfog-image-cluster {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .cluster-img.first { order: 1; }
  .cluster-img.last { order: 2; }

  .cluster-img.middle {
    order: 3;
    grid-column: span 2;
  }

  .cluster-img.first img,
  .cluster-img.last img {
    height: 260px;
    object-fit: cover;
  }

  .cluster-img.middle img {
    height: 380px;
    object-fit: cover;
	transform: none;
  }
	  .cluster-img {
    margin-top: 0 !important;
  }

}


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

.about-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  gap: 120px;
  color: #111;
}
.about-section {
  display: flex;
  flex-direction: column;
}

.about-section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.about-section p {
  max-width: 560px;
  font-size: 1.4rem;
  line-height: 1.7;
}
.about-section.left {
  align-items: flex-start;
  text-align: left;
}
.about-section.right {
  align-items: flex-end;
  text-align: right;
}

.about-section.right p {
  line-height: 1.75; /* Slight breathing for right alignment */
}




/* ===============================
 
================================ */
/* ORIGIN */
.about-origin h3 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.about-origin p {
  max-width: 600px;
  line-height: 1.7;
}
.about-image-grounding img {
  width: 100%;
  height: auto;
  opacity: 0.95;
}
/* ===============================
   BLKFOG SPLIT SECTION SYSTEM
================================ */

/* Base Layout */

.blkfog-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 120px;
  align-items: start;
  max-width: 1200px;
  margin: 180px auto;
  padding: 0 20px;
  position: relative;
}

/* Reverse layout */

.blkfog-split.reverse {
  grid-template-columns: 1fr 1.1fr;
}

.blkfog-split.reverse .blkfog-images {
  order: 2;
}

.blkfog-split.reverse .blkfog-text {
  order: 1;
}


/* ===============================
   IMAGE COLUMN
================================ */

.blkfog-images {
  display: flex;
  gap: 50px;
  align-items: baseline;
}

/* Small Image */

.img-small {
  flex: 0 0 32%;
  margin-top: 0;
}

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

/* Large Image */

.img-large {
  flex: 0 0 68%;
  margin-top: 70px; /* subtle drop for tension */
}

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

/* Reverse internal image order */

.blkfog-split.reverse .blkfog-images {
  flex-direction: row-reverse;
}

/* Adjust vertical offset when reversed */
.blkfog-split.reverse .img-large {
  margin-top: 0;
}

.blkfog-split.reverse .img-small {
  margin-top: 70px;
}

.shift-image {
  aspect-ratio: 2 / 3; /* adjust to taste */
 
}

.shift-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.swap {
        display: flex;
        flex-direction: column-reverse;
    }
/* ===============================
   TEXT COLUMN
================================ */

.blkfog-text {
  max-width: 480px;
}

.blkfog-text h2 {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  margin-bottom: 25px;
}

.blkfog-text p {
  line-height: 1.7;
  letter-spacing: 0.4px;
}
/* =================================
   BLKFOG BORDER STATEMENT SECTION
================================= */

.blkfog-statement {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 80px 20px;
  margin: 60px 0;
}

.blkfog-statement-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.blkfog-statement h2 {
	  font-size: 32px;
	 font-weight: 600;
	 text-transform: uppercase;
  letter-spacing: 1.6px;
	margin: 40px 0;
}
.blkfog-statement p {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
	  text-transform: uppercase;
  letter-spacing: 1.5px;
	color: #23232c;
}
@media (max-width: 600px) {

  .blkfog-statement {
    padding: 80px 20px;
  }
.blkfog-statement h2 {
	font-size: 22px;
	}
  .blkfog-statement p {
    font-size: 18px;
  }
}
/* ===============================
   BOTTOM PAGE BLOCK
================================ */
.blkfog-about-end {
  background: #f4f4f4; 
  color: #23232c;
  padding: 160px 20px;
  text-align: center;
}

.blkfog-about-end-inner {
  max-width: 800px;
  margin: 0 auto;
}

.blkfog-logo {
  margin-bottom: 40px;
}

.blkfog-logo img {
  max-width: 140px; /* adjust based on your logo proportions */
  height: auto;
  opacity: 0.9;
}


.blkfog-about-end h2 {
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 30px;
}

.blkfog-about-end .sub {
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.7;
  margin-bottom: 50px;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 992px) {

 .blkfog-split {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  /* Keep images inline */
  .blkfog-images {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  .img-small,
  .img-large {
    flex: 1;
    margin-top: 0;
  }

  .blkfog-text {
    max-width: 100%;
  }


/* Mobile */
@media (max-width: 900px) {
  .blkfog-split {
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 80px auto;
  }

  .blkfog-split.reverse {
    direction: ltr;
  }
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .about-page {
    gap: 72px;
    padding: 32px 0px;
  }

  .about-split,
  .about-split.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
	.shift-image {
  aspect-ratio: auto;
 }
}