/* ================================================================================================
   AURENGIS — LIVE EXPERIENCE
   LE-1 CANONICAL FUNCTIONAL FOUNDATION
================================================================================================ */

:root {
    --live-bg: #050a11;
    --live-bg-soft: #08111d;
    --live-panel: rgba(11, 20, 32, 0.82);
    --live-panel-strong: rgba(13, 23, 37, 0.96);
    --live-line: rgba(202, 215, 230, 0.12);
    --live-line-strong: rgba(202, 215, 230, 0.2);

    --live-text: #f1f3f5;
    --live-muted: #929dab;
    --live-muted-2: #687482;

    --live-gold: #caa15f;
    --live-gold-soft: #e1bd7b;
    --live-blue: #86a7c7;

    --live-stage-height: clamp(620px, 74vh, 920px);

    --phone-width: 390;
    --phone-height: 844;

    --tablet-width: 820;
    --tablet-height: 1180;

    --desktop-width: 1440;
    --desktop-height: 900;
}


/* ================================================================================================
   BASE
================================================================================================ */

html {
    background: var(--live-bg);
}

body.live-experience-page {
    margin: 0;

    min-width: 0;
    min-height: 100vh;

    overflow-x: hidden;

    color: var(--live-text);

    background:
        radial-gradient(
            circle at 16% 4%,
            rgba(72, 105, 137, 0.11),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 15%,
            rgba(186, 143, 76, 0.075),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #07101b 0%,
            #050a11 42%,
            #04080e 100%
        );

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.live-experience-page *,
body.live-experience-page *::before,
body.live-experience-page *::after {
    box-sizing: border-box;
}

body.live-experience-page button,
body.live-experience-page a {
    -webkit-tap-highlight-color: transparent;
}

body.live-experience-page button {
    font: inherit;
}

.live-shell {
    width: min(calc(100% - 56px), 1680px);
    margin-inline: auto;

    padding:
        max(18px, env(safe-area-inset-top))
        0
        max(34px, env(safe-area-inset-bottom));
}

.live-skip-link {
    position: fixed;
    z-index: 99999;

    top: 12px;
    left: 12px;

    transform: translateY(-160%);

    padding: 10px 14px;

    color: #06101a;
    background: #f1d49d;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;

    transition: transform 180ms ease;
}

.live-skip-link:focus {
    transform: translateY(0);
}


/* ================================================================================================
   TOP BAR
================================================================================================ */

.live-topbar {
    min-height: 74px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;

    border-bottom: 1px solid var(--live-line);
}

.live-brand {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: inherit;
    text-decoration: none;
}

.live-brand-logo {
    width: 42px;
    height: 42px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(203, 164, 96, 0.14));
}

.live-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-brand-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.02em;
}

.live-brand-subtitle {
    color: var(--live-muted);

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
}

.live-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #9ba7b4;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.live-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #76c69c;

    box-shadow:
        0 0 0 4px rgba(118, 198, 156, 0.08),
        0 0 15px rgba(118, 198, 156, 0.38);
}

.live-exit {
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #aab3bd;

    text-decoration: none;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.live-exit:hover {
    color: var(--live-gold-soft);
}

.live-exit-arrow {
    font-size: 15px;
}


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

.live-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
    gap: clamp(48px, 8vw, 140px);
    align-items: end;

    padding:
        clamp(70px, 8vw, 126px)
        0
        clamp(58px, 7vw, 102px);
}

.live-intro-copy {
    max-width: 980px;
}

.live-eyebrow {
    margin: 0 0 24px;

    color: var(--live-gold-soft);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.28em;
}

.live-intro h1 {
    max-width: 1000px;

    margin: 0;

    color: #f2f1ee;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(54px, 6.1vw, 104px);
    font-weight: 400;
    line-height: 0.93;
    letter-spacing: -0.052em;
}

.live-intro h1 span {
    display: block;

    color: #98a5b2;

    font-style: italic;
}

.live-lead {
    max-width: 770px;

    margin:
        clamp(30px, 3vw, 48px)
        0
        0;

    color: #9aa5b0;

    font-size: clamp(15px, 1.15vw, 19px);
    font-weight: 400;
    line-height: 1.8;
}

.live-intro-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--live-line);
    border-bottom: 1px solid var(--live-line);
}

.live-meta-item {
    min-width: 0;

    padding: 22px 16px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    border-right: 1px solid var(--live-line);
}

.live-meta-item:last-child {
    border-right: 0;
}

.live-meta-value {
    color: #e3e6e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
    line-height: 1;
}

.live-meta-label {
    color: var(--live-muted-2);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* ================================================================================================
   CONTROL DECK
================================================================================================ */

.live-control-deck {
    position: relative;
    z-index: 20;

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

    margin-bottom: 22px;

    padding: 10px;

    border: 1px solid var(--live-line);

    background:
        linear-gradient(
            180deg,
            rgba(14, 24, 38, 0.92),
            rgba(8, 15, 25, 0.94)
        );

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(20px);
}

.live-device-selector {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.live-device-button {
    min-width: 154px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px 16px;

    color: #7f8a96;

    border: 1px solid transparent;
    border-radius: 2px;

    background: transparent;

    cursor: pointer;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.live-device-button:hover {
    color: #c6ccd2;

    background: rgba(255, 255, 255, 0.025);
}

.live-device-button.is-active {
    color: #edf0f2;

    border-color: rgba(205, 169, 104, 0.24);

    background:
        linear-gradient(
            135deg,
            rgba(205, 169, 104, 0.11),
            rgba(255, 255, 255, 0.025)
        );
}

.device-button-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.device-button-copy strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.device-button-copy small {
    color: #66717d;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.device-button-icon {
    position: relative;

    flex: none;

    display: block;

    border: 1px solid currentColor;

    opacity: 0.85;
}

.device-button-phone {
    width: 12px;
    height: 20px;

    border-radius: 3px;
}

.device-button-tablet {
    width: 17px;
    height: 21px;

    border-radius: 2px;
}

.device-button-desktop {
    width: 24px;
    height: 15px;

    border-radius: 1px;
}

.device-button-desktop::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 12px;
    height: 4px;

    transform: translateX(-50%);

    border-top: 1px solid currentColor;
}

.live-action-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-control-button {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 14px;

    color: #8995a1;

    border: 1px solid transparent;

    background: transparent;

    cursor: pointer;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.live-control-button:hover {
    color: #d9dde1;

    border-color: var(--live-line);

    background: rgba(255, 255, 255, 0.025);
}

.live-control-primary {
    color: #e6c88f;

    border-color: rgba(207, 169, 99, 0.22);

    background: rgba(207, 169, 99, 0.06);
}


/* ================================================================================================
   STAGE HEADER
================================================================================================ */

.live-stage-section {
    position: relative;
}

.live-stage-heading {
    min-height: 86px;

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

    padding: 0 4px;
}

.live-stage-kicker {
    display: block;

    margin-bottom: 7px;

    color: #687582;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.live-stage-heading h2 {
    margin: 0;

    color: #dce1e5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(22px, 2vw, 32px);
    font-weight: 400;
}

.live-viewport-readout {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #687481;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.live-viewport-readout strong {
    display: block;

    margin-top: 4px;

    color: #b9c1c8;

    font-size: 11px;
    letter-spacing: 0.08em;
}

.live-readout-indicator {
    width: 7px;
    height: 7px;

    border: 1px solid rgba(214, 177, 109, 0.55);
    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(214, 177, 109, 0.2);
}


/* ================================================================================================
   MAIN STAGE
================================================================================================ */

.live-stage {
    position: relative;

    height: var(--live-stage-height);
    min-height: 620px;

    overflow: hidden;

    border: 1px solid var(--live-line);

    background:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(44, 67, 90, 0.13),
            transparent 43%
        ),
        linear-gradient(
            180deg,
            rgba(8, 16, 26, 0.97),
            rgba(4, 9, 15, 0.99)
        );

    isolation: isolate;
}

.live-stage::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, 0.18)
        );
}

.live-stage-grid {
    position: absolute;
    z-index: 0;

    inset: 0;

    opacity: 0.2;

    background-image:
        linear-gradient(
            rgba(138, 160, 182, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(138, 160, 182, 0.07) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0, 0, 0, 0.55) 42%,
            transparent 82%
        );
}

.live-stage-glow {
    position: absolute;
    z-index: 0;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.live-stage-glow-left {
    left: -180px;
    top: 18%;

    background: rgba(72, 116, 155, 0.07);
}

.live-stage-glow-right {
    right: -200px;
    bottom: 5%;

    background: rgba(185, 140, 72, 0.055);
}


/* ================================================================================================
   DEVICE SCENE ENGINE
================================================================================================ */

.device-scene {
    position: absolute;
    z-index: 5;

    inset: 0;

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

    padding: 48px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(16px)
        scale(0.985);

    transition:
        opacity 320ms ease,
        visibility 320ms ease,
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.device-scene[hidden] {
    display: flex;
}

.device-scene.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}

.device-shadow {
    position: absolute;

    left: 50%;
    bottom: 7%;

    transform: translateX(-50%);

    height: 44px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.62);

    filter: blur(28px);

    pointer-events: none;
}

.device-shadow-phone {
    width: 310px;
}

.device-shadow-tablet {
    width: 520px;
}

.device-shadow-desktop {
    width: 72%;
    max-width: 1050px;
}


/* ================================================================================================
   VIRTUAL VIEWPORT — CORE MECHANISM
================================================================================================ */

.virtual-viewport {
    position: absolute;

    top: 0;
    left: 0;

    overflow: hidden;

    background: #ffffff;

    transform-origin: top left;
}

.live-iframe {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: #ffffff;
}


/* ================================================================================================
   PHONE HARDWARE
================================================================================================ */

.phone-device {
    --device-scale: 0.72;

    position: relative;

    width: calc(430px * var(--device-scale));
    height: calc(900px * var(--device-scale));

    flex: none;

    filter:
        drop-shadow(0 38px 44px rgba(0, 0, 0, 0.4));
}

.phone-frame {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border:
        calc(7px * var(--device-scale))
        solid
        #151b22;

    border-radius:
        calc(58px * var(--device-scale));

    background:
        linear-gradient(
            145deg,
            #222b34,
            #0a0f15 46%,
            #1a2129
        );

    box-shadow:
        inset 0 0 0
            calc(2px * var(--device-scale))
            rgba(255, 255, 255, 0.09),
        inset 0 0 0
            calc(5px * var(--device-scale))
            rgba(0, 0, 0, 0.72);
}

