/*
 * shared.css
 * Shared component styles used across multiple pages.
 */

/* ── Remove mobile tap highlight flash across all elements ── */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
}

/* ── Sleek Overlay Scrollbar (Prevents Layout Shift Across Pages) ── */
html {
    overflow-x: hidden;
    overflow-y: overlay;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* ── Prod-Bar (flanking purple pixel bar — matched with hero in index.html) ── */
.prod-bar {
    width: clamp(48px, 3.542vw, 68px);
    height: clamp(5px, 0.365vw, 7px);
    display: flex;
    align-items: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.prod-bar svg {
    display: block;
    width: 100%;
    height: 100%;
}

.prod-bar.left,
.prod-bar:first-of-type {
    background-image: url("../icons/prod-bar-left.svg");
}

.prod-bar.right,
.prod-bar:last-of-type:not(:first-of-type) {
    background-image: url("../icons/prod-bar-right.svg");
}

/* ── Title / Product Designer Tag Components ── */
.tag-bar-row,
.prod-designer-group {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.677vw, 14px);
}

.badge-text,
.prod-designer-text {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 0.729vw, 18px);
    letter-spacing: 0.115em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

/* ── Sticky Header (Coverr.co Frosted Glass Surface on Scroll Only) ── */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: calc(7.315vh + 3.796vh + 7.315vh);
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), scale 0.8s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
}

.sticky-header.header-scrolled {
    background: rgba(14, 14, 15, 0.68);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sticky-header .header-frame {
    pointer-events: auto;
    scale: 1 !important;
    transform: none !important;
    animation: none !important;
    transform-origin: center center;
    will-change: auto;
}

.sticky-header.header-hidden {
    transform: translateY(-100%);
}

/* Temporarily hidden while access terminal is open on works.html embedded hero view */
.sticky-header.header-terminal-hidden {
    display: none !important;
    opacity: 0 !important;
    filter: blur(15px) !important;
    scale: 0.96 !important;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), scale 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none !important;
}


