html,
body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


body {
    font-family: "Poppins";
    font-size: 1.25em;
}

.fa {
    padding: 10px;
    font-size: 18px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    background-color: white;
    color: black;
}

.fa:hover {
    opacity: 0.7;
}

.footer {
    background-color: black;
    color: white;
    font-size: .8em;
    margin: 40px auto;
    width: 80%;
    /* leaves 10% margin on each side */
}

.footer .col-sm-4 {
    border-right: 1px solid #ccc;
}

.footer .col-sm-4:last-child {
    border-right: none;
    /* remove line after last column */
}

.footer-icon {
    text-decoration: none;
    color: #FFF;
    font-size: 30px;
}

.navbar-container {
    padding-left: 10%;
    padding-right: 10%;
}


/* FINAL — force transparent header in all states */

.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

header nav.navbar.navbar-overlay,
header nav.navbar.navbar-overlay:hover,
header nav.navbar.navbar-overlay.is-top,
header nav.navbar.navbar-overlay.is-open,
header nav.navbar.navbar-overlay.is-scrolling-up,
header nav.navbar.navbar-overlay.is-engaged {
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Hide animation */
.navbar-overlay.header-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}


header nav.navbar.navbar-overlay::before,
header nav.navbar.navbar-overlay::after {
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
}

header nav.navbar.navbar-overlay .navbar-collapse,
header nav.navbar.navbar-overlay .navbar-collapse.show,
header nav.navbar.navbar-overlay .collapse.show {
    background: transparent !important;
    background-image: none !important;
}

/* keep links readable over hero */
header nav.navbar.navbar-overlay .nav-link,
header nav.navbar.navbar-overlay .navbar-brand,
header nav.navbar.navbar-overlay #searchBtn {
    color: #fff !important;
}



/* Solid background when scrolled away from the very top */
header nav.navbar.navbar-overlay.has-solid,
header nav.navbar.navbar-overlay.has-solid:hover,
header nav.navbar.navbar-overlay.has-solid.is-top,
header nav.navbar.navbar-overlay.has-solid.is-open,
header nav.navbar.navbar-overlay.has-solid.is-scrolling-up,
header nav.navbar.navbar-overlay.has-solid.is-engaged {
    background: #000 !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Links remain white on top of banner */
/* Dropdown still opens on hover (unchanged) */
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    border-radius: 0 !important;
    /* square edges */
    border: 2px solid #FFFFFF !important;
    /* black border */
    background-color: #000 !important;
    /* black background */

}

/* Dropdown items: white text, no hover effect */
.dropdown-menu .dropdown-item {
    color: #fff !important;
    background-color: transparent !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: #fff !important;
    background-color: transparent !important;
    /* no hover background */
}

/* Keep dropdown menu readable against translucent bg */
/* Remove the form's left margin when collapsed */
.navbar form[role="search"]:not(.search-active) {
    margin-left: 0 !important;
    /* overrides the .ms-3 utility */
}

/* Only add spacing when expanded */
.navbar form.search-active {
    margin-left: 1rem;
    /* same as ms-3; adjust if you want tighter */
}

/* Also be sure the input itself has no footprint when collapsed */
.navbar form[role="search"]:not(.search-active) .search-box {
    width: 0;
    margin-right: 0;
    /* overrides .me-2 */
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
}




/* Search box behavior unchanged */
.search-box {
    width: 0;
    margin-right: 0;
    border-width: 0;
    opacity: 0;
    transition: width .3s ease, opacity .2s ease;
    border-radius: 20px;
}

.search-active .search-box {
    width: 200px;
    opacity: 1;
    padding-left: .75rem;
}

/* Optional: ensure toggler is visible on light/dark banners */
.navbar-toggler {
    background-color: rgba(255, 255, 255, .9);
}

.banner {
    position: relative !important;
    height: clamp(360px, 68vh, 820px);
    /*height: 350px; /* or any height you want */
    padding-bottom: 42px;
    /* make room for the breadcrumb strip */
    overflow: hidden !important;
    z-index: 0;
    /*Overflow issues*/
    width: 100%;
    overflow-x: clip;
}

.banner-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    /*height: 100% !important;*/
    height: 100%;
    object-fit: cover !important;
    z-index: 0 !important;
    max-width: 100%;
}

/* overlay container centers content responsively */
.banner-content {
    position: relative !important;
    /*oct 24th change absolute;*/
    z-index: 2 !important;
    inset: 0;
    /* top/right/bottom/left: 0 */
    display: flex;
    align-items: center;
    /* vertical centering */
    justify-content: center;
    /* horizontal centering (mobile/tablet) */
    padding: 2rem;
    /* safe edge padding */
}

/* content card */
.banner-card {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 2rem 3rem;
    border-radius: 0;
    max-width: min(80ch, 92vw);
}

/* tighten on small phones */
@media (max-width: 480px) {
    .banner-card {
        padding: 1.25rem 1.5rem;
    }

    .banner-title {
        font-size: 1.6rem;
        line-height: 1.2;
    }
}

.navbar-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
    .banner img, .banner video {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }
*/

/* ===== Shared content track for perfect alignment ===== */
:root {
    --content-max: 1200px;
    /* set to your desired hero/header content width */
    --gutter: 16px;
    /* side breathing room */
}

.site-grid {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content-max)) [content-end] minmax(var(--gutter), 1fr) [full-end];
}

.col-content {
    grid-column: content-start / content-end;
}

/* Header: stop fighting with fixed 10% paddings, use the grid instead */
.navbar-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero: place the overlay content on the same track */
.banner.site-grid .banner-content {
    padding: 64px 0;
}

/* vertical spacing stays nice */
.banner-content.col-content {
    justify-content: flex-start !important;
}

/* align left on lg too */

/* Remove the manual 8vw nudge so left edges truly match */
@media (min-width: 992px) {
    .banner-card {
        margin-left: 0 !important;
    }

    /* Want the header to feel a tad wider? bump content max only on large screens */
    :root {
        --content-max: 1320px;
    }

    /* optional; keep 1200px if you want exact hero lockstep */
}


/* states */
.navbar-overlay.is-top {
    background: transparent;
}

/* top of page = transparent */
.navbar-overlay.is-top:hover,
.navbar-overlay.is-top.is-engaged {
    background: rgba(0, 0, 0, .38);
    /* same tint you use elsewhere */
}


.navbar-overlay.is-scrolling-up {
    background: black
}

