/* /sobre — compact hero, interactive map, story rhythm */

.about-page{background:var(--cream,#f5f3ec);color:var(--ink,#16201a)}

/* Hero: shared sub-hero, tighter, no tilted script.
   styles.css still has legacy .about-hero{min-height:458px} — override hard. */
.about-hero{
  --archive-hero-h:280px;
  min-height:var(--archive-hero-h)!important;
  padding:28px clamp(27px,5vw,77px) 30px!important;
  display:flex;align-items:center;
  background-image:
    linear-gradient(100deg,#002a1f 0%,rgba(0,35,26,.96) 34%,rgba(0,34,26,.42) 72%,rgba(0,29,22,.62) 100%),
    url('../img/proto/hero-fan.webp')!important;
  background-size:cover!important;
  background-position:center,center 42%!important;
}
.about-hero .about-script,
.about-script{display:none!important}
.about-hero .sub-hero-copy{max-width:min(560px,58%)}
.about-hero h1{
  margin:4px 0 6px;
  font-size:clamp(36px,4.8vw,56px)!important;
  line-height:.96;
}
.about-hero p{
  -webkit-line-clamp:2;
  max-width:46ch;
  margin:0 0 4px;
}
.about-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.about-hero-floaters{
  position:absolute;top:0;right:0;bottom:0;left:52%;
  pointer-events:none;z-index:0;overflow:hidden;
}
.about-hero-floaters img{
  position:absolute;width:clamp(92px,11vw,150px);height:auto;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.35));opacity:.42;
  animation:about-floater 14s ease-in-out infinite;
}
.about-hero-floaters img:nth-child(1){right:10%;bottom:6%;transform:rotate(8deg)}
.about-hero-floaters img:nth-child(2){right:34%;top:16%;width:clamp(70px,8vw,110px);opacity:.3;animation-delay:-4s;transform:rotate(-6deg)}
.about-hero-floaters img:nth-child(3){right:18%;top:42%;width:clamp(64px,7vw,96px);opacity:.26;animation-delay:-8s;transform:rotate(4deg)}
@keyframes about-floater{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}

/* Manifesto strip */
.about-manifesto{
  padding-top:34px;padding-bottom:10px;
  border-bottom:1px solid var(--line,#e1ded3);
}
.about-manifesto-line{
  margin:0;max-width:38ch;
  font-family:var(--serif);font-size:clamp(1.45rem,2.8vw,2.15rem);
  line-height:1.22;letter-spacing:-.02em;color:var(--forest,#0b2e1c);
}
.about-manifesto-line em{
  font-style:normal;color:#1a6b45;
  background:linear-gradient(transparent 62%,rgba(177,238,120,.45) 62%);
}

/* Story */
.about-story{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);
  padding-top:36px;padding-bottom:40px;align-items:start;
}
.about-story-copy p{
  margin:0 0 1.1rem;font-size:15px;line-height:1.65;color:#3f4d44;max-width:58ch;
}
.about-lead{
  font-family:var(--serif)!important;font-size:clamp(1.15rem,2vw,1.4rem)!important;
  line-height:1.4!important;color:var(--ink)!important;
}
.about-accent{color:var(--forest)!important;font-weight:650}
.about-story-aside{
  position:sticky;top:88px;
  padding:22px 22px 18px;
  background:linear-gradient(160deg,#faf9f3,#eef3ea);
  border:1px solid #ddd9cc;border-radius:16px;
}
.about-story-aside blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);
  line-height:1.35;font-style:italic;color:#2a3d32;
}
.about-sign{
  display:inline-block;margin-top:18px;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--forest);
}
.about-sign::after{
  content:"";display:block;width:42px;height:2px;background:var(--lime,#b1ee78);margin-top:8px;
}
.about-story-thumbs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:18px}
.about-story-thumbs img{width:100%;height:64px;object-fit:cover;border-radius:8px}