.phone-screen {
    position: absolute;

    top: calc(12px * var(--device-scale));
    right: calc(12px * var(--device-scale));
    bottom: calc(12px * var(--device-scale));
    left: calc(12px * var(--device-scale));

    overflow: hidden;

    border-radius:
        calc(45px * var(--device-scale));

    background: #000;
}

.phone-screen .virtual-viewport {
    width: 390px;
    height: 844px;

    transform:
        scale(
            calc(
                (406 * var(--device-scale)) / 390
            )
        );
}

.phone-dynamic-island {
    position: absolute;
    z-index: 20;

    top: calc(14px * var(--device-scale));
    left: 50%;

    width: calc(116px * var(--device-scale));
    height: calc(31px * var(--device-scale));

    transform: translateX(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #030405,
            #0a0c0e
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);

    pointer-events: none;
}

.phone-dynamic-island span {
    position: absolute;

    right: calc(11px * var(--device-scale));
    top: 50%;

    width: calc(7px * var(--device-scale));
    height: calc(7px * var(--device-scale));

    transform: translateY(-50%);

    border-radius: 50%;

    background: #101b24;

    box-shadow:
        inset 0 0
            calc(3px * var(--device-scale))
            rgba(91, 124, 158, 0.4);
}

.phone-speaker {
    position: absolute;
    z-index: 30;

    top: calc(5px * var(--device-scale));
    left: 50%;

    width: calc(42px * var(--device-scale));
    height: calc(2px * var(--device-scale));

    transform: translateX(-50%);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);
}

.phone-side-button {
    position: absolute;
    z-index: -1;

    width: calc(4px * var(--device-scale));

    border-radius:
        calc(2px * var(--device-scale));

    background:
        linear-gradient(
            180deg,
            #303944,
            #0d1218
        );
}

.phone-side-button-left-one {
    top: calc(190px * var(--device-scale));
    left: calc(-3px * var(--device-scale));

    height: calc(78px * var(--device-scale));
}

.phone-side-button-left-two {
    top: calc(290px * var(--device-scale));
    left: calc(-3px * var(--device-scale));

    height: calc(112px * var(--device-scale));
}

.phone-side-button-right {
    top: calc(235px * var(--device-scale));
    right: calc(-3px * var(--device-scale));

    height: calc(126px * var(--device-scale));
}


/* ================================================================================================
   TABLET HARDWARE
================================================================================================ */

.tablet-device {
    --device-scale: 0.56;

    position: relative;

    width: calc(880px * var(--device-scale));
    height: calc(1240px * var(--device-scale));

    flex: none;

    filter:
        drop-shadow(0 40px 48px rgba(0, 0, 0, 0.42));
}

.tablet-frame {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border:
        calc(8px * var(--device-scale))
        solid
        #151b22;

    border-radius:
        calc(40px * var(--device-scale));

    background:
        linear-gradient(
            145deg,
            #242d36,
            #0b1117 48%,
            #1b222a
        );

    box-shadow:
        inset 0 0 0
            calc(2px * var(--device-scale))
            rgba(255, 255, 255, 0.08);
}

.tablet-screen {
    position: absolute;

    top: calc(26px * var(--device-scale));
    right: calc(26px * var(--device-scale));
    bottom: calc(26px * var(--device-scale));
    left: calc(26px * var(--device-scale));

    overflow: hidden;

    border-radius:
        calc(25px * var(--device-scale));

    background: #000;
}

.tablet-screen .virtual-viewport {
    width: 820px;
    height: 1180px;

    transform:
        scale(
            calc(
                (828 * var(--device-scale)) / 820
            )
        );
}

.tablet-camera {
    position: absolute;
    z-index: 20;

    top: calc(9px * var(--device-scale));
    left: 50%;

    width: calc(7px * var(--device-scale));
    height: calc(7px * var(--device-scale));

    transform: translateX(-50%);

    border-radius: 50%;

    background: #060a0e;

    box-shadow:
        inset 0 0
            calc(3px * var(--device-scale))
            rgba(83, 111, 139, 0.4);
}

.tablet-button {
    position: absolute;
    z-index: -1;

    top: calc(95px * var(--device-scale));
    right: calc(-3px * var(--device-scale));

    width: calc(4px * var(--device-scale));
    height: calc(88px * var(--device-scale));

    border-radius: 2px;

    background: #252e37;
}


/* ================================================================================================
   DESKTOP / NOTEBOOK HARDWARE
================================================================================================ */

.desktop-device {
    --device-scale: 0.69;

    position: relative;

    width: calc(1510px * var(--device-scale));
    height: calc(1010px * var(--device-scale));

    flex: none;

    transform:
        perspective(1800px)
        rotateX(0.5deg);

    transform-origin: center center;

    filter:
        drop-shadow(0 48px 58px rgba(0, 0, 0, 0.46));
}

.desktop-display {
    position: absolute;

    top: 0;
    left: 50%;

    width: calc(1510px * var(--device-scale));
    height: calc(965px * var(--device-scale));

    transform: translateX(-50%);

    border:
        calc(8px * var(--device-scale))
        solid
        #171d24;

    border-radius:
        calc(18px * var(--device-scale))
        calc(18px * var(--device-scale))
        calc(9px * var(--device-scale))
        calc(9px * var(--device-scale));

    background:
        linear-gradient(
            145deg,
            #202832,
            #0c1117 48%,
            #171e26
        );

    box-shadow:
        inset 0 0 0
            calc(2px * var(--device-scale))
            rgba(255, 255, 255, 0.07);
}

.desktop-screen {
    position: absolute;

    top: calc(24px * var(--device-scale));
    left: 50%;

    width: calc(1440px * var(--device-scale));
    height: calc(900px * var(--device-scale));

    transform: translateX(-50%);

    overflow: hidden;

    background: #000;
}

.desktop-screen .virtual-viewport {
    width: 1440px;
    height: 900px;

    transform:
        scale(var(--device-scale));
}

.desktop-camera {
    position: absolute;
    z-index: 10;

    top: calc(8px * var(--device-scale));
    left: 50%;

    width: calc(6px * var(--device-scale));
    height: calc(6px * var(--device-scale));

    transform: translateX(-50%);

    border-radius: 50%;

    background: #04070a;

    box-shadow:
        0 0
            calc(4px * var(--device-scale))
            rgba(78, 107, 137, 0.35);
}

.desktop-display-brand {
    position: absolute;

    bottom: calc(4px * var(--device-scale));
    left: 50%;

    transform: translateX(-50%);

    color: rgba(218, 224, 230, 0.28);

    font-size: calc(8px * var(--device-scale));
    font-weight: 800;
    letter-spacing: 0.24em;
}

.desktop-hinge {
    position: absolute;

    left: 50%;
    bottom: calc(30px * var(--device-scale));

    width: calc(540px * var(--device-scale));
    height: calc(14px * var(--device-scale));

    transform: translateX(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #252d36,
            #080c10
        );
}

.desktop-base {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: calc(1600px * var(--device-scale));
    height: calc(82px * var(--device-scale));

    transform:
        translateX(-50%)
        perspective(600px)
        rotateX(62deg);

    transform-origin: bottom center;

    border-radius:
        calc(8px * var(--device-scale));

    background:
        linear-gradient(
            180deg,
            #242c34,
            #11171d
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.desktop-keyboard {
    position: absolute;

    top: 14%;
    left: 50%;

    width: 66%;
    height: 34%;

    transform: translateX(-50%);

    opacity: 0.28;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 17px,
            rgba(0, 0, 0, 0.65) 18px,
            rgba(0, 0, 0, 0.65) 31px
        );
}

.desktop-trackpad {
    position: absolute;

    left: 50%;
    bottom: 8%;

    width: 22%;
    height: 34%;

    transform: translateX(-50%);

    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 4px;
}

.desktop-base-edge {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: calc(1540px * var(--device-scale));
    height: calc(8px * var(--device-scale));

    transform: translateX(-50%);

    border-radius:
        0 0
        calc(16px * var(--device-scale))
        calc(16px * var(--device-scale));

    background:
        linear-gradient(
            180deg,
            #11171d,
            #05080b
        );
}


/* ================================================================================================
   LANDSCAPE DEVICE STATES
================================================================================================ */

.live-shell[data-orientation="landscape"]
.phone-device {
    transform: rotate(90deg);
}

.live-shell[data-orientation="landscape"]
.tablet-device {
    transform: rotate(90deg);
}

.live-shell[data-active-device="desktop"]
#orientationButton {
    opacity: 0.38;
    pointer-events: none;
}


/* ================================================================================================
   DEVICE INFORMATION
================================================================================================ */

.live-device-information {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(440px, 0.65fr);
    gap: 50px;

    padding:
        clamp(30px, 4vw, 54px)
        0
        clamp(80px, 8vw, 130px);

    border-bottom: 1px solid var(--live-line);
}

.live-device-info-main {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 22px;
}

.live-info-index {
    color: rgba(202, 161, 95, 0.48);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
}

.live-info-label {
    margin: 0 0 10px;

    color: var(--live-muted-2);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.live-device-info-main h3 {
    margin: 0;

    color: #dfe3e6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(25px, 2.3vw, 38px);
    font-weight: 400;
    line-height: 1.15;
}

.live-device-info-main p:last-child {
    max-width: 720px;

    margin: 17px 0 0;

    color: #818d99;

    font-size: 14px;
    line-height: 1.75;
}

.live-device-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--live-line);
    border-left: 1px solid var(--live-line);
}

.live-device-specs > div {
    min-width: 0;

    padding: 18px 20px;

    border-right: 1px solid var(--live-line);
    border-bottom: 1px solid var(--live-line);
}

