/* about.html: page-specific finish, loaded after inner.css and scoped to body[data-page="about"]. */

/* ================= ICON TILES (features, why attend) ================= */
body[data-page="about"] .a-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:8px;color:var(--teal);
  background:linear-gradient(145deg,color-mix(in srgb,var(--teal) 13%,transparent),color-mix(in srgb,var(--glow-a) 14%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 16%,transparent);
  transition:transform .55s var(--spring),background .4s var(--ease-out),color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
body[data-page="about"] .a-ico svg.li{width:21px;height:21px}
body[data-page="about"] .card:hover .a-ico{transform:translateY(-2px) rotate(-6deg);color:var(--cta-ink);
  background:linear-gradient(135deg,var(--cta-hover),var(--cta));box-shadow:0 10px 20px -10px color-mix(in srgb,var(--cta) 90%,transparent)}

/* ================= BIOASIA 2027: features and activities ================= */
body[data-page="about"] #bioasia-2027 h3.sub{font-weight:700;font-size:clamp(19px,2vw,22px);margin-bottom:18px!important}
body[data-page="about"] #bioasia-2027 .cards{gap:14px}
body[data-page="about"] #bioasia-2027 .card.ic{padding:20px 20px 22px;gap:6px;min-height:176px;color:var(--ink)}
body[data-page="about"] #bioasia-2027 .card.ic h3{font-size:17.5px;line-height:1.25}
/* a quiet arrow that wakes on hover, so the tiles read as links */
body[data-page="about"] #bioasia-2027 .card.ic::after{content:"→";position:absolute;top:22px;right:20px;font:600 17px/1 var(--sans);color:var(--teal);
  opacity:.28;transition:opacity .35s var(--ease-out),transform .45s var(--spring)}
