/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE STYLES
═══════════════════════════════════════════════════════════ */

/* ─── HERO ──────────────────────────────────────────────── */
.about-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: #000000;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.about-hero-texture {
  position: absolute; inset: 0;
  background-image: url('https://www.figma.com/api/mcp/asset/9a9d0c32-3031-4668-aec8-8209aa1c893e');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
}

.about-hero .navbar { position: relative; z-index: 10; }

.about-hero-content {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 96px 64px 0px 64px;
  width: 100%;
  overflow: visible;
  margin-top: 84px;
}

.about-hero-left {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0;
}

.about-hero-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-hero-title {
  font-size: 50px;
  color: var(--gs-200);
  line-height: 1.2;
}

/* highlight — yellow bg + LEFT bracket line + RIGHT bracket line + dots */
.about-title-highlight {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* yellow background — bracket lines are pseudo-elements so they scale with the box */
.about-highlight-box {
  position: absolute;
  inset: 2px -10px;
  background: rgba(233, 201, 28, 0.18);
  z-index: -1;
}

.about-highlight-box::before,
.about-highlight-box::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 2px; height: calc(100% + 8px);
  background: var(--yellow-600);
}
.about-highlight-box::before { left:  -2px; }
.about-highlight-box::after  { right: -2px; }

/* corner dots */
.about-title-dot-tr {
  position: absolute;
  right: -14px; top: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
  display: block;
}
.about-title-dot-bl {
  position: absolute;
  left: -14px; bottom: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
  display: block;
}

.about-hero-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: var(--gs-200);
  line-height: 1.5;
}

.about-hero-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-200);
  line-height: 1.7;
  max-width: 491px;
  opacity: 0.85;
}

/* ─── PHOTO GRID ─────────────────────────────────────────── */
.about-hero-grid {
  align-self: flex-start;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  height: calc(100vh + 140px); /* 140px of 4th image bleeds below hero */
  overflow: visible;
}

.about-grid-img {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.about-grid-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.about-grid-img:hover img { transform: scale(1.05); }

/* ─── SCROLL WIDGET — pinned to bottom center of hero ─── */
.about-hero .scroll-widget {
  position: absolute;
  bottom: 32px;
  left: 96px;
  transform: translateX(-50%);
}

/* ─── JOURNEY SECTION ────────────────────────────────────── */
.about-journey {
  padding: 104px 64px;
  /* max-width: 1440px; */
  margin: 0 auto;
  width: 100%;
}

.about-journey-inner {
  max-width: 634px;
}

.about-journey-title {
  font-size: clamp(32px, 3vw, 44px);
  color: var(--gs-1100);
  line-height: 1.3;
  margin-bottom: 24px;
}

.about-journey-highlight {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.aj-highlight-box {
  position: absolute;
  inset: 0 -8px;
  background: rgba(233, 201, 28, 0.18);
  z-index: -1;
}

.aj-highlight-box::before,
.aj-highlight-box::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 2px; height: calc(100% + 8px);
  background: var(--yellow-600);
}
.aj-highlight-box::before { left:  -1px; }
.aj-highlight-box::after  { right: -1px; }

.aj-dot-tr {
  position: absolute;
  right: -12px; top: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
  display: block;
}
.aj-dot-bl {
  position: absolute;
  left: -12px; bottom: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
  display: block;
}

.about-journey-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-1100);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ─── IMAGE COLLAGE ──────────────────────────────────────── */
.about-collage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.about-collage-img {
  position: absolute;
  overflow: hidden;
}

.about-collage-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.about-collage-img-1 {
  left: 0; top: 0;
  width: 65%; height: 75vh;
}

.about-collage-img-2 {
  right: 0; top: 115px;
  width: 70%; height: 75vh;
}


/* ─── DIFFERENCE SECTION ─────────────────────────────────── */
.about-difference {
  position: relative;
  background: var(--gs-200);
  padding: 44px 32px;
  overflow: hidden;
  margin: 0 32px 105px;
}