/* Map */
.about-map-section{
  background:
    radial-gradient(60% 80% at 50% 0%,rgba(177,238,120,.08),transparent 60%),
    linear-gradient(180deg,#041f17 0%,#063226 48%,#041f17 100%);
  color:#e7f0e8;padding:42px 0 36px;
}
.about-map-head{
  display:flex;justify-content:space-between;align-items:end;gap:24px;
  padding-bottom:18px;flex-wrap:wrap;
}
.about-map-head h2{
  margin:8px 0 8px;font-size:clamp(1.7rem,3vw,2.4rem);color:#fff;letter-spacing:-.03em;
}
.about-map-head p{margin:0;max-width:42ch;color:#b9ccbf;font-size:13px;line-height:1.5}
.about-map-head .eyebrow{color:var(--lime)}
.about-map-head .line-stroke{background:var(--lime)}
.about-map-kpis{display:flex;gap:18px}
.about-map-kpis strong{
  display:block;font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.2rem);
  color:#fff;line-height:1;letter-spacing:-.03em;
}
.about-map-kpis span{font-size:11px;color:#9fb5a6;letter-spacing:.04em}

.about-map-stage{padding-top:0;padding-bottom:8px;overflow:hidden}
.about-map{
  position:relative;width:100%;max-width:100%;box-sizing:border-box;
  border-radius:18px;overflow:hidden;
  background:
    radial-gradient(55% 70% at 50% 42%,rgba(177,238,120,.12),transparent 68%),
    #06281e;
  border:1px solid #1f5a42;
  box-shadow:inset 0 0 80px #02150f,0 18px 40px rgba(0,0,0,.28);
  aspect-ratio:2/1;min-height:0;
}
.about-map-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(90deg,transparent 49.6%,rgba(61,122,92,.35) 49.6%,rgba(61,122,92,.35) 50.4%,transparent 50.4%),
    linear-gradient(0deg,transparent 49.6%,rgba(61,122,92,.28) 49.6%,rgba(61,122,92,.28) 50.4%,transparent 50.4%),
    radial-gradient(circle at 1px 1px,rgba(127,184,146,.28) 1px,transparent 0);
  background-size:100% 100%,100% 100%,14px 14px;
}
.about-map-land{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 35%,rgba(177,238,120,.22),transparent 45%),
    linear-gradient(165deg,rgba(143,198,160,.7),rgba(47,106,79,.85) 55%,rgba(26,74,54,.9));
  -webkit-mask:url('../img/world-map.svg') center / 100% 100% no-repeat;
  mask:url('../img/world-map.svg') center / 100% 100% no-repeat;
  filter:drop-shadow(0 0 1px rgba(177,238,120,.35));
  opacity:.95;
}
.about-map-dots{position:absolute;inset:0;z-index:2}
.about-map-dot{
  position:absolute;transform:translate(-50%,-50%);
  width:var(--dot,12px);height:var(--dot,12px);
  border-radius:50%;display:grid;place-items:center;
  text-decoration:none;z-index:1;
  transition:transform .2s ease,z-index 0s;
}
.about-map-dot span{
  display:block;width:100%;height:100%;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 0 rgba(177,238,120,.45);
  animation:about-pulse 2.8s ease-out infinite;
}
.about-map-dot:nth-child(3n) span{animation-delay:.4s}
.about-map-dot:nth-child(3n+1) span{animation-delay:1.1s}
.about-map-dot:nth-child(3n+2) span{animation-delay:1.9s}
.about-map-dot:hover,
.about-map-dot:focus-visible,
.about-map-dot.is-active{
  z-index:5;transform:translate(-50%,-50%) scale(1.35);
  outline:none;
}
.about-map-dot:hover span,
.about-map-dot:focus-visible span,
.about-map-dot.is-active span{
  background:#fff;box-shadow:0 0 0 4px rgba(177,238,120,.35);
  animation:none;
}
@keyframes about-pulse{
  0%{box-shadow:0 0 0 0 rgba(177,238,120,.5)}
  70%{box-shadow:0 0 0 10px rgba(177,238,120,0)}
  100%{box-shadow:0 0 0 0 rgba(177,238,120,0)}
}

.about-map-tip{
  position:absolute;z-index:8;pointer-events:none;
  min-width:140px;max-width:220px;
  padding:10px 12px;border-radius:10px;
  background:#f7f5ee;color:#16201a;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transform:translate(-50%,calc(-100% - 14px));
}
.about-map-tip[hidden]{display:none!important}
.about-map-tip strong{display:block;font-size:13px;line-height:1.2}
.about-map-tip span{display:block;margin-top:3px;font-size:11px;color:#5a6a60}
.about-map-tip::after{
  content:"";position:absolute;left:50%;bottom:-6px;
  width:12px;height:12px;background:#f7f5ee;
  transform:translateX(-50%) rotate(45deg);
}

.about-map-chips{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  list-style:none;margin:16px 0 0;padding-top:4px;padding-bottom:0;
}
.about-map-chips a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#e7f0e8;text-decoration:none;font-size:12px;font-weight:650;
  transition:background .15s ease,border-color .15s ease;
}
.about-map-chips a:hover{background:rgba(177,238,120,.14);border-color:rgba(177,238,120,.35)}
.about-map-chips span{opacity:.7;font-variant-numeric:tabular-nums}
.about-map-chips-more a{color:var(--lime);border-color:rgba(177,238,120,.35)}

