:root {
    --bizright-blue: #009bd0;
    --bizright-yellow: #ffad00;
    --orange: var(--bizright-yellow);
}

.hero,
.assessment-cta {
    background: var(--bizright-blue);
    color: #ffffff;
}

.site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    position: fixed;
    transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
    width: 100%;
}

.site-header.is-scrolled {
    background: rgba(17, 18, 19, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
}

.hero {
    background-color: #031b44;
    background-image: url("../img/isometric_grid_blueprint.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    min-height: 100svh;
}

.hero::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.40));
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

/* The tray stays independent from the decorative blueprint background. */
.hero-visual { position:absolute; z-index:-1; top:50%; right:max(-3vw, calc((100vw - 1520px) / 2)); width:min(54vw, 840px); max-width:none; pointer-events:none; transform:translateY(-38%); }
.hero-dashboard { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 34px rgba(0,0,0,.34)); }
.hero-dashboard-legend { display:block; width:50%; height:auto; opacity: 85%; margin:22px auto 0; }
.hero h1 { max-width:720px; font-size:clamp(52px, 6.25vw, 100px); letter-spacing:-.07em; }
.hero h3 {
    max-width:660px;
    margin:22px 0 0;
    font-size:clamp(18px, 1.55vw, 25px);
    line-height:1.35;
    color: #ffcc00;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    position:relative;
    z-index:1;
    padding:164px 0 36px;
}

.hero-bottom {
    display:block;
    max-width:560px;
    margin-top:23px;
    padding-top:0;
    border:0;
}

.hero-bottom p {
    /* color: var(--bizright-yellow); */
    /* color:#ffcc00; */
    color: #ffffff;
    font-weight: 400;
}

.hero-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content:flex-start;
    margin-top:34px;
}

.hero-actions .button {
    white-space: nowrap;
}

.hero-button-primary {
    background:#ffcc00;
    color: #111213;
    border:1px solid #ffcc00;
    box-shadow:0 7px 18px rgba(0,0,0,.2);
}

.hero-button-primary:hover {
    background: #e9f8ff;
}

.hero-button-secondary {
    background: transparent;
    border:1px solid rgba(55,155,255,.8);
    color: #ffffff;
}

.hero-button-secondary:hover {
    background:rgba(32,125,220,.16);
}

.play-icon { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.2); font-size:10px; }

@media (max-width: 760px) {
    .hero-content {
        padding-bottom: 24px;
    }

    .hero-bottom {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.hero .button-dark,
.assessment-cta .button-dark {
    background: var(--bizright-yellow);
    color: #111213;
}

.hero .button-dark:hover,
.assessment-cta .button-dark:hover {
    background: #ffc13b;
}

.contact-section { border-top: 1px solid rgba(17, 18, 19, 0.15); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 8vw, 120px); align-items: start; }
.contact-layout h2 { font-size: clamp(41px, 5.4vw, 77px); }
.contact-layout p:not(.eyebrow) { max-width: 520px; font-size: 18px; }
.contact-form { display: grid; gap: 8px; padding: 30px; background: #f0ede5; border: 1px solid rgba(17, 18, 19, 0.22); }
.contact-form label { margin-top: 8px; font-size: 14px; font-weight: 600; }
.contact-form label span { color: rgba(17, 18, 19, 0.6); font-weight: 400; }
.contact-form input:not([type="hidden"]), .contact-form textarea { min-height: 48px; padding: 10px 12px; border: 1px solid rgba(17, 18, 19, 0.28); background: #fff; color: #111213; font: inherit; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid rgba(0, 155, 208, 0.25); border-color: var(--bizright-blue); }
.contact-form .button { width: fit-content; margin-top: 16px; border: 0; cursor: pointer; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.contact-status { min-height: 1.6em; margin: 4px 0 0; color: #007aa5; font-weight: 600; }

@media (max-width: 760px) {
    .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

.hero .scroll-cue {
    color: #ffffff;
    margin-top:auto;
    padding-top:48px;
    width:fit-content;
    min-width:176px;
    border-top:1px solid rgba(255,255,255,.28);
}

@media (max-width: 960px) { .hero-visual { right:-8vw; width:min(62vw,680px); opacity:.76; } .hero-content { padding-top:142px; } }
@media (max-width: 760px) { .hero { display:flex; flex-direction:column; min-height:0; background-position:60% center; } .hero-content { order:1; display:block; min-height:0; padding-top:132px; padding-bottom:28px; } .hero-visual { position:relative; z-index:0; order:2; top:auto; right:auto; bottom:auto; width:min(calc(100% - 30px),600px); max-width:calc(100% - 30px); margin:0 auto 20px; transform:none; opacity:1; } .hero-dashboard { filter:drop-shadow(0 14px 26px rgba(0,0,0,.28)); } .hero-dashboard-legend { width:82%; margin:0 auto; } .hero h1 { font-size:clamp(52px,15vw,78px); } .hero h1 br { display:none; } .hero h3 { max-width:450px; font-size:19px; } .hero-bottom { max-width:460px; } .hero-bottom p { font-size:16px; } .hero-actions { margin-top:27px; } .hero-actions .button { width:100%; } .hero .scroll-cue { margin-top:42px; padding-top:22px; } }

.nav-cta {
    /* background: var(--bizright-yellow); */
    background: #ffcc00;
}

.nav-cta:hover {
    background: #ffc13b;
}

.site-nav a[aria-current="page"] {
    color: #ffcc00;
}

.section-orange {
    background: var(--bizright-yellow);
}

.business-health-layout {
    display: grid;
}

.business-health-layout .feature-copy {
    margin-bottom: 0;
    max-width: 650px;
}

#main-content h2 {
    font-size: clamp(32px, 3.6vw, 56px);
}

.intro-clarity-image {
    display: block;
    height: auto;
    max-width: 780px;
    width: 100%;
}

.why-bizright-visual {
    display: grid;
    gap: 24px;
}

.birds-eye-capture {
    align-self: center;
    margin: 0;
}

.birds-eye-capture img {
    display: block;
    height: auto;
    width: 100%;
}

.persona-screens {
    display: grid;
    gap: 28px;
    min-width: 0;
    width: 100%;
}

#main-content h2.persona-screens__heading {
    color: var(--bizright-blue);
    font-size: clamp(28px, 3vw, 38px);
}

.persona-screens__images {
    display: grid;
    gap: 18px;
}

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

.picture-product {
    display: grid;
    gap: 18px;
    justify-self: end;
    max-width: 500px;
    width: 100%;
}

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

.picture-support-image {
    display: block;
    height: auto;
    margin-top: 40px;
    max-width: 100%;
    width: 100%;
}

.financial-product {
    margin-top: 70px;
}

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

.financial-header {
    grid-template-columns: 1fr 1fr;
}

.financial-brand {
    align-content: center;
    display: grid;
    gap: 24px;
    justify-items: start;
}

.financial-brand img {
    display: block;
    height: auto;
    max-width: 100%;
}

.financial-brand__logo {
    width: 355px;
}

.financial-brand img:not(.financial-brand__logo) {
    width: 100%;
}

.picture-grid > .picture-copy {
    display: none;
}

@media (max-width: 760px) {
    .picture-product {
        justify-self: start;
    }
}