.about-difference-texture {
  position: absolute; inset: 0;
  background-image: url('https://www.figma.com/api/mcp/asset/9a9d0c32-3031-4668-aec8-8209aa1c893e');
  background-size: cover;
  opacity: 0.15;
  pointer-events: none;
}

.about-difference-inner {
  position: relative;
  /* max-width: 1312px; */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-difference-title {
  font-size: clamp(32px, 3vw, 44px);
  color: var(--gs-1100);
  line-height: 1.3;
  margin-bottom: 8px;
}

.about-diff-highlight {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.ad-highlight-box {
  position: absolute;
  inset: 0 -8px;
  background: rgba(233, 201, 28, 0.18);
  z-index: -1;
}

.ad-highlight-box::before,
.ad-highlight-box::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 2px; height: calc(100% + 8px);
  background: var(--yellow-600);
}
.ad-highlight-box::before { left:  -1px; }
.ad-highlight-box::after  { right: -1px; }

.ad-dot-tr {
  position: absolute;
  right: -12px; top: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
  display: block;
}
.ad-dot-bl {
  position: absolute;
  left: -12px; bottom: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
  display: block;
}

.about-difference-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-1100);
  line-height: 1.7;
}

.about-culture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.about-culture-card {
  display: flex;
  padding: 40px 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 198px;
  justify-content: center;
  overflow: hidden;
}

.about-culture-label {
  background: var(--gs-400);
  padding: 12px 20px;
  font-size: 24px;
  color: var(--gs-1100);
  width: 100%;
  text-align: center;
}

.about-culture-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-600);
  line-height: 1.7;
  text-align: center;
  max-width: 276px;
}

/* ─── SUSTAINABILITY ─────────────────────────────────────── */
.about-sustainability {
  background: #fff;
  padding: 0 0 80px;
  overflow: visible;
}

.about-sust-images {
  width: 100%;
  height: 596px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 0;
}

.about-sust-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.about-sust-content {
  position: relative;
  z-index: 2;
  margin: -60px 40px 0;
  background: #fff;
  border-radius: 8px 8px 0 0;
  padding: 40px 48px;
  display: flex;
  align-items: flex-start;
  gap: 100px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}

/* ── Left column ── */
.about-sust-content-left {
  flex: 0 0 40%;
  width: 40%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 12px;
  padding: 0;
  min-width: unset;
}

.about-sust-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #888;
  text-transform: uppercase;
  padding-top: 10px;
  white-space: nowrap;
  grid-column: 1;
  grid-row: 1;
}

.about-sust-title {
  font-size: clamp(36px, 4vw, 52px);
  color: var(--gs-1100);
  line-height: 1.15;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
}

.about-sust-title-cont {
  font-size: clamp(36px, 4vw, 52px);
  color: var(--gs-1100);
  line-height: 1.15;
  margin: 0;
  grid-column: 1 / -1;  /* spans both columns */
  grid-row: 2;
  padding-top: 0;
}

/* ── Right column ── */
.about-sust-content-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
  align-items: flex-start;
}

/* Subtitle box */
.about-sust-subtitle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  isolation: isolate;
}

.as-highlight-box {
  position: absolute;
  inset: 0;
  background: rgba(233, 201, 28, 0.15);
  z-index: -1;
}

.as-highlight-box::before,
.as-highlight-box::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 2px; height: calc(100% + 6px);
  background: var(--yellow-600);
}
.as-highlight-box::before { left:  -1px; }
.as-highlight-box::after  { right: -1px; }

.as-dot-tr {
  position: absolute;
  right: -3px; top: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
}
.as-dot-bl {
  position: absolute;
  left: -3px; bottom: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-600);
}

.about-sust-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--gs-1100);
  white-space: nowrap;
}

