/* ==========================================================================
   DARK THEME — Apple-style dark: pure black page, soft grey cards, one blue
   accent, large type and a full-screen hero. Loads after custom.css and
   replaces theme-light.css (same structure, dark surfaces).
   ========================================================================== */

:root {
    --primary-color: #2997ff;
    --text-color: #a1a1a6;
    --heading-color: #f5f5f7;
    --subtitle-color: #a1a1a6;
    --lighter-color: #f5f5f7;
    --body-background: #000000;
    --border-color: rgba(255, 255, 255, 0.1);
    --button-border: #f5f5f7;
    --card-bg: #161617;
    --card-border: rgba(255, 255, 255, 0.09);
    --field-bg: #1d1d1f;
    --muted-color: #86868b;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --section-space: 140px;
}

/* white behind everything: the hero's pin spacer and the overscroll area are
   part of the white stretch; the dark sections set their own background */
html,
body {
    background: #fff;
}

body {
    color: var(--text-color);
    line-height: 1.7;
}

::selection {
    background: var(--primary-color);
    color: #fff;
}

.projects-area,
.about-area,
.company-design-area {
    background: var(--body-background) !important;
}

h1, h2, h3, h4, h5, h6 {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--heading-color);
    color: var(--heading-color);
    text-shadow: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.02em;
}

.section-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 14px;
}

.section-title h2 {
    font-size: 52px;
    line-height: 1.08;
    padding-bottom: 0;
    text-transform: none;
    text-align: left;
}

/* ---------------------------------------------------------------------
   Reusable card with an optional title bar.
   --------------------------------------------------------------------- */
.mock-window {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mock-window-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    background: var(--field-bg);
    border-bottom: 1px solid var(--card-border);
}

.mock-window-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color);
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.main-header .header-upper {
    background: rgba(0, 0, 0, 0.74);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 0;
    transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
/* slim bar: the template's inner padding would make it twice as tall */
.main-header .header-inner {
    padding: 0;
}

.site-logo-text a,
.site-logo-text a span {
    color: var(--heading-color);
    font-weight: 700;
}

.main-menu {
    text-align: left;
}
.main-menu ul li a {
    color: var(--text-color);
    text-transform: none;
    font-weight: 500;
    font-size: 15px;
}
.main-menu ul li a:hover,
.main-menu ul li a.active {
    color: var(--heading-color);
}

.theme-btn.header-cta-btn {
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
    flex: 0 0 auto;
}
/* desktop: the CTA column only takes the width of the button */
@media (min-width: 992px) {
    .header-cta-col {
        flex: 0 0 auto;
        width: auto;
    }
}
@media (max-width: 991px) {
    .header-cta-btn { display: none; }
}

.side-menu-icon a {
    color: var(--heading-color);
}

/* Buttons */
.theme-btn {
    background: var(--heading-color);
    color: #000;
    border: 1px solid var(--heading-color);
    border-radius: 999px;
    padding: 15px 26px;
    font-weight: 500;
    margin: 0;
}
.theme-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.theme-btn i {
    margin-left: 6px;
}

.read-more {
    color: var(--heading-color);
    font-weight: 500;
    text-transform: none;
}
.read-more:hover {
    color: var(--primary-color);
}

/* ---------------------------------------------------------------------
   Hero — light banner on the dark page. The image is shown at full width
   (16:9); the slogan lies between the background and the cut-out robot, so
   the robot overlaps it. All slogan measures are in vw, i.e. relative to
   the image, so the composition stays the same at every window width.
   --------------------------------------------------------------------- */
.main-hero-area {
    /* height of the fixed header; header-tone.js sets the exact value */
    --header-h: 100px;
    position: relative;
    height: calc(var(--header-h) + min(56.25vw, 100vh - var(--header-h)));
    height: calc(var(--header-h) + min(56.25vw, 100svh - var(--header-h)));
    padding: 0;
    overflow: hidden;
    background: #fff !important;
}
/* light strip behind the header, so the image starts below it uncovered */
.main-hero-area:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: #f5f5f7;
}
/* The hero's layers (canvas, images, fade) carry their own z-indexes. On screens
   with a fractional device-pixel ratio their composited edge can poke out a pixel
   below the hero and then paint on top of the next section as a dark hairline.
   The hero gets its own stacking context and the section below sits above it. */
