/* About Us — navigation over the hero */
.about-page .site-header{position:absolute;inset:0 0 auto;z-index:50;background:transparent;color:#fff;border:0;padding:16px 0;min-height:0}
.about-page .site-header .brand,.about-page .site-header .brand-name,.about-page .site-header .brand-name span{color:#fff}
.about-page .site-header nav a,.about-page .site-header nav button{color:#fff}
.about-page .site-header nav a.active{color:#fff;border-bottom:2px solid #8cd2f4}
.about-page .site-header nav a:hover,.about-page .site-header nav button:hover{color:#a8ddf9}
.about-page .site-header .utility{display:flex;justify-content:flex-end;align-items:center;gap:30px;font-size:12px;margin-bottom:6px;color:#fff}
.about-page .site-header .utility span{color:inherit;font-size:inherit;letter-spacing:normal;text-transform:none}
.about-page .site-header .utility a{color:inherit;text-decoration:none}

/* Introductory hero */
.about-page .about-personal-hero{padding:190px 0 70px;min-height:480px;color:#fff;background:linear-gradient(90deg,rgba(9,35,66,.94),rgba(9,35,66,.12)),linear-gradient(180deg,rgba(3,26,53,.7),transparent 45%),url('/images/about-lobby.webp') center/cover}
.about-personal-hero h1{font-size:clamp(36px,5vw,64px);line-height:1.1;margin:0 0 18px}
.about-personal-hero p{font-size:clamp(20px,3vw,30px);color:#d2e8fa;margin:0}
@media(min-width:761px) and (max-width:1100px){.about-page .about-personal-hero{padding-top:230px}}

/* Owner section — image remains transparent; the website owns the circles */
.about-personal{position:relative;isolation:isolate;overflow:hidden;background:#fff;padding:24px 0 0}
.about-personal::before{content:"";position:absolute;z-index:-1;inset:0 51% 0 0;pointer-events:none;background:radial-gradient(ellipse 86% 70% at 44% 79%,#c8ddf1 0 48%,transparent 48.5%),radial-gradient(ellipse 78% 67% at 19% 63%,#e5f0f9 0 62%,transparent 62.5%),radial-gradient(ellipse 85% 78% at 9% 48%,#f0f6fc 0 69%,transparent 69.5%)}
.about-personal .personal-grid{position:relative;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);gap:14px;align-items:stretch}
.about-personal .darryl-portrait{display:block;width:100%;height:100%;max-height:780px;object-fit:contain;object-position:center bottom;align-self:end;background:transparent}
.owner-content{min-width:0;align-self:center;padding:34px 0 40px;color:#071c38}
.owner-eyebrow{margin:0;color:#cc900f;letter-spacing:.2em;font-size:18px;font-weight:700}
.owner-content h2{font-size:clamp(42px,5.6vw,82px);font-weight:900;letter-spacing:-.045em;line-height:1.05;margin:12px 0;color:#04142b;overflow-wrap:break-word}
.owner-role{font-size:clamp(13px,1.5vw,21px);letter-spacing:.13em;font-weight:600}
.owner-content>p:not(.owner-eyebrow):not(.owner-role){font-size:clamp(15px,1.25vw,18px);line-height:1.55;margin:13px 0}
.owner-highlights{border-top:1px solid #c58b19;margin-top:26px;padding-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 12px}
.owner-highlights>div{min-width:0;display:flex;align-items:center;gap:13px}
.owner-highlights h3{font-size:16px;line-height:1.2;color:#061b38;margin:0 0 5px;font-weight:850}
.owner-highlights p{margin:0;font-size:14px;line-height:1.45}
.highlight-icon,.owner-highlights .minority-badge{display:grid;place-items:center;width:88px;height:88px;flex:0 0 88px;border-radius:50%;background:#eaf0f6;color:#c58b19;font-size:38px;object-fit:contain}
.owner-highlights .minority-badge{padding:8px}

/* Tablet */
@media(max-width:850px){
  .about-personal{padding:0}
  .about-personal::before{inset:0 0 auto;height:420px;background:radial-gradient(circle 235px at 48% 84%,#c5dbef 0 74%,transparent 74.5%),radial-gradient(circle 260px at 27% 80%,#dceaf6 0 84%,transparent 84.5%),radial-gradient(circle 280px at 12% 70%,#eff6fc 0 95%,transparent 95.5%)}
  .about-personal .personal-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .about-personal .darryl-portrait{width:min(100%,430px);height:auto;max-height:410px;object-fit:contain;object-position:bottom center;margin:0 auto;align-self:end}
  .owner-content{padding:24px 0 42px}
  .owner-content h2{font-size:clamp(36px,8vw,58px)}
  .owner-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Phones: portrait on its own circle backdrop, readable biography below */
@media(max-width:600px){
  .about-page .site-header{position:relative;inset:auto;background:#082c61;padding:12px 0}
  .about-page .site-header .utility{margin-bottom:8px;gap:14px;flex-wrap:wrap}
  .about-page .about-personal-hero{min-height:0;padding:48px 0 52px;background-position:center}
  .about-personal::before{height:340px;background:radial-gradient(circle 198px at 50% 94%,#c4dbf1 0 75%,transparent 75.5%),radial-gradient(circle 215px at 27% 79%,#dceaf7 0 89%,transparent 89.5%),radial-gradient(circle 240px at 10% 67%,#eef5fc 0 97%,transparent 97.5%)}
  .about-personal .darryl-portrait{width:min(100%,355px);max-height:340px}
  .owner-content{padding:24px 0 38px}
  .owner-eyebrow{font-size:12px;letter-spacing:.18em}
  .owner-content h2{font-size:clamp(32px,9vw,44px);line-height:1.02;margin:8px 0}
  .owner-role{font-size:12px;line-height:1.5;letter-spacing:.075em;overflow-wrap:anywhere}
  .owner-content>p:not(.owner-eyebrow):not(.owner-role){font-size:15px;line-height:1.62;margin:12px 0}
  .owner-highlights{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px;padding-top:22px}
  .owner-highlights>div{align-items:center;gap:14px}
  .owner-highlights h3{font-size:14px}
  .owner-highlights p{font-size:13px}
  .highlight-icon,.owner-highlights .minority-badge{width:62px;height:62px;flex-basis:62px;font-size:29px}
  .owner-highlights .minority-badge{padding:6px}
}
@media(max-width:360px){
  .about-personal::before{height:306px}
  .about-personal .darryl-portrait{max-height:306px}
  .owner-content h2{font-size:31px}
}