/* ============================================================
   MAD RESERVE CO. — ABOUT PAGE STYLES
   Load AFTER css/global.css.
   Contains styles unique to about.html only:
   page hero, brand values strip, brand story, philosophy,
   founder section, brand identity gallery, stats, CTA.
============================================================ */

/* ====================================================
   PAGE HERO — "About" style banner
==================================================== */
#about-hero {
  position: relative;
  padding: 180px 0 100px;
  background: var(--black);
  overflow: hidden;
  text-align: center;
}

/* Large faded text scrolling left to right (background detail) */
.marquee-track {
  position: absolute;
  bottom: 24px;
  left: 0;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 140px);
  color: rgba(212,175,55,0.04);
  letter-spacing: 10px;
  text-transform: uppercase;
}

.about-hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.about-hero-content { position: relative; z-index: 2; }

.about-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--cream);
  margin: 16px 0 20px;
}

.about-hero-sub { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 36px; }

/* Breadcrumb trail (used on all inner pages, but styles live in
   each page-specific file since wording differs by page) */
.breadcrumb-trail { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.breadcrumb-trail a, .breadcrumb-trail span { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); }
.breadcrumb-trail a:hover  { color: var(--gold); }
.breadcrumb-trail .sep     { color: rgba(212,175,55,0.4); }
.breadcrumb-trail .current { color: var(--gold); }

.about-hero-rule { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 0 auto; }
.about-hero-rule span { display: block; height: 1px; background: var(--gold); opacity: 0.4; }
.about-hero-rule .long  { width: 80px; }
.about-hero-rule .short { width: 30px; }
.about-hero-rule i { color: var(--gold); font-size: 12px; }

/* ====================================================
   BRAND VALUES ROW — 4 pillars beneath hero
==================================================== */
#brand-values {
  background: var(--mid-grey);
  border-top: 1px solid rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.08);
  padding: 60px 0;
}

.value-pillar { text-align: center; padding: 0 16px; position: relative; }
.value-pillar + .value-pillar::before {
  content: '';
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: rgba(212,175,55,0.15);
}

.pillar-icon {
  width: 52px; height: 52px;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.pillar-icon i { color: var(--gold); font-size: 18px; }

.pillar-title { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.pillar-desc { font-size: 0.85rem; color: var(--text-muted); max-width: 180px; margin: 0 auto; }

/* ====================================================
   BRAND STORY SECTION
==================================================== */
#our-story {
  background: var(--black);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
#our-story::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(212,175,55,0.15), transparent);
}
#our-story::after {
  content: 'STORY';
  position: absolute; right: -20px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--font-display); font-size: 120px; letter-spacing: 20px;
  color: rgba(212,175,55,0.025);
  pointer-events: none; user-select: none;
}

.story-body-text { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 18px; line-height: 1.85; text-align: justify; }

/* Vision / Mission checklist (Brand Story section) */
.brand-story-list { list-style: none; }
.brand-story-list li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
}
.brand-story-list li::before {
  content: '\f101'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--gold); position: absolute; left: 0; top: 2px; font-size: 0.85rem;
}

/* Vision / Mission cards */
#brand-story { background: var(--mid-grey); padding: 100px 0; }

.story-card {
  height: 100%;
  background: var(--black);
  border: 1px solid rgba(212,175,55,0.12);
  padding: 48px 40px;
  transition: border-color var(--transition);
}
.story-card:hover { border-color: rgba(212,175,55,0.35); }

.story-card-icon {
  width: 56px; height: 56px;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.story-card-icon i { color: var(--gold); font-size: 20px; }

.story-card-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--cream);
  margin-bottom: 20px;
}

/* Featured pull-quote */
.pull-quote {
  position: relative;
  padding: 28px 36px;
  border-left: 2px solid var(--gold);
  margin: 36px 0;
  background: rgba(212,175,55,0.03);
}
.pull-quote::before {
  content: '\201C';
  position: absolute; top: -16px; left: 20px;
  font-family: var(--font-serif); font-size: 80px;
  color: var(--gold); opacity: 0.3; line-height: 1;
}
.pull-quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--cream); line-height: 1.6; }
.pull-quote cite { display: block; margin-top: 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-style: normal; }

/* Visual stack — left side of story section */
.story-img-stack { position: relative; padding-bottom: 60px; }
.story-img-stack .img-back {
  position: absolute; right: -20px; top: 20px;
  width: 80%; height: 420px; object-fit: cover;
  filter: brightness(0.7);
  border: 1px solid rgba(212,175,55,0.1);
}
.story-img-stack .img-front {
  position: relative; z-index: 2;
  width: 70%; height: 340px; object-fit: cover;
  margin-top: 60px;
  border: 1px solid rgba(212,175,55,0.15);
}
.story-img-stack .img-corner {
  position: absolute; z-index: 3;
  bottom: 10px; left: calc(70% - 20px);
  width: 50px; height: 50px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}
.story-year-badge {
  position: absolute; z-index: 4; top: 0; left: 0;
  background: var(--black);
  border: 1px solid rgba(212,175,55,0.3);
  padding: 14px 18px; text-align: center;
}
.story-year-badge .yr  { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); display: block; }
.story-year-badge .lbl { font-family: var(--font-display); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }

