:root {
    --radius: 12px;
    --max: 1200px;
    --accent: #ff7a18;
    --title-offset: -18px;
}

/* Light theme (DEFAULT) */
.theme-light {
    /* boost contrast a bit: slightly darker page background, brighter cards */
    --bg-1: #f3f6f9;
    /* base page */
    --bg-2: #eef4f8;
    /* subtle gradient */
    --card: #ffffff;
    /* content panels stay white */
    --muted: #4a5967;
    /* slightly darker muted text */
    --text: #0b1820;
    /* main text */
    --accent: #ff7a18;
    --glass: rgba(11, 24, 32, 0.04);
    --header-border: rgba(11, 24, 32, 0.08);
    /* stronger border for separation */
    --shadow: 0 12px 36px rgba(12, 20, 30, 0.08);
    /* stronger shadow */
}

/* Dark theme (backwards compatible) */
.theme-dark {
    --bg-1: #071022;
    --bg-2: #0f1724;
    /* increase container contrast in dark mode */
    --card: #152733;
    /* slightly lighter than background for clear panels */
    --muted: #9aa4b2;
    --text: #e6eef6;
    --accent: #ff7a18;
    /* stronger glass and header-border for better separation */
    --glass: rgba(255, 255, 255, 0.12);
    --header-border: rgba(255, 255, 255, 0.10);
    --shadow: 0 12px 44px rgba(2, 6, 23, 0.6);
}

/* Make the brand title fully white in dark mode for stronger contrast */
.theme-dark .brand h1 {
    color: #ffffff;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

/* Stabilize layout on iOS: prevent transient horizontal reflow when the
    browser chrome shows/hides by clamping horizontal overflow and fixing
    container padding used for layout. */
html, body { overflow-x: hidden; }

.wrap { box-sizing: border-box; padding-left: 28px; padding-right: 28px; }
@media (max-width:720px){ .wrap { padding-left: 16px; padding-right: 16px } }

/* Ensure hero and aside use full-width of the content box and don't
    expand due to viewport changes */
.hero, aside.card { box-sizing: border-box; width: 100%; max-width: 100%; }

/* Removed calc-based width locks — revert to natural responsive flow. */

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
    color: var(--text);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

.wrap {
    max-width: var(--max);
    margin: 40px auto;
    padding: 28px
}

header.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0; /* remove horizontal padding so header aligns with .wrap */
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--glass), rgba(0, 0, 0, 0.00));
    backdrop-filter: blur(4px);
    border: 1px solid var(--header-border);
}

/* Add back horizontal inset so header content is slightly centered within the page container */
@media (min-width:721px) {
    header.site-header {
        padding-left: calc(28px + env(safe-area-inset-left));
        padding-right: calc(28px + env(safe-area-inset-right));
    }
}

@media (max-width:720px) {
    header.site-header {
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }
}

header.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    filter: brightness(0.95) saturate(0.95);
    border-radius: inherit;
    z-index: 0
}

header.site-header>* {
    position: relative;
    z-index: 1
}

.brand {
    display: flex;
    align-items: flex-end;
    gap: 14px
}

.brand .logo {
    width: 144px;
    height: 144px;
    border-radius: 0;
    display: block;
    object-fit: contain;
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: 0
}

.brand h1 {
    font-size: 60px;
    margin: 0;
    line-height: 1;
    align-self: flex-end;
    transform: translateY(var(--title-offset))
}

nav {
    display: flex;
    gap: 12px;
    align-items: center
}

.lang-toggle {
    background: transparent;
    border: 1px solid var(--header-border);
    padding: 6px;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer
}

/* Small flag buttons for language selection */
.lang-flags { display:flex; gap:6px; align-items:center }
.lang-flag {
    background: #ffffff;
    border: 1px solid var(--header-border);
    padding: 3px 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lang-flag img { width: 18px; height: auto; display: block }
.lang-flag.active { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.12) }