body[data-page="about"] #bioasia-2027 .card.ic:hover::after,body[data-page="about"] #bioasia-2027 .card.ic:focus-visible::after{opacity:1;transform:translateX(4px)}
@media (min-width:1280px){body[data-page="about"] #bioasia-2027 .cards.c4{grid-template-columns:repeat(5,minmax(0,1fr))}}   /* five across only when the hover text fits */
/* more detail on hover: a violet panel with the title and a one-line description rises over the card (pointer devices);
   on touch screens the description simply sits under the title */
body[data-page="about"] .feat-cards .card.ic{overflow:hidden;isolation:isolate;text-decoration:none}
body[data-page="about"] .feat-cards .more{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
body[data-page="about"] .feat-cards .more b{display:none}
@media (hover:hover) and (pointer:fine){
  body[data-page="about"] .feat-cards .more{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px 20px 22px;
    font-size:14px;color:rgb(255 255 255 / .9);background:radial-gradient(120% 90% at 100% 0%,var(--cta-hover),transparent 60%),linear-gradient(160deg,var(--cta),var(--orb-b,#5B21B6));
    opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
  body[data-page="about"] .feat-cards .more b{display:block;padding-right:26px;font:700 17px/1.25 var(--display);color:#fff}   /* clear of the corner arrow */
  body[data-page="about"] .feat-cards .card.ic:hover .more,body[data-page="about"] .feat-cards .card.ic:focus-visible .more{opacity:1;transform:none}
  body[data-page="about"] .feat-cards .card.ic::after{z-index:3}
  body[data-page="about"] .feat-cards .card.ic:hover::after,body[data-page="about"] .feat-cards .card.ic:focus-visible::after{color:#fff}
}
/* phones: a compact list, icon beside the label and title */
@media (max-width:560px){
  body[data-page="about"] #bioasia-2027 .cards.c4{grid-template-columns:1fr;gap:10px}
  body[data-page="about"] #bioasia-2027 .card.ic{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;
    align-items:center;min-height:0;padding:14px 44px 14px 14px}
  body[data-page="about"] #bioasia-2027 .card.ic .a-ico{grid-row:1 / 3;margin:0}
  body[data-page="about"] #bioasia-2027 .card.ic .k{align-self:end}
  body[data-page="about"] #bioasia-2027 .card.ic h3{align-self:start;font-size:16.5px}
  body[data-page="about"] #bioasia-2027 .card.ic::after{top:50%;right:16px;margin-top:-9px}
}

/* ================= THEME: Beyond Boundaries ================= */
body[data-page="about"] #theme .two{align-items:center}
body[data-page="about"] #theme .lead-p{font-size:1.1rem;line-height:1.75;color:var(--ink-2)}
body[data-page="about"] #theme .lead-p strong{color:var(--ink);font-weight:600}
body[data-page="about"] #theme .card{padding:28px!important}
body[data-page="about"] #theme .card > .muted{font-size:15px;line-height:1.6}
body[data-page="about"] .eco{gap:8px}
body[data-page="about"] .eco span{padding:7px 14px;font-size:14px;font-weight:500;border-radius:999px;background:color-mix(in srgb,var(--teal) 6%,var(--surface));
  border-color:color-mix(in srgb,var(--teal) 18%,var(--line));transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s var(--spring)}
body[data-page="about"] .eco span:hover{background:color-mix(in srgb,var(--teal) 14%,var(--surface));border-color:color-mix(in srgb,var(--teal) 45%,transparent);transform:translateY(-2px)}
body[data-page="about"] .pillars{gap:14px;margin-top:36px;counter-reset:pillar}
body[data-page="about"] .pillars div{position:relative;overflow:hidden;padding:26px 24px 24px;border-radius:18px;border-color:color-mix(in srgb,var(--line) 75%,transparent);
  box-shadow:var(--lift);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
body[data-page="about"] .pillars div::before{counter-increment:pillar;content:"0" counter(pillar);display:block;margin-bottom:14px;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--ink-2)}
body[data-page="about"] .pillars div::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--teal),var(--turmeric))}
body[data-page="about"] .pillars div:hover{transform:translateY(-4px);box-shadow:var(--lift-hi)}
body[data-page="about"] .pillars b{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;background:linear-gradient(90deg,var(--teal),var(--turmeric));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
body[data-page="about"] .pillars span{margin-top:6px;font-size:15px}

/* ================= WHY ATTEND ================= */
body[data-page="about"] #why-attend .card.ic{padding:24px 22px 24px}
body[data-page="about"] #why-attend .card.ic h3{font-size:19px;line-height:1.25}
body[data-page="about"] #why-attend .card.ic p{line-height:1.65}

/* ================= GLOBAL LEADERS (dark) ================= */
/* the spotlight sits straight on the section (no second dark panel), with a soft glow behind the portrait */
body[data-page="about"] .blk.dark .spot{background:none;gap:48px;padding-block:8px 0}
body[data-page="about"] .spot .big{filter:drop-shadow(0 30px 60px color-mix(in srgb,var(--glow-b) 35%,transparent))}
body[data-page="about"] .spot .big img{transition:opacity .4s ease}
body[data-page="about"] .spot .k{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em}
body[data-page="about"] .spot h3{font-weight:800;letter-spacing:-.04em;margin:14px 0 10px}
body[data-page="about"] .spot .role{font-size:17.5px}
body[data-page="about"] .spot .prog{height:3px;max-width:420px;margin-top:24px}
body[data-page="about"] .spot .prog i{background:linear-gradient(90deg,var(--glow-b),var(--glow-a))}
body[data-page="about"] .spot .thumbs{gap:10px;margin-top:24px}
body[data-page="about"] .spot .thumbs button{opacity:.5;transition:opacity .3s ease,transform .45s var(--spring),border-color .3s ease,box-shadow .3s ease}
body[data-page="about"] .spot .thumbs button:hover{opacity:.9;transform:translateY(-3px)}
body[data-page="about"] .spot .thumbs button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--glow-b) 25%,transparent)}
body[data-page="about"] .spot .ctl{margin-top:20px}
body[data-page="about"] .lgrid{gap:12px;margin-top:40px;padding-top:40px;border-top:1px solid rgb(255 255 255 / .08)}
body[data-page="about"] .lcard{padding:14px 16px;gap:14px;border-radius:16px}
body[data-page="about"] .lcard img{width:52px;height:52px;box-shadow:0 0 0 2px rgb(255 255 255 / .1);transition:box-shadow .35s ease}
body[data-page="about"] .lcard:hover img{box-shadow:0 0 0 2px var(--glow-b)}
body[data-page="about"] .lcard b{font:700 15.5px/1.3 var(--display);letter-spacing:0}
body[data-page="about"] .lcard span{margin-top:2px}
@media (max-width:760px){
  body[data-page="about"] .blk.dark .spot{gap:24px}
  body[data-page="about"] .spot .thumbs{gap:8px}
  body[data-page="about"] .spot .thumbs img{width:40px;height:40px}
}

/* ================= THROUGH THE YEARS ================= */
body[data-page="about"] #years .bul{gap:14px}
body[data-page="about"] #years .bul li{line-height:1.65;color:var(--ink-2)}
body[data-page="about"] #years .subsec{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}

/* Evolution of themes: one even gallery of equal tiles. Each tile shows its own edition logo, cropped from the edition-logo
   image (assets/img/themes.jpg) onto a calm neutral stage, with a small year caption and the theme line beneath.
   --ar is the logo's aspect ratio; --bs/--bp crop it out of the sheet. */
body[data-page="about"] .tl{--stage:116px;--ls:1;margin-top:24px;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-page="about"] .tl li{position:relative;display:flex;flex-direction:column;padding:0 0 18px;border-radius:18px;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease-out)}
body[data-page="about"] .tl li::before{content:"";display:block;height:var(--stage);margin:7px 7px 14px;border-radius:12px;
  background:var(--paper);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 55%,transparent)}
