/* ============================================================
   THEATRE SLATE
============================================================ */

.theatre-page {
    overflow: hidden;
}


/* ============================================================
   HERO
============================================================ */

.theatre-hero {
    position: relative;

    min-height: 920px;

    padding:
        180px 0 115px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fcfdfe 0%,
            #f3f8fb 56%,
            #eef8fb 100%
        );
}


.theatre-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .42;

    background-image:
        linear-gradient(
            rgba(25,60,90,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(25,60,90,.045) 1px,
            transparent 1px
        );

    background-size: 80px 80px;
}


.theatre-hero-glow {
    position: absolute;

    right: -170px;
    top: 100px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(36,184,207,.13),
            transparent 68%
        );

    filter: blur(20px);
}


.theatre-hero-layout {
    position: relative;

    display: grid;

    grid-template-columns:
        .84fr 1.16fr;

    gap:
        clamp(60px, 8vw, 120px);

    align-items: center;
}


.theatre-product-label {
    margin-bottom: 24px;

    color: #247cff;

    font-size: .8rem;

    font-weight: 750;
}


.theatre-hero h1 {
    max-width: 780px;

    margin: 0;

    color: #101820;

    font-size:
        clamp(4.1rem, 6.8vw, 7rem);

    font-weight: 760;

    line-height: .89;

    letter-spacing: -.075em;
}


.theatre-hero h1 em {
    display: block;

    color: #247cff;

    font-family:
        Georgia,
        serif;

    font-weight: 400;

    letter-spacing: -.055em;
}


.theatre-hero-lead {
    max-width: 610px;

    margin: 35px 0 0;

    color: #68747e;

    font-size:
        clamp(1rem, 1.3vw, 1.2rem);

    line-height: 1.75;
}


.theatre-hero-actions {
    margin-top: 38px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 28px;
}


.theatre-hero-features {
    margin-top: 48px;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}


.theatre-hero-features span {
    padding: 9px 13px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid
        rgba(15,23,42,.08);

    border-radius: 999px;

    color: #66727c;

    background:
        rgba(255,255,255,.68);

    font-size: .67rem;
}


.theatre-hero-features i {
    color: #247cff;
}

.slate-logo{
	width:180px;
}


/* ============================================================
   HERO SLATE
============================================================ */

.theatre-hero-visual {
    position: relative;
}


.theatre-slate-demo {
    padding: 27px;

    border:
        1px solid
        rgba(255,255,255,.9);

    border-radius: 28px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 35px 100px
        rgba(25,55,80,.16);

    transform:
        perspective(1500px)
        rotateY(-4deg);
}


.theatre-demo-head {
    padding-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(15,23,42,.07);
}


.theatre-demo-head small {
    display: block;

    color: #8b959d;

    font-size: .57rem;
}


.theatre-demo-head strong {
    display: block;

    margin-top: 3px;

    color: #101820;

    font-size: 1rem;
}


.theatre-live {
    padding: 7px 10px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border-radius: 999px;

    color: #23885c;

    background:
        rgba(47,183,120,.1);

    font-size: .53rem;

    font-weight: 750;
}


.theatre-live i {
    font-size: .4rem;
}


.theatre-demo-date {
    padding: 18px 0;

    display: flex;
    justify-content: space-between;

    align-items: center;
}


.theatre-date-main small {
    display: block;

    color: #949ea5;

    font-size: .53rem;
}


.theatre-date-main strong {
    color: #101820;
}


.theatre-date-day {
    display: flex;
    align-items: center;

    gap: 10px;
}


.theatre-date-day span {
    color: #8d989f;

    font-size: .55rem;
}


.theatre-date-day strong {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #fff;

    background: #247cff;
}


.theatre-case-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.theatre-case {
    padding: 14px;

    display: grid;

    grid-template-columns:
        70px 1fr auto;

    gap: 12px;

    align-items: center;

    border-radius: 12px;

    background: #f6f8f9;
}


.theatre-case-current {
    border:
        1px solid
        rgba(36,124,255,.16);

    background:
        rgba(36,124,255,.055);
}


