/* ═══════════════════════════════════════════
   GKGM — about.css
   About Page
═══════════════════════════════════════════ */

/* ═══ JUSTIFIED BODY COPY ═══ */
.ab-sub, .ab-story-body p, .ab-story-fine, .ab-time-desc,
.ab-value-desc, .ab-lead-desc, .ab-why-desc {
  text-align: justify; text-justify: inter-word; hyphens: auto;
}

/* ═══ ABOUT HERO (mirrors sh-hero pattern) ═══ */
.ab-hero {
  position: relative; height: 82vh; min-height: 560px;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--dark);
}
.ab-hero-bg { position: absolute; inset: 0; }
.ab-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.55) saturate(0.9);
  transform: scale(1.06);
  animation: abHeroZoom 12s ease-out both;
}
@keyframes abHeroZoom { from { transform: scale(1.12); } to { transform: scale(1.06); } }
.ab-hero-grain {
  position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ab-hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--dark) 0%, rgba(8,8,8,0.55) 45%, rgba(8,8,8,0.15) 75%, transparent 100%);
}
.ab-hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 0 3rem 4.5rem;
}
.ab-eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.4rem;
}
.ab-eline { width: 40px; height: 1px; background: var(--gold); }
.ab-title {
  font-family: var(--serif); font-weight: 400; color: var(--white);
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -0.01em;
}
.ab-ln { display: block; overflow: hidden; }
.ab-ln em { font-style: italic; font-weight: 300; color: rgba(255,255,255,0.85); }
.ab-ln strong { font-weight: 500; }
.ab-sub {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,0.55); max-width: 560px; margin-top: 1.4rem;
}
.ab-anim { opacity: 0; transform: translateY(24px); animation: abFadeUp 0.9s var(--ease) both; }
@keyframes abFadeUp { to { opacity: 1; transform: translateY(0); } }

.ab-scroll-cue {
  position: absolute; right: 3rem; bottom: 2.2rem; z-index: 2;
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.ab-scroll-line { width: 1px; height: 34px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; }
.ab-scroll-line::after {
  content:''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--gold); animation: abScrollDrop 2s ease-in-out infinite;
}
@keyframes abScrollDrop { 0% { top: -100%; } 60%,100% { top: 100%; } }

/* ═══ STORY / INTRO SECTION ═══ */
.ab-story {
  padding: 7rem 3rem; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 5rem; align-items: start;
}
.ab-story-label { position: sticky; top: 140px; }
.ab-story-num {
  font-family: var(--serif); font-size: 5.5rem; font-weight: 300; color: rgba(200,169,81,0.18);
  line-height: 1; margin-bottom: 0.6rem;
}
.ab-story-body p {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300; line-height: 1.6;
  color: var(--dark); margin-bottom: 1.6rem;
}
.ab-story-body p:last-child { margin-bottom: 0; }
.ab-story-body em { font-style: italic; color: var(--gold-d); }
.ab-story-body .ab-lede { font-size: 1.7rem; }
.ab-story-fine {
  margin-top: 2.2rem; font-family: var(--sans); font-size: 0.85rem; font-weight: 300;
  line-height: 1.85; color: rgba(0,0,0,0.5); max-width: 640px;
}

/* ═══ TIMELINE (heritage / milestones) ═══ */
.ab-time-section { background: var(--dark2); padding: 7rem 3rem; position: relative; overflow: hidden; }
.ab-time-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.ab-time-track { position: relative; padding-left: 2.6rem; }
.ab-time-line {
  position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(200,169,81,0.08));
}
.ab-time-item {
  position: relative; padding-bottom: 3.4rem; padding-left: 0.5rem; opacity: 0; transform: translateX(-16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.ab-time-item.in-view { opacity: 1; transform: translateX(0); }
.ab-time-item:last-child { padding-bottom: 0; }
.ab-time-dot {
  position: absolute; left: calc(-2.6rem + 6px); top: 0.3rem; width: 13px; height: 13px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--dark2); border: 1px solid var(--gold);
}
.ab-time-item.in-view .ab-time-dot { background: var(--gold); }
.ab-time-year {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--gold); margin-bottom: 0.4rem;
}
.ab-time-title {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--white); margin-bottom: 0.5rem;
}
.ab-time-desc {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,0.45); max-width: 560px;
}

/* ═══ VALUES GRID ═══ */
.ab-values-section { padding: 7rem 3rem; max-width: 1280px; margin: 0 auto; }
.ab-values-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(0,0,0,0.08); margin-top: 3rem;
}
.ab-value-card {
  background: var(--white); padding: 2.6rem 2rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.ab-value-card.in-view { opacity: 1; transform: translateY(0); }
.ab-value-icon { color: var(--gold-d); margin-bottom: 1.4rem; }
.ab-value-name {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--dark); margin-bottom: 0.7rem;
}
.ab-value-desc {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 300; line-height: 1.8; color: rgba(0,0,0,0.48);
}