/* ── Header Frame (Exact Position matching Hero / index.html) ── */
.header-frame {
    position: absolute;
    left: 7.552vw;
    top: 7.315vh;
    width: 84.948vw;
    height: 3.796vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

.header-logo {
    font-family: "Space Armor", "Chakra Petch", sans-serif;
    font-weight: 400;
    font-size: clamp(13.5px, 1.7vw, 33.5px);
    color: #ffffff;
    line-height: 1;
}

/* ── Resume Button Component ── */
.resume-btn-container {
    position: relative;
    width: clamp(70px, 4.68vw, 96px);
    height: auto;
    aspect-ratio: 102 / 41;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.resume-btn-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.resume-btn-text {
    position: relative;
    z-index: 1;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-size: clamp(9px, 0.625vw, 14px);
    color: #ffffff;
    letter-spacing: 0.115em;
    text-transform: uppercase;
}

.resume-btn-path {
    transition:
        fill 220ms ease,
        stroke 220ms ease,
        opacity 220ms ease;
    fill: transparent;
    stroke: #ffffff;
    vector-effect: non-scaling-stroke;
}

@media (hover: hover) {
    .resume-btn-container:hover {
        transform: translateY(-2px);
    }

    .resume-btn-container:hover .resume-btn-path {
        fill: rgba(255, 255, 255, 0.18) !important;
        stroke: #ffffff !important;
        opacity: 1;
    }

    .resume-btn-container:hover .resume-btn-text {
        color: #ffffff;
    }
}

.resume-btn-container:active .resume-btn-path {
    fill: rgba(255, 255, 255, 0.18) !important;
    stroke: #ffffff !important;
    opacity: 1;
}

.resume-btn-container:active .resume-btn-text {
    color: #ffffff;
}

/* ── Header Logo Hover Transition (EO -> Thick Chamfered Arrow) ── */
.header-logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.header-logo-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.header-logo-text {
    font-family: "Space Armor", "Chakra Petch", sans-serif;
    font-weight: 400;
    font-size: clamp(13.5px, 1.7vw, 33.5px);
    color: #ffffff;
    line-height: 1;
    display: inline-block;
    margin: 0;
    padding: 0;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.header-logo-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) translateX(0) scale(0.7);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    pointer-events: none;
}

.header-logo-link:hover .header-logo-text {
    opacity: 0;
    transform: translateX(-10px) scale(0.8);
}

.header-logo-link:hover .header-logo-arrow {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(-10px) scale(0.8);
}

/* ── Responsive Breakpoints (Consistent Across All Pages) ── */
@media (min-width: 728px) and (max-width: 1024px) {
    .prod-bar {
        width: clamp(30px, 6vw, 55px);
        height: 5px;
        min-height: 3px;
    }
}

@media (max-width: 1024px) {
    .sticky-header {
        height: calc(5vh + 40px + 5vh);
    }
    .header-frame {
        left: 5vw;
        top: 5vh;
        width: 90vw;
        height: auto;
    }
    .header-logo,
    .header-logo-text {
        font-size: clamp(19.12px, calc(3.417vw - 5px), 27.16px);
    }
    .resume-btn-container {
        width: clamp(60px, 8.5vw, 80px);
    }
    .resume-btn-text {
        font-size: clamp(8px, 1.2vw, 10px);
    }
    .tag-bar-row,
    .prod-designer-group {
        gap: 1.5vw;
    }
    .badge-text,
    .prod-designer-text {
        font-size: clamp(10px, 1.7vw, 14px);
        letter-spacing: 0.12em;
    }
}

@media (min-width: 728px) and (max-width: 1024px) {
    .resume-btn-container {
        width: clamp(60px, 8.5vw, 80px);
    }
    .header-logo,
    .header-logo-text {
        font-size: clamp(19.12px, calc(3.417vw - 5px), 27.16px);
    }
}

@media (max-width: 727px) {
    .prod-bar {
        width: clamp(35px, 12vw, 50px);
        height: 5px;
        min-height: 4px;
    }
    .sticky-header {
        height: calc(4svh + 36px + 4svh);
    }
    .header-frame {
        left: 6vw;
        top: 4svh;
        width: 88vw;
        height: auto;
    }
    .header-logo,
    .header-logo-text {
        font-size: clamp(13.5px, 5.4vw, 19.5px);
    }
    .resume-btn-container {
        width: clamp(52px, 15vw, 68px);
    }
    .resume-btn-text {
        font-size: clamp(8px, 2.2vw, 10px);
    }
    .tag-bar-row,
    .prod-designer-group {
        gap: 2.5vw;
    }
    .badge-text,
    .prod-designer-text {
        font-size: clamp(9px, min(2.6vw, 1.8svh), 12px);
        letter-spacing: 0.12em;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    .sticky-header {
        height: calc(8.4svh + 36px + 8.4svh) !important;
    }
    .header-frame {
        left: 6.75vw !important;
        top: 8.4svh !important;
        width: 86vw !important;
        height: auto;
    }
    .header-logo,
    .header-logo-text {
        font-size: 19px !important;
    }
    .resume-btn-container {
        width: 60px !important;
    }
    .resume-btn-text {
        font-size: 8px !important;
    }
    .prod-bar {
        width: clamp(20px, 4svh, 50px) !important;
        height: 4px !important;
        min-height: 3px !important;
    }
    .badge-text,
    .prod-designer-text {
        font-size: clamp(6px, 2.8svh, 12px) !important;
        letter-spacing: 0.12em;
    }
}

/* ── Shared Footer & Contact Section (Divider Line, Get In Touch, Calendar Frame, Footer & Copyrights) ── */

/* ── Divider Line ── */
.divider-line {
    width: calc(min(88vw, 1340px) + 10px);
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin-top: 70px;
}

/* ── "GET IN TOUCH" Section ── */
.contact-section {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(88vw, 1340px);
    padding: 0;
    box-sizing: border-box;
}

.contact-heading {
    font-family: "Chakra Petch", sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.01em;
    margin-top: 18px;
    width: 100%;
    max-width: 760px;
    padding: 0 clamp(16px, 4vw, 32px);
    box-sizing: border-box;
    text-wrap: normal;
}

.contact-subheading {
    font-family: "Chakra Petch", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 10px;
    line-height: 20px;
    width: 100%;
    max-width: 560px;
    padding: 0 16px;
    box-sizing: border-box;
    text-wrap: normal;
}

.contact-cta-wrapper {
    margin-top: 22px;
}

/* ── Cut Button (Reused in See More & Contact CTA) ── */
.cut-button {
    position: relative;
    padding: 8px 22px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: "Chakra Petch", sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.cut-button-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cut-button-svg path {
    transition:
        fill 220ms ease,
        stroke 220ms ease,
        opacity 220ms ease;
    fill: transparent;
    stroke: #ffffff;
    vector-effect: non-scaling-stroke;
}

.cut-button-arrow {
    transition: transform 220ms ease;
}

@media (hover: hover) {
    .cut-button:hover .cut-button-svg path {
        fill: rgba(255, 255, 255, 0.0864) !important;
        stroke: #ffffff !important;
        opacity: 1;
    }

    .cut-button:hover .cut-button-arrow {
        transform: translate(1.5px, -1.5px);
    }

    .cut-button:hover {
        color: #ffffff;
    }
}

.cut-button:active .cut-button-arrow {
    transform: translate(1.5px, -1.5px);
}

.cut-button:active .cut-button-svg path {
    fill: rgba(255, 255, 255, 0.0864) !important;
    stroke: #ffffff !important;
    opacity: 1;
}

.cut-button:active {
    color: #ffffff;
}

/* ── Calendar Frame ── */
.calendar-frame-wrap {
    margin-top: 22px;
    width: 100%;
    position: relative;
    padding: 1.5px;
    box-sizing: border-box;
}

.calendar-frame-box {
    width: 100%;
    height: 480px;
    min-height: 480px;
    max-height: 480px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.12);
    padding: 1.2px;
    box-sizing: border-box;
    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );
    display: flex;
    flex-direction: column;
}

.calendar-frame-inner {
    width: 100%;
    flex: 1;
    height: 100%;
    background-color: #0a0a0a;
    clip-path: polygon(
        0 0,
        calc(100% - 23.5px) 0,
        100% 23.5px,
        100% 100%,
        23.5px 100%,
        0 calc(100% - 23.5px)
    );
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.calendar-corner-tl {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.calendar-corner-br {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45px;
    height: 45px;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.calendar-chamfer-tr,
.calendar-chamfer-bl {
    display: none;
}

#my-cal-inline-15min {
    width: 100%;
    height: 100%;
    min-height: 480px;
    max-height: 480px;
    position: relative;
    box-sizing: border-box;
    padding: 10px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#my-cal-inline-15min cal-inline,
#my-cal-inline-15min .cal-inline-container,
#my-cal-inline-15min iframe,
#my-cal-inline-15min > div {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#my-cal-inline-15min iframe::-webkit-scrollbar,
#my-cal-inline-15min > div::-webkit-scrollbar,
#my-cal-inline-15min::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── Footer Section ── */
.footer-section {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.footer-heading {
    font-family: "Chakra Petch", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    opacity: 0.7;
}

.email-row {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    white-space: nowrap;
}

.email-link {
    font-family: "Chakra Petch", sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.email-link:hover {
    opacity: 0.7;
}

.copy-icon-btn {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.5;
    padding: 2px;
    color: #ffffff;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.copy-icon-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

.copy-icon-btn.copied {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

.copy-icon-btn .copy-icon-check {
    display: none;
}

.copy-icon-btn.copied .copy-icon-default {
    display: none;
}

.copy-icon-btn.copied .copy-icon-check {
    display: block;
}

.social-row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-icon-link {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.social-icon-link:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.bottom-footer-bar {
    width: calc(min(88vw, 1340px) + 10px);
    margin-top: 36px;
    padding: 18px 5px 0 5px;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand-logo {
    font-family: "Space Armor", "Chakra Petch", sans-serif;
    font-size: 20px;
    color: #ffffff;
}

.brand-name {
    font-family: "Chakra Petch", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}

.copyright-text {
    font-family: "Chakra Petch", sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Footer & Contact Responsive Breakpoints ── */
@media (max-width: 1024px) {
    .divider-line {
        width: min(92vw, 860px);
    }
    .contact-section {
        width: min(92vw, 860px);
        padding: 0;
    }
    .calendar-frame-wrap {
        width: 100%;
    }
    .calendar-frame-box {
        width: 100%;
        height: 480px;
        min-height: 480px;
        max-height: 480px;
    }
    .calendar-frame-inner {
        width: 100%;
        height: 100%;
        flex: 1;
        overflow: hidden;
    }
    #my-cal-inline-15min {
        width: 100% !important;
        height: 100% !important;
        min-height: 480px !important;
        max-height: 480px !important;
        box-sizing: border-box !important;
        padding: 4px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow: hidden !important;
    }
    #my-cal-inline-15min cal-inline,
    #my-cal-inline-15min .cal-inline-container,
    #my-cal-inline-15min iframe,
    #my-cal-inline-15min > div {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        flex: 1 1 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        border: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    #my-cal-inline-15min iframe {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border: none !important;
    }
    .bottom-footer-bar {
        width: min(92vw, 860px);
        padding: 18px 0 0 0;
    }
}

@media (min-width: 431px) and (max-width: 854px) {
    .calendar-frame-box {
        height: auto !important;
        min-height: 480px !important;
        max-height: none !important;
        clip-path: none !important;
        border: 1.2px solid rgba(255, 255, 255, 0.12) !important;
        background-color: #0a0a0a !important;
        position: relative !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    .calendar-frame-inner {
        overflow: visible !important;
        height: auto !important;
        clip-path: none !important;
        background-color: transparent !important;
    }
    #my-cal-inline-15min {
        height: auto !important;
        min-height: 480px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #my-cal-inline-15min cal-inline,
    #my-cal-inline-15min .cal-inline-container {
        height: auto !important;
        min-height: 480px !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }
    #my-cal-inline-15min iframe {
        height: auto !important;
        min-height: 480px !important;
        max-height: none !important;
        display: block !important;
    }
    .calendar-chamfer-tr {
        display: block !important;
        position: absolute;
        top: -1px;
        right: -1px;
        width: 24px;
        height: 24px;
        pointer-events: none !important;
        z-index: 10;
        overflow: visible;
    }
    .calendar-chamfer-bl {
        display: block !important;
        position: absolute;
        bottom: -1px;
        left: -1px;
        width: 24px;
        height: 24px;
        pointer-events: none !important;
        z-index: 10;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .divider-line {
        margin-top: 48px;
    }
    .contact-section {
        margin-top: 48px;
    }
    .contact-heading {
        font-size: clamp(22px, 5.5vw, 28px);
        line-height: 1.25;
        margin-top: 16px;
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        text-wrap: normal;
    }
    .contact-subheading {
        font-size: 13px;
        line-height: 19px;
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        text-wrap: normal;
    }
    .email-link {
        font-size: clamp(26px, 4.2vw, 30px);
    }
    .footer-section {
        margin-top: 32px;
    }
}

@media (max-width: 500px) {
    .divider-line {
        width: min(92vw, 480px);
    }
    .contact-section {
        width: min(92vw, 480px);
        padding: 0;
    }
    .contact-heading {
        font-size: clamp(21px, 6.2vw, 25px);
        line-height: 1.25;
        margin-top: 14px;
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        text-wrap: normal;
    }
    .contact-subheading {
        font-size: 13px;
        line-height: 19px;
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        text-wrap: normal;
    }
    .footer-section {
        margin-top: 24px;
    }
    .footer-heading {
        font-size: 15px;
    }
    .email-row {
        margin-top: 10px;
    }
    .copy-icon-btn {
        left: calc(100% + 8px);
    }
    .email-link {
        font-size: clamp(19px, 5.5vw, 24.5px);
    }
    .social-row {
        margin-top: 18px;
        gap: 16px;
    }
    .bottom-footer-bar {
        width: min(92vw, 480px);
        margin-top: 28px;
        padding: 16px 0 0 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .brand-logo {
        font-size: 16px;
    }
    .brand-name {
        font-size: 13px;
    }
    .brand-group {
        gap: 10px;
    }
    .copyright-text {
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .calendar-frame-wrap {
        margin-top: 22px;
        width: 100%;
    }
    .calendar-frame-box {
        height: auto;
        min-height: 340px !important;
        max-height: none;
        clip-path: none !important;
        border: 1.2px solid rgba(255, 255, 255, 0.12) !important;
        background-color: #0a0a0a !important;
        position: relative !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    .calendar-frame-inner {
        height: auto;
        min-height: 340px !important;
        overflow: visible;
        clip-path: none !important;
        background-color: transparent !important;
    }
    #my-cal-inline-15min {
        height: auto;
        min-height: 340px;
        max-height: none;
        overflow: visible;
        padding: 4px 6px 8px 6px;
    }
    #my-cal-inline-15min iframe,
    #my-cal-inline-15min > div {
        min-height: 340px !important;
    }
    .calendar-chamfer-tr {
        display: block !important;
        position: absolute;
        top: -1px;
        right: -1px;
        width: 24px;
        height: 24px;
        pointer-events: none !important;
        z-index: 10;
        overflow: visible;
    }
    .calendar-chamfer-bl {
        display: block !important;
        position: absolute;
        bottom: -1px;
        left: -1px;
        width: 24px;
        height: 24px;
        pointer-events: none !important;
        z-index: 10;
        overflow: visible;
    }
}

/* ── Global Audio Toggle & Works Navigation Buttons ── */
#audio-toggle,
#works-arrow-btn {
    position: fixed;
    /* Vertically aligned with bottom logo group (clamp(24px, 6svh, 95px)) */
    bottom: clamp(24px, 6svh, 95px);
    z-index: 10010;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), scale 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

#audio-toggle {
    right: 6.8%;
}

#works-arrow-btn {
    left: 6.8%;
}

@media (hover: hover) {
    #audio-toggle:hover,
    #works-arrow-btn:hover {
        opacity: 0.9;
        border-color: rgba(255, 255, 255, 0.8);
        background: transparent !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.5);
        transform: scale(1.06);
    }
    #works-arrow-btn:hover svg {
        transform: translate(1.5px, -1.5px);
    }
}

#audio-toggle:active,
#works-arrow-btn:active {
    opacity: 0.9;
    transform: scale(0.96);
}

#audio-toggle svg,
#works-arrow-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

#audio-toggle .icon-disabled {
    display: block;
}

#audio-toggle .icon-enabled {
    display: none;
}

#audio-toggle.muted .icon-enabled {
    display: block;
}

