/* ================================================================
   LUMEN STUDIO — About page styles
   Matches the lumen-about-page-redesign mockup: light hero, Manrope
   body + Fraunces headings, compact rhythm, dark belief band,
   blue→orange gradient CTA. Loaded only on /about, so it can
   safely override the shared layout.css chrome (nav, fonts, wrap).
   ================================================================ */

/* ---- Page font: Manrope (mockup), scoped to this page ---------- */
body{font-family:'Manrope','DM Sans',sans-serif}

/* ---- Container: design wrap width (min(1100px,92%)) ------------ */
.nav .container,
#about .container{width:min(1100px,92%);margin-inline:auto}

/* ---- Nav: dark bar matching the rest of the site (layout.css's nav
   is transparent-over-dark heroes; About's hero is white, so we keep
   this page's sticky position but use the site's solid navy look) --- */
.nav{
  position:sticky;
  background:rgba(7,17,38,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 35px rgba(0,0,0,.14);
  padding:14px 0;
}
.nav.scrolled{
  background:rgba(7,17,38,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 35px rgba(0,0,0,.14);
}
.nav-links{color:rgba(255,255,255,.72)}
.nav-links a:hover{color:#fff}
.nav-links a.is-active{color:#fff}
.lang{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}

/* ---- Hero: light (mockup) -------------------------------------- */
.about-hero{
  padding:48px 0 44px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.about-hero::before{
  content:"";
  position:absolute;
  width:420px;height:420px;border-radius:50%;
  background:rgba(30,106,255,.06);
  right:-180px;top:-240px;
}
.about-hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:55px;
  align-items:center;position:relative;z-index:1;
}
.about-hero__text h1{
  font-size:clamp(38px,4.7vw,54px);
  letter-spacing:-.035em;line-height:1.1;
  max-width:600px;color:#0A1530;
}
.about-hero__sub{
  font-size:14px;line-height:1.7;max-width:540px;
  margin-top:14px;color:#68748a;
}
.about-hero__img{
  height:255px;border-radius:22px;overflow:hidden;
  box-shadow:0 14px 38px rgba(10,21,48,.08);position:relative;
}
.about-hero__img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.86)}
.about-hero__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(10,21,48,.11),rgba(30,106,255,.11));
}
.about-hero__tag{
  position:absolute;z-index:2;left:15px;bottom:15px;
  background:rgba(255,255,255,.94);color:#0A1530;
  padding:9px 12px;border-radius:11px;
  font-size:10px;font-weight:800;letter-spacing:.04em;
}

/* ---- Eyebrow: blue text + orange 20px dash (mockup) ------------ */
.about-eyebrow--light,
.about-story__content .eyebrow,
.about-eyebrow--center{
  display:inline-flex;align-items:center;gap:8px;
  color:#1E6AFF;font-size:10px;font-weight:800;
  letter-spacing:.16em;margin-bottom:11px;
}
.about-eyebrow--light::before,
.about-story__content .eyebrow::before,
.about-eyebrow--center::before{
  content:"";width:20px;height:2px;background:#FF6B00;border-radius:2px;
}

/* ---- Story ----------------------------------------------------- */
.about-story{padding:62px 0;background:var(--paper)}
.about-story__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.about-story__img{height:345px;position:relative}
.about-story__img img{width:88%;height:100%;object-fit:cover;border-radius:19px;box-shadow:0 14px 38px rgba(10,21,48,.08);display:block}
.about-mini-card{
  position:absolute;right:0;bottom:22px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:14px;
  width:175px;box-shadow:0 14px 38px rgba(10,21,48,.08);
}
.about-mini-card b{display:block;font-family:'Fraunces',serif;font-size:20px;color:#0A1530;line-height:1.2}
.about-mini-card span{font-size:10px;color:#7a8498}
.about-title{font-size:36px;letter-spacing:-.025em;line-height:1.12;color:#0A1530}
.about-copy{font-size:13px;line-height:1.7;color:#4A5570;margin-top:14px}
.about-copy+.about-copy{margin-top:10px}
/* ---- Mission: white band with top/bottom rule (mockup) ---------- */
.about-mission{padding:60px 0;text-align:center;background:#fff;border-block:1px solid var(--line)}
.about-mission__inner{max-width:720px;margin:0 auto}
.about-mission .about-title{font-size:39px}
.about-mission__body{color:#4A5570;font-size:14px;line-height:1.7;max-width:650px;margin:14px auto 0}

/* ---- Difference: 4 cards ---------------------------------------- */
.about-difference{padding:62px 0;background:var(--paper)}
.about-difference__head{text-align:center;margin-bottom:30px}
.about-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.about-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:20px;min-height:205px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.about-card:hover{transform:translateY(-4px);border-color:rgba(30,106,255,.27);box-shadow:0 14px 38px rgba(10,21,48,.08)}
.about-card__ico{
  width:36px;height:36px;border-radius:10px;background:rgba(30,106,255,.06);
  color:#1E6AFF;display:grid;place-items:center;margin-bottom:15px;
}
.about-card__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.about-card h3{font-family:'Fraunces',serif;font-size:19px;color:#0A1530;margin-bottom:7px}
.about-card p{font-size:11.5px;line-height:1.65;color:#4A5570}

/* ---- Belief: dark band ------------------------------------------ */
.about-belief{
  padding:50px 0;text-align:center;color:#fff;
  background:
    radial-gradient(circle at 78% 25%,rgba(30,106,255,.17),transparent 30%),
    linear-gradient(135deg,#09142E,#0C2046);
}
.about-belief h2{color:#fff;font-size:34px;max-width:700px;margin:0 auto;line-height:1.2}
.about-belief p{font-size:12px;color:rgba(255,255,255,.61);margin-top:9px}

/* ---- CTA: blue→orange gradient band ----------------------------- */
.about-cta{padding:48px 0;text-align:center;color:#fff;background:linear-gradient(115deg,#1E6AFF,#477FFF 53%,#FF6B00)}
.about-cta h2{color:#fff;font-size:35px;margin-bottom:10px}
.about-cta p{font-size:13px;max-width:610px;margin:9px auto 20px;color:rgba(255,255,255,.87)}
.about-cta a{
  display:inline-block;background:#25D366;color:#fff;
  font-size:12px;font-weight:800;padding:14px 32px;border-radius:999px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.about-cta a:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18);background:#1EBE57}

/* ---- Responsive (mockup breakpoints) ----------------------------- */
@media(max-width:850px){
  .about-hero__grid,.about-story__grid{grid-template-columns:1fr;gap:30px}
  .about-hero__img{height:230px}
  .about-story__img{height:300px}
  .about-grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .about-hero{padding:40px 0}
  .about-hero__text h1{font-size:38px}
  .about-title,.about-mission .about-title{font-size:31px}
  .about-grid4{grid-template-columns:1fr}
  .about-story{padding:48px 0}
  .about-story__img{height:275px}
  .about-cta h2{font-size:30px}
}