.navbar-overlay.is-open {
    background: rgba(0, 0, 0, .55);
}

/*Burger Open*/

/* keep look on hover while in these states */
.navbar-overlay.is-scrolling-up:hover,
.navbar-overlay.is-open:hover {
    background: inherit;
}

/* Keep dark bg whenever the user is interacting */
.navbar-overlay.is-engaged,
.navbar-overlay.is-scrolling-up.is-engaged {
    background: black;
}

/* Optional: hovering shouldn’t clear kept bg */
.navbar-overlay.is-scrolling-up:hover,
.navbar-overlay.is-open:hover,
.navbar-overlay.is-engaged:hover {
    background: black;
}

.banner {
    position: relative;
    height: 100vh;
    /* adjust as needed */
    overflow: hidden;
}

.banner img,
.banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Transparent box in the middle */
.banner-overlay {
    position: absolute;
    top: 20%;
    left: 26%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    /* black with 50% transparency */
    padding: 2rem 3rem;
    border-radius: 0px;
    color: #fff;
    max-width: 80%;
}

/* Optional text styles */
.banner-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.banner-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Container for the two buttons */
.cta-row {
    gap: 5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Button-looking div */
.cta-btn {
    display: inline-flex;
    gap: .75rem;
    background: #000;
    color: #fff;
    border: 2px solid #000;
    /* solid outline; tweak if needed */
    padding: .75rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    user-select: none;
    text-decoration: none;
    /* in case used as link */
}

/* Arrow icon */
.cta-icon {
    width: 20px;
    height: 20px;
}

/* Hover/Focus states */
.cta-btn:hover,
.cta-btn:focus {
    transform: translateY(-1px);
    background: #111;
    border-color: #fff;
    /* subtle contrast */
    outline: none;
}

/* Active press */
.cta-btn:active {
    transform: translateY(0);
}



/* Ensure the overlayed/dark navbar shows the hamburger icon */
.navbar-overlay.navbar-dark .navbar-toggler {
    border: 0;
}

/* Mobile-only dropdown style for a dark navbar */
@media (max-width: 991.98px) {

    /* < lg */
    .navbar.navbar-dark .dropdown-menu {
        position: static;
        /* stack nicely in the flow */
        float: none;
        /*background: rgba(0,0,0,.9);/* dark bg to match navbar */
        background-color: #FFF;
        border: 0;
        box-shadow: none;
        padding: .25rem 0;
    }

    .navbar.navbar-dark .dropdown-item {
        color: #fff;
        /* readable text */
        background: transparent;
    }

    .navbar.navbar-dark .dropdown-item:hover,
    .navbar.navbar-dark .dropdown-item:focus {
        background: rgba(255, 255, 255, .1);
        color: #000;
    }
}

@media (min-width: 992px) {
    .navbar .dropdown:hover>.dropdown-menu {
        display: block;
    }
}

.footer-link {
    color: #fff !important;
    /* white text */
    text-decoration: none !important;
    /* remove underline by default */
}

.footer-link:hover {
    text-decoration: underline;
    /* show underline on hover */
}

div.mycontainer {
    width: 100%;
    overflow: auto;
    align-content: center;
}

div.mycontainer div {
    padding: 20px;
    width: 40%;
    float: left;
}

.HomeContentDiv {
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/*Container*/

.page-container {
    width: 80%;
    margin: 0 auto !important;
}

.full-container {
    width: 100%;
}

.page-margin-container {
    width: 100%;
    margin: 4% auto !important;
}

/*End Container*/

/* Text  */
.hr-divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 50px 0;
    opacity: 0.8;
    align-items: center;
}

.divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 50px 0;
    opacity: 0
}

.p-normal {
    font-size: 1.3rem;
}

.heading-small-bold {
    font-weight: bold;
}



.text-base-bold {
    font-size: 45px;
    font-weight: 700;
    font-style: normal;
    color: rgb(0, 0, 0);
    font-kerning: normal;
    text-decoration: none;
    line-height: 1.1;
}

.text-base {
    font-size: 60px;
    font-style: normal;
    color: rgb(255, 255, 255);
    font-kerning: normal;
    text-decoration: none;
    line-height: 1.5;
}

.matrix-text {
    font-size: 14px;
    line-height: 29px;
    letter-spacing: 0em;
    text-transform: none;
    list-style-type: none;
    font-weight: 400;
    font-style: normal;
    font-kerning: none;
    text-decoration: none;
}


.header-normal-text {
    font-size: 14px;
    line-height: 29px;
    letter-spacing: 0em;
    text-transform: none;
    list-style-type: none;
    font-weight: 400;
    font-style: normal;
    font-kerning: none;
    text-decoration: none;
}

.matrix-text-normal {
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    font-kerning: normal;
    text-decoration: none;
}

.nav-link.active {
    background-color: #5e6f80 !important;
}

.overlay-blur {
    backdrop-filter: blur(0px);
}



/* Buttons */
.btn-black {
    background-color: black;
    color: white;
    border: none;
    padding: 1rem;
}

.btn-gray {
    background-color: rgb(110, 110, 110);
    color: white;
    border: none;
    padding: 1rem;
}

.my-matrix-login-btn {
    justify-content: center;
    text-align: center;
    border: none;
    color: white;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.397);
}

/* End Buttons */


.square-list {
    list-style-type: square;
    padding-left: 1.5rem;
}

.matrix-arrow-wrap {
    margin-top: -16px;
}

.matrix-arrow-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 15px solid black;
    margin-bottom: 14px;
}

@media (prefers-color-scheme: dark) {
    .matrix-straight-line {
        background: #fff;
    }

    .matrix-arrow-down {
        border-top-color: #fff;
    }
}

.matrix-straight-line {
    width: 3px;
    height: 80px;
    background-color: black;
}

.custom-filter {
    background-color: #000;
    color: #fff;
    border: none;
    width: 100%;
    height: 55px;
    border-radius: 0;
    text-align: start;

}

.custom-button {
    margin: 5px;
    background-color: #e9ecef;
    border-radius: 0;
    height: 50px;
    width: 137px;

}

.selected {
    background-color: #d3d3d3;
    border-color: #adb5bd;
}

.form-control {
    height: 55px;
    border-radius: 0;
}




.tab-card {
    max-width: 800px;
    /*margin: 2rem auto;*/
}