.theatre-case-time strong {
    display: block;

    color: #17212a;

    font-size: .71rem;
}


.theatre-case-time span {
    color: #98a1a8;

    font-size: .49rem;
}


.theatre-case-info small {
    display: block;

    color: #929ca3;

    font-size: .48rem;
}


.theatre-case-info strong {
    display: block;

    margin-top: 2px;

    color: #26333d;

    font-size: .63rem;
}


.theatre-case-info span {
    color: #7e8992;

    font-size: .52rem;
}


.theatre-case-status {
    padding: 5px 8px;

    border-radius: 999px;

    font-size: .49rem;

    font-weight: 700;
}


.status-ready {
    color: #19764e;

    background: #ddf5e9;
}


.status-current {
    color: #176ee6;

    background:
        rgba(36,124,255,.1);
}


.status-planned {
    color: #7d8790;

    background: #e9edef;
}


.theatre-demo-footer {
    margin-top: 15px;

    padding-top: 16px;

    display: flex;
    justify-content: space-between;

    border-top:
        1px solid
        rgba(15,23,42,.07);

    color: #77838c;

    font-size: .55rem;
}


.theatre-demo-footer i {
    color: #247cff;
}


.theatre-demo-footer strong {
    color: #26333d;
}


/* FLOATS */

.theatre-float {
    position: absolute;

    z-index: 4;

    padding:
        14px 17px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 20px 45px
        rgba(20,40,60,.13);

    backdrop-filter:
        blur(15px);
}


.theatre-float > i {
    color: #247cff;

    font-size: 1.2rem;
}


.theatre-float-one > i {
    color: #2eb579;
}


.theatre-float strong {
    display: block;

    color: #101820;

    font-size: .68rem;
}


.theatre-float small {
    color: #7c8790;

    font-size: .58rem;
}


.theatre-float-one {
    left: -45px;
    bottom: 65px;
}


.theatre-float-two {
    right: -38px;
    top: 75px;
}


/* ============================================================
   INTRO
============================================================ */

.theatre-intro-grid {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    align-items: end;
}


.theatre-intro-copy p {
    margin: 0;

    color: #69747e;

    line-height: 1.8;
}


.theatre-intro-copy
.theatre-intro-lead {
    margin-bottom: 20px;

    color: #101820;

    font-size: 1.3rem;

    font-weight: 550;
}


/* ============================================================
   WORKFLOW
============================================================ */

.theatre-workflow {
    padding: 125px 0;

    color: #fff;

    background: #101820;
}


.theatre-workflow-header {
    max-width: 850px;
}


.theatre-workflow-header h2 {
    margin: 0;

    font-size:
        clamp(3.5rem, 6vw, 6.4rem);

    line-height: .92;

    letter-spacing: -.07em;
}


.theatre-workflow-header p {
    max-width: 570px;

    margin-top: 27px;

    color:
        rgba(255,255,255,.5);

    line-height: 1.75;
}


.theatre-flow {
    margin-top: 80px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.theatre-flow article {
    min-height: 300px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 18px;

    background:
        rgba(255,255,255,.035);
}


.theatre-flow-featured {
    border-color:
        rgba(36,184,207,.3) !important;

    background:
        linear-gradient(
            145deg,
            rgba(36,124,255,.18),
            rgba(36,184,207,.08)
        ) !important;
}


.theatre-flow article > span {
    color:
        rgba(255,255,255,.3);

    font-size: .58rem;
}


.theatre-flow article > div {
    width: 46px;
    height: 46px;

    margin-top: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #84e4ed;

    background:
        rgba(36,184,207,.09);

    font-size: 1.1rem;
}


.theatre-flow h3 {
    margin:
        auto 0 12px;

    font-size: 1.35rem;
}


.theatre-flow p {
    margin: 0;

    color:
        rgba(255,255,255,.47);

    font-size: .7rem;

    line-height: 1.65;
}


/* ============================================================
   PRODUCT IMAGE
============================================================ */

.theatre-showcase {
    background: #f5f8fa;
}


.theatre-showcase-layout,
.theatre-coordination-layout {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 100px;

    align-items: center;
}


.theatre-product-image {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 30px 80px
        rgba(25,50,70,.1);
}


.theatre-product-image img {
    width: 100%;
    height: auto;

    display: block;
}


.theatre-image-label {
    position: absolute;

    left: 18px;
    bottom: 18px;

    padding:
        11px 14px;

    display: flex;
    align-items: center;

    gap: 8px;

    border-radius: 11px;

    color: #fff;

    background:
        rgba(12,27,40,.76);

    backdrop-filter:
        blur(12px);

    font-size: .63rem;
}


/* ============================================================
   AVAILABILITY
============================================================ */

.theatre-availability {
    padding: 130px 0;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #176ee6,
            #18a0b8
        );
}


