/* About page. Shared pieces (.ico, .cta-plain, .icon-action, .cv-btn, .ghost-btn) live in style.css. */
.about{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(14px,4vw,24px) 64px}
.about-block{margin-top:clamp(40px,6vw,72px)}
.about-block>h2{margin:0 0 clamp(16px,2.5vw,26px);color:var(--navy);font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.01em}

/* Intro */
.about-intro{text-align:center;padding:clamp(18px,4vw,40px) 0 0}
.about-intro h1{margin:0;color:var(--navy);font-size:clamp(28px,5.4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.promise{margin:14px 0 0;font-family:"Kalam",Arial,cursive;font-weight:300;font-size:clamp(18px,3.2vw,30px);color:#3d4652}

/* Fallback reveal (scroll.js drives these when it is running) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* Silver icon tiles, shared by the mini cards and the steps */
.mini-icon,.step-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(160deg,#fbfcfd,#eceef2);border:1px solid #d9dde4;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 6px rgba(20,43,73,.07),0 8px 16px -10px rgba(20,43,73,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease}
.mini-card:hover .mini-icon,.step:hover .step-icon{transform:translateY(-4px) rotate(-3deg);border-color:rgba(237,101,18,.5);box-shadow:inset 0 1px 0 #fff,0 12px 20px -10px rgba(237,101,18,.55)}

/* What we do: four mini cards */
.mini-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,18px)}
.mini-card{--ripple:237,101,18;position:relative;padding:clamp(16px,2.4vw,24px);border:1px solid #e6e8ee;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 18px 34px -24px rgba(20,43,73,.5);transform:perspective(800px);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease}
.mini-card:hover{transform:perspective(800px) translateY(-6px) rotateX(6deg) rotateY(-6deg);border-color:rgba(237,101,18,.45);box-shadow:0 26px 44px -22px rgba(237,101,18,.45)}
.mini-card h3{margin:10px 0 4px;color:var(--navy);font-size:clamp(16px,1.9vw,19px)}
.mini-card p{margin:0;font-family:"Kalam",Arial,cursive;color:#4a525d;font-size:16px}
a.mini-card{display:block;color:inherit;text-decoration:none}
a.mini-card h3:after{content:" \2192";display:inline-block;color:var(--orange);opacity:0;transition:opacity .25s ease,transform .25s ease}
a.mini-card:hover h3:after{opacity:1;transform:translateX(3px)}
@keyframes pop-in{from{opacity:0;transform:perspective(800px) translateY(18px) scale(.9)}to{opacity:1;transform:perspective(800px)}}

/* The three steps, with a line that draws itself between them */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px);margin:0;padding:0;list-style:none}
.steps:before{content:"";position:absolute;left:12%;right:12%;top:52px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--orange) 0 10px,rgba(237,101,18,.25) 10px 20px);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s .25s cubic-bezier(.4,0,.2,1)}
.steps.is-in:before{transform:scaleX(1)}
.step{position:relative;padding:clamp(16px,2.4vw,24px);border:1px solid #e6e8ee;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 20px 40px -28px rgba(20,43,73,.55);text-align:center}
.step-num{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(180deg,#24446f,#142b49);color:#fff;font-size:18px;font-weight:700;box-shadow:0 5px 0 #0a192c,0 12px 20px -10px rgba(20,43,73,.6)}
.about .step-icon{width:68px;height:68px;border-radius:22px;margin:6px auto 12px}
.about .step-icon .ico{width:32px;height:32px}
.step h3{margin:4px 0 6px;color:var(--navy);font-size:clamp(17px,2.1vw,20px)}
.step p{margin:0;font-family:"Kalam",Arial,cursive;color:#4a525d;font-size:16px}

/* Built by Mjanja: project cards (room for more later) */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(12px,2vw,20px)}
.project-card{--ripple:237,101,18;position:relative;display:block;padding:clamp(20px,3vw,28px);border:1px solid #e6e8ee;border-radius:24px;background:linear-gradient(150deg,#fff,#f4f7fb);color:inherit;text-decoration:none;box-shadow:0 22px 44px -28px rgba(20,43,73,.55);transform:perspective(900px);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .3s ease}
.project-card:hover{transform:perspective(900px) translateY(-8px) rotateX(7deg) rotateY(-7deg);border-color:rgba(237,101,18,.5);box-shadow:0 34px 54px -26px rgba(237,101,18,.5)}
.project-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:5px 12px;border:1px solid #d9dde4;border-radius:999px;background:linear-gradient(160deg,#fbfcfd,#eceef2);color:#44506a;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.project-tag i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(237,101,18,.18)}
.project-card h3{margin:0 0 6px;color:var(--navy);font-size:clamp(19px,2.4vw,23px)}
.project-card .ext{color:var(--orange)}
.project-card p{margin:0 0 12px;font-family:"Kalam",Arial,cursive;color:#4a525d;font-size:16.5px}
.project-link{color:var(--orange);font-size:14px;font-weight:700}

/* The creator */
.creator-card{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(18px,3vw,34px);align-items:center;padding:clamp(18px,3vw,32px);border:1px solid #e6e8ee;border-radius:28px;background:rgba(255,255,255,.93);box-shadow:0 30px 60px -34px rgba(20,43,73,.5)}
.creator-photo{display:grid;place-items:end center;width:100%;max-width:260px;aspect-ratio:4/5;padding:14px;border:1px solid #d9dde4;border-radius:24px;background:radial-gradient(120% 90% at 50% 15%,#fff 0,#eceef2 70%,#c7ccd6 100%);box-shadow:inset 0 1px 0 #fff,0 22px 40px -26px rgba(20,43,73,.6);overflow:hidden}
.creator-photo img{width:88%;height:auto;filter:drop-shadow(0 14px 12px rgba(20,43,73,.28));animation:social-bob 5s ease-in-out infinite;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.creator-card:hover .creator-photo img{transform:translateY(-6px) scale(1.03)}
.creator-copy h3{margin:0;color:var(--navy);font-size:clamp(22px,2.8vw,28px)}
.creator-role{margin:4px 0 14px;color:var(--orange);font-weight:700;font-size:15px}
.creator-copy p{margin:0 0 12px;color:#414954;font-size:15.5px;line-height:1.6}
.creator-study{font-family:"Kalam",Arial,cursive;color:#5f6670;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.chips li{padding:6px 12px;border:1px solid #e1e5ec;border-radius:999px;background:#f6f8fb;color:var(--navy);font-size:13px;font-weight:700}
.creator-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Tablets */
@media(max-width:820px){
  .mini-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .steps{grid-template-columns:1fr}
  .steps:before{left:50%;right:auto;top:10%;bottom:10%;width:3px;height:auto;margin-left:-1.5px;background:repeating-linear-gradient(180deg,var(--orange) 0 10px,rgba(237,101,18,.25) 10px 20px);transform:scaleY(0);transform-origin:top center}
  .steps.is-in:before{transform:scaleY(1)}
  .creator-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .creator-actions,.chips{justify-content:center}
}

/* Phones: centre everything so nothing sits oddly to the left */
@media(max-width:620px){
  .about-block>h2{text-align:center}
  .mini-card,.step,.project-card{text-align:center}
  .mini-icon,.step-icon{margin-left:auto;margin-right:auto}
  .project-card .project-tag{margin-left:auto;margin-right:auto}
  .mini-card p,.step p,.project-card p{margin-left:auto;margin-right:auto;max-width:26ch}
  .creator-copy{display:flex;flex-direction:column;align-items:center}
  .site-footer .footer-inner{text-align:center}
  .site-footer .footer-brand{display:flex;flex-direction:column;align-items:center}
  .footer-promise{margin-left:auto;margin-right:auto;text-align:center}
  .site-footer .copyright{text-align:center}
}

/* scroll.js drives the entrances when it is running */
.scroll-driven .reveal{opacity:1;transform:none;transition:none}
.scroll-driven .steps:before{transition:none}
.scroll-driven .steps[data-scroll]:before{transform:scaleX(var(--p))}
@media(max-width:760px){
  .scroll-driven .steps[data-scroll]:before{transform:scaleY(var(--p))}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .steps:before{transform:none!important}
  .creator-photo img{animation:none}
}