.nav-tabs .nav-link {
    border-radius: 0 !important;
    color: #FFFFFF;
    background-color: #000000 !important;
    ;
    border: 2px solid #FFFFFF !important;
    ;
    text-align: center;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #D1D3D4 !important;
    ;
    color: #000000 !important;
    ;
    border-radius: 0 !important;
    border-color: #FFFFFF !important;
}

.tab-content {
    background: #fff;
    color: #FFF;
}

.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}










.feature {
    --bg: #333333;
    /* change once for both blocks */
    color: #ffffff;
    background: var(--bg);
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    max-width: 980px;
    /* keeps rows readable */
    margin-block: 1rem;
}

/* Right-align the first block, left-align the second */
.feature--right {
    margin-left: 10em;
}

/* pushes to right side of page */
.feature--left {
    margin-right: 20em;
}

/* pushes to left side of page */

/* Image: fixed width 330px (as requested) */
.feature__img {
    width: 100px;
    flex: 0 0 330px;
    /* fixed column */
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

/* Text fills remaining space */
.feature__text {
    flex: 1 1 auto;
}

/* Responsive: stack on small screens */
@media (max-width: 640px) {
    .feature {
        flex-direction: column;
        text-align: left;
    }

    .feature--right,
    .feature--left {
        margin-left: auto;
        margin-right: auto;
        /* center on small screens */
    }

    .feature__img {
        width: 100%;
        flex-basis: auto;
    }
}

.contact-wrap {
    background: #f2f2f2;
}

/* soft gray like screenshot */
.contact-title {
    text-decoration: underline;
}

/* underline “Contact Details” */
.form-control {
    background-color: #fff;
}

/* white fields */


.square {
    width: 100%;
    padding-top: 100%;
    /* makes it a square */
    background-color: #0d6efd;
    /* Bootstrap blue */
    text-align: center;
    border: 2px solid #fff;
}



.country-selector .country-name {
    white-space: nowrap;
}


.custom-gap {
    gap: 0px;
}

.card-title-bottom {
    background-color: black;
    color: white;
    padding: 8px;
    margin: 0;
    text-align: center;
}

.card-fixed {
    width: 360px;
    /* fixed width */
}

.card-text {
    font-size: 12px;
}

.card-footer {
    font-size: 12px;
}





.contact-tabs {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.contact-tabs .tab {
    flex: 1 1 0;
    text-align: center;
    padding: .5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    text-decoration: none;
    color: #000;
    display: block;
}

.contact-tabs .tab.active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}


/* Tabs */

/* Card container */
.contact-card {
    background: #f5f6f8;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 16px
}

/* Heading */
.contact-heading {
    font-size: 16px;
    margin: 6px 0 12px;
    text-align: center;
    color: #333
}

/* Base form styles (use Pardot’s existing classes) */
form.form {
    --gap: 12px
}

form.form p {
    margin: 0 0 var(--gap)
}

form.form p label.field-label {
    display: block;
    font: 600 12px/1.2 Helvetica, Arial, sans-serif;
    color: #000;
    margin-bottom: 6px
}

form.form input.text,
form.form select.select,
form.form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    background: #fff;
    outline: none
}

form.form textarea {
    min-height: 140px;
    resize: vertical
}

/* Two-column responsive grid */
#pardot-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap)
}

/* Make specific rows span both columns */
#pardot-form .Message,
/* if you add a 'Message' class wrapper later */
#pardot-form .pd-captcha,
#pardot-form .submit,
#pardot-form .Time_Slot {
    grid-column: 1 / -1
}

/* Align submit button to the right like the mock */
#pardot-form p.submit {
    text-align: right;
    margin-top: 2px
}

#pardot-form p.submit input[type="submit"] {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 24px;
    background: #6b7380;
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

#pardot-form p.submit input[type="submit"]:hover {
    filter: brightness(0.95)
}

/* Small legal text under the message box (use a <small> or p with class) */
form.form .legal-note {
    font-size: 11px;
    color: #6b6f75;
    margin: -4px 0 2px
}

/* Checkbox/radio lists one per line */
form.form .pd-checkbox .value span,
form.form .pd-radio .value span {
    display: block
}

/* Required asterisk */
form.form p.required label.field-label::after {
    content: " *";
    color: #d33;
    margin-left: 2px
}

/* Error slot (Pardot fills these divs) */
[id^="error_for_"] {
    grid-column: 1/-1;
    color: #b00020;
    font-size: 12px
}

/* Mobile: stack to one column */
@media (max-width: 768px) {
    #pardot-form {
        grid-template-columns: 1fr
    }
}


.search-suggest-dropdown {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    margin-top: 4px;
    width: min(580px, 90vw);
    overflow: hidden;
}

.search-suggest-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.search-suggest-item:hover,
.search-suggest-item[aria-selected="true"] {
    background: #f6f6f6;
}

.search-suggest-type {
    font-size: .72rem;
    opacity: .7;
    min-width: 54px;
    text-transform: uppercase;
}

.search-suggest-title {
    font-weight: 600;
}

.search-suggest-blurb {
    font-size: .85rem;
    opacity: .8;
}

#site-search-dropdown {
    position: fixed;
    /* key change */
    z-index: 2147483647;
    /* safely above everything */
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    width: 580px;
    /* will be overridden by JS */
    max-width: 90vw;
    overflow: hidden;
}

.full-bleed {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    /* span viewport */
    max-width: 100vw;
    /* prevent wider than viewport */
    box-sizing: border-box;
    /* keep padding inside the viewport */
    /*
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  width:100%;*/
}




.img-card {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
}

.img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* transparent overlay that only centers content */
.img-card .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    background-color: #000;
    /* no background here at all */
}

.img-card:hover .overlay,
.img-card:focus-visible .overlay {
    opacity: 1;
}

.img-card.always .overlay {
    opacity: 1;
}

/* first tile, if needed */

/* readable text with no background */
.img-card .label {
    font-weight: 700;
    color: #fff;
    /* base color */
    line-height: 1.15;
    /* outline + glow for contrast on any image 
    -webkit-text-stroke: 1px rgba(0,0,0,.65);
    text-shadow:
      0 0 2px rgba(0,0,0,.6),
      0 2px 6px rgba(0,0,0,.55),
      0 0 10px rgba(0,0,0,.5);*/
}

.img-card .overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0px) saturate(100%);
    /* fully transparent; effect is from backdrop-filter, not color */
}