body[data-page="about"] .tl li::after{content:"";position:absolute;left:50%;top:calc(7px + var(--stage) / 2);transform:translate(-50%,-50%);
  width:min(calc(100% - 40px),calc(var(--lw) * var(--ls)),calc((var(--stage) - 22px) * var(--ar)));aspect-ratio:var(--ar);
  background:url("../img/themes.jpg") no-repeat;background-size:var(--bs) auto;background-position:var(--bp);mix-blend-mode:multiply;
  transition:transform .6s var(--ease-out)}
body[data-page="about"] .tl li:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:color-mix(in srgb,var(--teal) 28%,var(--line))}
body[data-page="about"] .tl li:hover::after{transform:translate(-50%,-50%) scale(1.04)}
body[data-page="about"] .tl li b{display:flex;align-items:center;gap:8px;padding:0 16px;margin-bottom:4px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* the theme line is kept for screen readers only: the edition logos carry it visually */
body[data-page="about"] .tl li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the current edition: same tile, an accent edge and a small tag; it spans two cells so every row stays full */
body[data-page="about"] .tl li.now{--ls:1.3;grid-column:span 2;background:var(--surface);color:var(--ink);
  border-color:color-mix(in srgb,var(--teal) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 30%,transparent),var(--lift)}
body[data-page="about"] .tl li.now::before{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--glow-b) 16%,transparent),transparent 60%),var(--paper)}
body[data-page="about"] .tl li.now b{color:var(--teal)}
body[data-page="about"] .tl li.now b::after{content:"This edition";padding:3px 9px;border-radius:999px;font:600 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cta-ink);background:linear-gradient(135deg,var(--cta-hover),var(--cta))}
body[data-page="about"] .tl li:nth-child(1){--ar:2.024;--lw:145px;--bs:717.13%;--bp:1.420% 7.122%}
body[data-page="about"] .tl li:nth-child(2){--ar:2.916;--lw:174px;--bs:743.80%;--bp:24.775% 9.877%}
body[data-page="about"] .tl li:nth-child(3){--ar:2.185;--lw:151px;--bs:692.31%;--bp:50.000% 8.369%}
body[data-page="about"] .tl li:nth-child(4){--ar:1.899;--lw:141px;--bs:796.46%;--bp:73.571% 8.658%}
body[data-page="about"] .tl li:nth-child(5){--ar:1.786;--lw:136px;--bs:861.24%;--bp:96.983% 6.906%}
body[data-page="about"] .tl li:nth-child(6){--ar:1.677;--lw:132px;--bs:825.69%;--bp:2.402% 45.015%}
body[data-page="about"] .tl li:nth-child(7){--ar:2.531;--lw:162px;--bs:740.74%;--bp:25.883% 45.810%}
body[data-page="about"] .tl li:nth-child(8){--ar:2.008;--lw:145px;--bs:734.69%;--bp:50.289% 46.667%}
body[data-page="about"] .tl li:nth-child(9){--ar:2.495;--lw:161px;--bs:728.74%;--bp:74.565% 47.125%}
body[data-page="about"] .tl li:nth-child(10){--ar:0.814;--lw:92px;--bs:1323.53%;--bp:95.553% 44.961%}
body[data-page="about"] .tl li:nth-child(11){--ar:2.802;--lw:171px;--bs:669.14%;--bp:0.718% 86.732%}
body[data-page="about"] .tl li:nth-child(12){--ar:2.463;--lw:160px;--bs:769.23%;--bp:26.245% 86.750%}
body[data-page="about"] .tl li:nth-child(13){--ar:2.131;--lw:149px;--bs:692.31%;--bp:50.065% 89.855%}
body[data-page="about"] .tl li:nth-child(14){--ar:1.969;--lw:143px;--bs:476.19%;--bp:87.693% 96.129%}
body[data-page="about"] .tl li:nth-child(1){--bp:1.65% 7.122%}
/* the sheet itself stays in the page for screen readers and its caption stays visible; the tiles above show the logos */
body[data-page="about"] #years figure.img{margin:14px 0 0;padding:0;background:none;border:0;border-radius:0}
body[data-page="about"] #years figure.img img{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-page="about"] #years figure.img figcaption{padding:0;font:500 12.5px/1.4 var(--sans);color:var(--ink-2);letter-spacing:.01em}
/* dark mode: logos need a light stage; multiply blending keeps them clean on it */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body[data-page="about"] .tl li::before{background:var(--on-night)}
  :root:not([data-theme="light"]) body[data-page="about"] .tl li.now::before{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--glow-b) 22%,transparent),transparent 60%),var(--on-night)}
}
:root[data-theme="dark"] body[data-page="about"] .tl li::before{background:var(--on-night)}
:root[data-theme="dark"] body[data-page="about"] .tl li.now::before{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--glow-b) 22%,transparent),transparent 60%),var(--on-night)}
@media (max-width:899px){body[data-page="about"] .tl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){
  body[data-page="about"] .tl{--stage:96px;--ls:.8;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="about"] .tl li.now{grid-column:auto;--ls:.8}
  body[data-page="about"] .tl li::after{width:min(calc(100% - 28px),calc(var(--lw) * var(--ls)),calc((var(--stage) - 18px) * var(--ar)))}
  body[data-page="about"] .tl li b{padding-inline:12px}
  body[data-page="about"] .tl li span{font-size:13.5px}
  body[data-page="about"] .tl li b{flex-wrap:wrap;gap:6px}
}