#audio-toggle.muted .icon-disabled {
    display: none;
}

/* Works arrow button fades out when access terminal opens */
#works-arrow-btn.terminal-hidden,
.terminal-open #works-arrow-btn,
.hero-container.fade-out #works-arrow-btn,
.hero-container.fade-out ~ #works-arrow-btn {
    opacity: 0 !important;
    filter: blur(15px) !important;
    scale: 0.96 !important;
    pointer-events: none !important;
}

@media (min-width: 1025px) {
    #audio-toggle {
        bottom: calc(clamp(24px, 6svh, 95px) + 3px);
        right: 6.8%;
        width: 34px;
        height: 34px;
    }
    #works-arrow-btn {
        bottom: calc(clamp(24px, 6svh, 95px) + 3px);
        left: 6.8%;
        width: 34px;
        height: 34px;
    }
    #audio-toggle svg,
    #works-arrow-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 1024px) {
    /* ── Audio & Works Toggle: match index.html mobile/tablet sizing ── */
    #audio-toggle,
    #works-arrow-btn {
        bottom: calc(clamp(30px, 5svh, 55px) + 5px);
        width: 30px;
        height: 30px;
    }
    #audio-toggle {
        right: 9.5%;
    }
    #works-arrow-btn {
        left: 9.5%;
    }
    #audio-toggle svg,
    #works-arrow-btn svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 768px) {
    /* ── Audio & Works Toggle: match vertical center of bottom logo/label row ── */
    #audio-toggle,
    #works-arrow-btn {
        bottom: calc(clamp(24px, 6svh, 60px) + 8px);
        width: 30px;
        height: 30px;
    }
    #audio-toggle {
        right: 9.5%;
    }
    #works-arrow-btn {
        left: 9.5%;
    }
    #audio-toggle svg,
    #works-arrow-btn svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    #audio-toggle,
    #works-arrow-btn {
        bottom: calc(clamp(24px, 6svh, 60px) + 6px) !important;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    @media (max-height: 550px) {
        #audio-toggle,
        #works-arrow-btn {
            bottom: calc(9svh + 6px) !important;
        }
    }
    @media (min-height: 551px) {
        #audio-toggle,
        #works-arrow-btn {
            bottom: calc(clamp(30px, 5svh, 55px) + 5px) !important;
        }
    }
    #audio-toggle {
        right: 5% !important;
        width: 36px !important;
        height: 36px !important;
    }
    #works-arrow-btn {
        left: 5% !important;
        width: 36px !important;
        height: 36px !important;
    }
    #audio-toggle svg,
    #works-arrow-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ── Cinematic Page Transitions (Directly inherited from Hero -> Access Terminal) ── */
