.hp-infoBox{
  position: fixed;
  left: 0;
  top: 0;
  width: min(300px, calc(100vw - 28px));
  background: #ffffff;
  border: 1px solid rgba(16,24,40,0.12);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(2,10,30,.12);
  padding: 10px 12px;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  
}

/* Header */
.hp-infoBox__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}

.hp-infoBox__title{
  margin:0;
  font-size:15px;
  font-weight:800;
  line-height:1.2;
}

.hp-infoBox__meta{
  margin:2px 0 0;
  font-size:12px;
  color:#667085;
}

/* Locations */
.hp-infoBox__list{
  margin:6px 0 0 14px;
  padding:0;
  font-size:13px;
}
.hp-infoBox__list li{
  margin:2px 0;
}

/* Close */
.hp-infoBox__close{
  background:none;
  border:none;
  font-size:16px;
  cursor:pointer;
  line-height:1;
  color:#667085;
}
.hp-infoBox__close:hover{
  color:#000;
}
/* Base state shape */
#us-map .state {
  transition: fill 120ms ease-in-out, stroke 120ms ease-in-out, opacity 120ms ease-in-out;
  stroke: #ffffff;
  stroke-width: 1;
}

/* Inactive: grey + no hover + no click */
#us-map .state--inactive {
  fill: #18519c;
  opacity: 0.70;
  cursor: not-allowed;
  pointer-events: none; /* prevents hover/click */
}

/* Active: highlighted and selectable */
#us-map .state--active {
  fill: #18519c;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

/* Active hover/focus styling */
#us-map .state--active:hover,
#us-map .state--active:focus {
  fill: #2f80ed;          /* darker on hover */
}
.map-wrapper {
  display: flex;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering (optional) */
  width: 100%;
}

