/* ═══════════════════════════════════════════════════════════════
   Heavy Metal Fonts — about.css
   About page: stats strip, story + timeline, values grid.
   Relies on variables + shared components from homepage.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Stats strip ─────────────────────────────────────────────────── */
.hmf-about-stats { padding:40px 0; border-top:1px solid var(--hmf-glass-border); border-bottom:1px solid var(--hmf-glass-border); }
.hmf-about-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.hmf-about-stat { display:flex; flex-direction:column; gap:6px; }
.hmf-about-stat-num {
  font-family:var(--hmf-font-display); font-weight:400; font-size:clamp(30px,3.6vw,44px);
  color:var(--hmf-white); text-shadow:0 0 26px rgba(200,31,60,.35);
}
.hmf-about-stat-label { font-size:12px; color:var(--hmf-text-mute); text-transform:uppercase; letter-spacing:.08em; }

/* ── Story + timeline ────────────────────────────────────────────── */
.hmf-about-story-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.hmf-about-story-h { font-size:clamp(26px,3.2vw,38px); line-height:1.2; margin:8px 0 20px; text-shadow:0 0 28px rgba(200,31,60,.3); }
.hmf-about-story-copy p { font-size:15px; line-height:1.8; color:var(--hmf-text-dim); margin:0 0 18px; }
.hmf-about-story-copy .hmf-btn { margin-top:8px; }

.hmf-about-timeline {
  display:flex; flex-direction:column; gap:0; padding:8px 0 8px 24px;
  border-left:2px solid var(--hmf-glass-border); position:relative;
}
.hmf-about-timeline-item { position:relative; padding-bottom:36px; }
.hmf-about-timeline-item:last-child { padding-bottom:0; }
.hmf-about-timeline-item::before {
  content:''; position:absolute; left:-30px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--hmf-red-bright); box-shadow:0 0 0 4px rgba(200,31,60,.2), 0 0 14px var(--hmf-red-glow);
}
.hmf-about-timeline-year {
  display:inline-block; font-family:var(--hmf-font-display); font-weight:400; font-size:14px;
  color:var(--hmf-red-bright); letter-spacing:.06em; margin-bottom:6px;
}
.hmf-about-timeline-body h3 { font-size:16px; font-weight:700; color:var(--hmf-white); margin:0 0 6px; }
.hmf-about-timeline-body p { font-size:13.5px; line-height:1.6; color:var(--hmf-text-mute); margin:0; }

/* ── Values grid ─────────────────────────────────────────────────── */
.hmf-about-values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.hmf-about-value {
  padding:28px; border-radius:var(--hmf-radius); border:1px solid var(--hmf-glass-border);
  background:var(--hmf-glass);
  -webkit-backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  backdrop-filter:blur(var(--hmf-blur)) saturate(150%);
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  transition:transform .2s ease, border-color .2s ease;
}
.hmf-about-value:hover { transform:translateY(-4px); border-color:var(--hmf-red-border); }
.hmf-about-value-ic {
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--hmf-red-bright); margin-bottom:16px;
  background:linear-gradient(135deg, rgba(200,31,60,.22), rgba(110,14,33,.12));
  border:1px solid var(--hmf-red-border);
}
.hmf-about-value h3 { font-size:16px; font-weight:700; color:var(--hmf-white); margin:0 0 8px; }
.hmf-about-value p { font-size:13.5px; line-height:1.65; color:var(--hmf-text-dim); margin:0; }

/* ── Studio gallery ──────────────────────────────────────────────── */
.hmf-about-gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:8px; }
.hmf-about-gallery-item {
  margin:0; border-radius:var(--hmf-radius); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--hmf-glass-border); background:rgba(0,0,0,.25);
}
.hmf-about-gallery-item img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease, filter .3s ease; filter:grayscale(.3);
}
.hmf-about-gallery-item:hover img { transform:scale(1.05); filter:grayscale(0); }
.hmf-about-gallery-item--empty {
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px), rgba(0,0,0,.25);
}
.hmf-about-gallery-item--empty span { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--hmf-text-mute); }

/* ── Address + map ───────────────────────────────────────────────── */
.hmf-about-map-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; }
.hmf-about-map-info .hmf-eyebrow { justify-content:flex-start; }
.hmf-about-address {
  font-style:normal; font-size:16px; line-height:1.7; color:var(--hmf-text-dim);
  margin:16px 0 24px; padding-left:16px; border-left:3px solid var(--hmf-red-border);
}
.hmf-about-map-img { border-radius:var(--hmf-radius); overflow:hidden; border:1px solid var(--hmf-glass-border); box-shadow:0 12px 40px rgba(0,0,0,.45); }
.hmf-about-map-img img { width:100%; height:auto; display:block; }
.hmf-about-map-placeholder {
  aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--hmf-text-mute); background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(200,31,60,.12), transparent 60%), rgba(0,0,0,.3);
}
.hmf-about-map-placeholder span { font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hmf-about-story-grid { grid-template-columns:1fr; gap:40px; }
  .hmf-about-map-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width: 640px) {
  .hmf-about-stats-grid { grid-template-columns:1fr 1fr; gap:24px 16px; }
  .hmf-about-values-grid { grid-template-columns:1fr; }
  .hmf-about-gallery { grid-template-columns:1fr 1fr; gap:12px; }
}