/* Bezalel — About page. Dark, starlit theme carried through from the hero image. */

@keyframes aboutImgIn{from{opacity:0;transform:scale(1.03);}to{opacity:1;transform:scale(1);}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8);}50%{opacity:.9;transform:scale(1.15);}}
@keyframes driftGlow{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1);}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.15);}}
@keyframes letterIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

body.about-page{background:var(--navy-deeper);}

/* Desktop: solid banner instead of a floating transparent overlay, coloured to match this
   page's own dark theme (var(--navy-deeper), same as body.about-page) rather than the
   sitewide cream — a cream bar would clash against the starlit hero right below it. The
   hero's own top edge is dark sky already, so no extra top-clearance hack is needed: the
   opaque banner just sits over the same tone the image already has there. Text stays cream
   in both nav states, same as before. Mobile keeps the original fixed overlay untouched. */
.about-page .topnav .brand,
.about-page .topnav.solid .brand{color:var(--cream);}
.about-page .topnav .nav-links a,
.about-page .topnav.solid .nav-links a{color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.4);}
.about-page .topnav .nav-links a.active,
.about-page .topnav.solid .nav-links a.active{color:var(--gold-light);}
.about-page .topnav .nav-toggle span,
.about-page .topnav.solid .nav-toggle span{background:var(--cream);}
@media (min-width:861px){
  .about-page .topnav,
  .about-page .topnav.solid{
    background:color-mix(in srgb, var(--navy-deeper) 82%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(0,0,0,.3);
  }
}

/* ---------- Hero ---------- */
/* Aspect-ratio crop: keeps the same framing (children fully visible, dead sky trimmed off the top) at every viewport width. */
.about-hero-v2{position:relative;width:100%;aspect-ratio:1672/610;min-height:440px;overflow:hidden;background:var(--navy-deeper);}
.about-hero-v2-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  display:block;animation:aboutImgIn 1.6s ease-out both;
}
.about-hero-v2 .stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.about-hero-v2 .stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-light);animation:twinkle ease-in-out infinite;}
.about-hero-v2-overlay{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(var(--nav-h) + 22px) 6% 0;
}
.about-hero-v2-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:.04em;text-align:center;
  font-size:clamp(26px,4.6vw,48px);margin:0 0 16px;color:var(--gold-light);
  text-shadow:0 0 8px rgba(240,200,104,.5),0 2px 10px rgba(0,0,0,.6);
}
.about-hero-v2-quote{
  font-family:var(--font-display);font-style:italic;text-align:center;color:var(--cream);
  font-size:clamp(13px,1.7vw,18px);line-height:1.55;max-width:760px;margin:0 auto;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
@media (max-width:600px){
  .about-hero-v2{aspect-ratio:auto;min-height:420px;}
  .about-hero-v2-overlay{padding-top:calc(var(--nav-h) + 14px);padding-bottom:18px;}
  .about-hero-v2-title{font-size:clamp(24px,7vw,34px);}
  .about-hero-v2-quote{font-size:14px;}
}

/* ---------- Shared dark body ---------- */
.about-body{
  background:linear-gradient(180deg,#060d1e 0%,#0a1730 12%,#0d1c3a 50%,#0a1730 88%,#060d1e 100%);
  position:relative;overflow:hidden;
}
.about-glow{position:absolute;left:50%;top:0;width:640px;height:640px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(201,154,58,.16),transparent 70%);pointer-events:none;animation:driftGlow 9s ease-in-out infinite;}

/* Ambient floating gold dots, scattered down the length of the page */
@keyframes floatDrift{
  0%,100%{transform:translateY(0);opacity:.25;}
  50%{transform:translateY(-22px);opacity:.85;}
}
.body-particles{position:absolute;inset:0;pointer-events:none;z-index:1;}
.dot{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--gold-light),var(--gold));
  box-shadow:0 0 8px rgba(201,154,58,.65);
  animation-name:floatDrift;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}

