:root{
    --yellow:#FDB813;
    --blue:#1B3679;
    --bg:#F0F2FA;
    --text:#111827;
    --muted:#6b7280;
    --link:#2f55d4;
    --max:1320px;
  }
  
  *{ box-sizing:border-box; }
  
  html,body{
    margin:0;
    padding:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.65;
  }
  
  /* Yellow top band */
  .topband{
    background:var(--yellow);
    padding:28px 0;
  }
  
  .shell{
    max-width:var(--max);
    margin:0 auto;
    background:#fff;
    padding:26px 34px;
  }
  
  /* Breadcrumbs */
  .breadcrumbs{
    font-size:14px;
    color:var(--muted);
  }
  .breadcrumbs a{
    color:var(--text);
    text-decoration:none;
  }
  .breadcrumbs a:hover{ text-decoration:underline; }
  
  .breadcrumbs .sep{
    margin:0 10px;
    color:var(--yellow);
    font-weight:700;
  }
  
  .breadcrumbs .current{
    color:#9ca3af;
  }
  
  .page{
    padding:0 0 96px;
  }
  
  .about__content{
    max-width:var(--max);
    margin:-28px auto 40px auto;
    background:#fff;
    padding:0 52px 64px;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    box-shadow:0 24px 60px rgba(27,54,121,.08);
  }
  
  /* Blue title bar */
  .titlebar{
    background:var(--blue);
    padding:24px 36px;
    margin-left:-52px;
    margin-right:-52px;
    position:relative;
    overflow:hidden;
  }
  .titlebar::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:150px;
    height:100%;
    background:var(--yellow);
    clip-path:polygon(72% 0,100% 0,100% 100%,42% 100%);
  }
  .titlebar h1{
    margin:0;
    color:#fff;
    font-size:clamp(28px,3vw,40px);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.02em;
  }
  
  /* Two-column layout */
  .grid{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
    gap:64px;
    padding-top:52px;
    align-items:start;
  }
  
  .about__section{
    font-size:16px;
    color:#334155;
  }
  .about__section p{ margin:0 0 18px; }
  .about__section > p:first-child{
    color:var(--blue);
    font-size:21px;
    line-height:1.55;
    margin-bottom:24px;
    padding-bottom:22px;
    border-bottom:3px solid var(--yellow);
  }
  
  .subhead{
    margin:24px 0 8px;
    font-size:15px;
    font-weight:700;
    color:var(--blue);
  }
  
  .about__section ul{
    margin:0 0 14px 18px;
    padding:0;
  }
  .about__section li{ margin:6px 0; }
  .about__section li::marker{ color:var(--yellow); }
  
  /* Image */
  .media{
    margin:0;
    position:sticky;
    top:28px;
  }
  .media img{
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:4px;
    box-shadow:18px 18px 0 var(--yellow);
  }

  .images__container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Contact */
  .contact-title{
    margin:46px 0 18px;
    padding-top:28px;
    border-top:1px solid #dbe2ef;
    color:var(--blue);
    font-size:24px;
    font-weight:700;
  }
  
  .contact-block{ margin:0 0 18px; }
  .contact-label{ margin:0 0 6px; }
  
  .contact-links{
    margin:0;
    padding:16px 20px;
    background:#f7f9fd;
    border-left:4px solid var(--yellow);
  }
  .contact-links a{
    color:var(--blue);
    font-weight:700;
    text-decoration:none;
  }
  .contact-links a:hover{ text-decoration:underline; }
  
  /* Responsive */
  @media (max-width:980px){
    .page{ padding-bottom:56px; }
    .shell, .about__content{ padding-left:24px; padding-right:24px; border:0; }
    .titlebar{ margin-left:-18px; margin-right:-18px; }
    .about__content{ margin-left:16px; margin-right:16px; }
    .titlebar{ margin-left:-24px; margin-right:-24px; }
    .grid{ grid-template-columns:1fr; gap:42px; padding-top:36px; }
    .media{ position:static; max-width:620px; }
    .media img{ aspect-ratio:16 / 10; }
  }

  @media (max-width:560px){
    .topband{ padding:18px 0; }
    .about__content{ margin-top:-18px; padding-bottom:42px; }
    .titlebar{ padding:20px 24px; }
    .titlebar::after{ width:90px; }
    .grid{ padding-top:28px; }
    .about__section{ font-size:15px; }
    .about__section > p:first-child{ font-size:18px; }
    .media img{ aspect-ratio:4 / 3; box-shadow:10px 10px 0 var(--yellow); }
  }