/* Minimal helper for smooth hover transition */
.hover-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(33, 37, 41, 0.75);
    color: #fff;
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
}
/*
.card-hover:hover .hover-overlay {
    opacity: 1;
}

.card-hover:hover img {
    transform: scale(1.05);
    cursor: pointer;
}

.card-hover img {
    transition: transform 0.4s ease;
}
*/
.img-wrap {
  position: relative;
  height: 352px;
  width: 416px;
}

@media (max-width: 576px){
    .img-wrap {
    position: relative;
    height: 250px;
    width: 100%;
    }
}

.img-wrap:hover .hover-overlay {
  visibility: visible;
  opacity: 1;
}

.img-description {
  transition: .2s;
  transform: translateY(1em);
}

.img-wrap:hover .img-description {
  transform: translateY(0);
}

/*Collage*/
.mosaic {
    position: relative;
    /*width: 1100px;
    height: 350px;*/
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    height: auto;
}

@media (min-width: 1100px) {
    .mosaic {
        width: 1100px;
        height: 350px;
    }
}

.mosaic-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 50;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.mosaic-overlay.show {
    display: flex;
    opacity: 1;
}

/* Entire image visible */
.mosaic-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* <-- fit whole image */
    transform: scale(0.98);
    /* start slightly smaller */
    transition: transform 300ms ease;
    /* smooth zoom */
    user-select: none;
    pointer-events: none;
}

.mosaic-overlay.show img {
    transform: scale(1);
    /* gentle zoom to 1.0 (no cropping) */
}

.tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* local tiles keep their layout look */
    cursor: pointer;
}




/* -------------------------------- 

Breadcrumbs
-------------------------------- */
.cd-breadcrumb {
    /*New Block*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 1.5rem auto;
    width: 100%;
    max-width: 100%;
    font-size: 12px;
}

.cd-breadcrumb::after {
    clear: both;
    content: none;
    display: table;
}

.cd-breadcrumb li {
    float: left;
    /* kill the float */
    display: inline-flex;
    align-items: center;
    margin: 0;

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

.cd-breadcrumb li::after {
    /* this is the separator between items */
    display: inline-block;
    content: '\00bb' !important;
    ;
    color: #FFFFFF;
}

.cd-breadcrumb li:last-of-type::after {
    /* hide separator after the last item */
    display: none;
}

.cd-breadcrumb li>* {
    /* single step */
    display: inline-block;
    color: #FFFFFF;
}

@media (max-width: 576px) {
    .banner-breadcrumbs {
        position: static;
        /* flow below hero */
        padding: .5rem 1rem;
        background: #111;
        /* solid bar */
        color: #fff;
        width: 100%;
        overflow-x: hidden;
    }
}

/* make sure the section after the hero doesn't sit on top of it */
.banner {
    padding-bottom: 42px;
}

/* room for the breadcrumb bar */
.cd-breadcrumb {
    font-size: 13px;
}


.banner-breadcrumbs {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 40px;
    background: rgba(0, 0, 0, .40);
    z-index: 3 !important;
    /* above media & content */
}

/* Use same grid track as hero/logo */
.banner-breadcrumbs__row {
    display: flex;
    align-items: center;
    padding-block: 6px;
    width: 100%;
    overflow-x: hidden;
}

/* Tidy list and hug the left content edge */
.banner-breadcrumbs .cd-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: 14px;
}

.banner-breadcrumbs .cd-breadcrumb li {
    float: none !important;
    /* kill legacy float */
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.banner-breadcrumbs .cd-breadcrumb li>* {
    color: #fff;
}

/* Mobile: let the bar flow below hero full width */
@media (max-width: 576px) {
    .banner-breadcrumbs {
        position: static !important;
        background: #111;
    }

    .banner {
        padding-bottom: 0 !important;
    }

    /* no reserved gap needed */
}

.no-touch .cd-breadcrumb a:hover {
    /* steps already visited */
    color: #ffffff;
}

.current-breadcrumb {
    /* selected step */
    color: #ffffff;
    font-size: 50;
}


@media only screen and (min-width: 768px) {
    .cd-breadcrumb li {
        margin: 0;
    }

    .cd-breadcrumb li::after {
        margin: 0 1em;
    }

}

/*** Contact Page Icon Area
        /* Make the first (outer) div a 500px-tall flexbox that centers its content both ways */
.section-tiles {
    min-height: 500px;
    display: flex;
    align-items: center;
    /* vertical middle */
    justify-content: center;
    /* horizontal middle */
}

/* 250x250 tiles */
.feature-box {
    width: 250px;
    height: 250px;
    background: #fff;
    /* keep tiles white against light grey band */
    box-sizing: border-box;
}

/* Dark grey border (darker than .border-secondary) */
.border-dark-gray {}

/* Make any section with .bleed span full viewport width regardless of parent */
.bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /*width: 100vw;
  max-width: 100vw;*/
    width: 100%;
    max-width: 100%;

    /* optional: keep accidental scrollbars away */
    overflow-x: clip;
}

/* Zero out Bootstrap gutters so images hug the edges */
.bleed .row {
    --bs-gutter-x: 0;
}

/* Make images fill their column nicely */
.bleed .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*class for path to automation text*/
.path2auto-text {
    font-size: 1.25rem;
    font-weight: 600;
    padding-top: 1rem !important;
}

@media (max-width: 500px) {
    .path2auto-text {
        font-size: 1rem;
        font-weight: 600;
        padding-top: 0.5rem !important;
    }
}



/* -------- Mobile-only tweaks (≤991.98px) -------- */
@media (max-width: 991.98px) {

    /* Navbar: make tap targets comfy without changing desktop paddings */
    .navbar .nav-link,
    .dropdown-item {
        min-height: 44px;
    }

    /* Ensure the overlay nav stays above hero media on phones */
    .navbar-overlay {
        z-index: 1030;
    }

    /* Wrap around the input so the dropdown sticks to it */
    form[role="search"] .search-anchor {
        position: relative;
        flex: 1 1 auto;
        /* keep your d-flex layout intact */
        min-width: 200px;
        /* prevents super-narrow layouts on tiny screens */
    }

    /* make sure the input fills the anchor width */
    #site-search {
        width: 100%;
    }

    /* dropdown sits right under the input */
    .search-suggest-dropdown {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + .25rem);
        z-index: 1050;
        max-height: 60vh;
        overflow: auto;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .125);
        border-radius: .5rem;
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    }

    /* Page chrome: reduce side gutters slightly on narrow phones */
    .page-container,
    .page-margin-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Hero media: keep aspect clean and avoid overflows */
    .banner {
        position: relative;
        overflow: hidden;
    }

    .banner-media {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 60vh;
        /* avoids super-tall heroes on phones */
        object-fit: cover;
        /* image/video safely crops */
    }

    /* If you rely on that placeholder black bar (when no hero), shrink it */
    body .banner~div[style*="background:black"][style*="height:80px"] {
        height: 56px !important;
    }

    /* Body content that comes from DB: keep images inside the viewport */
    .page-container img,
    .page-margin-container img,
    .banner-content img {
        max-width: 100%;
        height: auto;
    }

    /* Footer columns stack already via col-sm-4; add spacing for touch */
    .footer a,
    .footer .footer-icon {
        min-height: 40px;
        line-height: 40px;
        display: inline-block;
    }
}