/* Dark theme: use subtle translucent fill so flags remain visible */
.theme-dark .lang-flag {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}

/* theme toggle */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--header-border);
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    margin-left: 6px
}

/* Theme toggle icons */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; padding:6px; }
.theme-toggle .theme-icon { width:18px; height:auto; display:block }
.theme-toggle .theme-icon.moon { display:none }
.theme-dark .theme-toggle .theme-icon.sun { display:none }
.theme-dark .theme-toggle .theme-icon.moon { display:block }

/* Light-mode: subtle circular fill behind the sun for better contrast */
.theme-light .theme-toggle {
    background: #fff8e6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Keep language toggle styled like light mode at all times; theme button gets its own background */
.lang-toggle {
    border: 1px solid rgba(11, 24, 32, 0.08) !important;
    color: #4a5967 !important;
    background: transparent !important;
}

main {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    margin-top: 28px;
    align-items: start
}

/* HERO */
.hero {
    padding: 26px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow)
}

.hero h2 {
    font-size: 36px;
    margin: 0 0 12px 0;
    color: var(--text)
}

.hero p.lead {
    color: var(--muted);
    margin: 0 0 18px
}

.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-weight: 600
}

.btn.primary {
    background: linear-gradient(90deg, var(--accent), #ff4f6d);
    color: white;
    box-shadow: 0 8px 28px rgba(255, 122, 24, 0.12)
}

.btn.ghost {
    background: transparent;
    border: 1px solid var(--header-border);
    color: var(--muted)
}

/* Video card */
.player {
    background: var(--card);
    padding: 14px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--header-border)
}

.player video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block
}

/* USES grid */
.sections {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.sections > div:nth-child(1) { order: 1; } /* features card */
.sections > div:nth-child(2) { order: 2; } /* services image */
.sections > div:nth-child(3) { order: 3; } /* player */

@media (max-width: 768px) {
    .sections > div:nth-child(1) { order: 2; } /* features card - after player */
    .sections > div:nth-child(2) { order: 3; } /* services image */
    .sections > div:nth-child(3) { order: 1; } /* player - first */
}

.uses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.card {
    background: var(--card);
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--header-border)
}

.card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text)
}

.card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

/* contact layout: label + content inline on same line */
.contact-line {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: center;
}

.contact-line strong {
    margin: 0;
    white-space: nowrap;
}

.contact-line span {
    display: inline;
    white-space: nowrap;
    color: var(--text);
}

.contact-line span a {
    display: inline;
    color: var(--text);
    text-decoration: none
}

/* contact-row: align details and WA icon to the right */
.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 6px
}

.contact-details {
    flex: 0 0 230px;
    max-width: 230px
}

.contact-details p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    gap: 8px;
    align-items: center;
}

.contact-wa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 0px;
    margin-top: 25px;
}

.contact-wa img {
    width: 39px;
    height: 39px;
    border-radius: 0;
    display: block;
    background: transparent;
    border: 0
}

/* New contact icons container: phone, email, whatsapp */
.contact-icons {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 0px;
    margin-top: 25px;
}
.contact-icons img {
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: block;
    background: transparent;
    border: 0;
}
/* All contact icons are 33% smaller than the original 39px WA icon (≈30px) */
.contact-icons img.wa {
    width: 30px;
    height: 30px;
}

/* Ensure icons inside the details block are also the same reduced size */
.contact-details .contact-icons img {
    width: 30px;
    height: 30px;
}
.contact-details .contact-icons img.wa {
    width: 30px;
    height: 30px;
}

/* When the WA icon is placed inside the details block, keep it close to phone numbers */
.contact-details .contact-wa {
    margin-top: 6px;
    margin-left: 0
}

.contact-details .contact-wa img {
    width: 30px;
    height: 30px
}

/* Gallery placeholders */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px
}

.thumb {
    height: 80px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--header-border)
}

/* Sidebar live images */
#sidebarImagesContainer {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.side-image-card {
    display: block;
    padding: 6px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--header-border)
}