.theatre-availability-header {
    max-width: 850px;
}


.theatre-availability-header h2 {
    margin: 0;

    font-size:
        clamp(3.5rem, 6vw, 6.3rem);

    line-height: .92;

    letter-spacing: -.07em;
}


.theatre-availability-header p {
    max-width: 610px;

    margin-top: 27px;

    color:
        rgba(255,255,255,.7);

    line-height: 1.8;
}


.availability-board {
    margin-top: 70px;

    padding: 28px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 22px;

    background:
        rgba(255,255,255,.09);

    backdrop-filter: blur(15px);
}


.availability-times {
    padding-left: 150px;

    display: grid;

    grid-template-columns:
        repeat(9, 1fr);

    color:
        rgba(255,255,255,.4);

    font-size: .52rem;
}


.availability-row {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        130px 1fr;

    gap: 20px;

    align-items: center;
}


.availability-row > strong {
    font-size: .67rem;
}


.availability-track {
    position: relative;

    height: 58px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.08);
}


.slot {
    position: absolute;

    top: 8px;

    height: 42px;

    display: flex;
    align-items: center;

    padding:
        0 12px;

    border-radius: 8px;

    font-size: .52rem;
}


.slot-one {
    left: 3%;
    width: 31%;

    color: #174c79;

    background: #d9eeff;
}


.slot-two {
    left: 40%;
    width: 31%;

    color: #176949;

    background: #d8f5e7;
}


.slot-three {
    left: 14%;
    width: 39%;

    color: #174c79;

    background: #d9eeff;
}


.slot-four {
    left: 58%;
    width: 28%;

    color: #6c5512;

    background: #fff1b8;
}


.slot-five {
    left: 4%;
    width: 28%;

    color: #176949;

    background: #d8f5e7;
}


.slot-six {
    left: 49%;
    width: 37%;

    color: #174c79;

    background: #d9eeff;
}


/* ============================================================
   COORDINATION
============================================================ */

.theatre-coordination {
    background: #fff;
}


.theatre-coordination-layout {
    grid-template-columns:
        1.15fr .85fr;
}