/* DNA */
.about-section-head{margin:0 0 22px;max-width:48ch}
.about-section-head h2{margin:8px 0 6px;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em}
.about-section-head p{margin:0;color:#566258;font-size:14px}
.about-dna{padding-top:42px;padding-bottom:36px}
.about-dna-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;list-style:none;margin:0;padding:0;
  border-top:1px solid #d8d6cb;
}
.about-dna-item{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px 22px 8px 0;margin:0;
  border:0;background:transparent;border-radius:0;min-height:0;
  box-shadow:none;
}
.about-dna-item + .about-dna-item{padding-left:22px;border-left:1px solid #d8d6cb}
.about-dna-index{
  font-family:var(--serif);font-size:13px;font-weight:700;
  letter-spacing:.04em;color:var(--forest);opacity:.45;
}
.about-dna-icon{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid #c5d4c6;color:var(--forest);font-size:20px;
  background:rgba(177,238,120,.12);
}
.about-dna-item strong{
  font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--forest);
}
.about-dna-item p{
  margin:0;max-width:28ch;font-size:13px;line-height:1.45;color:#5a6a60;
}
.about-reasons{
  margin:28px 0 0;max-width:70ch;font-size:14px;line-height:1.6;color:#4a584f;
}

/* Lower */
.about-lower{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;
  border-top:1px solid var(--line);padding-top:28px;padding-bottom:48px;
}
.about-more h2,.about-faq h2{font-size:24px;margin:0 0 12px}
.about-more p{font-size:14px;line-height:1.55;color:#566258;margin:0 0 12px}
.about-thumbs{display:flex;gap:6px;margin:14px 0 8px}
.about-thumbs img{width:33%;height:78px;object-fit:cover;border-radius:8px}
.about-more em{
  display:block;font-family:var(--serif);color:var(--forest);font-size:15px;text-align:center;
}
.about-faq details{border-bottom:1px solid #dedfd5;font-size:13px}
.about-faq summary{
  cursor:pointer;padding:13px 0;font-weight:650;list-style:none;
  display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.about-faq summary::-webkit-details-marker{display:none}
.about-faq summary::after{content:"+";font-size:18px;line-height:1;color:var(--forest)}
.about-faq details[open] summary::after{content:"−"}
.about-faq details p{margin:0;padding:0 0 12px;color:#566258;line-height:1.5}

.about-cta{
  border-radius:16px;min-height:280px;padding:28px 24px;
  display:flex;flex-direction:column;justify-content:center;
  background-image:linear-gradient(110deg,#002b1df2,#003123b8),url('../img/proto/hero-blog.webp');
  background-size:cover;background-position:center;color:#eef3ee;
}
.about-cta h2{font-size:clamp(1.7rem,2.4vw,2.35rem);color:#fff;margin:12px 0 10px;line-height:1.05}
.about-cta p{font-size:13px;color:#d5e2d8;margin:0 0 16px;max-width:34ch;line-height:1.5}
.about-cta-actions{display:flex;flex-wrap:wrap;gap:8px}
.about-cta .button{font-size:12px}

@media(max-width:1100px){
  .about-dna-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .about-dna-item{
    padding:18px 0;border-left:0!important;border-top:1px solid #d8d6cb;
  }
  .about-dna-item:nth-child(even){padding-left:22px;border-left:1px solid #d8d6cb!important}
  .about-lower{grid-template-columns:1fr 1fr}
  .about-cta{grid-column:1/-1}
}
@media(max-width:850px){
  .about-hero{--archive-hero-h:260px;min-height:var(--archive-hero-h)!important}
  .about-hero .sub-hero-copy{max-width:100%}
  .about-hero-floaters{left:58%;opacity:.85}
  .about-story{grid-template-columns:1fr}
  .about-story-aside{position:static}
  .about-map{aspect-ratio:16/10}
  .about-map-kpis{width:100%}
  .about-map-dot{min-width:18px;min-height:18px}
}
@media(max-width:590px){
  .about-hero{
    --archive-hero-h:240px;min-height:var(--archive-hero-h)!important;
    padding:22px 20px!important;
    background-image:
      linear-gradient(180deg,#002a1ff5 0%,#002a1fe8 42%,rgba(0,34,26,.55) 100%),
      url('../img/proto/hero-fan.webp')!important;
  }
  .about-hero-floaters{display:none}
  .about-manifesto-line{font-size:1.35rem}
  .about-dna-grid,.about-lower{grid-template-columns:1fr}
  .about-dna-item,
  .about-dna-item:nth-child(even){
    padding:18px 0;border-left:0!important;border-top:1px solid #d8d6cb;
  }
  .about-map{aspect-ratio:5/4}
  .about-map-chips{gap:8px}
  .about-map-chips a{padding:10px 12px;font-size:12px;min-height:40px}
}