/* About page ("Quiénes somos"): told as a seed growing into a fruitful plant */
.about-hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}
.about-copy{padding-bottom:clamp(28px,5vw,72px);min-width:0}
.about-hero h1{font-size:var(--step-3);font-weight:800;margin:14px 0 18px}
.about-hero .lede{max-width:38ch}
.legal{margin-top:16px;display:inline-block;font-size:var(--step--1);font-weight:600;color:var(--leaf);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.cue{margin-top:28px;display:flex;width:max-content;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none}
.cue svg{width:20px;height:20px;color:var(--leaf);animation:nudge 2s 2.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}
.about-scene{min-width:0;align-self:end}
.about-scene svg{display:block;width:100%;height:auto}
@media (max-width:860px){
  .about-hero .wrap{grid-template-columns:1fr}
  .about-copy{padding-bottom:0}
  .about-scene{max-width:520px;justify-self:center;width:100%}
}

/* The story rail: a stem that grows as the reader scrolls */
.story{background:linear-gradient(180deg,var(--surface),var(--sky) 40%)}
.story-inner{position:relative;padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,72px)}
.rail{--node:56px;position:absolute;left:calc(20px + var(--node)/2 - 2px);top:clamp(48px,7vw,96px);bottom:clamp(64px,8vw,104px);width:4px;border-radius:4px;background:var(--line)}
.rail-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--soil-3),var(--green) 18%,var(--green) 82%,var(--gold));transform-origin:top;transform:scaleY(var(--grow,1))}
.js .rail-fill{transform:scaleY(var(--grow,0))}
.chapter{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(18px,3vw,36px);padding-block:8px}
/* Links to a chapter stop below the sticky header, with room for the chapter label */
.chapter{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 104px)}
.node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);color:var(--muted);transition:background .5s,border-color .5s,color .5s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.node svg{width:26px;height:26px}
.chapter.in .node{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf)}
.js .chapter:not(.in) .node{transform:scale(.75)}
.chapter-body{min-width:0;max-width:70ch;display:grid;gap:16px;align-content:start;padding-top:10px}
.chapter-body h2{font-size:var(--step-2);font-weight:800;margin-bottom:4px}
.chapter-body h2 em{font-style:normal;color:var(--leaf)}
.chapter-body > p:not(.eyebrow){color:var(--muted)}
.chapter-body strong{color:var(--ink);font-weight:600}
.statement{font-size:var(--step-1);line-height:1.45;color:var(--ink)!important}
.statement em,.pull em{font-style:normal;color:var(--leaf);background:linear-gradient(var(--sun-soft),var(--sun-soft)) 0 88%/0 40% no-repeat;transition:background-size 1s .5s cubic-bezier(.2,.8,.2,1)}
.statement.in em,.pull.in em,html:not(.js) .statement em,html:not(.js) .pull em{background-size:100% 40%}
.pull{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);color:var(--ink)!important;border-left:3px solid var(--sun);padding-left:16px}

/* History milestones: a short timeline whose line draws in */
.milestones{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.milestones li{position:relative;display:grid;gap:4px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px}
.milestones .year{font-family:var(--f-display);font-weight:800;font-size:var(--step-2);line-height:1;color:var(--leaf);letter-spacing:-.02em}
.milestones b{font-size:1.05rem}
.milestones span:last-child{color:var(--muted);font-size:.95rem;line-height:1.45}
@media (max-width:720px){.milestones{grid-template-columns:1fr}}

/* Roots: traits as tags */
.traits{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.traits li{font-weight:600;font-size:.92rem;padding:6px 14px;border-radius:999px;background:var(--leaf-soft);color:var(--leaf)}

/* Scripture */
.scripture{margin:8px 0 0;padding:22px 24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.scripture::before{content:"“";position:absolute;top:-18px;right:14px;font-family:var(--f-display);font-weight:800;font-size:7rem;line-height:1;color:var(--sun-soft);pointer-events:none}
.scripture p{position:relative;font-style:italic;color:var(--ink)}
.scripture cite{position:relative;display:block;margin-top:10px;font-style:normal;font-weight:600;font-size:var(--step--1);color:var(--leaf)}
.verses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:720px){.verses{grid-template-columns:1fr}}

/* Vision goals */
.goals{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.goals li{container-type:inline-size;min-width:0;display:grid;align-content:start;gap:2px;padding:20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold)}
.goals .pre{font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.goals .num{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,26cqi,3.4rem);line-height:1.05;color:var(--leaf);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.goals b{font-size:1.1rem}
.goals .sub{color:var(--muted);font-size:.9rem;line-height:1.4;margin-top:4px}
@media (max-width:720px){.goals{grid-template-columns:1fr}}

/* Bridges between chapters: a sentence that appears word by word */
.bridge{position:relative;margin:clamp(36px,6vw,64px) 0;padding-left:calc(56px + clamp(18px,3vw,36px));font-family:var(--f-display);font-weight:700;font-size:var(--step-1);line-height:1.3;color:var(--ink);max-width:calc(56px + clamp(18px,3vw,36px) + 30ch);text-wrap:balance}
.bridge::before{content:"";position:absolute;left:calc(28px - 7px);top:.45em;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 25%,transparent)}
.bridge.last{margin-bottom:0}
.js .bridge .word{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 70ms)}
.js .bridge.in .word{opacity:1;transform:none}

/* Reveal: text fades and lifts into place as it scrolls into view */
.js .chapter-body .reveal,.js .invite .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .chapter-body .reveal.in,.js .invite .reveal.in{opacity:1;transform:none}
.js .milestones .reveal:nth-child(2),.js .goals .reveal:nth-child(2),.js .traits .reveal:nth-child(2),.js .verses .reveal:nth-child(2){transition-delay:.12s}
.js .milestones .reveal:nth-child(3),.js .goals .reveal:nth-child(3),.js .traits .reveal:nth-child(3){transition-delay:.24s}

/* Epilogue */
.invite .wrap{grid-template-columns:minmax(0,760px)}
.invite .btns{margin-top:28px}
.invite .btn{border-color:#EAF2FF;color:#EAF2FF}
.invite .btn:hover{background:#EAF2FF;color:#0A1E3D}
.invite .btn.primary{background:#7CC8F5;border-color:#7CC8F5;color:#0A1E3D;box-shadow:none}
.invite .btn.primary:hover{background:#FFFFFF;border-color:#FFFFFF}
.invite .muted{margin-top:12px;max-width:60ch}

@media (max-width:560px){
  .rail{--node:44px}
  .chapter{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .node{width:44px;height:44px}
  .node svg{width:22px;height:22px}
  .bridge{padding-left:calc(44px + 14px);max-width:none}
  .bridge::before{left:calc(22px - 7px)}
}
@media (prefers-reduced-motion:reduce){
  .js .rail-fill{transform:scaleY(1)}
  .cue svg{animation:none}
}