.theatre-coordinate-points {
    margin-top: 30px;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


.theatre-coordinate-points span {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #64717a;

    font-size: .73rem;
}


.theatre-coordinate-points i {
    color: #247cff;
}


/* ============================================================
   LIVE CHANGES
============================================================ */

.theatre-live-section {
    padding: 130px 0;

    color: #fff;

    background: #101820;
}


.theatre-live-layout {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 100px;

    align-items: center;
}


.theatre-live-copy h2 {
    margin: 0;

    font-size:
        clamp(3.5rem, 5.5vw, 5.9rem);

    line-height: .93;

    letter-spacing: -.07em;
}


.theatre-live-copy > p {
    max-width: 540px;

    margin-top: 27px;

    color:
        rgba(255,255,255,.52);

    line-height: 1.8;
}


.theatre-change-demo {
    padding: 30px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 24px;

    background:
        rgba(255,255,255,.04);
}


.change-case {
    padding: 17px;

    display: grid;

    grid-template-columns:
        70px 1fr auto;

    gap: 12px;

    align-items: center;

    border-radius: 13px;

    background:
        rgba(255,255,255,.055);
}


.change-time {
    font-size: 1rem;

    font-weight: 700;
}


.change-case small {
    display: block;

    color:
        rgba(255,255,255,.35);

    font-size: .51rem;
}


.change-case strong {
    font-size: .7rem;
}


.change-old {
    color: #ff9090;

    font-size: .59rem;

    text-decoration: line-through;
}


.change-new {
    color: #8ce8c0;

    font-size: .59rem;
}


.change-updated {
    border:
        1px solid
        rgba(54,199,135,.18);

    background:
        rgba(54,199,135,.07);
}


.change-route {
    position: relative;

    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.change-route > span {
    position: absolute;

    width: 2px;
    height: 100%;

    background:
        linear-gradient(
            #247cff,
            #24b8cf
        );
}


.change-route > i {
    position: absolute;

    bottom: 0;

    color: #7ce1eb;
}


.change-dot {
    position: absolute;

    z-index: 2;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #7ce1eb;

    box-shadow:
        0 0 0 5px
        rgba(36,184,207,.1),
        0 0 18px
        rgba(36,184,207,.7);

    animation:
        theatreChangeDot
        2.2s ease-in-out infinite;
}


@keyframes theatreChangeDot {

    0% {
        top: 0;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        top: 60px;
        opacity: 0;
    }

}


.change-notice {
    margin-top: 13px;

    padding: 16px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-radius: 13px;

    color: #17523b;

    background: #c9f4dc;
}


.change-notice i {
    color: #289665;
}


.change-notice strong {
    display: block;

    font-size: .66rem;
}


.change-notice span {
    color: #5c806c;

    font-size: .55rem;
}


/* ============================================================
   UTILISATION
============================================================ */

.theatre-utilisation {
    background: #f5f8fa;
}


.theatre-utilisation-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.theatre-utilisation-grid article {
    min-height: 380px;

    padding: 29px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(15,23,42,.08);

    border-radius: 21px;

    background: #fff;
}


.theatre-utilisation-featured {
    color: #fff;

    border: 0 !important;

    background:
        linear-gradient(
            145deg,
            #176ee6,
            #20a5bd
        ) !important;
}


.theatre-utilisation-grid article > div {
    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #247cff;

    background:
        rgba(36,124,255,.07);

    font-size: 1.2rem;
}


.theatre-utilisation-featured > div {
    color: #176ee6;

    background: #fff;
}


.theatre-utilisation-grid article > span {
    margin-top: auto;

    color: #247cff;

    font-size: .58rem;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .1em;
}


.theatre-utilisation-featured > span {
    color:
        rgba(255,255,255,.57);
}


.theatre-utilisation-grid h3 {
    margin:
        9px 0 0;

    font-size: 1.55rem;

    line-height: 1.04;
}


/* ============================================================
   TEAM HUB
============================================================ */

.theatre-team {
    padding: 130px 0;

    color: #fff;

    background: #101820;
}


.theatre-team-header {
    max-width: 850px;
}


.theatre-team-header h2 {
    margin: 0;

    font-size:
        clamp(3.5rem, 6vw, 6.2rem);

    line-height: .92;

    letter-spacing: -.07em;
}


.theatre-team-map {
    margin-top: 75px;

    display: grid;

    grid-template-columns:
        1fr 85px
        1fr 85px
        1fr 85px
        1fr 85px
        1fr;

    align-items: center;
}


.theatre-team-item,
.theatre-team-centre {
    min-height: 150px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 18px;

    background:
        rgba(255,255,255,.035);

    text-align: center;
}


.theatre-team-centre {
    border-color:
        rgba(36,184,207,.3);

    background:
        linear-gradient(
            145deg,
            rgba(36,124,255,.2),
            rgba(36,184,207,.08)
        );
}


.theatre-team-item i,
.theatre-team-centre i {
    margin-bottom: 12px;

    color: #7fe1ea;

    font-size: 1.35rem;
}


.theatre-team-item small,
.theatre-team-centre small {
    color:
        rgba(255,255,255,.34);

    font-size: .49rem;

    letter-spacing: .1em;
}


.theatre-team-item strong,
.theatre-team-centre strong {
    margin-top: 5px;

    font-size: .71rem;
}


.theatre-team-route {
    position: relative;

    height: 2px;

    background:
        rgba(255,255,255,.1);
}


.theatre-team-route > span {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #247cff,
            #24b8cf
        );
}


.theatre-team-route > i {
    position: absolute;

    top: 50%;
    left: 0;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #7fe2ea;

    box-shadow:
        0 0 0 5px
        rgba(36,184,207,.1),
        0 0 17px
        rgba(36,184,207,.65);

    transform:
        translateY(-50%);

    animation:
        theatreTeamFlow
        2.5s ease-in-out infinite;
}


@keyframes theatreTeamFlow {

    0% {
        left: 0;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        left:
            calc(100% - 9px);
    }

    100% {
        left:
            calc(100% - 9px);

        opacity: 0;
    }

}


/* ============================================================
   FLEXIBILITY
============================================================ */

.theatre-flexibility {
    background: #fff;
}


.theatre-flex-layout {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 100px;

    align-items: center;
}


.theatre-flex-cards {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}


.theatre-flex-cards article {
    min-height: 300px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(15,23,42,.08);

    border-radius: 20px;

    background: #f5f8fa;
}


.theatre-flex-cards i {
    color: #247cff;

    font-size: 1.4rem;
}


.theatre-flex-cards small {
    margin-top: auto;

    color: #9aa3aa;

    font-size: .53rem;

    letter-spacing: .1em;
}


.theatre-flex-cards strong {
    margin-top: 7px;

    color: #101820;

    font-size: 1.25rem;
}


.theatre-flex-cards p {
    margin:
        12px 0 0;

    color: #6d7982;

    font-size: .69rem;

    line-height: 1.65;
}


/* ============================================================
   CTA
============================================================ */

.theatre-cta {
    position: relative;

    padding: 145px 0;

    overflow: hidden;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #176ee6,
            #19a0b8
        );
}


