:root{
    --orange:#FE7F2D;
    --navy:#233D4D;
    --text:#111;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html, body{
    height:100%;
    background:var(--orange);
    color:var(--text);
    font-family: Helvetica, Arial, sans-serif;
    font-weight:700;
    font-size:20px;
    line-height:1.5;
  }

  .wrap{
    min-height:100vh;
    padding:60px 0;
    display:flex;
    justify-content:center;
  }

  .col{
    width:100%;
    text-align:justify;
    padding:0 40px;
  }

  .about-box{
    position:relative;
    display:inline-block;
  }

  .about-trigger{
    color:var(--navy);
    cursor:pointer;
  }

  .overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,0.3);
    opacity:0;
    pointer-events:none; 
    transition:opacity 0.3s ease;
  }

  
  .about-box:hover .overlay{
    opacity:1;
  }

  
  .overlay img{
    width:min(70vw, 900px);
    height:auto;
    border-radius:6px;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
    pointer-events:none; 
  }

  a{color:var(--navy); text-decoration:none;}
  a:hover{text-decoration:underline;}