/* About page: founder card redesign.
   Portrait moves from the page header into the founder card (replaces the "DG" initials),
   with name + role sitting to its right and the bio underneath. Scoped to the About page only. */

/* 1. Remove the old hero portrait (desktop) */
.pagehead:has(+ section .card .av) .wrap::after{content:none!important;display:none!important}
.pagehead:has(+ section .card .av) .wrap>*{max-width:none!important}
.pagehead:has(+ section .card .av) .wrap{min-height:0!important}

/* 2. Founder card layout */
.pagehead:has(+ section .card .av)+section .card{
  display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:0;align-items:center;
  padding:28px!important;position:relative;overflow:hidden}
.pagehead:has(+ section .card .av)+section .card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#38bdf8,#6366f1,#ec4899)}

/* Portrait */
.pagehead:has(+ section .card .av)+section .card>.av{
  grid-column:1;grid-row:1/span 2;margin:0!important;
  width:120px!important;height:120px!important;flex:none;
  font-size:0!important;color:transparent!important;
  background:url(founder-hd-v1.jpg) center 22%/cover no-repeat!important;
  border-radius:50%!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 0 4px rgba(99,102,241,.55),0 14px 36px rgba(0,0,0,.45),0 0 44px rgba(99,102,241,.3)}

/* Name + role to the right of the portrait */
.pagehead:has(+ section .card .av)+section .card>h3{
  grid-column:2;grid-row:1;align-self:end;margin:0 0 6px!important;
  font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2}
.pagehead:has(+ section .card .av)+section .card>p:nth-of-type(1){
  grid-column:2;grid-row:2;align-self:start;margin:0!important;line-height:1.5}

/* Bio spans the full card width below */
.pagehead:has(+ section .card .av)+section .card>p:nth-of-type(2){
  grid-column:1/-1;grid-row:3;margin:22px 0 0!important;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);line-height:1.65}

/* Small phones: stack and centre */
@media(max-width:520px){
  .pagehead:has(+ section .card .av)+section .card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pagehead:has(+ section .card .av)+section .card>.av{grid-column:1;grid-row:1;width:132px!important;height:132px!important;margin-bottom:14px!important}
  .pagehead:has(+ section .card .av)+section .card>h3{grid-column:1;grid-row:2;align-self:auto}
  .pagehead:has(+ section .card .av)+section .card>p:nth-of-type(1){grid-column:1;grid-row:3}
  .pagehead:has(+ section .card .av)+section .card>p:nth-of-type(2){grid-row:4}
}