.side-image-card .title {
    font-weight: 700;
    margin: 6px 4px;
    color: var(--text);
    font-size: 14px
}

/* Sidebar image titles */
.side-spot-title,
.side-image-card .title {
    text-align: left;
}

.side-image-card img { display:none; }

/* Sidebar spots: title above, body holds stacked cards as background-image cards */
.side-spot{ position:relative; overflow:hidden; }
.side-spot-title{ font-weight:700; padding:8px 12px; color:var(--text); background:transparent; min-height:28px; }
.side-spot-body{ position:relative; min-height:220px; /* enforce 4:3 aspect ratio for 1024x768 images so height is guaranteed without cropping */
    aspect-ratio: 4 / 3; width: 100%; }
.side-spot-body .side-image-card{
       position: absolute;
       inset: 0;
       box-sizing: border-box;
       padding: 8px;
       border-radius: 8px;
       transition: opacity 600ms ease;
       /* show full image proportionally without vertical crop */
       background-size: contain;
       background-position: center;
       background-repeat: no-repeat;
       background-color: var(--card);
       opacity: 0;
}
.side-image-card.entering{ opacity:0; }
.side-image-card.show{ opacity:1; }

/* fade-out helper used when removing older cards */
.side-image-card.hide { opacity: 0; pointer-events: none; }


.side-image-card .src {
    display: none
}

/* Overlay viewer for clicked sidebar image */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    z-index: 10000
}

.sidebar-overlay.open {
    display: flex
}

.sidebar-overlay .viewer {
    max-width: 70vw;
    max-height: 70vh;
    padding: 12px;
    border-radius: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center
}

.sidebar-overlay .viewer img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6)
}

/* Keep headings and interactive UI elements left-aligned for readability */
h1, h2, h3, h4, h5, h6,
header.site-header, nav, .brand h1,
.btn, button, input, select, textarea,
.lang-toggle, .theme-toggle, .lang-flag,
.card h3, pre, code {
    text-align: left;
    text-align-last: left;
}

/* footer{margin-top:36px;padding:16px;border-radius:12px;color:var(--muted);display:flex;align-items:center;justify-content:space-between} */

/* responsive */
@media (max-width:980px) {
    main {
        grid-template-columns: 1fr
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr)
    }
}