.about-sust-desc {
  font-size: 16px;
  font-weight: 500;
  color: #555;
  line-height: 1.75;
}

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ─── HERO ─── */
  .about-hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* navbar must be absolute on mobile so left:24px/right:24px from style.css
     constrains it properly — position:relative + left:24px shifts it off-screen */
  .about-hero .navbar { position: absolute; }

  .about-hero-content {
    flex-direction: column;
    padding: 40px 24px 0;
    margin-top: 70px;
    gap: 40px;
    overflow: visible;
    align-items: stretch;
  }

  .about-hero-left {
    flex: none;
    width: 100%;
    gap: 20px;
  }

  .about-hero-title { font-size: 44px; }
  .about-hero-subtitle { font-size: 16px; }
  .about-hero-desc { max-width: 100%; font-size: 14px; }

  .about-hero .scroll-widget { display: none; }

  /* Hero highlight mobile fixes */
  .about-highlight-box::before { top: -2px; height: calc(100% + 4px); }
  .about-highlight-box::after  { top: -2px; height: calc(100% + 4px); }
  .about-title-dot-tr { right: -10px; top: -9px; width: 6px; height: 6px; }
  .about-title-dot-bl { left: -10px; bottom: -5px; width: 6px; height: 6px; }

  /* ─── PHOTO GRID ─── */
  .about-hero-grid {
    flex: none;
    width: 100%;
    height: auto;
    flex-direction: column;
    margin-top: 0;
    overflow: visible;
  }

  .about-grid-img {
    flex: none;
    width: 100%;
    height: 260px;
  }

  /* ─── JOURNEY ─── */
  .about-journey { padding: 48px 24px; }
  .about-journey-title { font-size: 28px; }

  /* Journey highlight mobile fixes */
  .aj-highlight-box::before { top: -2px; height: calc(100% + 4px); }
  .aj-highlight-box::after  { top: -2px; height: calc(100% + 4px); }
  .aj-dot-tr { right: -10px; top: -9px; width: 6px; height: 6px; }
  .aj-dot-bl { left: -10px; bottom: -5px; width: 6px; height: 6px; }

  /* ─── COLLAGE ─── */
  .about-collage { height: 400px; }
  .about-collage-img-1 { width: 70%; height: 300px; }
  .about-collage-img-2 { left: 20%; top: 80px; width: 80%; height: 320px; }

  /* ─── DIFFERENCE ─── */
  .about-difference {
    margin: 40px 0 60px;
    padding: 40px 20px;
  }
  .about-culture-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .about-culture-card { height: auto; padding: 20px 0; }

  /* Difference highlight mobile fixes */
  .ad-highlight-box::before { top: -2px; height: calc(100% + 4px); }
  .ad-highlight-box::after  { top: -2px; height: calc(100% + 4px); }
  .ad-dot-tr { right: -10px; top: -9px; width: 6px; height: 6px; }
  .ad-dot-bl { left: -10px; bottom: -5px; width: 6px; height: 6px; }

  /* ─── SUSTAINABILITY ─── */
  .about-sustainability { padding: 0 0 60px; }

  .about-sust-images {
    height: 60vh;
    border-radius: 0;
  }

  .about-sust-content {
    flex-direction: column;
    gap: 24px;
    margin: -40px 16px 0;
    padding: 28px 24px;
    align-items: stretch;
  }

  .about-sust-content-left {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: none;
    gap: 8px;
  }

  .about-sust-label {
    padding-top: 0;
    white-space: normal;
  }

  .about-sust-title { font-size: 36px; }

  .about-sust-title-cont {
    font-size: 36px;
    grid-column: unset;
  }

  .about-sust-subtitle-wrap {
    display: inline-flex;
    width: auto;
    white-space: normal;
    align-self: flex-start;
  }

  .about-sust-subtitle { white-space: normal; }

  /* Sustainability subtitle highlight mobile fixes */
  .as-highlight-box::before { top: -2px; height: calc(100% + 4px); }
  .as-highlight-box::after  { top: -2px; height: calc(100% + 4px); }

}