/* ===== About ===== */

.about-hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:150px 0 120px;
  background:
    radial-gradient(720px 420px at 88% -10%, rgba(197,160,89,.16), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.about-hero-inner{max-width:1180px; margin:0 auto; padding:0 48px; position:relative}
.about-display{font-size:clamp(3rem,6.4vw,5.6rem); max-width:900px; line-height:1.02; letter-spacing:-.01em; margin:0}
.about-display em{
  font-style:italic; font-weight:500;
  background:linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 55%, var(--gold-light) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.about-hero-method{
  margin:28px 0 0; max-width:620px; font-size:16px; line-height:1.7;
  color:var(--sub); padding-left:20px; border-left:2px solid var(--gold);
}

.about-hero-sub{
  display:grid; grid-template-columns:1fr 380px; gap:60px;
  margin-top:56px; padding-top:44px; border-top:1px solid var(--line);
}
.about-hero-sub .page-sub{margin:0; max-width:560px; line-height:1.7; font-size:17.5px}
.about-figures{display:flex; flex-direction:column; gap:26px}
.about-fig{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.about-fig-num{font-family:var(--serif); font-size:30px; color:var(--gold-dark); font-weight:600}
.about-fig-lbl{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sub); text-align:right; max-width:150px;
}

/* ---- Marquee ---- */
.about-marquee{
  overflow:hidden; white-space:nowrap; padding:18px 0;
  background:linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 55%, var(--gold-light) 100%);
  border-bottom:1px solid rgba(26,37,48,.08);
}
.about-marquee-track{
  display:inline-flex; align-items:center; gap:14px;
  animation:about-marquee-scroll 34s linear infinite;
  will-change:transform;
}
.about-marquee-item{
  font-family:var(--serif); font-size:19px;
  color:var(--white); letter-spacing:.01em;
}
.about-marquee-dot{color:rgba(26,37,48,.55); font-size:12px}
@keyframes about-marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .about-marquee-track{animation:none}
}

/* ---- Video stats card ---- */
.about-video-section{max-width:1180px; margin:0 auto; padding:72px 48px}
.about-video-card{
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(26,37,48,.45);
  aspect-ratio:16/8.2;
}
.about-video-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.about-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.15) 48%, rgba(15,12,10,0) 70%);
}
.about-video-stats{
  position:absolute; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  padding:0 48px 40px;
}
.about-video-num{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,4.2vw,3.6rem);
  color:var(--white); line-height:1; letter-spacing:-.01em;
}
.about-video-num span{font-weight:300}
.about-video-lbl{
  margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.82); letter-spacing:.01em;
}

@media (max-width:900px){
  .about-video-section{padding:48px 24px}
  .about-video-card{aspect-ratio:auto; min-height:420px}
  .about-video-stats{grid-template-columns:repeat(2,1fr); row-gap:26px; padding:0 24px 28px}
}
@media (max-width:520px){
  .about-video-card{border-radius:14px}
  .about-video-stats{grid-template-columns:1fr 1fr}
  .about-video-num{font-size:2rem}
}

/* ---- Statement band ---- */
.about-statement{background:var(--navy); color:var(--white); position:relative; overflow:hidden}
.about-statement-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.22; filter:grayscale(.3) contrast(1.05);
}
.about-statement::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, var(--navy) 30%, rgba(44,62,80,.7) 65%, rgba(197,160,89,.28) 130%);
}
.about-statement::after{
  content:''; position:absolute; top:-25%; right:2%; width:420px; height:420px;
  border:1px solid rgba(255,255,255,.06); border-radius:50%;
}
.about-statement-inner{max-width:1180px; margin:0 auto; padding:120px 48px; position:relative; z-index:1}
.about-statement blockquote{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.42; max-width:880px; margin:0; color:var(--white);
}
.about-statement blockquote span{color:var(--gold-light); font-style:normal}
.about-statement cite{
  display:block; margin-top:40px; font-family:var(--sans); font-style:normal;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light);
}

/* ---- Process chain (inside statement band) ---- */
.about-process{
  list-style:none; margin:72px 0 0; padding:44px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px;
}
.about-process-step{position:relative; padding-top:26px}
.about-process-step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--gold) 0%, rgba(197,160,89,.18) 100%);
}
.about-process-step::after{
  content:''; position:absolute; top:-4px; left:0; width:8px; height:8px;
  border-radius:50%; background:var(--gold);
}
.about-process-step:last-child::before{background:var(--gold)}
.about-process-num{
  font-family:ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size:11px; letter-spacing:.16em; color:var(--gold-light); margin-bottom:10px;
}
.about-process-step h3{
  font-family:var(--serif); font-size:17px; font-weight:600;
  color:var(--white); margin:0 0 8px;
}
.about-process-step p{font-size:13px; color:rgba(255,255,255,.72); line-height:1.6; margin:0}

/* ---- Sections ---- */
.about-section, .about-timeline-section{max-width:1180px; margin:0 auto; padding:110px 48px}
.about-section-head{display:grid; grid-template-columns:260px 1fr; gap:60px; margin-bottom:64px}
.about-section-head .eyebrow{position:relative; padding-bottom:14px}
.about-section-head .eyebrow::after{
  content:''; position:absolute; left:0; bottom:0; width:44px; height:2px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.about-section-head h2{
  font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.85rem); font-weight:600; line-height:1.15; max-width:640px; margin:0;
}