/* Respect reduced motion system setting (no visual change, just nicer UX) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 991.98px) {
    .banner::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .35));
        z-index: 0;
    }
}


/* --- Mobile guardrails for any DB/content HTML --- 
.content, .page-container, main {*/
.content,
.page-container {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Media-safe elements */
.content img,
.content video,
.content iframe {
    max-width: 100% !important;
    height: auto !important;
}

.content img.fact-icon {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    /* keep aspect without distortion */
    flex: 0 0 80px;
    /* keeps them from stretching in flex rows */
}


/* Kill fixed widths leaking from inline styles/attributes */
.content [style*="width:"],
.content [width],
.content [style*="max-width:"] {
    max-width: 100% !important;
    width: auto !important;
}

/* Tables: scroll instead of squish */
.content table {
    width: 100% !important;
}

.content .table-responsive,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Utility: stack any two-column layout on small screens */
@media (max-width: 576px) {
    .stack-sm {
        display: block !important;
    }

    .stack-sm>* {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Responsive type so giant headings don’t overflow */
h1,
.display-1 {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
}

h2,
.display-2 {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}

p,
li,
.lead {
    font-size: clamp(1rem, 2.7vw, 1.125rem);
}






@media (max-width: 420px) {

    .hero h1,
    .hero .display-1 {
        font-size: clamp(1.4rem, 7vw, 1.9rem);
        line-height: 1.2;
    }

    .hero p.lead {
        font-size: clamp(1rem, 4vw, 1.1rem);
    }
}

.hero {
    min-height: 40vh;
    height: auto !important;
}

.content img {
    max-width: 100% !important;
    height: auto !important;
}

.content [style*="width:"],
[width] {
    max-width: 100% !important;
    width: auto !important;
}

@media (max-width: 480px) {
    .stories-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .stories-list li {
        margin-bottom: .75rem;
    }
}

.footer .social a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.footer address,
.footer .contact {
    font-style: normal;
    line-height: 1.4;
}

@media (max-width: 576px) {
    section {
        padding-block: 1.25rem;
    }
}




/* Desktop/Tablet (≥576px): keep the vertical divider between columns */
@media (min-width: 576px) {
    .footer .col-sm-4 {
        border-right: 1px solid #ccc;
    }

    .footer .col-sm-4:last-child {
        border-right: none;
    }
}

/* Mobile (<576px): switch to horizontal separators between stacked blocks */
@media (max-width: 575.98px) {

    /* let the footer span full width on phones */
    .footer {
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* kill vertical borders; add a top divider between sections */
    .footer .col-sm-4 {
        border-right: 0 !important;
        border-top: 1px solid #ccc;
        padding-top: 1rem;
        margin-top: 1rem;
    }

    .footer .col-sm-4:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
}




/* Keep your button-in-link markup, just ensure it behaves Home */
a>.btn-black,
a>.btn-gray {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* FIRST band left box: keep 450×350 on desktop; relax on phones so it doesn't overflow */
@media (max-width: 576px) {
    .our-story-box {
        width: 100% !important;
        height: auto !important;
    }
}

/* Three image blocks: keep a fixed HEIGHT but show the FULL image (no crop) */
.card-fixed-305 {
    height: 305px;
}

/* container height */
.card-fixed-305>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* show entire image */
    background: #000;
    /* letterbox fill */
    display: block;
}

/* Optional: tighten padding on small screens so text boxes don’t feel cramped */
@media (max-width: 576px) {
    .p-hero {
        padding: 20px !important;
    }
}



/* Make the content container full width on phones */
@media (max-width: 576px) {
    .page-container {
        width: 100% !important;
    }
}

/* Overlay card padding + type on small screens */
.overlay-slab {
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

@media (max-width: 576px) {
    .overlay-slab {
        padding: 16px !important;
    }

    /* was p-5 (48px) */
    .overlay-slab .heading-small-bold {
        font-size: clamp(1.25rem, 5.2vw, 1.75rem);
        line-height: 1.15;
        margin-bottom: .25rem;
    }

    .overlay-slab .p-normal {
        font-size: clamp(1rem, 3.8vw, 1.125rem);
        margin-bottom: .75rem;
    }

    .overlay-slab .btn-black {
        padding: .6rem 1rem;
    }
}




/* Base hero tweaks */
.banner {
    position: relative;
    min-height: 70vh;
    /* adjust if you want a shorter hero */
    padding-bottom: 40px;
    /* make room for the breadcrumb strip */
}

.banner-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-content {
    position: relative;
    z-index: 2;
    /* keep content above media & breadcrumb bar */
    display: flex;
}

/* Mobile: keep natural spacing */
@media (max-width: 991.98px) {
    .banner-content {
        align-items: flex-end;
        padding: 2rem 1rem;
    }
}

/* Desktop: push content up */
@media (min-width: 992px) {
    .banner {
        display: grid;
    }

    .banner-content {
        align-self: start;
        /* top-align the content */
        padding-top: clamp(1.5rem, 5vh, 4rem);
        /* fine-tune how high it sits */
    }

    /* Optional extra nudge upward—use one of these not both */
    .banner-card {
        margin-top: 40px;
        /* or: transform: translateY(-60px);  more aggressive nudge */
    }
}







@media (max-width: 576px) {
    .banner {
        height: 85vh !important;
        /* was effectively taller than media */
        padding-bottom: 42px !important;
        /* room for the breadcrumb strip */
        background: #000;
        /* safety, in case media loads late */
    }

    .banner-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* fill the banner */
        max-height: none !important;
        /* override earlier 60vh cap */
        object-fit: cover !important;
        object-position: 50% 80% !important;
        /* push framing lower */
    }
}













@media (max-width: 576px) {
    .banner-breadcrumbs {
        position: static !important;
        /* sits below hero */
        background: #111 !important;
        /* solid bar */
        padding: 16px 16px !important;
        /* more vertical space */
        min-height: 64px !important;
        /* taller than 40px */
    }

    .banner-breadcrumbs .cd-breadcrumb {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        /* allow 2 lines */
        gap: .6rem !important;
        line-height: 1.3 !important;
        font-size: 14px !important;
        /* bump size slightly */
    }

    .banner-breadcrumbs .cd-breadcrumb li {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* make links feel tappable (“pills”) */
    .banner-breadcrumbs .cd-breadcrumb a {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        color: #fff !important;
        text-decoration: none;
    }

    /* separators: add a little breathing room */
    .banner-breadcrumbs .cd-breadcrumb li::after {
        margin: 0 .5rem !important;
    }

    /* emphasize current page */
    .banner-breadcrumbs .cd-breadcrumb .current-breadcrumb {
        font-weight: 700;
    }
}




@media (max-width: 576px) {
    .footer .footer-logo {
        display: block;
        /* avoids inline gaps */
        padding-Top: 16px;
        /*adjust to taste: 16–24px */

    }
}


@media (max-width: 576px) {
    .w-100 br {
        display: none;
    }
}





/*ipad Pro show only on touchscreen enabled devices*/
/*@media (hover: hover) and (pointer: fine) {*/
@media not all and (hover: none) {
    .d-touch-block {
        display: none !important;
    }
}

/*@media (any-hover: none) or (any-pointer: coarse) {*/
@media (max-width: 576px), (max-height: 576px) {
    .d-touch-block {
        display: block !important;
    }
}

/*Black Line Issue*/
@media (max-width: 576px) {
    .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .navbar-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.banner,
.banner-content {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}

@media (max-width: 1080px) {
    .banner .navbar-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* override the 10% */
    .banner .col-content {
        padding-left: 0;
        padding-right: 0;
    }

    /* if col-content adds padding */
}





/* iPad/phone: kill the 10% padding that causes overflow */
@media (max-width: 1080px) {
    .navbar-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
}


/* Hero safety rails */
.banner,
.site-grid,
.banner-content,
.banner-breadcrumbs {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

.banner-media {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Bootstrap rows can also overflow on mobile due to negative margins */
@media (max-width: 576px) {
    .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
}


/* On touch/small viewports, stop using the 3-column grid to avoid rounding overflow */
@media (max-width: 1080px) {
    .site-grid {
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    /* When .site-grid is block, make sure these don't reintroduce width */
    .col-content,
    .banner-content,
    .banner-breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
    }
}



/* === iPad / tablet hero tuning (portrait & landscape) === */
@media (min-width: 768px) and (max-width: 1080px) {

    /* keep content on the left track and prevent overflow */
    .banner-content {
        justify-content: flex-start;
        padding: 24px 16px;
    }

    /* right-size the overlay card */
    .banner-card {
        max-width: 640px;
        /* was effectively wider */
        padding: 20px 22px;
        /* less padding so text fits */
        background: rgba(0, 0, 0, .55);
    }

    /* fluid, readable heading */
    .banner-card h1 {
        /* min, preferred, max */
        font-size: clamp(1.6rem, 1.05rem + 2.2vw, 2.2rem);
        line-height: 1.15;
        margin-bottom: .5rem;
        letter-spacing: 0.1px;
    }

    /* body copy */
    .banner-card p {
        font-size: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
        line-height: 1.4;
        margin-bottom: .75rem;
    }

    /* button spacing & tap target */
    .banner-card .btn-black {
        padding: .75rem 1rem;
        min-height: 44px;
    }

    /* kill manual line breaks inside hero text on tablets */
    .banner-card br {
        display: none;
    }
}

@media (max-width:1080px) {
    .site-grid {
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .col-content,
    .banner-content,
    .banner-breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
    }
}


@media (max-width: 767.98px) {
    .banner-content {
        justify-content: flex-start;
        padding: 16px;
    }

    .banner-card {
        max-width: 560px;
        padding: 16px 18px;
    }

    .banner-card h1 {
        font-size: clamp(1.4rem, 5.4vw, 1.9rem);
    }

    .banner-card p {
        font-size: clamp(1rem, 3.5vw, 1.1rem);
    }

    .banner-card .btn-black {
        padding: .65rem .9rem;
    }

    .banner-card br {
        display: none;
    }

    /* ok on phones only */
}

@media (max-width: 1080px) {
    .site-grid {
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: clip !important;
    }

    .col-content,
    .banner-content,
    .banner-breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
    }
}



/* iPad (and similar 9–11") — PORTRAIT ONLY */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /* avoid the right-edge overflow from the grid on portrait */
    .site-grid {
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .col-content,
    .banner-content,
    .banner-breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* keep hero content aligned like desktop but with a bit less padding */
    .banner-content {
        justify-content: flex-start;
        padding: 24px 16px;
    }

    /* slightly narrower card so lines don’t feel crowded */
    .banner-card {
        max-width: 600px;
        /* tweak to 560–640 if you want */
        padding: 20px 22px;
        background: rgba(0, 0, 0, .55);
    }

    /* keep desktop typography feel, just a touch smaller */
    .banner-card h1 {
        font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.15rem);
        line-height: 1.15;
        margin-bottom: .5rem;
    }

    .banner-card p {
        font-size: clamp(1rem, .95rem + .5vw, 1.125rem);
        line-height: 1.4;
        margin-bottom: .75rem;
    }

    /* preserve manual line breaks so words don't jam together */
    .banner-card br {
        display: inline;
    }

    /* comfy tap target, allow wrapping without overflow */
    .banner-card .btn-black {
        padding: .75rem 1rem;
        min-height: 44px;
        white-space: normal;
    }
}

/* Move hero text area 40px to the right on desktop & tablets */
@media (min-width: 768px) {
    .banner-card {
        transform: translateX(40px);
    }
}


/* iPad portrait: make the slab ~7/12 wide instead of full-width */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .page-container .row {
        justify-content: flex-start !important;
    }

    .overlay-slab {
        flex: 0 0 58.333333% !important;
        /* like col-md-7 */
        max-width: 58.333333% !important;
        width: 58.333333% !important;


    }
}

/* iPad/tablet: make the slab wider and hug left */
@media (min-width:768px) and (max-width:991.98px) {
    .page-container .row {
        justify-content: flex-start !important;
    }

    .overlay-slab {
        flex: 0 0 66.6667% !important;
        /* like col-md-8 */
        max-width: 66.6667% !important;
        margin-left: 0 !important;
        padding: 1.75rem 2rem !important;
        /* slightly tighter than p-5 */
    }
}





/* Space between stacked CTA buttons (works inside hero/overlay etc.) */
.banner-card a .btn-black,
.banner-card a .btn-gray,
.overlay-slab a .btn-black,
.overlay-slab a .btn-gray {
    display: inline-flex;
    /* keeps icons aligned */
    margin-right: 12px;
    /* gap when they sit side-by-side */
    margin-bottom: 12px;
    /* gap when they wrap/stack */
}

/* remove the extra bottom gap on the last link in the block */
.banner-card a:last-child .btn-black,
.banner-card a:last-child .btn-gray,
.overlay-slab a:last-child .btn-black,
.overlay-slab a:last-child .btn-gray {
    margin-bottom: 0;
}



/* Make both columns stretch equal height */
#video .col-12,
#video .col-md-6 {
    display: flex;
}

/* YouTube fills its column */
#video .yt-wrap {
    width: 100%;
    height: 100%;
}

#video iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    /* keeps correct shape on tablets/desktops */
    border: 0;
}

/* Mobile: stack with normal 16:9 video */
@media (max-width: 767.98px) {
    #video {
        min-height: 0 !important;
    }

    #video .yt-wrap {
        height: auto;
    }

    #video iframe {
        height: auto;
        aspect-ratio: 16/9;
    }

    #video a>.btn-black {
        min-height: 56px;
    }

    /* comfy tap target */
}


