:root{--kp-black:#000;--kp-white:#fff;--kp-gray:#f4f4f4;--kp-border:#111;}
html,body{background:#fff;color:#000;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
a{color:#000;text-decoration:none} a:hover{text-decoration:underline}
.site-header{padding:1.25rem 0 .75rem;border-bottom:1px solid #111;background:#fff;position:sticky;top:0;z-index:1030}
.brand-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.brand-social{display:flex;justify-content:center;gap:.6rem;align-items:center}
.brand-social img{width:32px;height:32px;object-fit:contain}
.brand-logo img{max-width:460px;width:100%;height:auto}
.kp-nav .nav-link{font-size:larger;font-weight:bolder; letter-spacing:.04em;padding:.35rem .8rem;color:#000}
.kp-nav .nav-link.active,.kp-nav .nav-link:hover{text-decoration:underline}
.kp-subnav .dropdown-menu{border-radius:0;border:1px solid #111}
main{padding:2rem 0 3rem}
/* original hero-carousel
.hero-carousel img {
  width:100%;
  height:clamp(320px,62vw,820px);
  object-fit:cover;
  background:#000
}
*/
.carousel-caption{background:rgba(0,0,0,.62);padding:1rem 1rem}
.section-title{font-size:1.8rem;margin:0 0 1rem;letter-spacing:.03em;text-align:center;}
.lead-copy{font-size:1.5rem;line-height:1.8}
.poster-grid,.logo-grid,.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.poster-card,.logo-card,.gallery-card{border:none;background:#fff;padding:.5rem;text-align:center}
.poster-card img,.gallery-card img{width:100%;height:240px;object-fit:contain}
.logo-card img{width:100%;height:110px;object-fit:contain;background:#fff}
.app-card img{width:100%;height:220px;object-fit:contain;background:#fff;padding:1rem}
.kp-banner{width:100%;height:auto;border:1px solid #111;background:#fff}
.kp-page-hero{margin-bottom:1.5rem}
.kp-page-hero img{width:100%;max-height:420px;object-fit:cover;border:1px solid #111}
.content-block{margin-bottom:2rem}
.content-block h1,.content-block h2,.content-block h3{margin-bottom:.75rem}
.store-badge{height:40px;width:auto}
.screenshot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.screenshot-row img{width:100%;height:420px;object-fit:contain;border:1px solid #111;background:#fafafa}
footer{border-top:1px solid #111;padding:1.25rem 0 2rem;font-size:.95rem}
.small-muted{color:#444;font-size:.92rem}
.contact-card{border:1px solid #111;padding:1.5rem;background:#fff}
@media (max-width: 767px){
/*  .hero-carousel img{height:340px} */
  .poster-card img,.gallery-card img{height:220px}
  .kp-nav .nav-link{padding:.45rem .55rem}
}

/* 03-14-2026 CRS */
/* paragraphs */
p {
    font-size: larger;
}

/* Headings */
h1, h2, h3, h4, h5 {
    color: #000000;
    font-weight: 600;
    margin-top: 1.5rem;
}

.dropdown-item {
  font-weight: bold;
}

/* --- Force square images in carousels and galleries --- */
/*.hero-carousel img, */
.poster-card img,
.gallery-card img,
.logo-card img,
.app-card img,
.screenshot-row img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain; /* changed by craig from cover to contain */
    object-position: center;
    text-align: center;
}

/* modified by CRS */
.hero-carousel img {
    aspect-ratio: 1 / 1;
    width: 300px;
    height: auto;
    object-fit: contain;
    object-position: center;
    text-align: center;
    background:#000
}

/* Add this to your custom CSS file */
.carousel-inner .item img {
    margin:0 auto;
}

.carousel-item {
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
}

.image-center {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  height: 100% /* Define a height for the container, e.g., 50vh */
}

/* for publishing include */
html, body {
    height: 100%;
    margin: 0;
    /* Hide scrollbars on the main page if needed */
/*    overflow: hidden; */
}

.iframe-container {
    height: 100vh; /* 100% of the viewport height */
    width: 100%;
}
iframe {
    height: 100vh;
    width: 100vh;
    display: block;
}