.theatre-cta-grid {
    position: absolute;
    inset: 0;

    opacity: .08;

    background-image:
        linear-gradient(
            rgba(255,255,255,.25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.25) 1px,
            transparent 1px
        );

    background-size: 80px 80px;
}


.theatre-cta-inner {
    position: relative;

    max-width: 980px;
}


.theatre-cta-inner h2 {
    margin: 0;

    font-size:
        clamp(3.7rem, 6vw, 6.5rem);

    line-height: .91;

    letter-spacing: -.075em;
}


.theatre-cta-inner p {
    max-width: 600px;

    margin:
        30px 0 38px;

    color:
        rgba(255,255,255,.72);

    line-height: 1.75;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

    .theatre-hero-layout,
    .theatre-intro-grid,
    .theatre-showcase-layout,
    .theatre-coordination-layout,
    .theatre-live-layout,
    .theatre-flex-layout {
        grid-template-columns: 1fr;
    }


    .theatre-slate-demo {
        transform: none;
    }


    .theatre-team-map {
        grid-template-columns:
            repeat(5, 1fr);

        gap: 10px;
    }


    .theatre-team-route {
        display: none;
    }


    .theatre-utilisation-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 750px) {

    .theatre-hero {
        min-height: 0;

        padding:
            145px 0 85px;
    }


    .theatre-hero h1 {
        font-size:
            clamp(3.6rem, 16vw, 5.3rem);
    }


    .theatre-float-two {
        display: none;
    }


    .theatre-float-one {
        left: 10px;
        bottom: 10px;
    }


    .theatre-flow,
    .theatre-utilisation-grid,
    .theatre-flex-cards {
        grid-template-columns: 1fr;
    }


    .availability-times {
        display: none;
    }


    .availability-row {
        grid-template-columns: 1fr;
    }


    .availability-track {
        height: 75px;
    }


    .theatre-team-map {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .theatre-case {
        grid-template-columns:
            60px 1fr;
    }


    .theatre-case-status {
        grid-column:
            2;
    }

}