/* ================= ECOSYSTEM ================= */
body[data-page="about"] #ecosystem .figrow{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){body[data-page="about"] #ecosystem .figrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
body[data-page="about"] .figrow span{line-height:1.5}

@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body[data-page="about"] .card:hover .a-ico,
  html:not(.force-motion) body[data-page="about"] .pillars div:hover,
  html:not(.force-motion) body[data-page="about"] .eco span:hover,
  html:not(.force-motion) body[data-page="about"] .tl li:hover,
  html:not(.force-motion) body[data-page="about"] .spot .thumbs button:hover{transform:none}
  html:not(.force-motion) body[data-page="about"] .tl li:hover::after{transform:translate(-50%,-50%)}
  html:not(.force-motion) body[data-page="about"] #bioasia-2027 .card.ic:hover::after{transform:none}
}

/* theme pillars: a real event photo at the foot of each card, lined up across the three; slow drift, closer on hover */
body[data-page="about"] .pillars > div{display:flex;flex-direction:column}
body[data-page="about"] .pl-img{position:relative;margin:20px 0 0;margin-top:auto;padding-top:0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
body[data-page="about"] .pillars > div > span{margin-bottom:20px}
body[data-page="about"] .pl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pl-drift 18s ease-in-out infinite alternate;transition:filter .6s var(--ease-out)}
body[data-page="about"] .pl-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgb(10 10 31 / .25))}
body[data-page="about"] .pillars > div:nth-child(2) .pl-img img{animation-delay:-6s}
body[data-page="about"] .pillars > div:nth-child(3) .pl-img img{animation-delay:-12s}
body[data-page="about"] .pillars > div:hover .pl-img img{filter:saturate(1.15) brightness(1.05)}
@keyframes pl-drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion: reduce){html:not(.force-motion) body[data-page="about"] .pl-img img{animation:none}}