.fa-arrow-right-long {
    margin-left: 0.4em;
    /* adds a small space before the arrow */
}




/* Frame hugs the image height; no fixed aspect */
.card-frame {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    /* black surround when image doesn’t fill edge */
    overflow: hidden;
    /* keeps overlay edges clean */
}

/* Show entire image; allow the card to grow vertically */
.card-frame>img {
    display: block;
    /* removes default baseline gap */
    width: 100%;
    height: auto;
    /* key: no fixed height */
    object-fit: contain;
    /* keep full image visible */
    border: 0;
}

/* If you had this before, neutralize it */
.card-fixed-305,
.card-fixed-305>img {
    height: auto !important;
}




/* Only paragraphs inside the padded block of each pane */
.tab-pane .p-4 .p-normal,
.tab-pane .p-lg-5 .p-normal {
    max-inline-size: 42ch;
    /* ~42 characters per line */
    text-wrap: pretty;
    /* nicer breaks where supported */
    margin-right: auto;
    /* keep it from stretching */
}

/* Loosen a bit on larger screens if you like */
@media (min-width: 992px) {

    .tab-pane .p-4 .p-normal,
    .tab-pane .p-lg-5 .p-normal {
        max-inline-size: 48ch;
    }
}










/* Slim centered wrapper zipzag*/
.zz-center {
    max-width: 980px;
    /* “leaner” column */
    width: min(92vw, 980px);
    margin-inline: auto;
}