.main-hero-area { isolation: isolate; }
.services-area {
    position: relative;
    z-index: 1;
}
/* On screens with a fractional device-pixel ratio (Windows at 125 %) the last
   pixel row of the banner is only partly covered by the white fade and the robot
   shines through as a dark hairline. A solid white strip closes the edge. */
.main-hero-area:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #fff;
    z-index: 6;
    pointer-events: none;
}
.hero-fade {
    bottom: -2px !important;
    height: calc(40% + 2px) !important;
}
.hero-stage {
    position: absolute;
    top: var(--header-h);
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.hero-stage-media img,
.hero-stage-media video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
}
.hero-stage-bg { z-index: 1; }
.hero-stage-fg { z-index: 3; pointer-events: none; }
/* Intro video: only used when hero-slogan.js switches it on, otherwise the
   still end frame (bg + cut-out) is the banner. */
.hero-stage-media video {
    z-index: 1;
    display: none;
    object-fit: cover;
}
.main-hero-area.has-intro .hero-stage-video { display: block; }
/* Scroll-scrubbed variant (?scrub=1, hero-scrub.js): a canvas shows the frame
   that belongs to the scroll position. */
.hero-stage-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}
.main-hero-area.has-scrub .hero-stage-canvas { display: block; }
/* The still end image is only the fallback without JS; with the scroll animation it
   must not show (the phone layout fades the canvas' top edge, so it would shine
   through as a ghost of the final pose). */
.main-hero-area.has-scrub .hero-stage-bg { visibility: hidden; }
/* until the first frame has been drawn the canvas shows the start picture, so
   the final pose never flashes up before the animation begins */
.hero-stage-canvas {
    background: url("../images/hero/hero-start.webp") center / cover no-repeat;
}
.main-hero-area.has-scrub .hero-stage-fg { opacity: 0; }
.main-hero-area.has-scrub.scrub-done .hero-stage-fg { opacity: 1; }
.main-hero-area.has-scrub .hero-slogan-pair { transition: none; }
/* the cut-out robot joins in once the video has finished */
.main-hero-area.has-intro .hero-stage-fg { opacity: 0; }
.main-hero-area.has-intro.intro-done .hero-stage-fg { opacity: 1; }
/* own layer between the background (1) and the cut-out robot (3) */
.hero-slogan {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    font-size: inherit;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
    pointer-events: none;
}
.hero-slogan-pair {
    position: absolute;
    display: block;
    white-space: nowrap;
    color: #0b0b0c;
    -webkit-text-fill-color: #0b0b0c;
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* fade-in on page load, second pair slightly after the first (hero-slogan.js) */
.hero-slogan-pair-2 {
    transition-delay: 0.5s;
}
.hero-slogan.is-waiting .hero-slogan-pair {
    opacity: 0;
    transform: translateY(1.2vw);
}
.hero-slogan-pair-1 { left: 39.4vw; top: 5.1vw; }
.hero-slogan-pair-2 { left: 17.9vw; top: 18.6vw; }
.hero-slogan-thin {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: 5.4vw;
    line-height: 1;
}
.hero-slogan-bold {
    display: block;
    font-family: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 7.4vw;
    line-height: 0.92;
    letter-spacing: -0.012em;
}
/* the banner fades into the black page */
.hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    z-index: 4;
    background: linear-gradient(180deg, rgba(255,255,255,0.000) 0%, rgba(255,255,255,0.028) 10%, rgba(255,255,255,0.104) 20%, rgba(255,255,255,0.216) 30%, rgba(255,255,255,0.352) 40%, rgba(255,255,255,0.500) 50%, rgba(255,255,255,0.648) 60%, rgba(255,255,255,0.784) 70%, rgba(255,255,255,0.896) 80%, rgba(255,255,255,0.972) 90%, rgba(255,255,255,1.000) 100%);
    pointer-events: none;
}
.hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}
.hero-bottom {
    --heading-color: #0b0b0c;
    --text-color: #48484a;
}
.hero-bottom .theme-btn {
    background: #0b0b0c;
    border-color: #0b0b0c;
    color: #fff;
}
.hero-bottom .theme-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.hero-content {
    text-align: left;
    padding: 0;
}
.hero-content p.hero-disciplines {
    color: var(--heading-color);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    max-width: none;
}
.hero-btns {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.hero-content .hero-btns .read-more {
    margin-top: 0;
    text-decoration: none;
}
.hero-content .hero-btns .read-more:hover i {
    margin-left: 10px;
}
.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-color);
}
.hero-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: #30d158;
    vertical-align: 1px;
}