.live-device-specs span {
    display: block;

    margin-bottom: 7px;

    color: #5f6b77;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.live-device-specs strong {
    color: #b7c0c8;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}


/* ================================================================================================
   FOUNDATION
================================================================================================ */

.live-foundation {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    gap: clamp(28px, 5vw, 78px);
    align-items: start;

    padding:
        clamp(90px, 10vw, 160px)
        0;
}

.live-foundation-number {
    color: rgba(202, 161, 95, 0.35);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
}

.live-foundation-copy {
    max-width: 960px;
}

.live-foundation-eyebrow {
    margin: 0 0 22px;

    color: var(--live-gold-soft);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.live-foundation h2 {
    margin: 0;

    color: #e5e7e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(37px, 4.5vw, 72px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.live-foundation h2 span {
    display: block;

    color: #929eaa;

    font-style: italic;
}

.live-foundation-copy > p:last-child {
    max-width: 780px;

    margin: 30px 0 0;

    color: #838f9a;

    font-size: 15px;
    line-height: 1.8;
}

.live-foundation-status {
    min-width: 180px;

    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 36px;
}

.foundation-status-line {
    width: 34px;
    height: 1px;

    background: var(--live-gold);
}

.live-foundation-status small {
    display: block;

    margin-bottom: 5px;

    color: #596571;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.live-foundation-status strong {
    color: #aab4bd;

    font-size: 9px;
    letter-spacing: 0.12em;
}


/* ================================================================================================
   FOOTER
================================================================================================ */

.live-footer {
    min-height: 92px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;

    border-top: 1px solid var(--live-line);

    color: #5f6a75;

    font-size: 9px;
    letter-spacing: 0.08em;
}

.live-footer > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.live-footer strong {
    color: #9da7b0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;
    font-weight: 400;
}

.live-footer-center {
    color: #515c67;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.live-footer a {
    justify-self: end;

    color: #7f8993;

    text-decoration: none;

    transition: color 180ms ease;
}

.live-footer a:hover {
    color: var(--live-gold-soft);
}


/* ================================================================================================
   FOCUS MODE
================================================================================================ */

body.live-focus-mode {
    overflow: hidden;
}

body.live-focus-mode .live-topbar,
body.live-focus-mode .live-intro,
body.live-focus-mode .live-stage-heading,
body.live-focus-mode .live-device-information,
body.live-focus-mode .live-foundation,
body.live-focus-mode .live-footer {
    display: none;
}

body.live-focus-mode .live-shell {
    width: 100%;
    height: 100vh;

    padding: 0;
}

body.live-focus-mode .live-control-deck {
    position: fixed;
    z-index: 100;

    top: max(14px, env(safe-area-inset-top));
    left: 50%;

    width: min(calc(100% - 28px), 980px);

    transform: translateX(-50%);

    margin: 0;

    border-color: rgba(210, 219, 228, 0.15);

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.48);
}

body.live-focus-mode .live-stage-section {
    height: 100vh;
}

body.live-focus-mode .live-stage {
    width: 100%;
    height: 100vh;
    min-height: 100vh;

    border: 0;
}


/* ================================================================================================
   RESPONSIVE — LARGE
================================================================================================ */

@media (min-width: 1800px) {

    .phone-device {
        --device-scale: 0.76;
    }

    .tablet-device {
        --device-scale: 0.59;
    }

    .desktop-device {
        --device-scale: 0.72;
    }
}


/* ================================================================================================
   RESPONSIVE — NOTEBOOK / SMALL DESKTOP
================================================================================================ */

@media (max-width: 1450px) {

    .live-shell {
        width: min(calc(100% - 44px), 1480px);
    }

    .live-intro {
        grid-template-columns: minmax(0, 1fr) 420px;
    }

    .phone-device {
        --device-scale: 0.66;
    }

    .tablet-device {
        --device-scale: 0.51;
    }

    .desktop-device {
        --device-scale: 0.59;
    }
}


/* ================================================================================================
   RESPONSIVE — TABLET / COMPACT DESKTOP
================================================================================================ */

@media (max-width: 1120px) {

    .live-shell {
        width: min(calc(100% - 36px), 1080px);
    }

    .live-intro {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .live-intro-meta {
        max-width: 620px;
    }

    .live-control-deck {
        align-items: stretch;
        flex-direction: column;
    }

    .live-device-selector,
    .live-action-controls {
        width: 100%;
    }

    .live-device-button {
        flex: 1;
        min-width: 0;
    }

    .live-action-controls {
        justify-content: flex-end;

        padding-top: 8px;

        border-top: 1px solid var(--live-line);
    }

    .live-device-information {
        grid-template-columns: 1fr;
    }

    .live-foundation {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .live-foundation-status {
        grid-column: 2;
    }

    .desktop-device {
        --device-scale: 0.5;
    }
}


/* ================================================================================================
   RESPONSIVE — MOBILE
================================================================================================ */

@media (max-width: 760px) {

    .live-shell {
        width: min(calc(100% - 28px), 720px);
    }

    .live-topbar {
        min-height: 66px;

        grid-template-columns: 1fr auto;
    }

    .live-topbar-status {
        display: none;
    }

    .live-brand-logo {
        width: 36px;
        height: 36px;
    }

    .live-brand-name {
        font-size: 17px;
    }

    .live-exit-label {
        display: none;
    }

    .live-intro {
        padding:
            66px
            0
            54px;
    }

    .live-intro h1 {
        font-size: clamp(46px, 14vw, 74px);
    }

    .live-lead {
        font-size: 14px;
        line-height: 1.72;
    }

    .live-intro-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .live-meta-item {
        padding: 17px 10px;
    }

    .live-meta-value {
        font-size: 20px;
    }

    .live-meta-label {
        font-size: 6px;
    }

    .live-control-deck {
        padding: 7px;
    }

    .live-device-selector {
        gap: 3px;
    }

    .live-device-button {
        min-height: 58px;

        justify-content: center;

        padding: 9px 7px;
    }

    .device-button-copy {
        display: none;
    }

    .device-button-phone {
        width: 14px;
        height: 23px;
    }

    .device-button-tablet {
        width: 19px;
        height: 24px;
    }

    .device-button-desktop {
        width: 27px;
        height: 17px;
    }

    .live-action-controls {
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        gap: 3px;
    }

    .live-control-button {
        min-width: 0;

        padding: 0 7px;

        font-size: 0;
    }

    .live-control-button > span:first-child {
        font-size: 16px;
    }

    .live-stage-heading {
        min-height: 78px;
    }

    .live-stage-heading h2 {
        font-size: 22px;
    }

    .live-stage-kicker {
        font-size: 6px;
    }

    .live-viewport-readout {
        font-size: 6px;
    }

    .live-viewport-readout strong {
        font-size: 9px;
    }

    .live-stage {
        height: 640px;
        min-height: 640px;
    }

    .device-scene {
        padding: 24px 12px;
    }

    .phone-device {
        --device-scale: 0.62;
    }

    .tablet-device {
        --device-scale: 0.42;
    }

    .desktop-device {
        --device-scale: 0.30;
    }

    .live-device-information {
        gap: 34px;

        padding:
            32px 0
            82px;
    }

    .live-device-info-main {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .live-info-index {
        font-size: 20px;
    }

    .live-device-info-main h3 {
        font-size: 27px;
    }

    .live-device-info-main p:last-child {
        font-size: 13px;
    }

    .live-device-specs {
        grid-template-columns: 1fr 1fr;
    }

    .live-device-specs > div {
        padding: 15px 13px;
    }

    .live-foundation {
        grid-template-columns: 1fr;
        gap: 24px;

        padding:
            88px 0;
    }

    .live-foundation-number {
        font-size: 20px;
    }

    .live-foundation h2 {
        font-size: clamp(37px, 10vw, 54px);
    }

    .live-foundation-copy > p:last-child {
        font-size: 14px;
    }

    .live-foundation-status {
        grid-column: auto;

        margin-top: 10px;
    }

    .live-footer {
        grid-template-columns: 1fr auto;

        min-height: 100px;
    }

    .live-footer-center {
        display: none;
    }

    .live-footer a {
        max-width: 130px;

        text-align: right;
    }

    body.live-focus-mode .live-control-deck {
        top: max(8px, env(safe-area-inset-top));

        width: calc(100% - 16px);
    }

    body.live-focus-mode .live-stage {
        height: 100dvh;
        min-height: 100dvh;
    }

    body.live-focus-mode .live-stage-section {
        height: 100dvh;
    }
}


/* ================================================================================================
   RESPONSIVE — SMALL PHONE
================================================================================================ */

@media (max-width: 420px) {

    .live-shell {
        width: calc(100% - 22px);
    }

    .live-brand-subtitle {
        font-size: 7px;
        letter-spacing: 0.18em;
    }

    .live-intro h1 {
        font-size: 46px;
    }

    .live-eyebrow {
        font-size: 8px;
    }

    .live-intro-meta {
        grid-template-columns: 1fr;
    }

    .live-meta-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        border-right: 0;
        border-bottom: 1px solid var(--live-line);
    }

    .live-meta-item:last-child {
        border-bottom: 0;
    }

    .live-stage-heading {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 8px;

        padding: 14px 2px;
    }

    .live-stage {
        height: 590px;
        min-height: 590px;
    }

    .phone-device {
        --device-scale: 0.56;
    }

    .tablet-device {
        --device-scale: 0.36;
    }

    .desktop-device {
        --device-scale: 0.255;
    }

    .live-device-specs {
        grid-template-columns: 1fr;
    }

    .live-footer {
        grid-template-columns: 1fr;

        padding: 24px 0;
    }

    .live-footer a {
        justify-self: start;

        max-width: none;

        text-align: left;
    }
}


/* ================================================================================================
   LANDSCAPE MOBILE HOST DEVICE
================================================================================================ */

@media
(max-height: 540px)
and (orientation: landscape)
and (max-width: 960px) {

    .live-intro {
        padding: 46px 0;
    }

    .live-stage {
        height: 520px;
        min-height: 520px;
    }

    .phone-device {
        --device-scale: 0.48;
    }

    .tablet-device {
        --device-scale: 0.32;
    }

    .desktop-device {
        --device-scale: 0.34;
    }
}


/* ================================================================================================
   TOUCH
================================================================================================ */

@media (hover: none), (pointer: coarse) {

    .live-device-button,
    .live-control-button {
        min-height: 46px;
    }

    .live-device-button:hover,
    .live-control-button:hover {
        transform: none;
    }
}


/* ================================================================================================
   REDUCED MOTION
================================================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;
    }
}

/* ================================================================================================
   AURENGIS LIVE EXPERIENCE — LE-2B
   MULTI-PLATFORM CAPABILITY SYSTEM
================================================================================================ */

.live-intro h1 em {
  display: block;
  color: #9aa7b6;
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
}

.live-capabilities,
.live-principle,
.live-integrated-system,
.live-final-statement {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.live-capabilities {
  position: relative;
  padding: clamp(96px, 10vw, 170px) 0 clamp(88px, 9vw, 150px);
}

.live-capabilities::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(218, 176, 101, 0.35),
    transparent
  );
}

.live-capabilities-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  column-gap: clamp(50px, 8vw, 130px);
  row-gap: 28px;
  align-items: start;
  margin-bottom: clamp(58px, 7vw, 100px);
}

.live-section-kicker {
  margin: 0;
  color: #d9ad61;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
}

.live-capabilities-intro h2,
.live-integrated-copy h2,
.live-final-statement h2 {
  margin: 0;
  color: #f2f4f7;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.live-capabilities-intro h2 {
  max-width: 980px;
  font-size: clamp(2.3rem, 4.2vw, 4.8rem);
  line-height: 1.02;
}

.live-section-lead {
  grid-column: 2;
  max-width: 850px;
  margin: 0;
  color: #9da8b5;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.9;
}

.live-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.live-capability-card {
  position: relative;
  min-height: 390px;
  padding: clamp(30px, 3vw, 48px);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(210, 165, 88, 0.08),
      transparent 38%
    ),
    rgba(7, 16, 28, 0.45);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 240ms ease,
    transform 240ms ease;
}