/* Two-column rows, tight gap */
.zz-item {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-areas: "media copy";
    gap: 18px;
    margin-right: 40px;
}

/* Reverse layout for every other row */
.zz-item.zz-rev {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "copy media";
}

.zz-item.zz-rev .zz-media {
    order: 2;
}

.zz-item.zz-rev .zz-copy {
    order: 1;
}

/* Images: same height, no distortion, flush edges */
.zz-media {
    width: 100%;
}

.zz-img {
    display: block;
    width: 100%;
    height: 240px;
    /* adjust to taste (220–280) */
    object-fit: cover;
}

/* Name the areas */
.zz-media {
    grid-area: media;
}

.zz-copy {
    grid-area: copy;
}

/* Copy column */
.zz-copy h3 {
    margin: 0 0 .35rem;
}

.zz-copy .p-normal {
    margin: 0 0 .4rem;
}

/* Space under the CTA/link inside each item */
.zz-copy a>.btn-black,
.zz-copy .btn-black {
    margin-top: 12px;
    /* space above the button */
    margin-bottom: 10px;
    /* space below the button/link */
}

/* Space between items (blocks) */
.zz-item:not(:last-child) {
    margin-bottom: 32px;
    /* desktop/tablet gap */
}

@media (max-width: 767.98px) {
    .zz-item:not(:last-child) {
        margin-bottom: 24px;
        /* a little tighter on phones */
    }
}

/* If a block has multiple CTAs, give them breathing room */
.zz-copy :is(a, button).btn-black+ :is(a, button).btn-black {
    margin-top: 10px;
}


/* Mobile stack */
@media (max-width: 767.98px) {

    .zz-item,
    .zz-item.zz-rev {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "copy";
        gap: 10px;
        /* small gap between image & text */
    }

    .zz-img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* === Outward spread without resizing (Grid-safe) === */
/* push columns outward visually; no layout reflow, no size changes */
@media (min-width: 768px) {
    .zz-item {
        position: relative;
        overflow: visible;
    }

    /* normal rows: image further left, text further right */
    .zz-item:not(.zz-rev) .zz-media {
        transform: translateX(-3rem);
    }

    .zz-item:not(.zz-rev) .zz-copy {
        transform: translateX(3rem);
    }

    /* reversed rows: flip the pushes */
    .zz-item.zz-rev .zz-media {
        transform: translateX(3rem);
    }

    .zz-item.zz-rev .zz-copy {
        transform: translateX(-3rem);
    }
}

/* optional: crank it up more on big desktops */
@media (min-width: 1200px) {
    .zz-item:not(.zz-rev) .zz-media {
        transform: translateX(-4rem);
    }

    .zz-item:not(.zz-rev) .zz-copy {
        transform: translateX(4rem);
    }

    .zz-item.zz-rev .zz-media {
        transform: translateX(4rem);
    }

    .zz-item.zz-rev .zz-copy {
        transform: translateX(-4rem);
    }
}


/* Prevent intra-word splits + hyphenation on headings/titles */
:where(h1, h2, h3, .text-base-bold, .heading-small-bold) {
    -webkit-hyphens: none;
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
    /* nicer multi-line breaks where supported */
}




.amp::after {
    content: "\200B";
}

/* zero-width space => allows wrap */





/* iPad-ish widths (iPad Pro portrait/landscape) */
.page-container .row.g-3 {
    --bs-gutter-x: 1.5rem;
    /* a hair more space so circles don't touch */
}

/* Normalize icon sizing and avoid half-pixel rendering */
.page-container .row.g-3 .col-md-2 img {
    width: 120px !important;
    /* even integer size = crisper circle */
    height: 120px !important;
    /* keep square so it's perfectly round */
    display: block;
    margin: 0 auto;
}

/* If iPad Pro portrait is still tight, shrink slightly there */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .page-container .row.g-3 .col-md-2 img {
        width: 110px !important;
        height: 110px !important;
    }
}