/* Header while it is over the light part of the hero (set by header-tone.js) */
.main-header.is-on-light .header-upper {
    background: rgba(245, 245, 247, 0.82);
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
.main-header.is-on-light .site-logo-text a,
.main-header.is-on-light .site-logo-text a span,
.main-header.is-on-light .side-menu-icon a {
    color: #0b0b0c;
}
.main-header.is-on-light .main-menu ul li a {
    color: #3a3a3c;
}
.main-header.is-on-light .main-menu ul li a:hover,
.main-header.is-on-light .main-menu ul li a.active {
    color: #000;
}
.main-header.is-on-light .header-cta-btn {
    background: #0b0b0c;
    border-color: #0b0b0c;
    color: #fff;
}
.main-header.is-on-light .header-cta-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* At the very top the header is see-through; it gets its background once the
   visitor scrolls (class set by header-tone.js). Placed after the light
   variant so it wins. */
.main-header.is-at-top .header-upper,
.main-header.is-at-top.is-on-light .header-upper {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Desktop: with a see-through header the banner image starts at the very top */
@media (min-width: 768px) {
    .main-hero-area {
        /* the image sits a little lower so the robot's head is not hidden behind
           the header; the strip above continues the wall (robot-top.webp) */
        --hero-shift: 4.5vw;
        height: calc(56.25vw + var(--hero-shift));
        height: min(calc(56.25vw + var(--hero-shift)), 100svh);
    }
    .main-hero-area:before {
        display: block;
        height: var(--hero-shift);
        background: url("../images/hero/robot-top.webp") center / 100% 100% no-repeat;
    }
    .hero-stage { top: var(--hero-shift); }
}

/* Phones: slogan on a light field first, the robot below it, then the
   buttons on white. */
@media (max-width: 767px) {
    .main-hero-area { height: auto; }
    .main-hero-area:before { display: none; }
    .hero-stage {
        position: relative;
        top: auto;
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        padding-top: calc(var(--header-h) + 26px);
        background: linear-gradient(180deg, #f5f5f7 0%, #c8c8ca 100%);
    }
    .hero-slogan { position: relative; inset: auto; order: 1; padding: 0 22px 6px; }
    .hero-slogan-pair {
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: 14px;
    }
    .hero-slogan-thin { font-size: 11.5vw; }
    .hero-slogan-bold { font-size: 15.6vw; }
    .hero-stage-media {
        position: relative;
        order: 2;
        height: 118vw;
        overflow: hidden;
    }
    /* image scaled to the block's height, robot centred */
    .hero-stage-media img,
    .hero-stage-media video,
    .hero-stage-media canvas {
        width: auto;
        left: -96.5vw;
    }
    /* the top edge of the photo dissolves into the light field above it */
    .hero-stage-bg,
    .hero-stage-video,
    .hero-stage-canvas {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
    }
    .hero-stage-media:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 42%;
        z-index: 4;
        background: linear-gradient(180deg, rgba(255,255,255,0.000) 0%, rgba(255,255,255,0.028) 10%, rgba(255,255,255,0.104) 20%, rgba(255,255,255,0.216) 30%, rgba(255,255,255,0.352) 40%, rgba(255,255,255,0.500) 50%, rgba(255,255,255,0.648) 60%, rgba(255,255,255,0.784) 70%, rgba(255,255,255,0.896) 80%, rgba(255,255,255,0.972) 90%, rgba(255,255,255,1.000) 100%);
    }
    .hero-fade { display: none; }
    .hero-bottom {
        position: relative;
        bottom: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding-top: 6px;
        padding-bottom: 44px;
    }
    .hero-content p.hero-disciplines { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   Services
   --------------------------------------------------------------------- */
/* Hero, services and hands form one white stretch; the page only turns dark
   after the hands. */
.services-area {
    --services-fade: 0px;
    --text-color: #48484a;
    --heading-color: #0b0b0c;
    --muted-color: #6e6e73;
    --primary-color: #0066cc;
    --card-bg: #f5f5f7;
    --card-border: rgba(0, 0, 0, 0.08);
    --border-color: rgba(0, 0, 0, 0.12);
    --field-bg: #ececef;
    color: var(--text-color);
    background: #fff !important;
}
.services-intro {
    margin-bottom: 64px;
}
.services-lede {
    color: var(--text-color);
    font-size: 17px;
    max-width: 460px;
    margin-left: auto;
    margin-bottom: 0;
}

.services-grid .service-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* The base theme animates "all" over 0.5s, which would lag behind the
       scroll-scrubbed transform — only colours transition here. */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    will-change: transform, opacity;
}
.services-grid .service-item:hover {
    background: var(--field-bg);
    border-color: rgba(0, 0, 0, 0.16);
}
.services-grid .service-item .mock-window-bar {
    background: transparent;
    border-bottom: none;
    padding: 24px 24px 0;
}
.service-item-index {
    font-size: 12px;
    color: var(--muted-color);
    font-weight: 600;
}
.service-item-body {
    padding: 14px 24px 0;
}
.service-item-body h4 {
    background-image: linear-gradient(0deg, #6e6e73 17%, #0b0b0c 63%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 22px;
    text-transform: none;
    margin: 0 0 10px;
}
.service-item-body p {
    color: var(--text-color);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}
.service-item-media {
    margin-top: auto;
    padding: 30px 24px 24px;
    position: relative;
}
.service-item-media {
    min-height: 38px;
    box-sizing: content-box;
}
/* The base theme pins every ".service-item i" to the card's top right
   corner; put the icon back inside its own field. */
.services-grid .service-item .service-item-icon {
    position: static;
    display: inline-block;
    font-size: 34px;
    line-height: 1;
    color: #6e6e73;
    transition: color 0.3s ease;
}
.services-grid .service-item:hover .service-item-icon {
    rotate: none;
    color: var(--primary-color);
}
.services-grid .service-item .service-item-link i {
    position: static;
    font-size: 18px;
    line-height: 1;
    color: inherit;
}
.services-grid .service-item:hover .service-item-link i {
    rotate: none;
}
.services-grid {
    perspective: 1400px;
}
.service-item-link {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}
.service-item-link:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Client logos — free-standing, white on black
   --------------------------------------------------------------------- */
.company-design-area {
    padding: 0 0 var(--section-space);
}
.company-design-area h2 {
    color: var(--muted-color);
    font-size: 13px;
    letter-spacing: 3px;
}
.scroller__inner {
    display: flex;
    align-items: center;
}
.logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin: 0 40px;
}
.scroller__inner img {
    margin: 0;
    width: auto;
    height: 48px;
    max-width: 170px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.6;
}
/* Scenlyx and AGON have no standalone logo file - set as text wordmarks */
.logo-text {
    display: inline-flex;
    align-items: center;
    height: 48px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.6;
    white-space: nowrap;
}
/* AGON: wordmark, rule underneath, small "HISTORY" below - as on the AGON site */
.logo-agon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 48px;
    color: #fff;
    opacity: 0.6;
    white-space: nowrap;
}
.logo-agon-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}
.logo-agon-line {
    display: block;
    height: 1px;
    margin: 4px 0 5px;
    background: currentColor;
}
.logo-agon-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.55em;
    text-indent: 0.55em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Projects (swiper carousel)
   --------------------------------------------------------------------- */
.projects-area {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    overflow: hidden;
}
.projects-intro {
    margin-bottom: 48px;
}
.projects-nav-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap;
}
.projects-all-link {
    color: var(--heading-color);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
}
.projects-all-link:hover {
    color: var(--primary-color);
}
.projects-all-link i {
    margin-left: 6px;
}
.projects-swiper-nav {
    display: flex;
    gap: 10px;
}
.projects-prev,
.projects-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
}
.projects-prev:hover,
.projects-next:hover {
    background: var(--heading-color);
    color: #000;
    border-color: var(--heading-color);
}
.projects-prev.swiper-button-disabled,
.projects-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.projects-swiper {
    padding: 4px 0 0;
    overflow: visible;
}
.projects-swiper .swiper-wrapper {
    align-items: stretch;
}