.story-section{position:relative;z-index:2;padding:96px 24px;max-width:920px;margin:0 auto;color:var(--cream-muted);}
@media (max-width:599px){.story-section{padding:56px 20px;}}
.story-section.narrow{max-width:800px;}
.story-section h2{color:var(--cream);font-size:clamp(28px,4.2vw,40px);margin:0 0 8px;}
.story-section .eyebrow{color:var(--gold-light);text-align:center;}
.story-section h2.center{text-align:center;}
.story-section p{
  font-family:var(--font-display);line-height:1.8;font-size:18px;margin:0 0 20px;color:var(--cream-muted);
}
.story-section p:last-child{margin-bottom:0;}

.drop-cap:first-letter{
  font-family:var(--font-display);font-size:64px;line-height:.75;float:left;
  padding:6px 10px 0 0;color:var(--gold-light);font-weight:700;
}

.closing-line{
  text-align:center;font-family:var(--font-display);font-style:italic;color:var(--gold-light);
  font-size:20px;margin-top:32px !important;line-height:1.6;
}

/* ---------- Ornament divider ---------- */
.ornament-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 56px;max-width:340px;}
.ornament-divider .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,154,58,.55),transparent);}
.ornament-divider svg{width:14px;height:14px;color:var(--gold);flex-shrink:0;}

/* ---------- Name / quote block ---------- */
/* Scoped to .story-section so this beats the .story-section p{margin:0 0 20px} rule below on
   specificity (2 classes > 1 class + 1 element) — otherwise that rule's margin-left/right:0
   silently wins and the quote sits flush-left instead of centered, despite text-align:center
   working fine on the text inside it. */
.story-section .name-quote{
  text-align:center;font-family:var(--font-display);font-style:italic;color:var(--cream);
  font-size:clamp(20px,2.8vw,27px);line-height:1.55;max-width:680px;margin:0 auto 14px;
}
.name-quote cite{display:block;margin-top:16px;font-family:var(--font-body);font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.name-title{text-align:center;font-family:var(--font-display);color:var(--gold-light);font-size:clamp(34px,5.6vw,54px);margin:0 0 34px;line-height:1.15;}
.name-title span{display:block;font-size:clamp(16px,2.2vw,20px);color:var(--cream-muted);font-style:italic;font-family:var(--font-display);letter-spacing:.02em;margin-top:10px;}

/* ---------- Mission / Vision ---------- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.mv-card{
  background:rgba(251,241,226,.04);border:1px solid rgba(201,154,58,.22);border-radius:20px;padding:34px;
  backdrop-filter:blur(6px);
}
.mv-card .eyebrow{color:var(--gold);margin-bottom:10px;}
.mv-card h3{color:var(--cream);font-size:20px;margin:0 0 12px;}
.mv-card p{font-family:var(--font-display);color:var(--cream-muted);font-size:16.5px;line-height:1.75;margin:0;}
@media (max-width:720px){.mv-grid{grid-template-columns:1fr;}}

/* ---------- Values acrostic (B E Z A L E L) ---------- */
.values-wrap{max-width:900px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.value-row{
  display:grid;grid-template-columns:88px 1fr;gap:26px;align-items:flex-start;
  padding:26px 0;border-bottom:1px solid rgba(201,154,58,.14);
}
.value-row:last-child{border-bottom:none;}
.value-letter{
  font-family:var(--font-display);font-weight:700;font-size:52px;line-height:1;color:transparent;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));-webkit-background-clip:text;background-clip:text;
  text-align:center;
}
.value-row h3{color:var(--cream);font-size:18px;margin:0 0 8px;letter-spacing:.01em;font-style:italic;}
.value-row h3 span{color:var(--gold-light);}
.value-row p{font-family:var(--font-display);color:var(--cream-muted);font-size:16px;line-height:1.7;margin:0;}
@media (max-width:560px){
  .value-row{grid-template-columns:56px 1fr;gap:16px;}
  .value-letter{font-size:36px;}
}

/* ---------- Final CTA ---------- */
.about-final{position:relative;z-index:2;text-align:center;padding:70px 24px 130px;}
.about-final .closing-line{max-width:640px;margin-left:auto;margin-right:auto;}
@media (max-width:599px){.about-final{padding:48px 20px 72px;}}