/* ================================
   Griploc Lounge — scalable 16:9 hero
   ================================ */

:root {
    --griploc-red: #a51f1f;
    --griploc-white: hsl(33, 31%, 93%);
    --page-black: #0d0d0d;
    --divider: rgba(255, 255, 255, 0.28);
    --focus-ring: rgba(255, 255, 255, 0.9);
}

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

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--page-black);
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Inter", Arial, sans-serif;
}

/* Centres the complete 16:9 composition in the browser. */
.lounge-page {
    width: 100%;
    min-height: 100svh;

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

    background: var(--page-black);
    overflow: hidden;
}

/*
   The hero preserves the same 16:9 shape as the Photoshop master.
   Container query units make the controls scale from the hero itself,
   rather than shifting independently with the browser window.
*/
.lounge-hero {
    position: relative;
   width: min(100vw, calc(100svh * 16 / 9));
    aspect-ratio: 16 / 9;
    container-type: inline-size;

    background-image: url("../assets/images/backgrounds/lounge-hero.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    overflow: hidden;
}

/* Shared coordinate space for every Lounge control. */
.hero-ui {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ---------- Bottom service dock ---------- */

.service-dock {
    position: absolute;
    left: 5.2%;
    bottom: 6.5%;
    

    display: grid;
   grid-template-columns: repeat(5, max-content);
    align-items: start;
    gap: 1.354cqw;
}

.service-action {
    position: relative;
    min-width: 0;
    min-height: 4.2cqw;
    padding: 0.55cqw 0.55cqw;

    display: grid;
    place-items: center;

    border: 0;
    background: transparent;
    color: var(--griploc-white);
    font: inherit;
    cursor: pointer;

    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease,
        text-shadow 260ms ease;
}


/* Thin vertical separators between service items. */
.service-action:not(:last-child)::after {
    content: "";
    position: absolute;

    top: 10%;
    right: -0.677cqw;

    width: max(1px, 0.052cqw);
    height: 80%;

    background: var(--divider);
}

.service-label {
    font-family: "Inter", Arial, sans-serif;

    display: block;
    width: 100%;

    white-space: nowrap;

    font-size: 1.00cqw;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.18;
    text-align: center;
    text-transform: uppercase;

    color: var(--griploc-red);
    text-shadow: 0 0.052cqw 0.156cqw rgba(0, 0, 0, 0.6);

    transition:
        color 180ms ease,
        text-shadow 260ms ease;
}


.service-action:hover,
.service-action:focus-visible {
    transform: translateY(-0.208cqw);
}

.service-action:hover .service-label,
.service-action:focus-visible .service-label {
    color: #cf3934;

    text-shadow:
        /* black readability halo */
        0 0 0.18cqw rgba(0, 0, 0, 0.90),
        0 0 0.42cqw rgba(0, 0, 0, 0.65),

        /* existing Griploc red glow */
        0 0 0.313cqw rgba(220, 40, 40, 0.45),
        0 0 0.729cqw rgba(220, 40, 40, 0.25);
}

/* Kept ready for the panel build. */
.service-action.is-active .service-label {
    color: #d54a4a;
    text-shadow: 0 0 0.42cqw rgba(220, 40, 40, 0.28);
}

.service-action:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.26cqw;
}

/* ---------- Right-side service panel ---------- */

.service-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;

    width: 34%;

    display: flex;
    flex-direction: column;

    background: linear-gradient(
    90deg,
    rgba(8, 8, 8, 0) 0%,
    rgba(8, 8, 8, 0.72) 6%,
    rgba(8, 8, 8, 0.9) 16%,
    rgba(8, 8, 8, 0.92) 100%
);

border: 0;

box-shadow:
    -1.2cqw 0 2.2cqw rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(0.52cqw);
    -webkit-backdrop-filter: blur(0.52cqw);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(calc(100% + 4cqw));

     transition:
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 500ms ease,
    visibility 0s linear 800ms;
}

.service-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    transition:
        transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 500ms ease,
        visibility 0s linear 0s;
}

/* Panel header */

.service-panel-header {
    position: relative;
    flex: 0 0 auto;

    display: block;

    padding: 3.1cqw 1.45cqw 0.35cqw;

    border-bottom: 0;
}

.service-panel-title {
    margin: 0;

    color: var(--griploc-red);

    font-family: "Inter", Arial, sans-serif;
    font-size: 1.05cqw;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

/* Panel close button */

.service-panel-close {
    position: absolute;
    top: 1.15cqw;
    right: 1.45cqw;

    flex: 0 0 auto;
    padding: 0.35cqw 0;

    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.68cqw;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 180ms ease,
        transform 180ms ease,
        text-shadow 220ms ease;
}

.service-panel-close:hover,
.service-panel-close:focus-visible {
    color: var(--griploc-red);
    transform: translateY(-0.104cqw);

    text-shadow:
        0 0 0.313cqw rgba(220, 40, 40, 0.4);
}

.service-panel-close:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.208cqw;
}