.live-capability-card:hover {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(210, 165, 88, 0.13),
      transparent 42%
    ),
    rgba(10, 22, 37, 0.72);
}

.live-capability-index {
  display: block;
  margin-bottom: 42px;
  color: rgba(224, 184, 111, 0.72);
  font-size: 0.67rem;
  letter-spacing: 0.22em;
}

.live-capability-icon {
  position: absolute;
  top: 38px;
  right: 40px;
  color: rgba(221, 181, 109, 0.45);
  font-size: 1.65rem;
  font-weight: 300;
}

.live-capability-card h3 {
  margin: 0 0 18px;
  color: #f0f2f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 400;
}

.live-capability-card > p {
  min-height: 78px;
  margin: 0 0 32px;
  color: #929eab;
  font-size: 0.94rem;
  line-height: 1.75;
}

.live-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-tech-list span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 10px;
  color: #bac2cb;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.095);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.live-principle {
  position: relative;
  padding: clamp(105px, 12vw, 190px) clamp(20px, 5vw, 80px);
  text-align: center;
}

.live-principle-line {
  width: 1px;
  height: 80px;
  margin: 0 auto 44px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(220, 177, 101, 0.8)
  );
}

.live-principle blockquote {
  max-width: 1160px;
  margin: 30px auto 36px;
  color: #f1f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.6vw, 5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.live-principle-copy {
  max-width: 780px;
  margin: 0 auto;
  color: #929eab;
  font-size: 1rem;
  line-height: 1.9;
}