.portfolio-item {
    height: auto;
}
.portfolio-box {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background: transparent;
    overflow: visible;
}
.portfolio-box > img,
.portfolio-box .live-preview-viewport {
    order: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--card-border);
}
.portfolio-box > img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* the placeholder images are light grey - tone them down on black */
.portfolio-box.is-placeholder > img {
    opacity: 0.3;
}
.portfolio-box:hover img {
    transform: none;
    filter: none;
}
.portfolio-box:after {
    display: none;
}
.portfolio-box .portfolio-category {
    order: 2;
    position: static;
    display: block;
    background: none;
    backdrop-filter: none;
    padding: 8px 2px 0;
    color: var(--muted-color);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.portfolio-box .portfolio-caption {
    order: 1;
    position: static;
    visibility: visible;
    opacity: 1;
    margin: 0;
    padding: 18px 2px 0;
}
.portfolio-box .portfolio-caption * {
    color: var(--heading-color);
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Live-preview cards: same tile size and caption layout as image cards */
.portfolio-box.live-preview-box {
    display: flex;
    aspect-ratio: auto;
    background: transparent;
}
.live-preview-box .live-preview-viewport {
    position: relative;
    inset: auto;
    aspect-ratio: 1 / 1;
    background: #08080c;
}
/* width fixed, height derived from the card shape (set by live-preview.js) */
.live-preview-viewport iframe {
    width: var(--lp-w, 1280px);
    height: var(--lp-h, 1280px);
}

/* Reels section hidden for now (will be merged into Projekte). Markup and
   JS stay in place - delete this rule to bring it back. */
#vps-reels {
    display: none;
}

/* ---------------------------------------------------------------------
   About
   --------------------------------------------------------------------- */
.about-area {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}
.about-tagline {
    color: var(--heading-color);
    font-size: 17px;
    margin: 18px 0;
}
.about-content-part p {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 28px;
}
.about-area .hero-btns {
    margin-top: 0;
}
.about-image img {
    width: 100%;
    display: block;
}
.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 0;
}
.about-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.about-highlight-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--field-bg);
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.about-highlight-item h5 {
    color: var(--heading-color);
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
    font-weight: 600;
}
.about-highlight-item p {
    color: var(--text-color);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------- */
/* The white page fades into a black contact area and footer. Inside them the
   theme's dark colours are used again. */
.contact-area,
.main-footer {
    --text-color: #a1a1a6;
    --heading-color: #f5f5f7;
    --muted-color: #86868b;
    --primary-color: #2997ff;
    --card-bg: #161617;
    --card-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --field-bg: #1d1d1f;
    color: var(--text-color);
}
.contact-area {
    --fade-h: 340px;
    padding-top: calc(var(--fade-h) + 40px);
    padding-bottom: var(--section-space);
    background: linear-gradient(180deg, rgb(255,255,255) calc(var(--fade-h) * 0.0), rgb(248,248,248) calc(var(--fade-h) * 0.1), rgb(228,228,228) calc(var(--fade-h) * 0.2), rgb(200,200,200) calc(var(--fade-h) * 0.3), rgb(165,165,165) calc(var(--fade-h) * 0.4), rgb(128,128,128) calc(var(--fade-h) * 0.5), rgb(90,90,90) calc(var(--fade-h) * 0.6), rgb(55,55,55) calc(var(--fade-h) * 0.7), rgb(27,27,27) calc(var(--fade-h) * 0.8), rgb(7,7,7) calc(var(--fade-h) * 0.9), #000 var(--fade-h), #000 100%) !important;
}
.contact-area .theme-btn,
.contact-content-part .about-social a:hover {
    color: #000;
}
.contact-area .section-title h2 {
    max-width: 760px;
}
.contact-lede {
    color: var(--text-color);
    font-size: 17px;
    max-width: 520px;
    margin: 20px 0 52px;
}
.contact-content-part {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.contact-details-list a,
.contact-details-list span {
    color: var(--text-color);
    font-size: 15px;
    text-decoration: none;
}
.contact-details-list a:hover {
    color: var(--heading-color);
}
.contact-details-list i {
    color: var(--primary-color);
    margin-right: 8px;
}
.contact-content-part .single-contact {
    margin-bottom: 24px;
}
.contact-content-part .about-social ul {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.contact-content-part .about-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--heading-color);
}
.contact-content-part .about-social a:hover {
    background: var(--heading-color);
    color: #000;
}
.contact-image-window {
    margin-top: auto;
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.contact-image-stage {
    position: relative;
    flex: 1;
    min-height: 180px;
}
.contact-content-part .contact-image-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin-bottom: 0;
}
.contact-image-stage:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6));
}
.contact-image-caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 2;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.contact-form-area {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.22);
}
.contact-form-area .mock-window-bar {
    background: var(--card-bg);
    padding: 18px 30px;
}
.contact-form-area .mock-window-title {
    margin-left: 0;
}
.contact-form-area form {
    padding: 26px 30px 10px;
}
.contact-form-area .form-group label {
    color: var(--text-color);
    text-transform: none;
    font-size: 13px;
    margin-bottom: 8px;
}
.contact-form-area .form-group .form-control,
.contact-form-area .form-group .form-control:focus {
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
}
.contact-form-area .form-group .form-control:focus {
    border-color: var(--primary-color);
}
.contact-form-area .form-group .form-control::placeholder {
    color: #6e6e73;
}
.contact-form-area .form-group input[type=text] {
    color: var(--heading-color);
}
.contact-form-area .form-group .for-icon {
    color: #6e6e73;
}
.contact-form-area .theme-btn {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.main-footer {
    background: #000 !important;
    border-top: 1px solid var(--card-border);
}
.footer-top h2 {
    font-size: 56px;
    text-transform: none;
}
.footer-top h2 a {
    color: var(--heading-color);
    -webkit-text-fill-color: currentColor;
}
.footer-top h2 a:hover {
    color: var(--primary-color);
}
.footer-top p {
    color: var(--text-color);
    font-size: 16px;
}
p.copy-left-text,
p.copy-right-text {
    color: var(--muted-color);
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    :root { --section-space: 90px; }
    .hero-meta { display: none; }
    .section-title h2 { font-size: 34px; }
    .services-lede { max-width: none; margin-left: 0; margin-top: 16px; }
    .about-image { margin: 40px 0; }
    .footer-top h2 { font-size: 30px; }
    .contact-form-area { margin-top: 30px; }
    .contact-area { --fade-h: 220px; }
}

/* ---------------------------------------------------------------------
   Scroll reveal — text fades/slides in, tiles settle into place with a
   soft scale-up. Classes are applied by assets/js/reveal.js via
   IntersectionObserver, one-shot per element.
   --------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-scale {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------------------------------------------------------------------
   Services + hands: one pinned scene (services-scene.js). The cards appear one
   after another, then the hands move in and touch; the page only scrolls on
   when both are done. Below the scene the white fades smoothly into black.
   --------------------------------------------------------------------- */
.services-area {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 84px;
    padding-bottom: 12px;
    overflow: hidden;
}
.services-scene {
    min-height: calc(100svh - 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform-origin: 0 0;
}
.services-intro { margin-bottom: 30px; }
.hands-stage {
    /* as wide as the service cards (it sits in the same container) and as high
       as the picture needs; the scene is scaled down by services-scene.js when
       the screen is too low for everything */
    position: relative;
    width: 100%;
    aspect-ratio: 2560 / 866;
    margin-top: 22px;
    overflow: hidden;
}
.hands-still,
.hands-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* the arms fade out softly at the sides where the picture ends */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hands-canvas { display: none; }
.hands-stage.has-scrub .hands-canvas { display: block; }
.hands-stage.has-scrub .hands-still { display: none; }
.hands-fade {
    --hands-fade: 260px;
    height: var(--hands-fade);
    background: linear-gradient(180deg, #fff 0, rgb(248,248,248) 10%, rgb(228,228,228) 20%, rgb(200,200,200) 30%, rgb(165,165,165) 40%, rgb(128,128,128) 50%, rgb(90,90,90) 60%, rgb(55,55,55) 70%, rgb(27,27,27) 80%, rgb(7,7,7) 90%, rgb(0,0,0) 100%);
}
@media (max-width: 767px) {
    .hands-fade { --hands-fade: 160px; }
    .services-area { padding-top: 76px; }
    .services-intro { margin-bottom: 16px; }
    .services-lede { font-size: 14px; line-height: 1.5; margin-top: 10px; }
    /* two compact columns so all four cards and the hands fit on one screen */
    .services-grid { --bs-gutter-x: 0.6rem; --bs-gutter-y: 0.6rem; }
    .services-grid > div { flex: 0 0 auto; width: 50%; }
    .services-grid .service-item .mock-window-bar { padding: 14px 14px 0; }
    .service-item-body { padding: 8px 14px 0; }
    .service-item-body h4 { font-size: 16px; margin-bottom: 6px; }
    .service-item-body p { font-size: 12px; line-height: 1.45; }
    .service-item-media { padding: 14px 14px 14px; min-height: 0; }
    .services-grid .service-item .service-item-icon { font-size: 26px; }
    .service-item-link { right: 10px; bottom: 10px; width: 30px; height: 30px; }
    /* phones: the picture is shown larger than the screen is wide so the hands stay big */
    .hands-stage { aspect-ratio: auto; height: 40vw; margin-top: 10px; }
    .hands-still,
    .hands-canvas { height: auto; width: 128%; left: 50%; top: 0; transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   All-white page. Only the theme colours are swapped, the structure stays the
   same.
   --------------------------------------------------------------------- */
body.page-light {
    --text-color: #48484a;
    --heading-color: #0b0b0c;
    --subtitle-color: #48484a;
    --lighter-color: #0b0b0c;
    --muted-color: #6e6e73;
    --primary-color: #0066cc;
    --body-background: #ffffff;
    --border-color: rgba(0, 0, 0, 0.12);
    --button-border: #0b0b0c;
    --card-bg: #f5f5f7;
    --card-border: rgba(0, 0, 0, 0.08);
    --field-bg: #ececef;
    color: var(--text-color);
}
.page-light .theme-btn { color: #fff; }
.page-light .contact-area .theme-btn { color: #000; }
.page-light .hands-fade { display: none; }
.page-light .scroller__inner img { filter: brightness(0); opacity: 0.55; }
.page-light .logo-text,
.page-light .logo-agon { color: #0b0b0c; opacity: 0.55; }
.page-light .projects-prev:hover,
.page-light .projects-next:hover { color: #fff; }
.page-light .contact-content-part .about-social a:hover { color: #000; }


/* Dark service cards on the white section (?cards=light switches back to the light ones) */
.cards-dark .services-grid .service-item {
    --text-color: #a1a1a6;
    --heading-color: #f5f5f7;
    --muted-color: #86868b;
    --primary-color: #2997ff;
    --card-bg: #161617;
    --card-border: rgba(255, 255, 255, 0.09);
    --field-bg: #1d1d1f;
    color: var(--text-color);
}
.cards-dark .services-grid .service-item:hover { border-color: rgba(255, 255, 255, 0.2); }
.cards-dark .service-item-body h4 {
    background-image: linear-gradient(0deg, #a9a9ac 17%, #ffffff 63%);
}
.cards-dark .service-item-link { background: rgba(255, 255, 255, 0.08); }
.cards-dark .service-item-link:hover { color: #fff; background: var(--primary-color); }