/* Scrollable panel content */

.service-panel-body {
    flex: 1 1 auto;
    min-height: 0;

    padding: 1.05cqw 1.45cqw 1.5cqw;

    overflow-y: auto;
    overscroll-behavior: contain;

   color: rgba(255, 255, 255, 0.82);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.86cqw;
    font-weight: 500;
    line-height: 1.55;
}

.service-panel-body p {
    margin: 0 0 1cqw;
}

.service-panel-body p:last-child {
    margin-bottom: 0;
}

/* ---------- Service panel typography ---------- */

.service-lead {
    margin: 0 0 1.35cqw;

    color: var(--griploc-white);

    font-family: "Anton", Impact, sans-serif;
    font-size: 2.15cqw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.service-intro {
    margin: 0 0 1.3cqw !important;

    color: rgba(255, 255, 255, 0.9);

    font-family: "Inter", Arial, sans-serif;
    font-size: 1.28cqw;
    font-weight: 600;
    line-height: 1.5;
}

.service-copy {
    margin: 0 0 1.5cqw !important;

    color: rgba(255, 255, 255, 0.82);

    font-family: "Inter", Arial, sans-serif;
    font-size: 1.38cqw;
    font-weight: 500;
    line-height: 1.55;
}

.service-statement {
    margin: 1.25cqw 0;

    color: var(--griploc-white);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.9cqw;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.4;
}

.service-contact-link {
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
    color: var(--griploc-red);

    font: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 180ms ease,
        text-shadow 220ms ease;
}

.service-contact-link:hover,
.service-contact-link:focus-visible {
    color: #d54a4a;

    text-shadow:
        0 0 0.313cqw rgba(220, 40, 40, 0.4);
}

.service-contact-link:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.15cqw;
}

/* Decorative seal watermark */

.service-panel-stamp {
    position: absolute;
    right: 1.4cqw;
    bottom: 1.15cqw;
    z-index: 0;

    display: block;
    width: 12cqw;
    height: auto;

    opacity: 0.09;
    filter: brightness(0) invert(1);
    transform: rotate(-15deg);
    transform-origin: center;

    pointer-events: none;
    user-select: none;
}

.service-panel-header,
.service-panel-body {
    position: relative;
    z-index: 1;
}

.service-panel:focus {
    outline: none;
}

/* ---------- Upward contact tray ---------- */

.contact-panel {
    position: absolute;
    left: 47.2%;
    bottom: 12.5%;
    z-index: 4;

    width: max-content;
    padding: 0.85cqw 1.05cqw;

    display: grid;
    gap: 0.7cqw;

    background: rgba(8, 8, 8, 0.78);
    border: 0;

    box-shadow:
        0 0.52cqw 1.56cqw rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(0.42cqw);
    -webkit-backdrop-filter: blur(0.42cqw);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(1cqw);
    transform-origin: bottom left;

    transition:
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 500ms ease,
    visibility 0s linear 800ms;
}

/* JavaScript will add this class when CONTACT is opened. */
.contact-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
    
    transition:
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 500ms ease,
    visibility 0s linear 0s;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 1.354cqw;
}

.contact-row + .contact-row {
    padding-top: 0.7cqw;
    border-top: max(1px, 0.052cqw) solid rgba(255, 255, 255, 0.18);
}

.contact-action {
    position: relative;

    min-width: 3.75cqw;
    padding: 0.417cqw 0.104cqw;

    display: grid;
    justify-items: center;
    gap: 0.417cqw;

    color: var(--griploc-white);
    text-decoration: none;
    text-transform: uppercase;

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.677cqw;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.15;
    white-space: nowrap;

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

.contact-action span {
    color: var(--griploc-white);

    text-shadow:
        0 0.052cqw 0.156cqw rgba(0, 0, 0, 0.55);
}

.contact-action img {
    display: block;

    width: 1.771cqw;
    height: 1.771cqw;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(17%)
        sepia(77%)
        saturate(3547%)
        hue-rotate(351deg)
        brightness(90%)
        contrast(93%);

    transition:
        filter 260ms ease,
        transform 260ms ease;
}

.contact-action.call-icon img,
.contact-action.facebook-icon img {
    width: 1.875cqw;
    height: 1.875cqw;
}

.contact-action:not(:last-child)::after {
    content: "";
    position: absolute;

    top: 10%;
    right: -0.677cqw;

    width: max(1px, 0.052cqw);
    height: 80%;

    background: var(--divider);
}

.contact-action:hover,
.contact-action:focus-visible {
    transform: translateY(-0.208cqw);
}

.contact-action:hover img,
.contact-action:focus-visible img {
    transform: translateY(-0.104cqw) scale(1.08);

    filter:
        brightness(1.15)
        drop-shadow(0 0 0.313cqw rgba(220, 40, 40, 0.45))
        drop-shadow(0 0 0.729cqw rgba(220, 40, 40, 0.25));
}

.contact-action:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.26cqw;
}