/* ================= MARK YOUR DATES ================= */
body[data-page="about"] .dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:40px}
body[data-page="about"] .dt{--c:#0E7490;position:relative;display:flex;flex-direction:column;gap:6px;padding:0 22px 22px;overflow:hidden;border-radius:18px;
  background:var(--surface);box-shadow:var(--lift),inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
body[data-page="about"] .dt.d1{--c:#1D4ED8}
body[data-page="about"] .dt.d2{--c:#7C3AED}
body[data-page="about"] .dt:hover,body[data-page="about"] .dt:focus-visible{transform:translateY(-4px);box-shadow:var(--lift-hi),inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)}
body[data-page="about"] .dt-cal{display:flex;align-items:center;gap:14px;margin:0 -22px 16px;padding:16px 22px;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#0A0A1F))}
body[data-page="about"] .dt-cal b{font:800 44px/1 var(--display);letter-spacing:-.03em}
body[data-page="about"] .dt-cal > span{display:flex;flex-direction:column;padding-left:14px;border-left:1px solid rgb(255 255 255 / .35);font:700 17px/1.2 var(--display)}
body[data-page="about"] .dt-cal small{font:600 12px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
body[data-page="about"] .dt-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
body[data-page="about"] .dt-ico svg.li{width:20px;height:20px}
body[data-page="about"] .dt h3{margin:6px 0 0;font:800 19px/1.25 var(--display);color:var(--ink)}
body[data-page="about"] .dt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:800px){body[data-page="about"] .dates{grid-template-columns:1fr}}
:root[data-theme="dark"] body[data-page="about"] .dt.d0{--c:#22D3EE}
:root[data-theme="dark"] body[data-page="about"] .dt.d1{--c:#60A5FA}
:root[data-theme="dark"] body[data-page="about"] .dt.d2{--c:#A78BFA}

/* ================= ROAD TO BIOASIA 2027 ================= */
body[data-page="about"] .road{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}
/* the road: a dashed line through the stop icons */
body[data-page="about"] .road::before{content:"";position:absolute;left:30px;right:30px;top:47px;height:0;border-top:2px dashed color-mix(in srgb,var(--teal) 45%,transparent)}
body[data-page="about"] .road li{position:relative;display:flex;flex-direction:column;gap:4px;padding:24px 20px 22px;border-radius:18px;background:var(--surface);box-shadow:var(--lift),inset 0 0 0 1px var(--line)}
body[data-page="about"] .road .rd-ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:12px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#22D3EE,#1D4ED8);box-shadow:0 0 0 6px var(--surface),0 10px 22px -10px #1D4ED8}
body[data-page="about"] .road .rd-ico svg.li{width:22px;height:22px}
body[data-page="about"] .road h3{margin:2px 0 4px;font:800 18px/1.25 var(--display);color:var(--ink)}
body[data-page="about"] .road p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
body[data-page="about"] .road .rd-full{color:var(--ink);font-weight:500;margin-bottom:4px}
body[data-page="about"] .road li.now{background:linear-gradient(160deg,var(--cta),var(--orb-b,#5B21B6));box-shadow:0 20px 40px -20px var(--cta)}
body[data-page="about"] .road li.now .rd-ico{background:#fff;color:var(--cta);box-shadow:0 0 0 6px color-mix(in srgb,#fff 25%,transparent)}
body[data-page="about"] .road li.now h3,body[data-page="about"] .road li.now p{color:#fff}
body[data-page="about"] .road li.now .k{color:rgb(255 255 255 / .8)}
@media (max-width:900px){
  body[data-page="about"] .road{grid-template-columns:1fr;gap:12px;padding-left:0}
  body[data-page="about"] .road::before{left:43px;right:auto;top:30px;bottom:30px;height:auto;border-top:0;border-left:2px dashed color-mix(in srgb,var(--teal) 45%,transparent)}
  body[data-page="about"] .road li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:start}
  body[data-page="about"] .road .rd-ico{grid-row:1 / 6;margin:0}
}
body[data-page="about"] .faba{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:32px;align-items:center;margin-top:28px;padding:28px;border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,#22D3EE 8%,var(--surface)),color-mix(in srgb,var(--cta) 8%,var(--surface)));box-shadow:var(--lift),inset 0 0 0 1px var(--line)}
body[data-page="about"] .faba-logo{display:grid;place-items:center;padding:18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06)}
body[data-page="about"] .faba-logo img{width:100%;max-width:200px;height:auto}
body[data-page="about"] .faba h3{margin:8px 0 10px;font:800 clamp(21px,2.3vw,26px)/1.2 var(--display);color:var(--ink)}
body[data-page="about"] .faba p{margin:0;line-height:1.7;color:var(--ink-2)}
body[data-page="about"] .faba p strong{color:var(--ink)}
body[data-page="about"] .faba-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:18px 0 0;padding:0;list-style:none}
body[data-page="about"] .faba-pts li{display:flex;align-items:center;gap:10px;font:600 14.5px/1.35 var(--sans);color:var(--ink)}
body[data-page="about"] .faba-pts svg.li{flex:none;width:18px;height:18px;color:var(--teal)}
@media (max-width:760px){
  body[data-page="about"] .faba{grid-template-columns:1fr;gap:20px;padding:22px}
  body[data-page="about"] .faba-logo{max-width:220px}
  body[data-page="about"] .faba-pts{grid-template-columns:1fr}
}

/* ================= HYDERABAD: four places, photo tiles =================
   Charminar tall on the left, HITEC City wide on top, the two clusters below. Each tile: a glass label top-left,
   the name and one line at the bottom over a soft scrim; the photo eases in on hover. */
body[data-page="about"] .hyd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,300px);gap:16px;margin-bottom:28px}
body[data-page="about"] .hyd-tile{position:relative;margin:0;overflow:hidden;isolation:isolate;border-radius:22px;background:var(--night);
  box-shadow:0 1px 2px rgb(10 10 31 / .08),0 18px 40px -22px rgb(10 10 31 / .45)}
body[data-page="about"] .hyd-tile.t-charminar{grid-row:1 / 3}
body[data-page="about"] .hyd-tile.t-hitec{grid-column:2 / 4}
body[data-page="about"] .hyd-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease-out)}
body[data-page="about"] .hyd-tile.t-charminar img{object-position:50% 40%}
body[data-page="about"] .hyd-tile.t-hitec img{object-position:50% 45%}
body[data-page="about"] .hyd-tile:hover img{transform:scale(1.05)}
body[data-page="about"] .hyd-tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(10 10 31 / .18) 0%,transparent 26%,transparent 44%,rgb(10 10 31 / .55) 70%,rgb(10 10 31 / .88) 100%)}
body[data-page="about"] .hyd-tag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;
  font:600 12.5px/1 var(--sans);letter-spacing:.01em;color:#fff;background:rgb(10 10 31 / .38);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22)}
body[data-page="about"] .hyd-tag svg.li{width:15px;height:15px}
body[data-page="about"] .hyd-tile figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:6px;padding:22px 24px 22px;color:#fff}
body[data-page="about"] .hyd-tile figcaption b{font:750 clamp(21px,2vw,26px)/1.15 var(--display);letter-spacing:-.02em}
body[data-page="about"] .hyd-tile figcaption span{max-width:44ch;font:400 14.5px/1.5 var(--sans);color:rgb(255 255 255 / .86)}
body[data-page="about"] .hyd-tile.t-charminar figcaption{padding:26px 26px 28px}
body[data-page="about"] .hyd-tile.t-charminar figcaption b{font-size:clamp(26px,2.6vw,32px)}
@media (max-width:900px){
  body[data-page="about"] .hyd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;grid-auto-rows:260px}
  body[data-page="about"] .hyd-tile.t-charminar{grid-row:span 2}
  body[data-page="about"] .hyd-tile.t-hitec{grid-column:2}
  body[data-page="about"] .hyd-tile.t-mdp{grid-column:1 / 3}
}
@media (max-width:560px){
  body[data-page="about"] .hyd{grid-template-columns:1fr;grid-auto-rows:260px;gap:12px}
  body[data-page="about"] .hyd-tile.t-charminar{grid-row:span 2}
  body[data-page="about"] .hyd-tile.t-hitec,body[data-page="about"] .hyd-tile.t-mdp{grid-column:auto}
  body[data-page="about"] .hyd-tile figcaption{padding:18px 18px 20px}
}
body[data-page="about"] .road .k,body[data-page="about"] .hyd-tile .k{font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
body[data-page="about"] .hyd-tile .k{color:var(--glow-a)}

/* features and activities: tall enough for the longest hover description (BioAsia Connect), title always in view */
@media (hover:hover) and (pointer:fine){
  body[data-page="about"] #bioasia-2027 .feat-cards .card.ic{min-height:216px}
  body[data-page="about"] .feat-cards .more{gap:6px;padding:18px 18px 20px;font-size:13.5px;line-height:1.45}
}

/* leaders: label and heading centred over the spotlight, with room to breathe */
body[data-page="about"] #leaders .sec-head{justify-items:center;text-align:center;margin-bottom:56px}
body[data-page="about"] #leaders .sec-head h2{margin-top:14px}
@media (max-width:560px){body[data-page="about"] #leaders .sec-head{margin-bottom:32px}}

/* phones: the description sits under the title in the text column (not in the 44px icon column) */
@media (max-width:560px){
  body[data-page="about"] #bioasia-2027 .card.ic{grid-template-rows:auto auto auto;align-items:start;row-gap:3px;padding:16px 44px 16px 16px}
  body[data-page="about"] #bioasia-2027 .card.ic .a-ico{grid-row:1 / 3;align-self:center}
  body[data-page="about"] #bioasia-2027 .card.ic h3{align-self:center}
  body[data-page="about"] .feat-cards .more{grid-column:2;margin-top:4px;font-size:13.5px;line-height:1.5}
  body[data-page="about"] #bioasia-2027 .card.ic::after{top:22px;margin-top:0}
}

/* ================= HEADER: event photo; a solid night panel on the left for the title and description ================= */
body[data-page="about"] .phero.ph-photo{min-height:clamp(440px,40vw,560px)}
body[data-page="about"] .phero.ph-photo .ph-bg{object-position:78% 50%}
body[data-page="about"] .phero.ph-photo::before{background:
  linear-gradient(90deg,rgb(10 10 31 / .96) 0%,rgb(10 10 31 / .92) 34%,rgb(10 10 31 / .62) 52%,rgb(10 10 31 / .18) 72%,rgb(10 10 31 / .1) 100%),
  linear-gradient(0deg,rgb(10 10 31 / .55),transparent 30%)}
body[data-page="about"] .phero.ph-photo h1{margin:22px 0 18px}
body[data-page="about"] .phero.ph-photo p{max-width:min(60ch,560px);font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.7;color:rgb(255 255 255 / .88);text-shadow:none}
@media (max-width:700px){
  body[data-page="about"] .phero.ph-photo .ph-bg{object-position:70% 50%}
  body[data-page="about"] .phero.ph-photo::before{background:linear-gradient(180deg,rgb(10 10 31 / .55) 0%,rgb(10 10 31 / .82) 45%,rgb(10 10 31 / .96) 100%)}
  body[data-page="about"] .phero.ph-photo p{font-size:1rem;line-height:1.65}
}