.pf-wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}









/* ===== Camera Systems Block (scoped) ===== */
.camera-systems-block .heading-small-bold {
    line-height: 1.15;
    text-wrap: balance;
    /* supported on iPad Safari */
    font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem);
    margin-bottom: 0.75rem;
}

.camera-systems-block h2 {
    margin-bottom: 0.25rem;
}

.camera-systems-block .p-normal li {
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

/* Optional: keep list nicely spaced from headline */
.camera-systems-block .p-normal {
    margin-top: 0.75rem;
}

/* Tablet-specific gutter comfort (md breakpoint range) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .camera-systems-block .col-lg-6:first-child {
        padding-right: 0.75rem;
    }

    .camera-systems-block .col-lg-6:last-child {
        padding-left: 0.75rem;
    }
}

/* If you want the image to never exceed a pleasant height on tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .camera-systems-block img {
        max-height: 460px;
        object-fit: cover;
    }
}



.keep-with-next {
    white-space: nowrap;
}





/* Only affects this section */
.hero-diff {
    position: relative;
}

/* Phones: show a *usable* hero image and give the block height */
@media (max-width: 767.98px) {
    .hero-diff {
        background-size: cover !important;
        /* switch from contain -> cover on iPhone */
        min-height: 520px;
        /* adjust if you want taller/shorter */
    }
}

/* Optional: keep headings from breaking awkwardly */
.hero-diff .text-base-bold {
    text-wrap: balance;
}

.br-lg {
    display: none;
}

@media (min-width: 992px) {
    .br-lg {
        display: inline;
    }
}

/* One source of truth for width */
.matrix-card {
    width: 360px;
    /* <- set the exact card width here */
    background: #000;
    /* hides any 1px gaps due to subpixels */
    border: 0;
    /* no border */
    box-shadow: none;
    /* kill shadow */
    border-radius: 0;
    /* no radius */
    overflow: hidden;
    /* keep edges clean */
}

/* Image fills exactly the card width and has no baseline gap */
.matrix-card-media img {
    display: block;
    /* IMPORTANT: removes inline gap */
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Overlay fades in (you already have the hover styles) */
.matrix-card .hover-overlay {
    transition: opacity .3s ease;
    opacity: 0;
}

.matrix-card:hover .hover-overlay {
    opacity: 1;
}

/* Title matches image width because it sits in the same card */
.matrix-card-title {
    margin: 0;
    padding: 10px 12px;
    background: #000;
    color: #fff;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
}

/* Optional: layout helper so the three cards line up nicely */
/*.row.g-4 > [class*="col-"]{ display: flex; } This style breaks all pages where row g4 is found*/
.row.g-4>[class*="col-"]>.matrix-card {
    margin-inline: auto;
}

/* centers the fixed width */
/*Career Page*/
.row-bg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--row-bg) center/cover no-repeat;
}

/* Cells slightly shorter than squares */
.row-bg .cell {
    position: relative;
    aspect-ratio: 20 / 17;
    /* ~15% shorter than 1:1 */
    display: block;
    min-height: 180px;
    /* reduced from 260px */
    color: #fff;
    padding: 0;
}

/* Panel fills the cell exactly */
.row-bg .text-panel {
    position: absolute;
    inset: 0;
    background: rgba(60, 60, 60, .55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(14px, 2.2vw, 28px);
    color: #fff;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Mobile / tablet stacking */
@media (max-width: 991.98px) {
    .row-bg {
        grid-template-columns: 1fr;
    }

    .row-bg .cell {
        aspect-ratio: auto;
        min-height: clamp(180px, 45vw, 360px);
        /* proportional for smaller screens */
    }
}

/* iPhone-friendly refinements */
@media (max-width: 575.98px) {

    /* phones */
    .row-bg {
        grid-template-columns: 1fr;
    }

    /* stack */
    .row-bg .cell {
        /* keep your 180px floor, but scale a touch taller on narrow screens */
        min-height: clamp(180px, 56vw, 340px);
    }

    .row-bg .text-panel {
        padding: clamp(12px, 5vw, 20px);
        max-width: 92%;
        /* avoid edge-to-edge text on tiny widths */
    }

    .row-bg .text-panel h4 {
        font-size: clamp(18px, 5.2vw, 22px);
        margin-bottom: .4rem;
    }

    .row-bg .text-panel p {
        font-size: clamp(14px, 4.2vw, 18px);
        line-height: 1.35;
    }
}

/* MOBILE + IPHONE FIX */
@media (max-width: 767.98px) {
    .row-bg {
        grid-template-columns: 1fr;
        /* stack one per row */
    }

    .row-bg .cell {
        aspect-ratio: auto;
        min-height: clamp(220px, 60vw, 420px);
        display: flex;
        align-items: flex-end;
        /* anchor text toward bottom of image */
    }

    .row-bg .text-panel {
        position: relative;
        background: rgba(60, 60, 60, 0.65);
        width: 100%;
        color: #fff;
        margin: 12px;
        /* breathing room from image edge */
        box-sizing: border-box;
    }

    .row-bg .text-panel h4 {
        font-size: clamp(18px, 4.5vw, 22px);
        margin-bottom: 6px;
    }

    .row-bg .text-panel p {
        font-size: clamp(14px, 4vw, 18px);
        line-height: 1.4;
        margin: 0;
    }
}


/* Perks layout */
.perks .perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    /* controls space between icon and text */
    height: 100%;
}

/* Responsive icon size (no fa-6x needed) */
.perks .perk i {
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
}

/* Tidy copy width & sizing */
.perks .perk p {
    margin: 0;
    max-width: 26ch;
    /* keeps lines tidy like your mock */
    font-size: clamp(14px, 1.8vw, 18px);
}

/* Optional: slightly tighter row on very small screens */
@media (max-width: 360px) {
    .perks .perk p {
        max-width: 22ch;
    }
}

.top-nav {
    z-index: 1010;
    position: relative;
}

/* Fix for ipad menu*/
header nav.navbar {
    overflow: initial !important;
}