/* ---------- Copyright ---------- */

.copyright {
    position: absolute;

    left: 7%;
    bottom: 3.5%;

    margin: 0;

    color: rgba(255, 255, 255, 0.60);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.68cqw;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;

    z-index: 5;
}

/* ---------- Studio Mix + Studio Directory ---------- */

.lounge-utilities {
    position: absolute;
    right: 4.8%;
    bottom: 4.6%;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 1.771cqw;
}

.lounge-utilities .studio-mix,
.studio-directory > summary {
    padding: 0.521cqw 0.208cqw;

    display: inline-flex;
    align-items: center;
    gap: 0.365cqw;

    border: 0;
    background: transparent;
    color: var(--griploc-white);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.82cqw;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;

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

        margin: 0;
appearance: none;
-webkit-appearance: none;
}

/* Studio Mix interaction */

.lounge-utilities .studio-mix:hover,
.lounge-utilities .studio-mix:focus-visible {
    color: var(--griploc-red);
    transform: translateY(-0.156cqw);
}

.lounge-utilities .studio-mix:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.26cqw;
}

.studio-mix-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.studio-mix-credit {
    position: absolute;
   left: calc(7% + 0.75cqw);
    bottom: 5%;

    margin: 0;

    color: rgba(255, 255, 255, 0.60);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.68cqw;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;

    z-index: 5;
}

/* Directory button */

.studio-directory {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.studio-directory > summary {
    list-style: none;
    cursor: pointer;
}

.studio-directory > summary::-webkit-details-marker {
    display: none;
}

.studio-directory > summary::marker {
    content: "";
}

.studio-directory > summary:hover,
.studio-directory > summary:focus-visible,
.studio-directory.is-open > summary {
    color: var(--griploc-red);
    transform: translateY(-0.156cqw);
}

.studio-directory > summary:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.26cqw;
}

.directory-symbol {
    display: inline-block;

    transition: transform 220ms ease;
}

.studio-directory.is-open .directory-symbol {
    transform: rotate(45deg);
}

/* Directory menu */

.directory-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.7cqw);
    z-index: 8;

    width: 16cqw;
    padding: 0.45cqw 0.8cqw;

    display: grid;

    background: rgba(8, 8, 8, 0.84);

    box-shadow:
        0 0.52cqw 1.56cqw rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(0.42cqw);
    -webkit-backdrop-filter: blur(0.42cqw);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(1cqw);
    transform-origin: bottom right;

    transition:
        transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 500ms ease,
        visibility 0s linear 800ms;
}

.studio-directory.is-open .directory-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    transition:
        transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 500ms ease,
        visibility 0s linear 0s;
}

.directory-item {
    min-height: 2.65cqw;
    padding: 0.7cqw 0.25cqw;

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

    color: var(--griploc-white);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.72cqw;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
}

.directory-item + .directory-item {
    border-top:
        max(1px, 0.052cqw) solid rgba(255, 255, 255, 0.18);
}

/* Working room links */

.directory-link {
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.directory-link:hover,
.directory-link:focus-visible {
    color: var(--griploc-red);
    transform: translateX(-0.15cqw);
}

.directory-link:focus-visible {
    outline: max(2px, 0.104cqw) solid var(--focus-ring);
    outline-offset: 0.15cqw;
}

.directory-arrow {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.72cqw;
    font-weight: 600;
    line-height: 1;

    transition: transform 180ms ease;
}

.directory-link:hover .directory-arrow,
.directory-link:focus-visible .directory-arrow {
    transform: translateX(-0.2cqw);
}

/* Current room */

.directory-current {
    cursor: default;
}

.directory-current-crown {
    display: block;
    flex: 0 0 auto;

    width: 1.2cqw;
    height: 1.2cqw;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(17%)
        sepia(77%)
        saturate(3547%)
        hue-rotate(351deg)
        brightness(90%)
        contrast(93%);
}

/* Unreleased room */

.directory-coming-soon {
    color: rgba(255, 255, 255, 0.58);
    cursor: default;
}

.directory-coming-soon small {
    color: var(--griploc-red);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.72cqw;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

/*
   No width-based media queries are used for the desktop composition.
   The full hero and its controls scale together as one 16:9 unit.
*/

@media (prefers-reduced-motion: reduce) {
    .service-action,
    .service-label {
        transition: none;
    }
}