.page-wrapper {
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), scale 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
    will-change: opacity, filter, transform;
}

/* Page Entering Initial State (matches #terminal-iframe initial state: scale 1.04, blur 15px, opacity 0) */
html.page-entering .page-wrapper {
    opacity: 0 !important;
    filter: blur(15px) !important;
    transform: scale(1.04) !important;
    scale: 1.04 !important;
    pointer-events: none;
}

/* Page Exiting State (matches .hero-container.fade-out: scale 0.96, blur 15px, opacity 0) */
.page-wrapper.page-transition-out {
    opacity: 0 !important;
    filter: blur(15px) !important;
    transform: scale(0.96) !important;
    scale: 0.96 !important;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), scale 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none;
}

/* ── Reading Progress Bar (Top purple indicator for case studies) ── */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2.5px;
    background: #7A2CEF;
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
}

/* ── SPA Viewport & Views (Matching vilendesign.com persistent layout) ── */
#spa-viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.spa-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), scale 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center top;
    will-change: opacity, filter, transform, scale;
}

.spa-view.view-hidden {
    display: none !important;
}

.spa-view.view-fading-out {
    opacity: 0 !important;
    transform: scale(0.96) !important;
    scale: 0.96 !important;
    filter: blur(15px) !important;
    pointer-events: none;
}

.spa-view.view-fading-in {
    opacity: 0 !important;
    transform: scale(1.04) !important;
    scale: 1.04 !important;
    filter: blur(15px) !important;
    pointer-events: none;
}