.live-integrated-system {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
  padding: clamp(80px, 9vw, 145px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.live-integrated-copy h2 {
  margin-top: 24px;
  font-size: clamp(2.2rem, 3.8vw, 4.2rem);
  line-height: 1.05;
}

.live-integrated-copy > p:last-child {
  max-width: 690px;
  margin: 30px 0 0;
  color: #99a4b0;
  font-size: 1rem;
  line-height: 1.9;
}

.live-system-architecture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 13px;
  align-items: center;
}

.live-system-node {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 25px;
  background: rgba(7, 17, 29, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.live-system-node strong {
  color: #eef1f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.live-system-node span {
  margin-top: 7px;
  color: #788796;
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-system-connector {
  color: #c79a51;
  font-size: 0.85rem;
}

.live-final-statement {
  padding: clamp(110px, 13vw, 210px) 0;
  text-align: center;
}

.live-final-statement > p:first-child {
  margin: 0 0 26px;
  color: #d6a85d;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.live-final-statement h2 {
  max-width: 1000px;
  margin-inline: auto;
  font-size: clamp(2.5rem, 4.7vw, 5.2rem);
  line-height: 1.03;
}

.live-final-statement > p:nth-of-type(2) {
  max-width: 800px;
  margin: 34px auto 0;
  color: #98a4b0;
  font-size: 1rem;
  line-height: 1.9;
}

.live-final-cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 52px;
  margin-top: 46px;
  padding: 0 25px;
  color: #0b1420;
  background: #ddb264;
  border: 1px solid #ddb264;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.live-final-cta:hover {
  transform: translateY(-2px);
  background: #e7c17b;
}

/* ================================================================================================
   LE-2B RESPONSIVE
================================================================================================ */

@media (max-width: 1100px) {

  .live-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-integrated-system {
    grid-template-columns: 1fr;
  }

  .live-system-architecture {
    max-width: 800px;
  }
}

@media (max-width: 760px) {

  .live-capabilities-intro {
    grid-template-columns: 1fr;
  }

  .live-section-lead {
    grid-column: 1;
  }

  .live-capability-grid {
    grid-template-columns: 1fr;
  }

  .live-capability-card {
    min-height: auto;
  }

  .live-capability-card > p {
    min-height: 0;
  }

  .live-system-architecture {
    grid-template-columns: 1fr;
  }

  .live-system-connector {
    transform: rotate(90deg);
    justify-self: center;
  }

  .live-principle {
    padding-inline: 0;
  }
}

@media (hover: none), (pointer: coarse) {

  .live-capability-card:hover,
  .live-final-cta:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .live-capability-card,
  .live-final-cta {
    transition: none;
  }
}

/* ================================================================================================
   AURENGIS LIVE EXPERIENCE — LE-3 CANONICAL DEVICE GEOMETRY
   True virtual viewports / real orientation / dynamic scale / viewport presets
================================================================================================ */

.live-experience-page {
    --le3-device-scale: 1;
    --le3-viewport-scale: 1;
}

/* LE-3 owns device scale from JavaScript. */
.live-experience-page .phone-device,
.live-experience-page .tablet-device,
.live-experience-page .desktop-device {
    --device-scale: var(--le3-device-scale) !important;
}

/* Remove legacy visual-only rotation.
   LE-3 changes the actual hardware geometry and virtual viewport instead. */
.live-shell[data-orientation="landscape"] .phone-device,
.live-shell[data-orientation="landscape"] .tablet-device {
    transform: none !important;
}

/* -----------------------------------------------------------------------------------------------
   TRUE VIRTUAL VIEWPORT
------------------------------------------------------------------------------------------------ */

.live-experience-page .virtual-viewport {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    transform:
        scale(var(--le3-viewport-scale)) !important;

    transform-origin:
        top left !important;

    will-change:
        transform;

    transition:
        none !important;
}

.live-experience-page .virtual-viewport > iframe,
.live-experience-page .live-iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0;
    padding: 0;

    border: 0;
}

/* -----------------------------------------------------------------------------------------------
   PHONE — REAL LANDSCAPE HARDWARE
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="landscape"] .phone-device {
    width:
        calc(900px * var(--device-scale)) !important;

    height:
        calc(430px * var(--device-scale)) !important;
}

.live-shell[data-orientation="landscape"] .phone-frame {
    border-radius:
        calc(58px * var(--device-scale)) !important;
}

.live-shell[data-orientation="landscape"] .phone-screen {
    top:
        calc(12px * var(--device-scale)) !important;

    right:
        calc(12px * var(--device-scale)) !important;

    bottom:
        calc(12px * var(--device-scale)) !important;

    left:
        calc(12px * var(--device-scale)) !important;

    border-radius:
        calc(45px * var(--device-scale)) !important;
}

/* Landscape camera island follows the long edge. */
.live-shell[data-orientation="landscape"] .phone-dynamic-island {
    top:
        calc(14px * var(--device-scale)) !important;

    left:
        50% !important;

    width:
        calc(116px * var(--device-scale)) !important;

    height:
        calc(31px * var(--device-scale)) !important;

    transform:
        translateX(-50%) !important;
}

.live-shell[data-orientation="landscape"] .phone-speaker {
    top:
        calc(5px * var(--device-scale)) !important;

    left:
        50% !important;

    transform:
        translateX(-50%) !important;
}

/* -----------------------------------------------------------------------------------------------
   TABLET — REAL LANDSCAPE HARDWARE
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="landscape"] .tablet-device {
    width:
        calc(1240px * var(--device-scale)) !important;

    height:
        calc(880px * var(--device-scale)) !important;
}

.live-shell[data-orientation="landscape"] .tablet-frame {
    border-radius:
        calc(40px * var(--device-scale)) !important;
}

.live-shell[data-orientation="landscape"] .tablet-screen {
    top:
        calc(26px * var(--device-scale)) !important;

    right:
        calc(26px * var(--device-scale)) !important;

    bottom:
        calc(26px * var(--device-scale)) !important;

    left:
        calc(26px * var(--device-scale)) !important;

    border-radius:
        calc(25px * var(--device-scale)) !important;
}

.live-shell[data-orientation="landscape"] .tablet-camera {
    top:
        calc(9px * var(--device-scale)) !important;

    left:
        50% !important;

    transform:
        translateX(-50%) !important;
}

/* -----------------------------------------------------------------------------------------------
   VIEWPORT PRESET CONTROL
------------------------------------------------------------------------------------------------ */

.le3-viewport-presets {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;
}

.le3-viewport-presets-label {
    color:
        var(--live-muted);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}

.le3-viewport-select {
    min-height:
        42px;

    padding:
        0 36px 0 14px;

    border:
        1px solid rgba(202, 215, 230, 0.15);

    border-radius:
        7px;

    outline:
        none;

    color:
        var(--live-text);

    background:
        #0b1420;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        750;

    letter-spacing:
        0.04em;

    cursor:
        pointer;

    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.le3-viewport-select:hover,
.le3-viewport-select:focus-visible {
    border-color:
        rgba(225, 189, 123, 0.52);

    background:
        #101b29;
}

.le3-viewport-select option {
    color:
        #f1f3f5;

    background:
        #0b1420;
}

/* -----------------------------------------------------------------------------------------------
   PERFORMANCE STATE
------------------------------------------------------------------------------------------------ */

.live-iframe[data-le3-suspended="true"] {
    visibility:
        hidden;
}

.live-iframe[data-le3-active="true"] {
    visibility:
        visible;
}

/* -----------------------------------------------------------------------------------------------
   DYNAMIC GEOMETRY STABILITY
------------------------------------------------------------------------------------------------ */

.live-experience-page .phone-device,
.live-experience-page .tablet-device,
.live-experience-page .desktop-device {
    transition:
        width 220ms ease,
        height 220ms ease,
        filter 220ms ease;
}

.live-experience-page .phone-screen,
.live-experience-page .tablet-screen,
.live-experience-page .desktop-screen {
    contain:
        layout paint;
}

/* Host stage must not clip a correctly fitted device. */
.live-experience-page .live-stage {
    overflow:
        hidden;
}

/* -----------------------------------------------------------------------------------------------
   MOBILE HOST
------------------------------------------------------------------------------------------------ */

@media (max-width: 760px) {

    .le3-viewport-presets {
        width:
            100%;

        justify-content:
            space-between;
    }

    .le3-viewport-select {
        flex:
            1;

        min-width:
            0;
    }

}

@media (max-width: 420px) {

    .le3-viewport-presets-label {
        display:
            none;
    }

}

/* -----------------------------------------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .live-experience-page .phone-device,
    .live-experience-page .tablet-device,
    .live-experience-page .desktop-device {
        transition:
            none !important;
    }

}


/* ================================================================================================
   AURENGIS LIVE EXPERIENCE
   LE-3F — PHYSICAL PHONE CAMERA ROTATION

   The phone rotates as physical hardware.
   Therefore the Dynamic Island / front camera rotates WITH the chassis:
     Portrait  -> top center, horizontal
     Landscape -> left center, vertical

   This does NOT modify the virtual viewport engine.
================================================================================================ */

/* -----------------------------------------------------------------------------------------------
   PORTRAIT — canonical physical position
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="portrait"] .phone-dynamic-island {
    top:
        calc(14px * var(--device-scale)) !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        50% !important;

    width:
        calc(116px * var(--device-scale)) !important;

    height:
        calc(31px * var(--device-scale)) !important;

    transform:
        translateX(-50%) !important;

    transform-origin:
        center center !important;
}


/* -----------------------------------------------------------------------------------------------
   LANDSCAPE — rotate WITH the physical phone
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="landscape"] .phone-dynamic-island {
    top:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        calc(14px * var(--device-scale)) !important;

    width:
        calc(31px * var(--device-scale)) !important;

    height:
        calc(116px * var(--device-scale)) !important;

    transform:
        translateY(-50%) !important;

    transform-origin:
        center center !important;

    border-radius:
        calc(20px * var(--device-scale)) !important;
}


/* -----------------------------------------------------------------------------------------------
   CAMERA LENS
   Keep the lens attached to the Dynamic Island instead of independently moving it.
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="portrait"] .phone-dynamic-island::before,
.live-shell[data-orientation="portrait"] .phone-dynamic-island::after {
    transform-origin:
        center center !important;
}

.live-shell[data-orientation="landscape"] .phone-dynamic-island::before,
.live-shell[data-orientation="landscape"] .phone-dynamic-island::after {
    transform-origin:
        center center !important;
}


/* -----------------------------------------------------------------------------------------------
   LEGACY SPEAKER / CAMERA DECORATION

   If the original mockup contains an independent speaker element,
   it must rotate with the same physical edge as the camera assembly.
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="portrait"] .phone-speaker {
    top:
        calc(5px * var(--device-scale)) !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        50% !important;

    transform:
        translateX(-50%) !important;
}

.live-shell[data-orientation="landscape"] .phone-speaker {
    top:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        calc(5px * var(--device-scale)) !important;

    transform:
        translateY(-50%) rotate(90deg) !important;

    transform-origin:
        center center !important;
}


/* -----------------------------------------------------------------------------------------------
   LANDSCAPE SCREEN

   Preserve the real landscape viewport while leaving physical clearance
   for the camera assembly on the left edge.
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="landscape"] .phone-screen {
    top:
        calc(12px * var(--device-scale)) !important;

    right:
        calc(12px * var(--device-scale)) !important;

    bottom:
        calc(12px * var(--device-scale)) !important;

    left:
        calc(12px * var(--device-scale)) !important;

    border-radius:
        calc(45px * var(--device-scale)) !important;
}


/* -----------------------------------------------------------------------------------------------
   HARDWARE CONTINUITY

   Nothing inside the physical phone is independently rotated.
   LE-3 already supplies the real 844x390 / 800x360 / 932x430 viewport.
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="landscape"] .phone-device {
    transform:
        none !important;
}


/* ================================================================================================
   AURENGIS LIVE EXPERIENCE
   LE-3G — MINIMAL TRANSPARENT CAMERA

   Objective:
   - remove the black Dynamic Island appearance
   - show only one tiny semi-transparent camera circle
   - preserve physical camera position during rotation
   - never obstruct meaningful screen content
================================================================================================ */

/* -----------------------------------------------------------------------------------------------
   REMOVE DYNAMIC ISLAND VISUAL MASS
------------------------------------------------------------------------------------------------ */

.live-experience-page .phone-dynamic-island {
    background:
        transparent !important;

    background-color:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    outline:
        0 !important;

    overflow:
        visible !important;

    pointer-events:
        none !important;
}


/* Remove any decorative content inherited from the old island. */

.live-experience-page .phone-dynamic-island::before,
.live-experience-page .phone-dynamic-island::after {
    content:
        "" !important;

    position:
        absolute !important;

    display:
        block !important;

    box-sizing:
        border-box !important;

    width:
        calc(8px * var(--device-scale)) !important;

    height:
        calc(8px * var(--device-scale)) !important;

    min-width:
        3px !important;

    min-height:
        3px !important;

    max-width:
        8px !important;

    max-height:
        8px !important;

    border-radius:
        50% !important;

    pointer-events:
        none !important;
}


/* One subtle external lens ring. */

.live-experience-page .phone-dynamic-island::before {
    top:
        50% !important;

    left:
        50% !important;

    transform:
        translate(-50%, -50%) !important;

    background:
        rgba(120, 145, 165, 0.16) !important;

    border:
        1px solid rgba(185, 205, 220, 0.18) !important;

    box-shadow:
        0 0 3px rgba(0, 0, 0, 0.14) !important;
}


/* Tiny lens center. */

.live-experience-page .phone-dynamic-island::after {
    top:
        50% !important;

    left:
        50% !important;

    width:
        calc(3px * var(--device-scale)) !important;

    height:
        calc(3px * var(--device-scale)) !important;

    min-width:
        2px !important;

    min-height:
        2px !important;

    transform:
        translate(-50%, -50%) !important;

    background:
        rgba(105, 140, 165, 0.28) !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* -----------------------------------------------------------------------------------------------
   PORTRAIT

   Physical camera:
   top center
   tiny circular footprint only
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="portrait"] .phone-dynamic-island {
    top:
        calc(10px * var(--device-scale)) !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        50% !important;

    width:
        calc(10px * var(--device-scale)) !important;

    height:
        calc(10px * var(--device-scale)) !important;

    min-width:
        4px !important;

    min-height:
        4px !important;

    transform:
        translateX(-50%) !important;

    border-radius:
        50% !important;
}


/* -----------------------------------------------------------------------------------------------
   LANDSCAPE

   Same physical camera after rotating the phone:
   left center
   still only a tiny circular footprint
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="landscape"] .phone-dynamic-island {
    top:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        calc(10px * var(--device-scale)) !important;

    width:
        calc(10px * var(--device-scale)) !important;

    height:
        calc(10px * var(--device-scale)) !important;

    min-width:
        4px !important;

    min-height:
        4px !important;

    transform:
        translateY(-50%) !important;

    border-radius:
        50% !important;
}


/* -----------------------------------------------------------------------------------------------
   REMOVE LEGACY SPEAKER / EXTRA CAMERA ELEMENT

   The minimal circular camera above becomes the only visible front sensor.
------------------------------------------------------------------------------------------------ */

.live-experience-page .phone-speaker {
    display:
        none !important;

    visibility:
        hidden !important;

    opacity:
        0 !important;
}


/* -----------------------------------------------------------------------------------------------
   CLEAN SCREEN EDGE

   No artificial camera clearance is introduced into the viewport.
------------------------------------------------------------------------------------------------ */

.live-shell[data-orientation="portrait"] .phone-screen,
.live-shell[data-orientation="landscape"] .phone-screen {
    overflow:
        hidden !important;
}


/* -----------------------------------------------------------------------------------------------
   TOUCH / ACCESSIBILITY

   Decorative hardware must never capture interaction intended for the real website.
------------------------------------------------------------------------------------------------ */

.live-experience-page .phone-dynamic-island,
.live-experience-page .phone-dynamic-island::before,
.live-experience-page .phone-dynamic-island::after {
    pointer-events:
        none !important;

    user-select:
        none !important;
}


/* ================================================================================================
   AURENGIS LIVE EXPERIENCE — LE-4 EXPERIENCE STUDIO
   Executive product presentation / canonical global header / interactive experience console
================================================================================================ */

/* ------------------------------------------------------------------------------------------------
   CANONICAL HEADER

   Live Experience currently places the canonical header inside .live-shell.
   The shell is content-constrained, while every other AurenGIS page renders the header at 100vw.
   Counter the shell geometry ONLY for the header.
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-shell > .site-header {
    width: 100vw !important;
    max-width: none !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    height:
        var(--header-height) !important;

    border-radius:
        0 !important;
}

.live-experience-page .live-shell > .site-header .container {
    width: 100% !important;
    max-width: none !important;

    margin:
        0 !important;

    padding:
        0 22px !important;
}

/* Live Experience must not visually shrink the global brand. */

.live-experience-page .site-header .site-brand {
    width:
        330px !important;

    max-width:
        330px !important;
}

.live-experience-page .site-header .site-logo {
    width:
        305px !important;

    max-width:
        305px !important;

    max-height:
        88px !important;
}

/* ------------------------------------------------------------------------------------------------
   EXPERIENCE STUDIO INTRO
------------------------------------------------------------------------------------------------ */

.le4-studio-intro {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        88px
        minmax(0, 1fr)
        minmax(260px, 0.42fr);

    gap:
        clamp(28px, 4vw, 68px);

    align-items:
        end;

    margin:
        0 0
        clamp(34px, 4vw, 58px);

    padding:
        clamp(70px, 7vw, 112px)
        0
        clamp(44px, 5vw, 72px);

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.le4-studio-intro::before {
    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        88px;

    width:
        clamp(70px, 8vw, 130px);

    height:
        1px;

    background:
        #d6aa61;
}

.le4-studio-index {
    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        16px;

    padding-top:
        3px;
}

.le4-studio-index span {
    color:
        rgba(218, 177, 103, 0.72);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        26px;
}

.le4-studio-index i {
    width:
        1px;

    flex:
        1;

    min-height:
        72px;

    margin-left:
        7px;

    background:
        linear-gradient(
            180deg,
            rgba(213, 170, 95, 0.6),
            rgba(255, 255, 255, 0.05)
        );
}

.le4-studio-index small,
.le4-kicker {
    color:
        #7b8895;

    font-size:
        8px;

    font-weight:
        800;

    line-height:
        1.5;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;
}

.le4-kicker {
    margin:
        0 0 20px;

    color:
        #d9ad61;
}

.le4-studio-copy {
    max-width:
        950px;
}

.le4-studio-copy h2 {
    margin:
        0;

    color:
        #eef1f3;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5.1vw, 82px);

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}

.le4-studio-copy h2 span,
.le4-studio-copy h2 em {
    display:
        block;
}

.le4-studio-copy h2 em {
    color:
        #919eab;

    font-style:
        italic;

    font-weight:
        400;
}

.le4-studio-copy > p:last-child {
    max-width:
        760px;

    margin:
        28px 0 0;

    color:
        #8f9aa6;

    font-size:
        clamp(14px, 1.05vw, 17px);

    line-height:
        1.8;
}

.le4-studio-status {
    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    gap:
        22px;

    padding:
        0 0 4px
        clamp(22px, 3vw, 42px);

    border-left:
        1px solid rgba(255, 255, 255, 0.09);
}

.le4-live-status {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.le4-live-dot {
    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border:
        1px solid rgba(218, 177, 103, 0.85);

    border-radius:
        50%;

    background:
        rgba(218, 177, 103, 0.2);

    box-shadow:
        0 0 0 4px rgba(218, 177, 103, 0.04),
        0 0 18px rgba(218, 177, 103, 0.16);

    animation:
        le4LivePulse 2.4s ease-in-out infinite;
}

@keyframes le4LivePulse {
    0%, 100% {
        opacity:
            0.55;
    }

    50% {
        opacity:
            1;
    }
}

.le4-live-status small,
.le4-session-code small {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #5e6a77;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.le4-live-status strong,
.le4-session-code strong {
    color:
        #bbc3ca;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}

/* ------------------------------------------------------------------------------------------------
   EXECUTIVE CONTROL CONSOLE
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-control-deck {
    position:
        relative;

    min-height:
        92px;

    gap:
        24px;

    margin-bottom:
        0;

    padding:
        10px 12px;

    border:
        1px solid rgba(202, 215, 230, 0.13);

    border-bottom:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(14, 25, 39, 0.97),
            rgba(7, 14, 23, 0.98)
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter:
        blur(22px);
}

.live-experience-page .live-control-deck::before {
    content:
        "AURENGIS EXPERIENCE CONSOLE";

    position:
        absolute;

    left:
        18px;

    bottom:
        -28px;

    z-index:
        30;

    color:
        rgba(112, 126, 140, 0.58);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.24em;

    pointer-events:
        none;
}

.live-experience-page .live-device-selector {
    gap:
        8px;
}

.live-experience-page .live-device-button {
    position:
        relative;

    min-width:
        178px;

    min-height:
        66px;

    padding:
        12px 18px;

    border:
        1px solid rgba(255, 255, 255, 0.055);

    background:
        rgba(255, 255, 255, 0.012);

    overflow:
        hidden;
}

.live-experience-page .live-device-button::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        2px;

    height:
        100%;

    background:
        transparent;

    transition:
        background 180ms ease;
}

.live-experience-page .live-device-button.is-active {
    border-color:
        rgba(218, 177, 103, 0.27);

    background:
        linear-gradient(
            110deg,
            rgba(218, 177, 103, 0.09),
            rgba(255, 255, 255, 0.018) 65%
        );

    box-shadow:
        inset 0 0 35px rgba(218, 177, 103, 0.025);
}

.live-experience-page .live-device-button.is-active::before {
    background:
        #d6aa61;
}

.live-experience-page .device-button-copy strong {
    font-size:
        11px;

    letter-spacing:
        0.07em;
}

.live-experience-page .device-button-copy small {
    font-family:
        Consolas,
        "SFMono-Regular",
        monospace;

    font-size:
        8px;

    letter-spacing:
        0.08em;
}

.live-experience-page .live-action-controls {
    gap:
        4px;

    padding-left:
        20px;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);
}

.live-experience-page .live-control-button {
    min-height:
        46px;

    padding:
        0 15px;

    border:
        1px solid transparent;

    color:
        #7f8b97;
}

.live-experience-page .live-control-primary {
    min-width:
        100px;

    color:
        #e3c17e;

    border-color:
        rgba(218, 177, 103, 0.25);

    background:
        linear-gradient(
            180deg,
            rgba(218, 177, 103, 0.09),
            rgba(218, 177, 103, 0.025)
        );
}

/* ------------------------------------------------------------------------------------------------
   STAGE HEADER
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-stage-heading {
    min-height:
        108px;

    padding:
        26px 6px 20px;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    border-right:
        1px solid rgba(255, 255, 255, 0.08);
}

.live-experience-page .live-stage-heading > div:first-child {
    padding-left:
        20px;
}

.live-experience-page .live-stage-kicker {
    color:
        #d2a65e;

    font-size:
        7px;
}

.live-experience-page .live-stage-heading h2 {
    font-size:
        clamp(27px, 2.2vw, 37px);
}

.live-experience-page .live-viewport-readout {
    padding-right:
        20px;
}

.live-experience-page .live-viewport-readout strong {
    font-family:
        Consolas,
        "SFMono-Regular",
        monospace;

    color:
        #d4dae0;

    font-size:
        12px;
}

/* ------------------------------------------------------------------------------------------------
   PRODUCT STAGE
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-stage {
    min-height:
        clamp(660px, 76vh, 900px);

    height:
        clamp(660px, 76vh, 900px);

    border-color:
        rgba(202, 215, 230, 0.13);

    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(57, 83, 108, 0.16),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 50% 96%,
            rgba(192, 148, 77, 0.055),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #08121e 0%,
            #050b12 70%,
            #04080d 100%
        );
}

.live-experience-page .live-stage-grid {
    opacity:
        0.28;

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.18),
            black 24%,
            black 76%,
            transparent
        );
}

.live-experience-page .live-stage::after {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    left:
        12%;

    right:
        12%;

    bottom:
        10%;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(210, 220, 230, 0.11),
            rgba(218, 177, 103, 0.14),
            rgba(210, 220, 230, 0.11),
            transparent
        );

    box-shadow:
        0 -28px 80px rgba(218, 177, 103, 0.025);
}

/* ------------------------------------------------------------------------------------------------
   STAGE TELEMETRY
------------------------------------------------------------------------------------------------ */

.le4-stage-telemetry {
    position:
        absolute;

    z-index:
        12;

    top:
        50%;

    width:
        min(220px, 18%);

    transform:
        translateY(-50%);

    pointer-events:
        none;
}

.le4-stage-telemetry-left {
    left:
        clamp(22px, 3vw, 52px);
}

.le4-stage-telemetry-right {
    right:
        clamp(22px, 3vw, 52px);

    text-align:
        right;
}

.le4-telemetry-head {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        32px;

    padding-bottom:
        14px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.le4-telemetry-head strong {
    color:
        #b4bdc6;

    font-size:
        8px;

    letter-spacing:
        0.17em;
}

.le4-stage-telemetry dl {
    margin:
        0;
}

.le4-stage-telemetry dl > div {
    padding:
        13px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);
}

.le4-stage-telemetry dt {
    margin-bottom:
        6px;

    color:
        #53616e;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.le4-stage-telemetry dd {
    margin:
        0;

    color:
        #aeb8c1;

    font-family:
        Consolas,
        "SFMono-Regular",
        monospace;

    font-size:
        9px;

    letter-spacing:
        0.04em;
}

.le4-telemetry-number {
    margin:
        0 0 34px;

    color:
        rgba(218, 177, 103, 0.46);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        24px;

    letter-spacing:
        0.04em;
}

.le4-proof {
    padding:
        20px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.le4-proof > span {
    display:
        block;

    margin-bottom:
        13px;

    color:
        #d2a65e;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.le4-proof strong {
    display:
        block;

    color:
        #d5dade;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    font-weight:
        400;
}

.le4-proof p {
    margin:
        12px 0 0;

    color:
        #6f7c88;

    font-size:
        10px;

    line-height:
        1.65;
}

.le4-proof-state {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        17px;
}

.le4-proof-state span {
    width:
        20px;

    height:
        1px;

    background:
        rgba(218, 177, 103, 0.55);
}

.le4-proof-state small {
    color:
        #687581;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}

.le4-stage-coordinate {
    position:
        absolute;

    z-index:
        4;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        rgba(110, 125, 139, 0.38);

    font-family:
        Consolas,
        "SFMono-Regular",
        monospace;

    font-size:
        7px;

    letter-spacing:
        0.18em;

    pointer-events:
        none;
}

.le4-coordinate-top {
    top:
        25px;
}

.le4-coordinate-bottom {
    bottom:
        25px;
}

/* Keep the physical device visually dominant. */

.live-experience-page .device-scene {
    z-index:
        8;

    padding:
        64px
        clamp(230px, 18vw, 310px);
}

.live-experience-page .device-shadow {
    opacity:
        0.8;

    filter:
        blur(34px);
}

/* ------------------------------------------------------------------------------------------------
   DEVICE INFORMATION — EXECUTIVE DATA STRIP
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-device-information {
    position:
        relative;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(480px, 0.85fr);

    gap:
        clamp(42px, 6vw, 90px);

    padding:
        clamp(38px, 4vw, 62px)
        clamp(4px, 1vw, 14px)
        clamp(90px, 9vw, 140px);
}

.live-experience-page .live-device-information::before {
    content:
        "REAL VIEWPORT / ACTIVE SESSION";

    position:
        absolute;

    top:
        18px;

    right:
        0;

    color:
        rgba(104, 118, 132, 0.42);

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.2em;
}

.live-experience-page .live-info-index {
    font-size:
        32px;
}

.live-experience-page .live-device-info-main h3 {
    font-size:
        clamp(29px, 2.5vw, 43px);
}

.live-experience-page .live-device-specs {
    background:
        rgba(255, 255, 255, 0.012);
}

.live-experience-page .live-device-specs > div {
    min-height:
        74px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

/* ------------------------------------------------------------------------------------------------
   FOUNDATION
------------------------------------------------------------------------------------------------ */

.le4-foundation {
    position:
        relative;
}

.le4-foundation::before {
    content:
        "";

    position:
        absolute;

    left:
        90px;

    top:
        0;

    width:
        1px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.07) 20%,
            rgba(255, 255, 255, 0.07) 80%,
            transparent
        );
}

.le4-foundation-primary {
    color:
        #e7e9eb !important;

    font-style:
        normal !important;
}

/* ------------------------------------------------------------------------------------------------
   TECHNOLOGY MATRIX
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-capability-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        0;

    counter-reset:
        le4matrix;
}

.live-experience-page .live-capability-card {
    min-height:
        330px;

    padding:
        clamp(34px, 4vw, 58px);

    border:
        0;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        transparent;
}

.live-experience-page .live-capability-card:nth-child(odd) {
    border-right:
        1px solid rgba(255, 255, 255, 0.1);
}

.live-experience-page .live-capability-card::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        1px;

    background:
        #d2a65e;

    transition:
        width 320ms ease;
}

.live-experience-page .live-capability-card:hover::after {
    width:
        100%;
}

.live-experience-page .live-capability-card:hover {
    transform:
        none;

    background:
        linear-gradient(
            135deg,
            rgba(218, 177, 103, 0.045),
            transparent 48%
        );
}

.live-experience-page .live-capability-index {
    margin-bottom:
        58px;
}

.live-experience-page .live-capability-card h3 {
    max-width:
        520px;

    font-size:
        clamp(26px, 2.5vw, 39px);
}

.live-experience-page .live-capability-card > p {
    max-width:
        610px;

    min-height:
        0;

    margin-bottom:
        36px;
}

/* ------------------------------------------------------------------------------------------------
   ARCHITECTURE PRESENTATION
------------------------------------------------------------------------------------------------ */

.le4-architecture-label {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        26px;

    color:
        #687581;
}

.le4-architecture-label span {
    color:
        rgba(218, 177, 103, 0.7);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;
}

.le4-architecture-label small {
    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.19em;
}

.le4-system-architecture {
    position:
        relative;

    padding:
        122px 0 62px;
}

.le4-architecture-core {
    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        min(330px, 70%);

    transform:
        translateX(-50%);

    padding:
        22px 26px;

    text-align:
        center;

    border:
        1px solid rgba(218, 177, 103, 0.28);

    background:
        linear-gradient(
            180deg,
            rgba(218, 177, 103, 0.075),
            rgba(9, 18, 29, 0.92)
        );
}

.le4-architecture-core::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -36px;

    width:
        1px;

    height:
        36px;

    background:
        linear-gradient(
            to bottom,
            rgba(218, 177, 103, 0.55),
            rgba(255, 255, 255, 0.09)
        );
}

.le4-architecture-core small {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #786a52;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.le4-architecture-core strong {
    display:
        block;

    color:
        #e9ebed;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        24px;

    font-weight:
        400;
}

.le4-architecture-core span {
    display:
        block;

    margin-top:
        5px;

    color:
        #687582;

    font-size:
        7px;

    letter-spacing:
        0.12em;
}

.le4-system-architecture .live-system-node {
    min-height:
        124px;

    position:
        relative;

    background:
        linear-gradient(
            145deg,
            rgba(11, 22, 36, 0.95),
            rgba(6, 13, 22, 0.9)
        );
}

.le4-system-architecture .live-system-node::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        24px;

    height:
        1px;

    background:
        rgba(218, 177, 103, 0.6);
}

.le4-architecture-footer {
    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        14px;

    align-items:
        center;

    margin-top:
        18px;

    color:
        #56636f;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}

.le4-architecture-footer i {
    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05),
            rgba(218, 177, 103, 0.38),
            rgba(255, 255, 255, 0.05)
        );
}

/* ------------------------------------------------------------------------------------------------
   FINAL STATEMENT
------------------------------------------------------------------------------------------------ */

.live-experience-page .live-final-statement {
    position:
        relative;

    max-width:
        1240px;

    padding:
        clamp(130px, 14vw, 230px)
        0;
}

.live-experience-page .live-final-statement::before {
    content:
        "AURENGIS / GLOBAL INTEGRATION SOFTWARE";

    display:
        block;

    margin-bottom:
        34px;

    color:
        rgba(112, 126, 140, 0.42);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.25em;
}

.live-experience-page .live-final-statement h2 {
    max-width:
        1120px;

    font-size:
        clamp(46px, 5.6vw, 94px);

    line-height:
        0.98;
}

.live-experience-page .live-final-cta {
    min-height:
        58px;

    margin-top:
        52px;

    padding:
        0 30px;
}

/* ------------------------------------------------------------------------------------------------
   FOCUS MODE — LE-4

   Keep the console usable while turning the simulator into a presentation room.
------------------------------------------------------------------------------------------------ */

body.live-focus-mode .le4-studio-intro,
body.live-focus-mode .live-capabilities,
body.live-focus-mode .live-principle,
body.live-focus-mode .live-integrated-system,
body.live-focus-mode .live-final-statement {
    display:
        none !important;
}

body.live-focus-mode .live-stage-heading {
    display:
        none !important;
}

body.live-focus-mode .le4-stage-telemetry {
    opacity:
        0.55;
}

body.live-focus-mode .live-control-deck::before {
    display:
        none;
}

/* ------------------------------------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------------------------------------ */

@media (max-width: 1350px) {

    .le4-stage-telemetry {
        width:
            190px;
    }

    .live-experience-page .device-scene {
        padding-inline:
            205px;
    }

    .live-experience-page .live-device-button {
        min-width:
            150px;
    }
}

@media (max-width: 1120px) {

    .le4-studio-intro {
        grid-template-columns:
            62px
            minmax(0, 1fr);
    }

    .le4-studio-status {
        grid-column:
            2;

        flex-direction:
            row;

        justify-content:
            space-between;

        padding:
            24px 0 0;

        border-left:
            0;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);
    }

    .le4-stage-telemetry {
        top:
            auto;

        bottom:
            24px;

        width:
            210px;

        transform:
            none;

        opacity:
            0.78;
    }

    .le4-stage-telemetry-left {
        left:
            24px;
    }

    .le4-stage-telemetry-right {
        right:
            24px;
    }

    .le4-telemetry-head {
        margin-bottom:
            12px;
    }

    .le4-stage-telemetry dl > div:nth-child(1),
    .le4-stage-telemetry dl > div:nth-child(2) {
        display:
            none;
    }

    .le4-proof p,
    .le4-telemetry-number {
        display:
            none;
    }

    .live-experience-page .device-scene {
        padding:
            48px 40px 150px;
    }

    .live-experience-page .live-device-information {
        grid-template-columns:
            1fr;
    }

    .live-experience-page .live-capability-grid {
        grid-template-columns:
            1fr 1fr;
    }
}

@media (max-width: 1050px) {

    /* Return header sizing authority to canonical responsive.css. */

    .live-experience-page .site-header .site-brand {
        width:
            auto !important;

        max-width:
            none !important;
    }

    .live-experience-page .site-header .site-logo {
        width:
            100% !important;

        max-width:
            188px !important;

        max-height:
            58px !important;
    }

    .live-experience-page .live-shell > .site-header .container {
        padding-left:
            max(12px, env(safe-area-inset-left)) !important;

        padding-right:
            max(12px, env(safe-area-inset-right)) !important;
    }
}

@media (max-width: 760px) {

    .le4-studio-intro {
        grid-template-columns:
            1fr;

        padding:
            68px 0 46px;
    }

    .le4-studio-intro::before {
        left:
            0;
    }

    .le4-studio-index {
        display:
            none;
    }

    .le4-studio-copy h2 {
        font-size:
            clamp(42px, 12vw, 64px);
    }

    .le4-studio-status {
        grid-column:
            1;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            16px;
    }

    .live-experience-page .live-control-deck::before {
        display:
            none;
    }

    .live-experience-page .live-control-deck {
        min-height:
            auto;
    }

    .live-experience-page .live-device-button {
        min-width:
            0;
    }

    .live-experience-page .live-stage {
        height:
            650px;

        min-height:
            650px;
    }

    .le4-stage-telemetry {
        display:
            none;
    }

    .le4-stage-coordinate {
        display:
            none;
    }

    .live-experience-page .device-scene {
        padding:
            30px 14px;
    }

    .live-experience-page .live-stage-heading {
        min-height:
            92px;

        padding:
            18px 4px;
    }

    .live-experience-page .live-stage-heading > div:first-child {
        padding-left:
            8px;
    }

    .live-experience-page .live-viewport-readout {
        padding-right:
            8px;
    }

    .live-experience-page .live-device-information::before {
        display:
            none;
    }

    .live-experience-page .live-capability-grid {
        grid-template-columns:
            1fr;
    }

    .live-experience-page .live-capability-card:nth-child(odd) {
        border-right:
            0;
    }

    .le4-foundation::before {
        display:
            none;
    }

    .le4-system-architecture {
        padding-top:
            130px;
    }

    .le4-architecture-footer {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .le4-architecture-footer i {
        display:
            none;
    }

    body.live-focus-mode .le4-stage-telemetry {
        display:
            none;
    }
}

@media (max-width: 420px) {

    .le4-studio-copy h2 {
        font-size:
            44px;
    }

    .live-experience-page .live-stage {
        height:
            590px;

        min-height:
            590px;
    }

    .live-experience-page .live-capability-card {
        padding:
            32px 4px;
    }
}

@media (hover: none), (pointer: coarse) {

    .live-experience-page .live-capability-card:hover::after {
        width:
            0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .le4-live-dot {
        animation:
            none;
    }

    .live-experience-page .live-capability-card::after {
        transition:
            none;
    }
}

/* LE-HERO-V5:START
   ============================================================
   AURENGIS LIVE EXPERIENCE — EDITORIAL HERO V5
   Hero-only refinement.
   Preserves LE-3G / LE-3H / LE-4 systems.
   ============================================================ */

/* ------------------------------------------------------------
   HERO TYPOGRAPHIC SYSTEM
   ------------------------------------------------------------ */

.live-experience-hero .eyebrow,
.live-experience-hero .section-eyebrow,
.live-experience-hero [class*="eyebrow"] {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 22px;

  color: #e4b96c;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.24em;
  text-transform: uppercase;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.72);
}

.live-experience-hero .eyebrow::before,
.live-experience-hero .section-eyebrow::before,
.live-experience-hero [class*="eyebrow"]::before {
  content: "";

  display: block;

  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  background:
    linear-gradient(
      90deg,
      rgba(228, 185, 108, 0.16),
      rgba(228, 185, 108, 0.98)
    );
}

/* ------------------------------------------------------------
   MAIN TITLE
   ------------------------------------------------------------ */

.live-experience-hero h1 {
  width: min(100%, 820px);
  max-width: 820px;

  margin: 0;

  color: #f7f4ed;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: clamp(68px, 6vw, 100px);
  font-weight: 500;

  line-height: 0.87;
  letter-spacing: -0.048em;

  text-wrap: balance;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.78),
    0 8px 24px rgba(0, 0, 0, 0.36);
}

/*
  JS converts the translated title into two semantic visual lines.
  No language is hardcoded in CSS.
*/

.live-experience-title-line {
  display: block;

  opacity: 0;

  filter: blur(4px);

  will-change:
    transform,
    opacity,
    filter;

  transition:
    transform 1050ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 720ms ease,
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.live-experience-title-line:first-child {
  color: #f7f4ed;

  transform:
    translate3d(0, 24px, 0);
}

.live-experience-title-line:last-child {
  color: #e4b96c;

  transform:
    translate3d(0, 30px, 0);

  transition-delay: 120ms;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.78),
    0 8px 24px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(201, 154, 75, 0.08);
}

.live-experience-hero.is-le-hero-visible
.live-experience-title-line {
  opacity: 1;

  filter: blur(0);

  transform:
    translate3d(0, 0, 0);
}

/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.live-experience-hero p,
.live-experience-hero .hero-description,
.live-experience-hero [class*="description"] {
  max-width: 720px;

  color: rgba(231, 236, 239, 0.84);

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 400;

  line-height: 1.78;
  letter-spacing: -0.008em;
}

/*
  Apply reveal only to the principal paragraph selected by JS.
*/
.live-experience-hero .le-hero-support-copy {
  opacity: 0;

  transform:
    translate3d(0, 14px, 0);

  transition:
    opacity 760ms ease 340ms,
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1) 340ms;
}

.live-experience-hero.is-le-hero-visible
.le-hero-support-copy {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}

/* ------------------------------------------------------------
   RIGHT-SIDE METRICS
   ------------------------------------------------------------ */

.live-experience-hero .le-hero-metric-refined {
  opacity: 0;

  transform:
    translate3d(0, 10px, 0);

  transition:
    opacity 680ms ease,
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.live-experience-hero .le-hero-metric-refined:nth-child(1) {
  transition-delay: 430ms;
}

.live-experience-hero .le-hero-metric-refined:nth-child(2) {
  transition-delay: 510ms;
}

.live-experience-hero .le-hero-metric-refined:nth-child(3) {
  transition-delay: 590ms;
}

.live-experience-hero.is-le-hero-visible
.le-hero-metric-refined {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}

/*
  Improve contrast of existing metric typography without changing
  the metric structure or its content.
*/
.live-experience-hero .le-hero-metric-refined strong,
.live-experience-hero .le-hero-metric-refined b {
  color: #f7f4ed;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-weight: 500;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.36);
}

.live-experience-hero .le-hero-metric-refined small,
.live-experience-hero .le-hero-metric-refined span {
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 1500px) {

  .live-experience-hero h1 {
    max-width: 900px;

    font-size:
      clamp(76px, 5.8vw, 106px);
  }

  .live-experience-hero p,
  .live-experience-hero .hero-description,
  .live-experience-hero [class*="description"] {
    max-width: 750px;

    font-size: 16px;
  }
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

  .live-experience-hero h1 {
    max-width: 720px;

    font-size:
      clamp(60px, 8vw, 82px);
  }

  .live-experience-hero p,
  .live-experience-hero .hero-description,
  .live-experience-hero [class*="description"] {
    max-width: 650px;

    font-size: 14px;
  }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

  .live-experience-hero .eyebrow,
  .live-experience-hero .section-eyebrow,
  .live-experience-hero [class*="eyebrow"] {
    gap: 10px;

    margin-bottom: 17px;

    font-size: 9px;
    letter-spacing: 0.19em;
  }

  .live-experience-hero .eyebrow::before,
  .live-experience-hero .section-eyebrow::before,
  .live-experience-hero [class*="eyebrow"]::before {
    width: 28px;
  }

  .live-experience-hero h1 {
    width: 100%;
    max-width: none;

    font-size:
      clamp(49px, 14vw, 67px);

    line-height: 0.90;
    letter-spacing: -0.043em;
  }

  .live-experience-title-line:first-child {
    transform:
      translate3d(0, 17px, 0);
  }

  .live-experience-title-line:last-child {
    transform:
      translate3d(0, 21px, 0);
  }

  .live-experience-hero.is-le-hero-visible
  .live-experience-title-line {
    transform:
      translate3d(0, 0, 0);
  }

  .live-experience-hero p,
  .live-experience-hero .hero-description,
  .live-experience-hero [class*="description"] {
    width: 100%;
    max-width: 100%;

    font-size: 12px;
    line-height: 1.72;
  }
}

/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .live-experience-title-line,
  .live-experience-hero .le-hero-support-copy,
  .live-experience-hero .le-hero-metric-refined {
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;

    filter: none !important;

    transform: none !important;
  }
}

/* LE-HERO-V5:END */

/* LE-CANONICAL-TITLE:START
   ============================================================
   LIVE EXPERIENCE — CANONICAL AURENGIS TITLE
   Restores the same visual hierarchy used across the website.
   ============================================================ */

/* Eyebrow */
.live-experience-hero .eyebrow,
.live-experience-hero .section-eyebrow,
.live-experience-hero [class*="eyebrow"] {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 20px;

  color: #d7aa59;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.live-experience-hero .eyebrow::before,
.live-experience-hero .section-eyebrow::before,
.live-experience-hero [class*="eyebrow"]::before {
  content: "";

  width: 30px;
  height: 1px;

  flex: 0 0 auto;

  background: #c99a4b;
}

/* ============================================================
   CANONICAL TITLE
   ============================================================ */

.live-experience-hero h1 {
  width: min(100%, 820px);
  max-width: 820px;

  margin: 0;

  color: #f4f2ec;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: clamp(58px, 5.15vw, 82px);
  font-weight: 500;

  line-height: 0.94;

  /*
    IMPORTANT:
    Removes the exaggerated spacing visible in the current version.
  */
  letter-spacing: -0.038em;
  word-spacing: normal;

  text-align: left;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.38),
    0 8px 22px rgba(0, 0, 0, 0.20);
}

/*
  V5 divided the translated heading into spans.
  Keep those spans structurally, but make them behave like
  normal canonical title lines.
*/

.live-experience-hero
.live-experience-title-line {
  display: block;

  color: #f4f2ec !important;

  margin: 0;
  padding: 0;

  opacity: 1;

  filter: none;

  transform: none;

  letter-spacing: inherit;
  word-spacing: normal;

  text-shadow: inherit;

  transition:
    opacity 650ms ease,
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

/*
  NO gold second line.
  Both lines use the same canonical title treatment.
*/

.live-experience-hero
.live-experience-title-line:first-child,
.live-experience-hero
.live-experience-title-line:last-child {
  color: #f4f2ec !important;

  margin: 0;

  filter: none;

  text-shadow: inherit;
}

/* Restrained entrance only — same hierarchy, no visual gimmick. */

.live-experience-hero:not(.is-le-hero-visible)
.live-experience-title-line:first-child {
  opacity: 0;

  transform: translate3d(0, 14px, 0);
}

.live-experience-hero:not(.is-le-hero-visible)
.live-experience-title-line:last-child {
  opacity: 0;

  transform: translate3d(0, 18px, 0);
}

.live-experience-hero.is-le-hero-visible
.live-experience-title-line {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}

/* ============================================================
   DESCRIPTION
   ============================================================ */

.live-experience-hero p,
.live-experience-hero .hero-description,
.live-experience-hero [class*="description"] {
  width: min(100%, 690px);
  max-width: 690px;

  margin-top: 30px;

  color: rgba(220, 227, 231, 0.78);

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;

  line-height: 1.78;
  letter-spacing: -0.005em;
}

/* ============================================================
   METRICS — KEEP CURRENT STRUCTURE
   ============================================================ */

.live-experience-hero
.le-hero-metric-refined strong,
.live-experience-hero
.le-hero-metric-refined b {
  color: #f2f0e9;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-weight: 500;

  letter-spacing: -0.02em;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

  .live-experience-hero h1 {
    width: min(100%, 720px);
    max-width: 720px;

    font-size: clamp(54px, 7vw, 72px);

    line-height: 0.95;
  }

  .live-experience-hero p,
  .live-experience-hero .hero-description,
  .live-experience-hero [class*="description"] {
    max-width: 620px;

    font-size: 13px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  .live-experience-hero .eyebrow,
  .live-experience-hero .section-eyebrow,
  .live-experience-hero [class*="eyebrow"] {
    margin-bottom: 15px;

    font-size: 9px;

    letter-spacing: 0.18em;
  }

  .live-experience-hero .eyebrow::before,
  .live-experience-hero .section-eyebrow::before,
  .live-experience-hero [class*="eyebrow"]::before {
    width: 24px;
  }

  .live-experience-hero h1 {
    width: 100%;
    max-width: none;

    font-size: clamp(46px, 12.5vw, 61px);

    line-height: 0.95;

    letter-spacing: -0.035em;
  }

  .live-experience-hero p,
  .live-experience-hero .hero-description,
  .live-experience-hero [class*="description"] {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    font-size: 12px;

    line-height: 1.7;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .live-experience-hero
  .live-experience-title-line {
    opacity: 1 !important;

    filter: none !important;

    transform: none !important;

    transition: none !important;
  }
}

/* LE-CANONICAL-TITLE:END */

/* LE-TITLE-REPAIR:START
   ============================================================
   AURENGIS LIVE EXPERIENCE — CANONICAL HERO
   Stable title. No word reconstruction.
   ============================================================ */

.live-experience-hero h1,
.live-hero h1,
.experience-hero h1 {
  width: min(100%, 830px);
  max-width: 830px;

  margin: 0;

  color: #f4f2ec;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: clamp(58px, 5.1vw, 82px);
  font-weight: 500;

  line-height: 0.94;
  letter-spacing: -0.038em;
  word-spacing: normal;

  text-align: left;

  text-wrap: balance;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.38),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

/*
  Defensive reset:
  if stale spans somehow remain in browser cache,
  they cannot reproduce the broken spaced typography.
*/
.live-experience-hero h1 span,
.live-hero h1 span,
.experience-hero h1 span {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font: inherit !important;

  letter-spacing: inherit !important;
  word-spacing: inherit !important;

  opacity: 1 !important;

  filter: none !important;

  transform: none !important;

  transition: none !important;
}

/* Eyebrow */
.live-experience-hero [data-le-i18n="eyebrow"],
.live-hero [data-le-i18n="eyebrow"],
.experience-hero [data-le-i18n="eyebrow"] {
  color: #d7aa59;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Description */
.live-experience-hero [data-le-i18n="description"],
.live-hero [data-le-i18n="description"],
.experience-hero [data-le-i18n="description"] {
  width: min(100%, 690px);
  max-width: 690px;

  margin-top: 29px;

  color: rgba(220, 227, 231, 0.80);

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;

  line-height: 1.78;
  letter-spacing: -0.005em;
}

/* Tablet */
@media (max-width: 1100px) {

  .live-experience-hero h1,
  .live-hero h1,
  .experience-hero h1 {
    max-width: 720px;

    font-size: clamp(53px, 7vw, 72px);
  }
}

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

  .live-experience-hero h1,
  .live-hero h1,
  .experience-hero h1 {
    width: 100%;
    max-width: none;

    font-size: clamp(45px, 12.4vw, 60px);

    line-height: 0.95;
    letter-spacing: -0.034em;
  }

  .live-experience-hero [data-le-i18n="description"],
  .live-hero [data-le-i18n="description"],
  .experience-hero [data-le-i18n="description"] {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    font-size: 12px;
    line-height: 1.70;
  }
}

/* LE-TITLE-REPAIR:END */