/* ====================================================
   FOUNDER SECTION
==================================================== */
#founder {
  background: var(--mid-grey);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
#founder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(212,175,55,0.02) 0px, rgba(212,175,55,0.02) 1px, transparent 1px, transparent 60px);
  pointer-events: none;
}
#founder::after {
  content: 'FOUNDER';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: clamp(60px, 12vw, 130px); letter-spacing: 16px;
  color: rgba(212,175,55,0.03);
  pointer-events: none; user-select: none; white-space: nowrap;
}

.founder-portrait-wrap { position: relative; display: inline-block; width: 100%; }
.founder-portrait {
  width: 100%; max-width: 380px; height: 460px;
  object-fit: cover; object-position: center top;
  border: 1px solid rgba(212,175,55,0.2);
  display: block; margin: 0 auto;
  filter: grayscale(20%) brightness(0.9);
  transition: filter var(--transition);
}
.founder-portrait:hover { filter: grayscale(0%) brightness(1); }

.founder-portrait-border {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(calc(-50% + 14px));
  width: calc(100% - 40px); max-width: 380px; height: 460px;
  border: 1px solid rgba(212,175,55,0.25);
  pointer-events: none; z-index: 0;
}

.founder-nameplate {
  background: var(--gold); color: var(--black);
  padding: 14px 24px; max-width: 280px; margin: -1px auto 0; text-align: center;
}
.founder-nameplate .fn { font-family: var(--font-display); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; display: block; }
.founder-nameplate .ft { font-family: var(--font-body); font-size: 11px; opacity: 0.75; }

.founder-text { position: relative; z-index: 2; }
.founder-lead { font-family: var(--font-serif); font-size: 1.2rem; color: var(--cream); margin-bottom: 20px; line-height: 1.6; }
.founder-body { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.85; text-align: justify; }

.founder-sig { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--gold); margin-top: 24px; display: block; }
.founder-sig-title { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

/* ====================================================
   PHILOSOPHY / MISSION SECTION
==================================================== */
#philosophy {
  background: var(--black);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
#philosophy::before, #philosophy::after {
  content: '';
  position: absolute; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,0.25), transparent);
}
#philosophy::before { top: 0; }
#philosophy::after  { bottom: 0; }

.philosophy-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  font-weight: 600; line-height: 1.35; color: var(--cream);
  text-align: center; max-width: 820px; margin: 0 auto;
}
.philosophy-statement em { font-style: italic; color: var(--gold); }

/* ====================================================
   BRAND IDENTITY SHOWCASE — horizontal scroll gallery
==================================================== */
#brand-identity { background: var(--mid-grey); padding: 100px 0; }

.identity-gallery {
  display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.identity-gallery::-webkit-scrollbar { display: none; }

.identity-frame { flex: 0 0 300px; height: 380px; overflow: hidden; position: relative; border: 1px solid rgba(212,175,55,0.08); }
.identity-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); transition: transform 0.6s ease, filter 0.6s ease; }
.identity-frame:hover img { transform: scale(1.05); filter: brightness(1); }
.identity-frame-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
}

.drag-hint { display: flex; align-items: center; gap: 10px; margin-top: 20px; justify-content: flex-end; padding-right: 10px; }
.drag-hint span { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.drag-hint i { color: var(--text-muted); font-size: 13px; }

/* ====================================================
   BRAND NUMBERS / STATS ROW
==================================================== */
#brand-stats { background: var(--black); padding: 80px 0; border-top: 1px solid rgba(212,175,55,0.08); }

.stat-block { text-align: center; padding: 20px; position: relative; }
.stat-block + .stat-block::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;
  background: rgba(212,175,55,0.12);
}
.stat-num { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--gold); display: block; line-height: 1; margin-bottom: 10px; }
.stat-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.stat-desc { font-size: 0.8rem; color: rgba(138,122,106,0.7); margin-top: 6px; }

/* ====================================================
   CLOSING CTA BANNER
==================================================== */
#about-cta {
  background: var(--mid-grey);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#about-cta::before {
  content: '';
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cta-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--cream); margin: 16px 0 12px; }
.cta-sub { font-size: 0.95rem; color: var(--text-muted); max-width: 420px; margin: 0 auto 36px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ====================================================
   KEYFRAMES specific to about page
==================================================== */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ====================================================
   RESPONSIVE — about page specific
==================================================== */
@media (max-width: 991px) {
  .story-img-stack .img-back { display: none; }
  .story-img-stack .img-front { width: 100%; max-width: 100%; }
  .story-img-stack .img-corner { left: auto; right: 0; }
  .founder-portrait-border { display: none; }
  .value-pillar + .value-pillar::before { display: none; }
  .stat-block + .stat-block::before { display: none; }
}

@media (max-width: 767px) {
  .about-hero-title { font-size: 2.4rem; }
  .identity-frame { flex: 0 0 240px; height: 300px; }
  .cta-buttons { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .pull-quote { padding: 20px 20px 20px 28px; }
  .philosophy-statement { font-size: 1.4rem; }
}