/* Optional: control max size */
#us-map {
  max-width: 1000px;
  width: 100%;
  height: auto;
}
  :root{
    --ui-scale: 1.25;

    --hp-ink:#334147;
    --hp-blue:#0073e6;
    --hp-bg:#f4f4f4;
    --hp-white:#ffffff;

    --border: rgba(16,24,40,0.12);
    --shadow: 0 12px 30px rgba(2,10,30,.12);
    --shadow-soft: 0 10px 24px rgba(2,10,30,.08);

    --radius: calc(16px * var(--ui-scale));
    --container: calc(1200px * var(--ui-scale));
  }

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

  body{
    font-family: Arial, sans-serif;
    background-color: var(--hp-bg);
    color: var(--hp-ink);
    line-height: 1.5;
    font-size: calc(16px * var(--ui-scale));
  }

  a{color:inherit; text-decoration:none}
  img{max-width:100%; height:auto; display:block}

  .container{
    width: min(var(--container), calc(100% - calc(40px * var(--ui-scale))));
    margin: 0 auto;
  }

  header.hp-header{
    background: linear-gradient(to right, #334147, #0073e6);
    color:#fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }

  .hp-header__inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: calc(12px * var(--ui-scale)) 0;
    gap: calc(16px * var(--ui-scale));
  }

  .hp-brand{
    display:flex;
    align-items:center;
    gap: calc(12px * var(--ui-scale));
  }

  .hp-brand img{
    height: calc(50px * var(--ui-scale));
  }

  .hp-brand__name{
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: calc(16px * var(--ui-scale));
  }

  .hp-brand__tag{
    font-weight: 700;
    font-size: calc(12px * var(--ui-scale));
    opacity: .9;
  }

  .nav-links{
    list-style:none;
    display:flex;
    gap: calc(10px * var(--ui-scale));
    margin:0;
    padding:0;
    align-items:center;
  }

  .nav-links a{
    color:#f0f0f0;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: calc(6px * var(--ui-scale));
    transition: color .2s ease, text-decoration-color .2s ease;
  }

  .nav-links a:hover{
    color:#fff;
    text-decoration-color: rgba(255,255,255,.9);
  }

  .hp-nav-toggle{
    display:none;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    padding: calc(10px * var(--ui-scale));
    border-radius: calc(10px * var(--ui-scale));
    cursor:pointer;
  }

  .hp-nav-toggle span{
    display:block;
    width: calc(22px * var(--ui-scale));
    height: 2px;
    background:#fff;
    margin: calc(4px * var(--ui-scale)) 0;
    border-radius: 2px;
  }

  .hero{
    padding: calc(54px * var(--ui-scale)) 0 calc(42px * var(--ui-scale));
    background: linear-gradient(180deg,#fff 0%,#fff 60%,#f4f4f4 100%);
  }

  .hero.has-bg{
    background:url("Pictures/BG.png") center/cover;
    position:relative;
    color:#fff;
  }

  .hero.has-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to right, #334147, #6a9fd4);
    opacity:.65;
    z-index:0;
  }

  .hero *{position:relative; z-index:1}

  .hero__inner{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: calc(22px * var(--ui-scale));
    align-items:start;
  }

  .hero h1{
    font-size: clamp(
      calc(30px * var(--ui-scale)),
      3.1vw,
      calc(48px * var(--ui-scale))
    );
    line-height:1.06;
    margin:0 0 calc(12px * var(--ui-scale));
  }

  .hero__lead{
    font-size: calc(16px * var(--ui-scale));
    max-width:70ch;
    margin:0 0 calc(16px * var(--ui-scale));
    opacity:.95;
  }

  .actions{
    display:flex;
    gap: calc(12px * var(--ui-scale));
    flex-wrap:wrap;
    margin: 0 0 calc(14px * var(--ui-scale));
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: calc(12px * var(--ui-scale)) calc(16px * var(--ui-scale));
    border-radius: calc(12px * var(--ui-scale));
    font-weight:900;
    font-size: calc(14px * var(--ui-scale));
    cursor:pointer;
    position:relative;
    overflow:hidden;
    border: 1px solid transparent;
  }

  .btn::after{
    content:"";
    position:absolute;
    left:50%;
    bottom: calc(6px * var(--ui-scale));
    width:0;
    height: calc(2px * var(--ui-scale));
    background-color: currentColor;
    transform: translateX(-50%);
    transition: width 0.25s ease;
    opacity:0.9;
    pointer-events:none;
  }

  .btn:hover::after{
    width: calc(100% - calc(24px * var(--ui-scale)));
  }

  .btn.primary{
    background: rgba(0,115,230,.60);
    color:#fff;
    box-shadow: 0 calc(14px * var(--ui-scale)) calc(26px * var(--ui-scale)) rgba(0,115,230,.18);
    backdrop-filter: blur(2px);
  }

  .btn.primary:hover{
    background: rgba(0,115,230,.75);
  }

  .btn.ghost{
    background: rgba(255,255,255,.18);
    color:#fff;
  }

  .btn.ghost:hover{
    background: rgba(255,255,255,.26);
  }

  .pills{
    display:flex;
    flex-wrap:wrap;
    gap: calc(10px * var(--ui-scale));
    margin-top: calc(12px * var(--ui-scale));
  }

  .pill{
    display:inline-flex;
    align-items:center;
    white-space: nowrap;
    background: rgba(255,255,255,0.18);
    padding: calc(7px * var(--ui-scale)) calc(10px * var(--ui-scale));
    border-radius: 999px;
    font-weight: 850;
    font-size: calc(13px * var(--ui-scale));
    color:#fff;
    backdrop-filter: blur(2px);
  }

  .section{
    padding: calc(52px * var(--ui-scale)) 0;
    background: var(--hp-bg);
  }

  .section.alt{
    background:#fff;
    border-top:1px solid rgba(51,65,71,.1);
    border-bottom:1px solid rgba(51,65,71,.1);
  }

  .grid{
    display:grid;
    gap: calc(16px * var(--ui-scale));
  }

  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}

  .box{
    background:#fff;
    padding: calc(18px * var(--ui-scale));
    border-radius: var(--radius);
    border: 1px solid rgba(51,65,71,0.15);
    box-shadow: var(--shadow-soft);
  }

  .partnerstrip{
    display:grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: calc(12px * var(--ui-scale));
    align-items:center;
  }

  .partner{
    background:#fff;
    border:1px solid rgba(51,65,71,0.12);
    border-radius: calc(14px * var(--ui-scale));
    padding: calc(12px * var(--ui-scale));
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: calc(72px * var(--ui-scale));
    box-shadow: 0 calc(8px * var(--ui-scale)) calc(18px * var(--ui-scale)) rgba(0,0,0,0.06);
  }

  .partner img{
    max-height: calc(40px * var(--ui-scale));
    width:auto;
    object-fit:contain;
  }

  .gallery{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: calc(12px * var(--ui-scale));
  }

  .gitem{
    border-radius: calc(16px * var(--ui-scale));
    overflow:hidden;
    border:1px solid rgba(51,65,71,0.15);
    background:#fff;
    box-shadow: 0 calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)) rgba(0,0,0,0.08);
    min-height: calc(170px * var(--ui-scale));
  }

  .gitem img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .gitem.tall{
    grid-row: span 2;
    min-height: calc(360px * var(--ui-scale));
  }

  footer.hp-footer{
    background: linear-gradient(to right, #334147, #0073e6);
    color:#fff;
    padding: calc(20px * var(--ui-scale));
  }

  .hp-footer__inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: calc(12px * var(--ui-scale));
    flex-wrap:wrap;
  }

  .hp-footer__social{
    display:flex;
    align-items:center;
    gap: calc(8px * var(--ui-scale));
  }

  .hp-footer__social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .social-icon{
    height: calc(25px * var(--ui-scale));
    width:auto;
    background-color: transparent;
    transition: filter 0.2s ease;
    display:block;
  }

  .social-icon:hover{
    filter: invert(1) brightness(0);
  }

  @media (max-width: 980px){
    .hero__inner{grid-template-columns:1fr}
    .grid-2,.grid-3{grid-template-columns:1fr}
    .nav-links{display:none}
    .hp-nav-toggle{display:block}

    .partnerstrip{ grid-template-columns: repeat(3, minmax(0,1fr)); }
    .gallery{ grid-template-columns: 1fr; }
    .gitem.tall{ grid-row: auto; min-height: calc(260px * var(--ui-scale)); }

    .hp-footer__inner{
      justify-content:center;
      text-align:center;
    }
  }