/* ═══ LEADERSHIP / PROFILE ═══ */
.ab-lead-section { background: var(--dark2); padding: 7rem 3rem; position: relative; overflow: hidden; }
.ab-lead-section::before {
  content:''; position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: radial-gradient(circle at 20% 20%, var(--gold) 0, transparent 40%);
}
.ab-lead-inner {
  max-width: 1280px; margin: 0 auto; position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4.5rem; align-items: center;
}
.ab-lead-img-frame {
  position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid rgba(200,169,81,0.25);
}
.ab-lead-img-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 0.6s var(--ease); }
.ab-lead-img-frame:hover img { transform: scale(1.04); }
.ab-lead-badge {
  position: absolute; left: 1.2rem; bottom: 1.2rem; background: var(--dark);
  border: 1px solid var(--gold); padding: 0.7rem 1.1rem;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.ab-lead-content .eyebrow--light { color: var(--gold); }
.ab-lead-name { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--white); margin: 0.6rem 0 0.2rem; }
.ab-lead-role {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.6rem;
}
.ab-lead-quote {
  font-family: var(--serif); font-style: italic; font-size: 1.35rem; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,0.85); border-left: 2px solid var(--gold); padding-left: 1.4rem; margin-bottom: 1.6rem;
}
.ab-lead-desc {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 300; line-height: 1.85; color: rgba(255,255,255,0.5);
  margin-bottom: 1.8rem;
}
.ab-lead-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.ab-lstat-num { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); }
.ab-lstat-label { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 0.2rem; }

/* ═══ WHY CHOOSE US STRIP ═══ */
.ab-why-section { padding: 7rem 3rem; max-width: 1280px; margin: 0 auto; }
.ab-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; }
.ab-why-card { padding: 2rem 0; border-top: 1px solid rgba(0,0,0,0.1); }
.ab-why-num { font-family: var(--serif); font-size: 0.85rem; color: var(--gold-d); letter-spacing: 0.04em; margin-bottom: 1rem; }
.ab-why-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--dark); margin-bottom: 0.6rem; }
.ab-why-desc { font-family: var(--sans); font-size: 0.8rem; font-weight: 300; line-height: 1.8; color: rgba(0,0,0,0.48); }

/* ═══ SHARED OVERRIDES for white-bg sections ═══ */
.ab-story .eyebrow, .ab-values-section .eyebrow, .ab-why-section .eyebrow { color: var(--gold-d); }
.ab-story .eyebrow::before, .ab-values-section .eyebrow::before, .ab-why-section .eyebrow::before { background: var(--gold-d); opacity: 0.6; }
.ab-time-section .eyebrow, .ab-lead-section .eyebrow, .factory-section .eyebrow, .cta-strip .eyebrow { color: var(--gold); }
.ab-time-section .eyebrow::before, .ab-lead-section .eyebrow::before { background: var(--gold); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .ab-story { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-story-label { position: static; }
  .ab-lead-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-lead-img-frame { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .ab-hero { height: 68vh; min-height: 460px; }
  .ab-hero-content { padding: 0 1.5rem 3rem; }
  .ab-scroll-cue { display: none; }
  .ab-story, .ab-time-section, .ab-values-section, .ab-lead-section, .ab-why-section { padding: 3.75rem 1.5rem; }
  .ab-story-body .ab-lede { font-size: 1.35rem; }
  .ab-story-body p { font-size: 1.15rem; }
  .ab-values-grid { grid-template-columns: 1fr; }
  .ab-why-grid { grid-template-columns: 1fr; }
  .ab-lead-stats { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .ab-hero { height: 62vh; min-height: 420px; }
  .ab-hero-content { padding: 0 1.25rem 2.5rem; }
  .ab-title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .ab-sub { font-size: 0.88rem; }
  .ab-story, .ab-time-section, .ab-values-section, .ab-lead-section, .ab-why-section { padding: 3rem 1.25rem; }
  .ab-story-num { font-size: 3.8rem; }
  .ab-story-body .ab-lede { font-size: 1.2rem; }
  .ab-story-body p { font-size: 1.05rem; }
  .ab-time-dot { width: 11px; height: 11px; }
  .ab-time-year { font-size: 1.35rem; }
  .ab-value-card { padding: 2rem 1.5rem; }
  .ab-lead-img-frame { max-width: 260px; }
  .ab-lead-name { font-size: 1.6rem; }
  .ab-lead-quote { font-size: 1.1rem; padding-left: 1rem; }
  .ab-lead-stats { gap: 1.2rem; }
  .ab-lstat-num { font-size: 1.35rem; }
  .ab-why-title { font-size: 1.1rem; }
}