.about-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.about-pillar{background:var(--white); transition:background .3s}
.about-pillar:hover{background:var(--cream)}
.about-pillar-photo{aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--navy)}
.about-pillar-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.15)}
.about-pillar-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 55%, rgba(26,37,48,.45) 100%);
}
.about-pillar-photo-badge{background:var(--cream); display:flex; align-items:center; justify-content:center}
.about-pillar-photo-badge img{width:auto; height:62%; object-fit:contain; filter:none}
.about-pillar-photo-badge::after{content:none}
.about-pillar-body{padding:32px 34px 40px}
.about-pillar-num{
  display:inline-block; font-family:var(--serif); font-size:15px; font-weight:600; margin-bottom:18px;
  background:linear-gradient(100deg, var(--gold-dark), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-pillar h3{font-family:var(--serif); font-size:21px; font-weight:600; margin:0 0 14px}
.about-pillar p{font-size:15px; color:var(--sub); line-height:1.65; margin:0}

/* ---- Registry record ---- */
.about-record-section{max-width:1180px; margin:0 auto; padding:110px 48px; border-top:1px solid var(--line)}
.about-record-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:start}

.about-record{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:32px 34px 28px; box-shadow:0 2px 16px rgba(26,37,48,.06);
}
.about-record-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.about-record-label{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); font-weight:600; margin-bottom:6px;
}
.about-record-id{
  font-family:ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size:26px; letter-spacing:.04em; color:var(--ink); font-weight:600;
}
.about-record-status{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-fg);
  padding:7px 14px; border-radius:100px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.about-record-dot{width:7px; height:7px; border-radius:50%; background:var(--ok-fg)}

.about-record-fields{margin:0; padding:6px 0 0}
.about-record-row{
  display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:baseline;
  padding:13px 0; border-bottom:1px dotted var(--line);
}
.about-record-row dt{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); font-weight:600;
}
.about-record-row dd{margin:0; font-size:14.5px; color:var(--ink)}

.about-record-link{
  display:inline-block; margin-top:22px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--gold-dark); border-bottom:1px solid transparent; transition:border-color .25s;
}
.about-record-link:hover{border-bottom-color:var(--gold-dark)}

.about-record-note{font-size:14.5px; color:var(--sub); line-height:1.75; margin:0 0 26px}
.about-record-qr{
  background:var(--cream); border:1px solid var(--line); border-radius:6px;
  padding:26px; display:flex; justify-content:center;
}
.about-record-qr img{width:auto; max-height:190px; object-fit:contain}
.about-record-caption{margin:18px 0 0; font-size:12.5px; color:var(--mute); line-height:1.65}

/* ---- Timeline ---- */
.about-timeline-row{
  display:grid; grid-template-columns:140px 1fr; gap:40px;
  padding:34px 0; border-top:1px solid var(--line);
}
.about-timeline-row:last-child{border-bottom:1px solid var(--line)}
.about-timeline-year{font-family:var(--serif); font-size:24px; color:var(--gold-dark); font-weight:600}
.about-timeline-content h4{font-size:16.5px; font-weight:600; margin:0 0 6px}
.about-timeline-content p{font-size:14.5px; color:var(--sub); line-height:1.6; margin:0; max-width:620px}

/* ---- CTA band ---- */
.about-cta-band{
  position:relative; color:var(--white); padding:100px 0; text-align:center; overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy2) 55%, var(--navy3) 100%);
}
.about-cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(560px 320px at 50% 0%, rgba(197,160,89,.22), transparent 65%);
}
.about-cta-inner{max-width:1180px; margin:0 auto; padding:0 48px; position:relative; z-index:1}
.about-cta-band h2{font-family:var(--serif); font-size:clamp(2.1rem,4vw,3.2rem); font-weight:600; margin:0 0 28px; color:var(--white)}
.about-cta-band p{font-size:16px; color:var(--gold-light); margin:0 0 44px}
.about-cta-buttons{display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap}
.about-cta-buttons .btn-gold{
  padding:18px 40px; font-size:13px;
  box-shadow:0 14px 34px -12px rgba(197,160,89,.75);
  transition:transform .25s, box-shadow .25s;
}
.about-cta-buttons .btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(197,160,89,.85)}
.about-btn-on-navy{
  padding:14px 26px; font-size:12px;
  border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.88); background:transparent;
}
.about-btn-on-navy:hover{border-color:var(--white); color:var(--white)}

/* ---- Scroll-reveal (progressive enhancement only) ---- */
.about-reveal{transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1)}
.js .about-reveal{opacity:0; transform:translateY(28px)}
.js .about-reveal.in{opacity:1; transform:translateY(0)}

@media (max-width:900px){
  .about-hero{padding:110px 0 70px}
  .about-hero-inner, .about-section, .about-timeline-section, .about-statement-inner, .about-cta-inner, .about-record-section{padding-left:24px; padding-right:24px}
  .about-process{grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; padding-top:32px}
  .about-record-grid{grid-template-columns:1fr; gap:36px}
  .about-record{padding:26px 22px 24px}
  .about-record-row{grid-template-columns:1fr; gap:4px}
  .about-hero-sub{grid-template-columns:1fr}
  .about-section-head{grid-template-columns:1fr; gap:20px}
  .about-pillars{grid-template-columns:1fr}
  .about-timeline-row{grid-template-columns:1fr; gap:6px}
}