/* Stack brand (logo above title) only for narrower / mobile proportions */
@media (max-width:720px) {
    .brand {
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .brand .logo {
        width: 115px;
        height: auto;
        max-width: 100%;
    }

    .brand h1 {
        display: block !important;
        font-size: 24px;
        margin: 0;
        line-height: 1;
        transform: none !important;
        align-self: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ensure header doesn't clip stacked brand on some browsers (Safari) */
    header.site-header {
        align-items: center;
        overflow: visible;
    }
}

@media (max-width:520px) {
    .wrap {
        margin: 18px;
        padding: 16px
    }

    .hero h2 {
        font-size: 22px
    }

    .uses-grid {
        grid-template-columns: 1fr
    }

    /* further reduce logo and title size on very small screens */
    .brand .logo {
        width: 100px;
        height: 100px;
    }

    .brand h1 {
        font-size: 20px;
    }
}

/* Uses-alt alternating layout */
.uses-alt-list{display:flex;flex-direction:column;gap:18px}
.uses-alt .uses-item{display:flex;align-items:center;gap:20px;padding:14px;border-radius:10px;border:1px solid var(--header-border);background:var(--card)}
.uses-alt .mini-thumb{width:220px;height:140px;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--header-border);flex:0 0 220px}
.uses-alt .uses-text{flex:1}
.uses-alt .uses-item:nth-child(even){flex-direction:row-reverse}

/* Right-align the titles for events and creative uses to match their paragraph alignment */
.uses-item[data-category="events"] h3,
.uses-item[data-category="creative"] h3 {
    text-align: right;
    text-align-last: right;
}

/* Category-specific thumbnails (paths relative to assets/site.css -> assets/images/*) */
.uses-item[data-category="professional"] .mini-thumb{background-image:url('images/eng.png')}
.uses-item[data-category="events"] .mini-thumb{background-image:url('images/crowd.png')}
.uses-item[data-category="science"] .mini-thumb{background-image:url('images/science.png')}
.uses-item[data-category="creative"] .mini-thumb{background-image:url('images/creative.jpg')}

@media (max-width:720px){
    .uses-alt .uses-item{flex-direction:column}
    .uses-alt .mini-thumb{width:100%;height:180px;flex:0 0 auto}
}

/* Ensure uses items always show image first and text below on mobile */
@media (max-width:720px) {
    .uses-alt .uses-item {
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .uses-alt .mini-thumb {
        width: 100% !important;
        height: 180px !important;
        flex: 0 0 auto !important;
        order: 0 !important;
        margin: 0 0 8px 0 !important;
    }

    .uses-alt .uses-text {
        order: 1 !important;
        width: 100% !important;
        padding: 8px 0 !important;
        box-sizing: border-box !important;
    }

    /* Left-align titles on mobile so they don't appear off-screen */
    .uses-item[data-category="events"] h3,
    .uses-item[data-category="creative"] h3 {
        text-align: left !important;
        text-align-last: left !important;
    }

    /* Make uses container and items occupy full available width (match contacts/cards) */
    .uses-alt.wrap,
    .uses-alt {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .uses-alt .card,
    .uses-alt .uses-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .uses-alt .uses-item .mini-thumb {
        width: 100% !important;
        flex-basis: auto !important;
    }
}

/* Desktop: ensure uses-alt content aligns with the main .wrap content edges */
@media (min-width:721px) {
    .uses-alt.wrap {
        box-sizing: border-box;
        padding-left: 28px;
        padding-right: 28px;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--max);
        width: 100%;
    }

    .uses-alt-list {
        max-width: var(--max);
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .uses-alt .uses-item,
    .uses-alt .card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
}

/* Reinforce mobile full-width matching contact cards */
@media (max-width:720px) {
    .uses-alt.wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .uses-alt .uses-item,
    .uses-alt .card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Final overrides: ensure .uses-alt itself does not add internal padding and matches the page container */
.uses-alt {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.uses-alt-list {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.uses-alt .uses-item,
.uses-alt .card {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make uses-alt padding/width match the main content on mobile so titles line up */
@media (max-width:720px) {
    .uses-alt.wrap {
        box-sizing: border-box;
        padding-left: 28px;
        padding-right: 28px;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--max);
    }
}

@media (max-width:520px) {
    .uses-alt.wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Mobile: place contact icons below the contact details to avoid clipping */
@media (max-width:720px) {
    .contact-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .contact-details {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .contact-details p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-icons {
        order: 2;
        width: 100%;
        display: flex;
        gap: 18px;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 8px;
    }

    .contact-icons img,
    .contact-details .contact-icons img {
        width: 44px;
        height: 44px;
    }

    /* ensure WA icon (more specific selectors) also grows on mobile */
    .contact-icons img.wa,
    .contact-details .contact-icons img.wa,
    .contact-details .contact-wa img,
    .contact-wa img {
        width: 44px;
        height: 44px;
    }
}

/* Services image responsive sizing */
.services-img {
    width: 60%;
    max-width: 800px;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .services-img {
        width: 90%;
        max-width: 500px;
        height: auto;
    }
}

/* Contact details styling */
#contactEmail, #contactPhone {
    display: inline-block;
    text-decoration: none !important;
    color: inherit !important;
    cursor: text;
    pointer-events: none;
    white-space: nowrap;
}

#contactPhone a {
    text-decoration: none !important;
    color: inherit !important;
    cursor: text;
    pointer-events: none;
}

/* Footer copyright alignment */
.footer-copyright {
    display: flex;
    justify-content: flex-end;
}