.about-hero { overflow:hidden; padding:0 0 5rem; background:radial-gradient(circle at 80% 24%,rgba(246,181,24,.18),transparent 30%),linear-gradient(115deg,#121212,#202020); color:#fff; }
.about-hero .breadcrumb { padding-top:2rem; }
.about-hero .breadcrumb a,.about-hero .breadcrumb span { color:#bdbdbd; }
.about-hero__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.75fr); align-items:center; gap:5rem; padding-top:4.5rem; }
.about-kicker { display:inline-flex; align-items:center; gap:.6rem; color:var(--color-yellow); font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.about-kicker::before { width:28px; height:3px; border-radius:3px; background:currentColor; content:""; }
.about-hero h1 { max-width:850px; margin:1.2rem 0; color:#fff; font-size:clamp(3.5rem,7vw,7rem); line-height:.91; letter-spacing:-.055em; }
.about-hero h1 em { color:var(--color-yellow); font-style:normal; }
.about-hero__content > p { max-width:730px; color:#c7c7c7; font-size:1.15rem; line-height:1.75; }
.about-hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.about-hero .button--outline { border-color:#666; color:#fff; }
.about-hero__visual { position:relative; min-height:520px; overflow:hidden; border:1px solid #4a4432; border-radius:28px; background:linear-gradient(145deg,#2d2b25,#161616); }
.about-hero__brand { position:absolute; top:8%; left:50%; width:44%; transform:translateX(-50%); opacity:.85; }
.about-hero__person { position:absolute; right:0; bottom:0; left:0; width:88%; max-height:82%; margin:auto; object-fit:contain; object-position:bottom; }
.about-hero__visual > div { position:absolute; right:1rem; bottom:1rem; left:1rem; padding:1rem 1.2rem; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(18,18,18,.88); backdrop-filter:blur(8px); }
.about-hero__visual span,.about-hero__visual strong,.about-hero__visual small { display:block; }
.about-hero__visual span { color:var(--color-yellow); font-size:.65rem; font-weight:900; text-transform:uppercase; }
.about-hero__visual strong { margin:.3rem 0; font-size:1.1rem; }
.about-hero__visual small { color:#aaa; }
.about-sinhala { max-width:920px; margin-top:3rem; padding:1.3rem 1.5rem; border-left:4px solid var(--color-yellow); border-radius:0 14px 14px 0; background:rgba(255,255,255,.08); }
.about-sinhala span { color:var(--color-yellow); font-size:.7rem; font-weight:900; text-transform:uppercase; }
.about-sinhala p { margin:.5rem 0 0; color:#e6e6e6; font-size:1.05rem; line-height:1.75; }
.about-problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.about-problem-grid article { padding:1.5rem; border:1px solid #ddd; border-radius:16px; }
.about-problem-grid span,.about-method-grid article > span,.about-principles article > span { color:var(--color-maroon); font-size:.7rem; font-weight:900; }
.about-problem-grid h3 { margin:1.8rem 0 .6rem; }
.about-problem-grid p { margin:0; color:#666; }
.about-mission { padding:5rem 0; background:var(--color-yellow); }
.about-mission .container { display:grid; grid-template-columns:1.35fr .65fr; gap:5rem; align-items:end; }
.about-mission span { color:#6a4a00; font-size:.72rem; font-weight:900; text-transform:uppercase; }
.about-mission h2 { max-width:920px; margin:.8rem 0 0; font-size:clamp(2.3rem,4.8vw,4.5rem); line-height:1.03; letter-spacing:-.04em; }
.about-mission p { margin:0; font-size:1.05rem; line-height:1.7; }
.about-method-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:1rem; }
.about-method-grid article { min-height:230px; padding:1.5rem; border:1px solid #ddd; border-radius:17px; }
.about-method-grid h3 { margin:2.5rem 0 .6rem; font-size:1.5rem; }
.about-method-grid p { margin:0; color:#666; }
.about-method-grid > i { color:var(--color-yellow); font-size:1.8rem; font-style:normal; font-weight:900; }
.about-process { display:flex; align-items:center; justify-content:center; gap:.65rem; overflow-x:auto; margin-top:2rem; padding:1rem; border-radius:14px; background:#222; }
.about-process span { flex:0 0 auto; color:#fff; font-size:.78rem; font-weight:800; }
.about-process i { color:var(--color-yellow); font-style:normal; }
.about-ecosystem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.about-ecosystem-grid a { min-height:260px; padding:1.4rem; border:1px solid #d9d9d9; border-radius:17px; background:#fff; transition:transform .2s ease,border-color .2s ease; }
.about-ecosystem-grid a:hover { transform:translateY(-4px); border-color:#d49a09; }
.about-ecosystem-grid span { color:var(--color-maroon); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.about-ecosystem-grid h3 { margin:2.5rem 0 .6rem; font-size:1.35rem; }
.about-ecosystem-grid p { color:#666; }
.about-ecosystem-grid strong { display:block; margin-top:1.2rem; font-size:.8rem; }
.about-audience-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:5rem; }
.about-audience-layout > div:first-child { position:sticky; top:140px; align-self:start; }
.about-audience-layout > div:first-child p { color:#666; line-height:1.7; }
.about-audience-layout .button { margin-top:1rem; }
.about-audience-list { display:grid; }
.about-audience-list article { display:grid; grid-template-columns:52px 1fr; gap:1rem; padding:1.25rem 0; border-bottom:1px solid #ddd; }
.about-audience-list article > span { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:#fff0c7; color:#725000; font-size:.7rem; font-weight:900; }
.about-audience-list h3 { margin:0 0 .35rem; }
.about-audience-list p { margin:0; color:#666; }
.about-principles { display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; }
.about-principles article { padding:1.2rem; border:1px solid #444; border-radius:14px; }
.about-principles h3 { margin:2rem 0 .6rem; color:#fff; font-size:1.05rem; }
.about-principles p { margin:0; color:#aaa; font-size:.84rem; }
.about-instructor { display:grid; grid-template-columns:minmax(320px,.75fr) 1.25fr; align-items:center; gap:5rem; }
.about-instructor__image { position:relative; min-height:560px; overflow:hidden; border-radius:24px; background:linear-gradient(145deg,#292823,#151515); }
.about-instructor__image img:first-child { position:absolute; top:7%; left:50%; width:42%; transform:translateX(-50%); opacity:.9; }
.about-instructor__image img:last-child { position:absolute; right:0; bottom:0; left:0; width:92%; max-height:86%; margin:auto; object-fit:contain; object-position:bottom; }
.about-instructor h2 { margin:.8rem 0 1.2rem; font-size:clamp(2.5rem,5vw,4.6rem); }
.about-instructor p { max-width:760px; color:#666; font-size:1rem; line-height:1.75; }
.about-instructor .button { margin-top:1rem; }
.about-instructor__role { margin-top:-.7rem; color:#8a6100 !important; font-size:.86rem !important; font-weight:900; letter-spacing:.03em; text-transform:uppercase; }
.about-instructor__qualifications { margin:-.6rem 0 1.35rem !important; color:#555 !important; font-size:.76rem !important; font-weight:750; line-height:1.5 !important; }
.about-instructor__focus { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.3rem 0 .5rem; }
.about-instructor__focus span { padding:.5rem .7rem; border-radius:999px; background:#f2f2f2; font-size:.72rem; font-weight:800; }
.about-instructor-details { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:2rem; }
.about-instructor-details article { padding:1.3rem; border:1px solid #ddd; border-radius:14px; }
.about-instructor-details span { color:var(--color-maroon); font-size:.67rem; font-weight:900; text-transform:uppercase; }
.about-instructor-details h3 { margin:1.5rem 0 .6rem; font-size:1.15rem; }
.about-instructor-details p { margin:0; color:#666; font-size:.84rem; line-height:1.65; }
.about-instructor-journey { display:grid; grid-template-columns:.75fr 1.25fr; gap:5rem; margin-top:4rem; padding-top:3rem; border-top:1px solid #ddd; }
.about-instructor-journey h2 { margin:.7rem 0 0; font-size:clamp(2rem,4vw,3.5rem); line-height:1.05; }
.about-instructor-journey p { margin:0 0 1rem; color:#666; line-height:1.75; }
.about-commitment { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid #d7d7d7; border-radius:18px; background:#fff; }
.about-commitment > div { padding:1.6rem; }
.about-commitment > div + div { border-left:1px solid #ddd; }
.about-commitment h3 { margin:0 0 1rem; }
.about-commitment ul { display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.about-commitment li { position:relative; padding-left:1.5rem; color:#555; }
.about-commitment li::before { position:absolute; left:0; color:#b47b00; font-weight:900; content:"✓"; }
.about-commitment > div + div li::before { color:var(--color-maroon); content:"—"; }
.about-start { padding:4.5rem 0; background:linear-gradient(115deg,#171717,#2a261b); color:#fff; }
.about-start .container { display:flex; align-items:center; justify-content:space-between; gap:4rem; }
.about-start span { color:var(--color-yellow); font-size:.72rem; font-weight:900; text-transform:uppercase; }
.about-start h2 { margin:.6rem 0; color:#fff; font-size:clamp(2.1rem,4vw,3.8rem); }
.about-start p { max-width:740px; margin:0; color:#bbb; }
.about-start .container > div:last-child { display:grid; flex:0 0 auto; gap:.8rem; text-align:center; }
.about-start .container > div:last-child > a:last-child { color:#ddd; font-size:.8rem; font-weight:750; }
.about-contact { text-align:center; }
.about-contact h2 { max-width:850px; margin:.8rem auto; font-size:clamp(2.3rem,5vw,4.5rem); }
.about-contact p { max-width:720px; margin:0 auto 1.7rem; color:#666; }

@media (max-width:1050px) {
  .about-hero__grid { grid-template-columns:1fr; gap:3rem; }
  .about-hero__visual { width:min(100%,650px); }
  .about-mission .container { grid-template-columns:1fr; gap:2rem; }
  .about-ecosystem-grid { grid-template-columns:repeat(2,1fr); }
  .about-principles { grid-template-columns:repeat(3,1fr); }
  .about-audience-layout { gap:3rem; }
  .about-instructor { gap:3rem; }
  .about-instructor-journey { gap:3rem; }
}
@media (max-width:800px) {
  .about-hero__grid { padding-top:3rem; }
  .about-problem-grid { grid-template-columns:1fr; }
  .about-method-grid { grid-template-columns:1fr; }
  .about-method-grid > i { transform:rotate(90deg); text-align:center; }
  .about-method-grid article { min-height:0; }
  .about-method-grid h3 { margin-top:1.3rem; }
  .about-audience-layout { grid-template-columns:1fr; }
  .about-audience-layout > div:first-child { position:static; }
  .about-principles { grid-template-columns:repeat(2,1fr); }
  .about-instructor { grid-template-columns:1fr; }
  .about-instructor__image { width:min(100%,560px); min-height:520px; }
  .about-instructor-details { grid-template-columns:1fr; }
  .about-instructor-journey { grid-template-columns:1fr; gap:1.5rem; }
  .about-start .container { align-items:flex-start; flex-direction:column; }
  .about-start .container > div:last-child { width:100%; text-align:left; }
}
@media (max-width:560px) {
  .about-hero { padding-bottom:3.5rem; }
  .about-hero h1 { font-size:clamp(3rem,15vw,4.6rem); }
  .about-hero__visual { min-height:430px; }
  .about-hero__actions .button { width:100%; }
  .about-sinhala { margin-top:2rem; }
  .about-ecosystem-grid,.about-principles { grid-template-columns:1fr; }
  .about-ecosystem-grid a { min-height:0; }
  .about-ecosystem-grid h3 { margin-top:1.5rem; }
  .about-process { justify-content:flex-start; }
  .about-instructor__image { min-height:430px; }
  .about-commitment { grid-template-columns:1fr; }
  .about-commitment > div + div { border-top:1px solid #ddd; border-left:0; }
}